import * as React from 'react'; import { ListAction, ListState, UseListRootSlotProps } from '../useList'; import { SelectOption } from '../useOption/useOption.types'; import { SelectProviderValue } from './SelectProvider'; import { MuiCancellableEventHandler } from '../utils/MuiCancellableEvent'; import { UseButtonRootSlotProps } from '../useButton'; export type SelectChangeEventType = React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null; export type SelectValue = Multiple extends true ? Value[] : Value | null; export interface SelectOptionDefinition { value: Value; disabled?: boolean; label: string; } export interface UseSelectParameters { /** * A function used to determine if two options' values are equal. * By default, reference equality is used. * * There is a performance impact when using the `areOptionsEqual` prop (proportional to the number of options). * Therefore, it's recommented to use the default reference equality comparison whenever possible. */ areOptionsEqual?: (a: OptionValue, b: OptionValue) => boolean; /** * If `true`, the select will be open by default. * @default false */ defaultOpen?: boolean; /** * The default selected value. Use when the component is not controlled. */ defaultValue?: SelectValue; /** * If `true`, the select is disabled. * @default false */ disabled?: boolean; /** * The ref of the trigger button element. */ buttonRef?: React.Ref; /** * The `id` attribute of the listbox element. */ listboxId?: string; /** * The ref of the listbox element. */ listboxRef?: React.Ref; /** * If `true`, the end user can select multiple values. * This affects the type of the `value`, `defaultValue`, and `onChange` props. * * @default false */ multiple?: Multiple; /** * The `name` attribute of the hidden input element. * This is useful when the select is embedded in a form and you want to access the selected value in the form data. */ name?: string; /** * If `true`, the select embedded in a form must have a selected value. * Otherwise, the form submission will fail. */ required?: boolean; /** * Callback fired when an option is selected. */ onChange?: (event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue) => void; /** * Callback fired when an option is highlighted. */ onHighlightChange?: (event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, highlighted: OptionValue | null) => void; /** * Callback fired when the listbox is opened or closed. */ onOpenChange?: (open: boolean) => void; /** * Controls the open state of the select's listbox. * This is the controlled equivalent of the `defaultOpen` prop. */ open?: boolean; /** * An alternative way to specify the options. * If this parameter is set, options defined as JSX children are ignored. */ options?: ReadonlyArray>; /** * A function to convert the currently selected value to a string. * Used to set a value of a hidden input associated with the select, * so that the selected value can be posted with a form. */ getSerializedValue?: (option: SelectValue, Multiple>) => React.InputHTMLAttributes['value']; /** * A function used to convert the option label to a string. * This is useful when labels are elements and need to be converted to plain text * to enable keyboard navigation with character keys. * * @default defaultOptionStringifier */ getOptionAsString?: (option: SelectOption) => string; /** * The selected value. * Set to `null` to deselect all options. */ value?: SelectValue; /** * The name of the component using useSelect. * For debugging purposes. * @default 'useSelect' */ componentName?: string; } interface UseSelectButtonSlotEventHandlers { onMouseDown: MuiCancellableEventHandler; } export type UseSelectButtonSlotProps = UseButtonRootSlotProps> & UseSelectButtonSlotEventHandlers & { 'aria-expanded': React.AriaAttributes['aria-expanded']; 'aria-controls': React.AriaAttributes['aria-controls']; role: React.HTMLAttributes['role']; ref: React.RefCallback | null; }; interface UseSelectHiddenInputSlotEventHandlers { onChange: MuiCancellableEventHandler>; } export type UseSelectHiddenInputSlotProps = UseSelectHiddenInputSlotEventHandlers & React.InputHTMLAttributes & TOther; interface UseSelectListboxSlotEventHandlers { onBlur: MuiCancellableEventHandler>; } export type UseSelectListboxSlotProps = UseListRootSlotProps> & UseSelectListboxSlotEventHandlers & { 'aria-multiselectable': React.AriaAttributes['aria-multiselectable']; id: string | undefined; role: React.HTMLAttributes['role']; }; export interface UseSelectReturnValue { /** * If `true`, the trigger button is active (pressed). */ buttonActive: boolean; /** * If `true`, the trigger button has a visible focus. */ buttonFocusVisible: boolean; /** * Ref to the button slot DOM node. */ buttonRef: React.RefCallback | null; /** * If `true`, the select is disabled. */ disabled: boolean; /** * Action dispatcher for the select component. * Allows to programmatically control the select. */ dispatch: (action: ListAction | SelectAction) => void; /** * Resolver for the button slot's props. * @param externalProps event handlers for the button slot * @returns props that should be spread on the button slot */ getButtonProps: = {}>(externalProps?: ExternalProps) => UseSelectButtonSlotProps; /** * Resolver for the hidden input slot's props. * @param externalProps event handlers for the hidden input slot * @returns HTML input attributes that should be spread on the hidden input slot */ getHiddenInputProps: = {}>(externalProps?: ExternalProps) => UseSelectHiddenInputSlotProps; /** * Resolver for the listbox slot's props. * @param externalProps event handlers for the listbox slot * @returns props that should be spread on the listbox slot */ getListboxProps: = {}>(externalProps?: ExternalProps) => UseSelectListboxSlotProps; /** * A function that returns the metadata of an option with a given value. * * @param optionValue the value of the option * @returns */ getOptionMetadata: (optionValue: Value) => SelectOption | undefined; /** * A value to be passed to the `SelectProvider` component. */ contextValue: SelectProviderValue; /** * The value of the highlighted option. */ highlightedOption: Value | null; /** * Ref to the listbox slot DOM node. */ listboxRef: React.RefCallback | null; /** * If `true`, the listbox is open. */ open: boolean; /** * Values of all the registered options. */ options: Value[]; /** * The value of the selected option(s). */ value: SelectValue; } export declare const SelectActionTypes: { readonly buttonClick: "buttonClick"; readonly browserAutoFill: "browserAutoFill"; }; export interface ButtonClickAction { type: typeof SelectActionTypes.buttonClick; event: React.MouseEvent; } export interface BrowserAutofillAction { type: typeof SelectActionTypes.browserAutoFill; item: OptionValue; event: React.ChangeEvent; } export type SelectAction = ButtonClickAction | BrowserAutofillAction; export interface SelectInternalState extends ListState { open: boolean; } export {};