@eifi1/ui-kit 0.22.0 → 0.24.0

package/dist/rhf/fields.d.ts

@@ -1,15 +1,20 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
 import { FieldValues, FieldPath, ControllerProps, ControllerRenderProps, ControllerFieldState } from 'react-hook-form';
-import { aR as IbanInputProps, bc as PhoneInputProps, bg as SelectProps, a$ as InputProps, bB as TextareaProps } from '../kit-labels-R8mIAc9N.js';
+import { bK as IbanInputProps, c5 as PhoneInputProps, c9 as SelectProps, bU as InputProps, cu as TextareaProps } from '../feedback-DOwPu-Il.js';
 import { NumberFieldProps } from '../components/number-field.js';
 import { DatePickerProps, DateRangePickerProps } from '../components/date-picker.js';
 import { TimeInputProps } from '../components/time-input.js';
+import { CountrySelectProps } from '../components/country-select.js';
+import { MonthPickerProps } from '../components/month-picker.js';
 import { ToggleGroupBaseProps, ToggleGroupRequiredProps, ToggleGroupClearableProps } from '../components/toggle-group.js';
 import { CheckboxProps } from '../components/checkbox.js';
 import { EntityComboboxProps } from '../components/entity-combobox.js';
-import { ComboboxProps } from '../components/combobox.js';
+import { InlineEntityComboboxProps, ComboboxProps } from '../components/combobox.js';
 import { ComboClearValue } from '../components/combobox-core.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-B7OdnM0S.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
@@ -19,15 +24,11 @@ import '../components/popover.js';
 import '../components/chip.js';
 import 'lucide-react';
 import '../components/field-sync.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
 import '../search/global-search.js';
 import '../search/search-index.js';
-import '../components/month-picker.js';
 import '../components/page-contents.js';
 import '../components/series-chart-labels.js';
 import '../components/pie-chart-labels.js';
@@ -42,9 +43,6 @@ import '../components/dialog-frame.js';
 import '../components/modal.js';
 import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
-import '../feedback-attachment-NhUm7Zga.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import '../components/account-settings-labels.js';
 import '../components/floating-panel.js';
 import '../components/bulk-action-bar.js';
@@ -69,11 +67,14 @@ import '../components/server-wake.js';
 import '../lib/server-wake.js';
 import '../components/translation-review-labels.js';
 import '../lib/translation-review.js';
-import '../components/country-select.js';
 import '../components/inline-edit-field.js';
 import '../lib/iban.js';
 import '../lib/phone.js';
 import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';
 import '../components/number-input.js';
 import '../components/calculator.js';
 import '../components/numpad-sheet.js';
@@ -232,6 +233,10 @@ type RhfMoneyFieldProps<TFieldValues extends FieldValues = FieldValues, TName ex
      *  with `rules` as well if a clamp needs explaining. */
     min?: number;
     max?: number;
+    /** Classes for the `<input>` — `className` is the item's box. {@link RhfTextField},
+     *  {@link RhfTextarea} and {@link RhfNumberField} take it; since 0.23 AmountInput
+     *  does too (keksdose G7: `text-end` for a money column). */
+    inputClassName?: string;
 };
 /**
  * The kit's {@link AmountInput}: a money figure with its currency chip and the
@@ -339,6 +344,77 @@ type RhfPhoneInputProps<TFieldValues extends FieldValues = FieldValues, TName ex
  * schema's or `rules`'.
  */
 declare function RhfPhoneInput<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...phoneProps }: RhfPhoneInputProps<TFieldValues, TName, TTransformed>): react.JSX.Element;
