@eifi1/ui-kit 0.53.0 → 0.55.0

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

@@ -1,118 +0,0 @@
-import type { ReactNode } from "react";
-import { Check, Minus, X } from "lucide-react";
-import { cn } from "../lib/cn";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
-import type { DataTableColumn } from "./data-table";
-
-export interface BooleanMarkProps {
-  /** `true` → a check, `false` → a cross (or a dash, see `falseAs`), `null` /
-   *  `undefined` → a dash. */
-  value: boolean | null | undefined;
-  /**
-   * How `false` is drawn. `"cross"` (default) when "no" is news worth seeing — a
-   * failed check, a missing document. `"dash"` for a column that is mostly `false` and
-   * reads as a list of the `true` ones (kastlan's BoolCell): a column of crosses is
-   * noise. The screen-reader text says "No" either way.
-   */
-  falseAs?: "cross" | "dash";
-  /** The spoken words, over `dataTable.booleanTrue` / `booleanFalse` / `booleanUnset`
-   *  from `<UiKitProvider labels>`. */
-  labels?: LabelOverride<Pick<DataTableLabels, "booleanTrue" | "booleanFalse" | "booleanUnset">>;
-  className?: string;
-}
-
-/**
- * A yes/no value in a table cell: a green check, a muted cross, or a faint dash for
- * "not set" — with the word for a screen reader, since a glyph alone is announced as
- * nothing at all (or as "image").
- *
- * kastlan's `BoolCell` (shared/components/data-table/bool-cell.tsx) drew the icons with
- * no text, so a reader walking the table heard an empty cell for every row; the apps'
- * Yes/No chips were the other answer, and too loud for a column of them.
- */
-export function BooleanMark({ value, falseAs = "cross", labels: labelsProp, className }: BooleanMarkProps) {
-  const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
-  const state = value === true ? "true" : value === false ? "false" : "unset";
-  const text = state === "true" ? labels.booleanTrue : state === "false" ? labels.booleanFalse : labels.booleanUnset;
-  const Icon = state === "true" ? Check : state === "false" && falseAs === "cross" ? X : Minus;
-  return (
-    <span data-value={state} className={cn("inline-flex items-center align-middle", className)}>
-      <Icon
-        aria-hidden
-        className={cn(
-          "size-4",
-          state === "true"
-            ? "text-success"
-            : state === "false" && falseAs === "cross"
-              ? "text-muted"
-              : "text-placeholder",
-        )}
-      />
-      <span className="sr-only">{text}</span>
-    </span>
-  );
-}
-
-export interface BooleanColumnOptions<T> {
-  key: string;
-  header: ReactNode;
-  /** The value of this row. */
-  value: (row: T) => boolean | null | undefined;
-  /** See {@link BooleanMarkProps.falseAs}. */
-  falseAs?: "cross" | "dash";
-  /** Sortable, `true` first on the first click (a column is sorted to find the yes
-   *  rows). Default true. */
-  sortable?: boolean;
-  /**
-   * A select filter over the column, with these option labels — pass them translated.
-   * Omitted: no filter. The option values are `"true"` / `"false"` (and `"unset"` when
-   * `unset` is given), which is also what `filterHref` takes for this column.
-   */
-  filterOptions?: { true: string; false: string; unset?: string };
-  /** Further column settings (`mobileHidden`, `headClassName`, …), merged over. */
-  column?: Partial<DataTableColumn<T>>;
-}
-
-/**
- * A {@link DataTableColumn} for a yes/no field: {@link BooleanMark} cells,
- * sortable with `true` first, and optionally a Yes/No select filter.
- */
-export function booleanColumn<T>({
-  key,
-  header,
-  value,
-  falseAs,
-  sortable = true,
-  filterOptions,
-  column,
-}: BooleanColumnOptions<T>): DataTableColumn<T> {
-  const asKey = (row: T) => {
-    const v = value(row);
-    return v === true ? "true" : v === false ? "false" : "unset";
-  };
-  return {
-    key,
-    header,
-    cell: (row) => <BooleanMark value={value(row)} falseAs={falseAs} />,
-    // 0 for yes, 1 for no, null for unset (which the table sorts last either way).
-    sortBy: sortable
-      ? (row) => {
-          const v = value(row);
-          return v == null ? null : v ? 0 : 1;
-        }
-      : undefined,
-    filter: filterOptions
-      ? {
-          type: "select",
-          getValue: asKey,
-          options: [
-            { value: "true", label: filterOptions.true },
-            { value: "false", label: filterOptions.false },
-            ...(filterOptions.unset !== undefined ? [{ value: "unset", label: filterOptions.unset }] : []),
-          ],
-        }
-      : undefined,
-    ...column,
-  };
-}

