@entur/dropdown 5.3.5 → 5.4.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/styles.css CHANGED
@@ -1,66 +1,27 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-dropdown-list {
4
- border-radius: 0.25rem;
5
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
6
- display: none;
7
- list-style: none;
8
- margin: 0;
9
- max-height: 50vh;
10
- padding: 0;
11
- position: relative;
12
- overflow-y: auto;
13
- width: 100%;
14
- z-index: 20;
15
- }
16
- .eds-contrast .eds-dropdown-list {
17
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
18
- }
19
- .eds-dropdown-list--open {
20
- display: inline-block;
21
- }
22
- .eds-dropdown-list:focus {
23
- outline: none;
24
- }
25
- @media all and (min-width: 50rem) {
26
- .eds-dropdown-list {
27
- max-height: 30vh;
28
- }
29
- }
30
- .eds-dropdown-list__item {
31
- align-items: center;
32
- background-color: #f8f8f8;
33
- border-bottom: 0.125rem solid #e9e9e9;
34
- border-left: 0.125rem solid #e9e9e9;
35
- border-right: 0.125rem solid #e9e9e9;
36
- color: #181c56;
37
- display: flex;
38
- justify-content: space-between;
39
- font-family: inherit;
3
+ .eds-dropdown__searchable-selected-item {
4
+ display: block;
40
5
  font-size: 1rem;
41
- line-height: 1.25rem;
42
- padding: 0.75rem 1rem;
43
- width: 100%;
44
- }
45
- .eds-dropdown-list__item:first-child {
46
- border-top: 0.125rem solid #e9e9e9;
47
- }
48
- .eds-dropdown-list__item:last-child {
49
- border-bottom: none;
50
- }
51
- .eds-contrast .eds-dropdown-list__item {
52
- color: #181c56;
53
- border-color: #54568c;
54
- background-color: #ffffff;
6
+ line-height: 1rem;
7
+ margin-right: -1rem;
8
+ padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
9
+ font-family: inherit;
10
+ overflow-x: hidden;
11
+ text-overflow: ellipsis;
12
+ white-space: nowrap;
55
13
  }
56
- .eds-dropdown-list__item--highlighted {
57
- background-color: #d1d4e3;
14
+ .eds-dropdown__searchable-selected-item__wrapper {
15
+ max-width: 65%;
58
16
  }
59
- .eds-contrast .eds-dropdown-list__item--highlighted {
60
- background-color: #d1d4e3;
17
+
18
+ .eds-form-control.eds-dropdown__input::-moz-placeholder {
19
+ -moz-transition: none;
20
+ transition: none;
61
21
  }
62
- .eds-dropdown-list-icon {
63
- margin-left: 0.75rem;
22
+
23
+ .eds-form-control.eds-dropdown__input::placeholder {
24
+ transition: none;
64
25
  }
65
26
  /* DO NOT CHANGE!*/
66
27
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -120,37 +81,76 @@
120
81
  .eds-contrast .eds-form-control-wrapper--disabled .eds-dropdown__divider {
121
82
  background-color: #8285a8;
122
83
  }
123
- .eds-inline-spinner {
84
+ /* DO NOT CHANGE!*/
85
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
86
+ .eds-dropdown-list {
87
+ border-radius: 0.25rem;
88
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
89
+ display: none;
90
+ list-style: none;
91
+ margin: 0;
92
+ max-height: 50vh;
93
+ padding: 0;
94
+ position: relative;
95
+ overflow-y: auto;
96
+ width: 100%;
97
+ z-index: 20;
98
+ }
99
+ .eds-contrast .eds-dropdown-list {
100
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
101
+ }
102
+ .eds-dropdown-list--open {
103
+ display: inline-block;
104
+ }
105
+ .eds-dropdown-list:focus {
106
+ outline: none;
107
+ }
108
+ @media all and (min-width: 50rem) {
109
+ .eds-dropdown-list {
110
+ max-height: 30vh;
111
+ }
112
+ }
113
+ .eds-dropdown-list__item {
124
114
  align-items: center;
115
+ background-color: #f8f8f8;
116
+ border-bottom: 0.125rem solid #e9e9e9;
117
+ border-left: 0.125rem solid #e9e9e9;
118
+ border-right: 0.125rem solid #e9e9e9;
119
+ color: #181c56;
125
120
  display: flex;
126
- justify-content: center;
127
- height: 100%;
121
+ justify-content: space-between;
122
+ font-family: inherit;
123
+ font-size: 1rem;
124
+ line-height: 1.25rem;
125
+ padding: 0.75rem 1rem;
128
126
  width: 100%;
129
127
  }
130
- /* DO NOT CHANGE!*/
131
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
132
- .eds-dropdown__searchable-selected-item {
133
- display: block;
134
- font-size: 1rem;
135
- line-height: 1rem;
136
- margin-right: -1rem;
137
- padding: calc(1rem + 0.25rem) 0 0.25rem 1rem;
138
- font-family: inherit;
139
- overflow-x: hidden;
140
- text-overflow: ellipsis;
141
- white-space: nowrap;
128
+ .eds-dropdown-list__item:first-child {
129
+ border-top: 0.125rem solid #e9e9e9;
142
130
  }
143
- .eds-dropdown__searchable-selected-item__wrapper {
144
- max-width: 65%;
131
+ .eds-dropdown-list__item:last-child {
132
+ border-bottom: none;
145
133
  }
146
-
147
- .eds-form-control.eds-dropdown__input::-moz-placeholder {
148
- -moz-transition: none;
149
- transition: none;
134
+ .eds-contrast .eds-dropdown-list__item {
135
+ color: #181c56;
136
+ border-color: #54568c;
137
+ background-color: #ffffff;
150
138
  }
151
-
152
- .eds-form-control.eds-dropdown__input::placeholder {
153
- transition: none;
139
+ .eds-dropdown-list__item--highlighted {
140
+ background-color: #d1d4e3;
141
+ }
142
+ .eds-contrast .eds-dropdown-list__item--highlighted {
143
+ background-color: #d1d4e3;
144
+ }
145
+ .eds-dropdown-list-icon {
146
+ margin-left: 0.75rem;
147
+ }
148
+ .eds-inline-spinner {
149
+ align-items: center;
150
+ display: flex;
151
+ justify-content: center;
152
+ height: 100%;
153
+ width: 100%;
154
154
  }
155
155
  /* DO NOT CHANGE!*/
156
156
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -356,6 +356,114 @@
356
356
  }
357
357
  /* DO NOT CHANGE!*/
358
358
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
359
+ .eds-contrast .eds-dropdown__selected-item-tag {
360
+ background: var(--components-chip-standard-default);
361
+ border: 0.0625rem solid var(--components-chip-standard-border);
362
+ color: var(--components-chip-standard-text-unselected);
363
+ }
364
+ .eds-contrast .eds-dropdown__selected-item-tag:hover {
365
+ border-color: var(--components-chip-standard-border);
366
+ background-color: var(--components-chip-standard-hover);
367
+ }
368
+ .eds-contrast .eds-dropdown__selected-item-tag:active {
369
+ background-color: var(--components-chip-standard-active);
370
+ border-color: transparent;
371
+ }
372
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
373
+ color: var(--components-chip-standard-text-unselected);
374
+ }
375
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
376
+ background-color: var(--components-chip-standard-hover);
377
+ }
378
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
379
+ outline-color: var(--basecolors-stroke-focus-standard);
380
+ }
381
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
382
+ padding-right: 0.5rem;
383
+ }
384
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
385
+ display: none;
386
+ }
387
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly {
388
+ background-color: var(--components-dropdown-dropdown-standard-fill-readonly);
389
+ border-color: transparent;
390
+ color: var(--components-dropdown-dropdown-standard-text-readonly);
391
+ }
392
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled {
393
+ background-color: var(--components-dropdown-dropdown-standard-fill-disabled);
394
+ border-color: transparent;
395
+ color: var(--components-dropdown-dropdown-standard-text-disabled);
396
+ }
397
+ .eds-dropdown .eds-icon-button {
398
+ color: var(--components-button-iconbutton-standard-text);
399
+ }
400
+ .eds-dropdown .eds-icon-button:hover {
401
+ background-color: var(--components-button-iconbutton-standard-hover);
402
+ }
403
+ .eds-dropdown .eds-icon-button:focus {
404
+ outline: 2px solid #181c56;
405
+ outline-color: var(--basecolors-stroke-focus-standard);
406
+ outline-offset: 0.125rem;
407
+ }
408
+ .eds-dropdown .eds-icon-button:active {
409
+ background-color: var(--components-button-iconbutton-standard-active);
410
+ }
411
+ .eds-dropdown__appendix {
412
+ display: flex;
413
+ align-items: center;
414
+ }
415
+ .eds-dropdown__appendix__clear-button {
416
+ padding: 0.5rem;
417
+ margin-right: 0.25rem;
418
+ }
419
+ .eds-contrast .eds-dropdown__appendix__clear-button:hover {
420
+ background-color: var(--components-button-iconbutton-standard-hover);
421
+ }
422
+ .eds-contrast .eds-dropdown__appendix__clear-button:focus {
423
+ outline-color: var(--basecolors-stroke-focus-standard);
424
+ }
425
+ .eds-dropdown__appendix__clear-button__tooltip {
426
+ white-space: nowrap;
427
+ }
428
+ .eds-dropdown__appendix__divider {
429
+ content: "";
430
+ display: block;
431
+ background-color: var(--components-dropdown-dropdown-standard-text-content);
432
+ height: 1.5rem;
433
+ width: 1px;
434
+ }
435
+ .eds-dropdown__appendix__toggle-button {
436
+ margin-right: -0.75rem;
437
+ margin-left: 0.25rem;
438
+ }
439
+ .eds-dropdown__appendix__toggle-button--open svg {
440
+ transform: rotate(180deg);
441
+ }
442
+ .eds-dropdown__appendix__toggle-button svg {
443
+ transition: transform ease-in-out 0.1s;
444
+ }
445
+ .eds-dropdown__appendix__toggle-button--loading-dots {
446
+ align-items: center;
447
+ display: flex;
448
+ justify-content: center;
449
+ height: 100%;
450
+ width: 1rem;
451
+ margin-left: calc(0.5rem + 2px);
452
+ }
453
+ .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
454
+ background-color: var(--components-loader-loader-standard-text);
455
+ }
456
+ .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
457
+ background-color: var(--components-loader-loader-standard-text);
458
+ }
459
+ .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
460
+ background-color: var(--components-button-iconbutton-standard-hover);
461
+ }
462
+ .eds-contrast .eds-dropdown__appendix__toggle-button:focus {
463
+ outline-color: var(--basecolors-stroke-focus-standard);
464
+ }
465
+ /* DO NOT CHANGE!*/
466
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
359
467
  .eds-dropdown__wrapper {
360
468
  position: relative;
361
469
  width: 100%;
@@ -482,114 +590,6 @@
482
590
  .eds-contrast .eds-dropdown--native option {
483
591
  color: var(--components-form-basemenu-text);
484
592
  }
485
- /* DO NOT CHANGE!*/
486
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
487
- .eds-contrast .eds-dropdown__selected-item-tag {
488
- background: var(--components-chip-standard-default);
489
- border: 0.0625rem solid var(--components-chip-standard-border);
490
- color: var(--components-chip-standard-text-unselected);
491
- }
492
- .eds-contrast .eds-dropdown__selected-item-tag:hover {
493
- border-color: var(--components-chip-standard-border);
494
- background-color: var(--components-chip-standard-hover);
495
- }
496
- .eds-contrast .eds-dropdown__selected-item-tag:active {
497
- background-color: var(--components-chip-standard-active);
498
- border-color: transparent;
499
- }
500
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
501
- color: var(--components-chip-standard-text-unselected);
502
- }
503
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
504
- background-color: var(--components-chip-standard-hover);
505
- }
506
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus {
507
- outline-color: var(--basecolors-stroke-focus-standard);
508
- }
509
- .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
510
- padding-right: 0.5rem;
511
- }
512
- .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
513
- display: none;
514
- }
515
- .eds-contrast .eds-dropdown__selected-item-tag--readonly {
516
- background-color: var(--components-dropdown-dropdown-standard-fill-readonly);
517
- border-color: transparent;
518
- color: var(--components-dropdown-dropdown-standard-text-readonly);
519
- }
520
- .eds-contrast .eds-dropdown__selected-item-tag--disabled {
521
- background-color: var(--components-dropdown-dropdown-standard-fill-disabled);
522
- border-color: transparent;
523
- color: var(--components-dropdown-dropdown-standard-text-disabled);
524
- }
525
- .eds-dropdown .eds-icon-button {
526
- color: var(--components-button-iconbutton-standard-text);
527
- }
528
- .eds-dropdown .eds-icon-button:hover {
529
- background-color: var(--components-button-iconbutton-standard-hover);
530
- }
531
- .eds-dropdown .eds-icon-button:focus {
532
- outline: 2px solid #181c56;
533
- outline-color: var(--basecolors-stroke-focus-standard);
534
- outline-offset: 0.125rem;
535
- }
536
- .eds-dropdown .eds-icon-button:active {
537
- background-color: var(--components-button-iconbutton-standard-active);
538
- }
539
- .eds-dropdown__appendix {
540
- display: flex;
541
- align-items: center;
542
- }
543
- .eds-dropdown__appendix__clear-button {
544
- padding: 0.5rem;
545
- margin-right: 0.25rem;
546
- }
547
- .eds-contrast .eds-dropdown__appendix__clear-button:hover {
548
- background-color: var(--components-button-iconbutton-standard-hover);
549
- }
550
- .eds-contrast .eds-dropdown__appendix__clear-button:focus {
551
- outline-color: var(--basecolors-stroke-focus-standard);
552
- }
553
- .eds-dropdown__appendix__clear-button__tooltip {
554
- white-space: nowrap;
555
- }
556
- .eds-dropdown__appendix__divider {
557
- content: "";
558
- display: block;
559
- background-color: var(--components-dropdown-dropdown-standard-text-content);
560
- height: 1.5rem;
561
- width: 1px;
562
- }
563
- .eds-dropdown__appendix__toggle-button {
564
- margin-right: -0.75rem;
565
- margin-left: 0.25rem;
566
- }
567
- .eds-dropdown__appendix__toggle-button--open svg {
568
- transform: rotate(180deg);
569
- }
570
- .eds-dropdown__appendix__toggle-button svg {
571
- transition: transform ease-in-out 0.1s;
572
- }
573
- .eds-dropdown__appendix__toggle-button--loading-dots {
574
- align-items: center;
575
- display: flex;
576
- justify-content: center;
577
- height: 100%;
578
- width: 1rem;
579
- margin-left: calc(0.5rem + 2px);
580
- }
581
- .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
582
- background-color: var(--components-loader-loader-standard-text);
583
- }
584
- .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
585
- background-color: var(--components-loader-loader-standard-text);
586
- }
587
- .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
588
- background-color: var(--components-button-iconbutton-standard-hover);
589
- }
590
- .eds-contrast .eds-dropdown__appendix__toggle-button:focus {
591
- outline-color: var(--basecolors-stroke-focus-standard);
592
- }
593
593
  :root {
594
594
  --eds-dropdown: 1;
595
595
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "5.3.5",
3
+ "version": "5.4.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.79",
31
- "@entur/button": "^3.2.15",
32
- "@entur/chip": "^0.7.0",
33
- "@entur/form": "^7.0.43",
34
- "@entur/icons": "^6.15.4",
35
- "@entur/loader": "^0.4.59",
36
- "@entur/tokens": "^3.13.3",
37
- "@entur/tooltip": "^2.6.52",
38
- "@entur/utils": "^0.10.1",
30
+ "@entur/a11y": "^0.2.81",
31
+ "@entur/button": "^3.2.17",
32
+ "@entur/chip": "^0.7.2",
33
+ "@entur/form": "^7.1.1",
34
+ "@entur/icons": "^6.15.6",
35
+ "@entur/loader": "^0.4.61",
36
+ "@entur/tokens": "^3.13.4",
37
+ "@entur/tooltip": "^2.7.1",
38
+ "@entur/utils": "^0.11.0",
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^8.3.3"
41
41
  },
42
- "gitHead": "89d5de6d31962e236a5c147e129bf915576166b4"
42
+ "gitHead": "af2884729bb414d54d6cf9e9a28b2b6f7c74af74"
43
43
  }