@commercetools-uikit/select-utils 19.1.0 → 19.3.0

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

@@ -119,7 +119,7 @@ const SearchIconDropdownIndicator = props => {
   return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
     children: jsxRuntime.jsx(icons.SearchIcon, {
       color: 'neutral60',
-      size: "big"
+      size: props.selectProps.isCondensed ? 'medium' : 'big'
     })
   }));
 };
@@ -266,7 +266,7 @@ const getHorizontalConstraintValue = value => {
 };
 const getInputBackgroundColor = props => {
   if (props.appearance === 'quiet') {
-    return designSystem.designTokens.backgroundColorForInputAsQuiet;
+    return designSystem.designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -283,7 +283,7 @@ const getMultiValueBackgroundColor = props => {
 };
 const getInputBorderColor = (props, state) => {
   if (props.appearance === 'quiet') {
-    return designSystem.designTokens.borderColorForInputAsQuiet;
+    return designSystem.designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -304,7 +304,7 @@ const getInputBorderColor = (props, state) => {
 };
 const getHoverInputBorderColor = props => {
   if (props.appearance === 'quiet') {
-    return designSystem.designTokens.borderColorForInputAsQuiet;
+    return designSystem.designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -323,7 +323,7 @@ const getHoverInputBorderColor = props => {
 const getHoverInputBackgroundColor = props => {
   if (!props.isDisabled && !props.isReadOnly) {
     if (props.appearance === 'quiet') {
-      return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
+      return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
     } else {
       return designSystem.designTokens.backgroundColorForInputWhenHovered;
     }
@@ -349,7 +349,7 @@ const controlStyles = props => (base, state) => {
       if (props.isReadOnly) return 'default';
       return 'pointer';
     })(),
-    padding: props.appearance === 'quiet' ? designSystem.designTokens.paddingForInputAsQuiet : designSystem.designTokens.paddingForInput,
+    padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
     transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
     outline: 0,
     boxShadow: 'none'
@@ -438,7 +438,7 @@ const optionStyles = props => (base, state) => {
       return base.color;
     })(),
     backgroundColor: (() => {
-      if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
+      if (state.isSelected) return designSystem.designTokens.colorPrimary95;
       if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
       return base.backgroundColor;
     })(),
@@ -447,7 +447,7 @@ const optionStyles = props => (base, state) => {
         if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
         return base.color;
       })(),
-      backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
+      backgroundColor: designSystem.designTokens.colorPrimary95
     }
   });
 };
@@ -624,7 +624,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.1.0";
+var version = "19.3.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -119,7 +119,7 @@ const SearchIconDropdownIndicator = props => {
   return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
     children: jsxRuntime.jsx(icons.SearchIcon, {
       color: 'neutral60',
-      size: "big"
+      size: props.selectProps.isCondensed ? 'medium' : 'big'
     })
   }));
 };
@@ -266,7 +266,7 @@ const getHorizontalConstraintValue = value => {
 };
 const getInputBackgroundColor = props => {
   if (props.appearance === 'quiet') {
-    return designSystem.designTokens.backgroundColorForInputAsQuiet;
+    return designSystem.designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -283,7 +283,7 @@ const getMultiValueBackgroundColor = props => {
 };
 const getInputBorderColor = (props, state) => {
   if (props.appearance === 'quiet') {
-    return designSystem.designTokens.borderColorForInputAsQuiet;
+    return designSystem.designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -304,7 +304,7 @@ const getInputBorderColor = (props, state) => {
 };
 const getHoverInputBorderColor = props => {
   if (props.appearance === 'quiet') {
-    return designSystem.designTokens.borderColorForInputAsQuiet;
+    return designSystem.designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -323,7 +323,7 @@ const getHoverInputBorderColor = props => {
 const getHoverInputBackgroundColor = props => {
   if (!props.isDisabled && !props.isReadOnly) {
     if (props.appearance === 'quiet') {
-      return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
+      return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
     } else {
       return designSystem.designTokens.backgroundColorForInputWhenHovered;
     }
@@ -349,7 +349,7 @@ const controlStyles = props => (base, state) => {
       if (props.isReadOnly) return 'default';
       return 'pointer';
     })(),
-    padding: props.appearance === 'quiet' ? designSystem.designTokens.paddingForInputAsQuiet : designSystem.designTokens.paddingForInput,
+    padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
     transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
     outline: 0,
     boxShadow: 'none'
@@ -438,7 +438,7 @@ const optionStyles = props => (base, state) => {
       return base.color;
     })(),
     backgroundColor: (() => {
-      if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
+      if (state.isSelected) return designSystem.designTokens.colorPrimary95;
       if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
       return base.backgroundColor;
     })(),
@@ -447,7 +447,7 @@ const optionStyles = props => (base, state) => {
         if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
         return base.color;
       })(),
-      backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
+      backgroundColor: designSystem.designTokens.colorPrimary95
     }
   });
 };
@@ -621,7 +621,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.1.0";
+var version = "19.3.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -99,7 +99,7 @@ const SearchIconDropdownIndicator = props => {
   return jsx(components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
     children: jsx(SearchIcon, {
       color: 'neutral60',
-      size: "big"
+      size: props.selectProps.isCondensed ? 'medium' : 'big'
     })
   }));
 };
