"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.useScrollLock = useScrollLock; var React = _interopRequireWildcard(require("react")); var _overlays = require("@react-aria/overlays"); var _detectBrowser = require("./detectBrowser"); var _owner = require("./owner"); var _useEnhancedEffect = require("./useEnhancedEffect"); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } let originalHtmlStyles = {}; let originalBodyStyles = {}; let originalHtmlScrollBehavior = ''; let preventScrollCount = 0; let restore = () => {}; function supportsDvh() { return typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('height', '1dvh'); } function hasInsetScrollbars(referenceElement) { if (typeof document === 'undefined') { return false; } const doc = (0, _owner.ownerDocument)(referenceElement); const win = (0, _owner.ownerWindow)(doc); return win.innerWidth - doc.documentElement.clientWidth > 0; } function preventScrollStandard(referenceElement) { const doc = (0, _owner.ownerDocument)(referenceElement); const html = doc.documentElement; const body = doc.body; const win = (0, _owner.ownerWindow)(html); let scrollTop = 0; let scrollLeft = 0; let resizeRaf = -1; // Pinch-zoom in Safari causes a shift. Just don't lock scroll if there's any pinch-zoom. if ((0, _detectBrowser.isWebKit)() && (win.visualViewport?.scale ?? 1) !== 1) { return () => {}; } function lockScroll() { const htmlStyles = win.getComputedStyle(html); const bodyStyles = win.getComputedStyle(body); scrollTop = html.scrollTop; scrollLeft = html.scrollLeft; originalHtmlStyles = { overflowY: html.style.overflowY, overflowX: html.style.overflowX }; originalHtmlScrollBehavior = html.style.scrollBehavior; originalBodyStyles = { position: body.style.position, height: body.style.height, width: body.style.width, boxSizing: body.style.boxSizing, overflowY: body.style.overflowY, overflowX: body.style.overflowX, scrollBehavior: body.style.scrollBehavior }; // Handle `scrollbar-gutter` in Chrome when there is no scrollable content. const hasScrollbarGutterStable = htmlStyles.scrollbarGutter?.includes('stable'); const isScrollableY = html.scrollHeight > html.clientHeight; const isScrollableX = html.scrollWidth > html.clientWidth; const hasConstantOverflowY = htmlStyles.overflowY === 'scroll' || bodyStyles.overflowY === 'scroll'; const hasConstantOverflowX = htmlStyles.overflowX === 'scroll' || bodyStyles.overflowX === 'scroll'; // Values can be negative in Firefox const scrollbarWidth = Math.max(0, win.innerWidth - html.clientWidth); const scrollbarHeight = Math.max(0, win.innerHeight - html.clientHeight); Object.assign(html.style, { overflowY: !hasScrollbarGutterStable && (isScrollableY || hasConstantOverflowY) ? 'scroll' : 'hidden', overflowX: !hasScrollbarGutterStable && (isScrollableX || hasConstantOverflowX) ? 'scroll' : 'hidden' }); // Avoid shift due to the default margin. This does cause elements to be clipped // with whitespace. Warn if has margins? const marginY = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom); const marginX = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight); Object.assign(body.style, { position: 'relative', height: marginY || scrollbarHeight ? `calc(100dvh - ${marginY + scrollbarHeight}px)` : '100dvh', width: marginX || scrollbarWidth ? `calc(100vw - ${marginX + scrollbarWidth}px)` : '100vw', boxSizing: 'border-box', overflow: 'hidden', scrollBehavior: 'unset' }); body.scrollTop = scrollTop; body.scrollLeft = scrollLeft; html.setAttribute('data-base-ui-scroll-locked', ''); html.style.scrollBehavior = 'unset'; } function cleanup() { Object.assign(html.style, originalHtmlStyles); Object.assign(body.style, originalBodyStyles); html.scrollTop = scrollTop; html.scrollLeft = scrollLeft; html.removeAttribute('data-base-ui-scroll-locked'); html.style.scrollBehavior = originalHtmlScrollBehavior; } function handleResize() { cleanup(); cancelAnimationFrame(resizeRaf); resizeRaf = requestAnimationFrame(lockScroll); } lockScroll(); win.addEventListener('resize', handleResize); return () => { cancelAnimationFrame(resizeRaf); cleanup(); win.removeEventListener('resize', handleResize); }; } /** * Locks the scroll of the document when enabled. * * @param enabled - Whether to enable the scroll lock. */ function useScrollLock(enabled = true, referenceElement) { const isReactAriaHook = React.useMemo(() => enabled && ((0, _detectBrowser.isIOS)() || !supportsDvh() || // macOS Firefox "pops" scroll containers' scrollbars with our standard scroll lock (0, _detectBrowser.isFirefox)() && !hasInsetScrollbars(referenceElement)), [enabled, referenceElement]); (0, _overlays.usePreventScroll)({ // react-aria will remove the scrollbar offset immediately upon close, since we use `open`, // not `mounted`, to disable/enable the scroll lock. However since there are no inset // scrollbars, no layouting issues occur. isDisabled: !isReactAriaHook }); (0, _useEnhancedEffect.useEnhancedEffect)(() => { if (!enabled || isReactAriaHook) { return undefined; } preventScrollCount += 1; if (preventScrollCount === 1) { restore = preventScrollStandard(referenceElement); } return () => { preventScrollCount -= 1; if (preventScrollCount === 0) { restore(); } }; }, [enabled, isReactAriaHook, referenceElement]); }