@rovula/ui 0.1.23 → 0.1.25

package/dist/esm/types/patterns/menu/Menu.d.ts

@@ -14,6 +14,8 @@ export type MenuOption = {
     danger?: boolean;
     checked?: boolean;
     onClick?: () => void;
+    /** data-testid attached to the item element */
+    testId?: string;
 };
 export type MenuItemType = {
     type: "item";

package/dist/index.d.ts

@@ -1379,6 +1379,8 @@ type MenuOption = {
     danger?: boolean;
     checked?: boolean;
     onClick?: () => void;
+    /** data-testid attached to the item element */
+    testId?: string;
 };
 type MenuItemType = {
     type: "item";

package/dist/patterns/menu/Menu.js

@@ -23,7 +23,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(val, opt);
                     (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
                 }
-            }, children: buffer.map((opt) => (_jsx(DropdownMenuRadioItem, { value: opt.value, disabled: opt.disabled, icon: opt.icon, children: opt.label }, opt.value))) }, key));
+            }, children: buffer.map((opt) => (_jsx(DropdownMenuRadioItem, { value: opt.value, disabled: opt.disabled, icon: opt.icon, "data-testid": opt.testId, children: opt.label }, opt.value))) }, key));
     };
     items.forEach((item, index) => {
         var _a;
@@ -54,7 +54,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
             const opt = item.item;
             const isSelected = (_a = opt.checked) !== null && _a !== void 0 ? _a : selectedValues.includes(opt.value);
             if (opt.type === "checkbox") {
-                result.push(_jsx(DropdownMenuCheckboxItem, { checked: isSelected, disabled: opt.disabled, onCheckedChange: () => {
+                result.push(_jsx(DropdownMenuCheckboxItem, { checked: isSelected, disabled: opt.disabled, "data-testid": opt.testId, onCheckedChange: () => {
                         var _a;
                         onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt.value, opt);
                         (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
@@ -62,7 +62,7 @@ function renderMenuItems(items, selectedValues, onSelect) {
                 return;
             }
             // default item
-            result.push(_jsx(DropdownMenuItem, { selected: isSelected, icon: opt.icon, disabled: opt.disabled, className: cn(opt.danger && "text-red-500"), onSelect: () => {
+            result.push(_jsx(DropdownMenuItem, { selected: isSelected, icon: opt.icon, disabled: opt.disabled, className: cn(opt.danger && "text-red-500"), "data-testid": opt.testId, onSelect: () => {
                     var _a;
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt.value, opt);
                     (_a = opt.onClick) === null || _a === void 0 ? void 0 : _a.call(opt);
@@ -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.23",
+  "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

@@ -36,6 +36,8 @@ export type MenuOption = {
   danger?: boolean;
   checked?: boolean;
   onClick?: () => void;
+  /** data-testid attached to the item element */
+  testId?: string;
 };
 
 export type MenuItemType =
@@ -121,6 +123,7 @@ function renderMenuItems(
             value={opt.value}
             disabled={opt.disabled}
             icon={opt.icon as React.ReactNode}
+            data-testid={opt.testId}
           >
             {opt.label}
           </DropdownMenuRadioItem>
@@ -187,6 +190,7 @@ function renderMenuItems(
             key={opt.value}
             checked={isSelected}
             disabled={opt.disabled}
+            data-testid={opt.testId}
             onCheckedChange={() => {
               onSelect?.(opt.value, opt);
               opt.onClick?.();
@@ -206,6 +210,7 @@ function renderMenuItems(
           icon={opt.icon as React.ReactNode}
           disabled={opt.disabled}
           className={cn(opt.danger && "text-red-500")}
+          data-testid={opt.testId}
           onSelect={() => {
             onSelect?.(opt.value, opt);
             opt.onClick?.();
@@ -250,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";