@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -0,0 +1,187 @@
+import { useEffect, useRef } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { isRtl } from "../lib/direction";
+import type { DataTableColumn } from "./data-table";
+
+// DataTable's column resize and auto-size. Moved out of data-table.tsx whole (refactor
+// audit 2026-10, MOD-3 step 2): what it needs from the table is the header cells, the
+// widths and their setter, and which columns are shown — nothing else.
+
+/** A column resize in flight. Held in a ref rather than in state: the live width is
+ *  written straight onto the column's cells, so a drag costs zero renders and the
+ *  one `setWidths` happens when the pointer comes up. */
+interface Resize {
+  key: string;
+  pointerId: number;
+  startX: number;
+  startWidth: number;
+  /** +1 when a drag to the right widens the column, -1 in a right-to-left table,
+   *  where the handle sits on the column's LEFT edge and widening is a drag left. */
+  sign: 1 | -1;
+  /** What React last rendered this column at, so a CANCELLED drag can put the header
+   *  back — React cannot, it never saw the inline width the drag wrote. */
+  hadWidth: number | undefined;
+  /** The header and the body cells under it, collected ONCE when the drag starts.
+   *  A `<th>` alone cannot shrink a column whose `<td>`s already carry a pinned
+   *  width — and nothing re-renders during a drag, so the list cannot go stale. */
+  cells: HTMLElement[];
+  width: number;
+  /** A press with no drag in it is not a resize — the handle is also the
+   *  double-click target that CLEARS a width, and committing the header's current
+   *  size on the way past would pin every column the user ever brushed. */
+  moved: boolean;
+}
+
+/**
+ * The resize handles' pointer handlers, and the column panel's "Auto-size".
+ *
+ * Pointer events with capture, rather than a `mousemove`/`mouseup` pair on `window`.
+ * Three defects in one eleven-line handler (audit 2026-09-22):
+ *
+ *  * a `setWidths` per `mousemove` re-rendered every row of the table on every pixel
+ *    of the drag — on a 500-row table that is the whole body, sixty times a second;
+ *  * the two `window` listeners were added from inside an event handler, so nothing
+ *    removed them if the table unmounted mid-drag (the row beneath opens a route),
+ *    and `document.body.style` stayed at `user-select: none; cursor: col-resize` for
+ *    the rest of the session — the whole page unselectable, with the wrong cursor;
+ *  * `mousedown` is a mouse. Under a finger the handle did nothing at all.
+ *
+ * `setPointerCapture` answers all three: the handle itself receives every move and
+ * the terminating `pointerup`/`pointercancel` wherever the pointer travels, so there
+ * is nothing global to leak, and a touch drag works because a finger is a pointer.
+ * The live width is written straight onto the column's own cells — the same three
+ * properties the render sets, so the drag and the commit cannot disagree — and
+ * `setWidths` is called once, when the drag ends.
+ */
+export function useColumnResize<T>({
+  headRefs,
+  widths,
+  setWidths,
+  columns,
+  hiddenCols,
+}: {
+  /** The header cells by column key, as the `<th>`s' ref callbacks fill it. */
+  headRefs: Map<string, HTMLTableCellElement>;
+  /** The widths React renders the columns at. */
+  widths: Record<string, number>;
+  setWidths: Dispatch<SetStateAction<Record<string, number>>>;
+  columns: DataTableColumn<T>[];
+  hiddenCols: Set<string>;
+}) {
+  const resizing = useRef<Resize | null>(null);
+
+  /** Every cell in one column, header first, totals row included. `data-col` rather than a cell index:
+   *  an expanded row holds a single `colSpan` cell, so the nth `<td>` of a row is
+   *  not reliably the nth column. */
+  const columnCells = (key: string): HTMLElement[] => {
+    const th = headRefs.get(key);
+    if (!th) return [];
+    const table = th.closest("table");
+    if (!table) return [th];
+    return [
+      th,
+      ...Array.from(table.querySelectorAll<HTMLElement>("tbody [data-col], tfoot [data-col]")).filter(
+        (el) => el.dataset.col === key,
+      ),
+    ];
+  };
+
+  const applyLiveWidth = (cells: HTMLElement[], width: number | undefined) => {
+    const px = width == null ? "" : `${width}px`;
+    for (const el of cells) {
+      el.style.width = px;
+      el.style.minWidth = px;
+      el.style.maxWidth = px;
+    }
+  };
+
+  const releaseResizeChrome = (handle: Element, pointerId: number) => {
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+    // Optional calls: jsdom implements neither, and the handlers sit on the handle
+    // itself, so a run without capture behaves the same for anything that stays
+    // inside the element.
+    if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture?.(pointerId);
+  };
+
+  const startResize = (e: React.PointerEvent<HTMLElement>, key: string) => {
+    // Secondary buttons open menus; only a primary press starts a drag.
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const th = headRefs.get(key);
+    const startWidth = th?.getBoundingClientRect().width ?? 100;
+    resizing.current = {
+      key,
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startWidth,
+      sign: isRtl(e.currentTarget) ? -1 : 1,
+      hadWidth: widths[key],
+      cells: columnCells(key),
+      width: startWidth,
+      moved: false,
+    };
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+  };
+
+  const moveResize = (e: React.PointerEvent<HTMLElement>) => {
+    const drag = resizing.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    drag.width = Math.max(40, Math.round(drag.startWidth + drag.sign * (e.clientX - drag.startX)));
+    drag.moved = true;
+    applyLiveWidth(drag.cells, drag.width);
+  };
+
+  const finishResize = (e: React.PointerEvent<HTMLElement>, commit: boolean) => {
+    const drag = resizing.current;
+    // Before the early return: the page gets its selection and its cursor back even
+    // for a pointer we were not tracking.
+    releaseResizeChrome(e.currentTarget, e.pointerId);
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    resizing.current = null;
+    if (commit && drag.moved) {
+      setWidths((w) => ({ ...w, [drag.key]: drag.width }));
+      return;
+    }
+    // Cancelled — the browser took the pointer for a system gesture — or the press
+    // never became a drag. Either way the column goes back to the width React last
+    // rendered it at, which nothing else can do: the inline width the drag wrote is
+    // invisible to React, so a re-render with an unchanged `widths` would keep it.
+    applyLiveWidth(drag.cells, drag.hadWidth);
+  };
+
+  // The last exit path. A table that unmounts mid-drag takes the handle, and with it
+  // every handler above, out of the document — this is the only place left to hand the
+  // page back its text selection and its cursor.
+  useEffect(
+    () => () => {
+      if (!resizing.current) return;
+      resizing.current = null;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    },
+    [],
+  );
+
+  const autoSizeAll = () => {
+    // Clear widths so the table reflows to natural sizes, then snapshot each
+    // column's width and write it back — except for the last visible column,
+    // which is left unconstrained so it absorbs any remaining horizontal space.
+    setWidths({});
+    requestAnimationFrame(() => {
+      const next: Record<string, number> = {};
+      const cols = columns.filter((c) => !hiddenCols.has(c.key));
+      cols.forEach((col, idx) => {
+        if (idx === cols.length - 1) return;
+        const th = headRefs.get(col.key);
+        if (th) next[col.key] = Math.ceil(th.getBoundingClientRect().width);
+      });
+      setWidths(next);
+    });
+  };
+
+  return { startResize, moveResize, finishResize, autoSizeAll };
+}

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

