@hh.ru/magritte-ui-nav-bar 1.3.30 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/index.css +103 -101
  2. package/index.js +1 -1
  3. package/internal/useBindScrollToAnimationProgress.d.ts +1 -1
  4. package/internal/useBindScrollToAnimationProgress.js +62 -28
  5. package/internal/useBindScrollToAnimationProgress.js.map +1 -1
  6. package/internal/useNavBarMetrics.js +4 -1
  7. package/internal/useNavBarMetrics.js.map +1 -1
  8. package/nav-bar-CAD7XfUf.js +5 -0
  9. package/nav-bar-CAD7XfUf.js.map +1 -0
  10. package/package.json +3 -3
  11. package/public/Actions.js +1 -1
  12. package/public/LayoutMorph.js +1 -1
  13. package/public/LayoutStage.js +1 -1
  14. package/public/Morph.js +1 -1
  15. package/public/NavBar.d.ts +5 -0
  16. package/public/NavBar.js +14 -5
  17. package/public/NavBar.js.map +1 -1
  18. package/public/Pane.js +1 -1
  19. package/public/Stage.js +1 -1
  20. package/public/TitleContainer.d.ts +9 -0
  21. package/public/TitleContainer.js +9 -25
  22. package/public/TitleContainer.js.map +1 -1
  23. package/public/defaultProps.d.ts +25 -0
  24. package/public/defaultProps.js +55 -2
  25. package/public/defaultProps.js.map +1 -1
  26. package/nav-bar-BH9dfpsV.js +0 -5
  27. package/nav-bar-BH9dfpsV.js.map +0 -1
package/index.css CHANGED
@@ -9,94 +9,90 @@
9
9
  --magritte-color-text-primary-v24-7-1:#ffffff;
10
10
  --magritte-color-text-secondary-v24-7-1:#ABABAB;
11
11
  }
