@commercetools-uikit/select-utils - npm Package Compare versions

Comparing version 19.11.0 to 19.12.0

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

@@ -15,3 +15,2 @@ 'use strict';
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -40,3 +39,2 @@ var utils = require('@commercetools-uikit/utils');
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
@@ -183,7 +181,7 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
         fontWeight: "bold",
-        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
+        children: data?.label || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
+        children: ["Key: ", data?.key || noValueFallback]
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
+        children: ["ID: ", data?.id || noValueFallback]
       })]
@@ -202,5 +200,5 @@ })
         fontWeight: "bold",
-        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
+        children: data?.label || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
+        children: ["Key: ", data?.key || noValueFallback]
       })]
@@ -212,3 +210,2 @@ })
 const CustomSelectInputOption = props => {
-  var _props$optionInnerPro;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -227,3 +224,3 @@ switch (props.optionType) {
         children: jsxRuntime.jsx(Text__default["default"].Detail, {
-          children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
+          children: props.optionInnerProps.data?.label || noValueFallback
         })
@@ -264,3 +261,3 @@ }));
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getHorizontalConstraintValue = value => {
@@ -271,3 +268,3 @@ switch (value) {
     default:
-      return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
+      return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
   }
@@ -342,3 +339,2 @@ };
 const controlStyles = props => (base, state) => {
-  var _context;
   return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
@@ -361,4 +357,5 @@ fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
     })(),
-    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),
+    padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
+    transition: `border-color ${designSystem.designTokens.transitionStandard},
+    box-shadow ${designSystem.designTokens.transitionStandard}`,
     outline: 0,
