@asup/context-menu 1.3.2 → 1.3.4

package/dist/main.js

@@ -1,12 +1,18 @@
 import "./main.css";
-import {jsxs as $duWW8$jsxs, Fragment as $duWW8$Fragment, jsx as $duWW8$jsx} from "react/jsx-runtime";
-import $duWW8$react, {useRef as $duWW8$useRef, useState as $duWW8$useState, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect, useContext as $duWW8$useContext, useMemo as $duWW8$useMemo, createContext as $duWW8$createContext} from "react";
+import {jsx as $duWW8$jsx, jsxs as $duWW8$jsxs, Fragment as $duWW8$Fragment} from "react/jsx-runtime";
+import $duWW8$react, {createContext as $duWW8$createContext, useContext as $duWW8$useContext, useMemo as $duWW8$useMemo, useRef as $duWW8$useRef, useState as $duWW8$useState, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect} from "react";
 import {createPortal as $duWW8$createPortal} from "react-dom";
 
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
 var $b65191f6d0a0a991$exports = {};
 
 $parcel$export($b65191f6d0a0a991$exports, "ContextMenuHandler", function () { return $1e1c1e9e0b943830$export$ed4f9641643dc7e4; });
@@ -17,13 +23,45 @@ $parcel$export($b65191f6d0a0a991$exports, "ContextWindowStack", function () { re
 
 
 
+var $47067f35ca62d4a5$exports = {};
+
+$parcel$export($47067f35ca62d4a5$exports, "anchor", function () { return $47067f35ca62d4a5$export$2e2992790a6f69a8; }, function (v) { return $47067f35ca62d4a5$export$2e2992790a6f69a8 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "caretHolder", function () { return $47067f35ca62d4a5$export$6ed5f4fbab298e07; }, function (v) { return $47067f35ca62d4a5$export$6ed5f4fbab298e07 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "contextMenu", function () { return $47067f35ca62d4a5$export$218b899e1d476006; }, function (v) { return $47067f35ca62d4a5$export$218b899e1d476006 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "contextMenuHandler", function () { return $47067f35ca62d4a5$export$ed8ffb5bb55a3bc8; }, function (v) { return $47067f35ca62d4a5$export$ed8ffb5bb55a3bc8 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "contextMenuItem", function () { return $47067f35ca62d4a5$export$e5ea51c279904378; }, function (v) { return $47067f35ca62d4a5$export$e5ea51c279904378 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "contextMenuItemLabel", function () { return $47067f35ca62d4a5$export$6ada86c5b962aa22; }, function (v) { return $47067f35ca62d4a5$export$6ada86c5b962aa22 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "disabled", function () { return $47067f35ca62d4a5$export$683472f6198a076e; }, function (v) { return $47067f35ca62d4a5$export$683472f6198a076e = v; });
+$parcel$export($47067f35ca62d4a5$exports, "subMenu", function () { return $47067f35ca62d4a5$export$6e0e6ce39e5a0361; }, function (v) { return $47067f35ca62d4a5$export$6e0e6ce39e5a0361 = v; });
+$parcel$export($47067f35ca62d4a5$exports, "visible", function () { return $47067f35ca62d4a5$export$664c6d24e3175067; }, function (v) { return $47067f35ca62d4a5$export$664c6d24e3175067 = v; });
+var $47067f35ca62d4a5$export$2e2992790a6f69a8;
+var $47067f35ca62d4a5$export$6ed5f4fbab298e07;
+var $47067f35ca62d4a5$export$218b899e1d476006;
+var $47067f35ca62d4a5$export$ed8ffb5bb55a3bc8;
+var $47067f35ca62d4a5$export$e5ea51c279904378;
+var $47067f35ca62d4a5$export$6ada86c5b962aa22;
+var $47067f35ca62d4a5$export$683472f6198a076e;
+var $47067f35ca62d4a5$export$6e0e6ce39e5a0361;
+var $47067f35ca62d4a5$export$664c6d24e3175067;
+$47067f35ca62d4a5$export$2e2992790a6f69a8 = `aiw-WinFxq-anchor`;
+$47067f35ca62d4a5$export$6ed5f4fbab298e07 = `aiw-WinFxq-caretHolder`;
+$47067f35ca62d4a5$export$218b899e1d476006 = `aiw-WinFxq-contextMenu`;
+$47067f35ca62d4a5$export$ed8ffb5bb55a3bc8 = `aiw-WinFxq-contextMenuHandler`;
+$47067f35ca62d4a5$export$e5ea51c279904378 = `aiw-WinFxq-contextMenuItem`;
+$47067f35ca62d4a5$export$6ada86c5b962aa22 = `aiw-WinFxq-contextMenuItemLabel`;
+$47067f35ca62d4a5$export$683472f6198a076e = `aiw-WinFxq-disabled`;
+$47067f35ca62d4a5$export$6e0e6ce39e5a0361 = `aiw-WinFxq-subMenu`;
+$47067f35ca62d4a5$export$664c6d24e3175067 = `aiw-WinFxq-visible`;
+
+
+
 
 
 
 const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, target: target, toClose: toClose })=>{
     const [visible, setVisible] = (0, $duWW8$useState)(false);
     return /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
-        className: "caret-holder",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).caretHolder,
         onMouseEnter: ()=>{
             setVisible(true);
         },
@@ -42,7 +80,7 @@ const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, target: t
                 })
             }),
             /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                className: "sub-menu",
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).subMenu,
                 children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
                     visible: visible,
                     entries: entries,
@@ -62,7 +100,10 @@ const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$react
     $567ed433af94513f$export$8dc6765e8be191c7.displayName = "ContextMenu";
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
         ref: ref,
-        className: `context-menu${visible ? " visible" : ""}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenu,
+            visible ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).visible : ""
+        ].filter((c)=>c !== "").join(" "),
         style: {
             top: `${yPos}px`,
             left: `${xPos}px`
@@ -72,12 +113,15 @@ const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$react
             e.stopPropagation();
         },
         children: entries.map((entry, i)=>/*#__PURE__*/ (0, $duWW8$jsxs)("div", {
-                className: `context-menu-item${entry.disabled ? " disabled" : ""}`,
+                className: [
+                    (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuItem,
+                    entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).disabled : ""
+                ].filter((c)=>c !== "").join(" "),
                 children: [
-                    /*#__PURE__*/ (0, $duWW8$jsx)("span", {
+                    typeof entry.label === "string" ? /*#__PURE__*/ (0, $duWW8$jsx)("span", {
                         "aria-label": typeof entry.label === "string" ? entry.label : undefined,
                         "aria-disabled": entry.disabled,
-                        className: "context-menu-item-label",
+                        className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuItemLabel,
                         onMouseDownCapture: (ev)=>{
                             ev.preventDefault();
                             ev.stopPropagation();
@@ -85,7 +129,7 @@ const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$react
                             !entry.disabled && toClose();
                         },
                         children: entry.label
-                    }),
+                    }) : entry.label,
                     entry.group && /*#__PURE__*/ (0, $duWW8$jsx)((0, $6ca59110355c8bf1$export$7e4e6110f96afd7e), {
                         toClose: toClose,
                         entries: entry.group,
@@ -100,6 +144,35 @@ $567ed433af94513f$export$8dc6765e8be191c7.displayName = "ContextMenu";
 
 
 
+var $c7a6ae87165004e6$exports = {};
+
+$parcel$export($c7a6ae87165004e6$exports, "caretHolder", function () { return $c7a6ae87165004e6$export$6ed5f4fbab298e07; }, function (v) { return $c7a6ae87165004e6$export$6ed5f4fbab298e07 = v; });
+$parcel$export($c7a6ae87165004e6$exports, "disabled", function () { return $c7a6ae87165004e6$export$683472f6198a076e; }, function (v) { return $c7a6ae87165004e6$export$683472f6198a076e = v; });
+$parcel$export($c7a6ae87165004e6$exports, "hidden", function () { return $c7a6ae87165004e6$export$73920f18ca706874; }, function (v) { return $c7a6ae87165004e6$export$73920f18ca706874 = v; });
+$parcel$export($c7a6ae87165004e6$exports, "lowMenu", function () { return $c7a6ae87165004e6$export$59e4b099a896b33; }, function (v) { return $c7a6ae87165004e6$export$59e4b099a896b33 = v; });
+$parcel$export($c7a6ae87165004e6$exports, "lowMenu-item", function () { return $c7a6ae87165004e6$export$19fbf76b734bf310; }, function (v) { return $c7a6ae87165004e6$export$19fbf76b734bf310 = v; });
+$parcel$export($c7a6ae87165004e6$exports, "lowMenuItem", function () { return $c7a6ae87165004e6$export$2ad34a478577e75d; }, function (v) { return $c7a6ae87165004e6$export$2ad34a478577e75d = v; });
+$parcel$export($c7a6ae87165004e6$exports, "subMenu", function () { return $c7a6ae87165004e6$export$6e0e6ce39e5a0361; }, function (v) { return $c7a6ae87165004e6$export$6e0e6ce39e5a0361 = v; });
+$parcel$export($c7a6ae87165004e6$exports, "visible", function () { return $c7a6ae87165004e6$export$664c6d24e3175067; }, function (v) { return $c7a6ae87165004e6$export$664c6d24e3175067 = v; });
+var $c7a6ae87165004e6$export$6ed5f4fbab298e07;
+var $c7a6ae87165004e6$export$683472f6198a076e;
+var $c7a6ae87165004e6$export$73920f18ca706874;
+var $c7a6ae87165004e6$export$59e4b099a896b33;
+var $c7a6ae87165004e6$export$19fbf76b734bf310;
+var $c7a6ae87165004e6$export$2ad34a478577e75d;
+var $c7a6ae87165004e6$export$6e0e6ce39e5a0361;
+var $c7a6ae87165004e6$export$664c6d24e3175067;
+$c7a6ae87165004e6$export$6ed5f4fbab298e07 = `aiw-JfzGeq-caretHolder`;
+$c7a6ae87165004e6$export$683472f6198a076e = `aiw-JfzGeq-disabled`;
+$c7a6ae87165004e6$export$73920f18ca706874 = `aiw-JfzGeq-hidden`;
+$c7a6ae87165004e6$export$59e4b099a896b33 = `aiw-JfzGeq-lowMenu`;
+$c7a6ae87165004e6$export$19fbf76b734bf310 = `aiw-JfzGeq-lowMenu-item`;
+$c7a6ae87165004e6$export$2ad34a478577e75d = `aiw-JfzGeq-lowMenuItem`;
+$c7a6ae87165004e6$export$6e0e6ce39e5a0361 = `aiw-JfzGeq-subMenu`;
+$c7a6ae87165004e6$export$664c6d24e3175067 = `aiw-JfzGeq-visible`;
+
+
+
 
 
 
@@ -110,7 +183,7 @@ const $61945e5157f5e5bf$export$251b9f54013cdfac = ({ entry: entry, target: targe
     if (!entry.group || entry.group.length === 0) return /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$Fragment), {});
     return /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
         "aria-label": `Sub menu for ${entry.label}`,
-        className: "caret-holder",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).caretHolder,
         onMouseEnter: ()=>{
             setVisible(true);
         },
@@ -129,7 +202,7 @@ const $61945e5157f5e5bf$export$251b9f54013cdfac = ({ entry: entry, target: targe
                 })
             }),
             /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                className: "sub-menu",
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).subMenu,
                 children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
                     visible: visible,
                     entries: entry.group,
@@ -147,7 +220,10 @@ $61945e5157f5e5bf$export$251b9f54013cdfac.displayName = "LowSubMenu";
 
 const $556d6f9158abfc99$export$aafc28aea571c4bc = ({ entry: entry, target: target })=>{
     return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
-        className: `low-menu-item${entry.disabled ? " disabled" : ""}`,
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).lowMenuItem,
+            entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).disabled : ""
+        ].filter((c)=>c !== "").join(" "),
         "aria-label": typeof entry.label === "string" ? entry.label : undefined,
         "aria-disabled": entry.disabled,
         onClick: (event)=>{
@@ -157,7 +233,6 @@ const $556d6f9158abfc99$export$aafc28aea571c4bc = ({ entry: entry, target: targe
         },
         children: [
             /*#__PURE__*/ (0, $duWW8$jsx)("span", {
-                className: "low-menu-item-label",
                 children: entry.label
             }),
             entry.group && /*#__PURE__*/ (0, $duWW8$jsx)((0, $61945e5157f5e5bf$export$251b9f54013cdfac), {
@@ -170,10 +245,17 @@ const $556d6f9158abfc99$export$aafc28aea571c4bc = ({ entry: entry, target: targe
 $556d6f9158abfc99$export$aafc28aea571c4bc.displayName = "LowMenuButton";
 
 
-const $914758b0c9d59759$export$49e8edc8ebca5f25 = ({ entries: entries, target: target })=>{
+const $914758b0c9d59759$export$49e8edc8ebca5f25 = ({ entries: entries, target: target, visible: visible, xPos: xPos, yPos: yPos })=>{
     return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-        className: "low-menu",
+        className: [
+            (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).lowMenu,
+            visible ? (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).hidden
+        ].join(" "),
         "aria-label": "Low context menu",
+        style: {
+            left: `${xPos}px`,
+            top: `${yPos}px`
+        },
         children: entries.map((e, i)=>/*#__PURE__*/ (0, $duWW8$jsx)((0, $556d6f9158abfc99$export$aafc28aea571c4bc), {
                 entry: e,
                 target: target
@@ -183,18 +265,42 @@ const $914758b0c9d59759$export$49e8edc8ebca5f25 = ({ entries: entries, target: t
 $914758b0c9d59759$export$49e8edc8ebca5f25.displayName = "LowMenu";
 
 
-const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, style: style = {
-    height: "fit-content",
-    width: "fit-content"
-} })=>{
+const $1e1c1e9e0b943830$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $duWW8$createContext)(null);
+const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = ({ children: children, menuItems: menuItems, showLowMenu: showLowMenu = false, ...rest })=>{
+    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,
+                {
+                    label: /*#__PURE__*/ (0, $duWW8$jsx)("hr", {
+                        style: {
+                            flexGrow: 1,
+                            cursor: "none",
+                            margin: "0",
+                            padding: "0"
+                        }
+                    })
+                }
+            ] : [],
+            ...menuItems
+        ], [
+        higherContext,
+        menuItems
+    ]);
     // Menu resources
-    const divRef = (0, $duWW8$useRef)(null);
+    const divHandlderRef = (0, $duWW8$useRef)(null);
+    const divMenuRef = (0, $duWW8$useRef)(null);
     const menuRef = (0, $duWW8$useRef)(null);
     const [menuXPos, setMenuXPos] = (0, $duWW8$useState)(0);
     const [menuYPos, setMenuYPos] = (0, $duWW8$useState)(0);
     const [menuVisible, setMenuVisible] = (0, $duWW8$useState)(false);
     const [target, setTarget] = (0, $duWW8$useState)(null);
     const [lowTarget, setLowTarget] = (0, $duWW8$useState)(null);
+    const [lowMenuVisible, setLowMenuVisible] = (0, $duWW8$useState)(false);
+    // Get holder position
+    const divHandlerPos = divHandlderRef ? (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect() : null;
     // Show menu when context is requested
     const showMenu = (e)=>{
         const sel = window.getSelection();
@@ -221,35 +327,45 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = ({ children: children, menuIte
         handleClick,
         menuVisible
     ]);
-    return /*#__PURE__*/ (0, $duWW8$jsxs)((0, $duWW8$Fragment), {
+    return /*#__PURE__*/ (0, $duWW8$jsxs)($1e1c1e9e0b943830$export$fc58dc71afe92de2.Provider, {
+        value: {
+            menuItems: thisMenuItems
+        },
         children: [
             /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                ref: divHandlderRef,
+                ...rest,
+                className: [
+                    (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuHandler,
+                    rest.className
+                ].join(" "),
+                style: {
+                    ...rest.style
+                },
                 onContextMenu: showLowMenu ? undefined : showMenu,
-                className: "context-menu-handler",
-                style: style,
+                onMouseEnter: ()=>{
+                    showLowMenu && setLowMenuVisible(true);
+                },
+                onMouseLeave: ()=>{
+                    showLowMenu && setLowMenuVisible(false);
+                },
                 children: children
             }),
             menuVisible && !showLowMenu && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0
-                },
-                ref: divRef,
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).anchor,
+                ref: divMenuRef,
                 children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
                     visible: true,
                     ref: menuRef,
-                    entries: menuItems,
+                    entries: thisMenuItems,
                     xPos: menuXPos,
                     yPos: menuYPos,
                     target: target,
                     toClose: ()=>setMenuVisible(false)
                 })
             }), document.body),
-            showLowMenu && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                style: {
-                    position: "relative"
-                },
+            showLowMenu && divHandlerPos && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).anchor,
                 onMouseEnter: ()=>{
                     const sel = window.getSelection();
                     const lowSel = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
@@ -259,11 +375,13 @@ const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = ({ children: children, menuIte
                     setLowTarget(null);
                 },
                 children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $914758b0c9d59759$export$49e8edc8ebca5f25), {
+                    visible: lowMenuVisible,
                     entries: menuItems,
-                    target: lowTarget
+                    target: lowTarget,
+                    xPos: divHandlerPos.left,
+                    yPos: divHandlerPos.bottom
                 })
-            }),
-            " "
+            }), document.body)
         ]
     });
 };
@@ -273,6 +391,27 @@ $1e1c1e9e0b943830$export$ed4f9641643dc7e4.displayName = "ContextMenuHandler";
 
 
 
+const $ab4d5d6bf03370d0$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
+        };
+    }
+};
+
 
 
 
@@ -306,29 +445,33 @@ const $17c46b9e6a2eb66e$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000
 $17c46b9e6a2eb66e$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
 
 
-const $ab4d5d6bf03370d0$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 $b5e8657823def5be$export$1af8984c69ba1b24 = ({ id: id, visible: visible, title: title, style: style, children: children, onOpen: onOpen, onClose: onClose })=>{
+var $ddf7153c7c69b209$exports = {};
+
+$parcel$export($ddf7153c7c69b209$exports, "contextWindow", function () { return $ddf7153c7c69b209$export$72cad2e5ad4d2674; }, function (v) { return $ddf7153c7c69b209$export$72cad2e5ad4d2674 = v; });
+$parcel$export($ddf7153c7c69b209$exports, "contextWindowAnchor", function () { return $ddf7153c7c69b209$export$9f3a8a17ac700f7d; }, function (v) { return $ddf7153c7c69b209$export$9f3a8a17ac700f7d = v; });
+$parcel$export($ddf7153c7c69b209$exports, "contextWindowBody", function () { return $ddf7153c7c69b209$export$dfb2c4d2d1c0156f; }, function (v) { return $ddf7153c7c69b209$export$dfb2c4d2d1c0156f = v; });
+$parcel$export($ddf7153c7c69b209$exports, "contextWindowTitle", function () { return $ddf7153c7c69b209$export$1b02f2cd2f7db0f4; }, function (v) { return $ddf7153c7c69b209$export$1b02f2cd2f7db0f4 = v; });
+$parcel$export($ddf7153c7c69b209$exports, "contextWindowTitleClose", function () { return $ddf7153c7c69b209$export$7ba38d4cc2870e66; }, function (v) { return $ddf7153c7c69b209$export$7ba38d4cc2870e66 = v; });
+$parcel$export($ddf7153c7c69b209$exports, "contextWindowTitleText", function () { return $ddf7153c7c69b209$export$cebbac70b4d99c48; }, function (v) { return $ddf7153c7c69b209$export$cebbac70b4d99c48 = v; });
+$parcel$export($ddf7153c7c69b209$exports, "moving", function () { return $ddf7153c7c69b209$export$d03a2f3acc60252b; }, function (v) { return $ddf7153c7c69b209$export$d03a2f3acc60252b = v; });
+var $ddf7153c7c69b209$export$72cad2e5ad4d2674;
+var $ddf7153c7c69b209$export$9f3a8a17ac700f7d;
+var $ddf7153c7c69b209$export$dfb2c4d2d1c0156f;
+var $ddf7153c7c69b209$export$1b02f2cd2f7db0f4;
+var $ddf7153c7c69b209$export$7ba38d4cc2870e66;
+var $ddf7153c7c69b209$export$cebbac70b4d99c48;
+var $ddf7153c7c69b209$export$d03a2f3acc60252b;
+$ddf7153c7c69b209$export$72cad2e5ad4d2674 = `aiw-RIIF9a-contextWindow`;
+$ddf7153c7c69b209$export$9f3a8a17ac700f7d = `aiw-RIIF9a-contextWindowAnchor`;
+$ddf7153c7c69b209$export$dfb2c4d2d1c0156f = `aiw-RIIF9a-contextWindowBody`;
+$ddf7153c7c69b209$export$1b02f2cd2f7db0f4 = `aiw-RIIF9a-contextWindowTitle`;
+$ddf7153c7c69b209$export$7ba38d4cc2870e66 = `aiw-RIIF9a-contextWindowTitleClose`;
+$ddf7153c7c69b209$export$cebbac70b4d99c48 = `aiw-RIIF9a-contextWindowTitleText`;
+$ddf7153c7c69b209$export$d03a2f3acc60252b = `aiw-RIIF9a-moving`;
+
+
+const $b5e8657823def5be$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, $duWW8$useContext)((0, $17c46b9e6a2eb66e$export$aff5d0593e3727b0));
     const windowId = (0, $duWW8$useRef)(null);
     const divRef = (0, $duWW8$useRef)(null);
@@ -416,22 +559,23 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
         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, $duWW8$jsx)("div", {
-        className: "contextwindow-anchor",
+        className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowAnchor,
         ref: divRef,
         children: windowStack && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsxs)("div", {
+            ...rest,
             id: id,
-            className: "contextwindow",
+            className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$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);
@@ -439,7 +583,10 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
             ref: windowRef,
             children: [
                 /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
-                    className: `contextwindow-title ${moving ? "moving" : ""}`,
+                    className: [
+                        (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitle,
+                        moving ? (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$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);
@@ -450,11 +597,11 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                     },
                     children: [
                         /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                            className: "contextwindow-title-text",
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleText,
                             children: title
                         }),
                         /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                            className: "contextwindow-title-close",
+                            className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleClose,
                             children: /*#__PURE__*/ (0, $duWW8$jsx)("svg", {
                                 xmlns: "http://www.w3.org/2000/svg",
                                 width: "16",
@@ -471,7 +618,7 @@ const $b5e8657823def5be$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
                     ]
                 }),
                 /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                    className: "contextwindow-body",
+                    className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowBody,
                     children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
                         children: children
                     })