@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/currency-option-list.tsx

@@ -1,180 +0,0 @@
-import { useMemo } from "react";
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { matchesSearch, searchWords } from "../lib/text-match";
-import { ComboboxPanel, type ComboboxCore, type ComboOption } from "./combobox-core";
-import { CURRENCIES, type CurrencyOption } from "../currencies";
-
-// The one list both currency pickers render (round 0.34 Wave 2, DUP-4). CurrencySelect
-// re-exports the data under its own name, as it always has; the list is package-private.
-// Its own module, so AmountInput can render the list without a cycle through
-// currency-select. The data itself is ../currencies since 0.35: an entry of its own that
-// imports nothing, which an app's build can read in Node (keksdose's flag subset).
-export { CURRENCIES };
-export type { CurrencyOption };
-
-export interface CurrencyFlagProps extends ComponentPropsWithRef<"span"> {
-  /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */
-  country: string;
-}
-
-export function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps) {
-  return (
-    <span
-      {...rest}
-      // Stays `aria-hidden` whatever a caller passes: the flag is a picture of the
-      // code printed next to it, and a reader that met both would hear the currency
-      // twice.
-      aria-hidden
-      className={cn(
-        "fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0",
-        `fi-${country}`,
-        className,
-      )}
-    />
-  );
-}
-
-const CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));
-
-export function getCurrency(code: string | null | undefined): CurrencyOption | undefined {
-  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;
-}
-
-/** The name to SHOW for a currency: the caller's translation if they have one for
- *  that code; else, when a `locale` is known, the name `Intl.DisplayNames` has for
- *  it in that locale; else the English name {@link CURRENCIES} carries. Shared with
- *  AmountInput, which renders the same list from the same data.
- *
- *  `Intl` only when a locale was actually GIVEN (by prop or `<UiKitProvider>`): an
- *  app that never set one keeps the shipped English names it has always shown,
- *  rather than whatever language the test runner or the browser happens to be in. */
-export function currencyName(c: CurrencyOption, names?: Record<string, string>, locale?: string): string {
-  const own = names?.[c.code];
-  if (own !== undefined) return own;
-  if (locale) {
-    try {
-      const shown = new Intl.DisplayNames([locale], { type: "currency" }).of(c.code);
-      if (shown && shown !== c.code) return shown;
-    } catch {
-      // A malformed tag, or a runtime without `DisplayNames`: the shipped name.
-    }
-  }
-  return c.name;
-}
-
-export interface CurrencyOptionListProps {
-  /** The host's `useComboboxCore`: its trigger, its open state, its query. */
-  core: ComboboxCore<string>;
-  /** What the host's trigger names in `aria-controls`. */
-  listboxId: string;
-  /** The chosen code, if any — selected and checked in the list. */
-  value: string | null | undefined;
-  /** A currency was picked. The host closes the list. */
-  onChoose: (code: string) => void;
-  /** Only these ISO codes, in this order; codes the kit has no definition for are
-   *  dropped. Default every one of {@link CURRENCIES}. */
-  codes?: readonly string[];
-  /** Translated names by code — see {@link currencyName}. */
-  currencyNames?: Record<string, string>;
-  locale?: string;
-  searchPlaceholder: string;
-  /** The phone sheet's title — the field's name. */
-  sheetTitle: ReactNode;
-}
-
-/**
- * The currency list — its filter and its rows — that CurrencySelect and AmountInput's
- * currency chip both render, on the picker family's `ComboboxPanel` (round 0.34 Wave 2,
- * DUP-4 + BUG-12).
- *
- * The chip's list was a hand copy of CurrencySelect's, and it had drifted: the name kept a
- * plain `truncate` where T1 made CurrencySelect's wrap from Large up, it took no `options`
- * subset, it had no check mark and no listbox id, and it was a fixed 16rem where #308 had
- * given CurrencySelect a panel that grows to the full names. And both were lists of plain
- * buttons under a trigger that promised a listbox. On the shared panel they are a listbox
- * of options, the chosen one selected, with the arrow keys, the live result count, the
- * phone sheet (live #200) and portal anchoring (dev#548: an `overflow` ancestor clipped
- * the absolute panel's first third away).
- *
- * The panel hangs from the trigger's END edge and grows toward the start, as wide as the
- * names need up to 20rem and the glass (feedback #308: a field with content after it is
- * not pushed past the page).
- */
-export function CurrencyOptionList({
-  core,
-  listboxId,
-  value,
-  onChoose,
-  codes,
-  currencyNames,
-  locale,
-  searchPlaceholder,
-  sheetTitle,
-}: CurrencyOptionListProps) {
-  // Keyed on the codes' CONTENTS: an inline `options={["EUR", "CHF"]}` is a new array
-  // every render.
-  const codesKey = codes?.join(",");
-  const pool = useMemo(
-    () =>
-      codesKey === undefined
-        ? CURRENCIES
-        : // The caller's order; codes the kit has no definition for are dropped.
-          codesKey
-            .split(",")
-            .map((code) => getCurrency(code))
-            .filter((c): c is CurrencyOption => c !== undefined),
-    [codesKey],
-  );
-  const named = useMemo(
-    () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),
-    [pool, currencyNames, locale],
-  );
-  const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);
-
-  // The code, the name the row SHOWS (so a translated list is searchable in the language
-  // it is written in) and the symbol — folded as every kit list folds (DUP-5).
-  const query = core.query;
-  const results = useMemo(() => {
-    // Every word of the query, in the code, the name or the symbol (0.51.4).
-    const words = searchWords(query, locale);
-    const hits =
-      words.length > 0 ? named.filter(({ c, name }) => matchesSearch(words, [c.code, name, c.symbol], locale)) : named;
-    return hits.map(({ c, name }): ComboOption<string> => ({
-      value: c.code,
-      label: name,
-      icon: <CurrencyFlag country={c.country} />,
-    }));
-  }, [named, query, locale]);
-
-  const chosen = getCurrency(value)?.code;
-  return (
-    <ComboboxPanel
-      // The core with the currency filter's rows in place of its own.
-      core={{ ...core, results }}
-      listboxId={listboxId}
-      searchPlaceholder={searchPlaceholder}
-      sheetTitle={sheetTitle}
-      isSelected={(code) => code === chosen}
-      onChoose={(o) => onChoose(o.value)}
-      showCreate={false}
-      onCreate={() => {}}
-      createContent={null}
-      width={{ fit: true, maxRem: 20 }}
-      align="end"
-      renderOption={(o) => {
-        const row = byCode.get(o.value);
-        if (!row) return o.label;
-        return (
-          <>
-            <span className="w-8 shrink-0 font-mono text-muted">{row.c.symbol}</span>{" "}
-            <span className="shrink-0 font-medium text-primary">{row.c.code}</span>{" "}
-            {/* The name wraps from Large up (round 0.34 T1); the code beside it is what a
-                reader scans for, and it never shrinks. */}
-            <span className="min-w-0 truncate-until-large text-muted">{row.name}</span>
-          </>
-        );
-      }}
-    />
-  );
-}

