@moises.ai/design-system 3.10.16 → 3.10.18

package/package.json

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

package/src/components/SetlistList/SetlistList.jsx

@@ -55,6 +55,7 @@ function SetlistExpandButton({
 function NewSetlistButton({
   onClick,
   className,
+  style,
   collapsed = false,
   text = 'New Setlist',
 }) {
@@ -76,12 +77,9 @@ function NewSetlistButton({
         </div>
       }
       text={text}
-      className={classNames(
-        styles.newSetlistItemButton,
-        styles.collapsedTransition,
-        className,
-      )}
+      className={classNames(styles.newSetlistItemButton, className)}
       collapsed={collapsed}
+      style={style}
     />
   )
 }
@@ -307,66 +305,86 @@ export const SetlistList = ({
     onNewSetlistClick?.()
     if (isMobileDrawer) close()
   }
+
   const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
   const [isShrinking, setIsShrinking] = useState(false)
-  const hoverTimeoutRef = useRef(null)
+  const [isExpanding, setIsExpanding] = useState(false)
+  const [isCollapseTransitioning, setIsCollapseTransitioning] = useState(false)
   const shrinkTimeoutRef = useRef(null)
+  const expandTimeoutRef = useRef(null)
   const hoverRegionRef = useRef(null)
-  const shrinkDuration = 260
+  const prevCollapsedRef = useRef(collapsed)
+  const staggerBaseDelay = 50
+  const staggerItemDuration = 200
   const collapsedItemHeight = 44
   const collapsedVisibleOffset = 4
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
-  const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
-  const visibleSetlists = showCollapsedStack
-    ? setlists.slice(0, maxCollapsedItems)
-    : setlists
+  const showCollapsedStack =
+    collapsed && !isHoveredWhenCollapsed && !isCollapseTransitioning
+  const visibleSetlists = setlists
+
+  const totalAnimatedItems = setlists.length + (onNewSetlistClick ? 1 : 0)
+  const slideItemCount = Math.min(4, totalAnimatedItems)
+  const slideTotalDuration =
+    staggerItemDuration + Math.max(0, slideItemCount - 1) * staggerBaseDelay
+  const staggerTotalDuration = slideTotalDuration
 
-  const leaveCollapseDelay = 2750
+  const expandItems = () => {
+    if (shrinkTimeoutRef.current) {
+      clearTimeout(shrinkTimeoutRef.current)
+      shrinkTimeoutRef.current = null
+    }
+    if (expandTimeoutRef.current) {
+      clearTimeout(expandTimeoutRef.current)
+      expandTimeoutRef.current = null
+    }
+    setIsShrinking(false)
+    setIsExpanding(true)
+    setIsHoveredWhenCollapsed(true)
+    expandTimeoutRef.current = setTimeout(() => {
+      setIsExpanding(false)
+      expandTimeoutRef.current = null
+    }, staggerTotalDuration)
+  }
 
   const handleMouseEnter = () => {
     if (!collapsed) return
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current)
-      hoverTimeoutRef.current = null
-    }
     if (shrinkTimeoutRef.current) {
       clearTimeout(shrinkTimeoutRef.current)
       shrinkTimeoutRef.current = null
     }
-    setIsShrinking(false)
+    if (isShrinking) {
+      setIsShrinking(false)
+    } else if (!isHoveredWhenCollapsed) {
+      expandItems()
+    }
   }
 
   const handleMouseLeave = () => {
     if (!collapsed) return
     if (!isHoveredWhenCollapsed) return
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current)
+    if (expandTimeoutRef.current) {
+      clearTimeout(expandTimeoutRef.current)
+      expandTimeoutRef.current = null
     }
-    hoverTimeoutRef.current = setTimeout(() => {
-      hoverTimeoutRef.current = null
-      setIsShrinking(true)
-      shrinkTimeoutRef.current = setTimeout(() => {
-        shrinkTimeoutRef.current = null
-        setIsHoveredWhenCollapsed(false)
-        setIsShrinking(false)
-      }, shrinkDuration)
-    }, leaveCollapseDelay)
+    setIsExpanding(false)
+    setIsShrinking(true)
+    shrinkTimeoutRef.current = setTimeout(() => {
+      shrinkTimeoutRef.current = null
+      setIsHoveredWhenCollapsed(false)
+      setIsShrinking(false)
+    }, staggerTotalDuration)
   }
 
   const handleSetlistIconClick = (e) => {
     if (!collapsed) return
     e.stopPropagation()
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current)
-      hoverTimeoutRef.current = null
-    }
-    setIsShrinking(false)
-    setIsHoveredWhenCollapsed(true)
+    expandItems()
   }
 
   const handleFocus = () => {
-    if (collapsed) setIsHoveredWhenCollapsed(true)
+    if (collapsed && !isHoveredWhenCollapsed) expandItems()
   }
 
   const handleBlur = () => {
@@ -380,10 +398,47 @@ export const SetlistList = ({
     }, 0)
   }
 
