@entur/dropdown 4.0.13 → 5.0.0-RC.1

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.
Files changed (33) hide show
  1. package/dist/Dropdown.d.ts +37 -36
  2. package/dist/MultiSelect.d.ts +86 -29
  3. package/dist/NativeDropdown.d.ts +23 -9
  4. package/dist/SearchableDropdown.d.ts +62 -16
  5. package/dist/components/DropdownList.d.ts +25 -0
  6. package/dist/components/FieldComponents.d.ts +29 -0
  7. package/dist/{BaseDropdown.d.ts → deprecated/BaseDropdown.d.ts} +3 -3
  8. package/dist/{DownshiftProvider.d.ts → deprecated/DownshiftProvider.d.ts} +1 -1
  9. package/dist/deprecated/Dropdown.d.ts +72 -0
  10. package/dist/{DropdownInputGroup.d.ts → deprecated/DropdownInputGroup.d.ts} +2 -2
  11. package/dist/deprecated/DropdownList.d.ts +8 -0
  12. package/dist/{DropdownLoadingDots.d.ts → deprecated/DropdownLoadingDots.d.ts} +1 -1
  13. package/dist/deprecated/DropdownToggleButton.d.ts +3 -0
  14. package/dist/deprecated/MultiSelect.d.ts +64 -0
  15. package/dist/{RegularDropdown.d.ts → deprecated/RegularDropdown.d.ts} +3 -3
  16. package/dist/deprecated/SearchableDropdown.d.ts +34 -0
  17. package/dist/deprecated/index.d.ts +2 -0
  18. package/dist/dropdown.cjs.development.js +1171 -261
  19. package/dist/dropdown.cjs.development.js.map +1 -1
  20. package/dist/dropdown.cjs.production.min.js +1 -1
  21. package/dist/dropdown.cjs.production.min.js.map +1 -1
  22. package/dist/dropdown.esm.js +1171 -263
  23. package/dist/dropdown.esm.js.map +1 -1
  24. package/dist/index.d.ts +4 -3
  25. package/dist/styles.css +326 -160
  26. package/dist/useNormalizedItems.d.ts +5 -6
  27. package/dist/utils.d.ts +48 -0
  28. package/package.json +10 -10
  29. package/dist/DropdownList.d.ts +0 -8
  30. package/dist/DropdownToggleButton.d.ts +0 -3
  31. package/dist/beta/DropdownList.d.ts +0 -17
  32. package/dist/beta/SearchableDropdown.d.ts +0 -42
  33. package/dist/beta/index.d.ts +0 -1
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import './index.scss';
2
+ export type { NormalizedDropdownItemType, DropdownItemType, } from './useNormalizedItems';
3
+ export * from './deprecated';
4
+ export * from './SearchableDropdown';
5
+ export * from './MultiSelect';
2
6
  export * from './Dropdown';
3
7
  export * from './NativeDropdown';
4
- export * from './MultiSelect';
5
- export * from './MultiSelect';
6
- export * from './beta';
package/dist/styles.css CHANGED
@@ -3,81 +3,311 @@
3
3
  }
