@moises.ai/design-system 3.10.8 → 3.10.10

package/package.json

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

@@ -12,6 +12,7 @@
   background-color: var(--neutral-1);
   width: 240px;
   height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--neutral-3);
@@ -203,6 +204,7 @@
     z-index: 1001;
     width: 100%;
     height: calc(100vh - 64px);
+    height: calc(100dvh - 64px);
     padding: 16px;
     background-color: var(--neutral-1);
     opacity: 0;

package/src/components/Sidebar/Sidebar.stories.jsx

@@ -121,22 +121,22 @@ export const Default = {
 
     const bannerAnnouncement = showBannerAnnouncement
       ? {
-          title: 'Moises AI Studio',
-          badge: {
-            label: 'new',
-            color: 'green',
-          },
-          description:
-            'Step into the future of music creation. Record, separate, generate, convert voice, mix, and master with our all-in-one essential AI tool for musicians.',
-          image:
-            'https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png',
-          link: 'https://www.google.com',
-          buttonText: 'Learn More',
-          onClose: () => {
-            console.log('Close clicked')
-            setShowBannerAnnouncement(false)
-          },
-        }
+        title: 'Moises AI Studio',
+        badge: {
+          label: 'new',
+          color: 'green',
+        },
+        description:
+          'Step into the future of music creation. Record, separate, generate, convert voice, mix, and master with our all-in-one essential AI tool for musicians.',
+        image:
+          'https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png',
+        link: 'https://www.google.com',
+        buttonText: 'Learn More',
+        onClose: () => {
+          console.log('Close clicked')
+          setShowBannerAnnouncement(false)
+        },
+      }
       : null
 
     return (
@@ -145,6 +145,7 @@ export const Default = {
           .SidebarStoryLayout {
             display: flex;
             height: 100vh;
+            height: 100dvh;
           }
           @media (max-width: 768px) {
             .SidebarStoryLayout {

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;
 }