@hh.ru/magritte-ui-bottom-sheet 4.1.40 → 5.0.1

package/BottomSheet.js

@@ -1,13 +1,14 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { Transition } from 'react-transition-group';
 import classnames from 'classnames';
 import { disableOverscroll, disableScroll } from '@hh.ru/magritte-common-modal-helper';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
-import { useSwipe } from '@hh.ru/magritte-common-use-swipe';
+import { useSwipeHandlers } from '@hh.ru/magritte-common-use-swipe';
+import { initTouchHandlers, CustomScrollContextProvider } from '@hh.ru/magritte-internal-custom-scroll';
 import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
 import { BottomSheetContext } from './BottomSheetContext.js';
 import { ClickInterceptor } from './ClickInterceptor.js';
@@ -15,82 +16,134 @@ 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 { s as styles } from './bottom-sheet-Uf681RNm.js';
+import { s as styles } from './bottom-sheet-D8XuBr1R.js';
 
-const CSS_VAR_CONTENT_OVERLAY_TOP = '--content-overlay-top';
-const CSS_VAR_CONTENT_OVERLAY_HEIGHT = '--content-overlay-height';
-const CSS_VAR_INITIAL_VIEWPORT_HEIGHT = '--initial-viewport-height';
 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';
-const CSS_VAR_OVERLAY_OPACITY = '--overlay-opacity';
 const CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET = '--virtual-keyboard-top-offset';
 const CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET = '--virtual-keyboard-bottom-offset';
-const INITIAL_VIEWPORT_HEIGHT = (typeof window !== 'undefined' ? window.visualViewport?.height : null) ?? 0;
 const NAVIGATION_BAR_SIZE_OVERRIDE = { size: 'standard' };
-const SWIPE_THRESHOLD_REF = { current: { max: Math.round(INITIAL_VIEWPORT_HEIGHT * 0.8) } };
-const forceRepaint = (node) => node.scrollTop;
-const isSafari = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+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 toNumber = (value) => {
     const result = parseInt(value, 10);
     return Number.isInteger(result) ? result : 0;
 };
-const changeSwipeProgressState = (state, scrollContainerRef, isSwipeInProgress, allowScrollWhileFocused) => {
-    if (!state.current) {
-        return;
-    }
-    state.current.isSwipeInProgress = isSwipeInProgress;
-    if (!scrollContainerRef.current) {
-        return;
-    }
-    scrollContainerRef.current.classList.toggle(styles.scrollContainerNoScroll, isSwipeInProgress || (!allowScrollWhileFocused && state.current.hasFocus));
+const translateY = (value) => `translate3d(0, ${value}px, 0)`;
+const INITIAL_STATE = {
+    dividerVisible: false,
+    grabberUnsafe: false,
+    hasFocus: false,
+    resizeRAFHandle: null,
+    scrollOffset: 0,
+    swipeOffset: 0,
+    touchAction: null,
+    heightAnimationRunning: false,
 };
-const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, header, height = 'content', interceptClickHandlers = true, keyboardOverlaysContent = true, onAppear, onBeforeExit, onAfterExit, onClose, showDivider = 'always-if-has-scroll', showOverlay = true, visible = false, withContentPaddings = true, }, ref) => {
+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) => {
+    const DOCUMENT_HEIGHT = useRef(0);
+    const SWIPE_THRESHOLD = useRef({ max: Infinity });
     const contentRef = useRef(null);
     const contentOverlayRef = useRef(null);
     const cssVariablesContainerRef = useRef(null);
-    const fixedGrabberRef = useRef(null);
+    const dividerRef = useRef(null);
     const footerRef = useRef(null);
+    const grabberRef = useRef(null);
     const headerRef = useRef(null);
-    const heightTransitionElementRef = useRef(null);
+    const overlayRef = useRef(null);
     const scrollContainerRef = useRef(null);
-    const stickyGrabberRef = useRef(null);
-    const scrollContainerRefMulti = useMultipleRefs(scrollContainerRef, ref);
+    const swipeContainerRef = useRef(null);
+    const visualContainerRef = useRef(null);
+    const bottomSheetRef = useMultipleRefs(ref, visualContainerRef);
     const { isMobile } = useBreakpoint();
     const currentVisible = isMobile && visible;
-    const layoutMetricsRef = useRef({
-        documentHeight: 0,
-        fillHeight: 0,
-        grabberSpacing: 0,
-        viewportShift: 0,
-    });
-    const prevPropsRef = useRef({ children, height, visible });
-    const stateRef = useRef({
-        grabber: 'sticky',
-        hasFocus: false,
-        isSwipeEnabled: false,
-        isSwipeInProgress: false,
-        swipeOffset: 0,
-        resizeRAFHandle: null,
-        virtualKeyboardHeight: 0,
-    });
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const stateRef = useRef({ ...INITIAL_STATE });
     const [animationTimeout, setAnimationTimeout] = useState(null);
-    const [heightDiff, setHeightDiff] = useState(null);
-    const [isDividerVisible, setDividerVisible] = useState(false);
-    const [onCloseContractCheck, setOnCloseContractCheck] = useState(false);
+    const [visibleHeightDiff, setVisibleHeightDiff] = useState(null);
+    const contextValue = useMemo(() => ({ contentOverlayRef }), [contentOverlayRef]);
+    const isSafari = useRef(isSafariFunc()).current;
+    const scrollContextProviderRef = useRef(null);
+    const LayoutMetrics = useRef((() => {
+        let cachedBottomSheetHeight = null;
+        let cachedContentHeight = null;
+        let cachedInitialOffset = null;
+        let cachedRemainingAvailableHeight = null;
+        let cachedScrollContainerHeight = null;
+        return {
+            get bottomSheetHeight() {
+                if (cachedBottomSheetHeight === null && visualContainerRef.current !== null) {
+                    cachedBottomSheetHeight = visualContainerRef.current.clientHeight;
+                }
+                return cachedBottomSheetHeight ?? 0;
+            },
+            get contentHeight() {
+                if (cachedContentHeight === null && contentRef.current !== null) {
+                    cachedContentHeight = contentRef.current.clientHeight;
+                }
+                return cachedContentHeight ?? 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;
+                }
+                return cachedInitialOffset ?? 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;
+                }
+                return cachedScrollContainerHeight ?? 0;
+            },
+            invalidateCache() {
+                cachedBottomSheetHeight = null;
+                cachedContentHeight = null;
+                cachedInitialOffset = null;
+                cachedRemainingAvailableHeight = null;
+                cachedScrollContainerHeight = null;
+            },
+        };
+    })());
     const setCSSVariable = (name, value) => cssVariablesContainerRef.current !== null && cssVariablesContainerRef.current.style.setProperty(name, value);
     useEffect(() => {
         if (!currentVisible) {
             return void 0;
         }
-        layoutMetricsRef.current.documentHeight = document.documentElement.clientHeight;
+        DOCUMENT_HEIGHT.current = document.documentElement.clientHeight;
+        if (visualViewport !== null) {
+            SWIPE_THRESHOLD.current = { max: Math.round(visualViewport.height * 0.8) };
+        }
         if (!showOverlay) {
             const enableOverscroll = disableOverscroll();
             return enableOverscroll;
         }
         const enableScroll = disableScroll();
         return enableScroll;
-    }, [showOverlay, currentVisible]);
+    }, [currentVisible, showOverlay]);
     useEffect(() => {
         const animationTimeoutElement = document.createElement('div');
         animationTimeoutElement.classList.add(styles.animationTimeout);
@@ -102,63 +155,60 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         document.body.removeChild(animationTimeoutElement);
         setAnimationTimeout({ appear: { enter, exit }, height: { enter: height, exit } });
     }, [setAnimationTimeout]);
