import { AutocompleteChangeReason as MuiAutocompleteChangeReason, AutocompleteRenderGroupParams } from '@material-ui/lab'; import { ChangeEvent, MouseEventHandler, ReactNode } from 'react'; import { MenuItemProps } from '../Menu/MenuItem'; import { TextInputNextProps } from '../TextInputNext'; import { TextInputProps } from '../TextInput'; import { AutocompleteOption } from './utils'; type ChangeReason = MuiAutocompleteChangeReason | 'select-option-all' | 'remove-option-all'; type AutocompleteBaseProps = { /** * Options to allow selection from. Has to be assignable to `{ id: string | number; title: string; prefix?: ReactNode; }[]` */ options?: T[]; /** * Selected value. If `multiple` is `false | undefined`, and the value is an array, only the first element will be used * * There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop * to have incorrect typing if we mix T and T['id'] in `value`. Therefore, we can't use the "correct" typing * ``` * value?: T['id'] | T | (T['id'] | T)[]; * ``` * * You may need to provide additional typings */ value?: string | number | T | (string | number | T)[]; /** * If `true`, the component will support multiple selection */ multiple?: Multiple; /** * Selection change handler * Receives an array of options if `multiple` is `true`, a single selected option or `undefined` otherwise */ onChange?: (value: Multiple extends undefined | false ? T | undefined : T[], reason: ChangeReason, event?: ChangeEvent) => void; label?: ReactNode; placeholder?: string; /** * Controls the size of the options rendered */ optionSize?: MenuItemProps['size']; disabled?: boolean; /** * If exists - allows user to create own options. Called when 'Add "whatever"' option is selected */ onCreate?: (title: string) => void; prefix?: ReactNode; loading?: boolean; showPopupIcon?: boolean; /** * Controls the "Clear" button that's shown to the right if there is a value */ clearable?: boolean; /** * Controls if the field should keep/gain focus after "Clear" button is clicked */ focusOnClear?: boolean; /** * Triggered when user types something */ onInputChange?: (value: string, event: ChangeEvent) => void; status?: TextInputNextProps['status']; message?: TextInputNextProps['message']; size?: TextInputNextProps['size']; labelPlacement?: TextInputNextProps['labelPlacement']; /** * Makes internal text field readonly, effectively turning component into a simple `