@moises.ai/design-system 3.10.7 → 3.10.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.7",
+  "version": "3.10.9",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",
@@ -36,10 +36,6 @@
     "extract": "lingui extract"
   },
   "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",
     "@radix-ui/themes": "3.2.1",
     "@wavesurfer/react": "^1.0.11",
@@ -47,10 +43,26 @@
     "wavesurfer.js": "^7.11.1"
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": false
+    },
+    "@dnd-kit/modifiers": {
+      "optional": false
+    },
+    "@dnd-kit/sortable": {
+      "optional": false
+    },
+    "@dnd-kit/utilities": {
+      "optional": false
+    },
     "react": {
       "optional": false
     },
@@ -59,6 +71,10 @@
     }
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@lingui/cli": "^5.6.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",

package/src/components/DataTable/DataTable.jsx

@@ -5,7 +5,7 @@ import { Table } from '../../index'
 import styles from './DataTable.module.css'
 import classNames from 'classnames'
 import { DataTableDragOverlay } from './dnd/DataTableDragOverlay'
-import { useDataTableDnd } from './dnd/useDataTableDnd'
+import { useDataTableDnd, DataTableDndMonitor } from './dnd/useDataTableDnd'
 import { resolveRowId, toDragRow } from './dnd/dataTableDnd.utils'
 import { DataTableHeader } from './DataTableHeader'
 import { DataTableBody } from './DataTableBody'
