@asup/context-menu 1.3.3 → 1.3.5

package/dist/cjs/main.js

@@ -28,6 +28,8 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+
+
 var $a68bd8a6c0fd98c2$exports = {};
 
 $parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenuHandler", function () { return $3c568ee547c732c3$export$ed4f9641643dc7e4; });
@@ -38,13 +40,48 @@ $parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindowStack", function () { re
 
 
 
+var $da5a7b95ca760552$exports = {};
+
+$parcel$export($da5a7b95ca760552$exports, "anchor", function () { return $da5a7b95ca760552$export$2e2992790a6f69a8; }, function (v) { return $da5a7b95ca760552$export$2e2992790a6f69a8 = v; });
+$parcel$export($da5a7b95ca760552$exports, "caretHolder", function () { return $da5a7b95ca760552$export$6ed5f4fbab298e07; }, function (v) { return $da5a7b95ca760552$export$6ed5f4fbab298e07 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenu", function () { return $da5a7b95ca760552$export$218b899e1d476006; }, function (v) { return $da5a7b95ca760552$export$218b899e1d476006 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenuHandler", function () { return $da5a7b95ca760552$export$ed8ffb5bb55a3bc8; }, function (v) { return $da5a7b95ca760552$export$ed8ffb5bb55a3bc8 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenuItem", function () { return $da5a7b95ca760552$export$e5ea51c279904378; }, function (v) { return $da5a7b95ca760552$export$e5ea51c279904378 = v; });
+$parcel$export($da5a7b95ca760552$exports, "contextMenuItemLabel", function () { return $da5a7b95ca760552$export$6ada86c5b962aa22; }, function (v) { return $da5a7b95ca760552$export$6ada86c5b962aa22 = v; });
+$parcel$export($da5a7b95ca760552$exports, "disabled", function () { return $da5a7b95ca760552$export$683472f6198a076e; }, function (v) { return $da5a7b95ca760552$export$683472f6198a076e = v; });
+$parcel$export($da5a7b95ca760552$exports, "hidden", function () { return $da5a7b95ca760552$export$73920f18ca706874; }, function (v) { return $da5a7b95ca760552$export$73920f18ca706874 = v; });
+$parcel$export($da5a7b95ca760552$exports, "subMenu", function () { return $da5a7b95ca760552$export$6e0e6ce39e5a0361; }, function (v) { return $da5a7b95ca760552$export$6e0e6ce39e5a0361 = v; });
+$parcel$export($da5a7b95ca760552$exports, "visible", function () { return $da5a7b95ca760552$export$664c6d24e3175067; }, function (v) { return $da5a7b95ca760552$export$664c6d24e3175067 = v; });
+var $da5a7b95ca760552$export$2e2992790a6f69a8;
+var $da5a7b95ca760552$export$6ed5f4fbab298e07;
+var $da5a7b95ca760552$export$218b899e1d476006;
+var $da5a7b95ca760552$export$ed8ffb5bb55a3bc8;
+var $da5a7b95ca760552$export$e5ea51c279904378;
+var $da5a7b95ca760552$export$6ada86c5b962aa22;
+var $da5a7b95ca760552$export$683472f6198a076e;
+var $da5a7b95ca760552$export$73920f18ca706874;
+var $da5a7b95ca760552$export$6e0e6ce39e5a0361;
+var $da5a7b95ca760552$export$664c6d24e3175067;
+$da5a7b95ca760552$export$2e2992790a6f69a8 = `aiw-WinFxq-anchor`;
+$da5a7b95ca760552$export$6ed5f4fbab298e07 = `aiw-WinFxq-caretHolder`;
+$da5a7b95ca760552$export$218b899e1d476006 = `aiw-WinFxq-contextMenu`;
+$da5a7b95ca760552$export$ed8ffb5bb55a3bc8 = `aiw-WinFxq-contextMenuHandler`;
+$da5a7b95ca760552$export$e5ea51c279904378 = `aiw-WinFxq-contextMenuItem`;
+$da5a7b95ca760552$export$6ada86c5b962aa22 = `aiw-WinFxq-contextMenuItemLabel`;
+$da5a7b95ca760552$export$683472f6198a076e = `aiw-WinFxq-disabled`;
+$da5a7b95ca760552$export$73920f18ca706874 = `aiw-WinFxq-hidden`;
+$da5a7b95ca760552$export$6e0e6ce39e5a0361 = `aiw-WinFxq-subMenu`;
+$da5a7b95ca760552$export$664c6d24e3175067 = `aiw-WinFxq-visible`;
+
 
 
 
-const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: target, toClose: toClose })=>{
+
+
+const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose })=>{
     const [visible, setVisible] = (0, $gTuX4$react.useState)(false);
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
-        className: "caret-holder",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).caretHolder,
         onMouseEnter: ()=>{
             setVisible(true);
         },
