@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.
Files changed (34) hide show
  1. package/dist/cjs/ContextMenu.cjs +142 -139
  2. package/dist/cjs/ContextMenu.native.js +172 -170
  3. package/dist/cjs/ContextMenu.native.js.map +1 -1
  4. package/dist/cjs/createNonNativeContextMenu.cjs +370 -344
  5. package/dist/cjs/createNonNativeContextMenu.native.js +391 -364
  6. package/dist/cjs/createNonNativeContextMenu.native.js.map +1 -1
  7. package/dist/cjs/index.cjs +24 -22
  8. package/dist/cjs/index.native.js +26 -24
  9. package/dist/cjs/index.native.js.map +1 -1
  10. package/dist/esm/ContextMenu.mjs +114 -113
  11. package/dist/esm/ContextMenu.mjs.map +1 -1
  12. package/dist/esm/ContextMenu.native.js +141 -141
  13. package/dist/esm/ContextMenu.native.js.map +1 -1
  14. package/dist/esm/createNonNativeContextMenu.mjs +340 -316
  15. package/dist/esm/createNonNativeContextMenu.mjs.map +1 -1
  16. package/dist/esm/createNonNativeContextMenu.native.js +361 -336
  17. package/dist/esm/createNonNativeContextMenu.native.js.map +1 -1
  18. package/dist/jsx/ContextMenu.mjs +114 -113
  19. package/dist/jsx/ContextMenu.mjs.map +1 -1
  20. package/dist/jsx/ContextMenu.native.js +172 -170
  21. package/dist/jsx/ContextMenu.native.js.map +1 -1
  22. package/dist/jsx/createNonNativeContextMenu.mjs +340 -316
  23. package/dist/jsx/createNonNativeContextMenu.mjs.map +1 -1
  24. package/dist/jsx/createNonNativeContextMenu.native.js +391 -364
  25. package/dist/jsx/createNonNativeContextMenu.native.js.map +1 -1
  26. package/dist/jsx/index.native.js +26 -24
  27. package/dist/jsx/index.native.js.map +1 -1
  28. package/package.json +14 -12
  29. package/types/ContextMenu.d.ts +59 -59
  30. package/types/ContextMenu.d.ts.map +1 -0
  31. package/types/createNonNativeContextMenu.d.ts +53 -53
  32. package/types/createNonNativeContextMenu.d.ts.map +1 -0
  33. package/types/index.d.ts +59 -59
  34. 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
