@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/inline-edit-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/inline-edit-field.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Input, Spinner } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`\n * namespace of `<UiKitProvider labels>`, overridable per instance through `labels`.\n */\nexport interface InlineEditLabels {\n  /** The display button's tooltip and description — what pressing it does. Receives\n   *  the field's `label` (\"Budget name\" → \"Edit Budget name\"). */\n  edit: (label: string) => string;\n  /** Shown (and spoken) when `onCommit` rejects and no `formatError` says better. */\n  failed: string;\n  /** What the display shows for an empty value, when no `placeholder` is given. */\n  empty: string;\n}\n\nexport const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels = {\n  edit: (label) => `Edit ${label}`,\n  failed: \"The change could not be saved.\",\n  empty: \"Empty\",\n};\n\n/** What an `editor` render prop is handed: the draft and the means to end the edit. */\nexport interface InlineEditorProps<T> {\n  /** The draft — seeded from `value` each time the editor opens. */\n  value: T;\n  /** Replace the draft (every keystroke). */\n  onChange: (next: T) => void;\n  /**\n   * End the edit and save. Without an argument it saves the draft; WITH one it saves\n   * that — for an editor whose own commit hands over a resolved value (`NumberInput`'s\n   * `onCommit` gives \"1050\" for a typed \"1100-50\"). Called twice (the editor's own\n   * Enter, then the field's), the second call does nothing.\n   */\n  commit: (next?: T) => void;\n  /** End the edit and drop the draft — what Escape does. */\n  cancel: () => void;\n  /** The save is in flight: make the control read-only (not disabled — it has focus). */\n  pending: boolean;\n  /** The field's `label`, for the control's accessible name. */\n  label: string;\n  /** The last save failed and the draft has not been touched since. */\n  invalid: boolean;\n  /** The id of the failure message while there is one, for `aria-describedby`. */\n  describedBy: string | undefined;\n  /** The four above as attributes — spread them on a kit field that takes the DOM\n   *  spelling: `<AmountInput {...p.inputProps} … />`. */\n  inputProps: {\n    \"aria-label\": string;\n    \"aria-invalid\": true | undefined;\n    \"aria-describedby\": string | undefined;\n    readOnly: boolean;\n  };\n}\n\ninterface InlineEditFieldBaseProps<T> {\n  /** The saved value — what the display shows, and what the editor opens on. */\n  value: T;\n  /**\n   * Save `next`. Return a promise and the field waits: the editor stays open and\n   * read-only with a spinner until it settles, closes when it resolves, and STAYS OPEN\n   * with the failure under it when it rejects (or throws) — the typed value is kept for\n   * a retry. Not called when the draft equals `value` (see `isEqual`): opening the\n   * editor and leaving it unchanged is not a write.\n   */\n  onCommit: (next: T) => void | Promise<unknown>;\n  /** What the value is (\"Budget name\", \"Assigned\") — the editor's accessible name and\n   *  the subject of the display's \"Edit …\" description. Not drawn: inline, the row or\n   *  the column header is the visible label. */\n  label: string;\n  /** The value as the display shows it — a formatted amount, a date. Default: the\n   *  value as text. */\n  display?: (value: T) => ReactNode;\n  /** Whether the draft is unchanged, so leaving the editor is not a write. Default\n   *  `Object.is`. keksdose compares assigned amounts as NUMBERS — \"1100\" is the\n   *  server's \"1100.0000\". */\n  isEqual?: (a: T, b: T) => boolean;\n  /** What the display shows for an empty value (`\"\"`, `null`, an empty `display`).\n   *  Default `labels.empty`. */\n  placeholder?: ReactNode;\n  /** `\"end\"` for a figure in a right-aligned money column. Default `\"start\"`. */\n  align?: \"start\" | \"end\";\n  /** Look, do not touch — a guest's view: the value as plain text, no button. */\n  readOnly?: boolean;\n  /**\n   * Why it cannot be edited now — the write lock's sentence, a closed period. The\n   * value stays a BUTTON (focusable, `aria-disabled`) with the reason in the kit\n   * Tooltip and its description; it opens no editor. An editor that is open when the\n   * reason arrives closes, its draft dropped: a field you can type into must be one\n   * whose value can be saved (keksdose dev#496).\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS — under a locked {@link WriteLockProvider} it takes the\n   *  `disabledReason` path with the lock's reason (which wins over its own). No\n   *  provider, or an unlocked one: no effect. */\n  commit?: CommitScope;\n  /** The value is the user's own data: `data-private` on the display and the editor,\n   *  so the app's demo-mode blur covers both. */\n  redact?: boolean;\n  /** Turns a rejection into words. Default `labels.failed`. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Controlled open state — a row's swipe action that opens the editor from outside\n   *  (keksdose's assigned cell). Left out, the field keeps its own. */\n  editing?: boolean;\n  /** Called with the next open state: on open, on a save that resolved, on cancel. */\n  onEditingChange?: (editing: boolean) => void;\n  /** Attributes for the DEFAULT text editor's `<input>` — `maxLength`, `inputMode`,\n   *  `autoComplete`. Ignored with `editor`. */\n  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"defaultValue\" | \"onChange\" | \"type\">;\n  /** Classes for the root. */\n  className?: string;\n  labels?: Partial<InlineEditLabels>;\n}\n\ntype EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;\n\n/**\n * The editor. Optional for a string value — the kit's `Input`, compact — and\n * REQUIRED for anything else, since only the caller knows how to edit a number or an\n * amount. Render a kit field from the props it is handed:\n *\n * ```tsx\n * editor={(p) => (\n *   <NumberInput calculator={false} ariaLabel={p.label} value={p.value} onChange={p.onChange}\n *     onCommit={p.commit} aria-invalid={p.invalid || undefined} aria-describedby={p.describedBy} />\n * )}\n * ```\n *\n * The field itself handles Enter (save), Escape (cancel) and focus leaving the editor\n * (save) around whatever is rendered — a key the editor has already handled\n * (`preventDefault`, as a listbox does for its Enter) is left to it. Focus counts as\n * \"inside\" across a portal, so a picker or a phone keypad the editor opens does not\n * end the edit.\n */\nexport type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> &\n  ([T] extends [string] ? { editor?: EditorRender<T> } : { editor: EditorRender<T> });\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** Calls the `editor` render prop as a component of its own: the props it is handed\n *  close over the field's refs, and a render prop called in the field's own render\n *  would read like a ref read during render. Module-level, so the type is stable and\n *  the editor never remounts. */\nfunction RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render: EditorRender<T> }) {\n  return render(props);\n}\n\n/**\n * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the display button, the\n * locked one and the read-only text wrap instead of ending in \"…\", and break a word too\n * long for the cell, so an IBAN or an e-mail address shows to its last character. The\n * value IS the button's accessible name and the thing being edited: a reader who needs\n * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of\n * these keeps its one-line cells at Normal.\n *\n * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this\n * file's own `truncate` + `large:whitespace-normal large:break-words`. The utility\n * breaks with `overflow-wrap: anywhere`, which lowers the value's min-content width: in\n * an auto-sized table column (keksdose's budget and invoice lines) give the column a\n * width, or an amount can be squeezed to a digit per line.\n */\nconst VALUE_TRUNCATE = \"truncate-until-large\";\n\n/** `onCommit`'s result, if it is a promise. */\nfunction asPromise(result: unknown): Promise<unknown> | null {\n  return result && typeof (result as Promise<unknown>).then === \"function\" ? (result as Promise<unknown>) : null;\n}\n\n/**\n * A value that edits in place: a quiet button showing the value; click it (or Enter\n * on it) and it becomes a field; Enter or leaving the field saves, Escape cancels\n * (keksdose K9).\n *\n * keksdose has three of them by hand — the budget's assigned cell (budget-cells.tsx),\n * the invoice line's value cells (invoice-lines-table.tsx `EditableCell`) and the\n * budget rename (budgets-page.tsx, an `Input` + Save + Cancel with no Escape) — and\n * each had to learn the same rules:\n *\n *  - **The display's accessible name is the VALUE.** A cell named \"Edit\" reads a table\n *    of \"edit, edit, edit\"; the action is the description instead (\"Edit Assigned\"),\n *    in the kit Tooltip on hover and focus.\n *  - **An unchanged draft is not a write.** Opening the editor and leaving it was a PUT\n *    in keksdose until `isEqual` compared numbers, and on a sealed budget an outbox row\n *    for a change nobody made.\n *  - **A failed save keeps the editor.** The typed value is the user's work; the\n *    failure is shown under it (attached with `aria-describedby`, and spoken), and the\n *    next keystroke clears it. Escape still drops the draft.\n *  - **Locked means a disabled BUTTON, not a disabled field** (keksdose dev#496): at\n *    rest a real row shows this button, so a locked page shows the same, with the\n *    reason — never a field that takes keys it cannot save.\n *\n * Inside a {@link DataTable} cell it needs nothing extra: the table already leaves a\n * click or a key on a control of the cell to that control. Focus returns to the value\n * after Enter or Escape; after a save that came from focus leaving, it stays where the\n * user put it.\n *\n * ```tsx\n * <InlineEditField label={t(\"budgets.name\")} value={budget.name}\n *   onCommit={(name) => rename.mutateAsync({ id: budget.id, name })} inputProps={{ maxLength: 120 }} />\n * ```\n */\nexport function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {\n  const {\n    value,\n    onCommit,\n    label,\n    display,\n    isEqual = Object.is,\n    placeholder,\n    align = \"start\",\n    readOnly = false,\n    disabledReason: ownDisabledReason,\n    commit,\n    redact = false,\n    formatError,\n    editing: editingProp,\n    onEditingChange,\n    inputProps,\n    className,\n    labels: labelsProp,\n  } = props;\n  const editor = props.editor as EditorRender<T> | undefined;\n  const labels = useKitLabels(\"inlineEdit\", DEFAULT_INLINE_EDIT_LABELS, labelsProp);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n\n  const [openState, setOpenState] = useState(false);\n  const open = editingProp ?? openState;\n  // Locked (or read-only) wins over an open flag: a stale `editing` must never bring a\n  // live commit-on-blur field back on a page that cannot save it.\n  const editing = open && !locked && !readOnly;\n  const [draft, setDraft] = useState<T>(value);\n  const [pending, setPending] = useState(false);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const failed = hasContent(failure);\n\n  const errorId = useId();\n  const reasonId = useId();\n  const displayRef = useRef<HTMLButtonElement>(null);\n  const editorRef = useRef<HTMLDivElement>(null);\n  const alert = useAnnounce({ politeness: \"assertive\" });\n\n  // One edit ends once: Enter in a NumberInput commits through its own `onCommit` and\n  // then reaches the field's Enter; a save that closes the editor unmounts the focused\n  // control, which some browsers answer with a blur. The second ending is a no-op.\n  const ended = useRef(false);\n  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mounted = useRef(true);\n  // The latest draft for the deferred blur check, which runs after a render.\n  const draftRef = useRef(draft);\n  useEffect(() => {\n    draftRef.current = draft;\n  });\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n      if (blurTimer.current) clearTimeout(blurTimer.current);\n    };\n  }, []);\n\n  // Seed the draft when the editor opens — from wherever the open came (the button, a\n  // controlled `editing`). During render, like DangerConfirm's wipe, so no frame shows\n  // the editor holding the previous edit's text.\n  const [wasEditing, setWasEditing] = useState(editing);\n  if (wasEditing !== editing) {\n    setWasEditing(editing);\n    if (editing) {\n      setDraft(value);\n      setFailure(null);\n      setPending(false);\n    }\n  }\n  // An open editor that a lock (or `readOnly`) took away is closed for good, not\n  // merely hidden until the lock lifts.\n  if (openState && !editing && editingProp === undefined) setOpenState(false);\n\n  // Focus follows the edit: into the editor when it opens, back to the value when it\n  // closes — but only if focus went down with the editor (Enter, Escape, a save that\n  // resolved under it). A save that came from focus LEAVING keeps focus where it went.\n  const prevEditing = useRef(editing);\n  useEffect(() => {\n    const changed = prevEditing.current !== editing;\n    prevEditing.current = editing;\n    if (!changed) return;\n    if (editing) {\n      // A fresh edit, which may end once. Here rather than in the seed above: a ref is\n      // not written during render, and no event can end the edit before this runs.\n      ended.current = false;\n      const control = editorRef.current?.querySelector<HTMLElement>(\n        \"input:not([type=hidden]), textarea, select, [contenteditable='true'], [tabindex]:not([tabindex='-1']), button\",\n      );\n      control?.focus();\n      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();\n      return;\n    }\n    // However it closed — a save, Escape, a lock taking it away — a blur check still\n    // queued from the editor has nothing left to save.\n    ended.current = true;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (lost) displayRef.current?.focus();\n  }, [editing]);\n\n  const setOpen = (next: boolean) => {\n    if (editingProp === undefined) setOpenState(next);\n    onEditingChange?.(next);\n  };\n\n  const fail = (caught: unknown) => {\n    ended.current = false;\n    const message = formatError ? formatError(caught) : labels.failed;\n    setFailure(hasContent(message) ? message : labels.failed);\n    alert.announce(typeof message === \"string\" && message !== \"\" ? message : labels.failed);\n    // Focus back into the editor if the failure left it nowhere (a pending field that\n    // the browser let go of); never pulled back from somewhere the user went.\n    const active = document.activeElement;\n    if (active === null || active === document.body) {\n      editorRef.current?.querySelector<HTMLElement>(\"input, textarea, select, [tabindex]\")?.focus();\n    }\n  };\n\n  const save = (next: T = draftRef.current) => {\n    if (!editing || ended.current || pending) return;\n    ended.current = true;\n    if (next !== draftRef.current) setDraft(next);\n    if (isEqual(next, value)) {\n      setOpen(false);\n      return;\n    }\n    let result: unknown;\n    try {\n      result = onCommit(next);\n    } catch (caught) {\n      fail(caught);\n      return;\n    }\n    const promise = asPromise(result);\n    if (!promise) {\n      setOpen(false);\n      return;\n    }\n    setPending(true);\n    setFailure(null);\n    promise.then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setOpen(false);\n      },\n      (caught: unknown) => {\n        if (!mounted.current) return;\n        setPending(false);\n        fail(caught);\n      },\n    );\n  };\n\n  const cancel = () => {\n    // A request that has left cannot be called back; Escape waits for it.\n    if (!editing || pending) return;\n    ended.current = true;\n    setOpen(false);\n  };\n\n  const change = (next: T) => {\n    if (pending) return;\n    setDraft(next);\n    // Now, not after the render: a blur check scheduled before that render reads it.\n    draftRef.current = next;\n    // The failure described the draft that was sent; once edited it describes nothing\n    // on screen, and the next save (or blur) is a fresh attempt.\n    setFailure(null);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      // Ours, not the dialog's or the popover's around the field.\n      e.preventDefault();\n      e.stopPropagation();\n      cancel();\n      return;\n    }\n    // Not mid-composition: Enter there picks the IME's candidate (Japanese, Chinese).\n    if (e.key === \"Enter\" && !e.nativeEvent.isComposing && !e.shiftKey) {\n      e.preventDefault();\n      save();\n    }\n  };\n\n  // Leaving the editor saves. Deferred one task, and cancelled by any focus that lands\n  // back inside: React reports focus moves through PORTALS to the component tree, so a\n  // calculator popover or a phone keypad the editor opened counts as inside, which a\n  // DOM `contains` check would get wrong. A failure on screen holds the editor: the\n  // user is looking at why, and moving away is not a retry.\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = setTimeout(() => {\n      blurTimer.current = null;\n      if (!mounted.current || failed) return;\n      save();\n    }, 0);\n  };\n  const onFocus = () => {\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n  };\n\n  const private_ = redact ? { \"data-private\": true } : undefined;\n  const shown = display ? display(value) : value === null || value === undefined ? \"\" : String(value);\n  const content = hasContent(shown) ? (\n    shown\n  ) : (\n    <span className=\"text-[var(--text-muted)]\">{placeholder ?? labels.empty}</span>\n  );\n  const alignClass = align === \"end\" ? \"text-end\" : \"text-start\";\n\n  let body: ReactNode;\n  if (readOnly) {\n    body = (\n      <span {...private_} className={cn(\"block min-w-0\", VALUE_TRUNCATE, alignClass)}>\n        {content}\n      </span>\n    );\n  } else if (editing) {\n    const describedBy = failed ? errorId : undefined;\n    const editorProps: InlineEditorProps<T> = {\n      value: draft,\n      onChange: change,\n      commit: save,\n      cancel,\n      pending,\n      label,\n      invalid: failed,\n      describedBy,\n      inputProps: {\n        \"aria-label\": label,\n        \"aria-invalid\": failed || undefined,\n        \"aria-describedby\": describedBy,\n        readOnly: pending,\n      },\n    };\n    body = (\n      // A wrapper for the keys and the focus, not a control: the keys belong to the\n      // field inside it, which is what has focus.\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- see above\n      <div\n        ref={editorRef}\n        {...private_}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        aria-busy={pending || undefined}\n        className=\"min-w-0\"\n      >\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">\n            {editor ? (\n              <RenderEditor render={editor} {...editorProps} />\n            ) : (\n              <Input\n                {...inputProps}\n                {...editorProps.inputProps}\n                value={String(draft ?? \"\")}\n                onChange={(e) => change(e.target.value as unknown as T)}\n                className={cn(\"px-2 py-1\", alignClass, inputProps?.className)}\n              />\n            )}\n          </div>\n          {/* Decorative: `aria-busy` on the wrapper says it. */}\n          {pending && <Spinner label={null} className=\"size-4 shrink-0\" />}\n        </div>\n        {failed && (\n          <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n            {failure}\n          </p>\n        )}\n      </div>\n    );\n  } else if (locked) {\n    // Button's `disabledReason` path, spelled out for a button that must look like\n    // the value rather than like a Button: focusable, `aria-disabled`, every\n    // activation swallowed, the reason in the kit Tooltip and in a `hidden` copy that\n    // describes it. The button in a FRAGMENT so the Tooltip does not add the bubble as\n    // a second description of the same sentence.\n    body = (\n      <Tooltip label={disabledReason} className=\"flex w-full min-w-0\">\n        <>\n          <button\n            ref={displayRef}\n            type=\"button\"\n            {...private_}\n            aria-disabled\n            aria-describedby={reasonId}\n            onClick={(e) => e.preventDefault()}\n            className={cn(\n              \"block w-full min-w-0 cursor-not-allowed rounded-sm focus:outline-none\",\n              VALUE_TRUNCATE,\n              FOCUS_RING,\n              alignClass,\n            )}\n          >\n            {content}\n          </button>\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  } else {\n    body = (\n      // Lazy: a table of these mounts no bubble until one is hovered or focused, and\n      // the closed bubble's text is in no ancestor's accessible name.\n      <Tooltip label={labels.edit(label)} lazy className=\"flex w-full min-w-0\">\n        <button\n          ref={displayRef}\n          type=\"button\"\n          {...private_}\n          onClick={() => setOpen(true)}\n          className={cn(\n            \"block w-full min-w-0 rounded-sm underline-offset-2 hover:underline focus:outline-none\",\n            VALUE_TRUNCATE,\n            FOCUS_RING,\n            alignClass,\n          )}\n        >\n          {content}\n        </button>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-editing={editing || undefined}>\n      {body}\n      {/* Always mounted: a live region that mounts with its message is usually missed. */}\n      <span {...alert.regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/inline-edit-field.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Input } from \"./input\";\nimport { Spinner } from \"./spinner\";\nimport { FIELD_ERROR_CLASS } from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { DEFAULT_INLINE_EDIT_LABELS } from \"./inline-edit-field-labels\";\n\n/**\n * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`\n * namespace of `<UiKitProvider labels>`, overridable per instance through `labels`.\n */\nexport interface InlineEditLabels {\n  /** The display button's tooltip and description — what pressing it does. Receives\n   *  the field's `label` (\"Budget name\" → \"Edit Budget name\"). */\n  edit: (label: string) => string;\n  /** Shown (and spoken) when `onCommit` rejects and no `formatError` says better. */\n  failed: string;\n  /** What the display shows for an empty value, when no `placeholder` is given. */\n  empty: string;\n}\n\n// Defined in ./inline-edit-field-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_INLINE_EDIT_LABELS };\n\n/** What an `editor` render prop is handed: the draft and the means to end the edit. */\nexport interface InlineEditorProps<T> {\n  /** The draft — seeded from `value` each time the editor opens. */\n  value: T;\n  /** Replace the draft (every keystroke). */\n  onChange: (next: T) => void;\n  /**\n   * End the edit and save. Without an argument it saves the draft; WITH one it saves\n   * that — for an editor whose own commit hands over a resolved value (`NumberInput`'s\n   * `onCommit` gives \"1050\" for a typed \"1100-50\"). Called twice (the editor's own\n   * Enter, then the field's), the second call does nothing.\n   */\n  commit: (next?: T) => void;\n  /** End the edit and drop the draft — what Escape does. */\n  cancel: () => void;\n  /** The save is in flight: make the control read-only (not disabled — it has focus). */\n  pending: boolean;\n  /** The field's `label`, for the control's accessible name. */\n  label: string;\n  /** The last save failed and the draft has not been touched since. */\n  invalid: boolean;\n  /** The id of the failure message while there is one, for `aria-describedby`. */\n  describedBy: string | undefined;\n  /** The four above as attributes — spread them on a kit field that takes the DOM\n   *  spelling: `<AmountInput {...p.inputProps} … />`. */\n  inputProps: {\n    \"aria-label\": string;\n    \"aria-invalid\": true | undefined;\n    \"aria-describedby\": string | undefined;\n    readOnly: boolean;\n  };\n}\n\ninterface InlineEditFieldBaseProps<T> {\n  /** The saved value — what the display shows, and what the editor opens on. */\n  value: T;\n  /**\n   * Save `next`. Return a promise and the field waits: the editor stays open and\n   * read-only with a spinner until it settles, closes when it resolves, and STAYS OPEN\n   * with the failure under it when it rejects (or throws) — the typed value is kept for\n   * a retry. Not called when the draft equals `value` (see `isEqual`): opening the\n   * editor and leaving it unchanged is not a write.\n   */\n  onCommit: (next: T) => void | Promise<unknown>;\n  /** What the value is (\"Budget name\", \"Assigned\") — the editor's accessible name and\n   *  the subject of the display's \"Edit …\" description. Not drawn: inline, the row or\n   *  the column header is the visible label. */\n  label: string;\n  /** The value as the display shows it — a formatted amount, a date. Default: the\n   *  value as text. */\n  display?: (value: T) => ReactNode;\n  /** Whether the draft is unchanged, so leaving the editor is not a write. Default\n   *  `Object.is`. keksdose compares assigned amounts as NUMBERS — \"1100\" is the\n   *  server's \"1100.0000\". */\n  isEqual?: (a: T, b: T) => boolean;\n  /** What the display shows for an empty value (`\"\"`, `null`, an empty `display`).\n   *  Default `labels.empty`. */\n  placeholder?: ReactNode;\n  /** `\"end\"` for a figure in a right-aligned money column. Default `\"start\"`. */\n  align?: \"start\" | \"end\";\n  /** Look, do not touch — a guest's view: the value as plain text, no button. */\n  readOnly?: boolean;\n  /**\n   * Why it cannot be edited now — the write lock's sentence, a closed period. The\n   * value stays a BUTTON (focusable, `aria-disabled`) with the reason in the kit\n   * Tooltip and its description; it opens no editor. An editor that is open when the\n   * reason arrives closes, its draft dropped: a field you can type into must be one\n   * whose value can be saved (keksdose dev#496).\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS — under a locked {@link WriteLockProvider} it takes the\n   *  `disabledReason` path with the lock's reason (which wins over its own). No\n   *  provider, or an unlocked one: no effect. */\n  commit?: CommitScope;\n  /** The value is the user's own data: `data-private` on the display and the editor,\n   *  so the app's demo-mode blur covers both. */\n  redact?: boolean;\n  /** Turns a rejection into words. Default `labels.failed`. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Controlled open state — a row's swipe action that opens the editor from outside\n   *  (keksdose's assigned cell). Left out, the field keeps its own. */\n  editing?: boolean;\n  /** Called with the next open state: on open, on a save that resolved, on cancel. */\n  onEditingChange?: (editing: boolean) => void;\n  /** Attributes for the DEFAULT text editor's `<input>` — `maxLength`, `inputMode`,\n   *  `autoComplete`. Ignored with `editor`. */\n  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"defaultValue\" | \"onChange\" | \"type\">;\n  /** Classes for the root. */\n  className?: string;\n  labels?: LabelOverride<InlineEditLabels>;\n}\n\ntype EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;\n\n/**\n * The editor. Optional for a string value — the kit's `Input`, compact — and\n * REQUIRED for anything else, since only the caller knows how to edit a number or an\n * amount. Render a kit field from the props it is handed:\n *\n * ```tsx\n * editor={(p) => (\n *   <NumberInput calculator={false} aria-label={p.label} value={p.value} onChange={p.onChange}\n *     onCommit={p.commit} aria-invalid={p.invalid || undefined} aria-describedby={p.describedBy} />\n * )}\n * ```\n *\n * The field itself handles Enter (save), Escape (cancel) and focus leaving the editor\n * (save) around whatever is rendered — a key the editor has already handled\n * (`preventDefault`, as a listbox does for its Enter) is left to it. Focus counts as\n * \"inside\" across a portal, so a picker or a phone keypad the editor opens does not\n * end the edit.\n */\nexport type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> &\n  ([T] extends [string] ? { editor?: EditorRender<T> } : { editor: EditorRender<T> });\n\n/** Calls the `editor` render prop as a component of its own: the props it is handed\n *  close over the field's refs, and a render prop called in the field's own render\n *  would read like a ref read during render. Module-level, so the type is stable and\n *  the editor never remounts. */\nfunction RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render: EditorRender<T> }) {\n  return render(props);\n}\n\n/**\n * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the display button, the\n * locked one and the read-only text wrap instead of ending in \"…\", and break a word too\n * long for the cell, so an IBAN or an e-mail address shows to its last character. The\n * value IS the button's accessible name and the thing being edited: a reader who needs\n * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of\n * these keeps its one-line cells at Normal.\n *\n * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this\n * file's own `truncate` + `large:whitespace-normal large:break-words`. The utility\n * breaks with `overflow-wrap: anywhere`, which lowers the value's min-content width: in\n * an auto-sized table column (keksdose's budget and invoice lines) give the column a\n * width, or an amount can be squeezed to a digit per line.\n */\nconst VALUE_TRUNCATE = \"truncate-until-large\";\n\n/** `onCommit`'s result, if it is a promise. */\nfunction asPromise(result: unknown): Promise<unknown> | null {\n  return result && typeof (result as Promise<unknown>).then === \"function\" ? (result as Promise<unknown>) : null;\n}\n\n/**\n * A value that edits in place: a quiet button showing the value; click it (or Enter\n * on it) and it becomes a field; Enter or leaving the field saves, Escape cancels\n * (keksdose K9).\n *\n * keksdose has three of them by hand — the budget's assigned cell (budget-cells.tsx),\n * the invoice line's value cells (invoice-lines-table.tsx `EditableCell`) and the\n * budget rename (budgets-page.tsx, an `Input` + Save + Cancel with no Escape) — and\n * each had to learn the same rules:\n *\n *  - **The display's accessible name is the VALUE.** A cell named \"Edit\" reads a table\n *    of \"edit, edit, edit\"; the action is the description instead (\"Edit Assigned\"),\n *    in the kit Tooltip on hover and focus.\n *  - **An unchanged draft is not a write.** Opening the editor and leaving it was a PUT\n *    in keksdose until `isEqual` compared numbers, and on a sealed budget an outbox row\n *    for a change nobody made.\n *  - **A failed save keeps the editor.** The typed value is the user's work; the\n *    failure is shown under it (attached with `aria-describedby`, and spoken), and the\n *    next keystroke clears it. Escape still drops the draft.\n *  - **Locked means a disabled BUTTON, not a disabled field** (keksdose dev#496): at\n *    rest a real row shows this button, so a locked page shows the same, with the\n *    reason — never a field that takes keys it cannot save.\n *\n * Inside a {@link DataTable} cell it needs nothing extra: the table already leaves a\n * click or a key on a control of the cell to that control. Focus returns to the value\n * after Enter or Escape; after a save that came from focus leaving, it stays where the\n * user put it.\n *\n * ```tsx\n * <InlineEditField label={t(\"budgets.name\")} value={budget.name}\n *   onCommit={(name) => rename.mutateAsync({ id: budget.id, name })} inputProps={{ maxLength: 120 }} />\n * ```\n */\nexport function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {\n  const {\n    value,\n    onCommit,\n    label,\n    display,\n    isEqual = Object.is,\n    placeholder,\n    align = \"start\",\n    readOnly = false,\n    disabledReason: ownDisabledReason,\n    commit,\n    redact = false,\n    formatError,\n    editing: editingProp,\n    onEditingChange,\n    inputProps,\n    className,\n    labels: labelsProp,\n  } = props;\n  const editor = props.editor as EditorRender<T> | undefined;\n  const labels = useKitLabels(\"inlineEdit\", DEFAULT_INLINE_EDIT_LABELS, labelsProp);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n\n  const [openState, setOpenState] = useState(false);\n  const open = editingProp ?? openState;\n  // Locked (or read-only) wins over an open flag: a stale `editing` must never bring a\n  // live commit-on-blur field back on a page that cannot save it.\n  const editing = open && !locked && !readOnly;\n  const [draft, setDraft] = useState<T>(value);\n  const [pending, setPending] = useState(false);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const failed = hasContent(failure);\n\n  const errorId = useId();\n  const reasonId = useId();\n  const displayRef = useRef<HTMLButtonElement>(null);\n  const editorRef = useRef<HTMLDivElement>(null);\n  const alert = useAnnounce({ politeness: \"assertive\" });\n\n  // One edit ends once: Enter in a NumberInput commits through its own `onCommit` and\n  // then reaches the field's Enter; a save that closes the editor unmounts the focused\n  // control, which some browsers answer with a blur. The second ending is a no-op.\n  const ended = useRef(false);\n  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mounted = useRef(true);\n  // The latest draft for the deferred blur check, which runs after a render.\n  const draftRef = useRef(draft);\n  useEffect(() => {\n    draftRef.current = draft;\n  });\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n      if (blurTimer.current) clearTimeout(blurTimer.current);\n    };\n  }, []);\n\n  // Seed the draft when the editor opens — from wherever the open came (the button, a\n  // controlled `editing`). During render, like DangerConfirm's wipe, so no frame shows\n  // the editor holding the previous edit's text.\n  const [wasEditing, setWasEditing] = useState(editing);\n  if (wasEditing !== editing) {\n    setWasEditing(editing);\n    if (editing) {\n      setDraft(value);\n      setFailure(null);\n      setPending(false);\n    }\n  }\n  // An open editor that a lock (or `readOnly`) took away is closed for good, not\n  // merely hidden until the lock lifts.\n  if (openState && !editing && editingProp === undefined) setOpenState(false);\n\n  // Focus follows the edit: into the editor when it opens, back to the value when it\n  // closes — but only if focus went down with the editor (Enter, Escape, a save that\n  // resolved under it). A save that came from focus LEAVING keeps focus where it went.\n  const prevEditing = useRef(editing);\n  useEffect(() => {\n    const changed = prevEditing.current !== editing;\n    prevEditing.current = editing;\n    if (!changed) return;\n    if (editing) {\n      // A fresh edit, which may end once. Here rather than in the seed above: a ref is\n      // not written during render, and no event can end the edit before this runs.\n      ended.current = false;\n      const control = editorRef.current?.querySelector<HTMLElement>(\n        \"input:not([type=hidden]), textarea, select, [contenteditable='true'], [tabindex]:not([tabindex='-1']), button\",\n      );\n      control?.focus();\n      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();\n      return;\n    }\n    // However it closed — a save, Escape, a lock taking it away — a blur check still\n    // queued from the editor has nothing left to save.\n    ended.current = true;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (lost) displayRef.current?.focus();\n  }, [editing]);\n\n  const setOpen = (next: boolean) => {\n    if (editingProp === undefined) setOpenState(next);\n    onEditingChange?.(next);\n  };\n\n  const fail = (caught: unknown) => {\n    ended.current = false;\n    const message = formatError ? formatError(caught) : labels.failed;\n    setFailure(hasContent(message) ? message : labels.failed);\n    alert.announce(typeof message === \"string\" && message !== \"\" ? message : labels.failed);\n    // Focus back into the editor if the failure left it nowhere (a pending field that\n    // the browser let go of); never pulled back from somewhere the user went.\n    const active = document.activeElement;\n    if (active === null || active === document.body) {\n      editorRef.current?.querySelector<HTMLElement>(\"input, textarea, select, [tabindex]\")?.focus();\n    }\n  };\n\n  const save = (next: T = draftRef.current) => {\n    if (!editing || ended.current || pending) return;\n    ended.current = true;\n    if (next !== draftRef.current) setDraft(next);\n    if (isEqual(next, value)) {\n      setOpen(false);\n      return;\n    }\n    let result: unknown;\n    try {\n      result = onCommit(next);\n    } catch (caught) {\n      fail(caught);\n      return;\n    }\n    const promise = asPromise(result);\n    if (!promise) {\n      setOpen(false);\n      return;\n    }\n    setPending(true);\n    setFailure(null);\n    promise.then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setOpen(false);\n      },\n      (caught: unknown) => {\n        if (!mounted.current) return;\n        setPending(false);\n        fail(caught);\n      },\n    );\n  };\n\n  const cancel = () => {\n    // A request that has left cannot be called back; Escape waits for it.\n    if (!editing || pending) return;\n    ended.current = true;\n    setOpen(false);\n  };\n\n  const change = (next: T) => {\n    if (pending) return;\n    setDraft(next);\n    // Now, not after the render: a blur check scheduled before that render reads it.\n    draftRef.current = next;\n    // The failure described the draft that was sent; once edited it describes nothing\n    // on screen, and the next save (or blur) is a fresh attempt.\n    setFailure(null);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      // Ours, not the dialog's or the popover's around the field: claimed on the kit's\n      // Escape stack (Wave 2, DUP-1), and stopped for anything else listening.\n      claimEscape(e);\n      e.stopPropagation();\n      cancel();\n      return;\n    }\n    // Not mid-composition: Enter there picks the IME's candidate (Japanese, Chinese) —\n    // and Safari reports the Enter that ended one as keyCode 229 (`isImeEnter`).\n    if (e.key === \"Enter\" && !isImeEnter(e) && !e.shiftKey) {\n      e.preventDefault();\n      save();\n    }\n  };\n\n  // Leaving the editor saves. Deferred one task, and cancelled by any focus that lands\n  // back inside: React reports focus moves through PORTALS to the component tree, so a\n  // calculator popover or a phone keypad the editor opened counts as inside, which a\n  // DOM `contains` check would get wrong. A failure on screen holds the editor: the\n  // user is looking at why, and moving away is not a retry.\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = setTimeout(() => {\n      blurTimer.current = null;\n      if (!mounted.current || failed) return;\n      save();\n    }, 0);\n  };\n  const onFocus = () => {\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n  };\n\n  const private_ = redact ? { \"data-private\": true } : undefined;\n  const shown = display ? display(value) : value === null || value === undefined ? \"\" : String(value);\n  const content = hasContent(shown) ? (\n    shown\n  ) : (\n    <span className=\"text-muted\">{placeholder ?? labels.empty}</span>\n  );\n  const alignClass = align === \"end\" ? \"text-end\" : \"text-start\";\n\n  let body: ReactNode;\n  if (readOnly) {\n    body = (\n      <span {...private_} className={cn(\"block min-w-0\", VALUE_TRUNCATE, alignClass)}>\n        {content}\n      </span>\n    );\n  } else if (editing) {\n    const describedBy = failed ? errorId : undefined;\n    const editorProps: InlineEditorProps<T> = {\n      value: draft,\n      onChange: change,\n      commit: save,\n      cancel,\n      pending,\n      label,\n      invalid: failed,\n      describedBy,\n      inputProps: {\n        \"aria-label\": label,\n        \"aria-invalid\": failed || undefined,\n        \"aria-describedby\": describedBy,\n        readOnly: pending,\n      },\n    };\n    body = (\n      // A wrapper for the keys and the focus, not a control: the keys belong to the\n      // field inside it, which is what has focus.\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- see above\n      <div\n        ref={editorRef}\n        {...private_}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        aria-busy={pending || undefined}\n        className=\"min-w-0\"\n      >\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">\n            {editor ? (\n              <RenderEditor render={editor} {...editorProps} />\n            ) : (\n              <Input\n                {...inputProps}\n                {...editorProps.inputProps}\n                value={String(draft ?? \"\")}\n                onChange={(e) => change(e.target.value as unknown as T)}\n                className={cn(\"px-2 py-1\", alignClass, inputProps?.className)}\n              />\n            )}\n          </div>\n          {/* Decorative: `aria-busy` on the wrapper says it. */}\n          {pending && <Spinner label={null} className=\"size-4 shrink-0\" />}\n        </div>\n        {failed && (\n          <p id={errorId} className={FIELD_ERROR_CLASS}>\n            {failure}\n          </p>\n        )}\n      </div>\n    );\n  } else if (locked) {\n    // Button's `disabledReason` path, spelled out for a button that must look like\n    // the value rather than like a Button: focusable, `aria-disabled`, every\n    // activation swallowed, the reason in the kit Tooltip and in a `hidden` copy that\n    // describes it. The button in a FRAGMENT so the Tooltip does not add the bubble as\n    // a second description of the same sentence.\n    body = (\n      <Tooltip label={disabledReason} className=\"flex w-full min-w-0\">\n        <>\n          <button\n            ref={displayRef}\n            type=\"button\"\n            {...private_}\n            aria-disabled\n            aria-describedby={reasonId}\n            onClick={(e) => e.preventDefault()}\n            className={cn(\n              \"block w-full min-w-0 cursor-not-allowed rounded-sm focus:outline-none\",\n              VALUE_TRUNCATE,\n              FOCUS_RING,\n              alignClass,\n            )}\n          >\n            {content}\n          </button>\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  } else {\n    body = (\n      // Lazy: a table of these mounts no bubble until one is hovered or focused, and\n      // the closed bubble's text is in no ancestor's accessible name.\n      <Tooltip label={labels.edit(label)} lazy className=\"flex w-full min-w-0\">\n        <button\n          ref={displayRef}\n          type=\"button\"\n          {...private_}\n          onClick={() => setOpen(true)}\n          className={cn(\n            \"block w-full min-w-0 rounded-sm underline-offset-2 hover:underline focus:outline-none\",\n            VALUE_TRUNCATE,\n            FOCUS_RING,\n            alignClass,\n          )}\n        >\n          {content}\n        </button>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-editing={editing || undefined}>\n      {body}\n      {/* Always mounted: a live region that mounts with its message is usually missed. */}\n      <span {...alert.regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,155 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type ComboClearValue, type ComboOption } from "./combobox-core.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type CommitScope } from "./write-lock.js";
+/** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}
+ *  for why the div's spellings of them are omitted. */
+export interface InlineEntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange"> {
+    /** Selected option id; `null` or `clearValue` when nothing is selected. */
+    value: V | C | null;
+    /** Required and unanswered — see {@link Combobox}'s `invalid`. */
+    invalid?: boolean;
+    /** What is wrong with the value — see {@link Combobox}'s `error`. */
+    error?: ReactNode;
+    /** Standing advice — see {@link Combobox}'s `hint` (keksdose K4). */
+    hint?: ReactNode;
+    /** A picked/typed option emits its id; emptying the field, or the "×", emits
+     *  `clearValue`. */
+    onChange: (v: V | C) => void;
+    /** What a clear emits — `null` by default, `""` for a schema that wants an empty
+     *  string. See {@link EntityCombobox}'s `clearValue`. */
+    clearValue?: C;
+    options: ComboOption<V>[];
+    /** The visible label — see {@link Combobox}'s `label` (a ReactNode since 0.34, API-9). */
+    label?: ReactNode;
+    id?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`
+     *  below, open the list with it. A click-the-value editor needs it: the cell
+     *  the user clicked names the field the editor should land the caret in, and
+     *  without a passthrough this component's fixed prop list puts the `<input>`
+     *  out of a caller's reach entirely (Keksdose feedback live #218). */
+    autoFocus?: boolean;
+    /** Phone sheet only — the anchored list has the field itself to type in. Falls
+     *  back to `placeholder`, then to `combobox.search` from the {@link UiKitProvider}. */
+    searchPlaceholder?: string;
+    /** Phone sheet only: a full screen showing nothing has to say why. The anchored
+     *  list simply does not open. Default: `combobox.noResults` from the provider. */
+    emptyLabel?: string;
+    closeLabel?: string;
+    /** The phone sheet's heading (and, as a string, its accessible name) for a field
+     *  whose label is drawn by someone else — a bound field's label;
+     *  `RhfInlineEntityCombobox` hands its label over here (0.24). Default: `label`.
+     *  See {@link Combobox}'s `sheetTitle`. */
+    sheetTitle?: ReactNode;
+    /** Offer a clear "×" in place of the chevron whenever something is selected.
+     *
+     *  Emptying the text already clears (see {@link reconcile}), and on a desktop that
+     *  is the fast way. It is not a way at all on a PHONE: touching the field opens the
+     *  full-screen sheet, which covers the very input the text would have been deleted
+     *  from — so a field that had been answered could not be UNanswered by any gesture
+     *  the screen offered (Keksdose live #236, filed from a phone). The "×" is the one
+     *  affordance both shells share, and it clears without opening anything. */
+    clearable?: boolean;
+    clearLabel?: string;
+    /**
+     * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a picker
+     * that SAVES on change. keksdose G2: the statement review's account picker IS the
+     * write (picking re-runs the duplicate check on the server), and on the read-only demo
+     * the app wrapped it in a hand-made Tooltip over a native `disabled` — out of the tab
+     * order, so the reason never reached a keyboard.
+     *
+     * With a reason the input stays focusable and `aria-disabled`, is `readOnly` (the
+     * settled grey), opens no list or sheet, offers no clear "×", and no pick, typed
+     * label or clear reaches `onChange`; the reason is in the kit {@link Tooltip} and on
+     * the input's `aria-describedby`. Wins over `disabled`. Use it CONTROLLED, as the
+     * component always is: the shown label is `value`'s.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * 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).
+     * A picker inside a form with its own Save stays editable under the lock — leave this
+     * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.
+     */
+    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;
+    /**
+     * A last row that makes a new record from what was typed — keksdose G9, whose "Create
+     * cash account" had to become a separate button because this picker had no such row.
+     *
+     * Shown while the typed query is non-empty and names no option exactly
+     * (case-insensitive — an exact hit is a record the list already shows), worded
+     * `createLabel(query)`, default `combobox.create`: "Create “{query}”". The arrow keys
+     * reach it like an option; Enter or a click calls `onCreate(query)` and closes the
+     * list. Making the record, and then passing its id as `value`, is the caller's: the
+     * field shows the old selection until it does.
+     *
+     * The same rule as {@link EntityCombobox}'s `onCreate`, so the family agrees. It is a
+     * row of the LIST, not an option: it is never `aria-selected`, never matched by a
+     * typed label on blur, and never sorted among the records the way a sentinel option
+     * would be (the reason keksdose gave for the separate button).
+     */
+    onCreate?: (query: string) => void;
+    /** The create row's words for a query. Default: `combobox.create` from the
+     *  {@link UiKitProvider}, else English `Create “{query}”`. */
+    createLabel?: (query: string) => string;
+    /**
+     * Offer the create row with NOTHING typed too, worded as this — keksdose's "Create cash
+     * account", which mints an account under a default name and so needs no query.
+     * `onCreate` then receives `""`, and the caller supplies the name. Left out, the row
+     * needs a query.
+     *
+     * One string rather than a switch: a row with no query has nothing to quote, so the
+     * kit cannot word it — "Create “”" says nothing — and naming it is what turns it on.
+     * With both, one handler serves both rows:
+     *
+     * ```tsx
+     * onCreate={(name) => createCash(name || t("cash_account_default_name"))}
+     * createEmptyLabel={t("create_cash_account")}
+     * ```
+     */
+    createEmptyLabel?: string;
+    /**
+     * The create row WRITES while picking does not — keksdose dev#496: on the read-only
+     * demo choosing the cash account is draft state and stays live, minting one is a
+     * write. Under a locked {@link WriteLockProvider} the row stays in the list, dimmed and
+     * passed over by the arrows, with the lock's reason as its second line (a hover is the
+     * one explanation a phone cannot show), and `onCreate` is not called. Not needed with
+     * `commit`: a locked field opens no list at all.
+     */
+    createCommit?: CommitScope;
+    /**
+     * The `<input>` — the focusable control, the one a reader types in — as a React 19
+     * ref prop (0.24, kastlan). Its account picker is this component inside an
+     * `RhfField` render, and react-hook-form's focus-on-error calls `focus()` on whatever
+     * `field.ref` is handed: with no ref there was nothing to hand it, so a line-item form
+     * whose account was missing failed its submit and left the caret where it was. Pass
+     * `field.ref` here, or use `RhfInlineEntityCombobox`, which does. The wrapper is not
+     * reachable this way — focus and selection are the input's. See {@link Combobox}'s `ref`.
+     */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input
+ * with the shared field styling, chevron and inline as-you-type filtering) but
+ * the value is an option id, not free text. Built so an entity picker can sit
+ * next to a free-text combobox without any visible difference — a button-trigger
+ * panel picker ({@link EntityCombobox}) never matches an input field exactly.
+ *
+ * Text-vs-value reconciliation: the input's text is transient. Picking a row or
+ * typing an exact (unique) label commits that option; emptying the text commits
+ * a clear; anything else reverts to the selected option's label on blur/Escape.
+ *
+ * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}
+ * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto
+ * this component and must not lose its sheet). The sheet carries its OWN query state
+ * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a
+ * sheet that emptied it to show the full list would read as "the user cleared the
+ * field" the moment it closed.
+ */
+export declare function InlineEntityCombobox<V extends string | number, C extends ComboClearValue = null>(props: InlineEntityComboboxProps<V, C>): import("react").JSX.Element;