Prevent HoverCardContent click events from bubbling up (#395)

* prevent click events from bubbling up

* versioning

packages/mantle/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",

packages/mantle/src/components/hover-card/hover-card.tsx

@@ -27,7 +27,7 @@ const HoverCardPortal = HoverCardPrimitive.Portal;
 const HoverCardContent = forwardRef<
 	ElementRef<typeof HoverCardPrimitive.Content>,
 	ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, onClick, align = "center", sideOffset = 4, ...props }, ref) => (
 	<HoverCardPortal>
 		<HoverCardPrimitive.Content
 			ref={ref}
@@ -38,6 +38,13 @@ const HoverCardContent = forwardRef<
 				"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2",
 				className,
 			)}
+			onClick={(event) => {
+				/**
+				 * Prevent the click event from propagating up to parent/containing elements
+				 */
+				event.stopPropagation();
+				onClick?.(event);
+			}}
 			{...props}
 		/>
 	</HoverCardPortal>