@commercetools-uikit/select-utils 16.4.1 → 16.6.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 +8 -4
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +8 -4
  3. package/dist/commercetools-uikit-select-utils.esm.js +8 -4
  4. package/dist/declarations/src/create-select-styles.d.ts +13 -10
  5. package/package.json +7 -7
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -272,7 +272,7 @@ const getControlBorderColor = (props, defaultColor) => {
272
272
  };
273
273
  const controlStyles = props => (base, state) => {
274
274
  var _context;
275
- return _objectSpread(_objectSpread({}, base), {}, {
275
+ return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
276
276
  fontSize: designSystem.designTokens.fontSizeForInput,
277
277
  backgroundColor: (() => {
278
278
  if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -301,7 +301,10 @@ const controlStyles = props => (base, state) => {
301
301
  padding: "0 ".concat(designSystem.designTokens.paddingForInput),
302
302
  transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
303
303
  outline: 0,
304
- boxShadow: 'none',
304
+ boxShadow: 'none'
305
+ }, props.horizontalConstraint === 'auto' ? {
306
+ display: 'inline-flex'
307
+ } : {}), {}, {
305
308
  '&:focus-within': {
306
309
  boxShadow: (() => {
307
310
  var _context2;
@@ -337,7 +340,8 @@ const menuStyles = props => base => {
337
340
  if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
338
341
  if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
339
342
  return base.borderColorForInput;
340
- })()
343
+ })(),
344
+ width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
341
345
  });
342
346
  };
343
347
  const indicatorSeparatorStyles = () => base => {
@@ -563,7 +567,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
563
567
  };
564
568
 
565
569
  // NOTE: This string will be replaced on build time with the package version.
566
- var version = "16.4.1";
570
+ var version = "16.6.0";
567
571
 
568
572
  exports.ClearIndicator = ClearIndicator$1;
569
573
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -272,7 +272,7 @@ const getControlBorderColor = (props, defaultColor) => {
272
272
  };
273
273
  const controlStyles = props => (base, state) => {
274
274
  var _context;
275
- return _objectSpread(_objectSpread({}, base), {}, {
275
+ return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
276
276
  fontSize: designSystem.designTokens.fontSizeForInput,
277
277
  backgroundColor: (() => {
278
278
  if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -301,7 +301,10 @@ const controlStyles = props => (base, state) => {
301
301
  padding: "0 ".concat(designSystem.designTokens.paddingForInput),
302
302
  transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
303
303
  outline: 0,
304
- boxShadow: 'none',
304
+ boxShadow: 'none'
305
+ }, props.horizontalConstraint === 'auto' ? {
306
+ display: 'inline-flex'
307
+ } : {}), {}, {
305
308
  '&:focus-within': {
306
309
  boxShadow: (() => {
307
310
  var _context2;
@@ -337,7 +340,8 @@ const menuStyles = props => base => {
337
340
  if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
338
341
  if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
339
342
  return base.borderColorForInput;
340
- })()
343
+ })(),
344
+ width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
341
345
  });
342
346
  };
343
347
  const indicatorSeparatorStyles = () => base => {
@@ -560,7 +564,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
560
564
  };
561
565
 
562
566
  // NOTE: This string will be replaced on build time with the package version.
563
- var version = "16.4.1";
567
+ var version = "16.6.0";
564
568
 
565
569
  exports.ClearIndicator = ClearIndicator$1;
566
570
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -252,7 +252,7 @@ const getControlBorderColor = (props, defaultColor) => {
252
252
  };
253
253
  const controlStyles = props => (base, state) => {
254
254
  var _context;
255
- return _objectSpread(_objectSpread({}, base), {}, {
255
+ return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
256
256
  fontSize: designTokens.fontSizeForInput,
257
257
  backgroundColor: (() => {
258
258
  if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
@@ -281,7 +281,10 @@ const controlStyles = props => (base, state) => {
281
281
  padding: "0 ".concat(designTokens.paddingForInput),
282
282
  transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
283
283
  outline: 0,
284
- boxShadow: 'none',
284
+ boxShadow: 'none'
285
+ }, props.horizontalConstraint === 'auto' ? {
286
+ display: 'inline-flex'
287
+ } : {}), {}, {
285
288
  '&:focus-within': {
286
289
  boxShadow: (() => {
287
290
  var _context2;
@@ -317,7 +320,8 @@ const menuStyles = props => base => {
317
320
  if (props.hasError) return designTokens.borderColorForSelectInputMenuWhenError;
318
321
  if (props.hasWarning) return designTokens.borderColorForSelectInputMenuWhenWarning;
319
322
  return base.borderColorForInput;
320
- })()
323
+ })(),
324
+ width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
321
325
  });
322
326
  };
323
327
  const indicatorSeparatorStyles = () => base => {
@@ -543,6 +547,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
543
547
  };
544
548
 
545
549
  // NOTE: This string will be replaced on build time with the package version.
546
- var version = "16.4.1";
550
+ var version = "16.6.0";
547
551
 
548
552
  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
+ horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
13
14
  };
14
15
  type TBase = {
15
16
  fontColorForInput?: string;
@@ -28,6 +29,17 @@ type TState = {
28
29
  };
29
30
  export default function createSelectStyles(props: TProps): {
30
31
  control: (base: TBase, state: TState) => {
32
+ '&:focus-within': {
33
+ boxShadow: string | null;
34
+ borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
35
+ };
36
+ '&:hover': {
37
+ borderColor: string;
38
+ backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
39
+ };
40
+ pointerEvents: string;
41
+ color: string | undefined;
42
+ display?: string | undefined;
31
43
  fontSize: "var(--font-size-for-input, 1rem)";
32
44
  backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(0, 0%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))";
33
45
  borderColor: "var(--border-color-for-input, #ccc)" | "var(--border-color-for-input-when-focused, #00b39e)" | "var(--border-color-for-input-when-disabled, #ccc)" | "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(0, 0%, 95%))";
@@ -39,16 +51,6 @@ export default function createSelectStyles(props: TProps): {
39
51
  transition: string;
40
52
  outline: number;
41
53
  boxShadow: string;
42
- '&:focus-within': {
43
- boxShadow: string | null;
44
- borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
45
- };
46
- '&:hover': {
47
- borderColor: string;
48
- backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
49
- };
50
- pointerEvents: string;
51
- color: string | undefined;
52
54
  fontColorForInput?: string | undefined;
53
55
  borderColorForInput?: string | undefined;
54
56
  borderTop?: string | undefined;
@@ -62,6 +64,7 @@ export default function createSelectStyles(props: TProps): {
62
64
  fontFamily: string;
63
65
  margin: string;
64
66
  borderColor: string | undefined;
67
+ width: string;
65
68
  fontColorForInput?: string | undefined;
66
69
  borderColorForInput?: string | undefined;
67
70
  color?: string | undefined;
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.4.1",
4
+ "version": "16.6.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.4.1",
25
- "@commercetools-uikit/design-system": "16.4.1",
26
- "@commercetools-uikit/icons": "16.4.1",
27
- "@commercetools-uikit/spacings": "16.4.1",
28
- "@commercetools-uikit/text": "16.4.1",
29
- "@commercetools-uikit/utils": "16.4.1",
24
+ "@commercetools-uikit/accessible-button": "16.6.0",
25
+ "@commercetools-uikit/design-system": "16.6.0",
26
+ "@commercetools-uikit/icons": "16.6.0",
27
+ "@commercetools-uikit/spacings": "16.6.0",
28
+ "@commercetools-uikit/text": "16.6.0",
29
+ "@commercetools-uikit/utils": "16.6.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",