@dust-tt/sparkle 0.2.225 → 0.2.227-rc

package/src/components/DataTable.tsx

@@ -4,9 +4,12 @@ import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
   SortingFn,
   type SortingState,
+  Updater,
   useReactTable,
 } from "@tanstack/react-table";
 import React, { ReactNode, useEffect, useState } from "react";
@@ -17,6 +20,7 @@ import {
   DropdownMenu,
 } from "@sparkle/components/DropdownMenu";
 import { IconButton } from "@sparkle/components/IconButton";
+import { Pagination } from "@sparkle/components/Pagination";
 import { Tooltip } from "@sparkle/components/Tooltip";
 import { ArrowDownIcon, ArrowUpIcon, MoreIcon } from "@sparkle/icons";
 import { classNames } from "@sparkle/lib/utils";
@@ -35,10 +39,13 @@ interface ColumnBreakpoint {
 
 interface DataTableProps<TData extends TBaseData> {
   data: TData[];
+  totalRowCount?: number;
   columns: ColumnDef<TData, any>[]; // eslint-disable-line @typescript-eslint/no-explicit-any
   className?: string;
   filter?: string;
   filterColumn?: string;
+  pagination?: PaginationState;
+  setPagination?: (pagination: PaginationState) => void;
   initialColumnOrder?: SortingState;
   columnsBreakpoints?: ColumnBreakpoint;
   sortingFn?: SortingFn<TData>;
@@ -56,12 +63,15 @@ function shouldRenderColumn(
 
 export function DataTable<TData extends TBaseData>({
   data,
+  totalRowCount,
   columns,
   className,
   filter,
   filterColumn,
   initialColumnOrder,
   columnsBreakpoints = {},
+  pagination,
+  setPagination,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
   const [sorting, setSorting] = useState<SortingState>(
@@ -69,18 +79,36 @@ export function DataTable<TData extends TBaseData>({
   );
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
+  const isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+  const onPaginationChange =
+    pagination && setPagination
+      ? (updater: Updater<PaginationState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(pagination) : updater;
+          setPagination(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
+    rowCount: totalRowCount,
+    manualPagination: isServerSidePagination,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
     state: {
       columnFilters,
-      sorting,
+      sorting: isServerSidePagination ? undefined : sorting,
+      pagination,
+    },
+    initialState: {
+      pagination,
     },
+    onPaginationChange: onPaginationChange,
   });
 
   useEffect(() => {
@@ -90,81 +118,92 @@ export function DataTable<TData extends TBaseData>({
   }, [filter, filterColumn]);
 
   return (
-    <DataTable.Root className={className}>
-      <DataTable.Header>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <DataTable.Row key={headerGroup.id}>
-            {headerGroup.headers.map((header) => {
-              const breakpoint = columnsBreakpoints[header.id];
-              if (
-                !windowSize.width ||
-                !shouldRenderColumn(windowSize.width, breakpoint)
-              ) {
-                return null;
-              }
-              return (
-                <DataTable.Head
-                  key={header.id}
-                  onClick={header.column.getToggleSortingHandler()}
-                  className={classNames(
-                    header.column.getCanSort() ? "s-cursor-pointer" : ""
-                  )}
-                >
-                  <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getCanSort() && (
-                      <Icon
-                        visual={
-                          header.column.getIsSorted() === "asc"
-                            ? ArrowUpIcon
-                            : header.column.getIsSorted() === "desc"
-                              ? ArrowDownIcon
-                              : ArrowDownIcon
-                        }
-                        size="xs"
-                        className={classNames(
-                          "s-ml-1",
-                          header.column.getIsSorted()
-                            ? "s-opacity-100"
-                            : "s-opacity-0"
-                        )}
-                      />
+    <div className="s-flex s-flex-col s-gap-2">
+      <DataTable.Root className={className}>
+        <DataTable.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <DataTable.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const breakpoint = columnsBreakpoints[header.id];
+                if (
+                  !windowSize.width ||
+                  !shouldRenderColumn(windowSize.width, breakpoint)
+                ) {
+                  return null;
+                }
+                return (
+                  <DataTable.Head
+                    key={header.id}
+                    onClick={header.column.getToggleSortingHandler()}
+                    className={classNames(
+                      header.column.getCanSort() ? "s-cursor-pointer" : ""
                     )}
-                  </div>
-                </DataTable.Head>
-              );
-            })}
-          </DataTable.Row>
-        ))}
-      </DataTable.Header>
-      <DataTable.Body>
-        {table.getRowModel().rows.map((row) => (
-          <DataTable.Row
-            key={row.id}
-            onClick={row.original.onClick}
-            moreMenuItems={row.original.moreMenuItems}
-          >
-            {row.getVisibleCells().map((cell) => {
-              const breakpoint = columnsBreakpoints[cell.column.id];
-              if (
-                !windowSize.width ||
-                !shouldRenderColumn(windowSize.width, breakpoint)
-              ) {
-                return null;
-              }
-              return (
-                <DataTable.Cell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </DataTable.Cell>
-              );
-            })}
-          </DataTable.Row>
-        ))}
-      </DataTable.Body>
-    </DataTable.Root>
+                  >
+                    <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      {header.column.getCanSort() && (
+                        <Icon
+                          visual={
+                            header.column.getIsSorted() === "asc"
+                              ? ArrowUpIcon
+                              : header.column.getIsSorted() === "desc"
+                                ? ArrowDownIcon
+                                : ArrowDownIcon
+                          }
+                          size="xs"
+                          className={classNames(
+                            "s-ml-1",
+                            header.column.getIsSorted()
+                              ? "s-opacity-100"
+                              : "s-opacity-0"
+                          )}
+                        />
+                      )}
+                    </div>
+                  </DataTable.Head>
+                );
+              })}
+            </DataTable.Row>
+          ))}
+        </DataTable.Header>
+        <DataTable.Body>
+          {table.getRowModel().rows.map((row) => (
+            <DataTable.Row
+              key={row.id}
+              onClick={row.original.onClick}
+              moreMenuItems={row.original.moreMenuItems}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const breakpoint = columnsBreakpoints[cell.column.id];
+                if (
+                  !windowSize.width ||
+                  !shouldRenderColumn(windowSize.width, breakpoint)
+                ) {
+                  return null;
+                }
+                return (
+                  <DataTable.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </DataTable.Cell>
+                );
+              })}
+            </DataTable.Row>
+          ))}
+        </DataTable.Body>
+      </DataTable.Root>
+      {pagination && (
+        <div className="s-p-1">
+          <Pagination
+            pagination={table.getState().pagination}
+            setPagination={table.setPagination}
+            rowCount={table.getRowCount()}
+          />
+        </div>
+      )}
+    </div>
   );
 }
 

