@moises.ai/design-system 3.6.3 → 3.6.5

package/package.json

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

package/src/components/AdditionalItems/AdditionalItems.jsx

@@ -1,12 +1,15 @@
 import { Flex, Text } from '@radix-ui/themes'
 import styles from './AdditionalItems.module.css'
 import classNames from 'classnames'
+import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
 
 export const AdditionalItems = ({
   additionalItems,
   collapsed = false,
   selectedAdditionalItemId,
 }) => {
+  const { close, isMobile } = useMobileDrawerContext()
+
   if (!additionalItems) return null
   return (
     <Flex direction="column">
@@ -15,6 +18,10 @@ export const AdditionalItems = ({
           selectedAdditionalItemId !== undefined
             ? selectedAdditionalItemId === item.id
             : item.selected
+        const handleClick = () => {
+          item.onClick?.()
+          if (isMobile) close()
+        }
         return (
           <Flex
             key={item.id || index}
@@ -25,11 +32,11 @@ export const AdditionalItems = ({
               [styles.upgradeItemCollapsed]: collapsed,
               [styles.upgradeItemSelected]: isSelected,
             })}
-            onClick={item.onClick}
+            onClick={handleClick}
             onKeyDown={(e) => {
               if ((e.key === 'Enter' || e.key === ' ') && item.onClick) {
                 e.preventDefault()
-                item.onClick()
+                handleClick()
               }
             }}
           >

package/src/components/ProductsList/ProductsList.jsx

@@ -1,6 +1,7 @@
 import { Flex, Text, Badge } from '@radix-ui/themes'
 import styles from './ProductsList.module.css'
 import classNames from 'classnames'
+import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
 
 export const ProductsList = ({
   products = [],
@@ -8,6 +9,13 @@ export const ProductsList = ({
   onProductClick,
   collapsed,
 }) => {
+  const { close, isMobile } = useMobileDrawerContext()
+
+  const handleProductClick = (product) => {
+    onProductClick?.(product.id, product)
+    if (isMobile) close()
+  }
+
   return (
     <Flex direction="column">
       {products.map((product) => {
@@ -24,11 +32,11 @@ export const ProductsList = ({
               [styles.navItemSelected]: isSelected,
               [styles.collapsed]: collapsed,
             })}
-            onClick={() => onProductClick?.(product.id, product)}
+            onClick={() => handleProductClick(product)}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
-                onProductClick?.(product.id, product)
+                handleProductClick(product)
               }
             }}
           >

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -5,24 +5,32 @@ import { useIsMobileViewport } from '../../utils/useIsMobileViewport'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { MenuTrigger } from './MenuTrigger'
 import styles from './ProfileMenu.module.css'
+import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
 
 export const ProfileMenu = ({
   className,
   user,
   menuOptions = [],
   collapsed,
+  onSelectionChange,
   ...props
 }) => {
-  const isMobile = useIsMobileViewport()
+  const isMobileViewport = useIsMobileViewport()
+  const { close, isMobile } = useMobileDrawerContext()
 
+  const handleSelectionChange = (option) => {
+    onSelectionChange?.(option)
+    if (isMobile) close()
+  }
 
   return (
     <DropdownMenu
       className={classNames(styles.profileMenu, className)}
       trigger={<MenuTrigger user={user} collapsed={collapsed} />}
       options={menuOptions}
-      side={isMobile ? 'left' : 'right'}
+      side={isMobileViewport ? 'top' : 'right'}
       {...props}
+      onSelectionChange={handleSelectionChange}
     />
   )
 }

package/src/components/SetlistList/SetlistList.jsx

@@ -12,13 +12,53 @@ import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
 import { MoreButton } from '../MoreButton/MoreButton'
+import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
+
+const SetlistIconFallback = () => <SetlistIcon width={16} height={16} />
+
+function renderSetlistAvatar(icon) {
+  if (!icon) return <SetlistIconFallback />
+  if (typeof icon === 'string') {
+    return (
+      <Avatar
+        src={icon}
+        fallback={<SetlistIconFallback />}
+        size="3"
+        radius="small"
+      />
+    )
+  }
+  if (Array.isArray(icon)) {
+    if (icon.length === 0) return <SetlistIconFallback />
+    if (icon.length >= 4) {
+      const urls = icon.slice(0, 4)
+      return (
+        <div className={styles.iconGrid}>
+          {urls.map((src, i) => (
+            <div key={i} className={styles.iconGridCell}>
+              <img src={src} alt="" />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return (
+      <Avatar
+        src={icon[0]}
+        fallback={<SetlistIconFallback />}
+        size="3"
+        radius="small"
+      />
+    )
+  }
+  return icon
+}
 
 export const SetlistItem = ({
   isSelected,
   onClick,
   className,
   style,
-  avatarStyle,
   avatar,
   text,
   subtitle,
@@ -29,6 +69,7 @@ export const SetlistItem = ({
   moises = false,
   collapsed = false,
   isMobile = false,
+  onAvatarClick,
 }) => {
   const [isHovering, setIsHovering] = useState(false)
 
@@ -78,14 +119,38 @@ export const SetlistItem = ({
         })}
       >
         {avatar && (
-          <div className={styles.avatarSetlist} style={avatarStyle}>
+          <div
+            className={classNames(styles.avatarSetlist, {
+              [styles.avatarClickable]: onAvatarClick,
+            })}
+            onClick={
+              onAvatarClick
+                ? (e) => {
+                  e.stopPropagation()
+                  onAvatarClick(e)
+                }
+                : undefined
+            }
+            role={onAvatarClick ? 'button' : undefined}
+            tabIndex={onAvatarClick ? 0 : undefined}
+            onKeyDown={
+              onAvatarClick
+                ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    onAvatarClick(e)
+                  }
+                }
+                : undefined
+            }
+          >
             {typeof avatar === 'string' ? (
               <Avatar
                 src={avatar}
                 fallback={<SetlistIcon width={16} height={16} />}
-                // size="3"
+                size="3"
                 radius="small"
-                style={avatarStyle}
               />
             ) : (
               avatar
@@ -150,14 +215,26 @@ export const SetlistList = ({
   collapsed = false,
   isMobile = false,
 }) => {
+  const { close, isMobile: isMobileDrawer } = useMobileDrawerContext()
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
+
+  const handleSetlistClick = (setlistId) => {
+    onSetlistClick?.(setlistId)
+    if (isMobileDrawer) close()
+  }
+
+  const handleNewSetlistClick = () => {
+    onNewSetlistClick?.()
+    if (isMobileDrawer) close()
+  }
   const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
-  const [isFullyCollapsed, setIsFullyCollapsed] = useState(false)
+  const [isShrinking, setIsShrinking] = useState(false)
   const hoverTimeoutRef = useRef(null)
-  const collapseCenterTimeoutRef = useRef(null)
+  const shrinkTimeoutRef = useRef(null)
   const hoverRegionRef = useRef(null)
+  const shrinkDuration = 260
   const collapsedItemHeight = 44
-  const collapsedVisibleOffset = 8
+  const collapsedVisibleOffset = 4
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
   const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
@@ -165,23 +242,47 @@ export const SetlistList = ({
     ? setlists.slice(0, maxCollapsedItems)
     : setlists
 
+  const leaveCollapseDelay = 2750
+
   const handleMouseEnter = () => {
     if (!collapsed) return
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current)
       hoverTimeoutRef.current = null
     }
-    setIsHoveredWhenCollapsed(true)
+    if (shrinkTimeoutRef.current) {
+      clearTimeout(shrinkTimeoutRef.current)
+      shrinkTimeoutRef.current = null
+    }
+    setIsShrinking(false)
   }
+
   const handleMouseLeave = () => {
     if (!collapsed) return
+    if (!isHoveredWhenCollapsed) return
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current)
     }
     hoverTimeoutRef.current = setTimeout(() => {
-      setIsHoveredWhenCollapsed(false)
       hoverTimeoutRef.current = null
-    }, 180)
+      setIsShrinking(true)
+      shrinkTimeoutRef.current = setTimeout(() => {
+        shrinkTimeoutRef.current = null
+        setIsHoveredWhenCollapsed(false)
+        setIsShrinking(false)
+      }, shrinkDuration)
+    }, leaveCollapseDelay)
+  }
+
+  const handleSetlistIconClick = (e) => {
+    if (!collapsed) return
+    e.stopPropagation()
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current)
+      hoverTimeoutRef.current = null
+    }
+    setIsShrinking(false)
+    setIsHoveredWhenCollapsed(true)
   }
 
   const handleFocus = () => {
@@ -199,33 +300,10 @@ export const SetlistList = ({
     }, 0)
   }
 
-  // Só centraliza os avatares depois que a sidebar terminou de colapsar (width 280ms + delay 100ms)
-  const collapseAnimationDuration = 400
-  useEffect(() => {
-    if (showCollapsedStack) {
-      collapseCenterTimeoutRef.current = setTimeout(() => {
-        setIsFullyCollapsed(true)
-        collapseCenterTimeoutRef.current = null
-      }, collapseAnimationDuration)
-    } else {
-      setIsFullyCollapsed(false)
-      if (collapseCenterTimeoutRef.current) {
-        clearTimeout(collapseCenterTimeoutRef.current)
-        collapseCenterTimeoutRef.current = null
-      }
-    }
-    return () => {
-      if (collapseCenterTimeoutRef.current) {
-        clearTimeout(collapseCenterTimeoutRef.current)
-      }
-    }
-  }, [showCollapsedStack])
-
   useEffect(() => {
     return () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current)
-      }
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)
+      if (shrinkTimeoutRef.current) clearTimeout(shrinkTimeoutRef.current)
     }
   }, [])
 
@@ -251,9 +329,7 @@ export const SetlistList = ({
     </div>
   )
 
-  const collapsedStackAvatarSizes = ['38px', '37px', '36px', '35px']
-
-  const getCollapsedStackStyle = (index, setlist) => {
+  const getCollapsedStackStyle = (index) => {
     if (!collapsed) return undefined
     if (!showCollapsedStack) {
       return {
@@ -304,15 +380,16 @@ export const SetlistList = ({
           direction="column"
           className={classNames(styles.setlistsContent, {
             [styles.collapsedStack]: showCollapsedStack,
-            [styles.collapsedStackCentered]: isFullyCollapsed,
             [styles.collapsedMask]: collapsed,
+            [styles.collapsedShrinking]: isShrinking,
           })}
         >
           {onNewSetlistClick &&
             (showCollapsedStack ? (
               <SetlistItem
                 isSelected={false}
-                onClick={onNewSetlistClick}
+                onClick={handleNewSetlistClick}
+                onAvatarClick={handleSetlistIconClick}
                 avatar={renderNewSetlistAvatar()}
                 className={classNames(
                   styles.collapsedStackItem,
@@ -328,7 +405,7 @@ export const SetlistList = ({
             ) : (
               <SetlistItem
                 isSelected={false}
-                onClick={onNewSetlistClick}
+                onClick={handleNewSetlistClick}
                 avatar={renderNewSetlistAvatar()}
                 text="New Setlist"
                 className={classNames(styles.newSetlistItemButton, {
@@ -342,20 +419,12 @@ export const SetlistList = ({
             const setlistItem = (
               <SetlistItem
                 isSelected={isSelected}
-                onClick={() => onSetlistClick?.(setlist.id)}
+                onClick={() => handleSetlistClick(setlist.id)}
                 dropdownMenuOpen={openSetlistMenuId === setlist.id}
                 onDropdownMenuOpenChange={(nextOpen) => {
                   setOpenSetlistMenuId(nextOpen ? setlist.id : null)
                 }}
-                avatar={setlist.icon || <SetlistIcon width={16} height={16} />}
-                avatarStyle={
-                  showCollapsedStack
-                    ? {
-                      width: collapsedStackAvatarSizes[index],
-                      height: collapsedStackAvatarSizes[index],
-                    }
-                    : undefined
-                }
+                avatar={renderSetlistAvatar(setlist.icon)}
                 group={setlist.group}
                 moises={setlist.moises}
                 text={setlist.label}
@@ -367,7 +436,7 @@ export const SetlistList = ({
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed,
                 })}
-                style={getCollapsedStackStyle(index, setlist)}
+                style={getCollapsedStackStyle(index)}
               />
             )
             return collapsed && !showCollapsedStack ? (

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

@@ -21,7 +21,8 @@
 
     &:hover,
     &.menuOpen {
-      background: var(--neutral-alpha-2);
+      background: #212225 !important;
+
       .avatarSetlist {
         background: var(--neutral-alpha-3);
       }
@@ -90,6 +91,34 @@
   z-index: 1;
   }
 
+  .avatarClickable {
+    cursor: pointer;
+  }
+
+  .iconGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    background: var(--neutral-2);
+  }
+
+  .iconGridCell {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .iconGridCell img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   .textNewSetlist {
     max-width: 115px;
     opacity: 1;
@@ -123,12 +152,13 @@
     opacity: 0;
   }
 
+  
   .navItemSelected {
     border-radius: var(--Radius-3-max, 6px);
     background: var(--neutral-alpha-3);
 
     &.collapsed {
-      background: transparent;
+      /* background: transparent; */
 
       .avatarSetlist {
         background: var(--neutral-2);
@@ -201,12 +231,12 @@
   gap: 0;
 }
 
-.collapsedStackCentered {
-  align-items: center;
-}
 .collapsedStackItem {
   position: relative;
   /* justify-content: flex-start; */
+  /* :hover {
+    background: #212225 !important;
+  } */
 }
 
 .collapsedMask {
@@ -214,7 +244,13 @@
   overflow: hidden;
   padding-top: 2px;
   display: flex;
-  
+  max-height: 80vh;
+  transition: max-height 260ms ease-in-out;
+}
+
+.collapsedMask.collapsedStack,
+.collapsedMask.collapsedShrinking {
+  max-height: 120px;
 }
 
 /* .collapsedStack.collapsedMask {
@@ -222,7 +258,7 @@
 } */
 
 .collapsedTransition {
-  transition: margin-top 360ms ease-in-out;
+  transition: margin-top 260ms ease-in-out;
 }
 
 .contentInner {