@entur/menu 4.1.7 → 4.1.10

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/CollapsibleSideNavigation.d.ts +8 -0
  3. package/dist/Pagination.d.ts +4 -0
  4. package/dist/PaginationPage.d.ts +1 -0
  5. package/dist/menu.cjs.development.js +33 -10
  6. package/dist/menu.cjs.development.js.map +1 -1
  7. package/dist/menu.cjs.production.min.js +1 -1
  8. package/dist/menu.cjs.production.min.js.map +1 -1
  9. package/dist/menu.esm.js +34 -11
  10. package/dist/menu.esm.js.map +1 -1
  11. package/dist/styles.css +256 -256
  12. package/package.json +9 -8
package/dist/styles.css CHANGED
@@ -57,53 +57,165 @@
57
57
  font-weight: 600;
58
58
  }/* DO NOT CHANGE!*/
59
59
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
- .eds-top-navigation-item {
61
- --show-active-line: 0;
62
- display: inline-block;
63
- cursor: pointer;
60
+ .eds-pagination {
61
+ align-items: center;
62
+ display: flex;
63
+ flex-wrap: wrap;
64
+ row-gap: 0.75rem;
65
+ justify-content: space-between;
66
+ }
67
+ .eds-pagination__results {
68
+ align-items: center;
69
+ display: flex;
70
+ flex: 1;
71
+ justify-content: flex-start;
72
+ }
73
+ .eds-pagination__results-label {
74
+ margin-right: 0.5rem;
75
+ }
76
+ .eds-pagination__controls {
77
+ align-items: center;
78
+ display: flex;
79
+ justify-content: center;
80
+ }
81
+ .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
82
+ margin: 0 auto;
83
+ }
84
+
85
+ .eds-pagination-menu__menu-button {
86
+ -webkit-appearance: none;
87
+ -moz-appearance: none;
88
+ appearance: none;
89
+ background: transparent;
90
+ border: 0.0625rem solid #d1d3d3;
91
+ border-radius: 0.25rem;
64
92
  color: inherit;
65
- text-decoration: none;
66
- position: relative;
67
- padding: 1rem;
68
- min-width: 5rem;
69
- width: -webkit-fit-content;
70
- width: -moz-fit-content;
71
- width: fit-content;
72
- text-align: center;
73
93
  font-family: inherit;
74
- font-size: 1rem;
75
- font-weight: 600;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: space-around;
97
+ height: 2rem;
98
+ margin-left: 0.25rem;
99
+ margin-right: 1rem;
100
+ width: 3.5rem;
76
101
  }
