@moises.ai/design-system 3.9.30 → 3.10.0

package/package.json

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

package/src/components/DataTable/DataTable.jsx

@@ -183,7 +183,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 +204,7 @@ export const DataTable = ({
   columns,
   data,
   selectedRowIds = [],
+  selectedFilesLabel,
   onClick,
   renderHeaderActions,
   sorting,
@@ -439,24 +440,30 @@ export const DataTable = ({
               })}
             >
               <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);
@@ -375,7 +380,7 @@
   }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1124px) {
   .selectColumn {
     display: none !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),