@commercetools-uikit/select-utils 20.2.3 → 20.3.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 +38 -31
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +37 -30
  3. package/dist/commercetools-uikit-select-utils.esm.js +37 -31
  4. package/package.json +10 -10
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -12,6 +12,7 @@ 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');
15
16
  var designSystem = require('@commercetools-uikit/design-system');
16
17
  var utils = require('@commercetools-uikit/utils');
17
18
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -36,6 +37,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
37
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
38
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
39
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
40
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
39
41
  var omit__default = /*#__PURE__*/_interopDefault(omit);
40
42
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
41
43
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -178,11 +180,11 @@ const MultiplePropertiesSelectInputOption = props => {
178
180
  scale: "xs",
179
181
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
180
182
  fontWeight: "bold",
181
- children: data?.label || noValueFallback
183
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
182
184
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
183
- children: ["Key: ", data?.key || noValueFallback]
185
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
184
186
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
185
- children: ["ID: ", data?.id || noValueFallback]
187
+ children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
186
188
  })]
187
189
  })
188
190
  }));
@@ -196,15 +198,16 @@ const DoublePropertySelectInputOption = props => {
196
198
  scale: "xs",
197
199
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
198
200
  fontWeight: "bold",
199
- children: data?.label || noValueFallback
201
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
200
202
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
201
- children: ["Key: ", data?.key || noValueFallback]
203
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
202
204
  })]
203
205
  })
204
206
  }));
205
207
  };
206
208
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
207
209
  const CustomSelectInputOption = props => {
210
+ var _props$optionInnerPro;
208
211
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
209
212
  switch (props.optionType) {
210
213
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -218,7 +221,7 @@ const CustomSelectInputOption = props => {
218
221
  default:
219
222
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
220
223
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
221
- children: props.optionInnerProps.data?.label || noValueFallback
224
+ children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
222
225
  })
223
226
  }));
224
227
  }
