@adamjanicki/ui 1.2.5 → 1.2.6

package/components/Layer/Layer.d.ts

@@ -36,6 +36,6 @@ type AnimatedLayerProps = LayerProps & {
         visibleClassName?: string;
     };
 };
-declare const Layer: ({ onClose, children, style, className, disableEscape, }: LayerProps) => JSX.Element;
+declare const Layer: (props: LayerProps) => JSX.Element;
 export declare const AnimatedLayer: ({ visibility, className, style, ...props }: AnimatedLayerProps) => JSX.Element;
 export default Layer;

package/components/Layer/Layer.js

@@ -24,9 +24,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import { classNames } from "../../utils/util";
-var Layer = function (_a) {
+var BaseLayer = function (_a) {
     var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b;
-    var _c = useScrollLock(), lock = _c.lock, unlock = _c.unlock;
     var focusRef = useFocusTrap(true);
     useEffect(function () {
         var handleEscape = function (event) {
@@ -41,10 +40,6 @@ var Layer = function (_a) {
                 document.removeEventListener("keydown", handleEscape);
         };
     }, [onClose, disableEscape]);
-    useEffect(function () {
-        lock();
-        return unlock;
-    }, [lock, unlock]);
     return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onClick: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onClick: function (e) {
@@ -54,18 +49,23 @@ var Layer = function (_a) {
             },
         }) }));
 };
+var Layer = function (props) {
+    // Lock and unlock on mount and unmount
+    useScrollLock();
+    return _jsx(BaseLayer, __assign({}, props));
+};
 var defaultInvisibleStyle = {
-    zIndex: -1,
+    visibility: "hidden",
     opacity: 0,
-    pointerEvents: "none",
-    userSelect: "none",
 };
 var defaultVisibleStyle = { opacity: 1 };
 export var AnimatedLayer = function (_a) {
     var visibility = _a.visibility, className = _a.className, _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["visibility", "className", "style"]);
     var visible = visibility.visible, _c = visibility.invisibleStyle, invisibleStyle = _c === void 0 ? defaultInvisibleStyle : _c, _d = visibility.visibleStyle, visibleStyle = _d === void 0 ? defaultVisibleStyle : _d, invisibleClassName = visibility.invisibleClassName, visibleClassName = visibility.visibleClassName;
+    // lock and unlock on visibility change
+    useScrollLock(visible);
     var mergedStyle = __assign(__assign({}, style), (visible ? visibleStyle : invisibleStyle));
     var mergedClassName = classNames(className, visible ? visibleClassName : invisibleClassName);
-    return _jsx(Layer, __assign({}, props, { style: mergedStyle, className: mergedClassName }));
+    return (_jsx(BaseLayer, __assign({}, props, { style: mergedStyle, className: mergedClassName })));
 };
 export default Layer;

package/hooks/useScrollLock.d.ts

@@ -1,16 +1,6 @@
-type ScrollLock = {
-    /**
-     * Callback function to lock the scroll position
-     */
-    lock: () => void;
-    /**
-     * Callback function to unlock the scroll position
-     */
-    unlock: () => void;
-};
 /**
- * Hook to lock and unlock the scroll position.
- * @returns Object with lock and unlock functions to lock and unlock the scroll position
+ * Hook to lock and unlock the scroll position on enable change or mount/unmount.
+ * @param enable whether to lock the scroll position. Defaults to `true`. Useful for using in something that stays mounted.
  */
-declare const useScrollLock: () => ScrollLock;
+declare const useScrollLock: (enable?: boolean) => void;
 export default useScrollLock;

package/hooks/useScrollLock.js

@@ -1,24 +1,43 @@
-import { useCallback } from "react";
+import { useEffect } from "react";
+var touchEvents = ["touchstart", "touchmove"];
+var empty = function () { };
+var lockScroll = function () {
+    var bodyStyle = document.body.style;
+    var bodyOverflow = bodyStyle.overflow;
+    // set overflow to hidden to prevent scrolling
+    bodyStyle.overflow = "hidden";
+    // handle on mobile; prevent touch events
+    touchEvents.forEach(function (event) {
+        window.addEventListener(event, empty, { passive: false });
+    });
+    return function () {
+        // restore overflow
+        if (bodyOverflow) {
+            bodyStyle.overflow = bodyOverflow;
+        }
+        else {
+            bodyStyle.removeProperty("overflow");
+            // remove style attribute if empty
+            if (!bodyStyle.length) {
+                document.body.removeAttribute("style");
+            }
+        }
+        // remove touch event listeners
+        touchEvents.forEach(function (event) {
+            window.removeEventListener(event, empty);
+        });
+    };
+};
 /**
- * Hook to lock and unlock the scroll position.
- * @returns Object with lock and unlock functions to lock and unlock the scroll position
+ * Hook to lock and unlock the scroll position on enable change or mount/unmount.
+ * @param enable whether to lock the scroll position. Defaults to `true`. Useful for using in something that stays mounted.
  */
-var useScrollLock = function () {
-    var lock = useCallback(function () {
-        var scrollPosition = window.scrollY;
-        document.body.style.overflow = "hidden";
-        document.body.style.position = "fixed";
-        document.body.style.top = "-".concat(scrollPosition, "px");
-        document.body.style.width = "100%";
-    }, []);
-    var unlock = useCallback(function () {
-        var scrollPosition = parseInt(document.body.style.top || "0", 10);
-        document.body.style.overflow = "";
-        document.body.style.position = "";
-        document.body.style.top = "";
-        document.body.style.width = "";
-        window.scrollTo(0, -scrollPosition);
-    }, []);
-    return { lock: lock, unlock: unlock };
+var useScrollLock = function (enable) {
+    if (enable === void 0) { enable = true; }
+    useEffect(function () {
+        if (enable) {
+            return lockScroll();
+        }
+    }, [enable]);
 };
 export default useScrollLock;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",