@moises.ai/design-system 4.16.3 → 4.16.4

package/dist/index.js

@@ -2476,16 +2476,22 @@ const jm = "_menuContent_rvu92_1", Gm = "_menuSubContent_rvu92_2", Ym = "_slideD
               ]
             }
           ),
-          /* @__PURE__ */ s(n.SubContent, { className: $.menuSubContent, children: (d = r == null ? void 0 : r.children) == null ? void 0 : d.map(
-            (u) => t(
-              u,
-              a,
-              o,
-              i,
-              l,
-              c
-            )
-          ) })
+          /* @__PURE__ */ s(
+            n.SubContent,
+            {
+              className: k($.menuSubContent, r.subContentClassName),
+              children: (d = r == null ? void 0 : r.children) == null ? void 0 : d.map(
+                (u) => t(
+                  u,
+                  a,
+                  o,
+                  i,
+                  l,
+                  c
+                )
+              )
+            }
+          )
         ] }, r.key);
       case "item":
         return /* @__PURE__ */ C(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.16.3",
+  "version": "4.16.4",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -93,6 +93,7 @@ The \`options\` prop accepts an array of objects with the following types:
   label: 'Submenu Label', // Text to display
   children: [], // Array of menu items for the submenu
   color: 'red' | 'cyan', // Optional: custom color for this submenu trigger
+  subContentClassName: 'my-submenu', // Optional: extra className applied to the submenu content (portalized), useful for overriding upstream styles per submenu instance
 }
 \`\`\`
 

package/src/lib/menu/renderItem.jsx

@@ -80,7 +80,9 @@ export const createRenderItem = (MenuPrimitives) => {
               </div>
             </MenuPrimitives.SubTrigger>
 
-            <MenuPrimitives.SubContent className={styles.menuSubContent}>
+            <MenuPrimitives.SubContent
+              className={classNames(styles.menuSubContent, opt.subContentClassName)}
+            >
               {opt?.children?.map((child) =>
                 renderItem(
                   child,