@loomhq/lens 10.63.9 → 10.64.0

package/dist/components/icon/available-icons/watch-later-add.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 function SvgWatchLaterAdd(props) {
     return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 4C7.73478 4 7.48043 4.10536 7.29289 4.29289C7.10536 4.48043 7 4.73478 7 5V19.0568L12.4188 15.1863C12.7665 14.9379 13.2335 14.9379 13.5812 15.1863L19 19.0568V5C19 4.73478 18.8946 4.48043 18.7071 4.29289C18.5196 4.10536 18.2652 4 18 4H8ZM5.87868 2.87868C6.44129 2.31607 7.20435 2 8 2H18C18.7956 2 19.5587 2.31607 20.1213 2.87868C20.6839 3.44129 21 4.20435 21 5V21C21 21.3746 20.7907 21.7178 20.4576 21.8892C20.1245 22.0606 19.7236 22.0315 19.4188 21.8137L13 17.2289L6.58124 21.8137C6.27642 22.0315 5.87549 22.0606 5.54242 21.8892C5.20935 21.7178 5 21.3746 5 21V5C5 4.20435 5.31607 3.44129 5.87868 2.87868ZM13 5C13.5523 5 14 5.44772 14 6V8H16C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10H14V12C14 12.5523 13.5523 13 13 13C12.4477 13 12 12.5523 12 12V10H10C9.44772 10 9 9.55228 9 9C9 8.44771 9.44772 8 10 8H12V6C12 5.44772 12.4477 5 13 5Z", fill: "currentColor" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 4C6.73478 4 6.48043 4.10536 6.29289 4.29289C6.10536 4.48043 6 4.73478 6 5V19.0568L11.4188 15.1863C11.7665 14.9379 12.2335 14.9379 12.5812 15.1863L18 19.0568V5C18 4.73478 17.8946 4.48043 17.7071 4.29289C17.5196 4.10536 17.2652 4 17 4H7ZM4.87868 2.87868C5.44129 2.31607 6.20435 2 7 2H17C17.7956 2 18.5587 2.31607 19.1213 2.87868C19.6839 3.44129 20 4.20435 20 5V21C20 21.3746 19.7907 21.7178 19.4576 21.8892C19.1245 22.0606 18.7236 22.0315 18.4188 21.8137L12 17.2289L5.58124 21.8137C5.27642 22.0315 4.87549 22.0606 4.54242 21.8892C4.20935 21.7178 4 21.3746 4 21V5C4 4.20435 4.31607 3.44129 4.87868 2.87868ZM12 5C12.5523 5 13 5.44772 13 6V8H15C15.5523 8 16 8.44772 16 9C16 9.55228 15.5523 10 15 10H13V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V10H9C8.44772 10 8 9.55228 8 9C8 8.44771 8.44772 8 9 8H11V6C11 5.44772 11.4477 5 12 5Z", fill: "currentColor" })));
 }
 export default SvgWatchLaterAdd;

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.9",
+  "version": "10.64.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",