@commercetools-uikit/select-utils 16.10.0 → 16.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 (15) hide show
  1. package/dist/commercetools-uikit-select-utils.cjs.dev.js +72 -34
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +72 -34
  3. package/dist/commercetools-uikit-select-utils.esm.js +72 -34
  4. package/dist/declarations/src/clear-indicator/index.d.ts +1 -1
  5. package/dist/declarations/src/create-select-styles.d.ts +7 -6
  6. package/dist/declarations/src/custom-styled-select-options/custom-styled-select-options.d.ts +1 -1
  7. package/dist/declarations/src/custom-styled-select-options/index.d.ts +2 -2
  8. package/dist/declarations/src/dropdown-indicator/index.d.ts +1 -1
  9. package/dist/declarations/src/export-types.d.ts +3 -3
  10. package/dist/declarations/src/index.d.ts +12 -12
  11. package/dist/declarations/src/search-icon-dropdown-indicator/index.d.ts +1 -1
  12. package/dist/declarations/src/tag-remove/index.d.ts +1 -1
  13. package/dist/declarations/src/wrapper-with-icon/index.d.ts +1 -1
  14. package/package.json +8 -8
  15. package/dist/declarations/src/clear-indicator/messages.d.ts +0 -8
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -254,8 +254,44 @@ var messages = reactIntl.defineMessages({
254
254
  });
255
255
 
256
256
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
257
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
258
- const getControlBorderColor = (props, defaultColor) => {
257
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
258
+ const getInputBackgroundColor = props => {
259
+ if (props.appearance === 'quiet') {
260
+ return designSystem.designTokens.backgroundColorForInputAsQuiet;
261
+ }
262
+ if (props.isDisabled) {
263
+ return designSystem.designTokens.backgroundColorForInputWhenDisabled;
264
+ }
265
+ if (props.isReadOnly) {
266
+ return designSystem.designTokens.backgroundColorForInputWhenReadonly;
267
+ }
268
+ return designSystem.designTokens.backgroundColorForInput;
269
+ };
270
+ const getInputBorderColor = (props, state) => {
271
+ if (props.appearance === 'quiet') {
272
+ return designSystem.designTokens.borderColorForInputAsQuiet;
273
+ }
274
+ if (props.isDisabled) {
275
+ return designSystem.designTokens.borderColorForInputWhenDisabled;
276
+ }
277
+ if (props.isReadOnly) {
278
+ return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
279
+ }
280
+ if (state.isFocused) {
281
+ return designSystem.designTokens.borderColorForInputWhenFocused;
282
+ }
283
+ if (props.hasError) {
284
+ return designSystem.designTokens.borderColorForInputWhenError;
285
+ }
286
+ if (props.hasWarning) {
287
+ return designSystem.designTokens.borderColorForInputWhenWarning;
288
+ }
289
+ return designSystem.designTokens.borderColorForInput;
290
+ };
291
+ const getHoverInputBorderColor = props => {
292
+ if (props.appearance === 'quiet') {
293
+ return designSystem.designTokens.borderColorForInputAsQuiet;
294
+ }
259
295
  if (props.isDisabled) {
260
296
  return designSystem.designTokens.borderColorForInputWhenDisabled;
261
297
  }
@@ -268,27 +304,18 @@ const getControlBorderColor = (props, defaultColor) => {
268
304
  if (props.hasWarning) {
269
305
  return designSystem.designTokens.borderColorForInputWhenWarning;
270
306
  }
271
- return defaultColor;
307
+ return designSystem.designTokens.borderColorForInputWhenHovered;
272
308
  };
273
309
  const controlStyles = props => (base, state) => {
274
310
  var _context;
275
311
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
276
312
  fontSize: designSystem.designTokens.fontSizeForInput,
277
- backgroundColor: (() => {
278
- if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
279
- if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
280
- return designSystem.designTokens.backgroundColorForInput;
281
- })(),
282
- borderColor: (() => {
283
- if (props.isDisabled) return designSystem.designTokens.borderColorForInputWhenDisabled;
284
- if (props.isReadOnly) return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
285
- if (state.isFocused) return designSystem.designTokens.borderColorForInputWhenFocused;
286
- if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
287
- if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
288
- return designSystem.designTokens.borderColorForInput;
289
- })(),
313
+ backgroundColor: getInputBackgroundColor(props),
314
+ borderColor: getInputBorderColor(props, state),
290
315
  borderWidth: (() => {
291
- if (props.hasWarning || props.hasError) return designSystem.designTokens.borderWidthForSelectInput;
316
+ if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
317
+ return designSystem.designTokens.borderWidthForSelectInput;
318
+ }
292
319
  return designSystem.designTokens.borderWidth1;
293
320
  })(),
294
321
  borderRadius: designSystem.designTokens.borderRadiusForInput,
@@ -306,19 +333,21 @@ const controlStyles = props => (base, state) => {
306
333
  display: 'inline-flex'
307
334
  } : {}), {}, {
308
335
  '&:focus-within': {
309
- boxShadow: (_context2 => {
310
- if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
311
- return null;
312
- })(),
313
336
  borderColor: (() => {
314
337
  if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
315
338
  return null;
316
339
  })()
317
340
  },
318
341
  '&:hover': {
319
- borderColor: getControlBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered),
342
+ borderColor: getHoverInputBorderColor(props),
320
343
  backgroundColor: (() => {
321
- if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenHovered;
344
+ if (!props.isDisabled && !props.isReadOnly) {
345
+ if (props.appearance === 'quiet') {
346
+ return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
347
+ } else {
348
+ return designSystem.designTokens.backgroundColorForInputWhenHovered;
349
+ }
350
+ }
322
351
  return null;
323
352
  })()
324
353
  },
@@ -340,7 +369,8 @@ const menuStyles = props => base => {
340
369
  if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
341
370
  return base.borderColorForInput;
342
371
  })(),
