@moises.ai/design-system 3.10.16 → 3.10.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.16",
+  "version": "3.10.17",
   "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',
 }) {
@@ -78,10 +79,10 @@ function NewSetlistButton({
       text={text}
       className={classNames(
         styles.newSetlistItemButton,
-        styles.collapsedTransition,
         className,
       )}
       collapsed={collapsed}
+      style={style}
     />
   )
 }
@@ -307,66 +308,82 @@ 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 leaveCollapseDelay = 2750
+  const totalAnimatedItems = setlists.length + (onNewSetlistClick ? 1 : 0)
+  const staggerTotalDuration = staggerItemDuration + totalAnimatedItems * staggerBaseDelay
+
+  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 +397,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)
     }
   }, [])
 
@@ -417,6 +471,30 @@ export const SetlistList = ({
     }
   }
 
+  const isStaggerActive = (collapsed && !showCollapsedStack) || isCollapseTransitioning
+  const itemCollapsed = collapsed || isCollapseTransitioning
+
+  const getStaggerStyle = (itemIndex) => {
+    if (!isStaggerActive) return undefined
+    if (isShrinking) {
+      const outY = -(itemIndex * (collapsedItemHeight - collapsedVisibleOffset))
+      return {
+        animationDelay: `${itemIndex * staggerBaseDelay}ms`,
+        '--stagger-out-y': `${outY}px`,
+        zIndex: totalAnimatedItems - itemIndex,
+      }
+    }
+    if (isExpanding) {
+      const inY = -(itemIndex * (collapsedItemHeight - collapsedVisibleOffset))
+      return {
+        animationDelay: `${(totalAnimatedItems - 1 - itemIndex) * staggerBaseDelay}ms`,
+        '--stagger-in-y': `${inY}px`,
+        zIndex: totalAnimatedItems - itemIndex,
+      }
+    }
+    return undefined
+  }
+
   return (
     <ScrollArea
       type="scroll"
@@ -439,7 +517,6 @@ export const SetlistList = ({
           className={classNames(styles.setlistsContent, {
             [styles.collapsedStack]: showCollapsedStack,
             [styles.collapsedMask]: collapsed,
-            [styles.collapsedShrinking]: isShrinking,
           })}
         >
           {onNewSetlistClick &&
@@ -458,8 +535,13 @@ 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}
               />
             ))}
@@ -499,13 +581,19 @@ 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,
+                  [styles.staggerAnimateOut]: isStaggerActive && isShrinking,
                 })}
-                style={getCollapsedStackStyle(index)}
+                style={{
+                  ...getCollapsedStackStyle(index),
+                  ...getStaggerStyle(index + collapsedNewItemOffset),
+                }}
               />
             )
             return collapsed && !showCollapsedStack ? (

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

@@ -298,8 +298,7 @@ sectionTitle {
   transition: max-height 260ms ease-in-out;
 }
 
-.collapsedMask.collapsedStack,
-.collapsedMask.collapsedShrinking {
+.collapsedMask.collapsedStack {
   overflow: hidden;
   max-height: 120px;
 }
@@ -312,6 +311,35 @@ sectionTitle {
   transition: margin-top 260ms ease-in-out;
 }
 
+@keyframes staggerIn {
+  from {
+    transform: translateY(var(--stagger-in-y, 0));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes staggerOut {
+  to {
+    transform: translateY(var(--stagger-out-y, 0));
+  }
+}
+
+.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;
+}
+
 .contentInner {
   gap: 12px;
   flex: 1;