@eifi1/ui-kit 0.51.7 → 0.52.0

package/src/components/data-table-row.tsx

@@ -3,6 +3,7 @@ import type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react"
 import { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from "./data-table-shared";
 import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from "./data-table-fit";
 import { MobileRow, type MobileRowProps } from "./data-table-mobile";
+import { Checkbox } from "./checkbox";
 import type { DataTableColumn, MobileSwipeActions } from "./data-table";
 import { cn } from "../lib/cn";
 
@@ -47,6 +48,10 @@ export interface DataTableRowCtx<T> {
   /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True
    *  when the key was one of them. Without it the roving walks the rendered rows. */
   moveFocus?: (fromIndex: number, key: string) => boolean;
+  /** The focus came into this row — the row, a control in it, its open detail, or a
+   *  portal one of them opened: where the table puts the focus if the row leaves
+   *  (refactor audit 2026-10-30, DSP-4). */
+  noteFocus: (key: string | number) => void;
 }
 
 /** `rowAttributes`' result compared key by key: a call site returns a fresh object (or
@@ -133,7 +138,7 @@ export interface DataTableRowProps<T> {
   rowDetailsLabel: string;
   selectRowLabel: string;
   /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the
-   *  next), and the row is marked with its index for the window's measuring. */
+   *  next), and its detail row is marked with the row's index for the window's measuring. */
   ariaRowIndex?: number;
 }
 
