UNPKG

@asup/context-menu

Version:
946 lines (850 loc) 48.3 kB
require("./main.css"); var $gTuX4$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs"); var $gTuX4$swchelperscjs_object_spread_propscjs = require("@swc/helpers/cjs/_object_spread_props.cjs"); var $gTuX4$swchelperscjs_object_without_propertiescjs = require("@swc/helpers/cjs/_object_without_properties.cjs"); var $gTuX4$reactjsxruntime = require("react/jsx-runtime"); var $gTuX4$react = require("react"); var $gTuX4$reactdom = require("react-dom"); function $parcel$exportWildcard(dest, source) { Object.keys(source).forEach(function(key) { if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) { return; } Object.defineProperty(dest, key, { enumerable: true, get: function get() { return source[key]; } }); }); return dest; } 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 $a68bd8a6c0fd98c2$exports = {}; $parcel$export($a68bd8a6c0fd98c2$exports, "AutoHeight", function () { return $95149596d5a7ed2b$export$77bf000da9303d1; }); $parcel$export($a68bd8a6c0fd98c2$exports, "ClickForMenu", function () { return $a79b75d040e03c92$export$d4ebdd58e04c6ace; }); $parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenu", function () { return $5150b66b01c99189$export$8dc6765e8be191c7; }); $parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenuHandler", function () { return $3c568ee547c732c3$export$ed4f9641643dc7e4; }); $parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindow", function () { return $46fb0088a1bbb6d8$export$1af8984c69ba1b24; }); $parcel$export($a68bd8a6c0fd98c2$exports, "ContextWindowStack", function () { return $16208d559c772441$export$9f37482ccd50dad2; }); var $796f463330153c24$exports = {}; $parcel$export($796f463330153c24$exports, "autoHeightInner", function () { return $796f463330153c24$export$df919f6b0f7f84e6; }, function (v) { return $796f463330153c24$export$df919f6b0f7f84e6 = v; }); $parcel$export($796f463330153c24$exports, "autoHeightWrapper", function () { return $796f463330153c24$export$563bd8f955c52746; }, function (v) { return $796f463330153c24$export$563bd8f955c52746 = v; }); var $796f463330153c24$export$df919f6b0f7f84e6; var $796f463330153c24$export$563bd8f955c52746; $796f463330153c24$export$df919f6b0f7f84e6 = `aiw-AutoHeight-module-pDlSVW-autoHeightInner`; $796f463330153c24$export$563bd8f955c52746 = `aiw-AutoHeight-module-pDlSVW-autoHeightWrapper`; function $95149596d5a7ed2b$export$77bf000da9303d1(_param) { var { children: children, hide: hide, duration: duration = 300 } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [ "children", "hide", "duration" ]); const wrapperRef = (0, $gTuX4$react.useRef)(null); const innerRef = (0, $gTuX4$react.useRef)(null); const [height, setHeight] = (0, $gTuX4$react.useState)(null); const targetChildren = (0, $gTuX4$react.useMemo)(()=>hide || !children ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { style: { height: "1px" } }) : children, [ children, hide ]); const setTargetHeight = (0, $gTuX4$react.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, $gTuX4$react.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, $gTuX4$react.useLayoutEffect)(()=>{ setTargetHeight(); }, [ setTargetHeight, children ]); return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest), { className: (0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightWrapper, ref: wrapperRef, style: (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest.style), { height: height ? `${height}px` : "auto", transitionDuration: `${duration}ms` }), children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($796f463330153c24$exports))).autoHeightInner, ref: innerRef, children: targetChildren }) })); } $95149596d5a7ed2b$export$77bf000da9303d1.displayName = "AutoHeight"; 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-ContextMenu-module-WinFxq-anchor`; $da5a7b95ca760552$export$6ed5f4fbab298e07 = `aiw-ContextMenu-module-WinFxq-caretHolder`; $da5a7b95ca760552$export$218b899e1d476006 = `aiw-ContextMenu-module-WinFxq-contextMenu`; $da5a7b95ca760552$export$ed8ffb5bb55a3bc8 = `aiw-ContextMenu-module-WinFxq-contextMenuHandler`; $da5a7b95ca760552$export$e5ea51c279904378 = `aiw-ContextMenu-module-WinFxq-contextMenuItem`; $da5a7b95ca760552$export$6ada86c5b962aa22 = `aiw-ContextMenu-module-WinFxq-contextMenuItemLabel`; $da5a7b95ca760552$export$683472f6198a076e = `aiw-ContextMenu-module-WinFxq-disabled`; $da5a7b95ca760552$export$73920f18ca706874 = `aiw-ContextMenu-module-WinFxq-hidden`; $da5a7b95ca760552$export$6e0e6ce39e5a0361 = `aiw-ContextMenu-module-WinFxq-subMenu`; $da5a7b95ca760552$export$664c6d24e3175067 = `aiw-ContextMenu-module-WinFxq-visible`; const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose, visible: visible })=>{ return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", { className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).caretHolder, children: [ /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.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, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).subMenu, children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), { visible: visible, entries: entries, xPos: 14, yPos: -21, toClose: toClose }) }) ] }); }; $d35a356381c44181$export$7e4e6110f96afd7e.displayName = "ContextSubMenu"; const $1e1f300656d89038$export$c868ef28d2ba36f1 = ({ entry: entry, toClose: toClose })=>{ const [target, setTarget] = (0, $gTuX4$react.useState)(null); const [subMenuVisible, setSubMenuVisible] = (0, $gTuX4$react.useState)(false); return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", { className: [ (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItem, entry.disabled ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).disabled : "" ].filter((c)=>c !== "").join(" "), onMouseEnter: ()=>{ setSubMenuVisible(true); }, onMouseLeave: ()=>{ setSubMenuVisible(false); }, children: [ typeof entry.label === "string" ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", { "aria-label": typeof entry.label === "string" ? entry.label : undefined, "aria-disabled": entry.disabled, 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(); if (!entry.disabled) { if (entry.action) entry.action(target, e); toClose(); } }, children: entry.label }) : entry.label, entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d35a356381c44181$export$7e4e6110f96afd7e), { toClose: toClose, entries: entry.group, visible: subMenuVisible }) ] }); }; const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $gTuX4$react.forwardRef)(({ visible: visible, entries: entries, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{ return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { ref: ref, 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` }, onContextMenu: (e)=>{ e.preventDefault(); e.stopPropagation(); }, children: entries.map((entry, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $1e1f300656d89038$export$c868ef28d2ba36f1), { entry: entry, toClose: toClose }, i)) }); }); $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu"; const $a79b75d040e03c92$export$d4ebdd58e04c6ace = (_param)=>{ var { id: id, menuItems: menuItems, children: children } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [ "id", "menuItems", "children" ]); // Menu state const [menuInDom, setMenuInDom] = (0, $gTuX4$react.useState)(false); const [menuVisible, setMenuVisible] = (0, $gTuX4$react.useState)(false); const [menuXPos, setMenuXPos] = (0, $gTuX4$react.useState)(0); const [menuYPos, setMenuYPos] = (0, $gTuX4$react.useState)(0); // Set up outsideClick handler const menuRef = (0, $gTuX4$react.useRef)(null); // Handle click off the menu const handleClick = (0, $gTuX4$react.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, $gTuX4$react.useRef)(new AbortController()); (0, $gTuX4$react.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, $gTuX4$react.useEffect)(()=>{ if (menuInDom) document.addEventListener("mousedown", handleClick); return ()=>{ document.removeEventListener("mousedown", handleClick); removeController.current.abort(); }; }, [ handleClick, menuInDom ]); return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), { children: [ /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, 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, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor, children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), { visible: menuVisible, ref: menuRef, entries: menuItems, xPos: menuXPos, yPos: menuYPos, toClose: ()=>{ setMenuVisible(false); } }) }), document.body) ] }); }; $a79b75d040e03c92$export$d4ebdd58e04c6ace.displayName = "ClickForMenu"; 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-LowMenu-module-JfzGeq-caretHolder`; $63cdf2819565020c$export$683472f6198a076e = `aiw-LowMenu-module-JfzGeq-disabled`; $63cdf2819565020c$export$73920f18ca706874 = `aiw-LowMenu-module-JfzGeq-hidden`; $63cdf2819565020c$export$59e4b099a896b33 = `aiw-LowMenu-module-JfzGeq-lowMenu`; $63cdf2819565020c$export$19fbf76b734bf310 = `aiw-LowMenu-module-JfzGeq-lowMenu-item`; $63cdf2819565020c$export$22ec12d194e0789c = `aiw-LowMenu-module-JfzGeq-lowMenuButtonHolder`; $63cdf2819565020c$export$2ad34a478577e75d = `aiw-LowMenu-module-JfzGeq-lowMenuItem`; $63cdf2819565020c$export$6e0e6ce39e5a0361 = `aiw-LowMenu-module-JfzGeq-subMenu`; $63cdf2819565020c$export$664c6d24e3175067 = `aiw-LowMenu-module-JfzGeq-visible`; 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: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).caretHolder, onMouseEnter: ()=>{ setVisible(true); }, onMouseLeave: ()=>{ setVisible(false); }, children: [ /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.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, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).subMenu, children: visible && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), { visible: visible, entries: entry.group, xPos: 14, yPos: entry.group.length * -21 - 8, toClose: ()=>setVisible(false) }) }) ] }); }; $d30299730ea8ec1e$export$251b9f54013cdfac.displayName = "LowSubMenu"; const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry })=>{ const [target, setTarget] = (0, $gTuX4$react.useState)(null); return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", { 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, 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, $gTuX4$reactjsxruntime.jsx)("span", { children: entry.label }), entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d30299730ea8ec1e$export$251b9f54013cdfac), { entry: entry }) ] }); }; $b34598671fff4a77$export$aafc28aea571c4bc.displayName = "LowMenuButton"; const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, visible: visible, xPos: xPos, yPos: yPos, maxWidth: maxWidth })=>{ return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { 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", 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$fc58dc71afe92de2 = /*#__PURE__*/ (0, $gTuX4$react.createContext)(null); function $3c568ee547c732c3$var$isDivider(label) { return typeof label !== "string" && label.type === "hr"; } const $3c568ee547c732c3$export$ed4f9641643dc7e4 = (_param)=>{ var { children: children, menuItems: menuItems, showLowMenu: showLowMenu = false } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [ "children", "menuItems", "showLowMenu" ]); 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, ...[ higherContext.menuItems.length > 0 && !$3c568ee547c732c3$var$isDivider(higherContext.menuItems[higherContext.menuItems.length - 1].label) && menuItems.length > 0 && !$3c568ee547c732c3$var$isDivider(menuItems[0].label) ? { label: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("hr", { style: { flexGrow: 1, cursor: "none", margin: "0", padding: "0" } }) } : null ].filter((item)=>item !== null) ] : [], ...menuItems ], [ higherContext, menuItems ]); // Menu resources 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 [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; 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, $gTuX4$react.useEffect)(()=>{ if (menuVisible) document.addEventListener("mousedown", handleClick); return ()=>{ document.removeEventListener("mousedown", handleClick); }; }, [ handleClick, menuVisible ]); 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", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({ ref: divHandlderRef }, rest), { className: [ (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$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, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor, onMouseEnter: ()=>{ removeController.current.abort(); setMouseOverMenu(true); }, onMouseLeave: ()=>{ removeController.current.abort(); removeController.current = new AbortController(); setMouseOverMenu(false); }, children: showLowMenu ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25), { visible: mouseOverHandlerDiv, entries: menuItems, 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) ] }); }; $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 }; } }; 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-ContextWindow-module-RIIF9a-contextWindow`; $7c5fb3f6c1601913$export$9f3a8a17ac700f7d = `aiw-ContextWindow-module-RIIF9a-contextWindowAnchor`; $7c5fb3f6c1601913$export$dfb2c4d2d1c0156f = `aiw-ContextWindow-module-RIIF9a-contextWindowBody`; $7c5fb3f6c1601913$export$1b02f2cd2f7db0f4 = `aiw-ContextWindow-module-RIIF9a-contextWindowTitle`; $7c5fb3f6c1601913$export$7ba38d4cc2870e66 = `aiw-ContextWindow-module-RIIF9a-contextWindowTitleClose`; $7c5fb3f6c1601913$export$cebbac70b4d99c48 = `aiw-ContextWindow-module-RIIF9a-contextWindowTitleText`; $7c5fb3f6c1601913$export$d03a2f3acc60252b = `aiw-ContextWindow-module-RIIF9a-moving`; const $16208d559c772441$export$aff5d0593e3727b0 = /*#__PURE__*/ (0, $gTuX4$react.createContext)(null); const $16208d559c772441$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 $16208d559c772441$export$9f37482ccd50dad2 = ({ minZIndex: minZIndex = 1000, children: children })=>{ const [currentWindows, setCurrentWindows] = (0, $gTuX4$react.useState)([]); return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($16208d559c772441$export$aff5d0593e3727b0.Provider, { value: { currentWindows: currentWindows.map((w)=>({ windowId: w.windowId, zIndex: minZIndex + w.zIndex })), pushToTop: (ret)=>$16208d559c772441$var$pushToTop(ret, minZIndex, currentWindows, setCurrentWindows) }, children: children }); }; $16208d559c772441$export$9f37482ccd50dad2.displayName = "ContextWindowStack"; const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = (_param)=>{ var { id: id, visible: visible, title: title, titleElement: titleElement, children: children, onOpen: onOpen, onClose: onClose } = _param, rest = (0, $gTuX4$swchelperscjs_object_without_propertiescjs._)(_param, [ "id", "visible", "title", "titleElement", "children", "onOpen", "onClose" ]); 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; 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, $gTuX4$react.useRef)({ x: 0, y: 0 }); const [moving, setMoving] = (0, $gTuX4$react.useState)(false); const move = (0, $gTuX4$react.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, $gTuX4$react.useCallback)(()=>{ const chkPos = (0, $c986bcdcae4b83bd$export$d81cfea7c54be196)(windowRef); move(chkPos.translateX, chkPos.translateY); }, [ move ]); const mouseMove = (0, $gTuX4$react.useCallback)((e)=>{ e.preventDefault(); e.stopPropagation(); move(e.movementX, e.movementY); }, [ move ]); const mouseUp = (0, $gTuX4$react.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, $gTuX4$react.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, $gTuX4$reactjsxruntime.jsxs)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor, ref: divRef, children: [ !windowStack && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest), { children: [ process.env.NODE_ENV !== "production" && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { style: { backgroundColor: "red", color: "white", padding: "8px", fontSize: "48px" }, children: "WARNING: No ContextWindowStack found" }), children ] })), windowStack && windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, rest), { ref: windowRef, id: id, className: [ (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow, rest.className ].filter((c)=>c).join(" "), style: (0, $gTuX4$swchelperscjs_object_spread_propscjs._)((0, $gTuX4$swchelperscjs_object_spreadcjs._)({}, 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, $gTuX4$reactjsxruntime.jsxs)("div", { 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); if (windowId.current) windowStack.pushToTop(windowId.current); document.addEventListener("mouseup", mouseUp); document.addEventListener("mousemove", mouseMove); window.addEventListener("resize", ()=>checkPosition()); }, children: [ /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleText, title: title, children: titleElement ? titleElement : title }), /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowTitleClose, role: "button", "aria-label": "Close", onClick: onClose, title: `Close ${title && title.trim() !== "" ? title : "window"}`, children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.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, $gTuX4$reactjsxruntime.jsx)("div", { className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowBody, children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", { children: children }) }) ] })), document.body) ] }); }; $46fb0088a1bbb6d8$export$1af8984c69ba1b24.displayName = "ContextWindow"; $parcel$exportWildcard(module.exports, $a68bd8a6c0fd98c2$exports); //# sourceMappingURL=main.js.map