import * as React from 'react'; import { Simplify } from '@mui/types'; import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect'; import { SelectOption } from '../useOption'; import Popper, { PopperProps } from '../Popper'; import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils'; export interface SelectRootSlotPropsOverrides { } export interface SelectListboxSlotPropsOverrides { } export interface SelectPopperSlotPropsOverrides { } export interface SelectOwnProps { /** * If `true`, the select element is focused during the first mount * @default false */ autoFocus?: boolean; children?: React.ReactNode; className?: string; /** * If `true`, the select will be initially open. * @default false */ defaultListboxOpen?: boolean; /** * The default selected value. Use when the component is not controlled. */ defaultValue?: SelectValue; /** * If `true`, the select is disabled. * @default false */ disabled?: boolean; /** * 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']; /** * `id` attribute of the listbox element. */ listboxId?: string; /** * Controls the open state of the select's listbox. * @default undefined */ listboxOpen?: boolean; /** * If `true`, selecting multiple values is allowed. * This affects the type of the `value`, `defaultValue`, and `onChange` props. * * @default false */ multiple?: Multiple; /** * Name of the element. For example used by the server to identify the fields in form submits. * If the name is provided, the component will render a hidden input element that can be submitted to a server. */ name?: string; /** * Callback fired when an option is selected. */ onChange?: (event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, value: SelectValue) => void; /** * Callback fired when the component requests to be opened. * Use in controlled mode (see listboxOpen). */ onListboxOpenChange?: (isOpen: boolean) => void; /** * A function used to convert the option label to a string. * It's useful when labels are elements and need to be converted to plain text * to enable navigation using character keys on a keyboard. * * @default defaultOptionStringifier */ getOptionAsString?: (option: SelectOption) => string; /** * Function that customizes the rendering of the selected value. */ renderValue?: (option: SelectValue, Multiple>) => React.ReactNode; /** * The props used for each slot inside the Input. * @default {} */ slotProps?: { root?: SlotComponentProps<'button', SelectRootSlotPropsOverrides, SelectOwnerState>; listbox?: SlotComponentProps<'ul', SelectListboxSlotPropsOverrides, SelectOwnerState>; popper?: SlotComponentProps>; }; /** * The components used for each slot inside the Select. * Either a string to use a HTML element or a component. * @default {} */ slots?: SelectSlots; /** * The selected value. * Set to `null` to deselect all options. */ value?: SelectValue; } export interface SelectSlots { /** * The component that renders the root. * @default 'button' */ root?: React.ElementType; /** * The component that renders the listbox. * @default 'ul' */ listbox?: React.ElementType; /** * The component that renders the popper. * @default Popper */ popper?: React.ComponentType>>; } export interface SelectTypeMap { props: SelectOwnProps & AdditionalProps; defaultComponent: RootComponentType; } export type SelectProps['defaultComponent']> = PolymorphicProps, RootComponentType>; export interface SelectType { ['defaultComponent']>(props: PolymorphicProps, RootComponentType>): JSX.Element | null; propTypes?: any; displayName?: string | undefined; } export type SelectOwnerState = Simplify & { active: boolean; disabled: boolean; focusVisible: boolean; open: boolean; }>; export type SelectRootSlotProps = Simplify; }>; export type SelectListboxSlotProps = Simplify; }>; export type SelectPopperSlotProps = { anchorEl: PopperProps['anchorEl']; children?: PopperProps['children']; className?: string; keepMounted: PopperProps['keepMounted']; open: boolean; ownerState: SelectOwnerState; placement: PopperProps['placement']; };