@entur/dropdown 5.5.0 → 6.0.0-beta.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/dropdown.cjs.development.js +31 -40
- 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 +31 -40
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/styles.css +132 -184
- package/package.json +8 -8
package/dist/styles.css
CHANGED
|
@@ -1,96 +1,5 @@
|
|
|
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. */
|
|
94
3
|
.eds-dropdown-list {
|
|
95
4
|
border-radius: 0.25rem;
|
|
96
5
|
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
@@ -153,13 +62,6 @@
|
|
|
153
62
|
.eds-dropdown-list-icon {
|
|
154
63
|
margin-left: 0.75rem;
|
|
155
64
|
}
|
|
156
|
-
.eds-inline-spinner {
|
|
157
|
-
align-items: center;
|
|
158
|
-
display: flex;
|
|
159
|
-
justify-content: center;
|
|
160
|
-
height: 100%;
|
|
161
|
-
width: 100%;
|
|
162
|
-
}
|
|
163
65
|
/* DO NOT CHANGE!*/
|
|
164
66
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
165
67
|
.eds-dropdown-wrapper {
|
|
@@ -218,6 +120,38 @@
|
|
|
218
120
|
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
|
|
219
121
|
background-color: #8285a8;
|
|
220
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
|
+
.eds-dropdown__searchable-selected-item {
|
|
133
|
+
display: block;
|
|
134
|
+
font-size: 1rem;
|
|
135
|
+
line-height: 1rem;
|
|
136
|
+
margin-right: -1rem;
|
|
137
|
+
padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
|
|
138
|
+
font-family: inherit;
|
|
139
|
+
overflow-x: hidden;
|
|
140
|
+
text-overflow: ellipsis;
|
|
141
|
+
white-space: nowrap;
|
|
142
|
+
}
|
|
143
|
+
.eds-dropdown__searchable-selected-item__wrapper {
|
|
144
|
+
max-width: 65%;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.eds-form-control.eds-dropdown__input::-moz-placeholder {
|
|
148
|
+
-moz-transition: none;
|
|
149
|
+
transition: none;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.eds-form-control.eds-dropdown__input::placeholder {
|
|
153
|
+
transition: none;
|
|
154
|
+
}
|
|
221
155
|
/* DO NOT CHANGE!*/
|
|
222
156
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
223
157
|
.eds-dropdown__toggle-button {
|
|
@@ -248,59 +182,125 @@
|
|
|
248
182
|
}
|
|
249
183
|
/* DO NOT CHANGE!*/
|
|
250
184
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
251
|
-
.eds-
|
|
252
|
-
|
|
185
|
+
.eds-multi-select {
|
|
186
|
+
position: relative;
|
|
187
|
+
}
|
|
188
|
+
.eds-multi-select__selected-items {
|
|
189
|
+
display: flex;
|
|
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;
|
|
213
|
+
}
|
|
214
|
+
.eds-multi-select__input {
|
|
215
|
+
flex: 1 1;
|
|
216
|
+
min-height: 44px;
|
|
217
|
+
display: flex;
|
|
218
|
+
align-items: center;
|
|
219
|
+
}
|
|
220
|
+
.eds-multi-select__placeholder {
|
|
221
|
+
padding-left: 1.5rem;
|
|
222
|
+
line-height: 1.375rem;
|
|
253
223
|
font-size: 1rem;
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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
|
+
|
|
237
|
+
.eds-multiselect {
|
|
238
|
+
position: relative;
|
|
239
|
+
}
|
|
240
|
+
.eds-multiselect__button {
|
|
259
241
|
text-overflow: ellipsis;
|
|
260
|
-
white-space: nowrap;
|
|
261
242
|
}
|
|
262
|
-
|
|
263
|
-
|
|
243
|
+
|
|
244
|
+
.eds-multiselect-checkbox {
|
|
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;
|
|
264
256
|
}
|
|
265
257
|
|
|
266
|
-
.eds-
|
|
267
|
-
-
|
|
268
|
-
|
|
258
|
+
.eds-multiselect-checkbox--checked {
|
|
259
|
+
background-color: #181c56;
|
|
260
|
+
}
|
|
261
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon {
|
|
262
|
+
visibility: visible;
|
|
263
|
+
}
|
|
264
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon__path {
|
|
265
|
+
stroke: #ffffff;
|
|
266
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
269
267
|
}
|
|
270
268
|
|
|
271
|
-
|
|
272
|
-
|
|
269
|
+
@keyframes stroke {
|
|
270
|
+
100% {
|
|
271
|
+
stroke-dashoffset: 0;
|
|
272
|
+
}
|
|
273
273
|
}
|
|
274
274
|
/* DO NOT CHANGE!*/
|
|
275
275
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
276
276
|
.eds-dropdown__list {
|
|
277
|
+
box-sizing: content-box;
|
|
278
|
+
z-index: 20;
|
|
279
|
+
width: 100%;
|
|
280
|
+
max-height: 50vh;
|
|
281
|
+
overflow-y: auto;
|
|
282
|
+
padding: 0;
|
|
283
|
+
margin: 0;
|
|
277
284
|
list-style: none;
|
|
278
|
-
border-radius: 0.25rem;
|
|
279
285
|
border: 0.125rem solid var(--components-form-basemenu-border);
|
|
286
|
+
border-radius: 0.25rem;
|
|
280
287
|
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
281
|
-
padding: 0;
|
|
282
|
-
margin: 0;
|
|
283
|
-
max-height: 50vh;
|
|
284
|
-
overflow-y: auto;
|
|
285
|
-
width: 100%;
|
|
286
|
-
z-index: 20;
|
|
287
288
|
}
|
|
288
289
|
.eds-dropdown__list:focus {
|
|
289
290
|
outline: none;
|
|
290
291
|
}
|
|
291
292
|
.eds-dropdown__list__item {
|
|
292
|
-
background-color: var(--components-form-basemenu-fill-default);
|
|
293
|
-
color: var(--components-form-basemenu-text);
|
|
294
293
|
display: flex;
|
|
295
294
|
align-items: center;
|
|
296
295
|
justify-content: flex-start;
|
|
296
|
+
padding: 0.75rem 1rem;
|
|
297
297
|
font-family: inherit;
|
|
298
298
|
font-size: 1rem;
|
|
299
|
+
word-break: break-word;
|
|
299
300
|
line-height: 1.25rem;
|
|
300
|
-
padding: 0.75rem 1rem;
|
|
301
|
-
width: 100%;
|
|
302
301
|
overflow-x: hidden;
|
|
303
|
-
|
|
302
|
+
color: var(--components-form-basemenu-text);
|
|
303
|
+
background-color: var(--components-form-basemenu-fill-default);
|
|
304
304
|
}
|
|
305
305
|
.eds-dropdown__list__item:last-child {
|
|
306
306
|
border-bottom: none;
|
|
@@ -462,18 +462,6 @@
|
|
|
462
462
|
}
|
|
463
463
|
/* DO NOT CHANGE!*/
|
|
464
464
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
465
|
-
.eds-dropdown__wrapper {
|
|
466
|
-
position: relative;
|
|
467
|
-
width: 100%;
|
|
468
|
-
min-width: 6rem;
|
|
469
|
-
max-width: 100%;
|
|
470
|
-
}
|
|
471
|
-
.eds-dropdown__wrapper--has-tooltip {
|
|
472
|
-
padding-right: 2rem;
|
|
473
|
-
}
|
|
474
|
-
.eds-dropdown__wrapper--has-tooltip .eds-dropdown__list {
|
|
475
|
-
width: calc(100% - 2rem);
|
|
476
|
-
}
|
|
477
465
|
.eds-dropdown__input {
|
|
478
466
|
flex: 1;
|
|
479
467
|
width: 0;
|
|
@@ -486,13 +474,14 @@
|
|
|
486
474
|
display: flex;
|
|
487
475
|
}
|
|
488
476
|
.eds-dropdown__selected-item {
|
|
489
|
-
cursor: pointer;
|
|
490
477
|
flex: 1;
|
|
478
|
+
height: 100%;
|
|
479
|
+
min-height: 2.75rem;
|
|
480
|
+
padding: 1.25rem 0rem 0.25rem;
|
|
491
481
|
overflow-x: hidden;
|
|
492
482
|
text-overflow: ellipsis;
|
|
493
483
|
line-height: 1rem;
|
|
494
|
-
|
|
495
|
-
min-height: 2.75rem;
|
|
484
|
+
cursor: pointer;
|
|
496
485
|
}
|
|
497
486
|
.eds-dropdown__selected-item.focus-visible {
|
|
498
487
|
outline: none;
|
|
@@ -505,22 +494,15 @@
|
|
|
505
494
|
flex: 1;
|
|
506
495
|
overflow-x: hidden;
|
|
507
496
|
text-overflow: ellipsis;
|
|
497
|
+
padding: 1.375rem 0rem 0.25rem;
|
|
508
498
|
white-space: nowrap;
|
|
509
|
-
margin-right: -1rem;
|
|
510
|
-
padding: 1.375rem 0rem 0.25rem 1rem;
|
|
511
|
-
font-family: inherit;
|
|
512
499
|
line-height: 1rem;
|
|
500
|
+
font-family: inherit;
|
|
513
501
|
cursor: text;
|
|
514
502
|
}
|
|
515
503
|
.eds-dropdown--searchable__selected-item--hidden {
|
|
516
504
|
flex: 0;
|
|
517
505
|
}
|
|
518
|
-
.eds-dropdown--searchable .eds-input-group__label {
|
|
519
|
-
top: 0;
|
|
520
|
-
}
|
|
521
|
-
.eds-dropdown--searchable.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
522
|
-
top: 0.375rem;
|
|
523
|
-
}
|
|
524
506
|
.eds-dropdown--multiselect__selected-items-and-input {
|
|
525
507
|
display: flex;
|
|
526
508
|
flex-wrap: wrap;
|
|
@@ -530,7 +512,7 @@
|
|
|
530
512
|
cursor: text;
|
|
531
513
|
}
|
|
532
514
|
.eds-dropdown--multiselect__selected-items-and-input--filled {
|
|
533
|
-
padding: 1.25rem 0rem 0.25rem
|
|
515
|
+
padding: 1.25rem 0rem 0.25rem;
|
|
534
516
|
}
|
|
535
517
|
.eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
|
|
536
518
|
padding: 0;
|
|
@@ -544,40 +526,6 @@
|
|
|
544
526
|
width: 1rem;
|
|
545
527
|
height: 1rem;
|
|
546
528
|
}
|
|
547
|
-
.eds-dropdown--multiselect .eds-input-group__label {
|
|
548
|
-
top: 0;
|
|
549
|
-
}
|
|
550
|
-
.eds-dropdown--multiselect.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
551
|
-
top: 0.375rem;
|
|
552
|
-
}
|
|
553
|
-
.eds-dropdown.eds-form-control-wrapper {
|
|
554
|
-
align-items: start;
|
|
555
|
-
}
|
|
556
|
-
.eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
|
|
557
|
-
font-size: 1rem;
|
|
558
|
-
position: absolute;
|
|
559
|
-
line-height: 1rem;
|
|
560
|
-
padding: 1rem;
|
|
561
|
-
padding-left: 0;
|
|
562
|
-
margin-left: 1rem;
|
|
563
|
-
top: 0;
|
|
564
|
-
transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
|
|
565
|
-
}
|
|
566
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
|
|
567
|
-
top: 1rem;
|
|
568
|
-
}
|
|
569
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
|
|
570
|
-
top: 0.25rem;
|
|
571
|
-
}
|
|
572
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append.eds-form-control__append--tooltip {
|
|
573
|
-
color: var(--primary-text-color);
|
|
574
|
-
position: absolute;
|
|
575
|
-
top: 0.75rem;
|
|
576
|
-
right: -3rem;
|
|
577
|
-
}
|
|
578
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
|
|
579
|
-
height: 2rem;
|
|
580
|
-
}
|
|
581
529
|
.eds-dropdown--native + .eds-form-control__append {
|
|
582
530
|
margin-left: -2em;
|
|
583
531
|
pointer-events: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/dropdown",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0-beta.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/dropdown.esm.js",
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@entur/a11y": "^0.2.86",
|
|
31
|
-
"@entur/button": "^3.2.
|
|
32
|
-
"@entur/chip": "^0.7.
|
|
33
|
-
"@entur/form": "^
|
|
34
|
-
"@entur/icons": "^
|
|
35
|
-
"@entur/loader": "^0.5.
|
|
31
|
+
"@entur/button": "^3.2.27-beta.0",
|
|
32
|
+
"@entur/chip": "^0.7.14-beta.0",
|
|
33
|
+
"@entur/form": "^8.0.0-beta.0",
|
|
34
|
+
"@entur/icons": "^7.0.0-beta.0",
|
|
35
|
+
"@entur/loader": "^0.5.5-beta.0",
|
|
36
36
|
"@entur/tokens": "^3.15.1",
|
|
37
|
-
"@entur/tooltip": "^
|
|
37
|
+
"@entur/tooltip": "^3.0.0-beta.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": "c8e99ab901c06e9faf622f1a1f88e1b0e7e34419"
|
|
44
44
|
}
|