@hh.ru/magritte-ui-nav-bar 1.0.3 → 1.1.0

package/{NavBar-C_bLkCSc.js → NavBar-D9oyKBms.js}

@@ -15,7 +15,7 @@ import { useSnapScroll } from './internal/useSnapScroll.js';
 import { useSyncMotionValue } from './internal/useSyncMotionValue.js';
 import { useInitOnce, scheduleMicro, scheduleMacro, remap } from './internal/utils.js';
 
-var styles = {"actions-container":"magritte-actions-container___CBgYW_1-0-3","actionsContainer":"magritte-actions-container___CBgYW_1-0-3","actions-no-children":"magritte-actions-no-children___rgJUl_1-0-3","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-0-3","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-0-3","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-0-3","actions-right-slot":"magritte-actions-right-slot___aodtj_1-0-3","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-0-3","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-0-3","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-0-3","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-0-3","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-0-3","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-0-3","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-0-3","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-0-3","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-0-3","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-0-3","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-0-3","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-0-3","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-0-3","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-0-3","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-0-3","actions-only-stage":"magritte-actions-only-stage___cg10A_1-0-3","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-0-3","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-0-3","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-0-3","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-0-3","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-0-3","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-0-3","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-0-3","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-0-3","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-0-3","title-main-part":"magritte-title-main-part___npoHN_1-0-3","titleMainPart":"magritte-title-main-part___npoHN_1-0-3","centered":"magritte-centered___Y2mlP_1-0-3","title-left-slot":"magritte-title-left-slot___HTE7h_1-0-3","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-0-3","title-container":"magritte-title-container___y9AIx_1-0-3","titleContainer":"magritte-title-container___y9AIx_1-0-3","subtitle-container":"magritte-subtitle-container___nVUBu_1-0-3","subtitleContainer":"magritte-subtitle-container___nVUBu_1-0-3","title-morph-item":"magritte-title-morph-item___t7Wf3_1-0-3","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-0-3","title":"magritte-title___ZbLgP_1-0-3","pane-content":"magritte-pane-content___UVmC6_1-0-3","paneContent":"magritte-pane-content___UVmC6_1-0-3","pane-background":"magritte-pane-background___PDZAX_1-0-3","paneBackground":"magritte-pane-background___PDZAX_1-0-3","morph-item":"magritte-morph-item___8kF46_1-0-3","morphItem":"magritte-morph-item___8kF46_1-0-3","morph-item-top":"magritte-morph-item-top___WPEkn_1-0-3","morphItemTop":"magritte-morph-item-top___WPEkn_1-0-3","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-0-3","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-0-3","morph-item-left":"magritte-morph-item-left___T6AMW_1-0-3","morphItemLeft":"magritte-morph-item-left___T6AMW_1-0-3","morph-item-right":"magritte-morph-item-right___EuT1E_1-0-3","morphItemRight":"magritte-morph-item-right___EuT1E_1-0-3","pane":"magritte-pane___f8eFC_1-0-3","start-state-container":"magritte-start-state-container___giBVb_1-0-3","startStateContainer":"magritte-start-state-container___giBVb_1-0-3","end-state-container":"magritte-end-state-container___uiW8Q_1-0-3","endStateContainer":"magritte-end-state-container___uiW8Q_1-0-3","content-container":"magritte-content-container___7s7vv_1-0-3","contentContainer":"magritte-content-container___7s7vv_1-0-3","next-pane":"magritte-next-pane___H2oxQ_1-0-3","nextPane":"magritte-next-pane___H2oxQ_1-0-3","nav-bar":"magritte-nav-bar___RRGe0_1-0-3","navBar":"magritte-nav-bar___RRGe0_1-0-3","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-0-3","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-0-3","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-0-3","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-0-3","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-0-3","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-0-3","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-0-3","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-0-3","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-0-3","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-0-3","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-0-3","navBarStage":"magritte-nav-bar-stage___amDz7_1-0-3","metrics-mode":"magritte-metrics-mode___h38aX_1-0-3","metricsMode":"magritte-metrics-mode___h38aX_1-0-3","layout-morph":"magritte-layout-morph___I3SPy_1-0-3","layoutMorph":"magritte-layout-morph___I3SPy_1-0-3","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-0-3","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-0-3","layout-morph-start":"magritte-layout-morph-start___9-krP_1-0-3","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-0-3","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-0-3","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-0-3","divider-container":"magritte-divider-container___-NdWi_1-0-3","dividerContainer":"magritte-divider-container___-NdWi_1-0-3"};
+var styles = {"actions-container":"magritte-actions-container___CBgYW_1-1-0","actionsContainer":"magritte-actions-container___CBgYW_1-1-0","actions-no-children":"magritte-actions-no-children___rgJUl_1-1-0","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-1-0","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-1-0","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-1-0","actions-right-slot":"magritte-actions-right-slot___aodtj_1-1-0","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-1-0","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-1-0","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-1-0","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-1-0","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-1-0","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-1-0","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-1-0","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-1-0","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-1-0","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-1-0","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-1-0","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-1-0","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-1-0","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-1-0","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-1-0","actions-only-stage":"magritte-actions-only-stage___cg10A_1-1-0","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-1-0","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-1-0","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-1-0","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-1-0","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-1-0","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-1-0","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-1-0","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-1-0","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-1-0","title-main-part":"magritte-title-main-part___npoHN_1-1-0","titleMainPart":"magritte-title-main-part___npoHN_1-1-0","centered":"magritte-centered___Y2mlP_1-1-0","title-left-slot":"magritte-title-left-slot___HTE7h_1-1-0","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-1-0","title-container":"magritte-title-container___y9AIx_1-1-0","titleContainer":"magritte-title-container___y9AIx_1-1-0","subtitle-container":"magritte-subtitle-container___nVUBu_1-1-0","subtitleContainer":"magritte-subtitle-container___nVUBu_1-1-0","title-morph-item":"magritte-title-morph-item___t7Wf3_1-1-0","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-1-0","title":"magritte-title___ZbLgP_1-1-0","pane-content":"magritte-pane-content___UVmC6_1-1-0","paneContent":"magritte-pane-content___UVmC6_1-1-0","pane-background":"magritte-pane-background___PDZAX_1-1-0","paneBackground":"magritte-pane-background___PDZAX_1-1-0","morph-item":"magritte-morph-item___8kF46_1-1-0","morphItem":"magritte-morph-item___8kF46_1-1-0","morph-item-top":"magritte-morph-item-top___WPEkn_1-1-0","morphItemTop":"magritte-morph-item-top___WPEkn_1-1-0","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-1-0","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-1-0","morph-item-left":"magritte-morph-item-left___T6AMW_1-1-0","morphItemLeft":"magritte-morph-item-left___T6AMW_1-1-0","morph-item-right":"magritte-morph-item-right___EuT1E_1-1-0","morphItemRight":"magritte-morph-item-right___EuT1E_1-1-0","pane":"magritte-pane___f8eFC_1-1-0","start-state-container":"magritte-start-state-container___giBVb_1-1-0","startStateContainer":"magritte-start-state-container___giBVb_1-1-0","end-state-container":"magritte-end-state-container___uiW8Q_1-1-0","endStateContainer":"magritte-end-state-container___uiW8Q_1-1-0","content-container":"magritte-content-container___7s7vv_1-1-0","contentContainer":"magritte-content-container___7s7vv_1-1-0","next-pane":"magritte-next-pane___H2oxQ_1-1-0","nextPane":"magritte-next-pane___H2oxQ_1-1-0","nav-bar":"magritte-nav-bar___RRGe0_1-1-0","navBar":"magritte-nav-bar___RRGe0_1-1-0","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-1-0","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-1-0","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-1-0","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-1-0","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-1-0","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-1-0","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-1-0","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-1-0","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-1-0","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-1-0","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-1-0","navBarStage":"magritte-nav-bar-stage___amDz7_1-1-0","metrics-mode":"magritte-metrics-mode___h38aX_1-1-0","metricsMode":"magritte-metrics-mode___h38aX_1-1-0","layout-morph":"magritte-layout-morph___I3SPy_1-1-0","layoutMorph":"magritte-layout-morph___I3SPy_1-1-0","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-1-0","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-1-0","layout-morph-start":"magritte-layout-morph-start___9-krP_1-1-0","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-1-0","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-1-0","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-1-0","divider-container":"magritte-divider-container___-NdWi_1-1-0","dividerContainer":"magritte-divider-container___-NdWi_1-1-0"};
 
 const NavBarContext = createContext(null);
 const useNavBarContext = () => useContext(NavBarContext);