@@ -242,7 +245,7 @@ const optionStyleCheckboxComponents = appearance => {
242
245
  "data-component": "option",
243
246
  ref: innerRef
244
247
  }, innerProps), {}, {
245
- css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && `background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
248
+ css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && "background-color: ".concat(designSystem.designTokens.backgroundColorForInputWhenHovered, ";"), " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
246
249
  className: className,
247
250
  "aria-disabled": isDisabled,
248
251
  children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
@@ -307,13 +310,13 @@ var messages = reactIntl.defineMessages({
307
310
  });
308
311
 
309
312
  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; }
310
- 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; }
313
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
311
314
  const getHorizontalConstraintValue = value => {
312
315
  switch (value) {
313
316
  case 'auto':
314
317
  return 'initial';
315
318
  default:
316
- return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
319
+ return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
317
320
  }
318
321
  };
319
322
  const getInputBackgroundColor = props => {
@@ -383,6 +386,7 @@ const getHoverInputBackgroundColor = props => {
383
386
  return null;
384
387
  };
385
388
  const controlStyles = props => (base, state) => {
389
+ var _context;
386
390
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
387
391
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
388
392
  backgroundColor: getInputBackgroundColor(props),
@@ -400,9 +404,8 @@ const controlStyles = props => (base, state) => {
400
404
  if (props.isReadOnly) return 'default';
401
405
  return 'pointer';
402
406
  })(),
403
- padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
404
- transition: `border-color ${designSystem.designTokens.transitionStandard},
405
- box-shadow ${designSystem.designTokens.transitionStandard}`,
407
+ padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
408
+ transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
406
409
  outline: 0,
407
410
  boxShadow: 'none'
408
411
  }, props.horizontalConstraint === 'auto' ? {
@@ -427,13 +430,13 @@ const menuStyles = props => base => {
427
430
  position: 'inherit',
428
431
  zIndex: 'inherit'
429
432
  } : {}), {}, {
430
- border: `1px solid ${designSystem.designTokens.colorSurface}`,
433
+ border: "1px solid ".concat(designSystem.designTokens.colorSurface),
431
434
  borderRadius: designSystem.designTokens.borderRadiusForInput,
432
435
  backgroundColor: designSystem.designTokens.backgroundColorForInput,
433
436
  boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
434
437
  fontSize: designSystem.designTokens.fontSize30,
435
438
  fontFamily: 'inherit',
436
- margin: `${designSystem.designTokens.spacing10} 0 0 0`,
439
+ margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
437
440
  borderColor: (() => {
438
441
  if (props.hasError || props.hasWarning) {
439
442
  return designSystem.designTokens.colorSurface;
@@ -474,17 +477,16 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
474
477
  });
475
478
  const menuListStyles = () => base => {
476
479
  return _objectSpread(_objectSpread({}, base), {}, {
477
- padding: `${designSystem.designTokens.spacing10} 0`,
480
+ padding: "".concat(designSystem.designTokens.spacing10, " 0"),
478
481
  borderRadius: designSystem.designTokens.borderRadiusForInput,
479
482
  backgroundColor: designSystem.designTokens.backgroundColorForInput
480
483
  });
481
484
  };
482
485
  const optionStyles = props => (base, state) => {
486
+ var _context2, _context3, _context4;
483
487
  return _objectSpread(_objectSpread({}, base), {}, {
484
- transition: `border-color ${designSystem.designTokens.transitionStandard},
485
- background-color ${designSystem.designTokens.transitionStandard},
486
- color ${designSystem.designTokens.transitionStandard}`,
487
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
488
+ 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),
489
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
488
490
  lineHeight: designSystem.designTokens.lineHeight40,
489
491
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
490
492
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -527,13 +529,14 @@ const placeholderStyles = props => base => {
527
529
  });
528
530
  };
529
531
  const getInputValueLayout = props => {
532
+ var _props$controlShouldR;
530
533
  switch (true) {
531
534
  case props.appearance === 'filter':
532
535
  return 'grid';
533
536
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
534
537
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
535
538
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
536
- case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
539
+ case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true):
537
540
  return 'flex';
538
541
  default:
539
542
  return 'grid';
@@ -569,18 +572,19 @@ const groupStyles = props => base => {
569
572
  return _objectSpread(_objectSpread({}, base), {}, {
570
573
  padding: 0,
571
574
  '&:not(:first-of-type)': {
572
- borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
575
+ borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
573
576
  }
574
577
  });
575
578
  };
576
579
  const groupHeadingStyles = () => base => {
580
+ var _context5;
577
581
  return _objectSpread(_objectSpread({}, base), {}, {
578
582
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
579
583
  fontSize: designSystem.designTokens.fontSize20,
580
- borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
584
+ borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
581
585
  textTransform: 'none',
582
586
  fontWeight: designSystem.designTokens.fontWeight500,
583
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
587
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
584
588
  '&:empty': {
585
589
  padding: 0
586
590
  }
@@ -604,17 +608,19 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
604
608
  zIndex: props.menuPortalZIndex
605
609
  });
606
610
  const multiValueStyles = props => base => {
611
+ var _context6, _context7;
607
612
  return _objectSpread(_objectSpread({}, base), {}, {
608
613
  display: 'flex',
609
614
  alignItems: 'center',
610
615
  height: props.isCondensed ? 'inherit' : '32px',
611
616
  backgroundColor: getMultiValueBackgroundColor(props),
612
- padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
613
- border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
617
+ 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,
618
+ border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
614
619
  borderRadius: designSystem.designTokens.borderRadius20
615
620
  });
616
621
  };
617
622
  const multiValueLabelStyles = props => base => {
623
+ var _context8, _context9;
618
624
  return _objectSpread(_objectSpread({}, base), {}, {
619
625
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
620
626
  lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
@@ -623,8 +629,8 @@ const multiValueLabelStyles = props => base => {
623
629
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
624
630
  return base.color;
625
631
  })(),
626
- padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
627
- borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
632
+ padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
633
+ borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
628
634
  border: 'none',
629
635
  borderWidth: '1px 0 1px 1px',
630
636
  '&:last-child': {
@@ -634,10 +640,11 @@ const multiValueLabelStyles = props => base => {
634
640
  });
635
641
  };
636
642
  const multiValueRemoveStyles = props => (base, state) => {
643
+ var _context0;
637
644
  return _objectSpread(_objectSpread({}, base), {}, {
638
645
  borderColor: designSystem.designTokens.colorNeutral,
639
- padding: `0 ${designSystem.designTokens.spacing10}`,
640
- borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
646
+ padding: "0 ".concat(designSystem.designTokens.spacing10),
647
+ borderRadius: _concatInstanceProperty__default["default"](_context0 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context0, designSystem.designTokens.borderRadius2, " 0"),
641
648
  borderStyle: 'none',
642
649
  borderWidth: '0',
643
650
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -677,7 +684,7 @@ function createSelectStyles(props) {
677
684
  };
678
685
  }
679
686
 
680
- const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
687
+ const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
681
688
  const warnIfMenuPortalPropsAreMissing = props => {
682
689
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
683
690
  ) {
@@ -686,7 +693,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
686
693
  };
687
694
 
688
695
  // NOTE: This string will be replaced on build time with the package version.
689
- var version = "20.2.3";
696
+ var version = "20.3.0";
690
697
 
691
698
  exports.ClearIndicator = ClearIndicator$1;
692
699
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -12,6 +12,7 @@ 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');
15
16
  var designSystem = require('@commercetools-uikit/design-system');
16
17
  require('@commercetools-uikit/utils');
17
18
  var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
@@ -36,6 +37,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
36
37
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
37
38
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
38
39
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
40
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
39
41
  var omit__default = /*#__PURE__*/_interopDefault(omit);
40
42
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
41
43
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
@@ -178,11 +180,11 @@ const MultiplePropertiesSelectInputOption = props => {
178
180
  scale: "xs",
179
181
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
180
182
  fontWeight: "bold",
181
- children: data?.label || noValueFallback
183
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
182
184
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
183
- children: ["Key: ", data?.key || noValueFallback]
185
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
184
186
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
185
- children: ["ID: ", data?.id || noValueFallback]
187
+ children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
186
188
  })]
187
189
  })
188
190
  }));
@@ -196,15 +198,16 @@ const DoublePropertySelectInputOption = props => {
196
198
  scale: "xs",
197
199
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
198
200
  fontWeight: "bold",
199
- children: data?.label || noValueFallback
201
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
200
202
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
201
- children: ["Key: ", data?.key || noValueFallback]
203
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
202
204
  })]
203
205
  })
204
206
  }));
205
207
  };
206
208
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
207
209
  const CustomSelectInputOption = props => {
210
+ var _props$optionInnerPro;
208
211
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
209
212
  switch (props.optionType) {
210
213
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -218,7 +221,7 @@ const CustomSelectInputOption = props => {
218
221
  default:
219
222
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
220
223
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
221
- children: props.optionInnerProps.data?.label || noValueFallback
224
+ children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
222
225
  })
223
226
  }));
224
227
  }
@@ -242,7 +245,7 @@ const optionStyleCheckboxComponents = appearance => {
242
245
  "data-component": "option",
243
246
  ref: innerRef
244
247
  }, innerProps), {}, {
245
- css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && `background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + ("" ), "" ),
248
+ css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && "background-color: ".concat(designSystem.designTokens.backgroundColorForInputWhenHovered, ";"), " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + ("" ), "" ),
246
249
  className: className,