+type OwnCountrySelectProps = Omit<CountrySelectProps<boolean>, "value" | "onChange" | "onBlur" | "label" | "hint" | "error" | "invalid" | "disabled" | "className" | "id" | "ref" | "clearable">;
+type RhfCountrySelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnCountrySelectProps & {
+    /** Offer the picker's clear "×" (and Delete on the trigger) while a country is
+     *  chosen. A clear stores `clearValue`. */
+    clearable?: boolean;
+    /** What a clear stores. Default `null`; `""` for a schema that spells "no
+     *  country" as an empty string (a zod `z.string().max(2)`, kastlan's). The picker
+     *  reads either back as empty. */
+    clearValue?: ComboClearValue;
+    /** Classes for the picker — `className` is the item's box. */
+    selectClassName?: string;
+};
+/**
+ * {@link CountrySelect} bound to one field, which stores the ISO 3166-1 alpha-2 code
+ * ("CH", always upper-case), or `clearValue` once cleared (`clearable`). kastlan asked
+ * for it (0.22 adoption): its address form wired a `CountrySelect` through
+ * {@link RhfField}'s render, and with no ref on the picker react-hook-form's
+ * focus-on-error had nothing to focus — the one field on the form a failed submit
+ * could not take you to.
+ *
+ * Bound the way {@link RhfIbanInput} and {@link RhfPhoneInput} are: `field.ref` reaches
+ * the trigger (the picker's `ref`, 0.23), the form's error paints the trigger and is
+ * the shell's message under it, 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 trigger together with the chosen country, and is the phone
+ * sheet's title. `commit` and `disabledReason` are the picker's own: a country that
+ * saves itself stays focusable under a lock and says why.
+ *
+ * ```tsx
+ * <RhfCountrySelect name="country" label="Country" required
+ *   preferred={["CH", "LI", "DE", "AT", "FR", "IT"]} rules={{ required: "Choose a country" }} />
+ * ```
+ */
+declare function RhfCountrySelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, clearable, clearValue, selectClassName, labels, ...countryProps }: RhfCountrySelectProps<TFieldValues, TName, TTransformed>): react.JSX.Element;
+type OwnMonthPickerProps = Omit<MonthPickerProps, "value" | "onChange" | "onBlur" | "label" | "hint" | "error" | "invalid" | "disabled" | "className" | "id" | "mode">;
+/** `mode` picks what the form stores, and `valueAsNumber` is only offered for a year. */
+type RhfMonthPickerMode = {
+    /** A month, stored as `"YYYY-MM"` (the default). */
+    mode?: "month";
+    valueAsNumber?: undefined;
+} | {
+    /** A year, stored as `"YYYY"` — or as a number with `valueAsNumber`. */
+    mode: "year";
+    /** Store the year as a number (`2026`) rather than `"2026"` — kastlan's budget
+     *  `fiscal_year` is an integer column. A number in the form reads back as its
+     *  year. */
+    valueAsNumber?: boolean;
+};
+type RhfMonthPickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & OwnMonthPickerProps & {
+    /** Classes for the picker — `className` is the item's box. As {@link RhfDateField}'s. */
+    inputClassName?: string;
+} & RhfMonthPickerMode;
+/**
+ * {@link MonthPicker} bound to one field: a month as `"YYYY-MM"`, or with `mode="year"` a
+ * year as `"YYYY"` (`valueAsNumber` stores `2026`). kastlan asked for it with
+ * {@link RhfCountrySelect}: its budget wizard's fiscal year was a `MonthPicker
+ * mode="year"` inside {@link RhfField}'s render — the `String()` in, the `Number()`
+ * out, `invalid` by hand — and a failed submit could not focus it, because the picker
+ * forwards no ref.
+ *
+ * Bound as {@link RhfDateField} is: a focus handle finds the trigger by its id, so
+ * focus-on-error lands there; the form's error paints the trigger and is the shell's
+ * message; the hint is the shell's description; neither is handed to the picker, so
+ * its box never changes. Picking marks the field touched.
+ *
+ * ```tsx
+ * <RhfMonthPicker name="fiscalYear" label="Fiscal year" mode="year" valueAsNumber
+ *   min="2020" max="2029" rules={{ required: "Choose a year" }} />
+ * ```
+ */
+declare function RhfMonthPicker<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, inputClassName, mode, valueAsNumber, ...pickerProps }: RhfMonthPickerProps<TFieldValues, TName, TTransformed>): react.JSX.Element;
 interface RhfSelectOption {
     value: string | number;
     label: ReactNode;
@@ -407,7 +483,7 @@ type RhfToggleGroupProps<TFieldValues extends FieldValues = FieldValues, TName e
  * field still needs answering is the schema's or `rules`' to say.
  */
 declare function RhfToggleGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, T extends string = string, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, ...groupProps }: RhfToggleGroupProps<TFieldValues, TName, T, TTransformed>): react.JSX.Element;
