@snack-uikit/fields 0.57.2-preview-02d918ac.0 → 0.57.2

package/dist/cjs/components/FieldSelect/FieldSelectMultiple.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __rest = void 0 && (void 0).__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];
@@ -40,80 +42,99 @@ const defaultSelectedOptionFormatter = item =>
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
   var _a;
-  const {
-      id,
-      name,
-      placeholder,
-      size = 's',
-      options,
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-      disabled = false,
-      readonly = false,
-      searchable = true,
-      showClearButton = true,
-      onKeyDown: onInputKeyDownProp,
-      validationState = 'default',
-      search,
-      autocomplete = false,
-      prefixIcon,
-      prefix,
-      postfix,
-      removeByBackspace = false,
-      addOptionByEnter = false,
-      addCustomOptionTriggers,
-      untouchableScrollbars = false,
-      open: openProp,
-      enableFuzzySearch = true,
-      resetSearchOnOptionSelection = true,
-      onOpenChange,
-      selectedOptionFormatter = defaultSelectedOptionFormatter,
-      autoFocus
-    } = props,
+  const id = props.id,
+    name = props.name,
+    placeholder = props.placeholder,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 's' : _props$size,
+    options = props.options,
+    valueProp = props.value,
+    defaultValue = props.defaultValue,
+    onChangeProp = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    _props$showClearButto = props.showClearButton,
+    showClearButton = _props$showClearButto === void 0 ? true : _props$showClearButto,
+    onInputKeyDownProp = props.onKeyDown,
+    _props$validationStat = props.validationState,
+    validationState = _props$validationStat === void 0 ? 'default' : _props$validationStat,
+    search = props.search,
+    _props$autocomplete = props.autocomplete,
+    autocomplete = _props$autocomplete === void 0 ? false : _props$autocomplete,
+    prefixIcon = props.prefixIcon,
+    prefix = props.prefix,
+    postfix = props.postfix,
+    _props$removeByBacksp = props.removeByBackspace,
+    removeByBackspace = _props$removeByBacksp === void 0 ? false : _props$removeByBacksp,
+    _props$addOptionByEnt = props.addOptionByEnter,
+    addOptionByEnter = _props$addOptionByEnt === void 0 ? false : _props$addOptionByEnt,
+    addCustomOptionTriggers = props.addCustomOptionTriggers,
+    _props$untouchableScr = props.untouchableScrollbars,
+    untouchableScrollbars = _props$untouchableScr === void 0 ? false : _props$untouchableScr,
+    openProp = props.open,
+    _props$enableFuzzySea = props.enableFuzzySearch,
+    enableFuzzySearch = _props$enableFuzzySea === void 0 ? true : _props$enableFuzzySea,
+    _props$resetSearchOnO = props.resetSearchOnOptionSelection,
+    resetSearchOnOptionSelection = _props$resetSearchOnO === void 0 ? true : _props$resetSearchOnO,
+    onOpenChange = props.onOpenChange,
+    _props$selectedOption = props.selectedOptionFormatter,
+    selectedOptionFormatter = _props$selectedOption === void 0 ? defaultSelectedOptionFormatter : _props$selectedOption,
+    autoFocus = props.autoFocus,
     rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "addCustomOptionTriggers", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter", "autoFocus"]);
   const localRef = (0, react_1.useRef)(null);
   const inputPlugRef = (0, react_1.useRef)(null);
   const contentRef = (0, react_1.useRef)(null);
