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

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

@@ -51,106 +51,79 @@ 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; }
-
 const getInputContainerBorderColor = function (props) {
   let defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
-
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.borderColorForInputWhenWarning;
   }
-
   return defaultColor;
 };
-
 const getInputFontColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.fontColorForInputWhenWarning;
   }
-
   return designSystem.designTokens.fontColorForInput;
 };
-
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designSystem.designTokens.shadowForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.shadowForInputWhenWarning;
   }
-
   return designSystem.designTokens.shadowForInput;
 };
-
 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), ";" + ("" ), "" )];
-
 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, ";" + ("" ), "" );
-
 const getIconColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.fontColorForSearchInputIconWhenReadonly;
   }
-
   return defaultColor;
 };
-
 const getClearIconButtonStyles = props => [getButtonStyles(), /*#__PURE__*/react.css("fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIcon), ";&:hover{fill:", getIconColor(props, designSystem.designTokens.fontColorForClearInputIconWhenHovered), ";}" + ("" ), "" )];
-
 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), ";}" + ("" ), "" )];
-
 const getBackgroundColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
-
   return defaultColor;
 };
-
 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, ";}" + ("" ), "" )];
-
 const createSelectableSelectStyles = _ref => {
   let hasWarning = _ref.hasWarning,
-      hasError = _ref.hasError,
-      isDisabled = _ref.isDisabled,
-      isReadOnly = _ref.isReadOnly,
-      menuPortalZIndex = _ref.menuPortalZIndex,
-      isNewTheme = _ref.isNewTheme,
-      dropdownHasFocus = _ref.dropdownHasFocus,
-      textInputHasFocus = _ref.textInputHasFocus;
+    hasError = _ref.hasError,
+    isDisabled = _ref.isDisabled,
+    isReadOnly = _ref.isReadOnly,
+    menuPortalZIndex = _ref.menuPortalZIndex,
+    isNewTheme = _ref.isNewTheme,
+    dropdownHasFocus = _ref.dropdownHasFocus,
+    textInputHasFocus = _ref.textInputHasFocus;
   const selectStyles = selectUtils.createSelectStyles({
     hasWarning,
     hasError,
@@ -171,15 +144,12 @@ const createSelectableSelectStyles = _ref => {
         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;
         }
-
         return designSystem.designTokens.borderColorForInput;
       })(),
       cursor: (() => {
@@ -215,15 +185,11 @@ const createSelectableSelectStyles = _ref => {
 };
 
 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; }
-
 const SingleValue = _ref => {
   let id = _ref.id,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   return jsxRuntime.jsx(Select.components.SingleValue, _objectSpread$1(_objectSpread$1({}, props), {}, {
     children: jsxRuntime.jsx("label", {
       htmlFor: id,
@@ -231,15 +197,11 @@ const SingleValue = _ref => {
     })
   }));
 };
-
 SingleValue.propTypes = {};
-
 const SelectableSelect = props => {
   const intl = reactIntl.useIntl();
-
   const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
+    isNewTheme = _useTheme.isNewTheme;
   const dropdownStyles = createSelectableSelectStyles({
     hasWarning: props.hasWarning,
     hasError: props.hasError,
@@ -251,12 +213,11 @@ const SelectableSelect = props => {
     textInputHasFocus: props.textInputHasFocus
   });
   const onChange = props.onChange,
-        name = props.name,
-        id = props.id,
-        textInputRef = props.textInputRef;
+    name = props.name,
+    id = props.id,
+    textInputRef = props.textInputRef;
   const handleDropdownChange = react$1.useCallback(nextSelectedOptions => {
     var _textInputRef$current;
-
     if (onChange) {
       onChange({
         target: {
@@ -266,7 +227,6 @@ const SelectableSelect = props => {
         }
       });
     }
-
     (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
   }, [onChange, id, name, textInputRef]);
   return jsxRuntime.jsx(Select__default["default"], {
@@ -301,25 +261,19 @@ const SelectableSelect = props => {
     })
   });
 };
-
 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 _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; }
-
 const Container = /*#__PURE__*/_styled__default["default"]("div", {
   target: "encv1cf0"
 } )({
   name: "zjik7",
   styles: "display:flex"
 } );
-
 const getTextInputName = name => name ? "".concat(name, ".textInput") : undefined;
-
 const getDropdownName = name => name ? "".concat(name, ".dropdown") : undefined;
-
 const defaultProps = {
   horizontalConstraint: 'scale',
   isClearable: true,
@@ -329,55 +283,42 @@ const defaultProps = {
   options: []
 };
 const selectableSearchInputSequentialId = utils.createSequentialId('selectable-search-input-');
-
 const isOptionObject = option => option.options !== undefined;
-
 const SelectableSearchInput = props => {
   var _context;
-
   const _useToggleState = hooks.useToggleState(false),
-        _useToggleState2 = _slicedToArray(_useToggleState, 2),
-        textInputHasFocus = _useToggleState2[0],
-        toggleTextInputHasFocus = _useToggleState2[1];
-
+    _useToggleState2 = _slicedToArray(_useToggleState, 2),
+    textInputHasFocus = _useToggleState2[0],
+    toggleTextInputHasFocus = _useToggleState2[1];
   const _useToggleState3 = hooks.useToggleState(false),
-        _useToggleState4 = _slicedToArray(_useToggleState3, 2),
-        dropdownHasFocus = _useToggleState4[0],
-        toggleDropdownHasFocus = _useToggleState4[1];
-
+    _useToggleState4 = _slicedToArray(_useToggleState3, 2),
+    dropdownHasFocus = _useToggleState4[0],
+    toggleDropdownHasFocus = _useToggleState4[1];
   const _useState = react$1.useState(props.value.text || ''),
-        _useState2 = _slicedToArray(_useState, 2),
-        searchValue = _useState2[0],
-        setSearchValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
   const containerRef = react$1.useRef(null);
   const textInputRef = react$1.useRef(null);
-
   const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
+    isNewTheme = _useTheme.isNewTheme;
   const optionsWithoutGroups = _flatMapInstanceProperty__default["default"](_context = props.options).call(_context, option => {
     if (isOptionObject(option)) {
       return option.options;
     }
-
     return option;
   });
-
   const selectedOption = _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === props.value.option);
-
   const selectablSearchInputId = hooks.useFieldId(props.id, selectableSearchInputSequentialId);
-
   if (!props.isReadOnly) ;
-
   selectUtils.warnIfMenuPortalPropsAreMissing({
     menuPortalZIndex: props.menuPortalZIndex,
     menuPortalTarget: props.menuPortalTarget,
     componentName: 'SelectableSearchInput'
   });
   const onFocus = props.onFocus,
-        onBlur = props.onBlur,
-        name = props.name;
+    onBlur = props.onBlur,
+    name = props.name;
   const handleTextInputFocus = react$1.useCallback(() => {
     if (onFocus) {
       onFocus({
@@ -387,7 +328,6 @@ const SelectableSearchInput = props => {
         }
       });
     }
-
     toggleTextInputHasFocus(true);
   }, [toggleTextInputHasFocus, onFocus, selectablSearchInputId, name]);
   const handleTextInputBlur = react$1.useCallback(() => {
@@ -399,21 +339,16 @@ const SelectableSearchInput = props => {
         }
       });
     }
-
     toggleTextInputHasFocus(false);
   }, [toggleTextInputHasFocus, onBlur, selectablSearchInputId, name]);
-
   const handleClear = () => {
     setSearchValue('');
-
     if (props.onReset) {
       props.onReset();
     }
   };
-
   const handleChange = event => {
     setSearchValue(event.target.value);
-
     if (props.onChange) {
       props.onChange({
         target: {
@@ -424,20 +359,16 @@ const SelectableSearchInput = props => {
       });
     }
   };
-
   const handleSubmit = event => {
     event.preventDefault();
-
     if (props.onSubmit) {
       var _selectedOption$value;
-
       props.onSubmit({
         text: searchValue,
         option: (_selectedOption$value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _selectedOption$value !== void 0 ? _selectedOption$value : ''
       });
     }
   };
-
   const dropdownName = getDropdownName(props.name);
   const dropdownId = SelectableSearchInput.getDropdownId(selectablSearchInputId);
   const handleDropdownFocus = react$1.useCallback(() => {
@@ -449,7 +380,6 @@ const SelectableSearchInput = props => {
         }
       });
     }
-
     toggleDropdownHasFocus(true);
   }, [onFocus, toggleDropdownHasFocus, dropdownName, dropdownId]);
   const handleDropdownBlur = react$1.useCallback(() => {
@@ -461,12 +391,10 @@ const SelectableSearchInput = props => {
         }
       });
     }
-
     toggleDropdownHasFocus(false);
   }, [toggleDropdownHasFocus, onBlur, dropdownName, dropdownId]);
   const handleContainerBlur = react$1.useCallback(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))) {
@@ -549,23 +477,19 @@ const SelectableSearchInput = props => {
     })
   });
 };
-
 SelectableSearchInput.propTypes = {};
 SelectableSearchInput.displayName = 'SelectableSearchInput';
 SelectableSearchInput.defaultProps = defaultProps;
-
 SelectableSearchInput.isEmpty = formValue => {
   var _context2;
-
   return !formValue || _trimInstanceProperty__default["default"](_context2 = formValue.text).call(_context2) === '';
 };
-
 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 = "16.0.0";
+var version = "16.1.0";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;