@exxatdesignux/ui 0.3.0 → 0.4.1

package/dist/components/data-views/hub-table.js

@@ -1,9 +1,9 @@
 "use client";
 import * as React10 from 'react';
-import { useTheme } from 'next-themes';
-import { createPortal } from 'react-dom';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { useTheme } from 'next-themes';
+import { createPortal } from 'react-dom';
 import { cva } from 'class-variance-authority';
 import { Slot, Label as Label$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1, Dialog, Select as Select$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -2605,8 +2605,8 @@ function DataTableInner({
           setHeaderScrollLeft(e.currentTarget.scrollLeft);
         },
         className: cn(
-          "mx-4 lg:mx-6 overflow-x-auto border border-border",
-          hasFooter ? "rounded-t-lg" : "rounded-lg"
+          "mx-4 lg:mx-6 overflow-x-auto border-t border-x border-border",
+          hasFooter ? "rounded-t-lg" : "border-b rounded-lg"
         ),
         children: /* @__PURE__ */ jsxs(
           "table",
@@ -3105,6 +3105,131 @@ function DataTable(props) {
   }
   return /* @__PURE__ */ jsx(DataTableWithInternalState, { ...props });
 }
+function PaginationBar({
+  page,
+  pageSize,
+  total,
+  pageSizeOptions,
+  onPageChange,
+  onPageSizeChange
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const from = Math.min((page - 1) * pageSize + 1, total);
+  const to = Math.min(page * pageSize, total);
+  function handleKeyDown(e) {
+    if (e.key === "ArrowLeft" && page > 1) {
+      e.preventDefault();
+      onPageChange(page - 1);
+    } else if (e.key === "ArrowRight" && page < totalPages) {
+      e.preventDefault();
+      onPageChange(page + 1);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center justify-between px-4 py-2.5 border-t border-border bg-background text-sm select-none",
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: "Rows per page" }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Rows per page",
+                className: "inline-flex items-center gap-1 px-2 py-1 rounded border border-input bg-background hover:bg-interactive-hover text-foreground text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: [
+                  pageSize,
+                  /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down text-xs", "aria-hidden": "true" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-20", children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onPageSizeChange(n), children: n }, n)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "status",
+              "aria-live": "polite",
+              className: "text-muted-foreground tabular-nums",
+              children: total === 0 ? "0 results" : `${from}\u2013${to} of ${total}`
+            }
+          ),
+          /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Tip, { label: "First page", side: "top", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "First page",
+                disabled: page === 1,
+                onClick: () => onPageChange(1),
+                className: "inline-flex items-center justify-center size-7 rounded hover:bg-interactive-hover disabled:opacity-40 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevrons-left text-xs", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tip, { label: "Previous page", side: "top", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Previous page",
+                disabled: page === 1,
+                onClick: () => onPageChange(page - 1),
+                className: "inline-flex items-center justify-center size-7 rounded hover:bg-interactive-hover disabled:opacity-40 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-left text-xs", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("span", { className: "px-2 text-muted-foreground tabular-nums", children: [
+              page,
+              " / ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsx(Tip, { label: "Next page", side: "top", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Next page",
+                disabled: page >= totalPages,
+                onClick: () => onPageChange(page + 1),
+                className: "inline-flex items-center justify-center size-7 rounded hover:bg-interactive-hover disabled:opacity-40 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-right text-xs", "aria-hidden": "true" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tip, { label: "Last page", side: "top", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Last page",
+                disabled: page >= totalPages,
+                onClick: () => onPageChange(totalPages),
+                className: "inline-flex items-center justify-center size-7 rounded hover:bg-interactive-hover disabled:opacity-40 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevrons-right text-xs", "aria-hidden": "true" })
+              }
+            ) })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+function CountSyncer({
+  count,
+  onSync,
+  onReset
+}) {
+  const prevCount = React10.useRef(count);
+  React10.useLayoutEffect(() => {
+    if (prevCount.current !== count) {
+      prevCount.current = count;
+      onSync(count);
+      onReset();
+    }
+  }, [count, onSync, onReset]);
+  return null;
+}
 
 // src/lib/data-list-view.ts
 var DATA_LIST_VIEW_TILES = [
@@ -5367,6 +5492,8 @@ function HubTable({
   handleRef,
   tableRenderer,
   paginationOverride,
+  paginationPageSizeOptions = [10, 25, 50, 100],
+  paginationInitialPageSize = 10,
   syncedSearchFromUrl,
   renderListRow,
   listAriaLabel,
@@ -5412,13 +5539,23 @@ function HubTable({
     },
     []
   );
+  const [internalPage, setInternalPage] = React10.useState(1);
+  const [internalPageSize, setInternalPageSize] = React10.useState(paginationInitialPageSize);
+  const chromeOwnedPagination = pagination === true && paginationOverride === void 0;
+  const effectivePaginationOverride = paginationOverride ?? (chromeOwnedPagination ? { page: internalPage, pageSize: internalPageSize } : void 0);
   const tableState = useTableState(
     rows,
     columns,
     defaultSort,
-    paginationOverride,
+    effectivePaginationOverride,
     syncedSearchFromUrl
   );
+  const handlePageChange = React10.useCallback((p) => setInternalPage(p), []);
+  const handlePageSizeChange = React10.useCallback((n) => {
+    setInternalPageSize(n);
+    setInternalPage(1);
+  }, []);
+  const resetPage = React10.useCallback(() => setInternalPage(1), []);
   const { setSheetOpen: openPropertiesSheet } = tableState;
   React10.useImperativeHandle(
     handleRef ?? null,
@@ -5474,27 +5611,70 @@ function HubTable({
       drawerToolbarProps
     ]
   );
-  const defaultTableRenderer = (args2) => /* @__PURE__ */ jsx("div", { className: "pb-6", children: /* @__PURE__ */ jsx(
-    DataTable,
-    {
-      data: rows,
-      columns,
-      getRowId,
-      getRowSelectionLabel,
-      selectable,
-      searchable: displayOptions.showToolbarSearch,
-      showColumnHeaders: displayOptions.showColumnLabels,
-      groupable,
-      defaultSort,
-      emptyState: emptyState ?? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No records match your filters." }),
-      conditionalRules,
-      state: args2.state,
-      renderFilterOptionValue,
-      toolbarSlot: (s) => /* @__PURE__ */ jsx(TablePropertiesDrawerButton, { ...drawerToolbarProps, state: s }),
-      bulkActionsSlot,
-      onRowClick
-    }
-  ) });
+  const defaultTableRenderer = (args2) => {
+    const filteredCount = args2.state.rows.length;
+    const totalPages = Math.max(1, Math.ceil(filteredCount / Math.max(1, internalPageSize)));
+    const safePage = Math.min(internalPage, totalPages);
+    return /* @__PURE__ */ jsxs("div", { className: "pb-6", children: [
+      chromeOwnedPagination ? /* @__PURE__ */ jsx(
+        CountSyncer,
+        {
+          count: filteredCount,
+          onSync: (n) => {
+            const next = Math.max(1, Math.ceil(n / Math.max(1, internalPageSize)));
+            if (safePage > next) setInternalPage(next);
+          },
+          onReset: resetPage
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        DataTable,
+        {
+          data: rows,
+          columns,
+          getRowId,
+          getRowSelectionLabel,
+          selectable,
+          searchable: displayOptions.showToolbarSearch,
+          showColumnHeaders: displayOptions.showColumnLabels,
+          groupable,
+          defaultSort,
+          emptyState: emptyState ?? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No records match your filters." }),
+          conditionalRules,
+          state: args2.state,
+          renderFilterOptionValue,
+          toolbarSlot: (s) => /* @__PURE__ */ jsx(TablePropertiesDrawerButton, { ...drawerToolbarProps, state: s }),
+          bulkActionsSlot,
+          onRowClick,
+          hasFooter: chromeOwnedPagination
+        }
+      ),
+      chromeOwnedPagination ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden bg-background",
+            // z-40 sits above pinned cells (z-20), group headers (z-25), and column headers
+            // (z-30 / z-40) so the sticky footer paints over any table content that scrolls
+            // behind it. Pinned-left cells ship with their own `bg-dt-row-bg`, which
+            // otherwise wins because of z-20 > z-10.
+            "sticky bottom-0 z-40"
+          ),
+          children: /* @__PURE__ */ jsx(
+            PaginationBar,
+            {
+              page: safePage,
+              pageSize: internalPageSize,
+              total: filteredCount,
+              pageSizeOptions: paginationPageSizeOptions,
+              onPageChange: handlePageChange,
+              onPageSizeChange: handlePageSizeChange
+            }
+          )
+        }
+      ) : null
+    ] });
+  };
   const args = {
     state: tableState,
     toolbar,
@@ -5518,20 +5698,62 @@ function HubTable({
     "data-table": () => (tableRenderer ?? defaultTableRenderer)(args)
   };
   if (renderers["list-with-toolbar"] == null && renderListRow != null) {
-    composed["list-with-toolbar"] = () => args.toolbarShell(
-      /* @__PURE__ */ jsx(
-        DataRowList,
-        {
-          rows: args.state.rows,
-          getRowId: (row) => getRowId(row),
-          ariaLabel: listAriaLabel ?? hubLabel,
-          emptyState: listEmptyState ?? "No records match your filters.",
-          ...listVirtualizeThreshold !== void 0 ? { virtualizeThreshold: listVirtualizeThreshold } : {},
-          ...listEstimatedRowHeight !== void 0 ? { estimatedRowHeight: listEstimatedRowHeight } : {},
-          renderRow: renderListRow
-        }
-      )
-    );
+    composed["list-with-toolbar"] = () => {
+      const fullRows = args.state.rows;
+      const pagedRows = chromeOwnedPagination ? args.state.pagedRows : fullRows;
+      const filteredCount = fullRows.length;
+      const totalPages = Math.max(1, Math.ceil(filteredCount / Math.max(1, internalPageSize)));
+      const safePage = Math.min(internalPage, totalPages);
+      return args.toolbarShell(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          chromeOwnedPagination ? /* @__PURE__ */ jsx(
+            CountSyncer,
+            {
+              count: filteredCount,
+              onSync: (n) => {
+                const next = Math.max(1, Math.ceil(n / Math.max(1, internalPageSize)));
+                if (safePage > next) setInternalPage(next);
+              },
+              onReset: resetPage
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            DataRowList,
+            {
+              rows: pagedRows,
+              getRowId: (row) => getRowId(row),
+              ariaLabel: listAriaLabel ?? hubLabel,
+              emptyState: listEmptyState ?? "No records match your filters.",
+              ...listVirtualizeThreshold !== void 0 ? { virtualizeThreshold: listVirtualizeThreshold } : {},
+              ...listEstimatedRowHeight !== void 0 ? { estimatedRowHeight: listEstimatedRowHeight } : {},
+              renderRow: renderListRow
+            }
+          ),
+          chromeOwnedPagination ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden bg-background",
+                // Match the table-view footer — above pinned cells (z-20) and column
+                // headers (z-30 / z-40) so the sticky chrome paints over scrolling rows.
+                "sticky bottom-0 z-40"
+              ),
+              children: /* @__PURE__ */ jsx(
+                PaginationBar,
+                {
+                  page: safePage,
+                  pageSize: internalPageSize,
+                  total: filteredCount,
+                  pageSizeOptions: paginationPageSizeOptions,
+                  onPageChange: handlePageChange,
+                  onPageSizeChange: handlePageSizeChange
+                }
+              )
+            }
+          ) : null
+        ] })
+      );
+    };
   }
   if (renderers["board-with-toolbar"] == null && renderBoardCard != null && boardGroups != null) {
     composed["board-with-toolbar"] = () => args.toolbarShell(