@hh.ru/magritte-ui-nav-bar 1.1.28 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{NavBar-DtkJcn4A.js → NavBar-B3VrIKUf.js} +2 -2
- package/{NavBar-DtkJcn4A.js.map → NavBar-B3VrIKUf.js.map} +1 -1
- package/index.css +93 -93
- package/index.js +1 -1
- package/internal/PaneStore.js +1 -1
- package/package.json +4 -4
- package/public/Actions.js +1 -1
- package/public/LayoutMorph.js +1 -1
- package/public/LayoutStage.js +1 -1
- package/public/Morph.js +1 -1
- package/public/NavBar.js +1 -1
- package/public/Pane.js +1 -1
- package/public/Stage.js +1 -1
- package/public/TitleContainer.js +1 -1
|
@@ -15,7 +15,7 @@ import { useSnapScroll } from './internal/useSnapScroll.js';
|
|
|
15
15
|
import { useSyncMotionValue } from './internal/useSyncMotionValue.js';
|
|
16
16
|
import { useInitOnce, scheduleMicro, scheduleMacro, remap } from './internal/utils.js';
|
|
17
17
|
|
|
18
|
-
var styles = {"actions-container":"magritte-actions-container___CBgYW_1-1
|
|
18
|
+
var styles = {"actions-container":"magritte-actions-container___CBgYW_1-2-1","actionsContainer":"magritte-actions-container___CBgYW_1-2-1","actions-no-children":"magritte-actions-no-children___rgJUl_1-2-1","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-2-1","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-2-1","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-2-1","actions-right-slot":"magritte-actions-right-slot___aodtj_1-2-1","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-2-1","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-2-1","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-2-1","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-2-1","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-2-1","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-2-1","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-2-1","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-2-1","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-2-1","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-2-1","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-2-1","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-2-1","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-2-1","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-2-1","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-2-1","actions-only-stage":"magritte-actions-only-stage___cg10A_1-2-1","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-2-1","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-2-1","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-2-1","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-2-1","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-2-1","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-2-1","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-2-1","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-2-1","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-2-1","title-main-part":"magritte-title-main-part___npoHN_1-2-1","titleMainPart":"magritte-title-main-part___npoHN_1-2-1","centered":"magritte-centered___Y2mlP_1-2-1","title-left-slot":"magritte-title-left-slot___HTE7h_1-2-1","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-2-1","title-container":"magritte-title-container___y9AIx_1-2-1","titleContainer":"magritte-title-container___y9AIx_1-2-1","subtitle-container":"magritte-subtitle-container___nVUBu_1-2-1","subtitleContainer":"magritte-subtitle-container___nVUBu_1-2-1","title-morph-item":"magritte-title-morph-item___t7Wf3_1-2-1","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-2-1","title":"magritte-title___ZbLgP_1-2-1","pane-content":"magritte-pane-content___UVmC6_1-2-1","paneContent":"magritte-pane-content___UVmC6_1-2-1","pane-background":"magritte-pane-background___PDZAX_1-2-1","paneBackground":"magritte-pane-background___PDZAX_1-2-1","morph-item":"magritte-morph-item___8kF46_1-2-1","morphItem":"magritte-morph-item___8kF46_1-2-1","morph-item-top":"magritte-morph-item-top___WPEkn_1-2-1","morphItemTop":"magritte-morph-item-top___WPEkn_1-2-1","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-2-1","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-2-1","morph-item-left":"magritte-morph-item-left___T6AMW_1-2-1","morphItemLeft":"magritte-morph-item-left___T6AMW_1-2-1","morph-item-right":"magritte-morph-item-right___EuT1E_1-2-1","morphItemRight":"magritte-morph-item-right___EuT1E_1-2-1","pane":"magritte-pane___f8eFC_1-2-1","start-state-container":"magritte-start-state-container___giBVb_1-2-1","startStateContainer":"magritte-start-state-container___giBVb_1-2-1","end-state-container":"magritte-end-state-container___uiW8Q_1-2-1","endStateContainer":"magritte-end-state-container___uiW8Q_1-2-1","content-container":"magritte-content-container___7s7vv_1-2-1","contentContainer":"magritte-content-container___7s7vv_1-2-1","next-pane":"magritte-next-pane___H2oxQ_1-2-1","nextPane":"magritte-next-pane___H2oxQ_1-2-1","nav-bar":"magritte-nav-bar___RRGe0_1-2-1","navBar":"magritte-nav-bar___RRGe0_1-2-1","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-2-1","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-2-1","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-2-1","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-2-1","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-2-1","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-2-1","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-2-1","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-2-1","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-2-1","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-2-1","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-2-1","navBarStage":"magritte-nav-bar-stage___amDz7_1-2-1","metrics-mode":"magritte-metrics-mode___h38aX_1-2-1","metricsMode":"magritte-metrics-mode___h38aX_1-2-1","layout-morph":"magritte-layout-morph___I3SPy_1-2-1","layoutMorph":"magritte-layout-morph___I3SPy_1-2-1","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-2-1","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-2-1","layout-morph-start":"magritte-layout-morph-start___9-krP_1-2-1","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-2-1","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-2-1","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-2-1","divider-container":"magritte-divider-container___-NdWi_1-2-1","dividerContainer":"magritte-divider-container___-NdWi_1-2-1"};
|
|
19
19
|
|
|
20
20
|
const NavBarContext = createContext(null);
|
|
21
21
|
const useNavBarContext = () => useContext(NavBarContext);
|
|
@@ -113,4 +113,4 @@ const NavBar = ({ children, transparent = false, startTriggerPosition = 'start',
|
|
|
113
113
|
};
|
|
114
114
|
|
|
115
115
|
export { NavBar as N, styles as s, useNavBarContext as u };
|
|
116
|
-
//# sourceMappingURL=NavBar-
|
|
116
|
+
//# sourceMappingURL=NavBar-B3VrIKUf.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBar-DtkJcn4A.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n /**\n * В качестве потомков могут передаваться только компоненты <Pane />\n */\n children: PaneElement | PaneElement[];\n /**\n * Управляет режимом прозрачности:\n * -- Прозрачность отключена (`false`)\n * -- Прозрачный всегда (`true`)\n * -- Прозрачный в начале анимации (`start`)\n * -- Прозрачный в конце анимации (`end`)\n */\n transparent?: 'start' | 'end' | boolean;\n /**\n * Управляет позицией триггера начала анимации\n */\n startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n /**\n * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n * высоты навбара в процессе анимации и позиции триггера начала анмиации. Если передано число, то интерпретируется\n * как отступ в пикселях от позиции триггера старта анимации.\n */\n endTriggerPosition?: RefObject<HTMLElement | null> | number;\n /**\n * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n */\n overlay?: boolean;\n /**\n * Управляет режимом автодоскролла. По умолчанию включен.\n */\n snapScroll?: boolean;\n /**\n * Управляет режимом отображения дивайдера:\n * - `false` дивайдер отключен\n * - `always` дивайдер отображается постоянно\n * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n */\n showDivider?: ShowDivider;\n /**\n * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n * Прогресс анимации представляется в виде числа 0..1\n * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n */\n animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n children,\n transparent = false,\n startTriggerPosition = 'start',\n endTriggerPosition,\n overlay = false,\n snapScroll: scrollSnapping = true,\n showDivider = false,\n animationProgress,\n}) => {\n const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n const prevFullHeight = useRef<null | number>(0);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry, getMetrics);\n const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n useBindScrollToAnimationProgress(\n scrollPosition,\n getMetrics,\n getAnimationRanges,\n scrollAdapter,\n startTriggerPosition,\n endTriggerPosition\n );\n const snapScroll = useSnapScroll(\n scrollPosition,\n totalAnimationProgress,\n scrollAdapter,\n getClosestStops,\n scrollSnapping\n );\n\n // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n useResetFocus(rootRef, totalAnimationProgress);\n useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n const dividerVisibility =\n // eslint-disable-next-line no-nested-ternary\n showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n const registerPaneStore = useInitOnce(() => {\n const subscriptions: VoidFunction[] = [];\n\n const updateAnimationParams = () => {\n subscriptions.length = 0;\n invalidateMetrics();\n invalidateAnimationRanges();\n bindScrollToAnimationScheduled();\n const navBarMetrics = getMetrics();\n const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n\n let scroll = scrollAdapter.getScrollTop();\n if (prevFullHeight.current !== null && scroll !== 0) {\n const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n scroll += heightDelta;\n\n requestAnimationFrame(() => {\n scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n scrollPosition.jump(scrollAdapter.getScrollTop());\n });\n }\n\n const animationRanges = getAnimationRanges();\n [...paneStoreRegistry.values()].forEach((paneStore) => {\n const range = animationRanges.get(paneStore.get('id'));\n if (!range) {\n return;\n }\n const remapFn = remap(\n range[0] === 0 && range[1] === 0\n ? [0, 1]\n : [range[0] / navBarMetrics.animationHeight, range[1] / navBarMetrics.animationHeight],\n [0, 1]\n );\n const motionValue = paneStore.get('motionValue');\n motionValue.set(remapFn(totalAnimationProgress.get()));\n subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n });\n\n prevFullHeight.current = fullPanesStartHeight;\n };\n\n // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n // количество вызовов при массовых изменениях\n const onChange = scheduleMacro(updateAnimationParams);\n\n return (paneStore: PaneStore) => {\n const unsubscribe = paneStore.onChange(\n ['startHeight', 'endHeight', 'top', 'foldable', 'animated'],\n onChange\n );\n paneStoreRegistry.add(paneStore);\n return () => {\n paneStoreRegistry.delete(paneStore);\n unsubscribe();\n };\n };\n });\n\n useLayoutEffect(() => {\n bindScrollToAnimation();\n snapScroll();\n if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n return void 0;\n }\n return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n }, [\n startTriggerPosition,\n endTriggerPosition,\n bindScrollToAnimation,\n bindScrollToAnimationScheduled,\n snapScroll,\n scrollAdapter,\n ]);\n\n // Вкладываем панели друг в друга через проп nextPane\n const items = React.Children.toArray(children) as PaneElement[];\n\n const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n return React.cloneElement<InternalPaneProps>(child, {\n ...child.props,\n nextPane: acc,\n }) as PaneElement;\n }, null);\n\n return (\n <Layer layer=\"navigation-bar\">\n <MetricsProvider\n className={classNames(styles.navBar, {\n [styles.navbarTransparentStart]: transparent === 'start',\n [styles.navbarTransparentEnd]: transparent === 'end',\n [styles.navbarNotTransparent]: !transparent,\n [styles.navBarOverlay]: overlay,\n })}\n ref={rootRef}\n measureClassName={styles.metricsMode}\n >\n <div className={styles.navBarOverlayWrapper}>\n <div className={styles.navBarContentContainer}>\n <motion.div\n style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n className={styles.navBarPanesContainer}\n >\n <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n </motion.div>\n <motion.div\n className={styles.dividerContainer}\n style={{ ...dividerStyle, visibility: dividerVisibility }}\n >\n <Divider />\n </motion.div>\n </div>\n </div>\n </MetricsProvider>\n </Layer>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NavBar-B3VrIKUf.js","sources":["../src/public/NavBar.tsx"],"sourcesContent":["import React, { createContext, type RefObject, useContext, useLayoutEffect, useRef, type FC } from 'react';\nimport classNames from 'classnames';\nimport { motion, type MotionStyle, MotionValue, frame } from 'motion/react';\n\nimport { Divider, type ShowDivider } from '@hh.ru/magritte-ui-divider';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { MetricsProvider } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useAnimationRanges } from '@hh.ru/magritte-ui-nav-bar/internal/useAnimationRanges';\nimport { useBindScrollToAnimationProgress } from '@hh.ru/magritte-ui-nav-bar/internal/useBindScrollToAnimationProgress';\nimport { useNavBarMetrics } from '@hh.ru/magritte-ui-nav-bar/internal/useNavBarMetrics';\nimport { useResetFocus } from '@hh.ru/magritte-ui-nav-bar/internal/useResetFocus';\nimport { useScrollAdapter } from '@hh.ru/magritte-ui-nav-bar/internal/useScrollAdapter';\nimport { useSnapScroll } from '@hh.ru/magritte-ui-nav-bar/internal/useSnapScroll';\nimport { useSyncMotionValue } from '@hh.ru/magritte-ui-nav-bar/internal/useSyncMotionValue';\nimport { remap, scheduleMicro, scheduleMacro, useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { type PaneElement, type InternalPaneProps } from '@hh.ru/magritte-ui-nav-bar/public/Pane';\n\nimport styles from './nav-bar.less';\n\ntype PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;\nconst NavBarContext = createContext<PaneStoreContextValue>(null);\n\nexport const useNavBarContext = (): PaneStoreContextValue => useContext(NavBarContext);\n\nexport interface NavBarProps {\n /**\n * В качестве потомков могут передаваться только компоненты <Pane />\n */\n children: PaneElement | PaneElement[];\n /**\n * Управляет режимом прозрачности:\n * -- Прозрачность отключена (`false`)\n * -- Прозрачный всегда (`true`)\n * -- Прозрачный в начале анимации (`start`)\n * -- Прозрачный в конце анимации (`end`)\n */\n transparent?: 'start' | 'end' | boolean;\n /**\n * Управляет позицией триггера начала анимации\n */\n startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;\n /**\n * Управляет позицией триггера конца анимации. Если не передан вычисляется автоматически на основе изменения\n * высоты навбара в процессе анимации и позиции триггера начала анмиации. Если передано число, то интерпретируется\n * как отступ в пикселях от позиции триггера старта анимации.\n */\n endTriggerPosition?: RefObject<HTMLElement | null> | number;\n /**\n * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.\n */\n overlay?: boolean;\n /**\n * Управляет режимом автодоскролла. По умолчанию включен.\n */\n snapScroll?: boolean;\n /**\n * Управляет режимом отображения дивайдера:\n * - `false` дивайдер отключен\n * - `always` дивайдер отображается постоянно\n * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar\n */\n showDivider?: ShowDivider;\n /**\n * Принимает MotionValue значение которого будет обновляться синхронно с анимацией всего NavBar.\n * Прогресс анимации представляется в виде числа 0..1\n * Предназначен для синхронизации внешних анимаций с анимациями NavBar.\n */\n animationProgress?: MotionValue<number>;\n}\n\nexport const NavBar: FC<NavBarProps> = ({\n children,\n transparent = false,\n startTriggerPosition = 'start',\n endTriggerPosition,\n overlay = false,\n snapScroll: scrollSnapping = true,\n showDivider = false,\n animationProgress,\n}) => {\n const paneStoreRegistry = useInitOnce(() => new Set<PaneStore>());\n const prevFullHeight = useRef<null | number>(0);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const [scrollAdapter, scrollPosition] = useScrollAdapter(rootRef);\n const [getMetrics, invalidateMetrics] = useNavBarMetrics(paneStoreRegistry, rootRef, scrollAdapter);\n const [getAnimationRanges, invalidateAnimationRanges] = useAnimationRanges(paneStoreRegistry, getMetrics);\n const [bindScrollToAnimation, getClosestStops, totalAnimationProgress, dividerStyle] =\n useBindScrollToAnimationProgress(\n scrollPosition,\n getMetrics,\n getAnimationRanges,\n scrollAdapter,\n startTriggerPosition,\n endTriggerPosition\n );\n const snapScroll = useSnapScroll(\n scrollPosition,\n totalAnimationProgress,\n scrollAdapter,\n getClosestStops,\n scrollSnapping\n );\n\n // При получении размеров важно дождаться применения MotionValue к DOM, поэтому используем frame.render\n const bindScrollToAnimationScheduled = useInitOnce(() => scheduleMicro(() => frame.render(bindScrollToAnimation)));\n useResetFocus(rootRef, totalAnimationProgress);\n useSyncMotionValue(totalAnimationProgress, animationProgress);\n\n const dividerVisibility =\n // eslint-disable-next-line no-nested-ternary\n showDivider === 'with-scroll' ? dividerStyle.visibility : showDivider ? 'visible' : 'hidden';\n\n const registerPaneStore = useInitOnce(() => {\n const subscriptions: VoidFunction[] = [];\n\n const updateAnimationParams = () => {\n subscriptions.length = 0;\n invalidateMetrics();\n invalidateAnimationRanges();\n bindScrollToAnimationScheduled();\n const navBarMetrics = getMetrics();\n const fullPanesStartHeight = navBarMetrics.bottom - navBarMetrics.top;\n\n let scroll = scrollAdapter.getScrollTop();\n if (prevFullHeight.current !== null && scroll !== 0) {\n const heightDelta = fullPanesStartHeight - prevFullHeight.current;\n scroll += heightDelta;\n\n requestAnimationFrame(() => {\n scrollPosition.jump(scrollAdapter.getScrollTop() - 1);\n scrollPosition.jump(scrollAdapter.getScrollTop());\n });\n }\n\n const animationRanges = getAnimationRanges();\n [...paneStoreRegistry.values()].forEach((paneStore) => {\n const range = animationRanges.get(paneStore.get('id'));\n if (!range) {\n return;\n }\n const remapFn = remap(\n range[0] === 0 && range[1] === 0\n ? [0, 1]\n : [range[0] / navBarMetrics.animationHeight, range[1] / navBarMetrics.animationHeight],\n [0, 1]\n );\n const motionValue = paneStore.get('motionValue');\n motionValue.set(remapFn(totalAnimationProgress.get()));\n subscriptions.push(totalAnimationProgress.on('change', (value) => motionValue.set(remapFn(value))));\n });\n\n prevFullHeight.current = fullPanesStartHeight;\n };\n\n // основной триггер запуска updateAnimationParams это изменения размеров, обработка которых происходит\n // в очереди микрозадач, поэтому откладываем запуск функции до перехдоа к макрозадачам, чтобы сократить\n // количество вызовов при массовых изменениях\n const onChange = scheduleMacro(updateAnimationParams);\n\n return (paneStore: PaneStore) => {\n const unsubscribe = paneStore.onChange(\n ['startHeight', 'endHeight', 'top', 'foldable', 'animated'],\n onChange\n );\n paneStoreRegistry.add(paneStore);\n return () => {\n paneStoreRegistry.delete(paneStore);\n unsubscribe();\n };\n };\n });\n\n useLayoutEffect(() => {\n bindScrollToAnimation();\n snapScroll();\n if (!rootRef.current || (typeof startTriggerPosition === 'string' && !endTriggerPosition)) {\n return void 0;\n }\n return scrollAdapter.onResize(bindScrollToAnimationScheduled);\n }, [\n startTriggerPosition,\n endTriggerPosition,\n bindScrollToAnimation,\n bindScrollToAnimationScheduled,\n snapScroll,\n scrollAdapter,\n ]);\n\n // Вкладываем панели друг в друга через проп nextPane\n const items = React.Children.toArray(children) as PaneElement[];\n\n const nested = items.reduceRight<PaneElement | null>((acc, child) => {\n return React.cloneElement<InternalPaneProps>(child, {\n ...child.props,\n nextPane: acc,\n }) as PaneElement;\n }, null);\n\n return (\n <Layer layer=\"navigation-bar\">\n <MetricsProvider\n className={classNames(styles.navBar, {\n [styles.navbarTransparentStart]: transparent === 'start',\n [styles.navbarTransparentEnd]: transparent === 'end',\n [styles.navbarNotTransparent]: !transparent,\n [styles.navBarOverlay]: overlay,\n })}\n ref={rootRef}\n measureClassName={styles.metricsMode}\n >\n <div className={styles.navBarOverlayWrapper}>\n <div className={styles.navBarContentContainer}>\n <motion.div\n style={{ '--magritte-ui-navbar-animation-progress': totalAnimationProgress } as MotionStyle}\n className={styles.navBarPanesContainer}\n >\n <NavBarContext.Provider value={registerPaneStore}>{nested}</NavBarContext.Provider>\n </motion.div>\n <motion.div\n className={styles.dividerContainer}\n style={{ ...dividerStyle, visibility: dividerVisibility }}\n >\n <Divider />\n </motion.div>\n </div>\n </div>\n </MetricsProvider>\n </Layer>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/index.css
CHANGED
|
@@ -5,97 +5,97 @@
|
|
|
5
5
|
.magritte-night-theme{
|
|
6
6
|
--magritte-color-background-body-v24-3-0:#000000;
|
|
7
7
|
}
|
|
8
|
-
.magritte-actions-container___CBgYW_1-1
|
|
8
|
+
.magritte-actions-container___CBgYW_1-2-1{
|
|
9
9
|
display:flex;
|
|
10
10
|
flex-direction:row;
|
|
11
11
|
gap:12px;
|
|
12
12
|
min-height:40px;
|
|
13
13
|
}
|
|
14
|
-
.magritte-actions-no-children___rgJUl_1-1
|
|
14
|
+
.magritte-actions-no-children___rgJUl_1-2-1{
|
|
15
15
|
justify-content:space-between;
|
|
16
16
|
}
|
|
17
|
-
.magritte-actions-left-slot___DNOj0_1-1
|
|
18
|
-
.magritte-actions-right-slot___aodtj_1-1
|
|
17
|
+
.magritte-actions-left-slot___DNOj0_1-2-1,
|
|
18
|
+
.magritte-actions-right-slot___aodtj_1-2-1{
|
|
19
19
|
display:grid;
|
|
20
20
|
flex:0 0 auto;
|
|
21
21
|
}
|
|
22
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
23
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
24
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
25
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
26
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
22
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:first-child,
|
|
23
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:first-child,
|
|
24
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:first-child,
|
|
25
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:first-child,
|
|
26
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:first-child{
|
|
27
27
|
margin-left:-8px;
|
|
28
28
|
}
|
|
29
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
30
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
31
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
32
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
33
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
29
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:last-child,
|
|
30
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:last-child,
|
|
31
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:last-child,
|
|
32
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:last-child,
|
|
33
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > .magritte-actions-icon-morph___-nNgW_1-2-1:last-child{
|
|
34
34
|
margin-right:-8px;
|
|
35
35
|
}
|
|
36
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
37
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
38
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
39
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
40
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
41
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
42
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
43
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
44
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
45
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
36
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child,
|
|
37
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child,
|
|
38
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child,
|
|
39
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child,
|
|
40
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child,
|
|
41
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
42
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
43
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
44
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
45
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1){
|
|
46
46
|
--magritte-ui-icon-margin-right-override:-8px;
|
|
47
47
|
}
|
|
48
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
49
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
50
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
51
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
52
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
53
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
54
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
55
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
56
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
57
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
48
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child,
|
|
49
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child,
|
|
50
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child,
|
|
51
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child,
|
|
52
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child,
|
|
53
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
54
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
55
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-start-stage___MJ67a_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
56
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-end-stage___qHtTV_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1),
|
|
57
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child:not(.magritte-actions-icon-morph___-nNgW_1-2-1){
|
|
58
58
|
--magritte-ui-icon-margin-left-override:-8px;
|
|
59
59
|
}
|
|
60
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
61
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
60
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child,
|
|
61
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child{
|
|
62
62
|
--magritte-ui-icon-margin-left-override:calc(-8px * var(--magritte-ui-navbar-animation-progress));
|
|
63
63
|
}
|
|
64
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
65
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
64
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child,
|
|
65
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child{
|
|
66
66
|
--magritte-ui-icon-margin-right-override:calc(-8px * var(--magritte-ui-navbar-animation-progress));
|
|
67
67
|
}
|
|
68
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
69
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
68
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :first-child,
|
|
69
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :first-child{
|
|
70
70
|
--magritte-ui-icon-margin-left-override:calc(-8px * (1 - var(--magritte-ui-navbar-animation-progress)));
|
|
71
71
|
}
|
|
72
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
73
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
72
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-right-slot___aodtj_1-2-1 .magritte-actions-side-slot-content___TlHrX_1-2-1 > :last-child,
|
|
73
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-actions-only-stage___cg10A_1-2-1 .magritte-actions-left-slot___DNOj0_1-2-1 .magritte-actions-side-slot-content-clone___jDxVm_1-2-1 > :last-child{
|
|
74
74
|
--magritte-ui-icon-margin-right-override:calc(-8px * (1 - var(--magritte-ui-navbar-animation-progress)));
|
|
75
75
|
}
|
|
76
|
-
.magritte-actions-center-slot___hLAy6_1-1
|
|
76
|
+
.magritte-actions-center-slot___hLAy6_1-2-1{
|
|
77
77
|
display:flex;
|
|
78
78
|
flex:1 1 auto;
|
|
79
79
|
min-width:0;
|
|
80
80
|
}
|
|
81
|
-
.magritte-actions-center-slot___hLAy6_1-1
|
|
81
|
+
.magritte-actions-center-slot___hLAy6_1-2-1.magritte-actions-center-slot-centered___merXQ_1-2-1{
|
|
82
82
|
justify-content:center;
|
|
83
83
|
}
|
|
84
|
-
.magritte-actions-side-slot-content___TlHrX_1-1
|
|
85
|
-
.magritte-actions-side-slot-content-clone___jDxVm_1-1
|
|
84
|
+
.magritte-actions-side-slot-content___TlHrX_1-2-1,
|
|
85
|
+
.magritte-actions-side-slot-content-clone___jDxVm_1-2-1{
|
|
86
86
|
grid-area:1 / 1;
|
|
87
87
|
display:flex;
|
|
88
88
|
align-items:center;
|
|
89
89
|
gap:4px;
|
|
90
90
|
}
|
|
91
|
-
.magritte-actions-side-slot-content-clone___jDxVm_1-1
|
|
91
|
+
.magritte-actions-side-slot-content-clone___jDxVm_1-2-1{
|
|
92
92
|
visibility:hidden;
|
|
93
93
|
z-index:0;
|
|
94
94
|
pointer-events:none;
|
|
95
95
|
user-select:none;
|
|
96
96
|
contain:style layout;
|
|
97
97
|
}
|
|
98
|
-
.magritte-title-container-wrapper___DQUcj_1-1
|
|
98
|
+
.magritte-title-container-wrapper___DQUcj_1-2-1{
|
|
99
99
|
display:flex;
|
|
100
100
|
flex-direction:row;
|
|
101
101
|
align-items:center;
|
|
@@ -103,44 +103,44 @@
|
|
|
103
103
|
min-width:0;
|
|
104
104
|
gap:12px;
|
|
105
105
|
}
|
|
106
|
-
.magritte-title-main-part___npoHN_1-1
|
|
106
|
+
.magritte-title-main-part___npoHN_1-2-1{
|
|
107
107
|
display:flex;
|
|
108
108
|
flex-direction:column;
|
|
109
109
|
flex:0 1 auto;
|
|
110
110
|
min-width:0;
|
|
111
111
|
}
|
|
112
|
-
.magritte-title-main-part___npoHN_1-1
|
|
112
|
+
.magritte-title-main-part___npoHN_1-2-1.magritte-centered___Y2mlP_1-2-1{
|
|
113
113
|
align-items:center;
|
|
114
114
|
}
|
|
115
|
-
.magritte-title-left-slot___HTE7h_1-1
|
|
115
|
+
.magritte-title-left-slot___HTE7h_1-2-1{
|
|
116
116
|
display:flex;
|
|
117
117
|
align-items:center;
|
|
118
118
|
flex:0 0 auto;
|
|
119
119
|
}
|
|
120
|
-
.magritte-title-container___y9AIx_1-1
|
|
120
|
+
.magritte-title-container___y9AIx_1-2-1{
|
|
121
121
|
display:flex;
|
|
122
122
|
flex-direction:row;
|
|
123
123
|
align-items:center;
|
|
124
124
|
gap:5px;
|
|
125
125
|
}
|
|
126
|
-
.magritte-subtitle-container___nVUBu_1-1
|
|
126
|
+
.magritte-subtitle-container___nVUBu_1-2-1{
|
|
127
127
|
display:flex;
|
|
128
128
|
}
|
|
129
|
-
.magritte-title-morph-item___t7Wf3_1-1
|
|
129
|
+
.magritte-title-morph-item___t7Wf3_1-2-1{
|
|
130
130
|
display:flex;
|
|
131
131
|
min-width:0;
|
|
132
132
|
}
|
|
133
|
-
.magritte-title___ZbLgP_1-1
|
|
133
|
+
.magritte-title___ZbLgP_1-2-1{
|
|
134
134
|
display:flex;
|
|
135
135
|
flex:0 1 auto;
|
|
136
136
|
min-width:0;
|
|
137
137
|
}
|
|
138
|
-
.magritte-pane-content___UVmC6_1-1
|
|
138
|
+
.magritte-pane-content___UVmC6_1-2-1{
|
|
139
139
|
position:relative;
|
|
140
140
|
pointer-events:none;
|
|
141
141
|
z-index:2;
|
|
142
142
|
}
|
|
143
|
-
.magritte-pane-background___PDZAX_1-1
|
|
143
|
+
.magritte-pane-background___PDZAX_1-2-1{
|
|
144
144
|
position:absolute;
|
|
145
145
|
background-color:var(--magritte-ui-nav-bar-background-color-override, var(--magritte-color-background-body-v24-3-0));
|
|
146
146
|
opacity:0;
|
|
@@ -148,43 +148,43 @@
|
|
|
148
148
|
z-index:-1;
|
|
149
149
|
transform-origin:0 0;
|
|
150
150
|
}
|
|
151
|
-
.magritte-navbar-transparent-start___wysv0_1-1
|
|
151
|
+
.magritte-navbar-transparent-start___wysv0_1-2-1 .magritte-pane-background___PDZAX_1-2-1{
|
|
152
152
|
opacity:calc(var(--magritte-ui-navbar-animation-progress) * 0.95);
|
|
153
153
|
}
|
|
154
|
-
.magritte-navbar-transparent-end___6KqLR_1-1
|
|
154
|
+
.magritte-navbar-transparent-end___6KqLR_1-2-1 .magritte-pane-background___PDZAX_1-2-1{
|
|
155
155
|
opacity:calc((1 - var(--magritte-ui-navbar-animation-progress)) * 0.95);
|
|
156
156
|
}
|
|
157
|
-
.magritte-navbar-not-transparent___5KZNp_1-1
|
|
157
|
+
.magritte-navbar-not-transparent___5KZNp_1-2-1 .magritte-pane-background___PDZAX_1-2-1{
|
|
158
158
|
opacity:0.95;
|
|
159
159
|
}
|
|
160
|
-
.magritte-morph-item___8kF46_1-1
|
|
160
|
+
.magritte-morph-item___8kF46_1-2-1{
|
|
161
161
|
line-height:0;
|
|
162
162
|
transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
|
|
163
163
|
}
|
|
164
|
-
.magritte-morph-item-top___WPEkn_1-1
|
|
164
|
+
.magritte-morph-item-top___WPEkn_1-2-1{
|
|
165
165
|
--magritte-ui-morph-item-transform-origin-y:top;
|
|
166
166
|
}
|
|
167
|
-
.magritte-morph-item-bottom___zNbsF_1-1
|
|
167
|
+
.magritte-morph-item-bottom___zNbsF_1-2-1{
|
|
168
168
|
--magritte-ui-morph-item-transform-origin-y:bottom;
|
|
169
169
|
}
|
|
170
|
-
.magritte-morph-item-left___T6AMW_1-1
|
|
170
|
+
.magritte-morph-item-left___T6AMW_1-2-1{
|
|
171
171
|
--magritte-ui-morph-item-transform-origin-x:left;
|
|
172
172
|
}
|
|
173
|
-
.magritte-morph-item-right___EuT1E_1-1
|
|
173
|
+
.magritte-morph-item-right___EuT1E_1-2-1{
|
|
174
174
|
--magritte-ui-morph-item-transform-origin-x:right;
|
|
175
175
|
}
|
|
176
|
-
.magritte-pane___f8eFC_1-1
|
|
176
|
+
.magritte-pane___f8eFC_1-2-1{
|
|
177
177
|
position:relative;
|
|
178
178
|
overflow:hidden;
|
|
179
179
|
pointer-events:none;
|
|
180
180
|
}
|
|
181
|
-
.magritte-start-state-container___giBVb_1-1
|
|
181
|
+
.magritte-start-state-container___giBVb_1-2-1{
|
|
182
182
|
position:relative;
|
|
183
183
|
z-index:1;
|
|
184
184
|
box-sizing:border-box;
|
|
185
185
|
pointer-events:auto;
|
|
186
186
|
}
|
|
187
|
-
.magritte-end-state-container___uiW8Q_1-1
|
|
187
|
+
.magritte-end-state-container___uiW8Q_1-2-1{
|
|
188
188
|
position:absolute;
|
|
189
189
|
z-index:0;
|
|
190
190
|
top:0;
|
|
@@ -193,51 +193,51 @@
|
|
|
193
193
|
pointer-events:none;
|
|
194
194
|
opacity:0;
|
|
195
195
|
}
|
|
196
|
-
.magritte-content-container___7s7vv_1-1
|
|
196
|
+
.magritte-content-container___7s7vv_1-2-1{
|
|
197
197
|
box-sizing:border-box;
|
|
198
198
|
}
|
|
199
|
-
.magritte-next-pane___H2oxQ_1-1
|
|
199
|
+
.magritte-next-pane___H2oxQ_1-2-1{
|
|
200
200
|
position:relative;
|
|
201
201
|
}
|
|
202
|
-
.magritte-nav-bar___RRGe0_1-1
|
|
202
|
+
.magritte-nav-bar___RRGe0_1-2-1{
|
|
203
203
|
top:0;
|
|
204
204
|
position:sticky;
|
|
205
205
|
pointer-events:none;
|
|
206
206
|
overflow-anchor:none;
|
|
207
207
|
z-index:10;
|
|
208
208
|
}
|
|
209
|
-
.magritte-nav-bar-overlay___Mq5ZD_1-1
|
|
209
|
+
.magritte-nav-bar-overlay___Mq5ZD_1-2-1 .magritte-nav-bar-overlay-wrapper___y1VpY_1-2-1{
|
|
210
210
|
position:absolute;
|
|
211
211
|
inset:0;
|
|
212
212
|
}
|
|
213
|
-
.magritte-nav-bar-content-container___H-WMO_1-1
|
|
213
|
+
.magritte-nav-bar-content-container___H-WMO_1-2-1{
|
|
214
214
|
display:grid;
|
|
215
215
|
position:relative;
|
|
216
216
|
}
|
|
217
|
-
.magritte-nav-bar-panes-container___5ZDLa_1-1
|
|
217
|
+
.magritte-nav-bar-panes-container___5ZDLa_1-2-1{
|
|
218
218
|
position:relative;
|
|
219
219
|
z-index:1;
|
|
220
220
|
grid-area:1 / 1;
|
|
221
221
|
min-width:0;
|
|
222
222
|
}
|
|
223
|
-
.magritte-nav-bar-progressive-blur___qyeUV_1-1
|
|
223
|
+
.magritte-nav-bar-progressive-blur___qyeUV_1-2-1{
|
|
224
224
|
position:relative;
|
|
225
225
|
z-index:0;
|
|
226
226
|
transform-origin:0 0;
|
|
227
227
|
grid-area:1 / 1;
|
|
228
228
|
min-width:0;
|
|
229
229
|
}
|
|
230
|
-
.magritte-nav-bar-content-container___H-WMO_1-1
|
|
231
|
-
.magritte-nav-bar-content-container___H-WMO_1-1
|
|
232
|
-
.magritte-nav-bar-content-container___H-WMO_1-1
|
|
230
|
+
.magritte-nav-bar-content-container___H-WMO_1-2-1 :not(.magritte-next-pane___H2oxQ_1-2-1) .magritte-nav-bar-stage___amDz7_1-2-1,
|
|
231
|
+
.magritte-nav-bar-content-container___H-WMO_1-2-1 :not(.magritte-next-pane___H2oxQ_1-2-1) .nav-bar-layout-animation-stage-start,
|
|
232
|
+
.magritte-nav-bar-content-container___H-WMO_1-2-1 :not(.magritte-next-pane___H2oxQ_1-2-1) .nav-bar-layout-animation-stage-end{
|
|
233
233
|
padding-top:calc(8px + var(--magritte-ui-nav-bar-padding-top-override, 0px));
|
|
234
234
|
}
|
|
235
|
-
.magritte-nav-bar-stage___amDz7_1-1
|
|
235
|
+
.magritte-nav-bar-stage___amDz7_1-2-1{
|
|
236
236
|
padding:8px var(--magritte-ui-nav-bar-stage-horizontal-padding-override, 16px);
|
|
237
237
|
}
|
|
238
|
-
.magritte-metrics-mode___h38aX_1-1
|
|
239
|
-
.magritte-metrics-mode___h38aX_1-1
|
|
240
|
-
.magritte-metrics-mode___h38aX_1-1
|
|
238
|
+
.magritte-metrics-mode___h38aX_1-2-1 .magritte-morph-item___8kF46_1-2-1,
|
|
239
|
+
.magritte-metrics-mode___h38aX_1-2-1 .magritte-pane___f8eFC_1-2-1,
|
|
240
|
+
.magritte-metrics-mode___h38aX_1-2-1 .magritte-next-pane___H2oxQ_1-2-1{
|
|
241
241
|
transform:none !important;
|
|
242
242
|
}
|
|
243
243
|
.nav-bar-layout-animation-stage-end,
|
|
@@ -248,41 +248,41 @@
|
|
|
248
248
|
height:auto !important;
|
|
249
249
|
transform:none !important;
|
|
250
250
|
}
|
|
251
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-1
|
|
252
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-1
|
|
251
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-2-1,
|
|
252
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-2-1{
|
|
253
253
|
position:static !important;
|
|
254
254
|
width:auto !important;
|
|
255
255
|
height:auto !important;
|
|
256
256
|
transform:none !important;
|
|
257
257
|
}
|
|
258
|
-
.magritte-layout-morph___I3SPy_1-1
|
|
258
|
+
.magritte-layout-morph___I3SPy_1-2-1{
|
|
259
259
|
display:block;
|
|
260
260
|
position:absolute;
|
|
261
261
|
transform-origin:var(--magritte-ui-morph-item-transform-origin-x, center) var(--magritte-ui-morph-item-transform-origin-y, center);
|
|
262
262
|
z-index:3;
|
|
263
263
|
}
|
|
264
|
-
.magritte-animation-stage-progress___5FthT_1-1
|
|
264
|
+
.magritte-animation-stage-progress___5FthT_1-2-1 .magritte-layout-morph___I3SPy_1-2-1 > *{
|
|
265
265
|
margin:0 !important;
|
|
266
266
|
}
|
|
267
|
-
.magritte-layout-morph-start___9-krP_1-1
|
|
267
|
+
.magritte-layout-morph-start___9-krP_1-2-1{
|
|
268
268
|
z-index:2;
|
|
269
269
|
}
|
|
270
|
-
.magritte-layout-morph-end___LIg4d_1-1
|
|
270
|
+
.magritte-layout-morph-end___LIg4d_1-2-1{
|
|
271
271
|
z-index:1;
|
|
272
272
|
}
|
|
273
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-1
|
|
273
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph___I3SPy_1-2-1{
|
|
274
274
|
display:contents;
|
|
275
275
|
}
|
|
276
|
-
.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-1
|
|
276
|
+
.nav-bar-layout-animation-stage-start .magritte-layout-morph-end___LIg4d_1-2-1{
|
|
277
277
|
display:none;
|
|
278
278
|
}
|
|
279
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-1
|
|
279
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph___I3SPy_1-2-1{
|
|
280
280
|
display:contents;
|
|
281
281
|
}
|
|
282
|
-
.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-1
|
|
282
|
+
.nav-bar-layout-animation-stage-end .magritte-layout-morph-start___9-krP_1-2-1{
|
|
283
283
|
display:none;
|
|
284
284
|
}
|
|
285
|
-
.magritte-divider-container___-NdWi_1-1
|
|
285
|
+
.magritte-divider-container___-NdWi_1-2-1{
|
|
286
286
|
position:absolute;
|
|
287
287
|
width:100%;
|
|
288
288
|
bottom:0;
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
export { Actions } from './public/Actions.js';
|
|
3
|
-
export { N as NavBar } from './NavBar-
|
|
3
|
+
export { N as NavBar } from './NavBar-B3VrIKUf.js';
|
|
4
4
|
export { ExternalPane as Pane } from './public/Pane.js';
|
|
5
5
|
export { ExternalStage as Stage } from './public/Stage.js';
|
|
6
6
|
export { Morph } from './public/Morph.js';
|
package/internal/PaneStore.js
CHANGED
|
@@ -3,7 +3,7 @@ import { createContext, useContext, useId, useLayoutEffect } from 'react';
|
|
|
3
3
|
import { motionValue } from 'motion';
|
|
4
4
|
import { KeyedSubscriptions } from './KeyedSubscriptions.js';
|
|
5
5
|
import { useInitOnce } from './utils.js';
|
|
6
|
-
import { u as useNavBarContext } from '../NavBar-
|
|
6
|
+
import { u as useNavBarContext } from '../NavBar-B3VrIKUf.js';
|
|
7
7
|
import 'react/jsx-runtime';
|
|
8
8
|
import 'classnames';
|
|
9
9
|
import 'motion/react';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-nav-bar",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
|
|
31
31
|
"@hh.ru/magritte-common-use-when-font-loaded": "1.0.13",
|
|
32
32
|
"@hh.ru/magritte-design-tokens": "24.3.0",
|
|
33
|
-
"@hh.ru/magritte-internal-custom-scroll": "2.0
|
|
33
|
+
"@hh.ru/magritte-internal-custom-scroll": "2.1.0",
|
|
34
34
|
"@hh.ru/magritte-ui-divider": "3.0.15",
|
|
35
|
-
"@hh.ru/magritte-ui-icon": "13.
|
|
35
|
+
"@hh.ru/magritte-ui-icon": "13.8.0",
|
|
36
36
|
"@hh.ru/magritte-ui-layer": "3.2.0",
|
|
37
37
|
"@hh.ru/magritte-ui-mock-component": "1.1.6"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "2c6d085c7d33bd8dcd6022954683db83c23a91c8"
|
|
40
40
|
}
|
package/public/Actions.js
CHANGED
|
@@ -6,7 +6,7 @@ import { isIconElement } from '@hh.ru/magritte-ui-icon';
|
|
|
6
6
|
import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
|
|
7
7
|
import { Morph } from './Morph.js';
|
|
8
8
|
import { useAnimationStage } from './Stage.js';
|
|
9
|
-
import { s as styles } from '../NavBar-
|
|
9
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
10
10
|
import '../internal/MetricsProvider.js';
|
|
11
11
|
import '../internal/utils.js';
|
|
12
12
|
import 'motion';
|
package/public/LayoutMorph.js
CHANGED
|
@@ -10,7 +10,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
|
|
|
10
10
|
import { useInert } from '../internal/useInert.js';
|
|
11
11
|
import { useActualRef, useStoreSyncedTransform, lerp, calcMorphParams } from '../internal/utils.js';
|
|
12
12
|
import { AnimationStageContext } from './LayoutStage.js';
|
|
13
|
-
import { s as styles } from '../NavBar-
|
|
13
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
14
14
|
import '../internal/KeyedSubscriptions.js';
|
|
15
15
|
import 'motion';
|
|
16
16
|
import '@hh.ru/magritte-common-use-when-font-loaded';
|
package/public/LayoutStage.js
CHANGED
|
@@ -9,7 +9,7 @@ import { MorphStoreProvider, useMorphStore } from '../internal/MorphStore.js';
|
|
|
9
9
|
import { usePaneStore } from '../internal/PaneStore.js';
|
|
10
10
|
import { useInitOnce } from '../internal/utils.js';
|
|
11
11
|
import { EnvironmentFingerprintNode, useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
|
|
12
|
-
import { s as styles } from '../NavBar-
|
|
12
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '@hh.ru/magritte-ui-divider';
|
package/public/Morph.js
CHANGED
|
@@ -9,7 +9,7 @@ import { usePaneStore } from '../internal/PaneStore.js';
|
|
|
9
9
|
import { useStoreSyncedTransform, calcMorphParams, lerp } from '../internal/utils.js';
|
|
10
10
|
import { useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
|
|
11
11
|
import { useAnimationStage } from './Stage.js';
|
|
12
|
-
import { s as styles } from '../NavBar-
|
|
12
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '../internal/useInert.js';
|
package/public/NavBar.js
CHANGED
|
@@ -14,7 +14,7 @@ import '../internal/useScrollAdapter.js';
|
|
|
14
14
|
import '../internal/useSnapScroll.js';
|
|
15
15
|
import '../internal/useSyncMotionValue.js';
|
|
16
16
|
import '../internal/utils.js';
|
|
17
|
-
export { N as NavBar, u as useNavBarContext } from '../NavBar-
|
|
17
|
+
export { N as NavBar, u as useNavBarContext } from '../NavBar-B3VrIKUf.js';
|
|
18
18
|
import 'motion';
|
|
19
19
|
import '@hh.ru/magritte-internal-custom-scroll';
|
|
20
20
|
//# sourceMappingURL=NavBar.js.map
|
package/public/Pane.js
CHANGED
|
@@ -9,7 +9,7 @@ import { useInitOnce, useStoreSyncedTransform, lerp } from '../internal/utils.js
|
|
|
9
9
|
import { EnvironmentFingerprintProvider } from './EnvironmentFingerprintNode.js';
|
|
10
10
|
import { LayoutStage } from './LayoutStage.js';
|
|
11
11
|
import { Stage } from './Stage.js';
|
|
12
|
-
import { s as styles } from '../NavBar-
|
|
12
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
|
14
14
|
import 'motion';
|
|
15
15
|
import '../internal/MetricsProvider.js';
|
package/public/Stage.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useMeasureAuto } from '../internal/MetricsProvider.js';
|
|
|
7
7
|
import { usePaneStore } from '../internal/PaneStore.js';
|
|
8
8
|
import { useInert } from '../internal/useInert.js';
|
|
9
9
|
import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
|
|
10
|
-
import { s as styles } from '../NavBar-
|
|
10
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
11
11
|
import '../internal/utils.js';
|
|
12
12
|
import 'motion';
|
|
13
13
|
import '../internal/KeyedSubscriptions.js';
|
package/public/TitleContainer.js
CHANGED
|
@@ -2,7 +2,7 @@ import './../index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { Morph } from './Morph.js';
|
|
5
|
-
import { s as styles } from '../NavBar-
|
|
5
|
+
import { s as styles } from '../NavBar-B3VrIKUf.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'motion/react';
|
|
8
8
|
import '../internal/MetricsProvider.js';
|