@entur/dropdown 5.0.28 → 5.1.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 +62 -68
- 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 +63 -69
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/styles.css +143 -139
- package/dist/useResolvedItems.d.ts +4 -3
- package/package.json +9 -9
package/dist/styles.css
CHANGED
|
@@ -32,94 +32,89 @@
|
|
|
32
32
|
}
|
|
33
33
|
/* DO NOT CHANGE!*/
|
|
34
34
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
35
|
-
.eds-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
.eds-dropdown__toggle-button {
|
|
36
|
+
-webkit-appearance: none;
|
|
37
|
+
-moz-appearance: none;
|
|
38
|
+
appearance: none;
|
|
39
|
+
background: none;
|
|
40
|
+
border: none;
|
|
41
|
+
border-radius: 0;
|
|
42
|
+
color: inherit;
|
|
43
|
+
font-size: inherit;
|
|
44
|
+
font-family: inherit;
|
|
45
|
+
margin-right: -0.75rem;
|
|
46
|
+
padding: 0.5rem;
|
|
39
47
|
display: flex;
|
|
40
|
-
|
|
41
|
-
flex-wrap: wrap;
|
|
42
|
-
position: relative;
|
|
43
|
-
flex: 1 1 0%;
|
|
44
|
-
padding: 0.25rem;
|
|
45
|
-
}
|
|
46
|
-
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
47
|
-
margin-left: 0.25rem;
|
|
48
|
-
white-space: nowrap;
|
|
48
|
+
justify-content: center;
|
|
49
49
|
}
|
|
50
|
-
.eds-
|
|
51
|
-
|
|
50
|
+
.eds-dropdown__toggle-button--open svg {
|
|
51
|
+
transform: rotate(180deg);
|
|
52
52
|
}
|
|
53
|
-
.eds-
|
|
53
|
+
.eds-dropdown__toggle-button:focus {
|
|
54
54
|
outline-offset: 0.125rem;
|
|
55
|
+
outline: none;
|
|
56
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
55
57
|
}
|
|
56
|
-
.eds-contrast .eds-
|
|
57
|
-
|
|
58
|
-
background: #ebebf1;
|
|
59
|
-
border: 0.0625rem solid #d1d4e3;
|
|
58
|
+
.eds-contrast .eds-dropdown__toggle-button:focus {
|
|
59
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
60
60
|
}
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
/* DO NOT CHANGE!*/
|
|
62
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
63
|
+
.eds-dropdown-wrapper {
|
|
64
|
+
position: relative;
|
|
63
65
|
}
|
|
64
|
-
.eds-
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
.eds-dropdown-wrapper .eds-form-control {
|
|
67
|
+
padding-right: 0;
|
|
68
|
+
}
|
|
69
|
+
.eds-dropdown-wrapper .eds-form-control__append {
|
|
67
70
|
display: flex;
|
|
68
71
|
align-items: center;
|
|
69
72
|
}
|
|
70
|
-
.eds-multi-select__placeholder {
|
|
71
|
-
padding-left: 1.5rem;
|
|
72
|
-
line-height: 1.375rem;
|
|
73
|
-
font-size: 1rem;
|
|
74
|
-
}
|
|
75
|
-
.eds-checkbox-icon {
|
|
76
|
-
height: 1rem;
|
|
77
|
-
width: 1rem;
|
|
78
|
-
visibility: hidden;
|
|
79
|
-
}
|
|
80
|
-
.eds-checkbox-icon__path {
|
|
81
|
-
transform-origin: 50% 50%;
|
|
82
|
-
stroke-dasharray: 48;
|
|
83
|
-
stroke-dashoffset: 48;
|
|
84
|
-
stroke-width: 0.375rem;
|
|
85
|
-
}
|
|
86
73
|
|
|
87
|
-
.eds-
|
|
88
|
-
|
|
74
|
+
.eds-dropdown__input::-moz-placeholder {
|
|
75
|
+
color: #656782;
|
|
89
76
|
}
|
|
90
|
-
|
|
91
|
-
|
|
77
|
+
|
|
78
|
+
.eds-dropdown__input::placeholder {
|
|
79
|
+
color: #656782;
|
|
92
80
|
}
|
|
93
81
|
|
|
94
|
-
.eds-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
position: relative;
|
|
99
|
-
margin-right: 0.75rem;
|
|
100
|
-
height: 1.25rem;
|
|
101
|
-
width: 1.25rem;
|
|
102
|
-
border: 0.125rem solid #181c56;
|
|
103
|
-
border-radius: 0.0625rem;
|
|
104
|
-
background-color: transparent;
|
|
105
|
-
color: #ffffff;
|
|
82
|
+
.eds-dropdown__selected-item {
|
|
83
|
+
overflow-x: hidden;
|
|
84
|
+
text-overflow: ellipsis;
|
|
85
|
+
white-space: nowrap;
|
|
106
86
|
}
|
|
107
87
|
|
|
108
|
-
.eds-
|
|
109
|
-
background
|
|
88
|
+
.eds-dropdown__clear-button {
|
|
89
|
+
background: none;
|
|
90
|
+
border: none;
|
|
91
|
+
border-radius: 50%;
|
|
92
|
+
color: inherit;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
display: flex;
|
|
95
|
+
font: inherit;
|
|
96
|
+
font-size: 1rem;
|
|
97
|
+
line-height: 1rem;
|
|
98
|
+
padding: 0.5rem;
|
|
110
99
|
}
|
|
111
|
-
.eds-
|
|
112
|
-
|
|
100
|
+
.eds-dropdown__clear-button:hover {
|
|
101
|
+
background: #f3f3f3;
|
|
113
102
|
}
|
|
114
|
-
.eds-
|
|
115
|
-
|
|
116
|
-
|
|
103
|
+
.eds-dropdown__clear-button:focus {
|
|
104
|
+
outline-offset: 0.125rem;
|
|
105
|
+
outline: none;
|
|
106
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
117
107
|
}
|
|
118
108
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
109
|
+
.eds-dropdown__divider {
|
|
110
|
+
content: "";
|
|
111
|
+
display: block;
|
|
112
|
+
background-color: #e9e9e9;
|
|
113
|
+
height: 1.5rem;
|
|
114
|
+
width: 1px;
|
|
115
|
+
}
|
|
116
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
|
|
117
|
+
background-color: #8285a8;
|
|
123
118
|
}
|
|
124
119
|
/* DO NOT CHANGE!*/
|
|
125
120
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -187,89 +182,94 @@
|
|
|
187
182
|
}
|
|
188
183
|
/* DO NOT CHANGE!*/
|
|
189
184
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
190
|
-
.eds-
|
|
185
|
+
.eds-multi-select {
|
|
191
186
|
position: relative;
|
|
192
187
|
}
|
|
193
|
-
.eds-
|
|
194
|
-
padding-right: 0;
|
|
195
|
-
}
|
|
196
|
-
.eds-dropdown-wrapper .eds-form-control__append {
|
|
188
|
+
.eds-multi-select__selected-items {
|
|
197
189
|
display: flex;
|
|
198
190
|
align-items: center;
|
|
191
|
+
flex-wrap: wrap;
|
|
192
|
+
position: relative;
|
|
193
|
+
flex: 1 1 0%;
|
|
194
|
+
padding: 0.25rem;
|
|
199
195
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
196
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip {
|
|
197
|
+
margin-left: 0.25rem;
|
|
198
|
+
white-space: nowrap;
|
|
203
199
|
}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
color: #656782;
|
|
200
|
+
.eds-contrast .eds-multi-select__selected-items-tag.eds-tag-chip svg {
|
|
201
|
+
color: #181c56;
|
|
207
202
|
}
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
overflow-x: hidden;
|
|
211
|
-
text-overflow: ellipsis;
|
|
212
|
-
white-space: nowrap;
|
|
203
|
+
.eds-multi-select__selected-items-tag.eds-tag-chip:focus {
|
|
204
|
+
outline-offset: 0.125rem;
|
|
213
205
|
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
background:
|
|
217
|
-
border:
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
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;
|
|
221
217
|
display: flex;
|
|
222
|
-
|
|
218
|
+
align-items: center;
|
|
219
|
+
}
|
|
220
|
+
.eds-multi-select__placeholder {
|
|
221
|
+
padding-left: 1.5rem;
|
|
222
|
+
line-height: 1.375rem;
|
|
223
223
|
font-size: 1rem;
|
|
224
|
-
line-height: 1rem;
|
|
225
|
-
padding: 0.5rem;
|
|
226
224
|
}
|
|
227
|
-
.eds-
|
|
228
|
-
|
|
225
|
+
.eds-checkbox-icon {
|
|
226
|
+
height: 1rem;
|
|
227
|
+
width: 1rem;
|
|
228
|
+
visibility: hidden;
|
|
229
229
|
}
|
|
230
|
-
.eds-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
230
|
+
.eds-checkbox-icon__path {
|
|
231
|
+
transform-origin: 50% 50%;
|
|
232
|
+
stroke-dasharray: 48;
|
|
233
|
+
stroke-dashoffset: 48;
|
|
234
|
+
stroke-width: 0.375rem;
|
|
234
235
|
}
|
|
235
236
|
|
|
236
|
-
.eds-
|
|
237
|
-
|
|
238
|
-
display: block;
|
|
239
|
-
background-color: #e9e9e9;
|
|
240
|
-
height: 1.5rem;
|
|
241
|
-
width: 1px;
|
|
237
|
+
.eds-multiselect {
|
|
238
|
+
position: relative;
|
|
242
239
|
}
|
|
243
|
-
.eds-
|
|
244
|
-
|
|
240
|
+
.eds-multiselect__button {
|
|
241
|
+
text-overflow: ellipsis;
|
|
245
242
|
}
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
-webkit-appearance: none;
|
|
250
|
-
-moz-appearance: none;
|
|
251
|
-
appearance: none;
|
|
252
|
-
background: none;
|
|
253
|
-
border: none;
|
|
254
|
-
border-radius: 0;
|
|
255
|
-
color: inherit;
|
|
256
|
-
font-size: inherit;
|
|
257
|
-
font-family: inherit;
|
|
258
|
-
margin-right: -0.75rem;
|
|
259
|
-
padding: 0.5rem;
|
|
260
|
-
display: flex;
|
|
243
|
+
|
|
244
|
+
.eds-multiselect-checkbox {
|
|
245
|
+
display: inline-flex;
|
|
261
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;
|
|
262
256
|
}
|
|
263
|
-
|
|
264
|
-
|
|
257
|
+
|
|
258
|
+
.eds-multiselect-checkbox--checked {
|
|
259
|
+
background-color: #181c56;
|
|
265
260
|
}
|
|
266
|
-
.eds-
|
|
267
|
-
|
|
268
|
-
outline: none;
|
|
269
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
261
|
+
.eds-multiselect-checkbox--checked .eds-checkbox-icon {
|
|
262
|
+
visibility: visible;
|
|
270
263
|
}
|
|
271
|
-
.eds-
|
|
272
|
-
|
|
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. */
|
|
@@ -410,14 +410,13 @@
|
|
|
410
410
|
margin-right: 0.25rem;
|
|
411
411
|
}
|
|
412
412
|
.eds-contrast .eds-dropdown__appendix__clear-button:hover {
|
|
413
|
-
background: #
|
|
413
|
+
background-color: #d1d4e3;
|
|
414
414
|
}
|
|
415
415
|
.eds-contrast .eds-dropdown__appendix__clear-button:active {
|
|
416
|
-
background: #
|
|
416
|
+
background: #babbcf;
|
|
417
417
|
}
|
|
418
418
|
.eds-contrast .eds-dropdown__appendix__clear-button:focus {
|
|
419
|
-
|
|
420
|
-
outline: none;
|
|
419
|
+
outline: 2px solid #181c56;
|
|
421
420
|
}
|
|
422
421
|
.eds-dropdown__appendix__clear-button__tooltip {
|
|
423
422
|
white-space: nowrap;
|
|
@@ -454,14 +453,13 @@
|
|
|
454
453
|
margin-left: calc(0.5rem + 2px);
|
|
455
454
|
}
|
|
456
455
|
.eds-contrast .eds-dropdown__appendix__toggle-button:hover {
|
|
457
|
-
background: #
|
|
456
|
+
background-color: #d1d4e3;
|
|
458
457
|
}
|
|
459
458
|
.eds-contrast .eds-dropdown__appendix__toggle-button:active {
|
|
460
|
-
background: #
|
|
459
|
+
background: #babbcf;
|
|
461
460
|
}
|
|
462
461
|
.eds-contrast .eds-dropdown__appendix__toggle-button:focus {
|
|
463
|
-
|
|
464
|
-
outline: none;
|
|
462
|
+
outline: 2px solid #181c56;
|
|
465
463
|
}
|
|
466
464
|
/* DO NOT CHANGE!*/
|
|
467
465
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -500,6 +498,12 @@
|
|
|
500
498
|
.eds-contrast .eds-dropdown__selected-item__placeholder--readonly {
|
|
501
499
|
color: #aeb7e2;
|
|
502
500
|
}
|
|
501
|
+
.eds-dropdown__selected-item.focus-visible {
|
|
502
|
+
outline: none;
|
|
503
|
+
}
|
|
504
|
+
.eds-dropdown__selected-item:focus-visible {
|
|
505
|
+
outline: none;
|
|
506
|
+
}
|
|
503
507
|
.eds-dropdown--searchable__selected-item {
|
|
504
508
|
position: relative;
|
|
505
509
|
top: 5px;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { DropdownItemType, NormalizedDropdownItemType } from './useNormalizedItems';
|
|
2
|
-
type AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;
|
|
3
|
-
type SyncDropdownItemType = (inputType: string) => DropdownItemType[];
|
|
3
|
+
type AsyncDropdownItemType = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => Promise<DropdownItemType[]>;
|
|
4
|
+
type SyncDropdownItemType = (inputType: string, abortControllerRef: React.MutableRefObject<AbortController>) => DropdownItemType[];
|
|
4
5
|
export type PotentiallyAsyncDropdownItemType = DropdownItemType[] | SyncDropdownItemType | AsyncDropdownItemType;
|
|
5
6
|
export declare const useResolvedItems: (itemsOrItemsResolver: PotentiallyAsyncDropdownItemType, debounceTimeout?: number) => {
|
|
6
|
-
fetchItems: (
|
|
7
|
+
fetchItems: (query?: string) => void;
|
|
7
8
|
loading: boolean;
|
|
8
9
|
items: NormalizedDropdownItemType[];
|
|
9
10
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/dropdown",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.1.0-beta.0",
|
|
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.
|
|
31
|
-
"@entur/button": "^3.2.
|
|
32
|
-
"@entur/chip": "^0.6.
|
|
33
|
-
"@entur/form": "^7.0.
|
|
30
|
+
"@entur/a11y": "^0.2.75-beta.0",
|
|
31
|
+
"@entur/button": "^3.2.7-beta.0",
|
|
32
|
+
"@entur/chip": "^0.6.62-beta.0",
|
|
33
|
+
"@entur/form": "^7.0.34-beta.0",
|
|
34
34
|
"@entur/icons": "^6.13.2",
|
|
35
|
-
"@entur/loader": "^0.4.
|
|
35
|
+
"@entur/loader": "^0.4.52-beta.0",
|
|
36
36
|
"@entur/tokens": "^3.12.0",
|
|
37
|
-
"@entur/tooltip": "^2.6.
|
|
38
|
-
"@entur/utils": "^0.
|
|
37
|
+
"@entur/tooltip": "^2.6.43-beta.0",
|
|
38
|
+
"@entur/utils": "^1.0.0-beta.0",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"downshift": "^7.6.1"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "4e2a54a5b8402cf439cd91487f569e775bf53691"
|
|
43
43
|
}
|