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

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/icons/app/Bell.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgBell = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7ZM9 21h6v2H9v-2Z"
+    />
+  </svg>
+);
+export default SvgBell;

package/src/icons/app/index.ts

@@ -13,6 +13,7 @@ export { default as ArrowUpOnSquareIcon } from "./ArrowUpOnSquare";
 export { default as ArrowUpSIcon } from "./ArrowUpS";
 export { default as AttachmentIcon } from "./Attachment";
 export { default as BarChartIcon } from "./BarChart";
+export { default as BellIcon } from "./Bell";
 export { default as BoltIcon } from "./Bolt";
 export { default as BookOpenIcon } from "./BookOpen";
 export { default as BracesIcon } from "./Braces";

package/src/icons/src/app/bell.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 17H22V19H2V17H4V10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10V17ZM9 21H15V23H9V21Z" fill="#111418"/>
+</svg>

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