@@ -385,3 +382,3 @@ boxShadow: 'none'
   return _objectSpread(_objectSpread({}, base), {}, {
-    border: "1px solid ".concat(designSystem.designTokens.colorSurface),
+    border: `1px solid ${designSystem.designTokens.colorSurface}`,
     borderRadius: designSystem.designTokens.borderRadiusForInput,
@@ -392,3 +389,3 @@ backgroundColor: designSystem.designTokens.backgroundColorForInput,
     fontFamily: 'inherit',
-    margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
+    margin: `${designSystem.designTokens.spacing10} 0 0 0`,
     borderColor: (() => {
@@ -434,3 +431,3 @@ if (props.hasError || props.hasWarning) {
   return _objectSpread(_objectSpread({}, base), {}, {
-    padding: "".concat(designSystem.designTokens.spacing10, " 0"),
+    padding: `${designSystem.designTokens.spacing10} 0`,
     borderRadius: designSystem.designTokens.borderRadiusForInput,
@@ -441,6 +438,7 @@ backgroundColor: designSystem.designTokens.backgroundColorForInput
 const optionStyles = props => (base, state) => {
-  var _context2, _context3, _context4;
   return _objectSpread(_objectSpread({}, base), {}, {
-    transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n      background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n      color ")).call(_context2, designSystem.designTokens.transitionStandard),
-    padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
+    transition: `border-color ${designSystem.designTokens.transitionStandard},
+      background-color ${designSystem.designTokens.transitionStandard},
+      color ${designSystem.designTokens.transitionStandard}`,
+    padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
     lineHeight: designSystem.designTokens.lineHeight40,
@@ -487,3 +485,2 @@ fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
 const valueContainerStyles = props => base => {
-  var _props$controlShouldR;
   return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
@@ -498,3 +495,3 @@ flexWrap: 'nowrap'
     // 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$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
+    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
     fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
@@ -522,3 +519,3 @@ });
     '&:not(:first-of-type)': {
-      borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
+      borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
     }
@@ -528,10 +525,9 @@ });
 const groupHeadingStyles = () => base => {
-  var _context5;
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designSystem.designTokens.fontColorForInputWhenReadonly,
     fontSize: designSystem.designTokens.fontSize20,
-    borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
+    borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
     textTransform: 'none',
     fontWeight: designSystem.designTokens.fontWeight500,
-    padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
+    padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
     '&:empty': {
@@ -560,3 +556,2 @@ padding: 0
 const multiValueStyles = props => base => {
-  var _context6, _context7;
   return _objectSpread(_objectSpread({}, base), {}, {
@@ -567,4 +562,4 @@ display: 'flex',
     backgroundColor: getMultiValueBackgroundColor(props),
-    padding: props.isCondensed ? _concatInstanceProperty__default["default"](_context6 = _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.spacing20, " 0 calc(")).call(_context7, designSystem.designTokens.spacing05, " + ")).call(_context6, designSystem.designTokens.spacing10, ")") : designSystem.designTokens.spacing20,
-    border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
+    padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
+    border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
     borderRadius: designSystem.designTokens.borderRadius20
@@ -574,3 +569,2 @@ });
 const multiValueLabelStyles = props => base => {
-  var _context8, _context9;
   return _objectSpread(_objectSpread({}, base), {}, {
@@ -584,4 +578,4 @@ fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
     })(),
-    padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
-    borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
+    padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
+    borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
     border: 'none',
@@ -596,7 +590,6 @@ borderWidth: '1px 0 1px 1px',
 const multiValueRemoveStyles = props => (base, state) => {
-  var _context10;
   return _objectSpread(_objectSpread({}, base), {}, {
     borderColor: designSystem.designTokens.colorNeutral,
-    padding: "0 ".concat(designSystem.designTokens.spacing10),
-    borderRadius: _concatInstanceProperty__default["default"](_context10 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context10, designSystem.designTokens.borderRadius2, " 0"),
+    padding: `0 ${designSystem.designTokens.spacing10}`,
+    borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
     borderStyle: 'none',
@@ -641,3 +634,3 @@ borderWidth: '0',
 
-const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
+const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
 const warnIfMenuPortalPropsAreMissing = props => {
@@ -644,0 +637,0 @@ if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props

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

@@ -15,3 +15,2 @@ 'use strict';
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -40,3 +39,2 @@ require('@commercetools-uikit/utils');
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
@@ -183,7 +181,7 @@ var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
         fontWeight: "bold",
-        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
+        children: data?.label || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
+        children: ["Key: ", data?.key || noValueFallback]
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
+        children: ["ID: ", data?.id || noValueFallback]
       })]
@@ -202,5 +200,5 @@ })
         fontWeight: "bold",
-        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
+        children: data?.label || noValueFallback
       }), jsxRuntime.jsxs(Text__default["default"].Detail, {
-        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
+        children: ["Key: ", data?.key || noValueFallback]
       })]
@@ -212,3 +210,2 @@ })
 const CustomSelectInputOption = props => {
-  var _props$optionInnerPro;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -227,3 +224,3 @@ switch (props.optionType) {
         children: jsxRuntime.jsx(Text__default["default"].Detail, {
-          children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
+          children: props.optionInnerProps.data?.label || noValueFallback
         })
@@ -264,3 +261,3 @@ }));
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getHorizontalConstraintValue = value => {
@@ -271,3 +268,3 @@ switch (value) {
     default:
-      return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
+      return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
   }
@@ -342,3 +339,2 @@ };
 const controlStyles = props => (base, state) => {
-  var _context;
   return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
@@ -361,4 +357,5 @@ fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
     })(),
-    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),
+    padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
+    transition: `border-color ${designSystem.designTokens.transitionStandard},
+    box-shadow ${designSystem.designTokens.transitionStandard}`,
     outline: 0,