4
4
  /* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-dropdown + .eds-form-control__append {
6
+ .eds-dropdown__wrapper {
7
+ position: relative;
8
+ }
9
+ .eds-dropdown__selected-item {
10
+ display: block;
11
+ font-size: 1rem;
12
+ line-height: 1rem;
13
+ margin-right: -1rem;
14
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
15
+ font-family: inherit;
16
+ position: relative;
17
+ top: 5px;
18
+ overflow-x: hidden;
19
+ text-overflow: ellipsis;
20
+ white-space: nowrap;
21
+ }
22
+ .eds-dropdown__selected-item__wrapper {
23
+ max-width: 65%;
24
+ }
25
+ .eds-dropdown__selected-items-and-input {
26
+ display: flex;
27
+ flex-wrap: wrap;
28
+ flex: 1;
29
+ gap: 0.5rem;
30
+ }
31
+ .eds-dropdown__selected-items-and-input--filled {
32
+ padding: 1.25rem 0rem 0.25rem 1rem;
33
+ }
34
+ .eds-dropdown__selected-items-and-input--filled .eds-dropdown__input {
35
+ padding: 0;
36
+ padding: initial;
37
+ min-height: 1.5rem;
38
+ }
39
+ .eds-dropdown__selected-items-and-input--filled .eds-tag-chip:focus {
40
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
41
+ }
42
+ .eds-dropdown__input {
43
+ flex: 1;
44
+ min-width: 10%;
45
+ min-height: 3rem;
46
+ }
47
+ .eds-dropdown__input.eds-form-control::-moz-placeholder {
48
+ -moz-transition: none;
49
+ transition: none;
50
+ position: relative;
51
+ bottom: 0px;
52
+ }
53
+ .eds-dropdown__input.eds-form-control::placeholder {
54
+ transition: none;
55
+ position: relative;
56
+ bottom: 0px;
57
+ }
58
+ .eds-dropdown.eds-form-control-wrapper {
59
+ align-items: start;
60
+ }
61
+ .eds-dropdown.eds-form-control-wrapper.eds-dropdown--not-filled .eds-input-group__label {
62
+ font-size: 1rem;
63
+ position: absolute;
64
+ line-height: 1rem;
65
+ height: 3rem;
66
+ padding: 1rem;
67
+ padding-left: 0;
68
+ margin-left: 1rem;
69
+ top: -0.125rem;
70
+ 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;
71
+ }
72
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__prepend {
73
+ top: 1rem;
74
+ }
75
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append {
76
+ top: 0.4rem;
77
+ }
78
+ .eds-dropdown.eds-form-control-wrapper .eds-form-control__append .eds-loading-dots {
79
+ height: 2rem;
80
+ }
81
+ .eds-dropdown__selected-item-button {
82
+ background-color: transparent;
83
+ border-color: transparent;
84
+ border-width: 0;
85
+ text-align: inherit;
86
+ line-height: inherit;
87
+ font: inherit;
88
+ color: inherit;
89
+ font-size: inherit;
90
+ overflow-x: hidden;
91
+ text-overflow: ellipsis;
92
+ white-space: nowrap;
93
+ flex: 1;
94
+ padding: 1.25rem 1rem 0.25rem;
95
+ min-height: 2.75rem;
96
+ }
97
+ .eds-dropdown__selected-item-button:focus {
98
+ outline: transparent;
99
+ }
100
+ .eds-dropdown__selected-item-button__placeholder {
101
+ color: #54568c;
102
+ }
103
+ .eds-contrast .eds-dropdown__selected-item-button__placeholder {
104
+ color: #656782;
105
+ }
106
+ .eds-contrast .eds-dropdown__selected-item-button__placeholder--readonly {
107
+ color: #aeb7e2;
108
+ }
109
+ .eds-dropdown-appendix {
110
+ display: flex;
111
+ align-items: center;
112
+ }
113
+ .eds-dropdown-appendix__clear-button {
114
+ padding: 0.5rem;
115
+ margin-right: 0.25rem;
116
+ }
117
+ .eds-contrast .eds-dropdown-appendix__clear-button:hover {
118
+ background: #d1d3d3;
119
+ }
120
+ .eds-contrast .eds-dropdown-appendix__clear-button:active {
121
+ background: #949494;
122
+ }
123
+ .eds-contrast .eds-dropdown-appendix__clear-button:focus {
124
+ border: 0.0625rem solid #181c56;
125
+ outline: none;
126
+ }
127
+ .eds-dropdown-appendix__divider {
128
+ content: "";
129
+ display: block;
130
+ background-color: #e9e9e9;
131
+ height: 1.5rem;
132
+ width: 1px;
133
+ }
134
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown-appendix__divider {
135
+ background-color: #8285a8;
136
+ }
137
+ .eds-contrast .eds-dropdown-appendix__divider {
138
+ background-color: #d1d3d3;
139
+ }
140
+ .eds-dropdown-appendix__toggle-button {
141
+ margin-right: -0.75rem;
142
+ margin-left: 0.25rem;
143
+ }
144
+ .eds-dropdown-appendix__toggle-button--open svg {
145
+ transform: rotate(180deg);
146
+ }
147
+ .eds-dropdown-appendix__toggle-button svg {
148
+ transition: transform ease-in-out 0.1s;
149
+ }
150
+ .eds-dropdown-appendix__toggle-button--loading-dots {
151
+ align-items: center;
152
+ display: flex;
153
+ justify-content: center;
154
+ height: 100%;
155
+ width: 100%;
156
+ margin-right: 0;
157
+ }
158
+ .eds-contrast .eds-dropdown-appendix__toggle-button:hover {
159
+ background: #d1d3d3;
160
+ }
161
+ .eds-contrast .eds-dropdown-appendix__toggle-button:active {
162
+ background: #949494;
163
+ }
164
+ .eds-contrast .eds-dropdown-appendix__toggle-button:focus {
165
+ border: none;
166
+ outline: none;
167
+ }
168
+ .eds-dropdown--native + .eds-form-control__append {
7
169
  margin-left: -2em;
8
170
  pointer-events: none;
9
171
  }
10
-
11
- .eds-dropdown option {
172
+ .eds-dropdown--native option {
12
173
  color: #181c56;
13
174
  background-color: #ffffff;
14
175
  }
15
- .eds-contrast .eds-dropdown option {
176
+ .eds-contrast .eds-dropdown--native option {
16
177
  color: #181c56;
17
178
  }
18
179
  /* DO NOT CHANGE!*/
