@moises.ai/design-system 3.9.24 → 3.9.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.24",
+  "version": "3.9.26",
   "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/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -1,112 +1,36 @@
-import { useState } from 'react'
 import classNames from 'classnames'
-
-const palettes = {
-  lyrics: ['#0f2a4f', '#1a3a6b', '#2a5a8b', '#1a4a7b', '#3a6a9b', '#152e55'],
-  stems: ['#083a48', '#0a4a5a', '#1a5a6a', '#0f3a4a', '#2a6a7a', '#1a6070'],
-  voice: ['#3a1a0a', '#5a2a10', '#7a3a1a', '#4a2010', '#8a4a2a', '#6a3018'],
-  studio: ['#083838', '#0a4a4a', '#1a5a5a', '#0a3a3a', '#2a6a6a', '#0f5050'],
-  master: ['#1a1030', '#2a1a4a', '#3a2a5a', '#4a3a6a', '#2a1848', '#352060'],
-}
-
-function hashSeed(str) {
-  let h = 0
-  for (let i = 0; i < str.length; i++) {
-    h = (Math.imul(31, h) + str.charCodeAt(i)) | 0
-  }
-  return h >>> 0
-}
-
-function createRng(seed) {
-  let s = hashSeed(String(seed))
-  return () => {
-    s = (s + 0x6d2b79f5) | 0
-    let t = Math.imul(s ^ (s >>> 15), 1 | s)
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-function generatePattern(type, seed) {
-  const rng = createRng(seed)
-  const colors = palettes[type] || palettes.lyrics
-  const pick = () => colors[Math.floor(rng() * colors.length)]
-
-  const bg = pick()
-
-  const blobCount = 6 + Math.floor(rng() * 3)
-  const blobs = Array.from({ length: blobCount }, () => {
-    const midStop = 10 + Math.floor(rng() * 20)
-    return {
-      x: -20 + rng() * 140,
-      y: -20 + rng() * 140,
-      size: 140 + rng() * 120,
-      fill: pick(),
-      midStop,
-    }
-  })
-
-  return { bg, blobs }
-}
+import lyrics from './Patterns/thumb-song-lyrics.jpg'
+import mastering from './Patterns/thumb-song-master.jpg'
+import stems from './Patterns/thumb-song-stems.jpg'
+import studio from './Patterns/thumb-song-studio.jpg'
+import voice from './Patterns/thumb-song-voice.jpg'
 
 export const ProductsBrandPattern = ({
   className,
   size = '40px',
   type = 'lyrics',
   cover,
-  title,
   ...props
 }) => {
-  const [randomSeed] = useState(() => String(Math.random()))
-
-  if (cover) {
-    return (
-      <img
-        src={cover}
-        alt={`${type} pattern`}
-        width={size}
-        height={size}
-        draggable={false}
-        className={classNames(className)}
-        {...props}
-      />
-    )
+  const patterns = {
+    'stems': stems,
+    'voice': voice,
+    'studio': studio,
+    'master': mastering,
+    'lyrics': lyrics,
   }
 
-  const effectiveSeed = title != null ? title : randomSeed
-  const { bg, blobs } = generatePattern(type, effectiveSeed)
-
+  const pattern = cover || patterns[type]
   return (
-    <div
-      aria-label={`${type} pattern`}
-      role="img"
+    <img
+      src={pattern}
+      alt={`${type} pattern`}
+      width={size}
+      height={size}
+      draggable={false}
       className={classNames(className)}
-      style={{
-        position: 'relative',
-        width: size,
-        height: size,
-        overflow: 'hidden',
-        backgroundColor: bg,
-        flexShrink: 0,
-      }}
       {...props}
-    >
-      {blobs.map((b, i) => (
-        <div
-          key={i}
-          style={{
-            position: 'absolute',
-            left: `${b.x}%`,
-            top: `${b.y}%`,
-            width: `${b.size}%`,
-            height: `${b.size}%`,
-            borderRadius: '50%',
-            background: `radial-gradient(circle, ${b.fill} ${b.midStop}%, transparent 70%)`,
-            transform: 'translate(-50%, -50%)',
-          }}
-        />
-      ))}
-    </div>
+    />
   )
 }
 

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/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>