-    // Пересчитывает флаги отображения граббера и дивайдера в зависимости от скролла
-    const recalcScrollFlags = useCallback(() => {
-        // расчет состояния граббера в зависимости от того, проскроллен ли контент до верхней границы вьюпорта
-        requestAnimationFrame(() => {
-            if (fixedGrabberRef.current !== null && stickyGrabberRef.current !== null) {
-                const stickyGrabberDOMRect = stickyGrabberRef.current.getBoundingClientRect();
-                const grabberTop = Math.round(stickyGrabberDOMRect.top);
-                if (grabberTop >= layoutMetricsRef.current.grabberSpacing * 2 || heightDiff !== null) {
-                    if (stateRef.current.grabber !== 'sticky') {
-                        stateRef.current.grabber = 'sticky';
-                        stickyGrabberRef.current.classList.remove(styles.grabberInvisible);
-                        fixedGrabberRef.current.classList.add(styles.grabberInvisible);
-                        fixedGrabberRef.current.classList.remove(styles.grabberFixed, styles.grabberFakeSticky);
-                        fixedGrabberRef.current.style.top = ``;
-                    }
-                }
-                else if (grabberTop > layoutMetricsRef.current.grabberSpacing) {
-                    if (stateRef.current.grabber !== 'fake-sticky') {
-                        stateRef.current.grabber = 'fake-sticky';
-                        stickyGrabberRef.current.classList.add(styles.grabberInvisible);
-                        fixedGrabberRef.current.classList.add(styles.grabberFakeSticky);
-                        fixedGrabberRef.current.classList.remove(styles.grabberSticky, styles.grabberInvisible);
-                    }
-                    fixedGrabberRef.current.style.top = `${grabberTop + layoutMetricsRef.current.viewportShift}px`;
-                }
-                else if (stateRef.current.grabber !== 'fixed') {
-                    stateRef.current.grabber = 'fixed';
-                    stickyGrabberRef.current.classList.add(styles.grabberInvisible);
-                    fixedGrabberRef.current.classList.add(styles.grabberFixed);
-                    fixedGrabberRef.current.classList.remove(styles.grabberFakeSticky, styles.grabberInvisible);
-                    fixedGrabberRef.current.style.top = ``;
-                }
+    useEffect(() => {
+        if (!currentVisible || !contentRef.current) {
+            return void 0;
+        }
+        // при изменении высоты контента анимируем ее
+        // самому боттомшиту задаем фиксированную высоту и пересчитываем ее самостоятельно,
+        // чтобы не было мерцания, когда новый контент отрисовался до срабатывания колбека ResizeObserver
+        let prevContentHeight = LayoutMetrics.current.contentHeight;
+        if (visualContainerRef.current !== null) {
+            visualContainerRef.current.style.height = `${LayoutMetrics.current.bottomSheetHeight}px`;
+        }
+        const observer = new ResizeObserver(() => {
+            if (stateRef.current.heightAnimationRunning) {
+                return;
             }
-        });
-        // расчет того, нужно ли показывать дивайдер, в зависимости от того, проскроллен ли контент до конца
-        if (contentRef.current !== null && scrollContainerRef.current !== null) {
-            if (footer && (showDivider === 'always-if-has-scroll' || showDivider === 'if-not-scrolled-to-end')) {
-                const hasScroll = contentRef.current.clientHeight > scrollContainerRef.current.clientHeight + 1;
-                const isScrolledToContentEnd = Math.round(scrollContainerRef.current.scrollTop + scrollContainerRef.current.clientHeight) ===
-                    scrollContainerRef.current.scrollHeight;
-                setDividerVisible((showDivider === 'always-if-has-scroll' && hasScroll) ||
-                    (showDivider === 'if-not-scrolled-to-end' && hasScroll && !isScrolledToContentEnd));
+            LayoutMetrics.current.invalidateCache();
+            // в общем случае видимую высоту контента можно посчитать как min(scrollContainer.height, contentHeight)
+            const contentHeightDiff = LayoutMetrics.current.contentHeight - prevContentHeight;
+            if (contentHeightDiff > 0) {
+                // но если высота контента увеличилась, мы не знаем новую высоту scrollContainer.height
+                // т.к. фиксированная высота боттомшита не дает scrollContainer увеличиться
+                // но сам боттомшит может увеличиться не больше чем на расстояние между ним и верхним краем экрана
+                const heightDiff = Math.round(Math.min(contentHeightDiff, LayoutMetrics.current.remainingAvailableHeight));
+                // триггерим анимацию даже при нулевом heightDiff, чтобы сбросить позицию скролла
+                setVisibleHeightDiff(heightDiff);
+                stateRef.current.heightAnimationRunning = true;
+            }
+            else if (contentHeightDiff < 0) {
+                // если высота контента уменьшилась, новая высота scrollContainer будет такая же или меньше
+                // поэтому можем посчитать новую видимую высоту контента и сравнить со старой
+                const prevVisibleHeight = Math.min(LayoutMetrics.current.scrollContainerHeight, prevContentHeight);
+                const newVisibleHeight = Math.min(LayoutMetrics.current.scrollContainerHeight, LayoutMetrics.current.contentHeight);
+                const heightDiff = Math.round(newVisibleHeight - prevVisibleHeight);
+                // триггерим анимацию даже при нулевом heightDiff, чтобы сбросить позицию скролла
+                setVisibleHeightDiff(heightDiff);
+                stateRef.current.heightAnimationRunning = true;
             }
+            prevContentHeight = LayoutMetrics.current.contentHeight;
+        });
+        observer.observe(contentRef.current);
+        return () => observer.disconnect();
+    }, [currentVisible, setVisibleHeightDiff]);
+    useEffect(() => {
+        if (!currentVisible || isSafari()) {
+            return;
         }
-    }, [footer, heightDiff, setDividerVisible, showDivider]);
-    const resetScrollFlags = useCallback(() => {
-        if (fixedGrabberRef.current !== null && stickyGrabberRef.current !== null) {
-            stateRef.current.grabber = 'sticky';
-            fixedGrabberRef.current.classList.add(styles.grabberInvisible);
-            fixedGrabberRef.current.classList.remove(styles.grabberTransitionAnimation);
-            stickyGrabberRef.current.classList.remove(styles.grabberInvisible);
+        // используем Virtual Keyboard API через meta-тег вместо navigator.virtualKeyboard,
+        // потому что второй способ работает только на страницах, открытых через HTTPS, что мешает тестированию
+        let meta = document.querySelector('meta[name="viewport"]');
+        if (!meta) {
+            meta = document.createElement('meta');
+            meta.setAttribute('name', 'viewport');
+            document.head.appendChild(meta);
         }
-        setDividerVisible(false);
-    }, [setDividerVisible]);
-    const resetHeightDiff = useCallback(() => setHeightDiff(null), [setHeightDiff]);
-    useEffect(() => {
-        const meta = document.querySelector('meta[name="viewport"]') ?? document.createElement('meta');
         const attributesStr = meta.getAttribute('content');
         const attributes = (attributesStr !== null
             ? Object.fromEntries(attributesStr.split(',').map((keyValuePairStr) => keyValuePairStr.split('=')))
@@ -167,11 +217,10 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         const attributesStrUpdated = Object.entries(attributes)
             .map((keyValuePair) => keyValuePair.join('='))
             .join(',');
-        meta.setAttribute('name', 'viewport');
         meta.setAttribute('content', attributesStrUpdated);
-    }, [keyboardOverlaysContent]);
+    }, [currentVisible, isSafari, keyboardOverlaysContent]);
     const recalcKeyboardOffsets = useCallback(() => {
-        if (!headerRef.current || !scrollContainerRef.current || !visualViewport) {
+        if (!headerRef.current || !overlayRef.current || !visualViewport) {
             return;
         }
         if (stateRef.current.hasFocus) {
@@ -182,26 +231,24 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             //    В нем не нужно ничего корректировать при keyboardOverlaysContent=true,
             //    а при keyboardOverlaysContent=false нужно сдвинуть НИЖНИЙ край контейнера ВВЕРХ,
             //    чтобы он совпал с границей Visual Viewport
-            // 2. Chrome < 108 & Chromium-based — ресайзит и Visual Viewport, и Layout Viewport
+            // 2. Chrome < 108 & Chromium-based — ресайзит и Visual Viewport, и Layout Viewport.
             //    В нем не нужно ничего корректировать при keyboardOverlaysContent=false,
             //    а при keyboardOverlaysContent=true нужно сдвинуть НИЖНИЙ край контейнера ВНИЗ,
             //    чтобы футер уехал под клавиатуру
-            // 3. Chrome >= 108 — поддерживает Virtual Keyboard API и meta-тег interactive-widget
+            // 3. Chrome >= 108 — поддерживает Virtual Keyboard API и meta-тег interactive-widget.
             //    Используем поведение `resizes-visual` (как в Safari) в случае keyboardOverlaysContent=true
             //    и `resizes-content` (как в Chrome < 108 & Chromium-based) в случае keyboardOverlaysContent=false
-            //    Таким образом в нем ничего не нужно корректировать.
-            const scrollContainerDOMREct = scrollContainerRef.current.getBoundingClientRect();
+            //    Таким образом в нем ничего не нужно корректировать
+            const overlayDOMRect = overlayRef.current.getBoundingClientRect();
             // любой браузер может сдвинуть Visual Viewport вверх, если фокусируемый инпут находится близко к нижней границе
             // из-за этого может возникнуть проблема, что ВЕРХНИЙ край контента уехал за границу Visual Viewport
             // сдвигаем ВЕРХНИЙ край контейнера ВНИЗ, чтобы он совпал с границей Visual Viewport
-            const visualViewportShift = Math.round(layoutMetricsRef.current.grabberSpacing - scrollContainerDOMREct.top);
-            // запоминаем сдвиг для коррекции позиции граббера
-            layoutMetricsRef.current.viewportShift = visualViewportShift;
-            // клавиатура ПОВЕРХ контента
+            const visualViewportShift = Math.round(-overlayDOMRect.top);
+            // keyboardOverlaysContent=true, клавиатура ПОВЕРХ контента
             // этот кейс нужно корректировать только в Chrome < 108 & Chromium-based
             if (keyboardOverlaysContent) {
                 // браузеры из этой группы меняют Layout Viewport
-                const layoutViewportDiff = Math.round(layoutMetricsRef.current.documentHeight - document.documentElement.clientHeight);
+                const layoutViewportDiff = Math.round(DOCUMENT_HEIGHT.current - document.documentElement.clientHeight);
                 if (layoutViewportDiff > 0) {
                     setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
                     // сдвигаем НИЖНИЙ край контейнера ВНИЗ, чтобы футер уехал под клавиатуру
@@ -209,17 +256,16 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                     // при этом может возникнуть проблема, что клавиатура перекрыла хедер
                     // проверяем это и компенсируем величину перекрытия при необходимости
                     const headerDOMRect = headerRef.current.getBoundingClientRect();
-                    const headerOutOfViewportHeight = Math.round(headerDOMRect.bottom + layoutViewportDiff - layoutMetricsRef.current.documentHeight);
+                    const headerOutOfViewportHeight = Math.round(headerDOMRect.bottom + layoutViewportDiff - DOCUMENT_HEIGHT.current);
                     if (headerOutOfViewportHeight > 0) {
                         setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${headerOutOfViewportHeight - layoutViewportDiff}px`);
                     }
                 }
             }
-            else {
-                // клавиатура ПОД контентом
-                // этот кейс нужно корректировать только в Safari
-                // Safari ресайзит Visual Viewport
-                const visualViewportDiff = Math.round(scrollContainerDOMREct.bottom - visualViewport.height);
+            // keyboardOverlaysContent=false, клавиатура ПОД контентом
+            // этот кейс нужно корректировать только в Safari
+            if (!keyboardOverlaysContent && isSafari()) {
+                const visualViewportDiff = Math.round(overlayDOMRect.bottom - visualViewport.height);
                 if (visualViewportDiff > 0) {
                     setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
                     // сдвигаем НИЖНИЙ край контейнера ВВЕРХ, чтобы он совпал с границей Visual Viewport
@@ -231,11 +277,8 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
         }
-    }, [keyboardOverlaysContent]);
+    }, [isSafari, keyboardOverlaysContent]);
     const handleFocus = useCallback((event) => {
-        if (!scrollContainerRef.current) {
-            return;
-        }
         const focusedElement = event.target;
         const initialViewportHeight = visualViewport?.height;
         const resizeRAFStart = performance.now();
@@ -248,7 +291,12 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 stateRef.current.resizeRAFHandle = null;
             }
             recalcKeyboardOffsets();
+            if (!stateRef.current.hasFocus) {
+                visualViewport?.removeEventListener('resize', handleResize);
+            }
         };
+        // если спамить фокус/блюр инпута, ивент visualViewport.resize может не долететь
+        // поэтому проверяем изменение высоты в рекурсивном RAF
         const waitForResize = () => {
             if (performance.now() - resizeRAFStart > 1000 || visualViewport?.height !== initialViewportHeight) {
                 visualViewport?.removeEventListener('resize', handleResize);
@@ -260,292 +308,289 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             }
         };
         const handleBlur = () => {
-            if (!scrollContainerRef.current) {
-                return;
-            }
-            focusedElement.removeEventListener('blur', handleBlur);
-            stateRef.current.hasFocus = false;
-            scrollContainerRef.current.classList.remove(styles.scrollContainerNoScroll, styles.virtualKeyboardAnimation);
-            if (isSafari) {
+            if (isSafari()) {
                 setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
                 setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
             }
+            stateRef.current.hasFocus = false;
             if (stateRef.current.resizeRAFHandle !== null) {
                 cancelAnimationFrame(stateRef.current.resizeRAFHandle);
                 stateRef.current.resizeRAFHandle = null;
             }
-            visualViewport?.removeEventListener('resize', handleResize);
+            focusedElement.removeEventListener('blur', handleBlur);
         };
-        focusedElement.addEventListener('blur', handleBlur);
         stateRef.current.hasFocus = true;
-        if (!allowScrollWhileFocused) {
-            scrollContainerRef.current.classList.add(styles.scrollContainerNoScroll);
-        }
-        scrollContainerRef.current.classList.add(styles.virtualKeyboardAnimation);
         stateRef.current.resizeRAFHandle = requestAnimationFrame(waitForResize);
         visualViewport?.addEventListener('resize', handleResize);
-    }, [allowScrollWhileFocused, recalcKeyboardOffsets]);
-    // Запускает анимацию translateY для показа/скрытия боттомшита или изменения высоты контента
-    const runTranslateYAnimation = useCallback(() => {
-        if (!contentRef.current ||
-            !contentOverlayRef.current ||
-            !footerRef.current ||
-            !heightTransitionElementRef.current ||
-            !scrollContainerRef.current ||
-            !visualViewport) {
-            return;
+        focusedElement.addEventListener('blur', handleBlur);
+    }, [isSafari, recalcKeyboardOffsets]);
+    // contentOverlay совпадает по границам с контентом боттомшита, но лежит вне боттомшита,
+    // чтобы чайлды contentOverlay не обрезались границами боттомшита
+    // например, снекбар, лежащий внутри contentOverlay, при смахивании может оказаться в любом месте экрана
+    // поэтому позицию contentOverlay нужно синхронизировать
+    const recalcContentOverlayPosition = useCallback(() => {
+        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`;
         }
-        if (heightDiff !== null) {
-            if (heightDiff > 0) {
-                contentRef.current.style.transform = `translateY(${heightDiff}px)`;
-                contentOverlayRef.current.style.transform = `translateY(${heightDiff}px)`;
-                footerRef.current.style.transform = `translateY(${-heightDiff}px)`;
+    }, []);
+    const recalcScrollFlags = useCallback(() => {
+        if (dividerRef.current !== null) {
+            const prevDividerVisible = stateRef.current.dividerVisible;
+            const isNotScrolledToEnd = LayoutMetrics.current.contentHeight + stateRef.current.scrollOffset >
+                LayoutMetrics.current.scrollContainerHeight;
+            stateRef.current.dividerVisible =
+                showDivider === 'always' || (showDivider === 'with-scroll' && isNotScrolledToEnd);
+            if (stateRef.current.dividerVisible !== prevDividerVisible) {
+                dividerRef.current.classList.toggle(styles.dividerVisible, stateRef.current.dividerVisible);
             }
-            else {
-                heightTransitionElementRef.current.style.flexBasis = `${-heightDiff}px`;
+        }
+        if (grabberRef.current !== null) {
+            const prevGrabberUnsafe = stateRef.current.grabberUnsafe;
+            stateRef.current.grabberUnsafe =
+                Math.round(Math.max(stateRef.current.scrollOffset, 0) + stateRef.current.swipeOffset) ===
+                    LayoutMetrics.current.remainingAvailableHeight;
+            if (stateRef.current.grabberUnsafe !== prevGrabberUnsafe) {
+                grabberRef.current.classList.toggle(styles.grabberEnsureSafe, stateRef.current.grabberUnsafe);
             }
         }
-        else {
-            const contentDOMREct = contentRef.current.getBoundingClientRect();
-            const translateY = scrollContainerRef.current.clientHeight + stateRef.current.swipeOffset - contentDOMREct.top;
-            contentRef.current.style.transform = `translateY(${translateY}px)`;
-            contentOverlayRef.current.style.transform = `translateY(${translateY}px)`;
-            setCSSVariable(CSS_VAR_OVERLAY_OPACITY, `0`);
+    }, [showDivider]);
+    // помещает боттомшит в позицию вне экрана снизу, которая может быть начальной либо конечной точкой анимации
+    const setTransformToInvisible = useCallback(() => {
+        LayoutMetrics.current.invalidateCache();
+        if (overlayRef.current !== null) {
+            overlayRef.current.style.opacity = `0`;
         }
-        forceRepaint(scrollContainerRef.current);
-    }, [heightDiff]);
-    const resetTranslateY = useCallback(() => {
-        if (!contentRef.current ||
-            !contentOverlayRef.current ||
-            !footerRef.current ||
-            !heightTransitionElementRef.current ||
-            !scrollContainerRef.current) {
-            return;
+        if (swipeContainerRef.current !== null) {
+            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.bottomSheetHeight);
         }
-        if (heightDiff !== null) {
-            contentRef.current.style.transform = ``;
-            contentOverlayRef.current.style.transform = ``;
-            footerRef.current.style.transform = ``;
-            heightTransitionElementRef.current.style.flexBasis = ``;
+        requestAnimationFrame(recalcContentOverlayPosition);
+        requestAnimationFrame(recalcScrollFlags);
+    }, [recalcContentOverlayPosition, recalcScrollFlags]);
+    // помещает боттомшит в дефолтную позицию на экране, которая может быть начальной либо конечной точкой анимации
+    const setTransformToVisible = useCallback(() => {
+        LayoutMetrics.current.invalidateCache();
+        stateRef.current.scrollOffset = LayoutMetrics.current.initialOffset;
+        if (overlayRef.current !== null) {
+            overlayRef.current.style.opacity = `1`;
         }
-        else {
-            contentRef.current.style.transform = `translateY(${stateRef.current.swipeOffset}px)`;
-            contentOverlayRef.current.style.transform = `translateY(${stateRef.current.swipeOffset}px)`;
-            setCSSVariable(CSS_VAR_OVERLAY_OPACITY, `1`);
+        if (swipeContainerRef.current !== null) {
+            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.initialOffset + stateRef.current.swipeOffset);
         }
-        forceRepaint(scrollContainerRef.current);
-    }, [heightDiff]);
-    const handleAppearAnimationEnd = useCallback(() => {
-        let scrollTop = scrollContainerRef.current?.scrollTop ?? 0;
-        let scrollLocked = false;
-        // Обработчик скролла для блокировки оверскролла в браузерах без поддержки css правила overscroll-behavior
-        const handleScroll = (event) => {
-            const currentTarget = event.currentTarget;
-            const forward = currentTarget.scrollTop > scrollTop;
-            const maxScroll = currentTarget.scrollHeight - currentTarget.offsetHeight;
-            if (!scrollLocked && forward && currentTarget.scrollTop > maxScroll) {
-                currentTarget.style.overflow = 'hidden';
-                currentTarget.scrollTop = maxScroll;
-                scrollLocked = true;
-                scrollTop = maxScroll;
-                setTimeout(() => {
-                    currentTarget.style.overflow = 'auto';
-                    scrollLocked = false;
-                }, 1);
-                event.preventDefault();
-                return;
-            }
-            scrollTop = currentTarget.scrollTop;
-        };
-        // удаления хендлеров нет т.к. установлен флаг unmountOnExit, т.е. элемент удаляется из DOM
-        // после завершения анимации
-        scrollContainerRef.current?.addEventListener('touchmove', handleScroll, { passive: false });
-        scrollContainerRef.current?.addEventListener('scroll', handleScroll, { passive: false });
-        recalcScrollFlags();
-        onAppear?.();
-    }, [onAppear, recalcScrollFlags]);
+        if (footerRef.current !== null) {
+            footerRef.current.style.transform = translateY(-LayoutMetrics.current.initialOffset);
+        }
+        requestAnimationFrame(recalcContentOverlayPosition);
+        requestAnimationFrame(recalcScrollFlags);
+        scrollContextProviderRef.current?.notify({ scrollTop: 0 });
+    }, [recalcContentOverlayPosition, recalcScrollFlags]);
     const handleExitAnimationStart = useCallback(() => {
-        resetTranslateY();
+        setTransformToVisible();
         onBeforeExit?.();
-    }, [resetTranslateY, onBeforeExit]);
+    }, [setTransformToVisible, onBeforeExit]);
     const handleExitAnimationEnd = useCallback(() => {
-        stateRef.current.grabber = 'sticky';
-        stateRef.current.hasFocus = false;
-        stateRef.current.isSwipeEnabled = false;
-        changeSwipeProgressState(stateRef, scrollContainerRef, false, !!allowScrollWhileFocused);
-        stateRef.current.swipeOffset = 0;
-        stateRef.current.resizeRAFHandle !== null && cancelAnimationFrame(stateRef.current.resizeRAFHandle);
-        stateRef.current.resizeRAFHandle = null;
-        layoutMetricsRef.current.fillHeight = 0;
-        layoutMetricsRef.current.grabberSpacing = 0;
-        setCSSVariable(CSS_VAR_OVERLAY_OPACITY, `1`);
         setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
         setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
-        if (fixedGrabberRef.current !== null) {
-            fixedGrabberRef.current.classList.add(styles.grabberInvisible);
-            fixedGrabberRef.current.classList.remove(styles.grabberFixed, styles.grabberFakeSticky);
-            fixedGrabberRef.current.style.transform = ``;
-        }
-        if (scrollContainerRef.current !== null) {
-            scrollContainerRef.current.classList.remove(styles.scrollContainerNoScroll, styles.virtualKeyboardAnimation);
-        }
-        resetScrollFlags();
-        setOnCloseContractCheck(false);
+        stateRef.current.resizeRAFHandle !== null && cancelAnimationFrame(stateRef.current.resizeRAFHandle);
+        stateRef.current = { ...INITIAL_STATE };
         onAfterExit?.();
-    }, [resetScrollFlags, setOnCloseContractCheck, onAfterExit, allowScrollWhileFocused]);
-    const handleClose = useCallback(() => {
-        onClose();
-        setOnCloseContractCheck(true);
-    }, [onClose, setOnCloseContractCheck]);
-    const handleSwipeStart = useCallback(() => {
-        if (!scrollContainerRef.current) {
-            return;
+    }, [onAfterExit]);
+    const handleHeightAnimationStart = useCallback(() => {
+        LayoutMetrics.current.invalidateCache();
+        stateRef.current.scrollOffset = LayoutMetrics.current.initialOffset;
+        stateRef.current.swipeOffset = 0;
+        if (contentRef.current !== null) {
+            contentRef.current.style.transform = translateY(0);
         }
-        if (Object.is(Math.round(scrollContainerRef.current.scrollTop), 0)) {
-            stateRef.current.isSwipeEnabled = true;
-            stateRef.current.swipeOffset = 0;
+        if (swipeContainerRef.current !== null) {
+            swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.initialOffset);
         }
-    }, []);
-    const handleSwipeMove = useCallback((event) => {
-        if (!contentRef.current ||
-            !contentOverlayRef.current ||
-            !stateRef.current.isSwipeEnabled ||
-            !scrollContainerRef.current) {
-            return;
+        if (visibleHeightDiff !== null && visualContainerRef.current !== null) {
+            visualContainerRef.current.style.height = `${LayoutMetrics.current.bottomSheetHeight + visibleHeightDiff}px`;
         }
-        const selection = document.getSelection();
-        if (selection && !selection.isCollapsed) {
+        scrollContextProviderRef.current?.notify({ scrollTop: 0 });
+    }, [visibleHeightDiff]);
+    const handleHeightAnimationEnd = useCallback(() => {
+        LayoutMetrics.current.invalidateCache();
+        stateRef.current.heightAnimationRunning = false;
+        setVisibleHeightDiff(null);
+        requestAnimationFrame(recalcContentOverlayPosition);
+        requestAnimationFrame(recalcScrollFlags);
+    }, [setVisibleHeightDiff, recalcContentOverlayPosition, recalcScrollFlags]);
+    const handleSwipeMove = useCallback((event) => {
+        if ((stateRef.current.touchAction !== null && stateRef.current.touchAction !== 'swipe') ||
+            hasSelectedText()) {
             return;
         }
-        if (event.distanceY > 0) {
-            contentRef.current.style.transform = `translateY(${event.distanceY}px)`;
-            contentOverlayRef.current.style.transform = `translateY(${event.distanceY}px)`;
-            if (!stateRef.current.isSwipeInProgress) {
-                changeSwipeProgressState(stateRef, scrollContainerRef, true, !!allowScrollWhileFocused);
+        // храним неокругленное значение для translateY, чтобы анимация была плавнее
+        let newSwipeOffset = stateRef.current.swipeOffset + event.deltaY;
+        if (Math.round(newSwipeOffset) <= 0) {
+            // боттомшит уперся в верхний край экрана, не даем свайпать дальше
+            newSwipeOffset = 0;
+            if (stateRef.current.touchAction === 'swipe') {
+                stateRef.current.touchAction = 'complete';
             }
-            recalcScrollFlags();
         }
         else {
-            contentRef.current.style.transform = ``;
-            contentOverlayRef.current.style.transform = ``;
-            stateRef.current.isSwipeEnabled = false;
-            changeSwipeProgressState(stateRef, scrollContainerRef, false, !!allowScrollWhileFocused);
+            // свайп в процессе
+            stateRef.current.touchAction = 'swipe';
         }
-        stateRef.current.swipeOffset = event.distanceY;
-    }, [recalcScrollFlags, allowScrollWhileFocused]);
-    const handleSwipeCancel = useCallback(() => {
-        if (!contentRef.current || !contentOverlayRef.current || !scrollContainerRef.current) {
-            return;
-        }
-        if (stateRef.current.isSwipeEnabled && stateRef.current.isSwipeInProgress) {
-            contentRef.current.style.transform = ``;
-            contentOverlayRef.current.style.transform = ``;
+        if (stateRef.current.swipeOffset !== newSwipeOffset) {
+            stateRef.current.swipeOffset = newSwipeOffset;
+            if (swipeContainerRef.current !== null) {
+                swipeContainerRef.current.style.transform = translateY(Math.max(stateRef.current.scrollOffset, 0) + newSwipeOffset);
+            }
+            recalcScrollFlags();
         }
-        stateRef.current.isSwipeEnabled = false;
-        changeSwipeProgressState(stateRef, scrollContainerRef, false, !!allowScrollWhileFocused);
-        stateRef.current.swipeOffset = 0;
-        recalcScrollFlags();
-    }, [recalcScrollFlags, allowScrollWhileFocused]);
-    const handleSwipeEnd = useCallback((event) => {
-        if (stateRef.current.isSwipeEnabled && stateRef.current.isSwipeInProgress) {
-            handleClose();
+    }, [recalcScrollFlags]);
+    const handleSwipeCancel = useCallback(() => {
+        if (stateRef.current.touchAction === 'swipe') {
+            stateRef.current.swipeOffset = 0;
+            stateRef.current.touchAction = null;
+            if (swipeContainerRef.current !== null) {
+                swipeContainerRef.current.classList.add(styles.swipeCancelAnimation);
+                const swipeContainer = swipeContainerRef.current;
+                setTimeout(() => swipeContainer.classList.remove(styles.swipeCancelAnimation), 100);
+                swipeContainerRef.current.style.transform = translateY(Math.max(stateRef.current.scrollOffset, 0));
+            }
+            recalcScrollFlags();
         }
-        else {
-            handleSwipeCancel(event);
+    }, [recalcScrollFlags]);
+    const handleSwipeEnd = useCallback(() => {
+        if (stateRef.current.touchAction === 'swipe') {
+            onCloseRef.current();
         }
-    }, [handleClose, handleSwipeCancel]);
-    const { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel } = useSwipe({
-        thresholdYRef: SWIPE_THRESHOLD_REF,
-        onSwipeStart: handleSwipeStart,
+    }, []);
+    const swipeHandlers = useSwipeHandlers({
+        thresholdYRef: SWIPE_THRESHOLD,
         onSwipeMove: handleSwipeMove,
         onSwipeEnd: handleSwipeEnd,
         onSwipeCancel: handleSwipeCancel,
     });
-    const swipeHandlers = useMemo(() => {
-        const withStopPropagation = (callback) => (event) => {
-            event.stopPropagation();
-            callback?.(event);
-        };
-        return {
-            onTouchStart: withStopPropagation(onTouchStart),
-            onTouchMove: withStopPropagation(onTouchMove),
-            onTouchEnd,
-            onTouchCancel,
-        };
-    }, [onTouchStart, onTouchMove, onTouchEnd, onTouchCancel]);
-    useLayoutEffect(() => {
-        if (!contentRef.current ||
-            !footerRef.current ||
-            !headerRef.current ||
-            !scrollContainerRef.current ||
-            !visualViewport) {
-            return;
+    useEffect(() => {
+        if (!currentVisible || visualContainerRef.current === null) {
+            return void 0;
         }
-        if (visible) {
-            stateRef.current.grabber = contentRef.current.offsetTop > 0 ? 'sticky' : 'sticky-inside';
-            if (visible !== prevPropsRef.current.visible) {
-                layoutMetricsRef.current.fillHeight = contentRef.current.offsetTop;
-                layoutMetricsRef.current.grabberSpacing = scrollContainerRef.current.offsetTop;
-                setCSSVariable(CSS_VAR_CONTENT_OVERLAY_TOP, `${contentRef.current.offsetTop + headerRef.current.clientHeight}px`);
-                setCSSVariable(CSS_VAR_CONTENT_OVERLAY_HEIGHT, `${footerRef.current.offsetTop - headerRef.current.clientHeight}px`);
-                setCSSVariable(CSS_VAR_INITIAL_VIEWPORT_HEIGHT, `${INITIAL_VIEWPORT_HEIGHT}px`);
+        const handleScroll = (event) => {
+            if ((!allowScrollWhileFocused && stateRef.current.hasFocus) ||
+                (stateRef.current.touchAction !== null && stateRef.current.touchAction !== 'scroll') ||
+                hasSelectedText()) {
+                return;
             }
-            else if (children !== prevPropsRef.current.children || height !== prevPropsRef.current.height) {
-                const scrollTop = scrollContainerRef.current.scrollTop;
-                scrollContainerRef.current.scrollTo({ top: 0 });
-                const _heightDiff = layoutMetricsRef.current.fillHeight - contentRef.current.offsetTop;
-                layoutMetricsRef.current.fillHeight = contentRef.current.offsetTop;
-                if (_heightDiff !== 0 && !stateRef.current.hasFocus) {
-                    setHeightDiff(_heightDiff);
+            if (LayoutMetrics.current.initialOffset !== 0 ||
+                LayoutMetrics.current.contentHeight > LayoutMetrics.current.scrollContainerHeight) {
+                // храним неокругленное значение для translateY, чтобы анимация была плавнее
+                let newScrollOffset = stateRef.current.scrollOffset + event.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';
+                    }
+                }
+                else if (LayoutMetrics.current.contentHeight + roundedNewScrollOffset <=
+                    LayoutMetrics.current.scrollContainerHeight) {
+                    // скролла нет (touchAction is null)
+                    // либо контент проскроллен до конца, тогда не даем скроллить дальше
+                    newScrollOffset = LayoutMetrics.current.scrollContainerHeight - LayoutMetrics.current.contentHeight;
+                    if (stateRef.current.touchAction === 'scroll') {
+                        stateRef.current.touchAction = 'complete';
+                    }
+                }
+                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);
+                            }
+                            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),
+                    });
                 }
-                scrollContainerRef.current.scrollTo({ top: scrollTop });
             }
-        }
-        prevPropsRef.current = { ...prevPropsRef.current, children, height, visible };
-    }, [children, height, setHeightDiff, visible]);
-    if (onCloseContractCheck && visible) {
-        console.error('onClose did not set visible=false', Date.now());
-    }
-    const contextValue = useMemo(() => ({ contentOverlayRef }), [contentOverlayRef]);
-    const eventHandlers = useNoBubbling();
+        };
+        const handleScrollEnd = () => {
+            if (stateRef.current.touchAction === 'scroll') {
+                stateRef.current.touchAction = null;
+            }
+        };
+        const handleTouchStart = (event) => {
+            if (stateRef.current.touchAction === 'complete') {
+                stateRef.current.touchAction = null;
+            }
+            swipeHandlers.onTouchStart(event);
+        };
+        const handleTouchMove = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            swipeHandlers.onTouchMove(event);
+        };
+        const removeScrollHandlers = initTouchHandlers('vertical', visualContainerRef, handleScroll, handleScrollEnd);
+        const visualContainer = visualContainerRef.current;
+        visualContainer.addEventListener('touchstart', handleTouchStart);
+        visualContainer.addEventListener('touchmove', handleTouchMove);
+        visualContainer.addEventListener('touchend', swipeHandlers.onTouchEnd);
+        visualContainer.addEventListener('touchcancel', swipeHandlers.onTouchCancel);
+        return () => {
+            removeScrollHandlers();
+            visualContainer.removeEventListener('touchstart', handleTouchStart);
+            visualContainer.removeEventListener('touchmove', handleTouchMove);
+            visualContainer.removeEventListener('touchend', swipeHandlers.onTouchEnd);
+            visualContainer.removeEventListener('touchcancel', swipeHandlers.onTouchCancel);
+        };
+    }, [allowScrollWhileFocused, currentVisible, recalcScrollFlags, swipeHandlers]);
+    const { onTouchEnd, ...eventHandlers } = useNoBubbling();
     if (!animationTimeout) {
         return null;
     }
-    const renderFunc = (appearTransition, heightTransition) => (jsx(Layer, { layer: InternalLayerName.BottomSheet, children: jsxs("div", { ...eventHandlers, className: classnames(styles.overlay, {
-                [styles.overlayInvisible]: !showOverlay || (showOverlay && appearTransition !== 'exiting' && !currentVisible),
-            }), "data-qa": "bottom-sheet-overlay", children: [jsx("div", { className: classnames(styles.overlayBackground, {
+    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',
+                    }), "data-qa": "bottom-sheet-overlay", onClick: appearTransition === 'entered' ? onCloseRef.current : undefined, ref: overlayRef }), jsxs("div", { className: classnames(styles.swipeContainer, {
                         [styles.appearAnimation]: appearTransition === 'entering',
+                        [styles.closeBySwipeAnimation]: appearTransition === 'exiting' && stateRef.current.touchAction === 'swipe',
                         [styles.disappearAnimation]: appearTransition === 'exiting',
-                    }) }), jsx("div", { className: classnames(styles.grabber, styles.grabberTransitionAnimation, {
-                        [styles.grabberInvisible]: appearTransition !== 'entered' || heightTransition !== 'exited',
-                        [styles.grabberFixed]: stateRef.current.grabber === 'fixed' || stateRef.current.grabber === 'sticky-inside',
-                        [styles.grabberFakeSticky]: stateRef.current.grabber === 'fake-sticky',
-                    }), ref: fixedGrabberRef }), jsxs("div", { className: classnames(styles.scrollContainer, {
-                        [styles.scrollContainerNoScroll]: !allowScrollWhileFocused && stateRef.current.hasFocus,
-                        [styles.virtualKeyboardAnimation]: stateRef.current.hasFocus,
-                    }), "data-qa": "bottom-sheet-container", onScroll: recalcScrollFlags, ref: scrollContainerRefMulti, children: [jsx("div", { className: classnames(styles.fill, {
-                                [styles.fillFullScreen]: height === 'full-screen',
-                                [styles.fillHalfScreen]: height === 'half-screen',
-                            }), "data-qa": "bottom-sheet-fill", onClick: handleClose }), jsxs("div", { className: classnames(styles.content, {
-                                [styles.appearAnimation]: appearTransition === 'entering',
-                                [styles.closeBySwipeAnimation]: appearTransition === 'exiting' && stateRef.current.isSwipeInProgress,
-                                [styles.contentFullScreen]: height === 'full-screen',
-                                [styles.disappearAnimation]: appearTransition === 'exiting',
+                    }), "data-qa": "bottom-sheet-container", 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": "bottom-sheet-content", ref: contentRef, ...swipeHandlers, children: [jsx("div", { className: classnames(styles.grabber, styles.grabberSticky, {
-                                        [styles.grabberStickyInside]: appearTransition === 'entering' && stateRef.current.grabber === 'sticky-inside',
-                                    }), ref: stickyGrabberRef }), jsxs("div", { className: styles.visualContainer, children: [jsx("div", { className: styles.header, onFocus: handleFocus, ref: headerRef, children: jsx(NavigationBarContext.Provider, { value: NAVIGATION_BAR_SIZE_OVERRIDE, children: header }) }), jsx("div", { className: classnames(styles.main, {
-                                                [styles.mainWithPaddings]: withContentPaddings,
-                                                [styles.mainWithoutHeader]: !header,
-                                            }), children: jsx(BottomSheetContext.Provider, { value: contextValue, children: children }) }), jsx("div", { className: classnames(styles.heightTransitionElement, {
-                                                [styles.heightTransitionAnimation]: heightTransition === 'entering',
-                                            }), ref: heightTransitionElementRef }), jsxs("div", { className: classnames(styles.footer, {
-                                                [styles.heightTransitionAnimation]: heightTransition === 'entering',
-                                            }), ref: footerRef, children: [isDividerVisible && jsx(Divider, {}), interceptClickHandlers ? jsx(ClickInterceptor, { children: footer }) : footer] })] })] })] }), 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: runTranslateYAnimation, onEntering: resetTranslateY, onEntered: handleAppearAnimationEnd, onExit: handleExitAnimationStart, onExiting: runTranslateYAnimation, onExited: handleExitAnimationEnd, timeout: animationTimeout.appear, unmountOnExit: true, nodeRef: contentRef, children: (appearTransition) => (jsx(Transition, { in: heightDiff !== null, onEnter: runTranslateYAnimation, onEntering: resetTranslateY, onEntered: resetHeightDiff, onExited: recalcScrollFlags, timeout: animationTimeout.height, nodeRef: contentRef, children: (heightTransition) => renderFunc(appearTransition, heightTransition) })) }) }), document.body);
+                            }), "data-qa": "bottom-sheet-content", ref: bottomSheetRef, children: jsxs(CustomScrollContextProvider, { ref: scrollContextProviderRef, children: [jsx("div", { className: styles.header, onFocus: handleFocus, ref: headerRef, children: jsx(NavigationBarContext.Provider, { value: NAVIGATION_BAR_SIZE_OVERRIDE, children: header }) }), jsx("div", { className: styles.scrollContainer, ref: scrollContainerRef, children: jsx("div", { className: classnames(styles.content, {
+                                                [styles.contentWithPaddings]: withContentPaddings,
+                                                [styles.contentWithoutHeader]: !header,
+                                            }), 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, {
+                                                    [styles.dividerVisible]: stateRef.current.dividerVisible,
+                                                }), ref: dividerRef, children: jsx(Divider, {}) })), interceptClickHandlers ? jsx(ClickInterceptor, { children: footer }) : footer] })] }) }), 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: onAppear, onExit: handleExitAnimationStart, onExiting: setTransformToInvisible, onExited: handleExitAnimationEnd, timeout: animationTimeout.appear, unmountOnExit: true, nodeRef: contentRef, children: (appearTransition) => (jsx(Transition, { in: visibleHeightDiff !== null, onEnter: handleHeightAnimationStart, onEntered: handleHeightAnimationEnd, timeout: animationTimeout.height, nodeRef: contentRef, children: (heightTransition) => renderFunc(appearTransition, heightTransition) })) }) }), document.body);
 };
 const BottomSheet = forwardRef(BottomSheetRenderFunc);
-BottomSheet.displayName = 'BottomSheet';
 
 export { BottomSheet };
 //# sourceMappingURL=BottomSheet.js.map