achery-ui 0.5.6 → 0.5.8

package/dist/index.cjs

@@ -1012,18 +1012,41 @@ function AppBar({
 }
 
 // src/components/Table/Table.css.ts
-var emptyState = "Table_emptyState__1a2tbysa";
-var pagination = "Table_pagination__1a2tbysb";
-var sortIndicator = "Table_sortIndicator__1a2tbys5";
-var table = "Table_table__1a2tbys1";
+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";
 var tableWrapper = "Table_tableWrapper__1a2tbys0";
-var td = "Table_td__1a2tbys7";
-var tdMono = "Table_tdMono__1a2tbys8 Table_td__1a2tbys7";
-var th = "Table_th__1a2tbys3";
-var thSortable = "Table_thSortable__1a2tbys4 Table_th__1a2tbys3";
-var thead = "Table_thead__1a2tbys2";
-var toolbar = "Table_toolbar__1a2tbys9";
-var tr = "Table_tr__1a2tbys6";
+var td = "Table_td__1a2tbys8";
+var tdMono = "Table_tdMono__1a2tbys9 Table_td__1a2tbys8";
+var th = "Table_th__1a2tbys4";
+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,
@@ -1039,6 +1062,9 @@ function Table({
   pageSize,
   totalRows,
   onPageChange,
+  onPageSizeChange,
+  pageSizeOptions,
+  paginationWindow = 2,
   toolbar: toolbar2,
   emptyState: emptyState2,
   className
@@ -1076,67 +1102,77 @@ function Table({
   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.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
-        );
-      }) })
-    ] }),
+    /* @__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",
+            {
+              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: [
-      /* @__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" })
+      ] })
     ] })
   ] });
 }