@eifi1/ui-kit 0.23.0 → 0.24.1

package/src/feedback/feedback-attachment.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { Camera, FileText, Image as ImageIcon, Paperclip, X } from "lucide-react";
 import { Button, IconButton, Spinner } from "../components/ui";
+import type { ButtonSize, ButtonVariant } from "../components/ui";
 import { DEFAULT_FILE_PICKER_LABELS, formatAccept } from "../components/file-button";
 import { useCommitReason } from "../components/write-lock";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels";
@@ -186,9 +187,40 @@ interface FeedbackAttachmentFieldBaseProps {
    *  in, whose common parent is where the event bubbles to. Ignored when
    *  `documentPaste` is set. */
   pasteFrom?: RefObject<HTMLElement | null>;
+  /**
+   * The add and capture buttons' look (0.24.0, keksdose) — Button's own `variant`.
+   * Default `"secondary"`, the look they always had.
+   *
+   * keksdose's support chat puts this field in ChatComposer's `attachmentSlot`, in the
+   * row with Send, where its own picker had been a `ghost` / `sm` FileButton: two
+   * bordered full-size buttons under a chat box read as a second form, and the field
+   * gave no way to say otherwise. Every mode, wherever the buttons appear; the chips'
+   * remove buttons keep their size.
+   */
+  buttonVariant?: ButtonVariant;
+  /** The add and capture buttons' size — Button's own `size`, with `buttonVariant`.
+   *  Default `"md"`. `"sm"` draws their icons at 14px, as a small button's are. */
+  buttonSize?: ButtonSize;
   className?: string;
 }
 
