@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -0,0 +1,258 @@
+import type { Dispatch, SetStateAction } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown, Filter } from "lucide-react";
+import { cn } from "../lib/cn";
+import { defaultFilterState, isFilterActive, resolveFilter } from "./data-table-filters";
+import type { FilterValue } from "./data-table-filters";
+import type { SortState } from "./data-table-sort";
+import { FilterPopover } from "./data-table-filter-popover";
+import { Popover } from "./popover";
+import { Tooltip } from "./tooltip";
+import type { DataTableLabels } from "./data-table-labels";
+import { ROW_ACTIONS_KEY } from "./data-table-row-actions";
+import { columnLabel, logicalAlign, splitCellProps } from "./data-table-shared";
+import type { DataTableColumn, DataTableProps, FilterState } from "./data-table";
+
+// DataTable's `<thead>` on a wide screen: the select-all box, and per column the sort
+// button, the filter popover and the resize handle. Moved out of data-table.tsx whole
+// (refactor audit 2026-10, MOD-3 step 5); the state it shows and changes stays the
+// table's.
+
+/** Whether a column is end-aligned — the header then puts its filter button first. */
+const END_ALIGN = /(^|\s)text-end(?=\s|$)/;
+
+/** The wide-screen table's header row. */
+export function DataTableHead<T>({
+  visibleColumns,
+  selection,
+  compact,
+  labels,
+  locale,
+  isServer,
+  hasSortCallback,
+  hasFilterCallback,
+  sorts,
+  filters,
+  selectOptionsByKey,
+  multiSort,
+  resizable,
+  widths,
+  setWidths,
+  headRefs,
+  toggleSort,
+  setFilterValue,
+  clearFilter,
+  startResize,
+  moveResize,
+  finishResize,
+}: {
+  visibleColumns: DataTableColumn<T>[];
+  selection: DataTableProps<T>["selection"];
+  compact: boolean;
+  labels: DataTableLabels;
+  locale?: string;
+  isServer: boolean;
+  /** The caller owns the sort (`onSortsChange`), so a server table can offer it. */
+  hasSortCallback: boolean;
+  /** The caller owns the filters (`onFiltersChange`), likewise. */
+  hasFilterCallback: boolean;
+  sorts: SortState[];
+  filters: FilterState;
+  selectOptionsByKey: Record<string, { value: string; label: string }[]>;
+  multiSort: boolean;
+  resizable: boolean;
+  widths: Record<string, number>;
+  setWidths: Dispatch<SetStateAction<Record<string, number>>>;
+  /** Filled here, one `<th>` per column — what a resize and "Auto-size" measure. */
+  headRefs: Map<string, HTMLTableCellElement>;
+  toggleSort: (key: string, shiftKey: boolean) => void;
+  setFilterValue: (key: string, value: FilterValue) => void;
+  clearFilter: (key: string) => void;
+  startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;
+  moveResize: (e: React.PointerEvent<HTMLElement>) => void;
+  finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;
+}) {
+  return (
+    <thead className="bg-surface-2 text-secondary">
+      <tr className="text-start">
+        {selection && (
+          <th
+            scope="col"
+            className={cn(
+              "sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm",
+              compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2",
+            )}
+          >
+            <input
+              type="checkbox"
+              className={cn("align-middle accent-indigo-600", compact ? "size-3.5" : "size-4")}
+              checked={selection.allSelected}
+              ref={(el) => {
+                if (el) el.indeterminate = selection.someSelected && !selection.allSelected;
+              }}
+              onChange={(e) => selection.onToggleAll(e.target.checked)}
+              aria-label={labels.selectAllRows}
+            />
+          </th>
+        )}
+        {visibleColumns.map((col) => {
+          // In server mode the utilities stay hidden unless the caller
+          // takes them over and feeds them back into the server query.
+          const sortable = (!isServer || hasSortCallback) && !!col.sortBy;
+          const filter = !isServer || hasFilterCallback ? resolveFilter(col) : null;
+          const filterState = filters[col.key] ?? (filter ? defaultFilterState(filter) : undefined);
+          const sortIdx = sorts.findIndex((s) => s.key === col.key);
+          const active = sortIdx !== -1;
+          const Icon = active ? (sorts[sortIdx].dir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+          const filterActive = filterState && isFilterActive(filterState);
+          // Logical, and a legacy `text-right` still counts — see `logicalAlign`.
+          const headClass = logicalAlign(col.headClassName);
+          const isEndAligned = !!headClass && END_ALIGN.test(headClass);
+          const width = widths[col.key];
+          const ownHead = splitCellProps(col.headProps);
+          const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : undefined;
+          return (
+            <th
+              {...ownHead.attrs}
+              key={col.key}
+              ref={(el) => {
+                if (el) headRefs.set(col.key, el);
+                else headRefs.delete(col.key);
+              }}
+              scope="col"
+              // Only a header the user can actually sort says anything: an
+              // `aria-sort` on a plain column is a control that is not there,
+              // and a persisted or URL sort can name a column with no `sortBy`
+              // (the sort chain drops it silently) — which would otherwise
+              // claim a sort the table is not applying.
+              //
+              // "none" on the rest is the half that was missing. Without it a
+              // sortable header is indistinguishable from a plain one until the
+              // user presses it. Secondary criteria read "none" too: ARIA allows
+              // exactly one sorted column, and the priority is carried by the
+              // badge and by what the header button announces on press.
+              aria-sort={
+                sortable
+                  ? sortIdx === 0
+                    ? sorts[0].dir === "asc"
+                      ? "ascending"
+                      : "descending"
+                    : "none"
+                  : undefined
+              }
+              style={ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : undefined}
+              className={cn(
+                "relative font-medium align-middle whitespace-nowrap",
+                compact ? "px-2 py-1" : "px-3 py-2",
+                // Keep the header visible while the user scrolls the page.
+                // Each <th> carries its own bg so the row doesn't render
+                // transparent over the data rows underneath.
+                "sticky top-0 z-10 bg-surface-2 backdrop-blur-sm",
+                logicalAlign(ownHead.className),
+                headClass,
+              )}
+            >
+              <div
+                className={cn(
+                  "flex items-center gap-1",
+                  isEndAligned && "flex-row-reverse",
+                )}
+              >
+                <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>
+                  <button
+                    type="button"
+                    onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}
+                    disabled={!sortable}
+                    className={cn(
+                      "flex items-center gap-1 text-start",
+                      sortable && "hover:text-primary",
+                    )}
+                  >
+                    <span>{col.header}</span>
+                    {sortable && (
+                      <Icon className={cn("size-3", active ? "opacity-100" : "opacity-40")} />
+                    )}
+                    {/* Priority badge, only meaningful with 2+ sort keys */}
+                    {active && sorts.length > 1 && (
+                      <span className="text-micro font-semibold leading-none text-brand">
+                        {sortIdx + 1}
+                      </span>
+                    )}
+                  </button>
+                </Tooltip>
+                {filter && (
+                  <Popover
+                    // 420 px at Normal, in rem so the calendar grows with its
+                    // text (§3.2); Popover caps it at the viewport.
+                    width={filter.type === "date" ? "26.25rem" : undefined}
+                    // The panel is THIS column's filter, and says so. Unnamed it was
+                    // announced as the kit-wide fallback, "Popover"; then as "Filter"
+                    // in every column alike (round 0.34 Wave 2, BUG-7c).
+                    labels={{ panel: labels.filterColumn(columnLabel(col, labels), false) }}
+                    trigger={({ open, toggle, ref }) => (
+                      <button
+                        type="button"
+                        ref={ref}
+                        onClick={toggle}
+                        // Named for its column, and for being filtered: the tint
+                        // alone said that to nobody who cannot see it (BUG-7c).
+                        aria-label={labels.filterColumn(columnLabel(col, labels), Boolean(filterActive))}
+                        aria-haspopup="dialog"
+                        aria-expanded={open}
+                        className={cn(
+                          "rounded p-1 transition-colors",
+                          filterActive
+                            ? "bg-brand-soft text-brand-muted"
+                            : "text-placeholder hover:text-secondary hover:bg-hover",
+                        )}
+                      >
+                        <Filter className="size-3" />
+                      </button>
+                    )}
+                  >
+                    {() => (
+                      <FilterPopover
+                        column={col}
+                        state={filterState ?? defaultFilterState(filter)}
+                        onChange={(next) => setFilterValue(col.key, next)}
+                        onClear={() => clearFilter(col.key)}
+                        selectOptions={selectOptionsByKey[col.key] ?? []}
+                        labels={labels}
+                        locale={locale}
+                      />
+                    )}
+                  </Popover>
+                )}
+              </div>
+              {resizable && col.key !== ROW_ACTIONS_KEY && (
+              /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
+                 pointer-only drag handle for a visual preference (column width); it is
+                 deliberately not a tab stop, and no content or action depends on it. */
+              <span
+                role="separator"
+                aria-orientation="vertical"
+                onPointerDown={(e) => startResize(e, col.key)}
+                onPointerMove={moveResize}
+                onPointerUp={(e) => finishResize(e, true)}
+                onPointerCancel={(e) => finishResize(e, false)}
+                onDoubleClick={(e) => {
+                  e.preventDefault();
+                  setWidths((w) => {
+                    const next = { ...w };
+                    delete next[col.key];
+                    return next;
+                  });
+                }}
+                // `touch-none`: without it the browser claims a finger drag for
+                // scrolling before the first `pointermove` ever arrives.
+                // `end-0` and a translate that flips with it: the handle sits on the column's
+                // trailing edge, which is its left one in a right-to-left table.
+                className="absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-brand-soft-hover"
+              />
+              )}
+            </th>
+          );
+        })}
+      </tr>
+    </thead>
+  );
+}

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

