@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/hover-menu.tsx

@@ -1,343 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { mergeRefs } from "./field-parts";
-import { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
-import { anchoredInline } from "../hooks/use-anchored-panel";
-import { dirOf } from "../lib/direction";
-
-/**
- * Exported and `<div>`-shaped: the top bar composes several of these side by side, and
- * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an
- * attribute the kit does not know about. A closed prop list dropped every one of them.
- *
- * `children` is omitted from the div attributes because here it is a render prop taking
- * the panel's `close`, not a `ReactNode`.
- */
-export interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-  /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —
-   *  following it should shut a panel hover opened (TopBarActionMenu `href`). */
-  trigger: (state: { open: boolean; toggle: () => void; close: () => void }) => ReactNode;
-  /** The menu's rows. `close` shuts the menu and, when focus is in it, puts focus on the
-   *  trigger before returning — so a dialog the same handler opens gives it back there
-   *  (0.52). */
-  children: (close: () => void) => ReactNode;
-  /**
-   * Which edge of the trigger the panel lines up with, by the reading direction: `end`
-   * is the right edge in LTR and the left in RTL. Default `end` — the same right-aligned
-   * panel as before in LTR, mirrored in RTL. The physical `left` / `right` went in 0.35
-   * (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a left-to-right
-   * page, `left` is `start`.
-   */
-  align?: "start" | "end";
-  panelClassName?: string;
-  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */
-  className?: string;
-  /** The WRAPPER, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
-   *  merged with its own ref, which the outside click and the hover are measured on. */
-  ref?: Ref<HTMLDivElement>;
-}
-
-// Hovering waits briefly before opening so sweeping the cursor across a row of
-// triggers doesn't flash menus; closing waits so the cursor can travel from
-// trigger to panel. Click/keyboard toggling is instant (no "opening" phase).
-const OPEN_DELAY_MS = 120;
-const CLOSE_DELAY_MS = 120;
-
-type Phase = "closed" | "opening" | "open" | "closing";
-
-const ALIGN_CLASS = { start: "start-0", end: "end-0" } as const;
-
-/** Explicit menu-item roles a caller may already have written. */
-const ITEM_ROLES = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
-/** What the panel promotes to `menuitem` when the caller wrote plain controls. */
-const PLAIN_ITEMS = "button:not([role]),a[href]:not([role])";
-/** The trigger: the first focusable in the wrapper that is not inside the panel. */
-const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])';
-
-/**
- * Give the caller's markup menu semantics.
- *
- * `children` is arbitrary — every caller in the kit renders a `<ul>` of `<li>`s holding
- * `<button>`s and router `<Link>`s — so the panel was a `role="menu"` whose children
- * were a list, list items and plain buttons: no `menuitem` anywhere, which is a menu
- * with nothing in it as far as a screen reader is concerned. Rather than make every
- * caller rewrite its rows, the panel upgrades them after render: controls become
- * `menuitem`s out of the Tab order (the arrow keys move between them), and the list
- * markup in between becomes `role="none"` so the menu owns its items directly. An
- * element that already carries a role is the caller's decision and is left alone.
- */
-function applyMenuSemantics(menu: HTMLElement): HTMLElement[] {
-  for (const el of menu.querySelectorAll<HTMLElement>(PLAIN_ITEMS)) el.setAttribute("role", "menuitem");
-  const items = Array.from(menu.querySelectorAll<HTMLElement>(ITEM_ROLES));
-  for (const item of items) {
-    item.setAttribute("tabindex", "-1");
-    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {
-      if (!el.hasAttribute("role")) el.setAttribute("role", "none");
-    }
-  }
-  for (const el of menu.querySelectorAll<HTMLElement>("ul:not([role]),ol:not([role]),li:not([role])")) {
-    el.setAttribute("role", "none");
-  }
-  return items.filter((el) => !el.hasAttribute("disabled") && el.getAttribute("aria-disabled") !== "true");
-}
-
-// Only one hover menu may show its panel at a time across the app — opening
-// one closes whichever was open, so adjacent top-bar menus can't overlap
-// (feedback #251). Module-level is fine: there is one cursor per document.
-let activeClose: (() => void) | null = null;
-
-export function HoverMenu({
-  trigger,
-  children,
-  align = "end",
-  panelClassName,
-  className,
-  "aria-label": ariaLabel,
-  ref,
-  ...rest
-}: HoverMenuProps) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const setWrapper = useMemo(() => mergeRefs(wrapperRef, ref), [ref]);
-  const [phase, setPhase] = useState<Phase>("closed");
-  const open = phase === "open" || phase === "closing";
-
-  // Whether the panel is open *because hover opened it*, vs. an explicit
-  // click/keyboard toggle. A real mouse click on the trigger is always
-  // preceded by a real mouseenter — the cursor has to land on the button
-  // before it can be clicked — so once hover has opened the panel, the click
-  // that inevitably follows is the same physical gesture, not a request to
-  // close what was just opened (feedback #19). Toggling closed on click stays
-  // for keyboard/touch activation, which reaches "open" without going through
-  // the hover path.
-  //
-  // State rather than a ref: `close` is handed to the caller's render prop, and a
-  // function that writes a ref must not be reachable from render.
-  const [openedByHover, setOpenedByHover] = useState(false);
-
-  const close = useCallback(() => {
-    setOpenedByHover(false);
-    setPhase("closed");
-  }, []);
-
-  const toggle = useCallback(() => {
-    if (open) {
-      if (!openedByHover) setPhase("closed");
-      return;
-    }
-    setOpenedByHover(false);
-    setPhase("open");
-  }, [open, openedByHover]);
-
-  const handleMouseEnter = useCallback(
-    () => setPhase((p) => (p === "closing" ? "open" : p === "closed" ? "opening" : p)),
-    [],
-  );
-
-  const handleMouseLeave = useCallback(
-    () => setPhase((p) => (p === "opening" ? "closed" : p === "open" ? "closing" : p)),
-    [],
-  );
-
-  // Drive the delayed transitions; unmount/phase changes cancel the timer.
-  useEffect(() => {
-    if (phase === "opening") {
-      const id = setTimeout(() => {
-        setOpenedByHover(true);
-        setPhase("open");
-      }, OPEN_DELAY_MS);
-      return () => clearTimeout(id);
-    }
-    if (phase === "closing") {
-      const id = setTimeout(() => setPhase("closed"), CLOSE_DELAY_MS);
-      return () => clearTimeout(id);
-    }
-  }, [phase]);
-
-  // Claim the "active menu" slot while our panel is visible, closing the
-  // previous holder. Cleanup releases the slot only if we still hold it
-  // (a successor that displaced us has already overwritten it).
-  useEffect(() => {
-    if (!open) return;
-    if (activeClose !== close) activeClose?.();
-    activeClose = close;
-    return () => {
-      if (activeClose === close) activeClose = null;
-    };
-  }, [open, close]);
-
-  // A press in a panel opened from a row (a popover, its lists) is inside (dev#623).
-  const markInside = useOutsideClick(wrapperRef, close, open);
-
-  const menuRef = useRef<HTMLDivElement>(null);
-  /** Set by a keyboard press on the trigger, so the open that follows moves focus into
-   *  the menu. A hover or a mouse click opens it without taking focus off the page. */
-  const focusOnOpenRef = useRef<"first" | "last" | null>(null);
-
-  const triggerEl = () =>
-    Array.from(wrapperRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []).find(
-      (el) => !menuRef.current?.contains(el),
-    ) ?? null;
-  const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);
-
-  // Focus goes back to the trigger only when it was inside the menu: a panel opened by
-  // hover while the user is typing elsewhere must not yank the caret over here on the
-  // way out. At once, not after the commit: a row that closes the menu and opens a dialog
-  // in one handler has the dialog record its restore target during that commit's render,
-  // and the row it would record is about to go (refactor audit 2026-10-30, INP-2).
-  const closeToTrigger = () => {
-    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;
-    close();
-    if (hadFocus) triggerEl()?.focus();
-  };
-  // Escape closes, from anywhere — it did nothing at all before — as a layer on the kit's
-  // Escape stack, so inside a dialog it closes the menu and not the dialog (Wave 2,
-  // DUP-1).
-  const layer = useDismissLayer(open, closeToTrigger);
-
-  // Upgrade the markup every render while open (the caller's rows can change), then
-  // honour a pending keyboard open.
-  useLayoutEffect(() => {
-    if (!open) return;
-    const list = items();
-    const want = focusOnOpenRef.current;
-    focusOnOpenRef.current = null;
-    if (want) (want === "last" ? list[list.length - 1] : list[0])?.focus();
-  });
-
-  // Trigger state for assistive technology, on whatever element the caller rendered.
-  // Only where the caller has not said something of its own.
-  useLayoutEffect(() => {
-    const el = triggerEl();
-    if (!el) return;
-    if (!el.hasAttribute("aria-haspopup")) el.setAttribute("aria-haspopup", "menu");
-    if (el.getAttribute("aria-haspopup") === "menu") el.setAttribute("aria-expanded", String(open));
-  });
-
-  /** ↑/↓ roving focus with wrap, Home/End, Tab leaves (and closes); on the trigger,
-   *  Enter/Space/↓ open onto the first item and ↑ onto the last. */
-  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
-    const target = e.target as HTMLElement;
-    const inMenu = menuRef.current?.contains(target) ?? false;
-    if (!inMenu) {
-      if (target !== triggerEl()) return;
-      if (e.key === "Enter" || e.key === " ") {
-        // The trigger's own click handler does the toggling; this only records that
-        // the press came from a keyboard. Not for a link trigger: Enter follows it, and
-        // a mark left here would pull focus into the panel the next time hover opens it.
-        if (!open && !target.matches("a[href]")) focusOnOpenRef.current = "first";
-      } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        e.preventDefault();
-        const edge = e.key === "ArrowDown" ? "first" : "last";
-        if (open) {
-          const list = items();
-          (edge === "last" ? list[list.length - 1] : list[0])?.focus();
-        } else {
-          focusOnOpenRef.current = edge;
-          setOpenedByHover(false);
-          setPhase("open");
-        }
-      }
-      return;
-    }
-    if (e.key === "Tab") {
-      close();
-      return;
-    }
-    const list = items();
-    if (list.length === 0) return;
-    const at = list.indexOf(document.activeElement as HTMLElement);
-    let next: number | null = null;
-    if (e.key === "ArrowDown") next = at < 0 ? 0 : (at + 1) % list.length;
-    else if (e.key === "ArrowUp") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;
-    else if (e.key === "Home") next = 0;
-    else if (e.key === "End") next = list.length - 1;
-    if (next === null) return;
-    e.preventDefault();
-    list[next].focus();
-  };
-
-  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a
-  // trigger near a screen edge would otherwise spill off it (on mobile the guided-
-  // tours menu ran off the left). Once open, measure and translate it horizontally
-  // just enough to sit within an 8px margin of the GLASS — `anchoredInline` against
-  // the panel's own natural box, as every anchored panel clamps (Wave 2, DUP-7; it
-  // measured against `innerWidth`, which on a phone is the grown layout viewport).
-  // Recomputed on each open; `shiftX` is subtracted first so the measurement is
-  // against the natural position.
-  const panelRef = useRef<HTMLDivElement>(null);
-  const [shiftX, setShiftX] = useState(0);
-  // Back to 0 on close, adjusted while rendering against the previous `open`.
-  const [wasOpen, setWasOpen] = useState(open);
-  if (open !== wasOpen) {
-    setWasOpen(open);
-    if (!open) setShiftX(0);
-  }
-  useLayoutEffect(() => {
-    if (!open) return;
-    const el = panelRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is
-    const natural = { left: rect.left - shiftX, right: rect.right - shiftX };
-    const { left } = anchoredInline(natural, rect.width, { dir: dirOf(el), align: "left" });
-    setShiftX(left - natural.left);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close
-  }, [open]);
-
-  return (
-    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused
-       itself: the mouse handlers are the hover-to-open convenience, and `onKeyDown`
-       catches keys bubbling from the caller's trigger button and the menuitems, which
-       are the keyboard path (Enter/Space/arrows open, arrows move, Escape closes). */
-    <div
-      // `...rest` first: the hover handlers below are the whole component, and a caller
-      // passing one of its own must not silently replace them.
-      {...rest}
-      ref={setWrapper}
-      className={cn("relative", className)}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onPointerDownCapture={(e) => {
-        rest.onPointerDownCapture?.(e);
-        markInside(e);
-      }}
-      onKeyDown={(e) => {
-        // The caller's handler sees Escape only while this menu is the layer on top: a
-        // tooltip on one of its rows takes that press first (round 0.35 R2, the rule
-        // the dialogs got first). Every other key, and a closed menu's, as before.
-        runOwnKeyDown(e, rest.onKeyDown, layer);
-        // Focus on the trigger or in the menu: the key stops here, so a panel around
-        // the menu does not close with it.
-        if (open) takeEscape(e);
-        onKeyDown(e);
-      }}
-    >
-      {trigger({ open, toggle, close })}
-      {open && (
-        <div
-          ref={panelRef}
-          className={cn("absolute top-full z-40 pt-2", ALIGN_CLASS[align])}
-          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}
-        >
-          <div
-            ref={menuRef}
-            role="menu"
-            // On the element with the role. It used to sit on the role-less wrapper,
-            // where no screen reader reads a name.
-            aria-label={ariaLabel}
-            className={cn(
-              "min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-subtle bg-surface shadow-lg",
-              panelClassName,
-            )}
-          >
-            {
-              // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering
-              children(closeToTrigger)
-            }
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/iban-input-labels.ts

@@ -1,14 +0,0 @@
-// The English words of ./iban-input, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./iban-input re-exports them.
-
-import type { IbanInputLabels } from "./iban-input";
-
-export const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels = {
-  format: "An IBAN starts with a two-letter country code and two check digits.",
-  country: (code) => `“${code}” is not the country code of an IBAN.`,
-  length: (actual, expected) => `An IBAN from this country has ${expected} characters — this one has ${actual}.`,
-  checksum: "The check digits don’t match — a character is probably mistyped.",
-  qrRequired: "This is a regular IBAN. A QR-bill needs the account’s QR-IBAN.",
-  qrNotAllowed: "This is a QR-IBAN, which only receives QR-bill payments. Enter the account’s regular IBAN.",
-};

package/src/components/iban-input.tsx

@@ -1,236 +0,0 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import type { ChangeEvent, FocusEvent, ReactNode } from "react";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { cn } from "../lib/cn";
-import { IBAN_LENGTHS, compactIban, formatIban, ibanProblem } from "../lib/iban";
-import type { IbanKind, IbanProblem } from "../lib/iban";
-import { hasContent } from "../lib/presence";
-import { assignRef } from "./field-parts";
-import { Input, type InputProps } from "./input";
-import { DEFAULT_IBAN_INPUT_LABELS } from "./iban-input-labels";
-
-// ── Labels ────────────────────────────────────────────────────────────────────
-
-/** The messages {@link IbanInput} shows under itself, one per {@link IbanProblem}. */
-export interface IbanInputLabels {
-  /** The value does not start with a two-letter country code and two check digits. */
-  format: string;
-  /** The first two letters are no country in the IBAN registry. `code` is those two
-   *  letters, as typed (upper case). */
-  country: (code: string) => string;
-  /** The wrong length for the country: `actual` characters typed, `expected` for that
-   *  country (spaces not counted in either). */
-  length: (actual: number, expected: number) => string;
-  /** The mod-97 check digits do not match — a mistyped or swapped character. */
-  checksum: string;
-  /** `kind="qr"`: a valid IBAN, but not a QR-IBAN. */
-  qrRequired: string;
-  /** `kind="plain"`: a QR-IBAN, which cannot receive an ordinary transfer. */
-  qrNotAllowed: string;
-}
-
-// Defined in ./iban-input-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_IBAN_INPUT_LABELS };
-
-/**
- * The `ibanInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).
- */
-function useIbanInputLabels(prop: Partial<IbanInputLabels> | undefined): IbanInputLabels {
-  const labels: IbanInputLabels = useKitLabels("ibanInput", DEFAULT_IBAN_INPUT_LABELS, prop);
-  return labels;
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-const alnumCount = (text: string) => text.replace(/[^0-9A-Za-z]/g, "").length;
-
-/** The index just after the `count`-th letter or digit of `text` — where the caret
- *  goes once the grouping has moved the characters it was between. */
-function indexAfter(text: string, count: number): number {
-  if (count <= 0) return 0;
-  let seen = 0;
-  for (let i = 0; i < text.length; i++) {
-    if (/[0-9A-Za-z]/.test(text[i])) seen += 1;
-    if (seen === count) return i + 1;
-  }
-  return text.length;
-}
-
-/**
- * The problem worth SHOWING right now. Settled (not focused): whatever is wrong. While
- * typing: only what more typing cannot fix — a broken start or an unknown country from
- * the fourth character, and the rest once the country's full length is there. A
- * half-typed IBAN is not wrong, and a field that says "wrong length" from the first
- * keystroke is a field people learn to ignore.
- */
-function visibleProblem(compact: string, kind: IbanKind, focused: boolean): IbanProblem | null {
-  if (compact === "") return null;
-  const problem = ibanProblem(compact, kind);
-  if (problem === null || !focused) return problem;
-  if (compact.length < 4) return null;
-  if (problem === "format" || problem === "country") return problem;
-  return compact.length >= IBAN_LENGTHS[compact.slice(0, 2)]! ? problem : null;
-}
-
-function messageFor(problem: IbanProblem, compact: string, labels: IbanInputLabels): string {
-  switch (problem) {
-    case "format":
-      return labels.format;
-    case "country":
-      return labels.country(compact.slice(0, 2));
-    case "length":
-      return labels.length(compact.length, IBAN_LENGTHS[compact.slice(0, 2)]!);
-    case "checksum":
-      return labels.checksum;
-    case "qrRequired":
-      return labels.qrRequired;
-    case "qrNotAllowed":
-      return labels.qrNotAllowed;
-  }
-}
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-export interface IbanInputProps extends Omit<InputProps, "type" | "value" | "defaultValue"> {
-  /** The IBAN, compact or not — it is shown in groups of four either way. `""` is
-   *  "no IBAN". */
-  value: string;
-  /** The compact, upper-case IBAN (the electronic format, what to store) on every
-   *  change — valid or not: a half-typed IBAN is still the field's value. Plain
-   *  `onChange` still fires alongside it with the raw event, whose text is the GROUPED
-   *  one, so bind this rather than `onChange` to a form. */
-  onValueChange?: (value: string) => void;
-  /** Which IBANs the field accepts. Default `"any"`. `"qr"` / `"plain"`: see
-   *  {@link IbanKind} — and why the difference matters, {@link isQrIban}. */
-  kind?: IbanKind;
-  /** The messages, per field. See {@link IbanInputLabels}. */
-  labels?: LabelOverride<IbanInputLabels>;
-  /** The caller's own message, shown INSTEAD of the built-in one while it is set (a
-   *  server's "this account is already on file"). `null`, `false` and `""` are no
-   *  message, so `touched && errors.iban` can be passed as it is. */
-  error?: ReactNode;
-}
-
-/**
- * An IBAN field (kastlan, keksdose): typed in any shape, shown in groups of four,
- * reported compact.
- *
- * Both apps had a text field and a regex. What that left out is everything between
- * the keyboard and the stored value: a pasted "ch09 0000-0000…" stayed lower case
- * with its hyphens, the grouping that makes 21 characters checkable by eye was
- * missing, and a wrong IBAN was found out by the bank. Here:
- *
- *  - **Grouped as you type.** The field shows the paper format ({@link formatIban});
- *    spaces, hyphens and lower case in what is typed or pasted are folded away, and
- *    the caret stays between the same two characters while the groups move around it.
- *  - **Compact out.** `onValueChange` gets the electronic format — upper case, no
- *    spaces — which is the one to store and to compare.
- *  - **Checked, never blocked.** A wrong country, length or checksum shows a message
- *    under the field, through the kit's `error` (so it is the field's
- *    `aria-describedby` and paints it), but every keystroke still lands: a field that
- *    refuses characters cannot be corrected one character at a time. While the field
- *    has focus only what more typing cannot fix is shown; the rest waits for the full
- *    length or for blur. Whether the field is REQUIRED stays the form's rule — an empty
- *    field says nothing.
- *  - **QR-IBAN or not** (kastlan): `kind="qr"` refuses a regular IBAN and
- *    `kind="plain"` refuses a QR-IBAN — a QR-bill can only be paid to a QR-IBAN, and a
- *    QR-IBAN can receive nothing else. See {@link isQrIban}.
- *
- * It is {@link Input} underneath, so `label`, `hint`, `error`, `invalid` and the rest
- * are Input's own and the field reads like every other. A form that must not submit
- * an invalid IBAN checks {@link isValidIban} / {@link ibanProblem} itself — the field
- * shows the problem but does not own the submit.
- */
-export function IbanInput({
-  // The `<input>` (InputProps'): a React 19 ref prop since 0.34 (MOD-4, refactor audit
-  // 2026-10), where this was `forwardRef`.
-  ref,
-  value,
-  onValueChange,
-  onChange,
-  onFocus,
-  onBlur,
-  kind = "any",
-  labels,
-  error,
-  inputClassName,
-  ...rest
-}: IbanInputProps) {
-  const text = useIbanInputLabels(labels);
-  const compact = compactIban(value);
-  const shown = formatIban(compact);
-  const [focused, setFocused] = useState(false);
-  const innerRef = useRef<HTMLInputElement | null>(null);
-  // Letters and digits before the caret, kept across the re-render that regroups.
-  const caretRef = useRef<number | null>(null);
-  const setRefs = useCallback(
-    (el: HTMLInputElement | null) => {
-      innerRef.current = el;
-      assignRef(ref, el);
-    },
-    [ref],
-  );
-
-  // Every render: when a change moved the groups, put the caret back after the same
-  // character it followed. Only while focused — a value set from outside moves nothing.
-  useLayoutEffect(() => {
-    const el = innerRef.current;
-    const count = caretRef.current;
-    if (el === null || count === null) return;
-    caretRef.current = null;
-    if (el.ownerDocument.activeElement !== el) return;
-    const at = indexAfter(el.value, count);
-    el.setSelectionRange(at, at);
-  });
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    onChange?.(e);
-    const el = e.target;
-    const raw = el.value;
-    const next = compactIban(raw);
-    // Characters compactIban dropped from the front (a pasted "IBAN " label) are not
-    // in the value, so they are not counted before the caret either.
-    const dropped = alnumCount(raw) - next.length;
-    const count = Math.max(0, alnumCount(raw.slice(0, el.selectionStart ?? raw.length)) - dropped);
-    if (next === compact) {
-      // Nothing the value holds changed — a space typed, a group's space deleted — so
-      // no re-render will come to regroup it. Regroup now, and keep the caret: after
-      // a Backspace on a group's space, that is just before it.
-      el.value = shown;
-      const at = indexAfter(shown, count);
-      el.setSelectionRange(at, at);
-    } else {
-      caretRef.current = count;
-    }
-    onValueChange?.(next);
-  };
-
-  const problem = visibleProblem(compact, kind, focused);
-  return (
-    <Input
-      ref={setRefs}
-      {...rest}
-      type="text"
-      value={shown}
-      onChange={handleChange}
-      onFocus={(e: FocusEvent<HTMLInputElement>) => {
-        setFocused(true);
-        onFocus?.(e);
-      }}
-      onBlur={(e: FocusEvent<HTMLInputElement>) => {
-        setFocused(false);
-        onBlur?.(e);
-      }}
-      autoComplete={rest.autoComplete ?? "off"}
-      autoCapitalize={rest.autoCapitalize ?? "characters"}
-      autoCorrect={rest.autoCorrect ?? "off"}
-      spellCheck={rest.spellCheck ?? false}
-      // ALWAYS passed, even while there is no message: a field that takes `error`
-      // keeps its box, so the message coming and going under the caret never remounts
-      // the input (see Input's FieldGroup) — this one comes and goes as you type.
-      error={hasContent(error) ? error : problem ? messageFor(problem, compact, text) : undefined}
-      // Groups of four line up only when every digit is the same width.
-      inputClassName={cn("tabular-nums", inputClassName)}
-    />
-  );
-}