@entur/dropdown 6.0.8 → 6.0.9-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/styles.css CHANGED
@@ -1,3 +1,63 @@
1
+ .eds-inline-spinner {
2
+ align-items: center;
3
+ display: flex;
4
+ justify-content: center;
5
+ height: 100%;
6
+ width: 100%;
7
+ }
8
+ /* DO NOT CHANGE!*/
9
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
10
+ .eds-dropdown__searchable-selected-item {
11
+ display: block;
12
+ font-size: 1rem;
13
+ line-height: 1rem;
14
+ margin-right: -1rem;
15
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
16
+ font-family: inherit;
17
+ overflow-x: hidden;
18
+ text-overflow: ellipsis;
19
+ white-space: nowrap;
20
+ }
21
+ .eds-dropdown__searchable-selected-item__wrapper {
22
+ max-width: 65%;
23
+ }
24
+
25
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
26
+ -moz-transition: none;
27
+ transition: none;
28
+ }
29
+
30
+ .eds-form-control.eds-dropdown__input::placeholder {
31
+ transition: none;
32
+ }
33
+ /* DO NOT CHANGE!*/
34
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
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;
47
+ display: flex;
48
+ justify-content: center;
49
+ }
50
+ .eds-dropdown__toggle-button--open svg {
51
+ transform: rotate(180deg);
52
+ }
53
+ .eds-dropdown__toggle-button:focus {
54
+ outline-offset: 0.125rem;
55
+ outline: none;
56
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
57
+ }
58
+ .eds-contrast .eds-dropdown__toggle-button:focus {
59
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
60
+ }
1
61
  /* DO NOT CHANGE!*/
2
62
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
63
  .eds-dropdown-list {
@@ -64,124 +124,6 @@
64
124
  }
65
125
  /* DO NOT CHANGE!*/
66
126
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
67
- .eds-dropdown__searchable-selected-item {
68
- display: block;
69
- font-size: 1rem;
70
- line-height: 1rem;
71
- margin-right: -1rem;
72
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
73
- font-family: inherit;
74
- overflow-x: hidden;
75
- text-overflow: ellipsis;
76
- white-space: nowrap;
77
- }
78
- .eds-dropdown__searchable-selected-item__wrapper {
79
- max-width: 65%;
80
- }
81
-
82
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
83
- -moz-transition: none;
84
- transition: none;
85
- }
86
-
87
- .eds-form-control.eds-dropdown__input::placeholder {
88
- transition: none;
89
- }
90
- /* DO NOT CHANGE!*/
91
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
92
- .eds-dropdown-wrapper {
93
- position: relative;
94
- }
95
- .eds-dropdown-wrapper .eds-form-control {
96
- padding-right: 0;
97
- }
98
- .eds-dropdown-wrapper .eds-form-control__append {
99
- display: flex;
100
- align-items: center;
101
- }
102
-
103
- .eds-dropdown__input::-moz-placeholder {
104
- color: var(--components-form-baseform-standard-text-label);
105
- }
106
-
107
- .eds-dropdown__input::placeholder {
108
- color: var(--components-form-baseform-standard-text-label);
109
- }
110
-
111
- .eds-dropdown__selected-item {
112
- overflow-x: hidden;
113
- text-overflow: ellipsis;
114
- white-space: nowrap;
115
- }
116
-
117
- .eds-dropdown__clear-button {
118
- background: none;
119
- border: none;
120
- border-radius: 50%;
121
- color: inherit;
122
- cursor: pointer;
123
- display: flex;
124
- font: inherit;
125
- font-size: 1rem;
126
- line-height: 1rem;
127
- padding: 0.5rem;
128
- }
129
- .eds-dropdown__clear-button:hover {
130
- background: #f3f3f3;
131
- }
132
- .eds-dropdown__clear-button:focus {
133
- outline-offset: 0.125rem;
134
- outline: none;
135
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
136
- }
137
-
138
- .eds-dropdown__divider {
139
- content: "";
140
- display: block;
141
- background-color: #e9e9e9;
142
- height: 1.5rem;
143
- width: 1px;
144
- }
145
- .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
146
- background-color: #8285a8;
147
- }
148
- .eds-inline-spinner {
149
- align-items: center;
150
- display: flex;
151
- justify-content: center;
152
- height: 100%;
153
- width: 100%;
154
- }
155
- /* DO NOT CHANGE!*/
156
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
157
- .eds-dropdown__toggle-button {
158
- -webkit-appearance: none;
159
- -moz-appearance: none;
160
- appearance: none;
161
- background: none;
162
- border: none;
163
- border-radius: 0;
164
- color: inherit;
165
- font-size: inherit;
166
- font-family: inherit;
167
- margin-right: -0.75rem;
168
- padding: 0.5rem;
169
- display: flex;
170
- justify-content: center;
171
- }
172
- .eds-dropdown__toggle-button--open svg {
173
- transform: rotate(180deg);
174
- }
175
- .eds-dropdown__toggle-button:focus {
176
- outline-offset: 0.125rem;
177
- outline: none;
178
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
179
- }
180
- .eds-contrast .eds-dropdown__toggle-button:focus {
181
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
182
- }
183
- /* DO NOT CHANGE!*/
184
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
185
127
  .eds-multi-select {
186
128
  position: relative;
187
129
  }