@@ -25,7 +25,7 @@ const NavBar = ({ children, transparent = false, startTriggerPosition = 'start',
     const rootRef = useRef(null);
     const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);
     const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);
-    const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry);
+    const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry, getMetrics);
     const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] = useBindScrollToAnimationProgress(scrollPosition, getMetrics, getAnimationRanges, scrollAdapter, startTriggerPosition, endTriggerPosition);
     const snapScroll = useSnapScroll(scrollPosition, totalAnimationProgress, scrollAdapter, getClosestStops, scrollSnapping);
     // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render
@@ -44,6 +44,7 @@ const NavBar = ({ children, transparent = false, startTriggerPosition = 'start',
             bindScrollToAnimationScheduled();
             const navBarMetrics = getMetrics();
             const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;
+            const animationHeight = navBarMetrics.heightDelta || fullPanesStartHeight;
             let scroll = scrollAdapter.getScrollTop();
             if (prevFullHeight.current !== null && scroll !== 0) {
                 const heightDelta = fullPanesStartHeight - prevFullHeight.current;
@@ -61,7 +62,7 @@ const NavBar = ({ children, transparent = false, startTriggerPosition = 'start',
                 }
                 const remapFn = remap(range[0] === 0 && range[1] === 0
                     ? [0, 1]
-                    : [range[0] / navBarMetrics.heightDelta, range[1] / navBarMetrics.heightDelta], [0, 1]);
+                    : [range[0] / animationHeight, range[1] / animationHeight], [0, 1]);
                 const motionValue = paneStore.get('motionValue');
                 motionValue.set(remapFn(totalAnimationProgress.get()));
                 subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));
@@ -113,4 +114,4 @@ const NavBar = ({ children, transparent = false, startTriggerPosition = 'start',
 };
 
 export { NavBar as N, styles as s, useNavBarContext as u };
-//# sourceMappingURL=NavBar-C_bLkCSc.js.map
+//# sourceMappingURL=NavBar-D9oyKBms.js.map

package/NavBar-D9oyKBms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar-D9oyKBms.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n    /**\n     * В качестве потомков могут передаваться только компоненты <Pane />\n     */\n    children: PaneElement | PaneElement[];\n    /**\n     * Управляет режимом прозрачности:\n     * -- Прозрачность отключена (`false`)\n     * -- Прозрачный всегда (`true`)\n     * -- Прозрачный в начале анимации (`start`)\n     * -- Прозрачный в конце анимации (`end`)\n     */\n    transparent?: 'start' | 'end' | boolean;\n    /**\n     * Управляет позицией триггера начала анимации\n     */\n    startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n    /**\n     * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n     * высоты навбара в процессе анимации и позиции триггера начала анмиации. Если передано число, то интерпретируется\n     * как отступ в пикселях от позиции триггера старта анимации.\n     */\n    endTriggerPosition?: RefObject<HTMLElement | null> | number;\n    /**\n     * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n     */\n    overlay?: boolean;\n    /**\n     * Управляет режимом автодоскролла. По умолчанию включен.\n     */\n    snapScroll?: boolean;\n    /**\n     * Управляет режимом отображения дивайдера:\n     * - `false` дивайдер отключен\n     * - `always` дивайдер отображается постоянно\n     * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n     */\n    showDivider?: ShowDivider;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n     */\n    animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n    children,\n    transparent = false,\n    startTriggerPosition = 'start',\n    endTriggerPosition,\n    overlay = false,\n    snapScroll: scrollSnapping = true,\n    showDivider = false,\n    animationProgress,\n}) => {\n    const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n    const prevFullHeight = useRef<null | number>(0);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n    const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n    const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry, getMetrics);\n    const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n        useBindScrollToAnimationProgress(\n            scrollPosition,\n            getMetrics,\n            getAnimationRanges,\n            scrollAdapter,\n            startTriggerPosition,\n            endTriggerPosition\n        );\n    const snapScroll = useSnapScroll(\n        scrollPosition,\n        totalAnimationProgress,\n        scrollAdapter,\n        getClosestStops,\n        scrollSnapping\n    );\n\n    // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n    const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n    useResetFocus(rootRef, totalAnimationProgress);\n    useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n    const dividerVisibility =\n        // eslint-disable-next-line no-nested-ternary\n        showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n    const registerPaneStore = useInitOnce(() => {\n        const subscriptions: VoidFunction[] = [];\n\n        const updateAnimationParams = () => {\n            subscriptions.length = 0;\n            invalidateMetrics();\n            invalidateAnimationRanges();\n            bindScrollToAnimationScheduled();\n            const navBarMetrics = getMetrics();\n            const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n            const animationHeight = navBarMetrics.heightDelta || fullPanesStartHeight;\n\n            let scroll = scrollAdapter.getScrollTop();\n            if (prevFullHeight.current !== null && scroll !== 0) {\n                const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n                scroll += heightDelta;\n\n                requestAnimationFrame(() => {\n                    scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n                    scrollPosition.jump(scrollAdapter.getScrollTop());\n                });\n            }\n\n            const animationRanges = getAnimationRanges();\n            [...paneStoreRegistry.values()].forEach((paneStore) => {\n                const range = animationRanges.get(paneStore.get('id'));\n                if (!range) {\n                    return;\n                }\n                const remapFn = remap(\n                    range[0] === 0 && range[1] === 0\n                        ? [0, 1]\n                        : [range[0] / animationHeight, range[1] / animationHeight],\n                    [0, 1]\n                );\n                const motionValue = paneStore.get('motionValue');\n                motionValue.set(remapFn(totalAnimationProgress.get()));\n                subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n            });\n\n            prevFullHeight.current = fullPanesStartHeight;\n        };\n\n        // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n        // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n        // количество вызовов при массовых изменениях\n        const onChange = scheduleMacro(updateAnimationParams);\n\n        return (paneStore: PaneStore) => {\n            const unsubscribe = paneStore.onChange(['startHeight', 'endHeight', 'top', 'foldable'], onChange);\n            paneStoreRegistry.add(paneStore);\n            return () => {\n                paneStoreRegistry.delete(paneStore);\n                unsubscribe();\n            };\n        };\n    });\n\n    useLayoutEffect(() => {\n        bindScrollToAnimation();\n        snapScroll();\n        if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n            return void 0;\n        }\n        return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n    }, [\n        startTriggerPosition,\n        endTriggerPosition,\n        bindScrollToAnimation,\n        bindScrollToAnimationScheduled,\n        snapScroll,\n        scrollAdapter,\n    ]);\n\n    // Вкладываем панели друг в друга через проп nextPane\n    const items = React.Children.toArray(children) as PaneElement[];\n\n    const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n        return React.cloneElement<InternalPaneProps>(child, {\n            ...child.props,\n            nextPane: acc,\n        }) as PaneElement;\n    }, null);\n\n    return (\n        <Layer layer=\"navigation-bar\">\n            <MetricsProvider\n                className={classNames(styles.navBar, {\n                    [styles.navbarTransparentStart]: transparent === 'start',\n                    [styles.navbarTransparentEnd]: transparent === 'end',\n                    [styles.navbarNotTransparent]: !transparent,\n                    [styles.navBarOverlay]: overlay,\n                })}\n                ref={rootRef}\n                measureClassName={styles.metricsMode}\n            >\n                <div className={styles.navBarOverlayWrapper}>\n                    <div className={styles.navBarContentContainer}>\n                        <motion.div\n                            style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n                            className={styles.navBarPanesContainer}\n                        >\n                            <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n                        </motion.div>\n                        <motion.div\n                            className={styles.dividerContainer}\n                            style={{ ...dividerStyle, visibility: dividerVisibility }}\n                        >\n                            <Divider />\n                        </motion.div>\n                    </div>\n                </div>\n            </MetricsProvider>\n        </Layer>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/index.css

@@ -5,96 +5,96 @@
 .magritte-night-theme{
   --magritte-color-background-body-v23-2-3:#000000;
 }
