@entur/dropdown 4.0.11 → 5.0.0-RC.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.d.ts +37 -36
- package/dist/MultiSelect.d.ts +86 -29
- package/dist/NativeDropdown.d.ts +23 -9
- package/dist/SearchableDropdown.d.ts +62 -16
- package/dist/components/DropdownList.d.ts +25 -0
- package/dist/components/FieldComponents.d.ts +29 -0
- package/dist/{BaseDropdown.d.ts → deprecated/BaseDropdown.d.ts} +3 -3
- package/dist/{DownshiftProvider.d.ts → deprecated/DownshiftProvider.d.ts} +1 -1
- package/dist/deprecated/Dropdown.d.ts +72 -0
- package/dist/{DropdownInputGroup.d.ts → deprecated/DropdownInputGroup.d.ts} +2 -2
- package/dist/deprecated/DropdownList.d.ts +8 -0
- package/dist/{DropdownLoadingDots.d.ts → deprecated/DropdownLoadingDots.d.ts} +1 -1
- package/dist/deprecated/DropdownToggleButton.d.ts +3 -0
- package/dist/deprecated/MultiSelect.d.ts +64 -0
- package/dist/{RegularDropdown.d.ts → deprecated/RegularDropdown.d.ts} +3 -3
- package/dist/deprecated/SearchableDropdown.d.ts +34 -0
- package/dist/deprecated/index.d.ts +2 -0
- package/dist/dropdown.cjs.development.js +1171 -261
- 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 +1171 -263
- package/dist/dropdown.esm.js.map +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/styles.css +301 -135
- package/dist/useNormalizedItems.d.ts +5 -6
- package/dist/utils.d.ts +48 -0
- package/package.json +3 -3
- package/dist/DropdownList.d.ts +0 -8
- package/dist/DropdownToggleButton.d.ts +0 -3
- package/dist/beta/DropdownList.d.ts +0 -17
- package/dist/beta/SearchableDropdown.d.ts +0 -42
- 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,17 +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-
|
|
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 {
|
|
177
|
+
color: #181c56;
|
|
178
|
+
}
|
|
179
|
+
/* DO NOT CHANGE!*/
|
|
180
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
181
|
+
.eds-dropdown__selected-item-tag {
|
|
182
|
+
height: 1.5rem;
|
|
183
|
+
max-width: 40%;
|
|
184
|
+
padding: 0;
|
|
185
|
+
}
|
|
186
|
+
.eds-dropdown__selected-item-tag > span {
|
|
187
|
+
overflow: hidden;
|
|
188
|
+
text-overflow: ellipsis;
|
|
189
|
+
white-space: nowrap;
|
|
190
|
+
margin-left: 0.5rem;
|
|
191
|
+
}
|
|
192
|
+
.eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
|
|
193
|
+
margin-right: 0.125rem;
|
|
194
|
+
}
|
|
195
|
+
.eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
|
|
196
|
+
font-size: 0.6rem;
|
|
197
|
+
}
|
|
198
|
+
.eds-contrast .eds-dropdown__selected-item-tag {
|
|
199
|
+
background: #ebebf1;
|
|
200
|
+
border: 0.0625rem solid #d1d4e3;
|
|
201
|
+
color: #181c56;
|
|
202
|
+
}
|
|
203
|
+
.eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
|
|
204
|
+
color: #181c56;
|
|
205
|
+
}
|
|
206
|
+
.eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
|
|
207
|
+
background-color: #babbcf;
|
|
208
|
+
}
|
|
209
|
+
.eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
|
|
210
|
+
padding-right: 0.5rem;
|
|
211
|
+
}
|
|
212
|
+
.eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
|
|
213
|
+
display: none;
|
|
214
|
+
}
|
|
215
|
+
.eds-contrast .eds-dropdown__selected-item-tag--readonly {
|
|
216
|
+
background-color: #8285a8;
|
|
217
|
+
border-color: transparent;
|
|
218
|
+
color: #ffffff;
|
|
219
|
+
}
|
|
220
|
+
.eds-contrast .eds-dropdown__selected-item-tag--disabled {
|
|
221
|
+
background-color: #54568c;
|
|
222
|
+
border-color: transparent;
|
|
223
|
+
color: #8285a8;
|
|
224
|
+
}
|
|
225
|
+
/* DO NOT CHANGE!*/
|
|
226
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
227
|
+
.eds-dropdown__list {
|
|
228
|
+
position: absolute;
|
|
229
|
+
display: none;
|
|
230
|
+
list-style: none;
|
|
231
|
+
border-radius: 0.25rem;
|
|
232
|
+
border: 0.125rem solid #7C7F9F;
|
|
233
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
234
|
+
padding: 0;
|
|
235
|
+
margin: 0;
|
|
236
|
+
margin-top: 0.5rem;
|
|
237
|
+
max-height: 50vh;
|
|
238
|
+
overflow-y: auto;
|
|
239
|
+
width: 100%;
|
|
240
|
+
z-index: 20;
|
|
241
|
+
}
|
|
242
|
+
.eds-dropdown__list:focus {
|
|
243
|
+
outline: none;
|
|
244
|
+
}
|
|
245
|
+
.eds-dropdown__list--open {
|
|
246
|
+
display: inline-block;
|
|
247
|
+
}
|
|
248
|
+
.eds-dropdown__list__item {
|
|
249
|
+
background-color: #f8f8f8;
|
|
16
250
|
color: #181c56;
|
|
251
|
+
display: flex;
|
|
252
|
+
align-items: center;
|
|
253
|
+
justify-content: flex-start;
|
|
254
|
+
font-family: inherit;
|
|
255
|
+
font-size: 1rem;
|
|
256
|
+
line-height: 1.25rem;
|
|
257
|
+
padding: 0.75rem 1rem;
|
|
258
|
+
width: 100%;
|
|
259
|
+
overflow-x: hidden;
|
|
260
|
+
word-break: break-word;
|
|
261
|
+
}
|
|
262
|
+
.eds-dropdown__list__item:last-child {
|
|
263
|
+
border-bottom: none;
|
|
264
|
+
}
|
|
265
|
+
.eds-dropdown__list__item__text {
|
|
266
|
+
flex: 1;
|
|
267
|
+
}
|
|
268
|
+
.eds-dropdown__list__item__icon {
|
|
269
|
+
margin-left: 0.75rem;
|
|
270
|
+
}
|
|
271
|
+
.eds-dropdown__list__item__checkbox {
|
|
272
|
+
pointer-events: none;
|
|
273
|
+
}
|
|
274
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
|
|
275
|
+
border-color: #181c56;
|
|
276
|
+
}
|
|
277
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
|
|
278
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
|
|
279
|
+
background-color: #181c56;
|
|
280
|
+
}
|
|
281
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
|
|
282
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
|
|
283
|
+
stroke: #ffffff;
|
|
284
|
+
}
|
|
285
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
|
|
286
|
+
.eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
|
|
287
|
+
fill: #ffffff;
|
|
288
|
+
}
|
|
289
|
+
.eds-dropdown__list__item--highlighted {
|
|
290
|
+
background-color: #d1d4e3;
|
|
291
|
+
}
|
|
292
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
|
|
293
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
|
|
294
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
|
|
295
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
|
|
296
|
+
background-color: #54568c;
|
|
297
|
+
border-color: transparent;
|
|
298
|
+
}
|
|
299
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
|
|
300
|
+
.eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
|
|
301
|
+
border-color: #54568c;
|
|
302
|
+
}
|
|
303
|
+
.eds-dropdown__list__item--selected {
|
|
304
|
+
background-color: #54568c;
|
|
305
|
+
color: #ffffff;
|
|
306
|
+
}
|
|
307
|
+
@media all and (min-width: 50rem) {
|
|
308
|
+
.eds-dropdown__list {
|
|
309
|
+
max-height: 30vh;
|
|
310
|
+
}
|
|
17
311
|
}
|
|
18
312
|
/* DO NOT CHANGE!*/
|
|
19
313
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -172,15 +466,6 @@
|
|
|
172
466
|
}
|
|
173
467
|
/* DO NOT CHANGE!*/
|
|
174
468
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
175
|
-
.eds-inline-spinner {
|
|
176
|
-
align-items: center;
|
|
177
|
-
display: flex;
|
|
178
|
-
justify-content: center;
|
|
179
|
-
height: 100%;
|
|
180
|
-
width: 100%;
|
|
181
|
-
}
|
|
182
|
-
/* DO NOT CHANGE!*/
|
|
183
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
184
469
|
.eds-dropdown__searchable-selected-item {
|
|
185
470
|
display: block;
|
|
186
471
|
font-size: 1rem;
|
|
@@ -206,132 +491,13 @@
|
|
|
206
491
|
}
|
|
207
492
|
/* DO NOT CHANGE!*/
|
|
208
493
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
209
|
-
.eds-
|
|
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;
|
|
278
|
-
border-radius: 0.25rem;
|
|
279
|
-
border: 0.125rem solid #d1d3d3;
|
|
280
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
281
|
-
padding: 0;
|
|
282
|
-
margin: 0;
|
|
283
|
-
margin-top: 0.5rem;
|
|
284
|
-
max-height: 50vh;
|
|
285
|
-
overflow-y: auto;
|
|
286
|
-
width: 100%;
|
|
287
|
-
z-index: 20;
|
|
288
|
-
}
|
|
289
|
-
.eds-searchable-dropdown__list--open {
|
|
290
|
-
display: inline-block;
|
|
291
|
-
}
|
|
292
|
-
.eds-searchable-dropdown__list:focus {
|
|
293
|
-
outline: none;
|
|
294
|
-
}
|
|
295
|
-
@media all and (min-width: 50rem) {
|
|
296
|
-
.eds-searchable-dropdown__list {
|
|
297
|
-
max-height: 30vh;
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
.eds-searchable-dropdown__list__item {
|
|
494
|
+
.eds-inline-spinner {
|
|
301
495
|
align-items: center;
|
|
302
|
-
background-color: #f8f8f8;
|
|
303
|
-
border-bottom: 0.125rem solid #d1d3d3;
|
|
304
|
-
color: #181c56;
|
|
305
496
|
display: flex;
|
|
306
|
-
justify-content:
|
|
307
|
-
|
|
308
|
-
font-size: 1rem;
|
|
309
|
-
line-height: 1.25rem;
|
|
310
|
-
padding: 0.75rem 1rem;
|
|
497
|
+
justify-content: center;
|
|
498
|
+
height: 100%;
|
|
311
499
|
width: 100%;
|
|
312
500
|
}
|
|
313
|
-
.eds-searchable-dropdown__list__item:last-child {
|
|
314
|
-
border-bottom: none;
|
|
315
|
-
}
|
|
316
|
-
.eds-searchable-dropdown__list__item-icon {
|
|
317
|
-
margin-left: 0.75rem;
|
|
318
|
-
}
|
|
319
|
-
.eds-searchable-dropdown__list__item--highlighted {
|
|
320
|
-
background-color: #d1d4e3;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.eds-form-control.eds-searchable-dropdown__input::-moz-placeholder {
|
|
324
|
-
-moz-transition: none;
|
|
325
|
-
transition: none;
|
|
326
|
-
position: relative;
|
|
327
|
-
bottom: 1px;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
.eds-form-control.eds-searchable-dropdown__input::placeholder {
|
|
331
|
-
transition: none;
|
|
332
|
-
position: relative;
|
|
333
|
-
bottom: 1px;
|
|
334
|
-
}
|
|
335
501
|
/* DO NOT CHANGE!*/
|
|
336
502
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
337
503
|
.eds-dropdown-wrapper {
|
|
@@ -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[];
|
package/dist/utils.d.ts
ADDED
|
@@ -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": "
|
|
3
|
+
"version": "5.0.0-RC.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/dropdown.esm.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@entur/tooltip": "^2.6.20",
|
|
38
38
|
"@entur/utils": "^0.9.1",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
|
-
"downshift": "^6.1
|
|
40
|
+
"downshift": "^7.6.1"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "aac30cc9c47141b17a95865267b2d75b6b8566f5"
|
|
43
43
|
}
|
package/dist/DropdownList.d.ts
DELETED
|
@@ -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,17 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { UseComboboxGetMenuPropsOptions, GetPropsCommonOptions, UseComboboxGetItemPropsOptions } from 'downshift';
|
|
3
|
-
import { NormalizedDropdownItemType } from '../useNormalizedItems';
|
|
4
|
-
type DropdownListProps = {
|
|
5
|
-
selectedItem: NormalizedDropdownItemType | null;
|
|
6
|
-
isOpen: boolean;
|
|
7
|
-
filteredItems: NormalizedDropdownItemType[];
|
|
8
|
-
highlightedIndex: number;
|
|
9
|
-
listStyle: {
|
|
10
|
-
[key: string]: any;
|
|
11
|
-
} | undefined;
|
|
12
|
-
getMenuProps: (options?: UseComboboxGetMenuPropsOptions | undefined, otherOptions?: GetPropsCommonOptions | undefined) => any;
|
|
13
|
-
getItemProps: (options: UseComboboxGetItemPropsOptions<NormalizedDropdownItemType>) => any;
|
|
14
|
-
[key: string]: any;
|
|
15
|
-
};
|
|
16
|
-
export declare const DropdownList: ({ selectedItem, isOpen, getMenuProps, getItemProps, filteredItems, highlightedIndex, listStyle, ...rest }: DropdownListProps) => JSX.Element;
|
|
17
|
-
export {};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { VariantType } from '@entur/form';
|
|
3
|
-
import { NormalizedDropdownItemType } from '../useNormalizedItems';
|
|
4
|
-
import './dropdown.scss';
|
|
5
|
-
export type SearchableDropdownProps = {
|
|
6
|
-
/** Tilgjengelige valg i dropdown-en */
|
|
7
|
-
items: NormalizedDropdownItemType[];
|
|
8
|
-
/** Valgt element. Bruk null for ingen verdi. */
|
|
9
|
-
selectedItem: NormalizedDropdownItemType | null;
|
|
10
|
-
/** Callback for når brukeren endrer valg */
|
|
11
|
-
onChange: (value: NormalizedDropdownItemType | null) => void;
|
|
12
|
-
/** Beskrivende tekst som forklarer feltet */
|
|
13
|
-
label: string;
|
|
14
|
-
/** Placeholder-tekst når ingenting er satt */
|
|
15
|
-
placeholder?: string;
|
|
16
|
-
/** Vis knapp for å nullstille Dropdown-en skal vises
|
|
17
|
-
* @default false
|
|
18
|
-
*/
|
|
19
|
-
clearable?: boolean;
|
|
20
|
-
/** Vis listen med valg skal vises på fokus av inputfeltet
|
|
21
|
-
* @default false
|
|
22
|
-
*/
|
|
23
|
-
openOnFocus?: boolean;
|
|
24
|
-
/** Gjør dropdown-en til å kun kunne leses
|
|
25
|
-
* @default false
|
|
26
|
-
*/
|
|
27
|
-
readonly?: boolean;
|
|
28
|
-
/** Hvilken valideringsvariant som gjelder */
|
|
29
|
-
variant?: VariantType;
|
|
30
|
-
/** Valideringsmelding, brukes sammen med `variant` */
|
|
31
|
-
feedback?: string;
|
|
32
|
-
className?: string;
|
|
33
|
-
style?: {
|
|
34
|
-
[key: string]: any;
|
|
35
|
-
};
|
|
36
|
-
/** Style som kun påføres listeelementet */
|
|
37
|
-
listStyle?: {
|
|
38
|
-
[key: string]: any;
|
|
39
|
-
};
|
|
40
|
-
[key: string]: any;
|
|
41
|
-
};
|
|
42
|
-
export declare const SearchableDropdownBeta: ({ items, selectedItem: value, onChange, label, placeholder, clearable, openOnFocus, readonly, feedback, variant, className, listStyle, ...rest }: SearchableDropdownProps) => JSX.Element;
|
package/dist/beta/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './SearchableDropdown';
|