@asup/context-menu
Version:
REACT Typescript Context menu component
929 lines (836 loc) • 46.7 kB
JavaScript
import "./main.css";
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 {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, "AutoHeight", function () { return $62873e7e5aeec7f1$export$77bf000da9303d1; });
$parcel$export($b65191f6d0a0a991$exports, "ClickForMenu", function () { return $c3e82278b501f10c$export$d4ebdd58e04c6ace; });
$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; });
var $181673e3e0e596f3$exports = {};
$parcel$export($181673e3e0e596f3$exports, "autoHeightInner", function () { return $181673e3e0e596f3$export$df919f6b0f7f84e6; }, function (v) { return $181673e3e0e596f3$export$df919f6b0f7f84e6 = v; });
$parcel$export($181673e3e0e596f3$exports, "autoHeightWrapper", function () { return $181673e3e0e596f3$export$563bd8f955c52746; }, function (v) { return $181673e3e0e596f3$export$563bd8f955c52746 = v; });
var $181673e3e0e596f3$export$df919f6b0f7f84e6;
var $181673e3e0e596f3$export$563bd8f955c52746;
$181673e3e0e596f3$export$df919f6b0f7f84e6 = `aiw-AutoHeight-module-pDlSVW-autoHeightInner`;
$181673e3e0e596f3$export$563bd8f955c52746 = `aiw-AutoHeight-module-pDlSVW-autoHeightWrapper`;
function $62873e7e5aeec7f1$export$77bf000da9303d1(_param) {
var { children: children, hide: hide, duration: duration = 300 } = _param, rest = (0, $duWW8$_2)(_param, [
"children",
"hide",
"duration"
]);
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);
}, [
hide
]);
// Add ResizeObserver to update height on content resize, debounced
(0, $duWW8$useEffect)(()=>{
const transition = innerRef.current;
if (transition) {
const observer = new ResizeObserver(()=>{
setTargetHeight();
});
observer.observe(transition);
return ()=>{
observer.disconnect();
};
}
}, [
setTargetHeight
]);
// Trigger height change on children update
(0, $duWW8$useLayoutEffect)(()=>{
setTargetHeight();
}, [
setTargetHeight,
children
]);
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), {
height: height ? `${height}px` : "auto",
transitionDuration: `${duration}ms`
}),
children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($181673e3e0e596f3$exports))).autoHeightInner,
ref: innerRef,
children: targetChildren
})
}));
}
$62873e7e5aeec7f1$export$77bf000da9303d1.displayName = "AutoHeight";
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, "hidden", function () { return $47067f35ca62d4a5$export$73920f18ca706874; }, function (v) { return $47067f35ca62d4a5$export$73920f18ca706874 = 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$73920f18ca706874;
var $47067f35ca62d4a5$export$6e0e6ce39e5a0361;
var $47067f35ca62d4a5$export$664c6d24e3175067;
$47067f35ca62d4a5$export$2e2992790a6f69a8 = `aiw-ContextMenu-module-WinFxq-anchor`;
$47067f35ca62d4a5$export$6ed5f4fbab298e07 = `aiw-ContextMenu-module-WinFxq-caretHolder`;
$47067f35ca62d4a5$export$218b899e1d476006 = `aiw-ContextMenu-module-WinFxq-contextMenu`;
$47067f35ca62d4a5$export$ed8ffb5bb55a3bc8 = `aiw-ContextMenu-module-WinFxq-contextMenuHandler`;
$47067f35ca62d4a5$export$e5ea51c279904378 = `aiw-ContextMenu-module-WinFxq-contextMenuItem`;
$47067f35ca62d4a5$export$6ada86c5b962aa22 = `aiw-ContextMenu-module-WinFxq-contextMenuItemLabel`;
$47067f35ca62d4a5$export$683472f6198a076e = `aiw-ContextMenu-module-WinFxq-disabled`;
$47067f35ca62d4a5$export$73920f18ca706874 = `aiw-ContextMenu-module-WinFxq-hidden`;
$47067f35ca62d4a5$export$6e0e6ce39e5a0361 = `aiw-ContextMenu-module-WinFxq-subMenu`;
$47067f35ca62d4a5$export$664c6d24e3175067 = `aiw-ContextMenu-module-WinFxq-visible`;
const $6ca59110355c8bf1$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose, visible: visible })=>{
return /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).caretHolder,
children: [
/*#__PURE__*/ (0, $duWW8$jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $duWW8$jsx)("path", {
d: "m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"
})
}),
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).subMenu,
children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
visible: visible,
entries: entries,
xPos: 14,
yPos: -21,
toClose: toClose
})
})
]
});
};
$6ca59110355c8bf1$export$7e4e6110f96afd7e.displayName = "ContextSubMenu";
const $813754bb7a4251f1$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toClose })=>{
const [target, setTarget] = (0, $duWW8$useState)(null);
const [subMenuVisible, setSubMenuVisible] = (0, $duWW8$useState)(false);
return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
className: [
(0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuItem,
entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).disabled : ""
].filter((c)=>c !== "").join(" "),
onMouseEnter: ()=>{
setSubMenuVisible(true);
},
onMouseLeave: ()=>{
setSubMenuVisible(false);
},
children: [
typeof entry.label === "string" ? /*#__PURE__*/ (0, $duWW8$jsx)("span", {
"aria-label": typeof entry.label === "string" ? entry.label : undefined,
"aria-disabled": entry.disabled,
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$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();
if (!entry.disabled) {
if (entry.action) entry.action(target, e);
toClose();
}
},
children: entry.label
}) : entry.label,
entry.group && /*#__PURE__*/ (0, $duWW8$jsx)((0, $6ca59110355c8bf1$export$7e4e6110f96afd7e), {
toClose: toClose,
entries: entry.group,
visible: subMenuVisible
})
]
});
};
const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$forwardRef)(({ visible: visible, entries: entries, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{
return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
ref: ref,
className: [
(0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenu,
visible ? (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).hidden
].filter((c)=>c !== "").join(" "),
style: {
top: `${yPos}px`,
left: `${xPos}px`
},
onContextMenu: (e)=>{
e.preventDefault();
e.stopPropagation();
},
children: entries.map((entry, i)=>/*#__PURE__*/ (0, $duWW8$jsx)((0, $813754bb7a4251f1$export$c868ef28d2ba36f1), {
entry: entry,
toClose: toClose
}, i))
});
});
$567ed433af94513f$export$8dc6765e8be191c7.displayName = "ContextMenu";
const $c3e82278b501f10c$export$d4ebdd58e04c6ace = (_param)=>{
var { id: id, menuItems: menuItems, children: children } = _param, rest = (0, $duWW8$_2)(_param, [
"id",
"menuItems",
"children"
]);
// Menu state
const [menuInDom, setMenuInDom] = (0, $duWW8$useState)(false);
const [menuVisible, setMenuVisible] = (0, $duWW8$useState)(false);
const [menuXPos, setMenuXPos] = (0, $duWW8$useState)(0);
const [menuYPos, setMenuYPos] = (0, $duWW8$useState)(0);
// Set up outsideClick handler
const menuRef = (0, $duWW8$useRef)(null);
// Handle click off the menu
const handleClick = (0, $duWW8$useCallback)((e)=>{
var _menuRef_current;
if (menuRef.current && (e.target instanceof Element && !((_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.contains(e.target)) || !(e.target instanceof Element))) setMenuInDom(false);
}, []);
const removeController = (0, $duWW8$useRef)(new AbortController());
(0, $duWW8$useEffect)(()=>{
if (!menuVisible) {
removeController.current.abort();
removeController.current = new AbortController();
setTimeout(()=>{
if (!removeController.current.signal.aborted) setMenuInDom(false);
}, 300);
}
}, [
menuVisible
]);
// Update the document click handler
(0, $duWW8$useEffect)(()=>{
if (menuInDom) document.addEventListener("mousedown", handleClick);
return ()=>{
document.removeEventListener("mousedown", handleClick);
removeController.current.abort();
};
}, [
handleClick,
menuInDom
]);
return /*#__PURE__*/ (0, $duWW8$jsxs)((0, $duWW8$Fragment), {
children: [
/*#__PURE__*/ (0, $duWW8$jsx)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
id: id,
onClick: (e)=>{
var _rest_onClick;
if (menuItems) {
setMenuInDom(true);
e.preventDefault();
e.stopPropagation();
setTimeout(()=>{
removeController.current.abort();
setMenuVisible(true);
setMenuXPos(e.pageX);
setMenuYPos(e.pageY);
}, 1);
} else (_rest_onClick = rest.onClick) === null || _rest_onClick === void 0 ? void 0 : _rest_onClick.call(rest, e);
},
children: children
})),
menuInDom && menuItems && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).anchor,
children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
visible: menuVisible,
ref: menuRef,
entries: menuItems,
xPos: menuXPos,
yPos: menuYPos,
toClose: ()=>{
setMenuVisible(false);
}
})
}), document.body)
]
});
};
$c3e82278b501f10c$export$d4ebdd58e04c6ace.displayName = "ClickForMenu";
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, "lowMenuButtonHolder", function () { return $c7a6ae87165004e6$export$22ec12d194e0789c; }, function (v) { return $c7a6ae87165004e6$export$22ec12d194e0789c = 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$22ec12d194e0789c;
var $c7a6ae87165004e6$export$2ad34a478577e75d;
var $c7a6ae87165004e6$export$6e0e6ce39e5a0361;
var $c7a6ae87165004e6$export$664c6d24e3175067;
$c7a6ae87165004e6$export$6ed5f4fbab298e07 = `aiw-LowMenu-module-JfzGeq-caretHolder`;
$c7a6ae87165004e6$export$683472f6198a076e = `aiw-LowMenu-module-JfzGeq-disabled`;
$c7a6ae87165004e6$export$73920f18ca706874 = `aiw-LowMenu-module-JfzGeq-hidden`;
$c7a6ae87165004e6$export$59e4b099a896b33 = `aiw-LowMenu-module-JfzGeq-lowMenu`;
$c7a6ae87165004e6$export$19fbf76b734bf310 = `aiw-LowMenu-module-JfzGeq-lowMenu-item`;
$c7a6ae87165004e6$export$22ec12d194e0789c = `aiw-LowMenu-module-JfzGeq-lowMenuButtonHolder`;
$c7a6ae87165004e6$export$2ad34a478577e75d = `aiw-LowMenu-module-JfzGeq-lowMenuItem`;
$c7a6ae87165004e6$export$6e0e6ce39e5a0361 = `aiw-LowMenu-module-JfzGeq-subMenu`;
$c7a6ae87165004e6$export$664c6d24e3175067 = `aiw-LowMenu-module-JfzGeq-visible`;
const $61945e5157f5e5bf$export$251b9f54013cdfac = ({ entry: entry })=>{
const [visible, setVisible] = (0, $duWW8$useState)(false);
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: (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).caretHolder,
onMouseEnter: ()=>{
setVisible(true);
},
onMouseLeave: ()=>{
setVisible(false);
},
children: [
/*#__PURE__*/ (0, $duWW8$jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $duWW8$jsx)("path", {
d: "m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"
})
}),
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).subMenu,
children: visible && /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
visible: visible,
entries: entry.group,
xPos: 14,
yPos: entry.group.length * -21 - 8,
toClose: ()=>setVisible(false)
})
})
]
});
};
$61945e5157f5e5bf$export$251b9f54013cdfac.displayName = "LowSubMenu";
const $556d6f9158abfc99$export$aafc28aea571c4bc = ({ entry: entry })=>{
const [target, setTarget] = (0, $duWW8$useState)(null);
return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
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,
onMouseEnter: ()=>{
const sel = window.getSelection();
const target = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
setTarget(target);
},
onMouseLeave: ()=>{
setTarget(null);
},
onClick: (e)=>{
var _entry_action;
e.preventDefault();
e.stopPropagation();
if (!entry.disabled) (_entry_action = entry.action) === null || _entry_action === void 0 ? void 0 : _entry_action.call(entry, target);
},
children: [
/*#__PURE__*/ (0, $duWW8$jsx)("span", {
children: entry.label
}),
entry.group && /*#__PURE__*/ (0, $duWW8$jsx)((0, $61945e5157f5e5bf$export$251b9f54013cdfac), {
entry: entry
})
]
});
};
$556d6f9158abfc99$export$aafc28aea571c4bc.displayName = "LowMenuButton";
const $914758b0c9d59759$export$49e8edc8ebca5f25 = ({ entries: entries, visible: visible, xPos: xPos, yPos: yPos, maxWidth: maxWidth })=>{
return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
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`,
maxWidth: `calc(${maxWidth}px)`,
width: `calc(${maxWidth}px - 4px)`
},
children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($c7a6ae87165004e6$exports))).lowMenuButtonHolder,
children: entries.map((e, i)=>/*#__PURE__*/ (0, $duWW8$jsx)((0, $556d6f9158abfc99$export$aafc28aea571c4bc), {
entry: e
}, i))
})
});
};
$914758b0c9d59759$export$49e8edc8ebca5f25.displayName = "LowMenu";
const $1e1c1e9e0b943830$export$fc58dc71afe92de2 = /*#__PURE__*/ (0, $duWW8$createContext)(null);
function $1e1c1e9e0b943830$var$isDivider(label) {
return typeof label !== "string" && label.type === "hr";
}
const $1e1c1e9e0b943830$export$ed4f9641643dc7e4 = (_param)=>{
var { children: children, menuItems: menuItems, showLowMenu: showLowMenu = false } = _param, rest = (0, $duWW8$_2)(_param, [
"children",
"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
]);
// Menu resources
const divHandlderRef = (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 [menuInDom, setMenuInDom] = (0, $duWW8$useState)(false);
const [mouseOverHandlerDiv, setMouseOverHandlerDiv] = (0, $duWW8$useState)(false);
const [mouseOverMenu, setMouseOverMenu] = (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;
// Handle click off the menu
const handleClick = (0, $duWW8$useCallback)((e)=>{
var _menuRef_current;
if (menuRef.current && (e.target instanceof Element && !((_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.contains(e.target)) || !(e.target instanceof Element))) setMenuVisible(false);
}, []);
// Update the document click handler
(0, $duWW8$useEffect)(()=>{
if (menuVisible) document.addEventListener("mousedown", handleClick);
return ()=>{
document.removeEventListener("mousedown", handleClick);
};
}, [
handleClick,
menuVisible
]);
const removeController = (0, $duWW8$useRef)(new AbortController());
(0, $duWW8$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, $duWW8$jsxs)($1e1c1e9e0b943830$export$fc58dc71afe92de2.Provider, {
value: {
menuItems: thisMenuItems
},
children: [
/*#__PURE__*/ (0, $duWW8$jsx)("div", (0, $duWW8$_1)((0, $duWW8$_)({
ref: divHandlderRef
}, rest), {
className: [
(0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).contextMenuHandler,
rest.className
].join(" "),
onContextMenu: async (e)=>{
if (!showLowMenu) {
setMenuInDom(true);
e.preventDefault();
e.stopPropagation();
setTimeout(()=>{
removeController.current.abort();
setMenuVisible(true);
setMenuXPos(e.pageX);
setMenuYPos(e.pageY);
}, 1);
}
},
onMouseEnter: async (e)=>{
var _rest_onMouseEnter;
if (showLowMenu) {
setMenuInDom(true);
setMouseOverHandlerDiv(false);
setTimeout(()=>{
removeController.current.abort();
setMouseOverHandlerDiv(true);
}, 1);
}
(_rest_onMouseEnter = rest.onMouseEnter) === null || _rest_onMouseEnter === void 0 ? void 0 : _rest_onMouseEnter.call(rest, e);
},
onMouseLeave: async (e)=>{
var _rest_onMouseLeave;
if (showLowMenu) {
removeController.current.abort();
removeController.current = new AbortController();
setMouseOverHandlerDiv(false);
}
(_rest_onMouseLeave = rest.onMouseLeave) === null || _rest_onMouseLeave === void 0 ? void 0 : _rest_onMouseLeave.call(rest, e);
},
children: children
})),
menuInDom && divHandlerPos && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($47067f35ca62d4a5$exports))).anchor,
onMouseEnter: ()=>{
removeController.current.abort();
setMouseOverMenu(true);
},
onMouseLeave: ()=>{
removeController.current.abort();
removeController.current = new AbortController();
setMouseOverMenu(false);
},
children: showLowMenu ? /*#__PURE__*/ (0, $duWW8$jsx)((0, $914758b0c9d59759$export$49e8edc8ebca5f25), {
visible: mouseOverHandlerDiv,
entries: menuItems,
xPos: divHandlerPos.left,
yPos: divHandlerPos.bottom,
maxWidth: divHandlerPos.width
}) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
visible: menuVisible,
ref: menuRef,
entries: thisMenuItems,
xPos: menuXPos,
yPos: menuYPos,
toClose: ()=>{
setMenuVisible(false);
setMouseOverMenu(false);
}
})
}), document.body)
]
});
};
$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
};
}
};
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-ContextWindow-module-RIIF9a-contextWindow`;
$ddf7153c7c69b209$export$9f3a8a17ac700f7d = `aiw-ContextWindow-module-RIIF9a-contextWindowAnchor`;
$ddf7153c7c69b209$export$dfb2c4d2d1c0156f = `aiw-ContextWindow-module-RIIF9a-contextWindowBody`;
$ddf7153c7c69b209$export$1b02f2cd2f7db0f4 = `aiw-ContextWindow-module-RIIF9a-contextWindowTitle`;
$ddf7153c7c69b209$export$7ba38d4cc2870e66 = `aiw-ContextWindow-module-RIIF9a-contextWindowTitleClose`;
$ddf7153c7c69b209$export$cebbac70b4d99c48 = `aiw-ContextWindow-module-RIIF9a-contextWindowTitleText`;
$ddf7153c7c69b209$export$d03a2f3acc60252b = `aiw-ContextWindow-module-RIIF9a-moving`;
const $17c46b9e6a2eb66e$export$aff5d0593e3727b0 = /*#__PURE__*/ (0, $duWW8$createContext)(null);
const $17c46b9e6a2eb66e$var$pushToTop = (windowId, minZIndex, windowList, setWindowList)=>{
const otherWindows = windowList.filter((w)=>w.windowId !== windowId).map((w, i)=>({
windowId: w.windowId,
zIndex: minZIndex + i
}));
setWindowList([
...otherWindows,
{
windowId: windowId,
zIndex: minZIndex + otherWindows.length
}
]);
};
const $17c46b9e6a2eb66e$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000, children: children })=>{
const [currentWindows, setCurrentWindows] = (0, $duWW8$useState)([]);
return /*#__PURE__*/ (0, $duWW8$jsx)($17c46b9e6a2eb66e$export$aff5d0593e3727b0.Provider, {
value: {
currentWindows: currentWindows.map((w)=>({
windowId: w.windowId,
zIndex: minZIndex + w.zIndex
})),
pushToTop: (ret)=>$17c46b9e6a2eb66e$var$pushToTop(ret, minZIndex, currentWindows, setCurrentWindows)
},
children: children
});
};
$17c46b9e6a2eb66e$export$9f37482ccd50dad2.displayName = "ContextWindowStack";
const $b5e8657823def5be$export$1af8984c69ba1b24 = (_param)=>{
var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose } = _param, rest = (0, $duWW8$_2)(_param, [
"id",
"visible",
"title",
"titleElement",
"children",
"onOpen",
"onClose"
]);
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);
const windowRef = (0, $duWW8$useRef)(null);
const [windowInDOM, setWindowInDOM] = (0, $duWW8$useState)(false);
const [windowVisible, setWindowVisible] = (0, $duWW8$useState)(false);
const zIndex = (0, $duWW8$useMemo)(()=>{
var _windowStack_currentWindows_find;
var _windowStack_currentWindows_find_zIndex;
return (_windowStack_currentWindows_find_zIndex = windowStack === null || windowStack === void 0 ? void 0 : (_windowStack_currentWindows_find = windowStack.currentWindows.find((w)=>w.windowId === windowId.current)) === null || _windowStack_currentWindows_find === void 0 ? void 0 : _windowStack_currentWindows_find.zIndex) !== null && _windowStack_currentWindows_find_zIndex !== void 0 ? _windowStack_currentWindows_find_zIndex : 1;
}, [
windowStack === null || windowStack === void 0 ? void 0 : windowStack.currentWindows
]);
// Position
const windowPos = (0, $duWW8$useRef)({
x: 0,
y: 0
});
const [moving, setMoving] = (0, $duWW8$useState)(false);
const move = (0, $duWW8$useCallback)((x, y)=>{
if (windowRef.current && windowPos.current) {
const window1 = windowRef.current;
const pos = windowPos.current;
pos.x += x;
pos.y += y;
window1.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
}
}, []);
const checkPosition = (0, $duWW8$useCallback)(()=>{
const chkPos = (0, $ab4d5d6bf03370d0$export$d81cfea7c54be196)(windowRef);
move(chkPos.translateX, chkPos.translateY);
}, [
move
]);
const mouseMove = (0, $duWW8$useCallback)((e)=>{
e.preventDefault();
e.stopPropagation();
move(e.movementX, e.movementY);
}, [
move
]);
const mouseUp = (0, $duWW8$useCallback)((e)=>{
e.preventDefault();
e.stopPropagation();
setMoving(false);
checkPosition();
document.removeEventListener("mousemove", mouseMove);
document.removeEventListener("mouseup", mouseUp);
window.removeEventListener("resize", checkPosition);
if (e.target && (e.target instanceof HTMLElement || e.target instanceof SVGElement)) e.target.style.userSelect = "auto";
}, [
checkPosition,
mouseMove
]);
// Update visibility
(0, $duWW8$useEffect)(()=>{
if (windowStack) {
// 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;
}
windowStack.pushToTop(windowId.current);
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
};
}
checkPosition();
} else if (windowId.current && !visible && windowVisible) setWindowVisible(false);
else if (windowId.current && !visible && windowInDOM) setWindowInDOM(false);
}
}, [
checkPosition,
onOpen,
visible,
windowInDOM,
windowStack,
windowVisible
]);
var _rest_style_minHeight, _rest_style_minWidth, _rest_style_maxHeight, _rest_style_maxWidth;
return /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowAnchor,
ref: divRef,
children: [
!windowStack && /*#__PURE__*/ (0, $duWW8$jsxs)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
children: [
process.env.NODE_ENV !== "production" && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
style: {
backgroundColor: "red",
color: "white",
padding: "8px",
fontSize: "48px"
},
children: "WARNING: No ContextWindowStack found"
}),
children
]
})),
windowStack && windowInDOM && /*#__PURE__*/ (0, $duWW8$createPortal)(/*#__PURE__*/ (0, $duWW8$jsxs)("div", (0, $duWW8$_1)((0, $duWW8$_)({}, rest), {
ref: windowRef,
id: id,
className: [
(0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindow,
rest.className
].filter((c)=>c).join(" "),
style: (0, $duWW8$_1)((0, $duWW8$_)({}, rest.style), {
opacity: moving ? 0.8 : windowVisible ? 1 : 0,
visibility: windowVisible ? "visible" : "hidden",
zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 1,
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: (e)=>{
var _rest_onClickCapture;
if (windowId.current) windowStack.pushToTop(windowId.current);
(_rest_onClickCapture = rest.onClickCapture) === null || _rest_onClickCapture === void 0 ? void 0 : _rest_onClickCapture.call(rest, e);
},
children: [
/*#__PURE__*/ (0, $duWW8$jsxs)("div", {
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);
if (windowId.current) windowStack.pushToTop(windowId.current);
document.addEventListener("mouseup", mouseUp);
document.addEventListener("mousemove", mouseMove);
window.addEventListener("resize", ()=>checkPosition());
},
children: [
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleText,
title: title,
children: titleElement ? titleElement : title
}),
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowTitleClose,
role: "button",
"aria-label": "Close",
onClick: onClose,
title: `Close ${title && title.trim() !== "" ? title : "window"}`,
children: /*#__PURE__*/ (0, $duWW8$jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $duWW8$jsx)("path", {
d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
})
})
})
]
}),
/*#__PURE__*/ (0, $duWW8$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($ddf7153c7c69b209$exports))).contextWindowBody,
children: /*#__PURE__*/ (0, $duWW8$jsx)("div", {
children: children
})
})
]
})), document.body)
]
});
};
$b5e8657823def5be$export$1af8984c69ba1b24.displayName = "ContextWindow";
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};
//# sourceMappingURL=main.js.map