@commercetools-uikit/select-utils 16.10.0 → 16.11.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 (5) hide show
  1. package/dist/commercetools-uikit-select-utils.cjs.dev.js +70 -33
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +70 -33
  3. package/dist/commercetools-uikit-select-utils.esm.js +70 -33
  4. package/dist/declarations/src/create-select-styles.d.ts +6 -6
  5. package/package.json +7 -7
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
  },
@@ -378,9 +407,9 @@ const menuListStyles = () => base => {
378
407
  });
379
408
  };
380
409
  const optionStyles = () => (base, state) => {
381
- var _context3, _context4;
410
+ var _context2, _context3;
382
411
  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),
412
+ 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
413
  paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
385
414
  paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
386
415
  paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
@@ -408,6 +437,14 @@ const optionStyles = () => (base, state) => {
408
437
  const placeholderStyles = props => base => {
409
438
  return _objectSpread(_objectSpread({}, base), {}, {
410
439
  color: (() => {
440
+ if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
441
+ if (props.hasError) {
442
+ return designSystem.designTokens.fontColorForSelectInputWhenError;
443
+ }
444
+ if (props.hasWarning) {
445
+ return designSystem.designTokens.fontColorForSelectInputWhenWarning;
446
+ }
447
+ }
411
448
  return designSystem.designTokens.placeholderFontColorForInput;
412
449
  })(),
413
450
  width: '100%',
@@ -454,13 +491,13 @@ const groupStyles = props => base => {
454
491
  });
455
492
  };
456
493
  const groupHeadingStyles = () => base => {
457
- var _context5;
494
+ var _context4;
458
495
  return _objectSpread(_objectSpread({}, base), {}, {
459
496
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
460
497
  fontSize: designSystem.designTokens.fontSizeSmall,
461
498
  textTransform: 'none',
462
499
  fontWeight: 'bold',
463
- padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
500
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
464
501
  '&:empty': {
465
502
  padding: 0
466
503
  }
@@ -494,7 +531,7 @@ const multiValueStyles = () => base => {
494
531
  });
495
532
  };
496
533
  const multiValueLabelStyles = props => base => {
497
- var _context6, _context7;
534
+ var _context5, _context6;
498
535
  return _objectSpread(_objectSpread({}, base), {}, {
499
536
  fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
500
537
  color: (() => {
@@ -502,8 +539,8 @@ const multiValueLabelStyles = props => base => {
502
539
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
503
540
  return base.color;
504
541
  })(),
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),
542
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context5, designSystem.designTokens.spacing20),
543
+ borderRadius: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designSystem.designTokens.borderRadiusForTag),
507
544
  border: 'none',
508
545
  borderWidth: '1px 0 1px 1px',
509
546
  '&:last-child': {
@@ -513,11 +550,11 @@ const multiValueLabelStyles = props => base => {
513
550
  });
514
551
  };
515
552
  const multiValueRemoveStyles = props => (base, state) => {
516
- var _context8;
553
+ var _context7;
517
554
  return _objectSpread(_objectSpread({}, base), {}, {
518
555
  borderColor: designSystem.designTokens.borderColorForTag,
519
556
  padding: "0 ".concat(designSystem.designTokens.spacing10),
520
- borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
557
+ borderRadius: _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context7, designSystem.designTokens.borderRadiusForTag, " 0"),
521
558
  borderStyle: 'none',
522
559
  borderWidth: '0',
523
560
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -566,7 +603,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
566
603
  };
567
604
 
568
605
  // NOTE: This string will be replaced on build time with the package version.
569
- var version = "16.10.0";
606
+ var version = "16.11.0";
570
607
 
571
608
  exports.ClearIndicator = ClearIndicator$1;
572
609
  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
  },
@@ -378,9 +407,9 @@ const menuListStyles = () => base => {
378
407
  });
379
408
  };
380
409
  const optionStyles = () => (base, state) => {
381
- var _context3, _context4;
410
+ var _context2, _context3;
382
411
  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),
