@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/numeric-field.ts

@@ -1,169 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import type { ReactNode, RefObject } from "react";
-import { usePhoneLayout } from "../hooks/use-breakpoint";
-import { useKitLocale } from "../i18n/kit-labels";
-import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks";
-import {
-  mergeDescribedBy,
-  useFieldError,
-  useFieldHint,
-  useLockReason,
-  type FieldHelpProps,
-  type FieldHintParts,
-  type LockReason,
-} from "./field-parts";
-import type { CommitScope } from "./write-lock";
-
-/**
- * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the
- * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's
- * draft and what the field shows, the calculator and the phone's numpad, and the room
- * its end controls take. They were two copies of it, and each fix had to be made twice —
- * some reached only one: NumberInput measured its end controls (keksdose live #367) and
- * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached
- * AmountInput two releases late.
- *
- * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`
- * against NumberInput's "what was typed"), the caller-owned sign, and its trailing
- * controls. Package-private — not re-exported from the barrel.
- */
-
-/** The props both fields take and this engine reads. */
-export interface NumericFieldProps extends FieldHelpProps {
-  /** What names the `help` "?" — "About “<label>”" — with the `aria-label`. */
-  label?: ReactNode;
-  hint?: ReactNode;
-  error?: ReactNode;
-  invalid?: boolean;
-  disabled?: boolean;
-  disabledReason?: ReactNode;
-  commit?: CommitScope;
-  /** Show the desktop calculator trigger. Default `true`. */
-  calculator?: boolean;
-  variant?: "field" | "display";
-  locale?: string;
-  "aria-label"?: string;
-  "aria-describedby"?: string;
-  "aria-invalid"?: boolean | "true" | "false";
-}
-
-export interface NumericFieldOptions {
-  /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and
-   *  `min` / `max`; NumberInput's identity (it never rounds). */
-  settle: (text: string) => string;
-  /** What the field shows while no typed draft stands, dot-decimal, given whether it
-   *  has focus — spelt in the locale's mark here (`derived`). */
-  display: (focused: boolean) => string;
-}
-
-export interface NumericField {
-  /** The write lock: focusable, `readOnly`, nothing changes or commits. */
-  lock: LockReason;
-  locked: boolean;
-  /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */
-  off: boolean;
-  /** The hint, split into the caption under the field and the label line's "?". */
-  hint: FieldHintParts;
-  /** `invalid`, a message, or a form library's `aria-invalid`. */
-  isInvalid: boolean;
-  /** The caller's ids, the caption, a lock's reason, the error — Select's order. */
-  describedBy: string | undefined;
-  /** The message under the field, or `null`. */
-  errorEl: ReactNode;
-  /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */
-  isMobile: boolean;
-  /** `variant="display"`, on a phone. */
-  asDisplay: boolean;
-  showCalc: boolean;
-  showNumpad: boolean;
-  focused: boolean;
-  setFocused: (focused: boolean) => void;
-  /** The locale's decimal mark — the field's `locale`, else the provider's. */
-  mark: "," | ".";
-  /** The typist's own text while a figure is typed, else `null`. */
-  draft: string | null;
-  setDraft: (draft: string | null) => void;
-  /** `display(focused)` in the locale's mark. */
-  derived: string;
-  /** The draft, while it still says what `canonical` (dot-decimal) says and holds
-   *  nothing the field would drop — see `showsTyped`; else `null`. */
-  typedFor: (canonical: string) => string | null;
-  /** A keystroke's raw text: kept as the draft, and read as a number reads it —
-   *  grouping off, dot-decimal. */
-  read: (raw: string) => string;
-  settle: (text: string) => string;
-}
-
-export function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField {
-  const lock = useLockReason(props.commit, props.disabledReason);
-  const locked = lock.locked;
-  // §4: a FieldHint is the caption at Large and on touch, as on every field.
-  // A `help` is the label line's one "?" and turns the hint into the caption (0.36).
-  const hint = useFieldHint(props.hint, props["aria-describedby"], {
-    help: props.help,
-    name: props.label ?? props["aria-label"],
-  });
-  // The standing advice first, the news second: the caller's ids, the caption, the
-  // error — a lock's reason between the last two, as on Select.
-  const field = useFieldError(
-    props.error,
-    props.invalid,
-    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),
-    props["aria-invalid"],
-  );
-  // On phones the OS keyboard is suppressed (`inputMode="none"`) for the kit's numpad
-  // sheet, so the desktop calculator trigger is hidden (feedback #334). A locked field
-  // offers neither: their result would be a value.
-  const isMobile = usePhoneLayout();
-  const [focused, setFocused] = useState(false);
-  const mark = decimalMark(useKitLocale(props.locale));
-  const [draft, setDraft] = useState<string | null>(null);
-  return {
-    lock,
-    locked,
-    off: Boolean(props.disabled) && !locked,
-    hint,
-    isInvalid: field.isInvalid,
-    describedBy: field.describedBy,
-    errorEl: field.errorEl,
-    isMobile,
-    asDisplay: isMobile && props.variant === "display",
-    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,
-    showNumpad: isMobile && !props.disabled && !locked && focused,
-    focused,
-    setFocused,
-    mark,
-    draft,
-    setDraft,
-    derived: localizeMark(display(focused), mark),
-    typedFor: (canonical) => (draft !== null && showsTyped(draft, mark, canonical) ? draft : null),
-    read: (raw) => {
-      setDraft(raw);
-      return readTyped(raw, mark);
-    },
-    settle,
-  };
-}
-
-/**
- * The measured width of a field's end controls (keksdose live #367), and the ref for
- * their track: `null` before the first measurement and wherever there is no layout
- * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once
- * on `observe`, and again whenever the controls change size (a chip's code, a translated
- * label, the text size). A pair, so the width reads as the plain number it is.
- */
-export function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null] {
-  const ref = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState<number | null>(null);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!present || !el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      const measured = el.getBoundingClientRect().width;
-      setWidth(measured > 0 ? Math.ceil(measured) : null);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [present]);
-  return [ref, width];
-}

