@amaui/ui-react
Version:
UI for React
587 lines (586 loc) • 34.1 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
const IconMaterialArrowDropDownW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
const Menu_1 = __importDefault(require("../Menu"));
const Chip_1 = __importDefault(require("../Chip"));
const Type_1 = __importDefault(require("../Type"));
const List_1 = __importDefault(require("../List"));
const ListItem_1 = __importDefault(require("../ListItem"));
const TextField_1 = __importDefault(require("../TextField"));
const IconButton_1 = __importDefault(require("../IconButton"));
const RoundProgress_1 = __importDefault(require("../RoundProgress"));
const ListSubheader_1 = __importDefault(require("../ListSubheader"));
const Line_1 = __importDefault(require("../Line"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
width: '100%',
flex: 'unset',
'& .amaui-TextField-input': {
flex: '1 1 auto',
width: 'auto'
}
},
wrapper: {
position: 'relative'
},
input_: {
alignSelf: 'center'
},
input: Object.assign({ display: 'inline-flex', margin: '0px', border: '0px', color: theme.palette.text.default.primary, background: 'transparent', '-webkit-tap-highlight-color': 'transparent', textAlign: 'start', borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`, minHeight: 20 }, theme.typography.values.b2),
inputWrapper_multiple_size_small: {
minHeight: '48px',
columnGap: '6px',
rowGap: '12px'
},
inputWrapper_multiple_size_regular: {
minHeight: '56px',
columnGap: '8px',
rowGap: '16px'
},
inputWrapper_multiple_size_large: {
minHeight: '64px',
columnGap: '10px',
rowGap: '20px'
},
multiple: {
'&.amaui-TextField-input-wrapper': {
height: 'unset'
}
},
chipGroup_padding: {
paddingTop: theme.methods.space.value(0.5, 'px')
},
arrow: {
transition: theme.methods.transitions.make('transform')
},
arrow_open: {
transform: 'rotate(-180deg)'
},
open: {},
readOnly: {
'&.amaui-TextField-input-wrapper': {
cursor: 'default'
}
},
list: {
maxHeight: '250px',
overflow: 'auto'
},
limitText: {
alignSelf: 'center'
},
roundProgress: {
padding: `0 ${theme.methods.space.value(1, 'px')}`
},
disabled: {
'&.amaui-TextField-input-wrapper': {
cursor: 'default'
}
}
}), { name: 'amaui-AutoComplete' });
const getText = (value) => {
const value_ = (value === null || value === void 0 ? void 0 : value.name) || (value === null || value === void 0 ? void 0 : value.label) || (value === null || value === void 0 ? void 0 : value.primary) || (value === null || value === void 0 ? void 0 : value.secondary) || (value === null || value === void 0 ? void 0 : value.tertiary) || (value === null || value === void 0 ? void 0 : value.children) || (value === null || value === void 0 ? void 0 : value.value) || value;
return (0, utils_1.is)('simple', value_) ? String(value_) : '';
};
const getValue = (value) => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
const AutoComplete = react_1.default.forwardRef((props_, ref) => {
var _a;
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiAutoComplete) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
const Chip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chip) || Chip_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const List = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.List) || List_1.default; }, [theme]);
const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
const RoundProgress = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundProgress) || RoundProgress_1.default; }, [theme]);
const ListSubheader = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListSubheader) || ListSubheader_1.default; }, [theme]);
const { tonal = true, color = 'primary', size = 'regular', version = 'filled', valueInput: valueInput_, valueInputDefault, onChangeInput: onChangeInput_, value: value_, valueDefault, onChange: onChange_, options: options_ = [], label, multiple, prefix, sufix, start, end, autoWidth = true, readOnly, getLabel: getLabel_, renderValues: renderValues_, renderChip, renderOption, equal, equalInput, filter, clear = true, loading, autoSelectOnBlur, blurOnSelect = false, noOptions, noOptionsObject, startOptionsObject, noOptionsElement, startOptionsElement, endOptionsElement, endOptionsObject, openOnFocus = true, closeOnSelect, clearOnEscape, groupBy, limit, filterOutSelectedOptions, selectOnFocus, clearOnBlur, clearInputOnSelect, chip, fullWidth, noInputValue, disabled, IconClear = IconMaterialCloseW100_1.default, IconDropdown = IconMaterialArrowDropDownW100_1.default, WrapperProps, ChipProps, ListProps, MenuProps, IconButtonProps, InputProps, IconProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "size", "version", "valueInput", "valueInputDefault", "onChangeInput", "value", "valueDefault", "onChange", "options", "label", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "readOnly", "getLabel", "renderValues", "renderChip", "renderOption", "equal", "equalInput", "filter", "clear", "loading", "autoSelectOnBlur", "blurOnSelect", "noOptions", "noOptionsObject", "startOptionsObject", "noOptionsElement", "startOptionsElement", "endOptionsElement", "endOptionsObject", "openOnFocus", "closeOnSelect", "clearOnEscape", "groupBy", "limit", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "className", "style", "children"]);
const children = react_1.default.Children.toArray(children_);
const [init, setInit] = react_1.default.useState(false);
const [valueInput, setValueInput] = react_1.default.useState(valueInputDefault !== undefined ? valueInputDefault : valueInput_);
const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_) || []);
const [focus, setFocus] = react_1.default.useState(false);
const [open, setOpen] = react_1.default.useState(false);
const [mouseDown, setMouseDown] = react_1.default.useState(false);
const [options, setOptions] = react_1.default.useState(options_);
const [free, setFree] = react_1.default.useState(false);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined),
wrapper: react_1.default.useRef(undefined),
value: react_1.default.useRef(undefined),
valueInput: react_1.default.useRef(undefined),
menu: react_1.default.useRef(undefined),
input: react_1.default.useRef(undefined),
optionsProps: react_1.default.useRef(options_),
ids: {
list: react_1.default.useId()
}
};
refs.value.current = value;
refs.valueInput.current = valueInput;
refs.optionsProps.current = options_;
const styles = {
root: {},
menu: {}
};
if ((MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.portal) && autoWidth) {
styles.menu.width = (_a = refs.wrapper.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
}
react_1.default.useEffect(() => {
var _a;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
const method = (event) => {
if (event.key === 'Escape') {
if (clearOnEscape)
onClear();
onClose(true);
}
};
rootDocument.addEventListener('keydown', method);
rootDocument.addEventListener('mouseup', onMouseUp);
setInit(true);
return () => {
// Clean up
rootDocument.removeEventListener('mouseup', onMouseUp);
rootDocument.removeEventListener('keydown', method);
};
}, []);
react_1.default.useEffect(() => {
const option = (refs.optionsProps.current || []).find(item_ => isEqualToInput(refs.valueInput.current, item_));
if (!!(valueInput === null || valueInput === void 0 ? void 0 : valueInput.length) && !open && !option && !disabled && !readOnly)
setOpen(!free);
}, [valueInput, free]);
react_1.default.useEffect(() => {
if (value_ !== undefined && value_ !== value)
setValue(value_);
}, [value_]);
react_1.default.useEffect(() => {
if (valueInput_ !== undefined && valueInput_ !== valueInput)
setValueInput(valueInput_);
}, [valueInput_]);
react_1.default.useEffect(() => {
if (init && loading) {
setOpen(true);
updateOptions();
}
}, [loading]);
react_1.default.useEffect(() => {
updateOptions(undefined, options_);
}, [options_]);
const updateOptions = (valueInputNew = refs.valueInput.current, newOptions = undefined) => {
let optionsValue = refs.optionsProps.current;
// reset
setFree(false);
if (loading)
optionsValue = [{ label: 'Loading...', version: 'text' }];
else if (newOptions)
optionsValue = newOptions;
else
optionsValue = (0, utils_1.is)('function', filter) ? filter(valueInputNew, refs.optionsProps.current) : refs.optionsProps.current.filter(option => isEqualToInput(valueInputNew, option));
if (!optionsValue.length) {
if (noOptions)
optionsValue.push(noOptionsObject !== undefined ? noOptionsObject : { primary: 'No options', version: 'text', noOptions: true });
else {
setOpen(false);
setFree(true);
setOptions(optionsValue);
return;
}
}
if (!loading) {
if (startOptionsObject)
optionsValue.unshift(startOptionsObject);
if (endOptionsObject)
optionsValue.push(endOptionsObject);
}
setOptions(optionsValue);
};
const onMouseDown = react_1.default.useCallback((event) => {
if (!disabled && !readOnly)
setMouseDown(true);
}, [readOnly, disabled]);
const onMouseUp = react_1.default.useCallback((event) => {
if (!disabled && !readOnly)
setMouseDown(false);
}, [readOnly, disabled]);
const onFocus = react_1.default.useCallback((event) => {
if (!disabled && !readOnly) {
setFocus(true);
if (selectOnFocus)
setTimeout(() => refs.input.current.select());
}
}, [readOnly, disabled]);
const onBlur = (event) => {
if (!disabled && !readOnly)
setFocus(false);
};
const onClick = react_1.default.useCallback((event) => {
if (!disabled && !readOnly)
setOpen(open_ => {
if (!open_) {
if (!openOnFocus)
return open_;
refs.input.current.focus();
// if input wrapper overflows
event.target.scrollTo(0, 0);
}
return !open_;
});
}, [readOnly, disabled]);
const onClickArrowDown = react_1.default.useCallback((event) => {
if (!disabled && !readOnly)
setOpen(open_ => {
if (!open_)
refs.input.current.focus();
return !open_;
});
}, [readOnly, disabled]);
const onEnterKeyDown = react_1.default.useCallback((event) => {
if (event.key === 'Enter' && !disabled && !readOnly)
setOpen(open_ => {
if (!open_) {
if (!openOnFocus)
return open_;
refs.input.current.focus();
}
return !open_;
});
}, [readOnly, disabled]);
const onClose = (refocus = true) => {
if (!disabled && !readOnly) {
setOpen(open_ => {
if (open_) {
if (refocus)
refs.input.current.focus();
if (clearOnBlur) {
const option = options.find(item_ => isEqualToInput(refs.valueInput.current, item_));
if (!option)
onClear();
}
}
return false;
});
}
};
const onExited = () => {
var _a;
if (!disabled && !readOnly) {
if (!open) {
const option = (refs.optionsProps.current || []).find(item_ => isEqualToInput(refs.valueInput.current, item_));
// Update options to all values
// if value is one of the option values
if (option || !refs.valueInput.current || ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.noOptions))
updateOptions(undefined, refs.optionsProps.current);
}
}
};
const onChange = (valueNew) => {
// Inner controlled value
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange_))
onChange_(valueNew);
};
const onChangeInput = (valueNew) => {
if (!disabled && !readOnly) {
updateOptions(valueNew);
if (!open)
setOpen(true);
// Inner controlled value
if (!props.hasOwnProperty('valueInput'))
setValueInput(valueNew);
if ((0, utils_1.is)('function', onChangeInput_))
onChangeInput_(valueNew);
}
};
const onClear = react_1.default.useCallback((refocus = true) => {
if (!disabled && !readOnly) {
onChangeInput('');
onChange(multiple ? [] : null);
if (refocus)
refs.input.current.focus();
}
}, [multiple, readOnly, disabled]);
const onClearInput = react_1.default.useCallback((refocus = true) => {
if (!disabled && !readOnly) {
onChangeInput('');
if (refocus)
refs.input.current.focus();
}
}, []);
const isEqual = (value1, value2) => (0, utils_1.is)('function', equal) ? equal(value1, value2) : getValue(value1) === getValue(value2);
const isEqualToInput = (inputValue = refs.valueInput.current, item) => { var _a; return (0, utils_1.is)('function', equalInput) ? equalInput(inputValue, item) : (_a = getText(item)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); };
const onSelect = (valueNew) => {
const values = multiple ? (0, utils_1.is)('array', value) ? value : [value] : value;
const selected = multiple ? !!values.find((item) => isEqual(valueNew, item)) : isEqual(valueNew, value);
if (!selected) {
onChange(!multiple ? valueNew : [...values, valueNew]);
if (!multiple)
clearInputOnSelect ? onClearInput() : onChangeInput(getText(valueNew));
else if (clearInputOnSelect)
onClearInput();
}
};
const onUnselect = (valueNew) => {
if (multiple) {
let values = [...((0, utils_1.is)('array', value) ? value : [value])];
values = values.filter((item) => !isEqual(valueNew, item));
onChange(values);
}
};
const items = react_1.default.useMemo(() => {
return (options_ || []).map((item) => (Object.assign(Object.assign({}, item), { name: String((item === null || item === void 0 ? void 0 : item.name) !== undefined ? item === null || item === void 0 ? void 0 : item.name : (item === null || item === void 0 ? void 0 : item.value) !== undefined ? item.value : item), value: (item === null || item === void 0 ? void 0 : item.value) !== undefined ? item === null || item === void 0 ? void 0 : item.value : item })));
}, [options_]);
const getLabel = (item, propsOther) => {
if ((0, utils_1.is)('function', getLabel_))
return getLabel_(item, propsOther);
const properties = ['name', 'label', 'primary', 'secondary', 'tertiary', 'value', 'children'];
const objects = [item, item === null || item === void 0 ? void 0 : item.props].filter(Boolean);
for (const itemObject of objects) {
if ((0, utils_1.is)('simple', itemObject))
return itemObject;
const valueItem = (0, utils_1.getObjectValue)(itemObject, ...properties);
if (valueItem !== undefined)
return valueItem;
}
return 'No name';
};
const renderValue = (itemValue = value) => {
const item = !!(items === null || items === void 0 ? void 0 : items.length) ? items.find((item_) => getValue(item_) === getValue(itemValue)) : children.find((item_) => { var _a; return getValue((_a = item_.props) === null || _a === void 0 ? void 0 : _a.value) === getValue(itemValue); });
return item ? getLabel(item, props) : getLabel(itemValue, props) || '';
};
const renderValues = renderValues_ || ((value__ = refs.value.current, onUnselectMethod = onUnselect) => {
if (multiple) {
if (chip) {
let values = value__;
if ((0, utils_1.is)('number', limit) && !open)
values = values.slice(0, limit);
values = values.map((item, index) => {
const other_ = {
key: index,
onClick: (event) => {
event.preventDefault();
event.stopPropagation();
},
onRemove: (event) => {
event.preventDefault();
event.stopPropagation();
onUnselectMethod(item);
},
input: true
};
if ((0, utils_1.is)('function', renderChip))
return renderChip(item, renderValue(item), other_);
return ((0, jsx_runtime_1.jsx)(Chip, Object.assign({ size: 'small' }, ChipProps, other_, { children: renderValue(item) }), index));
});
if ((0, utils_1.is)('number', limit) && !open && value.length - limit > 0)
values.push((0, jsx_runtime_1.jsxs)(Type, Object.assign({ color: 'default', className: classes.limitText }, { children: ["+", value.length - limit] })));
return values;
}
return value__.map(item => renderValue(item)).join(', ');
}
return renderValue(value);
});
let optionsToUse = options;
if (filterOutSelectedOptions) {
optionsToUse = optionsToUse.filter(option => {
var _a;
const selected = !!((_a = ((0, utils_1.is)('array', value) ? value : [value])) === null || _a === void 0 ? void 0 : _a.find((item) => isEqual(item, option)));
return !selected;
});
}
const groups = {};
if ((0, utils_1.is)('function', groupBy)) {
optionsToUse.forEach(option => {
const valueForGroupBy = groupBy(option) || 'Other';
if (!groups[valueForGroupBy])
groups[valueForGroupBy] = [];
groups[valueForGroupBy].push(option);
});
optionsToUse = [];
if (Object.keys(groups).length)
Object.keys(groups).forEach(item => {
const array = groups[item];
optionsToUse.push({ label: item, version: 'subheader' }, ...array);
});
}
const renderOptionValue = (values) => {
const result = values.map((item, index) => {
var _a;
let other_ = {};
const button = item.version === undefined || item.version === 'button';
const selected = !!((_a = ((0, utils_1.is)('array', value) ? value : [value])) === null || _a === void 0 ? void 0 : _a.find((item_) => isEqual(item, item_)));
if (button) {
other_ = {
primary: getLabel(item),
value: item,
button,
selected,
onClick: (event) => {
var _a, _b;
if (multiple && selected)
onUnselect(item);
else
onSelect(item);
if ((0, utils_1.is)('function', (_a = item.props) === null || _a === void 0 ? void 0 : _a.onClick))
(_b = item.props) === null || _b === void 0 ? void 0 : _b.onClick(event);
if (blurOnSelect) {
if (closeOnSelect)
setOpen(false);
refs.input.current.blur();
}
else if (closeOnSelect)
onClose();
}
};
}
else {
other_.secondary = getLabel(item);
}
other_.onMouseUp = onMouseUp;
other_.onMouseDown = onMouseDown;
if (item.noOptions) {
if (noOptionsElement)
return react_1.default.cloneElement(noOptionsElement, {
key: 'noOptions'
});
}
return ((0, utils_1.is)('function', renderOption) ?
renderOption(item, index, Object.assign(Object.assign({}, other_), item.props)) :
(0, jsx_runtime_1.jsx)(ListItem, Object.assign({ role: 'option', preselected: !open ? false : undefined }, other_, item.props), item.value !== undefined ? item.value : index));
});
if (startOptionsElement)
result.unshift(react_1.default.cloneElement(startOptionsElement, { key: 'startOptionsElement' }));
if (endOptionsElement)
result.push(react_1.default.cloneElement(endOptionsElement, { key: 'endOptionsElement' }));
return result;
};
const renderList = () => {
if (Object.keys(groups).length) {
return (Object.keys(groups).map((item, index) => ((0, jsx_runtime_1.jsxs)("li", Object.assign({ style: { width: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(ListSubheader, Object.assign({ Component: 'div' }, { children: item })), (0, jsx_runtime_1.jsx)(List, Object.assign({ size: size, paddingVertical: 'none', menu: true }, { children: renderOptionValue(groups[item]) }))] }), index))));
}
else
return renderOptionValue(optionsToUse);
};
const endIcons = [
end,
...(!readOnly ? [
...(loading ? [
(0, jsx_runtime_1.jsx)(RoundProgress, { className: classes.roundProgress, size: 'small' }, 1)
] : []),
...(clear ? [!!(multiple ? value.length : valueInput) && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClear, size: 'small', fontSize: utils_2.iconFontSize, "aria-label": 'Input clear' }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) })))] : []),
(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClickArrowDown, size: 'small', fontSize: utils_2.iconFontSize, "aria-expanded": open, "aria-controls": refs.ids.list, InteractionProps: {
clear: !!(multiple ? value.length : valueInput)
} }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDropdown, Object.assign({}, IconProps, { className: (0, style_react_1.classNames)([
IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
classes.arrow,
open && classes.arrow_open
]) })) }), 3)
] : [])
].filter(Boolean);
if (mouseDown)
refs.input.current.focus();
const menuItems = renderList();
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: refs.wrapper, gap: 0, direction: 'column', fullWidth: fullWidth }, WrapperProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('AutoComplete', theme) && [
'amaui-AutoComplete-wrapper',
fullWidth && 'amaui-full-width'
],
WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className,
classes.wrapper
]) }, { children: [(0, jsx_runtime_1.jsxs)(TextField, Object.assign({ ref: refs.input, rootRef: (item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}), onBlur: onBlur, onFocus: onFocus, value: valueInput, onChange: onChangeInput, enabled: open || focus || mouseDown || !!(multiple ? (!!value.length || valueInput) : valueInput), focus: open || focus || mouseDown, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('AutoComplete', theme) && [
'amaui-AutoComplete-root',
`amaui-AutoComplete-version-${version}`,
`amaui-AutoComplete-size-${size}`,
open && `amaui-AutoComplete-open`,
mouseDown && `amaui-AutoComplete-mouse-down`,
focus && `amaui-AutoComplete-focus`,
loading && `amaui-AutoComplete-loading`
],
className,
classes.root,
open && classes.open,
disabled && classes.disabled
]), tonal: tonal, color: color, size: size, version: version, label: label, prefix: prefix, sufix: sufix, start: start, end: endIcons, readOnly: readOnly, endVerticalAlign: 'center', role: 'combobox', "aria-autocomplete": 'list', "aria-multiselectable": multiple, "aria-controls": refs.ids.list, "aria-expanded": open, "aria-haspopup": 'listbox', "aria-labelledby": label, "aria-disabled": disabled, fullWidth: fullWidth, disabled: disabled, InputWrapperProps: {
className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('AutoComplete', theme) && [
'amaui-AutoComplete-input-wrapper'
],
classes.inputWrapper,
multiple && [
classes.multiple,
classes[`inputWrapper_multiple_size_${size}`]
],
chip && classes.chip,
open && classes.open,
readOnly && classes.readOnly
]),
onMouseDown,
onMouseUp,
onClick,
onKeyDown: onEnterKeyDown
}, inputProps: Object.assign(Object.assign({ disabled: multiple, readOnly: multiple }, InputProps), { className: (0, style_react_1.classNames)([
InputProps === null || InputProps === void 0 ? void 0 : InputProps.className,
multiple && classes.input_
]) }), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [!noInputValue && multiple && !chip && !!value.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.value, tabIndex: 0, onFocus: onFocus, onBlur: onBlur, onMouseDown: onMouseDown, onKeyDown: onEnterKeyDown, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('AutoComplete', theme) && [
'amaui-AutoComplete-input',
multiple && [
chip && `amaui-AutoComplete-chip`,
open && `amaui-AutoComplete-open`,
readOnly && `amaui-Select-readOnly`
],
],
multiple && [
classes.input,
chip && classes.chip,
open && classes.open,
readOnly && classes.readOnly
]
]) }, { children: renderValues(value, onUnselect) }))), !noInputValue && multiple && chip && !!value.length && renderValues(value, onUnselect)] })), (0, jsx_runtime_1.jsx)(Menu, Object.assign({ ref: refs.menu, open: open && !!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length), autoSelectOnBlur: autoSelectOnBlur, portal: true, onClose: () => onClose(false), anchorElement: refs.root.current, onExited: onExited, menuItems: menuItems, transformOrigin: 'center top', transformOriginSwitch: 'center bottom', maxWidth: 'unset', AppendProps: {
alignment: 'start'
}, ModalProps: {
// focus: !MenuProps.portal
freezeScroll: false
}, ListProps: Object.assign(Object.assign({ menu: true, paddingVertical: ((0, utils_1.is)('function', groupBy) && !!options.length) ? 'none' : undefined, size, role: 'listbox', id: refs.ids.list, 'aria-label': label }, ListProps), { className: (0, style_react_1.classNames)([
ListProps === null || ListProps === void 0 ? void 0 : ListProps.className,
classes.list
]) }) }, MenuProps, { style: Object.assign(Object.assign({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.menu), className: (0, style_react_1.classNames)([
MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className
]) }))] })));
});
AutoComplete.displayName = 'amaui-AutoComplete';
exports.default = AutoComplete;