@onesy/ui-react
Version:
UI for React
695 lines (689 loc) • 31.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
var _IconMaterialArrowDropDownW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
var _Menu = _interopRequireDefault(require("../Menu"));
var _Chip = _interopRequireDefault(require("../Chip"));
var _Type = _interopRequireDefault(require("../Type"));
var _List = _interopRequireDefault(require("../List"));
var _ListItem = _interopRequireDefault(require("../ListItem"));
var _TextField = _interopRequireDefault(require("../TextField"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _RoundProgress = _interopRequireDefault(require("../RoundProgress"));
var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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", "openOnInputUpdate", "filterOutSelectedOptions", "selectOnFocus", "clearOnBlur", "clearInputOnSelect", "chip", "fullWidth", "noInputValue", "disabled", "IconClear", "IconDropdown", "WrapperProps", "ChipProps", "ListProps", "MenuProps", "IconButtonProps", "InputProps", "IconProps", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
width: '100%',
flex: 'unset'
},
wrapper: {
position: 'relative'
},
input_: {
alignSelf: 'center'
},
input: {
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,
// overflow
width: '100%',
overflow: 'hidden',
whiteSpace: 'pre',
textOverflow: 'ellipsis'
},
input_size_small: _objectSpread({}, theme.typography.values.b2),
input_size_regular: _objectSpread({}, theme.typography.values.b2),
input_size_large: _objectSpread({}, theme.typography.values.b1),
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.is)('simple', value_) ? String(value_) : '';
};
const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
const AutoComplete = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAutoComplete) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Menu = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
const Chip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Chip) || _Chip.default;
const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
const List = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.List) || _List.default;
const ListItem = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ListItem) || _ListItem.default;
const TextField = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.TextField) || _TextField.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
const RoundProgress = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.RoundProgress) || _RoundProgress.default;
const ListSubheader = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ListSubheader) || _ListSubheader.default;
const {
ref,
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,
openOnInputUpdate,
filterOutSelectedOptions,
selectOnFocus,
clearOnBlur,
clearInputOnSelect,
chip,
fullWidth,
noInputValue,
disabled,
IconClear = _IconMaterialCloseW.default,
IconDropdown = _IconMaterialArrowDropDownW.default,
WrapperProps,
ChipProps,
ListProps,
MenuProps,
IconButtonProps,
InputProps,
IconProps,
className,
style,
children: children_
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const children = _react.default.Children.toArray(children_);
const [init, setInit] = _react.default.useState(false);
const [valueInput, setValueInput] = _react.default.useState(valueInputDefault !== undefined ? valueInputDefault : valueInput_);
const [value, setValue] = _react.default.useState((valueDefault !== undefined ? valueDefault : value_) || []);
const [focus, setFocus] = _react.default.useState(false);
const [open, setOpen] = _react.default.useState(false);
const [mouseDown, setMouseDown] = _react.default.useState(false);
const [options, setOptions] = _react.default.useState(options_);
const [free, setFree] = _react.default.useState(false);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
wrapper: _react.default.useRef(undefined),
value: _react.default.useRef(undefined),
valueInput: _react.default.useRef(undefined),
menu: _react.default.useRef(undefined),
input: _react.default.useRef(undefined),
optionsProps: _react.default.useRef(options_),
ids: {
list: _react.default.useId()
}
};
refs.value.current = value;
refs.valueInput.current = valueInput;
refs.optionsProps.current = options_;
const styles = {
root: {},
menu: {}
};
if (MenuProps !== null && MenuProps !== void 0 && MenuProps.portal && autoWidth) {
var _refs$wrapper$current;
styles.menu.width = (_refs$wrapper$current = refs.wrapper.current) === null || _refs$wrapper$current === void 0 ? void 0 : _refs$wrapper$current.clientWidth;
}
_react.default.useEffect(() => {
var _refs$root$current;
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.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.default.useEffect(() => {
const option = (refs.optionsProps.current || []).find(item_ => isEqualToInput(refs.valueInput.current, item_));
if (!!(valueInput !== null && valueInput !== void 0 && valueInput.length) && openOnInputUpdate && !open && !option && !disabled && !readOnly) setOpen(!free);
}, [valueInput, openOnInputUpdate, free]);
_react.default.useEffect(() => {
if (value_ !== undefined && value_ !== value) setValue(value_);
}, [value_]);
_react.default.useEffect(() => {
if (valueInput_ !== undefined && valueInput_ !== valueInput) setValueInput(valueInput_);
}, [valueInput_]);
_react.default.useEffect(() => {
if (init && loading) {
setOpen(true);
updateOptions();
}
}, [loading]);
_react.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: l('Loading...'),
version: 'text'
}];else if (newOptions) optionsValue = newOptions;else optionsValue = (0, _utils.is)('function', filter) ? filter(valueInputNew, refs.optionsProps.current) : refs.optionsProps.current.filter(option_0 => isEqualToInput(valueInputNew, option_0));
if (!optionsValue.length) {
if (noOptions) optionsValue.push(noOptionsObject !== undefined ? noOptionsObject : {
primary: l('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 = event_0 => {
if (!disabled && !readOnly) setMouseDown(true);
};
const onMouseUp = event_1 => {
if (!disabled && !readOnly) setMouseDown(false);
};
const onFocus = event_2 => {
if (!disabled && !readOnly) {
setFocus(true);
if (selectOnFocus) setTimeout(() => refs.input.current.select());
}
};
const onBlur = event_3 => {
if (!disabled && !readOnly) setFocus(false);
};
const onClick = event_4 => {
if (!disabled && !readOnly) setOpen(open_ => {
if (!open_) {
if (!openOnFocus) return open_;
refs.input.current.focus();
// if input wrapper overflows
event_4.target.scrollTo(0, 0);
}
return !open_;
});
};
const onClickArrowDown = event_5 => {
if (!disabled && !readOnly) setOpen(open__0 => {
if (!open__0) refs.input.current.focus();
return !open__0;
});
};
const onEnterKeyDown = event_6 => {
if (event_6.key === 'Enter' && !disabled && !readOnly) setOpen(open__1 => {
if (!open__1) {
if (!openOnFocus) return open__1;
refs.input.current.focus();
}
return !open__1;
});
};
const onClose = (refocus = true) => {
if (!disabled && !readOnly) {
setOpen(open__2 => {
if (open__2) {
if (refocus) refs.input.current.focus();
if (clearOnBlur) {
const option_1 = options.find(item__0 => isEqualToInput(refs.valueInput.current, item__0));
if (!option_1) onClear();
}
}
return false;
});
}
};
const onExited = () => {
if (!disabled && !readOnly) {
if (!open) {
var _options$;
const option_2 = (refs.optionsProps.current || []).find(item__1 => isEqualToInput(refs.valueInput.current, item__1));
// Update options to all values
// if value is one of the option values
if (option_2 || !refs.valueInput.current || (_options$ = options[0]) !== null && _options$ !== void 0 && _options$.noOptions) updateOptions(undefined, refs.optionsProps.current);
}
}
};
const onChange = valueNew => {
// Inner controlled value
if (!props.hasOwnProperty('value')) setValue(valueNew);
if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
};
const onChangeInput = valueNew_0 => {
if (!disabled && !readOnly) {
updateOptions(valueNew_0);
if (!open) setOpen(true);
// Inner controlled value
if (!props.hasOwnProperty('valueInput')) setValueInput(valueNew_0);
if ((0, _utils.is)('function', onChangeInput_)) onChangeInput_(valueNew_0);
}
};
const onClear = (refocus_0 = true) => {
if (!disabled && !readOnly) {
onChangeInput('');
onChange(multiple ? [] : null);
if (refocus_0) refs.input.current.focus();
}
};
const onClearInput = (refocus_1 = true) => {
if (!disabled && !readOnly) {
onChangeInput('');
if (refocus_1) refs.input.current.focus();
}
};
const isEqual = (value1, value2) => (0, _utils.is)('function', equal) ? equal(value1, value2) : getValue(value1) === getValue(value2);
const isEqualToInput = (inputValue = refs.valueInput.current, item) => {
var _getText;
return (0, _utils.is)('function', equalInput) ? equalInput(inputValue, item) : (_getText = getText(item)) === null || _getText === void 0 ? void 0 : _getText.toLowerCase().includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase());
};
const onSelect = valueNew_1 => {
const values = multiple ? (0, _utils.is)('array', value) ? value : [value] : value;
const selected = multiple ? !!values.find(item_0 => isEqual(valueNew_1, item_0)) : isEqual(valueNew_1, value);
if (!selected) {
onChange(!multiple ? valueNew_1 : [...values, valueNew_1]);
if (!multiple) clearInputOnSelect ? onClearInput() : onChangeInput(getText(valueNew_1));else if (clearInputOnSelect) onClearInput();
}
};
const onUnselect = valueNew_2 => {
if (multiple) {
let values_0 = [...((0, _utils.is)('array', value) ? value : [value])];
values_0 = values_0.filter(item_1 => !isEqual(valueNew_2, item_1));
onChange(values_0);
}
};
const items = _react.default.useMemo(() => {
return (options_ || []).map(item_2 => _objectSpread(_objectSpread({}, item_2), {}, {
name: String((item_2 === null || item_2 === void 0 ? void 0 : item_2.name) !== undefined ? item_2 === null || item_2 === void 0 ? void 0 : item_2.name : (item_2 === null || item_2 === void 0 ? void 0 : item_2.value) !== undefined ? item_2.value : item_2),
value: (item_2 === null || item_2 === void 0 ? void 0 : item_2.value) !== undefined ? item_2 === null || item_2 === void 0 ? void 0 : item_2.value : item_2
}));
}, [options_]);
const getLabel = (item_3, propsOther) => {
if ((0, _utils.is)('function', getLabel_)) return getLabel_(item_3, propsOther);
const properties = ['name', 'label', 'primary', 'secondary', 'tertiary', 'value', 'children'];
const objects = [item_3, item_3 === null || item_3 === void 0 ? void 0 : item_3.props].filter(Boolean);
for (const itemObject of objects) {
if ((0, _utils.is)('simple', itemObject)) return itemObject;
const valueItem = (0, _utils.getObjectValue)(itemObject, ...properties);
if (valueItem !== undefined) return valueItem;
}
return 'No name';
};
const renderValue = (itemValue = value) => {
const item_4 = !!(items !== null && items !== void 0 && items.length) ? items.find(item__2 => getValue(item__2) === getValue(itemValue)) : children.find(item__3 => {
var _item__3$props;
return getValue((_item__3$props = item__3.props) === null || _item__3$props === void 0 ? void 0 : _item__3$props.value) === getValue(itemValue);
});
return item_4 ? getLabel(item_4, props) : getLabel(itemValue, props) || '';
};
const renderValues = renderValues_ || ((value__ = refs.value.current, onUnselectMethod = onUnselect) => {
if (multiple) {
if (chip) {
let values_1 = value__;
if ((0, _utils.is)('number', limit) && !open) values_1 = values_1.slice(0, limit);
values_1 = values_1.map((item_5, index) => {
const other_ = {
key: index,
onClick: event_7 => {
event_7.preventDefault();
event_7.stopPropagation();
},
onRemove: event_8 => {
event_8.preventDefault();
event_8.stopPropagation();
onUnselectMethod(item_5);
},
input: true
};
if ((0, _utils.is)('function', renderChip)) return renderChip(item_5, renderValue(item_5), other_);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread(_objectSpread(_objectSpread({
size: "small"
}, ChipProps), other_), {}, {
children: renderValue(item_5)
}), index);
});
if ((0, _utils.is)('number', limit) && !open && value.length - limit > 0) values_1.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
color: "default",
className: classes.limitText,
children: ["+", value.length - limit]
}));
return values_1;
}
return value__.map(item_6 => renderValue(item_6)).join(', ');
}
return renderValue(value);
});
let optionsToUse = options;
if (filterOutSelectedOptions) {
optionsToUse = optionsToUse.filter(option_3 => {
var _ref;
const selected_0 = !!((_ref = (0, _utils.is)('array', value) ? value : [value]) !== null && _ref !== void 0 && _ref.find(item_7 => isEqual(item_7, option_3)));
return !selected_0;
});
}
const groups = {};
if ((0, _utils.is)('function', groupBy)) {
optionsToUse.forEach(option_4 => {
const valueForGroupBy = groupBy(option_4) || l('Other');
if (!groups[valueForGroupBy]) groups[valueForGroupBy] = [];
groups[valueForGroupBy].push(option_4);
});
optionsToUse = [];
if (Object.keys(groups).length) Object.keys(groups).forEach(item_8 => {
const array = groups[item_8];
optionsToUse.push({
label: item_8,
version: 'subheader'
}, ...array);
});
}
const renderOptionValue = values_2 => {
const result = values_2.map((item_9, index_0) => {
var _ref2;
let other__0 = {};
const button = item_9.version === undefined || item_9.version === 'button';
const selected_1 = !!((_ref2 = (0, _utils.is)('array', value) ? value : [value]) !== null && _ref2 !== void 0 && _ref2.find(item__4 => isEqual(item_9, item__4)));
if (button) {
other__0 = {
primary: getLabel(item_9),
value: item_9,
button,
selected: selected_1,
onClick: event_9 => {
var _item_9$props, _item_9$props2;
if (multiple && selected_1) onUnselect(item_9);else onSelect(item_9);
if ((0, _utils.is)('function', (_item_9$props = item_9.props) === null || _item_9$props === void 0 ? void 0 : _item_9$props.onClick)) (_item_9$props2 = item_9.props) === null || _item_9$props2 === void 0 || _item_9$props2.onClick(event_9);
if (blurOnSelect) {
if (closeOnSelect) setOpen(false);
refs.input.current.blur();
} else if (closeOnSelect) onClose();
}
};
} else {
other__0.secondary = getLabel(item_9);
}
other__0.onMouseUp = onMouseUp;
other__0.onMouseDown = onMouseDown;
if (item_9.noOptions) {
if (noOptionsElement) return /*#__PURE__*/_react.default.cloneElement(noOptionsElement, {
key: 'noOptions'
});
}
return (0, _utils.is)('function', renderOption) ? renderOption(item_9, index_0, _objectSpread(_objectSpread({}, other__0), item_9.props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread(_objectSpread({
role: "option",
preselected: !open ? false : undefined
}, other__0), item_9.props), item_9.value !== undefined ? item_9.value : index_0);
});
if (startOptionsElement) result.unshift(/*#__PURE__*/_react.default.cloneElement(startOptionsElement, {
key: 'startOptionsElement'
}));
if (endOptionsElement) result.push(/*#__PURE__*/_react.default.cloneElement(endOptionsElement, {
key: 'endOptionsElement'
}));
return result;
};
const renderList = () => {
if (Object.keys(groups).length) {
return Object.keys(groups).map((item_10, index_1) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ListSubheader, {
Component: "div",
children: item_10
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
size: size,
paddingVertical: "none",
menu: true,
children: renderOptionValue(groups[item_10])
})]
}, index_1));
} else return renderOptionValue(optionsToUse);
};
const endIcons = [end, ...(!readOnly ? [...(loading ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(RoundProgress, {
className: classes.roundProgress,
size: "small"
}, 1)] : []), ...(clear ? [!!(multiple ? value.length : valueInput) && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onClear,
size: "small",
fontSize: _utils2.iconFontSize,
"aria-label": l('Input clear')
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, _objectSpread({}, IconProps))
}))] : []), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onClickArrowDown,
size: "small",
fontSize: _utils2.iconFontSize,
"aria-expanded": open,
"aria-controls": refs.ids.list,
InteractionProps: {
clear: !!(multiple ? value.length : valueInput)
}
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropdown, _objectSpread(_objectSpread({}, IconProps), {}, {
className: (0, _styleReact.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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
ref: refs.wrapper,
gap: 0,
direction: "column",
fullWidth: fullWidth
}, WrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-wrapper', fullWidth && 'onesy-full-width'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextField, _objectSpread(_objectSpread({
ref: refs.input,
rootRef: item_11 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_11);else ref.current = item_11;
}
refs.root.current = item_11;
},
onBlur: onBlur,
onFocus: onFocus,
value: valueInput,
onChange: onChangeInput,
enabled: open || focus || mouseDown || !!(multiple ? !!value.length || valueInput : valueInput),
focus: open || focus || mouseDown,
className: (0, _styleReact.classNames)([(0, _utils2.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, _styleReact.classNames)([(0, _utils2.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: _objectSpread(_objectSpread({
disabled: multiple,
readOnly: multiple
}, InputProps), {}, {
className: (0, _styleReact.classNames)([InputProps === null || InputProps === void 0 ? void 0 : InputProps.className, multiple && classes.input_])
}),
style: _objectSpread(_objectSpread({}, styles.root), style)
}, other), {}, {
children: [!noInputValue && multiple && !chip && !!value.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: refs.value,
tabIndex: 0,
onFocus: onFocus,
onBlur: onBlur,
onMouseDown: onMouseDown,
onKeyDown: onEnterKeyDown,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('AutoComplete', theme) && ['onesy-AutoComplete-input', multiple && [chip && `onesy-AutoComplete-chip`, open && `onesy-AutoComplete-open`, readOnly && `onesy-Select-readOnly`]], multiple && [classes.input, classes[`input_size_${size}`], chip && classes.chip, open && classes.open, readOnly && classes.readOnly]]),
children: renderValues(value, onUnselect)
}), !noInputValue && multiple && chip && !!value.length && renderValues(value, onUnselect)]
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread(_objectSpread({
ref: refs.menu,
open: open && !!(menuItems !== null && menuItems !== 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: _objectSpread(_objectSpread({
menu: true,
paddingVertical: (0, _utils.is)('function', groupBy) && !!options.length ? 'none' : undefined,
size,
role: 'listbox',
id: refs.ids.list,
'aria-label': label
}, ListProps), {}, {
className: (0, _styleReact.classNames)([ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list])
})
}, MenuProps), {}, {
style: _objectSpread(_objectSpread({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.menu),
className: (0, _styleReact.classNames)([MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className])
}))]
}));
};
AutoComplete.displayName = 'onesy-AutoComplete';
var _default = exports.default = AutoComplete;