@commercetools-uikit/select-utils 19.4.0 → 19.6.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.6.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.6.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.6.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

@@ -54,9 +54,9 @@ export default function createSelectStyles(props: TProps): {
         transition: string;
         outline: number;
         boxShadow: string;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        borderTop?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        borderTop?: string;
     };
     menu: (base: TBase) => {
         border: string;
@@ -70,25 +70,25 @@ export default function createSelectStyles(props: TProps): {
         width: string;
         minWidth: string;
         maxWidth: string;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        borderTop?: string;
+        pointerEvents?: string;
     };
     indicatorSeparator: (base: TBase) => {
         display: string;
         margin: string;
         padding: string;
         marginLeft: "var(--spacing-10, 4px)";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     dropdownIndicator: (base: TBase) => {
         color: "var(--font-color-for-input, #1a1a1a)";
@@ -96,49 +96,49 @@ export default function createSelectStyles(props: TProps): {
         padding: string;
         marginLeft: "var(--spacing-20, 8px)";
         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;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     clearIndicator: (base: TBase) => {
         display: string;
         padding: number;
         marginLeft: "var(--spacing-20, 8px)";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     menuList: (base: TBase) => {
         padding: string;
         borderRadius: "var(--border-radius-for-input, 4px)";
         backgroundColor: "var(--background-color-for-input, #fff)";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     menuPortal: (base: TBase) => {
         zIndex: number | undefined;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     multiValue: (base: TBase) => {
         display: string;
@@ -148,13 +148,13 @@ export default function createSelectStyles(props: TProps): {
         padding: string;
         border: string;
         borderRadius: "var(--border-radius-20, 20px)";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     multiValueLabel: (base: TBase) => {
         fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
@@ -168,13 +168,13 @@ export default function createSelectStyles(props: TProps): {
             borderRadius: "var(--border-radius-2, 2px)";
             borderWidth: "var(--border-width-1, 1px)";
         };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     multiValueRemove: (base: TBase, state: TState) => {
         borderColor: "var(--color-neutral, hsl(232, 18%, 80%))";
@@ -194,11 +194,11 @@ export default function createSelectStyles(props: TProps): {
                 fill: "var(--color-error, hsl(3, 65%, 58%))";
             };
         };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        boxShadow?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        borderTop?: string;
+        boxShadow?: string;
     };
     indicatorsContainer: () => {
         background: string;
@@ -211,18 +211,17 @@ 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;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     placeholder: (base: TBase) => {
         color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))";
@@ -231,52 +230,52 @@ export default function createSelectStyles(props: TProps): {
         whiteSpace: string;
         textOverflow: string;
         fill: string | undefined;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     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%))";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        flexWrap?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     singleValue: (base: TBase) => {
         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;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     group: (base: TBase) => {
         padding: number;
         '&:not(:first-of-type)': {
             borderTop: string | undefined;
         };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     groupHeading: (base: TBase) => {
         color: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
@@ -288,13 +287,13 @@ export default function createSelectStyles(props: TProps): {
         '&:empty': {
             padding: number;
         };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        borderColor?: string;
+        boxShadow?: string;
+        pointerEvents?: string;
     };
     container: (base: TBase, state: TState) => {
         fontFamily: string;
@@ -302,12 +301,12 @@ export default function createSelectStyles(props: TProps): {
         borderRadius: "var(--border-radius-for-input, 4px)";
         borderColor: string | undefined;
         boxShadow: string | undefined;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        pointerEvents?: string | undefined;
+        fontColorForInput?: string;
+        borderColorForInput?: string;
+        color?: string;
+        backgroundColor?: string;
+        borderTop?: string;
+        pointerEvents?: string;
     };
 };
 export {};

package/dist/declarations/src/wrapper-with-icon/wrapper-with-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type SingleValueProps, type PlaceholderProps } from 'react-select';
 import { TSelectInputCustomComponentProps } from "../types.js";
 export type TSingleValueWrapperWithIconProps = {
@@ -10,12 +9,12 @@ export type TPlaceholderWrapperWithIconProps = {
 export type TWrapperWithIconProps<Type extends 'singleValue' | 'placeholder'> = Type extends 'singleValue' ? TSingleValueWrapperWithIconProps : Type extends 'placeholder' ? TPlaceholderWrapperWithIconProps : never;
 export type TDefaultComponent<Type extends 'singleValue' | 'placeholder'> = (props: Type extends 'singleValue' ? SingleValueProps : Type extends 'placeholder' ? PlaceholderProps : never) => JSX.Element;
 declare const WrapperWithIcon: {
-    <Type extends "placeholder" | "singleValue">(props: TWrapperWithIconProps<Type>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+    <Type extends "singleValue" | "placeholder">(props: TWrapperWithIconProps<Type>): import("@emotion/react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default WrapperWithIcon;
 declare const customComponents: {
-    SingleValue: (props: TWrapperWithIconProps<'singleValue'>) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Placeholder: (props: TWrapperWithIconProps<'placeholder'>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    SingleValue: (props: TWrapperWithIconProps<"singleValue">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Placeholder: (props: TWrapperWithIconProps<"placeholder">) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export { customComponents };

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.6.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.6.0",
+    "@commercetools-uikit/design-system": "19.6.0",
+    "@commercetools-uikit/icons": "19.6.0",
+    "@commercetools-uikit/spacings": "19.6.0",
+    "@commercetools-uikit/text": "19.6.0",
+    "@commercetools-uikit/utils": "19.6.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",