77
- .eds-top-navigation-item::after {
78
- content: "";
79
- display: block;
80
- bottom: 1rem;
81
- height: 0.1875rem;
82
- width: 0;
83
- margin: 0 auto;
84
- opacity: var(--show-active-line);
85
- background: #ff5959;
86
- transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
102
+ .eds-pagination-menu__menu-button--open {
103
+ border-color: currentColor;
87
104
  }
88
- .eds-top-navigation-item:focus {
89
- outline-offset: 0.125rem;
105
+ .eds-pagination-menu__menu-button:focus {
90
106
  outline: none;
91
107
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
92
108
  }
93
- .eds-contrast .eds-top-navigation-item:focus {
94
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
109
+ .eds-pagination-menu__menu-list {
110
+ width: 3.5rem;
95
111
  }
96
- .eds-top-navigation-item:hover {
97
- --show-active-line: 1;
112
+
113
+ .eds-pagination__page {
114
+ align-items: center;
115
+ -webkit-appearance: none;
116
+ -moz-appearance: none;
117
+ appearance: none;
118
+ background: transparent;
119
+ border: 0.0625rem solid #d1d3d3;
120
+ border-color: #d1d3d3;
121
+ border-radius: 0.25rem;
122
+ color: inherit;
123
+ cursor: pointer;
124
+ display: flex;
125
+ font-family: inherit;
126
+ font-size: 0.875rem;
127
+ height: 2rem;
128
+ justify-content: center;
129
+ margin: 0 0.125rem;
130
+ padding: 0 0.25rem;
131
+ transition: background 0.1s ease-out, border-color 0.1s ease-out;
132
+ -webkit-user-select: none;
133
+ -moz-user-select: none;
134
+ -ms-user-select: none;
135
+ user-select: none;
136
+ min-width: 2rem;
98
137
  }
99
- .eds-top-navigation-item:hover::after {
138
+ .eds-contrast .eds-pagination__page {
139
+ border-color: #54568c;
140
+ }
141
+ .eds-pagination__page--selected {
142
+ background: #d1d4e3;
143
+ border-color: #181c56;
144
+ color: inherit;
145
+ opacity: 1;
146
+ pointer-events: none;
147
+ }
148
+ .eds-contrast .eds-pagination__page--selected {
149
+ border-color: #ffffff;
150
+ background: #393d79;
151
+ }
152
+ .eds-pagination__page--disabled {
153
+ opacity: 0.5;
154
+ pointer-events: none;
155
+ }
156
+ .eds-pagination__page:hover {
157
+ background-color: #d1d4e3;
158
+ border-color: #d1d4e3;
159
+ }
160
+ .eds-contrast .eds-pagination__page:hover {
161
+ background-color: #393d79;
162
+ border-color: #393d79;
163
+ }
164
+ .eds-pagination__page:focus {
165
+ outline: none;
166
+ border-color: #181c56;
167
+ }
168
+ .eds-contrast .eds-pagination__page:focus {
169
+ border-color: #ffffff;
170
+ }
171
+
172
+ .eds-pagination__ellipsis {
173
+ align-items: baseline;
174
+ cursor: default;
175
+ display: flex;
176
+ font-size: 1.5rem;
177
+ height: 2rem;
178
+ justify-content: center;
179
+ -webkit-user-select: none;
180
+ -moz-user-select: none;
181
+ -ms-user-select: none;
182
+ user-select: none;
100
183
  width: 2rem;
184
+ margin: 0 2px;
101
185
  }
102
- .eds-top-navigation-item--active {
103
- --show-active-line: 1;
186
+
187
+ .eds-pagination__input-wrapper {
188
+ white-space: nowrap;
104
189
  }
105
- .eds-top-navigation-item--active::after {
190
+ .eds-pagination__input-label {
191
+ border-left: 0.0625rem solid #d1d3d3;
192
+ color: #656782;
193
+ font-size: 0.875rem;
194
+ margin-left: 0.5rem;
195
+ padding: 0 1rem;
196
+ }
197
+ .eds-contrast .eds-pagination__input-label {
198
+ border-color: #393d79;
199
+ color: #aeb7e2;
200
+ }
201
+ .eds-pagination__input-field {
202
+ -webkit-appearance: none;
203
+ -moz-appearance: none;
204
+ appearance: none;
205
+ background: transparent;
206
+ border: 0.0625rem solid #d1d3d3;
207
+ border-radius: 0.25rem;
208
+ color: inherit;
209
+ font-family: inherit;
210
+ font-size: 0.875rem;
211
+ height: 2rem;
212
+ text-align: center;
106
213
  width: 2rem;
214
+ }
215
+ .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
216
+ -webkit-appearance: none;
217
+ appearance: none;
218
+ margin: 0;
107
219
  }/* DO NOT CHANGE!*/
108
220
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
221
  /* DO NOT CHANGE!*/
@@ -248,7 +360,7 @@
248
360
  box-shadow: inset 0.25rem 0 0 #ff5959;
249
361
  }
250
362
  .eds-side-navigation__click-target[disabled] {
251
- cursor: default;
363
+ cursor: not-allowed;
252
364
  color: #656782;
253
365
  }
254
366
  .eds-side-navigation__click-target:not([disabled]):hover {
@@ -325,101 +437,53 @@
325
437
  outline: 2px solid #ffffff;
326
438
  }/* DO NOT CHANGE!*/
327
439
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
328
- .eds-overflow-menu__item {
329
- -webkit-appearance: none;
330
- -moz-appearance: none;
331
- appearance: none;
332
- border: none;
333
- font-size: 0.875rem;
334
- font-family: inherit;
335
- color: var(--primary-text-color);
336
- background: #f8f8f8;
337
- display: block;
338
- height: 3rem;
440
+ .eds-top-navigation-item {
441
+ --show-active-line: 0;
442
+ display: inline-block;
339
443
  cursor: pointer;
340
- width: 100%;
341
- line-height: 1.375rem;
342
- text-align: left;
343
- padding: 0.75rem 1rem;
344
- opacity: 1;
345
- }
346
- .eds-contrast .eds-overflow-menu__item {
347
- color: #181c56;
348
- }
349
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
350
- background: #e9e9e9;
351
- color: #949494;
352
- }
353
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
354
- background: #e9e9e9;
355
- color: #949494;
356
- }
357
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
358
- cursor: not-allowed;
359
- background: #e9e9e9;
360
- color: #949494;
361
- }
362
- .eds-overflow-menu__item .eds-icon {
363
- margin-right: 0.75rem;
364
- }
365
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
366
- background: #d1d4e3;
367
- }
368
- .eds-overflow-menu__item:focus {
369
- outline: none;
370
- }
371
-
372
- .eds-overflow-menu__item + .eds-overflow-menu__item {
373
- border-top: 0.0625rem solid #e9e9e9;
444
+ color: inherit;
445
+ text-decoration: none;
446
+ position: relative;
447
+ padding: 1rem;
448
+ min-width: 5rem;
449
+ width: -webkit-fit-content;
450
+ width: -moz-fit-content;
451
+ width: fit-content;
452
+ text-align: center;
453
+ font-family: inherit;
454
+ font-size: 1rem;
455
+ font-weight: 600;
374
456
  }
375
-
376
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
377
- border: 0.0625rem solid #e9e9e9;
378
- border-radius: 0.25rem;
379
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
380
- overflow: hidden;
457
+ .eds-top-navigation-item::after {
458
+ content: "";
459
+ display: block;
460
+ bottom: 1rem;
461
+ height: 0.1875rem;
462
+ width: 0;
463
+ margin: 0 auto;
464
+ opacity: var(--show-active-line);
465
+ background: #ff5959;
466
+ transition: width ease-in-out 0.2s, opacity ease-in-out 0.2s;
381
467
  }
382
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
468
+ .eds-top-navigation-item:focus {
469
+ outline-offset: 0.125rem;
383
470
  outline: none;
471
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
384
472
  }
385
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
386
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
387
- }
388
-
389
- .eds-overflow-menu__menu-list[data-reach-menu-list],
390
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
391
- -webkit-animation: slide-in 0.2s ease-in-out;
392
- animation: slide-in 0.2s ease-in-out;
473
+ .eds-contrast .eds-top-navigation-item:focus {
474
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
393
475
  }
394
-
395
- @-webkit-keyframes slide-in {
396
- 0% {
397
- opacity: 0;
398
- transform: translateY(0.5rem);
399
- }
400
- 100% {
401
- opacity: 1;
402
- transform: translateY(0);
403
- }
476
+ .eds-top-navigation-item:hover {
477
+ --show-active-line: 1;
404
478
  }
405
-
406
- @keyframes slide-in {
407
- 0% {
408
- opacity: 0;
409
- transform: translateY(0.5rem);
410
- }
411
- 100% {
412
- opacity: 1;
413
- transform: translateY(0);
414
- }
479
+ .eds-top-navigation-item:hover::after {
480
+ width: 2rem;
415
481
  }
416
- [data-reach-menu-popover] {
417
- position: absolute;
418
- z-index: 30;
482
+ .eds-top-navigation-item--active {
483
+ --show-active-line: 1;
419
484
  }
420
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
421
- position: relative;
422
- right: calc(100% - 2rem);
485
+ .eds-top-navigation-item--active::after {
486
+ width: 2rem;
423
487
  }/* DO NOT CHANGE!*/
424
488
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
425
489
  .eds-stepper {
@@ -536,163 +600,99 @@
536
600
  background: #aeb7e2;
537
601
  }/* DO NOT CHANGE!*/
538
602
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
539
- .eds-pagination {
540
- align-items: center;
541
- display: flex;
542
- flex-wrap: wrap;
543
- row-gap: 0.75rem;
544
- justify-content: space-between;
545
- }
546
- .eds-pagination__results {
547
- align-items: center;
548
- display: flex;
549
- flex: 1;
550
- justify-content: flex-start;
551
- }
552
- .eds-pagination__results-label {
553
- margin-right: 0.5rem;
554
- }
555
- .eds-pagination__controls {
556
- align-items: center;
557
- display: flex;
558
- justify-content: center;
559
- }
560
- .eds-pagination__results:first-of-type:last-of-type, .eds-pagination__controls:first-of-type:last-of-type {
561
- margin: 0 auto;
562
- }
563
-
564
- .eds-pagination-menu__menu-button {
603
+ .eds-overflow-menu__item {
565
604
  -webkit-appearance: none;
566
605
  -moz-appearance: none;
567
606
  appearance: none;
568
- background: transparent;
569
- border: 0.0625rem solid #d1d3d3;
570
- border-radius: 0.25rem;
571
- color: inherit;
607
+ border: none;
608
+ font-size: 0.875rem;
572
609
  font-family: inherit;
573
- display: flex;
574
- align-items: center;
575
- justify-content: space-around;
576
- height: 2rem;
577
- margin-left: 0.25rem;
578
- margin-right: 1rem;
579
- width: 3.5rem;
610
+ color: var(--primary-text-color);
611
+ background: #f8f8f8;
612
+ display: block;
613
+ height: 3rem;
614
+ cursor: pointer;
615
+ width: 100%;
616
+ line-height: 1.375rem;
617
+ text-align: left;
618
+ padding: 0.75rem 1rem;
619
+ opacity: 1;
580
620
  }
581
- .eds-pagination-menu__menu-button--open {
582
- border-color: currentColor;
621
+ .eds-contrast .eds-overflow-menu__item {
622
+ color: #181c56;
583
623
  }
584
- .eds-pagination-menu__menu-button:focus {
585
- outline: none;
586
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
624
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
625
+ background: #e9e9e9;
626
+ color: #949494;
587
627
  }
588
- .eds-pagination-menu__menu-list {
589
- width: 3.5rem;
628
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
629
+ background: #e9e9e9;
630
+ color: #949494;
590
631
  }
591
-
592
- .eds-pagination__page {
593
- align-items: center;
594
- -webkit-appearance: none;
595
- -moz-appearance: none;
596
- appearance: none;
597
- background: transparent;
598
- border: 0.0625rem solid #d1d3d3;
599
- border-color: #d1d3d3;
600
- border-radius: 0.25rem;
601
- color: inherit;
602
- cursor: pointer;
603
- display: flex;
604
- font-family: inherit;
605
- font-size: 0.875rem;
606
- height: 2rem;
607
- justify-content: center;
608
- margin: 0 0.125rem;
609
- padding: 0 0.25rem;
610
- transition: background 0.1s ease-out, border-color 0.1s ease-out;
611
- -webkit-user-select: none;
612
- -moz-user-select: none;
613
- -ms-user-select: none;
614
- user-select: none;
615
- min-width: 2rem;
632
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
633
+ cursor: not-allowed;
634
+ background: #e9e9e9;
635
+ color: #949494;
616
636
  }
617
- .eds-contrast .eds-pagination__page {
618
- border-color: #54568c;
637
+ .eds-overflow-menu__item .eds-icon {
638
+ margin-right: 0.75rem;
619
639
  }
620
- .eds-pagination__page--selected {
640
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
621
641
  background: #d1d4e3;
622
- border-color: #181c56;
623
- color: inherit;
624
- opacity: 1;
625
- pointer-events: none;
626
- }
627
- .eds-contrast .eds-pagination__page--selected {
628
- border-color: #ffffff;
629
- background: #393d79;
630
642
  }
631
- .eds-pagination__page--disabled {
632
- opacity: 0.5;
633
- pointer-events: none;
643
+ .eds-overflow-menu__item:focus {
644
+ outline: none;
634
645
  }
635
- .eds-pagination__page:hover {
636
- background-color: #d1d4e3;
637
- border-color: #d1d4e3;
646
+
647
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
648
+ border-top: 0.0625rem solid #e9e9e9;
638
649
  }
639
- .eds-contrast .eds-pagination__page:hover {
640
- background-color: #393d79;
641
- border-color: #393d79;
650
+
651
+ .eds-overflow-menu__menu-list[data-reach-menu-list] {
652
+ border: 0.0625rem solid #e9e9e9;
653
+ border-radius: 0.25rem;
654
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
655
+ overflow: hidden;
642
656
  }
643
- .eds-pagination__page:focus {
657
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
644
658
  outline: none;
645
- border-color: #181c56;
646
659
  }
647
- .eds-contrast .eds-pagination__page:focus {
648
- border-color: #ffffff;
660
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
661
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
649
662
  }
650
663
 
651
- .eds-pagination__ellipsis {
652
- align-items: baseline;
653
- cursor: default;
654
- display: flex;
655
- font-size: 1.5rem;
656
- height: 2rem;
657
- justify-content: center;
658
- -webkit-user-select: none;
659
- -moz-user-select: none;
660
- -ms-user-select: none;
661
- user-select: none;
662
- width: 2rem;
663
- margin: 0 2px;
664
+ .eds-overflow-menu__menu-list[data-reach-menu-list],
665
+ .eds-overflow-menu__menu-list[data-reach-menu-items] {
666
+ -webkit-animation: slide-in 0.2s ease-in-out;
667
+ animation: slide-in 0.2s ease-in-out;
664
668
  }
665
669
 
666
- .eds-pagination__input-wrapper {
667
- white-space: nowrap;
668
- }
669
- .eds-pagination__input-label {
670
- border-left: 0.0625rem solid #d1d3d3;
671
- color: #656782;
672
- font-size: 0.875rem;
673
- margin-left: 0.5rem;
674
- padding: 0 1rem;
670
+ @-webkit-keyframes slide-in {
671
+ 0% {
672
+ opacity: 0;
673
+ transform: translateY(0.5rem);
674
+ }
675
+ 100% {
676
+ opacity: 1;
677
+ transform: translateY(0);
678
+ }
675
679
  }
676
- .eds-contrast .eds-pagination__input-label {
677
- border-color: #393d79;
678
- color: #aeb7e2;
680
+
681
+ @keyframes slide-in {
682
+ 0% {
683
+ opacity: 0;
684
+ transform: translateY(0.5rem);
685
+ }
686
+ 100% {
687
+ opacity: 1;
688
+ transform: translateY(0);
689
+ }
679
690
  }
680
- .eds-pagination__input-field {
681
- -webkit-appearance: none;
682
- -moz-appearance: none;
683
- appearance: none;
684
- background: transparent;
685
- border: 0.0625rem solid #d1d3d3;
686
- border-radius: 0.25rem;
687
- color: inherit;
688
- font-family: inherit;
689
- font-size: 0.875rem;
690
- height: 2rem;
691
- text-align: center;
692
- width: 2rem;
691
+ [data-reach-menu-popover] {
692
+ position: absolute;
693
+ z-index: 30;
693
694
  }
694
- .eds-pagination__input-field::-webkit-inner-spin-button, .eds-pagination__input-field::-webkit-outer-spin-button {
695
- -webkit-appearance: none;
696
- appearance: none;
697
- margin: 0;
695
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
696
+ position: relative;
697
+ right: calc(100% - 2rem);
698
698
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/menu",
3
- "version": "4.1.7",
3
+ "version": "4.1.10",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/menu.esm.js",
@@ -23,13 +23,14 @@
23
23
  "lint": "dts lint"
24
24
  },
25
25
  "dependencies": {
26
- "@entur/button": "^2.10.2",
27
- "@entur/expand": "^3.3.18",
28
- "@entur/icons": "^4.3.2",
29
- "@entur/layout": "^2.1.9",
26
+ "@entur/a11y": "^0.2.48",
27
+ "@entur/button": "^2.10.3",
28
+ "@entur/expand": "^3.3.19",
29
+ "@entur/icons": "^4.3.3",
30
+ "@entur/layout": "^2.1.10",
30
31
  "@entur/tokens": "^3.4.1",
31
- "@entur/typography": "^1.6.16",
32
- "@entur/utils": "^0.4.4",
32
+ "@entur/typography": "^1.6.17",
33
+ "@entur/utils": "^0.4.5",
33
34
  "@reach/menu-button": "^0.16.1",
34
35
  "classnames": "^2.3.1"
35
36
  },
@@ -37,5 +38,5 @@
37
38
  "react": ">=16.8.0",
38
39
  "react-dom": ">=16.8.0"
39
40
  },
40
- "gitHead": "1dabe0c64e98a7de3a47a29fc24fd46e74dc0d7c"
41
+ "gitHead": "278c922026fedcd798934f82d34b43d39bf8f4ce"
41
42
  }