@dust-tt/sparkle 0.2.197 → 0.2.199

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.197",
+  "version": "0.2.199",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/components/DataTable.tsx

@@ -80,7 +80,7 @@ export function DataTable<TData, TValue>({
                             : ArrowDownIcon
                       }
                       className={classNames(
-                        "s-h-4 s-w-3 s-font-extralight",
+                        "s-ml-1 s-w-2.5 s-font-extralight",
                         header.column.getIsSorted()
                           ? "s-opacity-100"
                           : "s-opacity-0"
@@ -97,8 +97,8 @@ export function DataTable<TData, TValue>({
         {table.getRowModel().rows.map((row) => (
           <DataTable.Row
             key={row.id}
-            clickable={row.original.clickable}
             onClick={row.original.onClick}
+            onMoreClick={row.original.onMoreClick}
           >
             {row.getVisibleCells().map((cell) => (
               <DataTable.Cell key={cell.id}>
@@ -182,30 +182,35 @@ DataTable.Body = function Body({
 
 interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   children: ReactNode;
-  clickable?: boolean;
   onClick?: () => void;
+  onMoreClick?: () => void;
 }
 
 DataTable.Row = function Row({
   children,
   className,
-  clickable = false,
   onClick,
+  onMoreClick,
   ...props
 }: RowProps) {
   return (
     <tr
       className={classNames(
         "s-border-b s-border-structure-200 s-text-sm",
+        onClick ? "s-cursor-pointer" : "",
         className || ""
       )}
+      onClick={onClick ? onClick : undefined}
       {...props}
     >
       {children}
-      {clickable && (
+      {onMoreClick && (
         <td
           className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600"
-          onClick={clickable ? onClick : undefined}
+          onClick={(e) => {
+            e.stopPropagation(); // Prevent row click event
+            onMoreClick?.();
+          }}
         >
           <Icon visual={MoreIcon} size="sm" />
         </td>
@@ -213,7 +218,6 @@ DataTable.Row = function Row({
     </tr>
   );
 };
-
 interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;

package/src/stories/DataTable.stories.tsx

@@ -23,6 +23,8 @@ type Data = {
   icon?: React.ComponentType<{ className?: string }>;
   clickable?: boolean;
   onClick?: () => void;
+  showMore?: boolean;
+  onMoreClick?: () => void;
 };
 
 const DataTableExample = () => {
@@ -35,8 +37,8 @@ const DataTableExample = () => {
       lastUpdated: "July 8, 2023",
       size: "32kb",
       avatarUrl: "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg",
-      clickable: true,
       onClick: () => console.log("hehe"),
+      onMoreClick: () => console.log("show more"),
     },
     {
       name: "Design",
@@ -45,7 +47,6 @@ const DataTableExample = () => {
       lastUpdated: "2023-07-09",
       size: "64kb",
       icon: FolderIcon,
-      clickable: false,
     },
     {
       name: "Development",