@entur/dropdown 6.0.11-alpha.0 → 6.0.12
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/dropdown.cjs.development.js +36 -12
- package/dist/dropdown.cjs.development.js.map +1 -1
- package/dist/dropdown.cjs.production.min.js +1 -1
- package/dist/dropdown.cjs.production.min.js.map +1 -1
- package/dist/dropdown.esm.js +37 -13
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/styles.css +153 -153
- package/package.json +9 -9
package/dist/styles.css
CHANGED
|
@@ -1,73 +1,93 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-
|
|
4
|
-
border-radius: 0.25rem;
|
|
5
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
6
|
-
display: none;
|
|
7
|
-
list-style: none;
|
|
8
|
-
margin: 0;
|
|
9
|
-
max-height: 50vh;
|
|
10
|
-
padding: 0;
|
|
3
|
+
.eds-multi-select {
|
|
11
4
|
position: relative;
|
|
12
|
-
overflow-y: auto;
|
|
13
|
-
width: 100%;
|
|
14
|
-
z-index: 20;
|
|
15
5
|
}
|
|
16
|
-
.eds-
|
|
17
|
-
|
|
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;
|
|
18
13
|
}
|
|
19
|
-
.eds-
|
|
20
|
-
|
|
14
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
15
|
+
margin-left: 0.25rem;
|
|
16
|
+
white-space: nowrap;
|
|
21
17
|
}
|
|
22
|
-
.eds-
|
|
23
|
-
|
|
18
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
|
|
19
|
+
color: #181c56;
|
|
24
20
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
max-height: 30vh;
|
|
28
|
-
}
|
|
21
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip:focus {
|
|
22
|
+
outline-offset: 0.125rem;
|
|
29
23
|
}
|
|
30
|
-
.eds-
|
|
31
|
-
align-items: center;
|
|
32
|
-
background-color: #f8f8f8;
|
|
33
|
-
border-bottom: 0.125rem solid #e9e9e9;
|
|
34
|
-
border-left: 0.125rem solid #e9e9e9;
|
|
35
|
-
border-right: 0.125rem solid #e9e9e9;
|
|
24
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
36
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;
|
|
37
35
|
display: flex;
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
align-items: center;
|
|
37
|
+
}
|
|
38
|
+
.eds-multi-select__placeholder {
|
|
39
|
+
padding-left: 1.5rem;
|
|
40
|
+
line-height: 1.375rem;
|
|
40
41
|
font-size: 1rem;
|
|
41
|
-
line-height: 1.25rem;
|
|
42
|
-
padding: 0.75rem 1rem;
|
|
43
|
-
width: 100%;
|
|
44
42
|
}
|
|
45
|
-
.eds-
|
|
46
|
-
|
|
43
|
+
.eds-checkbox-icon {
|
|
44
|
+
height: 1rem;
|
|
45
|
+
width: 1rem;
|
|
46
|
+
visibility: hidden;
|
|
47
47
|
}
|
|
48
|
-
.eds-
|
|
49
|
-
|
|
48
|
+
.eds-checkbox-icon__path {
|
|
49
|
+
transform-origin: 50% 50%;
|
|
50
|
+
stroke-dasharray: 48;
|
|
51
|
+
stroke-dashoffset: 48;
|
|
52
|
+
stroke-width: 0.375rem;
|
|
50
53
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
background-color: #ffffff;
|
|
54
|
+
|
|
55
|
+
.eds-multiselect {
|
|
56
|
+
position: relative;
|
|
55
57
|
}
|
|
56
|
-
.eds-
|
|
57
|
-
|
|
58
|
+
.eds-multiselect__button {
|
|
59
|
+
text-overflow: ellipsis;
|
|
58
60
|
}
|
|
59
|
-
|
|
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;
|
|
61
74
|
}
|
|
62
|
-
|
|
63
|
-
|
|
75
|
+
|
|
76
|
+
.eds-multiselect-checkbox--checked {
|
|
77
|
+
background-color: #181c56;
|
|
64
78
|
}
|
|
65
|
-
.eds-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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
|
+
}
|
|
71
91
|
}
|
|
72
92
|
/* DO NOT CHANGE!*/
|
|
73
93
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -94,6 +114,41 @@
|
|
|
94
114
|
.eds-form-control.eds-dropdown__input::placeholder {
|
|
95
115
|
transition: none;
|
|
96
116
|
}
|
|
117
|
+
.eds-inline-spinner {
|
|
118
|
+
align-items: center;
|
|
119
|
+
display: flex;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
height: 100%;
|
|
122
|
+
width: 100%;
|
|
123
|
+
}
|
|
124
|
+
/* DO NOT CHANGE!*/
|
|
125
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
126
|
+
.eds-dropdown__toggle-button {
|
|
127
|
+
-webkit-appearance: none;
|
|
128
|
+
-moz-appearance: none;
|
|
129
|
+
appearance: none;
|
|
130
|
+
background: none;
|
|
131
|
+
border: none;
|
|
132
|
+
border-radius: 0;
|
|
133
|
+
color: inherit;
|
|
134
|
+
font-size: inherit;
|
|
135
|
+
font-family: inherit;
|
|
136
|
+
margin-right: -0.75rem;
|
|
137
|
+
padding: 0.5rem;
|
|
138
|
+
display: flex;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
}
|
|
141
|
+
.eds-dropdown__toggle-button--open svg {
|
|
142
|
+
transform: rotate(180deg);
|
|
143
|
+
}
|
|
144
|
+
.eds-dropdown__toggle-button:focus {
|
|
145
|
+
outline-offset: 0.125rem;
|
|
146
|
+
outline: none;
|
|
147
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
148
|
+
}
|
|
149
|
+
.eds-contrast .eds-dropdown__toggle-button:focus {
|
|
150
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
151
|
+
}
|
|
97
152
|
/* DO NOT CHANGE!*/
|
|
98
153
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
99
154
|
.eds-dropdown-wrapper {
|
|
@@ -154,122 +209,67 @@
|
|
|
154
209
|
}
|
|
155
210
|
/* DO NOT CHANGE!*/
|
|
156
211
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
157
|
-
.eds-
|
|
158
|
-
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
font-size: inherit;
|
|
166
|
-
font-family: inherit;
|
|
167
|
-
margin-right: -0.75rem;
|
|
168
|
-
padding: 0.5rem;
|
|
169
|
-
display: flex;
|
|
170
|
-
justify-content: center;
|
|
171
|
-
}
|
|
172
|
-
.eds-dropdown__toggle-button--open svg {
|
|
173
|
-
transform: rotate(180deg);
|
|
174
|
-
}
|
|
175
|
-
.eds-dropdown__toggle-button:focus {
|
|
176
|
-
outline-offset: 0.125rem;
|
|
177
|
-
outline: none;
|
|
178
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
179
|
-
}
|
|
180
|
-
.eds-contrast .eds-dropdown__toggle-button:focus {
|
|
181
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
182
|
-
}
|
|
183
|
-
/* DO NOT CHANGE!*/
|
|
184
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
185
|
-
.eds-multi-select {
|
|
212
|
+
.eds-dropdown-list {
|
|
213
|
+
border-radius: 0.25rem;
|
|
214
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
215
|
+
display: none;
|
|
216
|
+
list-style: none;
|
|
217
|
+
margin: 0;
|
|
218
|
+
max-height: 50vh;
|
|
219
|
+
padding: 0;
|
|
186
220
|
position: relative;
|
|
221
|
+
overflow-y: auto;
|
|
222
|
+
width: 100%;
|
|
223
|
+
z-index: 20;
|
|
187
224
|
}
|
|
188
|
-
.eds-
|
|
189
|
-
|
|
190
|
-
align-items: center;
|
|
191
|
-
flex-wrap: wrap;
|
|
192
|
-
position: relative;
|
|
193
|
-
flex: 1 1 0%;
|
|
194
|
-
padding: 0.25rem;
|
|
225
|
+
.eds-contrast .eds-dropdown-list {
|
|
226
|
+
box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
|
|
195
227
|
}
|
|
196
|
-
.eds-
|
|
197
|
-
|
|
198
|
-
white-space: nowrap;
|
|
228
|
+
.eds-dropdown-list--open {
|
|
229
|
+
display: inline-block;
|
|
199
230
|
}
|
|
200
|
-
.eds-
|
|
201
|
-
|
|
231
|
+
.eds-dropdown-list:focus {
|
|
232
|
+
outline: none;
|
|
202
233
|
}
|
|
203
|
-
|
|
204
|
-
|
|
234
|
+
@media all and (min-width: 50rem) {
|
|
235
|
+
.eds-dropdown-list {
|
|
236
|
+
max-height: 30vh;
|
|
237
|
+
}
|
|
205
238
|
}
|
|
206
|
-
.eds-
|
|
239
|
+
.eds-dropdown-list__item {
|
|
240
|
+
align-items: center;
|
|
241
|
+
background-color: #f8f8f8;
|
|
242
|
+
border-bottom: 0.125rem solid #e9e9e9;
|
|
243
|
+
border-left: 0.125rem solid #e9e9e9;
|
|
244
|
+
border-right: 0.125rem solid #e9e9e9;
|
|
207
245
|
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;
|
|
213
|
-
}
|
|
214
|
-
.eds-multi-select__input {
|
|
215
|
-
flex: 1 1;
|
|
216
|
-
min-height: 44px;
|
|
217
246
|
display: flex;
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
.eds-multi-select__placeholder {
|
|
221
|
-
padding-left: 1.5rem;
|
|
222
|
-
line-height: 1.375rem;
|
|
247
|
+
justify-content: space-between;
|
|
248
|
+
font-family: inherit;
|
|
223
249
|
font-size: 1rem;
|
|
250
|
+
line-height: 1.25rem;
|
|
251
|
+
padding: 0.75rem 1rem;
|
|
252
|
+
width: 100%;
|
|
224
253
|
}
|
|
225
|
-
.eds-
|
|
226
|
-
|
|
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
|
-
|
|
237
|
-
.eds-multiselect {
|
|
238
|
-
position: relative;
|
|
239
|
-
}
|
|
240
|
-
.eds-multiselect__button {
|
|
241
|
-
text-overflow: ellipsis;
|
|
254
|
+
.eds-dropdown-list__item:first-child {
|
|
255
|
+
border-top: 0.125rem solid #e9e9e9;
|
|
242
256
|
}
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
display: inline-flex;
|
|
246
|
-
justify-content: center;
|
|
247
|
-
align-items: center;
|
|
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;
|
|
257
|
+
.eds-dropdown-list__item:last-child {
|
|
258
|
+
border-bottom: none;
|
|
256
259
|
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
+
.eds-contrast .eds-dropdown-list__item {
|
|
261
|
+
color: #181c56;
|
|
262
|
+
border-color: #54568c;
|
|
263
|
+
background-color: #ffffff;
|
|
260
264
|
}
|
|
261
|
-
.eds-
|
|
262
|
-
|
|
265
|
+
.eds-dropdown-list__item--highlighted {
|
|
266
|
+
background-color: #d1d4e3;
|
|
263
267
|
}
|
|
264
|
-
.eds-
|
|
265
|
-
|
|
266
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
268
|
+
.eds-contrast .eds-dropdown-list__item--highlighted {
|
|
269
|
+
background-color: #d1d4e3;
|
|
267
270
|
}
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
100% {
|
|
271
|
-
stroke-dashoffset: 0;
|
|
272
|
-
}
|
|
271
|
+
.eds-dropdown-list-icon {
|
|
272
|
+
margin-left: 0.75rem;
|
|
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.
|
|
3
|
+
"version": "6.0.12",
|
|
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.26
|
|
33
|
-
"@entur/form": "^8.1.8
|
|
30
|
+
"@entur/a11y": "^0.2.93",
|
|
31
|
+
"@entur/button": "^3.2.36",
|
|
32
|
+
"@entur/chip": "^0.7.26",
|
|
33
|
+
"@entur/form": "^8.1.8",
|
|
34
34
|
"@entur/icons": "^7.5.0",
|
|
35
|
-
"@entur/loader": "^0.5.
|
|
35
|
+
"@entur/loader": "^0.5.14",
|
|
36
36
|
"@entur/tokens": "^3.17.3",
|
|
37
|
-
"@entur/tooltip": "^5.1.4
|
|
38
|
-
"@entur/utils": "^
|
|
37
|
+
"@entur/tooltip": "^5.1.4",
|
|
38
|
+
"@entur/utils": "^0.12.1",
|
|
39
39
|
"@floating-ui/react-dom": "^2.1.0",
|
|
40
40
|
"classnames": "^2.3.1",
|
|
41
41
|
"downshift": "^9.0.8"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "5c9836f2bcab799e31cc52b6fe72c6e198947a71"
|
|
44
44
|
}
|