@entur/menu 4.1.5 → 4.1.8

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 (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/Pagination.d.ts +4 -0
  3. package/dist/PaginationPage.d.ts +1 -0
  4. package/dist/menu.cjs.development.js +21 -7
  5. package/dist/menu.cjs.development.js.map +1 -1
  6. package/dist/menu.cjs.production.min.js +1 -1
  7. package/dist/menu.cjs.production.min.js.map +1 -1
  8. package/dist/menu.esm.js +22 -8
  9. package/dist/menu.esm.js.map +1 -1
  10. package/dist/styles.css +309 -309
  11. package/dist/useControllableProp.d.ts +1 -1
  12. package/dist/useShowDelayedLabel.d.ts +1 -1
  13. package/package.json +10 -9
package/dist/styles.css CHANGED
@@ -57,6 +57,225 @@
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
+ /* DO NOT CHANGE!*/
61
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
62
+ .eds-side-navigation,
63
+ .eds-side-navigation-group {
64
+ --primary-background-color: #f8f8f8;
65
+ --primary-text-color: #181c56;
66
+ }
67
+ .eds-contrast .eds-side-navigation,
68
+ .eds-contrast .eds-side-navigation-group {
69
+ --primary-background-color: #181c56;
70
+ --primary-text-color: colors-brand-white;
71
+ }
72
+
73
+ .eds-side-navigation__click-target svg {
74
+ margin-right: 1rem;
75
+ color: #656782;
76
+ display: inline-flex;
77
+ align-self: center;
78
+ position: relative;
79
+ top: 0.075em;
80
+ }
81
+ .eds-contrast .eds-side-navigation__click-target svg {
82
+ color: #aeb7e2;
83
+ }
84
+
85
+ .eds-side-navigation__click-target[disabled] svg {
86
+ color: #656782;
87
+ }
88
+
89
+ .eds-side-navigation {
90
+ --padding-vertical: 1rem;
91
+ --padding-horizontal: 2.5rem;
92
+ background-color: var(--primary-background-color);
93
+ color: var(--primary-text-color);
94
+ padding: 0;
95
+ margin: 0;
96
+ list-style: none;
97
+ position: relative;
98
+ transition: max-width ease-in-out 0.2s;
99
+ }
100
+ .eds-side-navigation__collapse-button {
101
+ position: absolute;
102
+ right: -0.75rem;
103
+ height: 1.5rem;
104
+ width: 1.5rem;
105
+ border-radius: 50%;
106
+ cursor: pointer;
107
+ background: #ffffff;
108
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
109
+ border: 0.0625rem solid #d1d3d3;
110
+ color: inherit;
111
+ padding: 0;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ border: none;
116
+ z-index: 10;
117
+ }
118
+ .eds-contrast .eds-side-navigation__collapse-button {
119
+ background: #393d79;
120
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
121
+ border-color: transparent;
122
+ }
123
+ .eds-side-navigation__collapse-button svg {
124
+ margin: 0;
125
+ top: 0;
126
+ color: #181c56;
127
+ }
128
+ .eds-contrast .eds-side-navigation__collapse-button svg {
129
+ color: #ffffff;
130
+ }
131
+ .eds-side-navigation__collapse-button:focus {
132
+ outline: 2px solid #181c56;
133
+ }
134
+ .eds-contrast .eds-side-navigation__collapse-button:focus {
135
+ outline: 2px solid #ffffff;
136
+ }
137
+ @media screen and (min-width: 50rem) {
138
+ .eds-side-navigation {
139
+ max-width: 26rem;
140
+ }
141
+ }
142
+ .eds-side-navigation--small {
143
+ --padding-vertical: calc(0.5rem + 0.1875rem);
144
+ }
145
+ .eds-side-navigation .eds-side-navigation {
146
+ background-color: #f3f3f3;
147
+ }
148
+ .eds-contrast .eds-side-navigation .eds-side-navigation {
149
+ background-color: #292b6a;
150
+ }
151
+ .eds-side-navigation--collapsed {
152
+ max-width: 80px;
153
+ }
154
+
155
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
156
+ padding-left: 3.5rem;
157
+ box-shadow: none;
158
+ }
159
+ .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
160
+ background-color: #d1d4e3;
161
+ }
162
+ .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
163
+ background-color: #54568c;
164
+ }
165
+
166
+ .eds-side-navigation__click-target {
167
+ -webkit-appearance: none;
168
+ -moz-appearance: none;
169
+ appearance: none;
170
+ background: none;
171
+ border: 0;
172
+ border-bottom: 0.125rem solid #e9e9e9;
173
+ border-radius: 0;
174
+ color: var(--primary-text-color);
175
+ cursor: pointer;
176
+ display: block;
177
+ font-family: inherit;
178
+ font-size: inherit;
179
+ font-weight: 500;
180
+ line-height: inherit;
181
+ padding: var(--padding-vertical) 2.5rem;
182
+ padding-left: 2.5rem;
183
+ transition: padding 0.2s ease-in-out;
184
+ text-align: left;
185
+ text-decoration: none;
186
+ width: 100%;
187
+ }
188
+ .eds-contrast .eds-side-navigation__click-target {
189
+ border-color: #292b6a;
190
+ }
191
+ .eds-side-navigation--collapsed .eds-side-navigation__click-target {
192
+ padding-left: 2rem;
193
+ }
194
+ .eds-side-navigation__click-target--active {
195
+ box-shadow: inset 0.25rem 0 0 #181c56;
196
+ font-weight: 600;
197
+ }
198
+ .eds-contrast .eds-side-navigation__click-target--active {
199
+ box-shadow: inset 0.25rem 0 0 #ff5959;
200
+ }
201
+ .eds-side-navigation__click-target[disabled] {
202
+ cursor: default;
203
+ color: #656782;
204
+ }
205
+ .eds-side-navigation__click-target:not([disabled]):hover {
206
+ background-color: #d1d4e3;
207
+ }
208
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
209
+ background-color: #393d79;
210
+ }
211
+ .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
212
+ outline: 2px solid #181c56;
213
+ outline-offset: -2px;
214
+ background: #ebebf1;
215
+ }
216
+ .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
217
+ background-color: #54568c;
218
+ outline: 2px solid #ffffff;
219
+ }
220
+
221
+ .eds-side-navigation-group {
222
+ background-color: var(--primary-background-color);
223
+ color: var(--primary-text-color);
224
+ }
225
+ .eds-side-navigation-group + .eds-side-navigation-group {
226
+ padding-top: 0.5rem;
227
+ }
228
+ @media screen and (min-width: 50rem) {
229
+ .eds-side-navigation-group {
230
+ max-width: 26rem;
231
+ }
232
+ }
233
+
234
+ .eds-side-navigation-group__trigger {
235
+ align-items: center;
236
+ -webkit-appearance: none;
237
+ -moz-appearance: none;
238
+ appearance: none;
239
+ background: none;
240
+ border: none;
241
+ border-radius: 0;
242
+ border-bottom: 0.125rem solid #e9e9e9;
243
+ color: #656782;
244
+ cursor: pointer;
245
+ display: flex;
246
+ font-size: 0.875rem;
247
+ font-family: inherit;
248
+ font-weight: 500;
249
+ height: 3rem;
250
+ justify-content: space-between;
251
+ letter-spacing: 1px;
252
+ line-height: 1.25rem;
253
+ padding: 0.75rem 0 0.75rem 2.5rem;
254
+ margin: 0;
255
+ text-transform: uppercase;
256
+ transition: padding 0.2s ease-in-out;
257
+ width: 100%;
258
+ }
259
+ .eds-contrast .eds-side-navigation-group__trigger {
260
+ color: #aeb7e2;
261
+ border-color: #292b6a;
262
+ }
263
+ .eds-side-navigation-group__trigger-icon {
264
+ margin-right: 0.75rem;
265
+ }
266
+ .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
267
+ margin-right: 2.5rem;
268
+ }
269
+ .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
270
+ padding-left: 2rem;
271
+ }
272
+ .eds-side-navigation-group__trigger:focus {
273
+ outline: 2px solid #181c56;
274
+ }
275
+ .eds-contrast .eds-side-navigation-group__trigger:focus {
276
+ outline: 2px solid #ffffff;
277
+ }/* DO NOT CHANGE!*/
278
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
279
  .eds-top-navigation-item {
61
280
  --show-active-line: 0;
62
281
  display: inline-block;
@@ -106,127 +325,30 @@
106
325
  width: 2rem;
107
326
  }/* DO NOT CHANGE!*/