12
- .magritte-actions-container___CBgYW_1-3-30{
12
+ .magritte-actions-container___CBgYW_1-5-0{
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-3-30{
18
+ .magritte-actions-no-children___rgJUl_1-5-0{
19
19
  justify-content:space-between;
20
20
  }
21
- .magritte-actions-left-slot___DNOj0_1-3-30,
22
- .magritte-actions-right-slot___aodtj_1-3-30{
21
+ .magritte-actions-left-slot___DNOj0_1-5-0,
22
+ .magritte-actions-right-slot___aodtj_1-5-0{
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-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
30
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
31
- .magritte-navbar-not-transparent___5KZNp_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
32
- .magritte-navbar-not-transparent___5KZNp_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child{
29
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-start-stage___MJ67a_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child,
30
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-end-stage___qHtTV_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child,
31
+ .magritte-navbar-not-transparent___5KZNp_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child{
33
32
  margin-left:var(--magritte-ui-icon-margin-not-transparent);
34
33
  }
35
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
36
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
37
- .magritte-navbar-not-transparent___5KZNp_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
38
- .magritte-navbar-not-transparent___5KZNp_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child{
34
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-start-stage___MJ67a_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child,
35
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-end-stage___qHtTV_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child,
36
+ .magritte-navbar-not-transparent___5KZNp_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child{
39
37
  margin-right:var(--magritte-ui-icon-margin-not-transparent);
40
38
  }
41
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
42
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
43
- .magritte-navbar-transparent___ULEh8_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
44
- .magritte-navbar-transparent___ULEh8_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child{
39
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-end-stage___qHtTV_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child,
40
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-start-stage___MJ67a_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child,
41
+ .magritte-navbar-transparent___ULEh8_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child{
45
42
  margin-left:var(--magritte-ui-icon-margin-transparent);
46
43
  }
47
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
48
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
49
- .magritte-navbar-transparent___ULEh8_1-3-30 .magritte-actions-start-stage___MJ67a_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
50
- .magritte-navbar-transparent___ULEh8_1-3-30 .magritte-actions-end-stage___qHtTV_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child{
44
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-end-stage___qHtTV_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child,
45
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-start-stage___MJ67a_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child,
46
+ .magritte-navbar-transparent___ULEh8_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child{
51
47
  margin-right:var(--magritte-ui-icon-margin-transparent);
52
48
  }
53
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
54
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content-clone___jDxVm_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child{
49
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child,
50
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content-clone___jDxVm_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child{
55
51
  margin-left:calc(var(--magritte-ui-icon-margin-transparent) + (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
56
52
  }
57
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
58
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content-clone___jDxVm_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child{
53
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child,
54
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content-clone___jDxVm_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child{
59
55
  margin-right:calc(var(--magritte-ui-icon-margin-transparent) + (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
60
56
  }
61
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child,
62
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content-clone___jDxVm_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:first-child{
57
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child,
58
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content-clone___jDxVm_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:first-child{
63
59
  margin-left:calc(var(--magritte-ui-icon-margin-not-transparent) - (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
64
60
  }
65
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-right-slot___aodtj_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child,
66
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-actions-only-stage___cg10A_1-3-30 .magritte-actions-left-slot___DNOj0_1-3-30 .magritte-actions-side-slot-content-clone___jDxVm_1-3-30 > .magritte-actions-icon-morph___-nNgW_1-3-30:last-child{
61
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-right-slot___aodtj_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child,
62
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-actions-only-stage___cg10A_1-5-0 .magritte-actions-left-slot___DNOj0_1-5-0 .magritte-actions-side-slot-content-clone___jDxVm_1-5-0 > .magritte-actions-icon-morph___-nNgW_1-5-0:last-child{
67
63
  margin-right:calc(var(--magritte-ui-icon-margin-not-transparent) - (var(--magritte-ui-icon-margin-delta) * var(--magritte-ui-navbar-animation-progress)));
68
64
  }
69
- .magritte-actions-center-slot___hLAy6_1-3-30{
65
+ .magritte-actions-center-slot___hLAy6_1-5-0{
70
66
  display:flex;
71
67
  flex:1 1 auto;
72
68
  min-width:0;
73
69
  }
74
- .magritte-actions-center-slot___hLAy6_1-3-30.magritte-actions-center-slot-centered___merXQ_1-3-30{
70
+ .magritte-actions-center-slot___hLAy6_1-5-0.magritte-actions-center-slot-centered___merXQ_1-5-0{
75
71
  justify-content:center;
76
72
  }
77
- .magritte-actions-side-slot-content___TlHrX_1-3-30,
78
- .magritte-actions-side-slot-content-clone___jDxVm_1-3-30{
73
+ .magritte-actions-side-slot-content___TlHrX_1-5-0,
74
+ .magritte-actions-side-slot-content-clone___jDxVm_1-5-0{
79
75
  grid-area:1 / 1;
80
76
  display:flex;
81
77
  align-items:center;
82
78
  gap:4px;
83
79
  }
84
- .magritte-align-top___-QSFW_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30,
85
- .magritte-align-top___-QSFW_1-3-30 .magritte-actions-side-slot-content-clone___jDxVm_1-3-30{
80
+ .magritte-align-top___-QSFW_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0,
81
+ .magritte-align-top___-QSFW_1-5-0 .magritte-actions-side-slot-content-clone___jDxVm_1-5-0{
86
82
  align-items:start;
87
83
  }
88
- .magritte-align-bottom___FliHI_1-3-30 .magritte-actions-side-slot-content___TlHrX_1-3-30,
89
- .magritte-align-bottom___FliHI_1-3-30 .magritte-actions-side-slot-content-clone___jDxVm_1-3-30{
84
+ .magritte-align-bottom___FliHI_1-5-0 .magritte-actions-side-slot-content___TlHrX_1-5-0,
85
+ .magritte-align-bottom___FliHI_1-5-0 .magritte-actions-side-slot-content-clone___jDxVm_1-5-0{
90
86
  align-items:end;
91
87
  }
92
- .magritte-actions-side-slot-content-clone___jDxVm_1-3-30{
88
+ .magritte-actions-side-slot-content-clone___jDxVm_1-5-0{
93
89
  visibility:hidden;
94
90
  z-index:0;
95
91
  pointer-events:none;
96
92
  user-select:none;
97
93
  contain:style layout;
98
94
  }
99
- .magritte-title-container-wrapper___DQUcj_1-3-30{
95
+ .magritte-title-container-wrapper___DQUcj_1-5-0{
100
96
  display:flex;
101
97
  flex-direction:row;
102
98
  align-items:center;
@@ -104,29 +100,29 @@
104
100
  min-width:0;
105
101
  gap:12px;
106
102
  }
107
- .magritte-title-main-part___npoHN_1-3-30{
103
+ .magritte-title-main-part___npoHN_1-5-0{
108
104
  display:flex;
109
105
  flex-direction:column;
110
106
  flex:0 1 auto;
111
107
  min-width:0;
112
108
  }
113
- .magritte-title-left-slot___HTE7h_1-3-30{
109
+ .magritte-title-left-slot___HTE7h_1-5-0{
114
110
  display:flex;
115
111
  align-items:center;
116
112
  flex:0 0 auto;
117
113
  }
118
- .magritte-title-container___y9AIx_1-3-30{
114
+ .magritte-title-container___y9AIx_1-5-0{
119
115
  display:flex;
120
116
  flex-direction:row;
121
117
  align-items:center;
122
118
  gap:5px;
123
119
  min-height:var(--magritte-ui-navbar-title-container-min-height-small-override, 0);
124
120
  }
125
- .magritte-subtitle-container___nVUBu_1-3-30{
121
+ .magritte-subtitle-container___nVUBu_1-5-0{
126
122
  display:flex;
127
123
  }
128
- .magritte-subtitle-container___nVUBu_1-3-30 .magritte-text-morph-item___-vXru_1-3-30{
129
- color:var(--magritte-color-text-secondary-v24-7-1);
124
+ .magritte-subtitle-container___nVUBu_1-5-0 .magritte-text-morph-item___-vXru_1-5-0{
125
+ color:var(--magritte-ui-nav-bar-subtitle-color-override, var(--magritte-color-text-secondary-v24-7-1));
130
126
  font-family:"hh sans";
131
127
  font-weight:400;
132
128
  line-height:18px;
@@ -136,21 +132,21 @@
136
132
  text-transform:none;
137
133
  text-decoration:none;
138
134
  }
139
- .magritte-centered___Y2mlP_1-3-30 .magritte-subtitle-container___nVUBu_1-3-30,
140
- .magritte-centered___Y2mlP_1-3-30 .magritte-title-container___y9AIx_1-3-30{
135
+ .magritte-centered___Y2mlP_1-5-0 .magritte-subtitle-container___nVUBu_1-5-0,
136
+ .magritte-centered___Y2mlP_1-5-0 .magritte-title-container___y9AIx_1-5-0{
141
137
  justify-content:center;
142
138
  }
143
- .magritte-title-morph-item___t7Wf3_1-3-30{
139
+ .magritte-title-morph-item___t7Wf3_1-5-0{
144
140
  display:flex;
145
141
  min-width:0;
146
142
  }
147
- .magritte-title___ZbLgP_1-3-30{
143
+ .magritte-title___ZbLgP_1-5-0{
148
144
  display:flex;
149
145
  flex:0 1 auto;
150
146
  min-width:0;
151
147
  }
152
- .magritte-title___ZbLgP_1-3-30 .magritte-text-morph-item___-vXru_1-3-30{
153
- color:var(--magritte-color-text-primary-v24-7-1);
148
+ .magritte-title___ZbLgP_1-5-0 .magritte-text-morph-item___-vXru_1-5-0{
149
+ color:var(--magritte-ui-nav-bar-title-color-override, var(--magritte-color-text-primary-v24-7-1));
154
150
  font-family:"hh sans";
155
151
  font-weight:500;
156
152
  line-height:22px;
@@ -160,13 +156,13 @@
160
156
  text-transform:none;
161
157
  text-decoration:none;
162
158
  }
163
- .magritte-size-large___ISXfH_1-3-30 .magritte-title-main-part___npoHN_1-3-30{
159
+ .magritte-size-large___ISXfH_1-5-0 .magritte-title-main-part___npoHN_1-5-0{
164
160
  gap:4px;
165
161
  }
166
- .magritte-size-large___ISXfH_1-3-30 .magritte-title-container___y9AIx_1-3-30{
162
+ .magritte-size-large___ISXfH_1-5-0 .magritte-title-container___y9AIx_1-5-0{
167
163
  min-height:var(--magritte-ui-navbar-title-container-min-height-large-override, 0);
168
164
  }
169
- .magritte-size-large___ISXfH_1-3-30 .magritte-title___ZbLgP_1-3-30 .magritte-text-morph-item___-vXru_1-3-30{
165
+ .magritte-size-large___ISXfH_1-5-0 .magritte-title___ZbLgP_1-5-0 .magritte-text-morph-item___-vXru_1-5-0{
170
166
  font-family:"hh sans";
171
167
  font-weight:500;
172
168
  line-height:32px;
@@ -176,7 +172,7 @@
176
172
  text-transform:none;
177
173
  text-decoration:none;
178
174
  }
179
- .magritte-size-large___ISXfH_1-3-30 .magritte-subtitle-container___nVUBu_1-3-30 .magritte-text-morph-item___-vXru_1-3-30{
175
+ .magritte-size-large___ISXfH_1-5-0 .magritte-subtitle-container___nVUBu_1-5-0 .magritte-text-morph-item___-vXru_1-5-0{
180
176
  font-family:"hh sans";
181
177
  font-weight:400;
182
178
  line-height:22px;
@@ -186,12 +182,12 @@
186
182
  text-transform:none;
187
183
  text-decoration:none;
188
184
  }
189
- .magritte-pane-content___UVmC6_1-3-30{
185
+ .magritte-pane-content___UVmC6_1-5-0{
190
186
  position:relative;
191
187
  pointer-events:none;
192
188
  z-index:2;
193
189
  }
194
- .magritte-pane-background___PDZAX_1-3-30{
190
+ .magritte-pane-background___PDZAX_1-5-0{
195
191
  position:absolute;
196
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-1)));
197
193
  opacity:0;
@@ -199,43 +195,43 @@
199
195
  z-index:-1;
200
196
  transform-origin:0 0;
201
197
  }
202
- .magritte-navbar-transparent-start___wysv0_1-3-30 .magritte-pane-background___PDZAX_1-3-30{
198
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-pane-background___PDZAX_1-5-0{
203
199
  opacity:calc(var(--magritte-ui-navbar-animation-progress) * 0.95);
204
200
  }
205
- .magritte-navbar-transparent-end___6KqLR_1-3-30 .magritte-pane-background___PDZAX_1-3-30{
201
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-pane-background___PDZAX_1-5-0{
206
202
  opacity:calc((1 - var(--magritte-ui-navbar-animation-progress)) * 0.95);
207
203
  }
208
- .magritte-navbar-not-transparent___5KZNp_1-3-30 .magritte-pane-background___PDZAX_1-3-30{
204
+ .magritte-navbar-not-transparent___5KZNp_1-5-0 .magritte-pane-background___PDZAX_1-5-0{
209
205
  opacity:0.95;
210
206
  }
211
- .magritte-morph-item___8kF46_1-3-30{
207
+ .magritte-morph-item___8kF46_1-5-0{
212
208
  line-height:0;
213
209
  transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
214
210
  }
215
- .magritte-morph-item-top___WPEkn_1-3-30{
211
+ .magritte-morph-item-top___WPEkn_1-5-0{
216
212
  --magritte-ui-morph-item-transform-origin-y:top;
217
213
  }
218
- .magritte-morph-item-bottom___zNbsF_1-3-30{
214
+ .magritte-morph-item-bottom___zNbsF_1-5-0{
219
215
  --magritte-ui-morph-item-transform-origin-y:bottom;
220
216
  }
221
- .magritte-morph-item-left___T6AMW_1-3-30{
217
+ .magritte-morph-item-left___T6AMW_1-5-0{
222
218
  --magritte-ui-morph-item-transform-origin-x:left;
223
219
  }
224
- .magritte-morph-item-right___EuT1E_1-3-30{
220
+ .magritte-morph-item-right___EuT1E_1-5-0{
225
221
  --magritte-ui-morph-item-transform-origin-x:right;
226
222
  }
227
- .magritte-pane___f8eFC_1-3-30{
223
+ .magritte-pane___f8eFC_1-5-0{
228
224
  position:relative;
229
225
  overflow:hidden;
230
226
  pointer-events:none;
231
227
  }
232
- .magritte-start-state-container___giBVb_1-3-30{
228
+ .magritte-start-state-container___giBVb_1-5-0{
233
229
  position:relative;
234
230
  z-index:1;
235
231
  box-sizing:border-box;
236
232
  pointer-events:auto;
237
233
  }
238
- .magritte-end-state-container___uiW8Q_1-3-30{
234
+ .magritte-end-state-container___uiW8Q_1-5-0{
239
235
  position:absolute;
240
236
  z-index:0;
241
237
  top:0;
@@ -244,66 +240,66 @@
244
240
  pointer-events:none;
245
241
  opacity:0;
246
242
  }
247
- .magritte-content-container___7s7vv_1-3-30{
243
+ .magritte-content-container___7s7vv_1-5-0{
248
244
  box-sizing:border-box;
249
245
  }
250
- .magritte-next-pane___H2oxQ_1-3-30{
246
+ .magritte-next-pane___H2oxQ_1-5-0{
251
247
  position:relative;
252
248
  }
253
- .magritte-nav-bar___RRGe0_1-3-30{
249
+ .magritte-nav-bar___RRGe0_1-5-0{
254
250
  top:0;
255
251
  position:sticky;
256
252
  pointer-events:none;
257
253
  overflow-anchor:none;
258
254
  z-index:10;
259
255
  }
260
- .magritte-nav-bar-overlay___Mq5ZD_1-3-30 .magritte-nav-bar-overlay-wrapper___y1VpY_1-3-30{
256
+ .magritte-nav-bar-overlay___Mq5ZD_1-5-0 .magritte-nav-bar-overlay-wrapper___y1VpY_1-5-0{
261
257
  position:absolute;
262
258
  inset:0;
263
259
  }
264
- .magritte-nav-bar-content-container___H-WMO_1-3-30{
260
+ .magritte-nav-bar-content-container___H-WMO_1-5-0{
265
261
  display:grid;
266
262
  position:relative;
267
263
  }
268
- .magritte-nav-bar-panes-container___5ZDLa_1-3-30{
264
+ .magritte-nav-bar-panes-container___5ZDLa_1-5-0{
269
265
  position:relative;
270
266
  z-index:1;
271
267
  grid-area:1 / 1;
272
268
  min-width:0;
273
269
  }
274
- .magritte-nav-bar-progressive-blur___qyeUV_1-3-30{
270
+ .magritte-nav-bar-progressive-blur___qyeUV_1-5-0{
275
271
  position:relative;
276
272
  z-index:0;
277
273
  transform-origin:0 0;
278
274
  grid-area:1 / 1;
279
275
  min-width:0;
280
276
  }
281
- .magritte-nav-bar-content-container___H-WMO_1-3-30 .magritte-nav-bar-stage___amDz7_1-3-30,
282
- .magritte-nav-bar-content-container___H-WMO_1-3-30 .nav-bar-layout-animation-stage-start,
283
- .magritte-nav-bar-content-container___H-WMO_1-3-30 .nav-bar-layout-animation-stage-end{
277
+ .magritte-nav-bar-content-container___H-WMO_1-5-0 .magritte-nav-bar-stage___amDz7_1-5-0,
278
+ .magritte-nav-bar-content-container___H-WMO_1-5-0 .nav-bar-layout-animation-stage-start,
279
+ .magritte-nav-bar-content-container___H-WMO_1-5-0 .nav-bar-layout-animation-stage-end{
284
280
  padding-top:calc(8px + var(--magritte-ui-nav-bar-padding-top-override, 0px));
285
281
  }
286
- .magritte-nav-bar-content-container___H-WMO_1-3-30 .magritte-next-pane___H2oxQ_1-3-30 .magritte-nav-bar-stage___amDz7_1-3-30,
287
- .magritte-nav-bar-content-container___H-WMO_1-3-30 .magritte-next-pane___H2oxQ_1-3-30 .nav-bar-layout-animation-stage-start,
288
- .magritte-nav-bar-content-container___H-WMO_1-3-30 .magritte-next-pane___H2oxQ_1-3-30 .nav-bar-layout-animation-stage-end{
282
+ .magritte-nav-bar-content-container___H-WMO_1-5-0 .magritte-next-pane___H2oxQ_1-5-0 .magritte-nav-bar-stage___amDz7_1-5-0,
283
+ .magritte-nav-bar-content-container___H-WMO_1-5-0 .magritte-next-pane___H2oxQ_1-5-0 .nav-bar-layout-animation-stage-start,
284
+ .magritte-nav-bar-content-container___H-WMO_1-5-0 .magritte-next-pane___H2oxQ_1-5-0 .nav-bar-layout-animation-stage-end{
289
285
  padding-top:8px;
290
286
  }
291
- .magritte-last-pane___Hf2No_1-3-30 .magritte-nav-bar-stage___amDz7_1-3-30,
292
- .magritte-last-pane___Hf2No_1-3-30 .nav-bar-layout-animation-stage-start,
293
- .magritte-last-pane___Hf2No_1-3-30 .nav-bar-layout-animation-stage-end{
287
+ .magritte-last-pane___Hf2No_1-5-0 .magritte-nav-bar-stage___amDz7_1-5-0,
288
+ .magritte-last-pane___Hf2No_1-5-0 .nav-bar-layout-animation-stage-start,
289
+ .magritte-last-pane___Hf2No_1-5-0 .nav-bar-layout-animation-stage-end{
294
290
  padding-bottom:var(--magritte-ui-nav-bar-stage-padding-bottom-override, 8px);
295
291
  }
296
- .magritte-next-pane___H2oxQ_1-3-30 .magritte-last-pane___Hf2No_1-3-30 .magritte-nav-bar-stage___amDz7_1-3-30,
297
- .magritte-next-pane___H2oxQ_1-3-30 .magritte-last-pane___Hf2No_1-3-30 .nav-bar-layout-animation-stage-start,
298
- .magritte-next-pane___H2oxQ_1-3-30 .magritte-last-pane___Hf2No_1-3-30 .nav-bar-layout-animation-stage-end{
292
+ .magritte-next-pane___H2oxQ_1-5-0 .magritte-last-pane___Hf2No_1-5-0 .magritte-nav-bar-stage___amDz7_1-5-0,
293
+ .magritte-next-pane___H2oxQ_1-5-0 .magritte-last-pane___Hf2No_1-5-0 .nav-bar-layout-animation-stage-start,
294
+ .magritte-next-pane___H2oxQ_1-5-0 .magritte-last-pane___Hf2No_1-5-0 .nav-bar-layout-animation-stage-end{
299
295
  padding-bottom:var(--magritte-ui-nav-bar-stage-padding-bottom-override, 16px);
300
296
  }
301
- .magritte-nav-bar-stage___amDz7_1-3-30{
297
+ .magritte-nav-bar-stage___amDz7_1-5-0{
302
298
  padding:8px var(--magritte-ui-nav-bar-stage-horizontal-padding-override, 16px);
303
299
  }
304
- .magritte-metrics-mode___h38aX_1-3-30 .magritte-morph-item___8kF46_1-3-30,
305
- .magritte-metrics-mode___h38aX_1-3-30 .magritte-pane___f8eFC_1-3-30,
306
- .magritte-metrics-mode___h38aX_1-3-30 .magritte-next-pane___H2oxQ_1-3-30{
300
+ .magritte-metrics-mode___h38aX_1-5-0 .magritte-morph-item___8kF46_1-5-0,
301
+ .magritte-metrics-mode___h38aX_1-5-0 .magritte-pane___f8eFC_1-5-0,
302
+ .magritte-metrics-mode___h38aX_1-5-0 .magritte-next-pane___H2oxQ_1-5-0{
307
303
  transform:none !important;
308
304
  }
309
305
  .nav-bar-layout-animation-stage-end,
@@ -314,43 +310,49 @@
314
310
  height:auto !important;
315
311
  transform:none !important;
316
312
  }
317
- .nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-3-30,
318
- .nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-30{
313
+ .nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-5-0,
314
+ .nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-5-0{
319
315
  position:static !important;
320
316
  width:auto !important;
321
317
  height:auto !important;
322
318
  transform:none !important;
323
319
  }
324
- .magritte-layout-morph___I3SPy_1-3-30{
320
+ .magritte-layout-morph___I3SPy_1-5-0{
325
321
  display:block;
326
322
  position:absolute;
327
323
  transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
328
324
  z-index:3;
329
325
  }
330
- .magritte-animation-stage-progress___5FthT_1-3-30 .magritte-layout-morph___I3SPy_1-3-30 > *{
326
+ .magritte-animation-stage-progress___5FthT_1-5-0 .magritte-layout-morph___I3SPy_1-5-0 > *{
331
327
  margin:0 !important;
332
328
  }
333
- .magritte-layout-morph-start___9-krP_1-3-30{
329
+ .magritte-layout-morph-start___9-krP_1-5-0{
334
330
  z-index:2;
335
331
  }
336
- .magritte-layout-morph-end___LIg4d_1-3-30{
332
+ .magritte-layout-morph-end___LIg4d_1-5-0{
337
333
  z-index:1;
338
334
  }
339
- .nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-3-30{
335
+ .nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-5-0{
340
336
  display:contents;
341
337
  }
342
- .nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-3-30{
338
+ .nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-5-0{
343
339
  display:none;
344
340
  }
345
- .nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-3-30{
341
+ .nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-5-0{
346
342
  display:contents;
347
343
  }
348
- .nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-3-30{
344
+ .nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-5-0{
349
345
  display:none;
350
346
  }
351
- .magritte-divider-container___-NdWi_1-3-30{
347
+ .magritte-divider-container___-NdWi_1-5-0{
352
348
  position:absolute;
353
349
  width:100%;
354
350
  bottom:0;
355
351
  z-index:1;
356
352
  }
353
+ .magritte-navbar-transparent-start___wysv0_1-5-0 .magritte-divider-container___-NdWi_1-5-0 .magritte-divider___UhH0j_1-5-0{
354
+ opacity:var(--magritte-ui-navbar-animation-progress);
355
+ }
356
+ .magritte-navbar-transparent-end___6KqLR_1-5-0 .magritte-divider-container___-NdWi_1-5-0 .magritte-divider___UhH0j_1-5-0{
357
+ opacity:calc(1 - var(--magritte-ui-navbar-animation-progress));
358
+ }
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-BH9dfpsV.js';
18
+ import './nav-bar-CAD7XfUf.js';
19
19
  import './internal/MetricsProvider.js';
20
20
  import './internal/utils.js';
21
21
  import 'motion';
package/internal/useBindScrollToAnimationProgress.d.ts CHANGED
@@ -7,4 +7,4 @@ import { type TriggerEdge } from '@hh.ru/magritte-ui-nav-bar/public/TriggerConte
7
7
  export declare const useBindScrollToAnimationProgress: (scrollPosition: MotionValue<number>, getNavBarMetrics: () => NavBarMetrics, getAnimationRanges: () => AnimationRanges, scrollAdapter: ScrollAdapter, startTriggerPosition: "start" | "full-area" | RefObject<HTMLElement | null>, endTriggerPosition: RefObject<HTMLElement | null> | number | undefined, startTriggerEdge?: TriggerEdge, endTriggerEdge?: TriggerEdge) => [VoidFunction, () => {
8
8
  top: number;
9
9
  bottom: number;
10
- }, MotionValue<number>, MotionStyle];
10
+ }, MotionValue<number>, MotionStyle, VoidFunction];
package/internal/useBindScrollToAnimationProgress.js CHANGED
@@ -5,14 +5,20 @@ import { useActualRef, useInitOnce, getRelativeOffset, remap, clamp } from './ut
5
5
  import 'motion';
6
6
 
7
7
  const createScrollToAnimationProgressMapFn = (getNavBarMetrics, scrollAdapter, animationRanges, startTriggerPosition, endTriggerPosition, startTriggerEdge, endTriggerEdge) => {
8
- const maxScrollTop = scrollAdapter.getMaxScrollTop();
9
8
  const { heightDelta, top, bottom, animationHeight } = getNavBarMetrics();
10
9
  if (startTriggerPosition === 'full-area') {
11
10
  let currentStart = top;
12
- const maxProgress = maxScrollTop >= animationHeight + top
13
- ? 1
14
- : (animationRanges.find((range) => range[0] * animationHeight <= maxScrollTop - top) ?? [0])[0];
15
- const mapScrollToAnimationPropgress = (scrollPosition) => {
11
+ // Зависит от maxScrollTop — поэтому считается в recompute и может быть обновлено без полной пересборки.
12
+ let maxProgress = 1;
13
+ const recompute = () => {
14
+ const maxScrollTop = scrollAdapter.getMaxScrollTop();
15
+ maxProgress =
16
+ maxScrollTop >= animationHeight + top
17
+ ? 1
18
+ : (animationRanges.find((range) => range[0] * animationHeight <= maxScrollTop - top) ?? [0])[0];
19
+ };
20
+ recompute();
21
+ const map = (scrollPosition) => {
16
22
  const progress = (scrollPosition - currentStart) / animationHeight;
17
23
  if (progress > maxProgress) {
18
24
  currentStart = scrollPosition - animationHeight * maxProgress;
@@ -27,29 +33,46 @@ const createScrollToAnimationProgressMapFn = (getNavBarMetrics, scrollAdapter, a
27
33
  bottom: currentStart,
28
34
  top: currentStart + animationHeight * maxProgress,
29
35
  });
30
- return [mapScrollToAnimationPropgress, getClosestStops];
36
+ return { map, getClosestStops, recompute };
31
37
  }
32
38
  let startPos = startTriggerPosition === 'start' || !startTriggerPosition.current
33
39
  ? 0
34
40
  : getRelativeOffset(scrollAdapter, startTriggerPosition.current, startTriggerEdge) - bottom;
35
- let endPos;
41
+ let fullEndPos;
36
42
  if (typeof endTriggerPosition === 'number') {
37
- endPos = startPos + endTriggerPosition;
43
+ fullEndPos = startPos + endTriggerPosition;
38
44
  }
39
45
  else {
40
- endPos = endTriggerPosition?.current
46
+ fullEndPos = endTriggerPosition?.current
41
47
  ? getRelativeOffset(scrollAdapter, endTriggerPosition.current, endTriggerEdge) + heightDelta - bottom
42
48
  : startPos + animationHeight;
43
49
  }
44
- endPos += top;
50
+ fullEndPos += top;
45
51
  startPos += top;
46
- let endProgress = 1;
47
- if (endPos > maxScrollTop) {
48
- const scrollDelta = endPos - startPos;
49
- endProgress = (animationRanges.find((range) => range[0] * scrollDelta + startPos < maxScrollTop) ?? [0])[0];
50
- endPos = startPos + scrollDelta * endProgress;
51
- }
52
- return [remap([startPos, endPos], [0, endProgress]), () => ({ bottom: startPos, top: endPos })];
52
+ const scrollDelta = fullEndPos - startPos;
53
+ // Конец анимации ограничиваем доступным скроллом: если контента не хватает доиграть анимацию целиком,
54
+ // останавливаемся на ближайшем достижимом стопе. Зависит только от maxScrollTop, поэтому пересобирается
55
+ // в recompute отдельно от дорогих измерений — как только появляется скролл, клампинг подхватит новое
56
+ // значение без полной пересборки привязки.
57
+ let clampedMap = remap([startPos, fullEndPos], [0, 1]);
58
+ let clampedEndPos = fullEndPos;
59
+ const recompute = () => {
60
+ const maxScrollTop = scrollAdapter.getMaxScrollTop();
61
+ let endProgress = 1;
62
+ let endPos = fullEndPos;
63
+ if (scrollDelta !== 0 && fullEndPos > maxScrollTop) {
64
+ endProgress = (animationRanges.find((range) => range[0] * scrollDelta + startPos < maxScrollTop) ?? [0])[0];
65
+ endPos = startPos + scrollDelta * endProgress;
66
+ }
67
+ clampedEndPos = endPos;
68
+ clampedMap = remap([startPos, endPos], [0, endProgress]);
69
+ };
70
+ recompute();
71
+ return {
72
+ map: (scrollPosition) => clampedMap(scrollPosition),
73
+ getClosestStops: () => ({ bottom: startPos, top: clampedEndPos }),
74
+ recompute,
75
+ };
53
76
  };
54
77
  const isDividerVisible = (scrollTop, navBarTop, heightDelta, animationProgress) => Math.ceil(navBarTop + heightDelta * animationProgress) < Math.floor(scrollTop);
55
78
  const useBindScrollToAnimationProgress = (scrollPosition, getNavBarMetrics, getAnimationRanges, scrollAdapter, startTriggerPosition, endTriggerPosition,
@@ -63,6 +86,9 @@ startTriggerEdge = 'top', endTriggerEdge = 'bottom') => {
63
86
  const startTriggerEdgeRef = useActualRef(startTriggerEdge);
64
87
  const endTriggerEdgeRef = useActualRef(endTriggerEdge);
65
88
  const getClosestStopsRef = useRef(null);
89
+ const controllerRef = useRef(null);
90
+ // Применяет текущий маппинг к позиции скролла: ставит прогресс анимации и обновляет дивайдер.
91
+ const applyRef = useRef(null);
66
92
  const bindScrollToAnimation = useInitOnce(() => {
67
93
  let unsubscribe = null;
68
94
  return () => {
@@ -74,20 +100,27 @@ startTriggerEdge = 'top', endTriggerEdge = 'bottom') => {
74
100
  range[1] / animationHeight,
75
101
  ])),
76
102
  ].sort((a, b) => b[0] - a[0]);
77
- const [mapFn, getClosestStops] = createScrollToAnimationProgressMapFn(getNavBarMetrics, scrollAdapter, animationRanges, startTriggerPositionRef.current, endTriggerPositionRef.current, startTriggerEdgeRef.current, endTriggerEdgeRef.current);
78
- getClosestStopsRef.current = getClosestStops;
79
- const updateDivider = (scrollPosition, totalAnimationProgress) => {
80
- dividerVisibility.set(isDividerVisible(scrollPosition, top, heightDelta, totalAnimationProgress) ? 'visible' : 'hidden');
81
- dividerOffsetY.set(-heightDelta * totalAnimationProgress);
103
+ const controller = createScrollToAnimationProgressMapFn(getNavBarMetrics, scrollAdapter, animationRanges, startTriggerPositionRef.current, endTriggerPositionRef.current, startTriggerEdgeRef.current, endTriggerEdgeRef.current);
104
+ controllerRef.current = controller;
105
+ getClosestStopsRef.current = controller.getClosestStops;
106
+ const apply = (scrollTop) => {
107
+ const progress = controller.map(scrollTop);
108
+ totalAnimationProgress.set(progress);
109
+ dividerVisibility.set(isDividerVisible(scrollTop, top, heightDelta, progress) ? 'visible' : 'hidden');
110
+ dividerOffsetY.set(-heightDelta * progress);
82
111
  };
83
- unsubscribe = scrollPosition.on('change', (value) => {
84
- totalAnimationProgress.set(mapFn(value));
85
- updateDivider(value, totalAnimationProgress.get());
86
- });
87
- totalAnimationProgress.set(mapFn(scrollPosition.get()));
88
- updateDivider(scrollPosition.get(), totalAnimationProgress.get());
112
+ applyRef.current = apply;
113
+ unsubscribe = scrollPosition.on('change', apply);
114
+ apply(scrollPosition.get());
89
115
  };
90
116
  });
117
+ // Дешёвый пересчёт клампинга конца анимации (зависит от maxScrollTop) без полного bindScrollToAnimation:
118
+ // не пере-измеряет метрики/триггеры и не переподписывается на скролл. Используется как обработчик ресайза
119
+ // для «самодостаточных» навбаров, где полная пересборка привязки на ресайз не требуется.
120
+ const recomputeClamp = useInitOnce(() => () => {
121
+ controllerRef.current?.recompute();
122
+ applyRef.current?.(scrollPosition.get());
123
+ });
91
124
  const getClosestStops = useInitOnce(() => () => {
92
125
  if (getClosestStopsRef.current) {
93
126
  return getClosestStopsRef.current();
@@ -99,6 +132,7 @@ startTriggerEdge = 'top', endTriggerEdge = 'bottom') => {
99
132
  getClosestStops,
100
133
  totalAnimationProgress,
101
134
  { visibility: dividerVisibility, y: dividerOffsetY },
135
+ recomputeClamp,
102
136
  ];
103
137
  };
104
138