@commercetools-uikit/select-utils 19.10.0 → 19.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-select-utils.cjs.dev.js +30 -37
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +29 -36
  3. package/dist/commercetools-uikit-select-utils.esm.js +30 -36
  4. package/package.json +7 -7
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -12,7 +12,6 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
12
12
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
13
13
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
14
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
15
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
16
15
  var designSystem = require('@commercetools-uikit/design-system');
17
16
  var utils = require('@commercetools-uikit/utils');
18
17
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -36,7 +35,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
35
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
36
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
37
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
39
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
40
38
  var omit__default = /*#__PURE__*/_interopDefault(omit);
41
39
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
42
40
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -178,11 +176,11 @@ const MultiplePropertiesSelectInputOption = props => {
178
176
  scale: "xs",
179
177
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
180
178
  fontWeight: "bold",
181
- children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
179
+ children: data?.label || noValueFallback
182
180
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
183
- children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
181
+ children: ["Key: ", data?.key || noValueFallback]
184
182
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
185
- children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
183
+ children: ["ID: ", data?.id || noValueFallback]
186
184
  })]
187
185
  })
188
186
  }));
@@ -196,16 +194,15 @@ const DoublePropertySelectInputOption = props => {
196
194
  scale: "xs",
197
195
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
198
196
  fontWeight: "bold",
199
- children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
197
+ children: data?.label || noValueFallback
200
198
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
201
- children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
199
+ children: ["Key: ", data?.key || noValueFallback]
202
200
  })]
203
201
  })
204
202
  }));
205
203
  };
206
204
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
207
205
  const CustomSelectInputOption = props => {
208
- var _props$optionInnerPro;
209
206
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
210
207
  switch (props.optionType) {
211
208
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -219,7 +216,7 @@ const CustomSelectInputOption = props => {
219
216
  default:
220
217
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
221
218
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
222
- children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
219
+ children: props.optionInnerProps.data?.label || noValueFallback
223
220
  })
224
221
  }));
225
222
  }
@@ -255,13 +252,13 @@ var messages = reactIntl.defineMessages({
255
252
  });
256
253
 
257
254
  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; }
258
- 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; }
255
+ 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; }
259
256
  const getHorizontalConstraintValue = value => {
260
257
  switch (value) {
261
258
  case 'auto':
262
259
  return 'initial';
263
260
  default:
264
- return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
261
+ return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
265
262
  }
266
263
  };
