@eifi1/ui-kit 0.48.0 → 0.48.2

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

@@ -0,0 +1,84 @@
+import type { ReactNode, RefObject } from "react";
+import { type MobileRowProps } from "./data-table-mobile.js";
+import type { DataTableColumn, MobileSwipeActions } from "./data-table.js";
+/** What a row's handlers read at event time — DataTable's latest props and helpers. */
+export interface DataTableRowCtx<T> {
+    onRowClick: ((row: T) => void) | undefined;
+    onToggle: ((row: T, checked: boolean) => void) | undefined;
+    isSelected: (row: T) => boolean;
+    canSelect: (row: T) => boolean;
+    selectRange: (toIndex: number) => boolean;
+    /** Anchor the next Shift+click range on this row's key. */
+    setAnchor: (key: string | number) => void;
+    /** Remember the checkbox click that drew a range… */
+    markRangeClick: (e: Event) => void;
+    /** …and drop that click's own change event (true once for it). */
+    takeRangeClick: (e: Event) => boolean;
+    setFocusRowKey: (key: string | number) => void;
+    /** The phone card's long press: enter selection mode with this row selected. */
+    onLongPress: (row: T) => void;
+    /** 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;
+}
+export interface DataTableRowProps<T> {
+    row: T;
+    rowIndex: number;
+    rowKey: string | number;
+    ctx: RefObject<DataTableRowCtx<T>>;
+    columns: DataTableColumn<T>[];
+    widths: Record<string, number>;
+    growDrawn: boolean;
+    linkColumn: DataTableColumn<T> | undefined;
+    href: string | undefined;
+    /** The selection column is drawn (DataTable's `selection`). */
+    selectionColumn: boolean;
+    selectable: boolean;
+    selected: boolean;
+    expanded: boolean;
+    /** The open row's detail; `null` on a closed row. */
+    expansion: ReactNode;
+    /** The row carries the visually hidden disclosure button (focusable rows that expand). */
+    disclosure: boolean;
+    detailId: string;
+    rowsFocusable: boolean;
+    rowInteractive: boolean;
+    tabbable: boolean;
+    className: string | undefined;
+    attrs: Record<string, string | undefined> | undefined;
+    compact: boolean;
+    totalColSpan: number;
+    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. */
+    ariaRowIndex?: number;
+}
+/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the
+ *  file's note for what it compares. */
+export declare const DataTableRow: <T>(props: DataTableRowProps<T> & {
+    key?: string | number;
+}) => ReactNode;
+export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCard" | "mobilePrimaryCol" | "mobileSecondaryColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
+    ctx: RefObject<DataTableRowCtx<T>>;
+    rowKey: string | number;
+    expanded: boolean;
+    /** The opened row's content (`openedRowContent`); `null` on a closed card. */
+    expansion: ReactNode;
+    className: string | undefined;
+    attrs: Record<string, string | undefined> | undefined;
+    /** The table has `onRowClick`. */
+    interactive: boolean;
+    href: string | undefined;
+    /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */
+    swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;
+    /** The table has `selection`. */
+    selectionOn: boolean;
+    selectActive: boolean;
+    selectable: boolean;
+    selected: boolean;
+}
+/** One phone card, memoised like {@link DataTableRow}. */
+export declare const DataTableMobileRow: <T>(props: DataTableMobileRowProps<T> & {
+    key?: string | number;
+}) => ReactNode;

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

