@commercetools-uikit/selectable-search-input 0.0.0-canary-20230223135944

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-selectable-search-input.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-selectable-search-input.cjs.dev.js");
+}

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

@@ -0,0 +1,579 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+require('prop-types');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var react$1 = require('react');
+var has = require('lodash/has');
+var flatMap = require('lodash/flatMap');
+var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
+var Constraints = require('@commercetools-uikit/constraints');
+var icons = require('@commercetools-uikit/icons');
+var utils = require('@commercetools-uikit/utils');
+var react = require('@emotion/react');
+var inputUtils = require('@commercetools-uikit/input-utils');
+var designSystem = require('@commercetools-uikit/design-system');
+var selectUtils = require('@commercetools-uikit/select-utils');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var reactIntl = require('react-intl');
+var Select = require('react-select');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@commercetools-uikit/hooks');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var has__default = /*#__PURE__*/_interopDefault(has);
+var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
+var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Select__default = /*#__PURE__*/_interopDefault(Select);
+
+function ownKeys$2(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$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;
+
+  if (props.hasError) {
+    return designSystem.designTokens.borderColorForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.borderColorForInputWhenWarning;
+  }
+
+  if (props.isDisabled) {
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
+  }
+
+  return defaultColor;
+};
+
+var getInputFontColor = function getInputFontColor(props) {
+  if (props.hasError) {
+    return designSystem.designTokens.fontColorForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.fontColorForInputWhenWarning;
+  }
+
+  if (props.isDisabled) {
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.fontColorForInputWhenReadonly;
+  }
+
+  return designSystem.designTokens.fontColorForInput;
+};
+
+var getInputBoxShadow = function getInputBoxShadow(props) {
+  if (props.hasError) {
+    return designSystem.designTokens.shadowForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.shadowForInputWhenWarning;
+  }
+
+  return designSystem.designTokens.shadowForInput;
+};
+
+var getSelectableSearchInputStyles = function getSelectableSearchInputStyles(props) {
+  return [inputUtils.getInputStyles(props), /*#__PURE__*/react.css("border:none;background:none;&,&:focus{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, ";" + ("" ), "" );
+};
+
+var getIconColor = function getIconColor(props, defaultColor) {
+  if (props.isDisabled) {
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.fontColorForSearchInputIconWhenReadonly;
+  }
+
+  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), ";}" + ("" ), "" )];
+};
+
+var getSearchIconButtonStyles = function getSearchIconButtonStyles(props) {
+  return [getButtonStyles(), /*#__PURE__*/react.css("margin-right:", designSystem.designTokens.marginRightForSearchInputIcon, ";fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForSearchInputIconWhenHovered), ";}" + ("" ), "" )];
+};
+
+var getBackgroundColor = function getBackgroundColor(props, defaultColor) {
+  if (props.isDisabled) {
+    return designSystem.designTokens.backgroundColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.backgroundColorForInputWhenReadonly;
+  }
+
+  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-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, " ", designSystem.designTokens.borderColorForInputWhenFocused, ";}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" )];
+};
+
+var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
+  var hasWarning = _ref.hasWarning,
+      hasError = _ref.hasError,
+      isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
+      menuPortalZIndex = _ref.menuPortalZIndex,
+      isNewTheme = _ref.isNewTheme,
+      dropdownHasFocus = _ref.dropdownHasFocus,
+      textInputHasFocus = _ref.textInputHasFocus;
+  var selectStyles = selectUtils.createSelectStyles({
+    hasWarning: hasWarning,
+    hasError: hasError,
+    menuPortalZIndex: menuPortalZIndex,
+    isNewTheme: isNewTheme
+  });
+  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 (hasError) return designSystem.designTokens.borderColorForInputWhenError;
+          if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
+          if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
+
+          if (textInputHasFocus && !isNewTheme) {
+            return designSystem.designTokens.borderColorForInputWhenFocused;
+          }
+
+          if (dropdownHasFocus) {
+            return designSystem.designTokens.borderColorForInputWhenFocused;
+          }
+
+          if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
+          return designSystem.designTokens.borderColorForInput;
+        }(),
+        cursor: function () {
+          if (isDisabled) return 'not-allowed';
+          if (isReadOnly) return "default";
+          return 'pointer';
+        }(),
+        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
+      };
+    }
+  });
+};
+
+var _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,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return jsxRuntime.jsx(Select.components.SingleValue, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxRuntime.jsx("label", {
+      htmlFor: id,
+      children: props.children
+    })
+  }));
+};
+
+_SingleValue.propTypes = {};
+
+var SelectableSelect = function SelectableSelect(props) {
+  var intl = reactIntl.useIntl();
+
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
+  var dropdownStyles = createSelectableSelectStyles({
+    hasWarning: props.hasWarning,
+    hasError: props.hasError,
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    menuPortalZIndex: props.menuPortalZIndex,
+    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) {
+    var _textInputRef$current;
+
+    if (onChange) {
+      onChange({
+        target: {
+          id: id,
+          name: name,
+          value: nextSelectedOptions.value
+        }
+      });
+    }
+
+    (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
+  }, [onChange, id, name, textInputRef]);
+  return jsxRuntime.jsx(Select__default["default"], {
+    inputId: props.id,
+    name: props.name,
+    value: props.selectedOption,
+    isDisabled: props.isDisabled,
+    isSearchable: props.isReadOnly ? false : props.isMenuSearchable,
+    maxMenuHeight: props.maxMenuHeight,
+    closeMenuOnSelect: props.closeMenuOnSelect,
+    components: {
+      SingleValue: function SingleValue(innerProps) {
+        return jsxRuntime.jsx(_SingleValue, _objectSpread$1(_objectSpread$1({}, innerProps), {}, {
+          id: props.id
+        }));
+      },
+      DropdownIndicator: selectUtils.DropdownIndicator
+    },
+    options: props.options,
+    menuIsOpen: props.isReadOnly ? false : undefined,
+    placeholder: "",
+    styles: dropdownStyles,
+    onFocus: props.handleDropdownFocus,
+    menuPortalTarget: props.menuPortalTarget,
+    menuShouldBlockScroll: props.menuShouldBlockScroll,
+    onBlur: props.handleDropdownBlur,
+    onChange: handleDropdownChange,
+    onInputChange: props.onMenuInputChange,
+    noOptionsMessage: props.noMenuOptionsMessage || function (_ref2) {
+      var inputValue = _ref2.inputValue;
+      return !inputValue || inputValue === '' ? intl.formatMessage(selectUtils.messages.noOptionsMessageWithoutInputValue) : intl.formatMessage(selectUtils.messages.noOptionsMessageWithInputValue, {
+        inputValue: inputValue
+      });
+    }
+  });
+};
+
+SelectableSelect.propTypes = {};
+var SelectableSelect$1 = SelectableSelect;
+
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+var Container = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "encv1cf0"
+} )({
+  name: "zjik7",
+  styles: "display:flex"
+} );
+
+var getTextInputName = function getTextInputName(name) {
+  return name ? "".concat(name, ".textInput") : undefined;
+};
+
+var getDropdownName = function getDropdownName(name) {
+  return name ? "".concat(name, ".dropdown") : undefined;
+};
+
+var defaultProps = {
+  horizontalConstraint: 'scale',
+  isClearable: true,
+  menuHorizontalConstraint: 3,
+  showSubmitButton: true
+};
+var selectableSearchInputSequentialId = utils.createSequentialId('selectable-search-input-');
+
+var SelectableSearchInput = function SelectableSearchInput(props) {
+  var _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];
+
+  var _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);
+
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
+  var optionsWithoutGroups = flatMap__default["default"](props.options, function (option) {
+    return has__default["default"](option, 'value') ? option : option.options;
+  });
+
+  var selectedOption = _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, function (option) {
+    return has__default["default"](option, 'value') && option.value === props.value.option;
+  });
+
+  var selectablSearchInputId = hooks.useFieldId(props.id, selectableSearchInputSequentialId);
+
+  if (!props.isReadOnly) ;
+
+  var onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      name = props.name;
+  var handleTextInputFocus = react$1.useCallback(function () {
+    if (onFocus) {
+      onFocus({
+        target: {
+          id: SelectableSearchInput.getTextInputId(selectablSearchInputId),
+          name: getTextInputName(name)
+        }
+      });
+    }
+
+    toggleTextInputHasFocus(true);
+  }, [toggleTextInputHasFocus, onFocus, selectablSearchInputId, name]);
+  var handleTextInputBlur = react$1.useCallback(function () {
+    if (onBlur) {
+      onBlur({
+        target: {
+          id: SelectableSearchInput.getTextInputId(selectablSearchInputId),
+          name: getTextInputName(name)
+        }
+      });
+    }
+
+    toggleTextInputHasFocus(false);
+  }, [toggleTextInputHasFocus, onBlur, selectablSearchInputId, name]);
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+
+    if (props.onReset) {
+      props.onReset();
+    }
+  };
+
+  var handleChange = function handleChange(event) {
+    setSearchValue(event.target.value);
+
+    if (props.onChange) {
+      props.onChange({
+        target: {
+          id: SelectableSearchInput.getTextInputId(selectablSearchInputId),
+          name: getTextInputName(props.name),
+          value: event.target.value
+        }
+      });
+    }
+  };
+
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+
+    if (props.onSubmit) {
+      props.onSubmit({
+        text: searchValue,
+        option: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value
+      });
+    }
+  };
+
+  var dropdownName = getDropdownName(props.name);
+  var dropdownId = SelectableSearchInput.getDropdownId(selectablSearchInputId);
+  var handleDropdownFocus = react$1.useCallback(function () {
+    if (onFocus) {
+      onFocus({
+        target: {
+          id: dropdownId,
+          name: dropdownName
+        }
+      });
+    }
+
+    toggleDropdownHasFocus(true);
+  }, [onFocus, toggleDropdownHasFocus, dropdownName, dropdownId]);
+  var handleDropdownBlur = react$1.useCallback(function () {
+    if (onBlur) {
+      onBlur({
+        target: {
+          id: dropdownId,
+          name: dropdownName
+        }
+      });
+    }
+
+    toggleDropdownHasFocus(false);
+  }, [toggleDropdownHasFocus, onBlur, dropdownName, dropdownId]);
+  var handleContainerBlur = react$1.useCallback(function (event) {
+    var _containerRef$current;
+
+    // ensures that both fields are marked as touched when one of them
+    // is blurred
+    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
+      onBlur({
+        target: {
+          id: SelectableSearchInput.getDropdownId(selectablSearchInputId),
+          name: getDropdownName(name)
+        }
+      });
+      onBlur({
+        target: {
+          id: SelectableSearchInput.getTextInputId(selectablSearchInputId),
+          name: getTextInputName(name)
+        }
+      });
+    }
+  }, [onBlur, selectablSearchInputId, name]);
+  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs(Container, {
+      ref: containerRef,
+      onBlur: handleContainerBlur,
+      "data-testid": "selectable-search-input-container",
+      children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+        max: props.menuHorizontalConstraint,
+        children: jsxRuntime.jsx(SelectableSelect$1, _objectSpread(_objectSpread({}, props), {}, {
+          id: SelectableSearchInput.getDropdownId(selectablSearchInputId),
+          name: getDropdownName(props.name),
+          textInputHasFocus: textInputHasFocus,
+          dropdownHasFocus: dropdownHasFocus,
+          handleDropdownFocus: handleDropdownFocus,
+          handleDropdownBlur: handleDropdownBlur,
+          isNewTheme: isNewTheme,
+          textInputRef: textInputRef,
+          selectedOption: selectedOption
+        }))
+      }), jsxRuntime.jsxs("div", {
+        css: [getSelectableSearchInputContainerStyles(props), dropdownHasFocus && isNewTheme && /*#__PURE__*/react.css("border-left-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{border-left-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), "" , "" ],
+        children: [jsxRuntime.jsx("input", _objectSpread(_objectSpread({
+          ref: textInputRef,
+          id: SelectableSearchInput.getTextInputId(selectablSearchInputId),
+          name: getTextInputName(props.name),
+          type: "text",
+          value: searchValue,
+          onChange: handleChange,
+          onBlur: handleTextInputBlur,
+          onFocus: handleTextInputFocus,
+          disabled: props.isDisabled,
+          placeholder: props.placeholder,
+          readOnly: props.isReadOnly,
+          autoFocus: props.isAutofocussed,
+          autoComplete: props.autoComplete,
+          "aria-readonly": props.isReadOnly,
+          contentEditable: !props.isReadOnly,
+          css: getSelectableSearchInputStyles(props)
+        }, utils.filterDataAttributes(props)), {}, {
+          /* ARIA */
+          "aria-invalid": props['aria-invalid'],
+          "aria-errormessage": props['aria-errormessage'],
+          "data-testid": "selectable-input",
+          onKeyDown: function onKeyDown(event) {
+            if (!props.isReadOnly && event.key === 'Enter') {
+              handleSubmit(event);
+            }
+          }
+        })), props.isClearable && searchValue && !props.isDisabled && !props.isReadOnly && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+          icon: jsxRuntime.jsx(icons.CloseIcon, {
+            size: "medium"
+          }),
+          label: 'clear-button',
+          onClick: handleClear,
+          css: getClearIconButtonStyles(props)
+        }), props.showSubmitButton && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
+          icon: jsxRuntime.jsx(icons.SearchIcon, {}),
+          label: 'search-button',
+          onClick: handleSubmit,
+          css: getSearchIconButtonStyles(props),
+          isDisabled: props.isDisabled
+        })]
+      })]
+    })
+  });
+};
+
+SelectableSearchInput.propTypes = {};
+SelectableSearchInput.displayName = 'SelectableSearchInput';
+SelectableSearchInput.defaultProps = defaultProps;
+
+SelectableSearchInput.isEmpty = function (formValue) {
+  var _context;
+
+  return !formValue || _trimInstanceProperty__default["default"](_context = formValue.text).call(_context) === '';
+};
+
+SelectableSearchInput.getTextInputId = getTextInputName;
+SelectableSearchInput.getDropdownId = getDropdownName;
+var SelectableSearchInput$1 = SelectableSearchInput;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "15.12.0";
+
+exports["default"] = SelectableSearchInput$1;
+exports.version = version;