@adamjanicki/ui 1.2.4 → 1.2.6

package/components/Layer/Layer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-type Props = {
+type LayerProps = {
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -22,10 +22,13 @@ type Props = {
      * @default false
      */
     disableEscape?: boolean;
+};
+type AnimatedLayerProps = LayerProps & {
     /**
-     * [Optional] Config for visibility
+     * [Optional] Config for visibility, including styles and class names
+     * Set the `transition` property on the `style` prop to animate the layer
      */
-    visibility?: {
+    visibility: {
         visible: boolean;
         invisibleStyle?: React.CSSProperties;
         visibleStyle?: React.CSSProperties;
@@ -33,5 +36,6 @@ type Props = {
         visibleClassName?: string;
     };
 };
-declare const Layer: ({ onClose, children, style, className, disableEscape, visibility, }: Props) => JSX.Element | null;
+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

@@ -9,19 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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 onClose = _a.onClose, children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, _c = _a.disableEscape, disableEscape = _c === void 0 ? false : _c, _d = _a.visibility, visibility = _d === void 0 ? { visible: true } : _d;
-    var visible = visibility.visible, _e = visibility.invisibleStyle, invisibleStyle = _e === void 0 ? {
-        zIndex: -1,
-        opacity: 0,
-        pointerEvents: "none",
-        userSelect: "none",
-    } : _e, _f = visibility.visibleStyle, visibleStyle = _f === void 0 ? { opacity: 1 } : _f, invisibleClassName = visibility.invisibleClassName, visibleClassName = visibility.visibleClassName;
-    var _g = useScrollLock(), lock = _g.lock, unlock = _g.unlock;
+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);
     useEffect(function () {
         var handleEscape = function (event) {
@@ -36,11 +40,7 @@ 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, visible ? visibleClassName : invisibleClassName), style: __assign(__assign({}, style), (visible ? visibleStyle : invisibleStyle)), onClick: onClose, children: React.cloneElement(children, {
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onClick: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onClick: function (e) {
                 var _a, _b;
@@ -49,4 +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 = {
+    visibility: "hidden",
+    opacity: 0,
+};
+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(BaseLayer, __assign({}, props, { style: mergedStyle, className: mergedClassName })));
+};
 export default Layer;

package/components/Layer/index.d.ts

@@ -1,2 +1,3 @@
-import Layer from "./Layer";
+import Layer, { AnimatedLayer } from "./Layer";
+export { AnimatedLayer };
 export default Layer;

package/components/Layer/index.js

@@ -1,2 +1,3 @@
-import Layer from "./Layer";
+import Layer, { AnimatedLayer } from "./Layer";
+export { AnimatedLayer };
 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/index.d.ts

@@ -9,6 +9,7 @@ export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
+export * from "./components/Layer";
 export { default as Layer } from "./components/Layer";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";

package/index.js

@@ -10,6 +10,7 @@ export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
+export * from "./components/Layer";
 export { default as Layer } from "./components/Layer";
 export { default as Spinner } from "./components/Spinner";
 // Hooks

package/package.json

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