@@ -0,0 +1,152 @@
+import { isValidElement, useCallback, useMemo } from "react";
+import type { ReactNode } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import { RowActions, type RowAction } from "./row-actions";
+import type { SwipeAction } from "./swipeable-row";
+import type { DataTableLabels } from "./data-table-labels";
+import type {
+  DataTableColumn,
+  DataTableDensity,
+  DataTableProps,
+  DataTableRowAction,
+  MobileSwipeActions,
+} from "./data-table";
+
+// DataTable's per-row actions (`rowActions`): the actions column on a wide screen and
+// the swipes on a phone card. Moved out of data-table.tsx whole (refactor audit
+// 2026-10, MOD-3 step 1); internal — the public types stay in data-table.tsx.
+
+/** The actions column's key. Not a column a caller declares, so it is kept out of the
+ *  column-settings panel. */
+export const ROW_ACTIONS_KEY = "__rowActions";
+
+interface ResolvedRowAction<T> {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  tone: "default" | "danger";
+  swipe: "start" | "end" | false;
+  action: DataTableRowAction<T>;
+}
+
+function resolveRowAction<T>(
+  action: DataTableRowAction<T>,
+  index: number,
+  labels: DataTableLabels,
+): ResolvedRowAction<T> {
+  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
+  return {
+    key: action.kind ?? `${index}:${action.label ?? ""}`,
+    label: action.label ?? (action.kind === "edit" ? labels.edit : action.kind === "delete" ? labels.delete : ""),
+    icon:
+      action.icon ??
+      (action.kind === "edit" ? <Pencil /> : action.kind === "delete" ? <Trash2 /> : null),
+    tone,
+    swipe: action.swipe ?? (tone === "danger" ? "start" : "end"),
+    action,
+  };
+}
+
+/** Ask, then act. */
+async function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {
+  if (action.confirm && !(await action.confirm(row))) return;
+  action.onAction(row);
+}
+
+/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a
+ *  non-element one (a string glyph) is wrapped, since RowAction wants an element. */
+function toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {
+  return {
+    key: a.key,
+    label: a.label,
+    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,
+    tone: a.tone,
+    disabledReason: a.action.disabledReason?.(row),
+    onSelect: () => void runRowAction(a.action, row),
+  };
+}
+
+/**
+ * The caller's columns with the actions column appended, and the same actions as a
+ * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes
+ * `mobileSwipeActions`). Without `rowActions` the columns come back as given.
+ *
+ * The actions column is appended to the caller's columns rather than drawn as a
+ * second special case beside the selection column: it then gets the cell padding,
+ * the widths and the phone rules (`mobileHidden`) every other column gets.
+ */
+export function useRowActionColumn<T>({
+  columns: columnsProp,
+  rowActions,
+  rowName,
+  labels,
+  density,
+}: {
+  columns: DataTableColumn<T>[];
+  rowActions: DataTableProps<T>["rowActions"];
+  rowName: DataTableProps<T>["rowName"];
+  labels: DataTableLabels;
+  density: DataTableDensity;
+}): {
+  columns: DataTableColumn<T>[];
+  swipesFromActions: (row: T) => MobileSwipeActions | null;
+} {
+  const rowActionsFor = useCallback(
+    (row: T): ResolvedRowAction<T>[] =>
+      rowActions
+        ? (typeof rowActions === "function" ? rowActions(row) : rowActions)
+            .filter((a) => !a.hidden?.(row))
+            .map((a, i) => resolveRowAction(a, i, labels))
+        : [],
+    [rowActions, labels],
+  );
+  const columns = useMemo<DataTableColumn<T>[]>(
+    () =>
+      rowActions
+        ? [
+            ...columnsProp,
+            {
+              key: ROW_ACTIONS_KEY,
+              header: <span className="sr-only">{labels.actions}</span>,
+              // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
+              // menu at Large once there are two — every label at once does not fit a
+              // row. Each control stops its own click: the row's handler already skips
+              // its controls, and this is for the caller who wraps the table in a
+              // clickable element of their own.
+              cell: (row) => (
+                <RowActions
+                  actions={rowActionsFor(row).map((a) => toRowAction(a, row))}
+                  name={rowName?.(row)}
+                  size={density === "compact" ? "2xs" : "xs"}
+                  labels={{ actions: labels.actions }}
+                  className="justify-end"
+                />
+              ),
+              className: "w-px whitespace-nowrap text-end",
+              headClassName: "w-px",
+              // On a phone the same actions are the card's swipes.
+              mobileHidden: true,
+              noRowLink: true,
+            },
+          ]
+        : columnsProp,
+    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density],
+  );
+  const swipesFromActions = (row: T): MobileSwipeActions | null => {
+    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
+    if (!swipes.length) return null;
+    const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({
+      label: a.label,
+      icon: a.icon,
+      onCommit: () => void runRowAction(a.action, row),
+      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill
+      // and that fill's foreground armed (0.33).
+      tone: a.tone === "danger" ? "danger" : "brand",
+    });
+    return {
+      start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
+      end: swipes.filter((a) => a.swipe === "end").map(toSwipe),
+    };
+  };
+  return { columns, swipesFromActions };
+}

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