412
+ 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
413
  paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
385
414
  paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
386
415
  paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
@@ -408,6 +437,14 @@ const optionStyles = () => (base, state) => {
408
437
  const placeholderStyles = props => base => {
409
438
  return _objectSpread(_objectSpread({}, base), {}, {
410
439
  color: (() => {
440
+ if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
441
+ if (props.hasError) {
442
+ return designSystem.designTokens.fontColorForSelectInputWhenError;
443
+ }
444
+ if (props.hasWarning) {
445
+ return designSystem.designTokens.fontColorForSelectInputWhenWarning;
446
+ }
447
+ }
411
448
  return designSystem.designTokens.placeholderFontColorForInput;
412
449
  })(),
413
450
  width: '100%',
@@ -454,13 +491,13 @@ const groupStyles = props => base => {
454
491
  });
455
492
  };
456
493
  const groupHeadingStyles = () => base => {
457
- var _context5;
494
+ var _context4;
458
495
  return _objectSpread(_objectSpread({}, base), {}, {
459
496
  color: designSystem.designTokens.fontColorForInputWhenReadonly,
460
497
  fontSize: designSystem.designTokens.fontSizeSmall,
461
498
  textTransform: 'none',
462
499
  fontWeight: 'bold',
463
- padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
500
+ padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
464
501
  '&:empty': {
465
502
  padding: 0
466
503
  }
@@ -494,7 +531,7 @@ const multiValueStyles = () => base => {
494
531
  });
495
532
  };
496
533
  const multiValueLabelStyles = props => base => {
497
- var _context6, _context7;
534
+ var _context5, _context6;
498
535
  return _objectSpread(_objectSpread({}, base), {}, {
499
536
  fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
500
537
  color: (() => {
@@ -502,8 +539,8 @@ const multiValueLabelStyles = props => base => {
502
539
  if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
503
540
  return base.color;
504
541
  })(),
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),
542
+ padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context5, designSystem.designTokens.spacing20),
543
+ borderRadius: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designSystem.designTokens.borderRadiusForTag),
507
544
  border: 'none',
508
545
  borderWidth: '1px 0 1px 1px',
509
546
  '&:last-child': {
@@ -513,11 +550,11 @@ const multiValueLabelStyles = props => base => {
513
550
  });
514
551
  };
515
552
  const multiValueRemoveStyles = props => (base, state) => {
516
- var _context8;
553
+ var _context7;
517
554
  return _objectSpread(_objectSpread({}, base), {}, {
518
555
  borderColor: designSystem.designTokens.borderColorForTag,
519
556
  padding: "0 ".concat(designSystem.designTokens.spacing10),
520
- borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
557
+ borderRadius: _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context7, designSystem.designTokens.borderRadiusForTag, " 0"),
521
558
  borderStyle: 'none',
522
559
  borderWidth: '0',
523
560
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -563,7 +600,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
563
600
  };
564
601
 
565
602
  // NOTE: This string will be replaced on build time with the package version.
566
- var version = "16.10.0";
603
+ var version = "16.11.0";
567
604
 
568
605
  exports.ClearIndicator = ClearIndicator$1;
569
606
  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
  },
@@ -358,9 +387,9 @@ const menuListStyles = () => base => {
358
387
  });
359
388
  };
360
389
  const optionStyles = () => (base, state) => {
361
- var _context3, _context4;
390
+ var _context2, _context3;
362
391
  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),
392
+ transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
364
393
  paddingLeft: designTokens.paddingLeftForSelectInputOptions,
365
394
  paddingRight: designTokens.paddingRightForSelectInputOptions,
366
395
  paddingTop: designTokens.paddingTopForSelectInputOptions,