@@ -191,16 +196,15 @@ function DataTableRowImpl<T>({
       <tr
         {...cleanAttrs(attrs)}
         aria-rowindex={ariaRowIndex}
-        data-row-index={windowed ? rowIndex : undefined}
+        // Every row, windowed or not: the window measures by it (0.48.2), and the table
+        // finds by it the row that takes the focus when a focused one leaves (DSP-4).
+        data-row-index={rowIndex}
         data-row-nav={rowsFocusable ? "" : undefined}
         tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}
-        onFocus={
-          rowsFocusable
-            ? (e) => {
-                if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);
-              }
-            : undefined
-        }
+        onFocus={(e) => {
+          if (rowsFocusable && e.target === e.currentTarget) ctx.current.setFocusRowKey(key);
+          ctx.current.noteFocus(key);
+        }}
         onKeyDown={
           rowsFocusable
             ? (e) => {
@@ -278,9 +282,10 @@ function DataTableRowImpl<T>({
             onClick={(e) => e.stopPropagation()}
           >
             {selectable && (
-              <input
-                type="checkbox"
-                className={cn("accent-indigo-600", compact ? "size-3.5" : "size-4")}
+              // The kit's Checkbox, as the phone card's, not an indigo native box (DSP-14;
+              // see the header's).
+              <Checkbox
+                inputClassName={compact ? "size-3.5" : undefined}
                 checked={selected}
                 // Shift+click selects the range from the last toggled
                 // row. `preventDefault` puts the box back, but it does NOT
@@ -334,8 +339,10 @@ function DataTableRowImpl<T>({
               {col === linkColumn && href ? (
                 // No `onActivate`: the click is left to bubble to the
                 // <tr> handler above, which already owns expand-vs-select.
-                // Calling it here as well would toggle the row twice.
-                <RowLink href={href} className="block" data-row-link="">
+                // Calling it here as well would toggle the row twice. Without
+                // `onRowClick` (the row is not focusable then) nothing opens it in
+                // place, and the link is followed (DSP-23 b).
+                <RowLink href={href} navigate={!rowsFocusable} className="block" data-row-link="">
                   {col.cell(row)}
                 </RowLink>
               ) : (
@@ -350,6 +357,8 @@ function DataTableRowImpl<T>({
           id={hasDisclosure ? detailId : undefined}
           aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}
           data-row-detail={windowed ? rowIndex : undefined}
+          // An inline editor's field is the row's focus too (DSP-4).
+          onFocus={() => ctx.current.noteFocus(key)}
           className="bg-surface-2 border-t border-subtle"
         >
           {/* The detail panel spans every column. In an `auto` table
@@ -400,6 +409,7 @@ export const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(
 export interface DataTableMobileRowProps<T> extends Pick<
   MobileRowProps<T>,
   | "row"
+  | "rowIndex"
   | "opensRow"
   | "mobileDir"
   | "mobileCardLinkable"
@@ -461,6 +471,7 @@ function DataTableMobileRowImpl<T>({
       rowAttributes={() => attrs}
       onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}
       rowHref={href !== undefined ? () => href : undefined}
+      onFocusIn={() => ctx.current.noteFocus(key)}
       select={
         selectionOn
           ? {

package/src/components/data-table-selection.ts

@@ -20,7 +20,7 @@ export function useRangeSelection<T>({
 }: {
   selection: DataTableProps<T>["selection"];
   /** The rows on screen, in the order shown. */
-  slice: T[];
+  slice: readonly T[];
   rowKey: (row: T) => string | number;
 }) {
   // The row whose selection was last toggled, so Shift+click can select the range up

package/src/components/data-table-shared.tsx

@@ -2,7 +2,8 @@ import type { CSSProperties, ReactNode } from "react";
 import { isTableOwnColumn } from "./data-table-row-actions";
 import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
 import type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from "./data-table";
-import type { LabelOverride } from "../i18n/kit-labels";
+import { useKitLink, type LabelOverride } from "../i18n/kit-labels";
+import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 
 // What DataTable shares with its header (data-table-head.tsx), its column panel and its
 // phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a
@@ -195,10 +196,17 @@ const isPlainLeftClick = (e: React.MouseEvent) =>
  * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as
  * a link-drag: that is both drag-to-select-text on the desktop table and the mouse
  * path through SwipeableRow's gesture on the mobile card.
+ *
+ * `navigate` (refactor audit 2026-10-30, DSP-23 b): a table with `rowHref` and no
+ * `onRowClick` has nothing to open the row in place, and the cancelled click opened
+ * nothing at all. There the plain click is the link's: followed through the provider's
+ * `linkComponent` for an in-app path, as every kit link is (`pickLinkRenderer`), else
+ * by the browser.
  */
 export function RowLink({
   href,
   onActivate,
+  navigate = false,
   className,
   children,
   ...rest
@@ -207,12 +215,36 @@ export function RowLink({
   /** Runs on a plain left click. Omit it where an ANCESTOR already handles the
    *  click (the desktop `<tr>`), or the row would toggle twice. */
   onActivate?: () => void;
+  /** The row has no `onRowClick`: a plain click follows the link instead. */
+  navigate?: boolean;
   className?: string;
   children: ReactNode;
 } & Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   "href" | "className" | "children" | "onClick" | "onClickCapture"
 >) {
+  const kitLink = useKitLink();
+  if (navigate) {
+    const render = pickLinkRenderer(undefined, kitLink, href);
+    const linkProps = {
+      ...rest,
+      href,
+      draggable: false,
+      className,
+      // A modified click opens a tab; it must not also select the row (see above).
+      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (!fromOutside(e.target, e.currentTarget) && !isPlainLeftClick(e)) e.stopPropagation();
+      },
+    };
+    // Drawn as a component of its own, so a router link's hooks are its own: text-link's
+    // RenderedKitLink, every kit link's (0.52 code review, data-table-shared.tsx — this
+    // module had a copy).
+    return render ? (
+      <RenderedKitLink render={render} props={{ ...linkProps, children }} />
+    ) : (
+      <a {...linkProps}>{children}</a>
+    );
+  }
   return (
     <a
       {...rest}

package/src/components/data-table-sort.ts

@@ -31,7 +31,7 @@ export function normalizeSorts(raw: unknown): SortState[] {
   return single ? [single] : [];
 }
 
-export function encodeSorts(sorts: SortState[]): string | null {
+export function encodeSorts(sorts: readonly SortState[]): string | null {
   if (!sorts.length) return null;
   return sorts.map((s) => (s.dir === "desc" ? `${s.key}.desc` : s.key)).join(",");
 }
@@ -75,6 +75,61 @@ export interface SortStepOptions {
 
 const flip = (d: SortDir): SortDir => (d === "asc" ? "desc" : "asc");
 
+// ---------- The client sort's order ----------
+
+/** One collator per locale, built once: `localeCompare` with a locale sets one up on
+ *  every call, n·log n times a sort. */
+const collators = new Map<string, Intl.Collator>();
+
+function sortCollator(locale: string | undefined): Intl.Collator {
+  const key = locale ?? "";
+  let collator = collators.get(key);
+  if (!collator) {
+    const options: Intl.CollatorOptions = { numeric: true, sensitivity: "base" };
+    try {
+      collator = new Intl.Collator(locale, options);
+    } catch {
+      // An unknown tag (a typo in a provider's `locale`) throws a RangeError, and a sort
+      // is no reason for a table to stop rendering: the runtime's own collation then, as
+      // CountrySelect falls back.
+      collator = new Intl.Collator(undefined, options);
+    }
+    collators.set(key, collator);
+  }
+  return collator;
+}
+
+/**
+ * Two `sortBy` values in the order DataTable's client sort puts them, ascending — the
+ * table's own comparator, exported (0.52) for a list an app sorts beside or into a
+ * kit-sorted table: keksdose weaves its scheduled rows into the register and had to copy
+ * the rule, a copy that drifts the day the table's changes. Negative when `a` comes first.
+ *
+ * - Strings collate in `locale` (audit 2026-10-30 DSP-3, 0.51.7; `<` compared UTF-16 code
+ *   units — every lower-case initial after every capital, Ä/Ö/Ü after Z): digits as
+ *   numbers ("Item 2" before "Item 10"), case and accents left out, so two values that
+ *   differ only by them compare equal and the next sort key decides. One collator per
+ *   locale, cached; an unknown tag falls back to the runtime's collation, not a throw.
+ * - Numbers compare as numbers, and a number comes before a string.
+ * - `null` and `undefined` come last, and equal each other. The table puts them last in
+ *   either direction; turn only the two present values round for a descending order.
+ * - Any other pair (a `Date` an untyped caller returns) keeps `<` / `>`.
+ *
+ *     rows.sort((a, b) => compareSortValues(a.payee, b.payee, locale));
+ */
+export function compareSortValues(
+  a: string | number | null | undefined,
+  b: string | number | null | undefined,
+  locale?: string,
+): number {
+  if (a == null || b == null) return a == null ? (b == null ? 0 : 1) : -1;
+  const aText = typeof a === "string";
+  const bText = typeof b === "string";
+  if (aText && bText) return sortCollator(locale).compare(a, b);
+  if (aText !== bText) return aText ? 1 : -1;
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
 /** Header-click semantics. Plain click: make `key` the only sort — cycling
  *  first → other → none (`"tri"`) or first ⇄ other (`"toggle"`) when it already is
  *  the sole criterion. Shift-click (`additive`): append `key` as the next-priority
@@ -82,7 +137,7 @@ const flip = (d: SortDir): SortDir => (d === "asc" ? "desc" : "asc");
  *  a plain flip under `"toggle"`). `firstDir` defaults to `"asc"`, `cycle` to
  *  `"tri"` — the cycle every table had before the options existed. */
 export function nextSorts(
-  prev: SortState[],
+  prev: readonly SortState[],
   key: string,
   additive: boolean,
   options: SortStepOptions = {},

package/src/components/data-table-virtual.ts

@@ -199,7 +199,7 @@ export function useRowWindow<T>({
 }: {
   enabled: boolean;
   /** The rows on screen, in order. */
-  rows: T[];
+  rows: readonly T[];
   rowKey: (row: T) => string | number;
   groups: readonly VirtualGroup[];
   /** Indices of the open rows: always rendered, their detail rows counted. */
@@ -246,6 +246,10 @@ export function useRowWindow<T>({
   const naturalOverflow = useRef(false);
 
   const expandedSig = expanded.join(",");
+  // The groups by what they say, not by identity (0.52 code review, data-table.tsx): the
+  // table builds them afresh on every render, and the model — `rowKey` on every row, and
+  // its arrays — was rebuilt with them: 3000 rows, ~6000 `rowKey` calls per arrow step.
+  const groupsSig = groups.map((g) => `${g.start}:${g.end}:${g.bands.join(".")}:${g.first}`).join(",");
   const model = useMemo<Model | null>(() => {
     if (!enabled) return null;
     const keys = rows.map(rowKey);
@@ -277,9 +281,9 @@ export function useRowWindow<T>({
     gTop[groups.length] = y;
     tops[n] = y;
     return { n, keys, tops, h, gTop, total: y, ariaRows, ariaBands, rowCount: aria - 1 + rowsAfter };
-    // `expanded` by its signature.
+    // `expanded` and `groups` by their signatures.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, rows, rowKey, groups, expandedSig, measured, estimate, n, rowsBefore, rowsAfter]);
+  }, [enabled, rows, rowKey, groupsSig, expandedSig, measured, estimate, n, rowsBefore, rowsAfter]);
 
   // The rows outside the range that stay: open rows, the tab stop, the focused row and
   // the keyboard's target.
@@ -301,7 +305,7 @@ export function useRowWindow<T>({
   const bodies = useMemo(
     () => (model ? planBodies(model, groups, start, end, pinned) : []),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, groups, start, end, pinnedSig],
+    [model, groupsSig, start, end, pinnedSig],
   );
 
   const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(",")}`;
@@ -321,7 +325,7 @@ export function useRowWindow<T>({
     const sc = scrollerRef.current;
     const table = tableRef.current;
     if (!m || !sc || !table) return;
-    const origin = table.querySelector<HTMLElement>("tbody[data-vt-body]");
+    const origin = table.querySelector<HTMLElement>(":scope > tbody[data-vt-body]");
     if (!origin) return;
     const sr = sc.getBoundingClientRect();
     const top = Math.max(sr.top, 0);
@@ -479,7 +483,7 @@ export function useRowWindow<T>({
     const table = tableRef.current;
     if (!enabled || !table) return;
     const onIn = (e: FocusEvent) => {
-      const tr = (e.target as Element | null)?.closest?.<HTMLElement>("tr[data-row-index], tr[data-row-detail]");
+      const tr = ownRowOf(table, e.target as Element | null);
       const index = tr ? Number(tr.dataset.rowIndex ?? tr.dataset.rowDetail) : NaN;
       const key = Number.isNaN(index) ? undefined : latest.current.model?.keys[index];
       setFocusKey(key ?? null);
@@ -518,12 +522,14 @@ export function useRowWindow<T>({
     if (focusTarget === null) return;
     // Released by the focus it receives (the `focusin` above), which pins it as the
     // focused row from then on.
-    tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index="${focusTarget}"]`)?.focus();
+    const table = tableRef.current;
+    if (table) ownRowAt(table, focusTarget)?.focus();
   }, [focusTarget, bodies, tableRef]);
 
   const focusRow = useCallback(
     (i: number) => {
-      const el = tableRef.current?.querySelector<HTMLElement>(`tr[data-row-index="${i}"]`);
+      const table = tableRef.current;
+      const el = table && ownRowAt(table, i);
       if (el) el.focus();
       else setFocusTarget(i);
     },
@@ -541,6 +547,24 @@ export function useRowWindow<T>({
   };
 }
 
+// The window's rows are the table's OWN (0.52 code review, data-table-row.tsx): every
+// desktop row carries `data-row-index` since DSP-4, a nested DataTable's in an open row
+// too, and a lookup over the whole subtree answered for the outer table with the nested
+// one's rows — ArrowDown from row 0 went to the nested row 1, the first in document order.
+
+/** This table's row at `index`, if it is drawn. */
+function ownRowAt(table: HTMLTableElement, index: number): HTMLElement | null {
+  return table.querySelector<HTMLElement>(`:scope > tbody > tr[data-row-index="${index}"]`);
+}
+
+/** This table's row (or open detail row) that holds `node` — past a nested table's own. */
+function ownRowOf(table: HTMLTableElement, node: Element | null): HTMLElement | null {
+  const ROW = "tr[data-row-index], tr[data-row-detail]";
+  for (let tr = node?.closest?.<HTMLElement>(ROW) ?? null; tr; tr = tr.parentElement?.closest<HTMLElement>(ROW) ?? null)
+    if (tr.parentElement?.parentElement === table) return tr;
+  return null;
+}
+
 /** The roving rows' Arrow/Home/End target over ALL the rows, rendered or not. */
 export function rowNavTarget(from: number, key: string, n: number): number | null {
   if (n === 0) return null;