import * as React from 'react'; import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js"; import { REASONS } from "../../utils/reasons.js"; /** * Groups all parts of the select. * Doesn’t render its own HTML element. * * Documentation: [Base UI Select](https://base-ui.com/react/components/select) */ export declare function SelectRoot(props: SelectRoot.Props): React.JSX.Element; type SelectValueType = Multiple extends true ? Value[] : Value; export interface SelectRootProps { children?: React.ReactNode; /** * A ref to access the hidden input element. */ inputRef?: React.Ref; /** * Identifies the field when a form is submitted. */ name?: string; /** * The id of the Select. */ id?: string; /** * Whether the user must choose a value before submitting a form. * @default false */ required?: boolean; /** * Whether the user should be unable to choose a different option from the select popup. * @default false */ readOnly?: boolean; /** * Whether the component should ignore user interaction. * @default false */ disabled?: boolean; /** * Whether multiple items can be selected. * @default false */ multiple?: Multiple; /** * Whether moving the pointer over items should highlight them. * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. * @default true */ highlightItemOnHover?: boolean; /** * Whether the select popup is initially open. * * To render a controlled select popup, use the `open` prop instead. * @default false */ defaultOpen?: boolean; /** * Event handler called when the select popup is opened or closed. */ onOpenChange?: (open: boolean, eventDetails: SelectRootChangeEventDetails) => void; /** * Event handler called after any animations complete when the select popup is opened or closed. */ onOpenChangeComplete?: (open: boolean) => void; /** * Whether the select popup is currently open. */ open?: boolean; /** * Determines if the select enters a modal state when open. * - `true`: user interaction is limited to the select: document page scroll is locked and and pointer interactions on outside elements are disabled. * - `false`: user interaction with the rest of the document is allowed. * @default true */ modal?: boolean; /** * A ref to imperative actions. * - `unmount`: When specified, the select will not be unmounted when closed. * Instead, the `unmount` function must be called to unmount the select manually. * Useful when the select's animation is controlled by an external library. */ actionsRef?: React.RefObject; /** * Data structure of the items rendered in the select popup. * When specified, `` renders the label of the selected item instead of the raw value. * @example * ```tsx * const items = { * sans: 'Sans-serif', * serif: 'Serif', * mono: 'Monospace', * cursive: 'Cursive', * }; * * ``` */ items?: Record | ReadonlyArray<{ label: React.ReactNode; value: any; }>; /** * When the item values are objects (``), this function converts the object value to a string representation for display in the trigger. * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. */ itemToStringLabel?: (itemValue: Value) => string; /** * When the item values are objects (``), this function converts the object value to a string representation for form submission. * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop. */ itemToStringValue?: (itemValue: Value) => string; /** * Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially. * Defaults to `Object.is` comparison. */ isItemEqualToValue?: (itemValue: Value, value: Value) => boolean; /** * The uncontrolled value of the select when it’s initially rendered. * * To render a controlled select, use the `value` prop instead. */ defaultValue?: SelectValueType | null; /** * The value of the select. Use when controlled. */ value?: SelectValueType; /** * Event handler called when the value of the select changes. */ onValueChange?: (value: SelectValueType | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void; } export interface SelectRootState {} export interface SelectRootActions { unmount: () => void; } export type SelectRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.escapeKey | typeof REASONS.windowResize | typeof REASONS.itemPress | typeof REASONS.focusOut | typeof REASONS.listNavigation | typeof REASONS.cancelOpen | typeof REASONS.none; export type SelectRootChangeEventDetails = BaseUIChangeEventDetails; export declare namespace SelectRoot { type Props = SelectRootProps; type State = SelectRootState; type Actions = SelectRootActions; type ChangeEventReason = SelectRootChangeEventReason; type ChangeEventDetails = SelectRootChangeEventDetails; } export {};