@@ -0,0 +1,261 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { Fragment, memo } from "react";
+import { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from "./data-table-shared.js";
+import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from "./data-table-fit.js";
+import { MobileRow } from "./data-table-mobile.js";
+import { cn } from "../lib/cn.js";
+function sameAttrs(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const ak = Object.keys(a);
+  if (ak.length !== Object.keys(b).length) return false;
+  for (const k of ak) if (a[k] !== b[k]) return false;
+  return true;
+}
+function sameProps(prev, next) {
+  for (const k of Object.keys(next)) {
+    if (k === "attrs") continue;
+    if (!Object.is(prev[k], next[k])) return false;
+  }
+  return sameAttrs(prev.attrs, next.attrs);
+}
+function moveRowFocus(from, key) {
+  if (!(key in ROW_NAV_KEYS)) return false;
+  const table = from.closest("table");
+  if (!table) return false;
+  const rows = Array.from(table.tBodies).flatMap(
+    (body) => Array.from(body.children).filter(
+      (el) => el instanceof HTMLElement && el.hasAttribute("data-row-nav")
+    )
+  );
+  const i = rows.indexOf(from);
+  const target = key === "ArrowDown" ? rows[i + 1] : key === "ArrowUp" ? rows[i - 1] : key === "Home" ? rows[0] : key === "End" ? rows[rows.length - 1] : void 0;
+  target?.focus();
+  return true;
+}
+const ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 };
+function DataTableRowImpl({
+  row,
+  rowIndex,
+  rowKey: key,
+  ctx,
+  columns,
+  widths,
+  growDrawn,
+  linkColumn,
+  href,
+  selectionColumn,
+  selectable,
+  selected,
+  expanded,
+  expansion,
+  disclosure: hasDisclosure,
+  detailId,
+  rowsFocusable,
+  rowInteractive,
+  tabbable,
+  className,
+  attrs,
+  compact,
+  totalColSpan,
+  rowDetailsLabel,
+  selectRowLabel,
+  ariaRowIndex
+}) {
+  const windowed = ariaRowIndex !== void 0;
+  const disclosure = hasDisclosure ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      className: "sr-only-fixed",
+      "aria-label": rowDetailsLabel,
+      "aria-expanded": expanded,
+      "aria-controls": expansion ? detailId : void 0,
+      onClick: () => ctx.current.onRowClick(row)
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        ...cleanAttrs(attrs),
+        "aria-rowindex": ariaRowIndex,
+        "data-row-index": windowed ? rowIndex : void 0,
+        "data-row-nav": rowsFocusable ? "" : void 0,
+        tabIndex: rowsFocusable ? tabbable ? 0 : -1 : void 0,
+        onFocus: rowsFocusable ? (e) => {
+          if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);
+        } : void 0,
+        onKeyDown: rowsFocusable ? (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.altKey || e.ctrlKey || e.metaKey) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            ctx.current.onRowClick(row);
+            return;
+          }
+          if (e.shiftKey) return;
+          const move = ctx.current.moveFocus;
+          if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();
+        } : void 0,
+        className: cn(
+          "border-t border-subtle",
+          rowInteractive && "cursor-pointer hover:bg-hover",
+          // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an
+          // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`
+          // is not painted by every engine, an outline is.
+          rowsFocusable && "focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand",
+          className
+        ),
+        onClick: rowInteractive ? (e) => {
+          const c = ctx.current;
+          if (fromOwnControl(e.target, e.currentTarget)) return;
+          if (fromOutside(e.target, e.currentTarget)) return;
+          if (c.onToggle && c.canSelect(row)) {
+            if (e.shiftKey) {
+              window.getSelection?.()?.removeAllRanges();
+              if (c.selectRange(rowIndex)) return;
+              c.setAnchor(key);
+              c.onToggle(row, !c.isSelected(row));
+              return;
+            }
+            if (e.metaKey || e.ctrlKey) {
+              c.setAnchor(key);
+              c.onToggle(row, !c.isSelected(row));
+              return;
+            }
+          }
+          c.onRowClick?.(row);
+        } : void 0,
+        children: [
+          selectionColumn && /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: cn("align-top", compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"),
+              onClick: (e) => e.stopPropagation(),
+              children: selectable && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: cn("accent-indigo-600", compact ? "size-3.5" : "size-4"),
+                  checked: selected,
+                  onClick: (e) => {
+                    if (e.shiftKey && ctx.current.selectRange(rowIndex)) {
+                      e.preventDefault();
+                      ctx.current.markRangeClick(e.nativeEvent);
+                    }
+                  },
+                  onChange: (e) => {
+                    const c = ctx.current;
+                    if (c.takeRangeClick(e.nativeEvent)) return;
+                    c.setAnchor(key);
+                    c.onToggle?.(row, e.target.checked);
+                  },
+                  "aria-label": selectRowLabel
+                }
+              )
+            }
+          ),
+          columns.map((col, colIndex) => {
+            const width = widths[col.key];
+            const own = splitCellProps(col.cellProps?.(row));
+            const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
+            return /* @__PURE__ */ createElement(
+              "td",
+              {
+                ...own.attrs,
+                key: col.key,
+                "data-col": col.key,
+                style: own.style || pinned ? { ...own.style, ...pinned } : void 0,
+                className: cn(
+                  "align-top",
+                  compact ? "px-2 py-1" : "px-3 py-2",
+                  width && "overflow-hidden text-ellipsis",
+                  col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,
+                  logicalAlign(own.className),
+                  logicalAlign(col.className)
+                )
+              },
+              colIndex === 0 && disclosure,
+              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.
+                /* @__PURE__ */ jsx(RowLink, { href, className: "block", "data-row-link": "", children: col.cell(row) })
+              ) : col.cell(row)
+            );
+          })
+        ]
+      }
+    ),
+    expansion && /* @__PURE__ */ jsx(
+      "tr",
+      {
+        id: hasDisclosure ? detailId : void 0,
+        "aria-rowindex": windowed ? ariaRowIndex + 1 : void 0,
+        "data-row-detail": windowed ? rowIndex : void 0,
+        className: "bg-surface-2 border-t border-subtle",
+        children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full",
+              compact ? "px-2 py-2" : "px-3 py-3"
+            ),
+            children: expansion
+          }
+        ) }) })
+      }
+    )
+  ] });
+}
+const DataTableRow = memo(DataTableRowImpl, sameProps);
+const yes = () => true;
+function DataTableMobileRowImpl({
+  ctx,
+  rowKey: key,
+  expanded,
+  expansion,
+  className,
+  attrs,
+  interactive,
+  href,
+  selectionOn,
+  selectActive,
+  selectable,
+  selected,
+  ...rest
+}) {
+  const { row } = rest;
+  return /* @__PURE__ */ jsx(
+    MobileRow,
+    {
+      ...rest,
+      isExpanded: expanded ? yes : void 0,
+      openedRowContent: () => expansion,
+      rowClassName: () => className,
+      rowAttributes: () => attrs,
+      onRowClick: interactive ? (r) => ctx.current.onRowClick(r) : void 0,
+      rowHref: href !== void 0 ? () => href : void 0,
+      select: selectionOn ? {
+        active: selectActive,
+        selectable,
+        selected,
+        onToggle: (checked) => {
+          ctx.current.setAnchor(key);
+          ctx.current.onToggle?.(row, checked);
+        },
+        onLongPress: () => ctx.current.onLongPress(row)
+      } : null
+    }
+  );
+}
+const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps);
+export {
+  DataTableMobileRow,
+  DataTableRow
+};
+//# sourceMappingURL=data-table-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n//  * the row object, its index and its key;\n//  * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n//    selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n//    its `rowAttributes` compared key by key. The functions themselves may be inline;\n//  * the column definitions BY IDENTITY: a cell is the caller's render function, and\n//    what it reads is the caller's to say. A page that memoises its columns (keksdose's\n//    `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n//    array every render and the full re-render it always had — never a stale cell;\n//  * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n//    with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n  onRowClick: ((row: T) => void) | undefined;\n  onToggle: ((row: T, checked: boolean) => void) | undefined;\n  isSelected: (row: T) => boolean;\n  canSelect: (row: T) => boolean;\n  selectRange: (toIndex: number) => boolean;\n  /** Anchor the next Shift+click range on this row's key. */\n  setAnchor: (key: string | number) => void;\n  /** Remember the checkbox click that drew a range… */\n  markRangeClick: (e: Event) => void;\n  /** …and drop that click's own change event (true once for it). */\n  takeRangeClick: (e: Event) => boolean;\n  setFocusRowKey: (key: string | number) => void;\n  /** The phone card's long press: enter selection mode with this row selected. */\n  onLongPress: (row: T) => void;\n  /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n   *  when the key was one of them. Without it the roving walks the rendered rows. */\n  moveFocus?: (fromIndex: number, key: string) => boolean;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n *  `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n  a: Record<string, string | undefined> | undefined,\n  b: Record<string, string | undefined> | undefined,\n): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const ak = Object.keys(a);\n  if (ak.length !== Object.keys(b).length) return false;\n  for (const k of ak) if (a[k] !== b[k]) return false;\n  return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n  for (const k of Object.keys(next) as (keyof P)[]) {\n    if (k === \"attrs\") continue;\n    if (!Object.is(prev[k], next[k])) return false;\n  }\n  return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n *  the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n  if (!(key in ROW_NAV_KEYS)) return false;\n  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n  const table = from.closest(\"table\");\n  if (!table) return false;\n  const rows = Array.from(table.tBodies).flatMap((body) =>\n    Array.from(body.children).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n    ),\n  );\n  const i = rows.indexOf(from);\n  const target =\n    key === \"ArrowDown\"\n      ? rows[i + 1]\n      : key === \"ArrowUp\"\n        ? rows[i - 1]\n        : key === \"Home\"\n          ? rows[0]\n          : key === \"End\"\n            ? rows[rows.length - 1]\n            : undefined;\n  // At either end the key is still consumed, or ArrowDown on the last row would\n  // scroll the page out from under a focused row.\n  target?.focus();\n  return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n  row: T;\n  rowIndex: number;\n  rowKey: string | number;\n  ctx: RefObject<DataTableRowCtx<T>>;\n  columns: DataTableColumn<T>[];\n  widths: Record<string, number>;\n  growDrawn: boolean;\n  linkColumn: DataTableColumn<T> | undefined;\n  href: string | undefined;\n  /** The selection column is drawn (DataTable's `selection`). */\n  selectionColumn: boolean;\n  selectable: boolean;\n  selected: boolean;\n  expanded: boolean;\n  /** The open row's detail; `null` on a closed row. */\n  expansion: ReactNode;\n  /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n  disclosure: boolean;\n  detailId: string;\n  rowsFocusable: boolean;\n  rowInteractive: boolean;\n  tabbable: boolean;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  compact: boolean;\n  totalColSpan: number;\n  rowDetailsLabel: string;\n  selectRowLabel: string;\n  /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n   *  next), and the row is marked with its index for the window's measuring. */\n  ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n  row,\n  rowIndex,\n  rowKey: key,\n  ctx,\n  columns,\n  widths,\n  growDrawn,\n  linkColumn,\n  href,\n  selectionColumn,\n  selectable,\n  selected,\n  expanded,\n  expansion,\n  disclosure: hasDisclosure,\n  detailId,\n  rowsFocusable,\n  rowInteractive,\n  tabbable,\n  className,\n  attrs,\n  compact,\n  totalColSpan,\n  rowDetailsLabel,\n  selectRowLabel,\n  ariaRowIndex,\n}: DataTableRowProps<T>) {\n  const windowed = ariaRowIndex !== undefined;\n  // Whether the row is open, said where ARIA allows it (round 0.34, the\n  // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n  // table's, and the <tr> wore it. A disclosure button in the first cell carries\n  // it now, with `aria-controls` on the detail row while that is there.\n  // Visually hidden and not a tab stop: the row stays the one roving stop, with\n  // Enter/Space and the whole-row click — this is the screen reader cursor's\n  // way in, and where it hears the state. Named by `aria-label`, so the cell's\n  // text stays the cell's own.\n  const disclosure = hasDisclosure ? (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      className=\"sr-only-fixed\"\n      aria-label={rowDetailsLabel}\n      aria-expanded={expanded}\n      aria-controls={expansion ? detailId : undefined}\n      // The row's own handler leaves a click on a control inside it alone.\n      onClick={() => ctx.current.onRowClick!(row)}\n    />\n  ) : null;\n  return (\n    <Fragment>\n      <tr\n        {...cleanAttrs(attrs)}\n        aria-rowindex={ariaRowIndex}\n        data-row-index={windowed ? rowIndex : undefined}\n        data-row-nav={rowsFocusable ? \"\" : undefined}\n        tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n        onFocus={\n          rowsFocusable\n            ? (e) => {\n                if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n              }\n            : undefined\n        }\n        onKeyDown={\n          rowsFocusable\n            ? (e) => {\n                // Only the row's own key presses: Enter on a nested button\n                // or link is that control's, and Space in a nested input\n                // is a space.\n                if (e.target !== e.currentTarget) return;\n                if (e.altKey || e.ctrlKey || e.metaKey) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  // Space would otherwise scroll the table.\n                  e.preventDefault();\n                  ctx.current.onRowClick!(row);\n                  return;\n                }\n                if (e.shiftKey) return;\n                const move = ctx.current.moveFocus;\n                if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n        className={cn(\n          \"border-t border-subtle\",\n          rowInteractive && \"cursor-pointer hover:bg-hover\",\n          // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n          // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n          // is not painted by every engine, an outline is.\n          rowsFocusable &&\n            \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n          className,\n        )}\n        onClick={\n          rowInteractive\n            ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n                const c = ctx.current;\n                // A click on a control inside the row (a button, a link,\n                // an input the cell renders) is that control's — it must\n                // not also open the row. Cells no longer have to\n                // `stopPropagation` to get that.\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // Modifier-clicks anywhere in the row drive\n                // selection instead of expanding it (feedback #289):\n                // Ctrl/Cmd toggles a single row, Shift selects the\n                // range from the last-toggled row (inclusive of this\n                // one) — the same as the checkbox, but for the whole\n                // row, which is what the checkbox-only version was\n                // missing.\n                if (c.onToggle && c.canSelect(row)) {\n                  if (e.shiftKey) {\n                    // Drop the text selection a shift-click would\n                    // otherwise smear across the rows.\n                    window.getSelection?.()?.removeAllRanges();\n                    if (c.selectRange(rowIndex)) return;\n                    // No anchor yet: treat it as the first pick.\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                  if (e.metaKey || e.ctrlKey) {\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                }\n                c.onRowClick?.(row);\n              }\n            : undefined\n        }\n      >\n        {selectionColumn && (\n          <td\n            className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n            // Don't let selecting a row also trigger the row click\n            // (which expands/edits it).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {selectable && (\n              <input\n                type=\"checkbox\"\n                className={cn(\"accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n                checked={selected}\n                // Shift+click selects the range from the last toggled\n                // row. `preventDefault` puts the box back, but it does NOT\n                // stop React's `onChange`: React derives a checkbox's\n                // change from the `click` itself, after the browser has\n                // already flipped `checked` and before the cancellation\n                // reverts it — so the same click also reported itself as\n                // a single toggle, and the owner got `onToggleMany` and\n                // then `onToggle` for the clicked row. The click is\n                // remembered by identity and its change is dropped; a\n                // boolean flag would outlive a click whose change never\n                // came and swallow the user's next real one.\n                onClick={(e) => {\n                  if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n                    e.preventDefault();\n                    ctx.current.markRangeClick(e.nativeEvent);\n                  }\n                }}\n                onChange={(e) => {\n                  const c = ctx.current;\n                  if (c.takeRangeClick(e.nativeEvent)) return;\n                  c.setAnchor(key);\n                  c.onToggle?.(row, e.target.checked);\n                }}\n                aria-label={selectRowLabel}\n              />\n            )}\n          </td>\n        )}\n        {columns.map((col, colIndex) => {\n          const width = widths[col.key];\n          // The caller's first, the table's over it — see `cellProps`.\n          const own = splitCellProps(col.cellProps?.(row));\n          const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <td\n              {...own.attrs}\n              key={col.key}\n              data-col={col.key}\n              style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n              className={cn(\n                \"align-top\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                width && \"overflow-hidden text-ellipsis\",\n                col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n                logicalAlign(own.className),\n                logicalAlign(col.className),\n              )}\n            >\n              {colIndex === 0 && disclosure}\n              {col === linkColumn && href ? (\n                // No `onActivate`: the click is left to bubble to the\n                // <tr> handler above, which already owns expand-vs-select.\n                // Calling it here as well would toggle the row twice.\n                <RowLink href={href} className=\"block\" data-row-link=\"\">\n                  {col.cell(row)}\n                </RowLink>\n              ) : (\n                col.cell(row)\n              )}\n            </td>\n          );\n        })}\n      </tr>\n      {expansion && (\n        <tr\n          id={hasDisclosure ? detailId : undefined}\n          aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n          data-row-detail={windowed ? rowIndex : undefined}\n          className=\"bg-surface-2 border-t border-subtle\"\n        >\n          {/* The detail panel spans every column. In an `auto` table\n              layout (the default here — columns only get fixed style\n              widths once the user resizes/auto-sizes them) the cell's\n              content preferred-width is redistributed across the\n              spanned columns, so a long expansion visibly re-sizes the\n              columns above it — and one-line content does not, since\n              its preferred width is small (feedback #104). Wrapping the\n              content in `w-0 min-w-full` pins the cell's preferred\n              width to ~0 (the explicit width:0 child), so it can never\n              perturb the columns; the div then fills to the full row\n              width only at paint time, and long text wraps within it.\n              Inside it the content is pinned to what the scroller SHOWS\n              (0.47, keksdose S4): on a table wider than its scroller a\n              table-wide panel put an inline editor's Save/Cancel off-screen.\n              `sticky start-0` holds it at the scroller's start edge (the\n              right one in RTL) as the row scrolls sideways, and\n              `--dt-visible-w` (the scroller's clientWidth, measured above)\n              sizes it; before the first measure, and in a table no wider\n              than its scroller, it is the full width as before. */}\n          <td colSpan={totalColSpan} className=\"p-0\">\n            <div className=\"w-0 min-w-full\">\n              <div\n                className={cn(\n                  \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n                  compact ? \"px-2 py-2\" : \"px-3 py-3\",\n                )}\n              >\n                {expansion}\n              </div>\n            </div>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n *  file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n  props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T>\n  extends Pick<\n    MobileRowProps<T>,\n    | \"row\"\n    | \"opensRow\"\n    | \"mobileDir\"\n    | \"mobileCardLinkable\"\n    | \"mobileCard\"\n    | \"mobilePrimaryCol\"\n    | \"mobileSecondaryColumns\"\n    | \"mobileExpandAsDialog\"\n    | \"compact\"\n    | \"large\"\n  > {\n  ctx: RefObject<DataTableRowCtx<T>>;\n  rowKey: string | number;\n  expanded: boolean;\n  /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n  expansion: ReactNode;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  /** The table has `onRowClick`. */\n  interactive: boolean;\n  href: string | undefined;\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The table has `selection`. */\n  selectionOn: boolean;\n  selectActive: boolean;\n  selectable: boolean;\n  selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n  ctx,\n  rowKey: key,\n  expanded,\n  expansion,\n  className,\n  attrs,\n  interactive,\n  href,\n  selectionOn,\n  selectActive,\n  selectable,\n  selected,\n  ...rest\n}: DataTableMobileRowProps<T>) {\n  const { row } = rest;\n  // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n  // table derived, and the handlers read the latest props through `ctx`.\n  return (\n    <MobileRow\n      {...rest}\n      isExpanded={expanded ? yes : undefined}\n      openedRowContent={() => expansion}\n      rowClassName={() => className}\n      rowAttributes={() => attrs}\n      onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n      rowHref={href !== undefined ? () => href : undefined}\n      select={\n        selectionOn\n          ? {\n              active: selectActive,\n              selectable,\n              selected,\n              onToggle: (checked) => {\n                ctx.current.setAnchor(key);\n                ctx.current.onToggle?.(row, checked);\n              },\n              onLongPress: () => ctx.current.onLongPress(row),\n            }\n          : null\n      }\n    />\n  );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n  props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":"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","names":[]}

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

