@hh.ru/magritte-ui-bottom-sheet 5.3.29 → 5.5.0

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 { NavigationBarContext } from '@hh.ru/magritte-ui-navigation-bar';
+import { isNavigationBarComponent, NavigationBarComponent } from '@hh.ru/magritte-ui-navigation-bar';
 import { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';
-import { s as styles } from './bottom-sheet-W0jm1DWc.js';
+import { s as styles } from './bottom-sheet-CPDqyiXV.js';
 
-const NAVIGATION_BAR_CONTEXT_PROPS = { insideBottomSheet: true };
 const CSS_VAR_ENTER_ANIMATION_DURATION = '--enter-animation-duration';
 const CSS_VAR_EXIT_ANIMATION_DURATION = '--exit-animation-duration';
 const CSS_VAR_HEIGHT_ANIMATION_DURATION = '--height-transition-duration';
@@ -30,15 +29,7 @@ const hasSelectedText = () => {
     const selection = document.getSelection();
     return !!selection && !selection.isCollapsed;
 };
-const isSafariFunc = () => {
-    let lazyValue = null;
-    return () => {
-        if (lazyValue === null) {
-            lazyValue = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-        }
-        return lazyValue;
-    };
-};
+const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 const toNumber = (value) => {
     const result = parseInt(value, 10);
     return Number.isInteger(result) ? result : 0;
@@ -52,6 +43,7 @@ const INITIAL_STATE = {
     scrollOffset: 0,
     swipeOffset: 0,
     touchAction: null,
+    exitHandlers: [],
     heightAnimationDiff: null,
 };
 const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, header, height = 'content', interceptClickHandlers = true, keyboardOverlaysContent = true, onAppear, onBeforeExit, onAfterExit, onClose, showDivider = 'with-scroll', showOverlay = true, visible = false, withContentPaddings = true, }, ref) => {
@@ -69,8 +61,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     const swipeContainerRef = useRef(null);
     const visualContainerRef = useRef(null);
     const bottomSheetRef = useMultipleRefs(ref, visualContainerRef);
-    const { isMobile } = useBreakpoint();
-    const currentVisible = isMobile && visible;
+    const scrollContextProviderRef = useRef(null);
+    const currentVisible = useBreakpoint().isMobile && visible;
     const onAppearRef = useRef(onAppear);
     onAppearRef.current = onAppear;
     const onCloseRef = useRef(onClose);
@@ -78,75 +70,72 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     const stateRef = useRef({ ...INITIAL_STATE });
     const [animationTimeout, setAnimationTimeout] = useState(null);
     const [heightAnimationRunning, setHeightAnimationRunning] = useState(false);
-    const contextValue = useMemo(() => ({ contentOverlayRef }), [contentOverlayRef]);
-    const isSafari = useRef(isSafariFunc()).current;
-    const scrollContextProviderRef = useRef(null);
-    const exitHandlersRef = useRef([]);
+    const bottomSheetContext = useMemo(() => ({ contentOverlayRef }), [contentOverlayRef]);
     const isContentSizedFullHeight = isValidTreeSelectorWrapper(children);
+    const deviceFlagsRef = useRef({});
+    if (typeof deviceFlagsRef.current.isSafari !== 'boolean' && typeof navigator !== 'undefined') {
+        deviceFlagsRef.current.isSafari = isSafari();
+    }
+    if (typeof deviceFlagsRef.current.useCustomScroll !== 'boolean' && typeof window !== 'undefined') {
+        deviceFlagsRef.current.useCustomScroll = 'ontouchstart' in window;
+    }
     const LayoutMetrics = useRef((() => {
-        let cachedBottomSheetHeight = null;
-        let cachedContentHeight = null;
-        let cachedFooterHeight = null;
-        let cachedHeaderHeight = null;
-        let cachedInitialOffset = null;
-        let cachedRemainingAvailableHeight = null;
-        let cachedScrollContainerHeight = null;
+        let cache = {};
         return {
+            get availableScrollHeight() {
+                if (!('availableScrollHeight' in cache) && scrollContainerRef.current !== null) {
+                    cache.availableScrollHeight =
+                        scrollContainerRef.current.clientHeight - LayoutMetrics.current.headerHeight;
+                }
+                return cache.availableScrollHeight ?? 0;
+            },
             get bottomSheetHeight() {
-                if (cachedBottomSheetHeight === null && visualContainerRef.current !== null) {
-                    cachedBottomSheetHeight = visualContainerRef.current.clientHeight;
+                if (!('bottomSheetHeight' in cache) && visualContainerRef.current !== null) {
+                    cache.bottomSheetHeight = visualContainerRef.current.clientHeight;
                 }
-                return cachedBottomSheetHeight ?? 0;
+                return cache.bottomSheetHeight ?? 0;
             },
             get contentHeight() {
-                if (cachedContentHeight === null && contentRef.current !== null) {
-                    cachedContentHeight = contentRef.current.clientHeight;
+                if (!('contentHeight' in cache) && contentRef.current !== null) {
+                    cache.contentHeight = contentRef.current.clientHeight;
                 }
-                return cachedContentHeight ?? 0;
+                return cache.contentHeight ?? 0;
             },
             get footerHeight() {
-                if (cachedFooterHeight === null && footerRef.current !== null) {
-                    cachedFooterHeight = footerRef.current.clientHeight;
+                if (!('footerHeight' in cache) && footerRef.current !== null) {
+                    cache.footerHeight = footerRef.current.clientHeight;
                 }
-                return cachedFooterHeight ?? 0;
+                return cache.footerHeight ?? 0;
             },
             get headerHeight() {
-                if (cachedHeaderHeight === null && headerRef.current !== null) {
-                    cachedHeaderHeight = headerRef.current.clientHeight;
+                if (!('headerHeight' in cache) && headerRef.current !== null) {
+                    cache.headerHeight = headerRef.current.layoutHeight;
                 }
-                return cachedHeaderHeight ?? 0;
+                return cache.headerHeight ?? 0;
             },
             get initialOffset() {
-                if (cachedInitialOffset === null &&
-                    visualContainerRef.current !== null &&
-                    visualViewport !== null) {
-                    cachedInitialOffset =
-                        height === 'half-screen'
-                            ? Math.max(Math.round(visualContainerRef.current.clientHeight - visualViewport.height / 2), 0)
-                            : 0;
+                if (!('initialOffset' in cache)) {
+                    if (height === 'half-screen' &&
+                        deviceFlagsRef.current.useCustomScroll &&
+                        visualContainerRef.current !== null &&
+                        visualViewport !== null) {
+                        const halfScreenOffset = visualContainerRef.current.clientHeight - visualViewport.height / 2;
+                        cache.initialOffset = Math.max(Math.round(halfScreenOffset), 0);
+                    }
+                    else {
+                        cache.initialOffset = 0;
+                    }
                 }
-                return cachedInitialOffset ?? 0;
+                return cache.initialOffset ?? 0;
             },
             get remainingAvailableHeight() {
-                if (cachedRemainingAvailableHeight === null && grabberRef.current !== null) {
-                    cachedRemainingAvailableHeight = grabberRef.current.offsetTop;
-                }
-                return cachedRemainingAvailableHeight ?? 0;
-            },
-            get scrollContainerHeight() {
-                if (cachedScrollContainerHeight === null && scrollContainerRef.current !== null) {
-                    cachedScrollContainerHeight = scrollContainerRef.current.clientHeight;
+                if (!('remainingAvailableHeight' in cache) && grabberRef.current !== null) {
+                    cache.remainingAvailableHeight = grabberRef.current.offsetTop;
                 }
-                return cachedScrollContainerHeight ?? 0;
+                return cache.remainingAvailableHeight ?? 0;
             },
             invalidateCache() {
-                cachedBottomSheetHeight = null;
-                cachedContentHeight = null;
-                cachedFooterHeight = null;
-                cachedHeaderHeight = null;
-                cachedInitialOffset = null;
-                cachedRemainingAvailableHeight = null;
-                cachedScrollContainerHeight = null;
+                cache = {};
             },
         };
     })());
@@ -177,75 +166,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         document.body.removeChild(animationTimeoutElement);
         setAnimationTimeout({ appear: { enter, exit }, height: { enter: height, exit } });
     }, [setAnimationTimeout]);
-    // при изменении высоты контента анимируем ее
-    // задаем боттомшиту фиксированную высоту и пересчитываем ее самостоятельно,
-    // чтобы не было мерцания, когда новый контент отрисовался до срабатывания колбека ResizeObserver
-    const initHeightObserver = useCallback(() => {
-        if (!contentRef.current || !footerRef.current || !headerRef.current || !visualContainerRef.current) {
-            return void 0;
-        }
-        const visualContainer = visualContainerRef.current;
-        let prevContentHeight = 0;
-        let prevHeaderHeight = 0;
-        let prevFooterHeight = 0;
-        let prevScrollContainerHeight = 0;
-        let skipFirst = true;
-        const observer = new ResizeObserver(() => {
-            LayoutMetrics.current.invalidateCache();
-            if (skipFirst) {
-                visualContainer.style.height = `${LayoutMetrics.current.bottomSheetHeight}px`;
-                prevHeaderHeight = LayoutMetrics.current.headerHeight;
-                prevContentHeight = LayoutMetrics.current.contentHeight;
-                prevFooterHeight = LayoutMetrics.current.footerHeight;
-                prevScrollContainerHeight = LayoutMetrics.current.scrollContainerHeight;
-                skipFirst = false;
-                return;
-            }
-            if (stateRef.current.heightAnimationDiff !== null) {
-                // если предыдущая анимация не завершилась, без анимации сбрасываем высоту на вычисленную браузером
-                visualContainer.style.height = ``;
-            }
-            else {
-                const contentHeightDiff = LayoutMetrics.current.contentHeight - prevContentHeight;
-                const containersHeightDiff = LayoutMetrics.current.headerHeight -
-                    prevHeaderHeight +
-                    LayoutMetrics.current.footerHeight -
-                    prevFooterHeight;
-                // предположим, что scrollContainer останется таким же или станет меньше
-                // тогда можем рассчитать минимальную видимую высоту контента как min(scrollContainer.height, contentHeight)
-                const prevVisibleContentHeight = Math.min(prevScrollContainerHeight, prevContentHeight);
-                const newMinVisibleContentHeight = Math.min(prevScrollContainerHeight - containersHeightDiff, LayoutMetrics.current.contentHeight);
-                const minVisibleContentHeightDiff = newMinVisibleContentHeight - prevVisibleContentHeight;
-                // предположим, что scrollContainer станет больше
-                // тогда контент не может увеличиться больше, чем на расстояние между боттомшитом и верхним краем экрана
-                const maxVisibleContentHeightDiff = LayoutMetrics.current.remainingAvailableHeight - containersHeightDiff;
-                const visibleContentHeightDiff = Math.min(Math.max(contentHeightDiff, minVisibleContentHeightDiff), maxVisibleContentHeightDiff);
-                if (visibleContentHeightDiff !== 0) {
-                    scrollContextProviderRef.current?.notify({ scrollTop: 0 });
-                }
-                const heightAnimationDiff = visibleContentHeightDiff + containersHeightDiff;
-                if (heightAnimationDiff !== 0) {
-                    // запоминаем высоту scrollContainer после того, как боттомшиту будет присвоена новая высота.
-                    // до этого значение некорректно, т.к. новый контент уже был отрендерен,
-                    // но в инлайн-стилях боттомшита остается старая высота
-                    stateRef.current.heightAnimationDiff = heightAnimationDiff;
-                    stateRef.current.heightAnimationCallback = () => {
-                        prevScrollContainerHeight = LayoutMetrics.current.scrollContainerHeight;
-                    };
-                    setHeightAnimationRunning(true);
-                }
-            }
-            prevHeaderHeight = LayoutMetrics.current.headerHeight;
-            prevContentHeight = LayoutMetrics.current.contentHeight;
-            prevFooterHeight = LayoutMetrics.current.footerHeight;
-        });
-        observer.observe(headerRef.current);
-        observer.observe(contentRef.current);
-        observer.observe(footerRef.current);
-        return () => observer.disconnect();
-    }, [setHeightAnimationRunning]);
     useEffect(() => {
-        if (!currentVisible || isSafari()) {
+        if (!currentVisible || deviceFlagsRef.current.isSafari) {
             return;
         }
         // используем Virtual Keyboard API через meta-тег вместо navigator.virtualKeyboard,
@@ -265,7 +187,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             .map((keyValuePair) => keyValuePair.join('='))
             .join(',');
         meta.setAttribute('content', attributesStrUpdated);
-    }, [currentVisible, isSafari, keyboardOverlaysContent]);
+    }, [currentVisible, keyboardOverlaysContent]);
     const recalcKeyboardOffsets = useCallback(() => {
         if (!headerRef.current || !overlayRef.current || !visualViewport) {
             return;
@@ -302,8 +224,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                     setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${-layoutViewportDiff}px`);
                     // при этом может возникнуть проблема, что клавиатура перекрыла хедер
                     // проверяем это и компенсируем величину перекрытия при необходимости
-                    const headerDOMRect = headerRef.current.getBoundingClientRect();
-                    const headerOutOfViewportHeight = Math.round(headerDOMRect.bottom + layoutViewportDiff - DOCUMENT_HEIGHT.current);
+                    const headerOutOfViewportHeight = Math.round(headerRef.current.bottom + layoutViewportDiff - DOCUMENT_HEIGHT.current);
                     if (headerOutOfViewportHeight > 0) {
                         setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${headerOutOfViewportHeight - layoutViewportDiff}px`);
                     }
@@ -311,7 +232,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             }
             // keyboardOverlaysContent=false, клавиатура ПОД контентом
             // этот кейс нужно корректировать только в Safari
-            if (!keyboardOverlaysContent && isSafari()) {
+            if (!keyboardOverlaysContent && deviceFlagsRef.current.isSafari) {
                 const visualViewportDiff = Math.round(overlayDOMRect.bottom - visualViewport.height);
                 if (visualViewportDiff > 0) {
                     setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
@@ -324,7 +245,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
         }
-    }, [isSafari, keyboardOverlaysContent]);
+    }, [keyboardOverlaysContent]);
     const handleFocus = useCallback((event) => {
         const focusedElement = event.target;
         const initialViewportHeight = visualViewport?.height;
@@ -355,7 +276,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             }
         };
         const handleBlur = () => {
-            if (isSafari()) {
+            if (deviceFlagsRef.current.isSafari) {
                 setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
                 setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
             }
@@ -370,7 +291,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         stateRef.current.resizeRAFHandle = requestAnimationFrame(waitForResize);
         visualViewport?.addEventListener('resize', handleResize);
         focusedElement.addEventListener('blur', handleBlur);
-    }, [isSafari, recalcKeyboardOffsets]);
+    }, [recalcKeyboardOffsets]);
     // contentOverlay совпадает по границам с контентом боттомшита, но лежит вне боттомшита,
     // чтобы чайлды contentOverlay не обрезались границами боттомшита
     // например, снекбар, лежащий внутри contentOverlay, при смахивании может оказаться в любом месте экрана
