@asup/context-menu 1.5.2 → 2.0.2

package/dist/main.js

@@ -3,7 +3,7 @@ import {_ as $duWW8$_} from "@swc/helpers/_/_object_spread";
 import {_ as $duWW8$_1} from "@swc/helpers/_/_object_spread_props";
 import {_ as $duWW8$_2} from "@swc/helpers/_/_object_without_properties";
 import {jsx as $duWW8$jsx, jsxs as $duWW8$jsxs, Fragment as $duWW8$Fragment} from "react/jsx-runtime";
-import {useRef as $duWW8$useRef, useState as $duWW8$useState, useMemo as $duWW8$useMemo, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect, useLayoutEffect as $duWW8$useLayoutEffect, forwardRef as $duWW8$forwardRef, createContext as $duWW8$createContext, useContext as $duWW8$useContext} from "react";
+import {useRef as $duWW8$useRef, useState as $duWW8$useState, useEffectEvent as $duWW8$useEffectEvent, useLayoutEffect as $duWW8$useLayoutEffect, useEffect as $duWW8$useEffect, forwardRef as $duWW8$forwardRef, createContext as $duWW8$createContext, useContext as $duWW8$useContext, useCallback as $duWW8$useCallback, useTransition as $duWW8$useTransition} from "react";
 import {createPortal as $duWW8$createPortal} from "react-dom";
 
 
