@moises.ai/design-system 3.10.17 → 3.10.18

package/package.json

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

@@ -77,10 +77,7 @@ function NewSetlistButton({
         </div>
       }
       text={text}
-      className={classNames(
-        styles.newSetlistItemButton,
-        className,
-      )}
+      className={classNames(styles.newSetlistItemButton, className)}
       collapsed={collapsed}
       style={style}
     />
@@ -323,11 +320,15 @@ export const SetlistList = ({
   const collapsedVisibleOffset = 4
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
-  const showCollapsedStack = collapsed && !isHoveredWhenCollapsed && !isCollapseTransitioning
+  const showCollapsedStack =
+    collapsed && !isHoveredWhenCollapsed && !isCollapseTransitioning
   const visibleSetlists = setlists
 
   const totalAnimatedItems = setlists.length + (onNewSetlistClick ? 1 : 0)
-  const staggerTotalDuration = staggerItemDuration + totalAnimatedItems * staggerBaseDelay
+  const slideItemCount = Math.min(4, totalAnimatedItems)
+  const slideTotalDuration =
+    staggerItemDuration + Math.max(0, slideItemCount - 1) * staggerBaseDelay
+  const staggerTotalDuration = slideTotalDuration
 
   const expandItems = () => {
     if (shrinkTimeoutRef.current) {
@@ -460,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:
@@ -468,27 +476,59 @@ export const SetlistList = ({
           : -(collapsedItemHeight - collapsedVisibleOffset),
       zIndex,
       boxShadow: boxShadows[index],
+      transform: scale < 1 ? `scaleX(${scale})` : undefined,
     }
   }
 
-  const isStaggerActive = (collapsed && !showCollapsedStack) || isCollapseTransitioning
+  const isStaggerActive =
+    (collapsed && !showCollapsedStack) || isCollapseTransitioning
   const itemCollapsed = collapsed || isCollapseTransitioning
 
   const getStaggerStyle = (itemIndex) => {
     if (!isStaggerActive) return undefined
+    const isSlideItem = itemIndex < slideItemCount
+
     if (isShrinking) {
-      const outY = -(itemIndex * (collapsedItemHeight - collapsedVisibleOffset))
+      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 {
-        animationDelay: `${itemIndex * staggerBaseDelay}ms`,
-        '--stagger-out-y': `${outY}px`,
+        '--fade-duration': `${slideTotalDuration}ms`,
         zIndex: totalAnimatedItems - itemIndex,
       }
     }
     if (isExpanding) {
-      const inY = -(itemIndex * (collapsedItemHeight - collapsedVisibleOffset))
+      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 {
-        animationDelay: `${(totalAnimatedItems - 1 - itemIndex) * staggerBaseDelay}ms`,
-        '--stagger-in-y': `${inY}px`,
+        '--fade-duration': `${slideTotalDuration}ms`,
         zIndex: totalAnimatedItems - itemIndex,
       }
     }
@@ -547,6 +587,8 @@ export const SetlistList = ({
             ))}
           {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
+            const itemStaggerIndex = index + collapsedNewItemOffset
+            const isSlideItem = itemStaggerIndex < slideItemCount
             const setlistItem = (
               <SetlistItem
                 isSelected={isSelected}
@@ -555,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)
@@ -587,12 +627,23 @@ export const SetlistList = ({
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed && showCollapsedStack,
                   [styles.staggerItem]: isStaggerActive,
-                  [styles.staggerAnimateIn]: isStaggerActive && isExpanding,
-                  [styles.staggerAnimateOut]: isStaggerActive && isShrinking,
+                  [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),
-                  ...getStaggerStyle(index + collapsedNewItemOffset),
+                  ...getStaggerStyle(itemStaggerIndex),
                 }}
               />
             )

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;
@@ -313,16 +326,19 @@ sectionTitle {
 
 @keyframes staggerIn {
   from {
-    transform: translateY(var(--stagger-in-y, 0));
+    transform: translateY(var(--stagger-in-y, 0)) scaleX(var(--stagger-in-scale, 1));
   }
   to {
-    transform: translateY(0);
+    transform: translateY(0) scaleX(1);
   }
 }
 
 @keyframes staggerOut {
+  from {
+    transform: translateY(0) scaleX(1);
+  }
   to {
-    transform: translateY(var(--stagger-out-y, 0));
+    transform: translateY(var(--stagger-out-y, 0)) scaleX(var(--stagger-out-scale, 1));
   }
 }
 
@@ -340,6 +356,37 @@ sectionTitle {
   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;