329 lines
No EOL
14 KiB
TypeScript
329 lines
No EOL
14 KiB
TypeScript
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<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
|
|
disablePortal: boolean;
|
|
expanded: boolean;
|
|
focused: boolean;
|
|
fullWidth: boolean;
|
|
getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => 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 boolean | undefined> = 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<Value, Multiple, FreeSolo> = Multiple extends true ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>> : NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>;
|
|
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<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
|
|
InputProps: {
|
|
ref: React.Ref<any>;
|
|
className: string;
|
|
startAdornment: React.ReactNode;
|
|
endAdornment: React.ReactNode;
|
|
onMouseDown: React.MouseEventHandler;
|
|
};
|
|
inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
|
|
}
|
|
export interface AutocompletePropsSizeOverrides {}
|
|
export interface AutocompleteSlots {
|
|
/**
|
|
* The component used to render the listbox.
|
|
* @default 'ul'
|
|
*/
|
|
listbox: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
|
|
/**
|
|
* The component used to render the body of the popup.
|
|
* @default Paper
|
|
*/
|
|
paper: React.JSXElementConstructor<PaperProps & AutocompletePaperSlotPropsOverrides>;
|
|
/**
|
|
* The component used to position the popup.
|
|
* @default Popper
|
|
*/
|
|
popper: React.JSXElementConstructor<PopperProps & AutocompletePopperSlotPropsOverrides>;
|
|
}
|
|
export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = CreateSlotsAndSlotProps<AutocompleteSlots, {
|
|
chip: SlotProps<React.ElementType<Partial<ChipProps<ChipComponent>>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
|
|
clearIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
|
|
/**
|
|
* Props applied to the Listbox element.
|
|
*/
|
|
listbox: SlotProps<React.ElementType<ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
|
|
sx?: SxProps<Theme>;
|
|
ref?: React.Ref<Element>;
|
|
}>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
|
|
paper: SlotProps<React.ElementType<Partial<PaperProps>>, AutocompletePaperSlotPropsOverrides, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
|
|
popper: SlotProps<React.ElementType<Partial<PopperProps>>, AutocompletePopperSlotPropsOverrides, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
|
|
popupIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
|
|
}>;
|
|
export interface AutocompleteProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
|
|
/**
|
|
* 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<ChipComponent>;
|
|
/**
|
|
* Override or extend the styles applied to the component.
|
|
*/
|
|
classes?: Partial<AutocompleteClasses>;
|
|
/**
|
|
* The icon to display in place of the default clear icon.
|
|
* @default <ClearIcon fontSize="small" />
|
|
*/
|
|
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<IconButtonProps>;
|
|
paper?: PaperProps;
|
|
popper?: Partial<PopperProps>;
|
|
popupIndicator?: Partial<IconButtonProps>;
|
|
};
|
|
/**
|
|
* 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<React.HTMLAttributes<HTMLElement>>;
|
|
/**
|
|
* 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<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
|
|
sx?: SxProps<Theme>;
|
|
ref?: React.Ref<Element>;
|
|
};
|
|
/**
|
|
* 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<HTMLDivElement> & {
|
|
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<React.HTMLAttributes<HTMLElement>>;
|
|
/**
|
|
* 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<PopperProps>;
|
|
/**
|
|
* The icon to display in place of the default popup icon.
|
|
* @default <ArrowDropDownIcon />
|
|
*/
|
|
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<HTMLLIElement> & {
|
|
key: any;
|
|
}, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => 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<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
|
|
/**
|
|
* Renders the selected value(s) as rich content in the input for both single and multiple selections.
|
|
*
|
|
* @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} 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<Value, Multiple, FreeSolo>, getItemProps: AutocompleteRenderValueGetItemProps<Multiple>, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => 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<Theme>;
|
|
}
|
|
|
|
/**
|
|
*
|
|
* Demos:
|
|
*
|
|
* - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
|
|
*
|
|
* API:
|
|
*
|
|
* - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/)
|
|
*/
|
|
export default function Autocomplete<Value, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']>(props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>): React.JSX.Element; |