@@ -246,7 +246,7 @@ const getHorizontalConstraintValue = value => {
 };
 const getInputBackgroundColor = props => {
   if (props.appearance === 'quiet') {
-    return designTokens.backgroundColorForInputAsQuiet;
+    return designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designTokens.backgroundColorForInputWhenDisabled;
@@ -263,7 +263,7 @@ const getMultiValueBackgroundColor = props => {
 };
 const getInputBorderColor = (props, state) => {
   if (props.appearance === 'quiet') {
-    return designTokens.borderColorForInputAsQuiet;
+    return designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designTokens.borderColorForInputWhenDisabled;
@@ -284,7 +284,7 @@ const getInputBorderColor = (props, state) => {
 };
 const getHoverInputBorderColor = props => {
   if (props.appearance === 'quiet') {
-    return designTokens.borderColorForInputAsQuiet;
+    return designTokens.colorTransparent;
   }
   if (props.isDisabled) {
     return designTokens.borderColorForInputWhenDisabled;
@@ -303,7 +303,7 @@ const getHoverInputBorderColor = props => {
 const getHoverInputBackgroundColor = props => {
   if (!props.isDisabled && !props.isReadOnly) {
     if (props.appearance === 'quiet') {
-      return designTokens.backgroundColorForInputAsQuietWhenHovered;
+      return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
     } else {
       return designTokens.backgroundColorForInputWhenHovered;
     }
@@ -329,7 +329,7 @@ const controlStyles = props => (base, state) => {
       if (props.isReadOnly) return 'default';
       return 'pointer';
     })(),
-    padding: props.appearance === 'quiet' ? designTokens.paddingForInputAsQuiet : designTokens.paddingForInput,
+    padding: props.appearance === 'quiet' ? "0 ".concat(designTokens.spacing20) : "0 ".concat(designTokens.spacing30),
     transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designTokens.transitionStandard),
     outline: 0,
     boxShadow: 'none'
@@ -418,7 +418,7 @@ const optionStyles = props => (base, state) => {
       return base.color;
     })(),
     backgroundColor: (() => {
-      if (state.isSelected) return designTokens.backgroundColorForInputWhenSelected;
+      if (state.isSelected) return designTokens.colorPrimary95;
       if (state.isFocused) return designTokens.backgroundColorForInputWhenHovered;
       return base.backgroundColor;
     })(),
@@ -427,7 +427,7 @@ const optionStyles = props => (base, state) => {
         if (!state.isDisabled) return designTokens.fontColorForInput;
         return base.color;
       })(),
-      backgroundColor: designTokens.backgroundColorForInputWhenActive
+      backgroundColor: designTokens.colorPrimary95
     }
   });
 };
@@ -604,6 +604,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.1.0";
+var version = "19.3.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

@@ -34,23 +34,23 @@ type TState = {
 export default function createSelectStyles(props: TProps): {
     control: (base: TBase, state: TState) => {
         '&:focus-within': {
-            borderColor: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | null;
+            borderColor: "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))" | null;
         };
         '&:hover': {
-            borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-input-as-quiet, transparent)";
-            backgroundColor: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))" | null;
+            borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-transparent, transparent)" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))";
+            backgroundColor: string | null;
         };
         pointerEvents: string;
         color: string | undefined;
         display?: string | undefined;
         fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