@@ -379,15 +300,18 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         if (contentOverlayRef.current !== null &&
             scrollContainerRef.current !== null &&
             visualContainerRef.current !== null) {
-            contentOverlayRef.current.style.top = `${scrollContainerRef.current.offsetTop + visualContainerRef.current.offsetTop}px`;
-            contentOverlayRef.current.style.height = `${scrollContainerRef.current.clientHeight}px`;
+            const visibleHeaderHeight = headerRef.current?.visibleHeight ?? 0;
+            contentOverlayRef.current.style.top = `${scrollContainerRef.current.offsetTop + visualContainerRef.current.offsetTop + visibleHeaderHeight}px`;
+            contentOverlayRef.current.style.height = `${LayoutMetrics.current.availableScrollHeight}px`;
         }
     }, []);
     const recalcScrollFlags = useCallback(() => {
+        const scrollOffset = deviceFlagsRef.current.useCustomScroll
+            ? stateRef.current.scrollOffset
+            : -(scrollContainerRef.current?.scrollTop ?? 0);
         if (dividerRef.current !== null) {
             const prevDividerVisible = stateRef.current.dividerVisible;
-            const isNotScrolledToEnd = LayoutMetrics.current.contentHeight + stateRef.current.scrollOffset >
-                LayoutMetrics.current.scrollContainerHeight;
+            const isNotScrolledToEnd = LayoutMetrics.current.contentHeight + scrollOffset > LayoutMetrics.current.availableScrollHeight;
             stateRef.current.dividerVisible =
                 showDivider === 'always' || (showDivider === 'with-scroll' && isNotScrolledToEnd);
             if (stateRef.current.dividerVisible !== prevDividerVisible) {
@@ -397,13 +321,21 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         if (grabberRef.current !== null) {
             const prevGrabberUnsafe = stateRef.current.grabberUnsafe;
             stateRef.current.grabberUnsafe =
-                Math.round(Math.max(stateRef.current.scrollOffset, 0) + stateRef.current.swipeOffset) ===
+                Math.round(Math.max(scrollOffset, 0) + stateRef.current.swipeOffset) ===
                     LayoutMetrics.current.remainingAvailableHeight;
             if (stateRef.current.grabberUnsafe !== prevGrabberUnsafe) {
                 grabberRef.current.classList.toggle(styles.grabberEnsureSafe, stateRef.current.grabberUnsafe);
             }
         }
     }, [showDivider]);
+    const resetScrollPosition = useCallback(() => {
+        if (deviceFlagsRef.current.useCustomScroll) {
+            scrollContextProviderRef.current?.notify({ scrollTop: 0 });
+        }
+        else {
+            scrollContainerRef.current?.scrollTo({ top: 0 });
+        }
+    }, []);
     // помещает боттомшит в позицию вне экрана снизу, которая может быть начальной либо конечной точкой анимации
     const setTransformToInvisible = useCallback(() => {
         LayoutMetrics.current.invalidateCache();
@@ -431,8 +363,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         }
         requestAnimationFrame(recalcContentOverlayPosition);
         requestAnimationFrame(recalcScrollFlags);
-        scrollContextProviderRef.current?.notify({ scrollTop: 0 });
-    }, [recalcContentOverlayPosition, recalcScrollFlags]);
+        resetScrollPosition();
+    }, [recalcContentOverlayPosition, recalcScrollFlags, resetScrollPosition]);
     const handleExitAnimationStart = useCallback(() => {
         setTransformToVisible();
         onBeforeExit?.();
@@ -442,8 +374,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
         stateRef.current.resizeRAFHandle !== null && cancelAnimationFrame(stateRef.current.resizeRAFHandle);
         stateRef.current = { ...INITIAL_STATE };
-        exitHandlersRef.current.forEach((handler) => handler());
-        exitHandlersRef.current = [];
+        stateRef.current.exitHandlers.forEach((handler) => handler());
+        stateRef.current.exitHandlers = [];
         onAfterExit?.();
     }, [onAfterExit]);
     const handleHeightAnimationStart = useCallback(() => {
@@ -471,7 +403,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         setHeightAnimationRunning(false);
         requestAnimationFrame(recalcContentOverlayPosition);
         requestAnimationFrame(recalcScrollFlags);
-    }, [setHeightAnimationRunning, recalcContentOverlayPosition, recalcScrollFlags]);
+        resetScrollPosition();
+    }, [setHeightAnimationRunning, recalcContentOverlayPosition, recalcScrollFlags, resetScrollPosition]);
     const handleSwipeMove = useCallback((event) => {
         if ((stateRef.current.touchAction !== null && stateRef.current.touchAction !== 'swipe') ||
             hasSelectedText()) {
@@ -523,12 +456,13 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         onSwipeCancel: handleSwipeCancel,
     });
     const initTransformHandlers = useCallback(() => {
-        if (!visualContainerRef.current) {
+        const visualContainer = visualContainerRef.current;
+        if (!visualContainer) {
             return void 0;
         }
         const handleScroll = (delta) => {
             if (LayoutMetrics.current.initialOffset !== 0 ||
-                LayoutMetrics.current.contentHeight > LayoutMetrics.current.scrollContainerHeight) {
+                LayoutMetrics.current.contentHeight > LayoutMetrics.current.availableScrollHeight) {
                 // храним неокругленное значение для translateY, чтобы анимация была плавнее
                 let newScrollOffset = stateRef.current.scrollOffset + delta;
                 const roundedNewScrollOffset = Math.round(newScrollOffset);
@@ -541,10 +475,10 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                     }
                 }
                 else if (LayoutMetrics.current.contentHeight + roundedNewScrollOffset <=
-                    LayoutMetrics.current.scrollContainerHeight) {
+                    LayoutMetrics.current.availableScrollHeight) {
                     // скролла нет (touchAction is null)
                     // либо контент проскроллен до конца, тогда не даем скроллить дальше
-                    newScrollOffset = LayoutMetrics.current.scrollContainerHeight - LayoutMetrics.current.contentHeight;
+                    newScrollOffset = LayoutMetrics.current.availableScrollHeight - LayoutMetrics.current.contentHeight;
                     if (stateRef.current.touchAction === 'scroll') {
                         stateRef.current.touchAction = 'complete';
                     }
@@ -591,12 +525,6 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             }
             handleScroll(event.delta);
         };
-        const onWheelMove = (event) => {
-            if (!allowScrollWhileFocused && stateRef.current.hasFocus) {
-                return;
-            }
-            handleScroll(event.delta);
-        };
         const onTouchEnd = () => {
             if (stateRef.current.touchAction === 'scroll') {
                 stateRef.current.touchAction = null;
@@ -618,9 +546,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             wrapperRef: visualContainerRef,
             onTouchMove,
             onTouchEnd,
-            onWheelMove,
         });
-        const visualContainer = visualContainerRef.current;
         visualContainer.addEventListener('touchstart', handleTouchStart);
         visualContainer.addEventListener('touchmove', handleTouchMove);
         visualContainer.addEventListener('touchend', swipeHandlers.onTouchEnd);
@@ -633,38 +559,133 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             visualContainer.removeEventListener('touchcancel', swipeHandlers.onTouchCancel);
         };
     }, [allowScrollWhileFocused, recalcScrollFlags, swipeHandlers]);
