@tailor-platform/app-shell 1.13.0 → 1.14.0

package/dist/app-shell.d.ts

@@ -737,7 +737,7 @@ declare const AutocompleteParts: {
 
 declare type AutocompleteParts = typeof AutocompleteParts;
 
-declare type AutocompletePickedRootProps<Value> = Pick<AutocompleteRootProps<Value>, "value" | "defaultValue" | "onValueChange" | "filter" | "disabled" | "children"> & {
+declare type AutocompletePickedRootProps<Value> = Pick<AutocompleteRootProps<Value>, "value" | "defaultValue" | "onValueChange" | "filter" | "disabled" | "children" | "name" | "form" | "required" | "inputRef" | "id"> & {
     items?: readonly Value[];
 };
 
@@ -779,6 +779,29 @@ declare interface AutocompletePropsBase<T> {
     "aria-labelledby"?: string;
     /** ID applied to the combobox input element. */
     id?: string;
+    /**
+     * Identifies the field when a form is submitted, so the current text is
+     * picked up by **native** form submission (`new FormData(form)`, a plain
+     * `<form>`, server actions).
+     *
+     * Autocomplete's value is the raw input string, so no value-serialisation
+     * hook is needed (unlike `Select` and `Combobox`).
+     *
+     * **Inside a `Field.Root`, the field's `name` wins and this prop is ignored** —
+     * the hidden input is named after the field. Set it only when the control is
+     * used outside a `Field.Root` (or when it must differ from the field name,
+     * which it cannot).
+     */
+    name?: string;
+    /**
+     * `id` of the form that owns the input. Use when the autocomplete is
+     * rendered outside the `<form>` element it belongs to.
+     */
+    form?: string;
+    /** Whether a value must be entered before the owning form can be submitted. */
+    required?: boolean;
+    /** Ref to the underlying input element. */
+    inputRef?: React_2.Ref<HTMLInputElement>;
 }
 
 declare function AutocompleteRoot<Value>(props: AutocompletePickedRootProps<Value>): JSX.Element;
@@ -1542,7 +1565,7 @@ declare type ColumnTypeBranch<TRow extends Record<string, unknown>> = {
 
 export declare const Combobox: ComboboxComponent;
 
-declare type ComboboxAsyncCreatableProps<T extends object> = (ComboboxAsyncOwnProps<T> & CreatableProps<T> & Omit<ComboboxPropsSingle<T>, "mapItem">) | (ComboboxAsyncOwnProps<T> & CreatableProps<T> & Omit<ComboboxPropsMultiple<T>, "mapItem">);
+declare type ComboboxAsyncCreatableProps<T extends object> = (ComboboxAsyncOwnProps<T> & CreatableProps<T> & Omit<ComboboxPropsSingle<T>, "mapItem" | "itemToStringValue">) | (ComboboxAsyncOwnProps<T> & CreatableProps<T> & Omit<ComboboxPropsMultiple<T>, "mapItem" | "itemToStringValue">);
 
 /** Fetcher type for `Combobox.Async`. */
 export declare type ComboboxAsyncFetcher<T> = AsyncFetcher<T>;
@@ -1719,6 +1742,37 @@ declare interface ComboboxPropsBase<T> {
     "aria-labelledby"?: string;
     /** ID applied to the combobox input element. */
     id?: string;
+    /**
+     * Identifies the field when a form is submitted. Base UI renders a hidden
+     * input under this name, so the selected value is picked up by **native**
+     * form submission (`new FormData(form)`, a plain `<form>`, server actions).
+     *
+     * For non-string items, pair this with `itemToStringValue` to control how
+     * the value is serialised.
+     *
+     * **Inside a `Field.Root`, the field's `name` wins and this prop is ignored** —
+     * the hidden input is named after the field. Set it only when the control is
+     * used outside a `Field.Root` (or when it must differ from the field name,
+     * which it cannot).
+     */
+    name?: string;
+    /**
+     * `id` of the form that owns the hidden input. Use when the combobox is
+     * rendered outside the `<form>` element it belongs to.
+     */
+    form?: string;
+    /** Whether a value must be chosen before the owning form can be submitted. */
+    required?: boolean;
+    /** Ref to the hidden input that carries the value during form submission. */
+    inputRef?: React_2.Ref<HTMLInputElement>;
+    /**
+     * Converts a non-string item to the string written into the hidden input on
+     * form submission. Items shaped `{ value, label }` use `value` automatically.
+     *
+     * Distinct from `mapItem`, which controls what the user sees. Not available
+     * on the creatable variants, which own value serialisation.
+     */
+    itemToStringValue?: (item: T) => string;
 }
 
 declare interface ComboboxPropsMultiple<T> extends ComboboxPropsBase<T> {
@@ -1747,7 +1801,7 @@ declare namespace ComboboxRoot {
     var displayName: string;
 }
 
-declare type ComboboxRootProps<Value, Multiple extends boolean | undefined = false> = Pick<React_2.ComponentProps<typeof Combobox_2.Root<Value, Multiple>>, "items" | "value" | "defaultValue" | "onValueChange" | "multiple" | "filter" | "inputValue" | "onInputValueChange" | "onOpenChange" | "itemToStringLabel" | "itemToStringValue" | "disabled" | "children">;
+declare type ComboboxRootProps<Value, Multiple extends boolean | undefined = false> = Pick<React_2.ComponentProps<typeof Combobox_2.Root<Value, Multiple>>, "items" | "value" | "defaultValue" | "onValueChange" | "multiple" | "filter" | "inputValue" | "onInputValueChange" | "onOpenChange" | "itemToStringLabel" | "itemToStringValue" | "disabled" | "children" | "name" | "form" | "required" | "inputRef" | "id">;
 
 declare function ComboboxStandalone<T extends object>(props: ComboboxStaticCreatableProps<T>): React_2.JSX.Element;
 
@@ -1755,9 +1809,9 @@ declare function ComboboxStandalone<I>(props: ComboboxStaticPlainProps<I>): Reac
 
 declare type ComboboxStaticCreatableProps<T extends object> = ({
     items: T[];
-} & CreatableProps<T> & Omit<ComboboxPropsSingle<T>, "mapItem">) | ({
+} & CreatableProps<T> & Omit<ComboboxPropsSingle<T>, "mapItem" | "itemToStringValue">) | ({
     items: T[];
-} & CreatableProps<T> & Omit<ComboboxPropsMultiple<T>, "mapItem">);
+} & CreatableProps<T> & Omit<ComboboxPropsMultiple<T>, "mapItem" | "itemToStringValue">);
 
 /**
  * @property items - Items to display. May be a flat array of `T` or an array of
@@ -2231,9 +2285,9 @@ export declare const DataTable: {
      * **Requires `control`** — `useDataTable()` must receive `control` from
      * `useCollectionVariables()`, otherwise this component throws at render time.
      *
-     * **Go-to-first / go-to-last buttons** — Rendered only when `totalPages` is
-     * non-null (i.e. the backend returns a total count). When `totalPages` is
-     * `null`, these buttons and the page counter are omitted.
+     * **Go-to-first / go-to-last buttons** — The first-page button is always
+     * rendered. The last-page button and page counter are rendered only when
+     * `totalPages` is non-null (i.e. the backend returns a `total` count).
      */
     readonly Pagination: typeof DataTablePagination;
 };
@@ -3591,6 +3645,25 @@ declare namespace Footer_3 {
  *   <button type="submit">Submit</button>
  * </Form>
  * ```
+ *
+ * @example
+ * ### Submitting from outside the form
+ * Give the form an `id` and point a detached submit button at it with the
+ * native `form` attribute. Useful when the save action lives in a page
+ * header or a dialog footer rather than beside the fields.
+ * ```tsx
+ * <Layout.Header
+ *   title="Create product"
+ *   actions={[
+ *     <Button key="save" type="submit" form="product-form">
+ *       Save
+ *     </Button>,
+ *   ]}
+ * />
+ * <Form id="product-form" onFormSubmit={(values) => save(values)}>
+ *   …
+ * </Form>
+ * ```
  */
 export declare const Form: FormComponent;
 
@@ -3604,7 +3677,7 @@ declare interface FormComponent {
     displayName?: string;
 }
 
-export declare type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Pick<React_2.ComponentProps<typeof Form_2>, "errors" | "actionsRef" | "validationMode" | "noValidate" | "ref" | "className" | "style"> & {
+export declare type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Pick<React_2.ComponentProps<typeof Form_2>, "errors" | "actionsRef" | "validationMode" | "noValidate" | "ref" | "className" | "style" | "id"> & {
     children: React_2.ReactNode;
     /**
      * Low-level submit handler that receives the native `FormEvent`.
@@ -5217,6 +5290,36 @@ declare interface SelectPropsBase<T> {
     "aria-labelledby"?: string;
     /** ID applied to the combobox trigger element. */
     id?: string;
+    /**
+     * Identifies the field when a form is submitted. Base UI renders a hidden
+     * input under this name, so the selected value is picked up by **native**
+     * form submission (`new FormData(form)`, a plain `<form>`, server actions).
+     *
+     * For non-string items, pair this with `itemToStringValue` to control how
+     * the value is serialised.
+     *
+     * **Inside a `Field.Root`, the field's `name` wins and this prop is ignored** —
+     * the hidden input is named after the field. Set it only when the control is
+     * used outside a `Field.Root` (or when it must differ from the field name,
+     * which it cannot).
+     */
+    name?: string;
+    /**
+     * `id` of the form that owns the hidden input. Use when the select is
+     * rendered outside the `<form>` element it belongs to.
+     */
+    form?: string;
+    /** Whether a value must be chosen before the owning form can be submitted. */
+    required?: boolean;
+    /** Ref to the hidden input that carries the value during form submission. */
+    inputRef?: React_2.Ref<HTMLInputElement>;
+    /**
+     * Converts a non-string item to the string written into the hidden input on
+     * form submission. Items shaped `{ value, label }` use `value` automatically.
+     *
+     * Distinct from `mapItem`, which controls what the user sees.
+     */
+    itemToStringValue?: (item: T) => string;
 }
 
 declare interface SelectPropsMultiple<T> extends SelectPropsBase<T> {
@@ -5249,7 +5352,7 @@ declare namespace SelectRoot {
     var displayName: string;
 }
 
-declare type SelectRootProps<Value, Multiple extends boolean | undefined = false> = Pick<React_2.ComponentProps<typeof Select_2.Root<Value, Multiple>>, "value" | "defaultValue" | "onValueChange" | "open" | "onOpenChange" | "modal" | "multiple" | "itemToStringLabel" | "disabled" | "children">;
+declare type SelectRootProps<Value, Multiple extends boolean | undefined = false> = Pick<React_2.ComponentProps<typeof Select_2.Root<Value, Multiple>>, "value" | "defaultValue" | "onValueChange" | "open" | "onOpenChange" | "modal" | "multiple" | "itemToStringLabel" | "itemToStringValue" | "disabled" | "children" | "name" | "form" | "required" | "inputRef" | "id">;
 
 declare function SelectSeparator({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
@@ -7561,152 +7664,167 @@ export { ZonedDateTime }
 export { }
 
 
-declare namespace Root {
+declare namespace AutocompleteStandalone {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace AutocompleteAsyncStandalone {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace AutocompleteRoot {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace AutocompleteValue {
     var displayName: string;
 }
 
 
-declare namespace Image {
+declare namespace AutocompleteInput {
     var displayName: string;
 }
 
 
-declare namespace Fallback {
+declare namespace AutocompleteTrigger {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace AutocompleteInputGroup {
     var displayName: string;
 }
 
 
-declare namespace Viewport {
+declare namespace AutocompleteContent {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace AutocompleteList {
     var displayName: string;
 }
 
 
-declare namespace Interval {
+declare namespace AutocompleteItem {
     var displayName: string;
 }
 
 
-declare namespace TimelineLink {
+declare namespace AutocompleteEmpty {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace AutocompleteClear {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace AutocompleteGroup {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace AutocompleteGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Item {
+declare namespace AutocompleteCollection {
     var displayName: string;
 }
 
 
-declare namespace LinkItem {
+declare namespace AutocompleteStatus {
     var displayName: string;
 }
 
 
-declare namespace CheckboxItem {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace CheckboxItemIndicator {
+declare namespace Viewport {
     var displayName: string;
 }
 
 
-declare namespace RadioItem {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace RadioItemIndicator {
+declare namespace Interval {
     var displayName: string;
 }
 
 
-declare namespace RadioGroup {
+declare namespace TimelineLink {
     var displayName: string;
 }
 
 
-declare namespace Group {
+declare namespace Provider {
     var displayName: string;
 }
 
 
-declare namespace GroupLabel {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace MenuSeparator {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace SubmenuRoot {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace SubmenuTrigger {
+declare namespace SelectRoot {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace SelectTrigger {
     var displayName: string;
 }
 
 
-declare namespace List {
+declare namespace SelectValue {
     var displayName: string;
 }
 
 
-declare namespace Tab {
+declare namespace SelectContent {
     var displayName: string;
 }
 
 
-declare namespace Panel {
+declare namespace SelectItem {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroup {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace SelectSeparator {
     var displayName: string;
 }
 
@@ -7721,77 +7839,82 @@ declare namespace Trigger {
 }
 
 
-declare namespace Close {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Item {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace LinkItem {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace CheckboxItem {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace CheckboxItemIndicator {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace RadioItem {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace RadioItemIndicator {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace RadioGroup {
     var displayName: string;
 }
 
 
-declare namespace Body {
+declare namespace Group {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace GroupLabel {
     var displayName: string;
 }
 
 
-declare namespace Row {
+declare namespace MenuSeparator {
     var displayName: string;
 }
 
 
-declare namespace Head {
+declare namespace SubmenuRoot {
     var displayName: string;
 }
 
 
-declare namespace Cell {
+declare namespace SubmenuTrigger {
     var displayName: string;
 }
 
 
-declare namespace Caption {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Provider {
+declare namespace Image {
+    var displayName: string;
+}
+
+
+declare namespace Fallback {
     var displayName: string;
 }
 
@@ -7801,12 +7924,12 @@ declare namespace Root {
 }
 
 
-declare namespace Trigger {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Description {
     var displayName: string;
 }
 
@@ -7816,7 +7939,12 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
+declare namespace Trigger {
+    var displayName: string;
+}
+
+
+declare namespace Close {
     var displayName: string;
 }
 
@@ -7826,82 +7954,82 @@ declare namespace Content {
 }
 
 
-declare namespace SelectRoot {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace SelectTrigger {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace SelectValue {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace SelectContent {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace SelectItem {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace SelectGroup {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace SelectGroupLabel {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace SelectSeparator {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace Close {
+declare namespace Cell {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Caption {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace List {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace Tab {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Panel {
     var displayName: string;
 }
 
@@ -7991,112 +8119,97 @@ declare namespace ComboboxCollection {
 }
 
 
-declare namespace Root {
-    var displayName: string;
-}
-
-
-declare namespace Label {
-    var displayName: string;
-}
-
-
-declare namespace Control {
-    var displayName: string;
-}
-
-
-declare namespace Description {
+declare namespace DataTableRoot {
     var displayName: string;
 }
 
 
-declare namespace Error {
+declare namespace DataTableTable {
     var displayName: string;
 }
 
 
-declare namespace Validity {
+declare namespace DataTableFooter {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteRoot {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteValue {
+declare namespace Label {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteInput {
+declare namespace Control {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteTrigger {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteInputGroup {
+declare namespace Error {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteContent {
+declare namespace Validity {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteList {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteItem {
+declare namespace Legend {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteEmpty {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteClear {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteGroup {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteGroupLabel {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteCollection {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteStatus {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteStandalone {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteAsyncStandalone {
+declare namespace Description {
     var displayName: string;
 }
 
@@ -8106,22 +8219,12 @@ declare namespace Root {
 }
 
 
-declare namespace Legend {
-    var displayName: string;
-}
-
-
-declare namespace DataTableRoot {
-    var displayName: string;
-}
-
-
-declare namespace DataTableTable {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace DataTableFooter {
+declare namespace Content {
     var displayName: string;
 }