@commercetools-uikit/select-utils 16.0.0 → 16.1.1

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

@@ -31,28 +31,25 @@ var messages$1 = defineMessages({
 });
 
 const _excluded = ["ref", "onMouseDown"];
-
 function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const ClearIndicator = props => {
   const intl = useIntl();
-
   const getStyles = props.getStyles,
-        _props$innerProps = props.innerProps,
-        ref = _props$innerProps.ref,
-        onMouseDown = _props$innerProps.onMouseDown,
-        restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
-
+    _props$innerProps = props.innerProps,
+    ref = _props$innerProps.ref,
+    onMouseDown = _props$innerProps.onMouseDown,
+    restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
   return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
     ref: ref,
     css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.fontColorForClearInputIcon, ";:hover svg *{fill:", designTokens.fontColorForClearInputIconWhenHovered, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbmV4cG9ydCB0eXBlIFRDbGVhckluZGljYXRvclByb3BzID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbn07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZH07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
     style: getStyles('clearIndicator', props),
     title: intl.formatMessage(messages$1.clearButtonLabel),
-    "aria-label": intl.formatMessage(messages$1.clearButtonLabel) // overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
+    "aria-label": intl.formatMessage(messages$1.clearButtonLabel)
+    // overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
     ,
-    "aria-hidden": false // only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
+    "aria-hidden": false
+    // only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
     ,
     onClick: onMouseDown,
     children: jsx(CloseIcon, {
@@ -60,20 +57,17 @@ const ClearIndicator = props => {
     })
   }));
 };
-
 ClearIndicator.displayName = 'ClearIndicator';
 var ClearIndicator$1 = ClearIndicator;
 
 function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 // see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
 const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
-
 const TagRemove = props => {
-  const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly); // when the select input is disabled,
+  const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
+  // when the select input is disabled,
   // we don't want to spread the removeProp event handlers
-
   const innerProps = isDisabled ? omit(props.innerProps, removeProps) : props.innerProps;
   return jsx(AccessibleButton, _objectSpread$5(_objectSpread$5({
     label: "Remove"
@@ -84,28 +78,22 @@ const TagRemove = props => {
     })
   }));
 };
-
 TagRemove.displayName = 'TagRemove';
 var TagRemove$1 = TagRemove;
 
 function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const DropdownIndicator = props => jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
   children: jsx(CaretDownIcon, {
     color: props.isDisabled ? 'neutral60' : undefined,
     size: "small"
   })
 }));
-
 DropdownIndicator.displayName = 'DropdownIndicator';
 var DropdownIndicator$1 = DropdownIndicator;
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const SearchIconDropdownIndicator = props => {
   return jsx(components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
     children: jsx(SearchIcon, {
@@ -114,27 +102,21 @@ const SearchIconDropdownIndicator = props => {
     })
   }));
 };
-
 SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
 var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
 
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const getDefaultComponent = type => {
   if (type === 'singleValue') return components.SingleValue;
   if (type === 'placeholder') return components.Placeholder;
   return null;
 };
