@eifi1/ui-kit 0.34.0 → 0.35.0

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { ROW_ACTIONS_KEY } from "./data-table-row-actions.js";
+import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
 function splitCellProps(props) {
   if (!props) return { attrs: {} };
   const {
@@ -32,6 +33,26 @@ function columnLabel(col, labels) {
   if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
+function resolveDataTableLabels(...layers) {
+  if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;
+  const partial = {};
+  const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };
+  for (const layer of layers) {
+    for (const [key, value] of Object.entries(layer ?? {})) {
+      if (value === void 0) continue;
+      if (key !== "presets") Object.assign(partial, { [key]: value });
+      else for (const [preset, text] of Object.entries(value)) if (text !== void 0) presets[preset] = text;
+    }
+  }
+  const merged = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };
+  if (partial.columns !== void 0 && partial.columnsCount === void 0) {
+    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;
+  }
+  if (partial.filter !== void 0 && partial.filterColumn === void 0) {
+    merged.filterColumn = (column) => `${merged.filter}: ${column}`;
+  }
+  return merged;
+}
 function fromOutside(target, row) {
   return !(target instanceof Node) || !row.contains(target);
 }
@@ -72,6 +93,7 @@ export {
   columnLabel,
   fromOutside,
   logicalAlign,
+  resolveDataTableLabels,
   splitCellProps
 };
 //# sourceMappingURL=data-table-shared.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { ROW_ACTIONS_KEY } from \"./data-table-row-actions\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them.\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(\n  props: DataTableCellProps | DataTableHeadProps | undefined,\n): { attrs: Record<string, unknown>; className?: string; style?: CSSProperties } {\n  if (!props) return { attrs: {} };\n  const {\n    className,\n    style,\n    role: _role,\n    \"data-col\": _col,\n    ...attrs\n  } = props as DataTableCellProps & { \"data-col\"?: unknown };\n  return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n  return className?.replace(\n    PHYSICAL_ALIGN,\n    (token: string, lead: string, variants: string, side: string) =>\n      // Already scoped to one direction: that is a caller choosing the physical side.\n      /(^|:)(ltr|rtl):/.test(variants)\n        ? token\n        : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n  );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n *  caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n *  at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(\n  attrs: Record<string, string | undefined> | undefined,\n): Record<string, string> | undefined {\n  if (!attrs) return undefined;\n  const out: Record<string, string> = {};\n  for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n  return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;\n  return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n  return !(target instanceof Node) || !row.contains(target);\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n *  the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n  e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n */\nexport function RowLink({\n  href,\n  onActivate,\n  className,\n  children,\n  ...rest\n}: {\n  href: string;\n  /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n   *  click (the desktop `<tr>`), or the row would toggle twice. */\n  onActivate?: () => void;\n  className?: string;\n  children: ReactNode;\n} & Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n  return (\n    <a\n      {...rest}\n      href={href}\n      draggable={false}\n      className={className}\n      // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n      // anchor, so a nested control sits INSIDE it — and the ones that matter\n      // (the feedback row's status toggles) stop the click propagating so the row\n      // won't also expand. A bubble-phase handler would never run for those, and\n      // the browser would follow the link out from under the button press. Cancelling\n      // here happens before any descendant can silence the event; `stopPropagation`\n      // does not undo a `preventDefault`.\n      onClickCapture={(e) => {\n        // A click in a portal a descendant opened is not a click on the link: leave\n        // it (and a link inside it) alone. See `fromOutside`.\n        if (fromOutside(e.target, e.currentTarget)) return;\n        if (isPlainLeftClick(e)) e.preventDefault();\n      }}\n      onClick={(e) => {\n        if (fromOutside(e.target, e.currentTarget)) return;\n        if (!isPlainLeftClick(e)) {\n          e.stopPropagation();\n          return;\n        }\n        // Already cancelled above; this phase only decides what opens. A nested\n        // control that stopped propagation deliberately never reaches it, which is\n        // exactly how the row behaved before it became a link.\n        onActivate?.();\n      }}\n    >\n      {children}\n    </a>\n  );\n}\n"],"mappings":";AA0II;AAzIJ,SAAS,uBAAuB;AAezB,SAAS,eACd,OAC+E;AAC/E,MAAI,CAAC,MAAO,QAAO,EAAE,OAAO,CAAC,EAAE;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI;AACJ,SAAO,EAAE,OAAO,WAAW,MAAM;AACnC;AAIA,MAAM,iBAAiB;AAahB,SAAS,aAAa,WAAmD;AAC9E,SAAO,WAAW;AAAA,IAChB;AAAA,IACA,CAAC,OAAe,MAAc,UAAkB;AAAA;AAAA,MAE9C,kBAAkB,KAAK,QAAQ,IAC3B,QACA,GAAG,IAAI,GAAG,QAAQ,QAAQ,SAAS,UAAU,QAAQ,OAAO;AAAA;AAAA,EACpE;AACF;AAKO,SAAS,WACd,OACoC;AACpC,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,MAA8B,CAAC;AACrC,aAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,EAAG,KAAI,MAAM,OAAW,KAAI,CAAC,IAAI;AAC1E,SAAO;AACT;AAWO,SAAS,YAAe,KAAyB,QAAkC;AACxF,MAAI,IAAI,QAAQ,mBAAmB,OAAQ,QAAO,OAAO;AACzD,SAAO,IAAI,eAAe,OAAO,IAAI,WAAW,WAAW,IAAI,SAAS,IAAI;AAC9E;AAYO,SAAS,YAAY,QAA4B,KAA2B;AACjF,SAAO,EAAE,kBAAkB,SAAS,CAAC,IAAI,SAAS,MAAM;AAC1D;AAIA,MAAM,mBAAmB,CAAC,MACxB,EAAE,WAAW,KAAK,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,EAAE,YAAY,CAAC,EAAE;AAqB3D,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAUG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAQA,gBAAgB,CAAC,MAAM;AAGrB,YAAI,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAG;AAC5C,YAAI,iBAAiB,CAAC,EAAG,GAAE,eAAe;AAAA,MAC5C;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAI,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAG;AAC5C,YAAI,CAAC,iBAAiB,CAAC,GAAG;AACxB,YAAE,gBAAgB;AAClB;AAAA,QACF;AAIA,qBAAa;AAAA,MACf;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { ROW_ACTIONS_KEY } from \"./data-table-row-actions\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them. Since 0.35 also the table's\n// label resolver, which DataTable and its FilterPopover share and the barrel no longer\n// exports (round 0.35 R1).\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(\n  props: DataTableCellProps | DataTableHeadProps | undefined,\n): { attrs: Record<string, unknown>; className?: string; style?: CSSProperties } {\n  if (!props) return { attrs: {} };\n  const {\n    className,\n    style,\n    role: _role,\n    \"data-col\": _col,\n    ...attrs\n  } = props as DataTableCellProps & { \"data-col\"?: unknown };\n  return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n  return className?.replace(\n    PHYSICAL_ALIGN,\n    (token: string, lead: string, variants: string, side: string) =>\n      // Already scoped to one direction: that is a caller choosing the physical side.\n      /(^|:)(ltr|rtl):/.test(variants)\n        ? token\n        : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n  );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n *  caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n *  at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(\n  attrs: Record<string, string | undefined> | undefined,\n): Record<string, string> | undefined {\n  if (!attrs) return undefined;\n  const out: Record<string, string> = {};\n  for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n  return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;\n  return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * The table's labels: caller overrides merged onto the English defaults (presets merged\n * too, key by key, as the provider merges them — so the parameter is a\n * {@link LabelOverride}).\n *\n * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for\n * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,\n * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the\n * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.\n *\n * Lenient on purpose — a table with no labels at all still renders — so a translated app\n * finds out what fell back to English from `missingKitLabels(labels,\n * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.\n */\nexport function resolveDataTableLabels(\n  ...layers: (LabelOverride<DataTableLabels> | undefined)[]\n): DataTableLabels {\n  if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;\n  // The layers in order, the provider's then the prop's, later winning key by key. An\n  // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word\n  // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:\n  // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`\n  // is a record and is merged the same way, so renaming one keeps the other ten.\n  const partial: Partial<Omit<DataTableLabels, \"presets\">> = {};\n  const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };\n  for (const layer of layers) {\n    for (const [key, value] of Object.entries(layer ?? {})) {\n      if (value === undefined) continue;\n      if (key !== \"presets\") Object.assign(partial, { [key]: value });\n      else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;\n    }\n  }\n  const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };\n  // `columnsCount` was split out of `columns` + a template literal. Consumers have\n  // been translating `columns` since 0.1, and backfilling the English default over\n  // that would hand them \"Columns (4/9)\" back for having translated the key that\n  // existed at the time. So the count is derived from the RESOLVED `columns` unless the\n  // caller states the whole sentence, which is the escape hatch for a language where\n  // the parenthetical does not fit.\n  if (partial.columns !== undefined && partial.columnsCount === undefined) {\n    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;\n  }\n  // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word\n  // with the column, rather than English for having translated the key that existed.\n  if (partial.filter !== undefined && partial.filterColumn === undefined) {\n    merged.filterColumn = (column) => `${merged.filter}: ${column}`;\n  }\n  return merged;\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n  return !(target instanceof Node) || !row.contains(target);\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n *  the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n  e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n */\nexport function RowLink({\n  href,\n  onActivate,\n  className,\n  children,\n  ...rest\n}: {\n  href: string;\n  /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n   *  click (the desktop `<tr>`), or the row would toggle twice. */\n  onActivate?: () => void;\n  className?: string;\n  children: ReactNode;\n} & Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n  return (\n    <a\n      {...rest}\n      href={href}\n      draggable={false}\n      className={className}\n      // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n      // anchor, so a nested control sits INSIDE it — and the ones that matter\n      // (the feedback row's status toggles) stop the click propagating so the row\n      // won't also expand. A bubble-phase handler would never run for those, and\n      // the browser would follow the link out from under the button press. Cancelling\n      // here happens before any descendant can silence the event; `stopPropagation`\n      // does not undo a `preventDefault`.\n      onClickCapture={(e) => {\n        // A click in a portal a descendant opened is not a click on the link: leave\n        // it (and a link inside it) alone. See `fromOutside`.\n        if (fromOutside(e.target, e.currentTarget)) return;\n        if (isPlainLeftClick(e)) e.preventDefault();\n      }}\n      onClick={(e) => {\n        if (fromOutside(e.target, e.currentTarget)) return;\n        if (!isPlainLeftClick(e)) {\n          e.stopPropagation();\n          return;\n        }\n        // Already cancelled above; this phase only decides what opens. A nested\n        // control that stopped propagation deliberately never reaches it, which is\n        // exactly how the row behaved before it became a link.\n        onActivate?.();\n      }}\n    >\n      {children}\n    </a>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -262,6 +262,16 @@ export interface DataTableProps<T> {
     onFiltersChange?: (next: FilterState) => void;
     sorts?: SortState[];
     onSortsChange?: (next: SortState[]) => void;
+    /**
+     * Controlled page size, as `sorts` above: the table pages by it and hands its pager's
+     * choice to `onPageSizeChange` (`Infinity` is "All"). For tables that page ALIKE —
+     * `TranslationReviewPanel`'s groups share one page size as they share one sort
+     * (0.35). Left out, the table keeps its own, from `defaultPageSize`, the URL and
+     * `storageKey`. A change of value sends a client-side table back to page 1. In
+     * `serverPagination` mode the page size is `serverPagination.pageSize`.
+     */
+    pageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
     /**
      * Opt-in multi-row selection (desktop table only). When provided, a leading
      * checkbox column is rendered with a select-all box in the header; the owner
@@ -524,7 +534,7 @@ export interface DataTableProps<T> {
      * On a phone it heads the summary card, which is also named by it.
      *
      * There is no built-in default word: a new kit label key is a silent English string
-     * in every translated app (see `missingDataTableLabels`), and the caller has the
+     * in every translated app (see `missingKitLabels`), and the caller has the
      * word in its own catalogue already. Without it the row is unlabelled on screen —
      * pass one.
      */
@@ -600,4 +610,4 @@ export interface DataTableSortLabels {
  *  (DataTableLabels extends DataTableSortLabels; one source for the English). */
 export declare const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels;
 import { type TableUrlSync } from "./use-table-state.js";
-export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;
+export declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, pageSize: pageSizeProp, onPageSizeChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix: storageKeyPrefixProp, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/data-table.js

@@ -7,7 +7,15 @@ import { Spinner } from "./spinner.js";
 import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions.js";
 import { useColumnResize } from "./data-table-resize.js";
 import { useRangeSelection } from "./data-table-selection.js";
-import { RowLink, cleanAttrs, columnLabel, fromOutside, logicalAlign, splitCellProps } from "./data-table-shared.js";
+import {
+  RowLink,
+  cleanAttrs,
+  columnLabel,
+  fromOutside,
+  logicalAlign,
+  resolveDataTableLabels,
+  splitCellProps
+} from "./data-table-shared.js";
 import { MobileFilters, MobileRow, MobileSort, StackedFields } from "./data-table-mobile.js";
 import { DataTableHead } from "./data-table-head.js";
 import { ColumnSettingsPanel } from "./data-table-column-settings.js";
@@ -19,7 +27,7 @@ import { Pagination } from "./data-table-pagination.js";
 import { FullBleedDialog } from "./full-bleed-dialog.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 { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale, useKitTableStorageKeyPrefix } from "../i18n/kit-labels.js";
 import { useEdgeFade } from "../lib/strip-fade.js";
 import { dirOf } from "../lib/direction.js";
@@ -74,6 +82,8 @@ function DataTable({
   onFiltersChange,
   sorts: sortsProp,
   onSortsChange,
+  pageSize: pageSizeProp,
+  onPageSizeChange,
   selection,
   labels: labelsProp,
   locale: localeProp,
@@ -112,16 +122,7 @@ function DataTable({
   const labelOverrides = useKitLabelOverrides("dataTable");
   const providerStorageKeyPrefix = useKitTableStorageKeyPrefix();
   const storageKeyPrefix = storageKeyPrefixProp ?? providerStorageKeyPrefix ?? DEFAULT_PERSIST_PREFIX;
-  const labels = useMemo(
-    () => resolveDataTableLabels(
-      labelOverrides || labelsProp ? {
-        ...labelOverrides,
-        ...labelsProp,
-        presets: { ...labelOverrides?.presets, ...labelsProp?.presets }
-      } : void 0
-    ),
-    [labelOverrides, labelsProp]
-  );
+  const labels = useMemo(() => resolveDataTableLabels(labelOverrides, labelsProp), [labelOverrides, labelsProp]);
   const locale = useKitLocale(localeProp);
   const { columns, swipesFromActions } = useRowActionColumn({
     columns: columnsProp,
@@ -155,7 +156,9 @@ function DataTable({
     urlSync,
     defaultPageSize,
     sortsProp,
-    filtersProp
+    filtersProp,
+    // Ignored in `serverPagination` mode, where the owner's is the page size.
+    pageSizeProp: isServer ? void 0 : pageSizeProp
   });
   const widths = useMemo(() => resizable ? storedWidths : {}, [resizable, storedWidths]);
   const hiddenCols = useMemo(
@@ -817,7 +820,8 @@ function DataTable({
                 total: paginationTotal,
                 onPage: goToPage,
                 onPageSize: isServer ? serverPagination.onPageSizeChange : (n) => {
-                  setPageSize(n);
+                  if (onPageSizeChange) onPageSizeChange(n);
+                  else setPageSize(n);
                   setPage(0);
                 },
                 labels,