@commercetools-uikit/selectable-search-input 15.15.0 → 16.0.0

package/dist/commercetools-uikit-selectable-search-input.cjs.prod.js

@@ -54,8 +54,8 @@ function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["d
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var getInputContainerBorderColor = function getInputContainerBorderColor(props) {
-  var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
+const getInputContainerBorderColor = function (props) {
+  let defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
 
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -76,7 +76,7 @@ var getInputContainerBorderColor = function getInputContainerBorderColor(props)
   return defaultColor;
 };
 
-var getInputFontColor = function getInputFontColor(props) {
+const getInputFontColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
@@ -96,7 +96,7 @@ var getInputFontColor = function getInputFontColor(props) {
   return designSystem.designTokens.fontColorForInput;
 };
 
-var getInputBoxShadow = function getInputBoxShadow(props) {
+const getInputBoxShadow = props => {
   if (props.hasError) {
     return designSystem.designTokens.shadowForInputWhenError;
   }
@@ -108,15 +108,11 @@ var getInputBoxShadow = function getInputBoxShadow(props) {
   return designSystem.designTokens.shadowForInput;
 };
 
-var getSelectableSearchInputStyles = function getSelectableSearchInputStyles(props) {
-  return [inputUtils.getInputStyles(props), /*#__PURE__*/react.css("border:none;box-shadow:none;background:none;&,&:focus,&:focus:not(:read-only){box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}width:100%;color:", getInputFontColor(props), ";" + ("" ), "" )];
-};
+const getSelectableSearchInputStyles = props => [inputUtils.getInputStyles(props), /*#__PURE__*/react.css("border:none;box-shadow:none;background:none;&,&:focus,&:focus:not(:read-only){box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}width:100%;color:", getInputFontColor(props), ";" + ("" ), "" )];
 
-var getButtonStyles = function getButtonStyles() {
-  return /*#__PURE__*/react.css("border:none;background:none;height:100%;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";margin-right:", designSystem.designTokens.marginRightForClearInputIcon, ";" + ("" ), "" );
-};
+const getButtonStyles = () => /*#__PURE__*/react.css("border:none;background:none;height:100%;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-left:none;align-items:center;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";margin-right:", designSystem.designTokens.marginRightForClearInputIcon, ";" + ("" ), "" );
 
-var getIconColor = function getIconColor(props, defaultColor) {
+const getIconColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
@@ -128,15 +124,11 @@ var getIconColor = function getIconColor(props, defaultColor) {
   return defaultColor;
 };
 
-var getClearIconButtonStyles = function getClearIconButtonStyles(props) {
-  return [getButtonStyles(), /*#__PURE__*/react.css("fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIconWhenHovered), ";}" + ("" ), "" )];
-};
+const getClearIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIconWhenHovered), ";}" + ("" ), "" )];
 
-var getSearchIconButtonStyles = function getSearchIconButtonStyles(props) {
-  return [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForSearchInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIcon), ";cursor:", props.isReadOnly ? 'default' : 'pointer', ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIconWhenHovered), ";}" + ("" ), "" )];
-};
+const getSearchIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForSearchInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIcon), ";cursor:", props.isReadOnly ? 'default' : 'pointer', ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIconWhenHovered), ";}" + ("" ), "" )];
 
