@entur/dropdown 6.0.0-beta.0 → 6.0.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.
- package/dist/styles.css +137 -137
- package/package.json +10 -10
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,96 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
+
.eds-multi-select {
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
.eds-multi-select__selected-items {
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
flex-wrap: wrap;
|
|
10
|
+
position: relative;
|
|
11
|
+
flex: 1 1 0%;
|
|
12
|
+
padding: 0.25rem;
|
|
13
|
+
}
|
|
14
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
15
|
+
margin-left: 0.25rem;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
}
|
|
18
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
|
|
19
|
+
color: #181c56;
|
|
20
|
+
}
|
|
21
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip:focus {
|
|
22
|
+
outline-offset: 0.125rem;
|
|
23
|
+
}
|
|
24
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
25
|
+
color: #181c56;
|
|
26
|
+
background: #ebebf1;
|
|
27
|
+
border: 0.0625rem solid #d1d4e3;
|
|
28
|
+
}
|
|
29
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
|
|
30
|
+
background: #babbcf;
|
|
31
|
+
}
|
|
32
|
+
.eds-multi-select__input {
|
|
33
|
+
flex: 1 1;
|
|
34
|
+
min-height: 44px;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
.eds-multi-select__placeholder {
|
|
39
|
+
padding-left: 1.5rem;
|
|
40
|
+
line-height: 1.375rem;
|
|
41
|
+
font-size: 1rem;
|
|
42
|
+
}
|
|
43
|
+
.eds-checkbox-icon {
|
|
44
|
+
height: 1rem;
|
|
45
|
+
width: 1rem;
|
|
46
|
+
visibility: hidden;
|
|
47
|
+
}
|
|
48
|
+
.eds-checkbox-icon__path {
|
|
49
|
+
transform-origin: 50% 50%;
|
|
50
|
+
stroke-dasharray: 48;
|
|
51
|
+
stroke-dashoffset: 48;
|
|
52
|
+
stroke-width: 0.375rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.eds-multiselect {
|
|
56
|
+
position: relative;
|
|
57
|
+
}
|
|
58
|
+
.eds-multiselect__button {
|
|
59
|
+
text-overflow: ellipsis;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.eds-multiselect-checkbox {
|
|
63
|
+
display: inline-flex;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
position: relative;
|
|
67
|
+
margin-right: 0.75rem;
|
|
68
|
+
height: 1.25rem;
|
|
69
|
+
width: 1.25rem;
|
|
70
|
+
border: 0.125rem solid #181c56;
|
|
71
|
+
border-radius: 0.0625rem;
|
|
72
|
+
background-color: transparent;
|
|
73
|
+
color: #ffffff;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.eds-multiselect-checkbox--checked {
|
|
77
|
+
background-color: #181c56;
|
|
78
|
+
}
|
|
79
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon {
|
|
80
|
+
visibility: visible;
|
|
81
|
+
}
|
|
82
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
|
|
83
|
+
stroke: #ffffff;
|
|
84
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@keyframes stroke {
|
|
88
|
+
100% {
|
|
89
|
+
stroke-dashoffset: 0;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
/* DO NOT CHANGE!*/
|
|
93
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
94
|
.eds-dropdown-list {
|
|
4
95
|
border-radius: 0.25rem;
|
|
5
96
|
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
@@ -64,71 +155,6 @@
|
|
|
64
155
|
}
|
|
65
156
|
/* DO NOT CHANGE!*/
|
|
66
157
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
67
|
-
.eds-dropdown-wrapper {
|
|
68
|
-
position: relative;
|
|
69
|
-
}
|
|
70
|
-
.eds-dropdown-wrapper .eds-form-control {
|
|
71
|
-
padding-right: 0;
|
|
72
|
-
}
|
|
73
|
-
.eds-dropdown-wrapper .eds-form-control__append {
|
|
74
|
-
display: flex;
|
|
75
|
-
align-items: center;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.eds-dropdown__input::-moz-placeholder {
|
|
79
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.eds-dropdown__input::placeholder {
|
|
83
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.eds-dropdown__selected-item {
|
|
87
|
-
overflow-x: hidden;
|
|
88
|
-
text-overflow: ellipsis;
|
|
89
|
-
white-space: nowrap;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.eds-dropdown__clear-button {
|
|
93
|
-
background: none;
|
|
94
|
-
border: none;
|
|
95
|
-
border-radius: 50%;
|
|
96
|
-
color: inherit;
|
|
97
|
-
cursor: pointer;
|
|
98
|
-
display: flex;
|
|
99
|
-
font: inherit;
|
|
100
|
-
font-size: 1rem;
|
|
101
|
-
line-height: 1rem;
|
|
102
|
-
padding: 0.5rem;
|
|
103
|
-
}
|
|
104
|
-
.eds-dropdown__clear-button:hover {
|
|
105
|
-
background: #f3f3f3;
|
|
106
|
-
}
|
|
107
|
-
.eds-dropdown__clear-button:focus {
|
|
108
|
-
outline-offset: 0.125rem;
|
|
109
|
-
outline: none;
|
|
110
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.eds-dropdown__divider {
|
|
114
|
-
content: "";
|
|
115
|
-
display: block;
|
|
116
|
-
background-color: #e9e9e9;
|
|
117
|
-
height: 1.5rem;
|
|
118
|
-
width: 1px;
|
|
119
|
-
}
|
|
120
|
-
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
|
|
121
|
-
background-color: #8285a8;
|
|
122
|
-
}
|
|
123
|
-
.eds-inline-spinner {
|
|
124
|
-
align-items: center;
|
|
125
|
-
display: flex;
|
|
126
|
-
justify-content: center;
|
|
127
|
-
height: 100%;
|
|
128
|
-
width: 100%;
|
|
129
|
-
}
|
|
130
|
-
/* DO NOT CHANGE!*/
|
|
131
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
132
158
|
.eds-dropdown__searchable-selected-item {
|
|
133
159
|
display: block;
|
|
134
160
|
font-size: 1rem;
|
|
@@ -152,6 +178,13 @@
|
|
|
152
178
|
.eds-form-control.eds-dropdown__input::placeholder {
|
|
153
179
|
transition: none;
|
|
154
180
|
}
|
|
181
|
+
.eds-inline-spinner {
|
|
182
|
+
align-items: center;
|
|
183
|
+
display: flex;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
height: 100%;
|
|
186
|
+
width: 100%;
|
|
187
|
+
}
|
|
155
188
|
/* DO NOT CHANGE!*/
|
|
156
189
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
157
190
|
.eds-dropdown__toggle-button {
|
|
@@ -182,94 +215,61 @@
|
|
|
182
215
|
}
|
|
183
216
|
/* DO NOT CHANGE!*/
|
|
184
217
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
185
|
-
.eds-
|
|
218
|
+
.eds-dropdown-wrapper {
|
|
186
219
|
position: relative;
|
|
187
220
|
}
|
|
188
|
-
.eds-
|
|
189
|
-
|
|
190
|
-
align-items: center;
|
|
191
|
-
flex-wrap: wrap;
|
|
192
|
-
position: relative;
|
|
193
|
-
flex: 1 1 0%;
|
|
194
|
-
padding: 0.25rem;
|
|
195
|
-
}
|
|
196
|
-
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
197
|
-
margin-left: 0.25rem;
|
|
198
|
-
white-space: nowrap;
|
|
199
|
-
}
|
|
200
|
-
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
|
|
201
|
-
color: #181c56;
|
|
202
|
-
}
|
|
203
|
-
.eds-multi-select__selected-items-tag.eds-tag-chip:focus {
|
|
204
|
-
outline-offset: 0.125rem;
|
|
205
|
-
}
|
|
206
|
-
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
207
|
-
color: #181c56;
|
|
208
|
-
background: #ebebf1;
|
|
209
|
-
border: 0.0625rem solid #d1d4e3;
|
|
210
|
-
}
|
|
211
|
-
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip .eds-tag-chip__close-button:hover {
|
|
212
|
-
background: #babbcf;
|
|
221
|
+
.eds-dropdown-wrapper .eds-form-control {
|
|
222
|
+
padding-right: 0;
|
|
213
223
|
}
|
|
214
|
-
.eds-
|
|
215
|
-
flex: 1 1;
|
|
216
|
-
min-height: 44px;
|
|
224
|
+
.eds-dropdown-wrapper .eds-form-control__append {
|
|
217
225
|
display: flex;
|
|
218
226
|
align-items: center;
|
|
219
227
|
}
|
|
220
|
-
.eds-multi-select__placeholder {
|
|
221
|
-
padding-left: 1.5rem;
|
|
222
|
-
line-height: 1.375rem;
|
|
223
|
-
font-size: 1rem;
|
|
224
|
-
}
|
|
225
|
-
.eds-checkbox-icon {
|
|
226
|
-
height: 1rem;
|
|
227
|
-
width: 1rem;
|
|
228
|
-
visibility: hidden;
|
|
229
|
-
}
|
|
230
|
-
.eds-checkbox-icon__path {
|
|
231
|
-
transform-origin: 50% 50%;
|
|
232
|
-
stroke-dasharray: 48;
|
|
233
|
-
stroke-dashoffset: 48;
|
|
234
|
-
stroke-width: 0.375rem;
|
|
235
|
-
}
|
|
236
228
|
|
|
237
|
-
.eds-
|
|
238
|
-
|
|
229
|
+
.eds-dropdown__input::-moz-placeholder {
|
|
230
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
239
231
|
}
|
|
240
|
-
|
|
241
|
-
|
|
232
|
+
|
|
233
|
+
.eds-dropdown__input::placeholder {
|
|
234
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
242
235
|
}
|
|
243
236
|
|
|
244
|
-
.eds-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
position: relative;
|
|
249
|
-
margin-right: 0.75rem;
|
|
250
|
-
height: 1.25rem;
|
|
251
|
-
width: 1.25rem;
|
|
252
|
-
border: 0.125rem solid #181c56;
|
|
253
|
-
border-radius: 0.0625rem;
|
|
254
|
-
background-color: transparent;
|
|
255
|
-
color: #ffffff;
|
|
237
|
+
.eds-dropdown__selected-item {
|
|
238
|
+
overflow-x: hidden;
|
|
239
|
+
text-overflow: ellipsis;
|
|
240
|
+
white-space: nowrap;
|
|
256
241
|
}
|
|
257
242
|
|
|
258
|
-
.eds-
|
|
259
|
-
background
|
|
243
|
+
.eds-dropdown__clear-button {
|
|
244
|
+
background: none;
|
|
245
|
+
border: none;
|
|
246
|
+
border-radius: 50%;
|
|
247
|
+
color: inherit;
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
display: flex;
|
|
250
|
+
font: inherit;
|
|
251
|
+
font-size: 1rem;
|
|
252
|
+
line-height: 1rem;
|
|
253
|
+
padding: 0.5rem;
|
|
260
254
|
}
|
|
261
|
-
.eds-
|
|
262
|
-
|
|
255
|
+
.eds-dropdown__clear-button:hover {
|
|
256
|
+
background: #f3f3f3;
|
|
263
257
|
}
|
|
264
|
-
.eds-
|
|
265
|
-
|
|
266
|
-
|
|
258
|
+
.eds-dropdown__clear-button:focus {
|
|
259
|
+
outline-offset: 0.125rem;
|
|
260
|
+
outline: none;
|
|
261
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
267
262
|
}
|
|
268
263
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
264
|
+
.eds-dropdown__divider {
|
|
265
|
+
content: "";
|
|
266
|
+
display: block;
|
|
267
|
+
background-color: #e9e9e9;
|
|
268
|
+
height: 1.5rem;
|
|
269
|
+
width: 1px;
|
|
270
|
+
}
|
|
271
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
|
|
272
|
+
background-color: #8285a8;
|
|
273
273
|
}
|
|
274
274
|
/* DO NOT CHANGE!*/
|
|
275
275
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/dropdown",
|
|
3
|
-
"version": "6.0.0
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/dropdown.esm.js",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/a11y": "^0.2.
|
|
31
|
-
"@entur/button": "^3.2.
|
|
32
|
-
"@entur/chip": "^0.7.
|
|
33
|
-
"@entur/form": "^8.0.0
|
|
34
|
-
"@entur/icons": "^7.0.0
|
|
35
|
-
"@entur/loader": "^0.5.
|
|
36
|
-
"@entur/tokens": "^3.15.
|
|
37
|
-
"@entur/tooltip": "^3.0.0
|
|
30
|
+
"@entur/a11y": "^0.2.87",
|
|
31
|
+
"@entur/button": "^3.2.28",
|
|
32
|
+
"@entur/chip": "^0.7.15",
|
|
33
|
+
"@entur/form": "^8.0.0",
|
|
34
|
+
"@entur/icons": "^7.0.0",
|
|
35
|
+
"@entur/loader": "^0.5.6",
|
|
36
|
+
"@entur/tokens": "^3.15.2",
|
|
37
|
+
"@entur/tooltip": "^3.0.0",
|
|
38
38
|
"@entur/utils": "^0.11.1",
|
|
39
39
|
"@floating-ui/react-dom": "^2.1.0",
|
|
40
40
|
"classnames": "^2.3.1",
|
|
41
41
|
"downshift": "^8.3.3"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "cff2157007648ca73944d215e9f3f03160c96f13"
|
|
44
44
|
}
|