@dust-tt/sparkle 0.2.217 → 0.2.218-rc-2

package/package.json

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

package/src/components/DataTable.tsx

@@ -4,7 +4,7 @@ import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
-  getSortedRowModel,
+  getSortedRowModel, SortingFn,
   type SortingState,
   useReactTable,
 } from "@tanstack/react-table";
@@ -35,6 +35,7 @@ interface DataTableProps<TData extends TBaseData> {
   filterColumn?: string;
   initialColumnOrder?: SortingState;
   columnsBreakpoints?: ColumnBreakpoint;
+  sortingFn?: SortingFn<TData>
 }
 
 function shouldRenderColumn(

package/src/components/Tree.tsx

@@ -147,8 +147,8 @@ Tree.Item = function ({
           isNavigatable ? treeItemStyleClasses.isNavigatableBase : "",
           isNavigatable
             ? size === "sm"
-              ? "s-gap-1 s-rounded-lg s-py-1 s-pl-1.5 s-pr-3"
-              : "s-gap-2 s-rounded-lg s-py-2 s-pl-2.5 s-pr-4"
+              ? "s-gap-1 s-rounded-lg s-py-1 s-pr-3"
+              : "s-gap-2 s-rounded-lg s-py-2 s-pr-4"
             : size === "sm"
               ? "s-gap-1 s-py-1"
               : "s-gap-2 s-py-2",
@@ -156,7 +156,14 @@ Tree.Item = function ({
             ? isSelected
               ? treeItemStyleClasses.isNavigatableSelected
               : treeItemStyleClasses.isNavigatableUnselected
-            : ""
+            : "",
+          type === "leaf"
+            ? "s-pl-5"
+            : isNavigatable
+              ? size === "sm"
+                ? "s-pl-1.5"
+                : "s-pl-2.5"
+              : ""
         )}
         onClick={onItemClick ? onItemClick : undefined}
       >
@@ -177,7 +184,6 @@ Tree.Item = function ({
             }}
           />
         )}
-        {type === "leaf" && <div className="s-w-4"></div>}
         {checkbox && <Checkbox {...checkbox} size="xs" />}
         <Icon
           visual={visual}

package/src/stories/DataTable.stories.tsx

@@ -54,6 +54,20 @@ export const DataTableExample = () => {
         },
       ],
     },
+    {
+      name: "design",
+      usedBy: 3,
+      addedBy: "User21",
+      lastUpdated: "2023-07-09",
+      size: "64kb",
+      icon: FolderIcon,
+      moreMenuItems: [
+        {
+          label: "Edit",
+          onClick: () => console.log("Edit"),
+        },
+      ],
+    },
     {
       name: "Development",
       usedBy: 5,
@@ -81,6 +95,7 @@ export const DataTableExample = () => {
     {
       accessorKey: "name",
       header: "Name",
+      sortingFn: "text",
       cell: (info) => (
         <DataTable.CellContent
           avatarUrl={info.row.original.avatarUrl}