@commercetools-uikit/select-utils 15.2.3 → 15.3.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.
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { Theme } from '@emotion/react';
|
|
3
2
|
declare type TProps = {
|
|
4
3
|
isDisabled?: boolean;
|
|
5
4
|
hasError?: boolean;
|
|
@@ -26,13 +25,13 @@ declare type TState = {
|
|
|
26
25
|
isDisabled?: boolean;
|
|
27
26
|
isSelected?: boolean;
|
|
28
27
|
};
|
|
29
|
-
export default function createSelectStyles(props: TProps
|
|
28
|
+
export default function createSelectStyles(props: TProps): {
|
|
30
29
|
control: (base: TBase, state: TState) => {
|
|
31
|
-
fontSize: "1rem";
|
|
32
|
-
backgroundColor: "hsl(195, 35.2941176471%, 98%)"
|
|
33
|
-
borderColor: "#00b39e" | "#ccc" | "
|
|
34
|
-
borderRadius: "6px";
|
|
35
|
-
minHeight: "32px";
|
|
30
|
+
fontSize: "var(--font-size-for-input, 1rem)";
|
|
31
|
+
backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))";
|
|
32
|
+
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-readonly, #ccc)" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)";
|
|
33
|
+
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
34
|
+
minHeight: "var(--size-height-input, 32px)";
|
|
36
35
|
cursor: string;
|
|
37
36
|
padding: string;
|
|
38
37
|
transition: string;
|
|
@@ -40,10 +39,10 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
40
39
|
boxShadow: string;
|
|
41
40
|
'&:focus-within': {
|
|
42
41
|
boxShadow: string | null;
|
|
43
|
-
borderColor: "#00b39e" | null;
|
|
42
|
+
borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
|
|
44
43
|
};
|
|
45
44
|
'&:hover': {
|
|
46
|
-
borderColor: "#00b39e" | null;
|
|
45
|
+
borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
|
|
47
46
|
};
|
|
48
47
|
pointerEvents: string;
|
|
49
48
|
color: string | undefined;
|
|
@@ -53,10 +52,10 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
53
52
|
};
|
|
54
53
|
menu: (base: TBase) => {
|
|
55
54
|
border: string;
|
|
56
|
-
borderRadius: "6px";
|
|
57
|
-
backgroundColor: "#fff";
|
|
58
|
-
boxShadow: "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)";
|
|
59
|
-
fontSize: "1rem";
|
|
55
|
+
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
56
|
+
backgroundColor: "var(--background-color-for-input, #fff)";
|
|
57
|
+
boxShadow: "var(--shadow-7, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))";
|
|
58
|
+
fontSize: "var(--font-size-for-input, 1rem)";
|
|
60
59
|
fontFamily: string;
|
|
61
60
|
margin: string;
|
|
62
61
|
borderColor: string | undefined;
|
|
@@ -70,7 +69,7 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
70
69
|
display: string;
|
|
71
70
|
margin: string;
|
|
72
71
|
padding: string;
|
|
73
|
-
marginLeft: "4px";
|
|
72
|
+
marginLeft: "var(--spacing-xs, 4px)";
|
|
74
73
|
fontColorForInput?: string | undefined;
|
|
75
74
|
borderColorForInput?: string | undefined;
|
|
76
75
|
color?: string | undefined;
|
|
@@ -81,10 +80,10 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
81
80
|
pointerEvents?: string | undefined;
|
|
82
81
|
};
|
|
83
82
|
dropdownIndicator: (base: TBase) => {
|
|
84
|
-
color: "#1a1a1a";
|
|
83
|
+
color: "var(--font-color-for-input, #1a1a1a)";
|
|
85
84
|
margin: string;
|
|
86
85
|
padding: string;
|
|
87
|
-
marginLeft: "4px";
|
|
86
|
+
marginLeft: "var(--spacing-xs, 4px)";
|
|
88
87
|
fill: string | undefined;
|
|
89
88
|
fontColorForInput?: string | undefined;
|
|
90
89
|
borderColorForInput?: string | undefined;
|
|
@@ -108,8 +107,8 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
108
107
|
};
|
|
109
108
|
menuList: (base: TBase) => {
|
|
110
109
|
padding: string;
|
|
111
|
-
borderRadius: "6px";
|
|
112
|
-
backgroundColor: "#fff";
|
|
110
|
+
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
111
|
+
backgroundColor: "var(--background-color-for-input, #fff)";
|
|
113
112
|
fontColorForInput?: string | undefined;
|
|
114
113
|
borderColorForInput?: string | undefined;
|
|
115
114
|
color?: string | undefined;
|
|
@@ -130,8 +129,8 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
130
129
|
pointerEvents?: string | undefined;
|
|
131
130
|
};
|
|
132
131
|
multiValue: (base: TBase) => {
|
|
133
|
-
height: "26px";
|
|
134
|
-
backgroundColor: "hsl(0, 0%, 95%)";
|
|
132
|
+
height: "var(--size-height-tag, 26px)";
|
|
133
|
+
backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
|
|
135
134
|
padding: string;
|
|
136
135
|
fontColorForInput?: string | undefined;
|
|
137
136
|
borderColorForInput?: string | undefined;
|
|
@@ -142,14 +141,14 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
142
141
|
pointerEvents?: string | undefined;
|
|
143
142
|
};
|
|
144
143
|
multiValueLabel: (base: TBase) => {
|
|
145
|
-
fontSize: "0.9231rem";
|
|
144
|
+
fontSize: "var(--font-size-small, 0.9231rem)";
|
|
146
145
|
color: string | undefined;
|
|
147
146
|
padding: string;
|
|
148
147
|
borderRadius: string;
|
|
149
148
|
border: string;
|
|
150
149
|
borderWidth: string;
|
|
151
150
|
'&:last-child': {
|
|
152
|
-
borderRadius: "2px";
|
|
151
|
+
borderRadius: "var(--border-radius-for-tag, 2px)";
|
|
153
152
|
borderWidth: string;
|
|
154
153
|
};
|
|
155
154
|
fontColorForInput?: string | undefined;
|
|
@@ -161,21 +160,21 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
161
160
|
pointerEvents?: string | undefined;
|
|
162
161
|
};
|
|
163
162
|
multiValueRemove: (base: TBase, state: TState) => {
|
|
164
|
-
borderColor: "hsl(0, 0%, 60%)";
|
|
163
|
+
borderColor: "var(--border-color-for-tag, hsl(0, 0%, 60%))";
|
|
165
164
|
padding: string;
|
|
166
165
|
borderRadius: string;
|
|
167
166
|
borderStyle: string;
|
|
168
167
|
borderWidth: string;
|
|
169
168
|
pointerEvents: string | undefined;
|
|
170
|
-
backgroundColor: "hsl(0, 0%, 95%)";
|
|
169
|
+
backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
|
|
171
170
|
'svg *': {
|
|
172
171
|
fill: string;
|
|
173
172
|
};
|
|
174
173
|
'&:hover, &:focus': {
|
|
175
|
-
borderColor: "#f16d0e";
|
|
176
|
-
backgroundColor: "hsl(0, 0%, 95%)";
|
|
174
|
+
borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
|
|
175
|
+
backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
|
|
177
176
|
'svg *': {
|
|
178
|
-
fill: "#f16d0e";
|
|
177
|
+
fill: "var(--border-color-for-tag-warning, #f16d0e)";
|
|
179
178
|
};
|
|
180
179
|
};
|
|
181
180
|
fontColorForInput?: string | undefined;
|
|
@@ -191,13 +190,13 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
191
190
|
};
|
|
192
191
|
option: (base: TBase, state: TState) => {
|
|
193
192
|
transition: string;
|
|
194
|
-
paddingLeft: "8px";
|
|
195
|
-
paddingRight: "8px";
|
|
193
|
+
paddingLeft: "var(--spacing-s, 8px)";
|
|
194
|
+
paddingRight: "var(--spacing-s, 8px)";
|
|
196
195
|
color: string | undefined;
|
|
197
196
|
backgroundColor: string | undefined;
|
|
198
197
|
'&:active': {
|
|
199
198
|
color: string | undefined;
|
|
200
|
-
backgroundColor: "hsl(195, 35.2941176471%, 95%)";
|
|
199
|
+
backgroundColor: "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))";
|
|
201
200
|
};
|
|
202
201
|
fontColorForInput?: string | undefined;
|
|
203
202
|
borderColorForInput?: string | undefined;
|
|
@@ -207,7 +206,7 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
207
206
|
pointerEvents?: string | undefined;
|
|
208
207
|
};
|
|
209
208
|
placeholder: (base: TBase) => {
|
|
210
|
-
color: "hsl(0, 0%, 60%)";
|
|
209
|
+
color: "var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))";
|
|
211
210
|
width: string;
|
|
212
211
|
overflow: string;
|
|
213
212
|
whiteSpace: string;
|
|
@@ -236,7 +235,7 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
236
235
|
pointerEvents?: string | undefined;
|
|
237
236
|
};
|
|
238
237
|
singleValue: (base: TBase) => {
|
|
239
|
-
color: "hsl(0, 0%, 60%)" | "
|
|
238
|
+
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%))";
|
|
240
239
|
fontColorForInput?: string | undefined;
|
|
241
240
|
borderColorForInput?: string | undefined;
|
|
242
241
|
backgroundColor?: string | undefined;
|
|
@@ -260,8 +259,8 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
260
259
|
pointerEvents?: string | undefined;
|
|
261
260
|
};
|
|
262
261
|
groupHeading: (base: TBase) => {
|
|
263
|
-
color: "hsl(0, 0%, 60%)";
|
|
264
|
-
fontSize: "0.9231rem";
|
|
262
|
+
color: "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))";
|
|
263
|
+
fontSize: "var(--font-size-small, 0.9231rem)";
|
|
265
264
|
textTransform: string;
|
|
266
265
|
fontWeight: string;
|
|
267
266
|
margin: string;
|
|
@@ -279,8 +278,8 @@ export default function createSelectStyles(props: TProps, theme: Theme): {
|
|
|
279
278
|
};
|
|
280
279
|
container: (base: TBase, state: TState) => {
|
|
281
280
|
fontFamily: string;
|
|
282
|
-
minHeight: "32px";
|
|
283
|
-
borderRadius: "6px";
|
|
281
|
+
minHeight: "var(--size-height-input, 32px)";
|
|
282
|
+
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
284
283
|
borderColor: string | undefined;
|
|
285
284
|
boxShadow: string | undefined;
|
|
286
285
|
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": "15.
|
|
4
|
+
"version": "15.3.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.19.0",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.19.1",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "15.
|
|
25
|
-
"@commercetools-uikit/design-system": "15.
|
|
26
|
-
"@commercetools-uikit/icons": "15.
|
|
27
|
-
"@commercetools-uikit/spacings": "15.
|
|
28
|
-
"@commercetools-uikit/text": "15.
|
|
29
|
-
"@commercetools-uikit/utils": "15.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "15.3.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "15.3.0",
|
|
26
|
+
"@commercetools-uikit/icons": "15.3.0",
|
|
27
|
+
"@commercetools-uikit/spacings": "15.3.0",
|
|
28
|
+
"@commercetools-uikit/text": "15.3.0",
|
|
29
|
+
"@commercetools-uikit/utils": "15.3.0",
|
|
30
30
|
"@emotion/react": "^11.4.0",
|
|
31
31
|
"@emotion/styled": "^11.3.0",
|
|
32
32
|
"lodash": "4.17.21",
|