@rovula/ui 0.1.24 → 0.1.25

package/dist/patterns/menu/Menu.js

@@ -86,7 +86,12 @@ function renderMenuItems(items, selectedValues, onSelect) {
 //   - Full a11y / WAI-ARIA
 //   - Sub-menu support via DropdownMenuSub
 // ---------------------------------------------------------------------------
-export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, testId, }) => (_jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, "data-testid": testId, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }));
+export const Menu = ({ trigger, items, selectedValues = [], onSelect, header, open, onOpenChange, align = "start", side = "bottom", sideOffset = 4, contentClassName, testId, }) => (
+// Stop click events from bubbling through React's portal event system.
+// DropdownMenuContent renders in a DOM portal (document.body) but React
+// synthetic events still bubble through the component tree, so clicks on
+// menu items reach ancestor onClick handlers (e.g. a clickable card).
+_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(DropdownMenuRoot, { open: open, onOpenChange: onOpenChange, children: [trigger && (_jsx(DropdownMenuTrigger, { asChild: true, children: trigger })), _jsxs(DropdownMenuContent, { align: align, side: side, sideOffset: sideOffset, className: contentClassName, "data-testid": testId, children: [header && (_jsx("div", { className: "sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]", children: header })), renderMenuItems(items, selectedValues, onSelect)] })] }) }));
 Menu.displayName = "Menu";
 // ---------------------------------------------------------------------------
 // Re-exports — backward compat for consumers using Menu's sub-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/patterns/menu/Menu.tsx

@@ -255,25 +255,31 @@ export const Menu = ({
   contentClassName,
   testId,
 }: MenuProps) => (
-  <DropdownMenuRoot open={open} onOpenChange={onOpenChange}>
-    {trigger && (
-      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
-    )}
-    <DropdownMenuContent
-      align={align}
-      side={side}
-      sideOffset={sideOffset}
-      className={contentClassName}
-      data-testid={testId}
-    >
-      {header && (
-        <div className="sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">
-          {header}
-        </div>
+  // Stop click events from bubbling through React's portal event system.
+  // DropdownMenuContent renders in a DOM portal (document.body) but React
+  // synthetic events still bubble through the component tree, so clicks on
+  // menu items reach ancestor onClick handlers (e.g. a clickable card).
+  <div onClick={(e) => e.stopPropagation()}>
+    <DropdownMenuRoot open={open} onOpenChange={onOpenChange}>
+      {trigger && (
+        <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
       )}
-      {renderMenuItems(items, selectedValues, onSelect)}
-    </DropdownMenuContent>
-  </DropdownMenuRoot>
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        className={contentClassName}
+        data-testid={testId}
+      >
+        {header && (
+          <div className="sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">
+            {header}
+          </div>
+        )}
+        {renderMenuItems(items, selectedValues, onSelect)}
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
+  </div>
 );
 
 Menu.displayName = "Menu";