@@ -18,4 +18,7 @@ export declare function useRangeSelection<T>({ selection, slice, rowKey, }: {
     rangeClick: import("react").RefObject<Event | null>;
     canSelect: (row: T) => boolean;
     selectRange: (toIndex: number) => boolean;
+    setAnchor: (key: string | number) => void;
+    markRangeClick: (e: Event) => void;
+    takeRangeClick: (e: Event) => boolean;
 };

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

@@ -22,7 +22,18 @@ function useRangeSelection({
     else for (const r of range) selection.onToggle(r, true);
     return true;
   };
-  return { selectionAnchor, rangeClick, canSelect, selectRange };
+  const setAnchor = (key) => {
+    selectionAnchor.current = key;
+  };
+  const markRangeClick = (e) => {
+    rangeClick.current = e;
+  };
+  const takeRangeClick = (e) => {
+    if (!rangeClick.current || rangeClick.current !== e) return false;
+    rangeClick.current = null;
+    return true;
+  };
+  return { selectionAnchor, rangeClick, canSelect, selectRange, setAnchor, markRangeClick, takeRangeClick };
 }
 export {
   useRangeSelection

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-selection.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport type { DataTableProps } from \"./data-table\";\n\n// DataTable's Shift+click range selection (feedback #289). Moved out of data-table.tsx\n// whole (refactor audit 2026-10, MOD-3 step 3).\n\n/**\n * The anchor a Shift+click draws its range from, and the range itself.\n *\n * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or\n * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the\n * `i`th row of `slice`, and answers false when there is no range on screen to draw.\n * `rangeClick` remembers the checkbox click that drew one, so that click's own\n * `onChange` can be told apart and dropped.\n */\nexport function useRangeSelection<T>({\n  selection,\n  slice,\n  rowKey,\n}: {\n  selection: DataTableProps<T>[\"selection\"];\n  /** The rows on screen, in the order shown. */\n  slice: T[];\n  rowKey: (row: T) => string | number;\n}) {\n  // The row whose selection was last toggled, so Shift+click can select the range up\n  // to it (feedback #289). Held as its KEY, not as an index into `slice`: the slice is\n  // re-derived from the current sort, filter and page, so an index taken before a\n  // header was clicked addresses a different row afterwards — and the range then ran\n  // from a row the user had never touched.\n  const selectionAnchor = useRef<string | number | null>(null);\n  /** The checkbox click that drew a range, so its `onChange` can be told apart. */\n  const rangeClick = useRef<Event | null>(null);\n  const canSelect = (row: T) => !!selection && (selection.isSelectable?.(row) ?? true);\n  const selectRange = (toIndex: number) => {\n    if (!selection || selectionAnchor.current === null) return false;\n    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);\n    // The anchor has been filtered, sorted or paged off the screen: there is no range\n    // on display to draw, so the click falls through to the plain single-row toggle.\n    if (fromIndex < 0) return false;\n    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);\n    const range: T[] = [];\n    for (let i = lo; i <= hi; i++) {\n      const r = slice[i];\n      if (r && canSelect(r)) range.push(r);\n    }\n    // One call where the owner can take one. See `selection.onToggleMany`: the row-by-\n    // row loop below is the fallback for an owner that has not adopted it, not the\n    // shape this should be in.\n    if (selection.onToggleMany) selection.onToggleMany(range, true);\n    else for (const r of range) selection.onToggle(r, true);\n    return true;\n  };\n  return { selectionAnchor, rangeClick, canSelect, selectRange };\n}\n"],"mappings":";AAAA,SAAS,cAAc;AAehB,SAAS,kBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAMD,QAAM,kBAAkB,OAA+B,IAAI;AAE3D,QAAM,aAAa,OAAqB,IAAI;AAC5C,QAAM,YAAY,CAAC,QAAW,CAAC,CAAC,cAAc,UAAU,eAAe,GAAG,KAAK;AAC/E,QAAM,cAAc,CAAC,YAAoB;AACvC,QAAI,CAAC,aAAa,gBAAgB,YAAY,KAAM,QAAO;AAC3D,UAAM,YAAY,MAAM,UAAU,CAAC,MAAM,OAAO,CAAC,MAAM,gBAAgB,OAAO;AAG9E,QAAI,YAAY,EAAG,QAAO;AAC1B,UAAM,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAC1D,UAAM,QAAa,CAAC;AACpB,aAAS,IAAI,IAAI,KAAK,IAAI,KAAK;AAC7B,YAAM,IAAI,MAAM,CAAC;AACjB,UAAI,KAAK,UAAU,CAAC,EAAG,OAAM,KAAK,CAAC;AAAA,IACrC;AAIA,QAAI,UAAU,aAAc,WAAU,aAAa,OAAO,IAAI;AAAA,QACzD,YAAW,KAAK,MAAO,WAAU,SAAS,GAAG,IAAI;AACtD,WAAO;AAAA,EACT;AACA,SAAO,EAAE,iBAAiB,YAAY,WAAW,YAAY;AAC/D;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-selection.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport type { DataTableProps } from \"./data-table\";\n\n// DataTable's Shift+click range selection (feedback #289). Moved out of data-table.tsx\n// whole (refactor audit 2026-10, MOD-3 step 3).\n\n/**\n * The anchor a Shift+click draws its range from, and the range itself.\n *\n * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or\n * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the\n * `i`th row of `slice`, and answers false when there is no range on screen to draw.\n * `rangeClick` remembers the checkbox click that drew one, so that click's own\n * `onChange` can be told apart and dropped.\n */\nexport function useRangeSelection<T>({\n  selection,\n  slice,\n  rowKey,\n}: {\n  selection: DataTableProps<T>[\"selection\"];\n  /** The rows on screen, in the order shown. */\n  slice: T[];\n  rowKey: (row: T) => string | number;\n}) {\n  // The row whose selection was last toggled, so Shift+click can select the range up\n  // to it (feedback #289). Held as its KEY, not as an index into `slice`: the slice is\n  // re-derived from the current sort, filter and page, so an index taken before a\n  // header was clicked addresses a different row afterwards — and the range then ran\n  // from a row the user had never touched.\n  const selectionAnchor = useRef<string | number | null>(null);\n  /** The checkbox click that drew a range, so its `onChange` can be told apart. */\n  const rangeClick = useRef<Event | null>(null);\n  const canSelect = (row: T) => !!selection && (selection.isSelectable?.(row) ?? true);\n  const selectRange = (toIndex: number) => {\n    if (!selection || selectionAnchor.current === null) return false;\n    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);\n    // The anchor has been filtered, sorted or paged off the screen: there is no range\n    // on display to draw, so the click falls through to the plain single-row toggle.\n    if (fromIndex < 0) return false;\n    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);\n    const range: T[] = [];\n    for (let i = lo; i <= hi; i++) {\n      const r = slice[i];\n      if (r && canSelect(r)) range.push(r);\n    }\n    // One call where the owner can take one. See `selection.onToggleMany`: the row-by-\n    // row loop below is the fallback for an owner that has not adopted it, not the\n    // shape this should be in.\n    if (selection.onToggleMany) selection.onToggleMany(range, true);\n    else for (const r of range) selection.onToggle(r, true);\n    return true;\n  };\n  // The ref writes as functions (0.48.2): the memoised rows (data-table-row.tsx) reach\n  // them through DataTable's row context rather than holding the refs themselves.\n  /** Every single-row toggle anchors the next Shift+click's range on its row. */\n  const setAnchor = (key: string | number) => {\n    selectionAnchor.current = key;\n  };\n  /** Remember the checkbox click that drew a range. */\n  const markRangeClick = (e: Event) => {\n    rangeClick.current = e;\n  };\n  /** True — once — for the change event of the click that drew a range. */\n  const takeRangeClick = (e: Event) => {\n    if (!rangeClick.current || rangeClick.current !== e) return false;\n    rangeClick.current = null;\n    return true;\n  };\n  return { selectionAnchor, rangeClick, canSelect, selectRange, setAnchor, markRangeClick, takeRangeClick };\n}\n"],"mappings":";AAAA,SAAS,cAAc;AAehB,SAAS,kBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAMD,QAAM,kBAAkB,OAA+B,IAAI;AAE3D,QAAM,aAAa,OAAqB,IAAI;AAC5C,QAAM,YAAY,CAAC,QAAW,CAAC,CAAC,cAAc,UAAU,eAAe,GAAG,KAAK;AAC/E,QAAM,cAAc,CAAC,YAAoB;AACvC,QAAI,CAAC,aAAa,gBAAgB,YAAY,KAAM,QAAO;AAC3D,UAAM,YAAY,MAAM,UAAU,CAAC,MAAM,OAAO,CAAC,MAAM,gBAAgB,OAAO;AAG9E,QAAI,YAAY,EAAG,QAAO;AAC1B,UAAM,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAC1D,UAAM,QAAa,CAAC;AACpB,aAAS,IAAI,IAAI,KAAK,IAAI,KAAK;AAC7B,YAAM,IAAI,MAAM,CAAC;AACjB,UAAI,KAAK,UAAU,CAAC,EAAG,OAAM,KAAK,CAAC;AAAA,IACrC;AAIA,QAAI,UAAU,aAAc,WAAU,aAAa,OAAO,IAAI;AAAA,QACzD,YAAW,KAAK,MAAO,WAAU,SAAS,GAAG,IAAI;AACtD,WAAO;AAAA,EACT;AAIA,QAAM,YAAY,CAAC,QAAyB;AAC1C,oBAAgB,UAAU;AAAA,EAC5B;AAEA,QAAM,iBAAiB,CAAC,MAAa;AACnC,eAAW,UAAU;AAAA,EACvB;AAEA,QAAM,iBAAiB,CAAC,MAAa;AACnC,QAAI,CAAC,WAAW,WAAW,WAAW,YAAY,EAAG,QAAO;AAC5D,eAAW,UAAU;AACrB,WAAO;AAAA,EACT;AACA,SAAO,EAAE,iBAAiB,YAAY,WAAW,aAAa,WAAW,gBAAgB,eAAe;AAC1G;","names":[]}

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