package/src/components/Item.tsx

@@ -184,30 +184,26 @@ export function Item({
   );
 }
 
-interface EntryItemProps {
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  disabled?: boolean;
-  selected?: boolean;
-  label: string;
-  icon?: ComponentType;
-  className?: string;
-  href?: string;
-}
+type EntryItemProps = Pick<
+  ItemProps,
+  "onClick" | "disabled" | "selected" | "label" | "icon" | "className" | "link"
+>;
 
 Item.Entry = function (props: EntryItemProps) {
   return <Item {...props} spacing="sm" style="item" hasAction={"hover"} />;
 };
 
-interface AvatarItemProps {
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  disabled?: boolean;
-  label: string;
-  description?: string;
-  visual?: string | React.ReactNode;
-  className?: string;
-  hasAction?: boolean | "hover";
-  href?: string;
-}
+type AvatarItemProps = Pick<
+  ItemProps,
+  | "className"
+  | "description"
+  | "disabled"
+  | "hasAction"
+  | "label"
+  | "link"
+  | "onClick"
+  | "visual"
+>;
 
 Item.Avatar = function ({
   description,
@@ -225,34 +221,28 @@ Item.Avatar = function ({
   );
 };
 
-interface NavigationListItemProps {
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  selected?: boolean;
-  disabled?: boolean;
-  label: string;
-  description?: string;
-  icon?: ComponentType;
-  className?: string;
-  href?: string;
-  target?: string;
-  hasAction?: boolean | "hover";
-  action?: ComponentType;
-}
+type NavigationListItemProps = Pick<
+  ItemProps,
+  | "action"
+  | "className"
+  | "description"
+  | "disabled"
+  | "hasAction"
+  | "icon"
+  | "label"
+  | "link"
+  | "onClick"
+  | "selected"
+>;
 
 Item.Navigation = function (props: NavigationListItemProps) {
   return <Item {...props} style="action" spacing="md" />;
 };
 
-interface LinkItemProps {
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  label: string;
-  description?: string;
-  visual?: string | React.ReactNode;
-  icon?: ComponentType;
-  className?: string;
-  href?: string;
-  target?: string;
-}
+type LinkItemProps = Pick<
+  ItemProps,
+  "onClick" | "label" | "description" | "visual" | "icon" | "className" | "link"
+>;
 
 Item.Link = function ({ ...props }: LinkItemProps) {
   return (
@@ -267,19 +257,24 @@ Item.Link = function ({ ...props }: LinkItemProps) {
   );
 };
 
-interface DropdownListItemProps {
+interface DropdownListItemBaseProps {
   style?: "default" | "warning";
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  selected?: boolean;
-  disabled?: boolean;
-  label: string;
-  description?: string;
-  visual?: string | React.ReactNode;
-  icon?: ComponentType;
-  className?: string;
-  link?: LinkProps;
 }
 
+type DropdownListItemProps = DropdownListItemBaseProps &
+  Pick<
+    ItemProps,
+    | "className"
+    | "description"
+    | "disabled"
+    | "icon"
+    | "label"
+    | "link"
+    | "onClick"
+    | "selected"
+    | "visual"
+  >;
+
 Item.Dropdown = function ({ style, ...props }: DropdownListItemProps) {
   return (
     <Item

package/src/components/PaginatedCitationsGrid.tsx

@@ -1,3 +1,4 @@
+import { PaginationState } from "@tanstack/react-table";
 import { useState } from "react";
 import React from "react";
 
@@ -21,7 +22,10 @@ export function PaginatedCitationsGrid({
   items,
   maxItemsPerPage = 9,
 }: PaginatedCitationsGridProps) {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: maxItemsPerPage,
+  });
   const cols = 3;
   const rows = Math.ceil(Math.min(maxItemsPerPage, items.length) / cols);
 
@@ -29,10 +33,11 @@ export function PaginatedCitationsGrid({
     return null;
   }
 
+  const { pageIndex, pageSize } = pagination;
   // Calculate start index.
-  const startIndex = (currentPage - 1) * maxItemsPerPage;
+  const startIndex = pageIndex * pageSize;
   // Slice items for current page.
-  const paginatedItems = items.slice(startIndex, startIndex + maxItemsPerPage);
+  const paginatedItems = items.slice(startIndex, startIndex + pageSize);
 
   return (
     <div className="s-flex s-w-full s-flex-col">
@@ -65,12 +70,12 @@ export function PaginatedCitationsGrid({
         )}
       >
         <Pagination
-          itemsCount={items.length}
-          maxItemsPerPage={maxItemsPerPage}
+          rowCount={items.length}
+          pagination={pagination}
+          setPagination={setPagination}
           size="xs"
           showDetails={false}
           showPageButtons={false}
-          onButtonClick={(pageNb) => setCurrentPage(pageNb)}
         />
       </div>
     </div>

package/src/components/Pagination.tsx

@@ -1,5 +1,5 @@
+import { PaginationState } from "@tanstack/react-table";
 import React, { useCallback } from "react";
-import { useState } from "react";
 
 import { ChevronLeftIcon, ChevronRightIcon } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
@@ -11,42 +11,49 @@ type Size = "sm" | "xs";
 const pagesShownInControls = 7;
 
 interface PaginationProps {
-  itemsCount: number;
-  maxItemsPerPage: number;
-  onButtonClick: (pageNumber: number) => void;
   size?: Size;
   showDetails?: boolean;
   showPageButtons?: boolean;
+  rowCount: number;
+  pagination: PaginationState;
+  setPagination: (pagination: PaginationState) => void;
 }
 
 export function Pagination({
-  itemsCount,
-  maxItemsPerPage,
-  onButtonClick,
   size = "sm",
   showDetails = true,
   showPageButtons = true,
+  rowCount,
+  pagination,
+  setPagination,
 }: PaginationProps) {
-  const numPages = Math.ceil(itemsCount / maxItemsPerPage);
+  // pageIndex is 0-based
+  const { pageIndex, pageSize } = pagination;
+
+  const numPages = Math.ceil(rowCount / pageSize);
+
+  const canNextPage = pagination.pageIndex < numPages - 1;
+  const canPreviousPage = pageIndex > 0;
+  const nextPage = () => setPagination({ pageSize, pageIndex: pageIndex + 1 });
+  const previousPage = () =>
+    setPagination({ pageSize, pageIndex: pageIndex - 1 });
+
   const controlsAreHidden = Boolean(numPages <= 1);
-  const [currentPage, setCurrentPage] = useState(1);
-  const firstFileOnPageIndex =
-    currentPage * maxItemsPerPage - maxItemsPerPage + 1;
-  const lastFileOnPageIndex =
-    itemsCount > currentPage * maxItemsPerPage
-      ? currentPage * maxItemsPerPage
-      : itemsCount;
+  const firstItemOnPageIndex = pageIndex * pageSize + 1;
+  const lastItemOnPageIndex =
+    rowCount > (pageIndex + 1) * pageSize
+      ? (pageIndex + 1) * pageSize
+      : rowCount;
 
   const onPaginationButtonClick = useCallback(
-    (pageNb: number) => {
-      setCurrentPage(pageNb);
-      onButtonClick(pageNb);
+    (pageIndex: number) => {
+      setPagination({ pageSize, pageIndex });
     },
-    [onButtonClick, setCurrentPage]
+    [pageIndex, setPagination]
   );
 
   const pageButtons: React.ReactNode[] = getPageButtons(
-    currentPage,
+    pageIndex,
     numPages,
     pagesShownInControls,
     onPaginationButtonClick,
@@ -73,11 +80,9 @@ export function Pagination({
           label="previous"
           labelVisible={false}
           disabledTooltip={true}
-          disabled={currentPage === 1 ? true : false}
+          disabled={!canPreviousPage}
           icon={ChevronLeftIcon}
-          onClick={() => {
-            onPaginationButtonClick(currentPage - 1);
-          }}
+          onClick={previousPage}
         />
 
         <div
@@ -96,11 +101,9 @@ export function Pagination({
           label="next"
           labelVisible={false}
           disabledTooltip={true}
-          disabled={currentPage === numPages ? true : false}
+          disabled={!canNextPage}
           icon={ChevronRightIcon}
-          onClick={() => {
-            onPaginationButtonClick(currentPage + 1);
-          }}
+          onClick={nextPage}
         />
       </div>
 
@@ -112,8 +115,8 @@ export function Pagination({
         )}
       >
         {controlsAreHidden
-          ? `${itemsCount} items`
-          : `Showing ${firstFileOnPageIndex}-${lastFileOnPageIndex} of ${itemsCount} items`}
+          ? `${rowCount} items`
+          : `Showing ${firstItemOnPageIndex}-${lastItemOnPageIndex} of ${rowCount} items`}
       </span>
     </div>
   );
@@ -135,7 +138,7 @@ function renderPageNumber(
       )}
       onClick={() => onPageClick(pageNumber)}
     >
-      {pageNumber}
+      {pageNumber + 1}
     </button>
   );
 }
@@ -164,7 +167,7 @@ function getPageButtons(
 
   // If total pages are less than or equal to slots, show all pages
   if (totalPages <= slots) {
-    for (let i = 1; i <= totalPages; i++) {
+    for (let i = 0; i < totalPages; i++) {
       pagination.push(renderPageNumber(i, currentPage, onPageClick, size));
     }
     return pagination;
@@ -174,25 +177,23 @@ function getPageButtons(
   const halfSlots = Math.floor(remainingSlots / 2);
 
   // Ensure current page is within bounds
-  currentPage = Math.max(1, Math.min(currentPage, totalPages));
-
-  pagination.push(renderPageNumber(1, currentPage, onPageClick, size)); // Always show the first page
+  currentPage = Math.max(0, Math.min(currentPage, totalPages - 1));
 
+  pagination.push(renderPageNumber(0, currentPage, onPageClick, size)); // Always show the first page
   // Determine the range of pages to display
   let start, end;
-  if (currentPage <= halfSlots + 2) {
-    start = 2;
-    end = remainingSlots;
-  } else if (currentPage >= totalPages - halfSlots - 1) {
-    start = totalPages - remainingSlots + 1;
-    end = totalPages - 1;
+  if (currentPage <= halfSlots + 1) {
+    start = 1;
+    end = remainingSlots - 1;
+  } else if (currentPage >= totalPages - halfSlots - 2) {
+    start = totalPages - remainingSlots;
+    end = totalPages - 2;
   } else {
     start = currentPage - halfSlots + 1;
     end = currentPage + halfSlots - 1;
   }
-
   // Add ellipsis if there is a gap between the first page and the start of the range
-  if (start > 2) {
+  if (start > 1) {
     pagination.push(renderEllipses(size));
   }
 
@@ -202,11 +203,13 @@ function getPageButtons(
   }
 
   // Add ellipsis if there is a gap between the end of the range and the last page
-  if (end < totalPages - 1) {
+  if (end < totalPages - 2) {
     pagination.push(renderEllipses(size));
   }
 
-  pagination.push(renderPageNumber(totalPages, currentPage, onPageClick, size)); // Always show the last page
+  pagination.push(
+    renderPageNumber(totalPages - 1, currentPage, onPageClick, size)
+  ); // Always show the last page
 
   return pagination;
 }

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useHashParams";
+export * from "./usePaginationFromUrl";