@@ -0,0 +1,55 @@
+import { useRef } from "react";
+import type { DataTableProps } from "./data-table";
+
+// DataTable's Shift+click range selection (feedback #289). Moved out of data-table.tsx
+// whole (refactor audit 2026-10, MOD-3 step 3).
+
+/**
+ * The anchor a Shift+click draws its range from, and the range itself.
+ *
+ * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or
+ * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the
+ * `i`th row of `slice`, and answers false when there is no range on screen to draw.
+ * `rangeClick` remembers the checkbox click that drew one, so that click's own
+ * `onChange` can be told apart and dropped.
+ */
+export function useRangeSelection<T>({
+  selection,
+  slice,
+  rowKey,
+}: {
+  selection: DataTableProps<T>["selection"];
+  /** The rows on screen, in the order shown. */
+  slice: T[];
+  rowKey: (row: T) => string | number;
+}) {
+  // The row whose selection was last toggled, so Shift+click can select the range up
+  // to it (feedback #289). Held as its KEY, not as an index into `slice`: the slice is
+  // re-derived from the current sort, filter and page, so an index taken before a
+  // header was clicked addresses a different row afterwards — and the range then ran
+  // from a row the user had never touched.
+  const selectionAnchor = useRef<string | number | null>(null);
+  /** The checkbox click that drew a range, so its `onChange` can be told apart. */
+  const rangeClick = useRef<Event | null>(null);
+  const canSelect = (row: T) => !!selection && (selection.isSelectable?.(row) ?? true);
+  const selectRange = (toIndex: number) => {
+    if (!selection || selectionAnchor.current === null) return false;
+    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);
+    // The anchor has been filtered, sorted or paged off the screen: there is no range
+    // on display to draw, so the click falls through to the plain single-row toggle.
+    if (fromIndex < 0) return false;
+    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);
+    const range: T[] = [];
+    for (let i = lo; i <= hi; i++) {
+      const r = slice[i];
+      if (r && canSelect(r)) range.push(r);
+    }
+    // One call where the owner can take one. See `selection.onToggleMany`: the row-by-
+    // row loop below is the fallback for an owner that has not adopted it, not the
+    // shape this should be in.
+    if (selection.onToggleMany) selection.onToggleMany(range, true);
+    else for (const r of range) selection.onToggle(r, true);
+    return true;
+  };
+  return { selectionAnchor, rangeClick, canSelect, selectRange };
+}

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