267
264
  const getInputBackgroundColor = props => {
@@ -331,7 +328,6 @@ const getHoverInputBackgroundColor = props => {
331
328
  return null;
332
329
  };
333
330
  const controlStyles = props => (base, state) => {
334
- var _context;
335
331
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
336
332
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
337
333
  backgroundColor: getInputBackgroundColor(props),
@@ -349,8 +345,9 @@ const controlStyles = props => (base, state) => {
349
345
  if (props.isReadOnly) return 'default';
350
346
  return 'pointer';
351
347
  })(),
352
- padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
353
- transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
348
+ padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
349
+ transition: `border-color ${designSystem.designTokens.transitionStandard},
350
+ box-shadow ${designSystem.designTokens.transitionStandard}`,
354
351
  outline: 0,
355
352
  boxShadow: 'none'
356
353
  }, props.horizontalConstraint === 'auto' ? {
@@ -372,13 +369,13 @@ const controlStyles = props => (base, state) => {
372
369
  };
373
370
  const menuStyles = props => base => {
374
371
  return _objectSpread(_objectSpread({}, base), {}, {
375
- border: "1px solid ".concat(designSystem.designTokens.colorSurface),
372
+ border: `1px solid ${designSystem.designTokens.colorSurface}`,
376
373
  borderRadius: designSystem.designTokens.borderRadiusForInput,
377
374
  backgroundColor: designSystem.designTokens.backgroundColorForInput,
378
375
  boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
379
376
  fontSize: designSystem.designTokens.fontSize30,
380
377
  fontFamily: 'inherit',
381
- margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
378
+ margin: `${designSystem.designTokens.spacing10} 0 0 0`,
382
379
  borderColor: (() => {
383
380
  if (props.hasError || props.hasWarning) {
384
381
  return designSystem.designTokens.colorSurface;
@@ -419,16 +416,17 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
419
416
  });
420
417
  const menuListStyles = () => base => {
421
418
  return _objectSpread(_objectSpread({}, base), {}, {
422
- padding: "".concat(designSystem.designTokens.spacing10, " 0"),
419
+ padding: `${designSystem.designTokens.spacing10} 0`,
423
420
  borderRadius: designSystem.designTokens.borderRadiusForInput,
424
421
  backgroundColor: designSystem.designTokens.backgroundColorForInput
425
422
  });
426
423
  };
427
424
  const optionStyles = props => (base, state) => {
428
- var _context2, _context3, _context4;
429
425
  return _objectSpread(_objectSpread({}, base), {}, {
430
- 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),
431
- padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
426
+ transition: `border-color ${designSystem.designTokens.transitionStandard},
427
+ background-color ${designSystem.designTokens.transitionStandard},
428
+ color ${designSystem.designTokens.transitionStandard}`,
429
+ padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
432
430
  lineHeight: designSystem.designTokens.lineHeight40,
433
431
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
434
432
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -470,7 +468,6 @@ const placeholderStyles = props => base => {
470
468
  });
471
469
  };
472
470
  const valueContainerStyles = props => base => {
473
- var _props$controlShouldR;
474
471
  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
475
472
  flexWrap: 'nowrap'
476
473
  }), {}, {
@@ -480,7 +477,7 @@ const valueContainerStyles = props => base => {
480
477
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
481
478
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
482
479
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
483
- display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
480
+ display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
484
481
  fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
485
482
  });
486
483
  };
@@ -503,19 +500,18 @@ const groupStyles = props => base => {
503
500
  return _objectSpread(_objectSpread({}, base), {}, {
504
501
  padding: 0,
505
502
  '&:not(:first-of-type)': {
506
- borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
503
+ borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
507
504
  }
508
505
  });
509
506
  };
510
507
  const groupHeadingStyles = () => base => {
511
- var _context5;
512
508
  return _objectSpread(_objectSpread({}, base), {}, {
513
509
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
514
510
  fontSize: designSystem.designTokens.fontSize20,
515
- borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
511
+ borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
516
512
  textTransform: 'none',
517
513
  fontWeight: designSystem.designTokens.fontWeight500,
518
- padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
514
+ padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
519
515
  '&:empty': {
520
516
  padding: 0
521
517
  }
@@ -539,19 +535,17 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
539
535
  zIndex: props.menuPortalZIndex
540
536
  });
541
537
  const multiValueStyles = props => base => {
542
- var _context6, _context7;
543
538
  return _objectSpread(_objectSpread({}, base), {}, {
544
539
  display: 'flex',
545
540
  alignItems: 'center',
546
541
  height: props.isCondensed ? 'inherit' : '32px',
547
542
  backgroundColor: getMultiValueBackgroundColor(props),
548
- 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,
549
- border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
543
+ padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
544
+ border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
550
545
  borderRadius: designSystem.designTokens.borderRadius20
551
546
  });
552
547
  };
553
548
  const multiValueLabelStyles = props => base => {
554
- var _context8, _context9;
555
549
  return _objectSpread(_objectSpread({}, base), {}, {
556
550
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
557
551
  lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
@@ -560,8 +554,8 @@ const multiValueLabelStyles = props => base => {
560
554
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
561
555
  return base.color;
562
556
  })(),
563
- padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
564
- borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
557
+ padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
558
+ borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
565
559
  border: 'none',
566
560
  borderWidth: '1px 0 1px 1px',
567
561
  '&:last-child': {
@@ -571,11 +565,10 @@ const multiValueLabelStyles = props => base => {
571
565
  });
572
566
  };
573
567
  const multiValueRemoveStyles = props => (base, state) => {
574
- var _context10;
575
568
  return _objectSpread(_objectSpread({}, base), {}, {
576
569
  borderColor: designSystem.designTokens.colorNeutral,
577
- padding: "0 ".concat(designSystem.designTokens.spacing10),
578
- borderRadius: _concatInstanceProperty__default["default"](_context10 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context10, designSystem.designTokens.borderRadius2, " 0"),
570
+ padding: `0 ${designSystem.designTokens.spacing10}`,
571
+ borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
579
572
  borderStyle: 'none',
580
573
  borderWidth: '0',
581
574
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -615,7 +608,7 @@ function createSelectStyles(props) {
615
608
  };
616
609
  }
617
610
 
618
- const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
611
+ const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
619
612
  const warnIfMenuPortalPropsAreMissing = props => {
620
613
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
621
614
  ) {
@@ -624,7 +617,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
624
617
  };
625
618
 
626
619
  // NOTE: This string will be replaced on build time with the package version.
627
- var version = "19.10.0";
620
+ var version = "19.11.0";
628
621
 
629
622
  exports.ClearIndicator = ClearIndicator$1;
630
623
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -12,7 +12,6 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
12
12
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
13
13
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
14
14
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
15
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
16
15
  var designSystem = require('@commercetools-uikit/design-system');
17
16
  require('@commercetools-uikit/utils');
18
17
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -36,7 +35,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
35
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
36
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
37
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
39
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
40
38
  var omit__default = /*#__PURE__*/_interopDefault(omit);
41
39
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
42
40
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -178,11 +176,11 @@ const MultiplePropertiesSelectInputOption = props => {
178
176
  scale: "xs",
179
177
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
180
178
  fontWeight: "bold",
181
- children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
179
+ children: data?.label || noValueFallback
182
180
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
183
- children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
181
+ children: ["Key: ", data?.key || noValueFallback]
184
182
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
185
- children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
183
+ children: ["ID: ", data?.id || noValueFallback]
186
184
  })]
187
185
  })
188
186
  }));
