@hh.ru/magritte-ui-nav-bar 1.0.1 → 1.0.2

package/internal/useBindScrollToAnimationProgress.js

@@ -50,8 +50,11 @@ const createScrollToAnimationProgressMapFn = (getNavBarMetrics, scrollAdapter, a
     }
     return [remap([startPos, endPos], [0, endProgress]), () => ({ bottom: startPos, top: endPos })];
 };
+const isDividerVisible = (scrollTop, navBarTop, heightDelta, animationProgress) => Math.ceil(navBarTop + heightDelta * animationProgress) < Math.floor(scrollTop);
 const useBindScrollToAnimationProgress = (scrollPosition, getNavBarMetrics, getAnimationRanges, scrollAdapter, startTriggerPosition, endTriggerPosition) => {
     const totalAnimationProgress = useMotionValue(0);
+    const dividerVisibility = useMotionValue('hidden');
+    const dividerOffsetY = useMotionValue(0);
     const startTriggerPositionRef = useActualRef(startTriggerPosition);
     const endTriggerPositionRef = useActualRef(endTriggerPosition);
     const getClosestStopsRef = useRef(null);
@@ -59,14 +62,22 @@ const useBindScrollToAnimationProgress = (scrollPosition, getNavBarMetrics, getA
         let unsubscribe = null;
         return () => {
             unsubscribe?.();
-            const { heightDelta } = getNavBarMetrics();
+            const { heightDelta, top } = getNavBarMetrics();
             const animationRanges = [
                 ...new Set([...getAnimationRanges().values()].map((range) => [range[0] / heightDelta, range[1] / heightDelta])),
             ].sort((a, b) => b[0] - a[0]);
             const [mapFn, getClosestStops] = createScrollToAnimationProgressMapFn(getNavBarMetrics, scrollAdapter, animationRanges, startTriggerPositionRef.current, endTriggerPositionRef.current);
             getClosestStopsRef.current = getClosestStops;
-            unsubscribe = scrollPosition.on('change', (value) => totalAnimationProgress.set(mapFn(value)));
+            const updateDivider = (scrollPosition, totalAnimationProgress) => {
+                dividerVisibility.set(isDividerVisible(scrollPosition, top, heightDelta, totalAnimationProgress) ? 'visible' : 'hidden');
+                dividerOffsetY.set(-heightDelta * totalAnimationProgress);
+            };
+            unsubscribe = scrollPosition.on('change', (value) => {
+                totalAnimationProgress.set(mapFn(value));
+                updateDivider(value, totalAnimationProgress.get());
+            });
             totalAnimationProgress.set(mapFn(scrollPosition.get()));
+            updateDivider(scrollPosition.get(), totalAnimationProgress.get());
         };
     });
     const getClosestStops = useInitOnce(() => () => {
@@ -75,7 +86,12 @@ const useBindScrollToAnimationProgress = (scrollPosition, getNavBarMetrics, getA
         }
         return { bottom: 0, top: getNavBarMetrics().heightDelta };
     });
