@hh.ru/magritte-ui-bottom-sheet 6.0.1 → 7.0.0

package/BottomSheet.js

@@ -18,18 +18,18 @@ import { Divider } from '@hh.ru/magritte-ui-divider';
 import { Layer } from '@hh.ru/magritte-ui-layer';
 import { isNavigationBarComponent, NavigationBarComponent } from '@hh.ru/magritte-ui-navigation-bar';
 import { isValidTreeSelectorWrapper } from '@hh.ru/magritte-ui-tree-selector';
-import { s as styles } from './bottom-sheet-BNgV4RDn.js';
+import { s as styles } from './bottom-sheet-C4VJXwIv.js';
 
 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_VIRTUAL_KEYBOARD_TOP_OFFSET = '--virtual-keyboard-top-offset';
 const CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET = '--virtual-keyboard-bottom-offset';
+const checkSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 const hasSelectedText = () => {
     const selection = document.getSelection();
     return !!selection && !selection.isCollapsed;
 };
-const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 const toNumber = (value) => {
     const result = parseInt(value, 10);
     return Number.isInteger(result) ? result : 0;
@@ -56,7 +56,7 @@ const makeInitialState = () => ({
     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) => {
+const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, header, height = 'content', interceptClickHandlers = true, keyboardOverlaysFooter = 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);
@@ -83,13 +83,25 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
     const [heightAnimationRunning, setHeightAnimationRunning] = useState(false);
     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.hasTouchSupport !== 'boolean' && typeof window !== 'undefined') {
-        deviceFlagsRef.current.hasTouchSupport = 'ontouchstart' in window;
-    }
+    const virtualKeyboardOffsetsRef = useRef({ top: 0, bottom: 0 });
+    const [isSafari, setIsSafari] = useState(null);
+    useEffect(() => setIsSafari(checkSafari()), [setIsSafari]);
+    const [hasTouchSupport, setHasTouchSupport] = useState(null);
+    const hasTouchSupportRef = useRef(null);
+    useEffect(() => {
+        if (!('matchMedia' in window)) {
+            return void 0;
+        }
+        const mediaQuery = window.matchMedia('(pointer:coarse)');
+        const handleMediaQueryChange = () => {
+            hasTouchSupportRef.current = mediaQuery.matches;
+            setHasTouchSupport(hasTouchSupportRef.current);
+        };
+        mediaQuery.addEventListener('change', handleMediaQueryChange);
+        hasTouchSupportRef.current = mediaQuery.matches;
+        setHasTouchSupport(hasTouchSupportRef.current);
+        return () => mediaQuery.removeEventListener('change', handleMediaQueryChange);
+    }, [setHasTouchSupport]);
     const bindEscapeToClose = useEscapeToClose(() => currentVisible && onClose?.());
     useEffect(() => bindEscapeToClose(document.body), [bindEscapeToClose]);
     const LayoutMetrics = useRef((() => {
@@ -150,7 +162,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             get initialOffset() {
                 if (!('initialOffset' in cache)) {
                     if (height === 'half-screen' &&
-                        deviceFlagsRef.current.hasTouchSupport &&
+                        hasTouchSupportRef.current &&
                         visualContainerRef.current !== null &&
                         visualViewport !== null) {
                         const halfScreenOffset = visualContainerRef.current.clientHeight - visualViewport.height / 2;
@@ -162,6 +174,9 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 }
                 return cache.initialOffset ?? 0;
             },
+            get maxScrollTop() {
+                return LayoutMetrics.current.contentHeight - LayoutMetrics.current.visibleContentHeight;
+            },
             /**
              * Расстояние между верхним краем боттомшита и границей вьюпорта
              */
@@ -204,7 +219,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         setAnimationTimeout({ appear: { enter, exit }, height: { enter: height, exit } });
     }, [setAnimationTimeout]);
     useEffect(() => {
-        if (!currentVisible || deviceFlagsRef.current.isSafari) {
+        if (!currentVisible || isSafari) {
             return;
         }
         // используем Virtual Keyboard API через meta-тег вместо navigator.virtualKeyboard,
@@ -219,73 +234,129 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         const attributes = (attributesStr !== null
             ? Object.fromEntries(attributesStr.split(',').map((keyValuePairStr) => keyValuePairStr.split('=')))
             : {});
-        attributes['interactive-widget'] = keyboardOverlaysContent ? 'resizes-visual' : 'resizes-content';
+        attributes['interactive-widget'] = keyboardOverlaysFooter ? 'resizes-visual' : 'resizes-content';
         const attributesStrUpdated = Object.entries(attributes)
             .map((keyValuePair) => keyValuePair.join('='))
             .join(',');
         meta.setAttribute('content', attributesStrUpdated);
-    }, [currentVisible, keyboardOverlaysContent]);
+    }, [currentVisible, isSafari, keyboardOverlaysFooter]);
+    const fixOverscroll = useCallback(() => {
+        if (hasTouchSupport) {
+            const isOverscrolled = LayoutMetrics.current.contentHeight + stateRef.current.scrollOffset <
+                LayoutMetrics.current.visibleContentHeight;
+            if (isOverscrolled) {
+                stateRef.current.scrollOffset =
+                    LayoutMetrics.current.visibleContentHeight - LayoutMetrics.current.contentHeight;
+                if (contentRef.current !== null) {
+                    contentRef.current.style.transform = translateY(stateRef.current.scrollOffset);
+                }
+                scrollContextProviderRef.current?.notify({
+                    scrollTop: -stateRef.current.scrollOffset,
+                    maxScrollTop: LayoutMetrics.current.maxScrollTop,
+                });
+            }
+        }
+    }, [hasTouchSupport]);
+    const resetScrollPosition = useCallback(() => {
+        if (hasTouchSupport) {
+            stateRef.current.scrollOffset = LayoutMetrics.current.initialOffset;
+            stateRef.current.swipeOffset = 0;
+            if (contentRef.current !== null) {
+                contentRef.current.style.transform = translateY(0);
+            }
+            if (swipeContainerRef.current !== null) {
+                swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.initialOffset);
+            }
+        }
+        else {
+            scrollContainerRef.current?.scrollTo({ top: 0 });
+        }
+    }, [hasTouchSupport]);
+    const recalcScrollFlags = useCallback(() => {
+        const scrollOffset = hasTouchSupport
+            ? stateRef.current.scrollOffset
+            : -(scrollContainerRef.current?.scrollTop ?? 0);
+        if (dividerRef.current !== null) {
+            const prevDividerVisible = stateRef.current.dividerVisible;
+            const isNotScrolledToEnd = LayoutMetrics.current.contentHeight + scrollOffset > LayoutMetrics.current.visibleContentHeight;
+            stateRef.current.dividerVisible =
+                showDivider === 'always' || (showDivider === 'with-scroll' && isNotScrolledToEnd);
+            if (stateRef.current.dividerVisible !== prevDividerVisible) {
+                dividerRef.current.classList.toggle(styles.dividerVisible, stateRef.current.dividerVisible);
+            }
+        }
+        if (grabberRef.current !== null) {
+            const prevGrabberUnsafe = stateRef.current.grabberUnsafe;
+            stateRef.current.grabberUnsafe =
+                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);
+            }
+        }
+    }, [hasTouchSupport, showDivider]);
+    // терминология: https://developer.chrome.com/blog/viewport-resize-behavior/
+    //
+    // при открытии виртуальной клавиатуры браузеры двигают Visual Viewport и Layout Viewport
+    // с помощью двух отступов делаем так, чтобы overlay боттомшита совпадал с видимой частью экрана
     const recalcKeyboardOffsets = useCallback(() => {
-        if (!overlayRef.current || !visualViewport) {
+        if (!hasTouchSupport || !contentRef.current || !overlayRef.current || !visualViewport) {
             return;
         }
+        LayoutMetrics.current.invalidateCache();
         if (stateRef.current.hasFocus && focusedElementRef.current !== null) {
-            // терминология: https://developer.chrome.com/blog/viewport-resize-behavior/
-            //
-            // делим браузеры на три группы в зависимости от поведения при открытии виртуальной клавиатуры:
-            // 1. Safari — ресайзит Visual Viewport, не меняет Layout Viewport.
-            //    В нем не нужно ничего корректировать при keyboardOverlaysContent=true,
-            //    а при keyboardOverlaysContent=false нужно сдвинуть НИЖНИЙ край контейнера ВВЕРХ,
-            //    чтобы он совпал с границей Visual Viewport
-            // 2. Chrome < 108 & Chromium-based — ресайзит и Visual Viewport, и Layout Viewport.
-            //    В нем не нужно ничего корректировать при keyboardOverlaysContent=false,
-            //    а при keyboardOverlaysContent=true нужно сдвинуть НИЖНИЙ край контейнера ВНИЗ,
-            //    чтобы футер уехал под клавиатуру
-            // 3. Chrome >= 108 — поддерживает Virtual Keyboard API и meta-тег interactive-widget.
-            //    Используем поведение `resizes-visual` (как в Safari) в случае keyboardOverlaysContent=true
-            //    и `resizes-content` (как в Chrome < 108 & Chromium-based) в случае keyboardOverlaysContent=false
-            //    Таким образом в нем ничего не нужно корректировать
             const overlayDOMRect = overlayRef.current.getBoundingClientRect();
             // любой браузер может сдвинуть Visual Viewport вверх, если фокусируемый инпут находится близко к нижней границе
             // из-за этого может возникнуть проблема, что ВЕРХНИЙ край контента уехал за границу Visual Viewport
             // сдвигаем ВЕРХНИЙ край контейнера ВНИЗ, чтобы он совпал с границей Visual Viewport
-            const visualViewportShift = Math.round(-overlayDOMRect.top);
-            // keyboardOverlaysContent=true, клавиатура ПОВЕРХ контента
-            // этот кейс нужно корректировать только в Chrome < 108 & Chromium-based
-            if (keyboardOverlaysContent) {
-                // браузеры из этой группы меняют Layout Viewport
-                const layoutViewportDiff = Math.round(DOCUMENT_HEIGHT.current - document.documentElement.clientHeight);
-                setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
-                if (layoutViewportDiff > 0) {
-                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
-                    // сдвигаем НИЖНИЙ край контейнера ВНИЗ, чтобы футер уехал под клавиатуру
-                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${-layoutViewportDiff}px`);
-                    // при этом может возникнуть проблема, что клавиатура перекрыла инпут
-                    // проверяем это и компенсируем величину перекрытия при необходимости
-                    const focusedElementOutOfViewportHeight = Math.round(focusedElementRef.current.getBoundingClientRect().bottom +
-                        layoutViewportDiff -
-                        DOCUMENT_HEIGHT.current);
-                    if (focusedElementOutOfViewportHeight > 0) {
-                        setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${focusedElementOutOfViewportHeight - layoutViewportDiff}px`);
-                    }
-                }
-            }
-            // keyboardOverlaysContent=false, клавиатура ПОД контентом
-            // этот кейс нужно корректировать только в Safari
-            if (!keyboardOverlaysContent && deviceFlagsRef.current.isSafari) {
+            const topOffset = Math.round(-overlayDOMRect.top);
+            let bottomOffset = 0;
+            if (isSafari) {
                 const visualViewportDiff = Math.round(overlayDOMRect.bottom - visualViewport.height);
-                setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
                 if (visualViewportDiff > 0) {
                     // сдвигаем НИЖНИЙ край контейнера ВВЕРХ, чтобы он совпал с границей Visual Viewport
-                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${visualViewportDiff}px`);
+                    bottomOffset = visualViewportDiff;
                 }
             }
+            if (keyboardOverlaysFooter && footerRef.current !== null) {
+                bottomOffset -= footerRef.current.clientHeight;
+            }
+            if (topOffset !== virtualKeyboardOffsetsRef.current.top ||
+                bottomOffset !== virtualKeyboardOffsetsRef.current.bottom) {
+                setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${topOffset}px`);
+                setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${bottomOffset}px`);
+            }
+            LayoutMetrics.current.invalidateCache();
+            // если фокусируемый элемент лежит внутри скроллящегося контейнера и не виден, скроллим к нему
+            if (contentRef.current.contains(focusedElementRef.current)) {
+                let focusedElementOffset = 0;
+                for (let offsetElement = focusedElementRef.current.closest('[data-interactive]') ?? focusedElementRef.current; offsetElement !== contentRef.current && offsetElement !== null; offsetElement = offsetElement.offsetParent) {
+                    focusedElementOffset += offsetElement.offsetTop;
+                }
+                const newScrollOffset = -Math.min(Math.max(focusedElementOffset - 10, 0), LayoutMetrics.current.maxScrollTop);
+                if (stateRef.current.scrollOffset !== newScrollOffset) {
+                    stateRef.current.scrollOffset = newScrollOffset;
+                    contentRef.current.style.transform = translateY(stateRef.current.scrollOffset);
+                    scrollContextProviderRef.current?.notify({
+                        scrollTop: -stateRef.current.scrollOffset,
+                        maxScrollTop: LayoutMetrics.current.maxScrollTop,
+                    });
+                }
+            }
+            recalcScrollFlags();
+            virtualKeyboardOffsetsRef.current.top = topOffset;
+            virtualKeyboardOffsetsRef.current.bottom = bottomOffset;
         }
         else {
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
             setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
+            LayoutMetrics.current.invalidateCache();
+            fixOverscroll();
+            recalcScrollFlags();
+            virtualKeyboardOffsetsRef.current.top = 0;
+            virtualKeyboardOffsetsRef.current.bottom = 0;
         }
-    }, [keyboardOverlaysContent]);
+    }, [fixOverscroll, hasTouchSupport, isSafari, keyboardOverlaysFooter, recalcScrollFlags]);
     const handleFocus = useCallback((event) => {
         const focusedElement = event.target;
         const initialViewportHeight = visualViewport?.height;
@@ -301,6 +372,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             recalcKeyboardOffsets();
             if (!stateRef.current.hasFocus) {
                 visualViewport?.removeEventListener('resize', handleResize);
+                visualViewport?.removeEventListener('scroll', handleResize);
             }
         };
         // если спамить фокус/блюр инпута, ивент visualViewport.resize может не долететь
@@ -308,6 +380,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         const waitForResize = () => {
             if (performance.now() - resizeRAFStart > 1000 || visualViewport?.height !== initialViewportHeight) {
                 visualViewport?.removeEventListener('resize', handleResize);
+                visualViewport?.removeEventListener('scroll', handleResize);
                 stateRef.current.resizeRAFHandle = null;
                 recalcKeyboardOffsets();
             }
@@ -316,10 +389,6 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             }
         };
         const handleBlur = () => {
-            if (deviceFlagsRef.current.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);
@@ -327,13 +396,22 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             }
             focusedElement.removeEventListener('blur', handleBlur);
             focusedElementRef.current = null;
+            if (isSafari) {
+                recalcKeyboardOffsets();
+            }
         };
         stateRef.current.hasFocus = true;
         stateRef.current.resizeRAFHandle = requestAnimationFrame(waitForResize);
         visualViewport?.addEventListener('resize', handleResize);
+        // событие scroll может прилететь, только если браузер сдвинул вьюпорт из-за появления виртуальной клавиатуры
+        // пользовательский скролл не вызывает событие scroll, т.к. нативный скролл отключен
+        // в Safari событие resize может прилететь до того как браузер сдвинул вьюпорт, поэтому слушаем scroll
+        if (isSafari) {
+            visualViewport?.addEventListener('scroll', handleResize);
+        }
         focusedElement.addEventListener('blur', handleBlur);
         focusedElementRef.current = focusedElement;
-    }, [recalcKeyboardOffsets]);
+    }, [isSafari, recalcKeyboardOffsets]);
     // contentOverlay совпадает по границам с контентом боттомшита, но лежит вне боттомшита,
     // чтобы чайлды contentOverlay не обрезались границами боттомшита
     // например, снекбар, лежащий внутри contentOverlay, при смахивании может оказаться в любом месте экрана
@@ -346,29 +424,6 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             contentOverlayRef.current.style.height = `${LayoutMetrics.current.visibleContentHeight}px`;
         }
     }, []);
-    const recalcScrollFlags = useCallback(() => {
-        const scrollOffset = deviceFlagsRef.current.hasTouchSupport
-            ? stateRef.current.scrollOffset
-            : -(scrollContainerRef.current?.scrollTop ?? 0);
-        if (dividerRef.current !== null) {
-            const prevDividerVisible = stateRef.current.dividerVisible;
-            const isNotScrolledToEnd = LayoutMetrics.current.contentHeight + scrollOffset > LayoutMetrics.current.visibleContentHeight;
-            stateRef.current.dividerVisible =
-                showDivider === 'always' || (showDivider === 'with-scroll' && isNotScrolledToEnd);
-            if (stateRef.current.dividerVisible !== prevDividerVisible) {
-                dividerRef.current.classList.toggle(styles.dividerVisible, stateRef.current.dividerVisible);
-            }
-        }
-        if (grabberRef.current !== null) {
-            const prevGrabberUnsafe = stateRef.current.grabberUnsafe;
-            stateRef.current.grabberUnsafe =
-                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 setTransformToInvisible = useCallback(() => {
         LayoutMetrics.current.invalidateCache();
@@ -410,21 +465,6 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         stateRef.current.exitHandlers = [];
         onAfterExit?.();
     }, [onAfterExit]);
-    const resetScrollPosition = useCallback(() => {
-        if (deviceFlagsRef.current.hasTouchSupport) {
-            stateRef.current.scrollOffset = LayoutMetrics.current.initialOffset;
-            stateRef.current.swipeOffset = 0;
-            if (contentRef.current !== null) {
-                contentRef.current.style.transform = translateY(0);
-            }
-            if (swipeContainerRef.current !== null) {
-                swipeContainerRef.current.style.transform = translateY(LayoutMetrics.current.initialOffset);
-            }
-        }
-        else {
-            scrollContainerRef.current?.scrollTo({ top: 0 });
-        }
-    }, []);
     const handleHeightAnimationStart = useCallback(() => {
         LayoutMetrics.current.invalidateCache();
         if (stateRef.current.heightAnimationDiff !== null && visualContainerRef.current !== null) {
@@ -444,7 +484,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         requestAnimationFrame(recalcScrollFlags);
         scrollContextProviderRef.current?.notify({
             scrollTop: 0,
-            maxScrollTop: LayoutMetrics.current.contentHeight - LayoutMetrics.current.visibleContentHeight,
+            maxScrollTop: LayoutMetrics.current.maxScrollTop,
         });
     }, [setHeightAnimationRunning, recalcContentOverlayPosition, recalcScrollFlags]);
     const handleSwipeMove = useCallback((event) => {
@@ -555,7 +595,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                     recalcScrollFlags();
                     scrollContextProviderRef.current?.notify({
                         scrollTop: Math.max(-stateRef.current.scrollOffset, 0),
-                        maxScrollTop: LayoutMetrics.current.contentHeight - LayoutMetrics.current.visibleContentHeight,
+                        maxScrollTop: LayoutMetrics.current.maxScrollTop,
                     });
                 }
             }
@@ -565,7 +605,9 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             if ((!allowScrollWhileFocused && stateRef.current.hasFocus) ||
                 (stateRef.current.touchAction !== null && stateRef.current.touchAction !== 'scroll') ||
                 hasSelectedText() ||
-                (focusedElementRef.current !== null && focusedElementTouchY !== null)) {
+                (focusedElementRef.current !== null &&
+                    focusedElementTouchY !== null &&
+                    focusedElementRef.current.clientHeight !== focusedElementRef.current.scrollHeight)) {
                 return;
             }
             handleScroll(event.delta);
@@ -589,6 +631,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 focusedElementTouchY = null;
                 swipeHandlers.onTouchStart(event);
             }
+            visualContainer.classList.add(styles.noCaret);
         };
         const handleTouchMove = (event) => {
             event.preventDefault();
@@ -601,6 +644,14 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 swipeHandlers.onTouchMove(event);
             }
         };
+        const handleTouchEnd = (event) => {
+            swipeHandlers.onTouchEnd(event);
+            visualContainer.classList.remove(styles.noCaret);
+        };
+        const handleTouchCancel = (event) => {
+            swipeHandlers.onTouchCancel(event);
+            visualContainer.classList.remove(styles.noCaret);
+        };
         const removeScrollHandlers = initScrollHandlers({
             axis: 'vertical',
             wrapperRef: visualContainerRef,
@@ -609,14 +660,14 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
         });
         visualContainer.addEventListener('touchstart', handleTouchStart);
         visualContainer.addEventListener('touchmove', handleTouchMove);
-        visualContainer.addEventListener('touchend', swipeHandlers.onTouchEnd);
-        visualContainer.addEventListener('touchcancel', swipeHandlers.onTouchCancel);
+        visualContainer.addEventListener('touchend', handleTouchEnd);
+        visualContainer.addEventListener('touchcancel', handleTouchCancel);
         return () => {
             removeScrollHandlers();
             visualContainer.removeEventListener('touchstart', handleTouchStart);
             visualContainer.removeEventListener('touchmove', handleTouchMove);
-            visualContainer.removeEventListener('touchend', swipeHandlers.onTouchEnd);
-            visualContainer.removeEventListener('touchcancel', swipeHandlers.onTouchCancel);
+            visualContainer.removeEventListener('touchend', handleTouchEnd);
+            visualContainer.removeEventListener('touchcancel', handleTouchCancel);
         };
     }, [allowScrollWhileFocused, recalcScrollFlags, swipeHandlers]);
     // при изменении высоты контента анимируем ее
@@ -668,20 +719,11 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 if (visibleContentHeightDiff !== 0) {
                     resetScrollPosition();
                 }
-                else if (deviceFlagsRef.current.hasTouchSupport) {
+                else {
                     // если высота видимой части контента не изменилась,
                     // но позиция скролла превысила максимально допустимую из-за уменьшения высоты контента,
                     // сбрасываем позицию скролла на максимально допустимую
-                    const isOverscrolled = LayoutMetrics.current.contentHeight + stateRef.current.scrollOffset <
-                        LayoutMetrics.current.visibleContentHeight;
-                    if (isOverscrolled) {
-                        stateRef.current.scrollOffset =
-                            LayoutMetrics.current.visibleContentHeight - LayoutMetrics.current.contentHeight;
-                        if (contentRef.current !== null) {
-                            contentRef.current.style.transform = translateY(stateRef.current.scrollOffset);
-                        }
-                        scrollContextProviderRef.current?.notify({ scrollTop: -stateRef.current.scrollOffset });
-                    }
+                    fixOverscroll();
                 }
                 const heightAnimationDiff = visibleContentHeightDiff + containersHeightDiff;
                 if (heightAnimationDiff !== 0) {
@@ -718,14 +760,20 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
             resizeObserver.disconnect();
             header !== null && header.removeHeightObserver(handleHeightChange);
         };
-    }, [setHeightAnimationRunning, recalcScrollFlags, recalcContentOverlayPosition, resetScrollPosition]);
+    }, [
+        fixOverscroll,
+        recalcContentOverlayPosition,
+        recalcScrollFlags,
+        resetScrollPosition,
+        setHeightAnimationRunning,
+    ]);
     const handleAppearAnimationEnd = useCallback(() => {
         const removeHeightObserver = initHeightObserver();
         removeHeightObserver && stateRef.current.exitHandlers.push(removeHeightObserver);
-        const removeTransformHandlers = deviceFlagsRef.current.hasTouchSupport && initTransformHandlers();
+        const removeTransformHandlers = hasTouchSupport && initTransformHandlers();
         removeTransformHandlers && stateRef.current.exitHandlers.push(removeTransformHandlers);
         onAppearRef.current?.();
-    }, [initHeightObserver, initTransformHandlers]);
+    }, [hasTouchSupport, initHeightObserver, initTransformHandlers]);
     const { onTouchEnd, ...eventHandlers } = useNoBubbling();
     if (!animationTimeout) {
         return null;
@@ -738,7 +786,7 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                 [styles.contentWithoutHeader]: !header,
                 [styles.contentSizedFullScreen]: isContentSizedFullHeight,
             }), ref: contentRef, children: jsx(BottomSheetContext.Provider, { value: bottomSheetContext, children: children }) }));
-        const scrollContainer = deviceFlagsRef.current.hasTouchSupport ? (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 scrollContainer = hasTouchSupport ? (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;
@@ -759,9 +807,9 @@ const BottomSheetRenderFunc = ({ allowScrollWhileFocused, children, footer, head
                                     [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 && deviceFlagsRef.current.hasTouchSupport ? (jsx(ClickInterceptor, { children: clonedFooter })) : (clonedFooter)] })] }), jsx("div", { className: styles.contentOverlay, ref: contentOverlayRef })] })] }) }));
+                                                }), ref: dividerRef, children: jsx(Divider, {}) })), interceptClickHandlers && hasTouchSupport ? (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);
+    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) })) }, `hasTouchSupport:${hasTouchSupport}`) }), document.body);
 };
 const BottomSheet = forwardRef(BottomSheetRenderFunc);