achery-ui 0.5.7 → 0.5.8

package/dist/index.cjs

@@ -1013,7 +1013,13 @@ function AppBar({
 
 // src/components/Table/Table.css.ts
 var emptyState = "Table_emptyState__1a2tbysb";
+var pageButton = "Table_pageButton__1a2tbyse";
+var pageButtonActive = "Table_pageButtonActive__1a2tbysg Table_pageButton__1a2tbyse";
+var pageNavButton = "Table_pageNavButton__1a2tbysf Table_pageButton__1a2tbyse";
+var pageSizeSelect = "Table_pageSizeSelect__1a2tbysi";
 var pagination = "Table_pagination__1a2tbysc";
+var paginationControls = "Table_paginationControls__1a2tbysd";
+var paginationEllipsis = "Table_paginationEllipsis__1a2tbysh";
 var sortIndicator = "Table_sortIndicator__1a2tbys6";
 var table = "Table_table__1a2tbys2";
 var tableScroll = "Table_tableScroll__1a2tbys1";
@@ -1025,6 +1031,22 @@ var thSortable = "Table_thSortable__1a2tbys5 Table_th__1a2tbys4";
 var thead = "Table_thead__1a2tbys3";
 var toolbar = "Table_toolbar__1a2tbysa";
 var tr = "Table_tr__1a2tbys7";
+function buildPageWindow(current, total, window2) {
+  const pages = /* @__PURE__ */ new Set();
+  pages.add(0);
+  pages.add(total - 1);
+  for (let i = Math.max(0, current - window2); i <= Math.min(total - 1, current + window2); i++) {
+    pages.add(i);
+  }
+  const sorted = Array.from(pages).sort((a, b) => a - b);
+  const result = [];
+  for (let i = 0; i < sorted.length; i++) {
+    const page = sorted[i];
+    if (i > 0 && page - sorted[i - 1] > 1) result.push(null);
+    result.push(page);
+  }
+  return result;
+}
 function Table({
   columns,
   data,
@@ -1040,6 +1062,9 @@ function Table({
   pageSize,
   totalRows,
   onPageChange,
+  onPageSizeChange,
+  pageSizeOptions,
+  paginationWindow = 2,
   toolbar: toolbar2,
   emptyState: emptyState2,
   className
@@ -1116,35 +1141,38 @@ function Table({
       }
     ),
     pageSize && totalPages !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pagination, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
+      pageSizeOptions && /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
         {
-          variant: "ghost",
-          size: "sm",
-          glyph: "arrow-right",
-          onClick: () => onPageChange?.(pageIndex - 1),
-          disabled: isFirstPage,
-          "aria-label": "Previous page",
-          style: { transform: "rotate(180deg)" }
+          className: pageSizeSelect,
+          value: pageSize,
+          onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
+          "aria-label": "Rows per page",
+          children: pageSizeOptions.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: n, children: [
+            n,
+            " / page"
+          ] }, n))
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        "Page ",
-        pageIndex + 1,
-        " of ",
-        totalPages
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          glyph: "arrow-right",
-          onClick: () => onPageChange?.(pageIndex + 1),
-          disabled: isLastPage,
-          "aria-label": "Next page"
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: paginationControls, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(0), disabled: isFirstPage, "aria-label": "First page", children: "\xAB" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(pageIndex - 1), disabled: isFirstPage, "aria-label": "Previous page", children: "\u2039" }),
+        buildPageWindow(pageIndex, totalPages, paginationWindow).map(
+          (entry, i) => entry === null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: paginationEllipsis, children: "\u2026" }, `ellipsis-${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: entry === pageIndex ? pageButtonActive : pageButton,
+              onClick: () => onPageChange?.(entry),
+              "aria-label": `Page ${entry + 1}`,
+              "aria-current": entry === pageIndex ? "page" : void 0,
+              children: entry + 1
+            },
+            entry
+          )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(pageIndex + 1), disabled: isLastPage, "aria-label": "Next page", children: "\u203A" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: pageNavButton, onClick: () => onPageChange?.(totalPages - 1), disabled: isLastPage, "aria-label": "Last page", children: "\xBB" })
+      ] })
     ] })
   ] });
 }