achery-ui 0.5.7 → 0.5.9

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,10 @@ function Table({
   pageSize,
   totalRows,
   onPageChange,
+  onPageSizeChange,
+  pageSizeOptions,
+  paginationWindow = 2,
+  height,
   toolbar: toolbar2,
   emptyState: emptyState2,
   className
@@ -1075,78 +1101,88 @@ function Table({
   const totalPages = pageSize && totalRows ? Math.ceil(totalRows / pageSize) : null;
   const isFirstPage = pageIndex === 0;
   const isLastPage = totalPages !== null ? pageIndex >= totalPages - 1 : true;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [tableWrapper, className].filter(Boolean).join(" "), children: [
-    toolbar2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: toolbar, children: toolbar2 }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: tableScroll,
-        style: pageSize ? { minHeight: 37 + pageSize * 38 } : void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: table, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: thead, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "th",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [tableWrapper, className].filter(Boolean).join(" "),
+      style: height ? { height, display: "flex", flexDirection: "column" } : void 0,
+      children: [
+        toolbar2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: toolbar, children: toolbar2 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tableScroll,
+            style: height ? { flex: 1, overflowY: "auto", minHeight: 0 } : pageSize ? { minHeight: 37 + pageSize * 38 } : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: table, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { className: thead, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "th",
+                {
+                  className: col.sortable ? thSortable : th,
+                  style: col.width ? { width: col.width } : void 0,
+                  onClick: col.sortable ? () => handleSort(col.key) : void 0,
+                  "aria-sort": activeSortKey === col.key ? activeSortDir === "asc" ? "ascending" : "descending" : void 0,
+                  children: [
+                    col.label,
+                    col.sortable && activeSortKey === col.key && activeSortDir && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sortIndicator, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: activeSortDir === "asc" ? "arrow-up" : "arrow-right", size: 10 }) })
+                  ]
+                },
+                col.key
+              )) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyState, children: emptyState2 ?? "No data." }) }) }) : sortedData.map((row) => {
+                const key = rowKey(row);
+                const isSelected = selectedKeys?.includes(key) ?? false;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "tr",
+                  {
+                    className: tr,
+                    "data-selected": isSelected,
+                    onClick: onRowClick ? () => onRowClick(key, row) : void 0,
+                    style: onRowClick ? { cursor: "pointer" } : void 0,
+                    children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: col.mono ? tdMono : td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
+                  },
+                  key
+                );
+              }) })
+            ] })
+          }
+        ),
+        pageSize && totalPages !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pagination, children: [
+          pageSizeOptions && /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
             {
-              className: col.sortable ? thSortable : th,
-              style: col.width ? { width: col.width } : void 0,
-              onClick: col.sortable ? () => handleSort(col.key) : void 0,
-              "aria-sort": activeSortKey === col.key ? activeSortDir === "asc" ? "ascending" : "descending" : void 0,
-              children: [
-                col.label,
-                col.sortable && activeSortKey === col.key && activeSortDir && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sortIndicator, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: activeSortDir === "asc" ? "arrow-up" : "arrow-right", size: 10 }) })
-              ]
-            },
-            col.key
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: emptyState, children: emptyState2 ?? "No data." }) }) }) : sortedData.map((row) => {
-            const key = rowKey(row);
-            const isSelected = selectedKeys?.includes(key) ?? false;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "tr",
-              {
-                className: tr,
-                "data-selected": isSelected,
-                onClick: onRowClick ? () => onRowClick(key, row) : void 0,
-                style: onRowClick ? { cursor: "pointer" } : void 0,
-                children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: col.mono ? tdMono : td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
-              },
-              key
-            );
-          }) })
+              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("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" })
+          ] })
         ] })
-      }
-    ),
-    pageSize && totalPages !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: pagination, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          glyph: "arrow-right",
-          onClick: () => onPageChange?.(pageIndex - 1),
-          disabled: isFirstPage,
-          "aria-label": "Previous page",
-          style: { transform: "rotate(180deg)" }
-        }
-      ),
-      /* @__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"
-        }
-      )
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 var body2 = "Modal_body__1kcb5si8";
 var bodyScrollable = "Modal_bodyScrollable__1kcb5sie";