@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/multi-entity-combobox.d.ts

@@ -1,13 +1,10 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { ComboOption } from './combobox-core.js';
-import { CommitScope } from './write-lock.js';
-import '../hooks/use-anchored-rect.js';
-import '../hooks/use-anchored-panel.js';
-
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { type ComboOption } from "./combobox-core.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type CommitScope } from "./write-lock.js";
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
-interface MultiEntityComboboxProps<V extends string | number> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface MultiEntityComboboxProps<V extends string | number> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /** Selected ids. */
     value: V[];
     onChange: (value: V[]) => void;
@@ -42,6 +39,9 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
     /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a
      *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */
     commit?: CommitScope;
+    /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the
+     *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */
+    disabledReasonDisplay?: DisabledReasonDisplay;
     /** When set, a "create" row appears for a non-empty query with no exact match.
      *  The panel stays open (adding the new entity to `value` is the caller's job). */
     onCreate?: (query: string) => void;
@@ -86,6 +86,4 @@ interface MultiEntityComboboxProps<V extends string | number> extends Omit<Compo
  * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and
  * toggle without closing the panel; the trigger summarises the selection.
  */
-declare function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>): react.JSX.Element;
-
-export { MultiEntityCombobox, type MultiEntityComboboxProps };
+export declare function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>): import("react").JSX.Element;

package/dist/components/multi-entity-combobox.js

@@ -3,13 +3,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
+import { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./field-base.js";
+import { FieldLabel } from "./field-parts.js";
 import {
   ComboboxPanel,
   endHintRowProps,
   offersCreate,
-  useComboboxCore,
-  useComboboxFieldError
+  useComboboxCore
 } from "./combobox-core.js";
 import {
   DEFAULT_COMBOBOX_LABELS,
@@ -18,15 +18,17 @@ import {
   useKitLocale
 } from "../i18n/kit-labels.js";
 import {
+  assignRef,
   EndHintRow,
   FieldCaption,
   LABEL_IN_ROW,
   LockedReason,
+  mergeDescribedBy,
   StaticLabelRow,
+  useFieldError,
   useFieldHint,
   useLockReason
 } from "./field-parts.js";
-import { assignRef, mergeDescribedBy } from "./choice-parts.js";
 import { useCommitReason } from "./write-lock.js";
 function MultiEntityCombobox(props) {
   const {
@@ -45,6 +47,7 @@ function MultiEntityCombobox(props) {
     closeLabel,
     disabled,
     disabledReason,
+    disabledReasonDisplay,
     commit,
     onCreate,
     createLabel,
@@ -80,11 +83,7 @@ function MultiEntityCombobox(props) {
     debounceMs
   });
   const hintParts = useFieldHint(hint, ariaDescribedBy);
-  const field = useComboboxFieldError(
-    error,
-    invalid || ariaInvalid === true || ariaInvalid === "true",
-    hintParts.describedBy
-  );
+  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
     search: searchPlaceholder,
     noResults: emptyLabel,
@@ -117,7 +116,7 @@ function MultiEntityCombobox(props) {
     const chosen = value.map(resolve);
     return chosen.every(Boolean) ? listFormat.format(chosen.map((o) => o.label)) : labels.selectedCount(value.length);
   })();
-  const withLock = (trigger) => lock.locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: "block", children: trigger }) : trigger;
+  const withLock = (trigger) => lock.locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "block", children: trigger }) : trigger;
   const q = query.trim();
   const showCreate = offersCreate(
     onCreate,
@@ -179,11 +178,13 @@ function MultiEntityCombobox(props) {
                 "span",
                 {
                   className: cn(
-                    "min-w-0 truncate",
+                    // Wraps from Large up, as MultiSelect's summary does (text size §10.17,
+                    // round 0.34 T1).
+                    "min-w-0 truncate-until-large",
                     // Inherit FIELD_BASE's ink for a value, keep the placeholder tone
                     // (`--text-placeholder`) — the same rule every field on a form row
                     // follows (Keksdose dev#477).
-                    !value.length && "text-[var(--text-placeholder)]"
+                    !value.length && "text-placeholder"
                   ),
                   children: summary
                 }
@@ -203,7 +204,7 @@ function MultiEntityCombobox(props) {
                       e.stopPropagation();
                       onChange([]);
                     },
-                    className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+                    className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary",
                     children: /* @__PURE__ */ jsx(X, { className: "size-4" })
                   }
                 )