@@ -23,7 +23,6 @@ $parcel$export($b65191f6d0a0a991$exports, "ClickForMenu", function () { return $
 $parcel$export($b65191f6d0a0a991$exports, "ContextMenu", function () { return $567ed433af94513f$export$8dc6765e8be191c7; });
 $parcel$export($b65191f6d0a0a991$exports, "ContextMenuHandler", function () { return $1e1c1e9e0b943830$export$ed4f9641643dc7e4; });
 $parcel$export($b65191f6d0a0a991$exports, "ContextWindow", function () { return $b5e8657823def5be$export$1af8984c69ba1b24; });
-$parcel$export($b65191f6d0a0a991$exports, "ContextWindowStack", function () { return $17c46b9e6a2eb66e$export$9f37482ccd50dad2; });
 
 
 
@@ -40,7 +39,7 @@ $181673e3e0e596f3$export$563bd8f955c52746 = `aiw-AutoHeight-module-pDlSVW-autoHe
 
 
 function $62873e7e5aeec7f1$export$77bf000da9303d1(_param) {
-    var { children: children, hide: hide, duration: duration = 300 } = _param, rest = (0, $duWW8$_2)(_param, [
+    var { children: children, hide: hide = false, duration: duration = 300 } = _param, rest = (0, $duWW8$_2)(_param, [
         "children",
         "hide",
         "duration"
@@ -48,29 +47,63 @@ function $62873e7e5aeec7f1$export$77bf000da9303d1(_param) {
     const wrapperRef = (0, $duWW8$useRef)(null);
     const innerRef = (0, $duWW8$useRef)(null);
     const [height, setHeight] = (0, $duWW8$useState)(null);
-    const targetChildren = (0, $duWW8$useMemo)(()=>hide || !children ? /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-            style: {
-                height: "1px"
-            }
-        }) : children, [
-        children,
-        hide
-    ]);
-    const setTargetHeight = (0, $duWW8$useCallback)(()=>{
-        const inner = innerRef.current;
-        var _inner_offsetHeight;
-        // Initial draw to get the height of children and deployed children
-        const deployedHeight = hide ? 1 : (_inner_offsetHeight = inner === null || inner === void 0 ? void 0 : inner.offsetHeight) !== null && _inner_offsetHeight !== void 0 ? _inner_offsetHeight : 0;
-        setHeight(deployedHeight);
+    const [animationState, setAnimationState] = (0, $duWW8$useState)(!hide ? "open" : "closed");
+    const rafRef = (0, $duWW8$useRef)(null);
+    const timeoutRef = (0, $duWW8$useRef)(null);
+    const targetChildren = animationState === "closed" || !children ? null : children;
+    const setTargetHeight = (0, $duWW8$useEffectEvent)((newHeight)=>{
+        setHeight(newHeight);
+    });
+    const transitionToOpening = (0, $duWW8$useEffectEvent)(()=>{
+        // Cancel any pending close timeout
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setAnimationState("opening");
+        const id = window.requestAnimationFrame(()=>{
+            rafRef.current = null;
+            setTargetHeight(1);
+            const frameId = window.requestAnimationFrame(()=>{
+                const inner = innerRef.current;
+                if (inner) {
+                    setTargetHeight(inner.offsetHeight);
+                    setAnimationState("open");
+                }
+            });
+            rafRef.current = frameId;
+        });
+        rafRef.current = id;
+    });
+    const transitionToClosing = (0, $duWW8$useEffectEvent)(()=>{
+        // Cancel any pending RAF
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        setAnimationState("closing");
+        setTargetHeight(1);
+        timeoutRef.current = window.setTimeout(()=>{
+            timeoutRef.current = null;
+            setAnimationState("closed");
+        }, duration);
+    });
+    (0, $duWW8$useLayoutEffect)(()=>{
+        if (!hide) // Want to show: transition to open
+        {
+            if (animationState === "closed" || animationState === "closing") transitionToOpening();
+        } else // Want to hide: transition to closed
+        if (animationState === "open" || animationState === "opening") transitionToClosing();
     }, [
-        hide
+        hide,
+        animationState
     ]);
-    // Add ResizeObserver to update height on content resize, debounced
+    // Setup ResizeObserver to track content size changes
     (0, $duWW8$useEffect)(()=>{
         const transition = innerRef.current;
         if (transition) {
             const observer = new ResizeObserver(()=>{
-                setTargetHeight();
+                if (animationState === "open") setTargetHeight(transition.offsetHeight);
             });
             observer.observe(transition);
             return ()=>{
@@ -78,19 +111,26 @@ function $62873e7e5aeec7f1$export$77bf000da9303d1(_param) {
             };
         }
     }, [
-        setTargetHeight
-    ]);
-    // Trigger height change on children update
-    (0, $duWW8$useLayoutEffect)(()=>{
-        setTargetHeight();
-    }, [
-        setTargetHeight,
-        children
+        animationState
     ]);
+    // Cleanup on unmount
+    (0, $duWW8$useEffect)(()=>{
+        return ()=>{
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+            if (timeoutRef.current !== null) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, []);
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
         className: (0, (/*@__PURE__*/$parcel$interopDefault($181673e3e0e596f3$exports))).autoHeightWrapper,
         ref: wrapperRef,
         style: (0, $duWW8$_1)((0, $duWW8$_)({}, rest.style), {
+            display: animationState === "closed" ? "none" : undefined,
             height: height ? `${height}px` : "auto",
             transitionDuration: `${duration}ms`
         }),
@@ -230,13 +270,25 @@ const $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT = 34;
 const $567ed433af94513f$var$ESTIMATED_MENU_PADDING = 4;
 const $567ed433af94513f$var$ESTIMATED_MENU_WIDTH = 200;
 const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$forwardRef)(({ visible: visible, entries: entries, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{
-    // Check that menu can fit inside the window
-    let menuHeight = entries.length * $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT + $567ed433af94513f$var$ESTIMATED_MENU_PADDING;
-    let menuWidth = $567ed433af94513f$var$ESTIMATED_MENU_WIDTH;
-    if (ref && typeof ref !== "function" && ref.current instanceof HTMLDivElement) {
-        menuHeight = ref.current.offsetHeight;
-        menuWidth = ref.current.offsetWidth;
-    }
+    // Measure menu size after mount/render to avoid accessing refs during render
+    const [menuHeight, setMenuHeight] = (0, $duWW8$useState)(entries.length * $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT + $567ed433af94513f$var$ESTIMATED_MENU_PADDING);
+    const [menuWidth, setMenuWidth] = (0, $duWW8$useState)($567ed433af94513f$var$ESTIMATED_MENU_WIDTH);
+    (0, $duWW8$useLayoutEffect)(()=>{
+        // Only measure when visible; ref access inside effect is allowed
+        if (visible && ref && typeof ref !== "function" && ref.current instanceof HTMLDivElement) {
+            setMenuHeight(ref.current.offsetHeight);
+            setMenuWidth(ref.current.offsetWidth);
+        }
+        // When not visible, fall back to estimates
+        if (!visible) {
+            setMenuHeight(entries.length * $567ed433af94513f$var$ESTIMATED_MENU_ITEM_HEIGHT + $567ed433af94513f$var$ESTIMATED_MENU_PADDING);
+            setMenuWidth($567ed433af94513f$var$ESTIMATED_MENU_WIDTH);
+        }
+    }, [
+        visible,
+        entries,
+        ref
+    ]);
     const adjustedYPos = yPos + menuHeight > window.innerHeight ? Math.max(window.innerHeight - menuHeight - $567ed433af94513f$var$ESTIMATED_MENU_PADDING, 0) : yPos;
     const adjustedXPos = xPos + menuWidth > window.innerWidth ? Math.max(window.innerWidth - menuWidth - $567ed433af94513f$var$ESTIMATED_MENU_PADDING, 0) : xPos;
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
@@ -277,9 +329,10 @@ const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
     // Set up outsideClick handler
     const menuRef = (0, $duWW8$useRef)(null);
     // Handle click off the menu
-    const handleClick = (0, $duWW8$useCallback)((e)=>{
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleClick = (e)=>{
         if (menuRef.current && (e.target instanceof Element && !menuRef.current.contains(e.target) || !(e.target instanceof Element))) setMenuInDom(false);
-    }, []);
+    };
     const removeController = (0, $duWW8$useRef)(null);
     const removeTimeoutRef = (0, $duWW8$useRef)(null);
     (0, $duWW8$useEffect)(()=>{
@@ -514,30 +567,26 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
         "menuItems",
         "showLowMenu"
     ]);
-    var _divHandlderRef_current;
     // Check for higher content menu
     const higherContext = (0, $duWW8$useContext)($1e1c1e9e0b943830$export$fc58dc71afe92de2);
-    const thisMenuItems = (0, $duWW8$useMemo)(()=>[
-            ...higherContext !== null ? [
-                ...higherContext.menuItems,
-                ...[
-                    higherContext.menuItems.length > 0 && !$1e1c1e9e0b943830$var$isDivider(higherContext.menuItems[higherContext.menuItems.length - 1].label) && menuItems.length > 0 && !$1e1c1e9e0b943830$var$isDivider(menuItems[0].label) ? {
-                        label: /*#__PURE__*/ (0, $duWW8$jsx)("hr", {
-                            style: {
-                                flexGrow: 1,
-                                cursor: "none",
-                                margin: "0",
-                                padding: "0"
-                            }
-                        })
-                    } : null
-                ].filter((item)=>item !== null)
-            ] : [],
-            ...menuItems
-        ], [
-        higherContext,
-        menuItems
-    ]);
+    const thisMenuItems = [
+        ...higherContext !== null ? [
+            ...higherContext.menuItems,
+            ...[
+                higherContext.menuItems.length > 0 && !$1e1c1e9e0b943830$var$isDivider(higherContext.menuItems[higherContext.menuItems.length - 1].label) && menuItems.length > 0 && !$1e1c1e9e0b943830$var$isDivider(menuItems[0].label) ? {
+                    label: /*#__PURE__*/ (0, $duWW8$jsx)("hr", {
+                        style: {
+                            flexGrow: 1,
+                            cursor: "none",
+                            margin: "0",
+                            padding: "0"
+                        }
+                    })
+                } : null
+            ].filter((item)=>item !== null)
+        ] : [],
+        ...menuItems
+    ];
     // Menu resources
     const divHandlderRef = (0, $duWW8$useRef)(null);
     const menuRef = (0, $duWW8$useRef)(null);
@@ -547,9 +596,34 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
     const [menuInDom, setMenuInDom] = (0, $duWW8$useState)(false);
     const [mouseOverHandlerDiv, setMouseOverHandlerDiv] = (0, $duWW8$useState)(false);
     const [mouseOverMenu, setMouseOverMenu] = (0, $duWW8$useState)(false);
-    var _divHandlderRef_current_getBoundingClientRect;
-    // Get holder position
-    const divHandlerPos = (_divHandlderRef_current_getBoundingClientRect = (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect()) !== null && _divHandlderRef_current_getBoundingClientRect !== void 0 ? _divHandlderRef_current_getBoundingClientRect : null;
+    // Holder position - measured in an effect to avoid reading refs during render
+    const [divHandlerPos, setDivHandlerPos] = (0, $duWW8$useState)(null);
+    (0, $duWW8$useLayoutEffect)(()=>{
+        function updatePos() {
+            if (divHandlderRef.current) setDivHandlerPos(divHandlderRef.current.getBoundingClientRect());
+        }
+        // When the handler is hovered or the menu is mounted, ensure we have a fresh position
+        if (mouseOverHandlerDiv || menuInDom) updatePos();
+        // Attach listeners while the menu/low-menu may be visible so the position stays correct
+        if (mouseOverHandlerDiv || menuInDom) {
+            window.addEventListener("resize", updatePos);
+            // listen on capture to catch scrolls from ancestor elements as well
+            window.addEventListener("scroll", updatePos, true);
+            let ro = null;
+            if (typeof ResizeObserver !== "undefined" && divHandlderRef.current) {
+                ro = new ResizeObserver(()=>updatePos());
+                ro.observe(divHandlderRef.current);
+            }
+            return ()=>{
+                window.removeEventListener("resize", updatePos);
+                window.removeEventListener("scroll", updatePos, true);
+                if (ro) ro.disconnect();
+            };
+        }
+    }, [
+        mouseOverHandlerDiv,
+        menuInDom
+    ]);
     // Handle click off the menu
     const handleClick = (0, $duWW8$useCallback)((e)=>{
         var _menuRef_current;
@@ -744,17 +818,19 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = (_param)=>{
     var _rest_style, _rest_style1, _rest_style2, _rest_style3;
     const divRef = (0, $duWW8$useRef)(null);
     const windowRef = (0, $duWW8$useRef)(null);
-    const [windowInDOM, setWindowInDOM] = (0, $duWW8$useState)(false);
-    const [windowVisible, setWindowVisible] = (0, $duWW8$useState)(false);
     const [zIndex, setZIndex] = (0, $duWW8$useState)(minZIndex);
     const resizeListenerRef = (0, $duWW8$useRef)(null);
+    // Track internal state: whether window is in DOM and whether it's been positioned
+    const [windowInDOM, setWindowInDOM] = (0, $duWW8$useState)(false);
+    const [windowVisible, setWindowVisible] = (0, $duWW8$useState)(false);
+    const [, startTransition] = (0, $duWW8$useTransition)();
     // Position
     const windowPos = (0, $duWW8$useRef)({
         x: 0,
         y: 0
     });
     const [moving, setMoving] = (0, $duWW8$useState)(false);
-    const move = (0, $duWW8$useCallback)((x, y)=>{
+    const move = (x, y)=>{
         if (windowRef.current && windowPos.current) {
             const window1 = windowRef.current;
             const pos = windowPos.current;
@@ -762,24 +838,21 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = (_param)=>{
             pos.y += y;
             window1.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
         }
-    }, []);
-    const checkPosition = (0, $duWW8$useCallback)(()=>{
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const checkPosition = ()=>{
         const chkPos = (0, $ab4d5d6bf03370d0$export$d81cfea7c54be196)(windowRef);
         move(chkPos.translateX, chkPos.translateY);
-    }, [
-        move
-    ]);
-    const mouseMove = (0, $duWW8$useCallback)((e)=>{
+    };
+    const mouseMove = (e)=>{
         e.preventDefault();
         e.stopPropagation();
         move(e.movementX, e.movementY);
-    }, [
-        move
-    ]);
+    };
     // Store stable references to mouseMove and mouseUp for cleanup
     const mouseMoveRef = (0, $duWW8$useRef)(mouseMove);
     const mouseUpRef = (0, $duWW8$useRef)(()=>{});
-    const mouseUp = (0, $duWW8$useCallback)((e)=>{
+    const mouseUp = (e)=>{
         e.preventDefault();
         e.stopPropagation();
         setMoving(false);
@@ -791,55 +864,65 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = (_param)=>{
             resizeListenerRef.current = null;
         }
         if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "auto";
-    }, [
-        checkPosition
-    ]);
+    };
     // Update refs when callbacks change
     (0, $duWW8$useEffect)(()=>{
         mouseMoveRef.current = mouseMove;
         mouseUpRef.current = mouseUp;
-    }, [
-        mouseMove,
-        mouseUp
-    ]);
+    });
     // Helper function to push this window to the top
-    const pushToTop = (0, $duWW8$useCallback)(()=>{
+    const pushToTop = ()=>{
         const maxZIndex = $b5e8657823def5be$var$getMaxZIndex(minZIndex);
         setZIndex(maxZIndex + 1);
+    };
+    // Sync windowInDOM with visible prop using a layout effect to avoid ESLint warnings
+    // This effect derives state from props, which is acceptable when there's no synchronous setState
+    (0, $duWW8$useEffect)(()=>{
+        if (visible && !windowInDOM) // Window should be in DOM when visible becomes true
+        startTransition(()=>{
+            setWindowInDOM(true);
+        });
+        else if (!visible && windowInDOM) // Window should leave DOM when visible becomes false
+        startTransition(()=>{
+            setWindowInDOM(false);
+            setWindowVisible(false);
+        });
     }, [
-        minZIndex
+        visible,
+        windowInDOM,
+        startTransition
     ]);
-    // Update visibility
+    // Position and show window after it's added to DOM
     (0, $duWW8$useEffect)(()=>{
-        // Visible set, but not in DOM
-        if (visible && !windowInDOM) setWindowInDOM(true);
-        else if (visible && windowInDOM && !windowVisible) {
-            pushToTop();
-            setWindowVisible(visible);
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            // Get starting position
-            if (divRef.current && windowRef.current) {
-                const parentPos = divRef.current.getBoundingClientRect();
-                const pos = windowRef.current.getBoundingClientRect();
-                const windowHeight = pos.bottom - pos.top;
-                windowRef.current.style.left = `${parentPos.left}px`;
-                windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
-                windowRef.current.style.transform = "";
-                windowPos.current = {
-                    x: 0,
-                    y: 0
-                };
-            }
+        if (windowInDOM && !windowVisible && visible && divRef.current && windowRef.current) {
+            // Position the window
+            const parentPos = divRef.current.getBoundingClientRect();
+            const pos = windowRef.current.getBoundingClientRect();
+            const windowHeight = pos.bottom - pos.top;
+            windowRef.current.style.left = `${parentPos.left}px`;
+            windowRef.current.style.top = `${parentPos.bottom + windowHeight < window.innerHeight ? parentPos.bottom : Math.max(0, parentPos.top - windowHeight)}px`;
+            windowRef.current.style.transform = "";
+            windowPos.current = {
+                x: 0,
+                y: 0
+            };
             checkPosition();
-        } else if (!visible && windowVisible) setWindowVisible(false);
-        else if (!visible && windowInDOM) setWindowInDOM(false);
+            // Update z-index and make visible - use startTransition
+            const maxZ = $b5e8657823def5be$var$getMaxZIndex(minZIndex);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            startTransition(()=>{
+                setZIndex(maxZ + 1);
+                setWindowVisible(true);
+            });
+        }
     }, [
+        windowInDOM,
+        windowVisible,
+        visible,
         checkPosition,
+        minZIndex,
         onOpen,
-        pushToTop,
-        visible,
-        windowInDOM,
-        windowVisible
+        startTransition
     ]);
     // Cleanup effect to remove event listeners on unmount
     (0, $duWW8$useEffect)(()=>{
@@ -935,40 +1018,7 @@ $b5e8657823def5be$export$1af8984c69ba1b24.displayName = "ContextWindow";
 
 
 
-const $17c46b9e6a2eb66e$var$SESSION_KEY = "context-menu.ContextWindowStack.rendered";
-const $17c46b9e6a2eb66e$export$9f37482ccd50dad2 = ({ children: children })=>{
-    (0, $duWW8$useEffect)(()=>{
-        const doWarn = ()=>console.warn("ContextWindowStack is deprecated and no longer required. ContextWindow now manages z-index automatically. Please remove the ContextWindowStack wrapper from your code.");
-        try {
-            // Prefer sessionStorage so the warning lasts for the browser session.
-            if (typeof window !== "undefined" && window.sessionStorage) {
-                const already = window.sessionStorage.getItem($17c46b9e6a2eb66e$var$SESSION_KEY);
-                if (!already) {
-                    window.sessionStorage.setItem($17c46b9e6a2eb66e$var$SESSION_KEY, "1");
-                    doWarn();
-                }
-                return;
-            }
-        } catch (e) {
-        // sessionStorage may be unavailable (privacy mode). Fall through to global fallback.
-        }
-        // Fallback: use a global flag for environments where sessionStorage isn't available.
-        const g = globalThis;
-        if (!g.__ContextWindowStackRendered) {
-            g.__ContextWindowStackRendered = true;
-            doWarn();
-        }
-    }, []);
-    return /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$Fragment), {
-        children: children
-    });
-};
-$17c46b9e6a2eb66e$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
-
-
-
-
 
 
-export {$62873e7e5aeec7f1$export$77bf000da9303d1 as AutoHeight, $c3e82278b501f10c$export$d4ebdd58e04c6ace as ClickForMenu, $567ed433af94513f$export$8dc6765e8be191c7 as ContextMenu, $1e1c1e9e0b943830$export$ed4f9641643dc7e4 as ContextMenuHandler, $b5e8657823def5be$export$1af8984c69ba1b24 as ContextWindow, $17c46b9e6a2eb66e$export$9f37482ccd50dad2 as ContextWindowStack};
+export {$62873e7e5aeec7f1$export$77bf000da9303d1 as AutoHeight, $c3e82278b501f10c$export$d4ebdd58e04c6ace as ClickForMenu, $567ed433af94513f$export$8dc6765e8be191c7 as ContextMenu, $1e1c1e9e0b943830$export$ed4f9641643dc7e4 as ContextMenuHandler, $b5e8657823def5be$export$1af8984c69ba1b24 as ContextWindow};
 //# sourceMappingURL=main.js.map