-        backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-as-quiet, transparent)";
-        borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-as-quiet, transparent)";
+        backgroundColor: "var(--color-transparent, transparent)" | "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
+        borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-transparent, transparent)" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))";
         borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)";
         borderRadius: "var(--border-radius-for-input, 4px)";
         minHeight: "var(--height-for-input, 40px)" | "var(--height-for-input-as-small, 32px)";
         cursor: string;
-        padding: "var(--padding-for-input, 0 var(--spacing-30))" | "var(--padding-for-input-as-quiet, 0 var(--spacing-20))";
+        padding: string;
         transition: string;
         outline: number;
         boxShadow: string;
@@ -95,7 +95,7 @@ export default function createSelectStyles(props: TProps): {
         margin: string;
         padding: string;
         marginLeft: "var(--spacing-20, 8px)";
-        fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
+        fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         backgroundColor?: string | undefined;
@@ -144,7 +144,7 @@ export default function createSelectStyles(props: TProps): {
         display: string;
         alignItems: string;
         height: string;
-        backgroundColor: "var(--color-primary-95, hsl(175, 90%, 95%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
+        backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
         padding: string;
         border: string;
         borderRadius: "var(--border-radius-20, 20px)";
@@ -188,10 +188,10 @@ export default function createSelectStyles(props: TProps): {
             fill: string;
         };
         '&:hover, &:focus': {
-            borderColor: "var(--color-warning, #f16d0e)";
+            borderColor: "var(--color-warning, hsl(35, 90%, 45%))";
             backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
             'svg *': {
-                fill: "var(--color-error, #e60050)";
+                fill: "var(--color-error, hsl(3, 65%, 58%))";
             };
         };
         fontColorForInput?: string | undefined;
@@ -215,7 +215,7 @@ export default function createSelectStyles(props: TProps): {
         backgroundColor: string | undefined;
         '&:active': {
             color: string | undefined;
-            backgroundColor: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
+            backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))";
         };
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
@@ -225,7 +225,7 @@ export default function createSelectStyles(props: TProps): {
         pointerEvents?: string | undefined;
     };
     placeholder: (base: TBase) => {
-        color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)";
+        color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))";
         width: string;
         overflow: string;
         whiteSpace: string;
@@ -254,7 +254,7 @@ export default function createSelectStyles(props: TProps): {
         pointerEvents?: string | undefined;
     };
     singleValue: (base: TBase) => {
-        color: "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
+        color: "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         backgroundColor?: string | undefined;

package/dist/declarations/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.d.ts

@@ -1,6 +1,8 @@
 import { DropdownIndicatorProps } from 'react-select';
+import { TSelectInputCustomComponentProps } from "../types.js";
+export type TDropdownIndicatorProps = TSelectInputCustomComponentProps<DropdownIndicatorProps>;
 declare const SearchIconDropdownIndicator: {
-    (props: DropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    (props: TDropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SearchIconDropdownIndicator;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "19.1.0",
+  "version": "19.3.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.1.0",
-    "@commercetools-uikit/design-system": "19.1.0",
-    "@commercetools-uikit/icons": "19.1.0",
-    "@commercetools-uikit/spacings": "19.1.0",
-    "@commercetools-uikit/text": "19.1.0",
-    "@commercetools-uikit/utils": "19.1.0",
+    "@commercetools-uikit/accessible-button": "19.3.0",
+    "@commercetools-uikit/design-system": "19.3.0",
+    "@commercetools-uikit/icons": "19.3.0",
+    "@commercetools-uikit/spacings": "19.3.0",
+    "@commercetools-uikit/text": "19.3.0",
+    "@commercetools-uikit/utils": "19.3.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",