package/dist/components/multi-entity-combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, type ComponentPropsWithoutRef, type ReactNode, type Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  useComboboxFieldError,\n  type ComboOption,\n} from \"./combobox-core\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\nimport {\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  StaticLabelRow,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport { assignRef, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe; a rejection shows\n   *  `loadErrorLabel`. When set, `options` resolves labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  /** Offer a clear \"×\" while anything is chosen; it emits `[]`. A pointer shortcut out\n   *  of the tab order — the keyboard's way is Delete or Backspace on the CLOSED trigger,\n   *  or unticking rows in the open list. Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`:\n   *  focusable and `aria-disabled`, no list, no clear, no `onChange`, the reason in the\n   *  kit {@link Tooltip}. Wins over `disabled`. */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a\n   *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */\n  commit?: CommitScope;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Offer the create row with nothing typed too, worded as this. See\n   *  {@link EntityCombobox}'s `createEmptyLabel`. */\n  createEmptyLabel?: string;\n  /** The create row is a write while toggling is not: locked on its own under a locked\n   *  {@link WriteLockProvider}. See {@link EntityCombobox}'s `createCommit`. */\n  createCommit?: CommitScope;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — the rest of the Combobox family's `hint` since 0.22, which this\n   * one was left without (keksdose K4): plain TEXT is a caption under the field on the\n   * trigger's `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the\n   * label line, or with no label sits at the trigger's end edge, outside the box.\n   * Passed at all — even `undefined` — the field keeps one box, so a hint coming and\n   * going never rebuilds the trigger under the cursor (the 0.22 rule).\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link EntityCombobox} and {@link CountrySelect} (0.24, kastlan: react-hook-form's\n   *  focus-on-error focuses whatever `field.ref` is handed). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>) {\n  const {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    itemLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    disabled,\n    disabledReason,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    ref,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper: `Field`'s render-prop spreads `{ id, aria-describedby, aria-invalid,\n    // aria-required }`, and on the role-less wrapper div the label's `htmlFor` named\n    // nothing and the hint and required state described nothing — kastlan's\n    // communication-page To/Cc/Bcc and lease-tenants-step.tsx read as unnamed pickers.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useComboboxFieldError(\n    error,\n    invalid || ariaInvalid === true || ariaInvalid === \"true\",\n    hintParts.describedBy,\n  );\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, query, triggerRef } = core;\n  // The core's trigger ref and the caller's, fed by one callback — see EntityCombobox.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // The lock — see EntityCombobox: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  if (lock.locked && open) setOpen(false);\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(\n    () => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }),\n    [locale],\n  );\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? listFormat.format(chosen.map((o) => o!.label))\n      : labels.selectedCount(value.length);\n  })();\n\n  // While locked the trigger sits in the reason's Tooltip, as on EntityCombobox.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const showClear = Boolean(clearable && value.length > 0 && !inert);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    core.rememberOption(o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={setTrigger}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={\n              ariaLabel ??\n              (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)\n            }\n            // Focusable while locked — see EntityCombobox.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange([]);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span\n              className={cn(\n                \"min-w-0 truncate\",\n                // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n                // (`--text-placeholder`) — the same rule every field on a form row\n                // follows (Keksdose dev#477).\n                !value.length && \"text-[var(--text-placeholder)]\",\n              )}\n            >\n              {summary}\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire. A pointer shortcut; the keyboard paths are Delete on the closed\n                  trigger and unticking the options in the open list. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange([]);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on EntityCombobox. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, type ComponentPropsWithoutRef, type ReactNode, type Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport {\n  ComboboxPanel,\n  endHintRowProps,\n  offersCreate,\n  useComboboxCore,\n  type ComboOption,\n} from \"./combobox-core\";\nimport {\n  DEFAULT_COMBOBOX_LABELS,\n  DEFAULT_COMMON_LABELS,\n  useKitLabels,\n  useKitLocale,\n} from \"../i18n/kit-labels\";\nimport {\n  assignRef,\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe; a rejection shows\n   *  `loadErrorLabel`. When set, `options` resolves labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  /** Offer a clear \"×\" while anything is chosen; it emits `[]`. A pointer shortcut out\n   *  of the tab order — the keyboard's way is Delete or Backspace on the CLOSED trigger,\n   *  or unticking rows in the open list. Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`:\n   *  focusable and `aria-disabled`, no list, no clear, no `onChange`, the reason in the\n   *  kit {@link Tooltip}. Wins over `disabled`. */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a\n   *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Offer the create row with nothing typed too, worded as this. See\n   *  {@link EntityCombobox}'s `createEmptyLabel`. */\n  createEmptyLabel?: string;\n  /** The create row is a write while toggling is not: locked on its own under a locked\n   *  {@link WriteLockProvider}. See {@link EntityCombobox}'s `createCommit`. */\n  createCommit?: CommitScope;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — the rest of the Combobox family's `hint` since 0.22, which this\n   * one was left without (keksdose K4): plain TEXT is a caption under the field on the\n   * trigger's `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the\n   * label line, or with no label sits at the trigger's end edge, outside the box.\n   * Passed at all — even `undefined` — the field keeps one box, so a hint coming and\n   * going never rebuilds the trigger under the cursor (the 0.22 rule).\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link EntityCombobox} and {@link CountrySelect} (0.24, kastlan: react-hook-form's\n   *  focus-on-error focuses whatever `field.ref` is handed). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>) {\n  const {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    itemLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    ref,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper: `Field`'s render-prop spreads `{ id, aria-describedby, aria-invalid,\n    // aria-required }`, and on the role-less wrapper div the label's `htmlFor` named\n    // nothing and the hint and required state described nothing — kastlan's\n    // communication-page To/Cc/Bcc and lease-tenants-step.tsx read as unnamed pickers.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, query, triggerRef } = core;\n  // The core's trigger ref and the caller's, fed by one callback — see EntityCombobox.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // The lock — see EntityCombobox: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  if (lock.locked && open) setOpen(false);\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(\n    () => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }),\n    [locale],\n  );\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean)\n      ? listFormat.format(chosen.map((o) => o!.label))\n      : labels.selectedCount(value.length);\n  })();\n\n  // While locked the trigger sits in the reason's Tooltip, as on EntityCombobox.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const showClear = Boolean(clearable && value.length > 0 && !inert);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    core.rememberOption(o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={setTrigger}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={\n              ariaLabel ??\n              (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)\n            }\n            // Focusable while locked — see EntityCombobox.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange([]);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span\n              className={cn(\n                // Wraps from Large up, as MultiSelect's summary does (text size §10.17,\n                // round 0.34 T1).\n                \"min-w-0 truncate-until-large\",\n                // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n                // (`--text-placeholder`) — the same rule every field on a form row\n                // follows (Keksdose dev#477).\n                !value.length && \"text-placeholder\",\n              )}\n            >\n              {summary}\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire. A pointer shortcut; the keyboard paths are Delete on the closed\n                  trigger and unticking the options in the open list. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange([]);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on EntityCombobox. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/multi-select.d.ts

