@hh.ru/magritte-ui-bottom-sheet 4.1.22

package/BottomSheet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BottomSheetProps } from './types';
+export declare const BottomSheet: import("react").ForwardRefExoticComponent<BottomSheetProps & import("react").RefAttributes<HTMLElement>>;

package/BottomSheet.js

@@ -0,0 +1,549 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } 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 { useSwipe } from '@hh.ru/magritte-common-use-swipe';
+import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
+import { BottomSheetContext } from './BottomSheetContext.js';
+import { ClickInterceptor } from './ClickInterceptor.js';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { Divider } from '@hh.ru/magritte-ui-divider';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+import { NavigationBarContext } from '@hh.ru/magritte-ui-navigation-bar';
+import { s as styles } from './bottom-sheet-32fa90fb.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 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 BottomSheet = forwardRef(({ 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 contentRef = useRef(null);
+    const contentOverlayRef = useRef(null);
+    const cssVariablesContainerRef = useRef(null);
+    const fixedGrabberRef = useRef(null);
+    const footerRef = useRef(null);
+    const headerRef = useRef(null);
+    const heightTransitionElementRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const stickyGrabberRef = useRef(null);
+    const scrollContainerRefMulti = useMultipleRefs(scrollContainerRef, ref);
+    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 [animationTimeout, setAnimationTimeout] = useState(null);
+    const [heightDiff, setHeightDiff] = useState(null);
+    const [isDividerVisible, setDividerVisible] = useState(false);
+    const [onCloseContractCheck, setOnCloseContractCheck] = useState(false);
+    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;
+        if (!showOverlay) {
+            const enableOverscroll = disableOverscroll();
+            return enableOverscroll;
+        }
+        const enableScroll = disableScroll();
+        return enableScroll;
+    }, [showOverlay, currentVisible]);
+    useEffect(() => {
+        const animationTimeoutElement = document.createElement('div');
+        animationTimeoutElement.classList.add(styles.animationTimeout);
+        document.body.appendChild(animationTimeoutElement);
+        const style = window.getComputedStyle(animationTimeoutElement);
+        const enter = toNumber(style.getPropertyValue(CSS_VAR_ENTER_ANIMATION_DURATION));
+        const exit = toNumber(style.getPropertyValue(CSS_VAR_EXIT_ANIMATION_DURATION));
+        const height = toNumber(style.getPropertyValue(CSS_VAR_HEIGHT_ANIMATION_DURATION));
+        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 = ``;
+                }
+            }
+        });
+        // расчет того, нужно ли показывать дивайдер, в зависимости от того, проскроллен ли контент до конца
+        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));
+            }
+        }
+    }, [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);
+        }
+        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('=')))
+            : {});
+        attributes['interactive-widget'] = keyboardOverlaysContent ? 'resizes-visual' : 'resizes-content';
+        const attributesStrUpdated = Object.entries(attributes)
+            .map((keyValuePair) => keyValuePair.join('='))
+            .join(',');
+        meta.setAttribute('name', 'viewport');
+        meta.setAttribute('content', attributesStrUpdated);
+    }, [keyboardOverlaysContent]);
+    const recalcKeyboardOffsets = useCallback(() => {
+        if (!headerRef.current || !scrollContainerRef.current || !visualViewport) {
+            return;
+        }
+        if (stateRef.current.hasFocus) {
+            // терминология: 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 scrollContainerDOMREct = scrollContainerRef.current.getBoundingClientRect();
+            // любой браузер может сдвинуть Visual Viewport вверх, если фокусируемый инпут находится близко к нижней границе
+            // из-за этого может возникнуть проблема, что ВЕРХНИЙ край контента уехал за границу Visual Viewport
+            // сдвигаем ВЕРХНИЙ край контейнера ВНИЗ, чтобы он совпал с границей Visual Viewport
+            const visualViewportShift = Math.round(layoutMetricsRef.current.grabberSpacing - scrollContainerDOMREct.top);
+            // запоминаем сдвиг для коррекции позиции граббера
+            layoutMetricsRef.current.viewportShift = visualViewportShift;
+            // клавиатура ПОВЕРХ контента
+            // этот кейс нужно корректировать только в Chrome < 108 & Chromium-based
+            if (keyboardOverlaysContent) {
+                // браузеры из этой группы меняют Layout Viewport
+                const layoutViewportDiff = Math.round(layoutMetricsRef.current.documentHeight - document.documentElement.clientHeight);
+                if (layoutViewportDiff > 0) {
+                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
+                    // сдвигаем НИЖНИЙ край контейнера ВНИЗ, чтобы футер уехал под клавиатуру
+                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${-layoutViewportDiff}px`);
+                    // при этом может возникнуть проблема, что клавиатура перекрыла хедер
+                    // проверяем это и компенсируем величину перекрытия при необходимости
+                    const headerDOMRect = headerRef.current.getBoundingClientRect();
+                    const headerOutOfViewportHeight = Math.round(headerDOMRect.bottom + layoutViewportDiff - layoutMetricsRef.current.documentHeight);
+                    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);
+                if (visualViewportDiff > 0) {
+                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `${visualViewportShift}px`);
+                    // сдвигаем НИЖНИЙ край контейнера ВВЕРХ, чтобы он совпал с границей Visual Viewport
+                    setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `${visualViewportDiff}px`);
+                }
+            }
+        }
+        else {
+            setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
+            setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
+        }
+    }, [keyboardOverlaysContent]);
+    const handleFocus = useCallback((event) => {
+        if (!scrollContainerRef.current) {
+            return;
+        }
+        const focusedElement = event.target;
+        const initialViewportHeight = visualViewport?.height;
+        const resizeRAFStart = performance.now();
+        if (!(focusedElement instanceof HTMLInputElement) || stateRef.current.resizeRAFHandle !== null) {
+            return;
+        }
+        const handleResize = () => {
+            if (stateRef.current.resizeRAFHandle !== null) {
+                cancelAnimationFrame(stateRef.current.resizeRAFHandle);
+                stateRef.current.resizeRAFHandle = null;
+            }
+            recalcKeyboardOffsets();
+        };
+        const waitForResize = () => {
+            if (performance.now() - resizeRAFStart > 1000 || visualViewport?.height !== initialViewportHeight) {
+                visualViewport?.removeEventListener('resize', handleResize);
+                stateRef.current.resizeRAFHandle = null;
+                recalcKeyboardOffsets();
+            }
+            else {
+                stateRef.current.resizeRAFHandle = requestAnimationFrame(waitForResize);
+            }
+        };
+        const handleBlur = () => {
+            if (!scrollContainerRef.current) {
+                return;
+            }
+            focusedElement.removeEventListener('blur', handleBlur);
+            stateRef.current.hasFocus = false;
+            scrollContainerRef.current.classList.remove(styles.scrollContainerNoScroll, styles.virtualKeyboardAnimation);
+            if (isSafari) {
+                setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_TOP_OFFSET, `0px`);
+                setCSSVariable(CSS_VAR_VIRTUAL_KEYBOARD_BOTTOM_OFFSET, `0px`);
+            }
+            if (stateRef.current.resizeRAFHandle !== null) {
+                cancelAnimationFrame(stateRef.current.resizeRAFHandle);
+                stateRef.current.resizeRAFHandle = null;
+            }
+            visualViewport?.removeEventListener('resize', handleResize);
+        };
+        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;
+        }
+        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)`;
+            }
+            else {
+                heightTransitionElementRef.current.style.flexBasis = `${-heightDiff}px`;
+            }
+        }
+        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`);
+        }
+        forceRepaint(scrollContainerRef.current);
+    }, [heightDiff]);
+    const resetTranslateY = useCallback(() => {
+        if (!contentRef.current ||
+            !contentOverlayRef.current ||
+            !footerRef.current ||
+            !heightTransitionElementRef.current ||
+            !scrollContainerRef.current) {
+            return;
+        }
+        if (heightDiff !== null) {
+            contentRef.current.style.transform = ``;
+            contentOverlayRef.current.style.transform = ``;
+            footerRef.current.style.transform = ``;
+            heightTransitionElementRef.current.style.flexBasis = ``;
+        }
+        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`);
+        }
+        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]);
+    const handleExitAnimationStart = useCallback(() => {
+        resetTranslateY();
+        onBeforeExit?.();
+    }, [resetTranslateY, 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);
+        onAfterExit?.();
+    }, [resetScrollFlags, setOnCloseContractCheck, onAfterExit, allowScrollWhileFocused]);
+    const handleClose = useCallback(() => {
+        onClose();
+        setOnCloseContractCheck(true);
+    }, [onClose, setOnCloseContractCheck]);
+    const handleSwipeStart = useCallback(() => {
+        if (!scrollContainerRef.current) {
+            return;
+        }
+        if (Object.is(Math.round(scrollContainerRef.current.scrollTop), 0)) {
+            stateRef.current.isSwipeEnabled = true;
+            stateRef.current.swipeOffset = 0;
+        }
+    }, []);
+    const handleSwipeMove = useCallback((event) => {
+        if (!contentRef.current ||
+            !contentOverlayRef.current ||
+            !stateRef.current.isSwipeEnabled ||
+            !scrollContainerRef.current) {
+            return;
+        }
+        const selection = document.getSelection();
+        if (selection && !selection.isCollapsed) {
+            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);
+            }
+            recalcScrollFlags();
+        }
+        else {
+            contentRef.current.style.transform = ``;
+            contentOverlayRef.current.style.transform = ``;
+            stateRef.current.isSwipeEnabled = false;
+            changeSwipeProgressState(stateRef, scrollContainerRef, false, !!allowScrollWhileFocused);
+        }
+        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 = ``;
+        }
+        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();
+        }
+        else {
+            handleSwipeCancel(event);
+        }
+    }, [handleClose, handleSwipeCancel]);
+    const { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel } = useSwipe({
+        thresholdYRef: SWIPE_THRESHOLD_REF,
+        onSwipeStart: handleSwipeStart,
+        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;
+        }
+        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`);
+            }
+            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);
+                }
+                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]);
+    if (!animationTimeout) {
+        return null;
+    }
+    const renderFunc = (appearTransition, heightTransition) => (jsx(Layer, { layer: InternalLayerName.BottomSheet, children: jsxs("div", { className: classnames(styles.overlay, {
+                [styles.overlayInvisible]: !showOverlay || (showOverlay && appearTransition !== 'exiting' && !currentVisible),
+            }), "data-qa": "bottom-sheet-overlay", children: [jsx("div", { className: classnames(styles.overlayBackground, {
+                        [styles.appearAnimation]: appearTransition === 'entering',
+                        [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',
+                                [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);
+});
+BottomSheet.displayName = 'BottomSheet';
+
+export { BottomSheet };
+//# sourceMappingURL=BottomSheet.js.map