-type RhfComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Pick<EntityComboboxProps<V>, "options" | "loadOptions" | "loading" | "placeholder" | "searchPlaceholder" | "emptyLabel" | "clearable" | "clearLabel" | "onCreate" | "createLabel" | "filter" | "minChars" | "debounceMs"> & {
+type RhfComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, V extends string | number = string | number, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Pick<EntityComboboxProps<V>, "options" | "loadOptions" | "loading" | "placeholder" | "searchPlaceholder" | "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. */
     clearValue?: ComboClearValue;
@@ -418,9 +494,62 @@ type RhfComboboxProps<TFieldValues extends FieldValues = FieldValues, TName exte
  * 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}.
  */
 declare function RhfCombobox<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, comboClassName, ...comboProps }: RhfComboboxProps<TFieldValues, TName, V, TTransformed>): react.JSX.Element;
-type RhfTextComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Pick<ComboboxProps, "options" | "placeholder" | "groupBy" | "maxSuggestions" | "searchPlaceholder" | "createLabel" | "optionAdornment" | "autoFocus" | "aria-label"> & {
+type OwnInlineEntityComboboxProps<V extends string | number> = Omit<InlineEntityComboboxProps<V, ComboClearValue>, "value" | "defaultValue" | "onChange" | "onBlur" | "label" | "hint" | "error" | "invalid" | "disabled" | "className" | "id" | "ref" | "clearValue">;
+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}.
+ */
+declare 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, comboClassName, ...comboProps }: RhfInlineEntityComboboxProps<TFieldValues, TName, V, TTransformed>): react.JSX.Element;
+type RhfTextComboboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues> = RhfFieldBaseProps<TFieldValues, TName, TTransformed> & Pick<ComboboxProps, "options" | "placeholder" | "groupBy" | "maxSuggestions" | "searchPlaceholder" | "createLabel" | "optionAdornment" | "autoFocus" | "aria-label" | "closeLabel" | "commit" | "disabledReason"> & {
     /** Classes for the combobox. */
     comboClassName?: string;
 };
@@ -430,4 +559,4 @@ type RhfTextComboboxProps<TFieldValues extends FieldValues = FieldValues, TName
  */
 declare function RhfTextCombobox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformed = TFieldValues>({ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className, comboClassName, ...comboProps }: RhfTextComboboxProps<TFieldValues, TName, TTransformed>): react.JSX.Element;
 