19
180
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
20
- .eds-dropdown-list {
21
- border-radius: 0.25rem;
22
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
181
+ .eds-dropdown__list {
182
+ position: absolute;
23
183
  display: none;
24
184
  list-style: none;
185
+ border-radius: 0.25rem;
186
+ border: 0.125rem solid #7C7F9F;
187
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
188
+ padding: 0;
25
189
  margin: 0;
190
+ margin-top: 0.5rem;
26
191
  max-height: 50vh;
27
- padding: 0;
28
- position: relative;
29
192
  overflow-y: auto;
30
193
  width: 100%;
31
194
  z-index: 20;
32
195
  }
33
- .eds-contrast .eds-dropdown-list {
34
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
35
- }
36
- .eds-dropdown-list--open {
37
- display: inline-block;
38
- }
39
- .eds-dropdown-list:focus {
196
+ .eds-dropdown__list:focus {
40
197
  outline: none;
41
198
  }
42
- @media all and (min-width: 50rem) {
43
- .eds-dropdown-list {
44
- max-height: 30vh;
45
- }
199
+ .eds-dropdown__list--open {
200
+ display: inline-block;
46
201
  }
47
- .eds-dropdown-list__item {
48
- align-items: center;
202
+ .eds-dropdown__list__item {
49
203
  background-color: #f8f8f8;
50
- border-bottom: 0.125rem solid #e9e9e9;
51
- border-left: 0.125rem solid #e9e9e9;
52
- border-right: 0.125rem solid #e9e9e9;
53
204
  color: #181c56;
54
205
  display: flex;
55
- justify-content: space-between;
206
+ align-items: center;
207
+ justify-content: flex-start;
56
208
  font-family: inherit;
57
209
  font-size: 1rem;
58
210
  line-height: 1.25rem;
59
211
  padding: 0.75rem 1rem;
60
212
  width: 100%;
213
+ overflow-x: hidden;
214
+ word-break: break-word;
61
215
  }
62
- .eds-dropdown-list__item:first-child {
63
- border-top: 0.125rem solid #e9e9e9;
64
- }
65
- .eds-dropdown-list__item:last-child {
216
+ .eds-dropdown__list__item:last-child {
66
217
  border-bottom: none;
67
218
  }
68
- .eds-contrast .eds-dropdown-list__item {
69
- color: #181c56;
70
- border-color: #54568c;
71
- background-color: #ffffff;
219
+ .eds-dropdown__list__item__text {
220
+ flex: 1;
72
221
  }
73
- .eds-dropdown-list__item--highlighted {
74
- background-color: #d1d4e3;
222
+ .eds-dropdown__list__item__icon {
223
+ margin-left: 0.75rem;
75
224
  }
76
- .eds-contrast .eds-dropdown-list__item--highlighted {
225
+ .eds-dropdown__list__item__checkbox {
226
+ pointer-events: none;
227
+ }
228
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
229
+ border-color: #181c56;
230
+ }
231
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
232
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
233
+ background-color: #181c56;
234
+ }
235
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
236
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
237
+ stroke: #ffffff;
238
+ }
239
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
240
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
241
+ fill: #ffffff;
242
+ }
243
+ .eds-dropdown__list__item--highlighted {
77
244
  background-color: #d1d4e3;
78
245
  }
79
- .eds-dropdown-list-icon {
80
- margin-left: 0.75rem;
246
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
247
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
248
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
249
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
250
+ background-color: #54568c;
251
+ border-color: transparent;
252
+ }
253
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
254
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
255
+ border-color: #54568c;
256
+ }
257
+ .eds-dropdown__list__item--selected {
258
+ background-color: #54568c;
259
+ color: #ffffff;
260
+ }
261
+ @media all and (min-width: 50rem) {
262
+ .eds-dropdown__list {
263
+ max-height: 30vh;
264
+ }
265
+ }
266
+ /* DO NOT CHANGE!*/
267
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
268
+ .eds-dropdown__selected-item-tag {
269
+ height: 1.5rem;
270
+ max-width: 40%;
271
+ padding: 0;
272
+ }
273
+ .eds-dropdown__selected-item-tag > span {
274
+ overflow: hidden;
275
+ text-overflow: ellipsis;
276
+ white-space: nowrap;
277
+ margin-left: 0.5rem;
278
+ }
279
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
280
+ margin-right: 0.125rem;
281
+ }
282
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
283
+ font-size: 0.6rem;
284
+ }
285
+ .eds-contrast .eds-dropdown__selected-item-tag {
286
+ background: #ebebf1;
287
+ border: 0.0625rem solid #d1d4e3;
288
+ color: #181c56;
289
+ }
290
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
291
+ color: #181c56;
292
+ }
293
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
294
+ background-color: #babbcf;
295
+ }
296
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
297
+ padding-right: 0.5rem;
298
+ }
299
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
300
+ display: none;
301
+ }
302
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly {
303
+ background-color: #8285a8;
304
+ border-color: transparent;
305
+ color: #ffffff;
306
+ }
307
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled {
308
+ background-color: #54568c;
309
+ border-color: transparent;
310
+ color: #8285a8;
81
311
  }
