@zuzjs/ui 0.10.4 → 0.10.5

package/dist/cjs/comps/Drawer/index.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useBase, useShortcuts } from "../../hooks";
 import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
+import { layerManager } from "../layer_manager";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
     const { from, speed, children, margin, animation, prerender, onClose, ...pops } = props;
@@ -12,17 +13,32 @@ const Drawer = forwardRef((props, ref) => {
     const divRef = useRef(null);
     const [content, setContent] = useState(children);
     const { className, style, rest } = useBase(pops);
-    useShortcuts([
-        { keys: [KeyCode.Escape], callback: () => {
-                if (visible) {
-                    onClose?.();
-                    setVisible(false);
-                }
-            } }
-    ]);
+    const shortcutsConfig = useMemo(() => [
+        {
+            keys: [KeyCode.Escape],
+            callback: () => {
+                if (layerManager.isTop(closeDrawer))
+                    closeDrawer();
+            }
+        }
+    ], [visible]);
+    useShortcuts(shortcutsConfig);
+    const closeDrawer = useCallback(() => {
+        setVisible(false);
+        onClose?.();
+    }, []);
     useEffect(() => {
         setContent(children);
     }, [children]);
+    useEffect(() => {
+        if (visible) {
+            layerManager.push(closeDrawer);
+        }
+        else {
+            layerManager.pop(closeDrawer);
+        }
+        return () => layerManager.pop(closeDrawer);
+    }, [visible]);
     const _style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
@@ -41,21 +57,15 @@ const Drawer = forwardRef((props, ref) => {
         open(child) {
             if (child)
                 setContent(child);
-            if (!window.document.body.classList.contains(`--no-scroll`))
-                window.document.body.classList.add(`--no-scroll`);
             setVisible(true);
         },
         close() {
-            onClose?.();
-            if (window.document.body.classList.contains(`--no-scroll`))
-                window.document.body.classList.remove(`--no-scroll`);
-            setVisible(false);
+            closeDrawer();
         }
     }));
     return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
                     if (visible) {
-                        onClose?.();
-                        setVisible(false);
+                        closeDrawer();
                     }
                 }, when: visible }), _jsxs(Box, { ref: divRef, style: {
                     ...style,

package/dist/cjs/comps/layer_manager.d.ts

@@ -0,0 +1,13 @@
+export type CloseHandler = () => void;
+declare class LayerManager {
+    private stack;
+    private readonly SCROLL_CLASS;
+    private updateScrollLock;
+    isTop(closeFn: CloseHandler): boolean;
+    push(closeFn: CloseHandler): void;
+    pop(closeFn: CloseHandler): void;
+    handleEscape(): boolean;
+    get count(): number;
+}
+export declare const layerManager: LayerManager;
+export {};

package/dist/cjs/comps/layer_manager.js

@@ -0,0 +1,42 @@
+class LayerManager {
+    stack = [];
+    SCROLL_CLASS = "--no-scroll";
+    updateScrollLock() {
+        if (typeof window === "undefined")
+            return;
+        if (this.stack.length > 0) {
+            document.body.classList.add(this.SCROLL_CLASS);
+        }
+        else {
+            document.body.classList.remove(this.SCROLL_CLASS);
+        }
+    }
+    isTop(closeFn) {
+        return this.stack[this.stack.length - 1] === closeFn;
+    }
+    // Register a component and return a function to unregister it
+    push(closeFn) {
+        // Prevent duplicate registration of the same instance
+        if (!this.stack.includes(closeFn)) {
+            this.stack.push(closeFn);
+            this.updateScrollLock();
+        }
+    }
+    pop(closeFn) {
+        this.stack = this.stack.filter(fn => fn !== closeFn);
+        this.updateScrollLock();
+    }
+    // Attempt to close the top-most layer
+    handleEscape() {
+        const top = this.stack[this.stack.length - 1];
+        if (top) {
+            top();
+            return true; // We handled the event
+        }
+        return false;
+    }
+    get count() {
+        return this.stack.length;
+    }
+}
+export const layerManager = new LayerManager();

package/dist/esm/comps/Drawer/index.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useBase, useShortcuts } from "../../hooks";
 import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
+import { layerManager } from "../layer_manager";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
     const { from, speed, children, margin, animation, prerender, onClose, ...pops } = props;
@@ -12,17 +13,32 @@ const Drawer = forwardRef((props, ref) => {
     const divRef = useRef(null);
     const [content, setContent] = useState(children);
     const { className, style, rest } = useBase(pops);
-    useShortcuts([
-        { keys: [KeyCode.Escape], callback: () => {
-                if (visible) {
-                    onClose?.();
-                    setVisible(false);
-                }
-            } }
-    ]);
+    const shortcutsConfig = useMemo(() => [
+        {
+            keys: [KeyCode.Escape],
+            callback: () => {
+                if (layerManager.isTop(closeDrawer))
+                    closeDrawer();
+            }
+        }
+    ], [visible]);
+    useShortcuts(shortcutsConfig);
+    const closeDrawer = useCallback(() => {
+        setVisible(false);
+        onClose?.();
+    }, []);
     useEffect(() => {
         setContent(children);
     }, [children]);
+    useEffect(() => {
+        if (visible) {
+            layerManager.push(closeDrawer);
+        }
+        else {
+            layerManager.pop(closeDrawer);
+        }
+        return () => layerManager.pop(closeDrawer);
+    }, [visible]);
     const _style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
@@ -41,21 +57,15 @@ const Drawer = forwardRef((props, ref) => {
         open(child) {
             if (child)
                 setContent(child);
-            if (!window.document.body.classList.contains(`--no-scroll`))
-                window.document.body.classList.add(`--no-scroll`);
             setVisible(true);
         },
         close() {
-            onClose?.();
-            if (window.document.body.classList.contains(`--no-scroll`))
-                window.document.body.classList.remove(`--no-scroll`);
-            setVisible(false);
+            closeDrawer();
         }
     }));
     return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
                     if (visible) {
-                        onClose?.();
-                        setVisible(false);
+                        closeDrawer();
                     }
                 }, when: visible }), _jsxs(Box, { ref: divRef, style: {
                     ...style,

package/dist/esm/comps/layer_manager.d.ts

@@ -0,0 +1,13 @@
+export type CloseHandler = () => void;
+declare class LayerManager {
+    private stack;
+    private readonly SCROLL_CLASS;
+    private updateScrollLock;
+    isTop(closeFn: CloseHandler): boolean;
+    push(closeFn: CloseHandler): void;
+    pop(closeFn: CloseHandler): void;
+    handleEscape(): boolean;
+    get count(): number;
+}
+export declare const layerManager: LayerManager;
+export {};

package/dist/esm/comps/layer_manager.js

@@ -0,0 +1,42 @@
+class LayerManager {
+    stack = [];
+    SCROLL_CLASS = "--no-scroll";
+    updateScrollLock() {
+        if (typeof window === "undefined")
+            return;
+        if (this.stack.length > 0) {
+            document.body.classList.add(this.SCROLL_CLASS);
+        }
+        else {
+            document.body.classList.remove(this.SCROLL_CLASS);
+        }
+    }
+    isTop(closeFn) {
+        return this.stack[this.stack.length - 1] === closeFn;
+    }
+    // Register a component and return a function to unregister it
+    push(closeFn) {
+        // Prevent duplicate registration of the same instance
+        if (!this.stack.includes(closeFn)) {
+            this.stack.push(closeFn);
+            this.updateScrollLock();
+        }
+    }
+    pop(closeFn) {
+        this.stack = this.stack.filter(fn => fn !== closeFn);
+        this.updateScrollLock();
+    }
+    // Attempt to close the top-most layer
+    handleEscape() {
+        const top = this.stack[this.stack.length - 1];
+        if (top) {
+            top();
+            return true; // We handled the event
+        }
+        return false;
+    }
+    get count() {
+        return this.stack.length;
+    }
+}
+export const layerManager = new LayerManager();