@@ -196,16 +194,15 @@ const DoublePropertySelectInputOption = props => {
196
194
  scale: "xs",
197
195
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
198
196
  fontWeight: "bold",
199
- children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
197
+ children: data?.label || noValueFallback
200
198
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
201
- children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
199
+ children: ["Key: ", data?.key || noValueFallback]
202
200
  })]
203
201
  })
204
202
  }));
205
203
  };
206
204
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
207
205
  const CustomSelectInputOption = props => {
208
- var _props$optionInnerPro;
209
206
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
210
207
  switch (props.optionType) {
211
208
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -219,7 +216,7 @@ const CustomSelectInputOption = props => {
219
216
  default:
220
217
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
221
218
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
222
- children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
219
+ children: props.optionInnerProps.data?.label || noValueFallback
223
220
  })
224
221
  }));
225
222
  }
@@ -255,13 +252,13 @@ var messages = reactIntl.defineMessages({
255
252
  });
256
253
 
257
254
  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; }
258
- 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; }
255
+ 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; }
259
256
  const getHorizontalConstraintValue = value => {
260
257
  switch (value) {
261
258
  case 'auto':
262
259
  return 'initial';
263
260
  default:
264
- return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
261
+ return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
265
262
  }
266
263
  };
267
264
  const getInputBackgroundColor = props => {
@@ -331,7 +328,6 @@ const getHoverInputBackgroundColor = props => {
331
328
  return null;
332
329
  };
333
330
  const controlStyles = props => (base, state) => {
334
- var _context;
335
331
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
336
332
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
337
333
  backgroundColor: getInputBackgroundColor(props),
@@ -349,8 +345,9 @@ const controlStyles = props => (base, state) => {
349
345
  if (props.isReadOnly) return 'default';
350
346
  return 'pointer';
351
347
  })(),
352
- padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
353
- transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
348
+ padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
349
+ transition: `border-color ${designSystem.designTokens.transitionStandard},
350
+ box-shadow ${designSystem.designTokens.transitionStandard}`,
354
351
  outline: 0,
355
352
  boxShadow: 'none'
356
353
  }, props.horizontalConstraint === 'auto' ? {
@@ -372,13 +369,13 @@ const controlStyles = props => (base, state) => {
372
369
  };
373
370
  const menuStyles = props => base => {
374
371
  return _objectSpread(_objectSpread({}, base), {}, {
375
- border: "1px solid ".concat(designSystem.designTokens.colorSurface),
372
+ border: `1px solid ${designSystem.designTokens.colorSurface}`,
376
373
  borderRadius: designSystem.designTokens.borderRadiusForInput,
377
374
  backgroundColor: designSystem.designTokens.backgroundColorForInput,
378
375
  boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
379
376
  fontSize: designSystem.designTokens.fontSize30,
380
377
  fontFamily: 'inherit',
381
- margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
378
+ margin: `${designSystem.designTokens.spacing10} 0 0 0`,
382
379
  borderColor: (() => {
383
380
  if (props.hasError || props.hasWarning) {
384
381
  return designSystem.designTokens.colorSurface;
@@ -419,16 +416,17 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
419
416
  });
420
417
  const menuListStyles = () => base => {
421
418
  return _objectSpread(_objectSpread({}, base), {}, {
422
- padding: "".concat(designSystem.designTokens.spacing10, " 0"),
419
+ padding: `${designSystem.designTokens.spacing10} 0`,
423
420
  borderRadius: designSystem.designTokens.borderRadiusForInput,
424
421
  backgroundColor: designSystem.designTokens.backgroundColorForInput
425
422
  });
426
423
  };
427
424
  const optionStyles = props => (base, state) => {
428
- var _context2, _context3, _context4;
429
425
  return _objectSpread(_objectSpread({}, base), {}, {
430
- 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),
431
- padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
426
+ transition: `border-color ${designSystem.designTokens.transitionStandard},
427
+ background-color ${designSystem.designTokens.transitionStandard},
428
+ color ${designSystem.designTokens.transitionStandard}`,
429
+ padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
432
430
  lineHeight: designSystem.designTokens.lineHeight40,
433
431
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
434
432
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -470,7 +468,6 @@ const placeholderStyles = props => base => {
470
468
  });
471
469
  };
472
470
  const valueContainerStyles = props => base => {
473
- var _props$controlShouldR;
474
471
  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
475
472
  flexWrap: 'nowrap'
476
473
  }), {}, {
@@ -480,7 +477,7 @@ const valueContainerStyles = props => base => {
480
477
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
481
478
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
482
479
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
483
- display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
480
+ display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
484
481
  fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
485
482
  });
486
483
  };
@@ -503,19 +500,18 @@ const groupStyles = props => base => {
503
500
  return _objectSpread(_objectSpread({}, base), {}, {
504
501
  padding: 0,
505
502
  '&:not(:first-of-type)': {
506
- borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
503
+ borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
507
504
  }
508
505
  });
509
506
  };
510
507
  const groupHeadingStyles = () => base => {
511
- var _context5;
512
508
  return _objectSpread(_objectSpread({}, base), {}, {
513
509
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
514
510
  fontSize: designSystem.designTokens.fontSize20,
515
- borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
511
+ borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
516
512
  textTransform: 'none',
517
513
  fontWeight: designSystem.designTokens.fontWeight500,
518
- padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
514
+ padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
519
515
  '&:empty': {
520
516
  padding: 0
521
517
  }
@@ -539,19 +535,17 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
539
535
  zIndex: props.menuPortalZIndex
540
536
  });
541
537
  const multiValueStyles = props => base => {
542
- var _context6, _context7;
543
538
  return _objectSpread(_objectSpread({}, base), {}, {
544
539
  display: 'flex',
545
540
  alignItems: 'center',
546
541
  height: props.isCondensed ? 'inherit' : '32px',
547
542
  backgroundColor: getMultiValueBackgroundColor(props),
548
- 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,
549
- border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
543
+ padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
544
+ border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
550
545
  borderRadius: designSystem.designTokens.borderRadius20
551
546
  });
552
547
  };
553
548
  const multiValueLabelStyles = props => base => {
554
- var _context8, _context9;
555
549
  return _objectSpread(_objectSpread({}, base), {}, {
556
550
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
557
551
  lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
@@ -560,8 +554,8 @@ const multiValueLabelStyles = props => base => {
560
554
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
561
555
  return base.color;
562
556
  })(),
563
- padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
564
- borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
557
+ padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
558
+ borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
565
559
  border: 'none',
566
560
  borderWidth: '1px 0 1px 1px',
567
561
  '&:last-child': {
@@ -571,11 +565,10 @@ const multiValueLabelStyles = props => base => {
571
565
  });
572
566
  };
573
567
  const multiValueRemoveStyles = props => (base, state) => {
574
- var _context10;
575
568
  return _objectSpread(_objectSpread({}, base), {}, {
576
569
  borderColor: designSystem.designTokens.colorNeutral,
577
- padding: "0 ".concat(designSystem.designTokens.spacing10),
578
- borderRadius: _concatInstanceProperty__default["default"](_context10 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context10, designSystem.designTokens.borderRadius2, " 0"),
570
+ padding: `0 ${designSystem.designTokens.spacing10}`,
571
+ borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
579
572
  borderStyle: 'none',
580
573
  borderWidth: '0',
581
574
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -621,7 +614,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
621
614
  };
622
615
 
623
616
  // NOTE: This string will be replaced on build time with the package version.
624
- var version = "19.10.0";
617
+ var version = "19.11.0";
625
618
 
626
619
  exports.ClearIndicator = ClearIndicator$1;
627
620
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -8,7 +8,6 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
8
8
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
9
9
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
10
10
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
11
- import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
12
11
  import { designTokens } from '@commercetools-uikit/design-system';
13
12
  import { warning } from '@commercetools-uikit/utils';
14
13
  import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
@@ -158,11 +157,11 @@ const MultiplePropertiesSelectInputOption = props => {
158
157
  scale: "xs",
159
158
  children: [jsx(Text.Detail, {
160
159
  fontWeight: "bold",
161
- children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
160
+ children: data?.label || noValueFallback
162
161
  }), jsxs(Text.Detail, {
163
- children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
162
+ children: ["Key: ", data?.key || noValueFallback]
164
163
  }), jsxs(Text.Detail, {
165
- children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
164
+ children: ["ID: ", data?.id || noValueFallback]
166
165
  })]
167
166
  })
168
167
  }));
@@ -176,16 +175,15 @@ const DoublePropertySelectInputOption = props => {
176
175
  scale: "xs",
177
176
  children: [jsx(Text.Detail, {
178
177
  fontWeight: "bold",
179
- children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
178
+ children: data?.label || noValueFallback
180
179
  }), jsxs(Text.Detail, {
181
- children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
180
+ children: ["Key: ", data?.key || noValueFallback]
182
181
  })]
183
182
  })
184
183
  }));