82
312
  /* DO NOT CHANGE!*/
83
313
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -172,135 +402,39 @@
172
402
  }
173
403
  /* DO NOT CHANGE!*/
174
404
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
175
- .eds-dropdown__searchable-selected-item {
176
- display: block;
177
- font-size: 1rem;
178
- line-height: 1rem;
179
- margin-right: -1rem;
180
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
181
- font-family: inherit;
182
- overflow-x: hidden;
183
- text-overflow: ellipsis;
184
- white-space: nowrap;
185
- }
186
- .eds-dropdown__searchable-selected-item__wrapper {
187
- max-width: 65%;
188
- }
189
-
190
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
191
- -moz-transition: none;
192
- transition: none;
193
- }
194
-
195
- .eds-form-control.eds-dropdown__input::placeholder {
196
- transition: none;
197
- }
198
- /* DO NOT CHANGE!*/
199
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
200
- .eds-inline-spinner {
201
- align-items: center;
202
- display: flex;
203
- justify-content: center;
204
- height: 100%;
205
- width: 100%;
206
- }
207
- /* DO NOT CHANGE!*/
208
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
209
- .eds-searchable-dropdown__wrapper {
210
- position: relative;
211
- }
212
- .eds-searchable-dropdown__selected-item {
213
- display: block;
214
- font-size: 1rem;
215
- line-height: 1rem;
216
- margin-right: -1rem;
217
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
218
- font-family: inherit;
219
- overflow-x: hidden;
220
- text-overflow: ellipsis;
221
- white-space: nowrap;
222
- }
223
- .eds-searchable-dropdown__selected-item__wrapper {
224
- max-width: 65%;
225
- }
226
- .eds-searchable-dropdown-appendix__clear-button {
227
- padding: 0.5rem;
228
- margin-right: 0.25rem;
229
- }
230
- .eds-contrast .eds-searchable-dropdown-appendix__clear-button:hover {
231
- background: #d1d3d3;
232
- }
233
- .eds-contrast .eds-searchable-dropdown-appendix__clear-button:active {
234
- background: #949494;
235
- }
236
- .eds-contrast .eds-searchable-dropdown-appendix__clear-button:focus {
237
- border: 0.0625rem solid #181c56;
238
- outline: none;
239
- }
240
- .eds-searchable-dropdown-appendix__divider {
241
- content: "";
242
- display: block;
243
- background-color: #e9e9e9;
244
- height: 1.5rem;
245
- width: 1px;
246
- }
247
- .eds-contrast .eds-form-control-wrapper--disabled .eds-searchable-dropdown-appendix__divider {
248
- background-color: #8285a8;
249
- }
250
- .eds-contrast .eds-searchable-dropdown-appendix__divider {
251
- background-color: #d1d3d3;
252
- }
253
- .eds-searchable-dropdown-appendix__toggle-button {
254
- margin-right: -0.75rem;
255
- margin-left: 0.25rem;
256
- }
257
- .eds-searchable-dropdown-appendix__toggle-button--open svg {
258
- transform: rotate(180deg);
259
- }
260
- .eds-searchable-dropdown-appendix__toggle-button svg {
261
- transition: transform ease-in-out 0.1s;
262
- }
263
- .eds-contrast .eds-searchable-dropdown-appendix__toggle-button:hover {
264
- background: #d1d3d3;
265
- }
266
- .eds-contrast .eds-searchable-dropdown-appendix__toggle-button:active {
267
- background: #949494;
268
- }
269
- .eds-contrast .eds-searchable-dropdown-appendix__toggle-button:focus {
270
- border: 0.0625rem solid #181c56;
271
- outline: none;
272
- }
273
- .eds-searchable-dropdown__list {
274
- position: absolute;
275
- top: 3rem;
276
- display: none;
277
- list-style: none;
405
+ .eds-dropdown-list {
278
406
  border-radius: 0.25rem;
279
- border: 0.125rem solid #d1d3d3;
280
407
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
281
- padding: 0;
408
+ display: none;
409
+ list-style: none;
282
410
  margin: 0;
283
- margin-top: 0.5rem;
284
411
  max-height: 50vh;
412
+ padding: 0;
413
+ position: relative;
285
414
  overflow-y: auto;
286
415
  width: 100%;
287
416
  z-index: 20;
288
417
  }
289
- .eds-searchable-dropdown__list--open {
418
+ .eds-contrast .eds-dropdown-list {
419
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
420
+ }
421
+ .eds-dropdown-list--open {
290
422
  display: inline-block;
291
423
  }
292
- .eds-searchable-dropdown__list:focus {
424
+ .eds-dropdown-list:focus {
293
425
  outline: none;
294
426
  }
295
427
  @media all and (min-width: 50rem) {
296
- .eds-searchable-dropdown__list {
428
+ .eds-dropdown-list {
297
429
  max-height: 30vh;
298
430
  }
299
431
  }
300
- .eds-searchable-dropdown__list__item {
432
+ .eds-dropdown-list__item {
301
433
  align-items: center;
302
434
  background-color: #f8f8f8;
303
- border-bottom: 0.125rem solid #d1d3d3;
435
+ border-bottom: 0.125rem solid #e9e9e9;
436
+ border-left: 0.125rem solid #e9e9e9;
437
+ border-right: 0.125rem solid #e9e9e9;
304
438
  color: #181c56;
305
439
  display: flex;
306
440
  justify-content: space-between;
@@ -310,27 +444,59 @@
310
444
  padding: 0.75rem 1rem;
311
445
  width: 100%;
312
446
  }
313
- .eds-searchable-dropdown__list__item:last-child {
447
+ .eds-dropdown-list__item:first-child {
448
+ border-top: 0.125rem solid #e9e9e9;
449
+ }
450
+ .eds-dropdown-list__item:last-child {
314
451
  border-bottom: none;
315
452
  }
316
- .eds-searchable-dropdown__list__item-icon {
317
- margin-left: 0.75rem;
453
+ .eds-contrast .eds-dropdown-list__item {
454
+ color: #181c56;
455
+ border-color: #54568c;
456
+ background-color: #ffffff;
318
457
  }
319
- .eds-searchable-dropdown__list__item--highlighted {
458
+ .eds-dropdown-list__item--highlighted {
320
459
  background-color: #d1d4e3;
321
460
  }
461
+ .eds-contrast .eds-dropdown-list__item--highlighted {
462
+ background-color: #d1d4e3;
463
+ }
464
+ .eds-dropdown-list-icon {
465
+ margin-left: 0.75rem;
466
+ }
467
+ /* DO NOT CHANGE!*/
468
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
469
+ .eds-dropdown__searchable-selected-item {
470
+ display: block;
471
+ font-size: 1rem;
472
+ line-height: 1rem;
473
+ margin-right: -1rem;
474
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
475
+ font-family: inherit;
476
+ overflow-x: hidden;
477
+ text-overflow: ellipsis;
478
+ white-space: nowrap;
479
+ }
480
+ .eds-dropdown__searchable-selected-item__wrapper {
481
+ max-width: 65%;
482
+ }
322
483
 
323
- .eds-form-control.eds-searchable-dropdown__input::-moz-placeholder {
484
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
324
485
  -moz-transition: none;
325
486
  transition: none;
326
- position: relative;
327
- bottom: 1px;
328
487
  }
329
488
 
330
- .eds-form-control.eds-searchable-dropdown__input::placeholder {
489
+ .eds-form-control.eds-dropdown__input::placeholder {
331
490
  transition: none;
332
- position: relative;
333
- bottom: 1px;
491
+ }
492
+ /* DO NOT CHANGE!*/
493
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
494
+ .eds-inline-spinner {
495
+ align-items: center;
496
+ display: flex;
497
+ justify-content: center;
498
+ height: 100%;
499
+ width: 100%;
334
500
  }
335
501
  /* DO NOT CHANGE!*/
336
502
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1,13 +1,12 @@
1
1
  import React from 'react';
2
- /** A dropdown item has a string label and a string value */
3
- export type NormalizedDropdownItemType = {
4
- value: string;
5
- label: string;
6
- icons?: React.ComponentType<any>[];
7
- };
8
2
  export type DropdownItemType = {
9
3
  value?: string;
10
4
  label: string;
11
5
  icons?: React.ComponentType<any>[];
12
6
  } | string;
7
+ export type NormalizedDropdownItemType = {
8
+ value: string;
9
+ label: string;
10
+ icons?: React.ComponentType<any>[];
11
+ };
13
12
  export declare const useNormalizedItems: (items: DropdownItemType[]) => NormalizedDropdownItemType[];
@@ -0,0 +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 {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "4.0.13",
3
+ "version": "5.0.0-RC.1",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -27,17 +27,17 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/a11y": "^0.2.68",
31
- "@entur/button": "^3.0.11",
32
- "@entur/chip": "^0.6.39",
33
- "@entur/form": "^7.0.12",
30
+ "@entur/a11y": "^0.2.66",
31
+ "@entur/button": "^3.0.9",
32
+ "@entur/chip": "^0.6.37",
33
+ "@entur/form": "^7.0.10",
34
34
  "@entur/icons": "^6.3.1",
35
- "@entur/loader": "^0.4.34",
35
+ "@entur/loader": "^0.4.32",
36
36
  "@entur/tokens": "^3.10.0",
37
- "@entur/tooltip": "^2.6.22",
38
- "@entur/utils": "^0.9.3",
37
+ "@entur/tooltip": "^2.6.20",
38
+ "@entur/utils": "^0.9.1",
39
39
  "classnames": "^2.3.1",
40
- "downshift": "^6.1.7"
40
+ "downshift": "^7.6.1"
41
41
  },
42
- "gitHead": "9bf0838160519db9fb072af36dc19731dfb5e2dd"
42
+ "gitHead": "e4d22f6fc1c7cb4e76306a1be92930325c9c8e25"
43
43
  }
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { NormalizedDropdownItemType } from './useNormalizedItems';
3
- import './DropdownList.scss';
4
- export type DropdownListProps = {
5
- items: NormalizedDropdownItemType[];
6
- [key: string]: any;
7
- };
8
- export declare const DropdownList: React.FC<DropdownListProps>;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import './DropdownToggleButton.scss';
3
- export declare const DropdownToggleButton: () => JSX.Element;