@moises.ai/design-system 3.5.3 → 3.5.5

package/package.json

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

package/src/components/Button/Button.module.css

@@ -2,12 +2,22 @@
   box-shadow: none;
 }
 
+.size1 {
+  border-radius: 4px;
+}
+
 .size2 {
   font-size: 14px;
+  border-radius: 6px;
 }
 
 .size3 {
   font-size: 16px;
+  border-radius: 8px;
+}
+
+.size4 {
+  border-radius: 12px;
 }
 
 .solid.disabled, 
@@ -276,13 +286,20 @@
 
 .ghost.size1 {
   padding: 4px 8px;
+  border-radius: 4px;
 }
 
 .ghost.size2 {
- padding: 6px 12px;
+  padding: 6px 12px;
+  border-radius: 6px;
 }
 
 .ghost.size3 {
- padding: 10px 16px;
+  padding: 10px 16px;
+  border-radius: 8px;
+}
+
+.ghost.size4 {
+  border-radius: 12px;
 }
 

package/src/components/DataTable/DataTable.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo, useRef } from 'react'
 import {
   Flex,
   Table,
@@ -7,7 +7,8 @@ import {
   ProductsBrandPattern,
   DropdownMenu,
 } from '../../index'
-import { ArrowUpIcon, ArrowDownIcon, DotsVertical2Icon } from '../../icons'
+import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { MoreButton } from '../MoreButton/MoreButton'
 import styles from './DataTable.module.css'
 import classNames from 'classnames'
 
@@ -15,19 +16,68 @@ const toUpperCase = (str) => (typeof str === 'string' ? str.toUpperCase() : str)
 
 const DataRow = React.memo(function DataRow({
   row,
+  rowIndex,
   columns,
   isSelected,
+  anyRowSelected,
+  selectedCount,
   sortedKey,
   hasDropdownOptions,
   onRowClick,
   onSelectRow,
+  onShiftClickRow,
   renderProjectCell,
   renderDataCell,
 }) {
+  const shiftClickRef = useRef(false)
+
+  const handleRowClick = (e) => {
+    if (e.shiftKey) {
+      e.preventDefault()
+      onShiftClickRow?.(row, rowIndex)
+    } else {
+      onRowClick?.(row)
+    }
+  }
+
+  const handleCheckboxClick = (e) => {
+    e.stopPropagation()
+    if (e.shiftKey) {
+      e.preventDefault()
+      shiftClickRef.current = true
+      onShiftClickRow?.(row, rowIndex)
+      setTimeout(() => {
+        shiftClickRef.current = false
+      }, 0)
+    }
+  }
+
+  const handleCheckboxCellClick = (e) => {
+    e.stopPropagation()
+    if (e.shiftKey) {
+      e.preventDefault()
+      onShiftClickRow?.(row, rowIndex)
+    } else {
+      onSelectRow?.(row.id, !isSelected)
+    }
+  }
+
+  const handleCheckedChange = (value) => {
+    if (shiftClickRef.current) {
+      shiftClickRef.current = false
+      return
+    }
+    onSelectRow?.(row.id, value === true)
+  }
+
+  const showDropdownAlways = isSelected && selectedCount === 1
+
   return (
     <Table.Row
-      className={classNames({ [styles.rowSelected]: isSelected })}
-      onClick={() => onRowClick?.(row)}
+      className={classNames({
+        [styles.rowSelected]: isSelected,
+        [styles.showDropdownOnSelect]: showDropdownAlways,
+      })}
       style={
         isSelected ? { '--row-bg': 'var(--aqua-dark-alpha-2)' } : undefined
       }
@@ -36,14 +86,15 @@ const DataRow = React.memo(function DataRow({
         className={styles.selectColumn}
         data-column-id="select"
         data-sorted="false"
+        onClick={handleCheckboxCellClick}
       >
         <Checkbox
           size="1"
           checked={isSelected}
-          onClick={(e) => e.stopPropagation()}
-          onCheckedChange={(value) => onSelectRow?.(row.id, value === true)}
+          onClick={handleCheckboxClick}
+          onCheckedChange={handleCheckedChange}
           className={classNames(styles.checkboxCell, {
-            [styles.showCheckboxCell]: isSelected,
+            [styles.showCheckboxCell]: isSelected || anyRowSelected,
           })}
         />
       </Table.Cell>
@@ -58,6 +109,7 @@ const DataRow = React.memo(function DataRow({
           )}
           data-column-id={column.id}
           data-sorted={sortedKey === column.id}
+          onClick={handleRowClick}
         >
           {index === 0
             ? renderProjectCell(row)
@@ -67,19 +119,17 @@ const DataRow = React.memo(function DataRow({
 
       {hasDropdownOptions && (
         <Table.Cell
-          className={classNames(styles.projectCell, styles.dropdownColumn)}
+          className={classNames(styles.projectCell, styles.dropdownColumn, styles.dropdownColumnCell)}
           data-column-id="actions"
         >
           {row.dropdownOptions?.length ? (
             <DropdownMenu
               trigger={
-                <Flex
-                  className={styles.dropdownTriggerWrapper}
-                  aria-label={`More options for ${row.title}`}
-                >
-                  <Flex className={styles.dropdownTriggerWrapperIcon}>
-                    <DotsVertical2Icon />
-                  </Flex>
+                <Flex className={styles.dropdownTriggerWrapper}>
+                  <MoreButton
+                    aria-label={`More options for ${row.title}`}
+                    className={classNames(styles.dropdownTriggerWrapperIcon, styles.dropdownColumnCell)}
+                  />
                 </Flex>
               }
               options={row.dropdownOptions}
@@ -108,6 +158,7 @@ export const DataTable = ({
   ...props
 }) => {
   const [isHeaderHovering, setIsHeaderHovering] = useState(false)
+  const anchorRowIndexRef = useRef(null)
 
   const sortedKey = sorting?.field
 
@@ -144,24 +195,45 @@ export const DataTable = ({
     [onClick],
   )
 
+  const handleShiftClickRow = useCallback(
+    (clickedRow, clickedIndex) => {
+      if (!onSelectRow) return
+
+      const anchorIndex = anchorRowIndexRef.current
+      const start = anchorIndex != null ? Math.min(anchorIndex, clickedIndex) : clickedIndex
+      const end = anchorIndex != null ? Math.max(anchorIndex, clickedIndex) : clickedIndex
+
+      for (let i = start; i <= end; i++) {
+        onSelectRow(data[i].id, true)
+      }
+      if (anchorIndex == null) {
+        anchorRowIndexRef.current = clickedIndex
+      }
+    },
+    [data, onSelectRow],
+  )
+
+  const handleSelectRow = useCallback(
+    (rowId, checked) => {
+      const index = data?.findIndex((r) => r.id === rowId) ?? -1
+      if (index >= 0) {
+        anchorRowIndexRef.current = index
+      }
+      onSelectRow?.(rowId, checked)
+    },
+    [data, onSelectRow],
+  )
+
   const renderProjectCell = useCallback((row) => {
     return (
       <Flex align="center" gap="3">
-        {row.thumb ? (
-          <img
-            src={row.thumb}
-            alt={row.title}
-            width={48}
-            height={48}
-            className={styles.thumb}
-          />
-        ) : (
-          <ProductsBrandPattern
-            id={row.id}
-            size={48}
-            className={styles.thumb}
-          />
-        )}
+        <ProductsBrandPattern
+          id={row.id}
+          size={48}
+          className={styles.thumb}
+          type={row.type}
+          cover={row.thumb}
+        />
 
         <Flex direction="column" style={{ minWidth: 0, flex: 1 }}>
           <Text size="2" className={styles.titleText}>
@@ -175,6 +247,17 @@ export const DataTable = ({
     )
   }, [])
 
+  const handleSelectAllChange = useCallback(
+    (value) => {
+      if (anyRowChecked && !allRowsChecked) {
+        onSelectAll?.(false)
+      } else {
+        onSelectAll?.(value === true)
+      }
+    },
+    [anyRowChecked, allRowsChecked, onSelectAll],
+  )
+
   const renderDataCell = useCallback((row, column, index) => {
     const baseValue = row?.[column.id] ?? row?.[`${column.id}Formatted`]
     const value =
@@ -219,7 +302,7 @@ export const DataTable = ({
             <Checkbox
               size="1"
               checked={allRowsChecked}
-              onCheckedChange={(value) => onSelectAll?.(value === true)}
+              onCheckedChange={handleSelectAllChange}
               {...(anyRowChecked && !allRowsChecked
                 ? { checked: 'indeterminate' }
                 : {})}
@@ -278,16 +361,20 @@ export const DataTable = ({
       </Table.Header>
 
       <Table.Body>
-        {data.map((row) => (
+        {data.map((row, index) => (
           <DataRow
             key={row.id}
             row={row}
+            rowIndex={index}
             columns={columns}
             isSelected={isRowSelected(row.id)}
+            anyRowSelected={anyRowChecked}
+            selectedCount={selectedCount}
             sortedKey={sortedKey}
             hasDropdownOptions={hasDropdownOptions}
             onRowClick={handleRowClick}
-            onSelectRow={onSelectRow}
+            onSelectRow={handleSelectRow}
+            onShiftClickRow={handleShiftClickRow}
             renderProjectCell={renderProjectCell}
             renderDataCell={renderDataCell}
           />

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

@@ -129,6 +129,10 @@
   box-shadow: inset 0 -1px var(--neutral-alpha-4);
 }
 
+.selectColumn {
+  cursor: pointer;
+}
+
 .checkboxCell {
   width: 14px;
   min-width: 14px;
@@ -194,7 +198,8 @@
 .DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
 .DataTable
   :global(.rt-TableColumnHeaderCell:not(:nth-child(1)):not(:nth-child(2))),
-.DataTable :global(.rt-TableColumnHeaderCell:last-child) {
+.DataTable :global(.rt-TableColumnHeaderCell:last-child),
+.DataTable :global(.rt-TableHeader) :global(.rt-TableCell:nth-child(1)) {
   box-shadow: inset 0 -1px var(--neutral-alpha-4) !important;
 }
 
@@ -258,11 +263,15 @@
   }
 }
 
-.DataTable :global(.rt-TableRow:hover) .projectCell :not(.artistText) {
+.projectCell:not(.dropdownColumn) {
+  cursor: pointer;
+}
+
+.DataTable :global(.rt-TableRow:hover) .projectCell:not(.dropdownColumn) :not(.artistText) {
   color: #edeef0;
 }
 
-.rowSelected .projectCell :not(.artistText) {
+.rowSelected .projectCell:not(.dropdownColumn) :not(.artistText) {
   color: #edeef0;
 }
 
@@ -274,28 +283,8 @@
   justify-content: center;
 }
 
-.dropdownMenuTrigger {
-  color: var(--neutral-alpha-7) !important;
-  transition: color 120ms ease-in-out;
-}
-
 .dropdownTriggerWrapperIcon {
-  height: fit-content;
-  padding: 6px 5px;
-  border-radius: 9999px;
   opacity: 0;
-  transition: opacity 120ms ease-in-out;
-
-  &:hover {
-    cursor: pointer;
-    color: var(--neutral-alpha-11);
-    background-color: rgba(255, 255, 255, 0.07);
-  }
-}
-
-.dropdownTriggerWrapperIcon:hover .dropdownMenuTrigger,
-.dropdownMenuTrigger:hover {
-  color: var(--neutral-alpha-10);
 }
 
 .dropdownTriggerWrapper[data-state='open'] .dropdownTriggerWrapperIcon {
@@ -303,18 +292,11 @@
 }
 
 .DataTable :global(.rt-TableRow:hover) .dropdownTriggerWrapperIcon,
-.DataTable :global(.rt-TableRow:focus-within) .dropdownTriggerWrapperIcon,
-.rowSelected .dropdownTriggerWrapperIcon {
+.dropdownColumn:focus-within .dropdownTriggerWrapperIcon,
+.showDropdownOnSelect .dropdownTriggerWrapperIcon {
   opacity: 1;
 }
 
-.dropdownTriggerWrapper[data-state='open'] .dropdownMenuTrigger {
-  color: var(--neutral-alpha-10);
-}
-
-.dropdownTriggerWrapperMobile {
-  padding: 8px;
-}
 
 .headerActions {
   width: max-content;

package/src/components/DataTable/DataTable.stories.jsx

@@ -32,6 +32,7 @@ const baseRows = [
   {
     id: '2',
     title: 'Let It Be',
+    type: 'studio',
     artist: 'The Beatles',
     RECENT: 'Nov 11, 2025',
     BPM: 110,
@@ -56,6 +57,7 @@ const baseRows = [
     id: '3',
     title: 'Here Comes The Sun',
     artist: 'The Beatles',
+    type: 'stems',
     RECENT: 'Dec 02, 2025',
     BPM: 129,
     KEY: 'C#',
@@ -78,6 +80,7 @@ const baseRows = [
   {
     id: '4',
     title: 'Yesterday',
+    type: 'voice',
     artist: 'The Beatles',
     RECENT: 'Jan 15, 2025',
     BPM: 95,
@@ -101,6 +104,7 @@ const baseRows = [
   {
     id: '5',
     title: 'Help!',
+    type: 'master',
     artist: 'The Beatles',
     RECENT: 'Oct 30, 2025',
     BPM: 184,
@@ -124,6 +128,7 @@ const baseRows = [
   {
     id: '6',
     title: 'Something',
+    type: 'lyrics',
     artist: 'The Beatles',
     RECENT: 'Sep 20, 2025',
     BPM: 66,
@@ -148,6 +153,7 @@ const baseRows = [
     id: '7',
     title: 'While My Guitar Gently Weeps',
     artist: 'The Beatles',
+    type: 'stems',
     RECENT: 'Aug 10, 2025',
     BPM: 88,
     KEY: 'Am',
@@ -192,11 +198,11 @@ const auxHeaderTable = [
     id: 'RECENT',
     label: 'Created',
     sortable: true,
-    onClick: () => {},
+    onClick: () => { },
   },
-  { id: 'BPM', label: 'BPM', onClick: () => {} },
-  { id: 'KEY', label: 'Key', onClick: () => {} },
-  { id: 'DURATION', label: 'Duration', onClick: () => {} },
+  { id: 'BPM', label: 'BPM', onClick: () => { } },
+  { id: 'KEY', label: 'Key', onClick: () => { } },
+  { id: 'DURATION', label: 'Duration', onClick: () => { } },
 ]
 
 export default {
@@ -267,7 +273,7 @@ const SelectableTemplate = (args) => {
 
   const sortRows = (items, { field, sort } = {}) => {
     if (!field) return items
-    
+
     const sorted = [...items].sort((a, b) => {
       const av = a[field]
       const bv = b[field]
@@ -345,8 +351,8 @@ export const Default = {
   ),
   args: {
     children: 'DataTable Component',
-    onSort: () => {},
-    onClick: () => {},
+    onSort: () => { },
+    onClick: () => { },
     renderHeaderActions: ({ selectedCount, total }) => (
       <>
         <Button size="1" variant="soft" color="gray" disabled={!selectedCount}>

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -187,7 +187,7 @@ The \`options\` prop accepts an array of objects with the following types:
     showActiveTrigger: {
       control: { type: 'boolean' },
       description:
-        'When true, applies a red background with 3px border radius to the trigger button',
+        'When true, applies a subtle background highlight to the trigger when the menu is open or on hover',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
@@ -261,6 +261,45 @@ export const Default = {
   ),
 }
 
+export const ShowActiveTrigger = {
+  args: {
+    showActiveTrigger: true,
+    side: 'bottom',
+    align: 'end',
+    trigger: (
+      <IconButton variant="soft">
+        <DotsVerticalIcon style={{ color: 'var(--neutral-alpha-8)' }} />
+      </IconButton>
+    ),
+    options: [
+      {
+        type: 'item',
+        key: 'item1',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'item2',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'item',
+        key: 'item3',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+  render: (args) => (
+    <Flex justify="center" align="start" height="300px">
+      <DropdownMenu {...args} />
+    </Flex>
+  ),
+}
+
 export const StayOpenAfterSelect = {
   args: {
     closeOnSelect: false,
@@ -353,12 +392,12 @@ const ItemPlaygroundComponent = ({
     color: item1Color === 'default' ? undefined : item1Color,
     ...(item1Type === 'checkbox'
       ? {
-          checked: item1IsChecked,
-          onChange: (checked) => setItem1IsChecked(checked),
-        }
+        checked: item1IsChecked,
+        onChange: (checked) => setItem1IsChecked(checked),
+      }
       : {
-          onClick: () => console.log('Item 1 clicked'),
-        }),
+        onClick: () => console.log('Item 1 clicked'),
+      }),
   }
 
   const item2Config = {
@@ -374,12 +413,12 @@ const ItemPlaygroundComponent = ({
     color: item2Color === 'default' ? undefined : item2Color,
     ...(item2Type === 'checkbox'
       ? {
-          checked: item2IsChecked,
-          onChange: (checked) => setItem2IsChecked(checked),
-        }
+        checked: item2IsChecked,
+        onChange: (checked) => setItem2IsChecked(checked),
+      }
       : {
-          onClick: () => console.log('Item 2 clicked'),
-        }),
+        onClick: () => console.log('Item 2 clicked'),
+      }),
   }
 
   const subItemConfig = {
@@ -393,12 +432,12 @@ const ItemPlaygroundComponent = ({
     disabled: subItemDisabled,
     ...(subItemType === 'checkbox'
       ? {
-          checked: subItemIsChecked,
-          onChange: (checked) => setSubItemIsChecked(checked),
-        }
+        checked: subItemIsChecked,
+        onChange: (checked) => setSubItemIsChecked(checked),
+      }
       : {
-          onClick: () => console.log('Sub item clicked'),
-        }),
+        onClick: () => console.log('Sub item clicked'),
+      }),
   }
 
   const options = [
@@ -412,13 +451,13 @@ const ItemPlaygroundComponent = ({
     { type: 'separator', key: 'sep1' },
     ...(showSubmenu
       ? [
-          {
-            type: 'sub',
-            key: 'submenu',
-            label: submenuLabel,
-            children: [subItemConfig],
-          },
-        ]
+        {
+          type: 'sub',
+          key: 'submenu',
+          label: submenuLabel,
+          children: [subItemConfig],
+        },
+      ]
       : []),
   ]