185
184
  };
186
185
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
187
186
  const CustomSelectInputOption = props => {
188
- var _props$optionInnerPro;
189
187
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
190
188
  switch (props.optionType) {
191
189
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -199,7 +197,7 @@ const CustomSelectInputOption = props => {
199
197
  default:
200
198
  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
201
199
  children: jsx(Text.Detail, {
202
- children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
200
+ children: props.optionInnerProps.data?.label || noValueFallback
203
201
  })
204
202
  }));
205
203
  }
@@ -235,13 +233,13 @@ var messages = defineMessages({
235
233
  });
236
234
 
237
235
  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; }
238
- 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; }
236
+ 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; }
239
237
  const getHorizontalConstraintValue = value => {
240
238
  switch (value) {
241
239
  case 'auto':
242
240
  return 'initial';
243
241
  default:
244
- return designTokens["constraint".concat(value)] || designTokens.constraintScale;
242
+ return designTokens[`constraint${value}`] || designTokens.constraintScale;
245
243
  }
246
244
  };
247
245
  const getInputBackgroundColor = props => {
@@ -311,7 +309,6 @@ const getHoverInputBackgroundColor = props => {
311
309
  return null;
312
310
  };
313
311
  const controlStyles = props => (base, state) => {
314
- var _context;
315
312
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
316
313
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
317
314
  backgroundColor: getInputBackgroundColor(props),
@@ -329,8 +326,9 @@ const controlStyles = props => (base, state) => {
329
326
  if (props.isReadOnly) return 'default';
330
327
  return 'pointer';
331
328
  })(),
332
- padding: props.appearance === 'quiet' ? "0 ".concat(designTokens.spacing20) : "0 ".concat(designTokens.spacing30),
333
- transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
329
+ padding: props.appearance === 'quiet' ? `0 ${designTokens.spacing20}` : `0 ${designTokens.spacing30}`,
330
+ transition: `border-color ${designTokens.transitionStandard},
331
+ box-shadow ${designTokens.transitionStandard}`,
334
332
  outline: 0,
335
333
  boxShadow: 'none'
336
334
  }, props.horizontalConstraint === 'auto' ? {
@@ -352,13 +350,13 @@ const controlStyles = props => (base, state) => {
352
350
  };
353
351
  const menuStyles = props => base => {
354
352
  return _objectSpread(_objectSpread({}, base), {}, {
355
- border: "1px solid ".concat(designTokens.colorSurface),
353
+ border: `1px solid ${designTokens.colorSurface}`,
356
354
  borderRadius: designTokens.borderRadiusForInput,
357
355
  backgroundColor: designTokens.backgroundColorForInput,
358
356
  boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
359
357
  fontSize: designTokens.fontSize30,
360
358
  fontFamily: 'inherit',
361
- margin: "".concat(designTokens.spacing10, " 0 0 0"),
359
+ margin: `${designTokens.spacing10} 0 0 0`,
362
360
  borderColor: (() => {
363
361
  if (props.hasError || props.hasWarning) {
364
362
  return designTokens.colorSurface;
@@ -399,16 +397,17 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
399
397
  });
400
398
  const menuListStyles = () => base => {
401
399
  return _objectSpread(_objectSpread({}, base), {}, {
402
- padding: "".concat(designTokens.spacing10, " 0"),
400
+ padding: `${designTokens.spacing10} 0`,
403
401
  borderRadius: designTokens.borderRadiusForInput,
404
402
  backgroundColor: designTokens.backgroundColorForInput
405
403
  });
406
404
  };
407
405
  const optionStyles = props => (base, state) => {
408
- var _context2, _context3, _context4;
409
406
  return _objectSpread(_objectSpread({}, base), {}, {
410
- transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
411
- padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing30),
407
+ transition: `border-color ${designTokens.transitionStandard},
408
+ background-color ${designTokens.transitionStandard},
409
+ color ${designTokens.transitionStandard}`,
410
+ padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
412
411
  lineHeight: designTokens.lineHeight40,
413
412
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
414
413
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -450,7 +449,6 @@ const placeholderStyles = props => base => {
450
449
  });
451
450
  };
452
451
  const valueContainerStyles = props => base => {
453
- var _props$controlShouldR;
454
452
  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
455
453
  flexWrap: 'nowrap'
456
454
  }), {}, {
@@ -460,7 +458,7 @@ const valueContainerStyles = props => base => {
460
458
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
461
459
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
462
460
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
463
- display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
461
+ display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true) ? 'flex' : 'grid',
464
462
  fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60
465
463
  });
466
464
  };
@@ -483,19 +481,18 @@ const groupStyles = props => base => {
483
481
  return _objectSpread(_objectSpread({}, base), {}, {
484
482
  padding: 0,
485
483
  '&:not(:first-of-type)': {
486
- borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.colorNeutral90) : base.borderTop
484
+ borderTop: props.showOptionGroupDivider ? `1px solid ${designTokens.colorNeutral90}` : base.borderTop
487
485
  }
488
486
  });
489
487
  };
490
488
  const groupHeadingStyles = () => base => {
491
- var _context5;
492
489
  return _objectSpread(_objectSpread({}, base), {}, {
493
490
  color: designTokens.fontColorForInputWhenReadonly,
494
491
  fontSize: designTokens.fontSize20,
495
- borderBottom: "1px solid ".concat(designTokens.colorNeutral90),
492
+ borderBottom: `1px solid ${designTokens.colorNeutral90}`,
496
493
  textTransform: 'none',
497
494
  fontWeight: designTokens.fontWeight500,
498
- padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.spacing30),
495
+ padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
499
496
  '&:empty': {
500
497
  padding: 0
501
498
  }
@@ -519,19 +516,17 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
519
516
  zIndex: props.menuPortalZIndex
520
517
  });
521
518
  const multiValueStyles = props => base => {
522
- var _context6, _context7;
523
519
  return _objectSpread(_objectSpread({}, base), {}, {
524
520
  display: 'flex',
525
521
  alignItems: 'center',
526
522
  height: props.isCondensed ? 'inherit' : '32px',
527
523
  backgroundColor: getMultiValueBackgroundColor(props),
528
- padding: props.isCondensed ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "0 ".concat(designTokens.spacing20, " 0 calc(")).call(_context7, designTokens.spacing05, " + ")).call(_context6, designTokens.spacing10, ")") : designTokens.spacing20,
529
- border: "1px solid ".concat(designTokens.colorNeutral85),
524
+ padding: props.isCondensed ? `0 ${designTokens.spacing20} 0 calc(${designTokens.spacing05} + ${designTokens.spacing10})` : designTokens.spacing20,
525
+ border: `1px solid ${designTokens.colorNeutral85}`,
530
526
  borderRadius: designTokens.borderRadius20
531
527
  });
