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

package/src/components/Dropdown.tsx

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

package/src/components/MultiPageSheet.tsx

@@ -22,11 +22,6 @@ 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 {
@@ -236,7 +231,6 @@ const MultiPageSheetContent = React.forwardRef<
             )}
             <SheetContainer
               className={currentPage.fixedContent ? "s-flex-1" : undefined}
-              noScroll={currentPage.noScroll}
             >
               {currentPage.content}
             </SheetContainer>

package/src/components/Sheet.tsx

@@ -180,25 +180,18 @@ const SheetHeader = ({
 );
 SheetHeader.displayName = "SheetHeader";
 
-interface SheetContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  noScroll?: boolean;
-}
-
-const SheetContainer = ({ children, noScroll }: SheetContainerProps) => {
-  const ScrollContainer = noScroll ? React.Fragment : ScrollArea;
+const SheetContainer = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <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>
+    <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}
       </div>
-    </ScrollContainer>
+    </ScrollArea>
   );
 };
 SheetContainer.displayName = "SheetContainer";

package/src/stories/DataTable.stories.tsx

@@ -607,67 +607,6 @@ 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,9 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { ColumnDef } from "@tanstack/react-table";
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 
 import { Button } from "@sparkle/components/Button";
-import { ScrollableDataTable } from "@sparkle/components/DataTable";
 import {
   MultiPageSheet,
   MultiPageSheetContent,
@@ -468,214 +466,3 @@ 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>
-    );
-  },
-};