@adamjanicki/ui 1.2.6 → 1.2.8

package/components/Layer/Layer.js

@@ -25,8 +25,8 @@ import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import { classNames } from "../../utils/util";
 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 focusRef = useFocusTrap(true);
+    var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, visible = _a.visible;
+    var focusRef = useFocusTrap(visible);
     useEffect(function () {
         var handleEscape = function (event) {
             if (event.key === "Escape") {
@@ -52,7 +52,7 @@ var BaseLayer = function (_a) {
 var Layer = function (props) {
     // Lock and unlock on mount and unmount
     useScrollLock();
-    return _jsx(BaseLayer, __assign({}, props));
+    return _jsx(BaseLayer, __assign({}, props, { visible: true }));
 };
 var defaultInvisibleStyle = {
     visibility: "hidden",
@@ -66,6 +66,6 @@ export var AnimatedLayer = function (_a) {
     useScrollLock(visible);
     var mergedStyle = __assign(__assign({}, style), (visible ? visibleStyle : invisibleStyle));
     var mergedClassName = classNames(className, visible ? visibleClassName : invisibleClassName);
-    return (_jsx(BaseLayer, __assign({}, props, { style: mergedStyle, className: mergedClassName })));
+    return (_jsx(BaseLayer, __assign({}, props, { style: mergedStyle, className: mergedClassName, visible: visible })));
 };
 export default Layer;

package/hooks/useScrollLock.js

@@ -1,31 +1,18 @@
 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 });
-    });
+    var scrollPosition = window.scrollY;
+    var style = document.body.style;
+    var overflow = style.overflow, position = style.position, top = style.top, width = style.width;
+    style.overflow = "hidden";
+    style.position = "fixed";
+    style.top = "-".concat(scrollPosition, "px");
+    style.width = "100%";
     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);
-        });
+        style.overflow = overflow;
+        style.position = position;
+        style.top = top;
+        style.width = width;
+        window.scrollTo(0, scrollPosition);
     };
 };
 /**

package/package.json

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