-export { RhfCheckbox, type RhfCheckboxProps, RhfCombobox, type RhfComboboxProps, RhfDateField, type RhfDateFieldProps, RhfDateRangePicker, type RhfDateRangePickerProps, RhfField, type RhfFieldBaseProps, type RhfFieldProps, type RhfFieldRenderContext, RhfIbanInput, type RhfIbanInputProps, RhfIntegerField, type RhfIntegerFieldProps, RhfMoneyField, type RhfMoneyFieldProps, RhfNumberField, type RhfNumberFieldProps, RhfPhoneInput, type RhfPhoneInputProps, RhfSelect, type RhfSelectOption, type RhfSelectProps, RhfTextCombobox, type RhfTextComboboxProps, RhfTextField, type RhfTextFieldProps, RhfTextarea, type RhfTextareaProps, RhfTimeInput, type RhfTimeInputProps, RhfToggleGroup, type RhfToggleGroupProps };
+export { RhfCheckbox, type RhfCheckboxProps, RhfCombobox, type RhfComboboxProps, RhfCountrySelect, type RhfCountrySelectProps, RhfDateField, type RhfDateFieldProps, RhfDateRangePicker, type RhfDateRangePickerProps, RhfField, type RhfFieldBaseProps, type RhfFieldProps, type RhfFieldRenderContext, RhfIbanInput, type RhfIbanInputProps, RhfInlineEntityCombobox, type RhfInlineEntityComboboxProps, RhfIntegerField, type RhfIntegerFieldProps, RhfMoneyField, type RhfMoneyFieldProps, RhfMonthPicker, type RhfMonthPickerProps, RhfNumberField, type RhfNumberFieldProps, RhfPhoneInput, type RhfPhoneInputProps, RhfSelect, type RhfSelectOption, type RhfSelectProps, RhfTextCombobox, type RhfTextComboboxProps, RhfTextField, type RhfTextFieldProps, RhfTextarea, type RhfTextareaProps, RhfTimeInput, type RhfTimeInputProps, RhfToggleGroup, type RhfToggleGroupProps };

package/dist/rhf/fields.js