108
327
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
109
- .eds-overflow-menu__item {
328
+ .eds-stepper {
329
+ display: flex;
330
+ flex-direction: row;
331
+ }
332
+ .eds-stepper__item__container {
333
+ cursor: pointer;
334
+ font-family: inherit;
335
+ text-transform: none;
110
336
  -webkit-appearance: none;
111
337
  -moz-appearance: none;
112
338
  appearance: none;
339
+ background: none;
113
340
  border: none;
114
- font-size: 0.875rem;
115
- font-family: inherit;
116
- color: var(--primary-text-color);
117
- background: #f8f8f8;
118
- display: block;
119
- height: 3rem;
120
- cursor: pointer;
121
- width: 100%;
122
- line-height: 1.375rem;
123
- text-align: left;
124
- padding: 0.75rem 1rem;
125
- opacity: 1;
341
+ margin: 0;
342
+ padding: 0;
343
+ align-items: inherit;
344
+ display: flex;
345
+ flex-grow: 1;
346
+ flex-basis: 0;
347
+ flex-direction: column;
348
+ margin-left: 0.25rem;
126
349
  }
127
- .eds-contrast .eds-overflow-menu__item {
128
- color: #181c56;
129
- }
130
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
131
- background: #e9e9e9;
132
- color: #949494;
133
- }
134
- .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
135
- background: #e9e9e9;
136
- color: #949494;
137
- }
138
- .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
139
- cursor: not-allowed;
140
- background: #e9e9e9;
141
- color: #949494;
142
- }
143
- .eds-overflow-menu__item .eds-icon {
144
- margin-right: 0.75rem;
145
- }
146
- .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
147
- background: #d1d4e3;
148
- }
149
- .eds-overflow-menu__item:focus {
150
- outline: none;
151
- }
152
-
153
- .eds-overflow-menu__item + .eds-overflow-menu__item {
154
- border-top: 0.0625rem solid #e9e9e9;
155
- }
156
-
157
- .eds-overflow-menu__menu-list[data-reach-menu-list] {
158
- border: 0.0625rem solid #e9e9e9;
159
- border-radius: 0.25rem;
160
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
161
- overflow: hidden;
162
- }
163
- .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
164
- outline: none;
165
- }
166
- .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
167
- box-shadow: 0 0.0625rem 0.1875rem #393d79;
168
- }
169
-
170
- .eds-overflow-menu__menu-list[data-reach-menu-list],
171
- .eds-overflow-menu__menu-list[data-reach-menu-items] {
172
- -webkit-animation: slide-in 0.2s ease-in-out;
173
- animation: slide-in 0.2s ease-in-out;
174
- }
175
-
176
- @-webkit-keyframes slide-in {
177
- 0% {
178
- opacity: 0;
179
- transform: translateY(0.5rem);
180
- }
181
- 100% {
182
- opacity: 1;
183
- transform: translateY(0);
184
- }
185
- }
186
-
187
- @keyframes slide-in {
188
- 0% {
189
- opacity: 0;
190
- transform: translateY(0.5rem);
191
- }
192
- 100% {
193
- opacity: 1;
194
- transform: translateY(0);
195
- }
196
- }
197
- [data-reach-menu-popover] {
198
- position: absolute;
199
- z-index: 30;
200
- }
201
- [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
202
- position: relative;
203
- right: calc(100% - 2rem);
204
- }/* DO NOT CHANGE!*/
205
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
206
- .eds-stepper {
207
- display: flex;
208
- flex-direction: row;
209
- }
210
- .eds-stepper__item__container {
211
- cursor: pointer;
212
- font-family: inherit;
213
- text-transform: none;
214
- -webkit-appearance: none;
215
- -moz-appearance: none;
216
- appearance: none;
217
- background: none;
218
- border: none;
219
- margin: 0;
220
- padding: 0;
221
- align-items: inherit;
222
- display: flex;
223
- flex-grow: 1;
224
- flex-basis: 0;
225
- flex-direction: column;
226
- margin-left: 0.25rem;
227
- }
228
- .eds-stepper__item__container--non-interactive {
229
- cursor: default;
350
+ .eds-stepper__item__container--non-interactive {
351
+ cursor: default;
230
352
  }
231
353
  .eds-stepper__item__container:focus {
232
354
  outline-offset: 0.125rem;
@@ -478,221 +600,99 @@
478
600
  margin: 0;
479
601
  }/* DO NOT CHANGE!*/
480
602
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
481
- /* DO NOT CHANGE!*/
482
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
483
- .eds-side-navigation,
484
- .eds-side-navigation-group {
485
- --primary-background-color: #f8f8f8;
486
- --primary-text-color: #181c56;
487
- }
488
- .eds-contrast .eds-side-navigation,
489
- .eds-contrast .eds-side-navigation-group {
490
- --primary-background-color: #181c56;
491
- --primary-text-color: colors-brand-white;
492
- }
493
-
494
- .eds-side-navigation__click-target svg {
495
- margin-right: 1rem;
496
- color: #656782;
497
- display: inline-flex;
498
- align-self: center;
499
- position: relative;
500
- top: 0.075em;
501
- }
502
- .eds-contrast .eds-side-navigation__click-target svg {
503
- color: #aeb7e2;
504
- }
505
-
506
- .eds-side-navigation__click-target[disabled] svg {
507
- color: #656782;
508
- }
509
-
510
- .eds-side-navigation {
511
- --padding-vertical: 1rem;
512
- --padding-horizontal: 2.5rem;
513
- background-color: var(--primary-background-color);
514
- color: var(--primary-text-color);
515
- padding: 0;
516
- margin: 0;
517
- list-style: none;
518
- position: relative;
519
- transition: max-width ease-in-out 0.2s;
520
- }
521
- .eds-side-navigation__collapse-button {
522
- position: absolute;
523
- right: -0.75rem;
524
- height: 1.5rem;
525
- width: 1.5rem;
526
- border-radius: 50%;
527
- cursor: pointer;
528
- background: #ffffff;
529
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
530
- border: 0.0625rem solid #d1d3d3;
531
- color: inherit;
532
- padding: 0;
533
- display: flex;
534
- align-items: center;
535
- justify-content: center;
536
- border: none;
537
- z-index: 10;
538
- }
539
- .eds-contrast .eds-side-navigation__collapse-button {
540
- background: #393d79;
541
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
542
- border-color: transparent;
543
- }
544
- .eds-side-navigation__collapse-button svg {
545
- margin: 0;
546
- top: 0;
547
- color: #181c56;
548
- }
549
- .eds-contrast .eds-side-navigation__collapse-button svg {
550
- color: #ffffff;
551
- }
552
- .eds-side-navigation__collapse-button:focus {
553
- outline: 2px solid #181c56;
554
- }
555
- .eds-contrast .eds-side-navigation__collapse-button:focus {
556
- outline: 2px solid #ffffff;
557
- }
558
- @media screen and (min-width: 50rem) {
559
- .eds-side-navigation {
560
- max-width: 26rem;
561
- }
562
- }
563
- .eds-side-navigation--small {
564
- --padding-vertical: calc(0.5rem + 0.1875rem);
565
- }
566
- .eds-side-navigation .eds-side-navigation {
567
- background-color: #f3f3f3;
568
- }
569
- .eds-contrast .eds-side-navigation .eds-side-navigation {
570
- background-color: #292b6a;
571
- }
572
- .eds-side-navigation--collapsed {
573
- max-width: 80px;
574
- }
575
-
576
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target {
577
- padding-left: 3.5rem;
578
- box-shadow: none;
579
- }
580
- .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
581
- background-color: #d1d4e3;
582
- }
583
- .eds-contrast .eds-side-navigation .eds-side-navigation .eds-side-navigation__click-target--active {
584
- background-color: #54568c;
585
- }
586
-
587
- .eds-side-navigation__click-target {
603
+ .eds-overflow-menu__item {
588
604
  -webkit-appearance: none;
589
605
  -moz-appearance: none;
590
606
  appearance: none;
591
- background: none;
592
- border: 0;
593
- border-bottom: 0.125rem solid #e9e9e9;
594
- border-radius: 0;
607
+ border: none;
608
+ font-size: 0.875rem;
609
+ font-family: inherit;
595
610
  color: var(--primary-text-color);
596
- cursor: pointer;
611
+ background: #f8f8f8;
597
612
  display: block;
598
- font-family: inherit;
599
- font-size: inherit;
600
- font-weight: 500;
601
- line-height: inherit;
602
- padding: var(--padding-vertical) 2.5rem;
603
- padding-left: 2.5rem;
604
- transition: padding 0.2s ease-in-out;
605
- text-align: left;
606
- text-decoration: none;
613
+ height: 3rem;
614
+ cursor: pointer;
607
615
  width: 100%;
616
+ line-height: 1.375rem;
617
+ text-align: left;
618
+ padding: 0.75rem 1rem;
619
+ opacity: 1;
608
620
  }
609
- .eds-contrast .eds-side-navigation__click-target {
610
- border-color: #292b6a;
611
- }
612
- .eds-side-navigation--collapsed .eds-side-navigation__click-target {
613
- padding-left: 2rem;
621
+ .eds-contrast .eds-overflow-menu__item {
622
+ color: #181c56;
614
623
  }
615
- .eds-side-navigation__click-target--active {
616
- box-shadow: inset 0.25rem 0 0 #181c56;
617
- font-weight: 600;
624
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
625
+ background: #e9e9e9;
626
+ color: #949494;
618
627
  }
619
- .eds-contrast .eds-side-navigation__click-target--active {
620
- box-shadow: inset 0.25rem 0 0 #ff5959;
628
+ .eds-contrast .eds-overflow-menu__item.eds-overflow-menu__item--disabled {
629
+ background: #e9e9e9;
630
+ color: #949494;
621
631
  }
622
- .eds-side-navigation__click-target[disabled] {
623
- cursor: default;
624
- color: #656782;
632
+ .eds-overflow-menu__item.eds-overflow-menu__item--disabled:hover {
633
+ cursor: not-allowed;
634
+ background: #e9e9e9;
635
+ color: #949494;
625
636
  }
626
- .eds-side-navigation__click-target:not([disabled]):hover {
627
- background-color: #d1d4e3;
637
+ .eds-overflow-menu__item .eds-icon {
638
+ margin-right: 0.75rem;
628
639
  }
629
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):hover {
630
- background-color: #393d79;
640
+ .eds-overflow-menu__item:hover, .eds-overflow-menu__item:focus, .eds-overflow-menu__item[data-selected] {
641
+ background: #d1d4e3;
631
642
  }
632
- .eds-side-navigation__click-target:not([disabled]):active, .eds-side-navigation__click-target:not([disabled]):focus {
633
- outline: 2px solid #181c56;
634
- outline-offset: -2px;
635
- background: #ebebf1;
643
+ .eds-overflow-menu__item:focus {
644
+ outline: none;
636
645
  }
637
- .eds-contrast .eds-side-navigation__click-target:not([disabled]):active, .eds-contrast .eds-side-navigation__click-target:not([disabled]):focus {
638
- background-color: #54568c;
639
- outline: 2px solid #ffffff;
646
+
647
+ .eds-overflow-menu__item + .eds-overflow-menu__item {
648
+ border-top: 0.0625rem solid #e9e9e9;
640
649
  }
641
650
 
642
- .eds-side-navigation-group {
643
- background-color: var(--primary-background-color);
644
- color: var(--primary-text-color);
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;
645
656
  }
646
- .eds-side-navigation-group + .eds-side-navigation-group {
647
- padding-top: 0.5rem;
657
+ .eds-overflow-menu__menu-list[data-reach-menu-list]:focus {
658
+ outline: none;
648
659
  }
649
- @media screen and (min-width: 50rem) {
650
- .eds-side-navigation-group {
651
- max-width: 26rem;
652
- }
660
+ .eds-overflow-menu__menu-list[data-reach-menu-list].eds-contrast {
661
+ box-shadow: 0 0.0625rem 0.1875rem #393d79;
653
662
  }
654
663
 
655
- .eds-side-navigation-group__trigger {
656
- align-items: center;
657
- -webkit-appearance: none;
658
- -moz-appearance: none;
659
- appearance: none;
660
- background: none;
661
- border: none;
662
- border-radius: 0;
663
- border-bottom: 0.125rem solid #e9e9e9;
664
- color: #656782;
665
- cursor: pointer;
666
- display: flex;
667
- font-size: 0.875rem;
668
- font-family: inherit;
669
- font-weight: 500;
670
- height: 3rem;
671
- justify-content: space-between;
672
- letter-spacing: 1px;
673
- line-height: 1.25rem;
674
- padding: 0.75rem 0 0.75rem 2.5rem;
675
- margin: 0;
676
- text-transform: uppercase;
677
- transition: padding 0.2s ease-in-out;
678
- width: 100%;
679
- }
680
- .eds-contrast .eds-side-navigation-group__trigger {
681
- color: #aeb7e2;
682
- border-color: #292b6a;
683
- }
684
- .eds-side-navigation-group__trigger-icon {
685
- margin-right: 0.75rem;
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;
686
668
  }
687
- .eds-side-navigation-group__trigger .eds-side-navigation-group__expand-icon {
688
- margin-right: 2.5rem;
669
+
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
+ }
689
679
  }
690
- .eds-side-navigation--collapsed .eds-side-navigation-group__trigger {
691
- padding-left: 2rem;
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
+ }
692
690
  }
693
- .eds-side-navigation-group__trigger:focus {
694
- outline: 2px solid #181c56;
691
+ [data-reach-menu-popover] {
692
+ position: absolute;
693
+ z-index: 30;
695
694
  }
696
- .eds-contrast .eds-side-navigation-group__trigger:focus {
697
- outline: 2px solid #ffffff;
695
+ [data-reach-menu-popover] .eds-overflow-menu__menu-list--left {
696
+ position: relative;
697
+ right: calc(100% - 2rem);
698
698
  }
package/dist/useControllableProp.d.ts CHANGED
@@ -3,4 +3,4 @@ export declare type UseControllablePropType<T> = {
3
3
  updater?: (value?: T) => void;
4
4
  defaultValue: T;
5
5
  };
6
- export declare function useControllableProp<T>({ prop, updater, defaultValue, }: UseControllablePropType<T>): [T, Function];
6
+ export declare function useControllableProp<T>({ prop, updater, defaultValue, }: UseControllablePropType<T>): [T, (arg: T) => void];
package/dist/useShowDelayedLabel.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const useShowDelayedLabel: (isCollapsed: boolean) => boolean[];
1
+ export declare const useShowDelayedLabel: (isCollapsed: boolean) => [boolean];