-
 const WrapperWithIcon = props => {
   const DefaultComponent = getDefaultComponent(props.type);
-
   if (!DefaultComponent) {
     return null;
   }
-
   return jsxs(Fragment, {
     children: [props.selectProps.iconLeft && /*#__PURE__*/cloneElement(props.selectProps.iconLeft, {
       size: 'big'
@@ -147,7 +129,6 @@ const WrapperWithIcon = props => {
     })]
   });
 };
-
 WrapperWithIcon.displayName = 'WrapperWithIcon';
 var WrapperWithIcon$1 = WrapperWithIcon;
 const customComponents = {
@@ -167,7 +148,6 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
 };
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MultiplePropertiesSelectInputOption = props => {
   const data = props.data;
@@ -205,20 +185,16 @@ const DoublePropertySelectInputOption = props => {
 DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
 const CustomSelectInputOption = props => {
   var _props$optionInnerPro;
-
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
-
   switch (props.optionType) {
     case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
       return jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
-
     case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
       return jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         noValueFallback: noValueFallback
       }));
-
     default:
       return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
         children: jsx(Text.Detail, {
@@ -258,32 +234,24 @@ var messages = defineMessages({
 });
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const getControlBorderColor = (props, defaultColor) => {
   if (props.isDisabled) {
     return designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designTokens.borderColorForSelectInputWhenReadonly;
   }
-
   if (props.hasError) {
     return designTokens.borderColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designTokens.borderColorForInputWhenWarning;
   }
-
   return defaultColor;
 };
-
 const controlStyles = props => (base, state) => {
   var _context;
-
   return _objectSpread(_objectSpread({}, base), {}, {
     fontSize: designTokens.fontSizeForInput,
     backgroundColor: (() => {
@@ -317,7 +285,6 @@ const controlStyles = props => (base, state) => {
     '&:focus-within': {
       boxShadow: (() => {
         var _context2;
-
         if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty(_context2 = "".concat(designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designTokens.borderColorForInputWhenFocused);
         return null;
       })(),
@@ -337,7 +304,6 @@ const controlStyles = props => (base, state) => {
     color: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
   });
 };
-
 const menuStyles = props => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     border: "1px solid ".concat(designTokens.borderColorForSelectInputMenu),
@@ -354,7 +320,6 @@ const menuStyles = props => base => {
     })()
   });
 };
-
 const indicatorSeparatorStyles = () => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     display: 'none',
@@ -363,7 +328,6 @@ const indicatorSeparatorStyles = () => base => {
     marginLeft: designTokens.spacing10
   });
 };
-
 const dropdownIndicatorStyles = props => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designTokens.fontColorForInput,
@@ -378,13 +342,11 @@ const dropdownIndicatorStyles = props => base => {
     })()
   });
 };
-
 const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
   display: 'flex',
   padding: 0,
   marginLeft: designTokens.marginForSelectInputIcon
 });
-
 const menuListStyles = () => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     padding: designTokens.paddingForSelectInputMenu,
@@ -392,10 +354,8 @@ const menuListStyles = () => base => {
     backgroundColor: designTokens.backgroundColorForInput
   });
 };
-
 const optionStyles = () => (base, state) => {
   var _context3, _context4;
-
   return _objectSpread(_objectSpread({}, base), {}, {
     transition: _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "border-color ".concat(designTokens.transitionStandard, ",\n      background-color ")).call(_context4, designTokens.transitionStandard, ",\n      color ")).call(_context3, designTokens.transitionStandard),
     paddingLeft: designTokens.paddingLeftForSelectInputOptions,
@@ -422,7 +382,6 @@ const optionStyles = () => (base, state) => {
     }
   });
 };
-
 const placeholderStyles = props => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     color: (() => {
@@ -435,8 +394,8 @@ const placeholderStyles = props => base => {
     fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
   });
 };
-
 const valueContainerStyles = props => base => {
+  var _props$controlShouldR;
   return _objectSpread(_objectSpread({}, base), {}, {
     padding: '0',
     backgroundColor: 'none',
@@ -444,29 +403,25 @@ const valueContainerStyles = props => base => {
     // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
     // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
     // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
+    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
     fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.fontColorForSelectInputIcon
   });
 };
-
 const singleValueStyles = props => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     color: (() => {
       if (props.isDisabled) {
         return designTokens.fontColorForInputWhenDisabled;
       }
-
       if (props.isReadOnly) {
         return designTokens.fontColorForInputWhenReadonly;
       }
-
       if (props.hasError) return designTokens.fontColorForSelectInputWhenError;
       if (props.hasWarning) return designTokens.fontColorForSelectInputWhenWarning;
       return designTokens.fontColorForInput;
     })()
   });
 };
-
 const groupStyles = props => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     padding: 0,
@@ -475,10 +430,8 @@ const groupStyles = props => base => {
     }
   });
 };
