@moises.ai/design-system 3.6.11 → 3.6.13

package/package.json

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

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
 import React, { memo } from 'react'
 import { createRenderItem, styles } from '../../lib/menu'
+import { Theme } from '../theme/Theme'
 
 const renderOption = createRenderItem(DropdownMenuRadix)
 
@@ -47,6 +48,7 @@ export const DropdownMenu = memo(
             </DropdownMenuRadix.Trigger>
             {maxHeight ? (
               <DropdownMenuRadix.Portal className={styles.menuPortal}>
+                <Theme asChild>
                 <DropdownMenuRadix.Content
                   className={classNames(styles.menuContent, className)}
                   size={size}
@@ -74,9 +76,11 @@ export const DropdownMenu = memo(
                     )}
                   </ScrollArea>
                 </DropdownMenuRadix.Content>
+                </Theme>
               </DropdownMenuRadix.Portal>
             ) : (
               <DropdownMenuRadix.Portal className={styles.menuPortal}>
+                <Theme asChild>
                 <DropdownMenuRadix.Content
                   className={classNames(styles.menuContent, className)}
                   size={size}
@@ -99,6 +103,7 @@ export const DropdownMenu = memo(
                     ),
                   )}
                 </DropdownMenuRadix.Content>
+                </Theme>
               </DropdownMenuRadix.Portal>
             )}
           </DropdownMenuRadix.Root>

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { DropdownMenu } from './DropdownMenu'
 import { IconButton } from '../IconButton/IconButton'
 import { Button } from '../Button/Button'
-import { Flex } from '@radix-ui/themes'
+import { Flex, Switch, Text } from '@radix-ui/themes'
 import {
   DotsVerticalIcon,
   GearIcon,
@@ -416,6 +416,62 @@ export const MatchTriggerWidth = {
   ),
 }
 
+export const CustomWithSwitch = {
+  render: () => {
+    const [access, setAccess] = useState('private')
+    const [allowEdit, setAllowEdit] = useState(true)
+
+    const options = [
+      {
+        type: 'checkbox',
+        key: 'private',
+        label: 'Private',
+        secondaryText: 'Only you can access',
+        secondaryTextPosition: 'bottom',
+        checked: access === 'private',
+        onChange: () => setAccess('private'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'checkbox',
+        key: 'public',
+        label: 'Public',
+        secondaryText: 'Anyone with the link can join.',
+        secondaryTextPosition: 'bottom',
+        checked: access === 'public',
+        onChange: () => setAccess('public'),
+      },
+      {
+        type: 'custom',
+        key: 'allow-edit',
+        customRender: () => (
+          <Flex direction="column" gap="4" width="100%">
+            <Text size="2">Allow members to edit this Setlist</Text>
+            <Switch size="2" checked={allowEdit} onCheckedChange={setAllowEdit} />
+          </Flex>
+        ),
+      },
+    ]
+
+    return (
+      <Flex direction="column" width="280px" gap="4">
+        <DropdownMenu
+          matchTriggerWidth
+          side="bottom"
+          align="start"
+          trigger={
+            <Button variant="soft" style={{ width: '100%', justifyContent: 'space-between' }}>
+              {access === 'private' ? 'Private' : 'Public'}
+              <ChevronDownIcon />
+            </Button>
+          }
+          options={options}
+        />
+      </Flex>
+    )
+  },
+}
+
 const ItemPlaygroundComponent = ({
   size,
   // Item 1

package/src/lib/menu/renderItem.jsx

@@ -18,7 +18,14 @@ export const createRenderItem = (MenuPrimitives) => {
     switch (opt.type) {
       case 'custom':
         return (
-          <div key={opt.key} className={styles.menuItem}>
+          <div
+            key={opt.key}
+            className={classNames(
+              styles.menuItem,
+              styles[`menuItem-size-${size}`],
+            )}
+            data-disabled={opt.disabled ? '' : undefined}
+          >
             {opt.customRender()}
           </div>
         )