package/src/components/currency-select.tsx

@@ -1,341 +0,0 @@
-import { useCallback, useId } from "react";
-import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
-import { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./field-base";
-import { FieldLabel } from "./field-parts";
-import {
-  assignRef,
-  EndHintRow,
-  LockedReason,
-  useFieldMessages,
-  useLockReason,
-  type DisabledReasonDisplay,
-  type FieldHelpProps,
-} from "./field-parts";
-import type { CommitScope } from "./write-lock";
-import { cn } from "../lib/cn";
-import { useComboboxCore } from "./combobox-core";
-import {
-  CURRENCIES,
-  CurrencyFlag,
-  CurrencyOptionList,
-  currencyName,
-  getCurrency,
-  type CurrencyFlagProps,
-  type CurrencyOption,
-} from "./currency-option-list";
-import { DEFAULT_COMMON_LABELS, DEFAULT_CURRENCY_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-
-// The data and the flag are declared beside the one list both currency pickers render
-// (./currency-option-list, round 0.34 Wave 2, DUP-4) and are this module's exports, as
-// they always were.
-export { CURRENCIES, CurrencyFlag, currencyName, getCurrency };
-export type { CurrencyFlagProps, CurrencyOption };
-
-/** `onChange` is the kit's — "a currency was picked", carrying the code — rather
- *  than the div's form event. */
-export interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
-  value: string;
-  onChange: (code: string) => void;
-  placeholder?: string;
-  label?: ReactNode;
-  /**
-   * Restrict the pickable currencies to these ISO codes (e.g. only the
-   * currencies actually present in a budget). Order is preserved. Defaults to
-   * the full {@link CURRENCIES} list.
-   */
-  options?: string[];
-  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the
-   *  native `Select` has worn since feedback #235. Every field-styled control in
-   *  this package carries it now, so a form can mark any of its fields rather than
-   *  only the one that happened to have it first. */
-  invalid?: boolean;
-  /**
-   * What is wrong with the choice, in the caller's own words — {@link Input}'s `error`
-   * (keksdose K4: of the kit's pickers this one had neither a message nor a caption, so
-   * "the account is in EUR" sat in a loose `<p>` beside it that nothing pointed at).
-   * Rendered under the field, after a text `hint`; merged into the trigger's
-   * `aria-describedby`; implies `invalid`. `null`, `false` and `""` are no message.
-   */
-  error?: ReactNode;
-  /**
-   * {@link Select}'s `hint`, the same rule (keksdose K4). A {@link FieldHint} "?" rides
-   * the label's line; on an unlabelled picker it sits at the field's end edge, outside
-   * the box. Plain TEXT (a string or a number) is a caption UNDER the field, attached
-   * to the trigger through `aria-describedby` — the label line has no room for a
-   * sentence.
-   */
-  hint?: ReactNode;
-  /** Every user-facing string this control owns, shaped like `AmountInput`'s
-   *  `labels` so the two currency pickers in the kit are configured the same way.
-   *
-   *  `search` exists because `placeholder` used to do BOTH jobs: it named the empty
-   *  field and, for want of anything else, it was also handed to the search box —
-   *  so a caller who wrote "Currency" got "Currency" as the prompt for typing a
-   *  filter, and a caller who wanted to name the filter had to rename the field.
-   *  `placeholder` still wins for the trigger, so nothing moves for the callers
-   *  that set it; what changes is that the search box no longer borrows it. */
-  labels?: {
-    /** The empty trigger, when `placeholder` is not given. */
-    currency?: string;
-    /** The filter box inside the open panel. */
-    search?: string;
-  };
-  /**
-   * Translated currency names, keyed by ISO code — `{ CHF: "Schweizer Franken" }`.
-   *
-   * {@link CURRENCIES} is data the package ships, so its 27 names were the one
-   * string in the row a consumer could not translate: the code and the symbol are
-   * language-neutral, and the name beside them stayed English in a German UI. This
-   * is a sparse OVERRIDE rather than a replacement list, so an app translates the
-   * eight currencies it actually uses and keeps the rest; forking `CURRENCIES` to
-   * get there would also fork the flags and symbols, which nobody wants to maintain.
-   *
-   * The search matches what is SHOWN — type "Franken" and you find CHF — because a
-   * filter that only matches the hidden English name is worse than no filter.
-   */
-  currencyNames?: Record<string, string>;
-  /** As {@link Select}'s: no focus, no list, the settled look, no chevron. */
-  disabled?: boolean;
-  /**
-   * Why the currency cannot be changed — {@link Select}'s `disabledReason` (keksdose,
-   * 2026-10-23: a budget's currency for a guest or a viewer, and while offline, which
-   * keksdose drew as a one-option `Select` to keep the reason and lost the flag). The
-   * trigger stays focusable and `aria-disabled` (never the `disabled` attribute), keeps
-   * its flag and code, opens nothing, and `onChange` is never called; the reason is a
-   * line under the field at Large and on a touch screen, else in the kit
-   * {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's `aria-describedby`
-   * (after a caption, before an error). It wears the settled look of a disabled field
-   * and drops its chevron, as a locked Select does. It wins over `disabled`.
-   */
-  disabledReason?: ReactNode;
-  /** Where the reason shows — {@link Select}'s `disabledReasonDisplay`: a line under the
-   *  field at Large and on a touch screen by default, the tooltip otherwise. */
-  disabledReasonDisplay?: DisabledReasonDisplay;
-  /**
-   * This picker COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is
-   * locked the `disabledReason` way with the lock's reason (which wins over its own).
-   * No provider, or an unlocked one: no effect. {@link Select}'s `commit`. A currency
-   * field inside a form with its own Save stays editable under the lock — leave this off
-   * there, and put `commit` on the Save.
-   */
-  commit?: CommitScope;
-  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on
-   *  {@link MultiSelect} and {@link CountrySelect}: react-hook-form's focus-on-error
-   *  calls `focus()` on it (0.34, API-3, refactor audit 2026-10). Not the wrapper. */
-  ref?: Ref<HTMLButtonElement>;
-}
-
-export function CurrencySelect({
-  value,
-  onChange,
-  placeholder,
-  className,
-  label,
-  options,
-  invalid,
-  error,
-  hint,
-  help,
-  labels,
-  currencyNames,
-  disabled,
-  disabledReason,
-  disabledReasonDisplay,
-  commit,
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  "aria-invalid": ariaInvalid,
-  ref,
-  ...rest
-}: CurrencySelectProps) {
-  // The picker family's foundation (round 0.34 Wave 2, DUP-4): open state, the query,
-  // the highlighted row, portal anchoring, outside press, Escape on the kit's stack and
-  // Back — what `useDropdownSearch` gave it, and the rest it did not. `filter: false`:
-  // the list's own currency filter hands the panel its rows.
-  const core = useComboboxCore<string>({ filter: false, backCloses: true });
-  const { open, setOpen, triggerRef, closeToTrigger } = core;
-  // The core anchors the panel to the trigger and hands focus back to it; the caller's
-  // `ref` wants the same element. One callback feeds both, as on MultiSelect.
-  const setTrigger = useCallback(
-    (el: HTMLButtonElement | null) => {
-      triggerRef.current = el;
-      assignRef(ref, el);
-    },
-    [ref, triggerRef],
-  );
-  // `labels` > `currency` from the provider > English.
-  const text = useKitLabels("currency", DEFAULT_CURRENCY_LABELS, labels);
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const locale = useKitLocale();
-
-  const selected = getCurrency(value);
-
-  // The lock — Select's (`useLockReason`): the WriteLock's reason under `commit`, else
-  // the caller's own. Locked or `disabled`, nothing opens the list or picks a value.
-  const lock = useLockReason(commit, disabledReason);
-  const locked = lock.locked;
-  const inert = locked || Boolean(disabled);
-  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while
-  // rendering, as CountrySelect does, so no frame shows a list that cannot be used.
-  if (inert && open) setOpen(false);
-
-  const listboxId = `${useId()}-listbox`;
-  // Text is a caption under the field; anything else (a FieldHint) rides the label
-  // line — and a FieldHint is that caption at Large and on touch (§4). See `hint`. On
-  // the TRIGGER, which is the control with a role: a caller's description used to land
-  // on the wrapper `<div>` through the spread, where nothing reads it. The caller's ids
-  // first, then the caption, then the error — Select's order, through useFieldMessages
-  // since 0.34 (DUP-2, DUP-8).
-  const field = useFieldMessages({
-    hint,
-    help,
-    name: label ?? ariaLabel,
-    error,
-    invalid,
-    describedBy: ariaDescribedBy,
-    ariaInvalid,
-    // A lock's reason sits between the caption and the error, as on Select.
-    reasonId: locked && lock.reasonId,
-  });
-  const { labelHint, describedBy, isInvalid } = field;
-
-  // The trigger's NAME. A combobox does not take its name from its content, and the
-  // floating label is a <span>, not a <label for> — so without `aria-label` from the
-  // caller this trigger had no name at all (keksdose's test suite, 0.5.0). Composed the
-  // way MultiSelect and the entity comboboxes compose theirs, "label: value", with the
-  // `currency` word standing in for a missing label so it is never nameless.
-  const fieldName = typeof label === "string" ? label : text.currency;
-  const name = ariaLabel ?? common.fieldValue(fieldName, selected ? selected.code : (placeholder ?? text.currency));
-
-  const trigger = (
-    <button
-      // Where Escape on the open list hands focus back to (round 0.34 BUG-1).
-      ref={setTrigger}
-      type="button"
-      aria-label={name}
-      // The focusable kind of disabled while locked (Select's rule): native `disabled`
-      // would take the field out of the tab order, and the reason with it.
-      disabled={locked ? undefined : disabled}
-      aria-disabled={locked || undefined}
-      onClick={(e) => {
-        if (inert) {
-          e.preventDefault();
-          return;
-        }
-        setOpen((v) => !v);
-      }}
-      // Down/Up opens the list from the closed trigger, per the APG; Enter and Space
-      // already do through the button's own click.
-      onKeyDown={(e) => {
-        if (inert) return;
-        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-          e.preventDefault();
-          setOpen(true);
-        }
-      }}
-      // The implicit `button` role supports neither `aria-expanded` nor
-      // `aria-invalid`, so this trigger previously wore a red border and announced
-      // nothing about being invalid or about there being a list behind it. The role
-      // that DESCRIBES it is the one that also supports the attributes — the same
-      // treatment its siblings (MultiSelect, the entity comboboxes) now carry, so a
-      // form row of pickers reads the same way throughout. And since Wave 2 the popup
-      // IS the listbox it promises, of options with the chosen one selected (BUG-12).
-      role="combobox"
-      aria-haspopup="listbox"
-      aria-controls={listboxId}
-      aria-expanded={open}
-      aria-invalid={isInvalid || undefined}
-      aria-describedby={describedBy}
-      className={cn(
-        FIELD_TRIGGER,
-        "pe-9",
-        label !== undefined && FIELD_FLOATING_PAD,
-        // FIELD_BASE's `disabled:` look, for a trigger locked without being `disabled`
-        // (the `:disabled` variants cannot match it) — Select's FIELD_LOCKED. No hover:
-        // nothing here answers a press.
-        locked && "cursor-not-allowed bg-surface-2 text-muted hover:bg-surface-2",
-        isInvalid && FIELD_INVALID,
-      )}
-    >
-      {/* The trigger stays COMPACT — flag + code only — so it never clips in a
-          narrow field; the full names live in the (wider) popup (feedback
-          #308). */}
-      <span
-        className={cn(
-          "flex items-center gap-2 min-w-0",
-          // The settled look reaches the code too: `text-primary` here would outweigh it.
-          !selected ? "text-placeholder" : inert ? "text-muted" : "text-primary",
-        )}
-      >
-        {selected ? (
-          <>
-            <CurrencyFlag country={selected.country} />
-            <span className="font-medium">{selected.code}</span>
-          </>
-        ) : (
-          (placeholder ?? text.currency)
-        )}
-      </span>
-      {/* No menu to drop while disabled or locked, so no chevron — the arrow is the one
-          thing on the control that promises a choice (dev#474, as on Select). */}
-      {!inert && <FieldChevron />}
-    </button>
-  );
-
-  // Select's frame: the line under the trigger, or the Tooltip with a hidden copy for
-  // `aria-describedby`. The wrapper `<div>` keeps `className`, so the layout holds.
-  // `flex w-full items-stretch`: the trigger keeps the field's full width in it.
-  const control = locked ? (
-    <LockedReason lock={lock} display={disabledReasonDisplay} className="flex w-full items-stretch">
-      {trigger}
-    </LockedReason>
-  ) : (
-    trigger
-  );
-
-  return (
-    // The wrapper takes `rest`; the trigger takes the name. This field's label is a
-    // floating <span> rather than a <label for>, so a caller who wants the control to
-    // announce more than the code inside it has nowhere else to put it.
-    <div {...rest} className={cn("relative", className)}>
-      {label !== undefined &&
-        (labelHint === undefined ? (
-          <FieldLabel>{label}</FieldLabel>
-        ) : (
-          // The label and its "?" as one row on the label's line, as FloatingField lays
-          // out a static label with a hint: the row places both, the label truncates
-          // and the hint keeps its width. `z-10` like FieldLabel's own: the trigger is
-          // `relative` and comes later, so it would paint over the strip.
-          <div className="pointer-events-none absolute inset-x-3 top-1 z-10 flex items-center gap-1">
-            <FieldLabel className="static z-auto min-w-0 max-w-none">{label}</FieldLabel>
-            <span className="pointer-events-auto flex shrink-0 items-center">{labelHint}</span>
-          </div>
-        ))}
-      {/* No label line to ride: at the field's end edge, outside the box, as an
-          unlabelled Select places its FieldHint. */}
-      <EndHintRow hint={label === undefined ? labelHint : undefined}>{control}</EndHintRow>
-      {field.below}
-      {/* Portalled to <body> and anchored to the trigger (dev#548), so where it stands
-          in the flow no longer moves it. */}
-      <CurrencyOptionList
-        core={core}
-        listboxId={listboxId}
-        value={value}
-        codes={options}
-        currencyNames={currencyNames}
-        locale={locale}
-        searchPlaceholder={text.search}
-        // On a phone the list is a full-screen sheet, which needs the field's own name
-        // to say what it asks for (live #200).
-        sheetTitle={label ?? text.currency}
-        onChoose={(code) => {
-          if (inert) return;
-          onChange(code);
-          // Back to the trigger: the panel holding focus is about to unmount, and a
-          // keyboard user who has answered the field should stand on it, ready to Tab on.
-          closeToTrigger();
-        }}
-      />
-    </div>
-  );
-}

package/src/components/danger-confirm-labels.ts

@@ -1,20 +0,0 @@
-// The English words of ./danger-confirm, 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). ./danger-confirm re-exports them.
-
-import type { DangerConfirmLabels } from "./danger-confirm";
-
-/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`
- *  stays callable for a caller that composes its own label from it. */
-export const DEFAULT_DANGER_CONFIRM_LABELS = {
-  arm: "Delete…",
-  confirm: "Delete",
-  cancel: "Cancel",
-  prompt: "This cannot be undone.",
-  password: "Password",
-  phrase: (phrase: string) => `Type “${phrase}” to confirm`,
-  acknowledge: "I have read what this does and want to continue.",
-  needsPhrase: (phrase: string) => `Type “${phrase}” to confirm`,
-  needsAcknowledge: "Tick the box to confirm",
-  needsPassword: "Enter your password to confirm",
-} satisfies DangerConfirmLabels;