310 lines
9.3 KiB
TypeScript
310 lines
9.3 KiB
TypeScript
import * as React from 'react';
|
|
import { SxProps } from '@mui/system';
|
|
import { OverridableStringUnion } from '@mui/types';
|
|
import {
|
|
useAutocomplete,
|
|
AutocompleteChangeDetails,
|
|
AutocompleteChangeReason,
|
|
AutocompleteCloseReason,
|
|
AutocompleteInputChangeReason,
|
|
AutocompleteValue,
|
|
createFilterOptions,
|
|
UseAutocompleteProps,
|
|
AutocompleteFreeSoloValueMapping,
|
|
} from '@mui/base';
|
|
import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
|
|
import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
|
|
import { PaperProps } from '@mui/material/Paper';
|
|
import { PopperProps } from '@mui/material/Popper';
|
|
import { AutocompleteClasses } from './autocompleteClasses';
|
|
|
|
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 interface AutocompleteRenderOptionState {
|
|
inputValue: string;
|
|
index: number;
|
|
selected: boolean;
|
|
}
|
|
|
|
export interface AutocompleteRenderGroupParams {
|
|
key: string;
|
|
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;
|
|
};
|
|
inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
|
|
}
|
|
|
|
export interface AutocompletePropsSizeOverrides {}
|
|
|
|
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'> {
|
|
/**
|
|
* Props applied to the [`Chip`](/material-ui/api/chip/) element.
|
|
*/
|
|
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](/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](/material-ui/guides/localization/).
|
|
* @default 'Close'
|
|
*/
|
|
closeText?: string;
|
|
/**
|
|
* The props used for each slot inside.
|
|
* @default {}
|
|
*/
|
|
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'
|
|
*/
|
|
ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
|
|
/**
|
|
* Props applied to the Listbox element.
|
|
*/
|
|
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](/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](/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](/material-ui/guides/localization/).
|
|
* @default 'Open'
|
|
*/
|
|
openText?: string;
|
|
/**
|
|
* The component used to render the body of the popup.
|
|
* @default Paper
|
|
*/
|
|
PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
|
|
/**
|
|
* The component used to position the popup.
|
|
* @default Popper
|
|
*/
|
|
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.
|
|
*
|
|
* @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>,
|
|
option: Value,
|
|
state: AutocompleteRenderOptionState,
|
|
ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
|
|
) => React.ReactNode;
|
|
/**
|
|
* Render the selected value.
|
|
*
|
|
* @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;
|
|
/**
|
|
* The size of the component.
|
|
* @default 'medium'
|
|
*/
|
|
size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
|
|
/**
|
|
* The props used for each slot inside.
|
|
* @default {}
|
|
*/
|
|
slotProps?: {
|
|
clearIndicator?: Partial<IconButtonProps>;
|
|
paper?: PaperProps;
|
|
popper?: Partial<PopperProps>;
|
|
popupIndicator?: Partial<IconButtonProps>;
|
|
};
|
|
/**
|
|
* 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>,
|
|
): JSX.Element;
|