@redocly/theme/lib/core/hooks/use-modal-scroll-lock.js

Shared UI components lib

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useModalScrollLock = useModalScrollLock;
const react_1 = require("react");
function useModalScrollLock(isOpen) {
    (0, react_1.useEffect)(() => {
        if (typeof window === 'undefined' || typeof document === 'undefined') {
            return;
        }
        const { body, documentElement } = document;
        const originalOverflow = body.style.overflow;
        const originalPaddingRight = body.style.paddingRight;
        const originalScrollbarWidth = documentElement.style.getPropertyValue('--modal-scrollbar-width');
        const restoreScrollState = () => {
            body.style.overflow = originalOverflow;
            body.style.paddingRight = originalPaddingRight;
            if (originalScrollbarWidth) {
                documentElement.style.setProperty('--modal-scrollbar-width', originalScrollbarWidth);
            }
            else {
                documentElement.style.removeProperty('--modal-scrollbar-width');
            }
        };
        if (isOpen) {
            const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
            body.style.overflow = 'hidden';
            if (scrollbarWidth > 0) {
                body.style.paddingRight = `${scrollbarWidth}px`;
                documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
            }
        }
        return () => {
            restoreScrollState();
        };
    }, [isOpen]);
}
//# sourceMappingURL=use-modal-scroll-lock.js.map