@@ -273,6 +215,148 @@
273
215
  }
274
216
  /* DO NOT CHANGE!*/
275
217
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
218
+ .eds-dropdown-wrapper {
219
+ position: relative;
220
+ }
221
+ .eds-dropdown-wrapper .eds-form-control {
222
+ padding-right: 0;
223
+ }
224
+ .eds-dropdown-wrapper .eds-form-control__append {
225
+ display: flex;
226
+ align-items: center;
227
+ }
228
+
229
+ .eds-dropdown__input::-moz-placeholder {
230
+ color: var(--components-form-baseform-standard-text-label);
231
+ }
232
+
233
+ .eds-dropdown__input::placeholder {
234
+ color: var(--components-form-baseform-standard-text-label);
235
+ }
236
+
237
+ .eds-dropdown__selected-item {
238
+ overflow-x: hidden;
239
+ text-overflow: ellipsis;
240
+ white-space: nowrap;
241
+ }
242
+
243
+ .eds-dropdown__clear-button {
244
+ background: none;
245
+ border: none;
246
+ border-radius: 50%;
247
+ color: inherit;
248
+ cursor: pointer;
249
+ display: flex;
250
+ font: inherit;
251
+ font-size: 1rem;
252
+ line-height: 1rem;
253
+ padding: 0.5rem;
254
+ }
255
+ .eds-dropdown__clear-button:hover {
256
+ background: #f3f3f3;
257
+ }
258
+ .eds-dropdown__clear-button:focus {
259
+ outline-offset: 0.125rem;
260
+ outline: none;
261
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
262
+ }
263
+
264
+ .eds-dropdown__divider {
265
+ content: "";
266
+ display: block;
267
+ background-color: #e9e9e9;
268
+ height: 1.5rem;
269
+ width: 1px;
270
+ }
271
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
272
+ background-color: #8285a8;
273
+ }
274
+ /* DO NOT CHANGE!*/
275
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
276
+ .eds-dropdown__list {
277
+ box-sizing: content-box;
278
+ max-height: 50vh;
279
+ overflow-y: auto;
280
+ padding: 0;
281
+ margin: 0;
282
+ list-style: none;
283
+ border: 0.125rem solid var(--components-form-basemenu-border);
284
+ border-radius: 0.25rem;
285
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
286
+ cursor: default;
287
+ }
288
+ .eds-dropdown__list__floating-container {
289
+ z-index: 20;
290
+ width: calc(100% + 0.25rem);
291
+ }
292
+ .eds-dropdown__list:focus {
293
+ outline: none;
294
+ }
295
+ .eds-dropdown__list__item {
296
+ display: flex;
297
+ align-items: center;
298
+ justify-content: flex-start;
299
+ padding: 0.75rem 1rem;
300
+ font-family: inherit;
301
+ font-size: 1rem;
302
+ word-break: break-word;
303
+ line-height: 1.25rem;
304
+ overflow-x: hidden;
305
+ color: var(--components-form-basemenu-text);
306
+ background-color: var(--components-form-basemenu-fill-default);
307
+ }
308
+ .eds-dropdown__list__item:last-child {
309
+ border-bottom: none;
310
+ }
311
+ .eds-dropdown__list__item__text {
312
+ flex: 1;
313
+ cursor: default;
314
+ }
315
+ .eds-dropdown__list__item__icon {
316
+ margin-left: 0.75rem;
317
+ }
318
+ .eds-dropdown__list__item__checkbox {
319
+ pointer-events: none;
320
+ }
321
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
322
+ border-color: var(--components-form-checkbox-standard-border);
323
+ }
324
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
325
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
326
+ background-color: var(--components-form-checkbox-standard-fill-selected);
327
+ }
328
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
329
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
330
+ stroke: var(--components-form-checkbox-standard-icon);
331
+ }
332
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
333
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
334
+ fill: var(--components-form-checkbox-standard-icon);
335
+ }
336
+ .eds-dropdown__list__item--highlighted {
337
+ background-color: var(--components-form-basemenu-fill-hover);
338
+ }
339
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
340
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
341
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
342
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
343
+ background-color: var(--components-form-checkbox-standard-fill-selected);
344
+ border-color: transparent;
345
+ }
346
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
347
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
348
+ border-color: var(--components-form-checkbox-standard-border);
349
+ }
350
+ .eds-dropdown__list__item--selected {
351
+ background-color: var(--components-form-basemenu-fill-hover);
352
+ }
353
+ @media all and (min-width: 50rem) {
354
+ .eds-dropdown__list {
355
+ max-height: 30vh;
356
+ }
357
+ }
358
+ /* DO NOT CHANGE!*/
359
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
276
360
  .eds-contrast .eds-dropdown__selected-item-tag {
277
361
  background: var(--components-chip-standard-default);
278
362
  border: 0.0625rem solid var(--components-chip-standard-border);
@@ -386,88 +470,6 @@
386
470
  }