- __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
9
  var __export = (target, all) => {
10
- for (var name in all) __defProp(target, name, {
11
- get: all[name],
12
- enumerable: !0
13
- });
14
- },
15
- __copyProps = (to, from, except, desc) => {
16
- if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
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
- return to;
21
- };
21
+ }
22
+ return to;
23
+ };
22
24
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
- // If the importer is in node compatibility mode or this is not an ESM
24
- // file that has been converted to a CommonJS file using a Babel-
25
- // compatible transform (i.e. "__esModule" has not been set), then set
26
- // "default" to the CommonJS "module.exports" for node compatibility.
27
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
28
- value: mod,
29
- enumerable: !0
30
- }) : target, mod)),
31
- __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
32
- value: !0
33
- }), mod);
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
- import_gui_create_menu = require("@hanzogui/create-menu"),
42
- import_gui_use_controllable_state = require("@hanzogui/use-controllable-state"),
43
- import_gui_web = require("@hanzogui/web"),
44
- import_react = __toESM(require("react"), 1);
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
- return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
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
- Menu
52
- } = (0, import_gui_create_menu.createBaseMenu)(params),
53
- CONTEXT_MENU_NAME = "ContextMenu",
54
- {
55
- Provider: ContextMenuProvider,
56
- useStyledContext: useContextMenuContext
57
- } = (0, import_gui_web.createStyledContext)(),
58
- ContextMenuComp = function (props) {
59
- var {
60
- scope,
61
- children,
62
- onOpenChange,
63
- dir,
64
- modal = !0,
65
- ...rest
66
- } = props,
67
- [open, setOpen] = import_react.default.useState(!1),
68
- triggerRef = import_react.default.useRef(null),
69
- handleOpenChange = import_react.default.useCallback(function (open2, event) {
70
- onOpenChange?.(open2, event), !event?.defaultPrevented && setOpen(open2);
71
- }, [onOpenChange]);
72
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
73
- scope,
74
- triggerId: (0, import_react.useId)(),
75
- triggerRef,
76
- contentId: (0, import_react.useId)(),
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
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
81
- scope: scope || CONTEXTMENU_CONTEXT,
82
- dir,
83
- open,
84
- onOpenChange: handleOpenChange,
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
- ContextMenuTrigger = import_gui_web.View.styleable(function (props, forwardedRef) {
94
- var {
95
- scope,
96
- style,
97
- disabled = !1,
98
- asChild,
99
- children,
100
- ...triggerProps
101
- } = props,
102
- context = useContextMenuContext(scope),
103
- pointRef = import_react.default.useRef({
104
- x: 0,
105
- y: 0
106
- }),
107
- virtualRef = import_react.default.useMemo(function () {
108
- return {
109
- current: {
110
- getBoundingClientRect: function () {
111
- if (import_gui_web.isWeb) {
112
- var scrollX = window.scrollX || document.documentElement.scrollLeft,
113
- scrollY = window.scrollY || document.documentElement.scrollTop;
114
- return DOMRect.fromRect({
115
- width: 0,
116
- height: 0,
117
- x: pointRef.current.x - scrollX,
118
- y: pointRef.current.y - scrollY
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
- }, [pointRef.current.x, pointRef.current.y]),
140
- longPressTimerRef = import_react.default.useRef(0),
141
- clearLongPress = import_react.default.useCallback(function () {
142
- return window.clearTimeout(longPressTimerRef.current);
143
- }, []),
144
- createOpenChangeEvent = function () {
145
- var defaultPrevented = !1;
146
- return {
147
- get defaultPrevented() {
148
- return defaultPrevented;
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
- preventDefault() {
151
- defaultPrevented = !0;
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
- handleOpen = function (event) {
156
- import_gui_web.isWeb && (_instanceof(event, MouseEvent) || _instanceof(event, PointerEvent)) ? pointRef.current = {
157
- x: event.clientX,
158
- y: event.clientY
159
- } : pointRef.current = {
160
- x: event.nativeEvent.pageX,
161
- y: event.nativeEvent.pageY
162
- };
163
- var openChangeEvent = createOpenChangeEvent();
164
- return context.onOpenChange(!0, openChangeEvent), openChangeEvent;
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
- import_react.default.useEffect(function () {
167
- return clearLongPress;
168
- }, [clearLongPress]), import_react.default.useEffect(function () {
169
- disabled && clearLongPress();
170
- }, [disabled, clearLongPress]);
171
- var Comp = asChild ? import_gui_web.Slot : import_gui_web.View;
172
- return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
173
- children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Anchor, {
174
- scope: scope || CONTEXTMENU_CONTEXT,
175
- virtualRef
176
- }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
177
- render: "span",
178
- componentName: TRIGGER_NAME,
179
- id: context.triggerId,
180
- "data-state": context.open ? "open" : "closed",
181
- "data-disabled": disabled ? "" : void 0,
182
- ...triggerProps,
183
- ref: (0, import_gui_web.composeRefs)(forwardedRef, context.triggerRef),
184
- style: import_gui_web.isWeb ? {
185
- WebkitTouchCallout: "none",
186
- ...style
187
- } : null,
188
- ...(import_gui_web.isWeb && {
189
- onContextMenu: disabled ? props.onContextMenu : (0, import_gui_web.composeEventHandlers)(props.onContextMenu, function (event) {
190
- clearLongPress();
191
- var openChangeEvent = handleOpen(event);
192
- openChangeEvent.defaultPrevented || event.preventDefault();
193
- }),
194
- onPointerDown: disabled ? props.onPointerDown : (0, import_gui_web.composeEventHandlers)(props.onPointerDown, function (event) {
195
- event.pointerType !== "mouse" && (clearLongPress(), longPressTimerRef.current = window.setTimeout(function () {
196
- return handleOpen(event);
197
- }, 700));
198
- }),
199
- onPointerMove: disabled ? props.onPointerMove : (0, import_gui_web.composeEventHandlers)(props.onPointerMove, function (event) {
200
- event.pointerType !== "mouse" && clearLongPress();
201
- }),
202
- onPointerCancel: disabled ? props.onPointerCancel : (0, import_gui_web.composeEventHandlers)(props.onPointerCancel, function (event) {
203
- event.pointerType !== "mouse" && clearLongPress();
204
- }),
205
- onPointerUp: disabled ? props.onPointerUp : (0, import_gui_web.composeEventHandlers)(props.onPointerUp, function (event) {
206
- event.pointerType !== "mouse" && clearLongPress();
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
- ...(!import_gui_web.isWeb && {
210
- onLongPress: disabled ? props.onLongPress : (0, import_gui_web.composeEventHandlers)(props.onLongPress, function (event) {
211
- clearLongPress();
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
- children
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
- ContextMenuPortal = function (props) {
223
- var {
224
- scope,
225
- children,
226
- ...portalProps
227
- } = props,
228
- context = import_gui_web.isAndroid ? useContextMenuContext(scope) : null,
229
- content = import_gui_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContextMenuProvider, {
230
- ...context,
231
- children
232
- }) : children;
233
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
234
- scope: scope || CONTEXTMENU_CONTEXT,
235
- ...portalProps,
236
- children: content
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
- ContextMenuContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
242
- var {
243
- scope,
244
- ...contentProps
245
- } = props,
246
- context = useContextMenuContext(scope),
247
- hasInteractedOutsideRef = import_react.default.useRef(!1);
248
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
249
- id: context.contentId,
250
- "aria-labelledby": context.triggerId,
251
- scope: scope || CONTEXTMENU_CONTEXT,
252
- ...contentProps,
253
- ref: forwardedRef,
254
- onCloseAutoFocus: (0, import_gui_web.composeEventHandlers)(props.onCloseAutoFocus, function (event) {
255
- var _context_triggerRef_current;
256
- hasInteractedOutsideRef.current || (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus(), hasInteractedOutsideRef.current = !1, event.preventDefault();
257
- }),
258
- onInteractOutside: (0, import_gui_web.composeEventHandlers)(props.onInteractOutside, function (event) {
259
- var originalEvent = event.detail.originalEvent,
260
- ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
261
- isRightClick = originalEvent.button === 2 || ctrlLeftClick;
262
- (!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
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
- ContextMenuItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
269
- var {
270
- scope,
271
- ...itemProps
272
- } = props;
273
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Item, {
274
- componentName: ITEM_NAME,
275
- scope: scope || CONTEXTMENU_CONTEXT,
276
- ...itemProps,
277
- ref: forwardedRef
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
- ContextMenuCheckboxItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
283
- var {
284
- scope,
285
- ...checkboxItemProps
286
- } = props;
287
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.CheckboxItem, {
288
- componentName: CHECKBOX_ITEM_NAME,
289
- scope: scope || CONTEXTMENU_CONTEXT,
290
- ...checkboxItemProps,
291
- ref: forwardedRef
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
- ContextMenuRadioGroup = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
297
- var {
298
- scope,
299
- ...radioGroupProps
300
- } = props;
301
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioGroup, {
302
- scope: scope || CONTEXTMENU_CONTEXT,
303
- ...radioGroupProps,
304
- ref: forwardedRef
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
- ContextMenuRadioItem = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
310
- var {
311
- scope,
312
- ...radioItemProps
313
- } = props;
314
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.RadioItem, {
315
- componentName: RADIO_ITEM_NAME,
316
- scope: scope || CONTEXTMENU_CONTEXT,
317
- ...radioItemProps,
318
- ref: forwardedRef
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
- ContextMenuItemIndicator = Menu.ItemIndicator.styleable(function (props, forwardedRef) {
324
- var {
325
- scope,
326
- ...itemIndicatorProps
327
- } = props;
328
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.ItemIndicator, {
329
- componentName: INDICATOR_NAME,
330
- scope: scope || CONTEXTMENU_CONTEXT,
331
- ...itemIndicatorProps,
332
- ref: forwardedRef
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
- ContextMenuSub = function (props) {
338
- var {
339
- scope,
340
- children,
341
- onOpenChange,
342
- open: openProp,
343
- defaultOpen,
344
- ...rest
345
- } = props,
346
- [open, setOpen] = (0, import_gui_use_controllable_state.useControllableState)({
347
- prop: openProp,
348
- defaultProp: defaultOpen,
349
- onChange: onOpenChange
350
- });
351
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
352
- scope: scope || CONTEXTMENU_CONTEXT,
353
- open,
354
- onOpenChange: setOpen,
355
- ...rest,
356
- children
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
- ContextMenuSubTrigger = import_gui_web.View.styleable(function (props, forwardedRef) {
362
- var {
363
- scope,
364
- ...subTriggerProps
365
- } = props;
366
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubTrigger, {
367
- componentName: SUB_TRIGGER_NAME,
368
- scope: scope || CONTEXTMENU_CONTEXT,
369
- ...subTriggerProps,
370
- ref: forwardedRef
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
- ContextMenuSubContent = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
376
- var {
377
- scope,
378
- ...subContentProps
379
- } = props;
380
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
381
- scope: scope || CONTEXTMENU_CONTEXT,
382
- ...subContentProps,
383
- ref: forwardedRef,
384
- style: import_gui_web.isWeb ? {
385
- ...props.style,
386
- "--tamagui-context-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
387
- "--tamagui-context-menu-content-available-width": "var(--tamagui-popper-available-width)",
388
- "--tamagui-context-menu-content-available-height": "var(--tamagui-popper-available-height)",
389
- "--tamagui-context-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
390
- "--tamagui-context-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
391
- } : null
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
- ContextMenuArrow = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
397
- var {
398
- scope,
399
- ...arrowProps
400
- } = props;
401
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Arrow, {
402
- componentName: ARROW_NAME,
403
- scope: scope || CONTEXTMENU_CONTEXT,
404
- ...arrowProps,
405
- ref: forwardedRef
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
- ContextMenuLabel = Menu.Label,
411
- ContextMenuSeparator = Menu.Separator,
412
- ContextMenuItemTitle = Menu.ItemTitle,
413
- ContextMenuItemSubTitle = Menu.ItemSubtitle,
414
- ContextMenuItemImage = Menu.ItemImage,
415
- ContextMenuItemIcon = Menu.ItemIcon,
416
- ContextMenuPreview = function () {
417
- return null;
418
- };
419
- return (0, import_gui_web.withStaticProperties)(ContextMenuComp, {
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,