@@ -0,0 +1,172 @@
+import type { CSSProperties, ReactNode } from "react";
+import { ROW_ACTIONS_KEY } from "./data-table-row-actions";
+import type { DataTableLabels } from "./data-table-labels";
+import type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from "./data-table";
+
+// 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
+// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged
+// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to
+// import data-table.tsx at run time — which imports them.
+
+/**
+ * Split a caller's cell attributes into what may reach the element and what the kit
+ * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and
+ * `style` come back separately so the kit can merge rather than replace them.
+ */
+export function splitCellProps(
+  props: DataTableCellProps | DataTableHeadProps | undefined,
+): { attrs: Record<string, unknown>; className?: string; style?: CSSProperties } {
+  if (!props) return { attrs: {} };
+  const {
+    className,
+    style,
+    role: _role,
+    "data-col": _col,
+    ...attrs
+  } = props as DataTableCellProps & { "data-col"?: unknown };
+  return { attrs, className, style };
+}
+
+// A bare `text-right` / `text-left` token, with or without variant prefixes
+// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.
+const PHYSICAL_ALIGN = /(^|\s)((?:[\w-]+:)*)text-(left|right)(?=\s|$)/g;
+
+/**
+ * A column's `className`/`headClassName` with physical text alignment rewritten to
+ * logical: `text-right` → `text-end`, `text-left` → `text-start`.
+ *
+ * Every numeric column written before 0.7.0 says `text-right`, and that is what it
+ * MEANT: the end of the line, where digits line up. Rendered as written, a
+ * right-to-left table puts those numbers on the far side from their own header's
+ * sort button. Rewriting keeps each existing call site correct in both directions
+ * with no change on its side; a caller who genuinely wants the physical side in RTL
+ * too can say `ltr:text-right rtl:text-right`, which this leaves alone.
+ */
+export function logicalAlign(className: string | undefined): string | undefined {
+  return className?.replace(
+    PHYSICAL_ALIGN,
+    (token: string, lead: string, variants: string, side: string) =>
+      // Already scoped to one direction: that is a caller choosing the physical side.
+      /(^|:)(ltr|rtl):/.test(variants)
+        ? token
+        : `${lead}${variants}text-${side === "right" ? "end" : "start"}`,
+  );
+}
+
+/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a
+ *  caller can write `{ "data-x": cond ? "y" : undefined }` and get no attribute
+ *  at all rather than the string "undefined" in the DOM. */
+export function cleanAttrs(
+  attrs: Record<string, string | undefined> | undefined,
+): Record<string, string> | undefined {
+  if (!attrs) return undefined;
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;
+  return out;
+}
+
+/**
+ * A column's name as a plain string.
+ *
+ * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and
+ * neither a live region nor the column-settings checklist can speak a React element.
+ * The `key` fallback is the one the settings panel has always used; a column whose
+ * header is not a string and whose key is not human-readable is a call site that
+ * should pass a string header, and that is visible in what gets announced.
+ */
+export function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {
+  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
+  return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
+}
+
+/**
+ * Whether a click that reached `row`'s handler did not start in the row's own DOM.
+ *
+ * React bubbles an event through the COMPONENT tree, portals included: a popover, a
+ * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but
+ * still reports its clicks to every React ancestor — the row among them. So a click
+ * in a cell's portalled date picker opened the row it came from, and a page wrapped
+ * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's
+ * feedback page did, round its comments). The row owns the clicks on the row.
+ */
+export function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {
+  return !(target instanceof Node) || !row.contains(target);
+}
+
+/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to
+ *  the browser, and the whole feature is not touching it. */
+const isPlainLeftClick = (e: React.MouseEvent) =>
+  e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+
+/**
+ * The anchor a linkable row is opened through (Keksdose feedback #451).
+ *
+ * The plain left click is OURS: cancelled, then handed to the row's own handler, so
+ * clicking a row still expands it in place instead of reloading the page. Every
+ * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is
+ * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:
+ * that imitation buys back the middle click and still loses ⌘/Ctrl-click, "copy link
+ * address", the status-bar preview and the phone's long-press menu.
+ *
+ * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and
+ * Shift-click on a row mean "select" (feedback #289), and a row must not change its
+ * selection while the browser is opening a tab. The rest of the row still selects —
+ * the link is one cell, not the row.
+ *
+ * `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.
+ */
+export function RowLink({
+  href,
+  onActivate,
+  className,
+  children,
+  ...rest
+}: {
+  href: string;
+  /** 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;
+  className?: string;
+  children: ReactNode;
+} & Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "href" | "className" | "children" | "onClick" | "onClickCapture"
+>) {
+  return (
+    <a
+      {...rest}
+      href={href}
+      draggable={false}
+      className={className}
+      // CAPTURE phase, and it has to be: on the mobile card the whole card is the
+      // anchor, so a nested control sits INSIDE it — and the ones that matter
+      // (the feedback row's status toggles) stop the click propagating so the row
+      // won't also expand. A bubble-phase handler would never run for those, and
+      // the browser would follow the link out from under the button press. Cancelling
+      // here happens before any descendant can silence the event; `stopPropagation`
+      // does not undo a `preventDefault`.
+      onClickCapture={(e) => {
+        // A click in a portal a descendant opened is not a click on the link: leave
+        // it (and a link inside it) alone. See `fromOutside`.
+        if (fromOutside(e.target, e.currentTarget)) return;
+        if (isPlainLeftClick(e)) e.preventDefault();
+      }}
+      onClick={(e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
+        if (!isPlainLeftClick(e)) {
+          e.stopPropagation();
+          return;
+        }
+        // Already cancelled above; this phase only decides what opens. A nested
+        // control that stopped propagation deliberately never reaches it, which is
+        // exactly how the row behaved before it became a link.
+        onActivate?.();
+      }}
+    >
+      {children}
+    </a>
+  );
+}