387
471
  /* DO NOT CHANGE!*/
388
472
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
389
- .eds-dropdown__list {
390
- box-sizing: content-box;
391
- z-index: 20;
392
- width: 100%;
393
- max-height: 50vh;
394
- overflow-y: auto;
395
- padding: 0;
396
- margin: 0;
397
- list-style: none;
398
- border: 0.125rem solid var(--components-form-basemenu-border);
399
- border-radius: 0.25rem;
400
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
401
- cursor: default;
402
- }
403
- .eds-dropdown__list:focus {
404
- outline: none;
405
- }
406
- .eds-dropdown__list__item {
407
- display: flex;
408
- align-items: center;
409
- justify-content: flex-start;
410
- padding: 0.75rem 1rem;
411
- font-family: inherit;
412
- font-size: 1rem;
413
- word-break: break-word;
414
- line-height: 1.25rem;
415
- overflow-x: hidden;
416
- color: var(--components-form-basemenu-text);
417
- background-color: var(--components-form-basemenu-fill-default);
418
- }
419
- .eds-dropdown__list__item:last-child {
420
- border-bottom: none;
421
- }
422
- .eds-dropdown__list__item__text {
423
- flex: 1;
424
- cursor: default;
425
- }
426
- .eds-dropdown__list__item__icon {
427
- margin-left: 0.75rem;
428
- }
429
- .eds-dropdown__list__item__checkbox {
430
- pointer-events: none;
431
- }
432
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
433
- border-color: var(--components-form-checkbox-standard-border);
434
- }
435
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
436
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
437
- background-color: var(--components-form-checkbox-standard-fill-selected);
438
- }
439
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
440
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
441
- stroke: var(--components-form-checkbox-standard-icon);
442
- }
443
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
444
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
445
- fill: var(--components-form-checkbox-standard-icon);
446
- }
447
- .eds-dropdown__list__item--highlighted {
448
- background-color: var(--components-form-basemenu-fill-hover);
449
- }
450
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
451
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
452
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
453
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
454
- background-color: var(--components-form-checkbox-standard-fill-selected);
455
- border-color: transparent;
456
- }
457
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
458
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
459
- border-color: var(--components-form-checkbox-standard-border);
460
- }
461
- .eds-dropdown__list__item--selected {
462
- background-color: var(--components-form-basemenu-fill-hover);
463
- }
464
- @media all and (min-width: 50rem) {
465
- .eds-dropdown__list {
466
- max-height: 30vh;
467
- }
468
- }
469
- /* DO NOT CHANGE!*/
470
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
471
473
  .eds-dropdown {
472
474
  cursor: pointer;
473
475
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "6.0.8",
3
+ "version": "6.0.9-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -40,5 +40,5 @@
40
40
  "classnames": "^2.3.1",
41
41
  "downshift": "^9.0.8"
42
42
  },
43
- "gitHead": "36055df834c5a9dd170f1846c1e0469481575e1a"
43
+ "gitHead": "cf21b6b037b7905d14ff6ec5972c06bcd0326e26"
44
44
  }