@dust-tt/sparkle 0.2.224 → 0.2.226

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,8 +20,9 @@ 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 { Tooltip } from "@sparkle/index_with_tw_base";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
@@ -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()
+    <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" : ""
                     )}
-                    {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>
+                  >
+                    <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>
   );
 }
 
@@ -263,11 +302,7 @@ DataTable.Row = function Row({
       <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
         {moreMenuItems && moreMenuItems.length > 0 && (
           <DropdownMenu className="s-mr-1.5 s-flex">
-            <DropdownMenu.Button
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            >
+            <DropdownMenu.Button>
               <IconButton icon={MoreIcon} size="sm" variant="tertiary" />
             </DropdownMenu.Button>
             <DropdownMenu.Items origin="topRight" width={220}>

package/src/components/DropdownMenu.tsx

@@ -4,7 +4,6 @@ import React, {
   Fragment,
   JSXElementConstructor,
   MouseEvent,
-  MouseEventHandler,
   MutableRefObject,
   ReactElement,
   useContext,
@@ -21,7 +20,7 @@ import {
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
-import { Item as StandardItem } from "./Item";
+import { Item as StandardItem, LinkProps } from "./Item";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
 const ButtonRefContext =
@@ -103,7 +102,6 @@ export interface DropdownButtonProps {
   className?: string;
   disabled?: boolean;
   children?: React.ReactNode;
-  onClick?: MouseEventHandler;
 }
 
 DropdownMenu.Button = function ({
@@ -116,7 +114,6 @@ DropdownMenu.Button = function ({
   tooltipPosition = "above",
   className = "",
   disabled = false,
-  onClick,
 }: DropdownButtonProps) {
   const finalLabelClasses = classNames(
     labelClasses.base,
@@ -159,7 +156,7 @@ DropdownMenu.Button = function ({
           "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
           label ? "s-gap-1.5" : "s-gap-0"
         )}
-        onClick={onClick}
+        onClick={(e) => e.stopPropagation()}
       >
         {tooltip ? (
           <Tooltip position={tooltipPosition} label={tooltip}>
@@ -192,6 +189,7 @@ DropdownMenu.Button = function ({
               "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
               label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
             )}
+            onClick={(e) => e.stopPropagation()}
           >
             <Icon visual={icon} size={size} className={finalIconClasses} />
             <Icon
@@ -212,6 +210,7 @@ DropdownMenu.Button = function ({
             label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5",
             type === "submenu" ? "s-opacity-50" : ""
           )}
+          onClick={(e) => e.stopPropagation()}
         >
           <Icon visual={icon} size={size} className={finalIconClasses} />
           <span
@@ -234,24 +233,24 @@ DropdownMenu.Button = function ({
 };
 
 export interface DropdownItemProps {
-  variant?: "default" | "warning";
-  label: string;
+  children?: React.ReactNode;
   description?: string;
-  href?: string;
   disabled?: boolean;
-  visual?: string | React.ReactNode;
+  hasChildren?: boolean;
   icon?: ComponentType;
+  label: string;
+  link?: LinkProps;
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   selected?: boolean;
-  hasChildren?: boolean;
-  children?: React.ReactNode;
+  variant?: "default" | "warning";
+  visual?: string | React.ReactNode;
 }
 
 DropdownMenu.Item = function ({
   variant = "default",
   label,
   description,
-  href,
+  link,
   disabled,
   visual,
   icon,
@@ -278,7 +277,7 @@ DropdownMenu.Item = function ({
           className="s-w-full"
           description={description}
           disabled={disabled}
-          href={href}
+          link={link}
           icon={icon}
           label={label}
           onClick={onClick}
@@ -443,6 +442,7 @@ DropdownMenu.Items = function ({
           getOriginClass(origin),
           "s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-shadow-lg focus:s-outline-none dark:s-border-structure-100-dark dark:s-bg-structure-0-dark"
         )}
+        onClick={(e) => e.stopPropagation()}
         style={styleInsert(origin, marginLeft)}
       >
         {topBar}

package/src/components/Item.tsx

@@ -42,23 +42,27 @@ const iconClasses = {
     "s-text-warning-400 group-hover/item:s-text-warning-300 group-active/item:s-text-warning-700 dark:group-hover/item:s-text-warning-600-dark dark:group-active/item:s-text-warning-400-dark",
 };
 
-type ItemProps = {
+export interface LinkProps {
+  href: string;
+  target?: string;
+}
+
+interface ItemProps {
+  action?: ComponentType;
+  className?: string;
+  description?: string;
+  disabled?: boolean;
+  hasAction?: boolean | "hover";
+  icon?: ComponentType;
+  label: string;
+  link?: LinkProps;
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  style: "action" | "warning" | "item" | "link";
-  spacing?: "sm" | "md" | "lg";
   selectable?: boolean;
   selected?: boolean;
-  disabled?: boolean;
-  label: string;
-  description?: string;
+  spacing?: "sm" | "md" | "lg";
+  style: "action" | "warning" | "item" | "link";
   visual?: string | React.ReactNode;
-  icon?: ComponentType;
-  action?: ComponentType;
-  hasAction?: boolean | "hover";
-  className?: string;
-  href?: string;
-  target?: string;
-};
+}
 
 export function Item({
   label,
@@ -73,11 +77,11 @@ export function Item({
   selected = false,
   disabled = false,
   className = "",
-  href,
-  target,
+  link,
 }: ItemProps) {
   const { components } = React.useContext(SparkleContext);
 
+  const { href, target } = link || {};
   const Link: SparkleContextLinkType = href ? components.link : noHrefLink;
 
   let visualElement: React.ReactNode;
@@ -273,7 +277,7 @@ interface DropdownListItemProps {
   visual?: string | React.ReactNode;
   icon?: ComponentType;
   className?: string;
-  href?: string;
+  link?: LinkProps;
 }
 
 Item.Dropdown = function ({ style, ...props }: DropdownListItemProps) {

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