@@ -34,6 +34,7 @@ export const DataTable = ({
   getDragPreviewCountLabel,
   renderDragPreview,
   renderDndContext = true,
+  dndScopeId,
   ...props
 }) => {
   const anchorRowIndexRef = useRef(null)
@@ -124,6 +125,7 @@ export const DataTable = ({
     overDragRowId,
     activeDragContext,
     sortableItems,
+    monitorHandlers,
   } = useDataTableDnd({
     rows: normalizedRows,
     selectedSet,
@@ -131,10 +133,13 @@ export const DataTable = ({
     reorderable,
     onReorder,
     onRowDragStart,
-    onRowDragMove,
     onRowDragEnd,
+    dndScopeId,
   })
 
+  const monitorHandlersRef = useRef(monitorHandlers)
+  monitorHandlersRef.current = monitorHandlers
+
   const { style, ...restProps } = props
   const stickyOffsetValue =
     typeof stickyOffset === 'number' ? `${stickyOffset}px` : stickyOffset
@@ -185,29 +190,43 @@ export const DataTable = ({
         reorderable={reorderable}
         activeDragRowId={activeDragRowId}
         overDragRowId={overDragRowId}
+        dndScopeId={dndScopeId}
       />
     </Table.Root>
   )
 
+  const dragOverlay = (
+    <DragOverlay modifiers={[snapCenterToCursor]}>
+      {activeDragContext ? (
+        <div className={styles.dragOverlayContent}>
+          <DataTableDragOverlay
+            model={activeDragContext}
+            renderDragPreview={renderDragPreview}
+            getDragPreviewLabel={getDragPreviewLabel}
+            getDragPreviewCountLabel={getDragPreviewCountLabel}
+          />
+        </div>
+      ) : null}
+    </DragOverlay>
+  )
+
   if (!renderDndContext) {
-    return tableRoot
+    return (
+      <>
+        <DataTableDndMonitor
+          handlers={monitorHandlersRef}
+          dndScopeId={dndScopeId}
+        />
+        {tableRoot}
+        {dragOverlay}
+      </>
+    )
   }
 
   return (
     <DndContext {...dndContextProps}>
       {tableRoot}
-      <DragOverlay modifiers={[snapCenterToCursor]}>
-        {activeDragContext ? (
-          <div className={styles.dragOverlayContent}>
-            <DataTableDragOverlay
-              model={activeDragContext}
-              renderDragPreview={renderDragPreview}
-              getDragPreviewLabel={getDragPreviewLabel}
-              getDragPreviewCountLabel={getDragPreviewCountLabel}
-            />
-          </div>
-        ) : null}
-      </DragOverlay>
+      {dragOverlay}
     </DndContext>
   )
 }

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

@@ -137,6 +137,7 @@
 
 .selectColumn {
   cursor: pointer;
+  touch-action: manipulation;
 }
 
 .checkboxCell {
@@ -157,6 +158,12 @@
   opacity: 1;
 }
 
+@media (pointer: coarse) {
+  .checkboxCell {
+    opacity: 1;
+  }
+}
+
 .showCheckboxHeader,
 .showCheckboxCell {
   opacity: 1;
@@ -278,6 +285,7 @@
 
 .projectCell:not(.dropdownColumn) {
   cursor: pointer;
+  touch-action: manipulation; 
 }
 
 .DataTable :global(.rt-TableRow:hover) .projectCell:not(.dropdownColumn) :not(.artistText) {

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) => {
@@ -381,6 +381,7 @@ const SelectableTemplate = (args) => {
 
   const handleClick = (row) => {
     console.log('Row clicked:', row)
+    alert(`Row clicked: ${row.title}`)
   }
 
   const selectedFilesLabel =
@@ -601,8 +602,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}>

package/src/components/DataTable/DataTableBody.jsx

@@ -42,6 +42,7 @@ export const DataTableBody = ({
   reorderable,
   activeDragRowId,
   overDragRowId,
+  dndScopeId,
 }) => {
   const totalColumns = columns.length + 1 + (hasDropdownOptions ? 1 : 0)
 
@@ -116,6 +117,7 @@ export const DataTableBody = ({
             isDragOver={
               reorderable && overDragRowId === row.id && activeDragRowId !== row.id
             }
+            dndScopeId={dndScopeId}
           />
         ))}
 

package/src/components/DataTable/dnd/DataTableRowSortable.jsx

@@ -26,8 +26,11 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
   rowDraggable,
   reorderable,
   isDragOver,
+  dndScopeId,
 }) {
   const shiftClickRef = useRef(false)
+  const touchHandledRef = useRef(false)
+  const checkboxTouchHandledRef = useRef(false)
   const {
     attributes,
     listeners,
@@ -38,6 +41,13 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
   } = useSortable({
     id: rowId,
     disabled: !resolveRowDraggable({ row, rowDraggable, reorderable }),
+    data: {
+      source: 'data-table',
+      dndScopeId,
+      rowId,
+      row,
+      rowIndex,
+    },
   })
 
   const sortableStyle = {
@@ -49,6 +59,10 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
     : sortableStyle
 
   const handleRowClick = (e) => {
+    if (touchHandledRef.current) {
+      touchHandledRef.current = false
+      return
+    }
     if (e.shiftKey) {
       e.preventDefault()
       onShiftClickRow?.(row, rowIndex)
@@ -57,6 +71,16 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
     }
   }
 
+  const handleRowPointerUp = (e) => {
+    if (e.pointerType !== 'touch') return
+    touchHandledRef.current = true
+    if (e.shiftKey) {
+      onShiftClickRow?.(row, rowIndex)
+    } else {
+      onRowClick?.(row)
+    }
+  }
+
   const handleCheckboxClick = (e) => {
     e.stopPropagation()
     if (e.shiftKey) {
@@ -71,6 +95,10 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
 
   const handleCheckboxCellClick = (e) => {
     e.stopPropagation()
+    if (checkboxTouchHandledRef.current) {
+      checkboxTouchHandledRef.current = false
+      return
+    }
     if (e.shiftKey) {
       e.preventDefault()
       onShiftClickRow?.(row, rowIndex)
@@ -79,11 +107,26 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
     }
   }
 
+  const handleCheckboxCellPointerUp = (e) => {
+    if (e.pointerType !== 'touch') return
+    e.stopPropagation()
+    checkboxTouchHandledRef.current = true
+    if (e.shiftKey) {
+      onShiftClickRow?.(row, rowIndex)
+    } else if (rowId != null) {
+      onSelectRow?.(rowId, !isSelected)
+    }
+  }
+
   const handleCheckedChange = (value) => {
     if (shiftClickRef.current) {
       shiftClickRef.current = false
       return
     }
+    if (checkboxTouchHandledRef.current) {
+      checkboxTouchHandledRef.current = false
+      return
+    }
     if (rowId != null) onSelectRow?.(rowId, value === true)
   }
 
@@ -111,6 +154,7 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
         data-column-id="select"
         data-sorted="false"
         onClick={handleCheckboxCellClick}
+        onPointerUp={handleCheckboxCellPointerUp}
       >
         <Checkbox
           size="1"
@@ -137,6 +181,7 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
           data-column-id={column.id}
           data-sorted={sortedKey === column.id}
           onClick={handleRowClick}
+          onPointerUp={handleRowPointerUp}
         >
           {index === 0 ? renderProjectCell(row) : renderDataCell(row, column, index)}
         </Table.Cell>

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

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react'
 import {
   pointerWithin,
   PointerSensor,
+  useDndMonitor,
   useSensor,
   useSensors,
 } from '@dnd-kit/core'
@@ -11,6 +12,51 @@ import {
   DATA_TABLE_DROP_BOTTOM_ID,
 } from './dataTableDnd.utils'
 
+const isDataTableDrag = (event, dndScopeId) => {
+  const data = event.active?.data?.current
+  if (data?.source !== 'data-table') return false
+  if (dndScopeId && data.dndScopeId !== dndScopeId) return false
+  return true
+}
+
+/**
+ * Renderless component that calls useDndMonitor inside a parent DndContext.
+ * Only mounted when renderDndContext={false} so we guarantee a DndContext ancestor.
+ */
+export const DataTableDndMonitor = ({ handlers, dndScopeId }) => {
+  useDndMonitor({
+    onDragStart: useCallback(
+      (event) => {
+        if (!isDataTableDrag(event, dndScopeId)) return
+        handlers.current.onDragStart(event)
+      },
+      [dndScopeId, handlers],
+    ),
+    onDragOver: useCallback(
+      (event) => {
+        if (!isDataTableDrag(event, dndScopeId)) return
+        handlers.current.onDragOver(event)
+      },
+      [dndScopeId, handlers],
+    ),
+    onDragCancel: useCallback(
+      (event) => {
+        if (!isDataTableDrag(event, dndScopeId)) return
+        handlers.current.onDragCancel(event)
+      },
+      [dndScopeId, handlers],
+    ),
+    onDragEnd: useCallback(
+      (event) => {
+        if (!isDataTableDrag(event, dndScopeId)) return
+        handlers.current.onDragEnd(event)
+      },
+      [dndScopeId, handlers],
+    ),
+  })
+  return null
+}
+
 export const useDataTableDnd = ({
   rows,
   selectedSet,
@@ -19,6 +65,7 @@ export const useDataTableDnd = ({
   onReorder,
   onRowDragStart,
   onRowDragEnd,
+  dndScopeId,
 }) => {
   const [activeDragRowId, setActiveDragRowId] = useState(null)
   const [overDragRowId, setOverDragRowId] = useState(null)
@@ -143,11 +190,22 @@ export const useDataTableDnd = ({
     [handleDndCancel, handleDndEnd, handleDndOver, handleDndStart, sensors],
   )
 
+  const monitorHandlers = useMemo(
+    () => ({
+      onDragStart: handleDndStart,
+      onDragOver: handleDndOver,
+      onDragCancel: handleDndCancel,
+      onDragEnd: handleDndEnd,
+    }),
+    [handleDndStart, handleDndOver, handleDndCancel, handleDndEnd],
+  )
+
   return {
     dndContextProps,
     activeDragRowId,
     overDragRowId,
     activeDragContext,
     sortableItems: rows.map((row) => row.id),
+    monitorHandlers,
   }
 }

package/src/components/SetlistList/SetlistList.jsx

@@ -293,6 +293,7 @@ export const SetlistList = ({
   isMobile = false,
   droppable = false,
   activeDropSetlistId = null,
+  enableDndDropTargets = false,
 }) => {
   const { close, isMobile: isMobileDrawer } = useMobileDrawerContext()
   const [openSetlistMenuId, setOpenSetlistMenuId] = useState(null)
@@ -471,6 +472,11 @@ export const SetlistList = ({
                 onClick={() => handleSetlistClick(setlist.id)}
                 droppable={droppable}
                 isDropTarget={activeDropSetlistId === setlist.id}
+                dndDroppableId={
+                  enableDndDropTargets
+                    ? `setlist:${setlist.id}`
+                    : undefined
+                }
                 onDragOver={(event) => {
                   onSetlistDragOver?.(setlist.id, event)
                 }}

package/src/components/SetlistList/SetlistList.stories.jsx

@@ -1,17 +1,13 @@
-import { useState, useMemo, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import {
   DndContext,
-  DragOverlay,
   PointerSensor,
   useSensor,
   useSensors,
   pointerWithin,
 } from '@dnd-kit/core'
-import { snapCenterToCursor } from '@dnd-kit/modifiers'
-import { SetlistList, SetlistItem } from './SetlistList'
+import { SetlistList } from './SetlistList'
 import { DataTable } from '../DataTable/DataTable'
-import { DataTableDragOverlay } from '../DataTable/dnd/DataTableDragOverlay'
-import { toDragRow } from '../DataTable/dnd/dataTableDnd.utils'
 
 const defaultSetlists = [
   {
@@ -307,81 +303,53 @@ const dndSetlists = defaultSetlists.slice(0, 4)
 export const DragFromDataTable = {
   render: () => {
     const [selectedRowIds, setSelectedRowIds] = useState([])
-    const [activeDragContext, setActiveDragContext] = useState(null)
+    const [selectedSetlistId, setSelectedSetlistId] = useState(
+      dndSetlists[0].id,
+    )
     const [dropLog, setDropLog] = useState([])
 
     const sensors = useSensors(
       useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
     )
 
-    const normalizedRows = useMemo(
-      () => trackRows.map((row, index) => toDragRow(row, index)),
-      [],
-    )
-
-    const selectedSet = useMemo(
-      () => new Set(selectedRowIds.map(String)),
-      [selectedRowIds],
-    )
-
-    const handleDragStart = useCallback(
-      (event) => {
-        const activeId = String(event.active?.id ?? '')
-        const dragRow = normalizedRows.find((r) => r.id === activeId)
-        if (!dragRow) return
-
-        const isDraggedRowSelected = selectedSet.has(activeId)
-        const selectedRows = isDraggedRowSelected
-          ? normalizedRows.filter((r) => selectedSet.has(r.id))
-          : [dragRow]
-
-        setActiveDragContext({
-          row: dragRow,
-          selectedRows,
-          isDraggedRowSelected,
-        })
-      },
-      [normalizedRows, selectedSet],
-    )
-
     const handleDragEnd = useCallback(
       (event) => {
         const { active, over } = event
+        if (!over) return
 
-        if (over && activeDragContext) {
-          const setlistId = String(over.id).replace('setlist-drop-', '')
-          const setlist = dndSetlists.find((s) => s.id === setlistId)
+        const data = active.data?.current
+        if (data?.source !== 'data-table') return
 
-          if (setlist) {
-            const trackNames = activeDragContext.selectedRows
-              .map((r) => r.title)
-              .join(', ')
-            setDropLog((prev) => [
-              {
-                id: Date.now(),
-                text: `"${trackNames}" → "${setlist.label}"`,
-              },
-              ...prev.slice(0, 4),
-            ])
-          }
-        }
+        const overId = String(over.id)
+        if (!overId.startsWith('setlist:')) return
 
-        setActiveDragContext(null)
+        const setlistId = overId.replace('setlist:', '')
+        const setlist = dndSetlists.find((s) => s.id === setlistId)
+        if (!setlist) return
+
+        const selectedSet = new Set(selectedRowIds.map(String))
+        const isDraggedSelected = selectedSet.has(data.rowId)
+        const draggedRows = isDraggedSelected
+          ? trackRows.filter((r) => selectedSet.has(r.id))
+          : [data.row]
+
+        const trackNames = draggedRows.map((r) => r.title).join(', ')
+        setDropLog((prev) => [
+          {
+            id: Date.now(),
+            text: `"${trackNames}" → "${setlist.label}"`,
+          },
+          ...prev.slice(0, 4),
+        ])
       },
-      [activeDragContext],
+      [selectedRowIds],
     )
 
-    const handleDragCancel = useCallback(() => {
-      setActiveDragContext(null)
-    }, [])
-
     return (
       <DndContext
         sensors={sensors}
         collisionDetection={pointerWithin}
-        onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
-        onDragCancel={handleDragCancel}
       >
         <div style={{ display: 'flex', gap: 24, height: '100%' }}>
           <div
@@ -445,15 +413,12 @@ export const DragFromDataTable = {
               Drop on a setlist
             </div>
 
-            {dndSetlists.map((setlist) => (
-              <SetlistItem
-                key={setlist.id}
-                setlistId={setlist.id}
-                text={setlist.label}
-                subtitle={setlist.subtitle}
-                dndDroppableId={`setlist-drop-${setlist.id}`}
-              />
-            ))}
+            <SetlistList
+              setlists={dndSetlists}
+              selectedSetlistId={selectedSetlistId}
+              onSetlistClick={setSelectedSetlistId}
+              enableDndDropTargets
+            />
 
             {dropLog.length > 0 && (
               <div
@@ -494,19 +459,6 @@ export const DragFromDataTable = {
             )}
           </div>
         </div>
-
-        <DragOverlay modifiers={[snapCenterToCursor]}>
-          {activeDragContext ? (
-            <DataTableDragOverlay
-              model={activeDragContext}
-              getDragPreviewLabel={(row, selectedRows) =>
-                selectedRows.length > 1
-                  ? `${selectedRows.length} files`
-                  : (row.trackName ?? row.title)
-              }
-            />
-          ) : null}
-        </DragOverlay>
       </DndContext>
     )
   },

package/src/components/ToastProvider/ToastProvider.module.css

@@ -11,7 +11,7 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  z-index: 2000;
+  z-index: 9999;
   outline: none;
 }