@commercetools-uikit/selectable-search-input 15.13.0 → 15.13.2

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

@@ -59,14 +59,6 @@ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) {
 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;
   }
@@ -75,18 +67,18 @@ var getInputContainerBorderColor = function getInputContainerBorderColor(props)
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
 
-  return defaultColor;
-};
-
-var getInputFontColor = function getInputFontColor(props) {
   if (props.hasError) {
-    return designSystem.designTokens.fontColorForInputWhenError;
+    return designSystem.designTokens.borderColorForInputWhenError;
   }
 
   if (props.hasWarning) {
-    return designSystem.designTokens.fontColorForInputWhenWarning;
+    return designSystem.designTokens.borderColorForInputWhenWarning;
   }
 
+  return defaultColor;
+};
+
+var getInputFontColor = function getInputFontColor(props) {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
@@ -95,6 +87,14 @@ var getInputFontColor = function getInputFontColor(props) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
 
+  if (props.hasError) {
+    return designSystem.designTokens.fontColorForInputWhenError;
+  }
+
+  if (props.hasWarning) {
+    return designSystem.designTokens.fontColorForInputWhenWarning;
+  }
+
   return designSystem.designTokens.fontColorForInput;
 };
 
@@ -111,7 +111,7 @@ var getInputBoxShadow = function getInputBoxShadow(props) {
 };
 
 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), ";" + ("" ), "" )];
+  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), ";" + ("" ), "" )];
 };
 
 var getButtonStyles = function getButtonStyles() {
@@ -135,7 +135,7 @@ var getClearIconButtonStyles = function getClearIconButtonStyles(props) {
 };
 
 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), ";}" + ("" ), "" )];
+  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), ";}" + ("" ), "" )];
 };
 
 var getBackgroundColor = function getBackgroundColor(props, defaultColor) {
@@ -151,7 +151,7 @@ var getBackgroundColor = function getBackgroundColor(props, 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, ";}" + ("" ), "" )];
+  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, ";}" + ("" ), "" )];
 };
 
 var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
@@ -167,7 +167,9 @@ var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
     hasWarning: hasWarning,
     hasError: hasError,
     menuPortalZIndex: menuPortalZIndex,
-    isNewTheme: isNewTheme
+    isNewTheme: isNewTheme,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
   });
   return _objectSpread$2(_objectSpread$2({}, selectStyles), {}, {
     control: function control(base, state) {
@@ -178,9 +180,10 @@ var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
         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 (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
 
           if (textInputHasFocus && !isNewTheme) {
             return designSystem.designTokens.borderColorForInputWhenFocused;
@@ -190,7 +193,6 @@ var createSelectableSelectStyles = function createSelectableSelectStyles(_ref) {
             return designSystem.designTokens.borderColorForInputWhenFocused;
           }
 
-          if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
           return designSystem.designTokens.borderColorForInput;
         }(),
         cursor: function () {
@@ -511,7 +513,7 @@ var SelectableSearchInput = function SelectableSearchInput(props) {
           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, ";}" + ("" ), "" ), "" , "" ],
+        css: [getSelectableSearchInputContainerStyles(props), dropdownHasFocus && isNewTheme && !props.isReadOnly && /*#__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),
@@ -573,7 +575,7 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.13.0";
+var version = "15.13.2";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;