@entur/dropdown 5.4.11 → 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/components/DropdownList.d.ts +2 -1
- package/dist/dropdown.cjs.development.js +96 -51
- 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 +99 -54
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/styles.css +138 -192
- package/package.json +9 -8
package/dist/styles.css
CHANGED
|
@@ -1,121 +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
|
-
.eds-dropdown__searchable-selected-item {
|
|
95
|
-
display: block;
|
|
96
|
-
font-size: 1rem;
|
|
97
|
-
line-height: 1rem;
|
|
98
|
-
margin-right: -1rem;
|
|
99
|
-
padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
|
|
100
|
-
font-family: inherit;
|
|
101
|
-
overflow-x: hidden;
|
|
102
|
-
text-overflow: ellipsis;
|
|
103
|
-
white-space: nowrap;
|
|
104
|
-
}
|
|
105
|
-
.eds-dropdown__searchable-selected-item__wrapper {
|
|
106
|
-
max-width: 65%;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.eds-form-control.eds-dropdown__input::-moz-placeholder {
|
|
110
|
-
-moz-transition: none;
|
|
111
|
-
transition: none;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.eds-form-control.eds-dropdown__input::placeholder {
|
|
115
|
-
transition: none;
|
|
116
|
-
}
|
|
117
|
-
/* DO NOT CHANGE!*/
|
|
118
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
119
3
|
.eds-dropdown-list {
|
|
120
4
|
border-radius: 0.25rem;
|
|
121
5
|
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
@@ -236,6 +120,38 @@
|
|
|
236
120
|
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
|
|
237
121
|
background-color: #8285a8;
|
|
238
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
|
+
}
|
|
239
155
|
/* DO NOT CHANGE!*/
|
|
240
156
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
241
157
|
.eds-dropdown__toggle-button {
|
|
@@ -264,45 +180,127 @@
|
|
|
264
180
|
.eds-contrast .eds-dropdown__toggle-button:focus {
|
|
265
181
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
266
182
|
}
|
|
267
|
-
|
|
183
|
+
/* DO NOT CHANGE!*/
|
|
184
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
185
|
+
.eds-multi-select {
|
|
186
|
+
position: relative;
|
|
187
|
+
}
|
|
188
|
+
.eds-multi-select__selected-items {
|
|
189
|
+
display: flex;
|
|
268
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;
|
|
269
217
|
display: flex;
|
|
218
|
+
align-items: center;
|
|
219
|
+
}
|
|
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
|
+
|
|
237
|
+
.eds-multiselect {
|
|
238
|
+
position: relative;
|
|
239
|
+
}
|
|
240
|
+
.eds-multiselect__button {
|
|
241
|
+
text-overflow: ellipsis;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.eds-multiselect-checkbox {
|
|
245
|
+
display: inline-flex;
|
|
270
246
|
justify-content: center;
|
|
271
|
-
|
|
272
|
-
|
|
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;
|
|
256
|
+
}
|
|
257
|
+
|
|
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;
|
|
267
|
+
}
|
|
268
|
+
|
|
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
|
-
|
|
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;
|
|
278
284
|
list-style: none;
|
|
279
|
-
border-radius: 0.25rem;
|
|
280
285
|
border: 0.125rem solid var(--components-form-basemenu-border);
|
|
286
|
+
border-radius: 0.25rem;
|
|
281
287
|
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
282
|
-
padding: 0;
|
|
283
|
-
margin: 0;
|
|
284
|
-
margin-top: 0.5rem;
|
|
285
|
-
max-height: 50vh;
|
|
286
|
-
overflow-y: auto;
|
|
287
|
-
width: 100%;
|
|
288
|
-
z-index: 20;
|
|
289
288
|
}
|
|
290
289
|
.eds-dropdown__list:focus {
|
|
291
290
|
outline: none;
|
|
292
291
|
}
|
|
293
292
|
.eds-dropdown__list__item {
|
|
294
|
-
background-color: var(--components-form-basemenu-fill-default);
|
|
295
|
-
color: var(--components-form-basemenu-text);
|
|
296
293
|
display: flex;
|
|
297
294
|
align-items: center;
|
|
298
295
|
justify-content: flex-start;
|
|
296
|
+
padding: 0.75rem 1rem;
|
|
299
297
|
font-family: inherit;
|
|
300
298
|
font-size: 1rem;
|
|
299
|
+
word-break: break-word;
|
|
301
300
|
line-height: 1.25rem;
|
|
302
|
-
padding: 0.75rem 1rem;
|
|
303
|
-
width: 100%;
|
|
304
301
|
overflow-x: hidden;
|
|
305
|
-
|
|
302
|
+
color: var(--components-form-basemenu-text);
|
|
303
|
+
background-color: var(--components-form-basemenu-fill-default);
|
|
306
304
|
}
|
|
307
305
|
.eds-dropdown__list__item:last-child {
|
|
308
306
|
border-bottom: none;
|
|
@@ -464,18 +462,6 @@
|
|
|
464
462
|
}
|
|
465
463
|
/* DO NOT CHANGE!*/
|
|
466
464
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
467
|
-
.eds-dropdown__wrapper {
|
|
468
|
-
position: relative;
|
|
469
|
-
width: 100%;
|
|
470
|
-
min-width: 6rem;
|
|
471
|
-
max-width: 100%;
|
|
472
|
-
}
|
|
473
|
-
.eds-dropdown__wrapper--has-tooltip {
|
|
474
|
-
padding-right: 2rem;
|
|
475
|
-
}
|
|
476
|
-
.eds-dropdown__wrapper--has-tooltip .eds-dropdown__list {
|
|
477
|
-
width: calc(100% - 2rem);
|
|
478
|
-
}
|
|
479
465
|
.eds-dropdown__input {
|
|
480
466
|
flex: 1;
|
|
481
467
|
width: 0;
|
|
@@ -488,13 +474,14 @@
|
|
|
488
474
|
display: flex;
|
|
489
475
|
}
|
|
490
476
|
.eds-dropdown__selected-item {
|
|
491
|
-
cursor: pointer;
|
|
492
477
|
flex: 1;
|
|
478
|
+
height: 100%;
|
|
479
|
+
min-height: 2.75rem;
|
|
480
|
+
padding: 1.25rem 0rem 0.25rem;
|
|
493
481
|
overflow-x: hidden;
|
|
494
482
|
text-overflow: ellipsis;
|
|
495
483
|
line-height: 1rem;
|
|
496
|
-
|
|
497
|
-
min-height: 2.75rem;
|
|
484
|
+
cursor: pointer;
|
|
498
485
|
}
|
|
499
486
|
.eds-dropdown__selected-item.focus-visible {
|
|
500
487
|
outline: none;
|
|
@@ -507,22 +494,15 @@
|
|
|
507
494
|
flex: 1;
|
|
508
495
|
overflow-x: hidden;
|
|
509
496
|
text-overflow: ellipsis;
|
|
497
|
+
padding: 1.375rem 0rem 0.25rem;
|
|
510
498
|
white-space: nowrap;
|
|
511
|
-
margin-right: -1rem;
|
|
512
|
-
padding: 1.375rem 0rem 0.25rem 1rem;
|
|
513
|
-
font-family: inherit;
|
|
514
499
|
line-height: 1rem;
|
|
500
|
+
font-family: inherit;
|
|
515
501
|
cursor: text;
|
|
516
502
|
}
|
|
517
503
|
.eds-dropdown--searchable__selected-item--hidden {
|
|
518
504
|
flex: 0;
|
|
519
505
|
}
|
|
520
|
-
.eds-dropdown--searchable .eds-input-group__label {
|
|
521
|
-
top: 0;
|
|
522
|
-
}
|
|
523
|
-
.eds-dropdown--searchable.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
524
|
-
top: 0.375rem;
|
|
525
|
-
}
|
|
526
506
|
.eds-dropdown--multiselect__selected-items-and-input {
|
|
527
507
|
display: flex;
|
|
528
508
|
flex-wrap: wrap;
|
|
@@ -532,7 +512,7 @@
|
|
|
532
512
|
cursor: text;
|
|
533
513
|
}
|
|
534
514
|
.eds-dropdown--multiselect__selected-items-and-input--filled {
|
|
535
|
-
padding: 1.25rem 0rem 0.25rem
|
|
515
|
+
padding: 1.25rem 0rem 0.25rem;
|
|
536
516
|
}
|
|
537
517
|
.eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
|
|
538
518
|
padding: 0;
|
|
@@ -546,40 +526,6 @@
|
|
|
546
526
|
width: 1rem;
|
|
547
527
|
height: 1rem;
|
|
548
528
|
}
|
|
549
|
-
.eds-dropdown--multiselect .eds-input-group__label {
|
|
550
|
-
top: 0;
|
|
551
|
-
}
|
|
552
|
-
.eds-dropdown--multiselect.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
553
|
-
top: 0.375rem;
|
|
554
|
-
}
|
|
555
|
-
.eds-dropdown.eds-form-control-wrapper {
|
|
556
|
-
align-items: start;
|
|
557
|
-
}
|
|
558
|
-
.eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
|
|
559
|
-
font-size: 1rem;
|
|
560
|
-
position: absolute;
|
|
561
|
-
line-height: 1rem;
|
|
562
|
-
padding: 1rem;
|
|
563
|
-
padding-left: 0;
|
|
564
|
-
margin-left: 1rem;
|
|
565
|
-
top: 0;
|
|
566
|
-
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;
|
|
567
|
-
}
|
|
568
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
|
|
569
|
-
top: 1rem;
|
|
570
|
-
}
|
|
571
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
|
|
572
|
-
top: 0.25rem;
|
|
573
|
-
}
|
|
574
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append.eds-form-control__append--tooltip {
|
|
575
|
-
color: var(--primary-text-color);
|
|
576
|
-
position: absolute;
|
|
577
|
-
top: 0.75rem;
|
|
578
|
-
right: -3rem;
|
|
579
|
-
}
|
|
580
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
|
|
581
|
-
height: 2rem;
|
|
582
|
-
}
|
|
583
529
|
.eds-dropdown--native + .eds-form-control__append {
|
|
584
530
|
margin-left: -2em;
|
|
585
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,16 +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
|
+
"@floating-ui/react-dom": "^2.1.0",
|
|
39
40
|
"classnames": "^2.3.1",
|
|
40
41
|
"downshift": "^8.3.3"
|
|
41
42
|
},
|
|
42
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "c8e99ab901c06e9faf622f1a1f88e1b0e7e34419"
|
|
43
44
|
}
|