const {

classes,

disablePortal,

expanded,

focused,

fullWidth,

hasClearIcon,

hasPopupIcon,

inputFocused,

popupOpen,

size,

} = ownerState;

const slots = {

root: [

'root',

expanded && 'expanded',

focused && 'focused',

fullWidth && 'fullWidth',

hasClearIcon && 'hasClearIcon',

hasPopupIcon && 'hasPopupIcon',

],

inputRoot: ['inputRoot'],

input: ['input', inputFocused && 'inputFocused'],

tag: ['tag', `tagSize${capitalize(size)}`],

endAdornment: ['endAdornment'],

clearIndicator: ['clearIndicator'],

popupIndicator: ['popupIndicator', popupOpen && 'popupIndicatorOpen'],

popper: ['popper', disablePortal && 'popperDisablePortal'],

paper: ['paper'],

listbox: ['listbox'],

loading: ['loading'],

noOptions: ['noOptions'],

option: ['option'],

groupLabel: ['groupLabel'],

groupUl: ['groupUl'],

};

return composeClasses(slots, getAutocompleteUtilityClass, classes);

const { ownerState } = props;

const { fullWidth, hasClearIcon, hasPopupIcon, inputFocused, size } = ownerState;

return [

{ [`& .${autocompleteClasses.tag}`]: styles.tag },

{ [`& .${autocompleteClasses.tag}`]: styles[`tagSize${capitalize(size)}`] },

{ [`& .${autocompleteClasses.inputRoot}`]: styles.inputRoot },

{ [`& .${autocompleteClasses.input}`]: styles.input },

{ [`& .${autocompleteClasses.input}`]: inputFocused && styles.inputFocused },

styles.root,

fullWidth && styles.fullWidth,

hasPopupIcon && styles.hasPopupIcon,

hasClearIcon && styles.hasClearIcon,

];

const { ownerState } = props;

return [

{ [`& .${autocompleteClasses.option}`]: styles.option },

styles.popper,

ownerState.disablePortal && styles.popperDisablePortal,

];

const props = useDefaultProps({ props: inProps, name: 'MuiAutocomplete' });

/* eslint-disable @typescript-eslint/no-unused-vars */

const {

autoComplete = false,

autoHighlight = false,

autoSelect = false,

blurOnSelect = false,

ChipProps: ChipPropsProp,

className,

clearIcon = <ClearIcon fontSize="small" />,

clearOnBlur = !props.freeSolo,

clearOnEscape = false,

clearText = 'Clear',

closeText = 'Close',

componentsProps,

defaultValue = props.multiple ? [] : null,

disableClearable = false,

disableCloseOnSelect = false,

disabled = false,

disabledItemsFocusable = false,

disableListWrap = false,

disablePortal = false,

filterOptions,

filterSelectedOptions = false,

forcePopupIcon = 'auto',

freeSolo = false,

fullWidth = false,

getLimitTagsText = (more) => `+${more}`,

getOptionDisabled,

getOptionKey,

getOptionLabel: getOptionLabelProp,

isOptionEqualToValue,

groupBy,

handleHomeEndKeys = !props.freeSolo,

id: idProp,

includeInputInList = false,

inputValue: inputValueProp,

limitTags = -1,

ListboxComponent: ListboxComponentProp,

ListboxProps: ListboxPropsProp,

loading = false,

loadingText = 'Loading…',

multiple = false,

noOptionsText = 'No options',

onChange,

onClose,

onHighlightChange,

onInputChange,

onOpen,

open,

openOnFocus = false,

openText = 'Open',

options,

PaperComponent: PaperComponentProp,

PopperComponent: PopperComponentProp,

popupIcon = <ArrowDropDownIcon />,

readOnly = false,

renderGroup: renderGroupProp,

renderInput,

renderOption: renderOptionProp,

renderTags,

selectOnFocus = !props.freeSolo,

size = 'medium',

slots = {},

slotProps = {},

value: valueProp,

...other

} = props;

/* eslint-enable @typescript-eslint/no-unused-vars */

const {

getRootProps,

getInputProps,

getInputLabelProps,

getPopupIndicatorProps,

getClearProps,

getTagProps,

getListboxProps,

getOptionProps,

value,

dirty,

expanded,

id,

popupOpen,

focused,

focusedTag,

anchorEl,

setAnchorEl,

inputValue,

groupedOptions,

} = useAutocomplete({ ...props, componentName: 'Autocomplete' });

const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;

const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;

const { onMouseDown: handleInputMouseDown } = getInputProps();

const { ref: listboxRef, ...otherListboxProps } = getListboxProps();

const defaultGetOptionLabel = (option) => option.label ?? option;

const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;

// If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.

const ownerState = {

...props,

disablePortal,

expanded,

focused,

fullWidth,

getOptionLabel,

hasClearIcon,

hasPopupIcon,

inputFocused: focusedTag === -1,

popupOpen,

size,

};

const classes = useUtilityClasses(ownerState);

const externalForwardedProps = {

slots: {

listbox: ListboxComponentProp,

paper: PaperComponentProp,

popper: PopperComponentProp,

...slots,

},

slotProps: {

chip: ChipPropsProp,

listbox: ListboxPropsProp,

...componentsProps,

...slotProps,

},

};

const [ListboxSlot, listboxProps] = useSlot('listbox', {

elementType: 'ul',

externalForwardedProps,

ownerState,

className: classes.listbox,

additionalProps: otherListboxProps,

ref: listboxRef,

});

