@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.
- 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 +326 -160
- package/dist/useNormalizedItems.d.ts +5 -6
- package/dist/utils.d.ts +48 -0
- package/package.json +10 -10
- 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,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-
|
|
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-
|
|
21
|
-
|
|
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-
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
max-height: 30vh;
|
|
45
|
-
}
|
|
199
|
+
.eds-dropdown__list--open {
|
|
200
|
+
display: inline-block;
|
|
46
201
|
}
|
|
47
|
-
.eds-
|
|
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
|
-
|
|
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-
|
|
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-
|
|
69
|
-
|
|
70
|
-
border-color: #54568c;
|
|
71
|
-
background-color: #ffffff;
|
|
219
|
+
.eds-dropdown__list__item__text {
|
|
220
|
+
flex: 1;
|
|
72
221
|
}
|
|
73
|
-
.eds-
|
|
74
|
-
|
|
222
|
+
.eds-dropdown__list__item__icon {
|
|
223
|
+
margin-left: 0.75rem;
|
|
75
224
|
}
|
|
76
|
-
.eds-
|
|
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-
|
|
80
|
-
|
|
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-
|
|
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
|
-
|
|
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-
|
|
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-
|
|
424
|
+
.eds-dropdown-list:focus {
|
|
293
425
|
outline: none;
|
|
294
426
|
}
|
|
295
427
|
@media all and (min-width: 50rem) {
|
|
296
|
-
.eds-
|
|
428
|
+
.eds-dropdown-list {
|
|
297
429
|
max-height: 30vh;
|
|
298
430
|
}
|
|
299
431
|
}
|
|
300
|
-
.eds-
|
|
432
|
+
.eds-dropdown-list__item {
|
|
301
433
|
align-items: center;
|
|
302
434
|
background-color: #f8f8f8;
|
|
303
|
-
border-bottom: 0.125rem solid #
|
|
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-
|
|
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-
|
|
317
|
-
|
|
453
|
+
.eds-contrast .eds-dropdown-list__item {
|
|
454
|
+
color: #181c56;
|
|
455
|
+
border-color: #54568c;
|
|
456
|
+
background-color: #ffffff;
|
|
318
457
|
}
|
|
319
|
-
.eds-
|
|
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-
|
|
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-
|
|
489
|
+
.eds-form-control.eds-dropdown__input::placeholder {
|
|
331
490
|
transition: none;
|
|
332
|
-
|
|
333
|
-
|
|
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[];
|
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.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.
|
|
31
|
-
"@entur/button": "^3.0.
|
|
32
|
-
"@entur/chip": "^0.6.
|
|
33
|
-
"@entur/form": "^7.0.
|
|
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.
|
|
35
|
+
"@entur/loader": "^0.4.32",
|
|
36
36
|
"@entur/tokens": "^3.10.0",
|
|
37
|
-
"@entur/tooltip": "^2.6.
|
|
38
|
-
"@entur/utils": "^0.9.
|
|
37
|
+
"@entur/tooltip": "^2.6.20",
|
|
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": "e4d22f6fc1c7cb4e76306a1be92930325c9c8e25"
|
|
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>;
|