@commercetools-uikit/select-utils 19.4.0 → 19.5.0

package/dist/commercetools-uikit-select-utils.cjs.dev.js

@@ -433,9 +433,8 @@ const optionStyles = props => (base, state) => {
     fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
     cursor: state.isDisabled ? 'not-allowed' : 'pointer',
     color: (() => {
-      if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
-      if (state.isSelected) return designSystem.designTokens.fontColorForInput;
-      return base.color;
+      if (state.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
+      return designSystem.designTokens.fontColorForInput;
     })(),
     backgroundColor: (() => {
       if (state.isSelected) return designSystem.designTokens.colorPrimary95;
@@ -443,11 +442,10 @@ const optionStyles = props => (base, state) => {
       return base.backgroundColor;
     })(),
     '&:active': {
-      color: (() => {
-        if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
-        return base.color;
-      })(),
-      backgroundColor: designSystem.designTokens.colorPrimary95
+      backgroundColor: (() => {
+        if (state.isDisabled) return designSystem.designTokens.colorTransparent;
+        return designSystem.designTokens.colorPrimary95;
+      })()
     }
   });
 };
@@ -473,8 +471,9 @@ const placeholderStyles = props => base => {
 };
 const valueContainerStyles = props => base => {
   var _props$controlShouldR;
-  return _objectSpread(_objectSpread({}, base), {}, {
-    flexWrap: 'nowrap',
+  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
+    flexWrap: 'nowrap'
+  }), {}, {
     padding: '0',
     backgroundColor: 'none',
     overflow: 'hidden',
@@ -625,7 +624,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.5.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

package/dist/commercetools-uikit-select-utils.cjs.prod.js

@@ -433,9 +433,8 @@ const optionStyles = props => (base, state) => {
     fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
     cursor: state.isDisabled ? 'not-allowed' : 'pointer',
     color: (() => {
-      if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
-      if (state.isSelected) return designSystem.designTokens.fontColorForInput;
-      return base.color;
+      if (state.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
+      return designSystem.designTokens.fontColorForInput;
     })(),
     backgroundColor: (() => {
       if (state.isSelected) return designSystem.designTokens.colorPrimary95;
@@ -443,11 +442,10 @@ const optionStyles = props => (base, state) => {
       return base.backgroundColor;
     })(),
     '&:active': {
-      color: (() => {
-        if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
-        return base.color;
-      })(),
-      backgroundColor: designSystem.designTokens.colorPrimary95
+      backgroundColor: (() => {
+        if (state.isDisabled) return designSystem.designTokens.colorTransparent;
+        return designSystem.designTokens.colorPrimary95;
+      })()
     }
   });
 };
@@ -473,8 +471,9 @@ const placeholderStyles = props => base => {
 };
 const valueContainerStyles = props => base => {
   var _props$controlShouldR;
-  return _objectSpread(_objectSpread({}, base), {}, {
-    flexWrap: 'nowrap',
+  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
+    flexWrap: 'nowrap'
+  }), {}, {
     padding: '0',
     backgroundColor: 'none',
     overflow: 'hidden',
@@ -622,7 +621,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.5.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

package/dist/commercetools-uikit-select-utils.esm.js

@@ -413,9 +413,8 @@ const optionStyles = props => (base, state) => {
     fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
     cursor: state.isDisabled ? 'not-allowed' : 'pointer',
     color: (() => {
-      if (!state.isDisabled) return designTokens.fontColorForInput;
-      if (state.isSelected) return designTokens.fontColorForInput;
-      return base.color;
+      if (state.isDisabled) return designTokens.fontColorForInputWhenDisabled;
+      return designTokens.fontColorForInput;
     })(),
     backgroundColor: (() => {
       if (state.isSelected) return designTokens.colorPrimary95;
@@ -423,11 +422,10 @@ const optionStyles = props => (base, state) => {
       return base.backgroundColor;
     })(),
     '&:active': {
-      color: (() => {
-        if (!state.isDisabled) return designTokens.fontColorForInput;
-        return base.color;
-      })(),
-      backgroundColor: designTokens.colorPrimary95
+      backgroundColor: (() => {
+        if (state.isDisabled) return designTokens.colorTransparent;
+        return designTokens.colorPrimary95;
+      })()
     }
   });
 };
@@ -453,8 +451,9 @@ const placeholderStyles = props => base => {
 };
 const valueContainerStyles = props => base => {
   var _props$controlShouldR;
-  return _objectSpread(_objectSpread({}, base), {}, {
-    flexWrap: 'nowrap',
+  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
+    flexWrap: 'nowrap'
+  }), {}, {
     padding: '0',
     backgroundColor: 'none',
     overflow: 'hidden',
@@ -605,6 +604,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.4.0";
+var version = "19.5.0";
 
 export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };

package/dist/declarations/src/create-select-styles.d.ts

@@ -211,11 +211,10 @@ export default function createSelectStyles(props: TProps): {
         lineHeight: "var(--line-height-40, 1.625rem)";
         fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
         cursor: string;
-        color: string | undefined;
+        color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
         backgroundColor: string | undefined;
         '&:active': {
-            color: string | undefined;
-            backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))";
+            backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--color-transparent, transparent)";
         };
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
@@ -240,12 +239,12 @@ export default function createSelectStyles(props: TProps): {
         pointerEvents?: string | undefined;
     };
     valueContainer: (base: TBase) => {
-        flexWrap: string;
         padding: string;
         backgroundColor: string;
         overflow: string;
         display: string;
         fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
+        flexWrap?: string | undefined;
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         color?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "19.4.0",
+  "version": "19.5.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,12 +21,12 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "19.4.0",
-    "@commercetools-uikit/design-system": "19.4.0",
-    "@commercetools-uikit/icons": "19.4.0",
-    "@commercetools-uikit/spacings": "19.4.0",
-    "@commercetools-uikit/text": "19.4.0",
-    "@commercetools-uikit/utils": "19.4.0",
+    "@commercetools-uikit/accessible-button": "19.5.0",
+    "@commercetools-uikit/design-system": "19.5.0",
+    "@commercetools-uikit/icons": "19.5.0",
+    "@commercetools-uikit/spacings": "19.5.0",
+    "@commercetools-uikit/text": "19.5.0",
+    "@commercetools-uikit/utils": "19.5.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",