import { PropsWithChildren, ReactNode, default as React } from 'react'; import { ListBoxItemRenderProps, ListBoxProps } from 'react-aria-components'; import { ScreenSize } from '../../../hooks/useScreenSize'; import { DataListItemCellProps } from '../../DataList/DataListItemCell'; import { SearchInputProps } from '../SearchInput/SearchInput'; import { CommonInputOwnProps } from '../types'; export type SelectKey = string | number; export type RenderOptionContext = ListBoxItemRenderProps & { defaultChildren: ReactNode; screenSize: ScreenSize; }; /** @inheritdoc */ export interface SingleSelectProps extends Omit, Pick { /** * The unique identifier of the input. */ id?: string; /** * Whether the checked indicator should be displayed. * @default 'start' */ checkedIndicator?: false | 'start' | 'end'; /** * The default query to search for (uncontrolled). */ defaultQuery?: string; /** * Default selected key value of the input (uncontrolled). */ defaultValue?: V; /** * List of values of the disabled options (controlled). */ disabledValues?: Array; /** * The text for the empty options state. * * If not provided, the default translation from the system will be used. * Use this prop to override the default translation when a custom label is needed. */ emptyOptionsLabel?: string; /** * Function to get nested options for an option. * @param option - The option to get the children for. */ getGroupOptions?(option: T): Array | undefined; /** * Function to get the key for an option. * @param option - The option to get the key for. */ getOptionValue(option: T): V; /** * Function to get the text label for an option. * @param option - The option to get the text label for. */ getOptionLabel(option: T): string; /** * List of options to display (controlled). */ options: Array; /** * Handler that is called when the selection changes. * */ onChange?: (option: V | null) => void; /** * Handler that is called when the search query value changes. */ onQueryChange?: (value: string | null) => void; /** * Handler that is called when the search query loses focus. */ onQueryBlur?: SearchInputProps['onBlur']; /** * Handler that is called when the search query gains focus. */ onQueryFocus?: SearchInputProps['onFocus']; /** * The query to search for (controlled). */ query?: string | null; /** * The mode of the input. * @default 'picker' */ mode?: 'picker' | 'search'; /** * Function to render the empty state of the list box. */ renderEmptyState?: ListBoxProps['renderEmptyState']; /** * Function to render an option in the search results. * @param option - The option to render. */ renderOption?(option: T, context: RenderOptionContext): ReactNode; /** * Function to render the value of the input. * @param value - The value to render. */ renderValue?(option: T, labelId: string): ReactNode; /** * Selected key value (controlled). */ value?: V | null; /** * Show first option as empty choice. Supported only in 'picker' mode. */ nullable?: boolean; /** * Virtualization can improve performance when rendering a large number of options. * Only supported in 'search' mode. Pass `true` for defaults, or an object to tune the estimates * and popover width. */ virtualize?: boolean | SelectVirtualizerOptions; } /** * Tuning for the search-mode virtualizer. Option heights are measured dynamically (options may render * arbitrary content), so `rowHeight`/`headingHeight` are only the initial estimates used before the * real sizes are measured. */ export interface SelectVirtualizerOptions { /** Estimated option-row height, in px, before dynamic measurement. @default 34 */ rowHeight?: number; /** Estimated group-heading-row height, in px, before dynamic measurement. @default 24 */ headingHeight?: number; /** Gap between rows, in px. @default 0 */ gap?: number; /** Vertical padding at the start/end of the list, in px. @default 0 */ padding?: number; /** Fixed popover width, in px. Applied to the desktop search popover. */ popoverWidth?: number; } export declare const SingleSelect: ((props: SingleSelectProps & React.RefAttributes) => React.ReactNode) & { Option: (({ children, ..._unusedRest }: PropsWithChildren) => React.JSX.Element) & { displayName: string; Cell: (({ children, ...rest }: DataListItemCellProps) => React.JSX.Element) & { displayName: string; }; }; };