@hh.ru/magritte-ui-bottom-sheet 8.2.9 → 8.2.11

package/BottomSheet.js

@@ -16,11 +16,10 @@ import { ClickInterceptor } from './ClickInterceptor.js';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { Divider } from '@hh.ru/magritte-ui-divider';
 import { Layer } from '@hh.ru/magritte-ui-layer';
-import { isNavigationBarComponent, NavigationBarComponent } from '@hh.ru/magritte-ui-navigation-bar';
 import { TextAreaGrowLimiter } from '@hh.ru/magritte-ui-textarea';
 import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
 import { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';
-import { s as styles } from './bottom-sheet-C6FIprRU.js';
+import { s as styles } from './bottom-sheet-Blf76yQK.js';
 
 const CSS_VAR_ENTER_ANIMATION_DURATION = '--enter-animation-duration';
 const CSS_VAR_EXIT_ANIMATION_DURATION = '--exit-animation-duration';
@@ -69,13 +68,13 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     const SWIPE_THRESHOLD = useRef({ max: Infinity });
     const VIEWPORT_HEIGHT = useRef(0);
     const contentRef = useRef(null);
+    const headerWrapperRef = useRef(null);
     const contentOverlayRef = useRef(null);
     const cssVariablesContainerRef = useRef(null);
     const dividerRef = useRef(null);
     const focusedElementRef = useRef(null);
     const footerRef = useRef(null);
     const grabberRef = useRef(null);
-    const headerRef = useRef(null);
     const overlayRef = useRef(null);
     const scrollContainerRef = useRef(null);
     const swipeContainerRef = useRef(null);
@@ -84,7 +83,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     const scrollContextProviderRef = useRef(null);
     const GrowLimitWrapper = isContentSizedFullHeight(children) ? Fragment : TextAreaGrowLimiter;
     const growLimiterRef = useRef(null);
-    const [growLimiterContextValue, _] = useState(() => {
+    const growLimiterContextValue = useState(() => {
         let height = 'auto';
         let limiterFlex = '1 0';
         return {
@@ -102,7 +101,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 growLimiterRef.current && (growLimiterRef.current.style.flex = limiterFlex);
             },
         };
-    });
+    })[0];
     const growLimiterProps = useMemo(() => GrowLimitWrapper === TextAreaGrowLimiter
         ? {
             ...growLimiterContextValue,
@@ -158,9 +157,13 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     }, [setHasTouchSupport]);
     const bindEscapeToClose = useEscapeToClose(() => currentVisible && onCloseRef.current(null));
     useEffect(() => bindEscapeToClose(document.body), [bindEscapeToClose]);
