@commercetools-uikit/select-utils 16.7.5 → 16.9.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.
@@ -176,7 +176,7 @@ const MultiplePropertiesSelectInputOption = props => {
176
176
  children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
177
177
  scale: "xs",
178
178
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
179
- isBold: true,
179
+ fontWeight: "bold",
180
180
  children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
181
181
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
182
182
  children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
@@ -194,7 +194,7 @@ const DoublePropertySelectInputOption = props => {
194
194
  children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
195
195
  scale: "xs",
196
196
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
197
- isBold: true,
197
+ fontWeight: "bold",
198
198
  children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
199
199
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
200
200
  children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
@@ -306,8 +306,7 @@ const controlStyles = props => (base, state) => {
306
306
  display: 'inline-flex'
307
307
  } : {}), {}, {
308
308
  '&:focus-within': {
309
- boxShadow: (() => {
310
- var _context2;
309
+ boxShadow: (_context2 => {
311
310
  if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
312
311
  return null;
313
312
  })(),
@@ -567,7 +566,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
567
566
  };
568
567
 
569
568
  // NOTE: This string will be replaced on build time with the package version.
570
- var version = "16.7.5";
569
+ var version = "16.9.0";
571
570
 
572
571
  exports.ClearIndicator = ClearIndicator$1;
573
572
  exports.CustomSelectInputOption = CustomSelectInputOption;
@@ -176,7 +176,7 @@ const MultiplePropertiesSelectInputOption = props => {
176
176
  children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
177
177
  scale: "xs",
178
178
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
179
- isBold: true,
179
+ fontWeight: "bold",
180
180
  children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
181
181
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
182
182
  children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
@@ -194,7 +194,7 @@ const DoublePropertySelectInputOption = props => {
194
194
  children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
195
195
  scale: "xs",
196
196
  children: [jsxRuntime.jsx(Text__default["default"].Detail, {
197
- isBold: true,
197
+ fontWeight: "bold",
198
198
  children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
199
199
  }), jsxRuntime.jsxs(Text__default["default"].Detail, {
200
200
  children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
@@ -306,8 +306,7 @@ const controlStyles = props => (base, state) => {
306
306
  display: 'inline-flex'
307
307
  } : {}), {}, {
308
308
  '&:focus-within': {
309
- boxShadow: (() => {
310
- var _context2;
309
+ boxShadow: (_context2 => {
311
310
  if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
312
311
  return null;
313
312
  })(),
@@ -564,7 +563,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
564
563
  };
565
564
 
566
565
  // NOTE: This string will be replaced on build time with the package version.
567
- var version = "16.7.5";
566
+ var version = "16.9.0";
568
567
 
569
568
  exports.ClearIndicator = ClearIndicator$1;
570
569
  exports.CustomSelectInputOption = CustomSelectInputOption;
@@ -156,7 +156,7 @@ const MultiplePropertiesSelectInputOption = props => {
156
156
  children: jsxs(Spacings.Stack, {
157
157
  scale: "xs",
158
158
  children: [jsx(Text.Detail, {
159
- isBold: true,
159
+ fontWeight: "bold",
160
160
  children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
161
161
  }), jsxs(Text.Detail, {
162
162
  children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
@@ -174,7 +174,7 @@ const DoublePropertySelectInputOption = props => {
174
174
  children: jsxs(Spacings.Stack, {
175
175
  scale: "xs",
176
176
  children: [jsx(Text.Detail, {
177
- isBold: true,
177
+ fontWeight: "bold",
178
178
  children: (data === null || data === void 0 ? void 0 : data.label) || noValueFallback
179
179
  }), jsxs(Text.Detail, {
180
180
  children: ["Key: ", (data === null || data === void 0 ? void 0 : data.key) || noValueFallback]
@@ -286,8 +286,7 @@ const controlStyles = props => (base, state) => {
286
286
  display: 'inline-flex'
287
287
  } : {}), {}, {
288
288
  '&:focus-within': {
289
- boxShadow: (() => {
290
- var _context2;
289
+ boxShadow: (_context2 => {
291
290
  if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty(_context2 = "".concat(designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designTokens.borderColorForInputWhenFocused);
292
291
  return null;
293
292
  })(),
@@ -547,6 +546,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
547
546
  };
548
547
 
549
548
  // NOTE: This string will be replaced on build time with the package version.
550
- var version = "16.7.5";
549
+ var version = "16.9.0";
551
550
 
552
551
  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 };
@@ -31,18 +31,18 @@ export default function createSelectStyles(props: TProps): {
31
31
  control: (base: TBase, state: TState) => {
32
32
  '&:focus-within': {
33
33
  boxShadow: string | null;
34
- borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
34
+ borderColor: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | null;
35
35
  };
36
36
  '&:hover': {
37
37
  borderColor: string;
38
- backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
38
+ backgroundColor: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | 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(0, 0%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))";
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%))";
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%))";
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)";
@@ -90,7 +90,7 @@ export default function createSelectStyles(props: TProps): {
90
90
  margin: string;
91
91
  padding: string;
92
92
  marginLeft: "var(--margin-for-select-input-icon, 8px)";
93
- 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
+ fill: "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-select-input-icon, hsl(232, 18%, 60%))" | "var(--font-color-for-select-input-icon-when-error, #e60050)" | "var(--font-color-for-select-input-icon-when-warning, #f16d0e)";
94
94
  fontColorForInput?: string | undefined;
95
95
  borderColorForInput?: string | undefined;
96
96
  backgroundColor?: string | undefined;
@@ -139,7 +139,7 @@ export default function createSelectStyles(props: TProps): {
139
139
  display: string;
140
140
  alignItems: "var(--align-items-for-select-input-tag, center)";
141
141
  height: "var(--height-for-select-input-tag, 32px)";
142
- backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
142
+ backgroundColor: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
143
143
  padding: string;
144
144
  border: "var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))";
145
145
  fontColorForInput?: string | undefined;
@@ -170,19 +170,19 @@ export default function createSelectStyles(props: TProps): {
170
170
  pointerEvents?: string | undefined;
171
171
  };
172
172
  multiValueRemove: (base: TBase, state: TState) => {
173
- borderColor: "var(--border-color-for-tag, #ccc)";
173
+ borderColor: "var(--border-color-for-tag, hsl(232, 18%, 80%))";
174
174
  padding: string;
175
175
  borderRadius: string;
176
176
  borderStyle: string;
177
177
  borderWidth: string;
178
178
  pointerEvents: string | undefined;
179
- backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
179
+ backgroundColor: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
180
180
  'svg *': {
181
181
  fill: string;
182
182
  };
183
183
  '&:hover, &:focus': {
184
184
  borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
185
- backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
185
+ backgroundColor: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
186
186
  'svg *': {
187
187
  fill: "var(--font-color-for-clear-input-icon-when-hovered, #e60050)";
188
188
  };
@@ -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(0, 0%, 60%))";
222
+ color: "var(--placeholder-font-color-for-input, hsl(232, 18%, 60%))";
223
223
  width: string;
224
224
  overflow: string;
225
225
  whiteSpace: string;
@@ -238,7 +238,7 @@ export default function createSelectStyles(props: TProps): {
238
238
  backgroundColor: string;
239
239
  overflow: string;
240
240
  display: string;
241
- fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))";
241
+ fill: "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-select-input-icon, hsl(232, 18%, 60%))";
242
242
  fontColorForInput?: string | undefined;
243
243
  borderColorForInput?: string | undefined;
244
244
  color?: string | undefined;
@@ -248,7 +248,7 @@ export default function createSelectStyles(props: TProps): {
248
248
  pointerEvents?: string | undefined;
249
249
  };
250
250
  singleValue: (base: TBase) => {
251
- 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
+ color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))" | "var(--font-color-for-select-input-when-error, #e60050)" | "var(--font-color-for-select-input-when-warning, #f16d0e)";
252
252
  fontColorForInput?: string | undefined;
253
253
  borderColorForInput?: string | undefined;
254
254
  backgroundColor?: string | undefined;
@@ -272,7 +272,7 @@ export default function createSelectStyles(props: TProps): {
272
272
  pointerEvents?: string | undefined;
273
273
  };
274
274
  groupHeading: (base: TBase) => {
275
- color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))";
275
+ color: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
276
276
  fontSize: "var(--font-size-small, 0.9231rem)";
277
277
  textTransform: string;
278
278
  fontWeight: 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.7.5",
4
+ "version": "16.9.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.7.5",
25
- "@commercetools-uikit/design-system": "16.7.5",
26
- "@commercetools-uikit/icons": "16.7.5",
27
- "@commercetools-uikit/spacings": "16.7.5",
28
- "@commercetools-uikit/text": "16.7.5",
29
- "@commercetools-uikit/utils": "16.7.5",
24
+ "@commercetools-uikit/accessible-button": "16.9.0",
25
+ "@commercetools-uikit/design-system": "16.9.0",
26
+ "@commercetools-uikit/icons": "16.9.0",
27
+ "@commercetools-uikit/spacings": "16.9.0",
28
+ "@commercetools-uikit/text": "16.9.0",
29
+ "@commercetools-uikit/utils": "16.9.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",