import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { Theme } from "../styles/index.js"; import { InternalStandardProps as StandardProps } from "../internal/index.js"; import { IconButtonProps } from "../IconButton/index.js"; import { ChipProps, ChipTypeMap } from "../Chip/index.js"; import { PaperProps } from "../Paper/index.js"; import { PopperProps } from "../Popper/index.js"; import useAutocomplete, { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteInputChangeReason, AutocompleteValue, createFilterOptions, UseAutocompleteProps, AutocompleteFreeSoloValueMapping } from "../useAutocomplete/index.js"; import { AutocompleteClasses } from "./autocompleteClasses.js"; import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js"; export interface AutocompletePaperSlotPropsOverrides {} export interface AutocompletePopperSlotPropsOverrides {} export { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteInputChangeReason, AutocompleteValue, createFilterOptions }; export type AutocompleteOwnerState = AutocompleteProps & { disablePortal: boolean; expanded: boolean; focused: boolean; fullWidth: boolean; getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping) => string; hasClearIcon: boolean; hasPopupIcon: boolean; inputFocused: boolean; popupOpen: boolean; size: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>; }; export type AutocompleteRenderGetTagProps = ({ index }: { index: number; }) => { key: number; className: string; disabled: boolean; 'data-tag-index': number; tabIndex: -1; onDelete: (event: any) => void; }; export type AutocompleteRenderValueGetItemProps = Multiple extends true ? (args: { index: number; }) => { key: number; className: string; disabled: boolean; 'data-item-index': number; tabIndex: -1; onDelete: (event: any) => void; } : (args?: { index?: number; }) => { className: string; disabled: boolean; 'data-item-index': number; tabIndex: -1; onDelete: (event: any) => void; }; export type AutocompleteRenderValue = Multiple extends true ? Array> : NonNullable>; export interface AutocompleteRenderOptionState { inputValue: string; index: number; selected: boolean; } export interface AutocompleteRenderGroupParams { key: number; group: string; children?: React.ReactNode; } export interface AutocompleteRenderInputParams { id: string; disabled: boolean; fullWidth: boolean; size: 'small' | undefined; InputLabelProps: ReturnType['getInputLabelProps']>; InputProps: { ref: React.Ref; className: string; startAdornment: React.ReactNode; endAdornment: React.ReactNode; onMouseDown: React.MouseEventHandler; }; inputProps: ReturnType['getInputProps']>; } export interface AutocompletePropsSizeOverrides {} export interface AutocompleteSlots { /** * The component used to render the listbox. * @default 'ul' */ listbox: React.JSXElementConstructor>; /** * The component used to render the body of the popup. * @default Paper */ paper: React.JSXElementConstructor; /** * The component used to position the popup. * @default Popper */ popper: React.JSXElementConstructor; } export type AutocompleteSlotsAndSlotProps = CreateSlotsAndSlotProps>>, {}, AutocompleteOwnerState>; clearIndicator: SlotProps>, {}, AutocompleteOwnerState>; /** * Props applied to the Listbox element. */ listbox: SlotProps['getListboxProps']> & { sx?: SxProps; ref?: React.Ref; }>, {}, AutocompleteOwnerState>; paper: SlotProps>, AutocompletePaperSlotPropsOverrides, AutocompleteOwnerState>; popper: SlotProps>, AutocompletePopperSlotPropsOverrides, AutocompleteOwnerState>; popupIndicator: SlotProps>, {}, AutocompleteOwnerState>; }>; export interface AutocompleteProps extends UseAutocompleteProps, StandardProps, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps { /** * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element. * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ChipProps?: ChipProps; /** * Override or extend the styles applied to the component. */ classes?: Partial; /** * The icon to display in place of the default clear icon. * @default */ clearIcon?: React.ReactNode; /** * Override the default text for the *clear* icon button. * * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/). * @default 'Clear' */ clearText?: string; /** * Override the default text for the *close popup* icon button. * * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/). * @default 'Close' */ closeText?: string; /** * The props used for each slot inside. * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ componentsProps?: { clearIndicator?: Partial; paper?: PaperProps; popper?: Partial; popupIndicator?: Partial; }; /** * If `true`, the component is disabled. * @default false */ disabled?: boolean; /** * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component. * @default false */ disablePortal?: boolean; /** * Force the visibility display of the popup icon. * @default 'auto' */ forcePopupIcon?: true | false | 'auto'; /** * If `true`, the input will take up the full width of its container. * @default false */ fullWidth?: boolean; /** * The label to display when the tags are truncated (`limitTags`). * * @param {number} more The number of truncated tags. * @returns {ReactNode} * @default (more) => `+${more}` */ getLimitTagsText?: (more: number) => React.ReactNode; /** * The component used to render the listbox. * @default 'ul' * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ListboxComponent?: React.JSXElementConstructor>; /** * Props applied to the Listbox element. * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ListboxProps?: ReturnType['getListboxProps']> & { sx?: SxProps; ref?: React.Ref; }; /** * If `true`, the component is in a loading state. * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). * @default false */ loading?: boolean; /** * Text to display when in a loading state. * * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/). * @default 'Loading…' */ loadingText?: React.ReactNode; /** * The maximum number of tags that will be visible when not focused. * Set `-1` to disable the limit. * @default -1 */ limitTags?: number; /** * Text to display when there are no options. * * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/). * @default 'No options' */ noOptionsText?: React.ReactNode; onKeyDown?: (event: React.KeyboardEvent & { defaultMuiPrevented?: boolean; }) => void; /** * Override the default text for the *open popup* icon button. * * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/). * @default 'Open' */ openText?: string; /** * The component used to render the body of the popup. * @default Paper * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ PaperComponent?: React.JSXElementConstructor>; /** * The component used to position the popup. * @default Popper * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ PopperComponent?: React.JSXElementConstructor; /** * The icon to display in place of the default popup icon. * @default */ popupIcon?: React.ReactNode; /** * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted. * @default false */ readOnly?: boolean; /** * Render the group. * * @param {AutocompleteRenderGroupParams} params The group to render. * @returns {ReactNode} */ renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode; /** * Render the input. * * **Note:** The `renderInput` prop must return a `TextField` component or a compatible custom component * that correctly forwards `InputProps.ref` and spreads `inputProps`. This ensures proper integration * with the Autocomplete's internal logic (e.g., focus management and keyboard navigation). * * Avoid using components like `DatePicker` or `Select` directly, as they may not forward the required props, * leading to runtime errors or unexpected behavior. * * @param {object} params * @returns {ReactNode} */ renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode; /** * Render the option, use `getOptionLabel` by default. * * @param {object} props The props to apply on the li element. * @param {Value} option The option to render. * @param {object} state The state of each option. * @param {object} ownerState The state of the Autocomplete component. * @returns {ReactNode} */ renderOption?: (props: React.HTMLAttributes & { key: any; }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState) => React.ReactNode; /** * Render the selected value when doing multiple selections. * * @deprecated Use `renderValue` prop instead * * @param {Value[]} value The `value` provided to the component. * @param {function} getTagProps A tag props getter. * @param {object} ownerState The state of the Autocomplete component. * @returns {ReactNode} */ renderTags?: (value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState) => React.ReactNode; /** * Renders the selected value(s) as rich content in the input for both single and multiple selections. * * @param {AutocompleteRenderValue} value The `value` provided to the component. * @param {function} getItemProps The value item props. * @param {object} ownerState The state of the Autocomplete component. * @returns {ReactNode} */ renderValue?: (value: AutocompleteRenderValue, getItemProps: AutocompleteRenderValueGetItemProps, ownerState: AutocompleteOwnerState) => React.ReactNode; /** * The size of the component. * @default 'medium' */ size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; } /** * * Demos: * * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/) * * API: * * - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/) */ export default function Autocomplete(props: AutocompleteProps): React.JSX.Element;