@@ -385,3 +382,3 @@ boxShadow: 'none'
   return _objectSpread(_objectSpread({}, base), {}, {
-    border: "1px solid ".concat(designSystem.designTokens.colorSurface),
+    border: `1px solid ${designSystem.designTokens.colorSurface}`,
     borderRadius: designSystem.designTokens.borderRadiusForInput,
@@ -392,3 +389,3 @@ backgroundColor: designSystem.designTokens.backgroundColorForInput,
     fontFamily: 'inherit',
-    margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
+    margin: `${designSystem.designTokens.spacing10} 0 0 0`,
     borderColor: (() => {
@@ -434,3 +431,3 @@ if (props.hasError || props.hasWarning) {
   return _objectSpread(_objectSpread({}, base), {}, {
-    padding: "".concat(designSystem.designTokens.spacing10, " 0"),
+    padding: `${designSystem.designTokens.spacing10} 0`,
     borderRadius: designSystem.designTokens.borderRadiusForInput,
@@ -441,6 +438,7 @@ backgroundColor: designSystem.designTokens.backgroundColorForInput
 const optionStyles = props => (base, state) => {
-  var _context2, _context3, _context4;
   return _objectSpread(_objectSpread({}, base), {}, {
-    transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n      background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n      color ")).call(_context2, designSystem.designTokens.transitionStandard),
-    padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
+    transition: `border-color ${designSystem.designTokens.transitionStandard},
+      background-color ${designSystem.designTokens.transitionStandard},
+      color ${designSystem.designTokens.transitionStandard}`,
+    padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
     lineHeight: designSystem.designTokens.lineHeight40,
@@ -487,3 +485,2 @@ fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
 const valueContainerStyles = props => base => {
-  var _props$controlShouldR;
   return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
@@ -498,3 +495,3 @@ flexWrap: 'nowrap'
     // 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$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
+    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
     fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
@@ -522,3 +519,3 @@ });
     '&:not(:first-of-type)': {
-      borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
+      borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
     }
@@ -528,10 +525,9 @@ });
 const groupHeadingStyles = () => base => {
-  var _context5;
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designSystem.designTokens.fontColorForInputWhenReadonly,
     fontSize: designSystem.designTokens.fontSize20,
-    borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
+    borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
     textTransform: 'none',
     fontWeight: designSystem.designTokens.fontWeight500,
-    padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
+    padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
     '&:empty': {
@@ -560,3 +556,2 @@ padding: 0
 const multiValueStyles = props => base => {
-  var _context6, _context7;
   return _objectSpread(_objectSpread({}, base), {}, {
@@ -567,4 +562,4 @@ display: 'flex',
     backgroundColor: getMultiValueBackgroundColor(props),
-    padding: props.isCondensed ? _concatInstanceProperty__default["default"](_context6 = _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.spacing20, " 0 calc(")).call(_context7, designSystem.designTokens.spacing05, " + ")).call(_context6, designSystem.designTokens.spacing10, ")") : designSystem.designTokens.spacing20,
-    border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
+    padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
+    border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
     borderRadius: designSystem.designTokens.borderRadius20
@@ -574,3 +569,2 @@ });
 const multiValueLabelStyles = props => base => {
-  var _context8, _context9;
   return _objectSpread(_objectSpread({}, base), {}, {
@@ -584,4 +578,4 @@ fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
     })(),
-    padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
-    borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
+    padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
+    borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
     border: 'none',
@@ -596,7 +590,6 @@ borderWidth: '1px 0 1px 1px',
 const multiValueRemoveStyles = props => (base, state) => {
-  var _context10;
   return _objectSpread(_objectSpread({}, base), {}, {
     borderColor: designSystem.designTokens.colorNeutral,
-    padding: "0 ".concat(designSystem.designTokens.spacing10),
-    borderRadius: _concatInstanceProperty__default["default"](_context10 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context10, designSystem.designTokens.borderRadius2, " 0"),
+    padding: `0 ${designSystem.designTokens.spacing10}`,
+    borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
     borderStyle: 'none',
@@ -603,0 +596,0 @@ borderWidth: '0',

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

@@ -11,3 +11,2 @@ import { defineMessages, useIntl } from 'react-intl';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
-import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { designTokens } from '@commercetools-uikit/design-system';
@@ -162,7 +161,7 @@ import { warning } from '@commercetools-uikit/utils';
         fontWeight: "bold",
-        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
+        children: data?.label || noValueFallback
       }), jsxs(Text.Detail, {
-        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
+        children: ["Key: ", data?.key || noValueFallback]
       }), jsxs(Text.Detail, {
-        children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
+        children: ["ID: ", data?.id || noValueFallback]
       })]
@@ -181,5 +180,5 @@ })
         fontWeight: "bold",
-        children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
+        children: data?.label || noValueFallback
       }), jsxs(Text.Detail, {
-        children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
+        children: ["Key: ", data?.key || noValueFallback]
       })]
@@ -191,3 +190,2 @@ })
 const CustomSelectInputOption = props => {
-  var _props$optionInnerPro;
   const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
@@ -206,3 +204,3 @@ switch (props.optionType) {
         children: jsx(Text.Detail, {
-          children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
+          children: props.optionInnerProps.data?.label || noValueFallback
         })
@@ -243,3 +241,3 @@ }));
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const getHorizontalConstraintValue = value => {
@@ -250,3 +248,3 @@ switch (value) {
     default:
-      return designTokens["constraint".concat(value)] || designTokens.constraintScale;
+      return designTokens[`constraint${value}`] || designTokens.constraintScale;
   }
@@ -321,3 +319,2 @@ };
 const controlStyles = props => (base, state) => {
-  var _context;
   return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
@@ -340,4 +337,5 @@ fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
     })(),