@@ -1,7 +1,7 @@
 // All user-facing strings for the DataTable system — the `dataTable` namespace of
-// `<UiKitProvider labels>`, and per table the `labels` prop over that. The package
-// ships no translations; the English defaults below make the table usable with no
-// wiring.
+// `<UiKitProvider labels>`, and per table the `labels` prop over that. The kit's seven
+// catalogues carry the translations; the English defaults below make the table usable
+// with no wiring.
 
 // A type-only import: erased at build time, so this module stays free of the table
 // itself (and of react-router), which `i18n/defaults` relies on.
@@ -18,6 +18,14 @@ export interface DataTableLabels extends DataTableSortLabels {
   filter: string;
   close: string;
   selectRow: string;
+  /**
+   * The name of an opening row's disclosure button on desktop — visually hidden, in the
+   * row's first cell, carrying `aria-expanded` and `aria-controls` (round 0.34, the
+   * showcase's axe check: ARIA allows `aria-expanded` on a row only in a treegrid, and
+   * the `<tr>` wore it). The same words whether the row is open or shut: the state is
+   * the button's to say.
+   */
+  rowDetails: string;
   autoSize: string;
   loading: string;
   filters: string;
@@ -76,6 +84,13 @@ export interface DataTableLabels extends DataTableSortLabels {
   rowCount: (total: number) => string;
   /** The column-settings rail and its heading: "Columns (4/9)". */
   columnsCount: (visible: number, total: number) => string;
+  /**
+   * A column's filter button and panel: "Filter Amount", and "Filter Amount (active)"
+   * while the column is filtered (round 0.34 Wave 2, BUG-7c). Every column's used to be
+   * "Filter" alike, and "filtered" was a colour. An app that translated only `filter`
+   * gets `"<filter>: <column>"` from it: DataTable derives the one from the other.
+   */
+  filterColumn: (column: string, active: boolean) => string;
 
   // ---- Empty state, row actions, boolean cells (0.12.0) ----
 
@@ -101,6 +116,7 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   filter: "Filter",
   close: "Close",
   selectRow: "Select row",
+  rowDetails: "Details",
   autoSize: "Auto-size columns",
   loading: "Loading…",
   filters: "Filters",
@@ -143,6 +159,7 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   pageRange: (from, to, total) => `${from}–${to} / ${total}`,
   rowCount: (total) => `${total}`,
   columnsCount: (visible, total) => `Columns (${visible}/${total})`,
+  filterColumn: (column, active) => (active ? `Filter ${column} (active)` : `Filter ${column}`),
   empty: "No entries",
   actions: "Actions",
   edit: "Edit",
@@ -153,76 +170,9 @@ export const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {
   // The phone sort control (0.22.0). The same words as `DEFAULT_DATA_TABLE_SORT_LABELS`
   // in data-table.tsx, written out rather than spread in: importing that VALUE here
   // would make data-table.tsx and this module import each other (data-table.tsx reads
-  // its resolver from here), and would pull the whole table into `i18n/defaults`.
+  // these defaults from here), and would pull the whole table into `i18n/defaults`.
   sortBy: "Sort by",
   sortDefault: "Default order",
   sortAscending: "Ascending",
   sortDescending: "Descending",
 };
-
-/**
- * Merge caller overrides onto the English defaults (presets merged too).
- *
- * The parameter is `Partial` on purpose — a table with no labels at all still
- * renders — but that is also how a translated app ends up half English and never
- * hears about it: lenkbank ships nineteen of these keys in English in a German UI
- * today, because every one of them is backfilled silently. The kit will not start
- * throwing over it (three apps depend on the lenient merge), so
- * {@link missingDataTableLabels} is the other half: it answers which keys fell back,
- * and an app asserts on that in its OWN test, where the answer is actionable.
- */
-export function resolveDataTableLabels(partial?: Partial<DataTableLabels>): DataTableLabels {
-  if (!partial) return DEFAULT_DATA_TABLE_LABELS;
-  const merged: DataTableLabels = {
-    ...DEFAULT_DATA_TABLE_LABELS,
-    ...partial,
-    presets: { ...DEFAULT_DATA_TABLE_LABELS.presets, ...(partial.presets ?? {}) },
-  };
-  // `columnsCount` was split out of `columns` + a template literal. Consumers have
-  // been translating `columns` since 0.1, and backfilling the English default over
-  // that would hand them "Columns (4/9)" back for having translated the key that
-  // existed at the time — the same silent-English failure the audit records against
-  // this file. So the count is derived from the RESOLVED `columns` unless the caller
-  // states the whole sentence, which is the escape hatch for a language where the
-  // parenthetical does not fit.
-  if (partial.columns !== undefined && partial.columnsCount === undefined) {
-    merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;
-  }
-  return merged;
-}
-
-/**
- * The label keys `labels` does not supply, and which therefore come back English
- * from {@link resolveDataTableLabels}.
- *
- * For a consumer's own test:
- *
- * ```ts
- * expect(missingDataTableLabels(de.dataTable)).toEqual([]);
- * ```
- *
- * which fails the day the kit adds a key — which is the point. Adding a label is
- * additive here and a silent regression in a translated app, and nothing else in
- * either repository can tell the two apart.
- *
- * Preset labels are reported one at a time (`presets.yesterday`), because `presets`
- * is a `Record` merged key by key: answering `"presets"` would say nothing about
- * which of the eleven are still English.
- */
-export function missingDataTableLabels(labels?: Partial<DataTableLabels>): string[] {
-  const missing: string[] = [];
-  for (const key of Object.keys(DEFAULT_DATA_TABLE_LABELS) as Array<keyof DataTableLabels>) {
-    if (key === "presets") continue;
-    if (labels?.[key] !== undefined) continue;
-    // `columnsCount` is DERIVED from a translated `columns` by the resolver above,
-    // so a caller who set that one is not leaking English here. Reporting it would
-    // send them to translate a key they have already covered, and an `toEqual([])`
-    // assertion built on this would never go green.
-    if (key === "columnsCount" && labels?.columns !== undefined) continue;
-    missing.push(key);
-  }
-  for (const preset of Object.keys(DEFAULT_DATA_TABLE_LABELS.presets)) {
-    if (labels?.presets?.[preset] === undefined) missing.push(`presets.${preset}`);
-  }
-  return missing;
-}