@lunit/oui/dist/components/Autocomplete/Autocomplete.js

Lunit Oncology UI components

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Autocomplete as MuiAutocomplete, TextField, useTheme } from '@mui/material';
import { Chip } from '../Chip';
import { Button } from '../Button';
import { CircularProgress } from '../Progress';
import { CloseSmall } from '../../icons';
import { autocompleteSx, paperSx } from './Autocomplete.styled';
const LOADING_SPINNER_SIZE = 20;
function Autocomplete({ placeholder = '', error, helperText, loading = false, noOptionsText, onDelete, onClearButtonClick, disabled, inputValue, sx, ...otherProps }) {
    const theme = useTheme();
    return (_jsx(MuiAutocomplete, { multiple: true, freeSolo: true, disableClearable: true, disabled: disabled, loading: loading, loadingText: noOptionsText, inputValue: inputValue, sx: [autocompleteSx(theme, disabled), ...(Array.isArray(sx) ? sx : [sx])], slotProps: {
            listbox: { style: { maxHeight: '180px', overflow: 'auto' } },
            paper: { sx: paperSx(theme) },
        }, renderValue: (values) => values.map((option) => (_jsx(Chip, { disabled: disabled, label: option, onDelete: onDelete ? () => onDelete(option) : undefined }, option))), renderInput: (params) => (_jsx(TextField, { ...params, variant: "outlined", placeholder: placeholder, error: error, helperText: helperText, slotProps: {
                ...params.slotProps,
                input: {
                    ...params.slotProps?.input,
                    endAdornment: (_jsxs(_Fragment, { children: [loading ? (_jsx(CircularProgress, { size: LOADING_SPINNER_SIZE, sx: { color: theme.palette.neutralGrey[45] } })) : null, onClearButtonClick ? (_jsx(Button, { icon: _jsx(CloseSmall, { style: { color: theme.palette.neutralGrey[45] } }), size: "small", variant: "ghost", onClick: onClearButtonClick })) : null] })),
                },
            } })), ...otherProps }));
}
export default Autocomplete;