@exxatdesignux/ui 0.3.0 → 0.4.1

package/dist/index.js

@@ -3042,8 +3042,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",
@@ -3693,7 +3693,7 @@ function DataTablePaginated({
         hasFooter: true
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 z-40 mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden bg-background", children: /* @__PURE__ */ jsx(
       PaginationBar,
       {
         page: safePage,
@@ -6180,6 +6180,8 @@ function HubTable({
   handleRef,
   tableRenderer,
   paginationOverride,
+  paginationPageSizeOptions = [10, 25, 50, 100],
+  paginationInitialPageSize = 10,
   syncedSearchFromUrl,
   renderListRow,
   listAriaLabel,
@@ -6225,13 +6227,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,
@@ -6287,27 +6299,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,
@@ -6331,20 +6386,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(