@dust-tt/sparkle 0.2.591 → 0.2.592

package/dist/esm/stories/MultiPageSheet.stories.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __spreadArray } from "tslib";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Button } from "../components/Button";
+import { ScrollableDataTable } from "../components/DataTable";
 import { MultiPageSheet, MultiPageSheetContent, MultiPageSheetTrigger, } from "../components/MultiPageSheet";
 import { Cog6ToothIcon, DocumentTextIcon, UserIcon } from "../icons/app";
 var meta = {
@@ -244,4 +245,156 @@ export var WithConditionalNavigation = {
             React.createElement(MultiPageSheetContent, { pages: conditionalPages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "lg", onSave: handleSave, showNavigation: true, disableNext: currentPageId === "data-selection" && selectedItems.length === 0, disableSave: !description.trim() })));
     },
 };
+// Generate random user data
+var generateRandomUsers = function (count, startId) {
+    if (startId === void 0) { startId = 0; }
+    var roles = ["Admin", "User", "Manager", "Developer", "Designer"];
+    var statuses = ["Active", "Inactive", "Pending"];
+    var firstNames = [
+        "John",
+        "Jane",
+        "Mike",
+        "Sarah",
+        "David",
+        "Lisa",
+        "Tom",
+        "Anna",
+        "Chris",
+        "Emma",
+    ];
+    var lastNames = [
+        "Smith",
+        "Johnson",
+        "Williams",
+        "Brown",
+        "Jones",
+        "Garcia",
+        "Miller",
+        "Davis",
+        "Rodriguez",
+        "Martinez",
+    ];
+    return Array.from({ length: count }, function (_, index) {
+        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+        var lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+        var id = (startId + index + 1).toString();
+        return {
+            id: id,
+            name: "".concat(firstName, " ").concat(lastName),
+            email: "".concat(firstName.toLowerCase(), ".").concat(lastName.toLowerCase(), "@example.com"),
+            role: roles[Math.floor(Math.random() * roles.length)],
+            status: statuses[Math.floor(Math.random() * statuses.length)],
+            lastActive: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000).toLocaleDateString(),
+            onClick: function () { return alert("Clicked on user: ".concat(firstName, " ").concat(lastName)); },
+        };
+    });
+};
+export var WithScrollableDataTable = {
+    render: function () {
+        var _a = __read(useState("users"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+        var _b = __read(useState(function () {
+            return generateRandomUsers(50);
+        }), 2), users = _b[0], setUsers = _b[1];
+        var _c = __read(useState(false), 2), isLoading = _c[0], setIsLoading = _c[1];
+        var _d = __read(useState(true), 2), hasMore = _d[0], setHasMore = _d[1];
+        // Define columns for the data table
+        var columns = [
+            {
+                accessorKey: "name",
+                header: "Name",
+                cell: function (_a) {
+                    var row = _a.row;
+                    return (React.createElement("div", { className: "s-font-medium" }, row.getValue("name")));
+                },
+                meta: { sizeRatio: 25 },
+            },
+            {
+                accessorKey: "email",
+                header: "Email",
+                cell: function (_a) {
+                    var row = _a.row;
+                    return (React.createElement("div", { className: "s-text-muted-foreground" }, row.getValue("email")));
+                },
+                meta: { sizeRatio: 30 },
+            },
+            {
+                accessorKey: "role",
+                header: "Role",
+                cell: function (_a) {
+                    var row = _a.row;
+                    return (React.createElement("div", { className: "s-inline-flex s-rounded-full s-bg-blue-100 s-px-2 s-py-1 s-text-xs s-font-semibold s-text-blue-800" }, row.getValue("role")));
+                },
+                meta: { sizeRatio: 15 },
+            },
+            {
+                accessorKey: "status",
+                header: "Status",
+                cell: function (_a) {
+                    var row = _a.row;
+                    var status = row.getValue("status");
+                    var colorClass = status === "Active"
+                        ? "s-bg-green-100 s-text-green-800"
+                        : status === "Inactive"
+                            ? "s-bg-red-100 s-text-red-800"
+                            : "s-bg-yellow-100 s-text-yellow-800";
+                    return (React.createElement("div", { className: "s-inline-flex s-rounded-full s-px-2 s-py-1 s-text-xs s-font-semibold ".concat(colorClass) }, status));
+                },
+                meta: { sizeRatio: 15 },
+            },
+            {
+                accessorKey: "lastActive",
+                header: "Last Active",
+                cell: function (_a) {
+                    var row = _a.row;
+                    return (React.createElement("div", { className: "s-text-sm s-text-muted-foreground" }, row.getValue("lastActive")));
+                },
+                meta: { sizeRatio: 15 },
+            },
+        ];
+        // Handle infinite loading
+        var handleLoadMore = useCallback(function () {
+            if (isLoading || !hasMore) {
+                return;
+            }
+            setIsLoading(true);
+            // Simulate API call delay
+            setTimeout(function () {
+                var newUsers = generateRandomUsers(25, users.length);
+                setUsers(function (prev) { return __spreadArray(__spreadArray([], __read(prev), false), __read(newUsers), false); });
+                setIsLoading(false);
+                // Stop loading more after reaching 200 items for demo purposes
+                if (users.length >= 175) {
+                    setHasMore(false);
+                }
+            }, 1000);
+        }, [isLoading, hasMore, users.length]);
+        var handleSave = function () {
+            alert("User data saved!");
+        };
+        var scrollableDataTablePages = [
+            {
+                id: "users",
+                title: "User Management",
+                description: "Manage users with infinite scroll",
+                icon: UserIcon,
+                noScroll: true,
+                content: (React.createElement("div", { className: "s-flex s-h-full s-flex-col s-space-y-4" },
+                    React.createElement("div", { className: "s-flex-shrink-0" },
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Users Database"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Browse through all users with infinite scrolling. Click on any row to view details.")),
+                    React.createElement(ScrollableDataTable, { className: "s-min-h-0", data: users, columns: columns, maxHeight: true, onLoadMore: hasMore ? handleLoadMore : undefined, isLoading: isLoading, enableRowSelection: false }),
+                    React.createElement("div", { className: "s-flex-shrink-0 s-text-xs s-text-muted-foreground" },
+                        "Showing ",
+                        users.length,
+                        " users",
+                        " ",
+                        hasMore ? "(loading more available)" : "(all users loaded)"))),
+            },
+        ];
+        return (React.createElement(MultiPageSheet, null,
+            React.createElement(MultiPageSheetTrigger, { asChild: true },
+                React.createElement(Button, { label: "Open User Management" })),
+            React.createElement(MultiPageSheetContent, { pages: scrollableDataTablePages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "xl", onSave: handleSave })));
+    },
+};
 //# sourceMappingURL=MultiPageSheet.stories.js.map

package/dist/esm/stories/MultiPageSheet.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiPageSheet.stories.js","sourceRoot":"","sources":["../../../src/stories/MultiPageSheet.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiPageSheet.stories.js","sourceRoot":"","sources":["../../../src/stories/MultiPageSheet.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -1315,10 +1315,6 @@ select {
   height: 2.5rem;
 }
 
-.s-h-100 {
-  height: 400px;
-}
-
 .s-h-11 {
   height: 2.75rem;
 }
@@ -3805,6 +3801,11 @@ select {
   background-color: rgb(255 255 255 / 0.95);
 }
 
+.s-bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
 .s-bg-yellow-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.591",
+  "version": "0.2.592",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/DataTable.tsx

@@ -327,7 +327,7 @@ export function DataTable<TData extends TBaseData>({
 
 export interface ScrollableDataTableProps<TData extends TBaseData>
   extends DataTableProps<TData> {
-  maxHeight?: string;
+  maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
 }
@@ -343,7 +343,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   className,
   widthClassName = "s-w-full",
   columnsBreakpoints = {},
-  maxHeight = "s-h-100",
+  maxHeight,
   onLoadMore,
   isLoading = false,
   rowSelection,
@@ -480,24 +480,95 @@ export function ScrollableDataTable<TData extends TBaseData>({
   }, [onLoadMore, isLoading]);
 
   return (
-    <div className={cn("s-flex s-flex-col s-gap-2", className, widthClassName)}>
-      <div
-        className={cn(
-          "s-relative s-overflow-y-auto s-overflow-x-hidden",
-          maxHeight
-        )}
-        ref={tableContainerRef}
-      >
-        <div className="s-relative">
-          <DataTable.Root className="s-w-full s-table-fixed">
-            <DataTable.Header className="s-sticky s-top-0 s-z-20 s-bg-white s-shadow-sm dark:s-bg-background-night">
-              {table.getHeaderGroups().map((headerGroup) => (
+    <div
+      className={cn(
+        "s-relative s-overflow-y-auto s-overflow-x-hidden",
+        className,
+        widthClassName,
+        maxHeight === true
+          ? "s-flex-1"
+          : typeof maxHeight === "string"
+            ? maxHeight
+            : "s-max-h-100"
+      )}
+      ref={tableContainerRef}
+    >
+      <div className="s-relative">
+        <DataTable.Root className="s-w-full s-table-fixed">
+          <DataTable.Header className="s-sticky s-top-0 s-z-20 s-bg-white s-shadow-sm dark:s-bg-background-night">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <DataTable.Row
+                key={headerGroup.id}
+                widthClassName={widthClassName}
+              >
+                {headerGroup.headers.map((header) => {
+                  const breakpoint = columnsBreakpoints[header.id];
+                  if (
+                    !windowSize.width ||
+                    !shouldRenderColumn(windowSize.width, breakpoint)
+                  ) {
+                    return null;
+                  }
+
+                  return (
+                    <DataTable.Head
+                      column={header.column}
+                      key={header.id}
+                      className="s-max-w-0"
+                      style={{
+                        width: columnSizing[header.id],
+                        minWidth: columnSizing[header.id],
+                      }}
+                    >
+                      <div className="s-flex s-w-full s-items-center s-space-x-1">
+                        <span className="s-truncate">
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                        </span>
+                      </div>
+                    </DataTable.Head>
+                  );
+                })}
+              </DataTable.Row>
+            ))}
+          </DataTable.Header>
+          <DataTable.Body
+            className="s-relative s-w-full"
+            style={{
+              height: `${rowVirtualizer.getTotalSize()}px`,
+            }}
+          >
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+              const row = rows[virtualRow.index];
+              const handleRowClick = () => {
+                if (enableRowSelection && row.getCanSelect()) {
+                  row.toggleSelected(
+                    !enableMultiRowSelection ? true : undefined
+                  );
+                }
+                row.original.onClick?.();
+              };
+
+              return (
                 <DataTable.Row
-                  key={headerGroup.id}
+                  key={row.id}
+                  id={row.id}
                   widthClassName={widthClassName}
+                  onClick={
+                    enableRowSelection ? handleRowClick : row.original.onClick
+                  }
+                  className="s-absolute s-w-full"
+                  {...(enableRowSelection && {
+                    "data-selected": row.getIsSelected(),
+                  })}
+                  style={{
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
                 >
-                  {headerGroup.headers.map((header) => {
-                    const breakpoint = columnsBreakpoints[header.id];
+                  {row.getVisibleCells().map((cell) => {
+                    const breakpoint = columnsBreakpoints[cell.column.id];
                     if (
                       !windowSize.width ||
                       !shouldRenderColumn(windowSize.width, breakpoint)
@@ -506,114 +577,47 @@ export function ScrollableDataTable<TData extends TBaseData>({
                     }
 
                     return (
-                      <DataTable.Head
-                        column={header.column}
-                        key={header.id}
+                      <DataTable.Cell
+                        column={cell.column}
+                        key={cell.id}
+                        id={cell.id}
                         className="s-max-w-0"
                         style={{
-                          width: columnSizing[header.id],
-                          minWidth: columnSizing[header.id],
+                          width: columnSizing[cell.column.id],
+                          minWidth: columnSizing[cell.column.id],
                         }}
                       >
-                        <div className="s-flex s-w-full s-items-center s-space-x-1">
+                        <div className="s-flex s-items-center s-space-x-1">
                           <span className="s-truncate">
                             {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
+                              cell.column.columnDef.cell,
+                              cell.getContext()
                             )}
                           </span>
                         </div>
-                      </DataTable.Head>
+                      </DataTable.Cell>
                     );
                   })}
                 </DataTable.Row>
-              ))}
-            </DataTable.Header>
-            <DataTable.Body
-              className="s-relative s-w-full"
-              style={{
-                height: `${rowVirtualizer.getTotalSize()}px`,
-              }}
-            >
-              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                const row = rows[virtualRow.index];
-                const handleRowClick = () => {
-                  if (enableRowSelection && row.getCanSelect()) {
-                    row.toggleSelected(
-                      !enableMultiRowSelection ? true : undefined
-                    );
-                  }
-                  row.original.onClick?.();
-                };
-
-                return (
-                  <DataTable.Row
-                    key={row.id}
-                    id={row.id}
-                    widthClassName={widthClassName}
-                    onClick={
-                      enableRowSelection ? handleRowClick : row.original.onClick
-                    }
-                    className="s-absolute s-w-full"
-                    {...(enableRowSelection && {
-                      "data-selected": row.getIsSelected(),
-                    })}
-                    style={{
-                      transform: `translateY(${virtualRow.start}px)`,
-                    }}
-                  >
-                    {row.getVisibleCells().map((cell) => {
-                      const breakpoint = columnsBreakpoints[cell.column.id];
-                      if (
-                        !windowSize.width ||
-                        !shouldRenderColumn(windowSize.width, breakpoint)
-                      ) {
-                        return null;
-                      }
-
-                      return (
-                        <DataTable.Cell
-                          column={cell.column}
-                          key={cell.id}
-                          id={cell.id}
-                          className="s-max-w-0"
-                          style={{
-                            width: columnSizing[cell.column.id],
-                            minWidth: columnSizing[cell.column.id],
-                          }}
-                        >
-                          <div className="s-flex s-items-center s-space-x-1">
-                            <span className="s-truncate">
-                              {flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext()
-                              )}
-                            </span>
-                          </div>
-                        </DataTable.Cell>
-                      );
-                    })}
-                  </DataTable.Row>
-                );
-              })}
-            </DataTable.Body>
-          </DataTable.Root>
-          {/*sentinel div used for the intersection observer*/}
-          <div
-            ref={loadMoreRef}
-            className="s-absolute s-bottom-0 s-h-1 s-w-full"
-          />
-        </div>
+              );
+            })}
+          </DataTable.Body>
+        </DataTable.Root>
+        {/*sentinel div used for the intersection observer*/}
+        <div
+          ref={loadMoreRef}
+          className="s-absolute s-bottom-0 s-h-1 s-w-full"
+        />
+      </div>
 
