@hh.ru/magritte-ui-nav-bar 1.5.2 → 1.5.4
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/index.css +118 -106
- package/index.js +1 -1
- package/internal/PaneStore.d.ts +11 -0
- package/internal/PaneStore.js +18 -1
- package/internal/PaneStore.js.map +1 -1
- package/internal/useAnimationRanges.d.ts +3 -1
- package/internal/useAnimationRanges.js +5 -2
- package/internal/useAnimationRanges.js.map +1 -1
- package/internal/useNavBarMetrics.js +6 -3
- package/internal/useNavBarMetrics.js.map +1 -1
- package/nav-bar-rjSBHUvx.js +5 -0
- package/nav-bar-rjSBHUvx.js.map +1 -0
- package/package.json +6 -6
- package/public/Actions.js +1 -1
- package/public/LayoutMorph.js +1 -1
- package/public/LayoutStage.js +1 -1
- package/public/Morph.js +1 -1
- package/public/NavBar.js +4 -4
- package/public/Pane.js +7 -4
- package/public/Pane.js.map +1 -1
- package/public/Stage.js +1 -1
- package/public/TitleContainer.js +1 -1
- package/nav-bar-BWhJj9gj.js +0 -5
- package/nav-bar-BWhJj9gj.js.map +0 -1
package/index.css
CHANGED
|
@@ -1,98 +1,110 @@
|
|
|
1
1
|
:root{
|
|
2
|
-
--magritte-color-background-body-v24-7-
|
|
3
|
-
--magritte-color-text-primary-v24-7-
|
|
4
|
-
--magritte-color-text-secondary-v24-7-
|
|
2
|
+
--magritte-color-background-body-v24-7-2:#ffffff;
|
|
3
|
+
--magritte-color-text-primary-v24-7-2:#000000;
|
|
4
|
+
--magritte-color-text-secondary-v24-7-2:#768694;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.magritte-night-theme{
|
|
8
|
-
--magritte-color-background-body-v24-7-
|
|
9
|
-
--magritte-color-text-primary-v24-7-
|
|
10
|
-
--magritte-color-text-secondary-v24-7-
|
|
8
|
+
--magritte-color-background-body-v24-7-2:#000000;
|
|
9
|
+
--magritte-color-text-primary-v24-7-2:#ffffff;
|
|
10
|
+
--magritte-color-text-secondary-v24-7-2:#ABABAB;
|
|
11
11
|
}
|
|
12
|
-
.magritte-actions-container___CBgYW_1-5-
|
|
12
|
+
.magritte-actions-container___CBgYW_1-5-4{
|
|
13
13
|
display:flex;
|
|
14
14
|
flex-direction:row;
|
|
15
15
|
gap:12px;
|
|
16
16
|
min-height:40px;
|
|
17
17
|
}
|
|
18
|
-
.magritte-actions-no-children___rgJUl_1-5-
|
|
18
|
+
.magritte-actions-no-children___rgJUl_1-5-4{
|
|
19
19
|
justify-content:space-between;
|
|
20
20
|
}
|
|
21
|
-
.magritte-actions-left-slot___DNOj0_1-5-
|
|
22
|
-
.magritte-actions-right-slot___aodtj_1-5-
|
|
21
|
+
.magritte-actions-left-slot___DNOj0_1-5-4,
|
|
22
|
+
.magritte-actions-right-slot___aodtj_1-5-4{
|
|
23
23
|
display:grid;
|
|
24
24
|
flex:0 0 auto;
|
|
25
25
|
--magritte-ui-icon-margin-not-transparent:var(--magritte-ui-navbar-actions-icon-margin-not-transparent-override, -8px);
|
|
26
26
|
--magritte-ui-icon-margin-transparent:var(--magritte-ui-navbar-actions-icon-margin-transparent-override, 0);
|
|
27
27
|
--magritte-ui-icon-margin-delta:calc(var(--magritte-ui-icon-margin-not-transparent) - var(--magritte-ui-icon-margin-transparent));
|
|
28
28
|
}
|
|
29
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
30
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
31
|
-
.magritte-navbar-not-transparent___5KZNp_1-5-
|
|
29
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
30
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
31
|
+
.magritte-navbar-not-transparent___5KZNp_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
32
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
33
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
34
|
+
.magritte-navbar-not-transparent___5KZNp_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child{
|
|
32
35
|
margin-left:var(--magritte-ui-icon-margin-not-transparent);
|
|
33
36
|
}
|
|
34
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
35
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
36
|
-
.magritte-navbar-not-transparent___5KZNp_1-5-
|
|
37
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
38
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
39
|
+
.magritte-navbar-not-transparent___5KZNp_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
40
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
41
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
42
|
+
.magritte-navbar-not-transparent___5KZNp_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child{
|
|
37
43
|
margin-right:var(--magritte-ui-icon-margin-not-transparent);
|
|
38
44
|
}
|
|
39
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
40
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
41
|
-
.magritte-navbar-transparent___ULEh8_1-5-
|
|
45
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
46
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
47
|
+
.magritte-navbar-transparent___ULEh8_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
48
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
49
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
50
|
+
.magritte-navbar-transparent___ULEh8_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child{
|
|
42
51
|
margin-left:var(--magritte-ui-icon-margin-transparent);
|
|
43
52
|
}
|
|
44
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
45
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
46
|
-
.magritte-navbar-transparent___ULEh8_1-5-
|
|
53
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
54
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
55
|
+
.magritte-navbar-transparent___ULEh8_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
56
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-end-stage___qHtTV_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
57
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-start-stage___MJ67a_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
58
|
+
.magritte-navbar-transparent___ULEh8_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child{
|
|
47
59
|
margin-right:var(--magritte-ui-icon-margin-transparent);
|
|
48
60
|
}
|
|
49
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
50
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
61
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
62
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child{
|
|
51
63
|
margin-left:calc(var(--magritte-ui-icon-margin-transparent) + (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
|
|
52
64
|
}
|
|
53
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
54
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
65
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
66
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child{
|
|
55
67
|
margin-right:calc(var(--magritte-ui-icon-margin-transparent) + (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
|
|
56
68
|
}
|
|
57
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
58
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
69
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child,
|
|
70
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:first-child{
|
|
59
71
|
margin-left:calc(var(--magritte-ui-icon-margin-not-transparent) - (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
|
|
60
72
|
}
|
|
61
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
62
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
73
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-right-slot___aodtj_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child,
|
|
74
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-actions-only-stage___cg10A_1-5-4 .magritte-actions-left-slot___DNOj0_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4 > .magritte-actions-icon-morph___-nNgW_1-5-4:last-child{
|
|
63
75
|
margin-right:calc(var(--magritte-ui-icon-margin-not-transparent) - (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
|
|
64
76
|
}
|
|
65
|
-
.magritte-actions-center-slot___hLAy6_1-5-
|
|
77
|
+
.magritte-actions-center-slot___hLAy6_1-5-4{
|
|
66
78
|
display:flex;
|
|
67
79
|
flex:1 1 auto;
|
|
68
80
|
min-width:0;
|
|
69
81
|
}
|
|
70
|
-
.magritte-actions-center-slot___hLAy6_1-5-
|
|
82
|
+
.magritte-actions-center-slot___hLAy6_1-5-4.magritte-actions-center-slot-centered___merXQ_1-5-4{
|
|
71
83
|
justify-content:center;
|
|
72
84
|
}
|
|
73
|
-
.magritte-actions-side-slot-content___TlHrX_1-5-
|
|
74
|
-
.magritte-actions-side-slot-content-clone___jDxVm_1-5-
|
|
85
|
+
.magritte-actions-side-slot-content___TlHrX_1-5-4,
|
|
86
|
+
.magritte-actions-side-slot-content-clone___jDxVm_1-5-4{
|
|
75
87
|
grid-area:1 / 1;
|
|
76
88
|
display:flex;
|
|
77
89
|
align-items:center;
|
|
78
90
|
gap:4px;
|
|
79
91
|
}
|
|
80
|
-
.magritte-align-top___-QSFW_1-5-
|
|
81
|
-
.magritte-align-top___-QSFW_1-5-
|
|
92
|
+
.magritte-align-top___-QSFW_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4,
|
|
93
|
+
.magritte-align-top___-QSFW_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4{
|
|
82
94
|
align-items:start;
|
|
83
95
|
}
|
|
84
|
-
.magritte-align-bottom___FliHI_1-5-
|
|
85
|
-
.magritte-align-bottom___FliHI_1-5-
|
|
96
|
+
.magritte-align-bottom___FliHI_1-5-4 .magritte-actions-side-slot-content___TlHrX_1-5-4,
|
|
97
|
+
.magritte-align-bottom___FliHI_1-5-4 .magritte-actions-side-slot-content-clone___jDxVm_1-5-4{
|
|
86
98
|
align-items:end;
|
|
87
99
|
}
|
|
88
|
-
.magritte-actions-side-slot-content-clone___jDxVm_1-5-
|
|
100
|
+
.magritte-actions-side-slot-content-clone___jDxVm_1-5-4{
|
|
89
101
|
visibility:hidden;
|
|
90
102
|
z-index:0;
|
|
91
103
|
pointer-events:none;
|
|
92
104
|
user-select:none;
|
|
93
105
|
contain:style layout;
|
|
94
106
|
}
|
|
95
|
-
.magritte-title-container-wrapper___DQUcj_1-5-
|
|
107
|
+
.magritte-title-container-wrapper___DQUcj_1-5-4{
|
|
96
108
|
display:flex;
|
|
97
109
|
flex-direction:row;
|
|
98
110
|
align-items:center;
|
|
@@ -100,29 +112,29 @@
|
|
|
100
112
|
min-width:0;
|
|
101
113
|
gap:12px;
|
|
102
114
|
}
|
|
103
|
-
.magritte-title-main-part___npoHN_1-5-
|
|
115
|
+
.magritte-title-main-part___npoHN_1-5-4{
|
|
104
116
|
display:flex;
|
|
105
117
|
flex-direction:column;
|
|
106
118
|
flex:0 1 auto;
|
|
107
119
|
min-width:0;
|
|
108
120
|
}
|
|
109
|
-
.magritte-title-left-slot___HTE7h_1-5-
|
|
121
|
+
.magritte-title-left-slot___HTE7h_1-5-4{
|
|
110
122
|
display:flex;
|
|
111
123
|
align-items:center;
|
|
112
124
|
flex:0 0 auto;
|
|
113
125
|
}
|
|
114
|
-
.magritte-title-container___y9AIx_1-5-
|
|
126
|
+
.magritte-title-container___y9AIx_1-5-4{
|
|
115
127
|
display:flex;
|
|
116
128
|
flex-direction:row;
|
|
117
129
|
align-items:center;
|
|
118
130
|
gap:5px;
|
|
119
131
|
min-height:var(--magritte-ui-navbar-title-container-min-height-small-override, 0);
|
|
120
132
|
}
|
|
121
|
-
.magritte-subtitle-container___nVUBu_1-5-
|
|
133
|
+
.magritte-subtitle-container___nVUBu_1-5-4{
|
|
122
134
|
display:flex;
|
|
123
135
|
}
|
|
124
|
-
.magritte-subtitle-container___nVUBu_1-5-
|
|
125
|
-
color:var(--magritte-ui-nav-bar-subtitle-color-override, var(--magritte-color-text-secondary-v24-7-
|
|
136
|
+
.magritte-subtitle-container___nVUBu_1-5-4 .magritte-text-morph-item___-vXru_1-5-4{
|
|
137
|
+
color:var(--magritte-ui-nav-bar-subtitle-color-override, var(--magritte-color-text-secondary-v24-7-2));
|
|
126
138
|
font-family:"hh sans";
|
|
127
139
|
font-weight:400;
|
|
128
140
|
line-height:18px;
|
|
@@ -132,21 +144,21 @@
|
|
|
132
144
|
text-transform:none;
|
|
133
145
|
text-decoration:none;
|
|
134
146
|
}
|
|
135
|
-
.magritte-centered___Y2mlP_1-5-
|
|
136
|
-
.magritte-centered___Y2mlP_1-5-
|
|
147
|
+
.magritte-centered___Y2mlP_1-5-4 .magritte-subtitle-container___nVUBu_1-5-4,
|
|
148
|
+
.magritte-centered___Y2mlP_1-5-4 .magritte-title-container___y9AIx_1-5-4{
|
|
137
149
|
justify-content:center;
|
|
138
150
|
}
|
|
139
|
-
.magritte-title-morph-item___t7Wf3_1-5-
|
|
151
|
+
.magritte-title-morph-item___t7Wf3_1-5-4{
|
|
140
152
|
display:flex;
|
|
141
153
|
min-width:0;
|
|
142
154
|
}
|
|
143
|
-
.magritte-title___ZbLgP_1-5-
|
|
155
|
+
.magritte-title___ZbLgP_1-5-4{
|
|
144
156
|
display:flex;
|
|
145
157
|
flex:0 1 auto;
|
|
146
158
|
min-width:0;
|
|
147
159
|
}
|
|
148
|
-
.magritte-title___ZbLgP_1-5-
|
|
149
|
-
color:var(--magritte-ui-nav-bar-title-color-override, var(--magritte-color-text-primary-v24-7-
|
|
160
|
+
.magritte-title___ZbLgP_1-5-4 .magritte-text-morph-item___-vXru_1-5-4{
|
|
161
|
+
color:var(--magritte-ui-nav-bar-title-color-override, var(--magritte-color-text-primary-v24-7-2));
|
|
150
162
|
font-family:"hh sans";
|
|
151
163
|
font-weight:500;
|
|
152
164
|
line-height:22px;
|
|
@@ -156,13 +168,13 @@
|
|
|
156
168
|
text-transform:none;
|
|
157
169
|
text-decoration:none;
|
|
158
170
|
}
|
|
159
|
-
.magritte-size-large___ISXfH_1-5-
|
|
171
|
+
.magritte-size-large___ISXfH_1-5-4 .magritte-title-main-part___npoHN_1-5-4{
|
|
160
172
|
gap:4px;
|
|
161
173
|
}
|
|
162
|
-
.magritte-size-large___ISXfH_1-5-
|
|
174
|
+
.magritte-size-large___ISXfH_1-5-4 .magritte-title-container___y9AIx_1-5-4{
|
|
163
175
|
min-height:var(--magritte-ui-navbar-title-container-min-height-large-override, 0);
|
|
164
176
|
}
|
|
165
|
-
.magritte-size-large___ISXfH_1-5-
|
|
177
|
+
.magritte-size-large___ISXfH_1-5-4 .magritte-title___ZbLgP_1-5-4 .magritte-text-morph-item___-vXru_1-5-4{
|
|
166
178
|
font-family:"hh sans";
|
|
167
179
|
font-weight:500;
|
|
168
180
|
line-height:32px;
|
|
@@ -172,7 +184,7 @@
|
|
|
172
184
|
text-transform:none;
|
|
173
185
|
text-decoration:none;
|
|
174
186
|
}
|
|
175
|
-
.magritte-size-large___ISXfH_1-5-
|
|
187
|
+
.magritte-size-large___ISXfH_1-5-4 .magritte-subtitle-container___nVUBu_1-5-4 .magritte-text-morph-item___-vXru_1-5-4{
|
|
176
188
|
font-family:"hh sans";
|
|
177
189
|
font-weight:400;
|
|
178
190
|
line-height:22px;
|
|
@@ -182,56 +194,56 @@
|
|
|
182
194
|
text-transform:none;
|
|
183
195
|
text-decoration:none;
|
|
184
196
|
}
|
|
185
|
-
.magritte-pane-content___UVmC6_1-5-
|
|
197
|
+
.magritte-pane-content___UVmC6_1-5-4{
|
|
186
198
|
position:relative;
|
|
187
199
|
pointer-events:none;
|
|
188
200
|
z-index:2;
|
|
189
201
|
}
|
|
190
|
-
.magritte-pane-background___PDZAX_1-5-
|
|
202
|
+
.magritte-pane-background___PDZAX_1-5-4{
|
|
191
203
|
position:absolute;
|
|
192
|
-
background-color:var(--magritte-ui-nav-bar-background-color-override, var(--magritte-ui-container-background-color-override, var(--magritte-color-background-body-v24-7-
|
|
204
|
+
background-color:var(--magritte-ui-nav-bar-background-color-override, var(--magritte-ui-container-background-color-override, var(--magritte-color-background-body-v24-7-2)));
|
|
193
205
|
opacity:0;
|
|
194
206
|
inset:0;
|
|
195
207
|
z-index:-1;
|
|
196
208
|
transform-origin:0 0;
|
|
197
209
|
}
|
|
198
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
210
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-pane-background___PDZAX_1-5-4{
|
|
199
211
|
opacity:calc(var(--magritte-ui-navbar-animation-progress) * 0.95);
|
|
200
212
|
}
|
|
201
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
213
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-pane-background___PDZAX_1-5-4{
|
|
202
214
|
opacity:calc((1 - var(--magritte-ui-navbar-animation-progress)) * 0.95);
|
|
203
215
|
}
|
|
204
|
-
.magritte-navbar-not-transparent___5KZNp_1-5-
|
|
216
|
+
.magritte-navbar-not-transparent___5KZNp_1-5-4 .magritte-pane-background___PDZAX_1-5-4{
|
|
205
217
|
opacity:0.95;
|
|
206
218
|
}
|
|
207
|
-
.magritte-morph-item___8kF46_1-5-
|
|
219
|
+
.magritte-morph-item___8kF46_1-5-4{
|
|
208
220
|
line-height:0;
|
|
209
221
|
transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
|
|
210
222
|
}
|
|
211
|
-
.magritte-morph-item-top___WPEkn_1-5-
|
|
223
|
+
.magritte-morph-item-top___WPEkn_1-5-4{
|
|
212
224
|
--magritte-ui-morph-item-transform-origin-y:top;
|
|
213
225
|
}
|
|
214
|
-
.magritte-morph-item-bottom___zNbsF_1-5-
|
|
226
|
+
.magritte-morph-item-bottom___zNbsF_1-5-4{
|
|
215
227
|
--magritte-ui-morph-item-transform-origin-y:bottom;
|
|
216
228
|
}
|
|
217
|
-
.magritte-morph-item-left___T6AMW_1-5-
|
|
229
|
+
.magritte-morph-item-left___T6AMW_1-5-4{
|
|
218
230
|
--magritte-ui-morph-item-transform-origin-x:left;
|
|
219
231
|
}
|
|
220
|
-
.magritte-morph-item-right___EuT1E_1-5-
|
|
232
|
+
.magritte-morph-item-right___EuT1E_1-5-4{
|
|
221
233
|
--magritte-ui-morph-item-transform-origin-x:right;
|
|
222
234
|
}
|
|
223
|
-
.magritte-pane___f8eFC_1-5-
|
|
235
|
+
.magritte-pane___f8eFC_1-5-4{
|
|
224
236
|
position:relative;
|
|
225
237
|
overflow:hidden;
|
|
226
238
|
pointer-events:none;
|
|
227
239
|
}
|
|
228
|
-
.magritte-start-state-container___giBVb_1-5-
|
|
240
|
+
.magritte-start-state-container___giBVb_1-5-4{
|
|
229
241
|
position:relative;
|
|
230
242
|
z-index:1;
|
|
231
243
|
box-sizing:border-box;
|
|
232
244
|
pointer-events:auto;
|
|
233
245
|
}
|
|
234
|
-
.magritte-end-state-container___uiW8Q_1-5-
|
|
246
|
+
.magritte-end-state-container___uiW8Q_1-5-4{
|
|
235
247
|
position:absolute;
|
|
236
248
|
z-index:0;
|
|
237
249
|
top:0;
|
|
@@ -240,66 +252,66 @@
|
|
|
240
252
|
pointer-events:none;
|
|
241
253
|
opacity:0;
|
|
242
254
|
}
|
|
243
|
-
.magritte-content-container___7s7vv_1-5-
|
|
255
|
+
.magritte-content-container___7s7vv_1-5-4{
|
|
244
256
|
box-sizing:border-box;
|
|
245
257
|
}
|
|
246
|
-
.magritte-next-pane___H2oxQ_1-5-
|
|
258
|
+
.magritte-next-pane___H2oxQ_1-5-4{
|
|
247
259
|
position:relative;
|
|
248
260
|
}
|
|
249
|
-
.magritte-nav-bar___RRGe0_1-5-
|
|
261
|
+
.magritte-nav-bar___RRGe0_1-5-4{
|
|
250
262
|
top:0;
|
|
251
263
|
position:sticky;
|
|
252
264
|
pointer-events:none;
|
|
253
265
|
overflow-anchor:none;
|
|
254
266
|
z-index:10;
|
|
255
267
|
}
|
|
256
|
-
.magritte-nav-bar-overlay___Mq5ZD_1-5-
|
|
268
|
+
.magritte-nav-bar-overlay___Mq5ZD_1-5-4 .magritte-nav-bar-overlay-wrapper___y1VpY_1-5-4{
|
|
257
269
|
position:absolute;
|
|
258
270
|
inset:0;
|
|
259
271
|
}
|
|
260
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
272
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4{
|
|
261
273
|
display:grid;
|
|
262
274
|
position:relative;
|
|
263
275
|
}
|
|
264
|
-
.magritte-nav-bar-panes-container___5ZDLa_1-5-
|
|
276
|
+
.magritte-nav-bar-panes-container___5ZDLa_1-5-4{
|
|
265
277
|
position:relative;
|
|
266
278
|
z-index:1;
|
|
267
279
|
grid-area:1 / 1;
|
|
268
280
|
min-width:0;
|
|
269
281
|
}
|
|
270
|
-
.magritte-nav-bar-progressive-blur___qyeUV_1-5-
|
|
282
|
+
.magritte-nav-bar-progressive-blur___qyeUV_1-5-4{
|
|
271
283
|
position:relative;
|
|
272
284
|
z-index:0;
|
|
273
285
|
transform-origin:0 0;
|
|
274
286
|
grid-area:1 / 1;
|
|
275
287
|
min-width:0;
|
|
276
288
|
}
|
|
277
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
278
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
279
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
289
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4 .magritte-nav-bar-stage___amDz7_1-5-4,
|
|
290
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4 .nav-bar-layout-animation-stage-start,
|
|
291
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4 .nav-bar-layout-animation-stage-end{
|
|
280
292
|
padding-top:calc(8px + var(--magritte-ui-nav-bar-padding-top-override, 0px));
|
|
281
293
|
}
|
|
282
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
283
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
284
|
-
.magritte-nav-bar-content-container___H-WMO_1-5-
|
|
294
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4 .magritte-next-pane___H2oxQ_1-5-4 .magritte-nav-bar-stage___amDz7_1-5-4,
|
|
295
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4 .magritte-next-pane___H2oxQ_1-5-4 .nav-bar-layout-animation-stage-start,
|
|
296
|
+
.magritte-nav-bar-content-container___H-WMO_1-5-4 .magritte-next-pane___H2oxQ_1-5-4 .nav-bar-layout-animation-stage-end{
|
|
285
297
|
padding-top:8px;
|
|
286
298
|
}
|
|
287
|
-
.magritte-last-pane___Hf2No_1-5-
|
|
288
|
-
.magritte-last-pane___Hf2No_1-5-
|
|
289
|
-
.magritte-last-pane___Hf2No_1-5-
|
|
299
|
+
.magritte-last-pane___Hf2No_1-5-4 .magritte-nav-bar-stage___amDz7_1-5-4,
|
|
300
|
+
.magritte-last-pane___Hf2No_1-5-4 .nav-bar-layout-animation-stage-start,
|
|
301
|
+
.magritte-last-pane___Hf2No_1-5-4 .nav-bar-layout-animation-stage-end{
|
|
290
302
|
padding-bottom:var(--magritte-ui-nav-bar-stage-padding-bottom-override, 8px);
|
|
291
303
|
}
|
|
292
|
-
.magritte-next-pane___H2oxQ_1-5-
|
|
293
|
-
.magritte-next-pane___H2oxQ_1-5-
|
|
294
|
-
.magritte-next-pane___H2oxQ_1-5-
|
|
304
|
+
.magritte-next-pane___H2oxQ_1-5-4 .magritte-last-pane___Hf2No_1-5-4 .magritte-nav-bar-stage___amDz7_1-5-4,
|
|
305
|
+
.magritte-next-pane___H2oxQ_1-5-4 .magritte-last-pane___Hf2No_1-5-4 .nav-bar-layout-animation-stage-start,
|
|
306
|
+
.magritte-next-pane___H2oxQ_1-5-4 .magritte-last-pane___Hf2No_1-5-4 .nav-bar-layout-animation-stage-end{
|
|
295
307
|
padding-bottom:var(--magritte-ui-nav-bar-stage-padding-bottom-override, 16px);
|
|
296
308
|
}
|
|
297
|
-
.magritte-nav-bar-stage___amDz7_1-5-
|
|
309
|
+
.magritte-nav-bar-stage___amDz7_1-5-4{
|
|
298
310
|
padding:8px var(--magritte-ui-nav-bar-stage-horizontal-padding-override, 16px);
|
|
299
311
|
}
|
|
300
|
-
.magritte-metrics-mode___h38aX_1-5-
|
|
301
|
-
.magritte-metrics-mode___h38aX_1-5-
|
|
302
|
-
.magritte-metrics-mode___h38aX_1-5-
|
|
312
|
+
.magritte-metrics-mode___h38aX_1-5-4 .magritte-morph-item___8kF46_1-5-4,
|
|
313
|
+
.magritte-metrics-mode___h38aX_1-5-4 .magritte-pane___f8eFC_1-5-4,
|
|
314
|
+
.magritte-metrics-mode___h38aX_1-5-4 .magritte-next-pane___H2oxQ_1-5-4{
|
|
303
315
|
transform:none !important;
|
|
304
316
|
}
|
|
305
317
|
.nav-bar-layout-animation-stage-end,
|
|
@@ -310,49 +322,49 @@
|
|
|
310
322
|
height:auto !important;
|
|
311
323
|
transform:none !important;
|
|
312
324
|
}
|
|
313
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-5-
|
|
314
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-5-
|
|
325
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-5-4,
|
|
326
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-5-4{
|
|
315
327
|
position:static !important;
|
|
316
328
|
width:auto !important;
|
|
317
329
|
height:auto !important;
|
|
318
330
|
transform:none !important;
|
|
319
331
|
}
|
|
320
|
-
.magritte-layout-morph___I3SPy_1-5-
|
|
332
|
+
.magritte-layout-morph___I3SPy_1-5-4{
|
|
321
333
|
display:block;
|
|
322
334
|
position:absolute;
|
|
323
335
|
transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
|
|
324
336
|
z-index:3;
|
|
325
337
|
}
|
|
326
|
-
.magritte-animation-stage-progress___5FthT_1-5-
|
|
338
|
+
.magritte-animation-stage-progress___5FthT_1-5-4 .magritte-layout-morph___I3SPy_1-5-4 > *{
|
|
327
339
|
margin:0 !important;
|
|
328
340
|
}
|
|
329
|
-
.magritte-layout-morph-start___9-krP_1-5-
|
|
341
|
+
.magritte-layout-morph-start___9-krP_1-5-4{
|
|
330
342
|
z-index:2;
|
|
331
343
|
}
|
|
332
|
-
.magritte-layout-morph-end___LIg4d_1-5-
|
|
344
|
+
.magritte-layout-morph-end___LIg4d_1-5-4{
|
|
333
345
|
z-index:1;
|
|
334
346
|
}
|
|
335
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-5-
|
|
347
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-5-4{
|
|
336
348
|
display:contents;
|
|
337
349
|
}
|
|
338
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-5-
|
|
350
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-5-4{
|
|
339
351
|
display:none;
|
|
340
352
|
}
|
|
341
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-5-
|
|
353
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-5-4{
|
|
342
354
|
display:contents;
|
|
343
355
|
}
|
|
344
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-5-
|
|
356
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-5-4{
|
|
345
357
|
display:none;
|
|
346
358
|
}
|
|
347
|
-
.magritte-divider-container___-NdWi_1-5-
|
|
359
|
+
.magritte-divider-container___-NdWi_1-5-4{
|
|
348
360
|
position:absolute;
|
|
349
361
|
width:100%;
|
|
350
362
|
bottom:0;
|
|
351
363
|
z-index:1;
|
|
352
364
|
}
|
|
353
|
-
.magritte-navbar-transparent-start___wysv0_1-5-
|
|
365
|
+
.magritte-navbar-transparent-start___wysv0_1-5-4 .magritte-divider-container___-NdWi_1-5-4 .magritte-divider___UhH0j_1-5-4{
|
|
354
366
|
opacity:var(--magritte-ui-navbar-animation-progress);
|
|
355
367
|
}
|
|
356
|
-
.magritte-navbar-transparent-end___6KqLR_1-5-
|
|
368
|
+
.magritte-navbar-transparent-end___6KqLR_1-5-4 .magritte-divider-container___-NdWi_1-5-4 .magritte-divider___UhH0j_1-5-4{
|
|
357
369
|
opacity:calc(1 - var(--magritte-ui-navbar-animation-progress));
|
|
358
370
|
}
|
package/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import 'react/jsx-runtime';
|
|
|
15
15
|
import 'react';
|
|
16
16
|
import 'classnames';
|
|
17
17
|
import '@hh.ru/magritte-ui-icon';
|
|
18
|
-
import './nav-bar-
|
|
18
|
+
import './nav-bar-rjSBHUvx.js';
|
|
19
19
|
import './internal/MetricsProvider.js';
|
|
20
20
|
import './internal/utils.js';
|
|
21
21
|
import 'motion';
|
package/internal/PaneStore.d.ts
CHANGED
|
@@ -9,6 +9,17 @@ export interface PaneData {
|
|
|
9
9
|
top?: number;
|
|
10
10
|
animated?: boolean;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* «Эффективная» высота стартового состояния панели.
|
|
14
|
+
*
|
|
15
|
+
* Для не-foldable панелей возвращает `max(startHeight, endHeight)`: это позволяет корректно
|
|
16
|
+
* обрабатывать кейс, когда стартовое состояние ниже конечного (например, прозрачный навбар с одними
|
|
17
|
+
* кнопками в старте и непрозрачный с заголовком large в конце). В этом случае высота фиксируется на
|
|
18
|
+
* конечной, панель не «схлопывается», а её бокс достаточно высок, чтобы не обрезать конечный контент.
|
|
19
|
+
*
|
|
20
|
+
* Для foldable панелей кламп не применяется — они схлопываются до 0 и используют только `startHeight`.
|
|
21
|
+
*/
|
|
22
|
+
export declare const getEffectiveStartHeight: (pane: Pick<PaneData, "foldable" | "startHeight" | "endHeight">) => number;
|
|
12
23
|
/**
|
|
13
24
|
* Хранилище состояния панели с поддержкой подписок на изменения.
|
|
14
25
|
*
|
package/internal/PaneStore.js
CHANGED
|
@@ -5,6 +5,23 @@ import { KeyedSubscriptions } from './KeyedSubscriptions.js';
|
|
|
5
5
|
import { useNavBarContext } from './NavBarContext.js';
|
|
6
6
|
import { useInitOnce } from './utils.js';
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* «Эффективная» высота стартового состояния панели.
|
|
10
|
+
*
|
|
11
|
+
* Для не-foldable панелей возвращает `max(startHeight, endHeight)`: это позволяет корректно
|
|
12
|
+
* обрабатывать кейс, когда стартовое состояние ниже конечного (например, прозрачный навбар с одними
|
|
13
|
+
* кнопками в старте и непрозрачный с заголовком large в конце). В этом случае высота фиксируется на
|
|
14
|
+
* конечной, панель не «схлопывается», а её бокс достаточно высок, чтобы не обрезать конечный контент.
|
|
15
|
+
*
|
|
16
|
+
* Для foldable панелей кламп не применяется — они схлопываются до 0 и используют только `startHeight`.
|
|
17
|
+
*/
|
|
18
|
+
const getEffectiveStartHeight = (pane) => {
|
|
19
|
+
const startHeight = pane.startHeight ?? 0;
|
|
20
|
+
if (pane.foldable) {
|
|
21
|
+
return startHeight;
|
|
22
|
+
}
|
|
23
|
+
return Math.max(startHeight, pane.endHeight ?? 0);
|
|
24
|
+
};
|
|
8
25
|
/**
|
|
9
26
|
* Хранилище состояния панели с поддержкой подписок на изменения.
|
|
10
27
|
*
|
|
@@ -82,5 +99,5 @@ const usePaneStore = () => {
|
|
|
82
99
|
return contextStore ?? paneStore;
|
|
83
100
|
};
|
|
84
101
|
|
|
85
|
-
export { PaneContext, PaneStore, usePaneStore };
|
|
102
|
+
export { PaneContext, PaneStore, getEffectiveStartHeight, usePaneStore };
|
|
86
103
|
//# sourceMappingURL=PaneStore.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaneStore.js","sources":["src/internal/PaneStore.ts"],"sourcesContent":["import { createContext, useContext, useId, useLayoutEffect } from 'react';\nimport { motionValue, type MotionValue } from 'motion';\n\nimport { KeyedSubscriptions } from '@hh.ru/magritte-ui-nav-bar/internal/KeyedSubscriptions';\nimport { useNavBarContext } from '@hh.ru/magritte-ui-nav-bar/internal/NavBarContext';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nexport interface PaneData {\n id: string;\n foldable?: boolean;\n motionValue: MotionValue<number>;\n startHeight?: number;\n endHeight?: number;\n top?: number;\n animated?: boolean;\n}\n\n/**\n * Хранилище состояния панели с поддержкой подписок на изменения.\n *\n * Наследует всю подписочную логику от {@link KeyedSubscriptions}, а именно:\n * - `onChange(key, cb)` — подписка на изменения конкретного ключа состояния;\n * - `onDestroy(cb)` — подписка на уничтожение;\n * - батчинг уведомлений (несколько изменений за один цикл объединяются);\n * - дедупликация коллбеков (один коллбек, подписанный на разные ключи, вызовется один раз).\n *\n * Собственная ответственность класса:\n * - Хранение состояния панели в `PaneData`.\n * - Применение частичных обновлений через метод `set(...)`:\n * - сравнивает новые значения с текущими;\n * - обновляет только изменившиеся поля;\n * - помечает изменённые ключи (`markChanged`) и инициирует рассылку (`notify`).\n * - Получение текущего значения по ключу через `get(...)`.\n *\n * Таким образом, `PaneStore` объединяет модель данных панели\n * с реактивными подписками на её изменения.\n */\nexport class PaneStore extends KeyedSubscriptions<keyof PaneData> {\n data: PaneData;\n\n /**\n * @param data Начальное состояние панели.\n */\n constructor(data: PaneData) {\n super();\n this.data = data;\n }\n\n /**\n * Частичное обновление состояния панели.\n * Для каждого ключа из `patch` выполняется сравнение и,\n * если значение изменилось, оно записывается в `data`,\n * а ключ помечается как изменённый.\n * После всех обновлений вызывается `notify()` для рассылки подписчикам.\n *\n * @example\n * controller.set({ foldable: true, startHeight: 200 });\n */\n set<K extends keyof PaneData>(patch: Partial<Pick<PaneData, K>>): void {\n (Object.keys(patch) as K[]).forEach((key) => {\n const next = patch[key];\n if (next !== this.data[key]) {\n this.data[key] = next as PaneData[K];\n this.markChanged(key);\n }\n });\n this.notify();\n }\n\n /**\n * Получить текущее значение поля состояния.\n *\n * @param key Ключ из {@link PaneData}.\n * @returns Текущее значение по указанному ключу.\n *\n * @example\n * const height = controller.get(\"startHeight\");\n */\n get<K extends keyof PaneData>(key: K): PaneData[K] {\n return this.data[key];\n }\n}\n\nexport const PaneContext = createContext<PaneStore | null>(null);\nexport const usePaneStore = (): PaneStore => {\n const contextStore = useContext(PaneContext);\n const id = useId();\n const registerPaneStore = useNavBarContext();\n const paneStore = useInitOnce(() => contextStore ?? new PaneStore({ motionValue: motionValue(0), id }));\n useLayoutEffect(() => {\n if (!registerPaneStore || contextStore !== null) {\n return void 0;\n }\n\n return registerPaneStore(contextStore ?? paneStore);\n }, [contextStore, paneStore, registerPaneStore]);\n return contextStore ?? paneStore;\n};\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;;;;;;;;;;;;;;AAmBG;AACG,MAAO,SAAU,SAAQ,kBAAkC,CAAA;AAC7D,IAAA,IAAI,CAAW;AAEf;;AAEG;AACH,IAAA,WAAA,CAAY,IAAc,EAAA;AACtB,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KACpB;AAED;;;;;;;;;AASG;AACH,IAAA,GAAG,CAA2B,KAAiC,EAAA;QAC1D,MAAM,CAAC,IAAI,CAAC,KAAK,CAAS,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACxC,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACxB,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;AACzB,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAmB,CAAC;AACrC,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;aACzB;AACL,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,EAAE,CAAC;KACjB;AAED;;;;;;;;AAQG;AACH,IAAA,GAAG,CAA2B,GAAM,EAAA;AAChC,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;AACJ,CAAA;MAEY,WAAW,GAAG,aAAa,CAAmB,IAAI,EAAE;AAC1D,MAAM,YAAY,GAAG,MAAgB;AACxC,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAC7C,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AACnB,IAAA,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;IAC7C,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,YAAY,IAAI,IAAI,SAAS,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACxG,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,CAAC,iBAAiB,IAAI,YAAY,KAAK,IAAI,EAAE;YAC7C,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,OAAO,iBAAiB,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;KACvD,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACjD,OAAO,YAAY,IAAI,SAAS,CAAC;AACrC;;;;"}
|
|
1
|
+
{"version":3,"file":"PaneStore.js","sources":["src/internal/PaneStore.ts"],"sourcesContent":["import { createContext, useContext, useId, useLayoutEffect } from 'react';\nimport { motionValue, type MotionValue } from 'motion';\n\nimport { KeyedSubscriptions } from '@hh.ru/magritte-ui-nav-bar/internal/KeyedSubscriptions';\nimport { useNavBarContext } from '@hh.ru/magritte-ui-nav-bar/internal/NavBarContext';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nexport interface PaneData {\n id: string;\n foldable?: boolean;\n motionValue: MotionValue<number>;\n startHeight?: number;\n endHeight?: number;\n top?: number;\n animated?: boolean;\n}\n\n/**\n * «Эффективная» высота стартового состояния панели.\n *\n * Для не-foldable панелей возвращает `max(startHeight, endHeight)`: это позволяет корректно\n * обрабатывать кейс, когда стартовое состояние ниже конечного (например, прозрачный навбар с одними\n * кнопками в старте и непрозрачный с заголовком large в конце). В этом случае высота фиксируется на\n * конечной, панель не «схлопывается», а её бокс достаточно высок, чтобы не обрезать конечный контент.\n *\n * Для foldable панелей кламп не применяется — они схлопываются до 0 и используют только `startHeight`.\n */\nexport const getEffectiveStartHeight = (pane: Pick<PaneData, 'foldable' | 'startHeight' | 'endHeight'>): number => {\n const startHeight = pane.startHeight ?? 0;\n if (pane.foldable) {\n return startHeight;\n }\n return Math.max(startHeight, pane.endHeight ?? 0);\n};\n\n/**\n * Хранилище состояния панели с поддержкой подписок на изменения.\n *\n * Наследует всю подписочную логику от {@link KeyedSubscriptions}, а именно:\n * - `onChange(key, cb)` — подписка на изменения конкретного ключа состояния;\n * - `onDestroy(cb)` — подписка на уничтожение;\n * - батчинг уведомлений (несколько изменений за один цикл объединяются);\n * - дедупликация коллбеков (один коллбек, подписанный на разные ключи, вызовется один раз).\n *\n * Собственная ответственность класса:\n * - Хранение состояния панели в `PaneData`.\n * - Применение частичных обновлений через метод `set(...)`:\n * - сравнивает новые значения с текущими;\n * - обновляет только изменившиеся поля;\n * - помечает изменённые ключи (`markChanged`) и инициирует рассылку (`notify`).\n * - Получение текущего значения по ключу через `get(...)`.\n *\n * Таким образом, `PaneStore` объединяет модель данных панели\n * с реактивными подписками на её изменения.\n */\nexport class PaneStore extends KeyedSubscriptions<keyof PaneData> {\n data: PaneData;\n\n /**\n * @param data Начальное состояние панели.\n */\n constructor(data: PaneData) {\n super();\n this.data = data;\n }\n\n /**\n * Частичное обновление состояния панели.\n * Для каждого ключа из `patch` выполняется сравнение и,\n * если значение изменилось, оно записывается в `data`,\n * а ключ помечается как изменённый.\n * После всех обновлений вызывается `notify()` для рассылки подписчикам.\n *\n * @example\n * controller.set({ foldable: true, startHeight: 200 });\n */\n set<K extends keyof PaneData>(patch: Partial<Pick<PaneData, K>>): void {\n (Object.keys(patch) as K[]).forEach((key) => {\n const next = patch[key];\n if (next !== this.data[key]) {\n this.data[key] = next as PaneData[K];\n this.markChanged(key);\n }\n });\n this.notify();\n }\n\n /**\n * Получить текущее значение поля состояния.\n *\n * @param key Ключ из {@link PaneData}.\n * @returns Текущее значение по указанному ключу.\n *\n * @example\n * const height = controller.get(\"startHeight\");\n */\n get<K extends keyof PaneData>(key: K): PaneData[K] {\n return this.data[key];\n }\n}\n\nexport const PaneContext = createContext<PaneStore | null>(null);\nexport const usePaneStore = (): PaneStore => {\n const contextStore = useContext(PaneContext);\n const id = useId();\n const registerPaneStore = useNavBarContext();\n const paneStore = useInitOnce(() => contextStore ?? new PaneStore({ motionValue: motionValue(0), id }));\n useLayoutEffect(() => {\n if (!registerPaneStore || contextStore !== null) {\n return void 0;\n }\n\n return registerPaneStore(contextStore ?? paneStore);\n }, [contextStore, paneStore, registerPaneStore]);\n return contextStore ?? paneStore;\n};\n"],"names":[],"mappings":";;;;;;AAiBA;;;;;;;;;AASG;AACU,MAAA,uBAAuB,GAAG,CAAC,IAA8D,KAAY;AAC9G,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;AAC1C,IAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,QAAA,OAAO,WAAW,CAAC;KACtB;AACD,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;AACtD,EAAE;AAEF;;;;;;;;;;;;;;;;;;;AAmBG;AACG,MAAO,SAAU,SAAQ,kBAAkC,CAAA;AAC7D,IAAA,IAAI,CAAW;AAEf;;AAEG;AACH,IAAA,WAAA,CAAY,IAAc,EAAA;AACtB,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KACpB;AAED;;;;;;;;;AASG;AACH,IAAA,GAAG,CAA2B,KAAiC,EAAA;QAC1D,MAAM,CAAC,IAAI,CAAC,KAAK,CAAS,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACxC,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACxB,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;AACzB,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAmB,CAAC;AACrC,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;aACzB;AACL,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,EAAE,CAAC;KACjB;AAED;;;;;;;;AAQG;AACH,IAAA,GAAG,CAA2B,GAAM,EAAA;AAChC,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;AACJ,CAAA;MAEY,WAAW,GAAG,aAAa,CAAmB,IAAI,EAAE;AAC1D,MAAM,YAAY,GAAG,MAAgB;AACxC,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAC7C,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;AACnB,IAAA,MAAM,iBAAiB,GAAG,gBAAgB,EAAE,CAAC;IAC7C,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,YAAY,IAAI,IAAI,SAAS,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACxG,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,CAAC,iBAAiB,IAAI,YAAY,KAAK,IAAI,EAAE;YAC7C,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,OAAO,iBAAiB,CAAC,YAAY,IAAI,SAAS,CAAC,CAAC;KACvD,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACjD,OAAO,YAAY,IAAI,SAAS,CAAC;AACrC;;;;"}
|
|
@@ -6,7 +6,9 @@ import { NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetr
|
|
|
6
6
|
* - Каждая панель принадлежит группе, каждая новая группа начинается с foldable панели, и включет её
|
|
7
7
|
* - Для группы суммируется изменение высот её панелей:
|
|
8
8
|
* - для foldable панелей: diff = startHeight (они схлопываются до 0),
|
|
9
|
-
* - для остальных: diff =
|
|
9
|
+
* - для остальных: diff = effectiveStartHeight − (endHeight ?? startHeight),
|
|
10
|
+
* где effectiveStartHeight = max(startHeight, endHeight) — если стартовое состояние ниже
|
|
11
|
+
* конечного, высота фиксируется на конечной и diff = 0 (панель не меняет высоту).
|
|
10
12
|
* - Диапазон скролла группы равен [cum, cum + sumDiff], где `cum` — суммарное изменение высот всех предыдущих групп.
|
|
11
13
|
* - Всем панелям группы присваивается один и тот же диапазон.
|
|
12
14
|
*
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { useRef } from 'react';
|
|
3
|
+
import { getEffectiveStartHeight } from './PaneStore.js';
|
|
3
4
|
import { useActualRef, useInitOnce } from './utils.js';
|
|
4
5
|
import 'motion';
|
|
6
|
+
import './KeyedSubscriptions.js';
|
|
7
|
+
import './NavBarContext.js';
|
|
5
8
|
|
|
6
9
|
const useAnimationRanges = (paneRegistry, getNavBarMetrics) => {
|
|
7
10
|
const animationRangesRef = useRef(null);
|
|
@@ -23,7 +26,7 @@ const useAnimationRanges = (paneRegistry, getNavBarMetrics) => {
|
|
|
23
26
|
for (let i = 0; i < panesData.length; i++) {
|
|
24
27
|
const pane = panesData[i];
|
|
25
28
|
if (pane.animated) {
|
|
26
|
-
const paneHeight = pane
|
|
29
|
+
const paneHeight = getEffectiveStartHeight(pane);
|
|
27
30
|
scrollRangesById.set(pane.id, [totalDuration, totalDuration + paneHeight]);
|
|
28
31
|
totalDuration += paneHeight;
|
|
29
32
|
}
|
|
@@ -51,7 +54,7 @@ const useAnimationRanges = (paneRegistry, getNavBarMetrics) => {
|
|
|
51
54
|
// Дельта высоты панели: вклад в длительность текущей группы
|
|
52
55
|
const deltaHeight = pane.foldable
|
|
53
56
|
? (pane.startHeight ?? 0) // foldable схлопывается до 0
|
|
54
|
-
: (pane
|
|
57
|
+
: getEffectiveStartHeight(pane) - (pane.endHeight ?? pane.startHeight ?? 0); // иначе разница start -> end
|
|
55
58
|
groupDuration += deltaHeight;
|
|
56
59
|
}
|
|
57
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimationRanges.js","sources":["src/internal/useAnimationRanges.ts"],"sourcesContent":["import { type MutableRefObject, useRef } from 'react';\n\nimport { type PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useActualRef, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\n/**\n * Рассчитывает для панелей диапазоны скролла, в течение которого должна проигрываться их анимация.\n *\n * - Каждая панель принадлежит группе, каждая новая группа начинается с foldable панели, и включет её\n * - Для группы суммируется изменение высот её панелей:\n * - для foldable панелей: diff = startHeight (они схлопываются до 0),\n * - для остальных: diff =
|
|
1
|
+
{"version":3,"file":"useAnimationRanges.js","sources":["src/internal/useAnimationRanges.ts"],"sourcesContent":["import { type MutableRefObject, useRef } from 'react';\n\nimport { getEffectiveStartHeight, type PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useActualRef, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\n/**\n * Рассчитывает для панелей диапазоны скролла, в течение которого должна проигрываться их анимация.\n *\n * - Каждая панель принадлежит группе, каждая новая группа начинается с foldable панели, и включет её\n * - Для группы суммируется изменение высот её панелей:\n * - для foldable панелей: diff = startHeight (они схлопываются до 0),\n * - для остальных: diff = effectiveStartHeight − (endHeight ?? startHeight),\n * где effectiveStartHeight = max(startHeight, endHeight) — если стартовое состояние ниже\n * конечного, высота фиксируется на конечной и diff = 0 (панель не меняет высоту).\n * - Диапазон скролла группы равен [cum, cum + sumDiff], где `cum` — суммарное изменение высот всех предыдущих групп.\n * - Всем панелям группы присваивается один и тот же диапазон.\n *\n * Вход:\n * - Массив панелей в произвольном порядке; внутри функция сортирует их по `top` по убыванию,\n * чтобы идти от нижних к верхним.\n *\n * Выход:\n * - Массив той же длины и в том же порядке, что и `data`.\n * Для каждой панели — кортеж `[start, end]` в пикселях, либо `null`, если диапазон не вычислен.\n *\n * Ожидания по данным:\n * - `id` уникален (используется как ключ).\n * - `startHeight` задан у всех панелей.\n * - `endHeight` опционален (если не задан, изменение высоты для не-foldable панелей считается 0).\n * - `top` задан для корректной сортировки.\n *\n * @param {PaneData[]} data\n * Список панелей. Минимально используемые поля:\n * - id: string\n * - top?: number\n * - foldable?: boolean\n * - startHeight?: number\n * - endHeight?: number\n *\n * @returns {Array<[number, number] | null>}\n * Диапазоны скролла для анимации каждой панели в исходном порядке `data`.\n */\nexport type AnimationRanges = Map<string, [number, number]>;\nexport const useAnimationRanges = (\n paneRegistry: Set<PaneStore>,\n getNavBarMetrics: () => NavBarMetrics\n): [() => AnimationRanges, VoidFunction] => {\n const animationRangesRef: MutableRefObject<AnimationRanges | null> = useRef(null);\n const paneRegistryRef = useActualRef(paneRegistry);\n\n const getAnimationRanges = useInitOnce(() => () => {\n if (!animationRangesRef.current) {\n // Идём снизу вверх: сортируем по top убыванием.\n const panesData = [...paneRegistryRef.current.values()]\n .map((pane) => pane.data)\n .sort((a, b) => (b.top ?? 0) - (a.top ?? 0));\n const { heightDelta } = getNavBarMetrics();\n\n const scrollRangesById = new Map<string, [number, number]>();\n let groupStartIdx: number | null = 0; // индекс последней встреченной foldable (начало текущей группы)\n let totalDuration = 0; // суммарная длительность (в пикселях скролла) всех ранее обработанных групп\n let groupDuration = 0; // суммарная длительность (в пикселях скролла) текущей группы\n\n // ни одна из панелей не схлопывается и не меняет высоту в процессе анимации\n // в этом случае просто разбиваем стадии анимации на отрезки пропорциональные высоте панелей\n if (heightDelta === 0) {\n for (let i = 0; i < panesData.length; i++) {\n const pane = panesData[i];\n if (pane.animated) {\n const paneHeight = getEffectiveStartHeight(pane);\n scrollRangesById.set(pane.id, [totalDuration, totalDuration + paneHeight]);\n totalDuration += paneHeight;\n }\n }\n } else {\n for (let i = 0; i <= panesData.length; i++) {\n const pane = panesData[i] ?? null;\n const isLastPane = pane === null;\n const isGroupEnd = isLastPane || pane.foldable;\n // Новая foldable или последняя панель -> завершаем обработку текущей группы, и сохраняем\n // диапазон если известно место ее начала\n if (isGroupEnd && groupStartIdx !== null) {\n const range: [number, number] = [totalDuration, totalDuration + groupDuration];\n for (let j = groupStartIdx; j < i; j++) {\n scrollRangesById.set(panesData[j].id, range);\n }\n totalDuration += groupDuration;\n groupDuration = 0;\n }\n\n if (!isLastPane) {\n if (pane.foldable) {\n groupStartIdx = i;\n }\n\n // Дельта высоты панели: вклад в длительность текущей группы\n const deltaHeight = pane.foldable\n ? (pane.startHeight ?? 0) // foldable схлопывается до 0\n : getEffectiveStartHeight(pane) - (pane.endHeight ?? pane.startHeight ?? 0); // иначе разница start -> end\n groupDuration += deltaHeight;\n }\n }\n }\n\n animationRangesRef.current = scrollRangesById;\n }\n return animationRangesRef.current;\n });\n\n const invalidateAnimationRangesCache = useInitOnce(() => () => (animationRangesRef.current = null));\n\n return [getAnimationRanges, invalidateAnimationRangesCache];\n};\n"],"names":[],"mappings":";;;;;;;MA4Ca,kBAAkB,GAAG,CAC9B,YAA4B,EAC5B,gBAAqC,KACE;AACvC,IAAA,MAAM,kBAAkB,GAA6C,MAAM,CAAC,IAAI,CAAC,CAAC;AAClF,IAAA,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAEnD,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAM,MAAK;AAC9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;;YAE7B,MAAM,SAAS,GAAG,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;iBAClD,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;iBACxB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;AACjD,YAAA,MAAM,EAAE,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;AAE3C,YAAA,MAAM,gBAAgB,GAAG,IAAI,GAAG,EAA4B,CAAC;AAC7D,YAAA,IAAI,aAAa,GAAkB,CAAC,CAAC;AACrC,YAAA,IAAI,aAAa,GAAG,CAAC,CAAC;AACtB,YAAA,IAAI,aAAa,GAAG,CAAC,CAAC;;;AAItB,YAAA,IAAI,WAAW,KAAK,CAAC,EAAE;AACnB,gBAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,oBAAA,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAC1B,oBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,wBAAA,MAAM,UAAU,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;AACjD,wBAAA,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,aAAa,EAAE,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC;wBAC3E,aAAa,IAAI,UAAU,CAAC;qBAC/B;iBACJ;aACJ;iBAAM;AACH,gBAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACxC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;AAClC,oBAAA,MAAM,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;AACjC,oBAAA,MAAM,UAAU,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;;;AAG/C,oBAAA,IAAI,UAAU,IAAI,aAAa,KAAK,IAAI,EAAE;wBACtC,MAAM,KAAK,GAAqB,CAAC,aAAa,EAAE,aAAa,GAAG,aAAa,CAAC,CAAC;AAC/E,wBAAA,KAAK,IAAI,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AACpC,4BAAA,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;yBAChD;wBACD,aAAa,IAAI,aAAa,CAAC;wBAC/B,aAAa,GAAG,CAAC,CAAC;qBACrB;oBAED,IAAI,CAAC,UAAU,EAAE;AACb,wBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;4BACf,aAAa,GAAG,CAAC,CAAC;yBACrB;;AAGD,wBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ;+BAC1B,IAAI,CAAC,WAAW,IAAI,CAAC;AACxB,8BAAE,uBAAuB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;wBAChF,aAAa,IAAI,WAAW,CAAC;qBAChC;iBACJ;aACJ;AAED,YAAA,kBAAkB,CAAC,OAAO,GAAG,gBAAgB,CAAC;SACjD;QACD,OAAO,kBAAkB,CAAC,OAAO,CAAC;AACtC,KAAC,CAAC,CAAC;AAEH,IAAA,MAAM,8BAA8B,GAAG,WAAW,CAAC,MAAM,OAAO,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;AAEpG,IAAA,OAAO,CAAC,kBAAkB,EAAE,8BAA8B,CAAC,CAAC;AAChE;;;;"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
2
|
import { useRef } from 'react';
|
|
3
|
+
import { getEffectiveStartHeight } from './PaneStore.js';
|
|
3
4
|
import { useActualRef, useInitOnce, getRelativeOffset } from './utils.js';
|
|
4
5
|
import 'motion';
|
|
6
|
+
import './KeyedSubscriptions.js';
|
|
7
|
+
import './NavBarContext.js';
|
|
5
8
|
|
|
6
9
|
const useNavBarMetrics = (panesRegistry, rootRef, scrollAdapter) => {
|
|
7
10
|
const metricsRef = useRef(null);
|
|
@@ -14,9 +17,9 @@ const useNavBarMetrics = (panesRegistry, rootRef, scrollAdapter) => {
|
|
|
14
17
|
const heightDelta = panes.reduce((delta, pane) => delta +
|
|
15
18
|
(pane.foldable
|
|
16
19
|
? (pane.startHeight ?? 0)
|
|
17
|
-
: (pane
|
|
20
|
+
: getEffectiveStartHeight(pane) - (pane.endHeight ?? pane.startHeight ?? 0)), 0);
|
|
18
21
|
const positions = panes
|
|
19
|
-
.map((pane) => ({ top: pane.top ?? 0, bottom: (pane.top ?? 0) + (pane
|
|
22
|
+
.map((pane) => ({ top: pane.top ?? 0, bottom: (pane.top ?? 0) + getEffectiveStartHeight(pane) }))
|
|
20
23
|
.sort((a, b) => a.top - b.top);
|
|
21
24
|
const height = (positions[positions.length - 1]?.bottom ?? 0) - (positions[0]?.top ?? 0);
|
|
22
25
|
metricsRef.current = {
|
|
@@ -24,7 +27,7 @@ const useNavBarMetrics = (panesRegistry, rootRef, scrollAdapter) => {
|
|
|
24
27
|
top,
|
|
25
28
|
bottom: top + height,
|
|
26
29
|
animationHeight: heightDelta ||
|
|
27
|
-
panes.filter((p) => p.animated).reduce((acc, p) => acc + (p
|
|
30
|
+
panes.filter((p) => p.animated).reduce((acc, p) => acc + getEffectiveStartHeight(p), 0) ||
|
|
28
31
|
// если ни одна панель не схлопывается и не анимируется, всё равно нужен ненулевой
|
|
29
32
|
// диапазон скролла, чтобы проигрывалась анимация прозрачности фона навбара
|
|
30
33
|
height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNavBarMetrics.js","sources":["src/internal/useNavBarMetrics.ts"],"sourcesContent":["import { type MutableRefObject, RefObject, useRef } from 'react';\n\nimport { type PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { getRelativeOffset, useActualRef, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nexport interface NavBarMetrics {\n heightDelta: number;\n top: number;\n bottom: number;\n animationHeight: number;\n}\n\nexport const useNavBarMetrics = (\n panesRegistry: Set<PaneStore>,\n rootRef: RefObject<HTMLElement>,\n scrollAdapter: ScrollAdapter\n): [() => NavBarMetrics, VoidFunction] => {\n const metricsRef: MutableRefObject<NavBarMetrics | null> = useRef(null);\n const panesRegistryRef = useActualRef(panesRegistry);\n\n const getNavBarMetrics = useInitOnce(() => () => {\n if (!metricsRef.current) {\n // расстояние от верхнего края NavBar до верхнего края контейнера со скроллом\n const top = getRelativeOffset(scrollAdapter, rootRef.current);\n const panes = [...panesRegistryRef.current.values()].map((pane) => pane.data);\n const heightDelta = panes.reduce(\n (delta, pane) =>\n delta +\n (pane.foldable\n ? (pane.startHeight ?? 0)\n : (pane
|
|
1
|
+
{"version":3,"file":"useNavBarMetrics.js","sources":["src/internal/useNavBarMetrics.ts"],"sourcesContent":["import { type MutableRefObject, RefObject, useRef } from 'react';\n\nimport { getEffectiveStartHeight, type PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { getRelativeOffset, useActualRef, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nexport interface NavBarMetrics {\n heightDelta: number;\n top: number;\n bottom: number;\n animationHeight: number;\n}\n\nexport const useNavBarMetrics = (\n panesRegistry: Set<PaneStore>,\n rootRef: RefObject<HTMLElement>,\n scrollAdapter: ScrollAdapter\n): [() => NavBarMetrics, VoidFunction] => {\n const metricsRef: MutableRefObject<NavBarMetrics | null> = useRef(null);\n const panesRegistryRef = useActualRef(panesRegistry);\n\n const getNavBarMetrics = useInitOnce(() => () => {\n if (!metricsRef.current) {\n // расстояние от верхнего края NavBar до верхнего края контейнера со скроллом\n const top = getRelativeOffset(scrollAdapter, rootRef.current);\n const panes = [...panesRegistryRef.current.values()].map((pane) => pane.data);\n const heightDelta = panes.reduce(\n (delta, pane) =>\n delta +\n (pane.foldable\n ? (pane.startHeight ?? 0)\n : getEffectiveStartHeight(pane) - (pane.endHeight ?? pane.startHeight ?? 0)),\n 0\n );\n const positions = panes\n .map((pane) => ({ top: pane.top ?? 0, bottom: (pane.top ?? 0) + getEffectiveStartHeight(pane) }))\n .sort((a, b) => a.top - b.top);\n const height = (positions[positions.length - 1]?.bottom ?? 0) - (positions[0]?.top ?? 0);\n\n metricsRef.current = {\n heightDelta,\n top,\n bottom: top + height,\n animationHeight:\n heightDelta ||\n panes.filter((p) => p.animated).reduce((acc, p) => acc + getEffectiveStartHeight(p), 0) ||\n // если ни одна панель не схлопывается и не анимируется, всё равно нужен ненулевой\n // диапазон скролла, чтобы проигрывалась анимация прозрачности фона навбара\n height,\n };\n }\n\n return metricsRef.current;\n });\n\n const invalidateMetricsCache = useInitOnce(() => () => (metricsRef.current = null));\n\n return [getNavBarMetrics, invalidateMetricsCache];\n};\n"],"names":[],"mappings":";;;;;;;AAaa,MAAA,gBAAgB,GAAG,CAC5B,aAA6B,EAC7B,OAA+B,EAC/B,aAA4B,KACS;AACrC,IAAA,MAAM,UAAU,GAA2C,MAAM,CAAC,IAAI,CAAC,CAAC;AACxE,IAAA,MAAM,gBAAgB,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,MAAK;AAC5C,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;;YAErB,MAAM,GAAG,GAAG,iBAAiB,CAAC,aAAa,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;YAC9D,MAAM,KAAK,GAAG,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9E,YAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAC5B,CAAC,KAAK,EAAE,IAAI,KACR,KAAK;iBACJ,IAAI,CAAC,QAAQ;AACV,uBAAG,IAAI,CAAC,WAAW,IAAI,CAAC;sBACtB,uBAAuB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,EACpF,CAAC,CACJ,CAAC;YACF,MAAM,SAAS,GAAG,KAAK;AAClB,iBAAA,GAAG,CAAC,CAAC,IAAI,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChG,iBAAA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YACnC,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;YAEzF,UAAU,CAAC,OAAO,GAAG;gBACjB,WAAW;gBACX,GAAG;gBACH,MAAM,EAAE,GAAG,GAAG,MAAM;AACpB,gBAAA,eAAe,EACX,WAAW;AACX,oBAAA,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,GAAG,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;;;oBAGvF,MAAM;aACb,CAAC;SACL;QAED,OAAO,UAAU,CAAC,OAAO,CAAC;AAC9B,KAAC,CAAC,CAAC;AAEH,IAAA,MAAM,sBAAsB,GAAG,WAAW,CAAC,MAAM,OAAO,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;AAEpF,IAAA,OAAO,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC;AACtD;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"actions-container":"magritte-actions-container___CBgYW_1-5-4","actionsContainer":"magritte-actions-container___CBgYW_1-5-4","actions-no-children":"magritte-actions-no-children___rgJUl_1-5-4","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-5-4","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-5-4","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-5-4","actions-right-slot":"magritte-actions-right-slot___aodtj_1-5-4","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-5-4","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-5-4","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-5-4","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-5-4","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-5-4","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-5-4","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-5-4","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-5-4","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-5-4","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-5-4","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-5-4","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-5-4","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-5-4","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-5-4","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-5-4","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-5-4","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-5-4","navbar-transparent":"magritte-navbar-transparent___ULEh8_1-5-4","navbarTransparent":"magritte-navbar-transparent___ULEh8_1-5-4","actions-only-stage":"magritte-actions-only-stage___cg10A_1-5-4","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-5-4","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-5-4","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-5-4","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-5-4","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-5-4","align-top":"magritte-align-top___-QSFW_1-5-4","alignTop":"magritte-align-top___-QSFW_1-5-4","align-bottom":"magritte-align-bottom___FliHI_1-5-4","alignBottom":"magritte-align-bottom___FliHI_1-5-4","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-5-4","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-5-4","title-main-part":"magritte-title-main-part___npoHN_1-5-4","titleMainPart":"magritte-title-main-part___npoHN_1-5-4","title-left-slot":"magritte-title-left-slot___HTE7h_1-5-4","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-5-4","title-container":"magritte-title-container___y9AIx_1-5-4","titleContainer":"magritte-title-container___y9AIx_1-5-4","subtitle-container":"magritte-subtitle-container___nVUBu_1-5-4","subtitleContainer":"magritte-subtitle-container___nVUBu_1-5-4","text-morph-item":"magritte-text-morph-item___-vXru_1-5-4","textMorphItem":"magritte-text-morph-item___-vXru_1-5-4","centered":"magritte-centered___Y2mlP_1-5-4","title-morph-item":"magritte-title-morph-item___t7Wf3_1-5-4","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-5-4","title":"magritte-title___ZbLgP_1-5-4","size-large":"magritte-size-large___ISXfH_1-5-4","sizeLarge":"magritte-size-large___ISXfH_1-5-4","pane-content":"magritte-pane-content___UVmC6_1-5-4","paneContent":"magritte-pane-content___UVmC6_1-5-4","pane-background":"magritte-pane-background___PDZAX_1-5-4","paneBackground":"magritte-pane-background___PDZAX_1-5-4","morph-item":"magritte-morph-item___8kF46_1-5-4","morphItem":"magritte-morph-item___8kF46_1-5-4","morph-item-top":"magritte-morph-item-top___WPEkn_1-5-4","morphItemTop":"magritte-morph-item-top___WPEkn_1-5-4","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-5-4","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-5-4","morph-item-left":"magritte-morph-item-left___T6AMW_1-5-4","morphItemLeft":"magritte-morph-item-left___T6AMW_1-5-4","morph-item-right":"magritte-morph-item-right___EuT1E_1-5-4","morphItemRight":"magritte-morph-item-right___EuT1E_1-5-4","pane":"magritte-pane___f8eFC_1-5-4","start-state-container":"magritte-start-state-container___giBVb_1-5-4","startStateContainer":"magritte-start-state-container___giBVb_1-5-4","end-state-container":"magritte-end-state-container___uiW8Q_1-5-4","endStateContainer":"magritte-end-state-container___uiW8Q_1-5-4","content-container":"magritte-content-container___7s7vv_1-5-4","contentContainer":"magritte-content-container___7s7vv_1-5-4","next-pane":"magritte-next-pane___H2oxQ_1-5-4","nextPane":"magritte-next-pane___H2oxQ_1-5-4","nav-bar":"magritte-nav-bar___RRGe0_1-5-4","navBar":"magritte-nav-bar___RRGe0_1-5-4","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-5-4","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-5-4","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-5-4","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-5-4","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-5-4","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-5-4","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-5-4","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-5-4","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-5-4","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-5-4","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-5-4","navBarStage":"magritte-nav-bar-stage___amDz7_1-5-4","last-pane":"magritte-last-pane___Hf2No_1-5-4","lastPane":"magritte-last-pane___Hf2No_1-5-4","metrics-mode":"magritte-metrics-mode___h38aX_1-5-4","metricsMode":"magritte-metrics-mode___h38aX_1-5-4","layout-morph":"magritte-layout-morph___I3SPy_1-5-4","layoutMorph":"magritte-layout-morph___I3SPy_1-5-4","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-5-4","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-5-4","layout-morph-start":"magritte-layout-morph-start___9-krP_1-5-4","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-5-4","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-5-4","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-5-4","divider-container":"magritte-divider-container___-NdWi_1-5-4","dividerContainer":"magritte-divider-container___-NdWi_1-5-4","divider":"magritte-divider___UhH0j_1-5-4"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=nav-bar-rjSBHUvx.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nav-bar-rjSBHUvx.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-nav-bar",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.4",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
|
|
31
31
|
"@hh.ru/magritte-common-use-when-font-loaded": "1.0.14",
|
|
32
|
-
"@hh.ru/magritte-design-tokens": "24.7.
|
|
32
|
+
"@hh.ru/magritte-design-tokens": "24.7.2",
|
|
33
33
|
"@hh.ru/magritte-internal-accessible-region": "1.0.2",
|
|
34
34
|
"@hh.ru/magritte-internal-custom-scroll": "2.1.1",
|
|
35
35
|
"@hh.ru/magritte-internal-default-props-context": "1.0.2",
|
|
36
36
|
"@hh.ru/magritte-internal-slot-registry": "1.1.0",
|
|
37
|
-
"@hh.ru/magritte-ui-divider": "3.2.
|
|
38
|
-
"@hh.ru/magritte-ui-icon": "14.2.
|
|
37
|
+
"@hh.ru/magritte-ui-divider": "3.2.1",
|
|
38
|
+
"@hh.ru/magritte-ui-icon": "14.2.12",
|
|
39
39
|
"@hh.ru/magritte-ui-layer": "3.2.5",
|
|
40
40
|
"@hh.ru/magritte-ui-mock-component": "1.1.7",
|
|
41
|
-
"@hh.ru/magritte-ui-typography": "5.3.
|
|
41
|
+
"@hh.ru/magritte-ui-typography": "5.3.6"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "31b8343d575729be9878df6f3d156992168a97b0"
|
|
44
44
|
}
|
package/public/Actions.js
CHANGED
|
@@ -7,7 +7,7 @@ import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
|
|
|
7
7
|
import { Morph } from './Morph.js';
|
|
8
8
|
import { useAnimationStage } from './Stage.js';
|
|
9
9
|
import { useActionsDefaultProps, useActionsIconsDefaultProps } from './defaultProps.js';
|
|
10
|
-
import { s as styles } from '../nav-bar-
|
|
10
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
11
11
|
import '../internal/MetricsProvider.js';
|
|
12
12
|
import '../internal/utils.js';
|
|
13
13
|
import 'motion';
|
package/public/LayoutMorph.js
CHANGED
|
@@ -10,7 +10,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
|
|
|
10
10
|
import { useInert } from '../internal/useInert.js';
|
|
11
11
|
import { useActualRef, useStoreSyncedTransform, lerp, calcMorphParams } from '../internal/utils.js';
|
|
12
12
|
import { AnimationStageContext } from './LayoutStage.js';
|
|
13
|
-
import { s as styles } from '../nav-bar-
|
|
13
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
14
14
|
import '../internal/KeyedSubscriptions.js';
|
|
15
15
|
import 'motion';
|
|
16
16
|
import '../internal/NavBarContext.js';
|
package/public/LayoutStage.js
CHANGED
|
@@ -9,7 +9,7 @@ import { MorphStoreProvider, useMorphStore } from '../internal/MorphStore.js';
|
|
|
9
9
|
import { usePaneStore } from '../internal/PaneStore.js';
|
|
10
10
|
import { useInitOnce } from '../internal/utils.js';
|
|
11
11
|
import { EnvironmentFingerprintNode, useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
|
|
12
|
-
import { s as styles } from '../nav-bar-
|
|
12
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '../internal/NavBarContext.js';
|
package/public/Morph.js
CHANGED
|
@@ -9,7 +9,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
|
|
|
9
9
|
import { useStoreSyncedTransform, calcMorphParams, lerp } from '../internal/utils.js';
|
|
10
10
|
import { useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
|
|
11
11
|
import { useAnimationStage } from './Stage.js';
|
|
12
|
-
import { s as styles } from '../nav-bar-
|
|
12
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '../internal/NavBarContext.js';
|
package/public/NavBar.js
CHANGED
|
@@ -18,12 +18,12 @@ import { useInitOnce, scheduleMicro, scheduleMacro, remap } from '../internal/ut
|
|
|
18
18
|
import { isPaneElement, ExternalPane } from './Pane.js';
|
|
19
19
|
import { useTriggerSlot } from './TriggerContext.js';
|
|
20
20
|
import { useNavBarRootDefaultProps } from './defaultProps.js';
|
|
21
|
-
import { s as styles } from '../nav-bar-
|
|
22
|
-
import '
|
|
21
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
22
|
+
import '../internal/PaneStore.js';
|
|
23
23
|
import 'motion';
|
|
24
|
-
import '../internal/MorphStore.js';
|
|
25
24
|
import '../internal/KeyedSubscriptions.js';
|
|
26
|
-
import '
|
|
25
|
+
import '@hh.ru/magritte-internal-custom-scroll';
|
|
26
|
+
import '../internal/MorphStore.js';
|
|
27
27
|
import './EnvironmentFingerprintNode.js';
|
|
28
28
|
import './LayoutStage.js';
|
|
29
29
|
import '@hh.ru/magritte-common-use-when-font-loaded';
|
package/public/Pane.js
CHANGED
|
@@ -4,13 +4,13 @@ import { isValidElement, Children, cloneElement } from 'react';
|
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
import { useMotionValue, motion } from 'motion/react';
|
|
6
6
|
import { MorphStoreProvider } from '../internal/MorphStore.js';
|
|
7
|
-
import { usePaneStore, PaneContext } from '../internal/PaneStore.js';
|
|
7
|
+
import { usePaneStore, getEffectiveStartHeight, PaneContext } from '../internal/PaneStore.js';
|
|
8
8
|
import { useSyncMotionValue } from '../internal/useSyncMotionValue.js';
|
|
9
9
|
import { useInitOnce, useStoreSyncedTransform, lerp } from '../internal/utils.js';
|
|
10
10
|
import { EnvironmentFingerprintProvider } from './EnvironmentFingerprintNode.js';
|
|
11
11
|
import { LayoutStage } from './LayoutStage.js';
|
|
12
12
|
import { Stage } from './Stage.js';
|
|
13
|
-
import { s as styles } from '../nav-bar-
|
|
13
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
14
14
|
import '../internal/KeyedSubscriptions.js';
|
|
15
15
|
import 'motion';
|
|
16
16
|
import '../internal/NavBarContext.js';
|
|
@@ -44,10 +44,13 @@ const Pane = ({ children, nextPane, foldable, animationProgress }) => {
|
|
|
44
44
|
const backgroundY = useMotionValue(0);
|
|
45
45
|
useSyncMotionValue(paneStore.get('motionValue'), animationProgress);
|
|
46
46
|
const contentHeight = useMotionValue('auto');
|
|
47
|
-
useInitOnce(() =>
|
|
47
|
+
useInitOnce(() =>
|
|
48
|
+
// подписываемся на обе высоты: бокс панели должен вмещать более высокое из состояний,
|
|
49
|
+
// иначе при startHeight < endHeight конечный контент обрезается overflow: hidden
|
|
50
|
+
paneStore.onChange(['startHeight', 'endHeight'], () => contentHeight.set(getEffectiveStartHeight(paneStore.data) || 'auto')));
|
|
48
51
|
paneStore.set({ foldable });
|
|
49
52
|
useStoreSyncedTransform(paneStore.get('motionValue'), paneStore, ['startHeight', 'endHeight'], () => ({
|
|
50
|
-
start: paneStore.
|
|
53
|
+
start: getEffectiveStartHeight(paneStore.data),
|
|
51
54
|
end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,
|
|
52
55
|
}), (height, progress) => {
|
|
53
56
|
const heightDiff = height.end - height.start;
|
package/public/Pane.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pane.js","sources":["src/public/Pane.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n type FC,\n type ReactNode,\n type JSXElementConstructor,\n type PropsWithChildren,\n type ReactElement,\n} from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n foldable?: boolean;\n nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n /**\n * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n */\n foldable?: boolean;\n /**\n * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n * Прогресс анимации представляется в виде числа 0..1\n * Предназначен для синхронизации внешних анимаций с анимацией панели.\n */\n animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n const items = Children.toArray(children);\n const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n StageProps,\n JSXElementConstructor<StageProps>\n >[];\n const layoutStageContainers = items.filter(\n (child) => isValidElement(child) && child.type === LayoutStage\n ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n return <Stage animationStage=\"only\">{children}</Stage>;\n }\n\n if (layoutStageContainers.length > 0) {\n return cloneElement(layoutStageContainers[0]);\n }\n\n stageContainers.length = Math.min(stageContainers.length, 2);\n\n return stageContainers.map((child, index) => {\n return cloneElement(child, {\n ...child.props,\n animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n });\n });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n const paneStore = usePaneStore();\n\n const y = useMotionValue(0);\n const nextPaneY = useMotionValue(0);\n const backgroundScale = useMotionValue(1);\n const backgroundY = useMotionValue(0);\n useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n const contentHeight = useMotionValue<number | 'auto'>('auto');\n useInitOnce(() =>\n paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto'))\n );\n\n paneStore.set({ foldable });\n\n useStoreSyncedTransform(\n paneStore.get('motionValue'),\n paneStore,\n ['startHeight', 'endHeight'],\n () => ({\n start: paneStore.get('startHeight') ?? 0,\n end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n }),\n (height, progress) => {\n const heightDiff = height.end - height.start;\n const shift = foldable ? progress * -height.start : 0;\n y.set(shift);\n nextPaneY.set(progress * heightDiff);\n backgroundY.set(-shift);\n backgroundScale.set(\n height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n );\n }\n );\n\n return (\n <motion.div\n className={classNames(styles.pane, { [styles.lastPane]: !nextPane })}\n style={{ y: foldable ? y : 0 }}\n >\n <EnvironmentFingerprintProvider>\n <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n <PaneContext.Provider value={paneStore}>\n <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n </PaneContext.Provider>\n <motion.div\n className={styles.paneBackground}\n data-foldable={foldable}\n style={{ scaleY: backgroundScale, y: backgroundY }}\n />\n </motion.div>\n </EnvironmentFingerprintProvider>\n\n {!!nextPane && (\n <motion.div\n className={styles.nextPane}\n // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n // не дойдем до конечной точки анимации, выглядит некрасиво\n style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n >\n {nextPane}\n </motion.div>\n )}\n </motion.div>\n );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n\nexport const isPaneElement = (node: ReactNode): node is PaneElement =>\n isValidElement(node) && node.type === ExternalPane;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pane.js","sources":["src/public/Pane.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n type FC,\n type ReactNode,\n type JSXElementConstructor,\n type PropsWithChildren,\n type ReactElement,\n} from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { getEffectiveStartHeight, PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n foldable?: boolean;\n nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n /**\n * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n */\n foldable?: boolean;\n /**\n * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n * Прогресс анимации представляется в виде числа 0..1\n * Предназначен для синхронизации внешних анимаций с анимацией панели.\n */\n animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n const items = Children.toArray(children);\n const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n StageProps,\n JSXElementConstructor<StageProps>\n >[];\n const layoutStageContainers = items.filter(\n (child) => isValidElement(child) && child.type === LayoutStage\n ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n return <Stage animationStage=\"only\">{children}</Stage>;\n }\n\n if (layoutStageContainers.length > 0) {\n return cloneElement(layoutStageContainers[0]);\n }\n\n stageContainers.length = Math.min(stageContainers.length, 2);\n\n return stageContainers.map((child, index) => {\n return cloneElement(child, {\n ...child.props,\n animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n });\n });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n const paneStore = usePaneStore();\n\n const y = useMotionValue(0);\n const nextPaneY = useMotionValue(0);\n const backgroundScale = useMotionValue(1);\n const backgroundY = useMotionValue(0);\n useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n const contentHeight = useMotionValue<number | 'auto'>('auto');\n useInitOnce(() =>\n // подписываемся на обе высоты: бокс панели должен вмещать более высокое из состояний,\n // иначе при startHeight < endHeight конечный контент обрезается overflow: hidden\n paneStore.onChange(['startHeight', 'endHeight'], () =>\n contentHeight.set(getEffectiveStartHeight(paneStore.data) || 'auto')\n )\n );\n\n paneStore.set({ foldable });\n\n useStoreSyncedTransform(\n paneStore.get('motionValue'),\n paneStore,\n ['startHeight', 'endHeight'],\n () => ({\n start: getEffectiveStartHeight(paneStore.data),\n end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n }),\n (height, progress) => {\n const heightDiff = height.end - height.start;\n const shift = foldable ? progress * -height.start : 0;\n y.set(shift);\n nextPaneY.set(progress * heightDiff);\n backgroundY.set(-shift);\n backgroundScale.set(\n height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n );\n }\n );\n\n return (\n <motion.div\n className={classNames(styles.pane, { [styles.lastPane]: !nextPane })}\n style={{ y: foldable ? y : 0 }}\n >\n <EnvironmentFingerprintProvider>\n <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n <PaneContext.Provider value={paneStore}>\n <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n </PaneContext.Provider>\n <motion.div\n className={styles.paneBackground}\n data-foldable={foldable}\n style={{ scaleY: backgroundScale, y: backgroundY }}\n />\n </motion.div>\n </EnvironmentFingerprintProvider>\n\n {!!nextPane && (\n <motion.div\n className={styles.nextPane}\n // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n // не дойдем до конечной точки анимации, выглядит некрасиво\n style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n >\n {nextPane}\n </motion.div>\n )}\n </motion.div>\n );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n\nexport const isPaneElement = (node: ReactNode): node is PaneElement =>\n isValidElement(node) && node.type === ExternalPane;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/public/Stage.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useMeasureAuto } from '../internal/MetricsProvider.js';
|
|
|
7
7
|
import { usePaneStore } from '../internal/PaneStore.js';
|
|
8
8
|
import { useInert } from '../internal/useInert.js';
|
|
9
9
|
import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
|
|
10
|
-
import { s as styles } from '../nav-bar-
|
|
10
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
11
11
|
import '../internal/utils.js';
|
|
12
12
|
import 'motion';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
package/public/TitleContainer.js
CHANGED
|
@@ -5,7 +5,7 @@ import { useRegisterRegionLabel, useRegisterRegionDescription } from '@hh.ru/mag
|
|
|
5
5
|
import { Morph } from './Morph.js';
|
|
6
6
|
import { useTitleDefaultProps, useSubtitleDefaultProps } from './defaultProps.js';
|
|
7
7
|
import { TextDefaultPropsContext } from '@hh.ru/magritte-ui-typography';
|
|
8
|
-
import { s as styles } from '../nav-bar-
|
|
8
|
+
import { s as styles } from '../nav-bar-rjSBHUvx.js';
|
|
9
9
|
import 'react';
|
|
10
10
|
import 'motion/react';
|
|
11
11
|
import '../internal/MetricsProvider.js';
|
package/nav-bar-BWhJj9gj.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"actions-container":"magritte-actions-container___CBgYW_1-5-2","actionsContainer":"magritte-actions-container___CBgYW_1-5-2","actions-no-children":"magritte-actions-no-children___rgJUl_1-5-2","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-5-2","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-5-2","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-5-2","actions-right-slot":"magritte-actions-right-slot___aodtj_1-5-2","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-5-2","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-5-2","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-5-2","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-5-2","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-5-2","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-5-2","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-5-2","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-5-2","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-5-2","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-5-2","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-5-2","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-5-2","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-5-2","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-5-2","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-5-2","navbar-transparent":"magritte-navbar-transparent___ULEh8_1-5-2","navbarTransparent":"magritte-navbar-transparent___ULEh8_1-5-2","actions-only-stage":"magritte-actions-only-stage___cg10A_1-5-2","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-5-2","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-5-2","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-5-2","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-5-2","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-5-2","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-5-2","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-5-2","align-top":"magritte-align-top___-QSFW_1-5-2","alignTop":"magritte-align-top___-QSFW_1-5-2","align-bottom":"magritte-align-bottom___FliHI_1-5-2","alignBottom":"magritte-align-bottom___FliHI_1-5-2","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-5-2","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-5-2","title-main-part":"magritte-title-main-part___npoHN_1-5-2","titleMainPart":"magritte-title-main-part___npoHN_1-5-2","title-left-slot":"magritte-title-left-slot___HTE7h_1-5-2","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-5-2","title-container":"magritte-title-container___y9AIx_1-5-2","titleContainer":"magritte-title-container___y9AIx_1-5-2","subtitle-container":"magritte-subtitle-container___nVUBu_1-5-2","subtitleContainer":"magritte-subtitle-container___nVUBu_1-5-2","text-morph-item":"magritte-text-morph-item___-vXru_1-5-2","textMorphItem":"magritte-text-morph-item___-vXru_1-5-2","centered":"magritte-centered___Y2mlP_1-5-2","title-morph-item":"magritte-title-morph-item___t7Wf3_1-5-2","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-5-2","title":"magritte-title___ZbLgP_1-5-2","size-large":"magritte-size-large___ISXfH_1-5-2","sizeLarge":"magritte-size-large___ISXfH_1-5-2","pane-content":"magritte-pane-content___UVmC6_1-5-2","paneContent":"magritte-pane-content___UVmC6_1-5-2","pane-background":"magritte-pane-background___PDZAX_1-5-2","paneBackground":"magritte-pane-background___PDZAX_1-5-2","morph-item":"magritte-morph-item___8kF46_1-5-2","morphItem":"magritte-morph-item___8kF46_1-5-2","morph-item-top":"magritte-morph-item-top___WPEkn_1-5-2","morphItemTop":"magritte-morph-item-top___WPEkn_1-5-2","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-5-2","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-5-2","morph-item-left":"magritte-morph-item-left___T6AMW_1-5-2","morphItemLeft":"magritte-morph-item-left___T6AMW_1-5-2","morph-item-right":"magritte-morph-item-right___EuT1E_1-5-2","morphItemRight":"magritte-morph-item-right___EuT1E_1-5-2","pane":"magritte-pane___f8eFC_1-5-2","start-state-container":"magritte-start-state-container___giBVb_1-5-2","startStateContainer":"magritte-start-state-container___giBVb_1-5-2","end-state-container":"magritte-end-state-container___uiW8Q_1-5-2","endStateContainer":"magritte-end-state-container___uiW8Q_1-5-2","content-container":"magritte-content-container___7s7vv_1-5-2","contentContainer":"magritte-content-container___7s7vv_1-5-2","next-pane":"magritte-next-pane___H2oxQ_1-5-2","nextPane":"magritte-next-pane___H2oxQ_1-5-2","nav-bar":"magritte-nav-bar___RRGe0_1-5-2","navBar":"magritte-nav-bar___RRGe0_1-5-2","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-5-2","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-5-2","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-5-2","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-5-2","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-5-2","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-5-2","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-5-2","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-5-2","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-5-2","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-5-2","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-5-2","navBarStage":"magritte-nav-bar-stage___amDz7_1-5-2","last-pane":"magritte-last-pane___Hf2No_1-5-2","lastPane":"magritte-last-pane___Hf2No_1-5-2","metrics-mode":"magritte-metrics-mode___h38aX_1-5-2","metricsMode":"magritte-metrics-mode___h38aX_1-5-2","layout-morph":"magritte-layout-morph___I3SPy_1-5-2","layoutMorph":"magritte-layout-morph___I3SPy_1-5-2","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-5-2","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-5-2","layout-morph-start":"magritte-layout-morph-start___9-krP_1-5-2","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-5-2","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-5-2","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-5-2","divider-container":"magritte-divider-container___-NdWi_1-5-2","dividerContainer":"magritte-divider-container___-NdWi_1-5-2","divider":"magritte-divider___UhH0j_1-5-2"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=nav-bar-BWhJj9gj.js.map
|
package/nav-bar-BWhJj9gj.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nav-bar-BWhJj9gj.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|