@asup/context-menu 1.3.4 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/main.css +17 -14
- package/dist/cjs/main.css.map +1 -1
- package/dist/cjs/main.js +119 -66
- package/dist/cjs/main.js.map +1 -1
- package/dist/context-menu.d.ts.map +1 -1
- package/dist/main.css +17 -14
- package/dist/main.css.map +1 -1
- package/dist/main.js +119 -66
- package/dist/main.js.map +1 -1
- package/package.json +1 -1
package/dist/cjs/main.css
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
.aiw-WinFxq-anchor {
|
|
2
|
+
-webkit-font-smoothing: antialiased;
|
|
3
|
+
-moz-osx-font-smoothing: grayscale;
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
5
|
+
font-size: 9pt;
|
|
2
6
|
position: absolute;
|
|
3
7
|
top: 0;
|
|
4
8
|
left: 0;
|
|
@@ -10,21 +14,21 @@
|
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
.aiw-WinFxq-contextMenu {
|
|
13
|
-
visibility: hidden;
|
|
14
17
|
opacity: 1;
|
|
15
18
|
z-index: 10000;
|
|
16
|
-
-webkit-font-smoothing: antialiased;
|
|
17
|
-
-moz-osx-font-smoothing: grayscale;
|
|
18
19
|
background-color: #fbfdf6;
|
|
19
20
|
border: 1px solid #111418;
|
|
20
|
-
|
|
21
|
-
font-size: 9pt;
|
|
21
|
+
transition: opacity .3s linear;
|
|
22
22
|
position: absolute;
|
|
23
23
|
box-shadow: 4px 4px 4px #404040bf;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
.aiw-WinFxq-contextMenu.aiw-WinFxq-hidden {
|
|
27
|
+
opacity: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
26
30
|
.aiw-WinFxq-contextMenu.aiw-WinFxq-visible {
|
|
27
|
-
|
|
31
|
+
opacity: 1;
|
|
28
32
|
}
|
|
29
33
|
|
|
30
34
|
.aiw-WinFxq-contextMenuItem {
|
|
@@ -72,8 +76,12 @@
|
|
|
72
76
|
|
|
73
77
|
.aiw-JfzGeq-lowMenu {
|
|
74
78
|
z-index: 2;
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
margin: 0;
|
|
80
|
+
transition: opacity .3s linear;
|
|
81
|
+
position: absolute;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.aiw-JfzGeq-lowMenuButtonHolder {
|
|
77
85
|
background-color: #111418;
|
|
78
86
|
border: 2px solid #111418;
|
|
79
87
|
border-top-right-radius: 4px;
|
|
@@ -81,13 +89,8 @@
|
|
|
81
89
|
border-bottom-left-radius: 4px;
|
|
82
90
|
flex-flow: wrap;
|
|
83
91
|
gap: 2px;
|
|
84
|
-
|
|
85
|
-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
86
|
-
font-size: 9pt;
|
|
87
|
-
transition: opacity .3s linear;
|
|
92
|
+
width: fit-content;
|
|
88
93
|
display: flex;
|
|
89
|
-
position: absolute;
|
|
90
|
-
top: 0;
|
|
91
94
|
box-shadow: 2px 2px 2px #40404080;
|
|
92
95
|
}
|
|
93
96
|
|
package/dist/cjs/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACAA
|
|
1
|
+
{"mappings":"ACAA;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;ACzEA;;;;;;;AAOA;;;;;;;;;;;;;AAeA;;;;AAIA;;;;AAKA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;;ACzDA;;;;AAIA;;;;;;;;;;;;;;;;;AAiBA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;;AAUA;;;;;;;;;;;AAWA;;;;;AAKA;;;;;;;AAOA;;;;;AAKA;;;;;AAKA;;;;;;AAMA","sources":["73c443d00d29748b","src/components/ContextMenu.module.css","src/components/LowMenu.module.css","src/components/ContextWindow.module.css"],"sourcesContent":["@import \"630df238250c5b7f\";\n@import \"c4d631588337cb29\";\n@import \"864ea8cd88b57e56\";\n",".anchor {\n position: absolute;\n top: 0;\n left: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\",\n \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n font-size: 9pt;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.contextMenuHandler {\n height: fit-content;\n width: fit-content;\n}\n\n.contextMenu {\n position: absolute;\n border: 1px solid;\n border-color: rgb(17, 20, 24);\n opacity: 1;\n background-color: rgb(251, 253, 246);\n z-index: 10000;\n box-shadow: 4px 4px 4px rgb(64, 64, 64, 0.75);\n transition: opacity 0.3s linear;\n}\n\n.contextMenu.hidden {\n opacity: 0;\n}\n\n.contextMenu.visible {\n opacity: 1;\n}\n\n.contextMenuItem {\n color: rgb(17, 20, 24);\n cursor: pointer;\n padding: 0 4px;\n min-width: 80px;\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n white-space: nowrap;\n}\n\n.contextMenuItem.disabled {\n background-color: rgba(0, 0, 0, 0.2);\n cursor: not-allowed;\n}\n\n.contextMenuItem:first-child {\n padding-top: 4px;\n}\n\n.contextMenuItem:last-child {\n padding-bottom: 4px;\n}\n\n.contextMenuItem:not(.disabled):hover {\n background-color: rgb(251, 233, 230);\n}\n\n.contextMenuItem .caretHolder {\n align-self: flex-end;\n}\n\n.contextMenuItem .caretHolder .subMenu {\n z-index: 1;\n position: relative;\n}\n\n.contextMenuItemLabel {\n flex-grow: 1;\n height: 19px;\n}\n",".lowMenu {\n z-index: 2;\n position: absolute;\n margin: 0px;\n transition: opacity 0.3s linear;\n}\n\n.lowMenuButtonHolder {\n border: 2px solid rgb(17, 20, 24);\n border-top-right-radius: 4px;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n background-color: rgb(17, 20, 24);\n box-shadow: 2px 2px 2px rgb(64, 64, 64, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n gap: 2px;\n row-gap: 2px;\n width: fit-content;\n}\n\n.lowMenu.hidden {\n opacity: 0;\n}\n\n.lowMenu.visible,\n.lowMenu:hover {\n opacity: 1;\n}\n\n.lowMenuItem {\n background-color: rgb(251, 253, 246);\n border: 0;\n color: rgb(17, 20, 24);\n cursor: pointer;\n padding: 0 4px;\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n white-space: nowrap;\n}\n\n.lowMenuItem.disabled {\n background-color: rgba(200, 200, 200);\n cursor: not-allowed;\n}\n\n.lowMenuItem:not(.disabled):hover {\n background-color: rgb(251, 233, 230);\n}\n\n.lowMenu-item .caretHolder {\n align-self: flex-end;\n}\n\n.lowMenuItem .caretHolder .subMenu {\n z-index: 1;\n position: relative;\n}\n",".contextWindowAnchor {\n position: relative;\n}\n\n.contextWindow {\n z-index: 2001;\n border: 1px black solid;\n margin: 0;\n padding: 4px;\n background-color: rgb(250, 250, 250);\n box-shadow: 6px 6px 6px rgb(64, 64, 64, 0.5);\n transition: opacity 0.25s linear;\n justify-content: flex-start;\n position: absolute;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n border-bottom-left-radius: 8px;\n resize: both;\n overflow: auto;\n}\n\n.contextWindowTitle {\n border-bottom: 1px black dashed;\n padding-bottom: 4px;\n margin: 0 4px 3px 4px;\n height: 24px;\n max-height: 24px;\n cursor: grab;\n align-items: top;\n display: flex;\n width: calc(100% - 8px);\n}\n\n.contextWindowTitle.moving {\n cursor: grabbing;\n}\n\n.contextWindowTitleText {\n font-size: 18px;\n font-weight: 600;\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: calc(100% - 16px);\n}\n\n.contextWindowTitleClose {\n display: inline-block;\n color: black;\n background-color: white;\n height: 16px;\n width: 16px;\n border-radius: 3px;\n margin-left: 2px;\n cursor: pointer;\n}\n\n.contextWindowTitleClose:hover {\n background-color: black;\n color: white;\n}\n\n.contextWindowBody {\n overflow: auto;\n padding-bottom: 8px;\n margin-right: 4px;\n height: calc(100% - 40px);\n}\n\n.contextWindowBody::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.contextWindowBody::-webkit-scrollbar-track {\n background: white;\n border-radius: 8px;\n}\n\n.contextWindowBody::-webkit-scrollbar-thumb {\n background: lightgrey;\n border: none;\n border-radius: 8px;\n}\n\n.contextWindowBody::-webkit-scrollbar-thumb:hover {\n background: grey;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
|
package/dist/cjs/main.js
CHANGED
|
@@ -49,6 +49,7 @@ $parcel$export($da5a7b95ca760552$exports, "contextMenuHandler", function () { re
|
|
|
49
49
|
$parcel$export($da5a7b95ca760552$exports, "contextMenuItem", function () { return $da5a7b95ca760552$export$e5ea51c279904378; }, function (v) { return $da5a7b95ca760552$export$e5ea51c279904378 = v; });
|
|
50
50
|
$parcel$export($da5a7b95ca760552$exports, "contextMenuItemLabel", function () { return $da5a7b95ca760552$export$6ada86c5b962aa22; }, function (v) { return $da5a7b95ca760552$export$6ada86c5b962aa22 = v; });
|
|
51
51
|
$parcel$export($da5a7b95ca760552$exports, "disabled", function () { return $da5a7b95ca760552$export$683472f6198a076e; }, function (v) { return $da5a7b95ca760552$export$683472f6198a076e = v; });
|
|
52
|
+
$parcel$export($da5a7b95ca760552$exports, "hidden", function () { return $da5a7b95ca760552$export$73920f18ca706874; }, function (v) { return $da5a7b95ca760552$export$73920f18ca706874 = v; });
|
|
52
53
|
$parcel$export($da5a7b95ca760552$exports, "subMenu", function () { return $da5a7b95ca760552$export$6e0e6ce39e5a0361; }, function (v) { return $da5a7b95ca760552$export$6e0e6ce39e5a0361 = v; });
|
|
53
54
|
$parcel$export($da5a7b95ca760552$exports, "visible", function () { return $da5a7b95ca760552$export$664c6d24e3175067; }, function (v) { return $da5a7b95ca760552$export$664c6d24e3175067 = v; });
|
|
54
55
|
var $da5a7b95ca760552$export$2e2992790a6f69a8;
|
|
@@ -58,6 +59,7 @@ var $da5a7b95ca760552$export$ed8ffb5bb55a3bc8;
|
|
|
58
59
|
var $da5a7b95ca760552$export$e5ea51c279904378;
|
|
59
60
|
var $da5a7b95ca760552$export$6ada86c5b962aa22;
|
|
60
61
|
var $da5a7b95ca760552$export$683472f6198a076e;
|
|
62
|
+
var $da5a7b95ca760552$export$73920f18ca706874;
|
|
61
63
|
var $da5a7b95ca760552$export$6e0e6ce39e5a0361;
|
|
62
64
|
var $da5a7b95ca760552$export$664c6d24e3175067;
|
|
63
65
|
$da5a7b95ca760552$export$2e2992790a6f69a8 = `aiw-WinFxq-anchor`;
|
|
@@ -67,6 +69,7 @@ $da5a7b95ca760552$export$ed8ffb5bb55a3bc8 = `aiw-WinFxq-contextMenuHandler`;
|
|
|
67
69
|
$da5a7b95ca760552$export$e5ea51c279904378 = `aiw-WinFxq-contextMenuItem`;
|
|
68
70
|
$da5a7b95ca760552$export$6ada86c5b962aa22 = `aiw-WinFxq-contextMenuItemLabel`;
|
|
69
71
|
$da5a7b95ca760552$export$683472f6198a076e = `aiw-WinFxq-disabled`;
|
|
72
|
+
$da5a7b95ca760552$export$73920f18ca706874 = `aiw-WinFxq-hidden`;
|
|
70
73
|
$da5a7b95ca760552$export$6e0e6ce39e5a0361 = `aiw-WinFxq-subMenu`;
|
|
71
74
|
$da5a7b95ca760552$export$664c6d24e3175067 = `aiw-WinFxq-visible`;
|
|
72
75
|
|
|
@@ -75,7 +78,7 @@ $da5a7b95ca760552$export$664c6d24e3175067 = `aiw-WinFxq-visible`;
|
|
|
75
78
|
|
|
76
79
|
|
|
77
80
|
|
|
78
|
-
const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries,
|
|
81
|
+
const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, toClose: toClose })=>{
|
|
79
82
|
const [visible, setVisible] = (0, $gTuX4$react.useState)(false);
|
|
80
83
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
|
|
81
84
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).caretHolder,
|
|
@@ -101,7 +104,6 @@ const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: t
|
|
|
101
104
|
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
102
105
|
visible: visible,
|
|
103
106
|
entries: entries,
|
|
104
|
-
target: target,
|
|
105
107
|
xPos: 14,
|
|
106
108
|
yPos: -21,
|
|
107
109
|
toClose: toClose
|
|
@@ -113,13 +115,13 @@ const $d35a356381c44181$export$7e4e6110f96afd7e = ({ entries: entries, target: t
|
|
|
113
115
|
$d35a356381c44181$export$7e4e6110f96afd7e.displayName = "ContextSubMenu";
|
|
114
116
|
|
|
115
117
|
|
|
116
|
-
const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ visible: visible, entries: entries,
|
|
117
|
-
$
|
|
118
|
+
const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ visible: visible, entries: entries, xPos: xPos, yPos: yPos, toClose: toClose }, ref)=>{
|
|
119
|
+
const [target, setTarget] = (0, $gTuX4$react.useState)(null);
|
|
118
120
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
119
121
|
ref: ref,
|
|
120
122
|
className: [
|
|
121
123
|
(0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenu,
|
|
122
|
-
visible ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).visible :
|
|
124
|
+
visible ? (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).visible : (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).hidden
|
|
123
125
|
].filter((c)=>c !== "").join(" "),
|
|
124
126
|
style: {
|
|
125
127
|
top: `${yPos}px`,
|
|
@@ -139,9 +141,17 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$int
|
|
|
139
141
|
"aria-label": typeof entry.label === "string" ? entry.label : undefined,
|
|
140
142
|
"aria-disabled": entry.disabled,
|
|
141
143
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).contextMenuItemLabel,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
144
|
+
onMouseEnter: ()=>{
|
|
145
|
+
const sel = window.getSelection();
|
|
146
|
+
const target = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
|
|
147
|
+
setTarget(target);
|
|
148
|
+
},
|
|
149
|
+
onMouseLeave: ()=>{
|
|
150
|
+
setTarget(null);
|
|
151
|
+
},
|
|
152
|
+
onMouseDownCapture: (e)=>{
|
|
153
|
+
e.preventDefault();
|
|
154
|
+
e.stopPropagation();
|
|
145
155
|
entry.action && !entry.disabled && entry.action(target);
|
|
146
156
|
!entry.disabled && toClose();
|
|
147
157
|
},
|
|
@@ -149,8 +159,7 @@ const $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$int
|
|
|
149
159
|
}) : entry.label,
|
|
150
160
|
entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d35a356381c44181$export$7e4e6110f96afd7e), {
|
|
151
161
|
toClose: toClose,
|
|
152
|
-
entries: entry.group
|
|
153
|
-
target: target
|
|
162
|
+
entries: entry.group
|
|
154
163
|
})
|
|
155
164
|
]
|
|
156
165
|
}, i))
|
|
@@ -168,6 +177,7 @@ $parcel$export($63cdf2819565020c$exports, "disabled", function () { return $63cd
|
|
|
168
177
|
$parcel$export($63cdf2819565020c$exports, "hidden", function () { return $63cdf2819565020c$export$73920f18ca706874; }, function (v) { return $63cdf2819565020c$export$73920f18ca706874 = v; });
|
|
169
178
|
$parcel$export($63cdf2819565020c$exports, "lowMenu", function () { return $63cdf2819565020c$export$59e4b099a896b33; }, function (v) { return $63cdf2819565020c$export$59e4b099a896b33 = v; });
|
|
170
179
|
$parcel$export($63cdf2819565020c$exports, "lowMenu-item", function () { return $63cdf2819565020c$export$19fbf76b734bf310; }, function (v) { return $63cdf2819565020c$export$19fbf76b734bf310 = v; });
|
|
180
|
+
$parcel$export($63cdf2819565020c$exports, "lowMenuButtonHolder", function () { return $63cdf2819565020c$export$22ec12d194e0789c; }, function (v) { return $63cdf2819565020c$export$22ec12d194e0789c = v; });
|
|
171
181
|
$parcel$export($63cdf2819565020c$exports, "lowMenuItem", function () { return $63cdf2819565020c$export$2ad34a478577e75d; }, function (v) { return $63cdf2819565020c$export$2ad34a478577e75d = v; });
|
|
172
182
|
$parcel$export($63cdf2819565020c$exports, "subMenu", function () { return $63cdf2819565020c$export$6e0e6ce39e5a0361; }, function (v) { return $63cdf2819565020c$export$6e0e6ce39e5a0361 = v; });
|
|
173
183
|
$parcel$export($63cdf2819565020c$exports, "visible", function () { return $63cdf2819565020c$export$664c6d24e3175067; }, function (v) { return $63cdf2819565020c$export$664c6d24e3175067 = v; });
|
|
@@ -176,6 +186,7 @@ var $63cdf2819565020c$export$683472f6198a076e;
|
|
|
176
186
|
var $63cdf2819565020c$export$73920f18ca706874;
|
|
177
187
|
var $63cdf2819565020c$export$59e4b099a896b33;
|
|
178
188
|
var $63cdf2819565020c$export$19fbf76b734bf310;
|
|
189
|
+
var $63cdf2819565020c$export$22ec12d194e0789c;
|
|
179
190
|
var $63cdf2819565020c$export$2ad34a478577e75d;
|
|
180
191
|
var $63cdf2819565020c$export$6e0e6ce39e5a0361;
|
|
181
192
|
var $63cdf2819565020c$export$664c6d24e3175067;
|
|
@@ -184,6 +195,7 @@ $63cdf2819565020c$export$683472f6198a076e = `aiw-JfzGeq-disabled`;
|
|
|
184
195
|
$63cdf2819565020c$export$73920f18ca706874 = `aiw-JfzGeq-hidden`;
|
|
185
196
|
$63cdf2819565020c$export$59e4b099a896b33 = `aiw-JfzGeq-lowMenu`;
|
|
186
197
|
$63cdf2819565020c$export$19fbf76b734bf310 = `aiw-JfzGeq-lowMenu-item`;
|
|
198
|
+
$63cdf2819565020c$export$22ec12d194e0789c = `aiw-JfzGeq-lowMenuButtonHolder`;
|
|
187
199
|
$63cdf2819565020c$export$2ad34a478577e75d = `aiw-JfzGeq-lowMenuItem`;
|
|
188
200
|
$63cdf2819565020c$export$6e0e6ce39e5a0361 = `aiw-JfzGeq-subMenu`;
|
|
189
201
|
$63cdf2819565020c$export$664c6d24e3175067 = `aiw-JfzGeq-visible`;
|
|
@@ -195,7 +207,7 @@ $63cdf2819565020c$export$664c6d24e3175067 = `aiw-JfzGeq-visible`;
|
|
|
195
207
|
|
|
196
208
|
|
|
197
209
|
|
|
198
|
-
const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry
|
|
210
|
+
const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry })=>{
|
|
199
211
|
const [visible, setVisible] = (0, $gTuX4$react.useState)(false);
|
|
200
212
|
if (!entry.group || entry.group.length === 0) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {});
|
|
201
213
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
|
|
@@ -220,10 +232,9 @@ const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: targe
|
|
|
220
232
|
}),
|
|
221
233
|
/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
222
234
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).subMenu,
|
|
223
|
-
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
235
|
+
children: visible && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
224
236
|
visible: visible,
|
|
225
237
|
entries: entry.group,
|
|
226
|
-
target: target,
|
|
227
238
|
xPos: 14,
|
|
228
239
|
yPos: entry.group.length * -21 - 8,
|
|
229
240
|
toClose: ()=>setVisible(false)
|
|
@@ -235,7 +246,9 @@ const $d30299730ea8ec1e$export$251b9f54013cdfac = ({ entry: entry, target: targe
|
|
|
235
246
|
$d30299730ea8ec1e$export$251b9f54013cdfac.displayName = "LowSubMenu";
|
|
236
247
|
|
|
237
248
|
|
|
238
|
-
|
|
249
|
+
|
|
250
|
+
const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry })=>{
|
|
251
|
+
const [target, setTarget] = (0, $gTuX4$react.useState)(null);
|
|
239
252
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
240
253
|
className: [
|
|
241
254
|
(0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenuItem,
|
|
@@ -243,9 +256,17 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: targe
|
|
|
243
256
|
].filter((c)=>c !== "").join(" "),
|
|
244
257
|
"aria-label": typeof entry.label === "string" ? entry.label : undefined,
|
|
245
258
|
"aria-disabled": entry.disabled,
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
259
|
+
onMouseEnter: ()=>{
|
|
260
|
+
const sel = window.getSelection();
|
|
261
|
+
const target = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
|
|
262
|
+
setTarget(target);
|
|
263
|
+
},
|
|
264
|
+
onMouseLeave: ()=>{
|
|
265
|
+
setTarget(null);
|
|
266
|
+
},
|
|
267
|
+
onClick: (e)=>{
|
|
268
|
+
e.preventDefault();
|
|
269
|
+
e.stopPropagation();
|
|
249
270
|
entry.action && !entry.disabled && entry.action(target);
|
|
250
271
|
},
|
|
251
272
|
children: [
|
|
@@ -253,8 +274,7 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: targe
|
|
|
253
274
|
children: entry.label
|
|
254
275
|
}),
|
|
255
276
|
entry.group && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $d30299730ea8ec1e$export$251b9f54013cdfac), {
|
|
256
|
-
entry: entry
|
|
257
|
-
target: target
|
|
277
|
+
entry: entry
|
|
258
278
|
})
|
|
259
279
|
]
|
|
260
280
|
});
|
|
@@ -262,7 +282,7 @@ const $b34598671fff4a77$export$aafc28aea571c4bc = ({ entry: entry, target: targe
|
|
|
262
282
|
$b34598671fff4a77$export$aafc28aea571c4bc.displayName = "LowMenuButton";
|
|
263
283
|
|
|
264
284
|
|
|
265
|
-
const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries,
|
|
285
|
+
const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, visible: visible, xPos: xPos, yPos: yPos, maxWidth: maxWidth })=>{
|
|
266
286
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
267
287
|
className: [
|
|
268
288
|
(0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenu,
|
|
@@ -271,12 +291,16 @@ const $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25 = ({ entries: entries, target: t
|
|
|
271
291
|
"aria-label": "Low context menu",
|
|
272
292
|
style: {
|
|
273
293
|
left: `${xPos}px`,
|
|
274
|
-
top: `${yPos}px
|
|
294
|
+
top: `${yPos}px`,
|
|
295
|
+
maxWidth: `calc(${maxWidth}px)`,
|
|
296
|
+
width: `calc(${maxWidth}px - 4px)`
|
|
275
297
|
},
|
|
276
|
-
children:
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
298
|
+
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
299
|
+
className: (0, (/*@__PURE__*/$parcel$interopDefault($63cdf2819565020c$exports))).lowMenuButtonHolder,
|
|
300
|
+
children: entries.map((e, i)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $b34598671fff4a77$export$aafc28aea571c4bc), {
|
|
301
|
+
entry: e
|
|
302
|
+
}, i))
|
|
303
|
+
})
|
|
280
304
|
});
|
|
281
305
|
};
|
|
282
306
|
$10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25.displayName = "LowMenu";
|
|
@@ -308,26 +332,15 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
308
332
|
]);
|
|
309
333
|
// Menu resources
|
|
310
334
|
const divHandlderRef = (0, $gTuX4$react.useRef)(null);
|
|
311
|
-
const divMenuRef = (0, $gTuX4$react.useRef)(null);
|
|
312
335
|
const menuRef = (0, $gTuX4$react.useRef)(null);
|
|
313
336
|
const [menuXPos, setMenuXPos] = (0, $gTuX4$react.useState)(0);
|
|
314
337
|
const [menuYPos, setMenuYPos] = (0, $gTuX4$react.useState)(0);
|
|
315
338
|
const [menuVisible, setMenuVisible] = (0, $gTuX4$react.useState)(false);
|
|
316
|
-
const [
|
|
317
|
-
const [
|
|
318
|
-
const [
|
|
339
|
+
const [menuInDom, setMenuInDom] = (0, $gTuX4$react.useState)(false);
|
|
340
|
+
const [mouseOverHandlerDiv, setMouseOverHandlerDiv] = (0, $gTuX4$react.useState)(false);
|
|
341
|
+
const [mouseOverMenu, setMouseOverMenu] = (0, $gTuX4$react.useState)(false);
|
|
319
342
|
// Get holder position
|
|
320
343
|
const divHandlerPos = divHandlderRef ? (_divHandlderRef_current = divHandlderRef.current) === null || _divHandlderRef_current === void 0 ? void 0 : _divHandlderRef_current.getBoundingClientRect() : null;
|
|
321
|
-
// Show menu when context is requested
|
|
322
|
-
const showMenu = (e)=>{
|
|
323
|
-
const sel = window.getSelection();
|
|
324
|
-
setTarget(sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null);
|
|
325
|
-
e.preventDefault();
|
|
326
|
-
e.stopPropagation();
|
|
327
|
-
setMenuVisible(true);
|
|
328
|
-
setMenuXPos(e.pageX);
|
|
329
|
-
setMenuYPos(e.pageY);
|
|
330
|
-
};
|
|
331
344
|
// Handle click off the menu
|
|
332
345
|
const handleClick = (0, $gTuX4$react.useCallback)((e)=>{
|
|
333
346
|
var _menuRef_current;
|
|
@@ -344,6 +357,20 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
344
357
|
handleClick,
|
|
345
358
|
menuVisible
|
|
346
359
|
]);
|
|
360
|
+
const removeController = (0, $gTuX4$react.useRef)(new AbortController());
|
|
361
|
+
(0, $gTuX4$react.useEffect)(()=>{
|
|
362
|
+
if (!mouseOverMenu && !menuVisible && !mouseOverHandlerDiv) {
|
|
363
|
+
removeController.current.abort();
|
|
364
|
+
removeController.current = new AbortController();
|
|
365
|
+
setTimeout(()=>{
|
|
366
|
+
if (!removeController.current.signal.aborted) setMenuInDom(false);
|
|
367
|
+
}, 300);
|
|
368
|
+
}
|
|
369
|
+
}, [
|
|
370
|
+
mouseOverHandlerDiv,
|
|
371
|
+
menuVisible,
|
|
372
|
+
mouseOverMenu
|
|
373
|
+
]);
|
|
347
374
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)($3c568ee547c732c3$export$fc58dc71afe92de2.Provider, {
|
|
348
375
|
value: {
|
|
349
376
|
menuItems: thisMenuItems
|
|
@@ -359,44 +386,65 @@ const $3c568ee547c732c3$export$ed4f9641643dc7e4 = ({ children: children, menuIte
|
|
|
359
386
|
style: {
|
|
360
387
|
...rest.style
|
|
361
388
|
},
|
|
362
|
-
onContextMenu:
|
|
389
|
+
onContextMenu: (e)=>{
|
|
390
|
+
if (!showLowMenu) {
|
|
391
|
+
setMenuInDom(true);
|
|
392
|
+
e.preventDefault();
|
|
393
|
+
e.stopPropagation();
|
|
394
|
+
setTimeout(()=>{
|
|
395
|
+
removeController.current.abort();
|
|
396
|
+
setMenuVisible(true);
|
|
397
|
+
setMenuXPos(e.pageX);
|
|
398
|
+
setMenuYPos(e.pageY);
|
|
399
|
+
}, 1);
|
|
400
|
+
}
|
|
401
|
+
},
|
|
363
402
|
onMouseEnter: ()=>{
|
|
364
|
-
|
|
403
|
+
if (showLowMenu) {
|
|
404
|
+
setMenuInDom(true);
|
|
405
|
+
setMouseOverHandlerDiv(false);
|
|
406
|
+
setTimeout(()=>{
|
|
407
|
+
removeController.current.abort();
|
|
408
|
+
setMouseOverHandlerDiv(true);
|
|
409
|
+
}, 1);
|
|
410
|
+
}
|
|
365
411
|
},
|
|
366
412
|
onMouseLeave: ()=>{
|
|
367
|
-
|
|
413
|
+
if (showLowMenu) {
|
|
414
|
+
removeController.current.abort();
|
|
415
|
+
removeController.current = new AbortController();
|
|
416
|
+
setMouseOverHandlerDiv(false);
|
|
417
|
+
}
|
|
368
418
|
},
|
|
369
419
|
children: children
|
|
370
420
|
}),
|
|
371
|
-
|
|
372
|
-
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
373
|
-
ref: divMenuRef,
|
|
374
|
-
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
375
|
-
visible: true,
|
|
376
|
-
ref: menuRef,
|
|
377
|
-
entries: thisMenuItems,
|
|
378
|
-
xPos: menuXPos,
|
|
379
|
-
yPos: menuYPos,
|
|
380
|
-
target: target,
|
|
381
|
-
toClose: ()=>setMenuVisible(false)
|
|
382
|
-
})
|
|
383
|
-
}), document.body),
|
|
384
|
-
showLowMenu && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
421
|
+
menuInDom && divHandlerPos && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
385
422
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($da5a7b95ca760552$exports))).anchor,
|
|
386
423
|
onMouseEnter: ()=>{
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
setLowTarget(lowSel);
|
|
424
|
+
removeController.current.abort();
|
|
425
|
+
setMouseOverMenu(true);
|
|
390
426
|
},
|
|
391
427
|
onMouseLeave: ()=>{
|
|
392
|
-
|
|
428
|
+
removeController.current.abort();
|
|
429
|
+
removeController.current = new AbortController();
|
|
430
|
+
setMouseOverMenu(false);
|
|
393
431
|
},
|
|
394
|
-
children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25), {
|
|
395
|
-
visible:
|
|
432
|
+
children: showLowMenu ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $10d1ee4e7fc9bbbd$export$49e8edc8ebca5f25), {
|
|
433
|
+
visible: mouseOverHandlerDiv,
|
|
396
434
|
entries: menuItems,
|
|
397
|
-
target: lowTarget,
|
|
398
435
|
xPos: divHandlerPos.left,
|
|
399
|
-
yPos: divHandlerPos.bottom
|
|
436
|
+
yPos: divHandlerPos.bottom,
|
|
437
|
+
maxWidth: divHandlerPos.width
|
|
438
|
+
}) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
|
|
439
|
+
visible: menuVisible,
|
|
440
|
+
ref: menuRef,
|
|
441
|
+
entries: thisMenuItems,
|
|
442
|
+
xPos: menuXPos,
|
|
443
|
+
yPos: menuYPos,
|
|
444
|
+
toClose: ()=>{
|
|
445
|
+
setMenuVisible(false);
|
|
446
|
+
setMouseOverMenu(false);
|
|
447
|
+
}
|
|
400
448
|
})
|
|
401
449
|
}), document.body)
|
|
402
450
|
]
|
|
@@ -493,6 +541,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
493
541
|
const windowId = (0, $gTuX4$react.useRef)(null);
|
|
494
542
|
const divRef = (0, $gTuX4$react.useRef)(null);
|
|
495
543
|
const windowRef = (0, $gTuX4$react.useRef)(null);
|
|
544
|
+
const [windowInDOM, setWindowInDOM] = (0, $gTuX4$react.useState)(false);
|
|
496
545
|
const [windowVisible, setWindowVisible] = (0, $gTuX4$react.useState)(false);
|
|
497
546
|
const zIndex = (0, $gTuX4$react.useMemo)(()=>{
|
|
498
547
|
var _windowStack_currentWindows_find;
|
|
@@ -545,7 +594,9 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
545
594
|
// Update visibility
|
|
546
595
|
(0, $gTuX4$react.useEffect)(()=>{
|
|
547
596
|
if (windowStack) {
|
|
548
|
-
|
|
597
|
+
// Visible set, but not in DOM
|
|
598
|
+
if (visible && !windowInDOM) setWindowInDOM(true);
|
|
599
|
+
else if (visible && windowInDOM && !windowVisible) {
|
|
549
600
|
if (!windowId.current) {
|
|
550
601
|
const maxWindowId = Math.max(0, ...windowStack.currentWindows.map((w)=>w.windowId));
|
|
551
602
|
windowId.current = maxWindowId + 1;
|
|
@@ -568,11 +619,13 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
568
619
|
}
|
|
569
620
|
checkPosition();
|
|
570
621
|
} else if (windowId.current && !visible && windowVisible) setWindowVisible(false);
|
|
622
|
+
else if (windowId.current && !visible && windowInDOM) setWindowInDOM(false);
|
|
571
623
|
}
|
|
572
624
|
}, [
|
|
573
625
|
checkPosition,
|
|
574
626
|
onOpen,
|
|
575
627
|
visible,
|
|
628
|
+
windowInDOM,
|
|
576
629
|
windowStack,
|
|
577
630
|
windowVisible
|
|
578
631
|
]);
|
|
@@ -580,7 +633,7 @@ const $46fb0088a1bbb6d8$export$1af8984c69ba1b24 = ({ id: id, visible: visible, t
|
|
|
580
633
|
return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
|
|
581
634
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindowAnchor,
|
|
582
635
|
ref: divRef,
|
|
583
|
-
children: windowStack && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
636
|
+
children: windowStack && windowInDOM && /*#__PURE__*/ (0, $gTuX4$reactdom.createPortal)(/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
|
|
584
637
|
...rest,
|
|
585
638
|
id: id,
|
|
586
639
|
className: (0, (/*@__PURE__*/$parcel$interopDefault($7c5fb3f6c1601913$exports))).contextWindow,
|