-.magritte-actions-container___CBgYW_1-0-3{
+.magritte-actions-container___CBgYW_1-1-0{
   display:flex;
   flex-direction:row;
   gap:12px;
 }
-.magritte-actions-no-children___rgJUl_1-0-3{
+.magritte-actions-no-children___rgJUl_1-1-0{
   justify-content:space-between;
 }
-.magritte-actions-left-slot___DNOj0_1-0-3,
-.magritte-actions-right-slot___aodtj_1-0-3{
+.magritte-actions-left-slot___DNOj0_1-1-0,
+.magritte-actions-right-slot___aodtj_1-1-0{
   display:grid;
   flex:0 0 auto;
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:first-child,
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:first-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:first-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:first-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:first-child{
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:first-child,
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:first-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:first-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:first-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:first-child{
   margin-left:-8px;
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:last-child,
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:last-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:last-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:last-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > .magritte-actions-icon-morph___-nNgW_1-0-3:last-child{
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:last-child,
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:last-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:last-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:last-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > .magritte-actions-icon-morph___-nNgW_1-1-0:last-child{
   margin-right:-8px;
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child,
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child,
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3){
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child,
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child,
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0){
   --magritte-ui-icon-margin-right-override:-8px;
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child,
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child,
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child,
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-start-stage___MJ67a_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-end-stage___qHtTV_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3),
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-0-3){
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child,
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child,
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child,
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-start-stage___MJ67a_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-end-stage___qHtTV_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0),
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-1-0){
   --magritte-ui-icon-margin-left-override:-8px;
 }
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child,
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child{
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child,
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child{
   --magritte-ui-icon-margin-left-override:calc(-8px * var(--magritte-ui-navbar-animation-progress));
 }
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child,
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child{
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child,
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child{
   --magritte-ui-icon-margin-right-override:calc(-8px * var(--magritte-ui-navbar-animation-progress));
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :first-child,
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :first-child{
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :first-child,
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :first-child{
   --magritte-ui-icon-margin-left-override:calc(-8px * (1 - var(--magritte-ui-navbar-animation-progress)));
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-right-slot___aodtj_1-0-3 .magritte-actions-side-slot-content___TlHrX_1-0-3 > :last-child,
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-actions-only-stage___cg10A_1-0-3 .magritte-actions-left-slot___DNOj0_1-0-3 .magritte-actions-side-slot-content-clone___jDxVm_1-0-3 > :last-child{
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-right-slot___aodtj_1-1-0 .magritte-actions-side-slot-content___TlHrX_1-1-0 > :last-child,
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-actions-only-stage___cg10A_1-1-0 .magritte-actions-left-slot___DNOj0_1-1-0 .magritte-actions-side-slot-content-clone___jDxVm_1-1-0 > :last-child{
   --magritte-ui-icon-margin-right-override:calc(-8px * (1 - var(--magritte-ui-navbar-animation-progress)));
 }
-.magritte-actions-center-slot___hLAy6_1-0-3{
+.magritte-actions-center-slot___hLAy6_1-1-0{
   display:flex;
   flex:1 1 auto;
   min-width:0;
 }
-.magritte-actions-center-slot___hLAy6_1-0-3.magritte-actions-center-slot-centered___merXQ_1-0-3{
+.magritte-actions-center-slot___hLAy6_1-1-0.magritte-actions-center-slot-centered___merXQ_1-1-0{
   justify-content:center;
 }
-.magritte-actions-side-slot-content___TlHrX_1-0-3,
-.magritte-actions-side-slot-content-clone___jDxVm_1-0-3{
+.magritte-actions-side-slot-content___TlHrX_1-1-0,
+.magritte-actions-side-slot-content-clone___jDxVm_1-1-0{
   grid-area:1 / 1;
   display:flex;
   align-items:center;
   gap:4px;
 }
-.magritte-actions-side-slot-content-clone___jDxVm_1-0-3{
+.magritte-actions-side-slot-content-clone___jDxVm_1-1-0{
   visibility:hidden;
   z-index:0;
   pointer-events:none;
   user-select:none;
   contain:style layout;
 }
-.magritte-title-container-wrapper___DQUcj_1-0-3{
+.magritte-title-container-wrapper___DQUcj_1-1-0{
   display:flex;
   flex-direction:row;
   align-items:center;
@@ -102,44 +102,44 @@
   min-width:0;
   gap:12px;
 }
-.magritte-title-main-part___npoHN_1-0-3{
+.magritte-title-main-part___npoHN_1-1-0{
   display:flex;
   flex-direction:column;
   flex:0 1 auto;
   min-width:0;
 }
-.magritte-title-main-part___npoHN_1-0-3.magritte-centered___Y2mlP_1-0-3{
+.magritte-title-main-part___npoHN_1-1-0.magritte-centered___Y2mlP_1-1-0{
   align-items:center;
 }
-.magritte-title-left-slot___HTE7h_1-0-3{
+.magritte-title-left-slot___HTE7h_1-1-0{
   display:flex;
   align-items:center;
   flex:0 0 auto;
 }
-.magritte-title-container___y9AIx_1-0-3{
+.magritte-title-container___y9AIx_1-1-0{
   display:flex;
   flex-direction:row;
   align-items:center;
   gap:5px;
 }
-.magritte-subtitle-container___nVUBu_1-0-3{
+.magritte-subtitle-container___nVUBu_1-1-0{
   display:flex;
 }
-.magritte-title-morph-item___t7Wf3_1-0-3{
+.magritte-title-morph-item___t7Wf3_1-1-0{
   display:flex;
   min-width:0;
 }
-.magritte-title___ZbLgP_1-0-3{
+.magritte-title___ZbLgP_1-1-0{
   display:flex;
   flex:0 1 auto;
   min-width:0;
 }
-.magritte-pane-content___UVmC6_1-0-3{
+.magritte-pane-content___UVmC6_1-1-0{
   position:relative;
   pointer-events:none;
   z-index:2;
 }
-.magritte-pane-background___PDZAX_1-0-3{
+.magritte-pane-background___PDZAX_1-1-0{
   position:absolute;
   background-color:var(--magritte-ui-nav-bar-background-color-override, var(--magritte-color-background-body-v23-2-3));
   opacity:0;
@@ -147,43 +147,43 @@
   z-index:-1;
   transform-origin:0 0;
 }
-.magritte-navbar-transparent-start___wysv0_1-0-3 .magritte-pane-background___PDZAX_1-0-3{
+.magritte-navbar-transparent-start___wysv0_1-1-0 .magritte-pane-background___PDZAX_1-1-0{
   opacity:calc(var(--magritte-ui-navbar-animation-progress) * 0.95);
 }
-.magritte-navbar-transparent-end___6KqLR_1-0-3 .magritte-pane-background___PDZAX_1-0-3{
+.magritte-navbar-transparent-end___6KqLR_1-1-0 .magritte-pane-background___PDZAX_1-1-0{
   opacity:calc((1 - var(--magritte-ui-navbar-animation-progress)) * 0.95);
 }
-.magritte-navbar-not-transparent___5KZNp_1-0-3 .magritte-pane-background___PDZAX_1-0-3{
+.magritte-navbar-not-transparent___5KZNp_1-1-0 .magritte-pane-background___PDZAX_1-1-0{
   opacity:0.95;
 }
-.magritte-morph-item___8kF46_1-0-3{
+.magritte-morph-item___8kF46_1-1-0{
   line-height:0;
   transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
 }
-.magritte-morph-item-top___WPEkn_1-0-3{
+.magritte-morph-item-top___WPEkn_1-1-0{
   --magritte-ui-morph-item-transform-origin-y:top;
 }
-.magritte-morph-item-bottom___zNbsF_1-0-3{
+.magritte-morph-item-bottom___zNbsF_1-1-0{
   --magritte-ui-morph-item-transform-origin-y:bottom;
 }
-.magritte-morph-item-left___T6AMW_1-0-3{
+.magritte-morph-item-left___T6AMW_1-1-0{
   --magritte-ui-morph-item-transform-origin-x:left;
 }
-.magritte-morph-item-right___EuT1E_1-0-3{
+.magritte-morph-item-right___EuT1E_1-1-0{
   --magritte-ui-morph-item-transform-origin-x:right;
 }
-.magritte-pane___f8eFC_1-0-3{
+.magritte-pane___f8eFC_1-1-0{
   position:relative;
   overflow:hidden;
   pointer-events:none;
 }
-.magritte-start-state-container___giBVb_1-0-3{
+.magritte-start-state-container___giBVb_1-1-0{
   position:relative;
   z-index:1;
   box-sizing:border-box;
   pointer-events:auto;
 }
-.magritte-end-state-container___uiW8Q_1-0-3{
+.magritte-end-state-container___uiW8Q_1-1-0{
   position:absolute;
   z-index:0;
   top:0;
@@ -192,51 +192,51 @@
   pointer-events:none;
   opacity:0;
 }
-.magritte-content-container___7s7vv_1-0-3{
+.magritte-content-container___7s7vv_1-1-0{
   box-sizing:border-box;
 }
-.magritte-next-pane___H2oxQ_1-0-3{
+.magritte-next-pane___H2oxQ_1-1-0{
   position:relative;
 }
-.magritte-nav-bar___RRGe0_1-0-3{
+.magritte-nav-bar___RRGe0_1-1-0{
   top:0;
   position:sticky;
   pointer-events:none;
   overflow-anchor:none;
   z-index:10;
 }
-.magritte-nav-bar-overlay___Mq5ZD_1-0-3 .magritte-nav-bar-overlay-wrapper___y1VpY_1-0-3{
+.magritte-nav-bar-overlay___Mq5ZD_1-1-0 .magritte-nav-bar-overlay-wrapper___y1VpY_1-1-0{
   position:absolute;
   inset:0;
 }
-.magritte-nav-bar-content-container___H-WMO_1-0-3{
+.magritte-nav-bar-content-container___H-WMO_1-1-0{
   display:grid;
   position:relative;
 }
-.magritte-nav-bar-panes-container___5ZDLa_1-0-3{
+.magritte-nav-bar-panes-container___5ZDLa_1-1-0{
   position:relative;
   z-index:1;
   grid-area:1 / 1;
   min-width:0;
 }
-.magritte-nav-bar-progressive-blur___qyeUV_1-0-3{
+.magritte-nav-bar-progressive-blur___qyeUV_1-1-0{
   position:relative;
   z-index:0;
   transform-origin:0 0;
   grid-area:1 / 1;
   min-width:0;
 }
-.magritte-nav-bar-content-container___H-WMO_1-0-3 :not(.magritte-next-pane___H2oxQ_1-0-3) .magritte-nav-bar-stage___amDz7_1-0-3,
-.magritte-nav-bar-content-container___H-WMO_1-0-3 :not(.magritte-next-pane___H2oxQ_1-0-3) .nav-bar-layout-animation-stage-start,
-.magritte-nav-bar-content-container___H-WMO_1-0-3 :not(.magritte-next-pane___H2oxQ_1-0-3) .nav-bar-layout-animation-stage-end{
+.magritte-nav-bar-content-container___H-WMO_1-1-0 :not(.magritte-next-pane___H2oxQ_1-1-0) .magritte-nav-bar-stage___amDz7_1-1-0,
+.magritte-nav-bar-content-container___H-WMO_1-1-0 :not(.magritte-next-pane___H2oxQ_1-1-0) .nav-bar-layout-animation-stage-start,
+.magritte-nav-bar-content-container___H-WMO_1-1-0 :not(.magritte-next-pane___H2oxQ_1-1-0) .nav-bar-layout-animation-stage-end{
   padding-top:calc(8px + var(--magritte-ui-nav-bar-padding-top-override, 0px));
 }
-.magritte-nav-bar-stage___amDz7_1-0-3{
+.magritte-nav-bar-stage___amDz7_1-1-0{
   padding:8px var(--magritte-ui-nav-bar-stage-horizontal-padding-override, 16px);
 }
-.magritte-metrics-mode___h38aX_1-0-3 .magritte-morph-item___8kF46_1-0-3,
-.magritte-metrics-mode___h38aX_1-0-3 .magritte-pane___f8eFC_1-0-3,
-.magritte-metrics-mode___h38aX_1-0-3 .magritte-next-pane___H2oxQ_1-0-3{
+.magritte-metrics-mode___h38aX_1-1-0 .magritte-morph-item___8kF46_1-1-0,
+.magritte-metrics-mode___h38aX_1-1-0 .magritte-pane___f8eFC_1-1-0,
+.magritte-metrics-mode___h38aX_1-1-0 .magritte-next-pane___H2oxQ_1-1-0{
   transform:none !important;
 }
 .nav-bar-layout-animation-stage-end,
@@ -247,41 +247,41 @@
   height:auto !important;
   transform:none !important;
 }
-.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-0-3,
-.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-0-3{
+.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-1-0,
+.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-1-0{
   position:static !important;
   width:auto !important;
   height:auto !important;
   transform:none !important;
 }
-.magritte-layout-morph___I3SPy_1-0-3{
+.magritte-layout-morph___I3SPy_1-1-0{
   display:block;
   position:absolute;
   transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
   z-index:3;
 }
-.magritte-animation-stage-progress___5FthT_1-0-3 .magritte-layout-morph___I3SPy_1-0-3 > *{
+.magritte-animation-stage-progress___5FthT_1-1-0 .magritte-layout-morph___I3SPy_1-1-0 > *{
   margin:0 !important;
 }
-.magritte-layout-morph-start___9-krP_1-0-3{
+.magritte-layout-morph-start___9-krP_1-1-0{
   z-index:2;
 }
-.magritte-layout-morph-end___LIg4d_1-0-3{
+.magritte-layout-morph-end___LIg4d_1-1-0{
   z-index:1;
 }
-.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-0-3{
+.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-1-0{
   display:contents;
 }
-.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-0-3{
+.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-1-0{
   display:none;
 }
-.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-0-3{
+.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-1-0{
   display:contents;
 }
-.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-0-3{
+.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-1-0{
   display:none;
 }
-.magritte-divider-container___-NdWi_1-0-3{
+.magritte-divider-container___-NdWi_1-1-0{
   position:absolute;
   width:100%;
   bottom:0;

package/index.js

@@ -1,6 +1,6 @@
 import './index.css';
 export { Actions } from './public/Actions.js';
-export { N as NavBar } from './NavBar-C_bLkCSc.js';
+export { N as NavBar } from './NavBar-D9oyKBms.js';
 export { ExternalPane as Pane } from './public/Pane.js';
 export { ExternalStage as Stage } from './public/Stage.js';
 export { Morph } from './public/Morph.js';

package/internal/PaneStore.js

@@ -3,7 +3,7 @@ import { createContext, useContext, useId, useLayoutEffect } from 'react';
 import { motionValue } from 'motion';
 import { KeyedSubscriptions } from './KeyedSubscriptions.js';
 import { useInitOnce } from './utils.js';
-import { u as useNavBarContext } from '../NavBar-C_bLkCSc.js';
+import { u as useNavBarContext } from '../NavBar-D9oyKBms.js';
 import 'react/jsx-runtime';
 import 'classnames';
 import 'motion/react';

package/internal/useAnimationRanges.d.ts

@@ -1,4 +1,5 @@
 import { type PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';
+import { NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';
 /**
  * Рассчитывает для панелей диапазоны скролла, в течение которого должна проигрываться их анимация.
  *
@@ -35,4 +36,4 @@ import { type PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';
  *   Диапазоны скролла для анимации каждой панели в исходном порядке `data`.
  */
 export type AnimationRanges = Map<string, [number, number]>;
-export declare const useAnimationRanges: (paneRegistry: Set<PaneStore>) => [() => AnimationRanges, VoidFunction];
+export declare const useAnimationRanges: (paneRegistry: Set<PaneStore>, getNavBarMetrics: () => NavBarMetrics) => [() => AnimationRanges, VoidFunction];

package/internal/useAnimationRanges.js

@@ -2,7 +2,7 @@ import './../index.css';
 import { useRef } from 'react';
 import { useActualRef, useInitOnce } from './utils.js';
 
-const useAnimationRanges = (paneRegistry) => {
+const useAnimationRanges = (paneRegistry, getNavBarMetrics) => {
     const animationRangesRef = useRef(null);
     const paneRegistryRef = useActualRef(paneRegistry);
     const getAnimationRanges = useInitOnce(() => () => {
@@ -11,33 +11,46 @@ const useAnimationRanges = (paneRegistry) => {
             const panesData = [...paneRegistryRef.current.values()]
                 .map((pane) => pane.data)
                 .sort((a, b) => (b.top ?? 0) - (a.top ?? 0));
+            const { heightDelta } = getNavBarMetrics();
             const scrollRangesById = new Map();
             let groupStartIdx = 0; // индекс последней встреченной foldable (начало текущей группы)
             let totalDuration = 0; // суммарная длительность (в пикселях скролла) всех ранее обработанных групп
             let groupDuration = 0; // суммарная длительность (в пикселях скролла) текущей группы
-            for (let i = 0; i <= panesData.length; i++) {
-                const pane = panesData[i] ?? null;
-                const isLastPane = pane === null;
-                const isGroupEnd = isLastPane || pane.foldable;
-                // Новая foldable или последняя панель -> завершаем обработку текущей группы, и сохраняем
-                // диапазон если известно место ее начала
-                if (isGroupEnd && groupStartIdx !== null) {
-                    const range = [totalDuration, totalDuration + groupDuration];
-                    for (let j = groupStartIdx; j < i; j++) {
-                        scrollRangesById.set(panesData[j].id, range);
-                    }
-                    totalDuration += groupDuration;
-                    groupDuration = 0;
+            // ни одна из панелей не схлопывается и не меняет высоту в процессе анимации
+            // в этом случае просто разбиваем стадии анимации на отрезки пропорциональные высоте панелей
+            if (heightDelta === 0) {
+                for (let i = 0; i < panesData.length; i++) {
+                    const pane = panesData[i];
+                    const paneHeight = pane.startHeight ?? 0;
+                    scrollRangesById.set(pane.id, [totalDuration, totalDuration + paneHeight]);
+                    totalDuration += paneHeight;
                 }
-                if (!isLastPane) {
-                    if (pane.foldable) {
-                        groupStartIdx = i;
+            }
+            else {
+                for (let i = 0; i <= panesData.length; i++) {
+                    const pane = panesData[i] ?? null;
+                    const isLastPane = pane === null;
+                    const isGroupEnd = isLastPane || pane.foldable;
+                    // Новая foldable или последняя панель -> завершаем обработку текущей группы, и сохраняем
+                    // диапазон если известно место ее начала
+                    if (isGroupEnd && groupStartIdx !== null) {
+                        const range = [totalDuration, totalDuration + groupDuration];
+                        for (let j = groupStartIdx; j < i; j++) {
+                            scrollRangesById.set(panesData[j].id, range);
+                        }
+                        totalDuration += groupDuration;
+                        groupDuration = 0;
+                    }
+                    if (!isLastPane) {
+                        if (pane.foldable) {
+                            groupStartIdx = i;
+                        }
+                        // Дельта высоты панели: вклад в длительность текущей группы
+                        const deltaHeight = pane.foldable
+                            ? (pane.startHeight ?? 0) // foldable схлопывается до 0
+                            : (pane.startHeight ?? 0) - (pane.endHeight ?? pane.startHeight ?? 0); // иначе разница start -> end
+                        groupDuration += deltaHeight;
                     }
-                    // Дельта высоты панели: вклад в длительность текущей группы
-                    const deltaHeight = pane.foldable
-                        ? (pane.startHeight ?? 0) // foldable схлопывается до 0
-                        : (pane.startHeight ?? 0) - (pane.endHeight ?? pane.startHeight ?? 0); // иначе разница start -> end
-                    groupDuration += deltaHeight;
                 }
             }
             animationRangesRef.current = scrollRangesById;

package/internal/useAnimationRanges.js.map

@@ -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 { 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 = startHeight − (endHeight ?? startHeight).\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 = (paneRegistry: Set<PaneStore>): [() => 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\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            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                        : (pane.startHeight ?? 0) - (pane.endHeight ?? pane.startHeight ?? 0); // иначе разница start -> end\n                    groupDuration += deltaHeight;\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":";;;AAyCa,MAAA,kBAAkB,GAAG,CAAC,YAA4B,KAA2C;AACtG,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;AAEjD,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;AAEtB,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACxC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;AAClC,gBAAA,MAAM,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;AACjC,gBAAA,MAAM,UAAU,GAAG,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;;;AAG/C,gBAAA,IAAI,UAAU,IAAI,aAAa,KAAK,IAAI,EAAE;oBACtC,MAAM,KAAK,GAAqB,CAAC,aAAa,EAAE,aAAa,GAAG,aAAa,CAAC,CAAC;AAC/E,oBAAA,KAAK,IAAI,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AACpC,wBAAA,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;qBAChD;oBACD,aAAa,IAAI,aAAa,CAAC;oBAC/B,aAAa,GAAG,CAAC,CAAC;iBACrB;gBAED,IAAI,CAAC,UAAU,EAAE;AACb,oBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;wBACf,aAAa,GAAG,CAAC,CAAC;qBACrB;;AAGD,oBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ;2BAC1B,IAAI,CAAC,WAAW,IAAI,CAAC;0BACtB,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;oBAC1E,aAAa,IAAI,WAAW,CAAC;iBAChC;aACJ;AACD,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;;;;"}
+{"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 = startHeight − (endHeight ?? startHeight).\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                    const paneHeight = pane.startHeight ?? 0;\n                    scrollRangesById.set(pane.id, [totalDuration, totalDuration + paneHeight]);\n                    totalDuration += paneHeight;\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                            : (pane.startHeight ?? 0) - (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":";;;MA0Ca,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,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;AACzC,oBAAA,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,aAAa,EAAE,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC;oBAC3E,aAAa,IAAI,UAAU,CAAC;iBAC/B;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;8BACtB,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;wBAC1E,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;;;;"}

package/internal/useBindScrollToAnimationProgress.d.ts

@@ -3,7 +3,7 @@ import { type MotionStyle, type MotionValue } from 'motion/react';
 import { type AnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';
 import { type NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';
 import { type ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';
-export declare const useBindScrollToAnimationProgress: (scrollPosition: MotionValue<number>, getNavBarMetrics: () => NavBarMetrics, getAnimationRanges: () => AnimationRanges, scrollAdapter: ScrollAdapter, startTriggerPosition: "start" | "full-area" | RefObject<HTMLElement | null>, endTriggerPosition?: RefObject<HTMLElement | null>) => [VoidFunction, () => {
+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) => [VoidFunction, () => {
     top: number;
     bottom: number;
 }, MotionValue<number>, MotionStyle];

package/internal/useBindScrollToAnimationProgress.js

@@ -5,20 +5,17 @@ import { useActualRef, useInitOnce, getRelativeOffset, remap, clamp } from './ut
 
 const createScrollToAnimationProgressMapFn = (getNavBarMetrics, scrollAdapter, animationRanges, startTriggerPosition, endTriggerPosition) => {
     const maxScrollTop = scrollAdapter.getMaxScrollTop();
-    const navBarMetrics = getNavBarMetrics();
+    const { heightDelta, top, bottom } = getNavBarMetrics();
+    const animationHeight = heightDelta || bottom - top;
     if (startTriggerPosition === 'full-area') {
-        const { heightDelta, top } = navBarMetrics;
         let currentStart = top;
-        const maxProgress = maxScrollTop >= heightDelta + top
+        const maxProgress = maxScrollTop >= animationHeight + top
             ? 1
-            : (animationRanges.find((range) => range[0] * heightDelta <= maxScrollTop - top) ?? [0])[0];
+            : (animationRanges.find((range) => range[0] * animationHeight <= maxScrollTop - top) ?? [0])[0];
         const mapScrollToAnimationPropgress = (scrollPosition) => {
-            if (!heightDelta) {
-                return 0;
-            }
-            const progress = (scrollPosition - currentStart) / heightDelta;
+            const progress = (scrollPosition - currentStart) / animationHeight;
             if (progress > maxProgress) {
-                currentStart = scrollPosition - heightDelta * maxProgress;
+                currentStart = scrollPosition - animationHeight * maxProgress;
             }
             else if (progress < 0) {
                 currentStart = scrollPosition;
@@ -28,20 +25,24 @@ const createScrollToAnimationProgressMapFn = (getNavBarMetrics, scrollAdapter, a
         };
         const getClosestStops = () => ({
             bottom: currentStart,
-            top: currentStart + heightDelta * maxProgress,
+            top: currentStart + animationHeight * maxProgress,
         });
         return [mapScrollToAnimationPropgress, getClosestStops];
     }
     let startPos = startTriggerPosition === 'start' || !startTriggerPosition.current
         ? 0
-        : getRelativeOffset(scrollAdapter, startTriggerPosition.current) - navBarMetrics.bottom;
-    let endPos = endTriggerPosition?.current
-        ? getRelativeOffset(scrollAdapter, endTriggerPosition.current) +
-            navBarMetrics.heightDelta -
-            navBarMetrics.bottom
-        : startPos + navBarMetrics.heightDelta;
-    endPos += navBarMetrics.top;
-    startPos += navBarMetrics.top;
+        : getRelativeOffset(scrollAdapter, startTriggerPosition.current) - bottom;
+    let endPos;
+    if (typeof endTriggerPosition === 'number') {
+        endPos = startPos + endTriggerPosition;
+    }
+    else {
+        endPos = endTriggerPosition?.current
+            ? getRelativeOffset(scrollAdapter, endTriggerPosition.current) + heightDelta - bottom
+            : startPos + animationHeight;
+    }
+    endPos += top;
+    startPos += top;
     let endProgress = 1;
     if (endPos > maxScrollTop) {
         const scrollDelta = endPos - startPos;
@@ -62,9 +63,13 @@ const useBindScrollToAnimationProgress = (scrollPosition, getNavBarMetrics, getA
         let unsubscribe = null;
         return () => {
             unsubscribe?.();
-            const { heightDelta, top } = getNavBarMetrics();
+            const { heightDelta, top, bottom } = getNavBarMetrics();
+            const animationHeight = heightDelta || bottom - top;
             const animationRanges = [
-                ...new Set([...getAnimationRanges().values()].map((range) => [range[0] / heightDelta, range[1] / heightDelta])),
+                ...new Set([...getAnimationRanges().values()].map((range) => [
+                    range[0] / animationHeight,
+                    range[1] / animationHeight,
+                ])),
             ].sort((a, b) => b[0] - a[0]);
             const [mapFn, getClosestStops] = createScrollToAnimationProgressMapFn(getNavBarMetrics, scrollAdapter, animationRanges, startTriggerPositionRef.current, endTriggerPositionRef.current);
             getClosestStopsRef.current = getClosestStops;

package/internal/useBindScrollToAnimationProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBindScrollToAnimationProgress.js","sources":["../../src/internal/useBindScrollToAnimationProgress.ts"],"sourcesContent":["import { type MutableRefObject, type RefObject, useRef } from 'react';\nimport { type MotionStyle, type MotionValue, useMotionValue } from 'motion/react';\n\nimport { type AnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { type NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { type ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { remap, clamp, useInitOnce, useActualRef, getRelativeOffset } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nconst createScrollToAnimationProgressMapFn = (\n    getNavBarMetrics: () => NavBarMetrics,\n    scrollAdapter: ScrollAdapter,\n    animationRanges: [number, number][],\n    startTriggerPosition: 'start' | 'full-area' | RefObject<HTMLElement | null>,\n    endTriggerPosition?: RefObject<HTMLElement | null>\n) => {\n    const maxScrollTop = scrollAdapter.getMaxScrollTop();\n    const navBarMetrics = getNavBarMetrics();\n\n    if (startTriggerPosition === 'full-area') {\n        const { heightDelta, top } = navBarMetrics;\n\n        let currentStart = top;\n        const maxProgress =\n            maxScrollTop >= heightDelta + top\n                ? 1\n                : (animationRanges.find((range) => range[0] * heightDelta <= maxScrollTop - top) ?? [0])[0];\n\n        const mapScrollToAnimationPropgress = (scrollPosition: number) => {\n            if (!heightDelta) {\n                return 0;\n            }\n            const progress = (scrollPosition - currentStart) / heightDelta;\n            if (progress > maxProgress) {\n                currentStart = scrollPosition - heightDelta * maxProgress;\n            } else if (progress < 0) {\n                currentStart = scrollPosition;\n            }\n            currentStart = Math.max(currentStart, top);\n\n            return clamp(progress, 0, maxProgress);\n        };\n\n        const getClosestStops = () => ({\n            bottom: currentStart,\n            top: currentStart + heightDelta * maxProgress,\n        });\n\n        return [mapScrollToAnimationPropgress, getClosestStops] as const;\n    }\n\n    let startPos =\n        startTriggerPosition === 'start' || !startTriggerPosition.current\n            ? 0\n            : getRelativeOffset(scrollAdapter, startTriggerPosition.current) - navBarMetrics.bottom;\n\n    let endPos = endTriggerPosition?.current\n        ? getRelativeOffset(scrollAdapter, endTriggerPosition.current) +\n          navBarMetrics.heightDelta -\n          navBarMetrics.bottom\n        : startPos + navBarMetrics.heightDelta;\n\n    endPos += navBarMetrics.top;\n    startPos += navBarMetrics.top;\n\n    let endProgress = 1;\n    if (endPos > maxScrollTop) {\n        const scrollDelta = endPos - startPos;\n        endProgress = (animationRanges.find((range) => range[0] * scrollDelta + startPos < maxScrollTop) ?? [0])[0];\n        endPos = startPos + scrollDelta * endProgress;\n    }\n\n    return [remap([startPos, endPos], [0, endProgress]), () => ({ bottom: startPos, top: endPos })] as const;\n};\n\nconst isDividerVisible = (scrollTop: number, navBarTop: number, heightDelta: number, animationProgress: number) =>\n    Math.ceil(navBarTop + heightDelta * animationProgress) < Math.floor(scrollTop);\n\nexport const useBindScrollToAnimationProgress = (\n    scrollPosition: MotionValue<number>,\n    getNavBarMetrics: () => NavBarMetrics,\n    getAnimationRanges: () => AnimationRanges,\n    scrollAdapter: ScrollAdapter,\n    startTriggerPosition: 'start' | 'full-area' | RefObject<HTMLElement | null>,\n    endTriggerPosition?: RefObject<HTMLElement | null>\n): [VoidFunction, () => { top: number; bottom: number }, MotionValue<number>, MotionStyle] => {\n    const totalAnimationProgress = useMotionValue(0);\n    const dividerVisibility = useMotionValue<'visible' | 'hidden'>('hidden');\n    const dividerOffsetY = useMotionValue(0);\n    const startTriggerPositionRef = useActualRef(startTriggerPosition);\n    const endTriggerPositionRef = useActualRef(endTriggerPosition);\n    const getClosestStopsRef: MutableRefObject<(() => { top: number; bottom: number }) | null> = useRef(null);\n\n    const bindScrollToAnimation = useInitOnce(() => {\n        let unsubscribe: VoidFunction | null = null;\n        return () => {\n            unsubscribe?.();\n            const { heightDelta, top } = getNavBarMetrics();\n\n            const animationRanges = [\n                ...new Set<[number, number]>(\n                    [...getAnimationRanges().values()].map((range) => [range[0] / heightDelta, range[1] / heightDelta])\n                ),\n            ].sort((a, b) => b[0] - a[0]);\n\n            const [mapFn, getClosestStops] = createScrollToAnimationProgressMapFn(\n                getNavBarMetrics,\n                scrollAdapter,\n                animationRanges,\n                startTriggerPositionRef.current,\n                endTriggerPositionRef.current\n            );\n            getClosestStopsRef.current = getClosestStops;\n            const updateDivider = (scrollPosition: number, totalAnimationProgress: number) => {\n                dividerVisibility.set(\n                    isDividerVisible(scrollPosition, top, heightDelta, totalAnimationProgress) ? 'visible' : 'hidden'\n                );\n                dividerOffsetY.set(-heightDelta * totalAnimationProgress);\n            };\n            unsubscribe = scrollPosition.on('change', (value) => {\n                totalAnimationProgress.set(mapFn(value));\n                updateDivider(value, totalAnimationProgress.get());\n            });\n\n            totalAnimationProgress.set(mapFn(scrollPosition.get()));\n            updateDivider(scrollPosition.get(), totalAnimationProgress.get());\n        };\n    });\n\n    const getClosestStops = useInitOnce(() => () => {\n        if (getClosestStopsRef.current) {\n            return getClosestStopsRef.current();\n        }\n\n        return { bottom: 0, top: getNavBarMetrics().heightDelta };\n    });\n\n    return [\n        bindScrollToAnimation,\n        getClosestStops,\n        totalAnimationProgress,\n        { visibility: dividerVisibility, y: dividerOffsetY },\n    ];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBindScrollToAnimationProgress.js","sources":["../../src/internal/useBindScrollToAnimationProgress.ts"],"sourcesContent":["import { type MutableRefObject, type RefObject, useRef } from 'react';\nimport { type MotionStyle, type MotionValue, useMotionValue } from 'motion/react';\n\nimport { type AnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { type NavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { type ScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { remap, clamp, useInitOnce, useActualRef, getRelativeOffset } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\nconst createScrollToAnimationProgressMapFn = (\n    getNavBarMetrics: () => NavBarMetrics,\n    scrollAdapter: ScrollAdapter,\n    animationRanges: [number, number][],\n    startTriggerPosition: 'start' | 'full-area' | RefObject<HTMLElement | null>,\n    endTriggerPosition?: RefObject<HTMLElement | null> | number\n) => {\n    const maxScrollTop = scrollAdapter.getMaxScrollTop();\n    const { heightDelta, top, bottom } = getNavBarMetrics();\n    const animationHeight = heightDelta || bottom - top;\n\n    if (startTriggerPosition === 'full-area') {\n        let currentStart = top;\n        const maxProgress =\n            maxScrollTop >= animationHeight + top\n                ? 1\n                : (animationRanges.find((range) => range[0] * animationHeight <= maxScrollTop - top) ?? [0])[0];\n\n        const mapScrollToAnimationPropgress = (scrollPosition: number) => {\n            const progress = (scrollPosition - currentStart) / animationHeight;\n            if (progress > maxProgress) {\n                currentStart = scrollPosition - animationHeight * maxProgress;\n            } else if (progress < 0) {\n                currentStart = scrollPosition;\n            }\n            currentStart = Math.max(currentStart, top);\n\n            return clamp(progress, 0, maxProgress);\n        };\n\n        const getClosestStops = () => ({\n            bottom: currentStart,\n            top: currentStart + animationHeight * maxProgress,\n        });\n\n        return [mapScrollToAnimationPropgress, getClosestStops] as const;\n    }\n\n    let startPos =\n        startTriggerPosition === 'start' || !startTriggerPosition.current\n            ? 0\n            : getRelativeOffset(scrollAdapter, startTriggerPosition.current) - bottom;\n\n    let endPos: number;\n    if (typeof endTriggerPosition === 'number') {\n        endPos = startPos + endTriggerPosition;\n    } else {\n        endPos = endTriggerPosition?.current\n            ? getRelativeOffset(scrollAdapter, endTriggerPosition.current) + heightDelta - bottom\n            : startPos + animationHeight;\n    }\n\n    endPos += top;\n    startPos += top;\n\n    let endProgress = 1;\n    if (endPos > maxScrollTop) {\n        const scrollDelta = endPos - startPos;\n        endProgress = (animationRanges.find((range) => range[0] * scrollDelta + startPos < maxScrollTop) ?? [0])[0];\n        endPos = startPos + scrollDelta * endProgress;\n    }\n\n    return [remap([startPos, endPos], [0, endProgress]), () => ({ bottom: startPos, top: endPos })] as const;\n};\n\nconst isDividerVisible = (scrollTop: number, navBarTop: number, heightDelta: number, animationProgress: number) =>\n    Math.ceil(navBarTop + heightDelta * animationProgress) < Math.floor(scrollTop);\n\nexport const useBindScrollToAnimationProgress = (\n    scrollPosition: MotionValue<number>,\n    getNavBarMetrics: () => NavBarMetrics,\n    getAnimationRanges: () => AnimationRanges,\n    scrollAdapter: ScrollAdapter,\n    startTriggerPosition: 'start' | 'full-area' | RefObject<HTMLElement | null>,\n    endTriggerPosition?: RefObject<HTMLElement | null> | number\n): [VoidFunction, () => { top: number; bottom: number }, MotionValue<number>, MotionStyle] => {\n    const totalAnimationProgress = useMotionValue(0);\n    const dividerVisibility = useMotionValue<'visible' | 'hidden'>('hidden');\n    const dividerOffsetY = useMotionValue(0);\n    const startTriggerPositionRef = useActualRef(startTriggerPosition);\n    const endTriggerPositionRef = useActualRef(endTriggerPosition);\n    const getClosestStopsRef: MutableRefObject<(() => { top: number; bottom: number }) | null> = useRef(null);\n\n    const bindScrollToAnimation = useInitOnce(() => {\n        let unsubscribe: VoidFunction | null = null;\n        return () => {\n            unsubscribe?.();\n            const { heightDelta, top, bottom } = getNavBarMetrics();\n            const animationHeight = heightDelta || bottom - top;\n\n            const animationRanges = [\n                ...new Set<[number, number]>(\n                    [...getAnimationRanges().values()].map((range) => [\n                        range[0] / animationHeight,\n                        range[1] / animationHeight,\n                    ])\n                ),\n            ].sort((a, b) => b[0] - a[0]);\n\n            const [mapFn, getClosestStops] = createScrollToAnimationProgressMapFn(\n                getNavBarMetrics,\n                scrollAdapter,\n                animationRanges,\n                startTriggerPositionRef.current,\n                endTriggerPositionRef.current\n            );\n            getClosestStopsRef.current = getClosestStops;\n            const updateDivider = (scrollPosition: number, totalAnimationProgress: number) => {\n                dividerVisibility.set(\n                    isDividerVisible(scrollPosition, top, heightDelta, totalAnimationProgress) ? 'visible' : 'hidden'\n                );\n                dividerOffsetY.set(-heightDelta * totalAnimationProgress);\n            };\n            unsubscribe = scrollPosition.on('change', (value) => {\n                totalAnimationProgress.set(mapFn(value));\n                updateDivider(value, totalAnimationProgress.get());\n            });\n\n            totalAnimationProgress.set(mapFn(scrollPosition.get()));\n            updateDivider(scrollPosition.get(), totalAnimationProgress.get());\n        };\n    });\n\n    const getClosestStops = useInitOnce(() => () => {\n        if (getClosestStopsRef.current) {\n            return getClosestStopsRef.current();\n        }\n\n        return { bottom: 0, top: getNavBarMetrics().heightDelta };\n    });\n\n    return [\n        bindScrollToAnimation,\n        getClosestStops,\n        totalAnimationProgress,\n        { visibility: dividerVisibility, y: dividerOffsetY },\n    ];\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-nav-bar",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -36,5 +36,5 @@
     "@hh.ru/magritte-ui-layer": "3.0.5",
     "@hh.ru/magritte-ui-mock-component": "1.1.5"
   },
-  "gitHead": "b20ca79252fa840d3d5fafb398e47efdfe3a00a9"
+  "gitHead": "e2c9d1478f94096076aa2ef8a721f364a7f8cb9b"
 }

package/public/Actions.js

@@ -6,7 +6,7 @@ import { isIconElement } from '@hh.ru/magritte-ui-icon';
 import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
 import { Morph } from './Morph.js';
 import { useAnimationStage } from './Stage.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import '../internal/MetricsProvider.js';
 import '../internal/utils.js';
 import 'motion/react';

package/public/LayoutMorph.js

@@ -10,7 +10,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
 import { useInert } from '../internal/useInert.js';
 import { useActualRef, useStoreSyncedTransform, lerp, calcMorphParams } from '../internal/utils.js';
 import { AnimationStageContext } from './LayoutStage.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '@hh.ru/magritte-common-use-when-font-loaded';

package/public/LayoutStage.js

@@ -9,7 +9,7 @@ import { MorphStoreProvider, useMorphStore } from '../internal/MorphStore.js';
 import { usePaneStore } from '../internal/PaneStore.js';
 import { useInitOnce } from '../internal/utils.js';
 import { EnvironmentFingerprintNode, useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '@hh.ru/magritte-ui-divider';

package/public/Morph.js

@@ -9,7 +9,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
 import { useStoreSyncedTransform, calcMorphParams, lerp } from '../internal/utils.js';
 import { useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
 import { useAnimationStage } from './Stage.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '../internal/useInert.js';

package/public/NavBar.d.ts

@@ -24,9 +24,10 @@ export interface NavBarProps {
     startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;
     /**
      * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения
-     * высоты навбара в процессе анимации и позиции триггера начала анмиации.
+     * высоты навбара в процессе анимации и позиции триггера начала анмиации. Если передано число, то интерпретируется
+     * как отступ в пикселях от позиции триггера старта анимации.
      */
-    endTriggerPosition?: RefObject<HTMLElement | null>;
+    endTriggerPosition?: RefObject<HTMLElement | null> | number;
     /**
      * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.
      */

package/public/NavBar.js

@@ -14,6 +14,6 @@ import '../internal/useScrollAdapter.js';
 import '../internal/useSnapScroll.js';
 import '../internal/useSyncMotionValue.js';
 import '../internal/utils.js';
-export { N as NavBar, u as useNavBarContext } from '../NavBar-C_bLkCSc.js';
+export { N as NavBar, u as useNavBarContext } from '../NavBar-D9oyKBms.js';
 import '@hh.ru/magritte-internal-custom-scroll';
 //# sourceMappingURL=NavBar.js.map

package/public/Pane.js

@@ -9,7 +9,7 @@ import { useInitOnce, useStoreSyncedTransform, lerp } from '../internal/utils.js
 import { EnvironmentFingerprintProvider } from './EnvironmentFingerprintNode.js';
 import { LayoutStage } from './LayoutStage.js';
 import { Stage } from './Stage.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '../internal/MetricsProvider.js';

package/public/Stage.js

@@ -7,7 +7,7 @@ import { useMeasureAuto } from '../internal/MetricsProvider.js';
 import { usePaneStore } from '../internal/PaneStore.js';
 import { useInert } from '../internal/useInert.js';
 import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import '../internal/utils.js';
 import 'motion';
 import '../internal/KeyedSubscriptions.js';

package/public/TitleContainer.js

@@ -2,7 +2,7 @@ import './../index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { Morph } from './Morph.js';
-import { s as styles } from '../NavBar-C_bLkCSc.js';
+import { s as styles } from '../NavBar-D9oyKBms.js';
 import 'react';
 import 'motion/react';
 import '../internal/MetricsProvider.js';

package/NavBar-C_bLkCSc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavBar-C_bLkCSc.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n    /**\n     * В качестве потомков могут передаваться только компоненты <Pane />\n     */\n    children: PaneElement | PaneElement[];\n    /**\n     * Управляет режимом прозрачности:\n     * -- Прозрачность отключена (`false`)\n     * -- Прозрачный всегда (`true`)\n     * -- Прозрачный в начале анимации (`start`)\n     * -- Прозрачный в конце анимации (`end`)\n     */\n    transparent?: 'start' | 'end' | boolean;\n    /**\n     * Управляет позицией триггера начала анимации\n     */\n    startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n    /**\n     * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n     * высоты навбара в процессе анимации и позиции триггера начала анмиации.\n     */\n    endTriggerPosition?: RefObject<HTMLElement | null>;\n    /**\n     * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n     */\n    overlay?: boolean;\n    /**\n     * Управляет режимом автодоскролла. По умолчанию включен.\n     */\n    snapScroll?: boolean;\n    /**\n     * Управляет режимом отображения дивайдера:\n     * - `false` дивайдер отключен\n     * - `always` дивайдер отображается постоянно\n     * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n     */\n    showDivider?: ShowDivider;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n     */\n    animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n    children,\n    transparent = false,\n    startTriggerPosition = 'start',\n    endTriggerPosition,\n    overlay = false,\n    snapScroll: scrollSnapping = true,\n    showDivider = false,\n    animationProgress,\n}) => {\n    const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n    const prevFullHeight = useRef<null | number>(0);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n    const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n    const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry);\n    const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n        useBindScrollToAnimationProgress(\n            scrollPosition,\n            getMetrics,\n            getAnimationRanges,\n            scrollAdapter,\n            startTriggerPosition,\n            endTriggerPosition\n        );\n    const snapScroll = useSnapScroll(\n        scrollPosition,\n        totalAnimationProgress,\n        scrollAdapter,\n        getClosestStops,\n        scrollSnapping\n    );\n\n    // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n    const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n    useResetFocus(rootRef, totalAnimationProgress);\n    useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n    const dividerVisibility =\n        // eslint-disable-next-line no-nested-ternary\n        showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n    const registerPaneStore = useInitOnce(() => {\n        const subscriptions: VoidFunction[] = [];\n\n        const updateAnimationParams = () => {\n            subscriptions.length = 0;\n            invalidateMetrics();\n            invalidateAnimationRanges();\n            bindScrollToAnimationScheduled();\n            const navBarMetrics = getMetrics();\n            const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n\n            let scroll = scrollAdapter.getScrollTop();\n            if (prevFullHeight.current !== null && scroll !== 0) {\n                const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n                scroll += heightDelta;\n\n                requestAnimationFrame(() => {\n                    scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n                    scrollPosition.jump(scrollAdapter.getScrollTop());\n                });\n            }\n\n            const animationRanges = getAnimationRanges();\n            [...paneStoreRegistry.values()].forEach((paneStore) => {\n                const range = animationRanges.get(paneStore.get('id'));\n                if (!range) {\n                    return;\n                }\n                const remapFn = remap(\n                    range[0] === 0 && range[1] === 0\n                        ? [0, 1]\n                        : [range[0] / navBarMetrics.heightDelta, range[1] / navBarMetrics.heightDelta],\n                    [0, 1]\n                );\n                const motionValue = paneStore.get('motionValue');\n                motionValue.set(remapFn(totalAnimationProgress.get()));\n                subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n            });\n\n            prevFullHeight.current = fullPanesStartHeight;\n        };\n\n        // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n        // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n        // количество вызовов при массовых изменениях\n        const onChange = scheduleMacro(updateAnimationParams);\n\n        return (paneStore: PaneStore) => {\n            const unsubscribe = paneStore.onChange(['startHeight', 'endHeight', 'top', 'foldable'], onChange);\n            paneStoreRegistry.add(paneStore);\n            return () => {\n                paneStoreRegistry.delete(paneStore);\n                unsubscribe();\n            };\n        };\n    });\n\n    useLayoutEffect(() => {\n        bindScrollToAnimation();\n        snapScroll();\n        if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n            return void 0;\n        }\n        return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n    }, [\n        startTriggerPosition,\n        endTriggerPosition,\n        bindScrollToAnimation,\n        bindScrollToAnimationScheduled,\n        snapScroll,\n        scrollAdapter,\n    ]);\n\n    // Вкладываем панели друг в друга через проп nextPane\n    const items = React.Children.toArray(children) as PaneElement[];\n\n    const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n        return React.cloneElement<InternalPaneProps>(child, {\n            ...child.props,\n            nextPane: acc,\n        }) as PaneElement;\n    }, null);\n\n    return (\n        <Layer layer=\"navigation-bar\">\n            <MetricsProvider\n                className={classNames(styles.navBar, {\n                    [styles.navbarTransparentStart]: transparent === 'start',\n                    [styles.navbarTransparentEnd]: transparent === 'end',\n                    [styles.navbarNotTransparent]: !transparent,\n                    [styles.navBarOverlay]: overlay,\n                })}\n                ref={rootRef}\n                measureClassName={styles.metricsMode}\n            >\n                <div className={styles.navBarOverlayWrapper}>\n                    <div className={styles.navBarContentContainer}>\n                        <motion.div\n                            style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n                            className={styles.navBarPanesContainer}\n                        >\n                            <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n                        </motion.div>\n                        <motion.div\n                            className={styles.dividerContainer}\n                            style={{ ...dividerStyle, visibility: dividerVisibility }}\n                        >\n                            <Divider />\n                        </motion.div>\n                    </div>\n                </div>\n            </MetricsProvider>\n        </Layer>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}