@@ -1,34 +1,56 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
-interface MultiSelectOption {
-    value: string | number;
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import type { CommitScope } from "./write-lock.js";
+import { type MultiSelectLabels, type LabelOverride } from "../i18n/kit-labels.js";
+/**
+ * One row of a {@link MultiSelect}. Generic over its value since 0.34 (API-4), so a list of
+ * number ids hands `onChange` numbers — `MultiSelectOption` alone is the old
+ * `string | number` row.
+ */
+export interface MultiSelectOption<V extends string | number = string | number> {
+    value: V;
     label: string;
+    /** A second line under the label — a postcode, a count (keksdose #147). Searchable. */
     hint?: string;
+    /**
+     * Shown but not takeable — {@link ComboOption.disabled}: dimmed, `aria-disabled`, passed
+     * over by the arrow keys, and a press does nothing. A chosen disabled row stays chosen:
+     * "Select all" and "Clear" leave it as it is. Say why in `hint`.
+     */
+    disabled?: boolean;
 }
 /** `onChange` is the kit's — "the selection changed", carrying the new values —
- *  rather than the div's form event. */
-interface MultiSelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
-    options: MultiSelectOption[];
-    values: (string | number)[];
-    onChange: (next: (string | number)[]) => void;
-    /** Displayed when no value is selected (i.e. "all"). Defaults to `placeholder`,
-     * then to `multiSelect.all` from the {@link UiKitProvider}, then "All". */
-    allLabel?: string;
+ *  rather than the div's form event. Generic over the option value (API-4): `V` is
+ *  inferred from `options` and `value`, so `onChange` hands back `number[]` for number
+ *  ids and `string[]` for string ones, and no call site casts. */
+export interface MultiSelectProps<V extends string | number = string | number> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    options: MultiSelectOption<V>[];
+    /** The chosen values — the select family's `value` (API-4). */
+    value?: V[];
+    onChange: (next: V[]) => void;
     /** Singular/plural countable label, used when 1+ items are selected. Default:
-     *  `multiSelect.selectedCount` from the provider — the bare count in English. */
+     *  `labels.selectedCount`, else `multiSelect.selectedCount` from the provider — the
+     *  bare count in English. */
     itemLabel?: (count: number) => string;
+    /** Shown when nothing is picked, unless `labels.all` says otherwise — it has always
+     *  doubled as the "nothing picked" text. */
     placeholder?: string;
     /** Embedded top-boundary label, matching the native Input/Select fields. */
     label?: ReactNode;
-    /** Search-box placeholder. Default: `multiSelect.search` from the provider, else "Search". */
-    searchLabel?: string;
-    /** "Select all" action label. Default: `multiSelect.selectAll`, else "Select all". */
-    selectAllLabel?: string;
-    /** "Clear" action label. Default: `multiSelect.clear`, else "Clear". */
-    clearLabel?: string;
-    /** Extra classes for the open dropdown PANEL — the way to widen it past its
-     *  16rem default when the rows carry more than a label (Keksdose feedback #147). */
+    /**
+     * Per-instance overrides of the provider's `multiSelect` namespace, over English — the
+     * kit's `labels` shape, where this took four string props until 0.35 (API-4: `allLabel`,
+     * `searchLabel`, `selectAllLabel`, `clearLabel`). `all` is the trigger when nothing is
+     * picked: `labels.all`, then `placeholder`, then the provider's.
+     */
+    labels?: LabelOverride<MultiSelectLabels>;
+    /**
+     * Extra classes for the open PANEL. The panel is portalled now (dev#548) and sizes
+     * itself: as wide as the trigger and at least 16rem, growing with its rows up to 32rem
+     * (or the trigger) — what this prop was asked for (keksdose feedback #147: the market
+     * picker's postcode, distance and receipt-count hints were cut at 16rem). A `w-*` class
+     * here no longer sets the width.
+     */
     panelClassName?: string;
     /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the
      *  native `Select` has worn since feedback #235. Every field-styled control in
@@ -50,7 +72,34 @@ interface MultiSelectProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
     /** The trigger cannot be opened: FIELD_BASE's settled grey, no chevron (as a
      *  disabled {@link Select} drops its own), and a dimmed label. */
     disabled?: boolean;
+    /**
+     * Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`: the
+     * trigger stays focusable and `aria-disabled`, the list does not open and `onChange`
+     * never fires; 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`. Wins over `disabled`.
+     */
+    disabledReason?: ReactNode;
+    /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the
+     *  field at Large and on a touch screen by default, the tooltip otherwise. */
+    disabledReasonDisplay?: DisabledReasonDisplay;
+    /** This picker COMMITS — toggling saves (a filter persisted per user, a settings row).
+     *  Locked the `disabledReason` way under a locked {@link WriteLockProvider}, with the
+     *  lock's reason. Leave it off inside a form that has its own Save. */
+    commit?: CommitScope;
+    /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on
+     *  {@link MultiEntityCombobox} (react-hook-form's focus-on-error). Not the wrapper. */
+    ref?: Ref<HTMLButtonElement>;
 }
-declare function MultiSelect({ options, values, onChange, allLabel, itemLabel, placeholder, label, searchLabel, selectAllLabel, clearLabel, className, panelClassName, invalid, error, hint, disabled, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...rest }: MultiSelectProps): react.JSX.Element;
-
-export { MultiSelect, type MultiSelectOption, type MultiSelectProps };
+/**
+ * Pick several of a fixed list — a filter's accounts, a comparison's data sets — with a
+ * search box, "Select all" and "Clear"; nothing picked reads as "all".
+ *
+ * Built on the picker family's foundation since round 0.34 (Wave 2, DUP-4):
+ * `useComboboxCore` + `ComboboxPanel`, as {@link MultiEntityCombobox} is. It was an
+ * absolute `DropdownPanel`, which an `overflow` ancestor clipped (dev#548) and which on a
+ * phone was a 16rem panel between the field and the keyboard; it now has the full-screen
+ * sheet (live #200), the portal, the live result count, disabled rows and the search
+ * that folds accents ("zurich" finds Zürich, DUP-5).
+ */
+export declare function MultiSelect<V extends string | number = string | number>(props: MultiSelectProps<V>): import("react").JSX.Element;