@moises.ai/design-system 3.10.6 → 3.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.6",
+  "version": "3.10.7",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-icons": "1.3.2",

package/src/components/DataTable/DataTable.jsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useRef } from 'react'
 import { DndContext, DragOverlay } from '@dnd-kit/core'
+import { snapCenterToCursor } from '@dnd-kit/modifiers'
 import { Table } from '../../index'
 import styles from './DataTable.module.css'
 import classNames from 'classnames'
@@ -27,10 +28,12 @@ export const DataTable = ({
   onReorder,
   rowDraggable,
   onRowDragStart,
+  onRowDragMove,
   onRowDragEnd,
   getDragPreviewLabel,
   getDragPreviewCountLabel,
   renderDragPreview,
+  renderDndContext = true,
   ...props
 }) => {
   const anchorRowIndexRef = useRef(null)
@@ -128,6 +131,7 @@ export const DataTable = ({
     reorderable,
     onReorder,
     onRowDragStart,
+    onRowDragMove,
     onRowDragEnd,
   })
 
@@ -137,55 +141,62 @@ export const DataTable = ({
   const stickyBodyOffsetValue =
     typeof stickyBodyOffset === 'number' ? `${stickyBodyOffset}px` : stickyBodyOffset
 
+  const tableRoot = (
+    <Table.Root
+      className={classNames(styles.DataTable, className)}
+      size="1"
+      style={{
+        '--datatable-sticky-offset': stickyOffsetValue,
+        '--datatable-sticky-body-offset': stickyBodyOffsetValue,
+        ...style,
+      }}
+      {...restProps}
+    >
+      <DataTableHeader
+        columns={columns}
+        sortedKey={sortedKey}
+        sorting={sorting}
+        mobileSecondaryColumnId={mobileSecondaryColumnId}
+        anyRowChecked={anyRowChecked}
+        allRowsChecked={allRowsChecked}
+        selectedFilesLabel={selectedFilesLabel}
+        selectedCount={selectedCount}
+        total={total}
+        hasDropdownOptions={hasDropdownOptions}
+        onSort={onSort}
+        onSelectAll={onSelectAll}
+        renderHeaderActions={renderHeaderActions}
+      />
+
+      <DataTableBody
+        rows={normalizedRows}
+        columns={columns}
+        sortableItems={sortableItems}
+        isRowSelected={isRowSelected}
+        anyRowChecked={anyRowChecked}
+        selectedCount={selectedCount}
+        sortedKey={sortedKey}
+        mobileSecondaryColumnId={mobileSecondaryColumnId}
+        hasDropdownOptions={hasDropdownOptions}
+        onClick={handleRowClick}
+        onSelectRow={handleSelectRow}
+        onShiftClickRow={handleShiftClickRow}
+        rowDraggable={rowDraggable}
+        reorderable={reorderable}
+        activeDragRowId={activeDragRowId}
+        overDragRowId={overDragRowId}
+      />
+    </Table.Root>
+  )
+
+  if (!renderDndContext) {
+    return tableRoot
+  }
+
   return (
     <DndContext {...dndContextProps}>
-      <Table.Root
-        className={classNames(styles.DataTable, className)}
-        size="1"
-        style={{
-          '--datatable-sticky-offset': stickyOffsetValue,
-          '--datatable-sticky-body-offset': stickyBodyOffsetValue,
-          ...style,
-        }}
-        {...restProps}
-      >
-        <DataTableHeader
-          columns={columns}
-          sortedKey={sortedKey}
-          sorting={sorting}
-          mobileSecondaryColumnId={mobileSecondaryColumnId}
-          anyRowChecked={anyRowChecked}
-          allRowsChecked={allRowsChecked}
-          selectedFilesLabel={selectedFilesLabel}
-          selectedCount={selectedCount}
-          total={total}
-          hasDropdownOptions={hasDropdownOptions}
-          onSort={onSort}
-          onSelectAll={onSelectAll}
-          renderHeaderActions={renderHeaderActions}
-        />
-
-        <DataTableBody
-          rows={normalizedRows}
-          columns={columns}
-          sortableItems={sortableItems}
-          isRowSelected={isRowSelected}
-          anyRowChecked={anyRowChecked}
-          selectedCount={selectedCount}
-          sortedKey={sortedKey}
-          mobileSecondaryColumnId={mobileSecondaryColumnId}
-          hasDropdownOptions={hasDropdownOptions}
-          onClick={handleRowClick}
-          onSelectRow={handleSelectRow}
-          onShiftClickRow={handleShiftClickRow}
-          rowDraggable={rowDraggable}
-          reorderable={reorderable}
-          activeDragRowId={activeDragRowId}
-          overDragRowId={overDragRowId}
-        />
-      </Table.Root>
-
-      <DragOverlay>
+      {tableRoot}
+      <DragOverlay modifiers={[snapCenterToCursor]}>
         {activeDragContext ? (
           <div className={styles.dragOverlayContent}>
             <DataTableDragOverlay

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

@@ -195,17 +195,17 @@ const auxHeaderTable = [
     id: 'title',
     label: 'Title',
     sortable: true,
-    onClick: () => { },
+    onClick: () => {},
   },
   {
     id: 'RECENT',
     label: 'Created',
     sortable: true,
-    onClick: () => { },
+    onClick: () => {},
   },
-  { id: 'BPM', label: 'BPM', onClick: () => { }, sortable: true },
-  { id: 'KEY', label: 'Key', onClick: () => { }, sortable: true },
-  { id: 'DURATION', label: 'Duration', onClick: () => { }, sortable: true },
+  { id: 'BPM', label: 'BPM', onClick: () => {}, sortable: true },
+  { id: 'KEY', label: 'Key', onClick: () => {}, sortable: true },
+  { id: 'DURATION', label: 'Duration', onClick: () => {}, sortable: true },
 ]
 
 const applyReorder = (rows, payload) => {
@@ -214,13 +214,18 @@ const applyReorder = (rows, payload) => {
 
   if (Array.isArray(orders) && orders.length > 1) {
     const validOrders = orders
-      .filter((index) => Number.isInteger(index) && index >= 0 && index < rows.length)
+      .filter(
+        (index) => Number.isInteger(index) && index >= 0 && index < rows.length,
+      )
       .sort((a, b) => a - b)
     if (!validOrders.length) return rows
 
     const moveSet = new Set(validOrders)
     const rowsToMove = validOrders.map((index) => rows[index]).filter(Boolean)
-    const safeMoveBefore = Math.max(0, Math.min(move_before ?? rows.length, rows.length))
+    const safeMoveBefore = Math.max(
+      0,
+      Math.min(move_before ?? rows.length, rows.length),
+    )
     const selectedBeforeTarget = validOrders.filter(
       (index) => index < safeMoveBefore,
     ).length
@@ -232,13 +237,20 @@ const applyReorder = (rows, payload) => {
   }
 
   if (!Number.isInteger(order)) return rows
-  const safeMoveBefore = Math.max(0, Math.min(move_before ?? rows.length, rows.length))
+  const safeMoveBefore = Math.max(
+    0,
+    Math.min(move_before ?? rows.length, rows.length),
+  )
   if (order === safeMoveBefore || order + 1 === safeMoveBefore) return rows
 
   const nextRows = [...rows]
   const [item] = nextRows.splice(order, 1)
   if (!item) return rows
-  nextRows.splice(safeMoveBefore > order ? safeMoveBefore - 1 : safeMoveBefore, 0, item)
+  nextRows.splice(
+    safeMoveBefore > order ? safeMoveBefore - 1 : safeMoveBefore,
+    0,
+    item,
+  )
   return nextRows
 }
 
@@ -394,7 +406,7 @@ const SelectableTemplate = (args) => {
       getDragPreviewLabel={(row, selectedRows) =>
         selectedRows.length > 1
           ? `${selectedRows.length} files`
-          : row.trackName ?? row.title
+          : (row.trackName ?? row.title)
       }
       stickyOffset={16}
     />
@@ -451,9 +463,7 @@ const ReorderableTemplate = (args) => {
       onSelectAll={(checked) =>
         setSelectedRowIds(checked ? rows.map((r) => r.id) : [])
       }
-      onSort={(field, direction) =>
-        setSorting({ field, sort: direction })
-      }
+      onSort={(field, direction) => setSorting({ field, sort: direction })}
       onClick={(row) => console.log('Row clicked:', row)}
       reorderable={args.reorderable}
       rowDraggable={args.rowDraggable}
@@ -462,7 +472,7 @@ const ReorderableTemplate = (args) => {
       getDragPreviewLabel={(row, selectedRows) =>
         selectedRows.length > 1
           ? `${selectedRows.length} files`
-          : row.trackName ?? row.title
+          : (row.trackName ?? row.title)
       }
       onReorder={handleReorder}
       stickyOffset={16}
@@ -506,12 +516,21 @@ export const Reorderable = {
 export const DragWithSelectionPreview = {
   render: (args) => {
     const [rows, setRows] = useState(auxBodyTable.slice(0, 7))
-    const [selectedRowIds, setSelectedRowIds] = useState([rows[0].id, rows[1].id])
+    const [selectedRowIds, setSelectedRowIds] = useState([
+      rows[0].id,
+      rows[1].id,
+    ])
     const [dragInfo, setDragInfo] = useState('Start dragging a row')
 
     return (
       <div style={{ width: '100%', maxWidth: '1620px', maxHeight: '400px' }}>
-        <div style={{ fontSize: 12, color: 'var(--neutral-alpha-11)', marginBottom: 8 }}>
+        <div
+          style={{
+            fontSize: 12,
+            color: 'var(--neutral-alpha-11)',
+            marginBottom: 8,
+          }}
+        >
           {dragInfo}
         </div>
         <DataTable
@@ -552,7 +571,7 @@ export const DragWithSelectionPreview = {
           getDragPreviewLabel={(row, selectedRows) =>
             selectedRows.length > 1
               ? `${selectedRows.length} files`
-              : row.trackName ?? row.title
+              : (row.trackName ?? row.title)
           }
           getDragPreviewCountLabel={(count) =>
             count === 1 ? '1 arquivo' : `${count} arquivos`
@@ -582,8 +601,8 @@ export const Default = {
     children: 'DataTable Component',
     reorderable: false,
     rowDraggable: true,
-    onSort: () => { },
-    onClick: () => { },
+    onSort: () => {},
+    onClick: () => {},
     renderHeaderActions: ({ selectedCount, total }) => (
       <>
         <Button size="1" variant="soft" color="gray" disabled={!selectedCount}>
@@ -641,4 +660,4 @@ export const SortedByKey = {
       sort: 'ASC',
     },
   },
-}
+}

package/src/components/DataTable/dnd/useDataTableDnd.js

@@ -1,5 +1,10 @@
 import { useCallback, useMemo, useState } from 'react'
-import { pointerWithin, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
+import {
+  pointerWithin,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
 import {
   buildReorderPayload,
   DATA_TABLE_DROP_TOP_ID,

package/src/components/SetlistList/SetlistList.jsx

@@ -1,19 +1,23 @@
 import { Flex, Text, Avatar, ScrollArea } from '@radix-ui/themes'
+import { useDroppable } from '@dnd-kit/core'
 import styles from './SetlistList.module.css'
 import classNames from 'classnames'
-import {
-  SetlistIcon,
-  PlusIcon,
-} from '../../icons'
+import { SetlistIcon, PlusIcon } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { Tooltip } from '../Tooltip/Tooltip'
-import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
+import { useState, useEffect, useRef, 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, tooltip }) {
+function SetlistExpandButton({
+  onExpand,
+  className,
+  style,
+  collapsed = false,
+  tooltip,
+}) {
   const button = (
     <button
       type="button"
@@ -48,7 +52,12 @@ function SetlistExpandButton({ onExpand, className, style, collapsed = false, to
   )
 }
 
-function NewSetlistButton({ onClick, className, collapsed = false, text = 'New Setlist', }) {
+function NewSetlistButton({
+  onClick,
+  className,
+  collapsed = false,
+  text = 'New Setlist',
+}) {
   return (
     <SetlistItem
       isSelected={false}
@@ -58,12 +67,20 @@ function NewSetlistButton({ onClick, className, collapsed = false, text = 'New S
           <PlusIcon
             width={16}
             height={16}
-            className={classNames(styles.iconSwapLayer, styles.iconVisible, styles.plusIcon)}
+            className={classNames(
+              styles.iconSwapLayer,
+              styles.iconVisible,
+              styles.plusIcon,
+            )}
           />
         </div>
       }
       text={text}
-      className={classNames(styles.newSetlistItemButton, styles.collapsedTransition, className)}
+      className={classNames(
+        styles.newSetlistItemButton,
+        styles.collapsedTransition,
+        className,
+      )}
       collapsed={collapsed}
     />
   )
@@ -125,6 +142,7 @@ export const SetlistItem = ({
   isMobile = false,
   droppable = false,
   isDropTarget = false,
+  dndDroppableId,
   onDragEnter,
   onDragLeave,
   onDragOver,
@@ -132,6 +150,12 @@ export const SetlistItem = ({
 }) => {
   const [isHovering, setIsHovering] = useState(false)
 
+  const dndEnabled = Boolean(dndDroppableId)
+  const { setNodeRef: setDropRef, isOver: isDndOver } = useDroppable({
+    id: dndDroppableId ?? '__setlist-item-noop__',
+    disabled: !dndEnabled,
+  })
+
   const handleMouseEnter = () => {
     setIsHovering(true)
   }
@@ -150,6 +174,7 @@ export const SetlistItem = ({
 
   return (
     <Flex
+      ref={dndEnabled ? setDropRef : undefined}
       gap="3"
       align="center"
       role={onClick ? 'button' : undefined}
@@ -159,7 +184,7 @@ export const SetlistItem = ({
         [styles.navItemSelected]: isSelected,
         [styles.collapsed]: collapsed,
         [styles.menuOpen]: dropdownMenuOpen,
-        [styles.dropTarget]: droppable && isDropTarget,
+        [styles.dropTarget]: (droppable && isDropTarget) || isDndOver,
       })}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -171,11 +196,11 @@ export const SetlistItem = ({
       onKeyDown={
         onClick
           ? (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              onClick?.()
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onClick?.()
+              }
             }
-          }
           : undefined
       }
       style={style}