@@ -63,11 +100,10 @@ const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: t
                 })
             }),
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                className: "sub-menu",
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).subMenu,
                 children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
                     visible: visible,
                     entries: entries,
-                    target: target,
                     xPos: 14,
                     yPos: -21,
                     toClose: toClose
@@ -79,11 +115,14 @@ const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: t
 $d35a356381c44181$export$7e4e6110f96afd7e.displayName = "ContextSubMenu";
 
 
-const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ visible: visible, entries: entries, target: target, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{
-    $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
+const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ visible: visible, entries: entries, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{
+    const [target, setTarget] = (0, $gTuX4$react.useState)(null);
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
         ref: ref,
-        className: `context-menu${visible ? " visible" : ""}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenu,
+            visible ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).hidden
+        ].filter((c)=>c !== "").join(" "),
         style: {
             top: `${yPos}px`,
             left: `${xPos}px`
@@ -93,24 +132,34 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$int
             e.stopPropagation();
         },
         children: entries.map((entry, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-                className: `context-menu-item${entry.disabled ? " disabled" : ""}`,
+                className: [
+                    (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItem,
+                    entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).disabled : ""
+                ].filter((c)=>c !== "").join(" "),
                 children: [
-                    /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
+                    typeof entry.label === "string" ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
                         "aria-label": typeof entry.label === "string" ? entry.label : undefined,
                         "aria-disabled": entry.disabled,
-                        className: "context-menu-item-label",
-                        onMouseDownCapture: (ev)=>{
-                            ev.preventDefault();
-                            ev.stopPropagation();
+                        className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItemLabel,
+                        onMouseEnter: ()=>{
+                            const sel = window.getSelection();
+                            const target = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+                            setTarget(target);
+                        },
+                        onMouseLeave: ()=>{
+                            setTarget(null);
+                        },
+                        onMouseDownCapture: (e)=>{
+                            e.preventDefault();
+                            e.stopPropagation();
                             entry.action && !entry.disabled && entry.action(target);
                             !entry.disabled && toClose();
                         },
                         children: entry.label
-                    }),
+                    }) : entry.label,
                     entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d35a356381c44181$export$7e4e6110f96afd7e), {
                         toClose: toClose,
-                        entries: entry.group,
-                        target: target
+                        entries: entry.group
                     })
                 ]
             }, i))
@@ -121,17 +170,49 @@ $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
 
 
 
+var $63cdf2819565020c$exports = {};
+
+$parcel$export($63cdf2819565020c$exports, "caretHolder", function () { return $63cdf2819565020c$export$6ed5f4fbab298e07; }, function (v) { return $63cdf2819565020c$export$6ed5f4fbab298e07 = v; });
+$parcel$export($63cdf2819565020c$exports, "disabled", function () { return $63cdf2819565020c$export$683472f6198a076e; }, function (v) { return $63cdf2819565020c$export$683472f6198a076e = v; });
+$parcel$export($63cdf2819565020c$exports, "hidden", function () { return $63cdf2819565020c$export$73920f18ca706874; }, function (v) { return $63cdf2819565020c$export$73920f18ca706874 = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenu", function () { return $63cdf2819565020c$export$59e4b099a896b33; }, function (v) { return $63cdf2819565020c$export$59e4b099a896b33 = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenu-item", function () { return $63cdf2819565020c$export$19fbf76b734bf310; }, function (v) { return $63cdf2819565020c$export$19fbf76b734bf310 = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenuButtonHolder", function () { return $63cdf2819565020c$export$22ec12d194e0789c; }, function (v) { return $63cdf2819565020c$export$22ec12d194e0789c = v; });
+$parcel$export($63cdf2819565020c$exports, "lowMenuItem", function () { return $63cdf2819565020c$export$2ad34a478577e75d; }, function (v) { return $63cdf2819565020c$export$2ad34a478577e75d = v; });
+$parcel$export($63cdf2819565020c$exports, "subMenu", function () { return $63cdf2819565020c$export$6e0e6ce39e5a0361; }, function (v) { return $63cdf2819565020c$export$6e0e6ce39e5a0361 = v; });
+$parcel$export($63cdf2819565020c$exports, "visible", function () { return $63cdf2819565020c$export$664c6d24e3175067; }, function (v) { return $63cdf2819565020c$export$664c6d24e3175067 = v; });
+var $63cdf2819565020c$export$6ed5f4fbab298e07;
+var $63cdf2819565020c$export$683472f6198a076e;
+var $63cdf2819565020c$export$73920f18ca706874;
+var $63cdf2819565020c$export$59e4b099a896b33;
+var $63cdf2819565020c$export$19fbf76b734bf310;
+var $63cdf2819565020c$export$22ec12d194e0789c;
+var $63cdf2819565020c$export$2ad34a478577e75d;
+var $63cdf2819565020c$export$6e0e6ce39e5a0361;
+var $63cdf2819565020c$export$664c6d24e3175067;
+$63cdf2819565020c$export$6ed5f4fbab298e07 = `aiw-JfzGeq-caretHolder`;
+$63cdf2819565020c$export$683472f6198a076e = `aiw-JfzGeq-disabled`;
+$63cdf2819565020c$export$73920f18ca706874 = `aiw-JfzGeq-hidden`;
+$63cdf2819565020c$export$59e4b099a896b33 = `aiw-JfzGeq-lowMenu`;
+$63cdf2819565020c$export$19fbf76b734bf310 = `aiw-JfzGeq-lowMenu-item`;
+$63cdf2819565020c$export$22ec12d194e0789c = `aiw-JfzGeq-lowMenuButtonHolder`;
+$63cdf2819565020c$export$2ad34a478577e75d = `aiw-JfzGeq-lowMenuItem`;
+$63cdf2819565020c$export$6e0e6ce39e5a0361 = `aiw-JfzGeq-subMenu`;
+$63cdf2819565020c$export$664c6d24e3175067 = `aiw-JfzGeq-visible`;
+
+
+
 
 
 
 
 
-const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: target })=>{
+const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry })=>{
     const [visible, setVisible] = (0, $gTuX4$react.useState)(false);
     if (!entry.group || entry.group.length === 0) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {});
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
         "aria-label": `Sub menu for ${entry.label}`,
-        className: "caret-holder",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).caretHolder,
         onMouseEnter: ()=>{
             setVisible(true);
         },
@@ -150,11 +231,10 @@ const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: targe
                 })
             }),
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                className: "sub-menu",
-                children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).subMenu,
+                children: visible && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
                     visible: visible,
                     entries: entry.group,
-                    target: target,
                     xPos: 14,
                     yPos: entry.group.length * -21 - 8,
                     toClose: ()=>setVisible(false)
@@ -166,24 +246,35 @@ const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: targe
 $d30299730ea8ec1e$export$251b9f54013cdfac.displayName = "LowSubMenu";
 
 
-const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: target })=>{
+
+const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry })=>{
+    const [target, setTarget] = (0, $gTuX4$react.useState)(null);
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-        className: `low-menu-item${entry.disabled ? " disabled" : ""}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenuItem,
+            entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).disabled : ""
+        ].filter((c)=>c !== "").join(" "),
         "aria-label": typeof entry.label === "string" ? entry.label : undefined,
         "aria-disabled": entry.disabled,