-  const [open = false, setOpen] = (0, hooks_1.useValueControl)({
-    value: openProp,
-    onChange: onOpenChange
-  });
-  const [value, setValue] = (0, hooks_1.useValueControl)({
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeProp
-  });
-  const [{
-    selectedItems,
-    items = []
-  }, setItems] = (0, react_1.useState)(() => (0, utils_3.updateMultipleItems)({
-    options,
-    value,
-    currentItems: [],
-    selectedItems: undefined
-  }));
-  const {
-    inputValue,
-    setInputValue,
-    prevInputValue,
-    updateInputValue
-  } = (0, hooks_2.useSearchInput)(Object.assign(Object.assign({}, search), {
-    defaultValue: '',
-    selectedOptionFormatter,
-    resetSearchOnOptionSelection
-  }));
-  const {
-    resolvedAddCustomOptionTriggers,
-    tryCommitCustomOptionFromInput
-  } = (0, hooks_2.useFieldSelectMultipleCustomOption)({
-    addCustomOptionTriggers,
-    addOptionByEnter,
-    inputValue,
-    value,
-    setValue,
-    updateInputValue
-  });
+  const _ref = (0, hooks_1.useValueControl)({
+      value: openProp,
+      onChange: onOpenChange
+    }),
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    _ref2$ = _ref2[0],
+    open = _ref2$ === void 0 ? false : _ref2$,
+    setOpen = _ref2[1];
+  const _ref3 = (0, hooks_1.useValueControl)({
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp
+    }),
+    _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    value = _ref4[0],
+    setValue = _ref4[1];
+  const _ref5 = (0, react_1.useState)(() => (0, utils_3.updateMultipleItems)({
+      options,
+      value,
+      currentItems: [],
+      selectedItems: undefined
+    })),
+    _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+    _ref6$ = _ref6[0],
+    selectedItems = _ref6$.selectedItems,
+    _ref6$$items = _ref6$.items,
+    items = _ref6$$items === void 0 ? [] : _ref6$$items,
+    setItems = _ref6[1];
+  const _ref7 = (0, hooks_2.useSearchInput)(Object.assign(Object.assign({}, search), {
+      defaultValue: '',
+      selectedOptionFormatter,
+      resetSearchOnOptionSelection
+    })),
+    inputValue = _ref7.inputValue,
+    setInputValue = _ref7.setInputValue,
+    prevInputValue = _ref7.prevInputValue,
+    updateInputValue = _ref7.updateInputValue;
+  const _ref8 = (0, hooks_2.useFieldSelectMultipleCustomOption)({
+      addCustomOptionTriggers,
+      addOptionByEnter,
+      inputValue,
+      value,
+      setValue,
+      updateInputValue
+    }),
+    resolvedAddCustomOptionTriggers = _ref8.resolvedAddCustomOptionTriggers,
+    tryCommitCustomOptionFromInput = _ref8.tryCommitCustomOptionFromInput;
   const prefixSettings = (0, hooks_1.usePrefix)({
     prefix,
     disabled
@@ -123,10 +144,8 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
     disabled
   });
   (0, utils_1.useLayoutEffect)(() => {
-    setItems(_ref => {
-      let {
-        selectedItems
-      } = _ref;
+    setItems(_ref9 => {
+      let selectedItems = _ref9.selectedItems;
       return (0, utils_3.updateMultipleItems)({
         options,
         value,
@@ -142,25 +161,23 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
       setOpen(true);
     }
   };
-  const {
-    ArrowIcon,
-    arrowIconSize
-  } = (0, utils_3.getArrowIcon)({
-    size,
-    open
-  });
-  const {
-    postfixButtons,
-    inputKeyDownNavigationHandler,
-    buttonsRefs
-  } = (0, hooks_2.useButtons)({
-    readonly,
-    size,
-    showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(item => !item.disabled)),
-    showCopyButton: false,
-    inputRef: localRef,
-    onClear
-  });
+  const _ref0 = (0, utils_3.getArrowIcon)({
+      size,
+      open
+    }),
+    ArrowIcon = _ref0.ArrowIcon,
+    arrowIconSize = _ref0.arrowIconSize;
+  const _ref1 = (0, hooks_2.useButtons)({
+      readonly,
+      size,
+      showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(item => !item.disabled)),
+      showCopyButton: false,
+      inputRef: localRef,
+      onClear
+    }),
+    postfixButtons = _ref1.postfixButtons,
+    inputKeyDownNavigationHandler = _ref1.inputKeyDownNavigationHandler,
+    buttonsRefs = _ref1.buttonsRefs;
   const commonHandleOnKeyDown = (0, hooks_2.useHandleOnKeyDown)({
     inputKeyDownNavigationHandler,
     onInputKeyDownProp,
@@ -269,10 +286,8 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
       size: size,
       open: !disabled && !readonly && open,
       onOpenChange: handleOpenChange,
-      children: _ref2 => {
-        let {
-          onKeyDown
-        } = _ref2;
+      children: _ref10 => {
+        let onKeyDown = _ref10.onKeyDown;
         var _a, _b, _c, _d;
         return (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
           className: (0, classnames_1.default)(styles_module_scss_1.default.container, styles_module_scss_1.default.tagContainer),

package/dist/cjs/components/FieldSelect/FieldSelectSingle.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __rest = void 0 && (void 0).__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];
@@ -37,69 +39,90 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
-  const {
-      id,
-      name,
-      placeholder,
-      size = 's',
-      options,
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-      disabled = false,
-      readonly = false,
-      searchable = true,
-      showCopyButton = true,
-      showClearButton = true,
-      onKeyDown: onInputKeyDownProp,
-      required = false,
-      validationState = 'default',
-      search,
-      autocomplete = false,
-      prefixIcon,
-      prefix,
-      postfix,
-      addOptionByEnter = false,
-      addCustomOptionTriggers,
-      untouchableScrollbars = false,
-      open: openProp,
-      onOpenChange,
-      selectedOptionFormatter = defaultSelectedOptionFormatter,
-      enableFuzzySearch = true,
-      resetSearchOnOptionSelection = true,
-      onCopyButtonClick,
-      autoFocus
-    } = props,
+  const id = props.id,
+    name = props.name,
+    placeholder = props.placeholder,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 's' : _props$size,
+    options = props.options,
+    valueProp = props.value,
+    defaultValue = props.defaultValue,
+    onChangeProp = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    _props$showCopyButton = props.showCopyButton,
+    showCopyButton = _props$showCopyButton === void 0 ? true : _props$showCopyButton,
+    _props$showClearButto = props.showClearButton,
+    showClearButton = _props$showClearButto === void 0 ? true : _props$showClearButto,
+    onInputKeyDownProp = props.onKeyDown,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$validationStat = props.validationState,
+    validationState = _props$validationStat === void 0 ? 'default' : _props$validationStat,
+    search = props.search,
+    _props$autocomplete = props.autocomplete,
+    autocomplete = _props$autocomplete === void 0 ? false : _props$autocomplete,
+    prefixIcon = props.prefixIcon,
+    prefix = props.prefix,
+    postfix = props.postfix,
+    _props$addOptionByEnt = props.addOptionByEnter,
+    addOptionByEnter = _props$addOptionByEnt === void 0 ? false : _props$addOptionByEnt,
+    addCustomOptionTriggers = props.addCustomOptionTriggers,
+    _props$untouchableScr = props.untouchableScrollbars,
+    untouchableScrollbars = _props$untouchableScr === void 0 ? false : _props$untouchableScr,
+    openProp = props.open,
+    onOpenChange = props.onOpenChange,
+    _props$selectedOption = props.selectedOptionFormatter,
+    selectedOptionFormatter = _props$selectedOption === void 0 ? defaultSelectedOptionFormatter : _props$selectedOption,
+    _props$enableFuzzySea = props.enableFuzzySearch,
+    enableFuzzySearch = _props$enableFuzzySea === void 0 ? true : _props$enableFuzzySea,
+    _props$resetSearchOnO = props.resetSearchOnOptionSelection,
+    resetSearchOnOptionSelection = _props$resetSearchOnO === void 0 ? true : _props$resetSearchOnO,
+    onCopyButtonClick = props.onCopyButtonClick,
+    autoFocus = props.autoFocus,
     rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "addCustomOptionTriggers", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "resetSearchOnOptionSelection", "onCopyButtonClick", "autoFocus"]);
   const localRef = (0, react_1.useRef)(null);
-  const [open = false, setOpen] = (0, hooks_1.useValueControl)({
-    value: openProp,
-    onChange: onOpenChange
-  });
-  const [value, setValue] = (0, hooks_1.useValueControl)({
-    value: valueProp,
-    defaultValue,
-    onChange: onChangeProp
-  });
-  const [{
-    selectedItem,
-    items = []
-  }, setItems] = (0, react_1.useState)(() => (0, utils_3.updateItems)({
-    options,
-    value,
-    currentItems: [],
-    selectedItem: undefined
-  }));
-  const {
-    inputValue,
-    setInputValue,
-    prevInputValue,
-    updateInputValue
-  } = (0, hooks_2.useSearchInput)(Object.assign(Object.assign({}, search), {
-    defaultValue: selectedOptionFormatter(selectedItem),
-    resetSearchOnOptionSelection,
-    selectedOptionFormatter
-  }));
+  const _ref = (0, hooks_1.useValueControl)({
+      value: openProp,
+      onChange: onOpenChange
+    }),
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    _ref2$ = _ref2[0],
+    open = _ref2$ === void 0 ? false : _ref2$,
+    setOpen = _ref2[1];
+  const _ref3 = (0, hooks_1.useValueControl)({
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp
+    }),
+    _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    value = _ref4[0],
+    setValue = _ref4[1];
+  const _ref5 = (0, react_1.useState)(() => (0, utils_3.updateItems)({
+      options,
+      value,
+      currentItems: [],
+      selectedItem: undefined
+    })),
+    _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+    _ref6$ = _ref6[0],
+    selectedItem = _ref6$.selectedItem,
+    _ref6$$items = _ref6$.items,
+    items = _ref6$$items === void 0 ? [] : _ref6$$items,
+    setItems = _ref6[1];
+  const _ref7 = (0, hooks_2.useSearchInput)(Object.assign(Object.assign({}, search), {
+      defaultValue: selectedOptionFormatter(selectedItem),
+      resetSearchOnOptionSelection,
+      selectedOptionFormatter
+    })),
+    inputValue = _ref7.inputValue,
+    setInputValue = _ref7.setInputValue,
+    prevInputValue = _ref7.prevInputValue,
+    updateInputValue = _ref7.updateInputValue;
   const prevSelectedItem = (0, react_1.useRef)(selectedItem);
   const prefixSettings = (0, hooks_1.usePrefix)({
     prefix,
@@ -110,10 +133,8 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
     disabled
   });
   (0, utils_1.useLayoutEffect)(() => {
-    setItems(_ref => {
-      let {
-        selectedItem
-      } = _ref;
+    setItems(_ref8 => {
+      let selectedItem = _ref8.selectedItem;
       return (0, utils_3.updateItems)({
         options,
         value,
@@ -141,27 +162,25 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       setOpen(true);
     }
   }, [required, setInputValue, setOpen, setValue]);
-  const {
-    ArrowIcon,
-    arrowIconSize
-  } = (0, utils_3.getArrowIcon)({
-    size,
-    open
-  });
-  const {
-    postfixButtons,
-    inputKeyDownNavigationHandler,
-    buttonsRefs
-  } = (0, hooks_2.useButtons)({
-    readonly,
-    size,
-    showClearButton: showClearButton && !disabled && !readonly && value !== undefined && selectedItem !== undefined,
-    showCopyButton,
-    inputRef: localRef,
-    onClear,
-    onCopyButtonClick,
-    valueToCopy: selectedOptionFormatter(selectedItem)
-  });
+  const _ref9 = (0, utils_3.getArrowIcon)({
+      size,
+      open
+    }),
+    ArrowIcon = _ref9.ArrowIcon,
+    arrowIconSize = _ref9.arrowIconSize;
+  const _ref0 = (0, hooks_2.useButtons)({
+      readonly,
+      size,
+      showClearButton: showClearButton && !disabled && !readonly && value !== undefined && selectedItem !== undefined,
+      showCopyButton,
+      inputRef: localRef,
+      onClear,
+      onCopyButtonClick,
+      valueToCopy: selectedOptionFormatter(selectedItem)
+    }),
+    postfixButtons = _ref0.postfixButtons,
+    inputKeyDownNavigationHandler = _ref0.inputKeyDownNavigationHandler,
+    buttonsRefs = _ref0.buttonsRefs;
   const commonHandleOnKeyDown = (0, hooks_2.useHandleOnKeyDown)({
     inputKeyDownNavigationHandler,
     onInputKeyDownProp,
@@ -175,15 +194,14 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       setValue(newValue);
     }
   }, [setOpen, setValue]);
-  const {
-    resolvedAddCustomOptionTriggers,
-    tryCommitCustomOptionFromInput
-  } = (0, hooks_2.useFieldSelectSingleCustomOption)({
-    addCustomOptionTriggers,
-    addOptionByEnter,
-    inputValue,
-    handleSelectionChange
-  });
+  const _ref1 = (0, hooks_2.useFieldSelectSingleCustomOption)({
+      addCustomOptionTriggers,
+      addOptionByEnter,
+      inputValue,
+      handleSelectionChange
+    }),
+    resolvedAddCustomOptionTriggers = _ref1.resolvedAddCustomOptionTriggers,
+    tryCommitCustomOptionFromInput = _ref1.tryCommitCustomOptionFromInput;
   const handleBlur = e => {
     var _a;
     if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
@@ -257,10 +275,8 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       trigger: 'click',
       triggerElemRef: localRef,
       untouchableScrollbars: untouchableScrollbars,
-      children: _ref2 => {
-        let {
-          onKeyDown
-        } = _ref2;
+      children: _ref10 => {
+        let onKeyDown = _ref10.onKeyDown;
         return (0, jsx_runtime_1.jsxs)(helperComponents_1.FieldContainerPrivate, {
           className: styles_module_scss_1.default.container,
           validationState: fieldValidationState,

package/dist/cjs/components/FieldSelect/hooks/common.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -21,11 +23,9 @@ const hooks_1 = require("../../../hooks");
 const legacy_1 = require("../legacy");
 const utils_1 = require("../utils");
 function useHandleOnKeyDown(_ref) {
-  let {
-    setOpen,
-    inputKeyDownNavigationHandler,
-    onInputKeyDownProp
-  } = _ref;
+  let setOpen = _ref.setOpen,
+    inputKeyDownNavigationHandler = _ref.inputKeyDownNavigationHandler,
+    onInputKeyDownProp = _ref.onInputKeyDownProp;
   return (0, react_1.useCallback)(onKeyDown => e => {
     if (e.code === 'Space') {
       e.stopPropagation();
@@ -46,16 +46,15 @@ function useHandleOnKeyDown(_ref) {
   }, [inputKeyDownNavigationHandler, onInputKeyDownProp, setOpen]);
 }
 function useButtons(_ref2) {
-  let {
-    readonly,
-    showClearButton,
-    showCopyButton,
-    size,
-    onClear,
-    onCopyButtonClick,
-    inputRef,
-    valueToCopy = ''
-  } = _ref2;
+  let readonly = _ref2.readonly,
+    showClearButton = _ref2.showClearButton,
+    showCopyButton = _ref2.showCopyButton,
+    size = _ref2.size,
+    onClear = _ref2.onClear,
+    onCopyButtonClick = _ref2.onCopyButtonClick,
+    inputRef = _ref2.inputRef,
+    _ref2$valueToCopy = _ref2.valueToCopy,
+    valueToCopy = _ref2$valueToCopy === void 0 ? '' : _ref2$valueToCopy;
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
   const buttonsRefs = [copyButtonRef.current, clearButtonRef.current];
@@ -72,35 +71,37 @@ function useButtons(_ref2) {
     valueToCopy,
     onCopyButtonClick
   });
-  const {
-    onInputKeyDown: inputKeyDownNavigationHandler,
-    postfixButtons
-  } = (0, input_private_1.useButtonNavigation)({
-    inputRef,
-    postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
-    onButtonKeyDown: undefined,
-    readonly,
-    submitKeys: ['Enter', 'Space', 'Tab']
-  });
+  const _ref3 = (0, input_private_1.useButtonNavigation)({
+      inputRef,
+      postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+      onButtonKeyDown: undefined,
+      readonly,
+      submitKeys: ['Enter', 'Space', 'Tab']
+    }),
+    inputKeyDownNavigationHandler = _ref3.onInputKeyDown,
+    postfixButtons = _ref3.postfixButtons;
   return {
     postfixButtons,
     inputKeyDownNavigationHandler,
     buttonsRefs
   };
 }
-function useSearchInput(_ref3) {
-  let {
-    value,
-    onChange,
-    defaultValue,
-    selectedOptionFormatter,
-    resetSearchOnOptionSelection = true
-  } = _ref3;
-  const [inputValue = '', setInputValueState] = (0, hooks_1.useValueControl)({
-    value,
-    onChange,
-    defaultValue
-  });
+function useSearchInput(_ref4) {
+  let value = _ref4.value,
+    onChange = _ref4.onChange,
+    defaultValue = _ref4.defaultValue,
+    selectedOptionFormatter = _ref4.selectedOptionFormatter,
+    _ref4$resetSearchOnOp = _ref4.resetSearchOnOptionSelection,
+    resetSearchOnOptionSelection = _ref4$resetSearchOnOp === void 0 ? true : _ref4$resetSearchOnOp;
+  const _ref5 = (0, hooks_1.useValueControl)({
+      value,
+      onChange,
+      defaultValue
+    }),
+    _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+    _ref6$ = _ref6[0],
+    inputValue = _ref6$ === void 0 ? '' : _ref6$,
+    setInputValueState = _ref6[1];
   const prevInputValue = (0, react_1.useRef)(inputValue);
   const updateInputValue = (0, react_1.useCallback)(selectedItem => {
     const newInputValue = selectedOptionFormatter(selectedItem);
@@ -151,11 +152,10 @@ const COMMON_FIELDS_TO_SEARCH = ['content.option', 'content.caption', 'content.d
 function useSearch(items) {
   let enableFuzzySearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const flattenItems = (0, react_1.useMemo)(() => {
-    const {
-      flattenItems
-    } = (0, list_1.kindFlattenItems)({
-      items
-    });
+    const _ref7 = (0, list_1.kindFlattenItems)({
+        items
+      }),
+      flattenItems = _ref7.flattenItems;
     return Object.values(flattenItems);
   }, [items]);
   const filterFlattenFunction = (0, react_1.useCallback)(search => {