package/src/components/data-table-column-settings.tsx

@@ -1,198 +0,0 @@
-import { useId, useLayoutEffect, useRef } from "react";
-import type { Dispatch, SetStateAction } from "react";
-import { X } from "lucide-react";
-import { cn } from "../lib/cn";
-import { claimEscape } from "../hooks/use-dismiss";
-import { firstTabStop } from "../lib/focus-left";
-import { Tooltip } from "./tooltip";
-import type { DataTableLabels } from "./data-table-labels";
-import { isTableOwnColumn } from "./data-table-row-actions";
-import { columnLabel } from "./data-table-shared";
-import type { DataTableColumn } from "./data-table";
-
-// DataTable's column settings on a wide screen: the vertical "Columns (n/m)" rail and
-// the drawer it opens, with "Auto-size" and a show/hide box per column. Moved out of
-// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).
-
-/** The "Columns" rail and its drawer (`columnSettings`). */
-export function ColumnSettingsPanel<T>({
-  columns,
-  hiddenCols,
-  setHiddenCols,
-  autoHidden,
-  keepColumn,
-  showSettings,
-  setShowSettings,
-  columnsCountLabel,
-  labels,
-  autoSizeAll,
-}: {
-  /** Every column, hidden ones included; the actions column is left out here. */
-  columns: readonly DataTableColumn<T>[];
-  hiddenCols: Set<string>;
-  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
-  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and
-   *  marked "hidden for width". */
-  autoHidden: Set<string>;
-  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */
-  keepColumn: (key: string, on: boolean) => void;
-  showSettings: boolean;
-  setShowSettings: (open: boolean) => void;
-  /** "Columns (n/m)", the rail's text and name. */
-  columnsCountLabel: string;
-  labels: DataTableLabels;
-  autoSizeAll: () => void;
-}) {
-  // The "Columns" rail button — where the drawer's X hands focus back (BUG-7a).
-  const columnsRail = useRef<HTMLButtonElement | null>(null);
-  const drawerRef = useRef<HTMLDivElement | null>(null);
-  const drawerId = useId();
-  // The opening half (refactor audit 2026-10-30, DSP-13). Opened from the rail, the focus
-  // goes into the drawer: the rail it was on turns zero wide and leaves the tab order in
-  // the same render, and the focus sat in a control nobody could see. To the first column
-  // box — what the drawer is opened for — or, with none, its first control. Only when the
-  // rail opened it: a drawer that starts open (its state is the table's) takes nothing.
-  const focusOnOpen = useRef(false);
-  useLayoutEffect(() => {
-    if (!showSettings || !focusOnOpen.current) return;
-    focusOnOpen.current = false;
-    const drawer = drawerRef.current;
-    if (!drawer) return;
-    (
-      drawer.querySelector<HTMLElement>('input[type="checkbox"]') ?? firstTabStop(drawer, { includeSelf: false })
-    )?.focus();
-  }, [showSettings]);
-  const close = () => {
-    setShowSettings(false);
-    // Back to the rail that opened it: the drawer is about to go inert, and focus would
-    // fall to <body> with it (BUG-7a).
-    columnsRail.current?.focus();
-  };
-  return (
-    <>
-      <Tooltip label={columnsCountLabel} portal>
-        <button
-          ref={columnsRail}
-          type="button"
-          onClick={() => {
-            focusOnOpen.current = true;
-            setShowSettings(true);
-          }}
-          aria-label={columnsCountLabel}
-          // A disclosure: it says whether the drawer is open, and never hides itself from
-          // a screen reader — `aria-hidden` on it while it held the focus left the reader
-          // with nothing to say (DSP-13). Zero wide and out of the tab order while open.
-          aria-expanded={showSettings}
-          aria-controls={drawerId}
-          tabIndex={showSettings ? -1 : 0}
-          className={cn(
-            "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
-            "border-s border-subtle",
-            "hover:bg-hover",
-            showSettings ? "w-0 border-s-0" : "w-8 cursor-pointer",
-          )}
-        >
-          <span
-            className="whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary"
-            style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
-          >
-            {columnsCountLabel}
-          </span>
-        </button>
-      </Tooltip>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape
-          for whatever control in the drawer holds the focus; the group itself is no control. */}
-      <div
-        ref={drawerRef}
-        id={drawerId}
-        // Named by its own heading's words, so a reader entering it hears "Columns (4/9),
-        // group" before the first box (DSP-13).
-        role="group"
-        aria-label={columnsCountLabel}
-        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one
-        // checkbox per column stayed tab stops and in the accessibility tree, and Tab
-        // after the last cell walked into controls nobody could see (BUG-7a).
-        inert={!showSettings || undefined}
-        // Escape closes it onto the rail, as its X does. Claimed, not handed to the Escape
-        // stack: inside a dialog the drawer is what the key closes, not the dialog.
-        onKeyDown={(e) => {
-          if (e.key !== "Escape" || !showSettings) return;
-          claimEscape(e);
-          close();
-        }}
-        className={cn(
-          "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
-          showSettings ? "w-56" : "w-0",
-        )}
-      >
-        <div className="flex w-56 flex-col border-s border-subtle p-2">
-          <div className="mb-2 flex items-center justify-between gap-1">
-            <div className="text-xs font-medium uppercase tracking-wide text-muted">{columnsCountLabel}</div>
-            <Tooltip label={labels.close} portal>
-              <button
-                type="button"
-                onClick={close}
-                aria-label={labels.close}
-                className="rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary"
-              >
-                <X className="size-4" />
-              </button>
-            </Tooltip>
-          </div>
-          <button
-            type="button"
-            onClick={autoSizeAll}
-            className="mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover"
-          >
-            {labels.autoSize}
-          </button>
-          <div className="flex flex-col gap-0.5">
-            {columns.map((col) => {
-              if (isTableOwnColumn(col.key)) return null;
-              // Ticked = drawn: a column left out for width is unticked, so the boxes
-              // and "Columns (8/10)" say the same (keksdose live #451).
-              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);
-              const checked = !hiddenCols.has(col.key) && !forWidth;
-              const headerLabel = columnLabel(col);
-              return (
-                <label
-                  key={col.key}
-                  className="inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover"
-                >
-                  <input
-                    type="checkbox"
-                    className="size-3.5 shrink-0"
-                    checked={checked}
-                    onChange={(e) => {
-                      keepColumn(col.key, e.target.checked);
-                      setHiddenCols((s) => {
-                        const next = new Set(s);
-                        if (e.target.checked) next.delete(col.key);
-                        else next.add(col.key);
-                        return next;
-                      });
-                    }}
-                  />
-                  {/* The panel is `w-56`: a long column name wraps from Large up rather
-                      than reading "Accoun…" beside its box (text size §10.17, round
-                      0.34 T1). */}
-                  {forWidth ? (
-                    // Under the name, as part of the box's name: "Email, hidden for width".
-                    <span className="flex min-w-0 flex-col">
-                      <span className="truncate-until-large">{headerLabel}</span>
-                      <span className="text-micro text-muted" data-hidden-for-width="">
-                        {labels.hiddenForWidth}
-                      </span>
-                    </span>
-                  ) : (
-                    <span className="min-w-0 truncate-until-large">{headerLabel}</span>
-                  )}
-                </label>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

package/src/components/data-table-filter-popover.tsx

@@ -1,281 +0,0 @@
-import { useCallback, useState } from "react";
-import { X } from "lucide-react";
-import { cn } from "../lib/cn";
-import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks";
-import { FIELD_TOUCH_TEXT } from "./field-base";
-import { FOCUS_RING } from "./focus-ring";
-import { MiniCalendar } from "./mini-calendar";
-import { dateRangePresets } from "../lib/dates";
-import { resolveFilter } from "./data-table-filters";
-import type { FilterValue } from "./data-table-filters";
-import type { DataTableColumn } from "./data-table";
-import type { DataTableLabels } from "./data-table-labels";
-import { resolveDataTableLabels } from "./data-table-shared";
-import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels";
-
-interface FilterPopoverProps<T> {
-  column: DataTableColumn<T>;
-  state: FilterValue;
-  onChange: (next: FilterValue) => void;
-  onClear: () => void;
-  selectOptions: { value: string; label: string }[];
-  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */
-  locale?: string;
-  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and
-   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */
-  labels?: DataTableLabels;
-  /**
-   * Focus the text filter's input on mount. True, because that is right for the one
-   * place this component normally lives: a Popover opened by an explicit press on
-   * "Filter", which exists in order to be typed into and which the user has just asked
-   * for. It was hard-coded, which made it right there and wrong everywhere else — a
-   * browser scrolls whatever takes focus into view, so embedding this control in an
-   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a
-   * page they had not scrolled. An embedder that is not a popover passes `false`.
-   */
-  autoFocus?: boolean;
-}
-
-/**
- * The contents of a column's filter Popover. Renders the right control set for
- * the column's filter type — text search, select checklist, date range (presets
- * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs
- * toggle — driving the shared {@link FilterValue} state.
- */
-export function FilterPopover<T>({
-  column,
-  state,
-  onChange,
-  onClear,
-  selectOptions,
-  locale: localeProp,
-  labels: labelsProp,
-  autoFocus = true,
-}: FilterPopoverProps<T>) {
-  // Both hooks run before the early return below, unconditionally.
-  const overrides = useKitLabelOverrides("dataTable");
-  const labels = labelsProp ?? resolveDataTableLabels(overrides);
-  // No `"en"` fallback any more: that pinned the calendar to English in a table that
-  // was never handed a locale, under a provider that had one.
-  const locale = useKitLocale(localeProp);
-  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase
-  // React's own autofocus does, once when the input mounts (it is stable across
-  // renders, so a re-render does not re-take focus).
-  const focusOnMount = useCallback(
-    (el: HTMLInputElement | null) => {
-      if (el && autoFocus) el.focus();
-    },
-    [autoFocus],
-  );
-  // The number bounds' marks, and what the typist wrote in each box — see the number
-  // section below (BUG-10).
-  const mark = decimalMark(locale);
-  const [typed, setTyped] = useState<{ min: string | null; max: string | null }>({ min: null, max: null });
-  const filter = resolveFilter(column);
-  if (!filter) return null;
-
-  // `focus:outline-none` with only a 1px border tint to replace it is the same finding
-  // the audit records against the numpad's keys: on a panel of four identical fields a
-  // border going from --border to --border-strong is not a location. The ring is, and it
-  // is the package's brand focus colour, as on every field (field-base.tsx).
-  const inputBase =
-    "block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none " +
-    FOCUS_RING +
-    " " +
-    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.
-    FIELD_TOUCH_TEXT;
-  const buttonBase = "rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover";
-
-  const clearRow = (
-    <div className="flex justify-end pt-1">
-      <button type="button" onClick={onClear} className={cn(buttonBase, "flex items-center gap-1")}>
-        <X className="size-3" /> {labels.clearFilter}
-      </button>
-    </div>
-  );
-
-  if (filter.type === "text") {
-    const v = state.type === "text" ? state : { type: "text" as const, q: "" };
-    return (
-      <div className="space-y-2">
-        <input
-          type="text"
-          // A prop now, defaulting to what the popover needs; see `autoFocus` on the
-          // props above. Focused by `focusOnMount` rather than the `autoFocus`
-          // attribute, because here taking focus is the default, not an opt-in.
-          ref={focusOnMount}
-          value={v.q}
-          onChange={(e) => onChange({ type: "text", q: e.target.value })}
-          placeholder={labels.filterPlaceholder}
-          className={inputBase}
-        />
-        {clearRow}
-      </div>
-    );
-  }
-
-  if (filter.type === "select") {
-    const v = state.type === "select" ? state : { type: "select" as const, values: [] };
-    const toggle = (val: string) => {
-      const set = new Set(v.values);
-      if (set.has(val)) set.delete(val);
-      else set.add(val);
-      onChange({ type: "select", values: Array.from(set) });
-    };
-    return (
-      <div className="space-y-2">
-        <div className="flex items-center justify-between text-xs text-muted">
-          <span>{labels.selectFilter}</span>
-          <div className="flex gap-1">
-            <button
-              type="button"
-              onClick={() => onChange({ type: "select", values: selectOptions.map((o) => o.value) })}
-              className={buttonBase}
-            >
-              {labels.selectAll}
-            </button>
-            <button type="button" onClick={() => onChange({ type: "select", values: [] })} className={buttonBase}>
-              {labels.selectNone}
-            </button>
-          </div>
-        </div>
-        <ul className="max-h-56 overflow-y-auto rounded border border-subtle">
-          {selectOptions.map((o) => {
-            const checked = v.values.includes(o.value);
-            return (
-              <li key={o.value}>
-                <label className="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover">
-                  <input type="checkbox" checked={checked} onChange={() => toggle(o.value)} className="size-3.5" />
-                  <span className="truncate">{o.label}</span>
-                </label>
-              </li>
-            );
-          })}
-          {selectOptions.length === 0 && <li className="px-2 py-2 text-sm text-muted">—</li>}
-        </ul>
-        {clearRow}
-      </div>
-    );
-  }
-
-  if (filter.type === "date") {
-    const v = state.type === "date" ? state : { type: "date" as const, from: "", to: "" };
-    const set = (from: string, to: string) => onChange({ type: "date", from, to });
-    const presets = dateRangePresets();
-    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;
-    // Side by side, the 7rem preset column leaves a phone's calendar and its two
-    // native date inputs ~180px, which clips "mm/dd/yyyy" mid-placeholder. Below `sm`
-    // the presets wrap as a row above the calendar, which then gets the panel's width.
-    return (
-      <div className="flex flex-col gap-3 sm:flex-row">
-        <ul className="flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap">
-          {presets.map((p) => {
-            const active = isActivePreset(p);
-            return (
-              <li key={p.key}>
-                <button
-                  type="button"
-                  onClick={() => set(p.from, p.to)}
-                  className={cn(
-                    "block rounded px-2 py-1 text-start transition-colors sm:w-full",
-                    active ? "bg-brand-soft text-brand-muted" : "text-secondary hover:bg-hover",
-                  )}
-                >
-                  {labels.presets[p.key] ?? p.key}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-        <div className="min-w-0 flex-1 space-y-2">
-          {/* No `labels` here: the calendar reads `miniCalendar` from the provider
-              itself, which is the only way a calendar nested this deep was ever going
-              to be translated — the table has no prop to forward them through. */}
-          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />
-          <div className="grid grid-cols-2 gap-2">
-            <label className="text-xs text-muted">
-              {labels.dateFrom}
-              <input
-                type="date"
-                value={v.from}
-                onChange={(e) => set(e.target.value, v.to)}
-                className={cn("mt-0.5", inputBase)}
-              />
-            </label>
-            <label className="text-xs text-muted">
-              {labels.dateTo}
-              <input
-                type="date"
-                value={v.to}
-                onChange={(e) => set(v.from, e.target.value)}
-                className={cn("mt-0.5", inputBase)}
-              />
-            </label>
-          </div>
-          {clearRow}
-        </div>
-      </div>
-    );
-  }
-
-  // number
-  const v = state.type === "number" ? state : { type: "number" as const, min: "", max: "", abs: false };
-  // The bounds were native `type="number"` inputs, the one numeric entry in the kit that
-  // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a
-  // comma, a German "12,50" read as empty and the filter silently stayed off while the box
-  // showed the text. A text box with the decimal keyboard now, read as NumberInput reads
-  // (`readTyped`): the state holds the dot-decimal figure, and the box keeps the typist's
-  // own text while it says the same (`showsTyped`), else the bound in the locale's mark.
-  const shown = (bound: "min" | "max") => {
-    const own = typed[bound];
-    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);
-  };
-  const setBound = (bound: "min" | "max", raw: string) => {
-    setTyped((t) => ({ ...t, [bound]: raw }));
-    const read = readTyped(raw, mark);
-    onChange({
-      type: "number",
-      min: bound === "min" ? read : v.min,
-      max: bound === "max" ? read : v.max,
-      abs: v.abs,
-    });
-  };
-  return (
-    <div className="space-y-2">
-      <div className="grid grid-cols-2 gap-2">
-        <label className="text-xs text-muted">
-          {labels.numberMin} (≥)
-          <input
-            type="text"
-            inputMode="decimal"
-            autoComplete="off"
-            value={shown("min")}
-            onChange={(e) => setBound("min", e.target.value)}
-            className={cn("mt-0.5", inputBase)}
-          />
-        </label>
-        <label className="text-xs text-muted">
-          {labels.numberMax} (≤)
-          <input
-            type="text"
-            inputMode="decimal"
-            autoComplete="off"
-            value={shown("max")}
-            onChange={(e) => setBound("max", e.target.value)}
-            className={cn("mt-0.5", inputBase)}
-          />
-        </label>
-      </div>
-      <label className="flex items-center gap-2 text-sm text-secondary">
-        <input
-          type="checkbox"
-          checked={v.abs}
-          onChange={(e) => onChange({ type: "number", min: v.min, max: v.max, abs: e.target.checked })}
-          className="size-3.5"
-        />
-        {labels.numberAbs}
-      </label>
-      {clearRow}
-    </div>
-  );
-}