@moises.ai/design-system 3.9.30 → 3.10.1

package/package.json

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

package/src/components/DataTable/DataTable.jsx

@@ -160,7 +160,8 @@ const DataRow = React.memo(function DataRow({
           key={column.id}
           className={classNames(
             styles.projectCell,
-            index === 0 ? styles.columnProject : styles.dataColumn,
+              index === 0 ? styles.columnProject : styles.dataColumn,
+              index === 1 ? styles.firstDataColumn : null,
             { [styles.sortedColumn]: sortedKey === column.id },
           )}
           data-column-id={column.id}
@@ -183,7 +184,7 @@ const DataRow = React.memo(function DataRow({
               trigger={
                 <Flex className={styles.dropdownTriggerWrapper}>
                   <MoreButton
-                    aria-label={`More options for ${row.title}`}
+                    aria-label={`More options for ${row.title ?? ''}`}
                     className={classNames(styles.dropdownTriggerWrapperIcon, styles.dropdownColumnCell)}
                   />
                 </Flex>
@@ -204,6 +205,7 @@ export const DataTable = ({
   columns,
   data,
   selectedRowIds = [],
+  selectedFilesLabel,
   onClick,
   renderHeaderActions,
   sorting,
@@ -434,29 +436,36 @@ export const DataTable = ({
               key={column.id}
               className={classNames(styles.columnHeaderCell, {
                 [styles.columnProject]: index === 0,
-                [styles.dataColumn]: index !== 0,
+              [styles.dataColumn]: index !== 0,
+              [styles.firstDataColumn]: index === 1,
                 [styles.sortedColumn]: toUpperCase(sortedKey) === toUpperCase(column.id),
               })}
             >
               <Flex align="center" gap="3" height="24px">
-                {index === 0 ? (
-                  <Text size="2" className={styles.headerTextFirst}>
-                    {column.label}
+                {index === 0 && anyRowChecked ? (
+                  <Text size="2" weight="regular" className={styles.headerTextFirst}>
+                    {selectedFilesLabel}
                   </Text>
-                ) : (
+                ) : column.sortable ? (
                   <button
                     type="button"
-                    className={styles.sortButton}
+                    className={classNames(styles.sortButton, {
+                      [styles.sortButtonFirst]: index === 0,
+                    })}
                     onClick={() => handleSortClick(column.id)}
                   >
                     <Text size="2">{column.label}</Text>
-                    {sortedKey === column.id &&
+                    {toUpperCase(sortedKey) === toUpperCase(column.id) &&
                       (sorting?.sort === 'DESC' ? (
                         <ArrowUpIcon width={16} height={16} />
                       ) : (
                         <ArrowDownIcon width={16} height={16} />
                       ))}
                   </button>
+                ) : (
+                  <Text size="2" className={styles.headerText}>
+                    {column.label}
+                  </Text>
                 )}
 
                 {index === 0 && renderHeaderActions && (

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

@@ -93,6 +93,7 @@
 
 .headerTextFirst {
   padding: 0;
+  color: var(--neutral-alpha-10);
 }
 
 .headerTextFirst {
@@ -125,6 +126,10 @@
   }
 }
 
+.sortButtonFirst {
+  padding: 0 12px 0 0;
+}
+
 .headerRow {
   background: rgba(255, 255, 255, 0);
   box-shadow: inset 0 -1px var(--neutral-alpha-4);
@@ -173,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%;
@@ -375,7 +380,7 @@
   }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1124px) {
   .selectColumn {
     display: none !important;
   }
@@ -396,7 +401,7 @@
     display: table-cell !important;
   }
 
-  .sortedColumn {
+  .dataColumn.sortedColumn {
     display: table-cell !important;
   }
 
@@ -408,4 +413,10 @@
   .dropdownTriggerWrapperIcon {
     opacity: 1;
   }
+}
+
+@media (max-width: 1124px) {
+  .firstDataColumn {
+    display: table-cell !important;
+  }
 }

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

@@ -190,19 +190,22 @@ const auxBodyTable = [
   })),
 ]
 
-const projectsCount = auxBodyTable.length
-
 const auxHeaderTable = [
-  { id: 'project', label: `${projectsCount} Projects` },
+  {
+    id: 'title',
+    label: 'Title',
+    sortable: true,
+    onClick: () => { },
+  },
   {
     id: 'RECENT',
     label: 'Created',
     sortable: true,
     onClick: () => { },
   },
-  { id: 'BPM', label: 'BPM', onClick: () => { } },
-  { id: 'KEY', label: 'Key', onClick: () => { } },
-  { id: 'DURATION', label: 'Duration', onClick: () => { } },
+  { id: 'BPM', label: 'BPM', onClick: () => { }, sortable: true },
+  { id: 'KEY', label: 'Key', onClick: () => { }, sortable: true },
+  { id: 'DURATION', label: 'Duration', onClick: () => { }, sortable: true },
 ]
 
 export default {
@@ -325,6 +328,11 @@ const SelectableTemplate = (args) => {
     console.log('Row clicked:', row)
   }
 
+  const selectedFilesLabel =
+    selectedRowIds.length === 1
+      ? '1 file selected'
+      : `${selectedRowIds.length} files selected`
+
   return (
     <DataTable
       {...args}
@@ -332,6 +340,7 @@ const SelectableTemplate = (args) => {
       data={sortedRows}
       sorting={sorting}
       selectedRowIds={selectedRowIds}
+      selectedFilesLabel={selectedFilesLabel}
       onSelectRow={handleSelectRow}
       onSelectAll={handleSelectAll}
       onSort={handleSort}
@@ -375,6 +384,11 @@ const ReorderableTemplate = (args) => {
   // Reorderable: mostra na ordem atual (sem reaplicar sort) para a reordenação refletir na tela
   const displayRows = rows
 
+  const selectedFilesLabel =
+    selectedRowIds.length === 1
+      ? '1 file selected'
+      : `${selectedRowIds.length} files selected`
+
   return (
     <DataTable
       {...args}
@@ -382,6 +396,7 @@ const ReorderableTemplate = (args) => {
       data={displayRows}
       sorting={sorting}
       selectedRowIds={selectedRowIds}
+      selectedFilesLabel={selectedFilesLabel}
       onSelectRow={(id, checked) =>
         setSelectedRowIds((prev) =>
           checked ? [...prev, id] : prev.filter((x) => x !== id),