@moises.ai/design-system 3.10.8 → 3.10.9

package/package.json

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

@@ -137,6 +137,7 @@
 
 .selectColumn {
   cursor: pointer;
+  touch-action: manipulation;
 }
 
 .checkboxCell {
@@ -284,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

@@ -380,6 +380,7 @@ const SelectableTemplate = (args) => {
   const sortedRows = sortRows(rows, sorting)
 
   const handleClick = (row) => {
+    console.log('Row clicked:', row)
     alert(`Row clicked: ${row.title}`)
   }
 

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

@@ -29,6 +29,8 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
   dndScopeId,
 }) {
   const shiftClickRef = useRef(false)
+  const touchHandledRef = useRef(false)
+  const checkboxTouchHandledRef = useRef(false)
   const {
     attributes,
     listeners,
@@ -57,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)
@@ -65,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) {
@@ -79,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)
@@ -87,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)
   }
 
@@ -119,6 +154,7 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
         data-column-id="select"
         data-sorted="false"
         onClick={handleCheckboxCellClick}
+        onPointerUp={handleCheckboxCellPointerUp}
       >
         <Checkbox
           size="1"
@@ -145,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/ToastProvider/ToastProvider.module.css

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