247
250
  "aria-disabled": isDisabled,
248
251
  children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
@@ -307,13 +310,13 @@ var messages = reactIntl.defineMessages({
307
310
  });
308
311
 
309
312
  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; }
310
- 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; }
313
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
311
314
  const getHorizontalConstraintValue = value => {
312
315
  switch (value) {
313
316
  case 'auto':
314
317
  return 'initial';
315
318
  default:
316
- return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
319
+ return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
317
320
  }
318
321
  };
319
322
  const getInputBackgroundColor = props => {
@@ -383,6 +386,7 @@ const getHoverInputBackgroundColor = props => {
383
386
  return null;
384
387
  };
385
388
  const controlStyles = props => (base, state) => {
389
+ var _context;
386
390
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
387
391
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
388
392
  backgroundColor: getInputBackgroundColor(props),
@@ -400,9 +404,8 @@ const controlStyles = props => (base, state) => {
400
404
  if (props.isReadOnly) return 'default';
401
405
  return 'pointer';
402
406
  })(),
403
- padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
404
- transition: `border-color ${designSystem.designTokens.transitionStandard},
405
- box-shadow ${designSystem.designTokens.transitionStandard}`,
407
+ padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
408
+ transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
406
409
  outline: 0,
407
410
  boxShadow: 'none'
408
411
  }, props.horizontalConstraint === 'auto' ? {
@@ -427,13 +430,13 @@ const menuStyles = props => base => {
427
430
  position: 'inherit',
428
431
  zIndex: 'inherit'
429
432
  } : {}), {}, {
430
- border: `1px solid ${designSystem.designTokens.colorSurface}`,
433
+ border: "1px solid ".concat(designSystem.designTokens.colorSurface),
431
434
  borderRadius: designSystem.designTokens.borderRadiusForInput,
432
435
  backgroundColor: designSystem.designTokens.backgroundColorForInput,
433
436
  boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
434
437
  fontSize: designSystem.designTokens.fontSize30,
435
438
  fontFamily: 'inherit',
436
- margin: `${designSystem.designTokens.spacing10} 0 0 0`,
439
+ margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
437
440
  borderColor: (() => {
438
441
  if (props.hasError || props.hasWarning) {
439
442
  return designSystem.designTokens.colorSurface;
@@ -474,17 +477,16 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
474
477
  });
475
478
  const menuListStyles = () => base => {
476
479
  return _objectSpread(_objectSpread({}, base), {}, {
477
- padding: `${designSystem.designTokens.spacing10} 0`,
480
+ padding: "".concat(designSystem.designTokens.spacing10, " 0"),
478
481
  borderRadius: designSystem.designTokens.borderRadiusForInput,
479
482
  backgroundColor: designSystem.designTokens.backgroundColorForInput
480
483
  });
481
484
  };
482
485
  const optionStyles = props => (base, state) => {
486
+ var _context2, _context3, _context4;
483
487
  return _objectSpread(_objectSpread({}, base), {}, {
484
- transition: `border-color ${designSystem.designTokens.transitionStandard},
485
- background-color ${designSystem.designTokens.transitionStandard},
486
- color ${designSystem.designTokens.transitionStandard}`,
487
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
488
+ 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),
489
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
488
490
  lineHeight: designSystem.designTokens.lineHeight40,
489
491
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
490
492
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -527,13 +529,14 @@ const placeholderStyles = props => base => {
527
529
  });
528
530
  };
529
531
  const getInputValueLayout = props => {
532
+ var _props$controlShouldR;
530
533
  switch (true) {
531
534
  case props.appearance === 'filter':
532
535
  return 'grid';
533
536
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
534
537
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
535
538
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
536
- case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
539
+ case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true):
537
540
  return 'flex';
538
541
  default:
539
542
  return 'grid';
@@ -569,18 +572,19 @@ const groupStyles = props => base => {
569
572
  return _objectSpread(_objectSpread({}, base), {}, {
570
573
  padding: 0,
571
574
  '&:not(:first-of-type)': {
572
- borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
575
+ borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
573
576
  }
574
577
  });
575
578
  };
576
579
  const groupHeadingStyles = () => base => {
580
+ var _context5;
577
581
  return _objectSpread(_objectSpread({}, base), {}, {
578
582
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
579
583
  fontSize: designSystem.designTokens.fontSize20,
580
- borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
584
+ borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
581
585
  textTransform: 'none',
582
586
  fontWeight: designSystem.designTokens.fontWeight500,
583
- padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
587
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
584
588
  '&:empty': {
585
589
  padding: 0
586
590
  }
@@ -604,17 +608,19 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
604
608
  zIndex: props.menuPortalZIndex
605
609
  });
606
610
  const multiValueStyles = props => base => {
611
+ var _context6, _context7;
607
612
  return _objectSpread(_objectSpread({}, base), {}, {
608
613
  display: 'flex',
609
614
  alignItems: 'center',
610
615
  height: props.isCondensed ? 'inherit' : '32px',
611
616
  backgroundColor: getMultiValueBackgroundColor(props),
612
- padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
613
- border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
617
+ 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,
618
+ border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
614
619
  borderRadius: designSystem.designTokens.borderRadius20
615
620
  });
616
621
  };
617
622
  const multiValueLabelStyles = props => base => {
623
+ var _context8, _context9;
618
624
  return _objectSpread(_objectSpread({}, base), {}, {
619
625
  fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
620
626
  lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
@@ -623,8 +629,8 @@ const multiValueLabelStyles = props => base => {
623
629
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
624
630
  return base.color;
625
631
  })(),
626
- padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
627
- borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
632
+ padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
633
+ borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
628
634
  border: 'none',
629
635
  borderWidth: '1px 0 1px 1px',
630
636
  '&:last-child': {
@@ -634,10 +640,11 @@ const multiValueLabelStyles = props => base => {
634
640
  });
635
641
  };
636
642
  const multiValueRemoveStyles = props => (base, state) => {
643
+ var _context0;
637
644
  return _objectSpread(_objectSpread({}, base), {}, {
638
645
  borderColor: designSystem.designTokens.colorNeutral,
639
- padding: `0 ${designSystem.designTokens.spacing10}`,
640
- borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
646
+ padding: "0 ".concat(designSystem.designTokens.spacing10),
647
+ borderRadius: _concatInstanceProperty__default["default"](_context0 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context0, designSystem.designTokens.borderRadius2, " 0"),
641
648
  borderStyle: 'none',
642
649
  borderWidth: '0',
643
650
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -683,7 +690,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
683
690
  };
684
691
 
685
692
  // NOTE: This string will be replaced on build time with the package version.
686
- var version = "20.2.3";
693
+ var version = "20.3.0";
687
694
 
688
695
  exports.ClearIndicator = ClearIndicator$1;
689
696
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -8,6 +8,7 @@ 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';
11
12
  import { designTokens } from '@commercetools-uikit/design-system';
12
13
  import { warning } from '@commercetools-uikit/utils';
13
14
  import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
@@ -158,11 +159,11 @@ const MultiplePropertiesSelectInputOption = props => {
158
159
  scale: "xs",
159
160
  children: [jsx(Text.Detail, {
160
161
  fontWeight: "bold",
161
- children: data?.label || noValueFallback
162
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
162
163
  }), jsxs(Text.Detail, {
163
- children: ["Key: ", data?.key || noValueFallback]
164
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
164
165
  }), jsxs(Text.Detail, {
165
- children: ["ID: ", data?.id || noValueFallback]
166
+ children: ["ID: ", (data === null || data === void 0 ? void 0 : data.id) || noValueFallback]
166
167
  })]
167
168
  })
168
169
  }));
@@ -176,15 +177,16 @@ const DoublePropertySelectInputOption = props => {
176
177
  scale: "xs",
177
178
  children: [jsx(Text.Detail, {
178
179
  fontWeight: "bold",
179
- children: data?.label || noValueFallback
180
+ children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
180
181
  }), jsxs(Text.Detail, {
181
- children: ["Key: ", data?.key || noValueFallback]
182
+ children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
182
183
  })]
183
184
  })
184
185
  }));
