@moises.ai/design-system 3.12.2 → 3.12.3

package/package.json

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

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -20,6 +20,7 @@ export const DropdownMenu = memo(
     closeOnSelect = true,
     sideOffset = 5,
     matchTriggerWidth = false,
+    showSelectedItemBackground = true,
     wrapCloseMenu,
     ...props
   }) => {
@@ -87,6 +88,7 @@ export const DropdownMenu = memo(
                           onSelectionChange,
                           closeOnSelect,
                           closeMenu,
+                          showSelectedItemBackground,
                         ),
                       )}
                     </ScrollArea>
@@ -116,6 +118,7 @@ export const DropdownMenu = memo(
                         onSelectionChange,
                         closeOnSelect,
                         closeMenu,
+                        showSelectedItemBackground,
                       ),
                     )}
                   </DropdownMenuRadix.Content>

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

@@ -231,6 +231,58 @@ The \`options\` prop accepts an array of objects with the following types:
         defaultValue: { summary: 'false' },
       },
     },
+    maxHeight: {
+      control: { type: 'number' },
+      description:
+        'Maximum content height. When provided, wraps menu content in a vertical ScrollArea',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    sideOffset: {
+      control: { type: 'number' },
+      description: 'Distance in pixels between trigger and menu content',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '5' },
+      },
+    },
+    showSelectedItemBackground: {
+      control: { type: 'boolean' },
+      description:
+        'When true, checked checkbox items get the selected background style',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    open: {
+      control: { type: 'boolean' },
+      description:
+        'Controlled open state. When defined, menu visibility is controlled externally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onOpenChange: {
+      control: false,
+      description: 'Callback fired whenever open state changes',
+      table: {
+        type: { summary: '(open: boolean) => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    wrapCloseMenu: {
+      control: false,
+      description:
+        'Allows wrapping internal close behavior and receiving a close callback',
+      table: {
+        type: { summary: '(close: () => void) => () => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
   },
 }
 
@@ -416,6 +468,40 @@ export const MatchTriggerWidth = {
   ),
 }
 
+export const CheckboxWithoutSelectedBackground = {
+  args: {
+    showSelectedItemBackground: false,
+    side: 'bottom',
+    align: 'end',
+    trigger: (
+      <IconButton>
+        <DotsVerticalIcon />
+      </IconButton>
+    ),
+    options: [
+      {
+        type: 'checkbox',
+        key: 'option-1',
+        label: 'Voice',
+        checked: true,
+        onChange: (checked) => console.log('Voice:', checked),
+      },
+      {
+        type: 'checkbox',
+        key: 'option-2',
+        label: 'Instrumental',
+        checked: false,
+        onChange: (checked) => console.log('Instrumental:', checked),
+      },
+    ],
+  },
+  render: (args) => (
+    <Flex justify="center" align="start" height="300px">
+      <DropdownMenu {...args} />
+    </Flex>
+  ),
+}
+
 export const CustomWithSwitch = {
   render: () => {
     const [access, setAccess] = useState('private')

package/src/lib/menu/renderItem.jsx

@@ -15,6 +15,7 @@ export const createRenderItem = (MenuPrimitives) => {
     onSelectionChange,
     closeOnSelect = true,
     closeMenu,
+    showSelectedItemBackground = true,
   ) => {
     switch (opt.type) {
       case 'custom':
@@ -81,7 +82,14 @@ export const createRenderItem = (MenuPrimitives) => {
 
             <MenuPrimitives.SubContent className={styles.menuSubContent}>
               {opt?.children?.map((child) =>
-                renderItem(child, size, onSelectionChange, closeOnSelect, closeMenu),
+                renderItem(
+                  child,
+                  size,
+                  onSelectionChange,
+                  closeOnSelect,
+                  closeMenu,
+                  showSelectedItemBackground,
+                ),
               )}
             </MenuPrimitives.SubContent>
           </MenuPrimitives.Sub>
@@ -151,7 +159,8 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles.menuCheckboxItem,
               {
-                [styles.menuItemSelected]: opt.checked,
+                [styles.menuItemSelected]:
+                  opt.checked && showSelectedItemBackground,
                 [styles[`menuItem-size-${size}`]]: size,
                 [styles.red]: opt.color === 'red' && !opt.disabled,
                 [styles.cyan]: opt.color === 'cyan' && !opt.disabled,