@dust-tt/sparkle 0.2.591-rc-1 → 0.2.591-rc-2

package/src/components/Dropdown.tsx

@@ -370,25 +370,25 @@ const DropdownMenuItem = React.forwardRef<
     ref
   ) => {
     return (
-      <LinkWrapper
-        href={href}
-        target={target}
-        rel={rel}
-        replace={replace}
-        shallow={shallow}
-        prefetch={prefetch}
+      <DropdownMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+          menuStyleClasses.item({ variant }),
+          inset ? menuStyleClasses.inset : "",
+          className
+        )}
+        {...props}
+        asChild={asChild}
       >
-        <DropdownMenuPrimitive.Item
-          ref={ref}
-          className={cn(
-            menuStyleClasses.item({ variant }),
-            inset ? menuStyleClasses.inset : "",
-            className
-          )}
-          {...props}
-          asChild={asChild}
-        >
-          <div className="s-h-full s-w-full">
+        <div className="s-h-full s-w-full">
+          <LinkWrapper
+            href={href}
+            target={target}
+            rel={rel}
+            replace={replace}
+            shallow={shallow}
+            prefetch={prefetch}
+          >
             <ItemWithLabelIconAndDescription
               label={label}
               icon={icon}
@@ -398,9 +398,9 @@ const DropdownMenuItem = React.forwardRef<
             >
               {children}
             </ItemWithLabelIconAndDescription>
-          </div>
-        </DropdownMenuPrimitive.Item>
-      </LinkWrapper>
+          </LinkWrapper>
+        </div>
+      </DropdownMenuPrimitive.Item>
     );
   }
 );

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));

package/src/stories/MultiPageSheet.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import React, { useCallback, useState } from "react";
 
 import { Button } from "@sparkle/components/Button";
+import { ScrollableDataTable } from "@sparkle/components/DataTable";
 import {
   MultiPageSheet,
   MultiPageSheetContent,
@@ -466,3 +468,214 @@ export const WithConditionalNavigation: Story = {
     );
   },
 };
+
+// Sample data types for the ScrollableDataTable
+interface UserData {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: string;
+  lastActive: string;
+  onClick?: () => void;
+}
+
+// Generate random user data
+const generateRandomUsers = (
+  count: number,
+  startId: number = 0
+): UserData[] => {
+  const roles = ["Admin", "User", "Manager", "Developer", "Designer"];
+  const statuses = ["Active", "Inactive", "Pending"];
+  const firstNames = [
+    "John",
+    "Jane",
+    "Mike",
+    "Sarah",
+    "David",
+    "Lisa",
+    "Tom",
+    "Anna",
+    "Chris",
+    "Emma",
+  ];
+  const lastNames = [
+    "Smith",
+    "Johnson",
+    "Williams",
+    "Brown",
+    "Jones",
+    "Garcia",
+    "Miller",
+    "Davis",
+    "Rodriguez",
+    "Martinez",
+  ];
+
+  return Array.from({ length: count }, (_, index) => {
+    const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+    const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+    const id = (startId + index + 1).toString();
+
+    return {
+      id,
+      name: `${firstName} ${lastName}`,
+      email: `${firstName.toLowerCase()}.${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: () => alert(`Clicked on user: ${firstName} ${lastName}`),
+    };
+  });
+};
+
+export const WithScrollableDataTable: Story = {
+  render() {
+    const [currentPageId, setCurrentPageId] = useState("users");
+    const [users, setUsers] = useState<UserData[]>(() =>
+      generateRandomUsers(50)
+    );
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+
+    // Define columns for the data table
+    const columns: ColumnDef<UserData>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        cell: ({ row }) => (
+          <div className="s-font-medium">{row.getValue("name")}</div>
+        ),
+        meta: { sizeRatio: 25 },
+      },
+      {
+        accessorKey: "email",
+        header: "Email",
+        cell: ({ row }) => (
+          <div className="s-text-muted-foreground">{row.getValue("email")}</div>
+        ),
+        meta: { sizeRatio: 30 },
+      },
+      {
+        accessorKey: "role",
+        header: "Role",
+        cell: ({ row }) => (
+          <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")}
+          </div>
+        ),
+        meta: { sizeRatio: 15 },
+      },
+      {
+        accessorKey: "status",
+        header: "Status",
+        cell: ({ row }) => {
+          const status = row.getValue("status") as string;
+          const 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 (
+            <div
+              className={`s-inline-flex s-rounded-full s-px-2 s-py-1 s-text-xs s-font-semibold ${colorClass}`}
+            >
+              {status}
+            </div>
+          );
+        },
+        meta: { sizeRatio: 15 },
+      },
+      {
+        accessorKey: "lastActive",
+        header: "Last Active",
+        cell: ({ row }) => (
+          <div className="s-text-sm s-text-muted-foreground">
+            {row.getValue("lastActive")}
+          </div>
+        ),
+        meta: { sizeRatio: 15 },
+      },
+    ];
+
+    // Handle infinite loading
+    const handleLoadMore = useCallback(() => {
+      if (isLoading || !hasMore) {
+        return;
+      }
+
+      setIsLoading(true);
+
+      // Simulate API call delay
+      setTimeout(() => {
+        const newUsers = generateRandomUsers(25, users.length);
+        setUsers((prev) => [...prev, ...newUsers]);
+        setIsLoading(false);
+
+        // Stop loading more after reaching 200 items for demo purposes
+        if (users.length >= 175) {
+          setHasMore(false);
+        }
+      }, 1000);
+    }, [isLoading, hasMore, users.length]);
+
+    const handleSave = () => {
+      alert("User data saved!");
+    };
+
+    const scrollableDataTablePages: MultiPageSheetPage[] = [
+      {
+        id: "users",
+        title: "User Management",
+        description: "Manage users with infinite scroll",
+        icon: UserIcon,
+        noScroll: true,
+        content: (
+          <div className="s-flex s-h-full s-flex-col s-space-y-4">
+            <div className="s-flex-shrink-0">
+              <h3 className="s-mb-2 s-text-lg s-font-semibold">
+                Users Database
+              </h3>
+              <p className="s-text-sm s-text-muted-foreground">
+                Browse through all users with infinite scrolling. Click on any
+                row to view details.
+              </p>
+            </div>
+            <ScrollableDataTable
+              className="s-min-h-0"
+              data={users}
+              columns={columns}
+              maxHeight={true}
+              onLoadMore={hasMore ? handleLoadMore : undefined}
+              isLoading={isLoading}
+              enableRowSelection={false}
+            />
+            <div className="s-flex-shrink-0 s-text-xs s-text-muted-foreground">
+              Showing {users.length} users{" "}
+              {hasMore ? "(loading more available)" : "(all users loaded)"}
+            </div>
+          </div>
+        ),
+      },
+    ];
+
+    return (
+      <MultiPageSheet>
+        <MultiPageSheetTrigger asChild>
+          <Button label="Open User Management" />
+        </MultiPageSheetTrigger>
+        <MultiPageSheetContent
+          pages={scrollableDataTablePages}
+          currentPageId={currentPageId}
+          onPageChange={setCurrentPageId}
+          size="xl"
+          onSave={handleSave}
+        />
+      </MultiPageSheet>
+    );
+  },
+};