import * as React from 'react'; import { ListAction, ListState, UseListRootSlotProps } from '../useList'; import { SelectOption } from '../useOption/useOption.types'; import { EventHandlers } from '../utils/types'; import { SelectProviderValue } from './SelectProvider'; import { MuiCancellableEventHandler } from '../utils/muiCancellableEvent'; 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 { /** * 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; /** * 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?: SelectOptionDefinition[]; /** * 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; } interface UseSelectButtonSlotEventHandlers { onClick: MuiCancellableEventHandler; } export type UseSelectButtonSlotProps = UseListRootSlotProps> & UseSelectButtonSlotEventHandlers & { 'aria-expanded': React.AriaAttributes['aria-expanded']; 'aria-controls': React.AriaAttributes['aria-controls']; role: React.HTMLAttributes['role']; ref: React.RefCallback | null; }; interface UseSelectListboxSlotEventHandlers { onMouseDown: React.MouseEventHandler; } export type UseSelectListboxSlotProps = Omit & UseSelectListboxSlotEventHandlers & { 'aria-multiselectable': React.AriaAttributes['aria-multiselectable']; id: string | undefined; ref: React.RefCallback | null; 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 otherHandlers event handlers for the button slot * @returns props that should be spread on the button slot */ getButtonProps: (otherHandlers?: OtherHandlers) => UseSelectButtonSlotProps; /** * Resolver for the listbox slot's props. * @param otherHandlers event handlers for the listbox slot * @returns props that should be spread on the listbox slot */ getListboxProps: (otherHandlers?: OtherHandlers) => 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"; }; export interface ButtonClickAction { type: typeof SelectActionTypes.buttonClick; event: React.MouseEvent; } export type SelectAction = ButtonClickAction; export interface SelectInternalState extends ListState { open: boolean; } export {};