@moises.ai/design-system 3.6.4 → 3.6.6

package/package.json

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

@@ -155,6 +155,7 @@ export const DataTable = ({
   onSelectAll,
   onSelectRow,
   stickyOffset = 0,
+  stickyBodyOffset = 0,
   ...props
 }) => {
   const [isHeaderHovering, setIsHeaderHovering] = useState(false)
@@ -279,12 +280,16 @@ export const DataTable = ({
   const stickyOffsetValue =
     typeof stickyOffset === 'number' ? `${stickyOffset}px` : stickyOffset
 
+  const stickyBodyOffsetValue =
+    typeof stickyBodyOffset === 'number' ? `${stickyBodyOffset}px` : stickyBodyOffset
+
   return (
     <Table.Root
       className={classNames(styles.DataTable, className)}
       size="1"
       style={{
         '--datatable-sticky-offset': stickyOffsetValue,
+        '--datatable-sticky-body-offset': stickyBodyOffsetValue,
         ...style,
       }}
       {...restProps}
@@ -360,7 +365,7 @@ export const DataTable = ({
         </Table.Row>
       </Table.Header>
 
-      <Table.Body>
+      <Table.Body >
         {data.map((row, index) => (
           <DataRow
             key={row.id}

package/src/components/DataTable/DataTable.module.css

@@ -54,6 +54,12 @@
   background-color: var(--neutral-1) !important;
 }
 
+.DataTable :global(.rt-TableBody) {
+  position: relative;
+  top: var(--datatable-sticky-body-offset, 0px) !important;
+}
+
+
 .DataTable :global(.rt-TableHeader) :global(.rt-TableRow) {
   background-color: var(--neutral-1) !important;
 }

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

@@ -2,19 +2,66 @@ import { Flex, Text, Avatar, ScrollArea } from '@radix-ui/themes'
 import styles from './SetlistList.module.css'
 import classNames from 'classnames'
 import {
-  DotsVerticalIcon,
   SetlistIcon,
-  UserGroupIcon,
-  GlobeIcon,
   PlusIcon,
 } from '../../icons'
 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 SetlistExpandButton({ onExpand, className, style, collapsed = false }) {
+  return (
+    <button
+      type="button"
+      className={classNames(
+        styles.newSetlistItem,
+        styles.collapsedStackItem,
+        styles.collapsedTransition,
+        styles.setlistExpandButton,
+        { [styles.collapsed]: collapsed },
+        className,
+      )}
+      style={style}
+      onClick={(e) => {
+        e.stopPropagation()
+        onExpand?.(e)
+      }}
+      aria-label="Expand setlist"
+    >
+      <Flex gap="3" align="center" className={styles.collapsedInner}>
+        <div className={styles.avatarSetlist}>
+          <SetlistIcon width={16} height={16} />
+        </div>
+      </Flex>
+    </button>
+  )
+}
+
+function NewSetlistButton({ onClick, className, collapsed = false }) {
+  return (
+    <SetlistItem
+      isSelected={false}
+      onClick={onClick}
+      avatar={
+        <div className={styles.iconSwap}>
+          <PlusIcon
+            width={16}
+            height={16}
+            className={classNames(styles.iconSwapLayer, styles.iconVisible, styles.plusIcon)}
+          />
+        </div>
+      }
+      text="New Setlist"
+      className={classNames(styles.newSetlistItemButton, styles.collapsedTransition, className)}
+      collapsed={collapsed}
+    />
+  )
+}
+
 function renderSetlistAvatar(icon) {
   if (!icon) return <SetlistIconFallback />
   if (typeof icon === 'string') {
@@ -91,8 +138,8 @@ export const SetlistItem = ({
     <Flex
       gap="3"
       align="center"
-      role="button"
-      tabIndex={0}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
       onClick={onClick}
       className={classNames(styles.newSetlistItem, className, {
         [styles.navItemSelected]: isSelected,
@@ -101,12 +148,16 @@ export const SetlistItem = ({
       })}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault()
-          onClick?.()
-        }
-      }}
+      onKeyDown={
+        onClick
+          ? (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClick?.()
+            }
+          }
+          : undefined
+      }
       style={style}
     >
       <Flex
@@ -188,7 +239,18 @@ 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 [isShrinking, setIsShrinking] = useState(false)
   const hoverTimeoutRef = useRef(null)
@@ -204,6 +266,8 @@ export const SetlistList = ({
     ? setlists.slice(0, maxCollapsedItems)
     : setlists
 
+  const leaveCollapseDelay = 2750
+
   const handleMouseEnter = () => {
     if (!collapsed) return
     if (hoverTimeoutRef.current) {
@@ -215,10 +279,11 @@ export const SetlistList = ({
       shrinkTimeoutRef.current = null
     }
     setIsShrinking(false)
-    setIsHoveredWhenCollapsed(true)
   }
+
   const handleMouseLeave = () => {
     if (!collapsed) return
+    if (!isHoveredWhenCollapsed) return
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current)
     }
@@ -230,7 +295,18 @@ export const SetlistList = ({
         setIsHoveredWhenCollapsed(false)
         setIsShrinking(false)
       }, shrinkDuration)
-    }, 180)
+    }, leaveCollapseDelay)
+  }
+
+  const handleSetlistIconClick = (e) => {
+    if (!collapsed) return
+    e.stopPropagation()
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current)
+      hoverTimeoutRef.current = null
+    }
+    setIsShrinking(false)
+    setIsHoveredWhenCollapsed(true)
   }
 
   const handleFocus = () => {
@@ -255,28 +331,6 @@ export const SetlistList = ({
     }
   }, [])
 
-  const renderNewSetlistAvatar = () => (
-    <div className={styles.iconSwap}>
-      <SetlistIcon
-        width={16}
-        height={16}
-        className={classNames(styles.iconSwapLayer, {
-          [styles.iconVisible]: showCollapsedStack,
-          [styles.iconHidden]: !showCollapsedStack,
-        })}
-      />
-      <PlusIcon
-        width={16}
-        height={16}
-        className={classNames(
-          styles.iconSwapLayer,
-          styles.plusIcon,
-          showCollapsedStack ? styles.iconHidden : styles.iconVisible,
-        )}
-      />
-    </div>
-  )
-
   const getCollapsedStackStyle = (index) => {
     if (!collapsed) return undefined
     if (!showCollapsedStack) {
@@ -334,15 +388,10 @@ export const SetlistList = ({
         >
           {onNewSetlistClick &&
             (showCollapsedStack ? (
-              <SetlistItem
-                isSelected={false}
-                onClick={onNewSetlistClick}
-                avatar={renderNewSetlistAvatar()}
-                className={classNames(
-                  styles.collapsedStackItem,
-                  styles.collapsedTransition,
-                )}
+              <SetlistExpandButton
+                onExpand={handleSetlistIconClick}
                 collapsed={collapsed}
+                className={styles.collapsedStackItem}
                 style={{
                   position: 'relative',
                   marginTop: 0,
@@ -350,14 +399,9 @@ export const SetlistList = ({
                 }}
               />
             ) : (
-              <SetlistItem
-                isSelected={false}
-                onClick={onNewSetlistClick}
-                avatar={renderNewSetlistAvatar()}
-                text="New Setlist"
-                className={classNames(styles.newSetlistItemButton, {
-                  [styles.collapsedTransition]: collapsed,
-                })}
+              <NewSetlistButton
+                onClick={handleNewSetlistClick}
+                className={styles.collapsedTransition}
                 collapsed={collapsed}
               />
             ))}
@@ -366,7 +410,7 @@ 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)

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,10 @@
   z-index: 1;
   }
 
+  .avatarClickable {
+    cursor: pointer;
+  }
+
   .iconGrid {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -147,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);
@@ -227,7 +233,33 @@
 
 .collapsedStackItem {
   position: relative;
-  /* justify-content: flex-start; */
+}
+
+.setlistExpandButton {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  margin: 0 10px;
+  padding: 2px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.setlistExpandButton:hover {
+  background: var(--neutral-alpha-2);
+}
+
+.setlistExpandButton:hover .avatarSetlist {
+  background: var(--neutral-alpha-3);
+}
+
+.setlistExpandButton:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: -1px;
 }
 
 .collapsedMask {
@@ -288,6 +320,11 @@
   pointer-events: none;
 }
 
+.iconSwap.iconClickable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
 .iconSwapLayer {
   position: absolute;
   inset: 0;
@@ -296,6 +333,12 @@
   justify-content: center;
   opacity: 0;
   transition: opacity 160ms ease-in-out;
+  pointer-events: none;
+}
+
+.iconSwapLayer.iconClickable {
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .iconVisible {

package/src/components/Sidebar/Sidebar.jsx

@@ -11,6 +11,7 @@ import {
   CloseIcon,
 } from '../../icons'
 import { useMobileDrawer } from '../../utils/useMobileDrawer'
+import { MobileDrawerProvider } from '../../contexts/MobileDrawerContext'
 
 export const Sidebar = ({
   className,
@@ -50,12 +51,13 @@ export const Sidebar = ({
   }
 
   return (
-    <div
-      className={classNames(styles.root, {
-        [styles.rootCollapsed]: effectiveCollapsed,
-      })}
-      {...props}
-    >
+    <MobileDrawerProvider value={{ close, isMobile }}>
+      <div
+        className={classNames(styles.root, {
+          [styles.rootCollapsed]: effectiveCollapsed,
+        })}
+        {...props}
+      >
       <div className={styles.mobileTopBarWrapper}>
         <Flex
           align="center"
@@ -170,6 +172,7 @@ export const Sidebar = ({
         </Flex>
       </Flex>
     </div>
+    </MobileDrawerProvider>
   )
 }
 

package/src/contexts/MobileDrawerContext.jsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+
+const MobileDrawerContext = createContext({
+  close: () => {},
+  isMobile: false,
+})
+
+export const useMobileDrawerContext = () => useContext(MobileDrawerContext)
+
+export const MobileDrawerProvider = MobileDrawerContext.Provider