@entur/dropdown 5.0.6 → 5.0.8
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.d.ts +62 -62
- package/dist/MultiSelect.d.ts +111 -111
- package/dist/NativeDropdown.d.ts +52 -52
- package/dist/SearchableDropdown.d.ts +70 -70
- package/dist/components/DropdownList.d.ts +25 -25
- package/dist/components/FieldComponents.d.ts +29 -29
- package/dist/deprecated/BaseDropdown.d.ts +22 -22
- package/dist/deprecated/DownshiftProvider.d.ts +16 -16
- package/dist/deprecated/Dropdown.d.ts +72 -72
- package/dist/deprecated/DropdownInputGroup.d.ts +11 -11
- package/dist/deprecated/DropdownList.d.ts +8 -8
- package/dist/deprecated/DropdownLoadingDots.d.ts +10 -10
- package/dist/deprecated/DropdownToggleButton.d.ts +3 -3
- package/dist/deprecated/MultiSelect.d.ts +64 -64
- package/dist/deprecated/RegularDropdown.d.ts +20 -20
- package/dist/deprecated/SearchableDropdown.d.ts +34 -34
- package/dist/deprecated/index.d.ts +2 -2
- package/dist/dropdown.cjs.development.js +207 -200
- 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 +56 -43
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/index.d.ts +7 -7
- package/dist/styles.css +231 -233
- package/dist/useNormalizedItems.d.ts +12 -12
- package/dist/useResolvedItems.d.ts +10 -10
- package/dist/utils.d.ts +48 -48
- package/package.json +10 -10
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import './index.scss';
|
|
2
|
-
export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
|
|
3
|
-
export * from './deprecated';
|
|
4
|
-
export * from './SearchableDropdown';
|
|
5
|
-
export * from './MultiSelect';
|
|
6
|
-
export * from './Dropdown';
|
|
7
|
-
export * from './NativeDropdown';
|
|
1
|
+
import './index.scss';
|
|
2
|
+
export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
|
|
3
|
+
export * from './deprecated';
|
|
4
|
+
export * from './SearchableDropdown';
|
|
5
|
+
export * from './MultiSelect';
|
|
6
|
+
export * from './Dropdown';
|
|
7
|
+
export * from './NativeDropdown';
|
package/dist/styles.css
CHANGED
|
@@ -1,162 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--eds-dropdown: 1;
|
|
3
|
-
}
|
|
4
|
-
/* DO NOT CHANGE!*/
|
|
5
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-dropdown__wrapper {
|
|
7
|
-
position: relative;
|
|
8
|
-
width: 100%;
|
|
9
|
-
}
|
|
10
|
-
.eds-dropdown__selected-item {
|
|
11
|
-
display: block;
|
|
12
|
-
font-size: 1rem;
|
|
13
|
-
line-height: 1rem;
|
|
14
|
-
margin-right: -1rem;
|
|
15
|
-
padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
|
|
16
|
-
font-family: inherit;
|
|
17
|
-
position: relative;
|
|
18
|
-
top: 5px;
|
|
19
|
-
overflow-x: hidden;
|
|
20
|
-
text-overflow: ellipsis;
|
|
21
|
-
white-space: nowrap;
|
|
22
|
-
}
|
|
23
|
-
.eds-dropdown__selected-item__wrapper {
|
|
24
|
-
position: absolute;
|
|
25
|
-
max-width: 65%;
|
|
26
|
-
}
|
|
27
|
-
.eds-dropdown__selected-items-and-input {
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-wrap: wrap;
|
|
30
|
-
flex: 1;
|
|
31
|
-
gap: 0.5rem;
|
|
32
|
-
}
|
|
33
|
-
.eds-dropdown__selected-items-and-input--filled {
|
|
34
|
-
padding: 1.25rem 0rem 0.25rem 1rem;
|
|
35
|
-
}
|
|
36
|
-
.eds-dropdown__selected-items-and-input--filled .eds-dropdown__input {
|
|
37
|
-
padding: 0;
|
|
38
|
-
padding: initial;
|
|
39
|
-
min-height: 1.5rem;
|
|
40
|
-
}
|
|
41
|
-
.eds-dropdown__selected-items-and-input--filled .eds-tag-chip:focus {
|
|
42
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
43
|
-
}
|
|
44
|
-
.eds-dropdown__input {
|
|
45
|
-
flex: 1;
|
|
46
|
-
min-width: 10%;
|
|
47
|
-
min-height: 3rem;
|
|
48
|
-
}
|
|
49
|
-
.eds-dropdown.eds-form-control-wrapper {
|
|
50
|
-
align-items: start;
|
|
51
|
-
}
|
|
52
|
-
.eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
|
|
53
|
-
font-size: 1rem;
|
|
54
|
-
position: absolute;
|
|
55
|
-
line-height: 1rem;
|
|
56
|
-
height: 3rem;
|
|
57
|
-
padding: 1rem;
|
|
58
|
-
padding-left: 0;
|
|
59
|
-
margin-left: 1rem;
|
|
60
|
-
top: -0.125rem;
|
|
61
|
-
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;
|
|
62
|
-
}
|
|
63
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
|
|
64
|
-
top: 1rem;
|
|
65
|
-
}
|
|
66
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
|
|
67
|
-
top: 0.4rem;
|
|
68
|
-
}
|
|
69
|
-
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
|
|
70
|
-
height: 2rem;
|
|
71
|
-
}
|
|
72
|
-
.eds-dropdown__selected-item-button {
|
|
73
|
-
cursor: pointer;
|
|
74
|
-
flex: 1;
|
|
75
|
-
padding: 1.25rem 1rem 0.25rem;
|
|
76
|
-
min-height: 2.75rem;
|
|
77
|
-
}
|
|
78
|
-
.eds-dropdown__selected-item-button__placeholder {
|
|
79
|
-
color: #54568c;
|
|
80
|
-
}
|
|
81
|
-
.eds-contrast .eds-dropdown__selected-item-button__placeholder {
|
|
82
|
-
color: #656782;
|
|
83
|
-
}
|
|
84
|
-
.eds-contrast .eds-dropdown__selected-item-button__placeholder--readonly {
|
|
85
|
-
color: #aeb7e2;
|
|
86
|
-
}
|
|
87
|
-
.eds-dropdown-appendix {
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
}
|
|
91
|
-
.eds-dropdown-appendix__clear-button {
|
|
92
|
-
padding: 0.5rem;
|
|
93
|
-
margin-right: 0.25rem;
|
|
94
|
-
}
|
|
95
|
-
.eds-contrast .eds-dropdown-appendix__clear-button:hover {
|
|
96
|
-
background: #d1d3d3;
|
|
97
|
-
}
|
|
98
|
-
.eds-contrast .eds-dropdown-appendix__clear-button:active {
|
|
99
|
-
background: #949494;
|
|
100
|
-
}
|
|
101
|
-
.eds-contrast .eds-dropdown-appendix__clear-button:focus {
|
|
102
|
-
border: 0.0625rem solid #181c56;
|
|
103
|
-
outline: none;
|
|
104
|
-
}
|
|
105
|
-
.eds-dropdown-appendix__clear-button__tooltip {
|
|
106
|
-
white-space: nowrap;
|
|
107
|
-
}
|
|
108
|
-
.eds-dropdown-appendix__divider {
|
|
109
|
-
content: "";
|
|
110
|
-
display: block;
|
|
111
|
-
background-color: #e9e9e9;
|
|
112
|
-
height: 1.5rem;
|
|
113
|
-
width: 1px;
|
|
114
|
-
}
|
|
115
|
-
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown-appendix__divider {
|
|
116
|
-
background-color: #8285a8;
|
|
117
|
-
}
|
|
118
|
-
.eds-contrast .eds-dropdown-appendix__divider {
|
|
119
|
-
background-color: #d1d3d3;
|
|
120
|
-
}
|
|
121
|
-
.eds-dropdown-appendix__toggle-button {
|
|
122
|
-
margin-right: -0.75rem;
|
|
123
|
-
margin-left: 0.25rem;
|
|
124
|
-
}
|
|
125
|
-
.eds-dropdown-appendix__toggle-button--open svg {
|
|
126
|
-
transform: rotate(180deg);
|
|
127
|
-
}
|
|
128
|
-
.eds-dropdown-appendix__toggle-button svg {
|
|
129
|
-
transition: transform ease-in-out 0.1s;
|
|
130
|
-
}
|
|
131
|
-
.eds-dropdown-appendix__toggle-button--loading-dots {
|
|
132
|
-
align-items: center;
|
|
133
|
-
display: flex;
|
|
134
|
-
justify-content: center;
|
|
135
|
-
height: 100%;
|
|
136
|
-
width: 100%;
|
|
137
|
-
margin-right: 0;
|
|
138
|
-
}
|
|
139
|
-
.eds-contrast .eds-dropdown-appendix__toggle-button:hover {
|
|
140
|
-
background: #d1d3d3;
|
|
141
|
-
}
|
|
142
|
-
.eds-contrast .eds-dropdown-appendix__toggle-button:active {
|
|
143
|
-
background: #949494;
|
|
144
|
-
}
|
|
145
|
-
.eds-contrast .eds-dropdown-appendix__toggle-button:focus {
|
|
146
|
-
border: none;
|
|
147
|
-
outline: none;
|
|
148
|
-
}
|
|
149
|
-
.eds-dropdown--native + .eds-form-control__append {
|
|
150
|
-
margin-left: -2em;
|
|
151
|
-
pointer-events: none;
|
|
152
|
-
}
|
|
153
|
-
.eds-dropdown--native option {
|
|
154
|
-
color: #181c56;
|
|
155
|
-
background-color: #ffffff;
|
|
156
|
-
}
|
|
157
|
-
.eds-contrast .eds-dropdown--native option {
|
|
158
|
-
color: #181c56;
|
|
159
|
-
}
|
|
160
1
|
/* DO NOT CHANGE!*/
|
|
161
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
162
3
|
.eds-multi-select {
|
|
@@ -314,6 +155,124 @@
|
|
|
314
155
|
}
|
|
315
156
|
/* DO NOT CHANGE!*/
|
|
316
157
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
158
|
+
.eds-dropdown__searchable-selected-item {
|
|
159
|
+
display: block;
|
|
160
|
+
font-size: 1rem;
|
|
161
|
+
line-height: 1rem;
|
|
162
|
+
margin-right: -1rem;
|
|
163
|
+
padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
|
|
164
|
+
font-family: inherit;
|
|
165
|
+
overflow-x: hidden;
|
|
166
|
+
text-overflow: ellipsis;
|
|
167
|
+
white-space: nowrap;
|
|
168
|
+
}
|
|
169
|
+
.eds-dropdown__searchable-selected-item__wrapper {
|
|
170
|
+
max-width: 65%;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.eds-form-control.eds-dropdown__input::-moz-placeholder {
|
|
174
|
+
-moz-transition: none;
|
|
175
|
+
transition: none;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.eds-form-control.eds-dropdown__input::placeholder {
|
|
179
|
+
transition: none;
|
|
180
|
+
}
|
|
181
|
+
.eds-inline-spinner {
|
|
182
|
+
align-items: center;
|
|
183
|
+
display: flex;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
height: 100%;
|
|
186
|
+
width: 100%;
|
|
187
|
+
}
|
|
188
|
+
/* DO NOT CHANGE!*/
|
|
189
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
190
|
+
.eds-dropdown__toggle-button {
|
|
191
|
+
-webkit-appearance: none;
|
|
192
|
+
-moz-appearance: none;
|
|
193
|
+
appearance: none;
|
|
194
|
+
background: none;
|
|
195
|
+
border: none;
|
|
196
|
+
border-radius: 0;
|
|
197
|
+
color: inherit;
|
|
198
|
+
font-size: inherit;
|
|
199
|
+
font-family: inherit;
|
|
200
|
+
margin-right: -0.75rem;
|
|
201
|
+
padding: 0.5rem;
|
|
202
|
+
display: flex;
|
|
203
|
+
justify-content: center;
|
|
204
|
+
}
|
|
205
|
+
.eds-dropdown__toggle-button--open svg {
|
|
206
|
+
transform: rotate(180deg);
|
|
207
|
+
}
|
|
208
|
+
.eds-dropdown__toggle-button:focus {
|
|
209
|
+
outline-offset: 0.125rem;
|
|
210
|
+
outline: none;
|
|
211
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
212
|
+
}
|
|
213
|
+
.eds-contrast .eds-dropdown__toggle-button:focus {
|
|
214
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
215
|
+
}
|
|
216
|
+
/* DO NOT CHANGE!*/
|
|
217
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
218
|
+
.eds-dropdown-wrapper {
|
|
219
|
+
position: relative;
|
|
220
|
+
}
|
|
221
|
+
.eds-dropdown-wrapper .eds-form-control {
|
|
222
|
+
padding-right: 0;
|
|
223
|
+
}
|
|
224
|
+
.eds-dropdown-wrapper .eds-form-control__append {
|
|
225
|
+
display: flex;
|
|
226
|
+
align-items: center;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.eds-dropdown__input::-moz-placeholder {
|
|
230
|
+
color: #656782;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.eds-dropdown__input::placeholder {
|
|
234
|
+
color: #656782;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.eds-dropdown__selected-item {
|
|
238
|
+
overflow-x: hidden;
|
|
239
|
+
text-overflow: ellipsis;
|
|
240
|
+
white-space: nowrap;
|
|
241
|
+
}
|
|
242
|
+
|
|
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;
|
|
254
|
+
}
|
|
255
|
+
.eds-dropdown__clear-button:hover {
|
|
256
|
+
background: #f3f3f3;
|
|
257
|
+
}
|
|
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;
|
|
262
|
+
}
|
|
263
|
+
|
|
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
|
+
}
|
|
274
|
+
/* DO NOT CHANGE!*/
|
|
275
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
317
276
|
.eds-dropdown__list {
|
|
318
277
|
position: absolute;
|
|
319
278
|
list-style: none;
|
|
@@ -444,121 +403,160 @@
|
|
|
444
403
|
}
|
|
445
404
|
/* DO NOT CHANGE!*/
|
|
446
405
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
447
|
-
.eds-
|
|
406
|
+
.eds-dropdown__wrapper {
|
|
407
|
+
position: relative;
|
|
408
|
+
width: 100%;
|
|
409
|
+
}
|
|
410
|
+
.eds-dropdown__selected-item {
|
|
448
411
|
display: block;
|
|
449
412
|
font-size: 1rem;
|
|
450
413
|
line-height: 1rem;
|
|
451
414
|
margin-right: -1rem;
|
|
452
415
|
padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
|
|
453
416
|
font-family: inherit;
|
|
417
|
+
position: relative;
|
|
418
|
+
top: 5px;
|
|
454
419
|
overflow-x: hidden;
|
|
455
420
|
text-overflow: ellipsis;
|
|
456
421
|
white-space: nowrap;
|
|
457
422
|
}
|
|
458
|
-
.eds-
|
|
423
|
+
.eds-dropdown__selected-item__wrapper {
|
|
424
|
+
position: absolute;
|
|
459
425
|
max-width: 65%;
|
|
460
426
|
}
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
-
|
|
464
|
-
|
|
427
|
+
.eds-dropdown__selected-items-and-input {
|
|
428
|
+
display: flex;
|
|
429
|
+
flex-wrap: wrap;
|
|
430
|
+
flex: 1;
|
|
431
|
+
gap: 0.5rem;
|
|
465
432
|
}
|
|
466
|
-
|
|
467
|
-
.
|
|
468
|
-
transition: none;
|
|
433
|
+
.eds-dropdown__selected-items-and-input--filled {
|
|
434
|
+
padding: 1.25rem 0rem 0.25rem 1rem;
|
|
469
435
|
}
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
display: flex;
|
|
475
|
-
justify-content: center;
|
|
476
|
-
height: 100%;
|
|
477
|
-
width: 100%;
|
|
436
|
+
.eds-dropdown__selected-items-and-input--filled .eds-dropdown__input {
|
|
437
|
+
padding: 0;
|
|
438
|
+
padding: initial;
|
|
439
|
+
min-height: 1.5rem;
|
|
478
440
|
}
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
.eds-dropdown-wrapper {
|
|
482
|
-
position: relative;
|
|
441
|
+
.eds-dropdown__selected-items-and-input--filled .eds-tag-chip:focus {
|
|
442
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
483
443
|
}
|
|
484
|
-
.eds-
|
|
485
|
-
|
|
444
|
+
.eds-dropdown__input {
|
|
445
|
+
flex: 1;
|
|
446
|
+
min-width: 10%;
|
|
447
|
+
min-height: 3rem;
|
|
486
448
|
}
|
|
487
|
-
.eds-dropdown
|
|
488
|
-
|
|
489
|
-
align-items: center;
|
|
449
|
+
.eds-dropdown.eds-form-control-wrapper {
|
|
450
|
+
align-items: start;
|
|
490
451
|
}
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
452
|
+
.eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
|
|
453
|
+
font-size: 1rem;
|
|
454
|
+
position: absolute;
|
|
455
|
+
line-height: 1rem;
|
|
456
|
+
height: 3rem;
|
|
457
|
+
padding: 1rem;
|
|
458
|
+
padding-left: 0;
|
|
459
|
+
margin-left: 1rem;
|
|
460
|
+
top: -0.125rem;
|
|
461
|
+
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;
|
|
494
462
|
}
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
color: #656782;
|
|
463
|
+
.eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
|
|
464
|
+
top: 1rem;
|
|
498
465
|
}
|
|
499
|
-
|
|
500
|
-
.
|
|
501
|
-
overflow-x: hidden;
|
|
502
|
-
text-overflow: ellipsis;
|
|
503
|
-
white-space: nowrap;
|
|
466
|
+
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
|
|
467
|
+
top: 0.4rem;
|
|
504
468
|
}
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
border-radius: 50%;
|
|
510
|
-
color: inherit;
|
|
469
|
+
.eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
|
|
470
|
+
height: 2rem;
|
|
471
|
+
}
|
|
472
|
+
.eds-dropdown__selected-item-button {
|
|
511
473
|
cursor: pointer;
|
|
474
|
+
flex: 1;
|
|
475
|
+
padding: 1.25rem 1rem 0.25rem;
|
|
476
|
+
min-height: 2.75rem;
|
|
477
|
+
}
|
|
478
|
+
.eds-dropdown__selected-item-button__placeholder {
|
|
479
|
+
color: #54568c;
|
|
480
|
+
}
|
|
481
|
+
.eds-contrast .eds-dropdown__selected-item-button__placeholder {
|
|
482
|
+
color: #656782;
|
|
483
|
+
}
|
|
484
|
+
.eds-contrast .eds-dropdown__selected-item-button__placeholder--readonly {
|
|
485
|
+
color: #aeb7e2;
|
|
486
|
+
}
|
|
487
|
+
.eds-dropdown-appendix {
|
|
512
488
|
display: flex;
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
489
|
+
align-items: center;
|
|
490
|
+
}
|
|
491
|
+
.eds-dropdown-appendix__clear-button {
|
|
516
492
|
padding: 0.5rem;
|
|
493
|
+
margin-right: 0.25rem;
|
|
517
494
|
}
|
|
518
|
-
.eds-
|
|
519
|
-
background: #
|
|
495
|
+
.eds-contrast .eds-dropdown-appendix__clear-button:hover {
|
|
496
|
+
background: #d1d3d3;
|
|
520
497
|
}
|
|
521
|
-
.eds-
|
|
522
|
-
|
|
498
|
+
.eds-contrast .eds-dropdown-appendix__clear-button:active {
|
|
499
|
+
background: #949494;
|
|
500
|
+
}
|
|
501
|
+
.eds-contrast .eds-dropdown-appendix__clear-button:focus {
|
|
502
|
+
border: 0.0625rem solid #181c56;
|
|
523
503
|
outline: none;
|
|
524
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
525
504
|
}
|
|
526
|
-
|
|
527
|
-
|
|
505
|
+
.eds-dropdown-appendix__clear-button__tooltip {
|
|
506
|
+
white-space: nowrap;
|
|
507
|
+
}
|
|
508
|
+
.eds-dropdown-appendix__divider {
|
|
528
509
|
content: "";
|
|
529
510
|
display: block;
|
|
530
511
|
background-color: #e9e9e9;
|
|
531
512
|
height: 1.5rem;
|
|
532
513
|
width: 1px;
|
|
533
514
|
}
|
|
534
|
-
.eds-contrast .eds-form-control-wrapper--disabled .eds-
|
|
515
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown-appendix__divider {
|
|
535
516
|
background-color: #8285a8;
|
|
536
517
|
}
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
-moz-appearance: none;
|
|
542
|
-
appearance: none;
|
|
543
|
-
background: none;
|
|
544
|
-
border: none;
|
|
545
|
-
border-radius: 0;
|
|
546
|
-
color: inherit;
|
|
547
|
-
font-size: inherit;
|
|
548
|
-
font-family: inherit;
|
|
518
|
+
.eds-contrast .eds-dropdown-appendix__divider {
|
|
519
|
+
background-color: #d1d3d3;
|
|
520
|
+
}
|
|
521
|
+
.eds-dropdown-appendix__toggle-button {
|
|
549
522
|
margin-right: -0.75rem;
|
|
550
|
-
|
|
523
|
+
margin-left: 0.25rem;
|
|
524
|
+
}
|
|
525
|
+
.eds-dropdown-appendix__toggle-button--open svg {
|
|
526
|
+
transform: rotate(180deg);
|
|
527
|
+
}
|
|
528
|
+
.eds-dropdown-appendix__toggle-button svg {
|
|
529
|
+
transition: transform ease-in-out 0.1s;
|
|
530
|
+
}
|
|
531
|
+
.eds-dropdown-appendix__toggle-button--loading-dots {
|
|
532
|
+
align-items: center;
|
|
551
533
|
display: flex;
|
|
552
534
|
justify-content: center;
|
|
535
|
+
height: 100%;
|
|
536
|
+
width: 100%;
|
|
537
|
+
margin-right: 0;
|
|
553
538
|
}
|
|
554
|
-
.eds-
|
|
555
|
-
|
|
539
|
+
.eds-contrast .eds-dropdown-appendix__toggle-button:hover {
|
|
540
|
+
background: #d1d3d3;
|
|
556
541
|
}
|
|
557
|
-
.eds-
|
|
558
|
-
|
|
542
|
+
.eds-contrast .eds-dropdown-appendix__toggle-button:active {
|
|
543
|
+
background: #949494;
|
|
544
|
+
}
|
|
545
|
+
.eds-contrast .eds-dropdown-appendix__toggle-button:focus {
|
|
546
|
+
border: none;
|
|
559
547
|
outline: none;
|
|
560
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
561
548
|
}
|
|
562
|
-
.eds-
|
|
563
|
-
|
|
549
|
+
.eds-dropdown--native + .eds-form-control__append {
|
|
550
|
+
margin-left: -2em;
|
|
551
|
+
pointer-events: none;
|
|
552
|
+
}
|
|
553
|
+
.eds-dropdown--native option {
|
|
554
|
+
color: #181c56;
|
|
555
|
+
background-color: #ffffff;
|
|
556
|
+
}
|
|
557
|
+
.eds-contrast .eds-dropdown--native option {
|
|
558
|
+
color: #181c56;
|
|
559
|
+
}
|
|
560
|
+
:root {
|
|
561
|
+
--eds-dropdown: 1;
|
|
564
562
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type DropdownItemType = {
|
|
3
|
-
value?: string;
|
|
4
|
-
label: string;
|
|
5
|
-
icons?: React.ComponentType<any>[];
|
|
6
|
-
} | string;
|
|
7
|
-
export type NormalizedDropdownItemType = {
|
|
8
|
-
value: string;
|
|
9
|
-
label: string;
|
|
10
|
-
icons?: React.ComponentType<any>[];
|
|
11
|
-
};
|
|
12
|
-
export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type DropdownItemType = {
|
|
3
|
+
value?: string;
|
|
4
|
+
label: string;
|
|
5
|
+
icons?: React.ComponentType<any>[];
|
|
6
|
+
} | string;
|
|
7
|
+
export type NormalizedDropdownItemType = {
|
|
8
|
+
value: string;
|
|
9
|
+
label: string;
|
|
10
|
+
icons?: React.ComponentType<any>[];
|
|
11
|
+
};
|
|
12
|
+
export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { DropdownItemType, NormalizedDropdownItemType } from './useNormalizedItems';
|
|
2
|
-
type AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;
|
|
3
|
-
type SyncDropdownItemType = (inputType: string) => DropdownItemType[];
|
|
4
|
-
export type PotentiallyAsyncDropdownItemType = DropdownItemType[] | SyncDropdownItemType | AsyncDropdownItemType;
|
|
5
|
-
export declare const useResolvedItems: (itemsOrItemsResolver: PotentiallyAsyncDropdownItemType, debounceTimeout?: number) => {
|
|
6
|
-
fetchItems: (arg: string) => void;
|
|
7
|
-
loading: boolean;
|
|
8
|
-
items: NormalizedDropdownItemType[];
|
|
9
|
-
};
|
|
10
|
-
export {};
|
|
1
|
+
import { DropdownItemType, NormalizedDropdownItemType } from './useNormalizedItems';
|
|
2
|
+
type AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;
|
|
3
|
+
type SyncDropdownItemType = (inputType: string) => DropdownItemType[];
|
|
4
|
+
export type PotentiallyAsyncDropdownItemType = DropdownItemType[] | SyncDropdownItemType | AsyncDropdownItemType;
|
|
5
|
+
export declare const useResolvedItems: (itemsOrItemsResolver: PotentiallyAsyncDropdownItemType, debounceTimeout?: number) => {
|
|
6
|
+
fetchItems: (arg: string) => void;
|
|
7
|
+
loading: boolean;
|
|
8
|
+
items: NormalizedDropdownItemType[];
|
|
9
|
+
};
|
|
10
|
+
export {};
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import { A11yRemovalMessage, A11yStatusMessageOptions } from 'downshift';
|
|
2
|
-
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
export declare const EMPTY_INPUT = "";
|
|
5
|
-
export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
|
|
6
|
-
export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
|
|
7
|
-
type useMultiselectUtilsType = {
|
|
8
|
-
selectedItems: NormalizedDropdownItemType[];
|
|
9
|
-
listItems: NormalizedDropdownItemType[];
|
|
10
|
-
selectAll: NormalizedDropdownItemType;
|
|
11
|
-
};
|
|
12
|
-
export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType) => {
|
|
13
|
-
addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
14
|
-
allListItemsAreSelected: boolean;
|
|
15
|
-
clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
|
|
16
|
-
clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
|
|
17
|
-
handleListItemClicked: ({ clickedItem, onChange, setLastRemovedItem, }: {
|
|
18
|
-
clickedItem: NormalizedDropdownItemType;
|
|
19
|
-
onChange: (value: NormalizedDropdownItemType[]) => void;
|
|
20
|
-
setLastRemovedItem: any;
|
|
21
|
-
}) => void;
|
|
22
|
-
hasSelectedItems: boolean;
|
|
23
|
-
listItemsWithoutSelectAll: NormalizedDropdownItemType[];
|
|
24
|
-
removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
25
|
-
selectAllCheckboxState: () => boolean | "indeterminate";
|
|
26
|
-
selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
27
|
-
someListItemsAreSelected: boolean;
|
|
28
|
-
unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
29
|
-
};
|
|
30
|
-
type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
|
|
31
|
-
selectAllItemIncluded?: boolean;
|
|
32
|
-
ariaLabelNoResults?: string;
|
|
33
|
-
};
|
|
34
|
-
export declare function getA11yStatusMessage<Item>(options: getA11yStatusMessageType<Item>): string;
|
|
35
|
-
type getA11ySelectionMessageType<Item> = A11yStatusMessageOptions<Item> & {
|
|
36
|
-
selectAllItem?: NormalizedDropdownItemType;
|
|
37
|
-
};
|
|
38
|
-
export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType>): string;
|
|
39
|
-
type getA11yRemovalMessageType<Item> = A11yRemovalMessage<Item> & {
|
|
40
|
-
selectAllItem?: NormalizedDropdownItemType;
|
|
41
|
-
removedItem?: NormalizedDropdownItemType;
|
|
42
|
-
};
|
|
43
|
-
export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType>): string;
|
|
44
|
-
/**A VoiceOver click is always preformed in the center of the clicked element.
|
|
45
|
-
This functions expolits that to check if the performed click likely is
|
|
46
|
-
made by VoiceOver. */
|
|
47
|
-
export declare const isVoiceOverClick: (clickEvent: React.MouseEvent) => boolean;
|
|
48
|
-
export {};
|
|
1
|
+
import { A11yRemovalMessage, A11yStatusMessageOptions } from 'downshift';
|
|
2
|
+
import { NormalizedDropdownItemType } from './useNormalizedItems';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export declare const EMPTY_INPUT = "";
|
|
5
|
+
export declare function lowerCaseFilterTest(item: NormalizedDropdownItemType, input: string | undefined): boolean;
|
|
6
|
+
export declare const itemToString: (item: NormalizedDropdownItemType | null) => string;
|
|
7
|
+
type useMultiselectUtilsType = {
|
|
8
|
+
selectedItems: NormalizedDropdownItemType[];
|
|
9
|
+
listItems: NormalizedDropdownItemType[];
|
|
10
|
+
selectAll: NormalizedDropdownItemType;
|
|
11
|
+
};
|
|
12
|
+
export declare const useMultiselectUtils: ({ listItems, selectedItems, selectAll, }: useMultiselectUtilsType) => {
|
|
13
|
+
addClickedItemToSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
14
|
+
allListItemsAreSelected: boolean;
|
|
15
|
+
clickedItemIsInSelectedItems: (clickedItem: NormalizedDropdownItemType) => boolean;
|
|
16
|
+
clickedItemIsSelectAll: (clickedItem: NormalizedDropdownItemType) => boolean;
|
|
17
|
+
handleListItemClicked: ({ clickedItem, onChange, setLastRemovedItem, }: {
|
|
18
|
+
clickedItem: NormalizedDropdownItemType;
|
|
19
|
+
onChange: (value: NormalizedDropdownItemType[]) => void;
|
|
20
|
+
setLastRemovedItem: any;
|
|
21
|
+
}) => void;
|
|
22
|
+
hasSelectedItems: boolean;
|
|
23
|
+
listItemsWithoutSelectAll: NormalizedDropdownItemType[];
|
|
24
|
+
removeClickedItemFromSelectedItems: (clickedItem: NormalizedDropdownItemType, onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
25
|
+
selectAllCheckboxState: () => boolean | "indeterminate";
|
|
26
|
+
selectAllUnselectedItemsInListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
27
|
+
someListItemsAreSelected: boolean;
|
|
28
|
+
unselectAllListItems: (onChange: (value: NormalizedDropdownItemType[]) => void) => void;
|
|
29
|
+
};
|
|
30
|
+
type getA11yStatusMessageType<Item> = A11yStatusMessageOptions<Item> & {
|
|
31
|
+
selectAllItemIncluded?: boolean;
|
|
32
|
+
ariaLabelNoResults?: string;
|
|
33
|
+
};
|
|
34
|
+
export declare function getA11yStatusMessage<Item>(options: getA11yStatusMessageType<Item>): string;
|
|
35
|
+
type getA11ySelectionMessageType<Item> = A11yStatusMessageOptions<Item> & {
|
|
36
|
+
selectAllItem?: NormalizedDropdownItemType;
|
|
37
|
+
};
|
|
38
|
+
export declare function getA11ySelectionMessage(options: getA11ySelectionMessageType<NormalizedDropdownItemType>): string;
|
|
39
|
+
type getA11yRemovalMessageType<Item> = A11yRemovalMessage<Item> & {
|
|
40
|
+
selectAllItem?: NormalizedDropdownItemType;
|
|
41
|
+
removedItem?: NormalizedDropdownItemType;
|
|
42
|
+
};
|
|
43
|
+
export declare function getA11yRemovalMessage(options: getA11yRemovalMessageType<NormalizedDropdownItemType>): string;
|
|
44
|
+
/**A VoiceOver click is always preformed in the center of the clicked element.
|
|
45
|
+
This functions expolits that to check if the performed click likely is
|
|
46
|
+
made by VoiceOver. */
|
|
47
|
+
export declare const isVoiceOverClick: (clickEvent: React.MouseEvent) => boolean;
|
|
48
|
+
export {};
|