-
 const groupHeadingStyles = () => base => {
   var _context5;
-
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designTokens.fontColorForInputWhenReadonly,
     fontSize: designTokens.fontSizeSmall,
@@ -490,7 +443,6 @@ const groupHeadingStyles = () => base => {
     }
   });
 };
-
 const containerStyles = () => (base, state) => {
   return _objectSpread(_objectSpread({}, base), {}, {
     fontFamily: 'inherit',
@@ -500,17 +452,14 @@ const containerStyles = () => (base, state) => {
     boxShadow: state.isFocused ? 'none' : base.boxShadow
   });
 };
-
 const indicatorsContainerStyles = () => () => ({
   background: 'none',
   display: 'flex',
   alignItems: 'center'
 });
-
 const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
   zIndex: props.menuPortalZIndex
 });
-
 const multiValueStyles = () => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     display: 'flex',
@@ -521,10 +470,8 @@ const multiValueStyles = () => base => {
     border: designTokens.borderForSelectInputTag
   });
 };
-
 const multiValueLabelStyles = props => base => {
   var _context6, _context7;
-
   return _objectSpread(_objectSpread({}, base), {}, {
     fontSize: designTokens.fontSizeForSelectInputTag,
     color: (() => {
@@ -534,7 +481,7 @@ const multiValueLabelStyles = props => base => {
     })(),
     padding: _concatInstanceProperty(_context6 = "".concat(designTokens.spacing10, " ")).call(_context6, designTokens.spacing20),
     borderRadius: _concatInstanceProperty(_context7 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designTokens.borderRadiusForTag),
-    border: props.isNewTheme ? 'none' : "1px ".concat(designTokens.borderColorForTag, " solid"),
+    border: 'none',
     borderWidth: '1px 0 1px 1px',
     '&:last-child': {
       borderRadius: designTokens.borderRadiusForTag,
@@ -542,16 +489,14 @@ const multiValueLabelStyles = props => base => {
     }
   });
 };
-
 const multiValueRemoveStyles = props => (base, state) => {
   var _context8;
-
   return _objectSpread(_objectSpread({}, base), {}, {
     borderColor: designTokens.borderColorForTag,
     padding: "0 ".concat(designTokens.spacing10),
     borderRadius: _concatInstanceProperty(_context8 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context8, designTokens.borderRadiusForTag, " 0"),
-    borderStyle: !props.isNewTheme ? 'solid' : 'none',
-    borderWidth: !props.isNewTheme ? designTokens.borderWidth1 : '0',
+    borderStyle: 'none',
+    borderWidth: '0',
     pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
     backgroundColor: designTokens.backgroundColorForTag,
     'svg *': {
@@ -566,7 +511,6 @@ const multiValueRemoveStyles = props => (base, state) => {
     }
   });
 };
-
 function createSelectStyles(props) {
   return {
     control: controlStyles(props),
@@ -591,7 +535,6 @@ function createSelectStyles(props) {
 }
 
 const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
-
 const warnIfMenuPortalPropsAreMissing = props => {
   if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
   ) {
@@ -600,6 +543,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 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

@@ -26,16 +26,14 @@ type TState = {
     isDisabled?: boolean;
     isSelected?: boolean;
 };
-export default function createSelectStyles(props: TProps & {
-    isNewTheme: boolean;
-}): {
+export default function createSelectStyles(props: TProps): {
     control: (base: TBase, state: TState) => {
         fontSize: "var(--font-size-for-input, 1rem)";
-        backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))" | "var(--background-color-for-input-when-readonly, #fff)";
-        borderColor: "var(--border-color-for-input, hsl(0, 0%, 60%))" | "var(--border-color-for-input-when-focused, #00b39e)" | "var(--border-color-for-input-when-disabled, #ccc)" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-select-input-when-readonly, #ccc)";
-        borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 1px)";
-        borderRadius: "var(--border-radius-for-input, 6px)";
-        minHeight: "var(--height-for-input, 32px)";
+        backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(0, 0%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))";
+        borderColor: "var(--border-color-for-input, #ccc)" | "var(--border-color-for-input-when-focused, #00b39e)" | "var(--border-color-for-input-when-disabled, #ccc)" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-select-input-when-readonly, hsl(0, 0%, 95%))";
+        borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 2px)";
+        borderRadius: "var(--border-radius-for-input, 4px)";
+        minHeight: "var(--height-for-input, 40px)";
         cursor: string;
         padding: string;
         transition: string;
@@ -47,7 +45,7 @@ export default function createSelectStyles(props: TProps & {
         };
         '&:hover': {
             borderColor: string;
-            backgroundColor: "var(--background-color-for-input-when-hovered, #fff)" | null;
+            backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
         };
         pointerEvents: string;
         color: string | undefined;
@@ -57,9 +55,9 @@ export default function createSelectStyles(props: TProps & {
     };
     menu: (base: TBase) => {
         border: string;
-        borderRadius: "var(--border-radius-for-input, 6px)";
+        borderRadius: "var(--border-radius-for-input, 4px)";
         backgroundColor: "var(--background-color-for-input, #fff)";
-        boxShadow: "var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))";
+        boxShadow: "var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))";
         fontSize: "var(--font-size-for-input, 1rem)";
         fontFamily: string;
         margin: string;
@@ -88,8 +86,8 @@ export default function createSelectStyles(props: TProps & {
         color: "var(--font-color-for-input, #1a1a1a)";
         margin: string;
         padding: string;
-        marginLeft: "var(--margin-for-select-input-icon, 4px)";
-        fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)" | "var(--font-color-for-select-input-icon-when-error, #1a1a1a)" | "var(--font-color-for-select-input-icon-when-warning, #1a1a1a)";
+        marginLeft: "var(--margin-for-select-input-icon, 8px)";
+        fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon-when-error, #e60050)" | "var(--font-color-for-select-input-icon-when-warning, #f16d0e)";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         backgroundColor?: string | undefined;
@@ -101,7 +99,7 @@ export default function createSelectStyles(props: TProps & {
     clearIndicator: (base: TBase) => {
         display: string;
         padding: number;
-        marginLeft: "var(--margin-for-select-input-icon, 4px)";
+        marginLeft: "var(--margin-for-select-input-icon, 8px)";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         color?: string | undefined;
@@ -112,8 +110,8 @@ export default function createSelectStyles(props: TProps & {
         pointerEvents?: string | undefined;
     };
     menuList: (base: TBase) => {
-        padding: "var(--padding-for-select-input-menu, inherit)";
-        borderRadius: "var(--border-radius-for-input, 6px)";
+        padding: "var(--padding-for-select-input-menu, var(--spacing-10) 0)";
+        borderRadius: "var(--border-radius-for-input, 4px)";
         backgroundColor: "var(--background-color-for-input, #fff)";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
@@ -136,11 +134,11 @@ export default function createSelectStyles(props: TProps & {
     };
     multiValue: (base: TBase) => {
         display: string;
-        alignItems: "var(--align-items-for-select-input-tag, unset)";
-        height: "var(--height-for-select-input-tag, 26px)";
+        alignItems: "var(--align-items-for-select-input-tag, center)";
+        height: "var(--height-for-select-input-tag, 32px)";
         backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
         padding: string;
-        border: "var(--border-for-select-input-tag, none)";
+        border: "var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         color?: string | undefined;
@@ -150,7 +148,7 @@ export default function createSelectStyles(props: TProps & {
         pointerEvents?: string | undefined;
     };
     multiValueLabel: (base: TBase) => {
-        fontSize: "var(--font-size-for-select-input-tag, 0.9231rem)";
+        fontSize: "var(--font-size-for-select-input-tag, 1rem)";
         color: string | undefined;
         padding: string;
         borderRadius: string;
@@ -169,7 +167,7 @@ export default function createSelectStyles(props: TProps & {
         pointerEvents?: string | undefined;
     };
     multiValueRemove: (base: TBase, state: TState) => {
-        borderColor: "var(--border-color-for-tag, hsl(0, 0%, 60%))";
+        borderColor: "var(--border-color-for-tag, #ccc)";
         padding: string;
         borderRadius: string;
         borderStyle: string;
@@ -183,7 +181,7 @@ export default function createSelectStyles(props: TProps & {
             borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
             backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
             'svg *': {
-                fill: "var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)";
+                fill: "var(--font-color-for-clear-input-icon-when-hovered, #e60050)";
             };
         };
         fontColorForInput?: string | undefined;
@@ -199,16 +197,16 @@ export default function createSelectStyles(props: TProps & {
     };
     option: (base: TBase, state: TState) => {
         transition: string;
-        paddingLeft: "var(--padding-left-for-select-input-options, 8px)";
-        paddingRight: "var(--padding-right-for-select-input-options, 8px)";
-        paddingTop: "var(--padding-top-for-select-input-options, 4px)";
-        paddingBottom: "var(--padding-bottom-for-select-input-options, 4px)";
-        lineHeight: "var(--line-height-for-select-input-options, inherit)";
+        paddingLeft: "var(--padding-left-for-select-input-options, 16px)";
+        paddingRight: "var(--padding-right-for-select-input-options, 16px)";
+        paddingTop: "var(--padding-top-for-select-input-options, 8px)";
+        paddingBottom: "var(--padding-bottom-for-select-input-options, 8px)";
+        lineHeight: "var(--line-height-for-select-input-options, 1.625rem)";
         color: string | undefined;
         backgroundColor: string | undefined;
         '&:active': {
             color: string | undefined;
-            backgroundColor: "var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))";
+            backgroundColor: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
         };
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
@@ -237,7 +235,7 @@ export default function createSelectStyles(props: TProps & {
         backgroundColor: string;
         overflow: string;
         display: string;
-        fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)";
+        fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         color?: string | undefined;
@@ -247,7 +245,7 @@ export default function createSelectStyles(props: TProps & {
         pointerEvents?: string | undefined;
     };
     singleValue: (base: TBase) => {
-        color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-when-error, #1a1a1a)" | "var(--font-color-for-select-input-when-warning, #1a1a1a)";
+        color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))" | "var(--font-color-for-select-input-when-error, #e60050)" | "var(--font-color-for-select-input-when-warning, #f16d0e)";
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         backgroundColor?: string | undefined;
@@ -271,7 +269,7 @@ export default function createSelectStyles(props: TProps & {
         pointerEvents?: string | undefined;
     };
     groupHeading: (base: TBase) => {
-        color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))";
+        color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))";
         fontSize: "var(--font-size-small, 0.9231rem)";
         textTransform: string;
         fontWeight: string;
@@ -290,7 +288,7 @@ export default function createSelectStyles(props: TProps & {
     container: (base: TBase, state: TState) => {
         fontFamily: string;
         minHeight: "var(--size-height-input, 32px)";
-        borderRadius: "var(--border-radius-for-input, 6px)";
+        borderRadius: "var(--border-radius-for-input, 4px)";
         borderColor: string | undefined;
         boxShadow: string | undefined;
         fontColorForInput?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "16.0.0",
+  "version": "16.1.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,17 +21,17 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "16.0.0",
-    "@commercetools-uikit/design-system": "16.0.0",
-    "@commercetools-uikit/icons": "16.0.0",
-    "@commercetools-uikit/spacings": "16.0.0",
-    "@commercetools-uikit/text": "16.0.0",
-    "@commercetools-uikit/utils": "16.0.0",
+    "@commercetools-uikit/accessible-button": "16.1.1",
+    "@commercetools-uikit/design-system": "16.1.1",
+    "@commercetools-uikit/icons": "16.1.1",
+    "@commercetools-uikit/spacings": "16.1.1",
+    "@commercetools-uikit/text": "16.1.1",
+    "@commercetools-uikit/utils": "16.1.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.7.2"
+    "react-select": "5.7.3"
   },
   "devDependencies": {
     "react": "17.0.2",