-    return [bindScrollToAnimation, getClosestStops, totalAnimationProgress];
+    return [
+        bindScrollToAnimation,
+        getClosestStops,
+        totalAnimationProgress,
+        { visibility: dividerVisibility, y: dividerOffsetY },
+    ];
 };
 
 export { useBindScrollToAnimationProgress };

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 MotionValue } from 'motion';\nimport { 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>,\n    endTriggerPosition?: RefObject<HTMLElement>\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\nexport const useBindScrollToAnimationProgress = (\n    scrollPosition: MotionValue<number>,\n    getNavBarMetrics: () => NavBarMetrics,\n    getAnimationRanges: () => AnimationRanges,\n    scrollAdapter: ScrollAdapter,\n    startTriggerPosition: 'start' | 'full-area' | RefObject<HTMLElement>,\n    endTriggerPosition?: RefObject<HTMLElement>\n): [VoidFunction, () => { top: number; bottom: number }, MotionValue<number>] => {\n    const totalAnimationProgress = 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 } = 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            unsubscribe = scrollPosition.on('change', (value) => totalAnimationProgress.set(mapFn(value)));\n            totalAnimationProgress.set(mapFn(scrollPosition.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 [bindScrollToAnimation, getClosestStops, totalAnimationProgress];\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>\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-nav-bar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@hh.ru/magritte-common-use-when-font-loaded": "1.0.12",
-    "@hh.ru/magritte-design-tokens": "23.2.2",
+    "@hh.ru/magritte-design-tokens": "23.2.3",
     "@hh.ru/magritte-internal-custom-scroll": "2.0.0",
-    "@hh.ru/magritte-ui-divider": "3.0.6",
-    "@hh.ru/magritte-ui-icon": "13.1.0",
-    "@hh.ru/magritte-ui-layer": "3.0.4"
+    "@hh.ru/magritte-ui-divider": "3.0.7",
+    "@hh.ru/magritte-ui-icon": "13.1.1",
+    "@hh.ru/magritte-ui-layer": "3.0.5"
   },
-  "gitHead": "b01f070fc5e24a45a987ba451165c2f90733a37e"
+  "gitHead": "90a91eaf0ef55ef0ae534be060b7bf4c27736f36"
 }

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-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import '../internal/MetricsProvider.js';
 import '../internal/utils.js';
 import 'motion/react';
@@ -19,7 +19,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../src/public/Actions.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    isValidElement,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n    type FC,\n    type ReactNode,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface ActionsProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode | ReactNode[];\n    /**\n     * Контент правого слота\n     */\n    right?: ReactNode | ReactNode[];\n    /**\n     * Контент центрального слота\n     */\n    children?: ReactNode;\n    /**\n     * Включает центрирование контента центрального слота относительно всего компонента.\n     */\n    centered?: boolean;\n    /**\n     * Управляет автоматическим оборачиванием всего контента в компоненты <Morph />.\n     * По умолчанию включен, но может быть отключен если требуется более сложное описание анимации\n     * чем используется по умолчанию.\n     */\n    autoMorph?: boolean;\n}\n\nconst wrapToMorph = (node: ReactNode | ReactNode[], isRight: boolean) => {\n    const arr =\n        isValidElement(node) && node.type === Fragment\n            ? Children.toArray(\n                  (node as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>).props.children\n              )\n            : Children.toArray(node);\n\n    return arr.map((node, index) => (\n        <Morph\n            className={isIconElement(node) ? styles.actionsIconMorph : ''}\n            id={`actions-component-${isRight ? 'right' : 'left'}-slot-item-${isRight ? arr.length - index : index}`}\n            key={index}\n        >\n            {node}\n        </Morph>\n    ));\n};\n\nexport const Actions: FC<PropsWithChildren<ActionsProps>> = ({\n    children,\n    left,\n    right,\n    centered = false,\n    autoMorph = true,\n}) => {\n    const stage = useAnimationStage();\n    return (\n        <div\n            className={classNames(styles.actionsContainer, {\n                [styles.actionsStartStage]: stage === 'start',\n                [styles.actionsEndStage]: stage === 'end',\n                [styles.actionsOnlyStage]: stage === 'only',\n                [styles.actionsNoChildren]: !children,\n            })}\n        >\n            {!!left && (\n                <div className={styles.actionsLeftSlot}>\n                    <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                        {autoMorph && stage !== 'only' ? wrapToMorph(left, false) : left}\n                    </EnvironmentFingerprintNode>\n                    {centered && (\n                        <div className={styles.actionsSideSlotContentClone} aria-hidden=\"true\">\n                            {right}\n                        </div>\n                    )}\n                </div>\n            )}\n\n            {(!!children || !left || !right) && (\n                <div className={classNames(styles.actionsCenterSlot, { [styles.actionsCenterSlotCentered]: centered })}>\n                    {children}\n                </div>\n            )}\n\n            {!!right && (\n                <div className={styles.actionsRightSlot}>\n                    <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                        {autoMorph && stage !== 'only' ? wrapToMorph(right, true) : right}\n                    </EnvironmentFingerprintNode>\n                    {centered && (\n                        <div className={styles.actionsSideSlotContentClone} aria-hidden=\"true\">\n                            {left}\n                        </div>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Actions.js","sources":["../../src/public/Actions.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    isValidElement,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n    type FC,\n    type ReactNode,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface ActionsProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode | ReactNode[];\n    /**\n     * Контент правого слота\n     */\n    right?: ReactNode | ReactNode[];\n    /**\n     * Контент центрального слота\n     */\n    children?: ReactNode;\n    /**\n     * Включает центрирование контента центрального слота относительно всего компонента.\n     */\n    centered?: boolean;\n    /**\n     * Управляет автоматическим оборачиванием всего контента в компоненты <Morph />.\n     * По умолчанию включен, но может быть отключен если требуется более сложное описание анимации\n     * чем используется по умолчанию.\n     */\n    autoMorph?: boolean;\n}\n\nconst wrapToMorph = (node: ReactNode | ReactNode[], isRight: boolean) => {\n    const arr =\n        isValidElement(node) && node.type === Fragment\n            ? Children.toArray(\n                  (node as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>).props.children\n              )\n            : Children.toArray(node);\n\n    return arr.map((node, index) => (\n        <Morph\n            className={isIconElement(node) ? styles.actionsIconMorph : ''}\n            id={`actions-component-${isRight ? 'right' : 'left'}-slot-item-${isRight ? arr.length - index : index}`}\n            key={index}\n        >\n            {node}\n        </Morph>\n    ));\n};\n\nexport const Actions: FC<PropsWithChildren<ActionsProps>> = ({\n    children,\n    left,\n    right,\n    centered = false,\n    autoMorph = true,\n}) => {\n    const stage = useAnimationStage();\n    return (\n        <div\n            className={classNames(styles.actionsContainer, {\n                [styles.actionsStartStage]: stage === 'start',\n                [styles.actionsEndStage]: stage === 'end',\n                [styles.actionsOnlyStage]: stage === 'only',\n                [styles.actionsNoChildren]: !children,\n            })}\n        >\n            {!!left && (\n                <div className={styles.actionsLeftSlot}>\n                    <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                        {autoMorph && stage !== 'only' ? wrapToMorph(left, false) : left}\n                    </EnvironmentFingerprintNode>\n                    {centered && (\n                        <div className={styles.actionsSideSlotContentClone} aria-hidden=\"true\">\n                            {right}\n                        </div>\n                    )}\n                </div>\n            )}\n\n            {(!!children || !left || !right) && (\n                <div className={classNames(styles.actionsCenterSlot, { [styles.actionsCenterSlotCentered]: centered })}>\n                    {children}\n                </div>\n            )}\n\n            {!!right && (\n                <div className={styles.actionsRightSlot}>\n                    <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                        {autoMorph && stage !== 'only' ? wrapToMorph(right, true) : right}\n                    </EnvironmentFingerprintNode>\n                    {centered && (\n                        <div className={styles.actionsSideSlotContentClone} aria-hidden=\"true\">\n                            {left}\n                        </div>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/public/LayoutMorph.js

@@ -8,7 +8,7 @@ import { useMorphStore } from '../internal/MorphStore.js';
 import { usePaneStore } from '../internal/PaneStore.js';
 import { useActualRef, useStoreSyncedTransform, lerp, calcMorphParams } from '../internal/utils.js';
 import { AnimationStageContext } from './LayoutStage.js';
-import { s as styles } from '../NavBar-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '@hh.ru/magritte-common-use-when-font-loaded';
@@ -18,7 +18,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/LayoutMorph.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutMorph.js","sources":["../../src/public/LayoutMorph.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { type HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useMeasureManual } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport {\n    lerp,\n    useActualRef,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type MorphSetup,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { AnimationStageContext } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\n\nimport styles from './nav-bar.less';\n\nconst startKey = (id: string) => `${id}-start`;\nconst endKey = (id: string) => `${id}-end`;\n\nconst LayoutMorphContext = createContext<string>('#container');\nconst useLayoutMorphContext = () => useContext(LayoutMorphContext);\n\nconst calcParams = (\n    setup: MorphSetup,\n    sizeAxis: SizeAxis,\n    horizontalPositionAlign: HorizontalAlign,\n    verticalPositionAlign: VerticalAlign\n) => {\n    const start = DOMRect.fromRect(setup.start);\n    start.x -= setup.containerStart.x;\n    start.y -= setup.containerStart.y;\n\n    const end = DOMRect.fromRect(setup.end);\n    end.x -= setup.containerEnd.x;\n    end.y -= setup.containerEnd.y;\n\n    return calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n};\n\nexport type LayoutMorphProps = PropsWithChildren<\n    {\n        /**\n         * Задает стадию анимации на которой элемент будет виден.\n         * Если не задан, то элемент будет виден на протяжении всей анимации.\n         */\n        stage?: 'start' | 'end';\n        /**\n         * Позволяет анимировать элементы через морфинг, задав между ними связь с помощью указания одинакового `id`\n         * и разных `stage`\n         */\n        id?: string;\n        /**\n         * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n         * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n         * анимации.\n         * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n         * результат и минимизации искажения пропорций.\n         */\n        sizeAxis?: SizeAxis;\n        /**\n         * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        horizontalPositionAlign?: HorizontalAlign;\n        /**\n         * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        verticalPositionAlign?: VerticalAlign;\n    } & HTMLMotionProps<'div'>\n>;\n\nexport const LayoutMorph: FC<LayoutMorphProps> = ({\n    children,\n    stage,\n    id: manualId,\n    sizeAxis = 'auto',\n    verticalPositionAlign = 'center',\n    horizontalPositionAlign = 'center',\n    ...rest\n}) => {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const paneStore = usePaneStore();\n\n    const width = useMotionValue<'auto' | number>('auto');\n    const height = useMotionValue<'auto' | number>('auto');\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n    const opacity = useMotionValue(stage !== 'end' ? 1 : 0);\n    const pointerEvents = useMotionValue<'auto' | 'none'>('auto');\n\n    const childRef: MutableRefObject<HTMLElement | null> = useRef(null);\n\n    const containerId = useLayoutMorphContext();\n\n    useLayoutEffect(() => {\n        if (!rootRef.current || !rootRef.current.firstChild) {\n            return;\n        }\n        if (rootRef.current.children.length > 1) {\n            throw new Error(\n                'LayoutMorph expects exactly one child HTML element. Please wrap multiple children in a container.'\n            );\n        }\n        childRef.current = rootRef.current.firstChild as HTMLElement;\n    }, []);\n\n    const isManual = !!manualId && !!stage;\n\n    const actualIdRef = useActualRef(isManual ? manualId : id);\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startKey(id), endKey(id), startKey(containerId), endKey(containerId)],\n        () => {\n            const basicRect = new DOMRectReadOnly();\n            const sk = stage === 'end' ? endKey : startKey;\n            const ek = stage === 'end' ? startKey : endKey;\n            const setup = {\n                start: morphStore.get(sk(actualIdRef.current)) ?? basicRect,\n                end: morphStore.get(ek(actualIdRef.current)) ?? basicRect,\n                containerStart: morphStore.get(sk(containerId)) ?? basicRect,\n                containerEnd: morphStore.get(ek(containerId)) ?? basicRect,\n            };\n\n            const params = calcParams(\n                setup,\n                isManual ? sizeAxis : 'both',\n                isManual ? horizontalPositionAlign : 'left',\n                isManual ? verticalPositionAlign : 'top'\n            );\n            const startX = setup.start.x - setup.containerStart.x;\n            const startY = setup.start.y - setup.containerStart.y;\n\n            if (isManual) {\n                width.set(setup.start.width);\n                height.set(setup.start.height);\n                return (progress: number) => {\n                    const p = stage === 'end' ? 1 - progress : progress;\n                    x.set(lerp(startX, startX + params.deltaX, p));\n                    y.set(lerp(startY, startY + params.deltaY, p));\n                    scaleX.set(lerp(1, params.scaleX, p));\n                    scaleY.set(lerp(1, params.scaleY, p));\n                    pointerEvents.set(p === 0 || (p === 1 && !stage) ? 'auto' : 'none');\n                    stage && opacity.set(1 - p);\n                };\n            }\n\n            scaleX.set(1);\n            scaleY.set(1);\n            return (progress: number) => {\n                const p = stage === 'end' ? 1 - progress : progress;\n                x.set(lerp(startX, startX + params.deltaX, p));\n                y.set(lerp(startY, startY + params.deltaY, p));\n                width.set(lerp(setup.start.width, setup.start.width * params.scaleX, p));\n                height.set(lerp(setup.start.height, setup.start.height * params.scaleY, p));\n                pointerEvents.set(p === 0 || (p === 1 && !stage) ? 'auto' : 'none');\n                stage && opacity.set(1 - p);\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    useMeasureManual(childRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            (stage === 'start' || !stage) && morphStore.set(startKey(actualIdRef.current), rect);\n            // если элемент виден только в начальной или конечной точке анимации, то его позиция и размер\n            // не меняются в процессе анимации, только прозрачность\n            stage === 'start' && morphStore.set(endKey(actualIdRef.current), rect);\n        } else if (animationStageRef.current === 'end') {\n            (stage === 'end' || !stage) && morphStore.set(endKey(actualIdRef.current), rect);\n            if ((!isManual || morphStore.get(startKey(actualIdRef.current)) === null) && stage === 'end') {\n                morphStore.set(startKey(actualIdRef.current), rect);\n            }\n        }\n    });\n\n    return (\n        <motion.div\n            {...rest}\n            ref={rootRef}\n            className={classNames(styles.layoutMorph, {\n                [styles.layoutMorphStart]: stage === 'start',\n                [styles.layoutMorphEnd]: stage === 'end',\n                [styles.morphItemTop]: verticalPositionAlign === 'top' && isManual,\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom' && isManual,\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left' && isManual,\n                [styles.morphItemRight]: horizontalPositionAlign === 'right' && isManual,\n            })}\n            style={{ width, height, x, y, scaleX, scaleY, opacity, pointerEvents }}\n        >\n            <LayoutMorphContext.Provider value={id}>{children}</LayoutMorphContext.Provider>\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"LayoutMorph.js","sources":["../../src/public/LayoutMorph.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { type HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useMeasureManual } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport {\n    lerp,\n    useActualRef,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type MorphSetup,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { AnimationStageContext } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\n\nimport styles from './nav-bar.less';\n\nconst startKey = (id: string) => `${id}-start`;\nconst endKey = (id: string) => `${id}-end`;\n\nconst LayoutMorphContext = createContext<string>('#container');\nconst useLayoutMorphContext = () => useContext(LayoutMorphContext);\n\nconst calcParams = (\n    setup: MorphSetup,\n    sizeAxis: SizeAxis,\n    horizontalPositionAlign: HorizontalAlign,\n    verticalPositionAlign: VerticalAlign\n) => {\n    const start = DOMRect.fromRect(setup.start);\n    start.x -= setup.containerStart.x;\n    start.y -= setup.containerStart.y;\n\n    const end = DOMRect.fromRect(setup.end);\n    end.x -= setup.containerEnd.x;\n    end.y -= setup.containerEnd.y;\n\n    return calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n};\n\nexport type LayoutMorphProps = PropsWithChildren<\n    {\n        /**\n         * Задает стадию анимации на которой элемент будет виден.\n         * Если не задан, то элемент будет виден на протяжении всей анимации.\n         */\n        stage?: 'start' | 'end';\n        /**\n         * Позволяет анимировать элементы через морфинг, задав между ними связь с помощью указания одинакового `id`\n         * и разных `stage`\n         */\n        id?: string;\n        /**\n         * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n         * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n         * анимации.\n         * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n         * результат и минимизации искажения пропорций.\n         */\n        sizeAxis?: SizeAxis;\n        /**\n         * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        horizontalPositionAlign?: HorizontalAlign;\n        /**\n         * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        verticalPositionAlign?: VerticalAlign;\n    } & HTMLMotionProps<'div'>\n>;\n\nexport const LayoutMorph: FC<LayoutMorphProps> = ({\n    children,\n    stage,\n    id: manualId,\n    sizeAxis = 'auto',\n    verticalPositionAlign = 'center',\n    horizontalPositionAlign = 'center',\n    ...rest\n}) => {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const paneStore = usePaneStore();\n\n    const width = useMotionValue<'auto' | number>('auto');\n    const height = useMotionValue<'auto' | number>('auto');\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n    const opacity = useMotionValue(stage !== 'end' ? 1 : 0);\n    const pointerEvents = useMotionValue<'auto' | 'none'>('auto');\n\n    const childRef: MutableRefObject<HTMLElement | null> = useRef(null);\n\n    const containerId = useLayoutMorphContext();\n\n    useLayoutEffect(() => {\n        if (!rootRef.current || !rootRef.current.firstChild) {\n            return;\n        }\n        if (rootRef.current.children.length > 1) {\n            throw new Error(\n                'LayoutMorph expects exactly one child HTML element. Please wrap multiple children in a container.'\n            );\n        }\n        childRef.current = rootRef.current.firstChild as HTMLElement;\n    }, []);\n\n    const isManual = !!manualId && !!stage;\n\n    const actualIdRef = useActualRef(isManual ? manualId : id);\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startKey(id), endKey(id), startKey(containerId), endKey(containerId)],\n        () => {\n            const basicRect = new DOMRectReadOnly();\n            const sk = stage === 'end' ? endKey : startKey;\n            const ek = stage === 'end' ? startKey : endKey;\n            const setup = {\n                start: morphStore.get(sk(actualIdRef.current)) ?? basicRect,\n                end: morphStore.get(ek(actualIdRef.current)) ?? basicRect,\n                containerStart: morphStore.get(sk(containerId)) ?? basicRect,\n                containerEnd: morphStore.get(ek(containerId)) ?? basicRect,\n            };\n\n            const params = calcParams(\n                setup,\n                isManual ? sizeAxis : 'both',\n                isManual ? horizontalPositionAlign : 'left',\n                isManual ? verticalPositionAlign : 'top'\n            );\n            const startX = setup.start.x - setup.containerStart.x;\n            const startY = setup.start.y - setup.containerStart.y;\n\n            if (isManual) {\n                width.set(setup.start.width);\n                height.set(setup.start.height);\n                return (progress: number) => {\n                    const p = stage === 'end' ? 1 - progress : progress;\n                    x.set(lerp(startX, startX + params.deltaX, p));\n                    y.set(lerp(startY, startY + params.deltaY, p));\n                    scaleX.set(lerp(1, params.scaleX, p));\n                    scaleY.set(lerp(1, params.scaleY, p));\n                    pointerEvents.set(p === 0 || (p === 1 && !stage) ? 'auto' : 'none');\n                    stage && opacity.set(1 - p);\n                };\n            }\n\n            scaleX.set(1);\n            scaleY.set(1);\n            return (progress: number) => {\n                const p = stage === 'end' ? 1 - progress : progress;\n                x.set(lerp(startX, startX + params.deltaX, p));\n                y.set(lerp(startY, startY + params.deltaY, p));\n                width.set(lerp(setup.start.width, setup.start.width * params.scaleX, p));\n                height.set(lerp(setup.start.height, setup.start.height * params.scaleY, p));\n                pointerEvents.set(p === 0 || (p === 1 && !stage) ? 'auto' : 'none');\n                stage && opacity.set(1 - p);\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    useMeasureManual(childRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            (stage === 'start' || !stage) && morphStore.set(startKey(actualIdRef.current), rect);\n            // если элемент виден только в начальной или конечной точке анимации, то его позиция и размер\n            // не меняются в процессе анимации, только прозрачность\n            stage === 'start' && morphStore.set(endKey(actualIdRef.current), rect);\n        } else if (animationStageRef.current === 'end') {\n            (stage === 'end' || !stage) && morphStore.set(endKey(actualIdRef.current), rect);\n            if ((!isManual || morphStore.get(startKey(actualIdRef.current)) === null) && stage === 'end') {\n                morphStore.set(startKey(actualIdRef.current), rect);\n            }\n        }\n    });\n\n    return (\n        <motion.div\n            {...rest}\n            ref={rootRef}\n            className={classNames(styles.layoutMorph, {\n                [styles.layoutMorphStart]: stage === 'start',\n                [styles.layoutMorphEnd]: stage === 'end',\n                [styles.morphItemTop]: verticalPositionAlign === 'top' && isManual,\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom' && isManual,\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left' && isManual,\n                [styles.morphItemRight]: horizontalPositionAlign === 'right' && isManual,\n            })}\n            style={{ width, height, x, y, scaleX, scaleY, opacity, pointerEvents }}\n        >\n            <LayoutMorphContext.Provider value={id}>{children}</LayoutMorphContext.Provider>\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

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-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '@hh.ru/magritte-ui-divider';
@@ -17,7 +17,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/LayoutStage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStage.js","sources":["../../src/public/LayoutStage.tsx"],"sourcesContent":["import {\n    createContext,\n    createRef,\n    useContext,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport {\n    MetricsProvider,\n    useMeasureManual,\n    useRemeasureAllManual,\n} from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { MorphStoreProvider, useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport {\n    EnvironmentFingerprintNode,\n    useEnvironmentFingerprint,\n} from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\nexport const CONTAINER_START_KEY = '#container-start';\nexport const CONTAINER_END_KEY = '#container-end';\n\nexport type AnimationStage = 'start' | 'end' | 'progress';\n\nexport const AnimationStageContext = createContext<MutableRefObject<AnimationStage | null>>(createRef());\n\nconst stageClasses = {\n    start: 'nav-bar-layout-animation-stage-start',\n    end: 'nav-bar-layout-animation-stage-end',\n    progress: styles.animationStageProgress,\n} as const;\n\nconst CombinedStageAnimationMeasurementManager: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({\n    children,\n    ...rest\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const currentClassRef = useRef<string>(stageClasses.start);\n    const paneStore = usePaneStore();\n    const forceMeasure = useRemeasureAllManual();\n    const setStage = useInitOnce(() => (stage: AnimationStage) => {\n        if (!wrapperRef.current) {\n            return;\n        }\n\n        for (const animClasses of Object.entries(stageClasses)) {\n            wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);\n        }\n        currentClassRef.current = stageClasses[stage];\n        animationStageRef.current = stage;\n    });\n    const measureSubtree = useInitOnce(() => () => {\n        setStage('start');\n        forceMeasure();\n        setStage('end');\n        forceMeasure();\n        setStage('progress');\n    });\n\n    const height = useMotionValue<number | 'auto'>('auto');\n\n    useMeasureManual(wrapperRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            height.set(rect.height);\n            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно\n            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute\n            if (wrapperRef.current) {\n                wrapperRef.current.style.height = `${rect.height}px`;\n            }\n            paneStore.set({ top: rect.top, startHeight: rect.height });\n            morphStore.set(CONTAINER_START_KEY, rect);\n        } else {\n            paneStore.set({ endHeight: rect.height });\n            morphStore.set(CONTAINER_END_KEY, rect);\n        }\n    });\n\n    useEnvironmentFingerprint(measureSubtree);\n    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());\n\n    return (\n        <motion.div\n            ref={wrapperRef}\n            {...rest}\n            className={classNames(styles.layoutAnimationContainer, currentClassRef.current)}\n            style={{ height }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({ children, ...rest }) => {\n    const stageRef = useRef<AnimationStage | null>('start');\n\n    return (\n        <EnvironmentFingerprintNode style={{ pointerEvents: 'auto' }}>\n            <MorphStoreProvider>\n                <AnimationStageContext.Provider value={stageRef}>\n                    <MetricsProvider>\n                        <CombinedStageAnimationMeasurementManager {...rest}>\n                            {children}\n                        </CombinedStageAnimationMeasurementManager>\n                    </MetricsProvider>\n                </AnimationStageContext.Provider>\n            </MorphStoreProvider>\n        </EnvironmentFingerprintNode>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"LayoutStage.js","sources":["../../src/public/LayoutStage.tsx"],"sourcesContent":["import {\n    createContext,\n    createRef,\n    useContext,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport {\n    MetricsProvider,\n    useMeasureManual,\n    useRemeasureAllManual,\n} from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { MorphStoreProvider, useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport {\n    EnvironmentFingerprintNode,\n    useEnvironmentFingerprint,\n} from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\nexport const CONTAINER_START_KEY = '#container-start';\nexport const CONTAINER_END_KEY = '#container-end';\n\nexport type AnimationStage = 'start' | 'end' | 'progress';\n\nexport const AnimationStageContext = createContext<MutableRefObject<AnimationStage | null>>(createRef());\n\nconst stageClasses = {\n    start: 'nav-bar-layout-animation-stage-start',\n    end: 'nav-bar-layout-animation-stage-end',\n    progress: styles.animationStageProgress,\n} as const;\n\nconst CombinedStageAnimationMeasurementManager: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({\n    children,\n    ...rest\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const currentClassRef = useRef<string>(stageClasses.start);\n    const paneStore = usePaneStore();\n    const forceMeasure = useRemeasureAllManual();\n    const setStage = useInitOnce(() => (stage: AnimationStage) => {\n        if (!wrapperRef.current) {\n            return;\n        }\n\n        for (const animClasses of Object.entries(stageClasses)) {\n            wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);\n        }\n        currentClassRef.current = stageClasses[stage];\n        animationStageRef.current = stage;\n    });\n    const measureSubtree = useInitOnce(() => () => {\n        setStage('start');\n        forceMeasure();\n        setStage('end');\n        forceMeasure();\n        setStage('progress');\n    });\n\n    const height = useMotionValue<number | 'auto'>('auto');\n\n    useMeasureManual(wrapperRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            height.set(rect.height);\n            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно\n            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute\n            if (wrapperRef.current) {\n                wrapperRef.current.style.height = `${rect.height}px`;\n            }\n            paneStore.set({ top: rect.top, startHeight: rect.height });\n            morphStore.set(CONTAINER_START_KEY, rect);\n        } else {\n            paneStore.set({ endHeight: rect.height });\n            morphStore.set(CONTAINER_END_KEY, rect);\n        }\n    });\n\n    useEnvironmentFingerprint(measureSubtree);\n    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());\n\n    return (\n        <motion.div\n            ref={wrapperRef}\n            {...rest}\n            className={classNames(styles.layoutAnimationContainer, currentClassRef.current)}\n            style={{ height }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({ children, ...rest }) => {\n    const stageRef = useRef<AnimationStage | null>('start');\n\n    return (\n        <EnvironmentFingerprintNode style={{ pointerEvents: 'auto' }}>\n            <MorphStoreProvider>\n                <AnimationStageContext.Provider value={stageRef}>\n                    <MetricsProvider>\n                        <CombinedStageAnimationMeasurementManager {...rest}>\n                            {children}\n                        </CombinedStageAnimationMeasurementManager>\n                    </MetricsProvider>\n                </AnimationStageContext.Provider>\n            </MorphStoreProvider>\n        </EnvironmentFingerprintNode>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

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-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '@hh.ru/magritte-ui-divider';
@@ -17,7 +17,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/Morph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Morph.js","sources":["../../src/public/Morph.tsx"],"sourcesContent":["import { type PropsWithChildren, type FC, useLayoutEffect, useRef, type CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport {\n    lerp,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { useEnvironmentFingerprint } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface MorphProps extends HTMLMotionProps<'div'> {\n    /**\n     * Задает соответствие между элементами для морфинга между начальным и конечным <Stage />\n     */\n    id: string;\n    style?: CSSProperties;\n    className?: string;\n    /**\n     * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n     * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n     * анимации.\n     * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n     * результат и минимизации искажения пропорций.\n     */\n    sizeAxis?: SizeAxis;\n    /**\n     * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    horizontalPositionAlign?: HorizontalAlign;\n    /**\n     * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    verticalPositionAlign?: VerticalAlign;\n}\n\nexport const Morph: FC<PropsWithChildren<MorphProps>> = ({\n    children,\n    id,\n    className,\n    style,\n    sizeAxis = 'auto',\n    horizontalPositionAlign = 'center',\n    verticalPositionAlign = 'center',\n    ...rest\n}) => {\n    const paneStore = usePaneStore();\n    const morphStore = useMorphStore();\n    const animationStage = useAnimationStage();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n\n    const startId = `start-${id}`;\n    const endId = `end-${id}`;\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startId, endId],\n        () => {\n            const start = morphStore.get(animationStage === 'end' ? endId : startId);\n            const end = morphStore.get(animationStage === 'end' ? startId : endId);\n            const {\n                deltaX,\n                deltaY,\n                scaleX: xScale,\n                scaleY: yScale,\n            } = calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n\n            return (progress: number) => {\n                const p = animationStage === 'end' ? 1 - progress : progress;\n                x.set(lerp(0, deltaX, p));\n                y.set(lerp(0, deltaY, p));\n\n                scaleX.set(lerp(1, xScale, p));\n                scaleY.set(lerp(1, yScale, p));\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    const forceInvalidate = useMeasureAuto(rootRef, (rect) => morphStore.set(`${animationStage}-${id}`, rect), [\n        id,\n        animationStage,\n    ]);\n\n    useEnvironmentFingerprint(forceInvalidate);\n\n    useLayoutEffect(() => () => morphStore.set(`${animationStage}-${id}`, null), [morphStore, animationStage, id]);\n\n    return (\n        <motion.div\n            ref={rootRef}\n            {...rest}\n            className={classNames(styles.morphItem, className, {\n                [styles.morphItemTop]: verticalPositionAlign === 'top',\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom',\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left',\n                [styles.morphItemRight]: horizontalPositionAlign === 'right',\n            })}\n            style={{ ...(style ?? {}), x, y, scaleX, scaleY }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Morph.js","sources":["../../src/public/Morph.tsx"],"sourcesContent":["import { type PropsWithChildren, type FC, useLayoutEffect, useRef, type CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport {\n    lerp,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { useEnvironmentFingerprint } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface MorphProps extends HTMLMotionProps<'div'> {\n    /**\n     * Задает соответствие между элементами для морфинга между начальным и конечным <Stage />\n     */\n    id: string;\n    style?: CSSProperties;\n    className?: string;\n    /**\n     * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n     * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n     * анимации.\n     * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n     * результат и минимизации искажения пропорций.\n     */\n    sizeAxis?: SizeAxis;\n    /**\n     * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    horizontalPositionAlign?: HorizontalAlign;\n    /**\n     * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    verticalPositionAlign?: VerticalAlign;\n}\n\nexport const Morph: FC<PropsWithChildren<MorphProps>> = ({\n    children,\n    id,\n    className,\n    style,\n    sizeAxis = 'auto',\n    horizontalPositionAlign = 'center',\n    verticalPositionAlign = 'center',\n    ...rest\n}) => {\n    const paneStore = usePaneStore();\n    const morphStore = useMorphStore();\n    const animationStage = useAnimationStage();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n\n    const startId = `start-${id}`;\n    const endId = `end-${id}`;\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startId, endId],\n        () => {\n            const start = morphStore.get(animationStage === 'end' ? endId : startId);\n            const end = morphStore.get(animationStage === 'end' ? startId : endId);\n            const {\n                deltaX,\n                deltaY,\n                scaleX: xScale,\n                scaleY: yScale,\n            } = calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n\n            return (progress: number) => {\n                const p = animationStage === 'end' ? 1 - progress : progress;\n                x.set(lerp(0, deltaX, p));\n                y.set(lerp(0, deltaY, p));\n\n                scaleX.set(lerp(1, xScale, p));\n                scaleY.set(lerp(1, yScale, p));\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    const forceInvalidate = useMeasureAuto(rootRef, (rect) => morphStore.set(`${animationStage}-${id}`, rect), [\n        id,\n        animationStage,\n    ]);\n\n    useEnvironmentFingerprint(forceInvalidate);\n\n    useLayoutEffect(() => () => morphStore.set(`${animationStage}-${id}`, null), [morphStore, animationStage, id]);\n\n    return (\n        <motion.div\n            ref={rootRef}\n            {...rest}\n            className={classNames(styles.morphItem, className, {\n                [styles.morphItemTop]: verticalPositionAlign === 'top',\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom',\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left',\n                [styles.morphItemRight]: horizontalPositionAlign === 'right',\n            })}\n            style={{ ...(style ?? {}), x, y, scaleX, scaleY }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/public/NavBar.d.ts

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

package/public/NavBar.js

@@ -9,13 +9,12 @@ import '../internal/MetricsProvider.js';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 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-CrD8CEWb.js';
+export { N as NavBar, u as useNavBarContext } from '../NavBar-BM6rmKUJ.js';
 import '@hh.ru/magritte-internal-custom-scroll';
 //# sourceMappingURL=NavBar.js.map

package/public/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavBar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

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-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
 import '../internal/MetricsProvider.js';
@@ -20,7 +20,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/Pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pane.js","sources":["../../src/public/Pane.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    isValidElement,\n    type FC,\n    type ReactNode,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n} from 'react';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n    foldable?: boolean;\n    nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n    animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n    /**\n     * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n     */\n    foldable?: boolean;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимацией панели.\n     */\n    animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n    const items = Children.toArray(children);\n    const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n        StageProps,\n        JSXElementConstructor<StageProps>\n    >[];\n    const layoutStageContainers = items.filter(\n        (child) => isValidElement(child) && child.type === LayoutStage\n    ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n    if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n        return <Stage animationStage=\"only\">{children}</Stage>;\n    }\n\n    if (layoutStageContainers.length > 0) {\n        return cloneElement(layoutStageContainers[0]);\n    }\n\n    stageContainers.length = Math.min(stageContainers.length, 2);\n\n    return stageContainers.map((child, index) => {\n        return cloneElement(child, {\n            ...child.props,\n            animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n        });\n    });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n    const paneStore = usePaneStore();\n\n    const y = useMotionValue(0);\n    const nextPaneY = useMotionValue(0);\n    const backgroundScale = useMotionValue(1);\n    const backgroundY = useMotionValue(0);\n    useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n    const contentHeight = useMotionValue<number | 'auto'>('auto');\n    useInitOnce(() =>\n        paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto'))\n    );\n\n    paneStore.set({ foldable });\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        paneStore,\n        ['startHeight', 'endHeight'],\n        () => ({\n            start: paneStore.get('startHeight') ?? 0,\n            end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n        }),\n        (height, progress) => {\n            const heightDiff = height.end - height.start;\n            const shift = foldable ? progress * -height.start : 0;\n            y.set(shift);\n            nextPaneY.set(progress * heightDiff);\n            backgroundY.set(-shift);\n            backgroundScale.set(\n                height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n            );\n        }\n    );\n\n    return (\n        <motion.div className={styles.pane} style={{ y: foldable ? y : 0 }}>\n            <EnvironmentFingerprintProvider>\n                <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n                    <PaneContext.Provider value={paneStore}>\n                        <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n                    </PaneContext.Provider>\n                    <motion.div\n                        className={styles.paneBackground}\n                        data-foldable={foldable}\n                        style={{ scaleY: backgroundScale, y: backgroundY }}\n                    />\n                </motion.div>\n            </EnvironmentFingerprintProvider>\n\n            {!!nextPane && (\n                <motion.div\n                    className={styles.nextPane}\n                    // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n                    // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n                    // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n                    // не дойдем до конечной точки анимации, выглядит некрасиво\n                    style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n                >\n                    {nextPane}\n                </motion.div>\n            )}\n        </motion.div>\n    );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Pane.js","sources":["../../src/public/Pane.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    isValidElement,\n    type FC,\n    type ReactNode,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n} from 'react';\nimport { useMotionValue, motion, type MotionValue } from 'motion/react';\n\nimport { MorphStoreProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { PaneContext, usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { lerp, useInitOnce, useStoreSyncedTransform } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { EnvironmentFingerprintProvider } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { LayoutStage } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\nimport { Stage, type StageProps } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport type InternalPaneProps = PropsWithChildren<{\n    foldable?: boolean;\n    nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;\n    animationProgress?: MotionValue<number>;\n}>;\nexport type ExternalPaneProps = PropsWithChildren<{\n    /**\n     * Включает режим когда панель \"схлопывается\" под стоящую над ней панель.\n     */\n    foldable?: boolean;\n    /**\n     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.\n     * Прогресс анимации представляется в виде числа 0..1\n     * Предназначен для синхронизации внешних анимаций с анимацией панели.\n     */\n    animationProgress?: MotionValue<number>;\n}>;\n\nexport type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;\n\nconst renderPaneChilds = (children: ReactNode, foldable: boolean) => {\n    const items = Children.toArray(children);\n    const stageContainers = items.filter((child) => isValidElement(child) && child.type === Stage) as ReactElement<\n        StageProps,\n        JSXElementConstructor<StageProps>\n    >[];\n    const layoutStageContainers = items.filter(\n        (child) => isValidElement(child) && child.type === LayoutStage\n    ) as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>[];\n\n    if ((stageContainers.length === 0 && layoutStageContainers.length === 0) || foldable) {\n        return <Stage animationStage=\"only\">{children}</Stage>;\n    }\n\n    if (layoutStageContainers.length > 0) {\n        return cloneElement(layoutStageContainers[0]);\n    }\n\n    stageContainers.length = Math.min(stageContainers.length, 2);\n\n    return stageContainers.map((child, index) => {\n        return cloneElement(child, {\n            ...child.props,\n            animationStage: stageContainers.length === 1 ? 'only' : (['start', 'end'] as const)[index],\n        });\n    });\n};\n\nexport const Pane: FC<InternalPaneProps> = ({ children, nextPane, foldable, animationProgress }) => {\n    const paneStore = usePaneStore();\n\n    const y = useMotionValue(0);\n    const nextPaneY = useMotionValue(0);\n    const backgroundScale = useMotionValue(1);\n    const backgroundY = useMotionValue(0);\n    useSyncMotionValue(paneStore.get('motionValue'), animationProgress);\n\n    const contentHeight = useMotionValue<number | 'auto'>('auto');\n    useInitOnce(() =>\n        paneStore.onChange('startHeight', () => contentHeight.set(paneStore.get('startHeight') ?? 'auto'))\n    );\n\n    paneStore.set({ foldable });\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        paneStore,\n        ['startHeight', 'endHeight'],\n        () => ({\n            start: paneStore.get('startHeight') ?? 0,\n            end: paneStore.get('endHeight') ?? paneStore.get('startHeight') ?? 0,\n        }),\n        (height, progress) => {\n            const heightDiff = height.end - height.start;\n            const shift = foldable ? progress * -height.start : 0;\n            y.set(shift);\n            nextPaneY.set(progress * heightDiff);\n            backgroundY.set(-shift);\n            backgroundScale.set(\n                height.start === 0 ? 1 : lerp(height.start, foldable ? 0 : height.end, progress) / height.start\n            );\n        }\n    );\n\n    return (\n        <motion.div className={styles.pane} style={{ y: foldable ? y : 0 }}>\n            <EnvironmentFingerprintProvider>\n                <motion.div className={styles.paneContent} style={{ height: contentHeight }}>\n                    <PaneContext.Provider value={paneStore}>\n                        <MorphStoreProvider>{renderPaneChilds(children, !!foldable)}</MorphStoreProvider>\n                    </PaneContext.Provider>\n                    <motion.div\n                        className={styles.paneBackground}\n                        data-foldable={foldable}\n                        style={{ scaleY: backgroundScale, y: backgroundY }}\n                    />\n                </motion.div>\n            </EnvironmentFingerprintProvider>\n\n            {!!nextPane && (\n                <motion.div\n                    className={styles.nextPane}\n                    // если foldable уезжаем под контент, если нет то надо быть над контентом панели идущей перед\n                    // т.к. если контент сверху становится меньше, то во время фейда следующая панель\n                    // должна быть над ним, иначе исчезающий контент будет накладываться поверх панели пока\n                    // не дойдем до конечной точки анимации, выглядит некрасиво\n                    style={{ y: nextPaneY, zIndex: nextPane.props.foldable ? 0 : 3 }}\n                >\n                    {nextPane}\n                </motion.div>\n            )}\n        </motion.div>\n    );\n};\n\nexport const ExternalPane = Pane as FC<PropsWithChildren<ExternalPaneProps>>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/public/Stage.js

@@ -6,7 +6,7 @@ import { useTransform, motion } from 'motion/react';
 import { useMeasureAuto } from '../internal/MetricsProvider.js';
 import { usePaneStore } from '../internal/PaneStore.js';
 import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
-import { s as styles } from '../NavBar-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import '../internal/utils.js';
 import 'motion';
 import '../internal/KeyedSubscriptions.js';
@@ -15,7 +15,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/Stage.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stage.js","sources":["../../src/public/Stage.tsx"],"sourcesContent":["import { createContext, useContext, useRef, type FC, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { useTransform, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\ntype AnimationStage = 'start' | 'end' | 'only';\n\nconst AnimationStageContext = createContext<AnimationStage>('only');\n\nexport const useAnimationStage = (): AnimationStage => useContext(AnimationStageContext);\n\nexport type StageProps = PropsWithChildren<{ animationStage?: AnimationStage } & HTMLMotionProps<'div'>>;\n\nexport const Stage: FC<StageProps> = ({ children, animationStage = 'only', ...rest }) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const paneStore = usePaneStore();\n    const isStartState = animationStage === 'start' || animationStage === 'only';\n    const isEndState = animationStage === 'end' || animationStage === 'only';\n    const isOnly = animationStage === 'only';\n    const motionValue = paneStore.get('motionValue');\n    const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);\n    const pointerEvents = useTransform(motionValue, (value) =>\n        (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none'\n    );\n\n    useMeasureAuto(\n        rootRef,\n        (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }),\n        [animationStage, paneStore]\n    );\n\n    return (\n        <motion.div\n            {...rest}\n            className={isStartState ? styles.startStateContainer : styles.endStateContainer}\n            style={isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }}\n        >\n            <EnvironmentFingerprintNode\n                ref={rootRef}\n                className={classNames(styles.contentContainer, styles.navBarStage)}\n            >\n                <AnimationStageContext.Provider value={animationStage ?? 'only'}>\n                    {children}\n                </AnimationStageContext.Provider>\n            </EnvironmentFingerprintNode>\n        </motion.div>\n    );\n};\n\nexport const ExternalStage = Stage as FC<PropsWithChildren>;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqB,GAAG,aAAa,CAAiB,MAAM,CAAC,CAAC;AAEvD,MAAA,iBAAiB,GAAG,MAAsB,UAAU,CAAC,qBAAqB,EAAE;AAI5E,MAAA,KAAK,GAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,KAAI;AACpF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,CAAC;IAC7E,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,CAAC;AACzE,IAAA,MAAM,MAAM,GAAG,cAAc,KAAK,MAAM,CAAC;IACzC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClF,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,KAClD,CAAC,YAAY,IAAI,KAAK,KAAK,CAAC,MAAM,UAAU,IAAI,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,CACjF,CAAC;AAEF,IAAA,cAAc,CACV,OAAO,EACP,CAAC,IAAI,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,GAAG,aAAa,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EACrG,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,QACIA,GAAC,CAAA,MAAM,CAAC,GAAG,EAAA,EAAA,GACH,IAAI,EACR,SAAS,EAAE,YAAY,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,EAC/E,KAAK,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,aAAa,EAAE,YAE7EA,GAAC,CAAA,0BAA0B,IACvB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,EAElE,QAAA,EAAAA,GAAA,CAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,IAAI,MAAM,EAC1D,QAAA,EAAA,QAAQ,GACoB,EACR,CAAA,EAAA,CACpB,EACf;AACN,EAAE;AAEK,MAAM,aAAa,GAAG;;;;"}
+{"version":3,"file":"Stage.js","sources":["../../src/public/Stage.tsx"],"sourcesContent":["import { createContext, useContext, useRef, type FC, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { useTransform, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\ntype AnimationStage = 'start' | 'end' | 'only';\n\nconst AnimationStageContext = createContext<AnimationStage>('only');\n\nexport const useAnimationStage = (): AnimationStage => useContext(AnimationStageContext);\n\nexport type StageProps = PropsWithChildren<{ animationStage?: AnimationStage } & HTMLMotionProps<'div'>>;\n\nexport const Stage: FC<StageProps> = ({ children, animationStage = 'only', ...rest }) => {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const paneStore = usePaneStore();\n    const isStartState = animationStage === 'start' || animationStage === 'only';\n    const isEndState = animationStage === 'end' || animationStage === 'only';\n    const isOnly = animationStage === 'only';\n    const motionValue = paneStore.get('motionValue');\n    const opacity = useTransform(motionValue, [0, 1], isStartState ? [1, 0] : [0, 1]);\n    const pointerEvents = useTransform(motionValue, (value) =>\n        (isStartState && value === 0) || (isEndState && value === 1) ? 'auto' : 'none'\n    );\n\n    useMeasureAuto(\n        rootRef,\n        (rect) => paneStore.set({ top: rect.top, [isStartState ? 'startHeight' : 'endHeight']: rect.height }),\n        [animationStage, paneStore]\n    );\n\n    return (\n        <motion.div\n            {...rest}\n            className={isStartState ? styles.startStateContainer : styles.endStateContainer}\n            style={isOnly && !paneStore.get('foldable') ? {} : { opacity, pointerEvents }}\n        >\n            <EnvironmentFingerprintNode\n                ref={rootRef}\n                className={classNames(styles.contentContainer, styles.navBarStage)}\n            >\n                <AnimationStageContext.Provider value={animationStage ?? 'only'}>\n                    {children}\n                </AnimationStageContext.Provider>\n            </EnvironmentFingerprintNode>\n        </motion.div>\n    );\n};\n\nexport const ExternalStage = Stage as FC<PropsWithChildren>;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,qBAAqB,GAAG,aAAa,CAAiB,MAAM,CAAC,CAAC;AAEvD,MAAA,iBAAiB,GAAG,MAAsB,UAAU,CAAC,qBAAqB,EAAE;AAI5E,MAAA,KAAK,GAAmB,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,KAAI;AACpF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,YAAY,GAAG,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,CAAC;IAC7E,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,CAAC;AACzE,IAAA,MAAM,MAAM,GAAG,cAAc,KAAK,MAAM,CAAC;IACzC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAClF,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC,KAAK,KAClD,CAAC,YAAY,IAAI,KAAK,KAAK,CAAC,MAAM,UAAU,IAAI,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,CACjF,CAAC;AAEF,IAAA,cAAc,CACV,OAAO,EACP,CAAC,IAAI,KAAK,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,GAAG,aAAa,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EACrG,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,QACIA,GAAC,CAAA,MAAM,CAAC,GAAG,EAAA,EAAA,GACH,IAAI,EACR,SAAS,EAAE,YAAY,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,iBAAiB,EAC/E,KAAK,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,aAAa,EAAE,YAE7EA,GAAC,CAAA,0BAA0B,IACvB,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,EAElE,QAAA,EAAAA,GAAA,CAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,IAAI,MAAM,EAC1D,QAAA,EAAA,QAAQ,GACoB,EACR,CAAA,EAAA,CACpB,EACf;AACN,EAAE;AAEK,MAAM,aAAa,GAAG;;;;"}

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-CrD8CEWb.js';
+import { s as styles } from '../NavBar-BM6rmKUJ.js';
 import 'react';
 import 'motion/react';
 import '../internal/MetricsProvider.js';
@@ -18,7 +18,6 @@ import '@hh.ru/magritte-ui-layer';
 import '../internal/ProgressiveBlur.js';
 import '../internal/useAnimationRanges.js';
 import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useDivider.js';
 import '../internal/useNavBarMetrics.js';
 import '../internal/useResetFocus.js';
 import '../internal/useScrollAdapter.js';

package/public/TitleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleContainer.js","sources":["../../src/public/TitleContainer.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\n\nimport styles from './nav-bar.less';\n\nexport interface TitleContainerProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode;\n    /**\n     * Контент слота для заголовка\n     */\n    title?: ReactNode;\n    /**\n     * Контент слота для подзаголовка\n     */\n    subtitle?: ReactNode;\n    /**\n     * Контент слота справа от заголовка\n     */\n    icon?: ReactNode;\n    /**\n     * Позволяет выровнять по горизонтали контент слотов для заголовка и подзаголовка\n     */\n    centered?: boolean;\n}\n\nexport const TitleContainer: FC<TitleContainerProps> = ({ left, title, icon, subtitle, centered = false }) => {\n    return (\n        <div className={styles.titleContainerWrapper}>\n            {!!left && (\n                <div className={styles.titleLeftSlot}>\n                    <Morph id=\"title-component-left-slot\" className={styles.titleMorphItem}>\n                        {left}\n                    </Morph>\n                </div>\n            )}\n            <div className={classNames(styles.titleMainPart, { [styles.centered]: centered })}>\n                <div className={styles.titleContainer}>\n                    <div className={styles.title}>\n                        {!!title && (\n                            <Morph\n                                id=\"title-component-title\"\n                                className={styles.titleMorphItem}\n                                horizontalPositionAlign=\"left\"\n                            >\n                                {title}\n                            </Morph>\n                        )}\n                    </div>\n                    <div className={styles.titleInlineContainer}>\n                        {!!icon && (\n                            <Morph id=\"title-component-inline-slot\" className={styles.titleMorphItem}>\n                                {icon}\n                            </Morph>\n                        )}\n                    </div>\n                </div>\n                <div className={styles.subtitleContainer}>\n                    {!!subtitle && (\n                        <Morph\n                            id=\"title-component-subtitle\"\n                            className={styles.titleMorphItem}\n                            horizontalPositionAlign=\"left\"\n                        >\n                            {subtitle}\n                        </Morph>\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ba,MAAA,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAI;AACzG,IAAA,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA,QAAA,EAAA,CACvC,CAAC,CAAC,IAAI,KACHC,aAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAChC,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACjE,QAAA,EAAA,IAAI,GACD,EACN,CAAA,CACT,EACDD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAA,CAC7EA,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EACjC,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACvB,CAAC,CAAC,KAAK,KACJA,IAAC,KAAK,EAAA,EACF,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,uBAAuB,EAAC,MAAM,EAE7B,QAAA,EAAA,KAAK,GACF,CACX,EAAA,CACC,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA,QAAA,EACtC,CAAC,CAAC,IAAI,KACHA,IAAC,KAAK,EAAA,EAAC,EAAE,EAAC,6BAA6B,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACnE,QAAA,EAAA,IAAI,EACD,CAAA,CACX,GACC,CACJ,EAAA,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EACnC,CAAC,CAAC,QAAQ,KACPA,GAAA,CAAC,KAAK,EACF,EAAA,EAAE,EAAC,0BAA0B,EAC7B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,uBAAuB,EAAC,MAAM,EAAA,QAAA,EAE7B,QAAQ,EACL,CAAA,CACX,GACC,CACJ,EAAA,CAAA,CAAA,EAAA,CACJ,EACR;AACN;;;;"}
+{"version":3,"file":"TitleContainer.js","sources":["../../src/public/TitleContainer.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\n\nimport styles from './nav-bar.less';\n\nexport interface TitleContainerProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode;\n    /**\n     * Контент слота для заголовка\n     */\n    title?: ReactNode;\n    /**\n     * Контент слота для подзаголовка\n     */\n    subtitle?: ReactNode;\n    /**\n     * Контент слота справа от заголовка\n     */\n    icon?: ReactNode;\n    /**\n     * Позволяет выровнять по горизонтали контент слотов для заголовка и подзаголовка\n     */\n    centered?: boolean;\n}\n\nexport const TitleContainer: FC<TitleContainerProps> = ({ left, title, icon, subtitle, centered = false }) => {\n    return (\n        <div className={styles.titleContainerWrapper}>\n            {!!left && (\n                <div className={styles.titleLeftSlot}>\n                    <Morph id=\"title-component-left-slot\" className={styles.titleMorphItem}>\n                        {left}\n                    </Morph>\n                </div>\n            )}\n            <div className={classNames(styles.titleMainPart, { [styles.centered]: centered })}>\n                <div className={styles.titleContainer}>\n                    <div className={styles.title}>\n                        {!!title && (\n                            <Morph\n                                id=\"title-component-title\"\n                                className={styles.titleMorphItem}\n                                horizontalPositionAlign=\"left\"\n                            >\n                                {title}\n                            </Morph>\n                        )}\n                    </div>\n                    <div className={styles.titleInlineContainer}>\n                        {!!icon && (\n                            <Morph id=\"title-component-inline-slot\" className={styles.titleMorphItem}>\n                                {icon}\n                            </Morph>\n                        )}\n                    </div>\n                </div>\n                <div className={styles.subtitleContainer}>\n                    {!!subtitle && (\n                        <Morph\n                            id=\"title-component-subtitle\"\n                            className={styles.titleMorphItem}\n                            horizontalPositionAlign=\"left\"\n                        >\n                            {subtitle}\n                        </Morph>\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ba,MAAA,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAI;AACzG,IAAA,QACIA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA,QAAA,EAAA,CACvC,CAAC,CAAC,IAAI,KACHC,aAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAChC,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAC,EAAA,EAAE,EAAC,2BAA2B,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACjE,QAAA,EAAA,IAAI,GACD,EACN,CAAA,CACT,EACDD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,EAAE,CAAC,EAAA,QAAA,EAAA,CAC7EA,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EACjC,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACvB,CAAC,CAAC,KAAK,KACJA,IAAC,KAAK,EAAA,EACF,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,uBAAuB,EAAC,MAAM,EAE7B,QAAA,EAAA,KAAK,GACF,CACX,EAAA,CACC,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EAAA,QAAA,EACtC,CAAC,CAAC,IAAI,KACHA,IAAC,KAAK,EAAA,EAAC,EAAE,EAAC,6BAA6B,EAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EACnE,QAAA,EAAA,IAAI,EACD,CAAA,CACX,GACC,CACJ,EAAA,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EACnC,CAAC,CAAC,QAAQ,KACPA,GAAA,CAAC,KAAK,EACF,EAAA,EAAE,EAAC,0BAA0B,EAC7B,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,uBAAuB,EAAC,MAAM,EAAA,QAAA,EAE7B,QAAQ,EACL,CAAA,CACX,GACC,CACJ,EAAA,CAAA,CAAA,EAAA,CACJ,EACR;AACN;;;;"}