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

package/public/EnvironmentFingerprintNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentFingerprintNode.js","sources":["../../src/public/EnvironmentFingerprintNode.tsx"],"sourcesContent":["import {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useLayoutEffect,\n    useRef,\n    type RefCallback,\n    type HTMLAttributes,\n    type PropsWithChildren,\n    type FC,\n    type MutableRefObject,\n} from 'react';\n\nimport { useMeasureFingerprint } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { isDOMRectsEqual, scheduleMicro, useActualRef, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\n\ntype FingerprintContextValue = { registerCallback: (cb: VoidFunction) => VoidFunction; notify: VoidFunction };\nconst FingerprintContext = createContext<FingerprintContextValue | null>(null);\n\nexport type EnvironmentFingerprintNodeProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;\nexport const EnvironmentFingerprintNode = forwardRef<HTMLDivElement, EnvironmentFingerprintNodeProps>(\n    ({ children, ...rest }, ref) => {\n        const ctx = useContext(FingerprintContext);\n        if (!ctx) {\n            throw new Error('EnvironmentFingerprintNode must be used inside EnvironmentFingerprintProvider');\n        }\n        const rootRef = useRef<HTMLDivElement | null>();\n        const rootRefCallback = useCallback<RefCallback<HTMLDivElement>>(\n            (element) => {\n                rootRef.current = element;\n                // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n                !!ref && (typeof ref === 'function' ? ref(element) : (ref.current = element));\n            },\n            [ref]\n        );\n        const rectRef: MutableRefObject<DOMRectReadOnly | null> = useRef(null);\n\n        useMeasureFingerprint(rootRef, (rect) => {\n            if (!isDOMRectsEqual(rect, rectRef.current)) {\n                rectRef.current = rect;\n                ctx.notify();\n            }\n        });\n\n        return (\n            <div ref={rootRefCallback} {...rest}>\n                {children}\n            </div>\n        );\n    }\n);\n\nEnvironmentFingerprintNode.displayName = 'EnvironmentFingerprintNode';\n\nexport const EnvironmentFingerprintProvider: FC<PropsWithChildren> = ({ children }) => {\n    const contextValue = useInitOnce(() => {\n        const callbacks = new Set<VoidFunction>();\n        // Ожидаем что изменения по фингерпринтам могут прилетать не чаще одного раза за тик\n        // (потому что они генерятся только ResizeObserver). При этом элементов может измениться сразу несколько,\n        // каждый коллбек нам нужно вызвать только один раз. Есть два варианта этого добиться:\n        // - обернуть вызов коллбеков в schedule, но тогда они вызовутся не синхронно, а в следующей микротаске\n        // - добавить флаг который предотвращает повторную нотификацию в тике и вызвать коллбеки синхронно\n        // Синхронный вызов коллбеков позволяет эффективнее снимать метрики в одном цикле измерений,\n        // поэтому выбран этот вариант - синхронизация через флаг.\n        let notified = false;\n        const resetNotified = scheduleMicro(() => (notified = false));\n        return {\n            registerCallback: (cb: VoidFunction) => {\n                callbacks.add(cb);\n                return () => callbacks.delete(cb);\n            },\n            notify: () => {\n                if (notified) {\n                    return;\n                }\n                notified = true;\n                resetNotified();\n                callbacks.forEach((cb) => cb());\n            },\n        };\n    });\n\n    return <FingerprintContext.Provider value={contextValue}>{children}</FingerprintContext.Provider>;\n};\n\nEnvironmentFingerprintProvider.displayName = 'EnvironmentFingerprintProvider';\n\nexport const useEnvironmentFingerprint = (onChange: VoidFunction): void => {\n    const ctx = useContext(FingerprintContext);\n    const onChangeRef = useActualRef(onChange);\n    const callback = useInitOnce(() => () => onChangeRef.current());\n\n    if (!ctx) {\n        throw new Error('useEnvironmentFingerprint must be used inside EnvironmentFingerprintProvider');\n    }\n\n    useLayoutEffect(() => ctx.registerCallback(callback), [ctx, callback]);\n};\n"],"names":["_jsx"],"mappings":"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"}

package/public/LayoutMorph.d.ts

@@ -0,0 +1,32 @@
+import { type FC, type PropsWithChildren } from 'react';
+import { type HTMLMotionProps } from 'motion/react';
+import { type HorizontalAlign, type SizeAxis, type VerticalAlign } from '@hh.ru/magritte-ui-nav-bar/internal/utils';
+export type LayoutMorphProps = PropsWithChildren<{
+    /**
+     * Задает стадию анимации на которой элемент будет виден.
+     * Если не задан, то элемент будет виден на протяжении всей анимации.
+     */
+    stage?: 'start' | 'end';
+    /**
+     * Позволяет анимировать элементы через морфинг, задав между ними связь с помощью указания одинакового `id`
+     * и разных `stage`
+     */
+    id?: string;
+    /**
+     * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.
+     * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе
+     * анимации.
+     * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего
+     * результат и минимизации искажения пропорций.
+     */
+    sizeAxis?: SizeAxis;
+    /**
+     * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.
+     */
+    horizontalPositionAlign?: HorizontalAlign;
+    /**
+     * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.
+     */
+    verticalPositionAlign?: VerticalAlign;
+} & HTMLMotionProps<'div'>>;
+export declare const LayoutMorph: FC<LayoutMorphProps>;

package/public/LayoutMorph.js

@@ -0,0 +1,132 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useId, useRef, useContext, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import { useMotionValue, motion } from 'motion/react';
+import { useMeasureManual } from '../internal/MetricsProvider.js';
+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 '../internal/KeyedSubscriptions.js';
+import 'motion';
+import '@hh.ru/magritte-common-use-when-font-loaded';
+import './EnvironmentFingerprintNode.js';
+import '@hh.ru/magritte-ui-divider';
+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';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '../internal/useSnapScroll.js';
+import '../internal/useSyncMotionValue.js';
+
+const startKey = (id) => `${id}-start`;
+const endKey = (id) => `${id}-end`;
+const LayoutMorphContext = createContext('#container');
+const useLayoutMorphContext = () => useContext(LayoutMorphContext);
+const calcParams = (setup, sizeAxis, horizontalPositionAlign, verticalPositionAlign) => {
+    const start = DOMRect.fromRect(setup.start);
+    start.x -= setup.containerStart.x;
+    start.y -= setup.containerStart.y;
+    const end = DOMRect.fromRect(setup.end);
+    end.x -= setup.containerEnd.x;
+    end.y -= setup.containerEnd.y;
+    return calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);
+};
+const LayoutMorph = ({ children, stage, id: manualId, sizeAxis = 'auto', verticalPositionAlign = 'center', horizontalPositionAlign = 'center', ...rest }) => {
+    const id = useId();
+    const rootRef = useRef(null);
+    const animationStageRef = useContext(AnimationStageContext);
+    const morphStore = useMorphStore();
+    const paneStore = usePaneStore();
+    const width = useMotionValue('auto');
+    const height = useMotionValue('auto');
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const scaleX = useMotionValue(1);
+    const scaleY = useMotionValue(1);
+    const opacity = useMotionValue(stage !== 'end' ? 1 : 0);
+    const pointerEvents = useMotionValue('auto');
+    const childRef = useRef(null);
+    const containerId = useLayoutMorphContext();
+    useLayoutEffect(() => {
+        if (!rootRef.current || !rootRef.current.firstChild) {
+            return;
+        }
+        if (rootRef.current.children.length > 1) {
+            throw new Error('LayoutMorph expects exactly one child HTML element. Please wrap multiple children in a container.');
+        }
+        childRef.current = rootRef.current.firstChild;
+    }, []);
+    const isManual = !!manualId && !!stage;
+    const actualIdRef = useActualRef(isManual ? manualId : id);
+    useStoreSyncedTransform(paneStore.get('motionValue'), morphStore, [startKey(id), endKey(id), startKey(containerId), endKey(containerId)], () => {
+        const basicRect = new DOMRectReadOnly();
+        const sk = stage === 'end' ? endKey : startKey;
+        const ek = stage === 'end' ? startKey : endKey;
+        const setup = {
+            start: morphStore.get(sk(actualIdRef.current)) ?? basicRect,
+            end: morphStore.get(ek(actualIdRef.current)) ?? basicRect,
+            containerStart: morphStore.get(sk(containerId)) ?? basicRect,
+            containerEnd: morphStore.get(ek(containerId)) ?? basicRect,
+        };
+        const params = calcParams(setup, isManual ? sizeAxis : 'both', isManual ? horizontalPositionAlign : 'left', isManual ? verticalPositionAlign : 'top');
+        const startX = setup.start.x - setup.containerStart.x;
+        const startY = setup.start.y - setup.containerStart.y;
+        if (isManual) {
+            width.set(setup.start.width);
+            height.set(setup.start.height);
+            return (progress) => {
+                const p = stage === 'end' ? 1 - progress : progress;
+                x.set(lerp(startX, startX + params.deltaX, p));
+                y.set(lerp(startY, startY + params.deltaY, p));
+                scaleX.set(lerp(1, params.scaleX, p));
+                scaleY.set(lerp(1, params.scaleY, p));
+                pointerEvents.set(p === 0 || (p === 1 && !stage) ? 'auto' : 'none');
+                stage && opacity.set(1 - p);
+            };
+        }
+        scaleX.set(1);
+        scaleY.set(1);
+        return (progress) => {
+            const p = stage === 'end' ? 1 - progress : progress;
+            x.set(lerp(startX, startX + params.deltaX, p));
+            y.set(lerp(startY, startY + params.deltaY, p));
+            width.set(lerp(setup.start.width, setup.start.width * params.scaleX, p));
+            height.set(lerp(setup.start.height, setup.start.height * params.scaleY, p));
+            pointerEvents.set(p === 0 || (p === 1 && !stage) ? 'auto' : 'none');
+            stage && opacity.set(1 - p);
+        };
+    }, (interpolator, progress) => interpolator(progress));
+    useMeasureManual(childRef, (rect) => {
+        if (animationStageRef.current === 'start') {
+            (stage === 'start' || !stage) && morphStore.set(startKey(actualIdRef.current), rect);
+            // если элемент виден только в начальной или конечной точке анимации, то его позиция и размер
+            // не меняются в процессе анимации, только прозрачность
+            stage === 'start' && morphStore.set(endKey(actualIdRef.current), rect);
+        }
+        else if (animationStageRef.current === 'end') {
+            (stage === 'end' || !stage) && morphStore.set(endKey(actualIdRef.current), rect);
+            if ((!isManual || morphStore.get(startKey(actualIdRef.current)) === null) && stage === 'end') {
+                morphStore.set(startKey(actualIdRef.current), rect);
+            }
+        }
+    });
+    return (jsx(motion.div, { ...rest, ref: rootRef, className: classNames(styles.layoutMorph, {
+            [styles.layoutMorphStart]: stage === 'start',
+            [styles.layoutMorphEnd]: stage === 'end',
+            [styles.morphItemTop]: verticalPositionAlign === 'top' && isManual,
+            [styles.morphItemBottom]: verticalPositionAlign === 'bottom' && isManual,
+            [styles.morphItemLeft]: horizontalPositionAlign === 'left' && isManual,
+            [styles.morphItemRight]: horizontalPositionAlign === 'right' && isManual,
+        }), style: { width, height, x, y, scaleX, scaleY, opacity, pointerEvents }, children: jsx(LayoutMorphContext.Provider, { value: id, children: children }) }));
+};
+
+export { LayoutMorph };
+//# sourceMappingURL=LayoutMorph.js.map

package/public/LayoutMorph.js.map

@@ -0,0 +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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"}

package/public/LayoutStage.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type MutableRefObject, type PropsWithChildren } from 'react';
+import { HTMLMotionProps } from 'motion/react';
+export declare const CONTAINER_START_KEY = "#container-start";
+export declare const CONTAINER_END_KEY = "#container-end";
+export type AnimationStage = 'start' | 'end' | 'progress';
+export declare const AnimationStageContext: import("react").Context<MutableRefObject<AnimationStage | null>>;
+export declare const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>>;

package/public/LayoutStage.js

@@ -0,0 +1,87 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, createRef, useRef, useContext } from 'react';
+import classNames from 'classnames';
+import { useMotionValue, motion } from 'motion/react';
+import { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';
+import { MetricsProvider, useRemeasureAllManual, useMeasureManual } from '../internal/MetricsProvider.js';
+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 '../internal/KeyedSubscriptions.js';
+import 'motion';
+import '@hh.ru/magritte-ui-divider';
+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';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '../internal/useSnapScroll.js';
+import '../internal/useSyncMotionValue.js';
+
+const CONTAINER_START_KEY = '#container-start';
+const CONTAINER_END_KEY = '#container-end';
+const AnimationStageContext = createContext(createRef());
+const stageClasses = {
+    start: 'nav-bar-layout-animation-stage-start',
+    end: 'nav-bar-layout-animation-stage-end',
+    progress: styles.animationStageProgress,
+};
+const CombinedStageAnimationMeasurementManager = ({ children, ...rest }) => {
+    const wrapperRef = useRef(null);
+    const animationStageRef = useContext(AnimationStageContext);
+    const morphStore = useMorphStore();
+    const currentClassRef = useRef(stageClasses.start);
+    const paneStore = usePaneStore();
+    const forceMeasure = useRemeasureAllManual();
+    const setStage = useInitOnce(() => (stage) => {
+        if (!wrapperRef.current) {
+            return;
+        }
+        for (const animClasses of Object.entries(stageClasses)) {
+            wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);
+        }
+        currentClassRef.current = stageClasses[stage];
+        animationStageRef.current = stage;
+    });
+    const measureSubtree = useInitOnce(() => () => {
+        setStage('start');
+        forceMeasure();
+        setStage('end');
+        forceMeasure();
+        setStage('progress');
+    });
+    const height = useMotionValue('auto');
+    useMeasureManual(wrapperRef, (rect) => {
+        if (animationStageRef.current === 'start') {
+            height.set(rect.height);
+            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно
+            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute
+            if (wrapperRef.current) {
+                wrapperRef.current.style.height = `${rect.height}px`;
+            }
+            paneStore.set({ top: rect.top, startHeight: rect.height });
+            morphStore.set(CONTAINER_START_KEY, rect);
+        }
+        else {
+            paneStore.set({ endHeight: rect.height });
+            morphStore.set(CONTAINER_END_KEY, rect);
+        }
+    });
+    useEnvironmentFingerprint(measureSubtree);
+    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());
+    return (jsx(motion.div, { ref: wrapperRef, ...rest, className: classNames(styles.layoutAnimationContainer, currentClassRef.current), style: { height }, children: children }));
+};
+const LayoutStage = ({ children, ...rest }) => {
+    const stageRef = useRef('start');
+    return (jsx(EnvironmentFingerprintNode, { style: { pointerEvents: 'auto' }, children: jsx(MorphStoreProvider, { children: jsx(AnimationStageContext.Provider, { value: stageRef, children: jsx(MetricsProvider, { children: jsx(CombinedStageAnimationMeasurementManager, { ...rest, children: children }) }) }) }) }));
+};
+
+export { AnimationStageContext, CONTAINER_END_KEY, CONTAINER_START_KEY, LayoutStage };
+//# sourceMappingURL=LayoutStage.js.map

package/public/LayoutStage.js.map

@@ -0,0 +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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"}

package/public/Morph.d.ts

@@ -0,0 +1,28 @@
+import { type PropsWithChildren, type FC, type CSSProperties } from 'react';
+import { HTMLMotionProps } from 'motion/react';
+import { type HorizontalAlign, type SizeAxis, type VerticalAlign } from '@hh.ru/magritte-ui-nav-bar/internal/utils';
+export interface MorphProps extends HTMLMotionProps<'div'> {
+    /**
+     * Задает соответствие между элементами для морфинга между начальным и конечным <Stage />
+     */
+    id: string;
+    style?: CSSProperties;
+    className?: string;
+    /**
+     * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.
+     * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе
+     * анимации.
+     * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего
+     * результат и минимизации искажения пропорций.
+     */
+    sizeAxis?: SizeAxis;
+    /**
+     * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.
+     */
+    horizontalPositionAlign?: HorizontalAlign;
+    /**
+     * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.
+     */
+    verticalPositionAlign?: VerticalAlign;
+}
+export declare const Morph: FC<PropsWithChildren<MorphProps>>;

package/public/Morph.js

@@ -0,0 +1,66 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import { useMotionValue, motion } from 'motion/react';
+import { useMeasureAuto } from '../internal/MetricsProvider.js';
+import { useMorphStore } from '../internal/MorphStore.js';
+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 '../internal/KeyedSubscriptions.js';
+import 'motion';
+import '@hh.ru/magritte-ui-divider';
+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';
+import '@hh.ru/magritte-internal-custom-scroll';
+import '../internal/useSnapScroll.js';
+import '../internal/useSyncMotionValue.js';
+
+const Morph = ({ children, id, className, style, sizeAxis = 'auto', horizontalPositionAlign = 'center', verticalPositionAlign = 'center', ...rest }) => {
+    const paneStore = usePaneStore();
+    const morphStore = useMorphStore();
+    const animationStage = useAnimationStage();
+    const rootRef = useRef(null);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const scaleX = useMotionValue(1);
+    const scaleY = useMotionValue(1);
+    const startId = `start-${id}`;
+    const endId = `end-${id}`;
+    useStoreSyncedTransform(paneStore.get('motionValue'), morphStore, [startId, endId], () => {
+        const start = morphStore.get(animationStage === 'end' ? endId : startId);
+        const end = morphStore.get(animationStage === 'end' ? startId : endId);
+        const { deltaX, deltaY, scaleX: xScale, scaleY: yScale, } = calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);
+        return (progress) => {
+            const p = animationStage === 'end' ? 1 - progress : progress;
+            x.set(lerp(0, deltaX, p));
+            y.set(lerp(0, deltaY, p));
+            scaleX.set(lerp(1, xScale, p));
+            scaleY.set(lerp(1, yScale, p));
+        };
+    }, (interpolator, progress) => interpolator(progress));
+    const forceInvalidate = useMeasureAuto(rootRef, (rect) => morphStore.set(`${animationStage}-${id}`, rect), [
+        id,
+        animationStage,
+    ]);
+    useEnvironmentFingerprint(forceInvalidate);
+    useLayoutEffect(() => () => morphStore.set(`${animationStage}-${id}`, null), [morphStore, animationStage, id]);
+    return (jsx(motion.div, { ref: rootRef, ...rest, className: classNames(styles.morphItem, className, {
+            [styles.morphItemTop]: verticalPositionAlign === 'top',
+            [styles.morphItemBottom]: verticalPositionAlign === 'bottom',
+            [styles.morphItemLeft]: horizontalPositionAlign === 'left',
+            [styles.morphItemRight]: horizontalPositionAlign === 'right',
+        }), style: { ...(style ?? {}), x, y, scaleX, scaleY }, children: children }));
+};
+
+export { Morph };
+//# sourceMappingURL=Morph.js.map

