@moises.ai/design-system 3.10.1 → 3.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.1",
+  "version": "3.10.3",
   "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,
@@ -160,8 +161,8 @@ const DataRow = React.memo(function DataRow({
           key={column.id}
           className={classNames(
             styles.projectCell,
-              index === 0 ? styles.columnProject : styles.dataColumn,
-              index === 1 ? styles.firstDataColumn : null,
+            index === 0 ? styles.columnProject : styles.dataColumn,
+            column.id === mobileSecondaryColumnId ? styles.mobileVisibleDataColumn : null,
             { [styles.sortedColumn]: sortedKey === column.id },
           )}
           data-column-id={column.id}
@@ -224,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,8 +447,8 @@ export const DataTable = ({
               key={column.id}
               className={classNames(styles.columnHeaderCell, {
                 [styles.columnProject]: index === 0,
-              [styles.dataColumn]: index !== 0,
-              [styles.firstDataColumn]: index === 1,
+                [styles.dataColumn]: index !== 0,
+                [styles.mobileVisibleDataColumn]: column.id === mobileSecondaryColumnId,
                 [styles.sortedColumn]: toUpperCase(sortedKey) === toUpperCase(column.id),
               })}
             >
@@ -500,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

@@ -400,8 +400,8 @@
   .columnProject {
     display: table-cell !important;
   }
-
-  .dataColumn.sortedColumn {
+  
+  .dataColumn.mobileVisibleDataColumn {
     display: table-cell !important;
   }
 
@@ -414,9 +414,3 @@
     opacity: 1;
   }
 }
-
-@media (max-width: 1124px) {
-  .firstDataColumn {
-    display: table-cell !important;
-  }
-}

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',
+    },
+  },
 }

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -26,9 +26,9 @@ export const ProfileMenu = ({
 
   const wrapCloseMenu = isMobile
     ? (baseClose) => () => {
-        baseClose()
-        close()
-      }
+      baseClose()
+      close()
+    }
     : undefined
 
   const trigger = <MenuTrigger user={user} collapsed={collapsed} />
@@ -48,6 +48,7 @@ export const ProfileMenu = ({
       }
       options={menuOptions}
       side={isMobileViewport ? 'top' : 'right'}
+      align={isMobileViewport ? 'end' : 'center'}
       {...props}
       wrapCloseMenu={wrapCloseMenu}
       onSelectionChange={handleSelectionChange}