@commercetools-uikit/select-utils 16.1.0 → 16.2.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 +4 -4
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +4 -4
  3. package/dist/commercetools-uikit-select-utils.esm.js +4 -4
  4. package/dist/declarations/src/create-select-styles.d.ts +30 -32
  5. package/package.json +7 -7
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -501,7 +501,7 @@ const multiValueLabelStyles = props => base => {
501
501
  })(),
502
502
  padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
503
503
  borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
504
- border: props.isNewTheme ? 'none' : "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
504
+ border: 'none',
505
505
  borderWidth: '1px 0 1px 1px',
506
506
  '&:last-child': {
507
507
  borderRadius: designSystem.designTokens.borderRadiusForTag,
@@ -515,8 +515,8 @@ const multiValueRemoveStyles = props => (base, state) => {
515
515
  borderColor: designSystem.designTokens.borderColorForTag,
516
516
  padding: "0 ".concat(designSystem.designTokens.spacing10),
517
517
  borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
518
- borderStyle: !props.isNewTheme ? 'solid' : 'none',
519
- borderWidth: !props.isNewTheme ? designSystem.designTokens.borderWidth1 : '0',
518
+ borderStyle: 'none',
519
+ borderWidth: '0',
520
520
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
521
521
  backgroundColor: designSystem.designTokens.backgroundColorForTag,
522
522
  'svg *': {
@@ -563,7 +563,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
563
563
  };
564
564
 
565
565
  // NOTE: This string will be replaced on build time with the package version.
566
- var version = "16.1.0";
566
+ var version = "16.2.0";
567
567
 
568
568
  exports.ClearIndicator = ClearIndicator$1;
569
569
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -501,7 +501,7 @@ const multiValueLabelStyles = props => base => {
501
501
  })(),
502
502
  padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
503
503
  borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
504
- border: props.isNewTheme ? 'none' : "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
504
+ border: 'none',
505
505
  borderWidth: '1px 0 1px 1px',
506
506
  '&:last-child': {
507
507
  borderRadius: designSystem.designTokens.borderRadiusForTag,
@@ -515,8 +515,8 @@ const multiValueRemoveStyles = props => (base, state) => {
515
515
  borderColor: designSystem.designTokens.borderColorForTag,
516
516
  padding: "0 ".concat(designSystem.designTokens.spacing10),
517
517
  borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
518
- borderStyle: !props.isNewTheme ? 'solid' : 'none',
519
- borderWidth: !props.isNewTheme ? designSystem.designTokens.borderWidth1 : '0',
518
+ borderStyle: 'none',
519
+ borderWidth: '0',
520
520
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
521
521
  backgroundColor: designSystem.designTokens.backgroundColorForTag,
522
522
  'svg *': {
@@ -560,7 +560,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
560
560
  };
561
561
 
562
562
  // NOTE: This string will be replaced on build time with the package version.
563
- var version = "16.1.0";
563
+ var version = "16.2.0";
564
564
 
565
565
  exports.ClearIndicator = ClearIndicator$1;
566
566
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -481,7 +481,7 @@ const multiValueLabelStyles = props => base => {
481
481
  })(),
482
482
  padding: _concatInstanceProperty(_context6 = "".concat(designTokens.spacing10, " ")).call(_context6, designTokens.spacing20),
483
483
  borderRadius: _concatInstanceProperty(_context7 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designTokens.borderRadiusForTag),
484
- border: props.isNewTheme ? 'none' : "1px ".concat(designTokens.borderColorForTag, " solid"),
484
+ border: 'none',
485
485
  borderWidth: '1px 0 1px 1px',
486
486
  '&:last-child': {
487
487
  borderRadius: designTokens.borderRadiusForTag,
@@ -495,8 +495,8 @@ const multiValueRemoveStyles = props => (base, state) => {
495
495
  borderColor: designTokens.borderColorForTag,
496
496
  padding: "0 ".concat(designTokens.spacing10),
497
497
  borderRadius: _concatInstanceProperty(_context8 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context8, designTokens.borderRadiusForTag, " 0"),
498
- borderStyle: !props.isNewTheme ? 'solid' : 'none',
499
- borderWidth: !props.isNewTheme ? designTokens.borderWidth1 : '0',
498
+ borderStyle: 'none',
499
+ borderWidth: '0',
500
500
  pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
501
501
  backgroundColor: designTokens.backgroundColorForTag,
502
502
  'svg *': {
@@ -543,6 +543,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
543
543
  };
544
544
 
545
545
  // NOTE: This string will be replaced on build time with the package version.
546
- var version = "16.1.0";
546
+ var version = "16.2.0";
547
547
 
548
548
  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
@@ -26,16 +26,14 @@ type TState = {
26
26
  isDisabled?: boolean;
27
27
  isSelected?: boolean;
28
28
  };
29
- export default function createSelectStyles(props: TProps & {
30
- isNewTheme: boolean;
31
- }): {
29
+ export default function createSelectStyles(props: TProps): {
32
30
  control: (base: TBase, state: TState) => {
33
31
  fontSize: "var(--font-size-for-input, 1rem)";
34
- backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))" | "var(--background-color-for-input-when-readonly, #fff)";
35
- borderColor: "var(--border-color-for-input, hsl(0, 0%, 60%))" | "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, #ccc)";
36
- borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 1px)";
37
- borderRadius: "var(--border-radius-for-input, 6px)";
38
- minHeight: "var(--height-for-input, 32px)";
32
+ 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
+ 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%))";
34
+ borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 2px)";
35
+ borderRadius: "var(--border-radius-for-input, 4px)";
36
+ minHeight: "var(--height-for-input, 40px)";
39
37
  cursor: string;
40
38
  padding: string;
41
39
  transition: string;
@@ -47,7 +45,7 @@ export default function createSelectStyles(props: TProps & {
47
45
  };
48
46
  '&:hover': {
49
47
  borderColor: string;
50
- backgroundColor: "var(--background-color-for-input-when-hovered, #fff)" | null;
48
+ backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
51
49
  };
52
50
  pointerEvents: string;
53
51
  color: string | undefined;
@@ -57,9 +55,9 @@ export default function createSelectStyles(props: TProps & {
57
55
  };
58
56
  menu: (base: TBase) => {
59
57
  border: string;
60
- borderRadius: "var(--border-radius-for-input, 6px)";
58
+ borderRadius: "var(--border-radius-for-input, 4px)";
61
59
  backgroundColor: "var(--background-color-for-input, #fff)";
62
- boxShadow: "var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))";
60
+ boxShadow: "var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))";
63
61
  fontSize: "var(--font-size-for-input, 1rem)";
64
62
  fontFamily: string;
65
63
  margin: string;
@@ -88,8 +86,8 @@ export default function createSelectStyles(props: TProps & {
88
86
  color: "var(--font-color-for-input, #1a1a1a)";
89
87
  margin: string;
90
88
  padding: string;
91
- marginLeft: "var(--margin-for-select-input-icon, 4px)";
92
- fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)" | "var(--font-color-for-select-input-icon-when-error, #1a1a1a)" | "var(--font-color-for-select-input-icon-when-warning, #1a1a1a)";
89
+ marginLeft: "var(--margin-for-select-input-icon, 8px)";
90
+ fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon-when-error, #e60050)" | "var(--font-color-for-select-input-icon-when-warning, #f16d0e)";
93
91
  fontColorForInput?: string | undefined;
94
92
  borderColorForInput?: string | undefined;
95
93
  backgroundColor?: string | undefined;
@@ -101,7 +99,7 @@ export default function createSelectStyles(props: TProps & {
101
99
  clearIndicator: (base: TBase) => {
102
100
  display: string;
103
101
  padding: number;
104
- marginLeft: "var(--margin-for-select-input-icon, 4px)";
102
+ marginLeft: "var(--margin-for-select-input-icon, 8px)";
105
103
  fontColorForInput?: string | undefined;
106
104
  borderColorForInput?: string | undefined;
107
105
  color?: string | undefined;
@@ -112,8 +110,8 @@ export default function createSelectStyles(props: TProps & {
112
110
  pointerEvents?: string | undefined;
113
111
  };
114
112
  menuList: (base: TBase) => {
115
- padding: "var(--padding-for-select-input-menu, inherit)";
116
- borderRadius: "var(--border-radius-for-input, 6px)";
113
+ padding: "var(--padding-for-select-input-menu, var(--spacing-10) 0)";
114
+ borderRadius: "var(--border-radius-for-input, 4px)";
117
115
  backgroundColor: "var(--background-color-for-input, #fff)";
118
116
  fontColorForInput?: string | undefined;
119
117
  borderColorForInput?: string | undefined;
@@ -136,11 +134,11 @@ export default function createSelectStyles(props: TProps & {
136
134
  };
137
135
  multiValue: (base: TBase) => {
138
136
  display: string;
139
- alignItems: "var(--align-items-for-select-input-tag, unset)";
140
- height: "var(--height-for-select-input-tag, 26px)";
137
+ alignItems: "var(--align-items-for-select-input-tag, center)";
138
+ height: "var(--height-for-select-input-tag, 32px)";
141
139
  backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
142
140
  padding: string;
143
- border: "var(--border-for-select-input-tag, none)";
141
+ border: "var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))";
144
142
  fontColorForInput?: string | undefined;
145
143
  borderColorForInput?: string | undefined;
146
144
  color?: string | undefined;
@@ -150,7 +148,7 @@ export default function createSelectStyles(props: TProps & {
150
148
  pointerEvents?: string | undefined;
151
149
  };
152
150
  multiValueLabel: (base: TBase) => {
153
- fontSize: "var(--font-size-for-select-input-tag, 0.9231rem)";
151
+ fontSize: "var(--font-size-for-select-input-tag, 1rem)";
154
152
  color: string | undefined;
155
153
  padding: string;
156
154
  borderRadius: string;
@@ -169,7 +167,7 @@ export default function createSelectStyles(props: TProps & {
169
167
  pointerEvents?: string | undefined;
170
168
  };
171
169
  multiValueRemove: (base: TBase, state: TState) => {
172
- borderColor: "var(--border-color-for-tag, hsl(0, 0%, 60%))";
170
+ borderColor: "var(--border-color-for-tag, #ccc)";
173
171
  padding: string;
174
172
  borderRadius: string;
175
173
  borderStyle: string;
@@ -183,7 +181,7 @@ export default function createSelectStyles(props: TProps & {
183
181
  borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
184
182
  backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
185
183
  'svg *': {
186
- fill: "var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)";
184
+ fill: "var(--font-color-for-clear-input-icon-when-hovered, #e60050)";
187
185
  };
188
186
  };
189
187
  fontColorForInput?: string | undefined;
@@ -199,16 +197,16 @@ export default function createSelectStyles(props: TProps & {
199
197
  };
200
198
  option: (base: TBase, state: TState) => {
201
199
  transition: string;
202
- paddingLeft: "var(--padding-left-for-select-input-options, 8px)";
203
- paddingRight: "var(--padding-right-for-select-input-options, 8px)";
204
- paddingTop: "var(--padding-top-for-select-input-options, 4px)";
205
- paddingBottom: "var(--padding-bottom-for-select-input-options, 4px)";
206
- lineHeight: "var(--line-height-for-select-input-options, inherit)";
200
+ paddingLeft: "var(--padding-left-for-select-input-options, 16px)";
201
+ paddingRight: "var(--padding-right-for-select-input-options, 16px)";
202
+ paddingTop: "var(--padding-top-for-select-input-options, 8px)";
203
+ paddingBottom: "var(--padding-bottom-for-select-input-options, 8px)";
204
+ lineHeight: "var(--line-height-for-select-input-options, 1.625rem)";
207
205
  color: string | undefined;
208
206
  backgroundColor: string | undefined;
209
207
  '&:active': {
210
208
  color: string | undefined;
211
- backgroundColor: "var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))";
209
+ backgroundColor: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
212
210
  };
213
211
  fontColorForInput?: string | undefined;
214
212
  borderColorForInput?: string | undefined;
@@ -237,7 +235,7 @@ export default function createSelectStyles(props: TProps & {
237
235
  backgroundColor: string;
238
236
  overflow: string;
239
237
  display: string;
240
- fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)";
238
+ fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))";
241
239
  fontColorForInput?: string | undefined;
242
240
  borderColorForInput?: string | undefined;
243
241
  color?: string | undefined;
@@ -247,7 +245,7 @@ export default function createSelectStyles(props: TProps & {
247
245
  pointerEvents?: string | undefined;
248
246
  };
249
247
  singleValue: (base: TBase) => {
250
- color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-when-error, #1a1a1a)" | "var(--font-color-for-select-input-when-warning, #1a1a1a)";
248
+ color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))" | "var(--font-color-for-select-input-when-error, #e60050)" | "var(--font-color-for-select-input-when-warning, #f16d0e)";
251
249
  fontColorForInput?: string | undefined;
252
250
  borderColorForInput?: string | undefined;
253
251
  backgroundColor?: string | undefined;
@@ -271,7 +269,7 @@ export default function createSelectStyles(props: TProps & {
271
269
  pointerEvents?: string | undefined;
272
270
  };
273
271
  groupHeading: (base: TBase) => {
274
- color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))";
272
+ color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))";
275
273
  fontSize: "var(--font-size-small, 0.9231rem)";
276
274
  textTransform: string;
277
275
  fontWeight: string;
@@ -290,7 +288,7 @@ export default function createSelectStyles(props: TProps & {
290
288
  container: (base: TBase, state: TState) => {
291
289
  fontFamily: string;
292
290
  minHeight: "var(--size-height-input, 32px)";
293
- borderRadius: "var(--border-radius-for-input, 6px)";
291
+ borderRadius: "var(--border-radius-for-input, 4px)";
294
292
  borderColor: string | undefined;
295
293
  boxShadow: string | undefined;
296
294
  fontColorForInput?: 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.1.0",
4
+ "version": "16.2.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.1.0",
25
- "@commercetools-uikit/design-system": "16.1.0",
26
- "@commercetools-uikit/icons": "16.1.0",
27
- "@commercetools-uikit/spacings": "16.1.0",
28
- "@commercetools-uikit/text": "16.1.0",
29
- "@commercetools-uikit/utils": "16.1.0",
24
+ "@commercetools-uikit/accessible-button": "16.2.0",
25
+ "@commercetools-uikit/design-system": "16.2.0",
26
+ "@commercetools-uikit/icons": "16.2.0",
27
+ "@commercetools-uikit/spacings": "16.2.0",
28
+ "@commercetools-uikit/text": "16.2.0",
29
+ "@commercetools-uikit/utils": "16.2.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",