@moises.ai/design-system 3.9.23 → 3.9.25

package/package.json

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

package/src/components/DataTable/DataTable.module.css

@@ -370,8 +370,8 @@
 @media (max-width: 500px) {
   .DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
   .DataTable :global(.rt-TableCell:nth-child(2)) {
-    max-width: 200px;
-    min-width: 200px;
+    max-width: 180px;
+    min-width: 100px;
   }
 }
 

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -1,7 +1,7 @@
 import { ScrollArea } from '@radix-ui/themes'
 import classNames from 'classnames'
 import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
 import { createRenderItem, styles } from '../../lib/menu'
 import { Theme } from '../theme/Theme'
 
@@ -20,8 +20,16 @@ export const DropdownMenu = memo(
     closeOnSelect = true,
     sideOffset = 5,
     matchTriggerWidth = false,
+    wrapCloseMenu,
     ...props
   }) => {
+    const isControlled = props.open !== undefined
+    const [internalOpen, setInternalOpen] = useState(false)
+    const open = isControlled ? props.open : internalOpen
+    const onOpenChange = isControlled ? props.onOpenChange : setInternalOpen
+    const baseClose = () => onOpenChange(false)
+    const closeMenu = wrapCloseMenu ? wrapCloseMenu(baseClose) : baseClose
+
     const contentStyle = {
       ...(matchTriggerWidth && {
         width: 'var(--radix-dropdown-menu-trigger-width)',
@@ -34,8 +42,8 @@ export const DropdownMenu = memo(
         {options?.length > 0 && (
           <DropdownMenuRadix.Root
             {...props}
-            open={disabled ? false : props.open}
-            onOpenChange={disabled ? undefined : props.onOpenChange}
+            open={disabled ? false : open}
+            onOpenChange={disabled ? undefined : onOpenChange}
           >
             <DropdownMenuRadix.Trigger
               asChild
@@ -72,6 +80,7 @@ export const DropdownMenu = memo(
                         size,
                         onSelectionChange,
                         closeOnSelect,
+                        closeMenu,
                       ),
                     )}
                   </ScrollArea>
@@ -100,6 +109,7 @@ export const DropdownMenu = memo(
                       size,
                       onSelectionChange,
                       closeOnSelect,
+                      closeMenu,
                     ),
                   )}
                 </DropdownMenuRadix.Content>

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -24,6 +24,13 @@ export const ProfileMenu = ({
     if (isMobile) close()
   }
 
+  const wrapCloseMenu = isMobile
+    ? (baseClose) => () => {
+        baseClose()
+        close()
+      }
+    : undefined
+
   const trigger = <MenuTrigger user={user} collapsed={collapsed} />
   return (
     <DropdownMenu
@@ -42,6 +49,7 @@ export const ProfileMenu = ({
       options={menuOptions}
       side={isMobileViewport ? 'top' : 'right'}
       {...props}
+      wrapCloseMenu={wrapCloseMenu}
       onSelectionChange={handleSelectionChange}
     />
   )

package/src/components/ProfileMenu/ProfileMenu.stories.jsx

@@ -18,7 +18,7 @@ export const Default = {
       {
         type: 'custom',
         key: 'credits-header',
-        customRender: () => <div key="credits-header">
+        customRender: (closeMenu) => <div key="credits-header">
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="showActiveTrigger">
             <div>
               <Text style={{ fontSize: 14, fontWeight: 'normal', lineHeight: '20px' }}>Credits:</Text>{` `}
@@ -31,6 +31,7 @@ export const Default = {
               title="Upgrade"
               style={{ border: 'none', cursor: 'pointer', backgroundColor: '#00dae8', color: '#061415', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
               onClick={() => {
+                closeMenu?.()
                 alert('Upgrade clicked')
               }}
             >

package/src/components/SetlistList/SetlistList.module.css

@@ -223,8 +223,11 @@ sectionTitle {
 
 .setlistsContent {
   /* gap: 4px; */
-  margin: 1px 0;
-  /* padding-bottom: 16px; */
+  /* margin: 1px 0; */
+  /* margin: 1px 0 16px 0; */
+  margin: 1px 0 16px 0;
+
+  /* padding-bottom: 15px; */
 }
 
 .scrollShadow {

package/src/components/Shell/Shell.stories.jsx

@@ -84,6 +84,30 @@ export const Default = {
       name: 'Alex Smith',
       plan: 'Premium',
       menuOptions: [
+        {
+          type: 'custom',
+          key: 'credits-header',
+          customRender: (closeMenu) => (
+            <div key="credits-header">
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="showActiveTrigger">
+                <Text as="span" style={{ fontSize: 14, fontWeight: 'normal', lineHeight: '20px' }}>Credits: </Text>
+                <Text as="span" style={{ color: 'var(--gray-12)', fontSize: 14 }}>45/60</Text>
+                <button
+                  type="button"
+                  aria-label="Upgrade"
+                  style={{ border: 'none', cursor: 'pointer', backgroundColor: 'var(--cyan-9)', color: 'var(--gray-1)', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
+                  onClick={() => {
+                    closeMenu?.()
+                    console.log('Upgrade clicked - menu should close')
+                  }}
+                >
+                  Upgrade
+                </button>
+              </div>
+            </div>
+          ),
+        },
+        { type: 'separator', key: 'sep-credits' },
         {
           type: 'item',
           key: 'account-settings',

package/src/lib/menu/renderItem.jsx

@@ -14,6 +14,7 @@ export const createRenderItem = (MenuPrimitives) => {
     size = '2',
     onSelectionChange,
     closeOnSelect = true,
+    closeMenu,
   ) => {
     switch (opt.type) {
       case 'custom':
@@ -33,7 +34,7 @@ export const createRenderItem = (MenuPrimitives) => {
             disabled={opt.disabled}
             asChild
           >
-            {opt.customRender()}
+            {opt.customRender(closeMenu)}
           </MenuPrimitives.Item>
         )
 
@@ -79,7 +80,7 @@ export const createRenderItem = (MenuPrimitives) => {
 
             <MenuPrimitives.SubContent className={styles.menuSubContent}>
               {opt?.children?.map((child) =>
-                renderItem(child, size, onSelectionChange, closeOnSelect),
+                renderItem(child, size, onSelectionChange, closeOnSelect, closeMenu),
               )}
             </MenuPrimitives.SubContent>
           </MenuPrimitives.Sub>