+  if (prevCollapsedRef.current !== collapsed) {
+    const wasCollapsed = prevCollapsedRef.current
+    prevCollapsedRef.current = collapsed
+
+    if (collapsed && !wasCollapsed) {
+      setIsCollapseTransitioning(true)
+      setIsExpanding(false)
+      setIsShrinking(true)
+    } else if (!collapsed && wasCollapsed) {
+      setIsHoveredWhenCollapsed(false)
+      setIsCollapseTransitioning(true)
+      setIsShrinking(false)
+      setIsExpanding(true)
+    }
+  }
+
+  useEffect(() => {
+    if (!isCollapseTransitioning) return
+
+    if (shrinkTimeoutRef.current) {
+      clearTimeout(shrinkTimeoutRef.current)
+      shrinkTimeoutRef.current = null
+    }
+    if (expandTimeoutRef.current) {
+      clearTimeout(expandTimeoutRef.current)
+      expandTimeoutRef.current = null
+    }
+
+    const id = setTimeout(() => {
+      setIsCollapseTransitioning(false)
+      setIsShrinking(false)
+      setIsExpanding(false)
+    }, staggerTotalDuration)
+
+    return () => clearTimeout(id)
+  }, [isCollapseTransitioning, staggerTotalDuration])
+
   useEffect(() => {
     return () => {
-      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)
       if (shrinkTimeoutRef.current) clearTimeout(shrinkTimeoutRef.current)
+      if (expandTimeoutRef.current) clearTimeout(expandTimeoutRef.current)
     }
   }, [])
 