532
528
  };
533
529
  const multiValueLabelStyles = props => base => {
534
- var _context8, _context9;
535
530
  return _objectSpread(_objectSpread({}, base), {}, {
536
531
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
537
532
  lineHeight: props.isCondensed ? designTokens.lineHeight20 : designTokens.lineHeight40,
@@ -540,8 +535,8 @@ const multiValueLabelStyles = props => base => {
540
535
  if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
541
536
  return base.color;
542
537
  })(),
543
- padding: _concatInstanceProperty(_context8 = "".concat(props.isCondensed ? '1px' : designTokens.spacing10, " ")).call(_context8, designTokens.spacing20),
544
- borderRadius: _concatInstanceProperty(_context9 = "".concat(designTokens.borderRadius2, " 0 0 ")).call(_context9, designTokens.borderRadius2),
538
+ padding: `${props.isCondensed ? '1px' : designTokens.spacing10} ${designTokens.spacing20}`,
539
+ borderRadius: `${designTokens.borderRadius2} 0 0 ${designTokens.borderRadius2}`,
545
540
  border: 'none',
546
541
  borderWidth: '1px 0 1px 1px',
547
542
  '&:last-child': {
@@ -551,11 +546,10 @@ const multiValueLabelStyles = props => base => {
551
546
  });
552
547
  };
553
548
  const multiValueRemoveStyles = props => (base, state) => {
554
- var _context10;
555
549
  return _objectSpread(_objectSpread({}, base), {}, {
556
550
  borderColor: designTokens.colorNeutral,
557
- padding: "0 ".concat(designTokens.spacing10),
558
- borderRadius: _concatInstanceProperty(_context10 = "0 ".concat(designTokens.borderRadius2, " ")).call(_context10, designTokens.borderRadius2, " 0"),
551
+ padding: `0 ${designTokens.spacing10}`,
552
+ borderRadius: `0 ${designTokens.borderRadius2} ${designTokens.borderRadius2} 0`,
559
553
  borderStyle: 'none',
560
554
  borderWidth: '0',
561
555
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -595,7 +589,7 @@ function createSelectStyles(props) {
595
589
  };
596
590
  }
597
591
 
598
- const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
592
+ const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
599
593
  const warnIfMenuPortalPropsAreMissing = props => {
600
594
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
601
595
  ) {
@@ -604,6 +598,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
604
598
  };
605
599
 
606
600
  // NOTE: This string will be replaced on build time with the package version.
607
- var version = "19.10.0";
601
+ var version = "19.11.0";
608
602
 
609
603
  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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/select-utils",
3
3
  "description": "Utilities for working with select components.",
4
- "version": "19.10.0",
4
+ "version": "19.12.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,12 +21,12 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "19.10.0",
25
- "@commercetools-uikit/design-system": "19.10.0",
26
- "@commercetools-uikit/icons": "19.10.0",
27
- "@commercetools-uikit/spacings": "19.10.0",
28
- "@commercetools-uikit/text": "19.10.0",
29
- "@commercetools-uikit/utils": "19.10.0",
24
+ "@commercetools-uikit/accessible-button": "19.12.0",
25
+ "@commercetools-uikit/design-system": "19.12.0",
26
+ "@commercetools-uikit/icons": "19.12.0",
27
+ "@commercetools-uikit/spacings": "19.12.0",
28
+ "@commercetools-uikit/text": "19.12.0",
29
+ "@commercetools-uikit/utils": "19.12.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",