@onesy/ui-react 1.0.163 → 1.0.165

package/AudioRecorder/AudioRecorder.js

@@ -69,33 +69,15 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-AudioRecorder'
 });
 const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _window$navigator$med;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _window$navigator$med;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _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.onesyAudioRecorder) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
-  }, [theme]);
+  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.onesyAudioRecorder) === 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 Fade = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
   const {
       size = 'regular',
       pause = true,
@@ -157,7 +139,7 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     setValue(refs.valuePaused.current + (_date.OnesyDate.milliseconds - refs.startedAt.current));
     refs.animationFrame.current = requestAnimationFrame(update);
   };
-  const onStart = _react.default.useCallback(async event => {
+  const onStart = async event => {
     // MediaStream
     try {
       const stream = await navigator.mediaDevices.getUserMedia({
@@ -178,7 +160,7 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       });
 
       // stop
-      refs.mediaRecorder.current.addEventListener('stop', event_ => {
+      refs.mediaRecorder.current.addEventListener('stop', event__0 => {
         const tracks = stream.getTracks();
         tracks.forEach(track => track.stop());
       });
@@ -203,8 +185,8 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
     // previous action
     refs.previousAction.current = 'start';
-  }, [onStart_, onError]);
-  const onPause = _react.default.useCallback(event => {
+  };
+  const onPause = event_0 => {
     // media recorder
     if (refs.mediaRecorder.current) refs.mediaRecorder.current.pause();
 
@@ -215,12 +197,12 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // Remember previous value
     refs.valuePaused.current = refs.value.current;
     setStatus('paused');
-    if ((0, _utils.is)('function', onPause_)) onPause_(event);
+    if ((0, _utils.is)('function', onPause_)) onPause_(event_0);
 
     // previous action
     refs.previousAction.current = 'pause';
-  }, [onPause_]);
-  const onStop = _react.default.useCallback(event => {
+  };
+  const onStop = event_1 => {
     // media recorder
     if (refs.mediaRecorder.current) refs.mediaRecorder.current.stop();
     clear();
@@ -228,12 +210,12 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     setValue(0);
     refs.valuePaused.current = 0;
     refs.value.current = 0;
-    if ((0, _utils.is)('function', onStop_)) onStop_(event);
-  }, [onStop_]);
-  const onConfirm = _react.default.useCallback(async event => {
+    if ((0, _utils.is)('function', onStop_)) onStop_(event_1);
+  };
+  const onConfirm = async event_2 => {
     var _refs$mediaRecorder$c;
     // Stop
-    onStop(event);
+    onStop(event_2);
 
     // duration
     if (refs.previousAction.current === 'resume') {
@@ -253,15 +235,15 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     });
     try {
       blob = await (0, _webmDurationFix.default)(blob);
-    } catch (error) {
-      console.log('AudioRecorder onConfirm error', error);
+    } catch (error_0) {
+      console.log('AudioRecorder onConfirm error', error_0);
     }
 
     // clean up
     refs.mediaRecorderBytes.current = [];
     if ((0, _utils.is)('function', onConfirm_)) onConfirm_(blob, meta);
-  }, [onStop, onConfirm_]);
-  const onResume = _react.default.useCallback(event => {
+  };
+  const onResume = event_3 => {
     // media recorder
     if (refs.mediaRecorder.current) refs.mediaRecorder.current.resume();
 
@@ -271,11 +253,11 @@ const AudioRecorder = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // ~60+ fps
     refs.animationFrame.current = requestAnimationFrame(update);
     setStatus('running');
-    if ((0, _utils.is)('function', onResume_)) onResume_(event);
+    if ((0, _utils.is)('function', onResume_)) onResume_(event_3);
 
     // previous action
     refs.previousAction.current = 'resume';
-  }, [onResume_]);
+  };
   const valueFormat = valueNew_ => {
     let valueNew = '';
     const valueDuration = (0, _date.duration)(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second', 'millisecond']);

package/AutoComplete/AutoComplete.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ITextField } from '../TextField/TextField';
 import { IElement, IElementReference, IPropsAny } from '../types';
-export type TAutoCompleteValue = string | Array<string>;
-export type TAutoCompleteOption = {
+export declare type TAutoCompleteValue = string | Array<string>;
+export declare type TAutoCompleteOption = {
     label?: string;
     version?: 'text' | 'subheader';
     noOptions?: boolean;
 };
-export type IAutoComplete = Omit<ITextField, 'onChange'> & {
+export declare type IAutoComplete = Omit<ITextField, 'onChange'> & {
     value?: any;
     valueDefault?: any;
     onChange?: (value: any) => any;

package/AutoComplete/AutoComplete.js

@@ -116,52 +116,20 @@ const getText = value => {
 };
 const getValue = value => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
 const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  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 = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _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_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Menu = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
-  }, [theme]);
-  const Chip = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Chip) || _Chip.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
-  }, [theme]);
-  const List = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.List) || _List.default;
-  }, [theme]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ListItem) || _ListItem.default;
-  }, [theme]);
-  const TextField = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.TextField) || _TextField.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
-  }, [theme]);
-  const RoundProgress = _react.default.useMemo(() => {
-    var _theme$elements9;
-    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.RoundProgress) || _RoundProgress.default;
-  }, [theme]);
-  const ListSubheader = _react.default.useMemo(() => {
-    var _theme$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ListSubheader) || _ListSubheader.default;
-  }, [theme]);
+  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 {
       tonal = true,
       color = 'primary',
@@ -308,7 +276,7 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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 => isEqualToInput(valueInputNew, option));
+    }];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'),
@@ -327,56 +295,56 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
     setOptions(optionsValue);
   };