-    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),
+    padding: props.appearance === 'quiet' ? `0 ${designTokens.spacing20}` : `0 ${designTokens.spacing30}`,
+    transition: `border-color ${designTokens.transitionStandard},
+    box-shadow ${designTokens.transitionStandard}`,
     outline: 0,
@@ -364,3 +362,3 @@ boxShadow: 'none'
   return _objectSpread(_objectSpread({}, base), {}, {
-    border: "1px solid ".concat(designTokens.colorSurface),
+    border: `1px solid ${designTokens.colorSurface}`,
     borderRadius: designTokens.borderRadiusForInput,
@@ -371,3 +369,3 @@ backgroundColor: designTokens.backgroundColorForInput,
     fontFamily: 'inherit',
-    margin: "".concat(designTokens.spacing10, " 0 0 0"),
+    margin: `${designTokens.spacing10} 0 0 0`,
     borderColor: (() => {
@@ -413,3 +411,3 @@ if (props.hasError || props.hasWarning) {
   return _objectSpread(_objectSpread({}, base), {}, {
-    padding: "".concat(designTokens.spacing10, " 0"),
+    padding: `${designTokens.spacing10} 0`,
     borderRadius: designTokens.borderRadiusForInput,
@@ -420,6 +418,7 @@ backgroundColor: designTokens.backgroundColorForInput
 const optionStyles = props => (base, state) => {
-  var _context2, _context3, _context4;
   return _objectSpread(_objectSpread({}, base), {}, {
-    transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n      background-color ")).call(_context3, designTokens.transitionStandard, ",\n      color ")).call(_context2, designTokens.transitionStandard),
-    padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing30),
+    transition: `border-color ${designTokens.transitionStandard},
+      background-color ${designTokens.transitionStandard},
+      color ${designTokens.transitionStandard}`,
+    padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
     lineHeight: designTokens.lineHeight40,
@@ -466,3 +465,2 @@ fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
 const valueContainerStyles = props => base => {
-  var _props$controlShouldR;
   return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
@@ -477,3 +475,3 @@ flexWrap: 'nowrap'
     // 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$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
+    display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
     fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60
@@ -501,3 +499,3 @@ });
     '&:not(:first-of-type)': {
-      borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.colorNeutral90) : base.borderTop
+      borderTop: props.showOptionGroupDivider ? `1px solid ${designTokens.colorNeutral90}` : base.borderTop
     }
@@ -507,10 +505,9 @@ });
 const groupHeadingStyles = () => base => {
-  var _context5;
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designTokens.fontColorForInputWhenReadonly,
     fontSize: designTokens.fontSize20,
-    borderBottom: "1px solid ".concat(designTokens.colorNeutral90),
+    borderBottom: `1px solid ${designTokens.colorNeutral90}`,
     textTransform: 'none',
     fontWeight: designTokens.fontWeight500,
-    padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.spacing30),
+    padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
     '&:empty': {
@@ -539,3 +536,2 @@ padding: 0
 const multiValueStyles = props => base => {
-  var _context6, _context7;
   return _objectSpread(_objectSpread({}, base), {}, {
@@ -546,4 +542,4 @@ display: 'flex',
     backgroundColor: getMultiValueBackgroundColor(props),
-    padding: props.isCondensed ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "0 ".concat(designTokens.spacing20, " 0 calc(")).call(_context7, designTokens.spacing05, " + ")).call(_context6, designTokens.spacing10, ")") : designTokens.spacing20,
-    border: "1px solid ".concat(designTokens.colorNeutral85),
+    padding: props.isCondensed ? `0 ${designTokens.spacing20} 0 calc(${designTokens.spacing05} + ${designTokens.spacing10})` : designTokens.spacing20,
+    border: `1px solid ${designTokens.colorNeutral85}`,
     borderRadius: designTokens.borderRadius20
@@ -553,3 +549,2 @@ });
 const multiValueLabelStyles = props => base => {
-  var _context8, _context9;
   return _objectSpread(_objectSpread({}, base), {}, {
@@ -563,4 +558,4 @@ fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
     })(),
-    padding: _concatInstanceProperty(_context8 = "".concat(props.isCondensed ? '1px' : designTokens.spacing10, " ")).call(_context8, designTokens.spacing20),
-    borderRadius: _concatInstanceProperty(_context9 = "".concat(designTokens.borderRadius2, " 0 0 ")).call(_context9, designTokens.borderRadius2),
+    padding: `${props.isCondensed ? '1px' : designTokens.spacing10} ${designTokens.spacing20}`,
+    borderRadius: `${designTokens.borderRadius2} 0 0 ${designTokens.borderRadius2}`,
     border: 'none',
@@ -575,7 +570,6 @@ borderWidth: '1px 0 1px 1px',
 const multiValueRemoveStyles = props => (base, state) => {
-  var _context10;
   return _objectSpread(_objectSpread({}, base), {}, {
     borderColor: designTokens.colorNeutral,
-    padding: "0 ".concat(designTokens.spacing10),
-    borderRadius: _concatInstanceProperty(_context10 = "0 ".concat(designTokens.borderRadius2, " ")).call(_context10, designTokens.borderRadius2, " 0"),
+    padding: `0 ${designTokens.spacing10}`,
+    borderRadius: `0 ${designTokens.borderRadius2} ${designTokens.borderRadius2} 0`,
     borderStyle: 'none',
@@ -620,3 +614,3 @@ borderWidth: '0',
 
-const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
+const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
 const warnIfMenuPortalPropsAreMissing = props => {
@@ -623,0 +617,0 @@ if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props

package.json

 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "19.11.0",
+  "version": "19.12.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
@@ -24,8 +24,8 @@ "repository": {
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "19.11.0",
-    "@commercetools-uikit/design-system": "19.11.0",
-    "@commercetools-uikit/icons": "19.11.0",
-    "@commercetools-uikit/spacings": "19.11.0",
-    "@commercetools-uikit/text": "19.11.0",
-    "@commercetools-uikit/utils": "19.11.0",
+    "@commercetools-uikit/accessible-button": "19.12.0",
+    "@commercetools-uikit/design-system": "19.12.0",
+    "@commercetools-uikit/icons": "19.12.0",
+    "@commercetools-uikit/spacings": "19.12.0",
+    "@commercetools-uikit/text": "19.12.0",
+    "@commercetools-uikit/utils": "19.12.0",
     "@emotion/react": "^11.10.5",
@@ -32,0 +32,0 @@ "@emotion/styled": "^11.10.5",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

137819

decreased by-3.4%

Lines of code

2427

decreased by-1.02%

Dependency changes

• + Added@commercetools-uikit/accessible-button@19.12.0(transitive)

• + Added@commercetools-uikit/design-system@19.12.0(transitive)

• + Added@commercetools-uikit/hooks@19.12.0(transitive)

• + Added@commercetools-uikit/icons@19.12.0(transitive)

• + Added@commercetools-uikit/spacings@19.12.0(transitive)

• + Added@commercetools-uikit/spacings-inline@19.12.0(transitive)

• + Added@commercetools-uikit/spacings-inset@19.12.0(transitive)

• + Added@commercetools-uikit/spacings-inset-squish@19.12.0(transitive)

• + Added@commercetools-uikit/spacings-stack@19.12.0(transitive)

• + Added@commercetools-uikit/text@19.12.0(transitive)

• + Added@commercetools-uikit/utils@19.12.0(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/serialize@1.3.2(transitive)

• + Added@emotion/utils@1.4.1(transitive)

• - Removed@commercetools-uikit/accessible-button@19.11.0(transitive)

• - Removed@commercetools-uikit/design-system@19.11.0(transitive)

• - Removed@commercetools-uikit/hooks@19.11.0(transitive)

• - Removed@commercetools-uikit/icons@19.11.0(transitive)

• - Removed@commercetools-uikit/spacings@19.11.0(transitive)

• - Removed@commercetools-uikit/spacings-inline@19.11.0(transitive)

• - Removed@commercetools-uikit/spacings-inset@19.11.0(transitive)

• - Removed@commercetools-uikit/spacings-inset-squish@19.11.0(transitive)

• - Removed@commercetools-uikit/spacings-stack@19.11.0(transitive)

• - Removed@commercetools-uikit/text@19.11.0(transitive)

• - Removed@commercetools-uikit/utils@19.11.0(transitive)

• - Removed@emotion/is-prop-valid@1.3.0(transitive)

• - Removed@emotion/serialize@1.3.1(transitive)

• - Removed@emotion/utils@1.4.0(transitive)

• Updated@commercetools-uikit/accessible-button@19.12.0

• Updated@commercetools-uikit/design-system@19.12.0

• Updated@commercetools-uikit/icons@19.12.0

• Updated@commercetools-uikit/spacings@19.12.0

• Updated@commercetools-uikit/text@19.12.0

• Updated@commercetools-uikit/utils@19.12.0