@@ -388,6 +417,14 @@ const optionStyles = () => (base, state) => {
388
417
  const placeholderStyles = props => base => {
389
418
  return _objectSpread(_objectSpread({}, base), {}, {
390
419
  color: (() => {
420
+ if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
421
+ if (props.hasError) {
422
+ return designTokens.fontColorForSelectInputWhenError;
423
+ }
424
+ if (props.hasWarning) {
425
+ return designTokens.fontColorForSelectInputWhenWarning;
426
+ }
427
+ }
391
428
  return designTokens.placeholderFontColorForInput;
392
429
  })(),
393
430
  width: '100%',
@@ -434,13 +471,13 @@ const groupStyles = props => base => {
434
471
  });
435
472
  };
436
473
  const groupHeadingStyles = () => base => {
437
- var _context5;
474
+ var _context4;
438
475
  return _objectSpread(_objectSpread({}, base), {}, {
439
476
  color: designTokens.fontColorForInputWhenReadonly,
440
477
  fontSize: designTokens.fontSizeSmall,
441
478
  textTransform: 'none',
442
479
  fontWeight: 'bold',
443
- padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.paddingForGroupHeadingSelectInputOptions),
480
+ padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.paddingForGroupHeadingSelectInputOptions),
444
481
  '&:empty': {
445
482
  padding: 0
446
483
  }
@@ -474,7 +511,7 @@ const multiValueStyles = () => base => {
474
511
  });
475
512
  };
476
513
  const multiValueLabelStyles = props => base => {
477
- var _context6, _context7;
514
+ var _context5, _context6;
478
515
  return _objectSpread(_objectSpread({}, base), {}, {
479
516
  fontSize: designTokens.fontSizeForSelectInputTag,
480
517
  color: (() => {
@@ -482,8 +519,8 @@ const multiValueLabelStyles = props => base => {
482
519
  if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
483
520
  return base.color;
484
521
  })(),
485
- padding: _concatInstanceProperty(_context6 = "".concat(designTokens.spacing10, " ")).call(_context6, designTokens.spacing20),
486
- borderRadius: _concatInstanceProperty(_context7 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designTokens.borderRadiusForTag),
522
+ padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing10, " ")).call(_context5, designTokens.spacing20),
523
+ borderRadius: _concatInstanceProperty(_context6 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designTokens.borderRadiusForTag),
487
524
  border: 'none',
488
525
  borderWidth: '1px 0 1px 1px',
489
526
  '&:last-child': {
@@ -493,11 +530,11 @@ const multiValueLabelStyles = props => base => {
493
530
  });
494
531
  };
495
532
  const multiValueRemoveStyles = props => (base, state) => {
496
- var _context8;
533
+ var _context7;
497
534
  return _objectSpread(_objectSpread({}, base), {}, {
498
535
  borderColor: designTokens.borderColorForTag,
499
536
  padding: "0 ".concat(designTokens.spacing10),
500
- borderRadius: _concatInstanceProperty(_context8 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context8, designTokens.borderRadiusForTag, " 0"),
537
+ borderRadius: _concatInstanceProperty(_context7 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context7, designTokens.borderRadiusForTag, " 0"),
501
538
  borderStyle: 'none',
502
539
  borderWidth: '0',
503
540
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
@@ -546,6 +583,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
546
583
  };
547
584
 
548
585
  // NOTE: This string will be replaced on build time with the package version.
549
- var version = "16.10.0";
586
+ var version = "16.11.0";
550
587
 
551
588
  export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };
package/dist/declarations/src/create-select-styles.d.ts 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)";
@@ -219,7 +219,7 @@ export default function createSelectStyles(props: TProps): {
219
219
  pointerEvents?: string | undefined;
220
220
  };
221
221
  placeholder: (base: TBase) => {
222
- color: "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))";
222
+ 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
223
  width: string;
224
224
  overflow: string;
225
225
  whiteSpace: string;
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.11.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,12 +21,12 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "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.11.0",
25
+ "@commercetools-uikit/design-system": "16.11.0",
26
+ "@commercetools-uikit/icons": "16.11.0",
27
+ "@commercetools-uikit/spacings": "16.11.0",
28
+ "@commercetools-uikit/text": "16.11.0",
29
+ "@commercetools-uikit/utils": "16.11.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",