@eifi1/ui-kit 0.32.0 → 0.32.2

package/dist/components/data-table-pagination.d.ts

@@ -23,7 +23,8 @@ interface PaginationProps {
     density?: "comfortable" | "compact";
 }
 /** Footer for {@link DataTable}: range summary, page-size select, and a
- *  windowed page-number strip (first/last + ±2 around the current page). */
+ *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone
+ *  at Large — see {@link PAGE_WINDOW}). */
 declare function Pagination({ page, totalPages, pageSize, total, onPage, onPageSize, labels: labelsProp, locale: localeProp, density, }: PaginationProps): react.JSX.Element;
 
 export { PAGE_SIZE_OPTIONS, Pagination };

package/dist/components/data-table-pagination.js

@@ -5,12 +5,18 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import { useLargeText } from "../hooks/use-large-text.js";
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200];
 function sizeOptions(pageSize) {
   const steps = [...PAGE_SIZE_OPTIONS];
   if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;
   return [...steps, pageSize].sort((a, b) => a - b);
 }
+const PAGE_WINDOW = 2;
+const PAGE_WINDOW_LARGE_PHONE = 1;
+const PAGE_STRIP = "flex min-w-0 max-w-full items-center gap-1";
+const PAGE_NUMBERS = "flex min-w-0 flex-wrap items-center justify-center gap-1";
 function Pagination({
   page,
   totalPages,
@@ -26,15 +32,18 @@ function Pagination({
   const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const large = useLargeText();
+  const phone = usePhoneLayout();
+  const radius = large && phone ? PAGE_WINDOW_LARGE_PHONE : PAGE_WINDOW;
   const visible = useMemo(() => {
-    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);
+    if (totalPages <= 2 * radius + 3) return Array.from({ length: totalPages }, (_, i) => i);
     const set = /* @__PURE__ */ new Set([0, totalPages - 1, page]);
-    for (let d = 1; d <= 2; d++) {
+    for (let d = 1; d <= radius; d++) {
       if (page - d >= 0) set.add(page - d);
       if (page + d <= totalPages - 1) set.add(page + d);
     }
     return Array.from(set).sort((a, b) => a - b);
-  }, [page, totalPages]);
+  }, [page, totalPages, radius]);
   const items = [];
   visible.forEach((p, idx) => {
     if (idx > 0 && p - visible[idx - 1] > 1) items.push("ellipsis");
@@ -65,7 +74,7 @@ function Pagination({
             }
           )
         ] }),
-        pageSize !== Infinity && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        pageSize !== Infinity && totalPages > 1 && /* @__PURE__ */ jsxs("div", { "data-slot": "page-strip", className: PAGE_STRIP, children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -77,7 +86,7 @@ function Pagination({
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4") })
             }
           ),
-          items.map(
+          /* @__PURE__ */ jsx("div", { "data-slot": "page-numbers", className: PAGE_NUMBERS, children: items.map(
             (it, i) => it === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-[var(--text-placeholder)]", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
               "button",
               {
@@ -93,7 +102,7 @@ function Pagination({
               },
               it
             )
-          ),
+          ) }),
           /* @__PURE__ */ jsx(
             "button",
             {

package/dist/components/data-table-pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\n/** The page-size steps, with the current size slotted in when it is not one of them. */\nfunction sizeOptions(pageSize: number): number[] {\n  const steps: number[] = [...PAGE_SIZE_OPTIONS];\n  if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;\n  return [...steps, pageSize].sort((a, b) => a - b);\n}\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n  /** `\"compact\"` for a pager under a compact {@link DataTable} (lenkbank's in-card\n   *  tables): a slimmer footer and page buttons, so the pager is not the tallest row\n   *  of a table that was made compact on purpose. */\n  density?: \"comfortable\" | \"compact\";\n}\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n  density = \"comfortable\",\n}: PaginationProps) {\n  const compact = density === \"compact\";\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const visible = useMemo(() => {\n    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= 2; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div\n      data-density={density}\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]\",\n        compact ? \"px-2 py-1\" : \"px-3 py-2\",\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {/* A `defaultPageSize` that is not one of the steps (keksdose's 5) is offered\n                too — a select whose value has no option shows its first one (\"10\"). */}\n            {sizeOptions(pageSize).map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n          {items.map((it, i) =>\n            it === \"ellipsis\" ? (\n              <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                …\n              </span>\n            ) : (\n              <button\n                key={it}\n                type=\"button\"\n                onClick={() => onPage(it)}\n                // Which page you are on is carried only by a background colour\n                // otherwise, and the strip is a row of bare numbers with nothing\n                // else to tell them apart.\n                aria-current={it === page ? \"page\" : undefined}\n                className={cn(\n                  \"rounded\",\n                  compact ? \"min-w-6 px-1.5 py-0\" : \"min-w-7 px-2 py-0.5\",\n                  it === page\n                    ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                    : \"hover:bg-[var(--bg-hover)]\",\n                )}\n              >\n                {num.format(it + 1)}\n              </button>\n            ),\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useLargeText } from \"../hooks/use-large-text\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\n/** The page-size steps, with the current size slotted in when it is not one of them. */\nfunction sizeOptions(pageSize: number): number[] {\n  const steps: number[] = [...PAGE_SIZE_OPTIONS];\n  if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;\n  return [...steps, pageSize].sort((a, b) => a - b);\n}\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n  /** `\"compact\"` for a pager under a compact {@link DataTable} (lenkbank's in-card\n   *  tables): a slimmer footer and page buttons, so the pager is not the tallest row\n   *  of a table that was made compact on purpose. */\n  density?: \"comfortable\" | \"compact\";\n}\n\n/**\n * How many page numbers flank the current one on the strip: ±2, and ±1 on a phone at\n * Large and Extra large (0.32.1, the 360 px Extra-large sweep; docs/text-size-\n * harmonization.md §4). At 150 % a number button is 42 px, and \"‹ 1 2 3 … 494 ›\" was\n * 312 px on a 360 px phone's 262; one neighbour fewer on each side saves two buttons.\n */\nconst PAGE_WINDOW = 2;\nconst PAGE_WINDOW_LARGE_PHONE = 1;\n\n/**\n * The strip's two parts (0.32.1, same sweep, §4 \"nothing overflows\"). The arrows keep\n * the ends; the numbers between them wrap, centred, when even the narrower window does\n * not fit — a middle page of a long list (\"1 … 249 250 251 … 494\") at Extra large, or at\n * Normal on a narrow phone, where the one-row strip ran past the screen. Where the\n * strip fits it is one row, as before.\n */\nconst PAGE_STRIP = \"flex min-w-0 max-w-full items-center gap-1\";\nconst PAGE_NUMBERS = \"flex min-w-0 flex-wrap items-center justify-center gap-1\";\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone\n *  at Large — see {@link PAGE_WINDOW}). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n  density = \"comfortable\",\n}: PaginationProps) {\n  const compact = density === \"compact\";\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const large = useLargeText();\n  const phone = usePhoneLayout();\n  const radius = large && phone ? PAGE_WINDOW_LARGE_PHONE : PAGE_WINDOW;\n  const visible = useMemo(() => {\n    // Every page when that is no longer than the window would be (first, last, the\n    // current one, its neighbours and two ellipses).\n    if (totalPages <= 2 * radius + 3) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= radius; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages, radius]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div\n      data-density={density}\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]\",\n        compact ? \"px-2 py-1\" : \"px-3 py-2\",\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {/* A `defaultPageSize` that is not one of the steps (keksdose's 5) is offered\n                too — a select whose value has no option shows its first one (\"10\"). */}\n            {sizeOptions(pageSize).map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div data-slot=\"page-strip\" className={PAGE_STRIP}>\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n          <div data-slot=\"page-numbers\" className={PAGE_NUMBERS}>\n            {items.map((it, i) =>\n              it === \"ellipsis\" ? (\n                <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                  …\n                </span>\n              ) : (\n                <button\n                  key={it}\n                  type=\"button\"\n                  onClick={() => onPage(it)}\n                  // Which page you are on is carried only by a background colour\n                  // otherwise, and the strip is a row of bare numbers with nothing\n                  // else to tell them apart.\n                  aria-current={it === page ? \"page\" : undefined}\n                  className={cn(\n                    \"rounded\",\n                    compact ? \"min-w-6 px-1.5 py-0\" : \"min-w-7 px-2 py-0.5\",\n                    it === page\n                      ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                      : \"hover:bg-[var(--bg-hover)]\",\n                  )}\n                >\n                  {num.format(it + 1)}\n                </button>\n              ),\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table.js

@@ -35,7 +35,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
 import { Popover } from "./popover.js";
-import { useBreakpoint } from "../hooks/use-breakpoint.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
@@ -637,7 +637,7 @@ function DataTable({
   const footerValue = (col) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
   const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
-  const isMdUp = useBreakpoint("md", true);
+  const isMdUp = !usePhoneLayout();
   const desktopScroller = useRef(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);