343
- width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
372
+ width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
373
+ minWidth: designSystem.designTokens.constraint3
344
374
  });
345
375
  };
346
376
  const indicatorSeparatorStyles = () => base => {
@@ -378,9 +408,9 @@ const menuListStyles = () => base => {
378
408
  });
379
409
  };
380
410
  const optionStyles = () => (base, state) => {
381
- var _context3, _context4;
411
+ var _context2, _context3;
382
412
  return _objectSpread(_objectSpread({}, base), {}, {
383
- transition: _concatInstanceProperty__default["default"](_context3 = _concatInstanceProperty__default["default"](_context4 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context4, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context3, designSystem.designTokens.transitionStandard),
413
+ 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),
384
414
  paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
385
415
  paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
386
416
  paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
@@ -408,6 +438,14 @@ const optionStyles = () => (base, state) => {
408
438
  const placeholderStyles = props => base => {
409
439
  return _objectSpread(_objectSpread({}, base), {}, {
410
440
  color: (() => {
441
+ if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
442
+ if (props.hasError) {
443
+ return designSystem.designTokens.fontColorForSelectInputWhenError;
444
+ }
445
+ if (props.hasWarning) {
446
+ return designSystem.designTokens.fontColorForSelectInputWhenWarning;
447
+ }
448
+ }
411
449
  return designSystem.designTokens.placeholderFontColorForInput;
412
450
  })(),
413
451
  width: '100%',
@@ -454,13 +492,13 @@ const groupStyles = props => base => {
454
492
  });
455
493
  };
456
494
  const groupHeadingStyles = () => base => {
457
- var _context5;
495
+ var _context4;
458
496
  return _objectSpread(_objectSpread({}, base), {}, {
459
497
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
460
498
  fontSize: designSystem.designTokens.fontSizeSmall,
461
499
  textTransform: 'none',
462
500
  fontWeight: 'bold',
463
- padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
501
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
464
502
  '&:empty': {
465
503
  padding: 0
466
504
  }
@@ -494,7 +532,7 @@ const multiValueStyles = () => base => {
494
532
  });
495
533
  };
496
534
  const multiValueLabelStyles = props => base => {
497
- var _context6, _context7;
535
+ var _context5, _context6;
498
536
  return _objectSpread(_objectSpread({}, base), {}, {
499
537
  fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
500
538
  color: (() => {
@@ -502,8 +540,8 @@ const multiValueLabelStyles = props => base => {
502
540
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
503
541
  return base.color;
504
542
  })(),
505
- padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
506
- borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
543
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context5, designSystem.designTokens.spacing20),
544
+ borderRadius: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designSystem.designTokens.borderRadiusForTag),
507
545
  border: 'none',
508
546
  borderWidth: '1px 0 1px 1px',
509
547
  '&:last-child': {
@@ -513,11 +551,11 @@ const multiValueLabelStyles = props => base => {
513
551
  });
514
552
  };
515
553
  const multiValueRemoveStyles = props => (base, state) => {
516
- var _context8;
554
+ var _context7;
517
555
  return _objectSpread(_objectSpread({}, base), {}, {
518
556
  borderColor: designSystem.designTokens.borderColorForTag,
519
557
  padding: "0 ".concat(designSystem.designTokens.spacing10),
520
- borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
558
+ borderRadius: _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context7, designSystem.designTokens.borderRadiusForTag, " 0"),
521
559
  borderStyle: 'none',
522
560
  borderWidth: '0',
523
561
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -566,7 +604,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
566
604
  };
567
605
 
568
606
  // NOTE: This string will be replaced on build time with the package version.
569
- var version = "16.10.0";
607
+ var version = "16.12.0";
570
608
 
571
609
  exports.ClearIndicator = ClearIndicator$1;
572
610
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -254,8 +254,44 @@ var messages = reactIntl.defineMessages({
254
254
  });
255
255
 
256
256
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
257
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
258
- const getControlBorderColor = (props, defaultColor) => {
257
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
258
+ const getInputBackgroundColor = props => {
259
+ if (props.appearance === 'quiet') {
260
+ return designSystem.designTokens.backgroundColorForInputAsQuiet;
261
+ }
262
+ if (props.isDisabled) {
263
+ return designSystem.designTokens.backgroundColorForInputWhenDisabled;
264
+ }
265
+ if (props.isReadOnly) {
266
+ return designSystem.designTokens.backgroundColorForInputWhenReadonly;
267
+ }
268
+ return designSystem.designTokens.backgroundColorForInput;
269
+ };
270
+ const getInputBorderColor = (props, state) => {
271
+ if (props.appearance === 'quiet') {
272
+ return designSystem.designTokens.borderColorForInputAsQuiet;
273
+ }
274
+ if (props.isDisabled) {
275
+ return designSystem.designTokens.borderColorForInputWhenDisabled;
276
+ }
277
+ if (props.isReadOnly) {
278
+ return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
279
+ }
280
+ if (state.isFocused) {
281
+ return designSystem.designTokens.borderColorForInputWhenFocused;
282
+ }
283
+ if (props.hasError) {
284
+ return designSystem.designTokens.borderColorForInputWhenError;
285
+ }
286
+ if (props.hasWarning) {
287
+ return designSystem.designTokens.borderColorForInputWhenWarning;
288
+ }
289
+ return designSystem.designTokens.borderColorForInput;
290
+ };
291
+ const getHoverInputBorderColor = props => {
292
+ if (props.appearance === 'quiet') {
293
+ return designSystem.designTokens.borderColorForInputAsQuiet;
294
+ }
259
295
  if (props.isDisabled) {
260
296
  return designSystem.designTokens.borderColorForInputWhenDisabled;
261
297
  }
@@ -268,27 +304,18 @@ const getControlBorderColor = (props, defaultColor) => {
268
304
  if (props.hasWarning) {
269
305
  return designSystem.designTokens.borderColorForInputWhenWarning;
270
306
  }
271
- return defaultColor;
307
+ return designSystem.designTokens.borderColorForInputWhenHovered;
272
308
  };
273
309
  const controlStyles = props => (base, state) => {
274
310
  var _context;
275
311
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
276
312
  fontSize: designSystem.designTokens.fontSizeForInput,
277
- backgroundColor: (() => {
278
- if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
279
- if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
280
- return designSystem.designTokens.backgroundColorForInput;
281
- })(),
282
- borderColor: (() => {
283
- if (props.isDisabled) return designSystem.designTokens.borderColorForInputWhenDisabled;
284
- if (props.isReadOnly) return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
285
- if (state.isFocused) return designSystem.designTokens.borderColorForInputWhenFocused;
286
- if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
287
- if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
288
- return designSystem.designTokens.borderColorForInput;
289
- })(),
313
+ backgroundColor: getInputBackgroundColor(props),
314
+ borderColor: getInputBorderColor(props, state),
290
315
  borderWidth: (() => {
291
- if (props.hasWarning || props.hasError) return designSystem.designTokens.borderWidthForSelectInput;
316
+ if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
317
+ return designSystem.designTokens.borderWidthForSelectInput;
318
+ }
292
319
  return designSystem.designTokens.borderWidth1;
293
320
  })(),
294
321
  borderRadius: designSystem.designTokens.borderRadiusForInput,
@@ -306,19 +333,21 @@ const controlStyles = props => (base, state) => {
306
333
  display: 'inline-flex'
307
334
  } : {}), {}, {
308
335
  '&:focus-within': {
309
- boxShadow: (_context2 => {
310
- if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
311
- return null;
312
- })(),
313
336
  borderColor: (() => {
314
337
  if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
315
338
  return null;
316
339
  })()
317
340
  },
318
341
  '&:hover': {
319
- borderColor: getControlBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered),
342
+ borderColor: getHoverInputBorderColor(props),
320
343
  backgroundColor: (() => {
321
- if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenHovered;
344
+ if (!props.isDisabled && !props.isReadOnly) {
345
+ if (props.appearance === 'quiet') {
346
+ return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
347
+ } else {
348
+ return designSystem.designTokens.backgroundColorForInputWhenHovered;
349
+ }
350
+ }
322
351
  return null;
323
352
  })()
324
353
  },
@@ -340,7 +369,8 @@ const menuStyles = props => base => {
340
369
  if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
341
370
  return base.borderColorForInput;
342
371
  })(),
343
- width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
372
+ width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
373
+ minWidth: designSystem.designTokens.constraint3
344
374
  });
345
375
  };
346
376
  const indicatorSeparatorStyles = () => base => {
@@ -378,9 +408,9 @@ const menuListStyles = () => base => {
378
408
  });
379
409
  };
380
410
  const optionStyles = () => (base, state) => {
381
- var _context3, _context4;
411
+ var _context2, _context3;
382
412
  return _objectSpread(_objectSpread({}, base), {}, {
383
- transition: _concatInstanceProperty__default["default"](_context3 = _concatInstanceProperty__default["default"](_context4 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context4, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context3, designSystem.designTokens.transitionStandard),
413
+ 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),
384
414
  paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
385
415
  paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
386
416
  paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
@@ -408,6 +438,14 @@ const optionStyles = () => (base, state) => {
408
438
  const placeholderStyles = props => base => {
409
439
  return _objectSpread(_objectSpread({}, base), {}, {
410
440
  color: (() => {
441
+ if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
442
+ if (props.hasError) {
443
+ return designSystem.designTokens.fontColorForSelectInputWhenError;
444
+ }
445
+ if (props.hasWarning) {
446
+ return designSystem.designTokens.fontColorForSelectInputWhenWarning;
447
+ }
448
+ }
411
449
  return designSystem.designTokens.placeholderFontColorForInput;
412
450
  })(),
413
451
  width: '100%',
@@ -454,13 +492,13 @@ const groupStyles = props => base => {
454
492
  });
455
493
  };
456
494
  const groupHeadingStyles = () => base => {
457
- var _context5;
495
+ var _context4;
458
496
  return _objectSpread(_objectSpread({}, base), {}, {
459
497
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
460
498
  fontSize: designSystem.designTokens.fontSizeSmall,
461
499
  textTransform: 'none',
462
500
  fontWeight: 'bold',
463
- padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
501
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
464
502
  '&:empty': {
465
503
  padding: 0
466
504
  }
@@ -494,7 +532,7 @@ const multiValueStyles = () => base => {
494
532
  });
495
533
  };
496
534
  const multiValueLabelStyles = props => base => {
497
- var _context6, _context7;
535
+ var _context5, _context6;
498
536
  return _objectSpread(_objectSpread({}, base), {}, {
499
537
  fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
500
538
  color: (() => {
@@ -502,8 +540,8 @@ const multiValueLabelStyles = props => base => {
502
540
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
503
541
  return base.color;
504
542
  })(),
505
- padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
506
- borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
543
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context5, designSystem.designTokens.spacing20),
544
+ borderRadius: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designSystem.designTokens.borderRadiusForTag),
507
545
  border: 'none',
508
546
  borderWidth: '1px 0 1px 1px',
509
547
  '&:last-child': {
@@ -513,11 +551,11 @@ const multiValueLabelStyles = props => base => {
513
551
  });
514
552
  };
515
553
  const multiValueRemoveStyles = props => (base, state) => {
516
- var _context8;
554
+ var _context7;
517
555
  return _objectSpread(_objectSpread({}, base), {}, {
518
556
  borderColor: designSystem.designTokens.borderColorForTag,
519
557
  padding: "0 ".concat(designSystem.designTokens.spacing10),
520
- borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
558
+ borderRadius: _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context7, designSystem.designTokens.borderRadiusForTag, " 0"),
521
559
  borderStyle: 'none',
522
560
  borderWidth: '0',
523
561
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -563,7 +601,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
563
601
  };
564
602
 
565
603
  // NOTE: This string will be replaced on build time with the package version.
566
- var version = "16.10.0";
604
+ var version = "16.12.0";
567
605
 
568
606
  exports.ClearIndicator = ClearIndicator$1;
569
607
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -234,8 +234,44 @@ var messages = defineMessages({
234
234
  });
235
235
 
236
236
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
237
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
238
- const getControlBorderColor = (props, defaultColor) => {
237
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
238
+ const getInputBackgroundColor = props => {
239
+ if (props.appearance === 'quiet') {
240
+ return designTokens.backgroundColorForInputAsQuiet;
241
+ }
242
+ if (props.isDisabled) {
243
+ return designTokens.backgroundColorForInputWhenDisabled;
244
+ }
245
+ if (props.isReadOnly) {
246
+ return designTokens.backgroundColorForInputWhenReadonly;
247
+ }
248
+ return designTokens.backgroundColorForInput;
249
+ };
250
+ const getInputBorderColor = (props, state) => {
251
+ if (props.appearance === 'quiet') {
252
+ return designTokens.borderColorForInputAsQuiet;
253
+ }
254
+ if (props.isDisabled) {
255
+ return designTokens.borderColorForInputWhenDisabled;
256
+ }
257
+ if (props.isReadOnly) {
258
+ return designTokens.borderColorForSelectInputWhenReadonly;
259
+ }
260
+ if (state.isFocused) {
261
+ return designTokens.borderColorForInputWhenFocused;
262
+ }
263
+ if (props.hasError) {
264
+ return designTokens.borderColorForInputWhenError;
265
+ }
266
+ if (props.hasWarning) {
267
+ return designTokens.borderColorForInputWhenWarning;
268
+ }
269
+ return designTokens.borderColorForInput;
270
+ };
271
+ const getHoverInputBorderColor = props => {
272
+ if (props.appearance === 'quiet') {
273
+ return designTokens.borderColorForInputAsQuiet;
274
+ }
239
275
  if (props.isDisabled) {
240
276
  return designTokens.borderColorForInputWhenDisabled;
241
277
  }
@@ -248,27 +284,18 @@ const getControlBorderColor = (props, defaultColor) => {
248
284
  if (props.hasWarning) {
249
285
  return designTokens.borderColorForInputWhenWarning;
250
286
  }
251
- return defaultColor;
287
+ return designTokens.borderColorForInputWhenHovered;
252
288
  };
253
289
  const controlStyles = props => (base, state) => {
254
290
  var _context;
255
291
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
256
292
  fontSize: designTokens.fontSizeForInput,
257
- backgroundColor: (() => {
258
- if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
259
- if (props.isReadOnly) return designTokens.backgroundColorForInputWhenReadonly;
260
- return designTokens.backgroundColorForInput;
261
- })(),
262
- borderColor: (() => {
263
- if (props.isDisabled) return designTokens.borderColorForInputWhenDisabled;
264
- if (props.isReadOnly) return designTokens.borderColorForSelectInputWhenReadonly;
265
- if (state.isFocused) return designTokens.borderColorForInputWhenFocused;
266
- if (props.hasError) return designTokens.borderColorForInputWhenError;
267
- if (props.hasWarning) return designTokens.borderColorForInputWhenWarning;
268
- return designTokens.borderColorForInput;
269
- })(),
293
+ backgroundColor: getInputBackgroundColor(props),
294
+ borderColor: getInputBorderColor(props, state),
270
295
  borderWidth: (() => {
271
- if (props.hasWarning || props.hasError) return designTokens.borderWidthForSelectInput;
296
+ if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
297
+ return designTokens.borderWidthForSelectInput;
298
+ }
272
299
  return designTokens.borderWidth1;
273
300
  })(),
274
301
  borderRadius: designTokens.borderRadiusForInput,
@@ -286,19 +313,21 @@ const controlStyles = props => (base, state) => {
286
313
  display: 'inline-flex'
287
314
  } : {}), {}, {
288
315
  '&:focus-within': {
289
- boxShadow: (_context2 => {
290
- if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty(_context2 = "".concat(designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designTokens.borderColorForInputWhenFocused);
291
- return null;
292
- })(),
293
316
  borderColor: (() => {
294
317
  if (!props.isDisabled && !props.isReadOnly) return designTokens.borderColorForInputWhenFocused;
295
318
  return null;
296
319
  })()
297
320
  },
298
321
  '&:hover': {
299
- borderColor: getControlBorderColor(props, designTokens.borderColorForInputWhenHovered),
322
+ borderColor: getHoverInputBorderColor(props),
300
323
  backgroundColor: (() => {
301
- if (!props.isDisabled && !props.isReadOnly) return designTokens.backgroundColorForInputWhenHovered;
324
+ if (!props.isDisabled && !props.isReadOnly) {
325
+ if (props.appearance === 'quiet') {
326
+ return designTokens.backgroundColorForInputAsQuietWhenHovered;
327
+ } else {
328
+ return designTokens.backgroundColorForInputWhenHovered;
329
+ }
330
+ }
302
331
  return null;
303
332
  })()
304
333
  },
@@ -320,7 +349,8 @@ const menuStyles = props => base => {
320
349
  if (props.hasWarning) return designTokens.borderColorForSelectInputMenuWhenWarning;
321
350
  return base.borderColorForInput;
322
351
  })(),
323
- width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
352
+ width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
353
+ minWidth: designTokens.constraint3
324
354
  });
325
355
  };
326
356
  const indicatorSeparatorStyles = () => base => {
@@ -358,9 +388,9 @@ const menuListStyles = () => base => {
358
388
  });
359
389
  };
360
390
  const optionStyles = () => (base, state) => {
361
- var _context3, _context4;
391
+ var _context2, _context3;
362
392
  return _objectSpread(_objectSpread({}, base), {}, {
363
- transition: _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context4, designTokens.transitionStandard, ",\n color ")).call(_context3, designTokens.transitionStandard),
393
+ transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
364
394
  paddingLeft: designTokens.paddingLeftForSelectInputOptions,
365
395
  paddingRight: designTokens.paddingRightForSelectInputOptions,
366
396
  paddingTop: designTokens.paddingTopForSelectInputOptions,
@@ -388,6 +418,14 @@ const optionStyles = () => (base, state) => {
388
418
  const placeholderStyles = props => base => {
389
419
  return _objectSpread(_objectSpread({}, base), {}, {
390
420
  color: (() => {
421
+ if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
422
+ if (props.hasError) {
423
+ return designTokens.fontColorForSelectInputWhenError;
424
+ }
425
+ if (props.hasWarning) {
426
+ return designTokens.fontColorForSelectInputWhenWarning;
427
+ }
428
+ }
391
429
  return designTokens.placeholderFontColorForInput;
392
430
  })(),
393
431
  width: '100%',
@@ -434,13 +472,13 @@ const groupStyles = props => base => {
434
472
  });
435
473
  };
436
474
  const groupHeadingStyles = () => base => {
437
- var _context5;
475
+ var _context4;
438
476
  return _objectSpread(_objectSpread({}, base), {}, {
439
477
  color: designTokens.fontColorForInputWhenReadonly,
440
478
  fontSize: designTokens.fontSizeSmall,
441
479
  textTransform: 'none',
442
480
  fontWeight: 'bold',
443
- padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.paddingForGroupHeadingSelectInputOptions),
481
+ padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.paddingForGroupHeadingSelectInputOptions),
444
482
  '&:empty': {
445
483
  padding: 0
446
484
  }
@@ -474,7 +512,7 @@ const multiValueStyles = () => base => {
474
512
  });
475
513
  };
476
514
  const multiValueLabelStyles = props => base => {
477
- var _context6, _context7;
515
+ var _context5, _context6;
478
516
  return _objectSpread(_objectSpread({}, base), {}, {
479
517
  fontSize: designTokens.fontSizeForSelectInputTag,
480
518
  color: (() => {
@@ -482,8 +520,8 @@ const multiValueLabelStyles = props => base => {
482
520
  if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
483
521
  return base.color;
484
522
  })(),
485
- padding: _concatInstanceProperty(_context6 = "".concat(designTokens.spacing10, " ")).call(_context6, designTokens.spacing20),
486
- borderRadius: _concatInstanceProperty(_context7 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designTokens.borderRadiusForTag),
523
+ padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing10, " ")).call(_context5, designTokens.spacing20),
524
+ borderRadius: _concatInstanceProperty(_context6 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designTokens.borderRadiusForTag),
487
525
  border: 'none',
488
526
  borderWidth: '1px 0 1px 1px',
489
527
  '&:last-child': {
@@ -493,11 +531,11 @@ const multiValueLabelStyles = props => base => {
493
531
  });
494
532
  };
495
533
  const multiValueRemoveStyles = props => (base, state) => {
496
- var _context8;
534
+ var _context7;
497
535
  return _objectSpread(_objectSpread({}, base), {}, {
498
536
  borderColor: designTokens.borderColorForTag,
499
537
  padding: "0 ".concat(designTokens.spacing10),
500
- borderRadius: _concatInstanceProperty(_context8 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context8, designTokens.borderRadiusForTag, " 0"),
538
+ borderRadius: _concatInstanceProperty(_context7 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context7, designTokens.borderRadiusForTag, " 0"),
501
539
  borderStyle: 'none',
502
540
  borderWidth: '0',
503
541
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -546,6 +584,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
546
584
  };
547
585
 
548
586
  // NOTE: This string will be replaced on build time with the package version.
549
- var version = "16.10.0";
587
+ var version = "16.12.0";
550
588
 
551
589
  export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };
package/dist/declarations/src/clear-indicator/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default } from './clear-indicator';
1
+ export { default } from "./clear-indicator.js";
package/dist/declarations/src/create-select-styles.d.ts CHANGED
@@ -10,6 +10,7 @@ type TProps = {
10
10
  isMulti?: boolean;
11
11
  hasValue?: boolean;
12
12
  controlShouldRenderValue?: boolean;
13
+ appearance?: 'default' | 'quiet';
13
14
  horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
14
15
  };
15
16
  type TBase = {
@@ -30,19 +31,18 @@ type TState = {
30
31
  export default function createSelectStyles(props: TProps): {
31
32
  control: (base: TBase, state: TState) => {
32
33
  '&:focus-within': {
33
- boxShadow: string | null;
34
34
  borderColor: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | null;
35
35
  };
36
36
  '&:hover': {
37
- borderColor: string;
38
- backgroundColor: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | null;
37
+ borderColor: "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-input-as-quiet, transparent)" | "var(--border-color-for-select-input-when-readonly, hsl(232, 18%, 95%))";
38
+ backgroundColor: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))" | null;
39
39
  };
40
40
  pointerEvents: string;
41
41
  color: string | undefined;
42
42
  display?: string | undefined;
43
43
  fontSize: "var(--font-size-for-input, 1rem)";
44
- backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
45
- borderColor: "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-select-input-when-readonly, hsl(232, 18%, 95%))";
44
+ backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-as-quiet, transparent)";
45
+ borderColor: "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-as-quiet, transparent)" | "var(--border-color-for-select-input-when-readonly, hsl(232, 18%, 95%))";
46
46
  borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 2px)";
47
47
  borderRadius: "var(--border-radius-for-input, 4px)";
48
48
  minHeight: "var(--height-for-input, 40px)";
@@ -65,6 +65,7 @@ export default function createSelectStyles(props: TProps): {
65
65
  margin: string;
66
66
  borderColor: string | undefined;
67
67
  width: string;
68
+ minWidth: "var(--constraint-3, 142px)";
68
69
  fontColorForInput?: string | undefined;
69
70
  borderColorForInput?: string | undefined;
70
71
  color?: string | undefined;
@@ -219,7 +220,7 @@ export default function createSelectStyles(props: TProps): {
219
220
  pointerEvents?: string | undefined;
220
221
  };
221
222
  placeholder: (base: TBase) => {
222
- color: "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))";
223
+ color: "var(--font-color-for-select-input-when-error, #e60050)" | "var(--font-color-for-select-input-when-warning, #f16d0e)" | "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))";
223
224
  width: string;
224
225
  overflow: string;
225
226
  whiteSpace: string;
package/dist/declarations/src/custom-styled-select-options/custom-styled-select-options.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { OptionProps } from 'react-select';
2
- import { SELECT_DROPDOWN_OPTION_TYPES } from './constants';
2
+ import { SELECT_DROPDOWN_OPTION_TYPES } from "./constants.js";
3
3
  export type TData = {
4
4
  label?: string;
5
5
  key?: string;
package/dist/declarations/src/custom-styled-select-options/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { SELECT_DROPDOWN_OPTION_TYPES } from './constants';
2
- export * from './custom-styled-select-options';
1
+ export { SELECT_DROPDOWN_OPTION_TYPES } from "./constants.js";
2
+ export * from "./custom-styled-select-options.js";
package/dist/declarations/src/dropdown-indicator/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default } from './dropdown-indicator';
1
+ export { default } from "./dropdown-indicator.js";
package/dist/declarations/src/export-types.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export type { TClearIndicatorProps } from './clear-indicator/clear-indicator';
2
- export type { TTagRemoveSelectProps, TTagRemoveProps, } from './tag-remove/tag-remove';
3
- export type { TWrapperWithIconProps, TWrapperWithIconSelectProps, TDefaultComponent, } from './wrapper-with-icon/wrapper-with-icon';
1
+ export type { TClearIndicatorProps } from "./clear-indicator/clear-indicator.js";
2
+ export type { TTagRemoveSelectProps, TTagRemoveProps, } from "./tag-remove/tag-remove.js";
3
+ export type { TWrapperWithIconProps, TWrapperWithIconSelectProps, TDefaultComponent, } from "./wrapper-with-icon/wrapper-with-icon.js";
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- export { default as ClearIndicator } from './clear-indicator';
2
- export { default as TagRemove } from './tag-remove';
3
- export { default as DropdownIndicator } from './dropdown-indicator';
4
- export { default as SearchIconDropdownIndicator } from './search-icon-dropdown-indicator';
5
- export { default as ValueWrapperWithIcon } from './wrapper-with-icon';
6
- export { customComponents as customComponentsWithIcons } from './wrapper-with-icon';
7
- export * from './custom-styled-select-options';
8
- export * from './export-types';
9
- export { default as messages } from './messages';
10
- export { default as createSelectStyles } from './create-select-styles';
11
- export { warnIfMenuPortalPropsAreMissing } from './warning';
12
- export { default as version } from './version';
1
+ export { default as ClearIndicator } from "./clear-indicator/index.js";
2
+ export { default as TagRemove } from "./tag-remove/index.js";
3
+ export { default as DropdownIndicator } from "./dropdown-indicator/index.js";
4
+ export { default as SearchIconDropdownIndicator } from "./search-icon-dropdown-indicator/index.js";
5
+ export { default as ValueWrapperWithIcon } from "./wrapper-with-icon/index.js";
6
+ export { customComponents as customComponentsWithIcons } from "./wrapper-with-icon/index.js";
7
+ export * from "./custom-styled-select-options/index.js";
8
+ export * from "./export-types.js";
9
+ export { default as messages } from "./messages.js";
10
+ export { default as createSelectStyles } from "./create-select-styles.js";
11
+ export { warnIfMenuPortalPropsAreMissing } from "./warning.js";
12
+ export { default as version } from "./version.js";
package/dist/declarations/src/search-icon-dropdown-indicator/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default } from './search-icon-dropdown-indicator';
1
+ export { default } from "./search-icon-dropdown-indicator.js";
package/dist/declarations/src/tag-remove/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default } from './tag-remove';
1
+ export { default } from "./tag-remove.js";
package/dist/declarations/src/wrapper-with-icon/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default, customComponents } from './wrapper-with-icon';
1
+ export { default, customComponents } from "./wrapper-with-icon.js";
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": "16.10.0",
4
+ "version": "16.12.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,17 +21,17 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "16.10.0",
25
- "@commercetools-uikit/design-system": "16.10.0",
26
- "@commercetools-uikit/icons": "16.10.0",
27
- "@commercetools-uikit/spacings": "16.10.0",
28
- "@commercetools-uikit/text": "16.10.0",
29
- "@commercetools-uikit/utils": "16.10.0",
24
+ "@commercetools-uikit/accessible-button": "16.12.0",
25
+ "@commercetools-uikit/design-system": "16.12.0",
26
+ "@commercetools-uikit/icons": "16.12.0",
27
+ "@commercetools-uikit/spacings": "16.12.0",
28
+ "@commercetools-uikit/text": "16.12.0",
29
+ "@commercetools-uikit/utils": "16.12.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",
33
33
  "prop-types": "15.8.1",
34
- "react-select": "5.7.3"
34
+ "react-select": "5.8.0"
35
35
  },
36
36
  "devDependencies": {
37
37
  "react": "17.0.2",
package/dist/declarations/src/clear-indicator/messages.d.ts DELETED
@@ -1,8 +0,0 @@
1
- declare const _default: {
2
- clearButtonLabel: {
3
- id: string;
4
- description: string;
5
- defaultMessage: string;
6
- };
7
- };
8
- export default _default;