@uxf/core 10.0.0-beta.28 → 10.0.0-beta.35

package/hooks/useBodyScrollLock.d.ts

@@ -1,4 +1,4 @@
-import { BodyScrollOptions } from "body-scroll-lock";
+import { BodyScrollOptions } from "../utils/bodyScrollLock";
 import { RefObject } from "react";
 export interface UseBodyScrollLockOptions extends BodyScrollOptions {
     clearAllOnClose?: boolean;

package/hooks/useBodyScrollLock.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBodyScrollLock = void 0;
-const body_scroll_lock_1 = require("body-scroll-lock");
+const bodyScrollLock_1 = require("../utils/bodyScrollLock");
 const react_1 = require("react");
 function useBodyScrollLock(containerRef, isOpen, { allowTouchMove, clearAllOnClose, reserveScrollBarGap } = {}) {
     (0, react_1.useEffect)(() => {
         const node = containerRef.current;
         if (isOpen && node) {
-            (0, body_scroll_lock_1.disableBodyScroll)(node, {
+            (0, bodyScrollLock_1.disableBodyScroll)(node, {
                 allowTouchMove: allowTouchMove ||
                     ((element) => {
                         var _a;
@@ -24,10 +24,10 @@ function useBodyScrollLock(containerRef, isOpen, { allowTouchMove, clearAllOnClo
         }
         return () => {
             if (node) {
-                (0, body_scroll_lock_1.enableBodyScroll)(node);
+                (0, bodyScrollLock_1.enableBodyScroll)(node);
             }
             if (clearAllOnClose) {
-                (0, body_scroll_lock_1.clearAllBodyScrollLocks)();
+                (0, bodyScrollLock_1.clearAllBodyScrollLocks)();
             }
         };
     }, [allowTouchMove, clearAllOnClose, containerRef, isOpen, reserveScrollBarGap]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/core",
-  "version": "10.0.0-beta.28",
+  "version": "10.0.0-beta.35",
   "description": "UXF Core",
   "author": "Petr Vejvoda <vejvoda@uxf.cz>",
   "homepage": "https://gitlab.com/uxf-npm/core#readme",
@@ -25,16 +25,13 @@
     "url": "https://gitlab.com/uxf-npm/core/issues"
   },
   "devDependencies": {
-    "@types/body-scroll-lock": "^3.1.0",
     "@types/jest": "^27.4.0",
     "@types/react": "^18.2.6",
-    "body-scroll-lock": "^4.0.0-beta.0",
     "jest": "^27.4.5",
     "react": "^18.2.0",
     "ts-jest": "^27.1.2"
   },
   "peerDependencies": {
-    "body-scroll-lock": "^4.0.0-beta.0",
     "react": "^17.0.0 || ^18.0.0"
   },
   "gitHead": "a2dee6aa67621f6eda17e63e88d0edf14f88455a"

package/utils/bodyScrollLock.d.ts

@@ -0,0 +1,7 @@
+export interface BodyScrollOptions {
+    reserveScrollBarGap?: boolean;
+    allowTouchMove?: (el: any) => boolean;
+}
+export declare const disableBodyScroll: (targetElement: any, options?: BodyScrollOptions) => void;
+export declare const clearAllBodyScrollLocks: () => void;
+export declare const enableBodyScroll: (targetElement: any) => void;

package/utils/bodyScrollLock.js

@@ -0,0 +1,224 @@
+"use strict";
+// Forked from "body-scroll-lock" https://github.com/willmcpo/body-scroll-lock
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enableBodyScroll = exports.clearAllBodyScrollLocks = exports.disableBodyScroll = void 0;
+function noop() {
+    return void null;
+}
+// Older browsers don't support event options, feature detect it.
+let hasPassiveEvents = false;
+if (typeof window !== "undefined") {
+    const passiveTestOptions = {
+        get passive() {
+            hasPassiveEvents = true;
+            return undefined;
+        },
+    };
+    window.addEventListener("testPassive", noop, passiveTestOptions);
+    window.removeEventListener("testPassive", noop);
+}
+const isIosDevice = typeof window !== "undefined" &&
+    typeof window.navigator !== "undefined" &&
+    typeof window.navigator.platform !== "undefined" &&
+    (/iP(ad|hone|od)/.test(window.navigator.platform) ||
+        (window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1));
+let locks = [];
+let documentListenerAdded = false;
+let initialClientY = -1;
+let previousBodyOverflowSetting;
+let previousBodyPosition;
+let previousBodyPaddingRight;
+// returns true if `el` should be allowed to receive touchmove events.
+const allowTouchMove = (el) => locks.some((lock) => !!(lock.options.allowTouchMove && lock.options.allowTouchMove(el)));
+const preventDefault = (rawEvent) => {
+    const e = typeof rawEvent !== "undefined" ? rawEvent : window.event;
+    // For the case whereby consumers adds a touchmove event listener to document.
+    // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+    // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+    // the touchmove event on document will break.
+    if ((e === null || e === void 0 ? void 0 : e.target) && allowTouchMove(e.target)) {
+        return true;
+    }
+    // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+    if ((e === null || e === void 0 ? void 0 : e.touches.length) > 1) {
+        return true;
+    }
+    if (e === null || e === void 0 ? void 0 : e.preventDefault) {
+        e.preventDefault();
+    }
+    return false;
+};
+const setOverflowHidden = (options) => {
+    // If previousBodyPaddingRight is already set, don't set it again.
+    if (previousBodyPaddingRight === undefined) {
+        const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+        const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+        if (reserveScrollBarGap && scrollBarGap > 0) {
+            const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
+            previousBodyPaddingRight = document.body.style.paddingRight;
+            document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+        }
+    }
+    // If previousBodyOverflowSetting is already set, don't set it again.
+    if (previousBodyOverflowSetting === undefined) {
+        previousBodyOverflowSetting = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+    }
+};
+const restoreOverflowSetting = () => {
+    if (previousBodyPaddingRight !== undefined) {
+        document.body.style.paddingRight = previousBodyPaddingRight;
+        // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+        // can be set again.
+        previousBodyPaddingRight = undefined;
+    }
+    if (previousBodyOverflowSetting !== undefined) {
+        document.body.style.overflow = previousBodyOverflowSetting;
+        // Restore previousBodyOverflowSetting to undefined
+        // so setOverflowHidden knows it can be set again.
+        previousBodyOverflowSetting = undefined;
+    }
+};
+const setPositionFixed = () => window.requestAnimationFrame(() => {
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === undefined) {
+        previousBodyPosition = {
+            position: document.body.style.position,
+            top: document.body.style.top,
+            left: document.body.style.left,
+        };
+        // Update the dom inside an animation frame
+        const { scrollY, scrollX, innerHeight } = window;
+        document.body.style.position = "fixed";
+        document.body.style.top = `${-scrollY}px`;
+        document.body.style.left = `${-scrollX}px`;
+        setTimeout(() => window.requestAnimationFrame(() => {
+            // Attempt to check if the bottom bar appeared due to the position change
+            const bottomBarHeight = innerHeight - window.innerHeight;
+            if (bottomBarHeight && scrollY >= innerHeight) {
+                // Move the content further up so that the bottom bar doesn't hide it
+                document.body.style.top = `${-(scrollY + bottomBarHeight)}px`;
+            }
+        }), 300);
+    }
+});
+const restorePositionSetting = () => {
+    if (previousBodyPosition !== undefined) {
+        // Convert the position from "px" to Int
+        const y = -parseInt(document.body.style.top, 10);
+        const x = -parseInt(document.body.style.left, 10);
+        // Restore styles
+        document.body.style.position = previousBodyPosition.position;
+        document.body.style.top = previousBodyPosition.top;
+        document.body.style.left = previousBodyPosition.left;
+        // Restore scroll
+        window.scrollTo(x, y);
+        previousBodyPosition = undefined;
+    }
+};
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+const isTargetElementTotallyScrolled = (targetElement) => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+const handleScroll = (event, targetElement) => {
+    const clientY = event.targetTouches[0].clientY - initialClientY;
+    if (event.target && allowTouchMove(event.target)) {
+        return false;
+    }
+    if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+        // element is at the top of its scroll.
+        return preventDefault(event);
+    }
+    if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+        // element is at the bottom of its scroll.
+        return preventDefault(event);
+    }
+    event.stopPropagation();
+    return true;
+};
+const disableBodyScroll = (targetElement, options) => {
+    // targetElement must be provided
+    if (!targetElement) {
+        // eslint-disable-next-line no-console
+        console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
+        return;
+    }
+    // disableBodyScroll must not have been called on this targetElement before
+    if (locks.some((lock) => lock.targetElement === targetElement)) {
+        return;
+    }
+    const lock = {
+        targetElement,
+        options: options || {},
+    };
+    locks = [...locks, lock];
+    if (isIosDevice) {
+        setPositionFixed();
+    }
+    else {
+        setOverflowHidden(options);
+    }
+    if (isIosDevice) {
+        targetElement.ontouchstart = (event) => {
+            if (event.targetTouches.length === 1) {
+                // detect single touch.
+                initialClientY = event.targetTouches[0].clientY;
+            }
+        };
+        targetElement.ontouchmove = (event) => {
+            if (event.targetTouches.length === 1) {
+                // detect single touch.
+                handleScroll(event, targetElement);
+            }
+        };
+        if (!documentListenerAdded) {
+            document.addEventListener("touchmove", preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+            documentListenerAdded = true;
+        }
+    }
+};
+exports.disableBodyScroll = disableBodyScroll;
+const clearAllBodyScrollLocks = () => {
+    if (isIosDevice) {
+        // Clear all locks ontouchstart/ontouchmove handlers, and the references.
+        locks.forEach((lock) => {
+            lock.targetElement.ontouchstart = null;
+            lock.targetElement.ontouchmove = null;
+        });
+        if (documentListenerAdded) {
+            document.removeEventListener("touchmove", preventDefault);
+            documentListenerAdded = false;
+        }
+        // Reset initial clientY.
+        initialClientY = -1;
+    }
+    if (isIosDevice) {
+        restorePositionSetting();
+    }
+    else {
+        restoreOverflowSetting();
+    }
+    locks = [];
+};
+exports.clearAllBodyScrollLocks = clearAllBodyScrollLocks;
+const enableBodyScroll = (targetElement) => {
+    if (!targetElement) {
+        // eslint-disable-next-line no-console
+        console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
+        return;
+    }
+    locks = locks.filter((lock) => lock.targetElement !== targetElement);
+    if (isIosDevice) {
+        targetElement.ontouchstart = null;
+        targetElement.ontouchmove = null;
+        if (documentListenerAdded && locks.length === 0) {
+            document.removeEventListener("touchmove", preventDefault);
+            documentListenerAdded = false;
+        }
+    }
+    if (isIosDevice) {
+        restorePositionSetting();
+    }
+    else {
+        restoreOverflowSetting();
+    }
+};
+exports.enableBodyScroll = enableBodyScroll;