@@ -15,12 +15,17 @@ import {
 import { TimeInput } from "../components/time-input.js";
 import { IbanInput } from "../components/iban-input.js";
 import { PhoneInput } from "../components/phone-input.js";
+import { CountrySelect } from "../components/country-select.js";
+import { MonthPicker } from "../components/month-picker.js";
 import {
   ToggleGroup
 } from "../components/toggle-group.js";
 import { Checkbox } from "../components/checkbox.js";
 import { EntityCombobox } from "../components/entity-combobox.js";
-import { Combobox } from "../components/combobox.js";
+import {
+  Combobox,
+  InlineEntityCombobox
+} from "../components/combobox.js";
 import { cn } from "../lib/cn.js";
 function hasContent(node) {
   return node !== void 0 && node !== null && node !== false && node !== "";
@@ -631,6 +636,126 @@ function RhfPhoneInput({
     }
   );
 }
+function RhfCountrySelect({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  clearable,
+  clearValue = null,
+  selectClassName,
+  labels,
+  ...countryProps
+}) {
+  const labelled = hasContent(label);
+  const ownLabels = typeof label === "string" ? { country: label, ...labels } : labels;
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid, labelId }) => {
+        const value = field.value;
+        return (
+          // FormControl clones this element with `id` / `aria-describedby` /
+          // `aria-invalid`, which the picker routes to its trigger.
+          /* @__PURE__ */ jsx(
+            CountrySelect,
+            {
+              "aria-required": required || void 0,
+              "aria-labelledby": labelled ? labelId : void 0,
+              ...countryProps,
+              labels: ownLabels,
+              className: selectClassName,
+              ref: field.ref,
+              value: typeof value === "string" ? value : null,
+              clearable,
+              onChange: (code) => field.onChange(code ?? clearValue),
+              onBlur: field.onBlur,
+              disabled: field.disabled,
+              invalid
+            }
+          )
+        );
+      }
+    }
+  );
+}
+function MonthControl({
+  field,
+  invalid,
+  id,
+  valueAsNumber,
+  mode,
+  inputClassName,
+  pickerProps,
+  required,
+  ...aria
+}) {
+  useFocusHandle(field.ref, () => document.getElementById(id));
+  const value = field.value;
+  return /* @__PURE__ */ jsx(
+    MonthPicker,
+    {
+      ...pickerProps,
+      ...aria,
+      "aria-required": required || void 0,
+      id,
+      mode,
+      value: value === null || value === void 0 ? "" : String(value),
+      onChange: (key) => {
+        field.onChange(mode === "year" && valueAsNumber ? Number(key) : key);
+        field.onBlur();
+      },
+      disabled: field.disabled,
+      invalid,
+      className: inputClassName
+    }
+  );
+}
+function RhfMonthPicker({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  inputClassName,
+  mode,
+  valueAsNumber,
+  ...pickerProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid, id }) => (
+        // FormControl clones this element with `aria-describedby` / `aria-invalid`,
+        // which MonthControl hands on to the picker's trigger.
+        /* @__PURE__ */ jsx(
+          MonthControl,
+          {
+            field,
+            invalid,
+            id,
+            mode,
+            valueAsNumber,
+            inputClassName,
+            pickerProps,
+            required
+          }
+        )
+      )
+    }
+  );
+}
 function RhfSelect({
   name,
   control,
@@ -809,10 +934,11 @@ function EntityControl({
   describedBy,
   clearValue,
   comboClassName,
+  sheetTitle,
+  focusRef,
   comboProps
 }) {
   const box = useRef(null);
-  useFocusHandle(field.ref, () => document.getElementById(id));
   const onBlur = field.onBlur;
   useLayoutEffect(() => {
     const el = box.current;
@@ -824,7 +950,9 @@ function EntityControl({
   return /* @__PURE__ */ jsx("div", { ref: box, children: /* @__PURE__ */ jsx(
     EntityCombobox,
     {
+      sheetTitle,
       ...comboProps,
+      ref: focusRef,
       className: comboClassName,
       id,
       "aria-describedby": describedBy,
@@ -869,12 +997,58 @@ function RhfCombobox({
           describedBy,
           clearValue,
           comboClassName,
+          sheetTitle: hasContent(label) ? label : void 0,
+          focusRef: field.ref,
           comboProps
         }
       )
     }
   );
 }
+function RhfInlineEntityCombobox({
+  name,
+  control,
+  rules,
+  label,
+  hint,
+  required,
+  disabled,
+  excludeWhenDisabled,
+  className,
+  clearValue = null,
+  comboClassName,
+  ...comboProps
+}) {
+  return /* @__PURE__ */ jsx(
+    RhfField,
+    {
+      ...{ name, control, rules, label, hint, required, disabled, excludeWhenDisabled, className },
+      render: ({ field, invalid }) => {
+        const value = field.value;
+        return (
+          // FormControl clones this element with `id` / `aria-describedby` /
+          // `aria-invalid`, which the picker routes to its <input>.
+          /* @__PURE__ */ jsx(
+            InlineEntityCombobox,
+            {
+              "aria-required": required || void 0,
+              sheetTitle: hasContent(label) ? label : void 0,
+              ...comboProps,
+              className: comboClassName,
+              ref: field.ref,
+              value: value ?? null,
+              clearValue,
+              onChange: (v) => field.onChange(v),
+              onBlur: field.onBlur,
+              disabled: field.disabled,
+              invalid
+            }
+          )
+        );
+      }
+    }
+  );
+}
 function RhfTextCombobox({
   name,
   control,
@@ -904,6 +1078,8 @@ function RhfTextCombobox({
           id,
           describedBy,
           className: comboClassName,
+          sheetTitle: hasContent(label) ? label : void 0,
+          focusRef: field.ref,
           comboProps
         }
       )
@@ -918,14 +1094,17 @@ function TextComboControl({
   id,
   describedBy,
   className,
+  sheetTitle,
+  focusRef,
   comboProps
 }) {
-  useFocusHandle(field.ref, () => document.getElementById(id));
   const value = field.value;
   return /* @__PURE__ */ jsx(
     Combobox,
     {
+      sheetTitle,
       ...comboProps,
+      ref: focusRef,
       id,
       "aria-describedby": describedBy,
       "aria-required": required || void 0,
@@ -942,12 +1121,15 @@ function TextComboControl({
 export {
   RhfCheckbox,
   RhfCombobox,
+  RhfCountrySelect,
   RhfDateField,
   RhfDateRangePicker,
   RhfField,
   RhfIbanInput,
+  RhfInlineEntityCombobox,
   RhfIntegerField,
   RhfMoneyField,
+  RhfMonthPicker,
   RhfNumberField,
   RhfPhoneInput,
   RhfSelect,