package/public/Morph.js.map

@@ -0,0 +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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"}

package/public/NavBar.d.ts

@@ -0,0 +1,57 @@
+import { type RefObject, type FC } from 'react';
+import { MotionValue } from 'motion/react';
+import { type ShowDivider } from '@hh.ru/magritte-ui-divider';
+import { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';
+import { type PaneElement } from '@hh.ru/magritte-ui-nav-bar/public/Pane';
+type PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;
+export declare const useNavBarContext: () => PaneStoreContextValue;
+export interface NavBarProps {
+    /**
+     * В качестве потомков могут передаваться только компоненты <Pane />
+     */
+    children: PaneElement | PaneElement[];
+    /**
+     * Управляет режимом прозрачности:
+     * -- Прозрачность отключена (`false`)
+     * -- Прозрачный всегда (`true`)
+     * -- Прозрачный в начале анимации (`start`)
+     * -- Прозрачный в конце анимации (`end`)
+     */
+    transparent?: 'start' | 'end' | boolean;
+    /**
+     * Управляет позицией триггера начала анимации
+     */
+    startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement>;
+    /**
+     * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения
+     * высоты навбара в процессе анимации и позиции триггера начала анмиации.
+     */
+    endTriggerPosition?: RefObject<HTMLElement>;
+    /**
+     * Включает progressive blur. Эффект может не работать в некоторых вариантах верстки.
+     */
+    progressiveBlur?: boolean;
+    /**
+     * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.
+     */
+    overlay?: boolean;
+    /**
+     * Управляет режимом автодоскролла. По умолчанию включен.
+     */
+    snapScroll?: boolean;
+    /**
+     * Управляет режимом отображения дивайдера:
+     * - `false` дивайдер отключен
+     * - `always` дивайдер отображается постоянно
+     * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar
+     */
+    showDivider?: ShowDivider;
+    /**
+     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.
+     * Прогресс анимации представляется в виде числа 0..1
+     * Предназначен для синхронизации внешних анимаций с анимациями NavBar.
+     */
+    animationProgress?: MotionValue<number>;
+}
+export declare const NavBar: FC<NavBarProps>;
+export {};

package/public/NavBar.js

@@ -0,0 +1,21 @@
+import './../index.css';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import 'motion/react';
+import '@hh.ru/magritte-ui-divider';
+import '@hh.ru/magritte-ui-layer';
+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';
+import '@hh.ru/magritte-internal-custom-scroll';
+//# sourceMappingURL=NavBar.js.map

package/public/NavBar.js.map

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

package/public/Pane.d.ts

@@ -0,0 +1,22 @@
+import { type FC, type JSXElementConstructor, type PropsWithChildren, type ReactElement } from 'react';
+import { type MotionValue } from 'motion/react';
+export type InternalPaneProps = PropsWithChildren<{
+    foldable?: boolean;
+    nextPane?: ReactElement<InternalPaneProps, JSXElementConstructor<InternalPaneProps>> | null;
+    animationProgress?: MotionValue<number>;
+}>;
+export type ExternalPaneProps = PropsWithChildren<{
+    /**
+     * Включает режим когда панель "схлопывается" под стоящую над ней панель.
+     */
+    foldable?: boolean;
+    /**
+     * Принимает MotionValue значение которого будет обновляться синхронно с анимацией панели.
+     * Прогресс анимации представляется в виде числа 0..1
+     * Предназначен для синхронизации внешних анимаций с анимацией панели.
+     */
+    animationProgress?: MotionValue<number>;
+}>;
+export type PaneElement = ReactElement<ExternalPaneProps, JSXElementConstructor<ExternalPaneProps>>;
+export declare const Pane: FC<InternalPaneProps>;
+export declare const ExternalPane: FC<PropsWithChildren<ExternalPaneProps>>;