+    // при изменении высоты контента анимируем ее
+    // задаем боттомшиту фиксированную высоту и пересчитываем ее самостоятельно,
+    // чтобы не было мерцания, когда новый контент отрисовался до срабатывания колбека ResizeObserver
+    const initHeightObserver = useCallback(() => {
+        const visualContainer = visualContainerRef.current;
+        if (!visualContainer) {
+            return void 0;
+        }
+        let prevContentHeight = 0;
+        let prevHeaderHeight = 0;
+        let prevFooterHeight = 0;
+        let prevAvailableScrollHeight = 0;
+        let skipFirstResizeCallback = true;
+        let collapseResizeCallbacks = false;
+        const handleHeightChange = () => {
+            LayoutMetrics.current.invalidateCache();
+            if (skipFirstResizeCallback) {
+                visualContainer.style.height = `${LayoutMetrics.current.bottomSheetHeight}px`;
+                prevHeaderHeight = LayoutMetrics.current.headerHeight;
+                prevContentHeight = LayoutMetrics.current.contentHeight;
+                prevFooterHeight = LayoutMetrics.current.footerHeight;
+                prevAvailableScrollHeight = LayoutMetrics.current.availableScrollHeight;
+                skipFirstResizeCallback = false;
+                return;
+            }
+            if (stateRef.current.heightAnimationDiff !== null) {
+                if (!collapseResizeCallbacks) {
+                    // если предыдущая анимация не завершилась, без анимации сбрасываем высоту на вычисленную браузером
+                    visualContainer.style.height = ``;
+                }
+            }
+            else {
+                const contentHeightDiff = LayoutMetrics.current.contentHeight - prevContentHeight;
+                const containersHeightDiff = LayoutMetrics.current.headerHeight -
+                    prevHeaderHeight +
+                    LayoutMetrics.current.footerHeight -
+                    prevFooterHeight;
+                // предположим, что scrollContainer останется таким же или станет меньше
+                // тогда можем рассчитать минимальную видимую высоту контента как min(scrollContainer.height, contentHeight)
+                const prevVisibleContentHeight = Math.min(prevAvailableScrollHeight, prevContentHeight);
+                const newMinVisibleContentHeight = Math.min(prevAvailableScrollHeight - containersHeightDiff, LayoutMetrics.current.contentHeight);
+                const minVisibleContentHeightDiff = newMinVisibleContentHeight - prevVisibleContentHeight;
+                // предположим, что scrollContainer станет больше
+                // тогда контент не может увеличиться больше, чем на расстояние между боттомшитом и верхним краем экрана
+                const maxVisibleContentHeightDiff = LayoutMetrics.current.remainingAvailableHeight - containersHeightDiff;
+                const visibleContentHeightDiff = Math.min(Math.max(contentHeightDiff, minVisibleContentHeightDiff), maxVisibleContentHeightDiff);
+                if (visibleContentHeightDiff !== 0) {
+                    resetScrollPosition();
+                }
+                const heightAnimationDiff = visibleContentHeightDiff + containersHeightDiff;
+                if (heightAnimationDiff !== 0) {
+                    // запоминаем высоту scrollContainer после того, как боттомшиту будет присвоена новая высота.
+                    // до этого значение некорректно, т.к. новый контент уже был отрендерен,
+                    // но в инлайн-стилях боттомшита остается старая высота
+                    stateRef.current.heightAnimationDiff = heightAnimationDiff;
+                    stateRef.current.heightAnimationCallback = () => {
+                        prevAvailableScrollHeight = LayoutMetrics.current.availableScrollHeight;
+                    };
+                    setHeightAnimationRunning(true);
+                    collapseResizeCallbacks = true;
+                    requestAnimationFrame(() => {
+                        collapseResizeCallbacks = false;
+                    });
+                }
+                else {
+                    recalcContentOverlayPosition();
+                    recalcScrollFlags();
+                }
+            }
+            prevHeaderHeight = LayoutMetrics.current.headerHeight;
+            prevContentHeight = LayoutMetrics.current.contentHeight;
+            prevFooterHeight = LayoutMetrics.current.footerHeight;
+        };
+        const resizeObserver = new ResizeObserver(handleHeightChange);
+        const content = contentRef.current;
+        const footer = footerRef.current;
+        const header = headerRef.current;
+        content !== null && resizeObserver.observe(content);
+        footer !== null && resizeObserver.observe(footer);
+        header !== null && header.addHeightObserver(handleHeightChange);
+        return () => {
+            resizeObserver.disconnect();
+            header !== null && header.removeHeightObserver(handleHeightChange);
+        };
+    }, [setHeightAnimationRunning, recalcScrollFlags, recalcContentOverlayPosition, resetScrollPosition]);
     const handleAppearAnimationEnd = useCallback(() => {
-        exitHandlersRef.current.push(...[initHeightObserver(), initTransformHandlers()].filter(Boolean));
+        const removeHeightObserver = initHeightObserver();
+        removeHeightObserver && stateRef.current.exitHandlers.push(removeHeightObserver);
+        const removeTransformHandlers = deviceFlagsRef.current.useCustomScroll && initTransformHandlers();
+        removeTransformHandlers && stateRef.current.exitHandlers.push(removeTransformHandlers);
         onAppearRef.current?.();
     }, [initHeightObserver, initTransformHandlers]);
     const { onTouchEnd, ...eventHandlers } = useNoBubbling();
     if (!animationTimeout) {
         return null;
     }