-        {isLoading && (
-          <div className="s-sticky s-bottom-0 s-left-0 s-right-0 s-flex s-justify-center s-bg-white/80 s-py-2 s-backdrop-blur-sm dark:s-bg-background-night/80">
-            <div className="s-flex s-items-center s-gap-2 s-text-sm s-text-muted-foreground">
-              <Spinner size="xs" />
-              <span>Loading more data...</span>
-            </div>
+      {isLoading && (
+        <div className="s-sticky s-bottom-0 s-left-0 s-right-0 s-flex s-justify-center s-bg-white/80 s-py-2 s-backdrop-blur-sm dark:s-bg-background-night/80">
+          <div className="s-flex s-items-center s-gap-2 s-text-sm s-text-muted-foreground">
+            <Spinner size="xs" />
+            <span>Loading more data...</span>
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/MultiPageSheet.tsx

@@ -22,6 +22,11 @@ interface MultiPageSheetPage {
   content: React.ReactNode;
   fixedContent?: React.ReactNode;
   footerContent?: React.ReactNode;
+  /**
+   * Remove the default ScrollArea in the SheetContainer.
+   * To be used if you want to manage the scroll yourself
+   */
+  noScroll?: boolean;
 }
 
 interface MultiPageSheetProps {
@@ -231,6 +236,7 @@ const MultiPageSheetContent = React.forwardRef<
             )}
             <SheetContainer
               className={currentPage.fixedContent ? "s-flex-1" : undefined}
+              noScroll={currentPage.noScroll}
             >
               {currentPage.content}
             </SheetContainer>

package/src/components/Sheet.tsx

@@ -180,18 +180,25 @@ const SheetHeader = ({
 );
 SheetHeader.displayName = "SheetHeader";
 
-const SheetContainer = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+interface SheetContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  noScroll?: boolean;
+}
+
+const SheetContainer = ({ children, noScroll }: SheetContainerProps) => {
+  const ScrollContainer = noScroll ? React.Fragment : ScrollArea;
   return (
-    <ScrollArea
-      className={cn(
-        "s-h-full s-w-full s-flex-grow",
-        "s-border-t s-border-border/60 s-transition-all s-duration-300 dark:s-border-border-night/60"
-      )}
-    >
-      <div className="s-relative s-flex s-h-full s-flex-col s-gap-5 s-p-5 s-text-left s-text-sm s-text-foreground dark:s-text-foreground-night">
-        {children}
+    <ScrollContainer>
+      <div
+        className={cn(
+          "s-h-full s-w-full s-flex-grow",
+          "s-border-t s-border-border/60 s-transition-all s-duration-300 dark:s-border-border-night/60"
+        )}
+      >
+        <div className="s-relative s-flex s-h-full s-flex-col s-gap-5 s-p-5 s-text-left s-text-sm s-text-foreground dark:s-text-foreground-night">
+          {children}
+        </div>
       </div>
-    </ScrollArea>
+    </ScrollContainer>
   );
 };
 SheetContainer.displayName = "SheetContainer";

package/src/stories/DataTable.stories.tsx

@@ -607,6 +607,67 @@ export const ScrollableDataTableExample = () => {
   );
 };
 
+export const ScrollableDataTableFullHeightExample = () => {
+  const [filter, setFilter] = useState("");
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [data, setData] = useState(() => createData(0, 50));
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Load more data when user scrolls to bottom
+  const loadMore = useCallback(() => {
+    setIsLoading(true);
+
+    // Simulate API call delay
+    setTimeout(() => {
+      setData((prevData) => [...prevData, ...createData(prevData.length, 50)]);
+      setIsLoading(false);
+    }, 1000);
+  }, []);
+
+  const columnsWithSize = columns.map((column, index) => {
+    return { ...column, meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } };
+  });
+
+  const columnsWithSelection: ColumnDef<Data>[] = useMemo(
+    () => [createSelectionColumn<Data>(), ...columnsWithSize],
+    []
+  );
+  return (
+    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
+      <h3 className="s-text-lg s-font-medium">
+        Virtualized ScrollableDataTable with Infinite Scrolling based on parent
+        height
+      </h3>
+
+      <div className="s-flex s-h-[400px] s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <ScrollableDataTable
+          data={data}
+          filter={filter}
+          filterColumn="name"
+          columns={columnsWithSelection}
+          onLoadMore={loadMore}
+          isLoading={isLoading}
+          maxHeight
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
+        />
+
+        <div className="s-text-sm s-text-muted-foreground">
+          Loaded {data.length} rows. Scroll to the bottom to load more.
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const DataTableWithRowSelectionExample = () => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [data] = useState<Data[]>(() => createData(0, 10));