-        onClick: (event)=>{
-            event.preventDefault();
-            event.stopPropagation();
+        onMouseEnter: ()=>{
+            const sel = window.getSelection();
+            const target = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+            setTarget(target);
+        },
+        onMouseLeave: ()=>{
+            setTarget(null);
+        },
+        onClick: (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
             entry.action && !entry.disabled && entry.action(target);
         },
         children: [
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
-                className: "low-menu-item-label",
                 children: entry.label
             }),
             entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d30299730ea8ec1e$export$251b9f54013cdfac), {
-                entry: entry,
-                target: target
+                entry: entry
             })
         ]
     });
@@ -191,42 +282,65 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: targe
 $b34598671fff4a77$export$aafc28aea571c4bc.displayName = "LowMenuButton";
 
 
-const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, target: target, visible: visible })=>{
+const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, visible: visible, xPos: xPos, yPos: yPos, maxWidth: maxWidth })=>{
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-        className: `low-menu ${visible ? "visible" : "hidden"}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenu,
+            visible ? (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).hidden
+        ].join(" "),
         "aria-label": "Low context menu",
-        children: entries.map((e, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $b34598671fff4a77$export$aafc28aea571c4bc), {
-                entry: e,
-                target: target
-            }, i))
+        style: {
+            left: `${xPos}px`,
+            top: `${yPos}px`,
+            maxWidth: `calc(${maxWidth}px)`,
+            width: `calc(${maxWidth}px - 4px)`
+        },
+        children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+            className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenuButtonHolder,
+            children: entries.map((e, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $b34598671fff4a77$export$aafc28aea571c4bc), {
+                    entry: e
+                }, i))
+        })
     });
 };
 $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25.displayName = "LowMenu";
 
 
-const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, style: style = {
-    height: "fit-content",
-    width: "fit-content"
-} })=>{
+const $3c568ee547c732c3$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $gTuX4$react.createContext)(null);
+const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, ...rest })=>{
+    var _divHandlderRef_current;
+    // Check for higher content menu
+    const higherContext = (0, $gTuX4$react.useContext)($3c568ee547c732c3$export$fc58dc71afe92de2);
+    const thisMenuItems = (0, $gTuX4$react.useMemo)(()=>[
+            ...higherContext !== null ? [
+                ...higherContext.menuItems,
+                {
+                    label: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("hr", {
+                        style: {
+                            flexGrow: 1,
+                            cursor: "none",
+                            margin: "0",
+                            padding: "0"
+                        }
+                    })
+                }
+            ] : [],
+            ...menuItems
+        ], [
+        higherContext,
+        menuItems
+    ]);
     // Menu resources
-    const divRef = (0, $gTuX4$react.useRef)(null);
+    const divHandlderRef = (0, $gTuX4$react.useRef)(null);
     const menuRef = (0, $gTuX4$react.useRef)(null);
     const [menuXPos, setMenuXPos] = (0, $gTuX4$react.useState)(0);
     const [menuYPos, setMenuYPos] = (0, $gTuX4$react.useState)(0);
     const [menuVisible, setMenuVisible] = (0, $gTuX4$react.useState)(false);
-    const [target, setTarget] = (0, $gTuX4$react.useState)(null);
-    const [lowTarget, setLowTarget] = (0, $gTuX4$react.useState)(null);
-    const [lowMenuVisible, setLowMenuVisible] = (0, $gTuX4$react.useState)(false);
-    // Show menu when context is requested
-    const showMenu = (e)=>{
-        const sel = window.getSelection();
-        setTarget(sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null);
-        e.preventDefault();
-        e.stopPropagation();
-        setMenuVisible(true);
-        setMenuXPos(e.pageX);
-        setMenuYPos(e.pageY);
-    };
+    const [menuInDom, setMenuInDom] = (0, $gTuX4$react.useState)(false);
+    const [mouseOverHandlerDiv, setMouseOverHandlerDiv] = (0, $gTuX4$react.useState)(false);
+    const [mouseOverMenu, setMouseOverMenu] = (0, $gTuX4$react.useState)(false);
+    // Get holder position
+    const divHandlerPos = divHandlderRef ? (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect() : null;
     // Handle click off the menu
     const handleClick = (0, $gTuX4$react.useCallback)((e)=>{
         var _menuRef_current;
@@ -243,55 +357,96 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
         handleClick,
         menuVisible
     ]);
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
+    const removeController = (0, $gTuX4$react.useRef)(new AbortController());
+    (0, $gTuX4$react.useEffect)(()=>{
+        if (!mouseOverMenu && !menuVisible && !mouseOverHandlerDiv) {
+            removeController.current.abort();
+            removeController.current = new AbortController();
+            setTimeout(()=>{
+                if (!removeController.current.signal.aborted) setMenuInDom(false);
+            }, 300);
+        }
+    }, [
+        mouseOverHandlerDiv,
+        menuVisible,
+        mouseOverMenu
+    ]);
+    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)($3c568ee547c732c3$export$fc58dc71afe92de2.Provider, {
+        value: {
+            menuItems: thisMenuItems
+        },
         children: [
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                onContextMenu: showLowMenu ? undefined : showMenu,
-                className: "context-menu-handler",
-                style: style,
+                ref: divHandlderRef,
+                ...rest,
+                className: [
+                    (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuHandler,
+                    rest.className
+                ].join(" "),
+                style: {
+                    ...rest.style
+                },
+                onContextMenu: (e)=>{
+                    if (!showLowMenu) {
+                        setMenuInDom(true);
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setTimeout(()=>{
+                            removeController.current.abort();
+                            setMenuVisible(true);
+                            setMenuXPos(e.pageX);
+                            setMenuYPos(e.pageY);
+                        }, 1);
+                    }
+                },
                 onMouseEnter: ()=>{
-                    showLowMenu && setLowMenuVisible(true);
+                    if (showLowMenu) {
+                        setMenuInDom(true);
+                        setMouseOverHandlerDiv(false);
+                        setTimeout(()=>{
+                            removeController.current.abort();
+                            setMouseOverHandlerDiv(true);
+                        }, 1);
+                    }
                 },
                 onMouseLeave: ()=>{
-                    showLowMenu && setLowMenuVisible(false);
+                    if (showLowMenu) {
+                        removeController.current.abort();
+                        removeController.current = new AbortController();
+                        setMouseOverHandlerDiv(false);
+                    }
                 },
                 children: children
             }),
-            menuVisible && !showLowMenu && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0
-                },
-                ref: divRef,
-                children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
-                    visible: true,
-                    ref: menuRef,
-                    entries: menuItems,
-                    xPos: menuXPos,
-                    yPos: menuYPos,
-                    target: target,
-                    toClose: ()=>setMenuVisible(false)
-                })
-            }), document.body),
-            showLowMenu && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                style: {
-                    position: "relative"
-                },
+            menuInDom && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
                 onMouseEnter: ()=>{
-                    const sel = window.getSelection();
-                    const lowSel = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
-                    setLowTarget(lowSel);
+                    removeController.current.abort();
+                    setMouseOverMenu(true);
                 },
                 onMouseLeave: ()=>{
-                    setLowTarget(null);
+                    removeController.current.abort();
+                    removeController.current = new AbortController();
+                    setMouseOverMenu(false);
                 },
-                children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25), {
-                    visible: lowMenuVisible,
+                children: showLowMenu ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25), {
+                    visible: mouseOverHandlerDiv,
                     entries: menuItems,
-                    target: lowTarget
+                    xPos: divHandlerPos.left,
+                    yPos: divHandlerPos.bottom,
+                    maxWidth: divHandlerPos.width
+                }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
+                    visible: menuVisible,
+                    ref: menuRef,
+                    entries: thisMenuItems,
+                    xPos: menuXPos,
+                    yPos: menuYPos,
+                    toClose: ()=>{
+                        setMenuVisible(false);
+                        setMouseOverMenu(false);
+                    }
                 })
-            })
+            }), document.body)
         ]
     });
 };
@@ -301,6 +456,27 @@ $3c568ee547c732c3$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
 
 
 
+const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
+    if (!divRef.current) return {
+        translateX: 0,
+        translateY: 0
+    };
+    else {
+        const innerBounce = 16;
+        const posn = divRef.current.getBoundingClientRect();
+        let translateX = 0;
+        if (posn.left < innerBounce) translateX = -posn.left + innerBounce;
+        else if (posn.right > window.innerWidth) translateX = Math.max(-posn.left + innerBounce, window.innerWidth - posn.right - innerBounce);
+        let translateY = 0;
+        if (posn.top < innerBounce) translateY = -posn.top + innerBounce;
+        else if (posn.bottom > window.innerHeight) translateY = Math.max(-posn.top + innerBounce, window.innerHeight - posn.bottom - innerBounce);
+        return {
+            translateX: translateX,
+            translateY: translateY
+        };
+    }
+};
+
 
 
 
@@ -334,33 +510,38 @@ const $16208d559c772441$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000
 $16208d559c772441$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
 
 
-const $c986bcdcae4b83bd$export$d81cfea7c54be196 = (divRef)=>{
-    if (!divRef.current) return {
-        translateX: 0,
-        translateY: 0
-    };
-    else {
-        const innerBounce = 16;
-        const posn = divRef.current.getBoundingClientRect();
-        let translateX = 0;
-        if (posn.left < innerBounce) translateX = -posn.left + innerBounce;
-        else if (posn.right > window.innerWidth) translateX = Math.max(-posn.left + innerBounce, window.innerWidth - posn.right - innerBounce);
-        let translateY = 0;
-        if (posn.top < innerBounce) translateY = -posn.top + innerBounce;
-        else if (posn.bottom > window.innerHeight) translateY = Math.max(-posn.top + innerBounce, window.innerHeight - posn.bottom - innerBounce);
-        return {
-            translateX: translateX,
-            translateY: translateY
-        };
-    }
-};
-
-
-const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, title: title, style: style, children: children, onOpen: onOpen, onClose: onClose })=>{
+var $7c5fb3f6c1601913$exports = {};
+
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindow", function () { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674; }, function (v) { return $7c5fb3f6c1601913$export$72cad2e5ad4d2674 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowAnchor", function () { return $7c5fb3f6c1601913$export$9f3a8a17ac700f7d; }, function (v) { return $7c5fb3f6c1601913$export$9f3a8a17ac700f7d = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowBody", function () { return $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f; }, function (v) { return $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowTitle", function () { return $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4; }, function (v) { return $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowTitleClose", function () { return $7c5fb3f6c1601913$export$7ba38d4cc2870e66; }, function (v) { return $7c5fb3f6c1601913$export$7ba38d4cc2870e66 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "contextWindowTitleText", function () { return $7c5fb3f6c1601913$export$cebbac70b4d99c48; }, function (v) { return $7c5fb3f6c1601913$export$cebbac70b4d99c48 = v; });
+$parcel$export($7c5fb3f6c1601913$exports, "moving", function () { return $7c5fb3f6c1601913$export$d03a2f3acc60252b; }, function (v) { return $7c5fb3f6c1601913$export$d03a2f3acc60252b = v; });
+var $7c5fb3f6c1601913$export$72cad2e5ad4d2674;
+var $7c5fb3f6c1601913$export$9f3a8a17ac700f7d;
+var $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f;
+var $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4;
+var $7c5fb3f6c1601913$export$7ba38d4cc2870e66;
+var $7c5fb3f6c1601913$export$cebbac70b4d99c48;
+var $7c5fb3f6c1601913$export$d03a2f3acc60252b;
+$7c5fb3f6c1601913$export$72cad2e5ad4d2674 = `aiw-RIIF9a-contextWindow`;
+$7c5fb3f6c1601913$export$9f3a8a17ac700f7d = `aiw-RIIF9a-contextWindowAnchor`;
+$7c5fb3f6c1601913$export$dfb2c4d2d1c0156f = `aiw-RIIF9a-contextWindowBody`;
+$7c5fb3f6c1601913$export$1b02f2cd2f7db0f4 = `aiw-RIIF9a-contextWindowTitle`;
+$7c5fb3f6c1601913$export$7ba38d4cc2870e66 = `aiw-RIIF9a-contextWindowTitleClose`;
+$7c5fb3f6c1601913$export$cebbac70b4d99c48 = `aiw-RIIF9a-contextWindowTitleText`;
+$7c5fb3f6c1601913$export$d03a2f3acc60252b = `aiw-RIIF9a-moving`;
+
+
+const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, title: title, children: children, onOpen: onOpen, onClose: onClose, ...rest })=>{
+    var _rest_style, _rest_style1, _rest_style2, _rest_style3;
     const windowStack = (0, $gTuX4$react.useContext)((0, $16208d559c772441$export$aff5d0593e3727b0));
     const windowId = (0, $gTuX4$react.useRef)(null);
     const divRef = (0, $gTuX4$react.useRef)(null);
     const windowRef = (0, $gTuX4$react.useRef)(null);
+    const [windowInDOM, setWindowInDOM] = (0, $gTuX4$react.useState)(false);
     const [windowVisible, setWindowVisible] = (0, $gTuX4$react.useState)(false);
     const zIndex = (0, $gTuX4$react.useMemo)(()=>{
         var _windowStack_currentWindows_find;
@@ -413,7 +594,9 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
     // Update visibility
     (0, $gTuX4$react.useEffect)(()=>{
         if (windowStack) {
-            if (visible && !windowVisible) {
+            // Visible set, but not in DOM
+            if (visible && !windowInDOM) setWindowInDOM(true);
+            else if (visible && windowInDOM && !windowVisible) {
                 if (!windowId.current) {
                     const maxWindowId = Math.max(0, ...windowStack.currentWindows.map((w)=>w.windowId));
                     windowId.current = maxWindowId + 1;
@@ -436,30 +619,33 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                 }
                 checkPosition();
             } else if (windowId.current && !visible && windowVisible) setWindowVisible(false);
+            else if (windowId.current && !visible && windowInDOM) setWindowInDOM(false);
         }
     }, [
         checkPosition,
         onOpen,
         visible,
+        windowInDOM,
         windowStack,
         windowVisible
     ]);
-    var _style_minHeight, _style_minWidth, _style_maxHeight, _style_maxWidth;
+    var _rest_style_minHeight, _rest_style_minWidth, _rest_style_maxHeight, _rest_style_maxWidth;
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-        className: "contextwindow-anchor",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor,
         ref: divRef,
-        children: windowStack && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
+        children: windowStack && windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
+            ...rest,
             id: id,
-            className: "contextwindow",
+            className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow,
             style: {
-                ...style,
+                ...rest.style,
                 opacity: moving ? 0.8 : windowVisible ? 1 : 0,
                 visibility: windowVisible ? "visible" : "hidden",
                 zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
-                minHeight: (_style_minHeight = style === null || style === void 0 ? void 0 : style.minHeight) !== null && _style_minHeight !== void 0 ? _style_minHeight : "150px",
-                minWidth: (_style_minWidth = style === null || style === void 0 ? void 0 : style.minWidth) !== null && _style_minWidth !== void 0 ? _style_minWidth : "200px",
-                maxHeight: (_style_maxHeight = style === null || style === void 0 ? void 0 : style.maxHeight) !== null && _style_maxHeight !== void 0 ? _style_maxHeight : "1000px",
-                maxWidth: (_style_maxWidth = style === null || style === void 0 ? void 0 : style.maxWidth) !== null && _style_maxWidth !== void 0 ? _style_maxWidth : "1000px"
+                minHeight: (_rest_style_minHeight = (_rest_style = rest.style) === null || _rest_style === void 0 ? void 0 : _rest_style.minHeight) !== null && _rest_style_minHeight !== void 0 ? _rest_style_minHeight : "150px",
+                minWidth: (_rest_style_minWidth = (_rest_style1 = rest.style) === null || _rest_style1 === void 0 ? void 0 : _rest_style1.minWidth) !== null && _rest_style_minWidth !== void 0 ? _rest_style_minWidth : "200px",
+                maxHeight: (_rest_style_maxHeight = (_rest_style2 = rest.style) === null || _rest_style2 === void 0 ? void 0 : _rest_style2.maxHeight) !== null && _rest_style_maxHeight !== void 0 ? _rest_style_maxHeight : "1000px",
+                maxWidth: (_rest_style_maxWidth = (_rest_style3 = rest.style) === null || _rest_style3 === void 0 ? void 0 : _rest_style3.maxWidth) !== null && _rest_style_maxWidth !== void 0 ? _rest_style_maxWidth : "1000px"
             },
             onClickCapture: ()=>{
                 windowId && windowId.current && windowStack.pushToTop(windowId.current);
@@ -467,7 +653,10 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
             ref: windowRef,
             children: [
                 /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-                    className: `contextwindow-title ${moving ? "moving" : ""}`,
+                    className: [
+                        (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitle,
+                        moving ? (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).moving : ""
+                    ].filter((c)=>c !== "").join(" "),
                     onMouseDown: (e)=>{
                         if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "none";
                         setMoving(true);
@@ -478,11 +667,11 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                     },
                     children: [
                         /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                            className: "contextwindow-title-text",
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleText,
                             children: title
                         }),
                         /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                            className: "contextwindow-title-close",
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleClose,
                             children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", {
                                 xmlns: "http://www.w3.org/2000/svg",
                                 width: "16",
@@ -499,7 +688,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                     ]
                 }),
                 /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                    className: "contextwindow-body",
+                    className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowBody,
                     children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
                         children: children
                     })