@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { Check, Minus, X } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+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";
 
@@ -18,7 +18,7 @@ export interface BooleanMarkProps {
   falseAs?: "cross" | "dash";
   /** The spoken words, over `dataTable.booleanTrue` / `booleanFalse` / `booleanUnset`
    *  from `<UiKitProvider labels>`. */
-  labels?: Partial<Pick<DataTableLabels, "booleanTrue" | "booleanFalse" | "booleanUnset">>;
+  labels?: LabelOverride<Pick<DataTableLabels, "booleanTrue" | "booleanFalse" | "booleanUnset">>;
   className?: string;
 }
 
@@ -44,10 +44,10 @@ export function BooleanMark({ value, falseAs = "cross", labels: labelsProp, clas
         className={cn(
           "size-4",
           state === "true"
-            ? "text-[var(--success)]"
+            ? "text-success"
             : state === "false" && falseAs === "cross"
-              ? "text-[var(--text-muted)]"
-              : "text-[var(--text-placeholder)]",
+              ? "text-muted"
+              : "text-placeholder",
         )}
       />
       <span className="sr-only">{text}</span>

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

@@ -0,0 +1,137 @@
+import { useRef } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Tooltip } from "./tooltip";
+import type { DataTableLabels } from "./data-table-labels";
+import { ROW_ACTIONS_KEY } 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,
+  showSettings,
+  setShowSettings,
+  columnsCountLabel,
+  labels,
+  autoSizeAll,
+}: {
+  /** Every column, hidden ones included; the actions column is left out here. */
+  columns: DataTableColumn<T>[];
+  hiddenCols: Set<string>;
+  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
+  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);
+  return (
+    <>
+      <Tooltip label={columnsCountLabel} portal>
+        <button
+          ref={columnsRail}
+          type="button"
+          onClick={() => setShowSettings(true)}
+          aria-label={columnsCountLabel}
+          aria-hidden={showSettings}
+          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>
+      <div
+        // 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}
+        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={() => {
+                  setShowSettings(false);
+                  // Back to the rail that opened it: the X is about to go inert, and
+                  // focus would fall to <body> with it (BUG-7a).
+                  columnsRail.current?.focus();
+                }}
+                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 (col.key === ROW_ACTIONS_KEY) return null;
+              const checked = !hiddenCols.has(col.key);
+              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) => {
+                      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). */}
+                  <span className="min-w-0 truncate-until-large">{headerLabel}</span>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -1,14 +1,16 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
-import { FIELD_TOUCH_TEXT } from "./ui";
+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 { resolveDataTableLabels, type DataTableLabels } from "./data-table-labels";
+import type { DataTableLabels } from "./data-table-labels";
+import { resolveDataTableLabels } from "./data-table-shared";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels";
 
 interface FilterPopoverProps<T> {
@@ -65,21 +67,25 @@ export function FilterPopover<T>({
     },
     [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 in ui.tsx.
+  // is the package's brand focus colour, as on every field (field-base.tsx).
   const inputBase =
-    "block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none " +
+    "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-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+    "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">
@@ -119,7 +125,7 @@ export function FilterPopover<T>({
     };
     return (
       <div className="space-y-2">
-        <div className="flex items-center justify-between text-xs text-[var(--text-muted)]">
+        <div className="flex items-center justify-between text-xs text-muted">
           <span>{labels.selectFilter}</span>
           <div className="flex gap-1">
             <button
@@ -138,12 +144,12 @@ export function FilterPopover<T>({
             </button>
           </div>
         </div>
-        <ul className="max-h-56 overflow-y-auto rounded border border-[var(--border)]">
+        <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-[var(--bg-hover)]">
+                <label className="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover">
                   <input
                     type="checkbox"
                     checked={checked}
@@ -156,7 +162,7 @@ export function FilterPopover<T>({
             );
           })}
           {selectOptions.length === 0 && (
-            <li className="px-2 py-2 text-sm text-[var(--text-muted)]">—</li>
+            <li className="px-2 py-2 text-sm text-muted">—</li>
           )}
         </ul>
         {clearRow}
@@ -185,8 +191,8 @@ export function FilterPopover<T>({
                   className={cn(
                     "block rounded px-2 py-1 text-start transition-colors sm:w-full",
                     active
-                      ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]"
-                      : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+                      ? "bg-brand-soft text-brand-muted"
+                      : "text-secondary hover:bg-hover",
                   )}
                 >
                   {labels.presets[p.key] ?? p.key}
@@ -201,7 +207,7 @@ export function FilterPopover<T>({
               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-[var(--text-muted)]">
+            <label className="text-xs text-muted">
               {labels.dateFrom}
               <input
                 type="date"
@@ -210,7 +216,7 @@ export function FilterPopover<T>({
                 className={cn("mt-0.5", inputBase)}
               />
             </label>
-            <label className="text-xs text-[var(--text-muted)]">
+            <label className="text-xs text-muted">
               {labels.dateTo}
               <input
                 type="date"
@@ -228,33 +234,53 @@ export function FilterPopover<T>({
 
   // 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-[var(--text-muted)]">
+        <label className="text-xs text-muted">
           {labels.numberMin} (≥)
           <input
-            type="number"
+            type="text"
             inputMode="decimal"
-            value={v.min}
-            onChange={(e) => onChange({ type: "number", min: e.target.value, max: v.max, abs: v.abs })}
-            onWheel={(e) => e.currentTarget.blur()}
+            autoComplete="off"
+            value={shown("min")}
+            onChange={(e) => setBound("min", e.target.value)}
             className={cn("mt-0.5", inputBase)}
           />
         </label>
-        <label className="text-xs text-[var(--text-muted)]">
+        <label className="text-xs text-muted">
           {labels.numberMax} (≤)
           <input
-            type="number"
+            type="text"
             inputMode="decimal"
-            value={v.max}
-            onChange={(e) => onChange({ type: "number", min: v.min, max: e.target.value, abs: v.abs })}
-            onWheel={(e) => e.currentTarget.blur()}
+            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-[var(--text-secondary)]">
+      <label className="flex items-center gap-2 text-sm text-secondary">
         <input
           type="checkbox"
           checked={v.abs}

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

@@ -1,4 +1,6 @@
 import type { DataTableColumn } from "./data-table";
+import { toLocalIso } from "../lib/dates";
+import { foldForSearch } from "../lib/text-match";
 
 /** How a column is filtered. `text`/`select`/`date`/`number` each read a value
  *  off the row and compare it against the user's {@link FilterValue}. */
@@ -33,16 +35,49 @@ export function isFilterActive(v: FilterValue | undefined): boolean {
     case "date":
       return !!v.from || !!v.to;
     case "number":
-      return v.min !== "" || v.max !== "" || v.abs;
+      return numberBound(v.min) !== null || numberBound(v.max) !== null || v.abs;
   }
 }
 
+/**
+ * A number filter's bound as a number, or `null` for none: blank, or not a finite
+ * number (BUG-10, refactor audit 2026-10). `Number("abc")` is NaN, and every comparison
+ * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to
+ * match every row while the column showed its filter as active; `Number(" ")` is 0, and
+ * a blank bound kept every negative row out. The popover hands in the dot-decimal text
+ * its locale's marks read (`readTyped`); anything else is no bound.
+ */
+function numberBound(raw: string): number | null {
+  if (raw.trim() === "") return null;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : null;
+}
+
+/**
+ * The calendar day a date filter compares, as "YYYY-MM-DD" — the LOCAL day, the one
+ * the cell, the DatePicker and the presets show (round 0.34 BUG-2).
+ *
+ * A bare "YYYY-MM-DD" is a calendar day already and is kept as it is. Anything with a
+ * time part is an instant: its first ten characters were the UTC day for a server
+ * timestamp ("…Z", "+00:00"), so in Berlin a report filed at 00:30 showed as the 12th
+ * and was filtered as the 11th. It is read as the instant it names and put on the
+ * local calendar. A string `Date` cannot read keeps the old first-ten-characters
+ * answer rather than matching nothing.
+ */
+function localDay(raw: string): string {
+  if (/^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw;
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? raw.slice(0, 10) : toLocalIso(d);
+}
+
 /**
  * Whether `row` passes column `col`'s filter given the user's `state`.
  *
  * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
- * root rules, under which a Turkish user typing "istanbul" does not find "İSTANBUL";
+ * root rules, under which a Turkish user typing "ırmak" does not find "IRMAK";
  * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
+ * The text filter folds as every kit list does ({@link foldForSearch}, DUP-5): accents
+ * off too, so "zurich" finds Zürich.
  */
 export function rowMatches<T>(
   col: DataTableColumn<T>,
@@ -55,10 +90,7 @@ export function rowMatches<T>(
   switch (filter.type) {
     case "text": {
       if (state.type !== "text" || !state.q.trim()) return true;
-      return filter
-        .getValue(row)
-        .toLocaleLowerCase(locale)
-        .includes(state.q.trim().toLocaleLowerCase(locale));
+      return foldForSearch(filter.getValue(row), locale).includes(foldForSearch(state.q.trim(), locale));
     }
     case "select": {
       if (state.type !== "select" || state.values.length === 0) return true;
@@ -68,7 +100,7 @@ export function rowMatches<T>(
       if (state.type !== "date") return true;
       const raw = filter.getValue(row);
       if (!raw) return !state.from && !state.to;
-      const v = raw.slice(0, 10);
+      const v = localDay(raw);
       if (state.from && v < state.from) return false;
       if (state.to && v > state.to) return false;
       return true;
@@ -76,10 +108,12 @@ export function rowMatches<T>(
     case "number": {
       if (state.type !== "number") return true;
       const raw = filter.getValue(row);
-      if (raw == null || Number.isNaN(raw)) return !state.min && !state.max;
+      const min = numberBound(state.min);
+      const max = numberBound(state.max);
+      if (raw == null || Number.isNaN(raw)) return min === null && max === null;
       const x = state.abs ? Math.abs(raw) : raw;
-      if (state.min !== "" && x < Number(state.min)) return false;
-      if (state.max !== "" && x > Number(state.max)) return false;
+      if (min !== null && x < min) return false;
+      if (max !== null && x > max) return false;
       return true;
     }
   }
@@ -165,7 +199,10 @@ export function decodeFilterValueOfType(type: FilterValue["type"], raw: string):
       const abs = body.endsWith("!");
       if (abs) body = body.slice(0, -1);
       const [min = "", max = ""] = body.split("..");
-      return { type: "number", min, max, abs };
+      // A bound that is not a finite number is dropped here, so a broken link leaves the
+      // filter off rather than active and matching everything (BUG-10).
+      const kept = (s: string) => (numberBound(s) === null ? "" : s);
+      return { type: "number", min: kept(min), max: kept(max), abs };
     }
   }
 }