@hanzogui/context-menu 3.0.2 → 7.3.0
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/ContextMenu.cjs +142 -139
- package/dist/cjs/ContextMenu.native.js +172 -170
- package/dist/cjs/ContextMenu.native.js.map +1 -1
- package/dist/cjs/createNonNativeContextMenu.cjs +370 -344
- package/dist/cjs/createNonNativeContextMenu.native.js +391 -364
- package/dist/cjs/createNonNativeContextMenu.native.js.map +1 -1
- package/dist/cjs/index.cjs +24 -22
- package/dist/cjs/index.native.js +26 -24
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/ContextMenu.mjs +114 -113
- package/dist/esm/ContextMenu.mjs.map +1 -1
- package/dist/esm/ContextMenu.native.js +141 -141
- package/dist/esm/ContextMenu.native.js.map +1 -1
- package/dist/esm/createNonNativeContextMenu.mjs +340 -316
- package/dist/esm/createNonNativeContextMenu.mjs.map +1 -1
- package/dist/esm/createNonNativeContextMenu.native.js +361 -336
- package/dist/esm/createNonNativeContextMenu.native.js.map +1 -1
- package/dist/jsx/ContextMenu.mjs +114 -113
- package/dist/jsx/ContextMenu.mjs.map +1 -1
- package/dist/jsx/ContextMenu.native.js +172 -170
- package/dist/jsx/ContextMenu.native.js.map +1 -1
- package/dist/jsx/createNonNativeContextMenu.mjs +340 -316
- package/dist/jsx/createNonNativeContextMenu.mjs.map +1 -1
- package/dist/jsx/createNonNativeContextMenu.native.js +391 -364
- package/dist/jsx/createNonNativeContextMenu.native.js.map +1 -1
- package/dist/jsx/index.native.js +26 -24
- package/dist/jsx/index.native.js.map +1 -1
- package/package.json +14 -12
- package/types/ContextMenu.d.ts +59 -59
- package/types/ContextMenu.d.ts.map +1 -0
- package/types/createNonNativeContextMenu.d.ts +53 -53
- package/types/createNonNativeContextMenu.d.ts.map +1 -0
- package/types/index.d.ts +59 -59
- package/types/index.d.ts.map +1 -0
|
@@ -4,419 +4,446 @@ var __create = Object.create;
|
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
5
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf
|
|
8
|
-
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
9
|
var __export = (target, all) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
for (var name in all) __defProp(target, name, {
|
|
11
|
+
get: all[name],
|
|
12
|
+
enumerable: true
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
17
18
|
get: () => from[key],
|
|
18
19
|
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
20
|
});
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
22
24
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
30
|
+
value: mod,
|
|
31
|
+
enumerable: true
|
|
32
|
+
}) : target, mod));
|
|
33
|
+
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
34
|
+
value: true
|
|
35
|
+
}), mod);
|
|
34
36
|
var createNonNativeContextMenu_exports = {};
|
|
35
37
|
__export(createNonNativeContextMenu_exports, {
|
|
36
38
|
CONTEXTMENU_CONTEXT: () => CONTEXTMENU_CONTEXT,
|
|
37
39
|
createNonNativeContextMenu: () => createNonNativeContextMenu
|
|
38
40
|
});
|
|
39
41
|
module.exports = __toCommonJS(createNonNativeContextMenu_exports);
|
|
40
|
-
var import_jsx_runtime = require("react/jsx-runtime")
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
43
|
+
var import_create_menu = require("@hanzogui/create-menu");
|
|
44
|
+
var import_use_controllable_state = require("@hanzogui/use-controllable-state");
|
|
45
|
+
var import_web = require("@hanzogui/web");
|
|
46
|
+
var import_react = __toESM(require("react"), 1);
|
|
45
47
|
function _instanceof(left, right) {
|
|
46
|
-
|
|
48
|
+
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
|
|
49
|
+
return !!right[Symbol.hasInstance](left);
|
|
50
|
+
} else {
|
|
51
|
+
return left instanceof right;
|
|
52
|
+
}
|
|
47
53
|
}
|
|
48
54
|
var CONTEXTMENU_CONTEXT = "ContextMenuContext";
|
|
49
55
|
function createNonNativeContextMenu(params) {
|
|
50
56
|
var {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
57
|
+
Menu
|
|
58
|
+
} = (0, import_create_menu.createBaseMenu)(params);
|
|
59
|
+
var CONTEXT_MENU_NAME = "ContextMenu";
|
|
60
|
+
var {
|
|
61
|
+
Provider: ContextMenuProvider,
|
|
62
|
+
useStyledContext: useContextMenuContext
|
|
63
|
+
} = (0, import_web.createStyledContext)();
|
|
64
|
+
var ContextMenuComp = function (props) {
|
|
65
|
+
var {
|
|
66
|
+
scope,
|
|
67
|
+
children,
|
|
68
|
+
onOpenChange,
|
|
69
|
+
dir,
|
|
70
|
+
modal = true,
|
|
71
|
+
...rest
|
|
72
|
+
} = props;
|
|
73
|
+
var [open, setOpen] = import_react.default.useState(false);
|
|
74
|
+
var triggerRef = import_react.default.useRef(null);
|
|
75
|
+
var handleOpenChange = import_react.default.useCallback(function (open2, event) {
|
|
76
|
+
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open2, event);
|
|
77
|
+
if (event === null || event === void 0 ? void 0 : event.defaultPrevented) return;
|
|
78
|
+
setOpen(open2);
|
|
79
|
+
}, [onOpenChange]);
|
|
80
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
|
|
81
|
+
scope,
|
|
82
|
+
triggerId: (0, import_react.useId)(),
|
|
83
|
+
triggerRef,
|
|
84
|
+
contentId: (0, import_react.useId)(),
|
|
85
|
+
open,
|
|
86
|
+
onOpenChange: handleOpenChange,
|
|
87
|
+
modal,
|
|
88
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
|
|
89
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
90
|
+
dir,
|
|
77
91
|
open,
|
|
78
92
|
onOpenChange: handleOpenChange,
|
|
79
93
|
modal,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
modal,
|
|
86
|
-
...rest,
|
|
87
|
-
children
|
|
88
|
-
})
|
|
89
|
-
});
|
|
90
|
-
};
|
|
94
|
+
...rest,
|
|
95
|
+
children
|
|
96
|
+
})
|
|
97
|
+
});
|
|
98
|
+
};
|
|
91
99
|
ContextMenuComp.displayName = CONTEXT_MENU_NAME;
|
|
92
|
-
var TRIGGER_NAME = "ContextMenuTrigger"
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
121
|
-
return {
|
|
122
|
-
width: 0,
|
|
123
|
-
height: 0,
|
|
124
|
-
top: 0,
|
|
125
|
-
left: 0,
|
|
126
|
-
...pointRef.current
|
|
127
|
-
};
|
|
128
|
-
},
|
|
129
|
-
...(!import_gui_web.isWeb && {
|
|
130
|
-
measure: function (c) {
|
|
131
|
-
return c(pointRef.current.x, pointRef.current.y, 0, 0);
|
|
132
|
-
},
|
|
133
|
-
measureInWindow: function (c) {
|
|
134
|
-
return c(pointRef.current.x, pointRef.current.y, 0, 0);
|
|
135
|
-
}
|
|
136
|
-
})
|
|
100
|
+
var TRIGGER_NAME = "ContextMenuTrigger";
|
|
101
|
+
var ContextMenuTrigger = import_web.View.styleable(function (props, forwardedRef) {
|
|
102
|
+
var {
|
|
103
|
+
scope,
|
|
104
|
+
style,
|
|
105
|
+
disabled = false,
|
|
106
|
+
asChild,
|
|
107
|
+
children,
|
|
108
|
+
...triggerProps
|
|
109
|
+
} = props;
|
|
110
|
+
var context = useContextMenuContext(scope);
|
|
111
|
+
var pointRef = import_react.default.useRef({
|
|
112
|
+
x: 0,
|
|
113
|
+
y: 0
|
|
114
|
+
});
|
|
115
|
+
var virtualRef = import_react.default.useMemo(function () {
|
|
116
|
+
return {
|
|
117
|
+
current: {
|
|
118
|
+
getBoundingClientRect: function () {
|
|
119
|
+
if (import_web.isWeb) {
|
|
120
|
+
var scrollX = window.scrollX || document.documentElement.scrollLeft;
|
|
121
|
+
var scrollY = window.scrollY || document.documentElement.scrollTop;
|
|
122
|
+
return DOMRect.fromRect({
|
|
123
|
+
width: 0,
|
|
124
|
+
height: 0,
|
|
125
|
+
x: pointRef.current.x - scrollX,
|
|
126
|
+
y: pointRef.current.y - scrollY
|
|
127
|
+
});
|
|
137
128
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
return
|
|
129
|
+
return {
|
|
130
|
+
width: 0,
|
|
131
|
+
height: 0,
|
|
132
|
+
top: 0,
|
|
133
|
+
left: 0,
|
|
134
|
+
...pointRef.current
|
|
135
|
+
};
|
|
136
|
+
},
|
|
137
|
+
...(!import_web.isWeb && {
|
|
138
|
+
measure: function (c) {
|
|
139
|
+
return c(pointRef.current.x, pointRef.current.y, 0, 0);
|
|
149
140
|
},
|
|
150
|
-
|
|
151
|
-
|
|
141
|
+
measureInWindow: function (c) {
|
|
142
|
+
return c(pointRef.current.x, pointRef.current.y, 0, 0);
|
|
152
143
|
}
|
|
153
|
-
}
|
|
144
|
+
})
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
}, [pointRef.current.x, pointRef.current.y]);
|
|
148
|
+
var longPressTimerRef = import_react.default.useRef(0);
|
|
149
|
+
var clearLongPress = import_react.default.useCallback(function () {
|
|
150
|
+
return window.clearTimeout(longPressTimerRef.current);
|
|
151
|
+
}, []);
|
|
152
|
+
var createOpenChangeEvent = function () {
|
|
153
|
+
var defaultPrevented = false;
|
|
154
|
+
return {
|
|
155
|
+
get defaultPrevented() {
|
|
156
|
+
return defaultPrevented;
|
|
154
157
|
},
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
158
|
+
preventDefault() {
|
|
159
|
+
defaultPrevented = true;
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
};
|
|
163
|
+
var handleOpen = function (event) {
|
|
164
|
+
if (import_web.isWeb && (_instanceof(event, MouseEvent) || _instanceof(event, PointerEvent))) {
|
|
165
|
+
pointRef.current = {
|
|
166
|
+
x: event.clientX,
|
|
167
|
+
y: event.clientY
|
|
168
|
+
};
|
|
169
|
+
} else {
|
|
170
|
+
pointRef.current = {
|
|
171
|
+
x: event.nativeEvent.pageX,
|
|
172
|
+
y: event.nativeEvent.pageY
|
|
165
173
|
};
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
return
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
})
|
|
174
|
+
}
|
|
175
|
+
var openChangeEvent = createOpenChangeEvent();
|
|
176
|
+
context.onOpenChange(true, openChangeEvent);
|
|
177
|
+
return openChangeEvent;
|
|
178
|
+
};
|
|
179
|
+
import_react.default.useEffect(function () {
|
|
180
|
+
return clearLongPress;
|
|
181
|
+
}, [clearLongPress]);
|
|
182
|
+
import_react.default.useEffect(function () {
|
|
183
|
+
return void (disabled && clearLongPress());
|
|
184
|
+
}, [disabled, clearLongPress]);
|
|
185
|
+
var Comp = asChild ? import_web.Slot : import_web.View;
|
|
186
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
187
|
+
children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Anchor, {
|
|
188
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
189
|
+
virtualRef
|
|
190
|
+
}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
|
|
191
|
+
render: "span",
|
|
192
|
+
componentName: TRIGGER_NAME,
|
|
193
|
+
id: context.triggerId,
|
|
194
|
+
"data-state": context.open ? "open" : "closed",
|
|
195
|
+
"data-disabled": disabled ? "" : void 0,
|
|
196
|
+
...triggerProps,
|
|
197
|
+
ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
|
|
198
|
+
style: import_web.isWeb ? {
|
|
199
|
+
WebkitTouchCallout: "none",
|
|
200
|
+
...style
|
|
201
|
+
} : null,
|
|
202
|
+
...(import_web.isWeb && {
|
|
203
|
+
onContextMenu: disabled ? props.onContextMenu : (0, import_web.composeEventHandlers)(props.onContextMenu, function (event) {
|
|
204
|
+
clearLongPress();
|
|
205
|
+
var openChangeEvent = handleOpen(event);
|
|
206
|
+
if (!openChangeEvent.defaultPrevented) {
|
|
207
|
+
event.preventDefault();
|
|
208
|
+
}
|
|
209
|
+
}),
|
|
210
|
+
onPointerDown: disabled ? props.onPointerDown : (0, import_web.composeEventHandlers)(props.onPointerDown, function (event) {
|
|
211
|
+
if (event.pointerType === "mouse") return;
|
|
212
|
+
clearLongPress();
|
|
213
|
+
longPressTimerRef.current = window.setTimeout(function () {
|
|
214
|
+
return handleOpen(event);
|
|
215
|
+
}, 700);
|
|
216
|
+
}),
|
|
217
|
+
onPointerMove: disabled ? props.onPointerMove : (0, import_web.composeEventHandlers)(props.onPointerMove, function (event) {
|
|
218
|
+
if (event.pointerType === "mouse") return;
|
|
219
|
+
clearLongPress();
|
|
208
220
|
}),
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
var openChangeEvent = handleOpen(event);
|
|
213
|
-
openChangeEvent.defaultPrevented || event.preventDefault();
|
|
214
|
-
})
|
|
221
|
+
onPointerCancel: disabled ? props.onPointerCancel : (0, import_web.composeEventHandlers)(props.onPointerCancel, function (event) {
|
|
222
|
+
if (event.pointerType === "mouse") return;
|
|
223
|
+
clearLongPress();
|
|
215
224
|
}),
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
225
|
+
onPointerUp: disabled ? props.onPointerUp : (0, import_web.composeEventHandlers)(props.onPointerUp, function (event) {
|
|
226
|
+
if (event.pointerType === "mouse") return;
|
|
227
|
+
clearLongPress();
|
|
228
|
+
})
|
|
229
|
+
}),
|
|
230
|
+
...(!import_web.isWeb && {
|
|
231
|
+
onLongPress: disabled ? props.onLongPress : (0, import_web.composeEventHandlers)(props.onLongPress, function (event) {
|
|
232
|
+
clearLongPress();
|
|
233
|
+
var openChangeEvent = handleOpen(event);
|
|
234
|
+
if (!openChangeEvent.defaultPrevented) {
|
|
235
|
+
event.preventDefault();
|
|
236
|
+
}
|
|
237
|
+
})
|
|
238
|
+
}),
|
|
239
|
+
children
|
|
240
|
+
})]
|
|
219
241
|
});
|
|
242
|
+
});
|
|
220
243
|
ContextMenuTrigger.displayName = TRIGGER_NAME;
|
|
221
|
-
var PORTAL_NAME = "ContextMenuPortal"
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
244
|
+
var PORTAL_NAME = "ContextMenuPortal";
|
|
245
|
+
var ContextMenuPortal = function (props) {
|
|
246
|
+
var {
|
|
247
|
+
scope,
|
|
248
|
+
children,
|
|
249
|
+
...portalProps
|
|
250
|
+
} = props;
|
|
251
|
+
var context = import_web.isAndroid ? useContextMenuContext(scope) : null;
|
|
252
|
+
var content = import_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
|
|
253
|
+
...context,
|
|
254
|
+
children
|
|
255
|
+
}) : children;
|
|
256
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
|
|
257
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
258
|
+
...portalProps,
|
|
259
|
+
children: content
|
|
260
|
+
});
|
|
261
|
+
};
|
|
239
262
|
ContextMenuPortal.displayName = PORTAL_NAME;
|
|
240
|
-
var CONTENT_NAME = "ContextMenuContent"
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
263
|
+
var CONTENT_NAME = "ContextMenuContent";
|
|
264
|
+
var ContextMenuContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
265
|
+
var {
|
|
266
|
+
scope,
|
|
267
|
+
...contentProps
|
|
268
|
+
} = props;
|
|
269
|
+
var context = useContextMenuContext(scope);
|
|
270
|
+
var hasInteractedOutsideRef = import_react.default.useRef(false);
|
|
271
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
|
|
272
|
+
id: context.contentId,
|
|
273
|
+
"aria-labelledby": context.triggerId,
|
|
274
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
275
|
+
...contentProps,
|
|
276
|
+
ref: forwardedRef,
|
|
277
|
+
onCloseAutoFocus: (0, import_web.composeEventHandlers)(props.onCloseAutoFocus, function (event) {
|
|
278
|
+
var _context_triggerRef_current;
|
|
279
|
+
if (!hasInteractedOutsideRef.current) (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 ? void 0 : _context_triggerRef_current.focus();
|
|
280
|
+
hasInteractedOutsideRef.current = false;
|
|
281
|
+
event.preventDefault();
|
|
282
|
+
}),
|
|
283
|
+
onInteractOutside: (0, import_web.composeEventHandlers)(props.onInteractOutside, function (event) {
|
|
284
|
+
var originalEvent = event.detail.originalEvent;
|
|
285
|
+
var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
286
|
+
var isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
287
|
+
if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
|
|
288
|
+
})
|
|
265
289
|
});
|
|
290
|
+
});
|
|
266
291
|
ContextMenuContent.displayName = CONTENT_NAME;
|
|
267
|
-
var ITEM_NAME = "ContextMenuItem"
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
});
|
|
292
|
+
var ITEM_NAME = "ContextMenuItem";
|
|
293
|
+
var ContextMenuItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
294
|
+
var {
|
|
295
|
+
scope,
|
|
296
|
+
...itemProps
|
|
297
|
+
} = props;
|
|
298
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Item, {
|
|
299
|
+
componentName: ITEM_NAME,
|
|
300
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
301
|
+
...itemProps,
|
|
302
|
+
ref: forwardedRef
|
|
279
303
|
});
|
|
304
|
+
});
|
|
280
305
|
ContextMenuItem.displayName = ITEM_NAME;
|
|
281
|
-
var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem"
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
});
|
|
306
|
+
var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
|
|
307
|
+
var ContextMenuCheckboxItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
308
|
+
var {
|
|
309
|
+
scope,
|
|
310
|
+
...checkboxItemProps
|
|
311
|
+
} = props;
|
|
312
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.CheckboxItem, {
|
|
313
|
+
componentName: CHECKBOX_ITEM_NAME,
|
|
314
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
315
|
+
...checkboxItemProps,
|
|
316
|
+
ref: forwardedRef
|
|
293
317
|
});
|
|
318
|
+
});
|
|
294
319
|
ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
295
|
-
var RADIO_GROUP_NAME = "ContextMenuRadioGroup"
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
});
|
|
320
|
+
var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
|
|
321
|
+
var ContextMenuRadioGroup = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
322
|
+
var {
|
|
323
|
+
scope,
|
|
324
|
+
...radioGroupProps
|
|
325
|
+
} = props;
|
|
326
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioGroup, {
|
|
327
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
328
|
+
...radioGroupProps,
|
|
329
|
+
ref: forwardedRef
|
|
306
330
|
});
|
|
331
|
+
});
|
|
307
332
|
ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
308
|
-
var RADIO_ITEM_NAME = "ContextMenuRadioItem"
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
});
|
|
333
|
+
var RADIO_ITEM_NAME = "ContextMenuRadioItem";
|
|
334
|
+
var ContextMenuRadioItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
335
|
+
var {
|
|
336
|
+
scope,
|
|
337
|
+
...radioItemProps
|
|
338
|
+
} = props;
|
|
339
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioItem, {
|
|
340
|
+
componentName: RADIO_ITEM_NAME,
|
|
341
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
342
|
+
...radioItemProps,
|
|
343
|
+
ref: forwardedRef
|
|
320
344
|
});
|
|
345
|
+
});
|
|
321
346
|
ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
|
|
322
|
-
var INDICATOR_NAME = "ContextMenuItemIndicator"
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
});
|
|
347
|
+
var INDICATOR_NAME = "ContextMenuItemIndicator";
|
|
348
|
+
var ContextMenuItemIndicator = Menu.ItemIndicator.styleable(function (props, forwardedRef) {
|
|
349
|
+
var {
|
|
350
|
+
scope,
|
|
351
|
+
...itemIndicatorProps
|
|
352
|
+
} = props;
|
|
353
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.ItemIndicator, {
|
|
354
|
+
componentName: INDICATOR_NAME,
|
|
355
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
356
|
+
...itemIndicatorProps,
|
|
357
|
+
ref: forwardedRef
|
|
334
358
|
});
|
|
359
|
+
});
|
|
335
360
|
ContextMenuItemIndicator.displayName = INDICATOR_NAME;
|
|
336
|
-
var SUB_NAME = "ContextMenuSub"
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
361
|
+
var SUB_NAME = "ContextMenuSub";
|
|
362
|
+
var ContextMenuSub = function (props) {
|
|
363
|
+
var {
|
|
364
|
+
scope,
|
|
365
|
+
children,
|
|
366
|
+
onOpenChange,
|
|
367
|
+
open: openProp,
|
|
368
|
+
defaultOpen,
|
|
369
|
+
...rest
|
|
370
|
+
} = props;
|
|
371
|
+
var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
372
|
+
prop: openProp,
|
|
373
|
+
defaultProp: defaultOpen,
|
|
374
|
+
onChange: onOpenChange
|
|
375
|
+
});
|
|
376
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
|
|
377
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
378
|
+
open,
|
|
379
|
+
onOpenChange: setOpen,
|
|
380
|
+
...rest,
|
|
381
|
+
children
|
|
382
|
+
});
|
|
383
|
+
};
|
|
359
384
|
ContextMenuSub.displayName = SUB_NAME;
|
|
360
|
-
var SUB_TRIGGER_NAME = "ContextMenuSubTrigger"
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
});
|
|
385
|
+
var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
|
|
386
|
+
var ContextMenuSubTrigger = import_web.View.styleable(function (props, forwardedRef) {
|
|
387
|
+
var {
|
|
388
|
+
scope,
|
|
389
|
+
...subTriggerProps
|
|
390
|
+
} = props;
|
|
391
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubTrigger, {
|
|
392
|
+
componentName: SUB_TRIGGER_NAME,
|
|
393
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
394
|
+
...subTriggerProps,
|
|
395
|
+
ref: forwardedRef
|
|
372
396
|
});
|
|
397
|
+
});
|
|
373
398
|
ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
|
|
374
|
-
var SUB_CONTENT_NAME = "ContextMenuSubContent"
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
"--
|
|
388
|
-
"--
|
|
389
|
-
"--
|
|
390
|
-
"--
|
|
391
|
-
|
|
392
|
-
|
|
399
|
+
var SUB_CONTENT_NAME = "ContextMenuSubContent";
|
|
400
|
+
var ContextMenuSubContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
401
|
+
var {
|
|
402
|
+
scope,
|
|
403
|
+
...subContentProps
|
|
404
|
+
} = props;
|
|
405
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
|
|
406
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
407
|
+
...subContentProps,
|
|
408
|
+
ref: forwardedRef,
|
|
409
|
+
style: import_web.isWeb ? {
|
|
410
|
+
...props.style,
|
|
411
|
+
...{
|
|
412
|
+
"--gui-context-menu-content-transform-origin": "var(--gui-popper-transform-origin)",
|
|
413
|
+
"--gui-context-menu-content-available-width": "var(--gui-popper-available-width)",
|
|
414
|
+
"--gui-context-menu-content-available-height": "var(--gui-popper-available-height)",
|
|
415
|
+
"--gui-context-menu-trigger-width": "var(--gui-popper-anchor-width)",
|
|
416
|
+
"--gui-context-menu-trigger-height": "var(--gui-popper-anchor-height)"
|
|
417
|
+
}
|
|
418
|
+
} : null
|
|
393
419
|
});
|
|
420
|
+
});
|
|
394
421
|
ContextMenuSubContent.displayName = SUB_CONTENT_NAME;
|
|
395
|
-
var ARROW_NAME = "ContextMenuArrow"
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
});
|
|
422
|
+
var ARROW_NAME = "ContextMenuArrow";
|
|
423
|
+
var ContextMenuArrow = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
|
|
424
|
+
var {
|
|
425
|
+
scope,
|
|
426
|
+
...arrowProps
|
|
427
|
+
} = props;
|
|
428
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Arrow, {
|
|
429
|
+
componentName: ARROW_NAME,
|
|
430
|
+
scope: scope || CONTEXTMENU_CONTEXT,
|
|
431
|
+
...arrowProps,
|
|
432
|
+
ref: forwardedRef
|
|
407
433
|
});
|
|
434
|
+
});
|
|
408
435
|
ContextMenuArrow.displayName = ARROW_NAME;
|
|
409
|
-
var ContextMenuGroup = Menu.Group
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
return (0,
|
|
436
|
+
var ContextMenuGroup = Menu.Group;
|
|
437
|
+
var ContextMenuLabel = Menu.Label;
|
|
438
|
+
var ContextMenuSeparator = Menu.Separator;
|
|
439
|
+
var ContextMenuItemTitle = Menu.ItemTitle;
|
|
440
|
+
var ContextMenuItemSubTitle = Menu.ItemSubtitle;
|
|
441
|
+
var ContextMenuItemImage = Menu.ItemImage;
|
|
442
|
+
var ContextMenuItemIcon = Menu.ItemIcon;
|
|
443
|
+
var ContextMenuPreview = function () {
|
|
444
|
+
return null;
|
|
445
|
+
};
|
|
446
|
+
return (0, import_web.withStaticProperties)(ContextMenuComp, {
|
|
420
447
|
Root: ContextMenuComp,
|
|
421
448
|
Trigger: ContextMenuTrigger,
|
|
422
449
|
Portal: ContextMenuPortal,
|