-    const LayoutMetrics = useRef((() => {
+    // TODO: replace by useInitOnce
+    const LayoutMetrics = useState(() => {
         let cache = {};
         return {
+            get scrollTop() {
+                return Math.max(-stateRef.current.scrollOffset, 0);
+            },
             get bottomSheetHeight() {
                 if (!('bottomSheetHeight' in cache) && visualContainerRef.current !== null) {
                     cache.bottomSheetHeight = visualContainerRef.current.clientHeight;
@@ -182,8 +185,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
              */
             get visibleContentHeight() {
                 if (!('visibleContentHeight' in cache) && scrollContainerRef.current !== null) {
-                    const layoutHeaderHeight = headerRef.current?.layoutHeight ?? 0;
-                    cache.visibleContentHeight = scrollContainerRef.current.clientHeight - layoutHeaderHeight;
+                    cache.visibleContentHeight = scrollContainerRef.current.clientHeight - LayoutMetrics.headerHeight;
                 }
                 return cache.visibleContentHeight ?? 0;
             },
@@ -191,9 +193,9 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
              * Положение верхнего края видимой части контента относительно вьюпорта
              */
             get contentTop() {
-                if (!('contentTop' in cache) && visualContainerRef.current !== null) {
-                    const visibleHeaderHeight = headerRef.current?.visibleHeight ?? 0;
-                    cache.contentTop = visualContainerRef.current.offsetTop + visibleHeaderHeight;
+                if (!('contentTop' in cache) && visualContainerRef.current !== null && contentRef.current !== null) {
+                    cache.contentTop =
+                        contentRef.current.offsetTop - LayoutMetrics.scrollTop + visualContainerRef.current.offsetTop;
                 }
                 return cache.contentTop ?? 0;
             },
@@ -208,8 +210,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
              * Может отличаться от видимой высоты NavigationBar
              */
             get headerHeight() {
-                if (!('headerHeight' in cache) && headerRef.current !== null) {
-                    cache.headerHeight = headerRef.current.layoutHeight;
+                if (!('headerHeight' in cache) && headerWrapperRef.current !== null) {
+                    cache.headerHeight = headerWrapperRef.current.offsetHeight;
                 }
                 return cache.headerHeight ?? 0;
             },
@@ -229,7 +231,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 return cache.initialOffset ?? 0;
             },
             get maxScrollTop() {
-                return LayoutMetrics.current.contentHeight - LayoutMetrics.current.visibleContentHeight;
+                return LayoutMetrics.contentHeight - LayoutMetrics.visibleContentHeight;
             },
             /**
              * Расстояние между верхним краем боттомшита и границей вьюпорта
@@ -244,7 +246,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 cache = {};
             },
         };
-    })());
+    })[0];
     const setCSSVariable = (name, value) => cssVariablesContainerRef.current !== null && cssVariablesContainerRef.current.style.setProperty(name, value);
     useEffect(() => {
         if (!currentVisible) {
@@ -301,43 +303,41 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     }, [currentVisible, isSafari]);
     const fixOverscroll = useCallback(() => {
         if (hasTouchSupport) {
-            const isOverscrolled = LayoutMetrics.current.contentHeight + stateRef.current.scrollOffset <
-                LayoutMetrics.current.visibleContentHeight;
+            const isOverscrolled = LayoutMetrics.contentHeight + stateRef.current.scrollOffset < LayoutMetrics.visibleContentHeight;
             if (isOverscrolled) {
-                stateRef.current.scrollOffset =
-                    LayoutMetrics.current.visibleContentHeight - LayoutMetrics.current.contentHeight;
+                stateRef.current.scrollOffset = LayoutMetrics.visibleContentHeight - LayoutMetrics.contentHeight;
                 if (contentRef.current !== null) {
                     contentRef.current.style.transform = translateY(stateRef.current.scrollOffset);
                 }
-                scrollContextProviderRef.current?.notify({
+                scrollContextProviderRef.current?.notifyScroll({
                     scrollTop: -stateRef.current.scrollOffset,
-                    maxScrollTop: LayoutMetrics.current.maxScrollTop,
+                    maxScrollTop: LayoutMetrics.maxScrollTop,
                 });
             }
         }
-    }, [hasTouchSupport]);
+    }, [hasTouchSupport, LayoutMetrics]);
     const resetScrollPosition = useCallback(() => {
         if (hasTouchSupport) {
-            stateRef.current.scrollOffset = LayoutMetrics.current.initialOffset;
+            stateRef.current.scrollOffset = LayoutMetrics.initialOffset;
             stateRef.current.swipeOffset = 0;
             if (contentRef.current !== null) {
                 contentRef.current.style.transform = translateY(0);
             }
             if (swipeContainerRef.current !== null) {
-                swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.initialOffset);
+                swipeContainerRef.current.style.transform = translateY(LayoutMetrics.initialOffset);
             }
         }
         else {
             scrollContainerRef.current?.scrollTo({ top: 0 });
         }
-    }, [hasTouchSupport]);
+    }, [hasTouchSupport, LayoutMetrics]);
     const recalcScrollFlags = useCallback(() => {
         const scrollOffset = hasTouchSupport
             ? stateRef.current.scrollOffset
             : -(scrollContainerRef.current?.scrollTop ?? 0);
         if (dividerRef.current !== null) {
             const prevDividerVisible = stateRef.current.dividerVisible;
-            const isNotScrolledToEnd = LayoutMetrics.current.contentHeight + scrollOffset > LayoutMetrics.current.visibleContentHeight;
+            const isNotScrolledToEnd = LayoutMetrics.contentHeight + scrollOffset > LayoutMetrics.visibleContentHeight;
             stateRef.current.dividerVisible =
                 showDivider === 'always' || (showDivider === 'with-scroll' && isNotScrolledToEnd);
             if (stateRef.current.dividerVisible !== prevDividerVisible) {
@@ -348,12 +348,12 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             const prevGrabberUnsafe = stateRef.current.grabberUnsafe;
             stateRef.current.grabberUnsafe =
                 Math.round(Math.max(scrollOffset, 0) + stateRef.current.swipeOffset) ===
-                    LayoutMetrics.current.remainingAvailableHeight;
+                    LayoutMetrics.remainingAvailableHeight;
             if (stateRef.current.grabberUnsafe !== prevGrabberUnsafe) {
                 grabberRef.current.classList.toggle(styles.grabberEnsureSafe, stateRef.current.grabberUnsafe);
             }
         }
-    }, [hasTouchSupport, showDivider]);
+    }, [hasTouchSupport, showDivider, LayoutMetrics]);
     // терминология: https://developer.chrome.com/blog/viewport-resize-behavior/
     //
     // при открытии виртуальной клавиатуры браузеры двигают Visual Viewport и Layout Viewport
@@ -367,7 +367,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             return;
         }
         // разворачиваем боттомшит с height=half-screen на всю доступную высоту
-        if (LayoutMetrics.current.initialOffset > 0 && stateRef.current.scrollOffset > 0) {
+        if (LayoutMetrics.initialOffset > 0 && stateRef.current.scrollOffset > 0) {
             stateRef.current.scrollOffset = 0;
             contentRef.current.style.transform = translateY(0);
             swipeContainerRef.current.style.transform = translateY(0);
@@ -375,7 +375,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 footerRef.current.style.transform = translateY(0);
             }
         }
-        LayoutMetrics.current.invalidateCache();
+        LayoutMetrics.invalidateCache();
         const isKeyboardVisible = visualViewport.height !== VIEWPORT_HEIGHT.current;
         if (stateRef.current.hasFocus && focusedElementRef.current !== null && isKeyboardVisible) {
             const overlayDOMRect = overlayRef.current.getBoundingClientRect();
@@ -399,20 +399,20 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${topOffset}px`);
                 setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${bottomOffset}px`);
             }
-            LayoutMetrics.current.invalidateCache();
+            LayoutMetrics.invalidateCache();
             // если фокусируемый элемент лежит внутри скроллящегося контейнера и не виден, скроллим к нему
             if (contentRef.current.contains(focusedElementRef.current)) {
                 let focusedElementOffset = 0;
                 for (let offsetElement = focusedElementRef.current.closest('[data-interactive]') ?? focusedElementRef.current; offsetElement !== contentRef.current && offsetElement !== null; offsetElement = offsetElement.offsetParent) {
                     focusedElementOffset += offsetElement.offsetTop;
                 }
-                const newScrollOffset = -Math.min(Math.max(focusedElementOffset - 10, 0), LayoutMetrics.current.maxScrollTop);
+                const newScrollOffset = -Math.min(Math.max(focusedElementOffset - 10, 0), LayoutMetrics.maxScrollTop);
                 if (stateRef.current.scrollOffset !== newScrollOffset) {
                     stateRef.current.scrollOffset = newScrollOffset;
                     contentRef.current.style.transform = translateY(stateRef.current.scrollOffset);
-                    scrollContextProviderRef.current?.notify({
+                    scrollContextProviderRef.current?.notifyScroll({
                         scrollTop: -stateRef.current.scrollOffset,
-                        maxScrollTop: LayoutMetrics.current.maxScrollTop,
+                        maxScrollTop: LayoutMetrics.maxScrollTop,
                     });
                 }
             }
@@ -423,7 +423,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         else {
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
-            LayoutMetrics.current.invalidateCache();
+            LayoutMetrics.invalidateCache();
             fixOverscroll();
             recalcScrollFlags();
             virtualKeyboardOffsetsRef.current.top = 0;
@@ -432,7 +432,15 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         stateRef.current.skipHeightAnimation = true;
         setTimeout(() => (stateRef.current.skipHeightAnimation = false), 100);
         bottomSheetContext.keyboardResizeHandlers.forEach((handler) => handler());
-    }, [fixOverscroll, hasTouchSupport, isSafari, keyboardOverlaysFooter, recalcScrollFlags, bottomSheetContext]);
+    }, [
+        fixOverscroll,
+        hasTouchSupport,
+        isSafari,
+        keyboardOverlaysFooter,
+        recalcScrollFlags,
+        bottomSheetContext,
+        LayoutMetrics,
+    ]);
     const handleFocus = useCallback((event) => {
         const focusedElement = event.target;
         const initialViewportHeight = visualViewport?.height;
@@ -496,38 +504,38 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         if (contentOverlayRef.current !== null &&
             scrollContainerRef.current !== null &&
             visualContainerRef.current !== null) {
-            contentOverlayRef.current.style.top = `${LayoutMetrics.current.contentTop}px`;
-            contentOverlayRef.current.style.height = `${LayoutMetrics.current.visibleContentHeight}px`;
+            contentOverlayRef.current.style.top = `${LayoutMetrics.contentTop}px`;
+            contentOverlayRef.current.style.height = `${LayoutMetrics.visibleContentHeight}px`;
         }
-    }, []);
+    }, [LayoutMetrics]);
     // помещает боттомшит в позицию вне экрана снизу, которая может быть начальной либо конечной точкой анимации
     const setTransformToInvisible = useCallback(() => {
-        LayoutMetrics.current.invalidateCache();
+        LayoutMetrics.invalidateCache();
         if (overlayRef.current !== null) {
             overlayRef.current.style.opacity = `0`;
         }
         if (swipeContainerRef.current !== null) {
-            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.bottomSheetHeight);
+            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.bottomSheetHeight);
         }
         requestAnimationFrame(recalcContentOverlayPosition);
         requestAnimationFrame(recalcScrollFlags);
-    }, [recalcContentOverlayPosition, recalcScrollFlags]);
+    }, [recalcContentOverlayPosition, recalcScrollFlags, LayoutMetrics]);
     // помещает боттомшит в дефолтную позицию на экране, которая может быть начальной либо конечной точкой анимации
     const setTransformToVisible = useCallback(() => {
-        LayoutMetrics.current.invalidateCache();
-        stateRef.current.scrollOffset = LayoutMetrics.current.initialOffset;
+        LayoutMetrics.invalidateCache();
+        stateRef.current.scrollOffset = LayoutMetrics.initialOffset;
         if (overlayRef.current !== null) {
             overlayRef.current.style.opacity = `1`;
         }
         if (swipeContainerRef.current !== null) {
-            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.initialOffset + stateRef.current.swipeOffset);
+            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.initialOffset + stateRef.current.swipeOffset);
         }
         if (footerRef.current !== null) {
-            footerRef.current.style.transform = translateY(-LayoutMetrics.current.initialOffset);
+            footerRef.current.style.transform = translateY(-LayoutMetrics.initialOffset);
         }
         requestAnimationFrame(recalcContentOverlayPosition);
         requestAnimationFrame(recalcScrollFlags);
-    }, [recalcContentOverlayPosition, recalcScrollFlags]);
+    }, [recalcContentOverlayPosition, recalcScrollFlags, LayoutMetrics]);
     const handleExitAnimationStart = useCallback(() => {
         setTransformToVisible();
         onBeforeExit?.();
@@ -542,15 +550,15 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         onAfterExit?.();
     }, [onAfterExit]);
     const handleHeightAnimationStart = useCallback(() => {
-        LayoutMetrics.current.invalidateCache();
+        LayoutMetrics.invalidateCache();
         if (stateRef.current.heightAnimationDiff !== null && visualContainerRef.current !== null) {
-            visualContainerRef.current.style.height = `${LayoutMetrics.current.bottomSheetHeight + stateRef.current.heightAnimationDiff}px`;
+            visualContainerRef.current.style.height = `${LayoutMetrics.bottomSheetHeight + stateRef.current.heightAnimationDiff}px`;
         }
-    }, []);
+    }, [LayoutMetrics]);
     const handleHeightAnimationEnd = useCallback(() => {
-        LayoutMetrics.current.invalidateCache();
+        LayoutMetrics.invalidateCache();
         if (visualContainerRef.current !== null) {
-            visualContainerRef.current.style.height = `${LayoutMetrics.current.bottomSheetHeight}px`;
+            visualContainerRef.current.style.height = `${LayoutMetrics.bottomSheetHeight}px`;
         }
         stateRef.current.heightAnimationDiff = null;
         stateRef.current.heightAnimationCallback && requestAnimationFrame(stateRef.current.heightAnimationCallback);
@@ -558,11 +566,11 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         setHeightAnimationRunning(false);
         requestAnimationFrame(recalcContentOverlayPosition);
         requestAnimationFrame(recalcScrollFlags);
-        scrollContextProviderRef.current?.notify({
+        scrollContextProviderRef.current?.notifyScroll({
             scrollTop: 0,
-            maxScrollTop: LayoutMetrics.current.maxScrollTop,
+            maxScrollTop: LayoutMetrics.maxScrollTop,
         });
-    }, [setHeightAnimationRunning, recalcContentOverlayPosition, recalcScrollFlags]);
+    }, [setHeightAnimationRunning, recalcContentOverlayPosition, recalcScrollFlags, LayoutMetrics]);
     const handleSwipeMove = useCallback((event) => {
         if ((stateRef.current.touchAction !== null && stateRef.current.touchAction !== 'swipe') ||
             hasSelectedText()) {
@@ -620,69 +628,72 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         onSwipeEnd: handleSwipeEnd,
         onSwipeCancel: handleSwipeCancel,
     });
-    const initTransformHandlers = useCallback(() => {
-        const visualContainer = visualContainerRef.current;
-        if (!visualContainer) {
-            return void 0;
-        }
-        const handleScroll = (delta) => {
-            if (LayoutMetrics.current.initialOffset !== 0 ||
-                LayoutMetrics.current.contentHeight > LayoutMetrics.current.visibleContentHeight) {
-                // храним неокругленное значение для translateY, чтобы анимация была плавнее
-                let newScrollOffset = stateRef.current.scrollOffset + delta;
-                const roundedNewScrollOffset = Math.round(newScrollOffset);
-                if (roundedNewScrollOffset >= LayoutMetrics.current.initialOffset) {
-                    // скролла нет (touchAction is null)
-                    // либо контент проскроллен в начало, тогда не даем скроллить дальше
-                    newScrollOffset = LayoutMetrics.current.initialOffset;
-                    if (stateRef.current.touchAction === 'scroll') {
-                        stateRef.current.touchAction = 'complete';
-                    }
+    const handleScroll = useCallback((delta) => {
+        if (LayoutMetrics.initialOffset !== 0 || LayoutMetrics.contentHeight > LayoutMetrics.visibleContentHeight) {
+            // храним неокругленное значение для translateY, чтобы анимация была плавнее
+            let newScrollOffset = stateRef.current.scrollOffset + delta;
+            const roundedNewScrollOffset = Math.round(newScrollOffset);
+            if (roundedNewScrollOffset >= LayoutMetrics.initialOffset) {
+                // скролла нет (touchAction is null)
+                // либо контент проскроллен в начало, тогда не даем скроллить дальше
+                newScrollOffset = LayoutMetrics.initialOffset;
+                if (stateRef.current.touchAction === 'scroll') {
+                    stateRef.current.touchAction = 'complete';
                 }
-                else if (LayoutMetrics.current.contentHeight + roundedNewScrollOffset <=
-                    LayoutMetrics.current.visibleContentHeight) {
-                    // скролла нет (touchAction is null)
-                    // либо контент проскроллен до конца, тогда не даем скроллить дальше
-                    newScrollOffset = LayoutMetrics.current.visibleContentHeight - LayoutMetrics.current.contentHeight;
-                    if (stateRef.current.touchAction === 'scroll') {
-                        stateRef.current.touchAction = 'complete';
-                    }
-                }
-                else {
-                    // скролл в процессе
-                    stateRef.current.touchAction = 'scroll';
+            }
+            else if (LayoutMetrics.contentHeight + roundedNewScrollOffset <= LayoutMetrics.visibleContentHeight) {
+                // скролла нет (touchAction is null)
+                // либо контент проскроллен до конца, тогда не даем скроллить дальше
+                newScrollOffset = LayoutMetrics.visibleContentHeight - LayoutMetrics.contentHeight;
+                if (stateRef.current.touchAction === 'scroll') {
+                    stateRef.current.touchAction = 'complete';
                 }
-                if (stateRef.current.scrollOffset !== newScrollOffset) {
-                    const offsetWasPositive = stateRef.current.scrollOffset > 0;
-                    stateRef.current.scrollOffset = newScrollOffset;
-                    if (contentRef.current !== null && swipeContainerRef.current !== null) {
-                        if (newScrollOffset > 0) {
-                            if (!offsetWasPositive) {
-                                contentRef.current.style.transform = translateY(0);
-                            }
-                            swipeContainerRef.current.style.transform = translateY(newScrollOffset);
-                            if (footerRef.current !== null) {
-                                footerRef.current.style.transform = translateY(-newScrollOffset);
-                            }
+            }
+            else {
+                // скролл в процессе
+                stateRef.current.touchAction = 'scroll';
+            }
+            if (stateRef.current.scrollOffset !== newScrollOffset) {
+                const offsetWasPositive = stateRef.current.scrollOffset > 0;
+                stateRef.current.scrollOffset = newScrollOffset;
+                if (contentRef.current !== null && swipeContainerRef.current !== null) {
+                    if (newScrollOffset > 0) {
+                        if (!offsetWasPositive) {
+                            contentRef.current.style.transform = translateY(0);
                         }
-                        else {
-                            contentRef.current.style.transform = translateY(newScrollOffset);
-                            if (offsetWasPositive) {
-                                swipeContainerRef.current.style.transform = translateY(0);
-                                if (footerRef.current !== null) {
-                                    footerRef.current.style.transform = translateY(0);
-                                }
+                        swipeContainerRef.current.style.transform = translateY(newScrollOffset);
+                        if (footerRef.current !== null) {
+                            footerRef.current.style.transform = translateY(-newScrollOffset);
+                        }
+                    }
+                    else {
+                        contentRef.current.style.transform = translateY(newScrollOffset);
+                        if (offsetWasPositive) {
+                            swipeContainerRef.current.style.transform = translateY(0);
+                            if (footerRef.current !== null) {
+                                footerRef.current.style.transform = translateY(0);
                             }
                         }
                     }
-                    recalcScrollFlags();
-                    scrollContextProviderRef.current?.notify({
-                        scrollTop: Math.max(-stateRef.current.scrollOffset, 0),
-                        maxScrollTop: LayoutMetrics.current.maxScrollTop,
-                    });
                 }
+                recalcScrollFlags();
+                scrollContextProviderRef.current?.notifyScroll({
+                    scrollTop: Math.max(-stateRef.current.scrollOffset, 0),
+                    maxScrollTop: LayoutMetrics.maxScrollTop,
+                });
             }
-        };
+        }
+    }, [LayoutMetrics, recalcScrollFlags]);
+    const scrollContextProps = useState(() => ({
+        getMaxScrollTop: () => LayoutMetrics.maxScrollTop,
+        getScrollTop: () => LayoutMetrics.scrollTop,
+        setScrollTop: (pos) => handleScroll(-(pos - LayoutMetrics.scrollTop)),
+    }))[0];
+    const initTransformHandlers = useCallback(() => {
+        const visualContainer = visualContainerRef.current;
+        if (!visualContainer) {
+            return void 0;
+        }
         let focusedElementTouchY = null;
         const onTouchMove = (event) => {
             if ((!allowScrollWhileFocused && stateRef.current.hasFocus) ||
@@ -702,6 +713,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             if (stateRef.current.touchAction === 'scroll') {
                 stateRef.current.touchAction = null;
             }
+            scrollContextProviderRef.current?.notifyTouchEnd();
         };
         const handleTouchStart = (event) => {
             if (stateRef.current.touchAction === 'complete') {
@@ -715,6 +727,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 swipeHandlers.onTouchStart(event);
             }
             visualContainer.classList.add(styles.noCaret);
+            scrollContextProviderRef.current?.notifyTouchStart();
         };
         const handleTouchMove = (event) => {
             if (interceptTouchHandlers) {
@@ -754,7 +767,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             visualContainer.removeEventListener('touchend', handleTouchEnd);
             visualContainer.removeEventListener('touchcancel', handleTouchCancel);
         };
-    }, [allowScrollWhileFocused, recalcScrollFlags, swipeHandlers, interceptTouchHandlers]);
+    }, [allowScrollWhileFocused, swipeHandlers, interceptTouchHandlers, handleScroll]);
     // при изменении высоты контента анимируем ее
     // задаем боттомшиту фиксированную высоту и пересчитываем ее самостоятельно,
     // чтобы не было мерцания, когда новый контент отрисовался до срабатывания колбека ResizeObserver
@@ -770,15 +783,13 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         let skipFirstResizeCallback = true;
         let collapseResizeCallbacks = false;
         const handleHeightChange = () => {
-            LayoutMetrics.current.invalidateCache();
+            LayoutMetrics.invalidateCache();
             if (skipFirstResizeCallback || stateRef.current.skipHeightAnimation) {
-                visualContainer.style.height = skipFirstResizeCallback
-                    ? `${LayoutMetrics.current.bottomSheetHeight}px`
-                    : '';
-                prevHeaderHeight = LayoutMetrics.current.headerHeight;
-                prevContentHeight = LayoutMetrics.current.contentHeight;
-                prevFooterHeight = LayoutMetrics.current.footerHeight;
-                prevVisibleContentHeight = LayoutMetrics.current.visibleContentHeight;
+                visualContainer.style.height = skipFirstResizeCallback ? `${LayoutMetrics.bottomSheetHeight}px` : '';
+                prevHeaderHeight = LayoutMetrics.headerHeight;
+                prevContentHeight = LayoutMetrics.contentHeight;
+                prevFooterHeight = LayoutMetrics.footerHeight;
+                prevVisibleContentHeight = LayoutMetrics.visibleContentHeight;
                 skipFirstResizeCallback = false;
                 stateRef.current.skipHeightAnimation = false;
                 return;
@@ -790,19 +801,16 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 }
             }
             else {
-                const contentHeightDiff = LayoutMetrics.current.contentHeight - prevContentHeight;
-                const containersHeightDiff = LayoutMetrics.current.headerHeight -
-                    prevHeaderHeight +
-                    LayoutMetrics.current.footerHeight -
-                    prevFooterHeight;
+                const contentHeightDiff = LayoutMetrics.contentHeight - prevContentHeight;
+                const containersHeightDiff = LayoutMetrics.headerHeight - prevHeaderHeight + LayoutMetrics.footerHeight - prevFooterHeight;
                 // предположим, что scrollContainer останется таким же или станет меньше
                 // тогда можем рассчитать минимальную видимую высоту контента как min(scrollContainer.height, contentHeight)
                 const _prevVisibleContentHeight = Math.min(prevVisibleContentHeight, prevContentHeight);
-                const newMinVisibleContentHeight = Math.min(prevVisibleContentHeight - containersHeightDiff, LayoutMetrics.current.contentHeight);
+                const newMinVisibleContentHeight = Math.min(prevVisibleContentHeight - containersHeightDiff, LayoutMetrics.contentHeight);
                 const minVisibleContentHeightDiff = newMinVisibleContentHeight - _prevVisibleContentHeight;
                 // предположим, что scrollContainer станет больше
                 // тогда контент не может увеличиться больше, чем на расстояние между боттомшитом и верхним краем экрана
-                const maxVisibleContentHeightDiff = LayoutMetrics.current.remainingAvailableHeight - containersHeightDiff;
+                const maxVisibleContentHeightDiff = LayoutMetrics.remainingAvailableHeight - containersHeightDiff;
                 const visibleContentHeightDiff = Math.min(Math.max(contentHeightDiff, minVisibleContentHeightDiff), maxVisibleContentHeightDiff);
                 if (visibleContentHeightDiff !== 0) {
                     resetScrollPosition();
@@ -820,7 +828,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                     // но в инлайн-стилях боттомшита остается старая высота
                     stateRef.current.heightAnimationDiff = heightAnimationDiff;
                     stateRef.current.heightAnimationCallback = () => {
-                        prevVisibleContentHeight = LayoutMetrics.current.visibleContentHeight;
+                        prevVisibleContentHeight = LayoutMetrics.visibleContentHeight;
                     };
                     setHeightAnimationRunning(true);
                     collapseResizeCallbacks = true;
@@ -829,32 +837,30 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                     });
                 }
                 else {
-                    prevVisibleContentHeight = LayoutMetrics.current.visibleContentHeight;
+                    prevVisibleContentHeight = LayoutMetrics.visibleContentHeight;
                     recalcContentOverlayPosition();
                     recalcScrollFlags();
                 }
             }
-            prevHeaderHeight = LayoutMetrics.current.headerHeight;
-            prevContentHeight = LayoutMetrics.current.contentHeight;
-            prevFooterHeight = LayoutMetrics.current.footerHeight;
+            prevHeaderHeight = LayoutMetrics.headerHeight;
+            prevContentHeight = LayoutMetrics.contentHeight;
+            prevFooterHeight = LayoutMetrics.footerHeight;
         };
         const resizeObserver = new ResizeObserver(handleHeightChange);
         const content = contentRef.current;
         const footer = footerRef.current;
-        const header = headerRef.current;
+        const header = headerWrapperRef.current;
         content !== null && resizeObserver.observe(content);
         footer !== null && resizeObserver.observe(footer);
-        header !== null && header.addHeightObserver(handleHeightChange);
-        return () => {
-            resizeObserver.disconnect();
-            header !== null && header.removeHeightObserver(handleHeightChange);
-        };
+        header !== null && resizeObserver.observe(header);
+        return () => resizeObserver.disconnect();
     }, [
         fixOverscroll,
         recalcContentOverlayPosition,
         recalcScrollFlags,
         resetScrollPosition,
         setHeightAnimationRunning,
+        LayoutMetrics,
     ]);
     const handleAppearAnimationEnd = useCallback(() => {
         const removeHeightObserver = initHeightObserver();
@@ -872,18 +878,17 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     }
     const containerDataQa = `bottom-sheet-container${dataQA ? ` ${dataQA}` : ''}`;
     const renderFunc = (appearTransition, heightTransition) => {
-        const navigationBar = header && isNavigationBarComponent(header) ? (jsx(NavigationBarComponent, { ...header.props, forwardedRef: headerRef })) : null;
         const content = (jsx("div", { className: classnames(styles.content, {
                 [styles.contentFullScreen]: height === 'full-screen',
                 [styles.contentWithPaddings]: withContentPaddings,
                 [styles.contentWithoutHeader]: !header,
                 [styles.contentSizedFullScreen]: isContentSizedFullHeight(children),
             }), ref: contentRef, children: jsx(BottomSheetContext.Provider, { value: bottomSheetContext.value, children: children }) }));
-        const scrollContainer = hasTouchSupport ? (jsx(CustomScrollContextProvider, { ref: scrollContextProviderRef, children: jsx("div", { className: classnames(styles.scrollContainer, {
+        const scrollContainer = hasTouchSupport ? (jsx(CustomScrollContextProvider, { ref: scrollContextProviderRef, wrapperRef: scrollContainerRef, ...scrollContextProps, children: jsx("div", { className: classnames(styles.scrollContainer, {
                     [styles.scrollContainerWithTopPadding]: withTopPadding,
-                }), onFocus: handleFocus, ref: scrollContainerRef, children: jsxs(GrowLimitWrapper, { ...growLimiterProps, children: [navigationBar, content] }) }) })) : (jsx("div", { className: classnames(styles.scrollContainer, styles.nativeScrollContainer, {
+                }), onFocus: handleFocus, ref: scrollContainerRef, children: jsxs(GrowLimitWrapper, { ...growLimiterProps, children: [jsx("div", { className: styles.headerWrapper, ref: headerWrapperRef, children: header }), content] }) }) })) : (jsx("div", { className: classnames(styles.scrollContainer, styles.nativeScrollContainer, {
                 [styles.scrollContainerWithTopPadding]: withTopPadding,
-            }), onFocus: handleFocus, onScroll: recalcScrollFlags, ref: scrollContainerRef, children: jsxs(GrowLimitWrapper, { ...growLimiterProps, children: [navigationBar, content] }) }));
+            }), onFocus: handleFocus, onScroll: recalcScrollFlags, ref: scrollContainerRef, children: jsxs(GrowLimitWrapper, { ...growLimiterProps, children: [jsx("div", { className: styles.headerWrapper, ref: headerWrapperRef, children: header }), content] }) }));
         const clonedFooter = footer && isActionBarComponent(footer)
             ? cloneElement(footer, {
                 type: footer.props.type || 'vertical',