@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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
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,
|
|
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(
|
|
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(
|
|
45
|
-
borderColor: "var(--border-color-for-input,
|
|
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(
|
|
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(
|
|
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,
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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.
|
|
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.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/icons": "16.
|
|
27
|
-
"@commercetools-uikit/spacings": "16.
|
|
28
|
-
"@commercetools-uikit/text": "16.
|
|
29
|
-
"@commercetools-uikit/utils": "16.
|
|
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",
|