-    const clonedFooter = footer && isActionBarComponent(footer) ? cloneElement(footer, { type: footer.props.type || 'mobile' }) : footer;
-    const renderFunc = (appearTransition, heightTransition) => (jsx(Layer, { layer: InternalLayerName.BottomSheet, children: jsxs("div", { ...eventHandlers, className: styles.overlay, children: [jsx("div", { className: classnames(styles.overlayBackground, {
-                        [styles.overlayBackgroundVisible]: showOverlay,
-                        [styles.appearAnimation]: appearTransition === 'entering',
-                        [styles.disappearAnimation]: appearTransition === 'exiting',
-                    }), ...(appearTransition === 'entered'
-                        ? { 'data-qa': 'bottom-sheet-overlay', onClick: onCloseRef.current }
-                        : {}), ref: overlayRef }), jsxs("div", { className: classnames(styles.swipeContainer, {
-                        [styles.appearAnimation]: appearTransition === 'entering',
-                        [styles.closeBySwipeAnimation]: appearTransition === 'exiting' && stateRef.current.touchAction === 'swipe',
-                        [styles.disappearAnimation]: appearTransition === 'exiting',
-                    }), "data-qa": appearTransition === 'entered' ? 'bottom-sheet-container' : undefined, ref: swipeContainerRef, children: [jsx("div", { className: classnames(styles.grabber, styles.grabberTransitionAnimation, {
-                                [styles.grabberEnsureSafe]: stateRef.current.grabberUnsafe,
-                            }), ref: grabberRef }), jsx("div", { className: classnames(styles.visualContainer, {
-                                [styles.visualContainerFullScreen]: height === 'full-screen',
-                                [styles.heightTransitionAnimation]: heightTransition === 'entering',
-                            }), "data-qa": appearTransition === 'entered' ? 'bottom-sheet-content' : undefined, ref: bottomSheetRef, children: jsxs(CustomScrollContextProvider, { ref: scrollContextProviderRef, children: [jsx("div", { className: styles.header, onFocus: handleFocus, ref: headerRef, children: jsx(NavigationBarContext.Provider, { value: NAVIGATION_BAR_CONTEXT_PROPS, children: header }) }), jsx("div", { className: styles.scrollContainer, ref: scrollContainerRef, children: jsx("div", { className: classnames(styles.content, {
-                                                [styles.contentFullScreen]: height === 'full-screen',
-                                                [styles.contentWithPaddings]: withContentPaddings,
-                                                [styles.contentWithoutHeader]: !header,
-                                                [styles.contentSizedFullScreen]: isContentSizedFullHeight,
-                                            }), ref: contentRef, children: jsx(BottomSheetContext.Provider, { value: contextValue, children: children }) }) }), jsxs("div", { className: styles.footer, ref: footerRef, children: [footer && (jsx("div", { className: classnames(styles.divider, {
+    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,
+            }), ref: contentRef, children: jsx(BottomSheetContext.Provider, { value: bottomSheetContext, children: children }) }));
+        const scrollContainer = deviceFlagsRef.current.useCustomScroll ? (jsx(CustomScrollContextProvider, { ref: scrollContextProviderRef, children: jsxs("div", { className: styles.scrollContainer, onFocus: handleFocus, ref: scrollContainerRef, children: [navigationBar, content] }) })) : (jsxs("div", { className: classnames(styles.scrollContainer, styles.nativeScrollContainer), onFocus: handleFocus, onScroll: recalcScrollFlags, ref: scrollContainerRef, children: [navigationBar, content] }));
+        const clonedFooter = footer && isActionBarComponent(footer)
+            ? cloneElement(footer, { type: footer.props.type || 'mobile', showDivider: false })
+            : footer;
+        return (jsx(Layer, { layer: InternalLayerName.BottomSheet, children: jsxs("div", { ...eventHandlers, className: styles.overlay, children: [jsx("div", { className: classnames(styles.overlayBackground, {
+                            [styles.overlayBackgroundVisible]: showOverlay,
+                            [styles.appearAnimation]: appearTransition === 'entering',
+                            [styles.disappearAnimation]: appearTransition === 'exiting',
+                        }), ...(appearTransition === 'entered'
+                            ? { 'data-qa': 'bottom-sheet-overlay', onClick: onCloseRef.current }
+                            : {}), ref: overlayRef }), jsxs("div", { className: classnames(styles.swipeContainer, {
+                            [styles.appearAnimation]: appearTransition === 'entering',
+                            [styles.closeBySwipeAnimation]: appearTransition === 'exiting' && stateRef.current.touchAction === 'swipe',
+                            [styles.disappearAnimation]: appearTransition === 'exiting',
+                        }), "data-qa": appearTransition === 'entered' ? 'bottom-sheet-container' : undefined, ref: swipeContainerRef, children: [jsx("div", { className: classnames(styles.grabber, styles.grabberTransitionAnimation, {
+                                    [styles.grabberEnsureSafe]: stateRef.current.grabberUnsafe,
+                                }), ref: grabberRef }), jsxs("div", { className: classnames(styles.visualContainer, {
+                                    [styles.visualContainerFullScreen]: height === 'full-screen',
+                                    [styles.heightTransitionAnimation]: heightTransition === 'entering',
+                                }), "data-qa": appearTransition === 'entered' ? 'bottom-sheet-content' : undefined, ref: bottomSheetRef, children: [scrollContainer, jsxs("div", { className: styles.footer, ref: footerRef, children: [footer && (jsx("div", { className: classnames(styles.divider, {
                                                     [styles.dividerVisible]: stateRef.current.dividerVisible,
-                                                }), ref: dividerRef, children: jsx(Divider, {}) })), interceptClickHandlers ? (jsx(ClickInterceptor, { children: clonedFooter })) : (clonedFooter)] })] }) }), jsx("div", { className: styles.contentOverlay, ref: contentOverlayRef })] })] }) }));
+                                                }), ref: dividerRef, children: jsx(Divider, {}) })), interceptClickHandlers ? (jsx(ClickInterceptor, { children: clonedFooter })) : (clonedFooter)] })] }), jsx("div", { className: styles.contentOverlay, ref: contentOverlayRef })] })] }) }));
+    };
     return createPortal(jsx("div", { className: styles.cssVariablesContainer, "data-qa": "bottom-sheet-css-variables", ref: cssVariablesContainerRef, children: jsx(Transition, { appear: true, in: currentVisible, mountOnEnter: true, onEnter: setTransformToInvisible, onEntering: setTransformToVisible, onEntered: handleAppearAnimationEnd, onExit: handleExitAnimationStart, onExiting: setTransformToInvisible, onExited: handleExitAnimationEnd, timeout: animationTimeout.appear, unmountOnExit: true, nodeRef: contentRef, children: (appearTransition) => (jsx(Transition, { in: heightAnimationRunning, onEnter: handleHeightAnimationStart, onEntered: handleHeightAnimationEnd, timeout: animationTimeout.height, nodeRef: contentRef, children: (heightTransition) => renderFunc(appearTransition, heightTransition) })) }) }), document.body);
 };
 const BottomSheet = forwardRef(BottomSheetRenderFunc);