@loomhq/lens 10.63.10 → 10.64.0

package/dist/components/modal/modal.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import FocusTrap from 'focus-trap-react';
 import { getColorValue, getPlacement, getRadius, getShadow, getSize, getSizeValue, u, } from '../../utilities';
 import React, { useEffect } from 'react';
+import { usePreventScroll } from '../../hooks/use-prevent-scroll';
 import Backdrop from '../backdrop/backdrop';
 import Container from '../container/container';
 import IconButton from '../icon-button/icon-button';
@@ -111,9 +112,6 @@ export const ModalCard = (_a) => {
     // TODO: LNS-151: Abstract into useKeyDown hook for reuse
     var { children, onCloseClick, isOpen, maxWidth = 60, maxHeight = '70vh', placement = 'center', ariaLabel, ref } = _a, props = __rest(_a, ["children", "onCloseClick", "isOpen", "maxWidth", "maxHeight", "placement", "ariaLabel", "ref"]);
     useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
         const keyListener = e => {
             if (e.key === 'Escape') {
                 e.preventDefault();
@@ -125,6 +123,7 @@ export const ModalCard = (_a) => {
             window.removeEventListener('keydown', keyListener);
         };
     }, [isOpen, onCloseClick]);
+    usePreventScroll('body', isOpen);
     return (React.createElement(FocusTrap, { active: isOpen, focusTrapOptions: {
             clickOutsideDeactivates: false,
             allowOutsideClick: true,

package/dist/hooks/index.js

@@ -1,3 +1,4 @@
 export { default as useMedia } from './use-media.js';
 export { default as useOnClickOutside } from './use-on-click-outside.js';
 export { default as useFocusedElement } from './use-focused-element';
+export { default as usePreventScroll } from './use-prevent-scroll';

package/dist/hooks/use-prevent-scroll.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Usage:
+ * usePreventScroll(<level>, <boolean-condition>);
+ *
+ * `level` allows you to control whether the styles
+ * are passed to html or body, whichever level makes more sense
+ * for your application.
+ **/
+export declare function usePreventScroll(level: 'body' | 'html', enabled?: boolean): void;

package/dist/hooks/use-prevent-scroll.js

@@ -0,0 +1,72 @@
+import { useLayoutEffect } from 'react';
+/**
+ * Usage:
+ * usePreventScroll(<level>, <boolean-condition>);
+ *
+ * `level` allows you to control whether the styles
+ * are passed to html or body, whichever level makes more sense
+ * for your application.
+ **/
+export function usePreventScroll(level, enabled) {
+    const safeDocument = document;
+    useLayoutEffect(() => {
+        const html = safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.documentElement;
+        const body = safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.body;
+        if (safeDocument == undefined || !html || !body) {
+            return;
+        }
+        if (enabled) {
+            // Add styles if enabled
+            const scrollBarWidth = window.innerWidth - html.clientWidth;
+            const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue('padding-right'), 
+            /* Force radixValue to be base-10 system to avoid errors:
+             * https://stackoverflow.com/questions/6611824/why-do-we-need-to-use-radix-parameter-when-calling-parseint
+             */
+            10) || 0;
+            /**
+             * [1] iOS and desktop Safari bug: Requires position to make `overflow: hidden`
+             * prevent scrolling.
+             * [2] Desktop Safari bug: Must override overflow in both directions
+             * since `overflowY` won't prevent scroll if `overflowX` is applied.
+             * [3] paddingRight takes into account scrollbars by running a check.
+             **/
+            switch (level) {
+                case 'html': {
+                    html.style.position = 'relative'; /* [1] */
+                    html.style.overflow = 'hidden'; /* [2] */
+                    body.style.paddingRight = `${bodyPaddingRight +
+                        scrollBarWidth}px`; /* [3] */
+                    break;
+                }
+                case 'body': {
+                    body.style.setProperty('position', 'relative'); /* [1] */
+                    body.style.setProperty('overflow', 'hidden'); /* [2] */
+                    body.style.setProperty('padding-right', `${bodyPaddingRight + scrollBarWidth}px`); /* [3] */
+                    break;
+                }
+                default:
+                    return;
+            }
+        }
+        return () => {
+            switch (level) {
+                case 'html': {
+                    // TODO(LNS-221): Preserve previous style states rather than resetting to empty values for more robust utility
+                    html.style.position = ''; /* [1] */
+                    html.style.overflow = ''; /* [2] */
+                    body.style.paddingRight = ''; /* [3] */
+                    break;
+                }
+                case 'body': {
+                    body.style.removeProperty('position'); /* [1] */
+                    body.style.removeProperty('overflow'); /* [2] */
+                    body.style.removeProperty('padding-right'); /* [3] */
+                    break;
+                }
+                default:
+                    return;
+            }
+        };
+        // TODO(LNS-215): Clear styles on return to make utility more extendable for other uses
+    }, [safeDocument, enabled, level]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.63.10",
+  "version": "10.64.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",