@onesy/ui-react 1.0.0

package/AutoComplete/AutoComplete.js

@@ -0,0 +1,586 @@
+"use strict";
+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("@onesy/utils");
+const style_react_1 = require("@onesy/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',
+        '& .onesy-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: {
+        '&.onesy-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: {
+        '&.onesy-TextField-input-wrapper': {
+            cursor: 'default'
+        }
+    },
+    list: {
+        maxHeight: '250px',
+        overflow: 'auto'
+    },
+    limitText: {
+        alignSelf: 'center'
+    },
+    roundProgress: {
+        padding: `0 ${theme.methods.space.value(1, 'px')}`
+    },
+    disabled: {
+        '&.onesy-TextField-input-wrapper': {
+            cursor: 'default'
+        }
+    }
+}), { name: 'onesy-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.useOnesyTheme)();
+    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.onesyAutoComplete) === 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) && [
+                'onesy-AutoComplete-wrapper',
+                fullWidth && 'onesy-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) && [
+                        'onesy-AutoComplete-root',
+                        `onesy-AutoComplete-version-${version}`,
+                        `onesy-AutoComplete-size-${size}`,
+                        open && `onesy-AutoComplete-open`,
+                        mouseDown && `onesy-AutoComplete-mouse-down`,
+                        focus && `onesy-AutoComplete-focus`,
+                        loading && `onesy-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) && [
+                            'onesy-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) && [
+                                'onesy-AutoComplete-input',
+                                multiple && [
+                                    chip && `onesy-AutoComplete-chip`,
+                                    open && `onesy-AutoComplete-open`,
+                                    readOnly && `onesy-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 = 'onesy-AutoComplete';
+exports.default = AutoComplete;

package/AutoComplete/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AutoComplete';

package/AutoComplete/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AutoComplete_1 = require("./AutoComplete");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AutoComplete_1).default; } });

package/AutoComplete/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/AutoComplete/index.js",
+  "types": "./index.d.ts"
+}

package/AutoCompleteCountry/AutoCompleteCountry.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IAutoComplete } from '../AutoComplete/AutoComplete';
+export interface IAutoCompleteCountry extends IAutoComplete {
+}
+declare const AutoCompleteCountry: React.FC<IAutoCompleteCountry>;
+export default AutoCompleteCountry;