@@ -0,0 +1,98 @@
+import type { RefObject } from "react";
+/** {@link DataTableProps.virtualize}'s options. */
+export interface DataTableVirtualize {
+    /** Rows rendered beyond each edge of the visible part. Default 12. */
+    overscan?: number;
+    /** A row's height in px before it has been measured. Default: 37 (`comfortable`) /
+     *  29 (`compact`) — the kit's one-line rows. */
+    estimateRowHeight?: number;
+}
+/** One innermost group's run of rows, `[start, end)` in the rows on screen, with the
+ *  band levels its `<tbody>` opens with. `first` is the index of the innermost group that
+ *  opens its level-1 group (itself with one level). Ungrouped: one run with no bands. */
+export interface VirtualGroup {
+    start: number;
+    end: number;
+    bands: readonly (1 | 2)[];
+    first: number;
+}
+/** A row, or a spacer standing in for the rows between two rendered ones. */
+export type VirtualItem = {
+    kind: "row";
+    index: number;
+} | {
+    kind: "gap";
+    key: string;
+    height: number;
+};
+/** A group's `<tbody>` with its rendered rows, or one spacer `<tbody>` for a run of
+ *  groups of which nothing is rendered. */
+export type VirtualBody = {
+    kind: "spacer";
+    key: string;
+    height: number;
+} | {
+    kind: "group";
+    group: number;
+    items: VirtualItem[];
+};
+export interface RowWindow {
+    bodies: VirtualBody[];
+    /** `aria-rowcount`: every row of the table, header, bands, details and footer included. */
+    rowCount: number;
+    /** `aria-rowindex` of data row `i`; its detail row (open) is the next one. */
+    ariaRow: (i: number) => number;
+    /** `aria-rowindex` of group `g`'s band of `level`. */
+    ariaBand: (g: number, level: 1 | 2) => number;
+    /** The locked widths for the `<colgroup>`, by column key; null while measuring. */
+    colWidths: Record<string, number> | null;
+    /** Move the focus to row `i`, rendering it first when it is not. */
+    focusRow: (i: number) => void;
+}
+/** The `<colgroup>` key of the selection column. */
+export declare const VIRTUAL_SELECT_COL = "\0select";
+interface Model {
+    n: number;
+    keys: (string | number)[];
+    /** Top of row i, from the top of the first group's `<tbody>`. */
+    tops: Float64Array;
+    /** Full height of row i (its detail row included while open). */
+    h: Float64Array;
+    /** Top of group g's `<tbody>`; [groups.length] is the total. */
+    gTop: Float64Array;
+    total: number;
+    ariaRows: Int32Array;
+    ariaBands: Int32Array;
+    rowCount: number;
+}
+/** The `<tbody>`s to render: the groups holding a rendered row (or the period's first
+ *  day, for its band), and one spacer for each run of groups in between. Pure. */
+export declare function planBodies(m: Pick<Model, "n" | "tops" | "h" | "gTop">, groups: readonly VirtualGroup[], start: number, end: number, pinned: readonly number[]): VirtualBody[];
+export declare function useRowWindow<T>({ enabled, rows, rowKey, groups, expanded, pinnedKeys, scrollerRef, tableRef, options, compact, rowsBefore, rowsAfter, colKeys, lockable, resetKey, }: {
+    enabled: boolean;
+    /** The rows on screen, in order. */
+    rows: T[];
+    rowKey: (row: T) => string | number;
+    groups: readonly VirtualGroup[];
+    /** Indices of the open rows: always rendered, their detail rows counted. */
+    expanded: readonly number[];
+    /** Keys always rendered (the roving tab stop). */
+    pinnedKeys: readonly (string | number | null)[];
+    scrollerRef: RefObject<HTMLElement | null>;
+    tableRef: RefObject<HTMLTableElement | null>;
+    options: DataTableVirtualize;
+    compact: boolean;
+    /** Rows above the first group: the header, the leading row. */
+    rowsBefore: number;
+    /** Rows after the last: the totals row. */
+    rowsAfter: number;
+    /** The header cells' keys, in order (the selection column as {@link VIRTUAL_SELECT_COL}). */
+    colKeys: readonly string[];
+    /** The keys whose width is locked (not a `grow` column, not a user-resized one). */
+    lockable: ReadonlySet<string>;
+    /** Anything that re-measures the column widths from scratch when it changes. */
+    resetKey: string;
+}): RowWindow | null;
+/** The roving rows' Arrow/Home/End target over ALL the rows, rendered or not. */
+export declare function rowNavTarget(from: number, key: string, n: number): number | null;
+export {};