185
186
  };
186
187
  DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
187
188
  const CustomSelectInputOption = props => {
189
+ var _props$optionInnerPro;
188
190
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
189
191
  switch (props.optionType) {
190
192
  case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
@@ -198,7 +200,7 @@ const CustomSelectInputOption = props => {
198
200
  default:
199
201
  return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
200
202
  children: jsx(Text.Detail, {
201
- children: props.optionInnerProps.data?.label || noValueFallback
203
+ children: ((_props$optionInnerPro = props.optionInnerProps.data) === null || _props$optionInnerPro === void 0 ? void 0 : _props$optionInnerPro.label) || noValueFallback
202
204
  })
203
205
  }));
204
206
  }
@@ -222,7 +224,7 @@ const optionStyleCheckboxComponents = appearance => {
222
224
  "data-component": "option",
223
225
  ref: innerRef
224
226
  }, innerProps), {}, {
225
- css: /*#__PURE__*/css("padding:", designTokens.spacing10, " ", designTokens.spacing20, ";", isFocused && `background-color: ${designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designTokens.fontSize20, ";span{font-size:", designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
227
+ css: /*#__PURE__*/css("padding:", designTokens.spacing10, " ", designTokens.spacing20, ";", isFocused && "background-color: ".concat(designTokens.backgroundColorForInputWhenHovered, ";"), " display:flex;justify-content:space-between;font-size:", designTokens.fontSize20, ";span{font-size:", designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
226
228
  className: className,
227
229
  "aria-disabled": isDisabled,
228
230
  children: [jsx(CheckboxInput, {
@@ -287,13 +289,13 @@ var messages = defineMessages({
287
289
  });
288
290
 
289
291
  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; }
290
- 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; }
292
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
291
293
  const getHorizontalConstraintValue = value => {
292
294
  switch (value) {
293
295
  case 'auto':
294
296
  return 'initial';
295
297
  default:
296
- return designTokens[`constraint${value}`] || designTokens.constraintScale;
298
+ return designTokens["constraint".concat(value)] || designTokens.constraintScale;
297
299
  }
298
300
  };
299
301
  const getInputBackgroundColor = props => {
@@ -363,6 +365,7 @@ const getHoverInputBackgroundColor = props => {
363
365
  return null;
364
366
  };
365
367
  const controlStyles = props => (base, state) => {
368
+ var _context;
366
369
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
367
370
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
368
371
  backgroundColor: getInputBackgroundColor(props),
@@ -380,9 +383,8 @@ const controlStyles = props => (base, state) => {
380
383
  if (props.isReadOnly) return 'default';
381
384
  return 'pointer';
382
385
  })(),
383
- padding: props.appearance === 'quiet' ? `0 ${designTokens.spacing20}` : `0 ${designTokens.spacing30}`,
384
- transition: `border-color ${designTokens.transitionStandard},
385
- box-shadow ${designTokens.transitionStandard}`,
386
+ padding: props.appearance === 'quiet' ? "0 ".concat(designTokens.spacing20) : "0 ".concat(designTokens.spacing30),
387
+ transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
386
388
  outline: 0,
387
389
  boxShadow: 'none'
388
390
  }, props.horizontalConstraint === 'auto' ? {
@@ -407,13 +409,13 @@ const menuStyles = props => base => {
407
409
  position: 'inherit',
408
410
  zIndex: 'inherit'
409
411
  } : {}), {}, {
410
- border: `1px solid ${designTokens.colorSurface}`,
412
+ border: "1px solid ".concat(designTokens.colorSurface),
411
413
  borderRadius: designTokens.borderRadiusForInput,
412
414
  backgroundColor: designTokens.backgroundColorForInput,
413
415
  boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
414
416
  fontSize: designTokens.fontSize30,
415
417
  fontFamily: 'inherit',
416
- margin: `${designTokens.spacing10} 0 0 0`,
418
+ margin: "".concat(designTokens.spacing10, " 0 0 0"),
417
419
  borderColor: (() => {
418
420
  if (props.hasError || props.hasWarning) {
419
421
  return designTokens.colorSurface;
@@ -454,17 +456,16 @@ const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base)
454
456
  });
455
457
  const menuListStyles = () => base => {
456
458
  return _objectSpread(_objectSpread({}, base), {}, {
457
- padding: `${designTokens.spacing10} 0`,
459
+ padding: "".concat(designTokens.spacing10, " 0"),
458
460
  borderRadius: designTokens.borderRadiusForInput,
459
461
  backgroundColor: designTokens.backgroundColorForInput
460
462
  });
461
463
  };
462
464
  const optionStyles = props => (base, state) => {
465
+ var _context2, _context3, _context4;
463
466
  return _objectSpread(_objectSpread({}, base), {}, {
464
- transition: `border-color ${designTokens.transitionStandard},
465
- background-color ${designTokens.transitionStandard},
466
- color ${designTokens.transitionStandard}`,
467
- padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
467
+ transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
468
+ padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing30),
468
469
  lineHeight: designTokens.lineHeight40,
469
470
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
470
471
  cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -507,13 +508,14 @@ const placeholderStyles = props => base => {
507
508
  });
508
509
  };
509
510
  const getInputValueLayout = props => {
511
+ var _props$controlShouldR;
510
512
  switch (true) {
511
513
  case props.appearance === 'filter':
512
514
  return 'grid';
513
515
  // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
514
516
  // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
515
517
  // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
516
- case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
518
+ case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true):
517
519
  return 'flex';
518
520
  default:
519
521
  return 'grid';
@@ -549,18 +551,19 @@ const groupStyles = props => base => {
549
551
  return _objectSpread(_objectSpread({}, base), {}, {
550
552
  padding: 0,
551
553
  '&:not(:first-of-type)': {
552
- borderTop: props.showOptionGroupDivider ? `1px solid ${designTokens.colorNeutral90}` : base.borderTop
554
+ borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.colorNeutral90) : base.borderTop
553
555
  }
554
556
  });
555
557
  };
556
558
  const groupHeadingStyles = () => base => {
559
+ var _context5;
557
560
  return _objectSpread(_objectSpread({}, base), {}, {
558
561
  color: designTokens.fontColorForInputWhenReadonly,
559
562
  fontSize: designTokens.fontSize20,
560
- borderBottom: `1px solid ${designTokens.colorNeutral90}`,
563
+ borderBottom: "1px solid ".concat(designTokens.colorNeutral90),
561
564
  textTransform: 'none',
562
565
  fontWeight: designTokens.fontWeight500,
563
- padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
566
+ padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.spacing30),
564
567
  '&:empty': {
565
568
  padding: 0
566
569
  }
@@ -584,17 +587,19 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
584
587
  zIndex: props.menuPortalZIndex
585
588
  });
586
589
  const multiValueStyles = props => base => {
590
+ var _context6, _context7;
587
591
  return _objectSpread(_objectSpread({}, base), {}, {
588
592
  display: 'flex',
589
593
  alignItems: 'center',
590
594
  height: props.isCondensed ? 'inherit' : '32px',
591
595
  backgroundColor: getMultiValueBackgroundColor(props),
592
- padding: props.isCondensed ? `0 ${designTokens.spacing20} 0 calc(${designTokens.spacing05} + ${designTokens.spacing10})` : designTokens.spacing20,
593
- border: `1px solid ${designTokens.colorNeutral85}`,
596
+ padding: props.isCondensed ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "0 ".concat(designTokens.spacing20, " 0 calc(")).call(_context7, designTokens.spacing05, " + ")).call(_context6, designTokens.spacing10, ")") : designTokens.spacing20,
597
+ border: "1px solid ".concat(designTokens.colorNeutral85),
594
598
  borderRadius: designTokens.borderRadius20
595
599
  });
596
600
  };
597
601
  const multiValueLabelStyles = props => base => {
602
+ var _context8, _context9;
598
603
  return _objectSpread(_objectSpread({}, base), {}, {
599
604
  fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
600
605
  lineHeight: props.isCondensed ? designTokens.lineHeight20 : designTokens.lineHeight40,
@@ -603,8 +608,8 @@ const multiValueLabelStyles = props => base => {
603
608
  if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
604
609
  return base.color;
605
610
  })(),
606
- padding: `${props.isCondensed ? '1px' : designTokens.spacing10} ${designTokens.spacing20}`,
607
- borderRadius: `${designTokens.borderRadius2} 0 0 ${designTokens.borderRadius2}`,
611
+ padding: _concatInstanceProperty(_context8 = "".concat(props.isCondensed ? '1px' : designTokens.spacing10, " ")).call(_context8, designTokens.spacing20),
612
+ borderRadius: _concatInstanceProperty(_context9 = "".concat(designTokens.borderRadius2, " 0 0 ")).call(_context9, designTokens.borderRadius2),
608
613
  border: 'none',
609
614
  borderWidth: '1px 0 1px 1px',
610
615
  '&:last-child': {
@@ -614,10 +619,11 @@ const multiValueLabelStyles = props => base => {
614
619
  });
615
620
  };
616
621
  const multiValueRemoveStyles = props => (base, state) => {
622
+ var _context0;
617
623
  return _objectSpread(_objectSpread({}, base), {}, {
618
624
  borderColor: designTokens.colorNeutral,
619
- padding: `0 ${designTokens.spacing10}`,
620
- borderRadius: `0 ${designTokens.borderRadius2} ${designTokens.borderRadius2} 0`,
625
+ padding: "0 ".concat(designTokens.spacing10),
626
+ borderRadius: _concatInstanceProperty(_context0 = "0 ".concat(designTokens.borderRadius2, " ")).call(_context0, designTokens.borderRadius2, " 0"),
621
627
  borderStyle: 'none',
622
628
  borderWidth: '0',
623
629
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -657,7 +663,7 @@ function createSelectStyles(props) {
657
663
  };
658
664
  }
659
665
 
660
- const getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
666
+ const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
661
667
  const warnIfMenuPortalPropsAreMissing = props => {
662
668
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
663
669
  ) {
@@ -666,6 +672,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
666
672
  };
667
673
 
668
674
  // NOTE: This string will be replaced on build time with the package version.
669
- var version = "20.2.3";
675
+ var version = "20.3.0";
670
676
 
671
677
  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, optionStyleCheckboxComponents, optionsStyleCheckboxSelectProps, 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": "20.2.3",
4
+ "version": "20.3.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,21 +21,21 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "20.2.3",
25
- "@commercetools-uikit/checkbox-input": "20.2.3",
26
- "@commercetools-uikit/design-system": "20.2.3",
27
- "@commercetools-uikit/icons": "20.2.3",
28
- "@commercetools-uikit/spacings": "20.2.3",
29
- "@commercetools-uikit/text": "20.2.3",
30
- "@commercetools-uikit/utils": "20.2.3",
24
+ "@commercetools-uikit/accessible-button": "20.3.0",
25
+ "@commercetools-uikit/checkbox-input": "20.3.0",
26
+ "@commercetools-uikit/design-system": "20.3.0",
27
+ "@commercetools-uikit/icons": "20.3.0",
28
+ "@commercetools-uikit/spacings": "20.3.0",
29
+ "@commercetools-uikit/text": "20.3.0",
30
+ "@commercetools-uikit/utils": "20.3.0",
31
31
  "@emotion/react": "^11.10.5",
32
32
  "@emotion/styled": "^11.10.5",
33
33
  "lodash": "4.17.21",
34
34
  "react-select": "5.10.2"
35
35
  },
36
36
  "devDependencies": {
37
- "react": "19.1.0",
38
- "react-dom": "19.1.0",
37
+ "react": "19.2.0",
38
+ "react-dom": "19.2.0",
39
39
  "react-intl": "^7.1.4"
40
40
  },
41
41
  "peerDependencies": {