@@ -406,6 +461,13 @@ export const SetlistList = ({
       '0 3.401px 13.603px -6.801px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.551px 10.202px -3.401px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.701px 2.551px -1.701px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
     ]
 
+    const narrowingPerLevel = 1
+    const scale =
+      stackPosition === 0
+        ? 1
+        : (collapsedItemHeight - stackPosition * narrowingPerLevel * 2) /
+          collapsedItemHeight
+
     return {
       position: 'relative',
       marginTop:
@@ -414,9 +476,65 @@ export const SetlistList = ({
           : -(collapsedItemHeight - collapsedVisibleOffset),
       zIndex,
       boxShadow: boxShadows[index],
+      transform: scale < 1 ? `scaleX(${scale})` : undefined,
     }
   }
 
+  const isStaggerActive =
+    (collapsed && !showCollapsedStack) || isCollapseTransitioning
+  const itemCollapsed = collapsed || isCollapseTransitioning
+
+  const getStaggerStyle = (itemIndex) => {
+    if (!isStaggerActive) return undefined
+    const isSlideItem = itemIndex < slideItemCount
+
+    if (isShrinking) {
+      if (isSlideItem) {
+        const outY = -(
+          itemIndex *
+          (collapsedItemHeight - collapsedVisibleOffset)
+        )
+        const outScale =
+          itemIndex === 0
+            ? 1
+            : (collapsedItemHeight - itemIndex * 2) / collapsedItemHeight
+        return {
+          animationDelay: `${itemIndex * staggerBaseDelay}ms`,
+          '--stagger-out-y': `${outY}px`,
+          '--stagger-out-scale': outScale,
+          zIndex: totalAnimatedItems - itemIndex,
+        }
+      }
+      return {
+        '--fade-duration': `${slideTotalDuration}ms`,
+        zIndex: totalAnimatedItems - itemIndex,
+      }
+    }
+    if (isExpanding) {
+      if (isSlideItem) {
+        const inY = -(
+          itemIndex *
+          (collapsedItemHeight - collapsedVisibleOffset)
+        )
+        const inScale =
+          itemIndex === 0
+            ? 1
+            : (collapsedItemHeight - itemIndex * 2) / collapsedItemHeight
+        return {
+          animationDelay: `${(slideItemCount - 1 - itemIndex) * staggerBaseDelay}ms`,
+          '--stagger-in-y': `${inY}px`,
+          '--stagger-in-scale': inScale,
+          zIndex: totalAnimatedItems - itemIndex,
+        }
+      }
+      return {
+        '--fade-duration': `${slideTotalDuration}ms`,
+        zIndex: totalAnimatedItems - itemIndex,
+      }
+    }
+    return undefined
+  }
+
   return (
     <ScrollArea
       type="scroll"
@@ -439,7 +557,6 @@ export const SetlistList = ({
           className={classNames(styles.setlistsContent, {
             [styles.collapsedStack]: showCollapsedStack,
             [styles.collapsedMask]: collapsed,
-            [styles.collapsedShrinking]: isShrinking,
           })}
         >
           {onNewSetlistClick &&
@@ -458,13 +575,20 @@ export const SetlistList = ({
             ) : (
               <NewSetlistButton
                 onClick={handleNewSetlistClick}
-                className={styles.collapsedTransition}
-                collapsed={collapsed}
+                className={classNames({
+                  [styles.staggerItem]: isStaggerActive,
+                  [styles.staggerAnimateIn]: isStaggerActive && isExpanding,
+                  [styles.staggerAnimateOut]: isStaggerActive && isShrinking,
+                })}
+                style={getStaggerStyle(0)}
+                collapsed={itemCollapsed}
                 text={newSetlistButtonText}
               />
             ))}
           {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
+            const itemStaggerIndex = index + collapsedNewItemOffset
+            const isSlideItem = itemStaggerIndex < slideItemCount
             const setlistItem = (
               <SetlistItem
                 isSelected={isSelected}
@@ -473,9 +597,7 @@ export const SetlistList = ({
                 droppable={droppable}
                 isDropTarget={activeDropSetlistId === setlist.id}
                 dndDroppableId={
-                  enableDndDropTargets
-                    ? `setlist:${setlist.id}`
-                    : undefined
+                  enableDndDropTargets ? `setlist:${setlist.id}` : undefined
                 }
                 onDragOver={(event) => {
                   onSetlistDragOver?.(setlist.id, event)
@@ -499,13 +621,30 @@ export const SetlistList = ({
                 text={setlist.label}
                 subtitle={setlist.subtitle}
                 dropdownMenuOptions={setlist.dropdownMenuOptions}
-                collapsed={collapsed}
+                collapsed={itemCollapsed}
                 isMobile={isMobile}
                 className={classNames({
                   [styles.collapsedStackItem]: showCollapsedStack,
-                  [styles.collapsedTransition]: collapsed,
+                  [styles.collapsedTransition]: collapsed && showCollapsedStack,
+                  [styles.staggerItem]: isStaggerActive,
+                  [styles.staggerAnimateIn]:
+                    isStaggerActive && isExpanding && isSlideItem,
+                  [styles.staggerAnimateOut]:
+                    isStaggerActive && isShrinking && isSlideItem,
+                  [styles.fadeAnimateIn]:
+                    isStaggerActive && isExpanding && !isSlideItem,
+                  [styles.fadeAnimateOut]:
+                    isStaggerActive && isShrinking && !isSlideItem,
+                  [styles.fadeHidden]:
+                    !isSlideItem &&
+                    collapsed &&
+                    !isHoveredWhenCollapsed &&
+                    !isCollapseTransitioning,
                 })}
-                style={getCollapsedStackStyle(index)}
+                style={{
+                  ...getCollapsedStackStyle(index),
+                  ...getStaggerStyle(itemStaggerIndex),
+                }}
               />
             )
             return collapsed && !showCollapsedStack ? (

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

@@ -157,7 +157,7 @@
   background: var(--neutral-alpha-3);
 
   &.collapsed {
-    /* background: transparent; */
+    background: transparent;
 
     .avatarSetlist {
       background: var(--neutral-2);
@@ -165,8 +165,6 @@
 
     &:hover,
     &.menuOpen {
-      background: transparent !important;
-
       .avatarSetlist {
         background: var(--neutral-2) !important;
       }
@@ -265,6 +263,21 @@ sectionTitle {
   position: relative;
 }
 
+.collapsedStack .collapsedStackItem:not(:first-child) {
+  background: transparent !important;
+  pointer-events: none;
+}
+
+.collapsedStack .collapsedStackItem:not(:first-child) .avatarSetlist::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: #11111399;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 2;
+}
+
 .setlistExpandButton {
   display: flex;
   align-items: center;
@@ -298,8 +311,7 @@ sectionTitle {
   transition: max-height 260ms ease-in-out;
 }
 
-.collapsedMask.collapsedStack,
-.collapsedMask.collapsedShrinking {
+.collapsedMask.collapsedStack {
   overflow: hidden;
   max-height: 120px;
 }
@@ -312,6 +324,69 @@ sectionTitle {
   transition: margin-top 260ms ease-in-out;
 }
 
+@keyframes staggerIn {
+  from {
+    transform: translateY(var(--stagger-in-y, 0)) scaleX(var(--stagger-in-scale, 1));
+  }
+  to {
+    transform: translateY(0) scaleX(1);
+  }
+}
+
+@keyframes staggerOut {
+  from {
+    transform: translateY(0) scaleX(1);
+  }
+  to {
+    transform: translateY(var(--stagger-out-y, 0)) scaleX(var(--stagger-out-scale, 1));
+  }
+}
+
+.staggerItem {
+  opacity: 1;
+  transform: translateY(0);
+  transition: margin-top 260ms ease-in-out;
+}
+
+.staggerAnimateIn {
+  animation: staggerIn 200ms ease-out both;
+}
+
+.staggerAnimateOut {
+  animation: staggerOut 200ms ease-out both;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeAnimateIn {
+  animation: fadeIn var(--fade-duration, 300ms) ease-out both;
+}
+
+.fadeAnimateOut {
+  animation: fadeOut var(--fade-duration, 300ms) ease-out both;
+}
+
+.fadeHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
 .contentInner {
   gap: 12px;
   flex: 1;