-  const onMouseDown = _react.default.useCallback(event => {
+  const onMouseDown = event_0 => {
     if (!disabled && !readOnly) setMouseDown(true);
-  }, [readOnly, disabled]);
-  const onMouseUp = _react.default.useCallback(event => {
+  };
+  const onMouseUp = event_1 => {
     if (!disabled && !readOnly) setMouseDown(false);
-  }, [readOnly, disabled]);
-  const onFocus = _react.default.useCallback(event => {
+  };
+  const onFocus = event_2 => {
     if (!disabled && !readOnly) {
       setFocus(true);
       if (selectOnFocus) setTimeout(() => refs.input.current.select());
     }
-  }, [readOnly, disabled]);
-  const onBlur = event => {
+  };
+  const onBlur = event_3 => {
     if (!disabled && !readOnly) setFocus(false);
   };
-  const onClick = _react.default.useCallback(event => {
+  const onClick = event_4 => {
     if (!disabled && !readOnly) setOpen(open_ => {
       if (!open_) {
         if (!openOnFocus) return open_;
         refs.input.current.focus();
 
         // if input wrapper overflows
-        event.target.scrollTo(0, 0);
+        event_4.target.scrollTo(0, 0);
       }
       return !open_;
     });
-  }, [readOnly, disabled]);
-  const onClickArrowDown = _react.default.useCallback(event => {
-    if (!disabled && !readOnly) setOpen(open_ => {
-      if (!open_) refs.input.current.focus();
-      return !open_;
+  };
+  const onClickArrowDown = event_5 => {
+    if (!disabled && !readOnly) setOpen(open__0 => {
+      if (!open__0) refs.input.current.focus();
+      return !open__0;
     });
-  }, [readOnly, disabled]);
-  const onEnterKeyDown = _react.default.useCallback(event => {
-    if (event.key === 'Enter' && !disabled && !readOnly) setOpen(open_ => {
-      if (!open_) {
-        if (!openOnFocus) return open_;
+  };
+  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_;
+      return !open__1;
     });
-  }, [readOnly, disabled]);
+  };
   const onClose = (refocus = true) => {
     if (!disabled && !readOnly) {
-      setOpen(open_ => {
-        if (open_) {
+      setOpen(open__2 => {
+        if (open__2) {
           if (refocus) refs.input.current.focus();
           if (clearOnBlur) {
-            const option = options.find(item_ => isEqualToInput(refs.valueInput.current, item_));
-            if (!option) onClear();
+            const option_1 = options.find(item__0 => isEqualToInput(refs.valueInput.current, item__0));
+            if (!option_1) onClear();
           }
         }
         return false;
@@ -387,11 +355,11 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (!disabled && !readOnly) {
       if (!open) {
         var _options$;
-        const option = (refs.optionsProps.current || []).find(item_ => isEqualToInput(refs.valueInput.current, item_));
+        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 || !refs.valueInput.current || (_options$ = options[0]) !== null && _options$ !== void 0 && _options$.noOptions) updateOptions(undefined, refs.optionsProps.current);
+        if (option_2 || !refs.valueInput.current || (_options$ = options[0]) !== null && _options$ !== void 0 && _options$.noOptions) updateOptions(undefined, refs.optionsProps.current);
       }
     }
   };
@@ -400,59 +368,59 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
   };
-  const onChangeInput = valueNew => {
+  const onChangeInput = valueNew_0 => {
     if (!disabled && !readOnly) {
-      updateOptions(valueNew);
+      updateOptions(valueNew_0);
       if (!open) setOpen(true);
 
       // Inner controlled value
-      if (!props.hasOwnProperty('valueInput')) setValueInput(valueNew);
-      if ((0, _utils.is)('function', onChangeInput_)) onChangeInput_(valueNew);
+      if (!props.hasOwnProperty('valueInput')) setValueInput(valueNew_0);
+      if ((0, _utils.is)('function', onChangeInput_)) onChangeInput_(valueNew_0);
     }
   };
-  const onClear = _react.default.useCallback((refocus = true) => {
+  const onClear = (refocus_0 = true) => {
     if (!disabled && !readOnly) {
       onChangeInput('');
       onChange(multiple ? [] : null);
-      if (refocus) refs.input.current.focus();
+      if (refocus_0) refs.input.current.focus();
     }
-  }, [multiple, readOnly, disabled]);
-  const onClearInput = _react.default.useCallback((refocus = true) => {
+  };
+  const onClearInput = (refocus_1 = true) => {
     if (!disabled && !readOnly) {
       onChangeInput('');
-      if (refocus) refs.input.current.focus();
+      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 => {
+  const onSelect = valueNew_1 => {
     const values = multiple ? (0, _utils.is)('array', value) ? value : [value] : value;
-    const selected = multiple ? !!values.find(item => isEqual(valueNew, item)) : isEqual(valueNew, value);
+    const selected = multiple ? !!values.find(item_0 => isEqual(valueNew_1, item_0)) : isEqual(valueNew_1, value);
     if (!selected) {
-      onChange(!multiple ? valueNew : [...values, valueNew]);
-      if (!multiple) clearInputOnSelect ? onClearInput() : onChangeInput(getText(valueNew));else if (clearInputOnSelect) onClearInput();
+      onChange(!multiple ? valueNew_1 : [...values, valueNew_1]);
+      if (!multiple) clearInputOnSelect ? onClearInput() : onChangeInput(getText(valueNew_1));else if (clearInputOnSelect) onClearInput();
     }
   };
-  const onUnselect = valueNew => {
+  const onUnselect = valueNew_2 => {
     if (multiple) {
-      let values = [...((0, _utils.is)('array', value) ? value : [value])];
-      values = values.filter(item => !isEqual(valueNew, item));
-      onChange(values);
+      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 => _objectSpread(_objectSpread({}, 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
+    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, propsOther) => {
-    if ((0, _utils.is)('function', getLabel_)) return getLabel_(item, propsOther);
+  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, item === null || item === void 0 ? void 0 : item.props].filter(Boolean);
+    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);
@@ -461,88 +429,88 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     return 'No name';
   };
   const renderValue = (itemValue = value) => {
-    const item = !!(items !== null && items !== void 0 && items.length) ? items.find(item_ => getValue(item_) === getValue(itemValue)) : children.find(item_ => {
-      var _item_$props;
-      return getValue((_item_$props = item_.props) === null || _item_$props === void 0 ? void 0 : _item_$props.value) === getValue(itemValue);
+    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 ? getLabel(item, props) : getLabel(itemValue, props) || '';
+    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 = value__;
-        if ((0, _utils.is)('number', limit) && !open) values = values.slice(0, limit);
-        values = values.map((item, index) => {
+        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 => {
-              event.preventDefault();
-              event.stopPropagation();
+            onClick: event_7 => {
+              event_7.preventDefault();
+              event_7.stopPropagation();
             },
-            onRemove: event => {
-              event.preventDefault();
-              event.stopPropagation();
-              onUnselectMethod(item);
+            onRemove: event_8 => {
+              event_8.preventDefault();
+              event_8.stopPropagation();
+              onUnselectMethod(item_5);
             },
             input: true
           };
-          if ((0, _utils.is)('function', renderChip)) return renderChip(item, renderValue(item), other_);
+          if ((0, _utils.is)('function', renderChip)) return renderChip(item_5, renderValue(item_5), other_);
           return /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
             key: index,
             size: "small"
-          }, ChipProps, other_), renderValue(item));
+          }, ChipProps, other_), renderValue(item_5));
         });
-        if ((0, _utils.is)('number', limit) && !open && value.length - limit > 0) values.push(/*#__PURE__*/_react.default.createElement(Type, {
+        if ((0, _utils.is)('number', limit) && !open && value.length - limit > 0) values_1.push(/*#__PURE__*/_react.default.createElement(Type, {
           version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
           color: "default",
           className: classes.limitText
         }, "+", value.length - limit));
-        return values;
+        return values_1;
       }
-      return value__.map(item => renderValue(item)).join(', ');
+      return value__.map(item_6 => renderValue(item_6)).join(', ');
     }
     return renderValue(value);
   });
   let optionsToUse = options;
   if (filterOutSelectedOptions) {
-    optionsToUse = optionsToUse.filter(option => {
+    optionsToUse = optionsToUse.filter(option_3 => {
       var _ref;
-      const selected = !!((_ref = (0, _utils.is)('array', value) ? value : [value]) !== null && _ref !== void 0 && _ref.find(item => isEqual(item, option)));
-      return !selected;
+      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 => {
-      const valueForGroupBy = groupBy(option) || l('Other');
+    optionsToUse.forEach(option_4 => {
+      const valueForGroupBy = groupBy(option_4) || l('Other');
       if (!groups[valueForGroupBy]) groups[valueForGroupBy] = [];
-      groups[valueForGroupBy].push(option);
+      groups[valueForGroupBy].push(option_4);
     });
     optionsToUse = [];
-    if (Object.keys(groups).length) Object.keys(groups).forEach(item => {
-      const array = groups[item];
+    if (Object.keys(groups).length) Object.keys(groups).forEach(item_8 => {
+      const array = groups[item_8];
       optionsToUse.push({
-        label: item,
+        label: item_8,
         version: 'subheader'
       }, ...array);
     });
   }
-  const renderOptionValue = values => {
-    const result = values.map((item, index) => {
+  const renderOptionValue = values_2 => {
+    const result = values_2.map((item_9, index_0) => {
       var _ref2;
-      let other_ = {};
-      const button = item.version === undefined || item.version === 'button';
-      const selected = !!((_ref2 = (0, _utils.is)('array', value) ? value : [value]) !== null && _ref2 !== void 0 && _ref2.find(item_ => isEqual(item, item_)));
+      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_ = {
-          primary: getLabel(item),
-          value: item,
+        other__0 = {
+          primary: getLabel(item_9),
+          value: item_9,
           button,
-          selected,
-          onClick: event => {
-            var _item$props, _item$props2;
-            if (multiple && selected) onUnselect(item);else onSelect(item);
-            if ((0, _utils.is)('function', (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.onClick)) (_item$props2 = item.props) === null || _item$props2 === void 0 || _item$props2.onClick(event);
+          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();
@@ -550,20 +518,20 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           }
         };
       } else {
-        other_.secondary = getLabel(item);
+        other__0.secondary = getLabel(item_9);
       }
-      other_.onMouseUp = onMouseUp;
-      other_.onMouseDown = onMouseDown;
-      if (item.noOptions) {
+      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, index, _objectSpread(_objectSpread({}, other_), item.props)) : /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-        key: item.value !== undefined ? item.value : index,
+      return (0, _utils.is)('function', renderOption) ? renderOption(item_9, index_0, _objectSpread(_objectSpread({}, other__0), item_9.props)) : /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+        key: item_9.value !== undefined ? item_9.value : index_0,
         role: "option",
         preselected: !open ? false : undefined
-      }, other_, item.props));
+      }, other__0, item_9.props));
     });
     if (startOptionsElement) result.unshift(/*#__PURE__*/_react.default.cloneElement(startOptionsElement, {
       key: 'startOptionsElement'
@@ -575,18 +543,18 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   const renderList = () => {
     if (Object.keys(groups).length) {
-      return Object.keys(groups).map((item, index) => /*#__PURE__*/_react.default.createElement("li", {
-        key: index,
+      return Object.keys(groups).map((item_10, index_1) => /*#__PURE__*/_react.default.createElement("li", {
+        key: index_1,
         style: {
           width: '100%'
         }
       }, /*#__PURE__*/_react.default.createElement(ListSubheader, {
         Component: "div"
-      }, item), /*#__PURE__*/_react.default.createElement(List, {
+      }, item_10), /*#__PURE__*/_react.default.createElement(List, {
         size: size,
         paddingVertical: "none",
         menu: true
-      }, renderOptionValue(groups[item]))));
+      }, renderOptionValue(groups[item_10]))));
     } else return renderOptionValue(optionsToUse);
   };
   const endIcons = [end, ...(!readOnly ? [...(loading ? [/*#__PURE__*/_react.default.createElement(RoundProgress, {
@@ -622,11 +590,11 @@ const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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])
   }), /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
     ref: refs.input,
-    rootRef: item => {
+    rootRef: item_11 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_11);else ref.current = item_11;
       }
-      refs.root.current = item;
+      refs.root.current = item_11;
     },
     onBlur: onBlur,
     onFocus: onFocus,

package/AutoCompleteCountry/AutoCompleteCountry.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IAutoComplete } from '../AutoComplete/AutoComplete';
-export type IAutoCompleteCountry = IAutoComplete & {};
+export declare type IAutoCompleteCountry = IAutoComplete & {};
 declare const AutoCompleteCountry: React.FC<IAutoCompleteCountry>;
 export default AutoCompleteCountry;