@moises.ai/design-system 3.10.0 → 3.10.2

package/package.json

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

package/src/components/DataTable/DataTable.jsx

@@ -22,6 +22,7 @@ const DataRow = React.memo(function DataRow({
   anyRowSelected,
   selectedCount,
   sortedKey,
+  mobileSecondaryColumnId,
   hasDropdownOptions,
   onRowClick,
   onSelectRow,
@@ -161,6 +162,7 @@ const DataRow = React.memo(function DataRow({
           className={classNames(
             styles.projectCell,
             index === 0 ? styles.columnProject : styles.dataColumn,
+            column.id === mobileSecondaryColumnId ? styles.mobileVisibleDataColumn : null,
             { [styles.sortedColumn]: sortedKey === column.id },
           )}
           data-column-id={column.id}
@@ -223,6 +225,16 @@ export const DataTable = ({
   const anchorRowIndexRef = useRef(null)
 
   const sortedKey = sorting?.field
+  const primaryColumnId = columns?.[0]?.id
+  const defaultSecondaryColumnId = columns?.[1]?.id
+
+  const mobileSecondaryColumnId = useMemo(() => {
+    if (!columns?.length) return undefined
+    if (!sortedKey || sortedKey === primaryColumnId) {
+      return defaultSecondaryColumnId
+    }
+    return sortedKey
+  }, [columns, sortedKey, primaryColumnId, defaultSecondaryColumnId])
 
   const selectedSet = useMemo(() => new Set(selectedRowIds), [selectedRowIds])
 
@@ -436,6 +448,7 @@ export const DataTable = ({
               className={classNames(styles.columnHeaderCell, {
                 [styles.columnProject]: index === 0,
                 [styles.dataColumn]: index !== 0,
+                [styles.mobileVisibleDataColumn]: column.id === mobileSecondaryColumnId,
                 [styles.sortedColumn]: toUpperCase(sortedKey) === toUpperCase(column.id),
               })}
             >
@@ -498,6 +511,7 @@ export const DataTable = ({
             anyRowSelected={anyRowChecked}
             selectedCount={selectedCount}
             sortedKey={sortedKey}
+            mobileSecondaryColumnId={mobileSecondaryColumnId}
             hasDropdownOptions={hasDropdownOptions}
             onRowClick={handleRowClick}
             onSelectRow={handleSelectRow}

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

@@ -178,7 +178,7 @@
 
 .DataTable :global(.rt-TableColumnHeaderCell:nth-child(2)),
 .DataTable :global(.rt-TableCell:nth-child(2)) {
-  max-width: 565px;
+  max-width: 480px;
   min-width: 260px;
   box-shadow: none;
   width: 100%;
@@ -400,8 +400,8 @@
   .columnProject {
     display: table-cell !important;
   }
-
-  .sortedColumn {
+  
+  .dataColumn.mobileVisibleDataColumn {
     display: table-cell !important;
   }
 
@@ -413,4 +413,4 @@
   .dropdownTriggerWrapperIcon {
     opacity: 1;
   }
-}
+}

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

@@ -482,4 +482,46 @@ export const Default = {
       sort: 'DESC',
     },
   },
+}
+
+export const SortedByTitle = {
+  render: (args) => (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: '1620px',
+        maxHeight: '400px',
+      }}
+    >
+      <SelectableTemplate {...args} />
+    </div>
+  ),
+  args: {
+    ...Default.args,
+    initialSorting: {
+      field: 'title',
+      sort: 'ASC',
+    },
+  },
+}
+
+export const SortedByKey = {
+  render: (args) => (
+    <div
+      style={{
+        width: '100%',
+        maxWidth: '1620px',
+        maxHeight: '400px',
+      }}
+    >
+      <SelectableTemplate {...args} />
+    </div>
+  ),
+  args: {
+    ...Default.args,
+    initialSorting: {
+      field: 'KEY',
+      sort: 'ASC',
+    },
+  },
 }