package/src/components/numpad-sheet.tsx

@@ -1,285 +0,0 @@
-import { createPortal } from "react-dom";
-import { Delete } from "lucide-react";
-import { useMemo } from "react";
-import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { FOCUS_RING } from "./focus-ring";
-import { useDismissLayer } from "../hooks/use-dismiss";
-import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc";
-import { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from "../i18n/kit-labels";
-
-/**
- * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to
- * the desktop {@link CalculatorButton} popover, and the replacement for the old
- * under-the-field operator bar (`MathKeys`, feedback #334).
- *
- * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA
- * cannot — but it CAN suppress the OS keyboard with `inputMode="none"` on the
- * host field and paint its own keypad in the freed space. So the host input keeps
- * real focus/caret/selection + the existing value/commit contract, while this
- * sheet drives it: digits + operators + a live `= …` preview, evaluated through
- * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the
- * native keyboard and the calculator popover); the host gates this to mobile.
- *
- * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —
- * the field text is the single source of truth. `onPointerDown` preventDefault on
- * the root keeps the host input focused (caret stays, keyboard stays hidden) as
- * the user taps keys; the buttons' `onClick` still fires.
- */
-/** Names for the pad itself and its four non-digit keys. The first four are
- *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —
- *  the brand-filled primary button — and it was a hardcoded English literal while
- *  its three neighbours each took an override, so a German phone showed "Done"
- *  among German labels with no prop able to change it. */
-export interface NumberPadSheetLabels extends Partial<CalculatorLabels> {
-  /** The pad's own name — the `calculator.panel` key under its older name here. */
-  pad?: string;
-  backspace?: string;
-  clear?: string;
-  equals?: string;
-  /** Visible text on the primary key, not an `aria-label`. */
-  done?: string;
-}
-
-type PadKey = { kind: "ins"; label: string; ins: string; accent?: boolean; name?: PadKeyName } | { kind: "back" };
-
-/** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */
-type PadKeyName = "plus" | "minus" | "times" | "divide" | "decimal";
-
-// Insert chars `sanitizeLive` keeps as they are (`× ÷` and ASCII `+ - * /`; it maps the
-// unicode minus `−` to "-" since 0.51.7, INP-3), so minus inserts the ASCII "-" its
-// field shows while the key shows the nicer glyph. The evaluator normalises `× ÷` back
-// to `* /`.
-const PAD_KEYS: PadKey[] = [
-  { kind: "ins", label: "7", ins: "7" },
-  { kind: "ins", label: "8", ins: "8" },
-  { kind: "ins", label: "9", ins: "9" },
-  { kind: "ins", label: "÷", ins: "÷", accent: true, name: "divide" },
-  { kind: "ins", label: "4", ins: "4" },
-  { kind: "ins", label: "5", ins: "5" },
-  { kind: "ins", label: "6", ins: "6" },
-  { kind: "ins", label: "×", ins: "×", accent: true, name: "times" },
-  { kind: "ins", label: "1", ins: "1" },
-  { kind: "ins", label: "2", ins: "2" },
-  { kind: "ins", label: "3", ins: "3" },
-  { kind: "ins", label: "−", ins: "-", accent: true, name: "minus" },
-  { kind: "ins", label: ".", ins: ".", name: "decimal" },
-  { kind: "ins", label: "0", ins: "0" },
-  { kind: "back" },
-  { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" },
-];
-
-/** Every key's shape — including the thing this pad used to delete without replacing.
- *
- *  `focus:outline-none` alone is not a style choice, it is the removal of the only
- *  signal a keyboard user has; on a 4×4 grid of identical tiles it leaves no way at all
- *  to tell which key Enter is about to press (the audit's §a11y, and the same defect as
- *  the dropdown search box).
- *
- *  `focus-visible` and `ring-inset`, for the two reasons {@link ToggleGroup} already
- *  writes down. This is a touch control first, and a plain `focus:` ring paints itself
- *  on every TAP, because a tap focuses the button. And the keys sit 6px apart, which is
- *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the
- *  ring inside the key it describes.
- *
- *  --brand rather than --border-strong: the operator keys are filled with a step of the
- *  ink, and a ring in the colour of the thing it surrounds is not an indicator. */
-const PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;
-// Digits on the well, operators a step down on `--bg-active`, each pressing toward the
-// other. `--bg-active`, not `--border` (0.33, docs/colour-roles-harmonization.md §12.9):
-// More contrast steps the border until it is a 3:1 LINE, and as a fill under the label
-// that left 2.7–3.3:1; `--bg-active` carries the ink at 7:1 and up at both levels.
-const PAD_DIGIT = "bg-surface-2 text-primary active:bg-active";
-const PAD_ACCENT = "bg-active text-primary active:bg-surface-2";
-
-export function NumberPadSheet({
-  value,
-  onChange,
-  onDone,
-  label,
-  labels,
-  decimalMark = ".",
-  onResult,
-}: {
-  value: string;
-  /** Fired with the raw (sanitised) field text on every key — same contract as
-   * the host field's own `onChange`. */
-  onChange: (value: string) => void;
-  /** The glyph on the decimal key — "," where the host shows a comma (AmountInput
-   *  in fr-CH, kastlan 40). With "," the key inserts a comma and the text is handed
-   *  back unsanitized, for the host to read by its locale (keksdose G1). */
-  decimalMark?: "." | ",";
-  /** "=": the evaluated result, dot-decimal. Default `onChange`. A host that reads
-   *  typed text by the locale's marks takes it apart from keystrokes, since a result
-   *  like "1.234" is a decimal and never a grouped thousand. */
-  onResult?: (value: string) => void;
-  /** Fired on "Done": the host blurs the input, which commits (evaluates) and
-   * unmounts the sheet via its existing blur handler. */
-  onDone: () => void;
-  /** Optional field label, echoed in the sheet header so the user still knows
-   * which field they're editing when the sheet covers it. */
-  label?: ReactNode;
-  /** Names for the pad itself and its non-digit keys — screen-reader names, except
-   * `done`, which is the visible text on the primary key. Merged over `calculator`
-   * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,
-   * on a phone, and one translation covers both. Digits need no name — their glyph
-   * IS the name; the operators do (see {@link CalculatorLabels.plus}). */
-  labels?: NumberPadSheetLabels;
-}) {
-  // `pad` is this sheet's older spelling of `panel`, so it is folded in as that.
-  const fromProps = useMemo(() => {
-    if (!labels) return undefined;
-    const { pad, ...rest } = labels;
-    return pad === undefined ? rest : { ...rest, panel: pad };
-  }, [labels]);
-  const text = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
-
-  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live
-  // #317: *"Background not scrollable when the amount input calculator field is
-  // open"*).
-  //
-  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and
-  // exists only because a PWA cannot swap the system keyboard for its own — so it
-  // suppresses the OS keyboard with `inputMode="none"` and paints itself in the
-  // freed space. An OS keyboard does not freeze the page behind it; it takes the
-  // bottom of the screen and leaves you free to scroll what is left, which is how
-  // you reach the field you are typing into when the keys cover it.
-  //
-  // Locking here made the page unreachable at exactly the moment it matters most:
-  // correcting a receipt total against the running line sum, where the figure you
-  // are comparing against sits below the keypad. The other four holders of that
-  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable
-  // row dialog — and they stay locked, because for them the page behind is not
-  // part of the task.
-  //
-  // The pad still does not scroll ITSELF away under a stray drag: the root's
-  // `onPointerDown` preventDefault (below) keeps the host input focused and eats
-  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.
-
-  // ── NO focus trap either, and for a harder reason than the scroll lock ────────
-  //
-  // Wave 3 put `useFocusTrap` on every overlay in this package. This one is the
-  // exception, and it is not an oversight to be tidied up later: a trap here would
-  // DELETE THE COMPONENT IT WAS PROTECTING. Both hosts render the pad with
-  // `showNumpad = isMobile && !disabled && focused`, where `focused` is the host
-  // input's own focus state. Moving focus into the pad blurs that input, the host
-  // sets `focused` false, and the pad unmounts — on mount, before a single key can be
-  // pressed. The blur also COMMITS, so the trap would evaluate a half-typed
-  // expression on the way out.
-  //
-  // That is the contract, not an accident of it. This sheet exists because a PWA
-  // cannot swap the system keyboard for its own: the host keeps real focus, caret and
-  // selection while `inputMode="none"` suppresses the OS keys, and the root's
-  // `onPointerDown` preventDefault below is there for the same reason. The pad is
-  // `role="group"`, not a dialog. A keyboard does not trap focus; it is what you type
-  // WITH.
-  //
-  // What was genuinely missing is a way OUT that is not a tap. A layer on the kit's
-  // Escape stack and not a handler on the sheet, because the sheet never has the focus
-  // a keydown would bubble from — the host does, and the host is not this component.
-  // Escape does what the Done key does rather than cancelling, because committing on
-  // blur is the host's contract and a cancel would have to be the host's to offer.
-  //
-  // Inside a `Modal` the pad opened over the dialog, so the stack hands the first
-  // Escape to the pad and the next to the dialog (Wave 2, DUP-1). It used to be the
-  // other way round, written down here as the limit: the dialog's own handler stopped
-  // the key before a document listener saw it, and the press closed the dialog.
-  useDismissLayer(true, onDone);
-
-  const result = evaluateExpression(value);
-  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : "";
-
-  // With a "," mark the host keeps the typist's own text (AmountInput, keksdose G1):
-  // the key inserts the comma it shows, and the host, not this pad, decides which mark
-  // is the decimal one — sanitizing here would fold a grouping "." into a decimal.
-  const insert = (ch: string) =>
-    onChange(decimalMark === "," ? value + (ch === "." ? "," : ch) : sanitizeLive(value + ch));
-  const backspace = () => onChange(value.slice(0, -1));
-  const clearAll = () => onChange("");
-  const equals = () => {
-    if (result !== null) (onResult ?? onChange)(formatResult(result));
-  };
-
-  const sheet = (
-    <div
-      role="group"
-      aria-label={text.panel}
-      // A kit layer, and the bottom layer a docked tour card stays clear of (0.50,
-      // docs/tours-harmonization.md §11.6).
-      data-kit-layer=""
-      data-tour-obstruction=""
-      // Keep the host input focused when tapping the pad: preventDefault on
-      // pointerdown blocks the focus/blur, while the buttons' click still fires.
-      onPointerDown={(e) => e.preventDefault()}
-      className="fixed inset-x-0 bottom-0 z-50 border-t border-subtle bg-surface px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]"
-      style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
-    >
-      {/* Header display: which field + the running expression and live result, so
-          the value stays visible even when the sheet covers the field. */}
-      <div className="flex items-end justify-between gap-3 px-2 pb-2">
-        {label != null && <span className="truncate pb-1 text-xs font-medium text-money-neutral">{label}</span>}
-        {/* At the logical end, opposite the label; the figures themselves stay
-            left-to-right and right-aligned, like the desktop calculator's. */}
-        <div className="ms-auto min-w-0">
-          <div dir="ltr" className="truncate text-right font-mono text-lg leading-tight text-primary">
-            {value || "0"}
-          </div>
-          <div dir="ltr" className="h-4 text-right font-mono text-xs text-money-neutral">
-            {preview}
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-4 gap-1.5">
-        {PAD_KEYS.map((key, i) =>
-          key.kind === "back" ? (
-            <button
-              key="back"
-              type="button"
-              aria-label={text.backspace}
-              onClick={backspace}
-              className={cn(PAD_BTN, PAD_ACCENT)}
-            >
-              <Delete className="size-5" />
-            </button>
-          ) : (
-            <button
-              key={`${key.ins}-${i}`}
-              type="button"
-              aria-label={key.name ? text[key.name] : key.label}
-              onClick={() => insert(key.ins)}
-              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}
-            >
-              {key.kind === "ins" && key.name === "decimal" ? decimalMark : key.label}
-            </button>
-          ),
-        )}
-      </div>
-
-      <div className="mt-1.5 grid grid-cols-4 gap-1.5">
-        <button type="button" aria-label={text.clear} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>
-          C
-        </button>
-        <button type="button" aria-label={text.equals} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>
-          =
-        </button>
-        <button
-          type="button"
-          onClick={onDone}
-          // The one key whose own fill is --brand, so it rings in the colour that fill
-          // was chosen to be legible against instead (tailwind-merge keeps the later
-          // ring colour). A --brand ring here would be present in the DOM and invisible
-          // on screen, which is the defect this change exists to fix.
-          className={cn(
-            PAD_BTN,
-            "col-span-2 bg-brand text-brand-contrast focus-visible:ring-brand-contrast active:bg-brand-hover",
-          )}
-        >
-          {text.done}
-        </button>
-      </div>
-    </div>
-  );
-
-  return createPortal(sheet, document.body);
-}