const [PaperSlot, paperProps] = useSlot('paper', {

elementType: Paper,

externalForwardedProps,

ownerState,

className: classes.paper,

});

const [PopperSlot, popperProps] = useSlot('popper', {

elementType: Popper,

externalForwardedProps,

ownerState,

className: classes.popper,

additionalProps: {

disablePortal,

style: { width: anchorEl ? anchorEl.clientWidth : null },

role: 'presentation',

anchorEl,

open: popupOpen,

},

});

let startAdornment;

if (multiple && value.length > 0) {

const getCustomizedTagProps = (params) => ({

className: classes.tag,

disabled,

...getTagProps(params),

});

if (renderTags) {

startAdornment = renderTags(value, getCustomizedTagProps, ownerState);

} else {

startAdornment = value.map((option, index) => {

const { key, ...customTagProps } = getCustomizedTagProps({ index });

return (

<Chip

key={key}

label={getOptionLabel(option)}

size={size}

{...customTagProps}

{...externalForwardedProps.slotProps.chip}

/>

);

});

}

}

if (limitTags > -1 && Array.isArray(startAdornment)) {

const more = startAdornment.length - limitTags;

if (!focused && more > 0) {

startAdornment = startAdornment.splice(0, limitTags);

startAdornment.push(

<span className={classes.tag} key={startAdornment.length}>

{getLimitTagsText(more)}

</span>,

);

}

}

const defaultRenderGroup = (params) => (

<li key={params.key}>

<AutocompleteGroupLabel

className={classes.groupLabel}

ownerState={ownerState}

component="div"

>

{params.group}

</AutocompleteGroupLabel>

<AutocompleteGroupUl className={classes.groupUl} ownerState={ownerState}>

{params.children}

</AutocompleteGroupUl>

</li>

);

const renderGroup = renderGroupProp || defaultRenderGroup;

const defaultRenderOption = (props2, option) => {

// Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642

const { key, ...otherProps } = props2;

return (

<li key={key} {...otherProps}>

{getOptionLabel(option)}

</li>

);

};

const renderOption = renderOptionProp || defaultRenderOption;

const renderListOption = (option, index) => {

const optionProps = getOptionProps({ option, index });

return renderOption(

{ ...optionProps, className: classes.option },

option,

{

selected: optionProps['aria-selected'],

index,

inputValue,

},

ownerState,

);

};

const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;

const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;

const renderAutocompletePopperChildren = (children) => (

<AutocompletePopper as={PopperSlot} {...popperProps}>

<AutocompletePaper as={PaperSlot} {...paperProps}>

{children}

</AutocompletePaper>

</AutocompletePopper>

);

let autocompletePopper = null;

if (groupedOptions.length > 0) {

autocompletePopper = renderAutocompletePopperChildren(

<AutocompleteListbox as={ListboxSlot} {...listboxProps}>

{groupedOptions.map((option, index) => {

if (groupBy) {

return renderGroup({

key: option.key,

group: option.group,

children: option.options.map((option2, index2) =>

renderListOption(option2, option.index + index2),

),

});

}

return renderListOption(option, index);

})}

</AutocompleteListbox>,

);

} else if (loading && groupedOptions.length === 0) {

autocompletePopper = renderAutocompletePopperChildren(

<AutocompleteLoading className={classes.loading} ownerState={ownerState}>

{loadingText}

</AutocompleteLoading>,

);

} else if (groupedOptions.length === 0 && !freeSolo && !loading) {

autocompletePopper = renderAutocompletePopperChildren(

<AutocompleteNoOptions

className={classes.noOptions}

ownerState={ownerState}

role="presentation"

onMouseDown={(event) => {

// Prevent input blur when interacting with the "no options" content

event.preventDefault();

}}

>

{noOptionsText}

</AutocompleteNoOptions>,

);

}

return (

<React.Fragment>

<AutocompleteRoot

ref={ref}

className={clsx(classes.root, className)}

ownerState={ownerState}

{...getRootProps(other)}

>

{renderInput({

id,

disabled,

fullWidth: true,

size: size === 'small' ? 'small' : undefined,

InputLabelProps: getInputLabelProps(),

InputProps: {

ref: setAnchorEl,

className: classes.inputRoot,

startAdornment,

onClick: (event) => {

if (event.target === event.currentTarget) {

handleInputMouseDown(event);

}

},

...((hasClearIcon || hasPopupIcon) && {

endAdornment: (

<AutocompleteEndAdornment className={classes.endAdornment} ownerState={ownerState}>

{hasClearIcon ? (

<AutocompleteClearIndicator

{...getClearProps()}

aria-label={clearText}

title={clearText}

ownerState={ownerState}

{...clearIndicatorSlotProps}

className={clsx(classes.clearIndicator, clearIndicatorSlotProps?.className)}

>

{clearIcon}

</AutocompleteClearIndicator>

) : null}

{hasPopupIcon ? (

<AutocompletePopupIndicator

{...getPopupIndicatorProps()}

disabled={disabled}

aria-label={popupOpen ? closeText : openText}

title={popupOpen ? closeText : openText}

ownerState={ownerState}

{...popupIndicatorSlotProps}

className={clsx(classes.popupIndicator, popupIndicatorSlotProps?.className)}

>

{popupIcon}

</AutocompletePopupIndicator>

) : null}

</AutocompleteEndAdornment>

),

}),

},

inputProps: {

className: classes.input,

disabled,

readOnly,

...getInputProps(),

},

})}

</AutocompleteRoot>

{anchorEl ? autocompletePopper : null}

</React.Fragment>

);