-var getBackgroundColor = function getBackgroundColor(props, defaultColor) {
+const getBackgroundColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
@@ -148,12 +140,10 @@ var getBackgroundColor = function getBackgroundColor(props, defaultColor) {
   return defaultColor;
 };
 
-var getSelectableSearchInputContainerStyles = function getSelectableSearchInputContainerStyles(props) {
-  return [/*#__PURE__*/react.css("display:flex;align-items:center;background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInput), ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", designSystem.designTokens.heightForInput, ";box-sizing:border-box;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0;width:100%;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";&::placeholder{color:", designSystem.designTokens.placeholderFontColorForInput, ";}&:hover{border-color:", getInputContainerBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInputWhenHovered), ";}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !props.isDisabled && !props.isReadOnly && /*#__PURE__*/react.css("&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, " ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
-};
+const getSelectableSearchInputContainerStyles = props => [/*#__PURE__*/react.css("display:flex;align-items:center;background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInput), ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-shadow:", getInputBoxShadow(props), ";height:", designSystem.designTokens.heightForInput, ";box-sizing:border-box;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0;width:100%;transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ";&::placeholder{color:", designSystem.designTokens.placeholderFontColorForInput, ";}&:hover{border-color:", getInputContainerBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", getBackgroundColor(props, designSystem.designTokens.backgroundColorForInputWhenHovered), ";}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !props.isDisabled && !props.isReadOnly && /*#__PURE__*/react.css("&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, " ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
 
-var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
-  var hasWarning = _ref.hasWarning,
+const createSelectableSelectStyles = _ref => {
+  let hasWarning = _ref.hasWarning,
       hasError = _ref.hasError,
       isDisabled = _ref.isDisabled,
       isReadOnly = _ref.isReadOnly,
@@ -161,83 +151,77 @@ var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
       isNewTheme = _ref.isNewTheme,
       dropdownHasFocus = _ref.dropdownHasFocus,
       textInputHasFocus = _ref.textInputHasFocus;
-  var selectStyles = selectUtils.createSelectStyles({
-    hasWarning: hasWarning,
-    hasError: hasError,
-    menuPortalZIndex: menuPortalZIndex,
-    isNewTheme: isNewTheme,
-    isDisabled: isDisabled,
-    isReadOnly: isReadOnly
+  const selectStyles = selectUtils.createSelectStyles({
+    hasWarning,
+    hasError,
+    menuPortalZIndex,
+    isNewTheme,
+    isDisabled,
+    isReadOnly
   });
   return _objectSpread$2(_objectSpread$2({}, selectStyles), {}, {
-    control: function control(base, state) {
-      return _objectSpread$2(_objectSpread$2({}, selectStyles.control(base, state)), {}, {
-        padding: designSystem.designTokens.paddingForSelectableSearchInputDropdown,
-        borderTopRightRadius: '0',
-        borderBottomRightRadius: '0',
-        borderRight: '0',
-        height: '100%',
-        borderColor: function () {
-          if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
-          if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
-          if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
-          if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
-
-          if (textInputHasFocus && !isNewTheme) {
-            return designSystem.designTokens.borderColorForInputWhenFocused;
-          }
+    control: (base, state) => _objectSpread$2(_objectSpread$2({}, selectStyles.control(base, state)), {}, {
+      padding: designSystem.designTokens.paddingForSelectableSearchInputDropdown,
+      borderTopRightRadius: '0',
+      borderBottomRightRadius: '0',
+      borderRight: '0',
+      height: '100%',
+      borderColor: (() => {
+        if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
+        if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
+        if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
+        if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
+
+        if (textInputHasFocus && !isNewTheme) {
+          return designSystem.designTokens.borderColorForInputWhenFocused;
+        }
 
-          if (dropdownHasFocus) {
-            return designSystem.designTokens.borderColorForInputWhenFocused;
-          }
+        if (dropdownHasFocus) {
+          return designSystem.designTokens.borderColorForInputWhenFocused;
+        }
 
-          return designSystem.designTokens.borderColorForInput;
-        }(),
-        cursor: function () {
-          if (isDisabled) return 'not-allowed';
-          if (isReadOnly) return "default";
-          return 'pointer';
-        }(),
+        return designSystem.designTokens.borderColorForInput;
+      })(),
+      cursor: (() => {
+        if (isDisabled) return 'not-allowed';
+        if (isReadOnly) return "default";
+        return 'pointer';
+      })(),
+      backgroundColor: getBackgroundColor({
+        isDisabled,
+        isReadOnly
+      }, base.backgroundColor || ''),
+      '&:hover': {
         backgroundColor: getBackgroundColor({
-          isDisabled: isDisabled,
-          isReadOnly: isReadOnly
-        }, base.backgroundColor || ''),
-        '&:hover': {
-          backgroundColor: getBackgroundColor({
-            isDisabled: isDisabled,
-            isReadOnly: isReadOnly
-          }, designSystem.designTokens.backgroundColorForInputWhenHovered)
-        }
-      });
-    },
-    singleValue: function singleValue(base) {
-      return _objectSpread$2(_objectSpread$2({}, base), {}, {
-        marginLeft: 0,
-        maxWidth: 'initial',
-        color: getInputFontColor({
-          hasWarning: hasWarning,
-          hasError: hasError,
-          isDisabled: isDisabled,
-          isReadOnly: isReadOnly
-        })
-      });
-    },
-    dropdownIndicator: function dropdownIndicator() {
-      return {
-        fill: isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
-      };
-    }
+          isDisabled,
+          isReadOnly
+        }, designSystem.designTokens.backgroundColorForInputWhenHovered)
+      }
+    }),
+    singleValue: base => _objectSpread$2(_objectSpread$2({}, base), {}, {
+      marginLeft: 0,
+      maxWidth: 'initial',
+      color: getInputFontColor({
+        hasWarning,
+        hasError,
+        isDisabled,
+        isReadOnly
+      })
+    }),
+    dropdownIndicator: () => ({
+      fill: isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
+    })
   });
 };
 
-var _excluded = ["id"];
+const _excluded = ["id"];
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var _SingleValue = function SingleValue(_ref) {
-  var id = _ref.id,
+const SingleValue = _ref => {
+  let id = _ref.id,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return jsxRuntime.jsx(Select.components.SingleValue, _objectSpread$1(_objectSpread$1({}, props), {}, {
@@ -248,29 +232,29 @@ var _SingleValue = function SingleValue(_ref) {
   }));
 };
 
-_SingleValue.propTypes = {};
+SingleValue.propTypes = {};
 
-var SelectableSelect = function SelectableSelect(props) {
-  var intl = reactIntl.useIntl();
+const SelectableSelect = props => {
+  const intl = reactIntl.useIntl();
 
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
 
-  var dropdownStyles = createSelectableSelectStyles({
+  const dropdownStyles = createSelectableSelectStyles({
     hasWarning: props.hasWarning,
     hasError: props.hasError,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     menuPortalZIndex: props.menuPortalZIndex,
-    isNewTheme: isNewTheme,
+    isNewTheme,
     dropdownHasFocus: props.dropdownHasFocus,
     textInputHasFocus: props.textInputHasFocus
   });
-  var onChange = props.onChange,
-      name = props.name,
-      id = props.id,
-      textInputRef = props.textInputRef;
-  var handleDropdownChange = react$1.useCallback(function (nextSelectedOptions) {
+  const onChange = props.onChange,
+        name = props.name,
+        id = props.id,
+        textInputRef = props.textInputRef;
+  const handleDropdownChange = react$1.useCallback(nextSelectedOptions => {
     var _textInputRef$current;
 
     if (onChange) {
@@ -294,11 +278,9 @@ var SelectableSelect = function SelectableSelect(props) {
     maxMenuHeight: props.maxMenuHeight,
     closeMenuOnSelect: props.closeMenuOnSelect,
     components: {
-      SingleValue: function SingleValue(innerProps) {
-        return jsxRuntime.jsx(_SingleValue, _objectSpread$1(_objectSpread$1({}, innerProps), {}, {
-          id: props.id
-        }));
-      },
+      SingleValue: innerProps => jsxRuntime.jsx(SingleValue, _objectSpread$1(_objectSpread$1({}, innerProps), {}, {
+        id: props.id
+      })),
       DropdownIndicator: selectUtils.DropdownIndicator
     },
     options: props.options,
@@ -311,12 +293,12 @@ var SelectableSelect = function SelectableSelect(props) {
     onBlur: props.handleDropdownBlur,
     onChange: handleDropdownChange,
     onInputChange: props.onMenuInputChange,
-    noOptionsMessage: props.noMenuOptionsMessage || function (_ref2) {
-      var inputValue = _ref2.inputValue;
+    noOptionsMessage: props.noMenuOptionsMessage || (_ref2 => {
+      let inputValue = _ref2.inputValue;
       return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
-        inputValue: inputValue
+        inputValue
       });
-    }
+    })
   });
 };
 
@@ -327,22 +309,18 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var Container = /*#__PURE__*/_styled__default["default"]("div", {
+const Container = /*#__PURE__*/_styled__default["default"]("div", {
   target: "encv1cf0"
 } )({
   name: "zjik7",
   styles: "display:flex"
 } );
 
-var getTextInputName = function getTextInputName(name) {
-  return name ? "".concat(name, ".textInput") : undefined;
-};
+const getTextInputName = name => name ? "".concat(name, ".textInput") : undefined;
 
-var getDropdownName = function getDropdownName(name) {
-  return name ? "".concat(name, ".dropdown") : undefined;
-};
+const getDropdownName = name => name ? "".concat(name, ".dropdown") : undefined;
 
-var defaultProps = {
+const defaultProps = {
   horizontalConstraint: 'scale',
   isClearable: true,
   menuHorizontalConstraint: 3,
@@ -350,37 +328,35 @@ var defaultProps = {
   menuPortalZIndex: 1,
   options: []
 };
-var selectableSearchInputSequentialId = utils.createSequentialId('selectable-search-input-');
+const selectableSearchInputSequentialId = utils.createSequentialId('selectable-search-input-');
 
-var isOptionObject = function isOptionObject(option) {
-  return option.options !== undefined;
-};
+const isOptionObject = option => option.options !== undefined;
 
-var SelectableSearchInput = function SelectableSearchInput(props) {
+const SelectableSearchInput = props => {
   var _context;
 
-  var _useToggleState = hooks.useToggleState(false),
-      _useToggleState2 = _slicedToArray(_useToggleState, 2),
-      textInputHasFocus = _useToggleState2[0],
-      toggleTextInputHasFocus = _useToggleState2[1];
+  const _useToggleState = hooks.useToggleState(false),
+        _useToggleState2 = _slicedToArray(_useToggleState, 2),
+        textInputHasFocus = _useToggleState2[0],
+        toggleTextInputHasFocus = _useToggleState2[1];
 
-  var _useToggleState3 = hooks.useToggleState(false),
-      _useToggleState4 = _slicedToArray(_useToggleState3, 2),
-      dropdownHasFocus = _useToggleState4[0],
-      toggleDropdownHasFocus = _useToggleState4[1];
+  const _useToggleState3 = hooks.useToggleState(false),
+        _useToggleState4 = _slicedToArray(_useToggleState3, 2),
+        dropdownHasFocus = _useToggleState4[0],
+        toggleDropdownHasFocus = _useToggleState4[1];
 
-  var _useState = react$1.useState(props.value.text || ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
+  const _useState = react$1.useState(props.value.text || ''),
+        _useState2 = _slicedToArray(_useState, 2),
+        searchValue = _useState2[0],
+        setSearchValue = _useState2[1];
 
-  var containerRef = react$1.useRef(null);
-  var textInputRef = react$1.useRef(null);
+  const containerRef = react$1.useRef(null);
+  const textInputRef = react$1.useRef(null);
 
-  var _useTheme = designSystem.useTheme(),
-      isNewTheme = _useTheme.isNewTheme;
+  const _useTheme = designSystem.useTheme(),
+        isNewTheme = _useTheme.isNewTheme;
 
-  var optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, function (option) {
+  const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
     if (isOptionObject(option)) {
       return option.options;
     }
@@ -388,11 +364,9 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
     return option;
   });
 
-  var selectedOption = _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
-    return option.value === props.value.option;
-  });
+  const selectedOption = _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === props.value.option);
 
-  var selectablSearchInputId = hooks.useFieldId(props.id, selectableSearchInputSequentialId);
+  const selectablSearchInputId = hooks.useFieldId(props.id, selectableSearchInputSequentialId);
 
   if (!props.isReadOnly) ;
 
@@ -401,10 +375,10 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'SelectableSearchInput'
   });
-  var onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      name = props.name;
-  var handleTextInputFocus = react$1.useCallback(function () {
+  const onFocus = props.onFocus,
+        onBlur = props.onBlur,
+        name = props.name;
+  const handleTextInputFocus = react$1.useCallback(() => {
     if (onFocus) {
       onFocus({
         target: {
@@ -416,7 +390,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
 
     toggleTextInputHasFocus(true);
   }, [toggleTextInputHasFocus, onFocus, selectablSearchInputId, name]);
-  var handleTextInputBlur = react$1.useCallback(function () {
+  const handleTextInputBlur = react$1.useCallback(() => {
     if (onBlur) {
       onBlur({
         target: {
@@ -429,7 +403,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
     toggleTextInputHasFocus(false);
   }, [toggleTextInputHasFocus, onBlur, selectablSearchInputId, name]);
 
-  var handleClear = function handleClear() {
+  const handleClear = () => {
     setSearchValue('');
 
     if (props.onReset) {
@@ -437,7 +411,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
     }
   };
 
-  var handleChange = function handleChange(event) {
+  const handleChange = event => {
     setSearchValue(event.target.value);
 
     if (props.onChange) {
@@ -451,7 +425,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
     }
   };
 
-  var handleSubmit = function handleSubmit(event) {
+  const handleSubmit = event => {
     event.preventDefault();
 
     if (props.onSubmit) {
@@ -464,9 +438,9 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
     }
   };
 
-  var dropdownName = getDropdownName(props.name);
-  var dropdownId = SelectableSearchInput.getDropdownId(selectablSearchInputId);
-  var handleDropdownFocus = react$1.useCallback(function () {
+  const dropdownName = getDropdownName(props.name);
+  const dropdownId = SelectableSearchInput.getDropdownId(selectablSearchInputId);
+  const handleDropdownFocus = react$1.useCallback(() => {
     if (onFocus) {
       onFocus({
         target: {
@@ -478,7 +452,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
 
     toggleDropdownHasFocus(true);
   }, [onFocus, toggleDropdownHasFocus, dropdownName, dropdownId]);
-  var handleDropdownBlur = react$1.useCallback(function () {
+  const handleDropdownBlur = react$1.useCallback(() => {
     if (onBlur) {
       onBlur({
         target: {
@@ -490,7 +464,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
 
     toggleDropdownHasFocus(false);
   }, [toggleDropdownHasFocus, onBlur, dropdownName, dropdownId]);
-  var handleContainerBlur = react$1.useCallback(function (event) {
+  const handleContainerBlur = react$1.useCallback(event => {
     var _containerRef$current;
 
     // ensures that both fields are marked as touched when one of them
@@ -553,7 +527,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
           "aria-invalid": props['aria-invalid'],
           "aria-errormessage": props['aria-errormessage'],
           "data-testid": "selectable-input",
-          onKeyDown: function onKeyDown(event) {
+          onKeyDown: event => {
             if (!props.isReadOnly && event.key === 'Enter') {
               handleSubmit(event);
             }
@@ -580,7 +554,7 @@ SelectableSearchInput.propTypes = {};
 SelectableSearchInput.displayName = 'SelectableSearchInput';
 SelectableSearchInput.defaultProps = defaultProps;
 
-SelectableSearchInput.isEmpty = function (formValue) {
+SelectableSearchInput.isEmpty = formValue => {
   var _context2;
 
   return !formValue || _trimInstanceProperty__default["default"](_context2 = formValue.text).call(_context2) === '';
@@ -591,7 +565,7 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.0";
+var version = "16.0.0";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;