+/**
+ * The field's root, in every mode. `relative` for the `sr-only` file input (see the
+ * single field). `min-w-0 max-w-full` (0.24.0, keksdose) because the field is often a
+ * FLEX ITEM — ChatComposer's `attachmentSlot` row, FormActions' `start` — and a flex item
+ * is never narrower than its content's min-content width unless told it may be. A chip
+ * truncates its name only inside a box of bounded width, and a screenshot's name
+ * ("Screenshot 2026-10-03 at 07.45.12.png") was the min-content: the field grew to it
+ * and ran off a 390px phone composer (measured in Chromium: the field's right edge at
+ * 592px, the page 614px wide). keksdose passed `className="min-w-0 max-w-full"` at both
+ * its callers to stop it; here once, for every host. In normal flow — a dialog, a note
+ * editor — both are no-ops.
+ */
+const FIELD_ROOT = "relative min-w-0 max-w-full";
+
+/** Paperclip and camera at the size the button's text is: 16px at `md`, 14px at `sm`. */
+const buttonIcon = (size: ButtonSize) => (size === "sm" ? "size-3.5" : "size-4");
+
 /** One file: choosing a second means removing the first. The field's only mode until 0.15.5. */
 export interface FeedbackAttachmentFieldSingleProps extends FeedbackAttachmentFieldBaseProps {
   multiple?: false;
@@ -354,6 +386,8 @@ function SingleField({
   documentPaste = false,
   pasteFrom,
   disabled = false,
+  buttonVariant = "secondary",
+  buttonSize = "md",
   className,
 }: FeedbackAttachmentFieldSingleProps) {
   // The object URL is keyed to the file it was made for, so a stale one (from the
@@ -406,8 +440,9 @@ function SingleField({
       // `relative` for the same reason as FileDropzone: the `sr-only` file input below
       // is `position: absolute`, and without a positioned ancestor it is laid out
       // against the initial containing block — extending the DOCUMENT height to its own
-      // offset and producing a phantom second scrollbar on any long page.
-      className={cn("relative", className)}
+      // offset and producing a phantom second scrollbar on any long page. And
+      // `min-w-0 max-w-full`, so a long name truncates in a flex row: see FIELD_ROOT.
+      className={cn(FIELD_ROOT, className)}
       onPaste={onPaste}
     >
       <Heading text={labelsProp?.attachment} />
@@ -439,11 +474,12 @@ function SingleField({
           <div className="flex flex-wrap gap-2">
             <Button
               type="button"
-              variant="secondary"
+              variant={buttonVariant}
+              size={buttonSize}
               disabled={disabled}
               onClick={() => fileInputRef.current?.click()}
             >
-              <Paperclip className="size-4" /> {text.attachmentAdd}
+              <Paperclip className={buttonIcon(buttonSize)} /> {text.attachmentAdd}
             </Button>
             {onCaptureScreenshot && (
               <CaptureButton
@@ -451,6 +487,8 @@ function SingleField({
                 onFile={pick}
                 label={text.attachmentCapture}
                 disabled={disabled}
+                variant={buttonVariant}
+                size={buttonSize}
               />
             )}
           </div>
@@ -490,6 +528,8 @@ function MultipleField({
   documentPaste = false,
   pasteFrom,
   disabled = false,
+  buttonVariant = "secondary",
+  buttonSize = "md",
   className,
 }: FeedbackAttachmentFieldMultipleProps) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -592,7 +632,7 @@ function MultipleField({
   ];
 
   return (
-    <div ref={rootRef} className={cn("relative space-y-2", className)} onPaste={onPaste}>
+    <div ref={rootRef} className={cn(FIELD_ROOT, "space-y-2", className)} onPaste={onPaste}>
       <Heading text={labelsProp?.attachment} className="mb-0" />
       {chips.length > 0 && (
         // One chip per row, full width: wrapped chips of name-dependent widths made a
@@ -630,12 +670,13 @@ function MultipleField({
           {room > 0 && (
             <Button
               type="button"
-              variant="secondary"
+              variant={buttonVariant}
+              size={buttonSize}
               data-attachment-action=""
               disabled={disabled}
               onClick={() => fileInputRef.current?.click()}
             >
-              <Paperclip className="size-4" /> {text.attachmentAdd}
+              <Paperclip className={buttonIcon(buttonSize)} /> {text.attachmentAdd}
             </Button>
           )}
           {canCapture && onCaptureScreenshot && (
@@ -644,6 +685,8 @@ function MultipleField({
               onFile={capture}
               label={text.attachmentCapture}
               disabled={disabled}
+              variant={buttonVariant}
+              size={buttonSize}
               data-attachment-action=""
             />
           )}
@@ -697,6 +740,8 @@ function RefsField({
   disabled = false,
   commit: commits,
   disabledReason: ownDisabledReason,
+  buttonVariant = "secondary",
+  buttonSize = "md",
   className,
 }: FeedbackAttachmentFieldRefsProps) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -827,7 +872,7 @@ function RefsField({
   const hasChips = value.length > 0 || uploads.length > 0;
 
   return (
-    <div ref={rootRef} className={cn("relative space-y-2", className)} onPaste={onPaste}>
+    <div ref={rootRef} className={cn(FIELD_ROOT, "space-y-2", className)} onPaste={onPaste}>
       <Heading text={labelsProp?.attachment} className="mb-0" />
       {hasChips && (
         <ul aria-label={text.attachmentList} className="flex flex-col gap-2">
@@ -873,13 +918,14 @@ function RefsField({
         <div className="flex flex-wrap gap-2">
           <Button
             type="button"
-            variant="secondary"
+            variant={buttonVariant}
+            size={buttonSize}
             data-attachment-action=""
             disabled={disabled}
             disabledReason={reason}
             onClick={() => fileInputRef.current?.click()}
           >
-            <Paperclip className="size-4" /> {text.attachmentAdd}
+            <Paperclip className={buttonIcon(buttonSize)} /> {text.attachmentAdd}
           </Button>
           {onCaptureScreenshot && (
             <CaptureButton
@@ -888,6 +934,8 @@ function RefsField({
               label={text.attachmentCapture}
               disabled={disabled}
               disabledReason={reason}
+              variant={buttonVariant}
+              size={buttonSize}
               data-attachment-action=""
             />
           )}
@@ -945,6 +993,8 @@ function CaptureButton({
   label,
   disabled = false,
   disabledReason,
+  variant,
+  size,
   ...rest
 }: {
   capture: () => Promise<File | null>;
@@ -952,13 +1002,16 @@ function CaptureButton({
   label: string;
   disabled?: boolean;
   disabledReason?: ReactNode;
+  variant: ButtonVariant;
+  size: ButtonSize;
   "data-attachment-action"?: string;
 }) {
   const [capturing, setCapturing] = useState(false);
   return (
     <Button
       type="button"
-      variant="secondary"
+      variant={variant}
+      size={size}
       disabled={capturing || disabled}
       disabledReason={disabledReason}
       {...rest}
@@ -972,7 +1025,7 @@ function CaptureButton({
           .finally(() => setCapturing(false));
       }}
     >
-      <Camera className="size-4" /> {capturing ? "…" : label}
+      <Camera className={buttonIcon(size)} /> {capturing ? "…" : label}
     </Button>
   );
 }

package/src/feedback/feedback-thread.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import type { ReactNode, Ref } from "react";
+import type { ReactNode, Ref, RefObject } from "react";
 import { ImageIcon, ImageOff, Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn";
 import { formatDate, formatRelativeTime } from "../lib/format";
@@ -467,11 +467,46 @@ function toDate(value: Date | string | number): Date | null {
 /** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
  *  labels optional, since the field reads `feedbackAttachment` from the provider, and
  *  `onError` the field's own (0.23.0): it is handed the refused file and the limit too
- *  (`FeedbackAttachmentErrorInfo`), and a `(kind) => …` handler still fits. */
+ *  (`FeedbackAttachmentErrorInfo`), and a `(kind) => …` handler still fits. Since
+ *  0.24.0 also the field's `buttonVariant` / `buttonSize`, for a composer whose row
+ *  wants smaller or quieter attach buttons than the bordered `md` default. */
 export type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels" | "onError"> & {
   labels?: Partial<FeedbackAttachmentLabels>;
   onError?: FeedbackAttachmentFieldSingleProps["onError"];
-};
+} & Pick<FeedbackAttachmentFieldSingleProps, "buttonVariant" | "buttonSize">;
+
+/**
+ * What a render-prop {@link FeedbackComposerProps.attachmentSlot} is handed (0.24.0,
+ * keksdose).
+ *
+ * keksdose's support chat put `<FeedbackAttachmentField refs>` in the slot and a
+ * screenshot pasted into the reply box never reached it: the box is the field's
+ * sibling, so the paste bubbles to their common parent — the composer's root — and the
+ * field hears it only through `pasteFrom`, which needs that root. The composer kept it
+ * to itself, so keksdose wrapped the whole composer in a ref'd `<div>` of its own just
+ * to have an element to hand over.
+ */
+export interface FeedbackComposerSlotContext {
+  /**
+   * The composer's root, round the text box and this slot — the field's `pasteFrom`,
+   * as it is: `pasteFrom={slot.root}`.
+   *
+   * A ref, not the element, because `pasteFrom` is one: the field reads `.current` in
+   * an effect, and the slot renders INSIDE this root, so the two are committed together
+   * and React attaches the root before any effect of the slot's runs — the first paste
+   * after the first paint already lands. The element itself would be `null` on the
+   * first render (it does not exist yet) and could only arrive by a second render
+   * through state; the ref is the same object every render, so the field's listener is
+   * added once and never re-added.
+   *
+   * With the built-in `attachment` on as well, it listens on this root too: hand the
+   * root to one field only, or an image pasted once is attached twice.
+   */
+  root: RefObject<HTMLElement | null>;
+  /** The composer's `pending` — a send is in flight. For the field's `disabled`
+   *  (keksdose G5b): the message carries the attachments as they were at the press. */
+  pending: boolean;
+}
 
 export interface FeedbackComposerProps {
   /**
@@ -496,8 +531,21 @@ export interface FeedbackComposerProps {
    * The slot is the host's picker plus the chips of what is uploaded; the upload, the
    * refs and clearing them once `onSend` resolves stay with the host. Pair it with
    * `canSend`.
+   *
+   * A node, or (0.24.0) a function of {@link FeedbackComposerSlotContext} that returns
+   * one — for a field that wants the composer's root as its `pasteFrom`, so a
+   * screenshot pasted into the box reaches it, and `pending` for its `disabled`:
+   *
+   * ```tsx
+   * attachmentSlot={({ root, pending }) => (
+   *   <FeedbackAttachmentField refs pasteFrom={root} disabled={pending} … />
+   * )}
+   * ```
+   *
+   * Called once per render of the composer, and not at all while `disabledReason`
+   * stands in for it.
    */
-  attachmentSlot?: ReactNode;
+  attachmentSlot?: ReactNode | ((slot: FeedbackComposerSlotContext) => ReactNode);
   /**
    * Whether Send is enabled, over the composer's own rule (some text in the box) —
    * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
@@ -718,6 +766,14 @@ export function FeedbackComposer({
   };
 
   const config = attachment === true ? {} : attachment || null;
+  // The slot is handed the ref OBJECT, for a field's `pasteFrom`, which reads `.current`
+  // in an effect once the root is attached — nothing reads it during this render (see
+  // FeedbackComposerSlotContext.root).
+  const slot =
+    typeof attachmentSlot === "function"
+      ? // eslint-disable-next-line react-hooks/refs -- handed on for an effect, not read here
+        attachmentSlot({ root, pending })
+      : attachmentSlot;
 
   return (
     <div {...rootAttributes} ref={root} className={cn("space-y-2", className)}>
@@ -756,7 +812,7 @@ export function FeedbackComposer({
         }}
       />
       <div className="flex flex-wrap items-end justify-between gap-2">
-        {config || attachmentSlot != null ? (
+        {config || slot != null ? (
           <div className="flex min-w-0 flex-wrap items-end gap-2">
             {config && (
               <FeedbackAttachmentField
@@ -767,11 +823,13 @@ export function FeedbackComposer({
                 maxBytes={config.maxBytes}
                 onError={config.onError}
                 onCaptureScreenshot={config.onCaptureScreenshot}
+                buttonVariant={config.buttonVariant}
+                buttonSize={config.buttonSize}
                 // The box is this field's sibling; a paste in it bubbles to `root`.
                 pasteFrom={root}
               />
             )}
-            {attachmentSlot}
+            {slot}
           </div>
         ) : (
           <span />
@@ -827,3 +885,5 @@ export type ChatComposerHandle = FeedbackComposerHandle;
 /** {@link FeedbackComposerLabels}, for {@link ChatComposer} — still the `feedbackComposer`
  *  namespace of the provider. */
 export type ChatComposerLabels = FeedbackComposerLabels;
+/** {@link FeedbackComposerSlotContext}, for {@link ChatComposer}'s `attachmentSlot`. */
+export type ChatComposerSlotContext = FeedbackComposerSlotContext;

package/src/lib/strip-fade.ts

@@ -5,8 +5,8 @@ import { useLayoutEffect, useState, type RefObject } from "react";
 export const TAB_FADE_PX = 24;
 
 /**
- * Shared by Tabs' strip and AppShell's scrolling phone sub-nav; internal, not part of
- * the package's surface.
+ * Shared by Tabs' strip, AppShell's scrolling phone sub-nav and (0.24) ColumnRoleTable's
+ * preview; internal, not part of the package's surface.
  *
  * Which ends of a sideways-scrolling strip have tabs cut off behind them, as the
  * `mask-image` that fades those ends out — or `undefined` while everything fits.

package/src/rhf/fields.tsx

@@ -9,6 +9,7 @@
  *   <RhfDateField name="start" label="Start" />
  *   <RhfSelect name="type" label="Type" options={TYPES} />
  *   <RhfCombobox name="tenantId" label="Tenant" options={tenants} clearable />
+ *   <RhfInlineEntityCombobox name="accountId" label="Account" options={accounts} />
  *   <RhfCheckbox name="isDefault" label="Default account" />
  *   <RhfTimeInput name="meetingTime" label="Time" />
  *   <RhfDateRangePicker fromName="periodFrom" toName="periodTo" label="Period" />
@@ -78,7 +79,12 @@ import {
 } from "../components/toggle-group";
 import { Checkbox, type CheckboxProps } from "../components/checkbox";
 import { EntityCombobox, type EntityComboboxProps } from "../components/entity-combobox";
-import { Combobox, type ComboboxProps } from "../components/combobox";
+import {
+  Combobox,
+  InlineEntityCombobox,
+  type ComboboxProps,
+  type InlineEntityComboboxProps,
+} from "../components/combobox";
 import type { ComboClearValue } from "../components/combobox-core";
 import { cn } from "../lib/cn";
 
@@ -1769,11 +1775,17 @@ export type RhfComboboxProps<
     | "emptyLabel"
     | "clearable"
     | "clearLabel"
+    | "closeLabel"
     | "onCreate"
     | "createLabel"
+    | "createEmptyLabel"
+    | "createCommit"
+    | "commit"
+    | "disabledReason"
     | "filter"
     | "minChars"
     | "debounceMs"
+    | "aria-label"
   > & {
     /** What a clear stores — the picker's `clearValue`. Default `null`; `""` for a
      *  schema that spells "no choice" as an empty string. */
@@ -1791,6 +1803,8 @@ function EntityControl<V extends string | number>({
   describedBy,
   clearValue,
   comboClassName,
+  sheetTitle,
+  focusRef,
   comboProps,
 }: {
   field: ControllerRenderProps;
@@ -1801,12 +1815,15 @@ function EntityControl<V extends string | number>({
   describedBy: string | undefined;
   clearValue: ComboClearValue;
   comboClassName?: string;
+  sheetTitle: ReactNode;
+  /** `field.ref`, handed over on its own so the compiler reads `field` as data. */
+  focusRef: ControllerRenderProps["ref"];
   comboProps: Omit<RhfComboboxProps<FieldValues, string, V>, keyof RhfFieldBaseProps | "clearValue" | "comboClassName">;
 }) {
   const box = useRef<HTMLDivElement>(null);
   // EntityCombobox puts `id` and the ARIA below on its trigger, so the label's
-  // `htmlFor` names it, the hint describes it and the focus handle finds it by id.
-  useFocusHandle(field.ref, () => document.getElementById(id));
+  // `htmlFor` names it and the hint describes it; `field.ref` reaches the trigger
+  // through the picker's own `ref` (0.24), as RhfCountrySelect's does.
   // EntityCombobox reports no blur: focus leaving the picker marks the field touched.
   const onBlur = field.onBlur;
   useLayoutEffect(() => {
@@ -1819,7 +1836,11 @@ function EntityControl<V extends string | number>({
   return (
     <div ref={box}>
       <EntityCombobox<V, ComboClearValue>
+        // The form's label titles the phone sheet: the picker is not handed `label`,
+        // which the FormLabel above already draws.
+        sheetTitle={sheetTitle}
         {...comboProps}
+        ref={focusRef}
         className={comboClassName}
         id={id}
         aria-describedby={describedBy}
@@ -1841,6 +1862,14 @@ function EntityControl<V extends string | number>({
  * The kit's {@link EntityCombobox}: an id-keyed pick from `options` or `loadOptions`.
  * Stores the option's `value`, or `clearValue` on a clear (only offered with
  * `clearable`).
+ *
+ * 0.24: `field.ref` goes through the picker's own `ref` to its trigger (it used to be
+ * a focus handle that found the trigger by id — the same element, now by the route
+ * every other binding takes); the write lock (`commit`, `disabledReason`), the create
+ * row's `createEmptyLabel` / `createCommit`, `closeLabel` and `aria-label` pass
+ * through; and the form's label titles the phone sheet, which fell back to the
+ * placeholder. For the INLINE picker — a text input, the account field typed into —
+ * see {@link RhfInlineEntityCombobox}.
  */
 export function RhfCombobox<
   TFieldValues extends FieldValues = FieldValues,
@@ -1876,6 +1905,8 @@ export function RhfCombobox<
           describedBy={describedBy}
           clearValue={clearValue}
           comboClassName={comboClassName}
+          sheetTitle={hasContent(label) ? label : undefined}
+          focusRef={field.ref}
           comboProps={comboProps}
         />
       )}
@@ -1883,6 +1914,123 @@ export function RhfCombobox<
   );
 }
 
+type OwnInlineEntityComboboxProps<V extends string | number> = Omit<
+  InlineEntityComboboxProps<V, ComboClearValue>,
+  | "value"
+  | "defaultValue"
+  | "onChange"
+  | "onBlur"
+  | "label"
+  | "hint"
+  | "error"
+  | "invalid"
+  | "disabled"
+  | "className"
+  | "id"
+  | "ref"
+  | "clearValue"
+>;
+
+export type RhfInlineEntityComboboxProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  V extends string | number = string | number,
+  TTransformed = TFieldValues,
+> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> &
+  OwnInlineEntityComboboxProps<V> & {
+    /** What a clear stores — emptying the text, or the "×" with `clearable`. Default
+     *  `null`; `""` for a schema that spells "no choice" as an empty string. The
+     *  picker reads either back as empty. */
+    clearValue?: ComboClearValue;
+    /** Classes for the picker — `className` is the item's box. As {@link RhfCombobox}'s. */
+    comboClassName?: string;
+  };
+
+/**
+ * {@link InlineEntityCombobox} bound to one field, which stores the chosen option's
+ * `value` (an id), or `clearValue` once the text is emptied or the "×" pressed.
+ *
+ * kastlan asked for it (0.24): its account picker IS an `InlineEntityCombobox` — the
+ * account number is typed straight into the field — and the budget line-item form
+ * wired it through {@link RhfField}'s render. The picker took no `ref`, so react-hook-
+ * form's focus-on-error had nothing to focus: a line item saved without an account
+ * failed its submit and left the caret where it was, the one field on the form a
+ * failed submit could not take you to. (The same gap {@link RhfCountrySelect} closed
+ * for the address form's country in 0.23.)
+ *
+ * Bound the way {@link RhfCountrySelect} is: `field.ref` reaches the `<input>` (the
+ * picker's `ref`, 0.24), the form's error paints the input and is the shell's message
+ * under it, and the hint is the shell's description — so neither is ever handed to the
+ * picker, and its box never changes when one comes or goes. The form's label names
+ * the input through `<label for>` and titles the phone sheet (`sheetTitle`); the picker
+ * draws no floating label of its own. Focus leaving the picker marks the field
+ * touched.
+ *
+ * Everything else is the picker's and passes through: `commit` and `disabledReason`
+ * (a picker whose choice saves stays focusable under a lock and says why), `clearable`,
+ * `autoFocus`, `aria-label` for an unlabelled cell, and the create row — `onCreate`,
+ * `createLabel`, `createEmptyLabel`, `createCommit`. Making the record is the
+ * caller's, and so is storing its id once it exists:
+ *
+ * ```tsx
+ * <RhfInlineEntityCombobox<LineItem, "account_id", number>
+ *   name="account_id" label="Account" required options={accounts}
+ *   rules={{ required: "Choose an account" }}
+ *   onCreate={async (name) => form.setValue("account_id", (await createAccount(name)).id)} />
+ * ```
+ *
+ * For the button-shaped picker with an async `loadOptions`, see {@link RhfCombobox}.
+ */
+export function RhfInlineEntityCombobox<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  V extends string | number = string | number,
+  TTransformed = TFieldValues,
+>({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  clearValue = null,
+  comboClassName,
+  ...comboProps
+}: RhfInlineEntityComboboxProps<TFieldValues, TName, V, TTransformed>) {
+  return (
+    <RhfField
+      {...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className }}
+      render={({ field, invalid }) => {
+        const value: unknown = field.value;
+        return (
+          // FormControl clones this element with `id` / `aria-describedby` /
+          // `aria-invalid`, which the picker routes to its <input>.
+          <InlineEntityCombobox<V, ComboClearValue>
+            aria-required={required || undefined}
+            // The form's label is the phone sheet's heading — the picker is not handed
+            // `label`, which the FormLabel above already draws. A caller's own wins.
+            sheetTitle={hasContent(label) ? label : undefined}
+            {...comboProps}
+            className={comboClassName}
+            ref={field.ref}
+            value={(value ?? null) as V | ComboClearValue | null}
+            clearValue={clearValue}
+            onChange={(v) => field.onChange(v)}
+            // The wrapper's blur, which the <input>'s bubbles to after the picker has
+            // judged any loose text — so the value is in before the field is touched.
+            onBlur={field.onBlur}
+            disabled={field.disabled}
+            invalid={invalid}
+          />
+        );
+      }}
+    />
+  );
+}
+
 export type RhfTextComboboxProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
@@ -1899,6 +2047,9 @@ export type RhfTextComboboxProps<
     | "optionAdornment"
     | "autoFocus"
     | "aria-label"
+    | "closeLabel"
+    | "commit"
+    | "disabledReason"
   > & {
     /** Classes for the combobox. */
     comboClassName?: string;
@@ -1939,6 +2090,8 @@ export function RhfTextCombobox<
           id={id}
           describedBy={describedBy}
           className={comboClassName}
+          sheetTitle={hasContent(label) ? label : undefined}
+          focusRef={field.ref}
           comboProps={comboProps}
         />
       )}
@@ -1954,6 +2107,8 @@ function TextComboControl({
   id,
   describedBy,
   className,
+  sheetTitle,
+  focusRef,
   comboProps,
 }: {
   field: ControllerRenderProps;
@@ -1963,16 +2118,22 @@ function TextComboControl({
   id: string;
   describedBy: string | undefined;
   className?: string;
+  sheetTitle: ReactNode;
+  /** `field.ref` — see EntityControl. */
+  focusRef: ControllerRenderProps["ref"];
   comboProps: Omit<RhfTextComboboxProps, keyof RhfFieldBaseProps | "comboClassName">;
 }) {
   // The combobox routes `id` and its ARIA to its <input>, so the label's `htmlFor`
-  // names it, the hint describes it and the focus handle finds it; the error is its
-  // own `error` prop, which it merges in after the hint.
-  useFocusHandle(field.ref, () => document.getElementById(id));
+  // names it and the hint describes it; `field.ref` reaches the <input> through the
+  // combobox's own `ref` (0.24). The error is its own `error` prop, which it merges
+  // in after the hint.
   const value: unknown = field.value;
   return (
     <Combobox
+      // The form's label titles the phone sheet (see EntityControl).
+      sheetTitle={sheetTitle}
       {...comboProps}
+      ref={focusRef}
       id={id}
       aria-describedby={describedBy}
       aria-required={required || undefined}

package/src/rhf.ts

@@ -12,7 +12,7 @@ export * from "./rhf/use-rhf-wizard-step";
 // Bound fields — one line per field (RhfTextField, RhfNumberField, RhfIntegerField, RhfMoneyField,
 // RhfDateField, RhfTextarea, RhfSelect, RhfCheckbox, RhfCombobox, RhfTextCombobox; 0.22: RhfTimeInput,
 // RhfDateRangePicker, RhfToggleGroup, RhfIbanInput, RhfPhoneInput; 0.23: RhfCountrySelect,
-// RhfMonthPicker)
+// RhfMonthPicker; 0.24: RhfInlineEntityCombobox)
 // and RhfField, the shell they are built on.
 export * from "./rhf/fields";
 // LineItems over useFieldArray.