@radix-ui/react-menu 2.0.7-rc.8 → 2.1.0-rc.1
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/index.d.mts +82 -70
- package/dist/index.d.ts +82 -70
- package/dist/index.js +806 -974
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +801 -927
- package/dist/index.mjs.map +7 -1
- package/package.json +17 -18
- package/dist/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,1032 +1,864 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
$parcel$export(module.exports, "MenuAnchor", () => $213e4d2df823067d$export$9fa5ebd18bee4d43);
|
|
32
|
-
$parcel$export(module.exports, "MenuPortal", () => $213e4d2df823067d$export$793392f970497feb);
|
|
33
|
-
$parcel$export(module.exports, "MenuContent", () => $213e4d2df823067d$export$479f0f2f71193efe);
|
|
34
|
-
$parcel$export(module.exports, "MenuGroup", () => $213e4d2df823067d$export$22a631d1f72787bb);
|
|
35
|
-
$parcel$export(module.exports, "MenuLabel", () => $213e4d2df823067d$export$dd37bec0e8a99143);
|
|
36
|
-
$parcel$export(module.exports, "MenuItem", () => $213e4d2df823067d$export$2ce376c2cc3355c8);
|
|
37
|
-
$parcel$export(module.exports, "MenuCheckboxItem", () => $213e4d2df823067d$export$f6f243521332502d);
|
|
38
|
-
$parcel$export(module.exports, "MenuRadioGroup", () => $213e4d2df823067d$export$ea2200c9eee416b3);
|
|
39
|
-
$parcel$export(module.exports, "MenuRadioItem", () => $213e4d2df823067d$export$69bd225e9817f6d0);
|
|
40
|
-
$parcel$export(module.exports, "MenuItemIndicator", () => $213e4d2df823067d$export$a2593e23056970a3);
|
|
41
|
-
$parcel$export(module.exports, "MenuSeparator", () => $213e4d2df823067d$export$1cec7dcdd713e220);
|
|
42
|
-
$parcel$export(module.exports, "MenuArrow", () => $213e4d2df823067d$export$bcdda4773debf5fa);
|
|
43
|
-
$parcel$export(module.exports, "MenuSub", () => $213e4d2df823067d$export$71bdb9d1e2909932);
|
|
44
|
-
$parcel$export(module.exports, "MenuSubTrigger", () => $213e4d2df823067d$export$5fbbb3ba7297405f);
|
|
45
|
-
$parcel$export(module.exports, "MenuSubContent", () => $213e4d2df823067d$export$e7142ab31822bde6);
|
|
46
|
-
$parcel$export(module.exports, "Root", () => $213e4d2df823067d$export$be92b6f5f03c0fe9);
|
|
47
|
-
$parcel$export(module.exports, "Anchor", () => $213e4d2df823067d$export$b688253958b8dfe7);
|
|
48
|
-
$parcel$export(module.exports, "Portal", () => $213e4d2df823067d$export$602eac185826482c);
|
|
49
|
-
$parcel$export(module.exports, "Content", () => $213e4d2df823067d$export$7c6e2c02157bb7d2);
|
|
50
|
-
$parcel$export(module.exports, "Group", () => $213e4d2df823067d$export$eb2fcfdbd7ba97d4);
|
|
51
|
-
$parcel$export(module.exports, "Label", () => $213e4d2df823067d$export$b04be29aa201d4f5);
|
|
52
|
-
$parcel$export(module.exports, "Item", () => $213e4d2df823067d$export$6d08773d2e66f8f2);
|
|
53
|
-
$parcel$export(module.exports, "CheckboxItem", () => $213e4d2df823067d$export$16ce288f89fa631c);
|
|
54
|
-
$parcel$export(module.exports, "RadioGroup", () => $213e4d2df823067d$export$a98f0dcb43a68a25);
|
|
55
|
-
$parcel$export(module.exports, "RadioItem", () => $213e4d2df823067d$export$371ab307eab489c0);
|
|
56
|
-
$parcel$export(module.exports, "ItemIndicator", () => $213e4d2df823067d$export$c3468e2714d175fa);
|
|
57
|
-
$parcel$export(module.exports, "Separator", () => $213e4d2df823067d$export$1ff3c3f08ae963c0);
|
|
58
|
-
$parcel$export(module.exports, "Arrow", () => $213e4d2df823067d$export$21b07c8f274aebd5);
|
|
59
|
-
$parcel$export(module.exports, "Sub", () => $213e4d2df823067d$export$d7a01e11500dfb6f);
|
|
60
|
-
$parcel$export(module.exports, "SubTrigger", () => $213e4d2df823067d$export$2ea8a7a591ac5eac);
|
|
61
|
-
$parcel$export(module.exports, "SubContent", () => $213e4d2df823067d$export$6d4de93b380beddf);
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
(() => {
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
10
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
11
|
+
}) : x)(function(x) {
|
|
12
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
13
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
14
|
+
});
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
83
31
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
]);
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
const
|
|
132
|
-
const
|
|
133
|
-
const
|
|
134
|
-
const
|
|
135
|
-
const
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
capture: true,
|
|
151
|
-
once: true
|
|
152
|
-
});
|
|
153
|
-
};
|
|
154
|
-
const handlePointer = ()=>isUsingKeyboardRef.current = false
|
|
155
|
-
;
|
|
156
|
-
document.addEventListener('keydown', handleKeyDown, {
|
|
157
|
-
capture: true
|
|
158
|
-
});
|
|
159
|
-
return ()=>{
|
|
160
|
-
document.removeEventListener('keydown', handleKeyDown, {
|
|
161
|
-
capture: true
|
|
162
|
-
});
|
|
163
|
-
document.removeEventListener('pointerdown', handlePointer, {
|
|
164
|
-
capture: true
|
|
165
|
-
});
|
|
166
|
-
document.removeEventListener('pointermove', handlePointer, {
|
|
167
|
-
capture: true
|
|
168
|
-
});
|
|
169
|
-
};
|
|
32
|
+
// packages/react/menu/src/Menu.tsx
|
|
33
|
+
var React = __toESM(__require("react"));
|
|
34
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
35
|
+
var import_react_collection = __require("@radix-ui/react-collection");
|
|
36
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
37
|
+
var import_react_context = __require("@radix-ui/react-context");
|
|
38
|
+
var import_react_direction = __require("@radix-ui/react-direction");
|
|
39
|
+
var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
|
|
40
|
+
var import_react_focus_guards = __require("@radix-ui/react-focus-guards");
|
|
41
|
+
var import_react_focus_scope = __require("@radix-ui/react-focus-scope");
|
|
42
|
+
var import_react_id = __require("@radix-ui/react-id");
|
|
43
|
+
var PopperPrimitive = __toESM(__require("@radix-ui/react-popper"));
|
|
44
|
+
var import_react_popper = __require("@radix-ui/react-popper");
|
|
45
|
+
var import_react_portal = __require("@radix-ui/react-portal");
|
|
46
|
+
var import_react_presence = __require("@radix-ui/react-presence");
|
|
47
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
48
|
+
var RovingFocusGroup = __toESM(__require("@radix-ui/react-roving-focus"));
|
|
49
|
+
var import_react_roving_focus = __require("@radix-ui/react-roving-focus");
|
|
50
|
+
var import_react_slot = __require("@radix-ui/react-slot");
|
|
51
|
+
var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
|
|
52
|
+
var import_aria_hidden = __require("aria-hidden");
|
|
53
|
+
var import_react_remove_scroll = __require("react-remove-scroll");
|
|
54
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
55
|
+
var SELECTION_KEYS = ["Enter", " "];
|
|
56
|
+
var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
|
|
57
|
+
var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
|
|
58
|
+
var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
|
|
59
|
+
var SUB_OPEN_KEYS = {
|
|
60
|
+
ltr: [...SELECTION_KEYS, "ArrowRight"],
|
|
61
|
+
rtl: [...SELECTION_KEYS, "ArrowLeft"]
|
|
62
|
+
};
|
|
63
|
+
var SUB_CLOSE_KEYS = {
|
|
64
|
+
ltr: ["ArrowLeft"],
|
|
65
|
+
rtl: ["ArrowRight"]
|
|
66
|
+
};
|
|
67
|
+
var MENU_NAME = "Menu";
|
|
68
|
+
var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(MENU_NAME);
|
|
69
|
+
var [createMenuContext, createMenuScope] = (0, import_react_context.createContextScope)(MENU_NAME, [
|
|
70
|
+
createCollectionScope,
|
|
71
|
+
import_react_popper.createPopperScope,
|
|
72
|
+
import_react_roving_focus.createRovingFocusGroupScope
|
|
73
|
+
]);
|
|
74
|
+
var usePopperScope = (0, import_react_popper.createPopperScope)();
|
|
75
|
+
var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
|
|
76
|
+
var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
|
|
77
|
+
var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
|
|
78
|
+
var Menu = (props) => {
|
|
79
|
+
const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
|
|
80
|
+
const popperScope = usePopperScope(__scopeMenu);
|
|
81
|
+
const [content, setContent] = React.useState(null);
|
|
82
|
+
const isUsingKeyboardRef = React.useRef(false);
|
|
83
|
+
const handleOpenChange = (0, import_react_use_callback_ref.useCallbackRef)(onOpenChange);
|
|
84
|
+
const direction = (0, import_react_direction.useDirection)(dir);
|
|
85
|
+
React.useEffect(() => {
|
|
86
|
+
const handleKeyDown = () => {
|
|
87
|
+
isUsingKeyboardRef.current = true;
|
|
88
|
+
document.addEventListener("pointerdown", handlePointer, { capture: true, once: true });
|
|
89
|
+
document.addEventListener("pointermove", handlePointer, { capture: true, once: true });
|
|
90
|
+
};
|
|
91
|
+
const handlePointer = () => isUsingKeyboardRef.current = false;
|
|
92
|
+
document.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
93
|
+
return () => {
|
|
94
|
+
document.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
95
|
+
document.removeEventListener("pointerdown", handlePointer, { capture: true });
|
|
96
|
+
document.removeEventListener("pointermove", handlePointer, { capture: true });
|
|
97
|
+
};
|
|
170
98
|
}, []);
|
|
171
|
-
return
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
+
MenuProvider,
|
|
101
|
+
{
|
|
172
102
|
scope: __scopeMenu,
|
|
173
|
-
open
|
|
103
|
+
open,
|
|
174
104
|
onOpenChange: handleOpenChange,
|
|
175
|
-
content
|
|
176
|
-
onContentChange: setContent
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
handleOpenChange
|
|
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
|
-
const
|
|
208
|
-
forceMount:
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
* -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$CONTENT_NAME = 'MenuContent';
|
|
229
|
-
const [$213e4d2df823067d$var$MenuContentProvider, $213e4d2df823067d$var$useMenuContentContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$CONTENT_NAME);
|
|
230
|
-
const $213e4d2df823067d$export$479f0f2f71193efe = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
|
|
231
|
-
const portalContext = $213e4d2df823067d$var$usePortalContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
|
|
232
|
-
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
|
|
233
|
-
const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
|
|
234
|
-
const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
|
|
235
|
-
return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Provider, {
|
|
236
|
-
scope: props.__scopeMenu
|
|
237
|
-
}, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
|
|
238
|
-
present: forceMount || context.open
|
|
239
|
-
}, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Slot, {
|
|
240
|
-
scope: props.__scopeMenu
|
|
241
|
-
}, rootContext.modal ? /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContentModal, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, contentProps, {
|
|
242
|
-
ref: forwardedRef
|
|
243
|
-
})) : /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootContentNonModal, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, contentProps, {
|
|
244
|
-
ref: forwardedRef
|
|
245
|
-
})))));
|
|
246
|
-
});
|
|
247
|
-
/* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuRootContentModal = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
|
|
248
|
-
const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
|
|
249
|
-
const ref = $cnSS2$react.useRef(null);
|
|
250
|
-
const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
|
|
251
|
-
$cnSS2$react.useEffect(()=>{
|
|
105
|
+
content,
|
|
106
|
+
onContentChange: setContent,
|
|
107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
|
+
MenuRootProvider,
|
|
109
|
+
{
|
|
110
|
+
scope: __scopeMenu,
|
|
111
|
+
onClose: React.useCallback(() => handleOpenChange(false), [handleOpenChange]),
|
|
112
|
+
isUsingKeyboardRef,
|
|
113
|
+
dir: direction,
|
|
114
|
+
modal,
|
|
115
|
+
children
|
|
116
|
+
}
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
) });
|
|
120
|
+
};
|
|
121
|
+
Menu.displayName = MENU_NAME;
|
|
122
|
+
var ANCHOR_NAME = "MenuAnchor";
|
|
123
|
+
var MenuAnchor = React.forwardRef(
|
|
124
|
+
(props, forwardedRef) => {
|
|
125
|
+
const { __scopeMenu, ...anchorProps } = props;
|
|
126
|
+
const popperScope = usePopperScope(__scopeMenu);
|
|
127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
MenuAnchor.displayName = ANCHOR_NAME;
|
|
131
|
+
var PORTAL_NAME = "MenuPortal";
|
|
132
|
+
var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME, {
|
|
133
|
+
forceMount: void 0
|
|
134
|
+
});
|
|
135
|
+
var MenuPortal = (props) => {
|
|
136
|
+
const { __scopeMenu, forceMount, children, container } = props;
|
|
137
|
+
const context = useMenuContext(PORTAL_NAME, __scopeMenu);
|
|
138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, container, children }) }) });
|
|
139
|
+
};
|
|
140
|
+
MenuPortal.displayName = PORTAL_NAME;
|
|
141
|
+
var CONTENT_NAME = "MenuContent";
|
|
142
|
+
var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME);
|
|
143
|
+
var MenuContent = React.forwardRef(
|
|
144
|
+
(props, forwardedRef) => {
|
|
145
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeMenu);
|
|
146
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
147
|
+
const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
|
|
148
|
+
const rootContext = useMenuRootContext(CONTENT_NAME, props.__scopeMenu);
|
|
149
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
var MenuRootContentModal = React.forwardRef(
|
|
153
|
+
(props, forwardedRef) => {
|
|
154
|
+
const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
|
|
155
|
+
const ref = React.useRef(null);
|
|
156
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
157
|
+
React.useEffect(() => {
|
|
252
158
|
const content = ref.current;
|
|
253
|
-
if (content) return
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
159
|
+
if (content) return (0, import_aria_hidden.hideOthers)(content);
|
|
160
|
+
}, []);
|
|
161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
162
|
+
MenuContentImpl,
|
|
163
|
+
{
|
|
164
|
+
...props,
|
|
165
|
+
ref: composedRefs,
|
|
166
|
+
trapFocus: context.open,
|
|
167
|
+
disableOutsidePointerEvents: context.open,
|
|
168
|
+
disableOutsideScroll: true,
|
|
169
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(
|
|
170
|
+
props.onFocusOutside,
|
|
171
|
+
(event) => event.preventDefault(),
|
|
172
|
+
{ checkForDefaultPrevented: false }
|
|
173
|
+
),
|
|
174
|
+
onDismiss: () => context.onOpenChange(false)
|
|
175
|
+
}
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
);
|
|
179
|
+
var MenuRootContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
180
|
+
const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
|
|
181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
182
|
+
MenuContentImpl,
|
|
183
|
+
{
|
|
184
|
+
...props,
|
|
273
185
|
ref: forwardedRef,
|
|
274
186
|
trapFocus: false,
|
|
275
187
|
disableOutsidePointerEvents: false,
|
|
276
188
|
disableOutsideScroll: false,
|
|
277
|
-
onDismiss: ()=>context.onOpenChange(false)
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
189
|
+
onDismiss: () => context.onOpenChange(false)
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
});
|
|
193
|
+
var MenuContentImpl = React.forwardRef(
|
|
194
|
+
(props, forwardedRef) => {
|
|
195
|
+
const {
|
|
196
|
+
__scopeMenu,
|
|
197
|
+
loop = false,
|
|
198
|
+
trapFocus,
|
|
199
|
+
onOpenAutoFocus,
|
|
200
|
+
onCloseAutoFocus,
|
|
201
|
+
disableOutsidePointerEvents,
|
|
202
|
+
onEntryFocus,
|
|
203
|
+
onEscapeKeyDown,
|
|
204
|
+
onPointerDownOutside,
|
|
205
|
+
onFocusOutside,
|
|
206
|
+
onInteractOutside,
|
|
207
|
+
onDismiss,
|
|
208
|
+
disableOutsideScroll,
|
|
209
|
+
...contentProps
|
|
210
|
+
} = props;
|
|
211
|
+
const context = useMenuContext(CONTENT_NAME, __scopeMenu);
|
|
212
|
+
const rootContext = useMenuRootContext(CONTENT_NAME, __scopeMenu);
|
|
213
|
+
const popperScope = usePopperScope(__scopeMenu);
|
|
214
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
|
|
215
|
+
const getItems = useCollection(__scopeMenu);
|
|
216
|
+
const [currentItemId, setCurrentItemId] = React.useState(null);
|
|
217
|
+
const contentRef = React.useRef(null);
|
|
218
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, contentRef, context.onContentChange);
|
|
219
|
+
const timerRef = React.useRef(0);
|
|
220
|
+
const searchRef = React.useRef("");
|
|
221
|
+
const pointerGraceTimerRef = React.useRef(0);
|
|
222
|
+
const pointerGraceIntentRef = React.useRef(null);
|
|
223
|
+
const pointerDirRef = React.useRef("right");
|
|
224
|
+
const lastPointerXRef = React.useRef(0);
|
|
225
|
+
const ScrollLockWrapper = disableOutsideScroll ? import_react_remove_scroll.RemoveScroll : React.Fragment;
|
|
226
|
+
const scrollLockWrapperProps = disableOutsideScroll ? { as: import_react_slot.Slot, allowPinchZoom: true } : void 0;
|
|
227
|
+
const handleTypeaheadSearch = (key) => {
|
|
303
228
|
const search = searchRef.current + key;
|
|
304
|
-
const items = getItems().filter((item)
|
|
305
|
-
);
|
|
229
|
+
const items = getItems().filter((item) => !item.disabled);
|
|
306
230
|
const currentItem = document.activeElement;
|
|
307
|
-
const currentMatch =
|
|
308
|
-
|
|
309
|
-
const
|
|
310
|
-
);
|
|
311
|
-
const nextMatch = $213e4d2df823067d$var$getNextMatch(values, search, currentMatch);
|
|
312
|
-
const newItem = (_items$find2 = items.find((item)=>item.textValue === nextMatch
|
|
313
|
-
)) === null || _items$find2 === void 0 ? void 0 : _items$find2.ref.current; // Reset `searchRef` 1 second after it was last updated
|
|
231
|
+
const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
|
|
232
|
+
const values = items.map((item) => item.textValue);
|
|
233
|
+
const nextMatch = getNextMatch(values, search, currentMatch);
|
|
234
|
+
const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
|
|
314
235
|
(function updateSearch(value) {
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
, 1000);
|
|
236
|
+
searchRef.current = value;
|
|
237
|
+
window.clearTimeout(timerRef.current);
|
|
238
|
+
if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
|
|
319
239
|
})(search);
|
|
320
|
-
if (newItem)
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
onPointerGraceIntentChange: $cnSS2$react.useCallback((intent)=>{
|
|
240
|
+
if (newItem) {
|
|
241
|
+
setTimeout(() => newItem.focus());
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
React.useEffect(() => {
|
|
245
|
+
return () => window.clearTimeout(timerRef.current);
|
|
246
|
+
}, []);
|
|
247
|
+
(0, import_react_focus_guards.useFocusGuards)();
|
|
248
|
+
const isPointerMovingToSubmenu = React.useCallback((event) => {
|
|
249
|
+
const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
|
|
250
|
+
return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
|
|
251
|
+
}, []);
|
|
252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
253
|
+
MenuContentProvider,
|
|
254
|
+
{
|
|
255
|
+
scope: __scopeMenu,
|
|
256
|
+
searchRef,
|
|
257
|
+
onItemEnter: React.useCallback(
|
|
258
|
+
(event) => {
|
|
259
|
+
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
260
|
+
},
|
|
261
|
+
[isPointerMovingToSubmenu]
|
|
262
|
+
),
|
|
263
|
+
onItemLeave: React.useCallback(
|
|
264
|
+
(event) => {
|
|
265
|
+
if (isPointerMovingToSubmenu(event)) return;
|
|
266
|
+
contentRef.current?.focus();
|
|
267
|
+
setCurrentItemId(null);
|
|
268
|
+
},
|
|
269
|
+
[isPointerMovingToSubmenu]
|
|
270
|
+
),
|
|
271
|
+
onTriggerLeave: React.useCallback(
|
|
272
|
+
(event) => {
|
|
273
|
+
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
274
|
+
},
|
|
275
|
+
[isPointerMovingToSubmenu]
|
|
276
|
+
),
|
|
277
|
+
pointerGraceTimerRef,
|
|
278
|
+
onPointerGraceIntentChange: React.useCallback((intent) => {
|
|
360
279
|
pointerGraceIntentRef.current = intent;
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
280
|
+
}, []),
|
|
281
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
282
|
+
import_react_focus_scope.FocusScope,
|
|
283
|
+
{
|
|
284
|
+
asChild: true,
|
|
285
|
+
trapped: trapFocus,
|
|
286
|
+
onMountAutoFocus: (0, import_primitive.composeEventHandlers)(onOpenAutoFocus, (event) => {
|
|
287
|
+
event.preventDefault();
|
|
288
|
+
contentRef.current?.focus({ preventScroll: true });
|
|
289
|
+
}),
|
|
290
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
291
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
292
|
+
import_react_dismissable_layer.DismissableLayer,
|
|
293
|
+
{
|
|
294
|
+
asChild: true,
|
|
295
|
+
disableOutsidePointerEvents,
|
|
296
|
+
onEscapeKeyDown,
|
|
297
|
+
onPointerDownOutside,
|
|
298
|
+
onFocusOutside,
|
|
299
|
+
onInteractOutside,
|
|
300
|
+
onDismiss,
|
|
301
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
302
|
+
RovingFocusGroup.Root,
|
|
303
|
+
{
|
|
304
|
+
asChild: true,
|
|
305
|
+
...rovingFocusGroupScope,
|
|
306
|
+
dir: rootContext.dir,
|
|
307
|
+
orientation: "vertical",
|
|
308
|
+
loop,
|
|
309
|
+
currentTabStopId: currentItemId,
|
|
310
|
+
onCurrentTabStopIdChange: setCurrentItemId,
|
|
311
|
+
onEntryFocus: (0, import_primitive.composeEventHandlers)(onEntryFocus, (event) => {
|
|
312
|
+
if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
|
|
313
|
+
}),
|
|
314
|
+
preventScrollOnEntryFocus: true,
|
|
315
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
316
|
+
PopperPrimitive.Content,
|
|
317
|
+
{
|
|
318
|
+
role: "menu",
|
|
319
|
+
"aria-orientation": "vertical",
|
|
320
|
+
"data-state": getOpenState(context.open),
|
|
321
|
+
"data-radix-menu-content": "",
|
|
322
|
+
dir: rootContext.dir,
|
|
323
|
+
...popperScope,
|
|
324
|
+
...contentProps,
|
|
325
|
+
ref: composedRefs,
|
|
326
|
+
style: { outline: "none", ...contentProps.style },
|
|
327
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(contentProps.onKeyDown, (event) => {
|
|
328
|
+
const target = event.target;
|
|
329
|
+
const isKeyDownInside = target.closest("[data-radix-menu-content]") === event.currentTarget;
|
|
330
|
+
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
331
|
+
const isCharacterKey = event.key.length === 1;
|
|
332
|
+
if (isKeyDownInside) {
|
|
333
|
+
if (event.key === "Tab") event.preventDefault();
|
|
334
|
+
if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
|
|
335
|
+
}
|
|
336
|
+
const content = contentRef.current;
|
|
337
|
+
if (event.target !== content) return;
|
|
338
|
+
if (!FIRST_LAST_KEYS.includes(event.key)) return;
|
|
339
|
+
event.preventDefault();
|
|
340
|
+
const items = getItems().filter((item) => !item.disabled);
|
|
341
|
+
const candidateNodes = items.map((item) => item.ref.current);
|
|
342
|
+
if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
|
|
343
|
+
focusFirst(candidateNodes);
|
|
344
|
+
}),
|
|
345
|
+
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, (event) => {
|
|
346
|
+
if (!event.currentTarget.contains(event.target)) {
|
|
347
|
+
window.clearTimeout(timerRef.current);
|
|
348
|
+
searchRef.current = "";
|
|
349
|
+
}
|
|
350
|
+
}),
|
|
351
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(
|
|
352
|
+
props.onPointerMove,
|
|
353
|
+
whenMouse((event) => {
|
|
354
|
+
const target = event.target;
|
|
355
|
+
const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
|
|
356
|
+
if (event.currentTarget.contains(target) && pointerXHasChanged) {
|
|
357
|
+
const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
|
|
358
|
+
pointerDirRef.current = newDir;
|
|
359
|
+
lastPointerXRef.current = event.clientX;
|
|
360
|
+
}
|
|
361
|
+
})
|
|
362
|
+
)
|
|
363
|
+
}
|
|
364
|
+
)
|
|
365
|
+
}
|
|
366
|
+
)
|
|
367
|
+
}
|
|
368
|
+
)
|
|
445
369
|
}
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
const
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
* MenuItem
|
|
480
|
-
* -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$ITEM_NAME = 'MenuItem';
|
|
481
|
-
const $213e4d2df823067d$var$ITEM_SELECT = 'menu.itemSelect';
|
|
482
|
-
const $213e4d2df823067d$export$2ce376c2cc3355c8 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
|
|
483
|
-
const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
|
|
484
|
-
const ref = $cnSS2$react.useRef(null);
|
|
485
|
-
const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$ITEM_NAME, props.__scopeMenu);
|
|
486
|
-
const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$ITEM_NAME, props.__scopeMenu);
|
|
487
|
-
const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
|
|
488
|
-
const isPointerDownRef = $cnSS2$react.useRef(false);
|
|
489
|
-
const handleSelect = ()=>{
|
|
370
|
+
) })
|
|
371
|
+
}
|
|
372
|
+
);
|
|
373
|
+
}
|
|
374
|
+
);
|
|
375
|
+
MenuContent.displayName = CONTENT_NAME;
|
|
376
|
+
var GROUP_NAME = "MenuGroup";
|
|
377
|
+
var MenuGroup = React.forwardRef(
|
|
378
|
+
(props, forwardedRef) => {
|
|
379
|
+
const { __scopeMenu, ...groupProps } = props;
|
|
380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
|
|
381
|
+
}
|
|
382
|
+
);
|
|
383
|
+
MenuGroup.displayName = GROUP_NAME;
|
|
384
|
+
var LABEL_NAME = "MenuLabel";
|
|
385
|
+
var MenuLabel = React.forwardRef(
|
|
386
|
+
(props, forwardedRef) => {
|
|
387
|
+
const { __scopeMenu, ...labelProps } = props;
|
|
388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...labelProps, ref: forwardedRef });
|
|
389
|
+
}
|
|
390
|
+
);
|
|
391
|
+
MenuLabel.displayName = LABEL_NAME;
|
|
392
|
+
var ITEM_NAME = "MenuItem";
|
|
393
|
+
var ITEM_SELECT = "menu.itemSelect";
|
|
394
|
+
var MenuItem = React.forwardRef(
|
|
395
|
+
(props, forwardedRef) => {
|
|
396
|
+
const { disabled = false, onSelect, ...itemProps } = props;
|
|
397
|
+
const ref = React.useRef(null);
|
|
398
|
+
const rootContext = useMenuRootContext(ITEM_NAME, props.__scopeMenu);
|
|
399
|
+
const contentContext = useMenuContentContext(ITEM_NAME, props.__scopeMenu);
|
|
400
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
401
|
+
const isPointerDownRef = React.useRef(false);
|
|
402
|
+
const handleSelect = () => {
|
|
490
403
|
const menuItem = ref.current;
|
|
491
404
|
if (!disabled && menuItem) {
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
$cnSS2$radixuireactprimitive.dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
|
|
501
|
-
if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
|
|
502
|
-
else rootContext.onClose();
|
|
405
|
+
const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });
|
|
406
|
+
menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
|
|
407
|
+
(0, import_react_primitive.dispatchDiscreteCustomEvent)(menuItem, itemSelectEvent);
|
|
408
|
+
if (itemSelectEvent.defaultPrevented) {
|
|
409
|
+
isPointerDownRef.current = false;
|
|
410
|
+
} else {
|
|
411
|
+
rootContext.onClose();
|
|
412
|
+
}
|
|
503
413
|
}
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
414
|
+
};
|
|
415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
416
|
+
MenuItemImpl,
|
|
417
|
+
{
|
|
418
|
+
...itemProps,
|
|
419
|
+
ref: composedRefs,
|
|
420
|
+
disabled,
|
|
421
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, handleSelect),
|
|
422
|
+
onPointerDown: (event) => {
|
|
423
|
+
props.onPointerDown?.(event);
|
|
512
424
|
isPointerDownRef.current = true;
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
if (
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
if (disabled || isTypingAhead && event.key === ' ') return;
|
|
524
|
-
if ($213e4d2df823067d$var$SELECTION_KEYS.includes(event.key)) {
|
|
525
|
-
event.currentTarget.click();
|
|
526
|
-
/**
|
|
527
|
-
* We prevent default browser behaviour for selection keys as they should trigger
|
|
528
|
-
* a selection only:
|
|
529
|
-
* - prevents space from scrolling the page.
|
|
530
|
-
* - if keydown causes focus to move, prevents keydown from firing on the new target.
|
|
531
|
-
*/ event.preventDefault();
|
|
425
|
+
},
|
|
426
|
+
onPointerUp: (0, import_primitive.composeEventHandlers)(props.onPointerUp, (event) => {
|
|
427
|
+
if (!isPointerDownRef.current) event.currentTarget?.click();
|
|
428
|
+
}),
|
|
429
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
430
|
+
const isTypingAhead = contentContext.searchRef.current !== "";
|
|
431
|
+
if (disabled || isTypingAhead && event.key === " ") return;
|
|
432
|
+
if (SELECTION_KEYS.includes(event.key)) {
|
|
433
|
+
event.currentTarget.click();
|
|
434
|
+
event.preventDefault();
|
|
532
435
|
}
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
436
|
+
})
|
|
437
|
+
}
|
|
438
|
+
);
|
|
439
|
+
}
|
|
440
|
+
);
|
|
441
|
+
MenuItem.displayName = ITEM_NAME;
|
|
442
|
+
var MenuItemImpl = React.forwardRef(
|
|
443
|
+
(props, forwardedRef) => {
|
|
444
|
+
const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
|
|
445
|
+
const contentContext = useMenuContentContext(ITEM_NAME, __scopeMenu);
|
|
446
|
+
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
|
|
447
|
+
const ref = React.useRef(null);
|
|
448
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
449
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
450
|
+
const [textContent, setTextContent] = React.useState("");
|
|
451
|
+
React.useEffect(() => {
|
|
548
452
|
const menuItem = ref.current;
|
|
549
453
|
if (menuItem) {
|
|
550
|
-
|
|
551
|
-
setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim());
|
|
454
|
+
setTextContent((menuItem.textContent ?? "").trim());
|
|
552
455
|
}
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
456
|
+
}, [itemProps.children]);
|
|
457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
458
|
+
Collection.ItemSlot,
|
|
459
|
+
{
|
|
460
|
+
scope: __scopeMenu,
|
|
461
|
+
disabled,
|
|
462
|
+
textValue: textValue ?? textContent,
|
|
463
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
464
|
+
import_react_primitive.Primitive.div,
|
|
465
|
+
{
|
|
466
|
+
role: "menuitem",
|
|
467
|
+
"data-highlighted": isFocused ? "" : void 0,
|
|
468
|
+
"aria-disabled": disabled || void 0,
|
|
469
|
+
"data-disabled": disabled ? "" : void 0,
|
|
470
|
+
...itemProps,
|
|
471
|
+
ref: composedRefs,
|
|
472
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(
|
|
473
|
+
props.onPointerMove,
|
|
474
|
+
whenMouse((event) => {
|
|
475
|
+
if (disabled) {
|
|
476
|
+
contentContext.onItemLeave(event);
|
|
477
|
+
} else {
|
|
478
|
+
contentContext.onItemEnter(event);
|
|
479
|
+
if (!event.defaultPrevented) {
|
|
480
|
+
const item = event.currentTarget;
|
|
481
|
+
item.focus();
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
})
|
|
485
|
+
),
|
|
486
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(
|
|
487
|
+
props.onPointerLeave,
|
|
488
|
+
whenMouse((event) => contentContext.onItemLeave(event))
|
|
489
|
+
),
|
|
490
|
+
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => setIsFocused(true)),
|
|
491
|
+
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, () => setIsFocused(false))
|
|
579
492
|
}
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
}
|
|
589
|
-
/*
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
const
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
const
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange } = props;
|
|
713
|
-
const parentMenuContext = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$SUB_NAME, __scopeMenu);
|
|
714
|
-
const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
|
|
715
|
-
const [trigger, setTrigger] = $cnSS2$react.useState(null);
|
|
716
|
-
const [content, setContent] = $cnSS2$react.useState(null);
|
|
717
|
-
const handleOpenChange = $cnSS2$radixuireactusecallbackref.useCallbackRef(onOpenChange); // Prevent the parent menu from reopening with open submenus.
|
|
718
|
-
$cnSS2$react.useEffect(()=>{
|
|
719
|
-
if (parentMenuContext.open === false) handleOpenChange(false);
|
|
720
|
-
return ()=>handleOpenChange(false)
|
|
721
|
-
;
|
|
722
|
-
}, [
|
|
723
|
-
parentMenuContext.open,
|
|
724
|
-
handleOpenChange
|
|
725
|
-
]);
|
|
726
|
-
return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuProvider, {
|
|
493
|
+
) })
|
|
494
|
+
}
|
|
495
|
+
);
|
|
496
|
+
}
|
|
497
|
+
);
|
|
498
|
+
var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
|
|
499
|
+
var MenuCheckboxItem = React.forwardRef(
|
|
500
|
+
(props, forwardedRef) => {
|
|
501
|
+
const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
|
|
502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
503
|
+
MenuItem,
|
|
504
|
+
{
|
|
505
|
+
role: "menuitemcheckbox",
|
|
506
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
|
507
|
+
...checkboxItemProps,
|
|
508
|
+
ref: forwardedRef,
|
|
509
|
+
"data-state": getCheckedState(checked),
|
|
510
|
+
onSelect: (0, import_primitive.composeEventHandlers)(
|
|
511
|
+
checkboxItemProps.onSelect,
|
|
512
|
+
() => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),
|
|
513
|
+
{ checkForDefaultPrevented: false }
|
|
514
|
+
)
|
|
515
|
+
}
|
|
516
|
+
) });
|
|
517
|
+
}
|
|
518
|
+
);
|
|
519
|
+
MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
520
|
+
var RADIO_GROUP_NAME = "MenuRadioGroup";
|
|
521
|
+
var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(
|
|
522
|
+
RADIO_GROUP_NAME,
|
|
523
|
+
{ value: void 0, onValueChange: () => {
|
|
524
|
+
} }
|
|
525
|
+
);
|
|
526
|
+
var MenuRadioGroup = React.forwardRef(
|
|
527
|
+
(props, forwardedRef) => {
|
|
528
|
+
const { value, onValueChange, ...groupProps } = props;
|
|
529
|
+
const handleValueChange = (0, import_react_use_callback_ref.useCallbackRef)(onValueChange);
|
|
530
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuGroup, { ...groupProps, ref: forwardedRef }) });
|
|
531
|
+
}
|
|
532
|
+
);
|
|
533
|
+
MenuRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
534
|
+
var RADIO_ITEM_NAME = "MenuRadioItem";
|
|
535
|
+
var MenuRadioItem = React.forwardRef(
|
|
536
|
+
(props, forwardedRef) => {
|
|
537
|
+
const { value, ...radioItemProps } = props;
|
|
538
|
+
const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
|
|
539
|
+
const checked = value === context.value;
|
|
540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
541
|
+
MenuItem,
|
|
542
|
+
{
|
|
543
|
+
role: "menuitemradio",
|
|
544
|
+
"aria-checked": checked,
|
|
545
|
+
...radioItemProps,
|
|
546
|
+
ref: forwardedRef,
|
|
547
|
+
"data-state": getCheckedState(checked),
|
|
548
|
+
onSelect: (0, import_primitive.composeEventHandlers)(
|
|
549
|
+
radioItemProps.onSelect,
|
|
550
|
+
() => context.onValueChange?.(value),
|
|
551
|
+
{ checkForDefaultPrevented: false }
|
|
552
|
+
)
|
|
553
|
+
}
|
|
554
|
+
) });
|
|
555
|
+
}
|
|
556
|
+
);
|
|
557
|
+
MenuRadioItem.displayName = RADIO_ITEM_NAME;
|
|
558
|
+
var ITEM_INDICATOR_NAME = "MenuItemIndicator";
|
|
559
|
+
var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(
|
|
560
|
+
ITEM_INDICATOR_NAME,
|
|
561
|
+
{ checked: false }
|
|
562
|
+
);
|
|
563
|
+
var MenuItemIndicator = React.forwardRef(
|
|
564
|
+
(props, forwardedRef) => {
|
|
565
|
+
const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
|
|
566
|
+
const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
|
|
567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
568
|
+
import_react_presence.Presence,
|
|
569
|
+
{
|
|
570
|
+
present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
|
|
571
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
572
|
+
import_react_primitive.Primitive.span,
|
|
573
|
+
{
|
|
574
|
+
...itemIndicatorProps,
|
|
575
|
+
ref: forwardedRef,
|
|
576
|
+
"data-state": getCheckedState(indicatorContext.checked)
|
|
577
|
+
}
|
|
578
|
+
)
|
|
579
|
+
}
|
|
580
|
+
);
|
|
581
|
+
}
|
|
582
|
+
);
|
|
583
|
+
MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
|
|
584
|
+
var SEPARATOR_NAME = "MenuSeparator";
|
|
585
|
+
var MenuSeparator = React.forwardRef(
|
|
586
|
+
(props, forwardedRef) => {
|
|
587
|
+
const { __scopeMenu, ...separatorProps } = props;
|
|
588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
589
|
+
import_react_primitive.Primitive.div,
|
|
590
|
+
{
|
|
591
|
+
role: "separator",
|
|
592
|
+
"aria-orientation": "horizontal",
|
|
593
|
+
...separatorProps,
|
|
594
|
+
ref: forwardedRef
|
|
595
|
+
}
|
|
596
|
+
);
|
|
597
|
+
}
|
|
598
|
+
);
|
|
599
|
+
MenuSeparator.displayName = SEPARATOR_NAME;
|
|
600
|
+
var ARROW_NAME = "MenuArrow";
|
|
601
|
+
var MenuArrow = React.forwardRef(
|
|
602
|
+
(props, forwardedRef) => {
|
|
603
|
+
const { __scopeMenu, ...arrowProps } = props;
|
|
604
|
+
const popperScope = usePopperScope(__scopeMenu);
|
|
605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
606
|
+
}
|
|
607
|
+
);
|
|
608
|
+
MenuArrow.displayName = ARROW_NAME;
|
|
609
|
+
var SUB_NAME = "MenuSub";
|
|
610
|
+
var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
|
|
611
|
+
var MenuSub = (props) => {
|
|
612
|
+
const { __scopeMenu, children, open = false, onOpenChange } = props;
|
|
613
|
+
const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
|
|
614
|
+
const popperScope = usePopperScope(__scopeMenu);
|
|
615
|
+
const [trigger, setTrigger] = React.useState(null);
|
|
616
|
+
const [content, setContent] = React.useState(null);
|
|
617
|
+
const handleOpenChange = (0, import_react_use_callback_ref.useCallbackRef)(onOpenChange);
|
|
618
|
+
React.useEffect(() => {
|
|
619
|
+
if (parentMenuContext.open === false) handleOpenChange(false);
|
|
620
|
+
return () => handleOpenChange(false);
|
|
621
|
+
}, [parentMenuContext.open, handleOpenChange]);
|
|
622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
623
|
+
MenuProvider,
|
|
624
|
+
{
|
|
727
625
|
scope: __scopeMenu,
|
|
728
|
-
open
|
|
626
|
+
open,
|
|
729
627
|
onOpenChange: handleOpenChange,
|
|
730
|
-
content
|
|
731
|
-
onContentChange: setContent
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
628
|
+
content,
|
|
629
|
+
onContentChange: setContent,
|
|
630
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
631
|
+
MenuSubProvider,
|
|
632
|
+
{
|
|
633
|
+
scope: __scopeMenu,
|
|
634
|
+
contentId: (0, import_react_id.useId)(),
|
|
635
|
+
triggerId: (0, import_react_id.useId)(),
|
|
636
|
+
trigger,
|
|
637
|
+
onTriggerChange: setTrigger,
|
|
638
|
+
children
|
|
639
|
+
}
|
|
640
|
+
)
|
|
641
|
+
}
|
|
642
|
+
) });
|
|
643
|
+
};
|
|
644
|
+
MenuSub.displayName = SUB_NAME;
|
|
645
|
+
var SUB_TRIGGER_NAME = "MenuSubTrigger";
|
|
646
|
+
var MenuSubTrigger = React.forwardRef(
|
|
647
|
+
(props, forwardedRef) => {
|
|
648
|
+
const context = useMenuContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
649
|
+
const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
650
|
+
const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
651
|
+
const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
652
|
+
const openTimerRef = React.useRef(null);
|
|
653
|
+
const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
|
|
654
|
+
const scope = { __scopeMenu: props.__scopeMenu };
|
|
655
|
+
const clearOpenTimer = React.useCallback(() => {
|
|
757
656
|
if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
|
|
758
657
|
openTimerRef.current = null;
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
clearOpenTimer
|
|
763
|
-
]);
|
|
764
|
-
$cnSS2$react.useEffect(()=>{
|
|
658
|
+
}, []);
|
|
659
|
+
React.useEffect(() => clearOpenTimer, [clearOpenTimer]);
|
|
660
|
+
React.useEffect(() => {
|
|
765
661
|
const pointerGraceTimer = pointerGraceTimerRef.current;
|
|
766
|
-
return ()=>{
|
|
767
|
-
|
|
768
|
-
|
|
662
|
+
return () => {
|
|
663
|
+
window.clearTimeout(pointerGraceTimer);
|
|
664
|
+
onPointerGraceIntentChange(null);
|
|
769
665
|
};
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
ref: $cnSS2$radixuireactcomposerefs.composeRefs(forwardedRef, subContext.onTriggerChange) // This is redundant for mouse users but we cannot determine pointer type from
|
|
784
|
-
,
|
|
785
|
-
onClick: (event)=>{
|
|
786
|
-
var _props$onClick;
|
|
787
|
-
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
|
|
666
|
+
}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
|
|
667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
668
|
+
MenuItemImpl,
|
|
669
|
+
{
|
|
670
|
+
id: subContext.triggerId,
|
|
671
|
+
"aria-haspopup": "menu",
|
|
672
|
+
"aria-expanded": context.open,
|
|
673
|
+
"aria-controls": subContext.contentId,
|
|
674
|
+
"data-state": getOpenState(context.open),
|
|
675
|
+
...props,
|
|
676
|
+
ref: (0, import_react_compose_refs.composeRefs)(forwardedRef, subContext.onTriggerChange),
|
|
677
|
+
onClick: (event) => {
|
|
678
|
+
props.onClick?.(event);
|
|
788
679
|
if (props.disabled || event.defaultPrevented) return;
|
|
789
|
-
|
|
790
|
-
* We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
|
|
791
|
-
* and we rely heavily on `onFocusOutside` for submenus to close when switching
|
|
792
|
-
* between separate submenus.
|
|
793
|
-
*/ event.currentTarget.focus();
|
|
680
|
+
event.currentTarget.focus();
|
|
794
681
|
if (!context.open) context.onOpenChange(true);
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
682
|
+
},
|
|
683
|
+
onPointerMove: (0, import_primitive.composeEventHandlers)(
|
|
684
|
+
props.onPointerMove,
|
|
685
|
+
whenMouse((event) => {
|
|
686
|
+
contentContext.onItemEnter(event);
|
|
687
|
+
if (event.defaultPrevented) return;
|
|
688
|
+
if (!props.disabled && !context.open && !openTimerRef.current) {
|
|
800
689
|
contentContext.onPointerGraceIntentChange(null);
|
|
801
|
-
openTimerRef.current = window.setTimeout(()=>{
|
|
802
|
-
|
|
803
|
-
|
|
690
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
691
|
+
context.onOpenChange(true);
|
|
692
|
+
clearOpenTimer();
|
|
804
693
|
}, 100);
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
const side =
|
|
815
|
-
const rightSide = side ===
|
|
694
|
+
}
|
|
695
|
+
})
|
|
696
|
+
),
|
|
697
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(
|
|
698
|
+
props.onPointerLeave,
|
|
699
|
+
whenMouse((event) => {
|
|
700
|
+
clearOpenTimer();
|
|
701
|
+
const contentRect = context.content?.getBoundingClientRect();
|
|
702
|
+
if (contentRect) {
|
|
703
|
+
const side = context.content?.dataset.side;
|
|
704
|
+
const rightSide = side === "right";
|
|
816
705
|
const bleed = rightSide ? -5 : 5;
|
|
817
|
-
const contentNearEdge = contentRect[rightSide ?
|
|
818
|
-
const contentFarEdge = contentRect[rightSide ?
|
|
706
|
+
const contentNearEdge = contentRect[rightSide ? "left" : "right"];
|
|
707
|
+
const contentFarEdge = contentRect[rightSide ? "right" : "left"];
|
|
819
708
|
contentContext.onPointerGraceIntentChange({
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
{
|
|
831
|
-
x: contentFarEdge,
|
|
832
|
-
y: contentRect.top
|
|
833
|
-
},
|
|
834
|
-
{
|
|
835
|
-
x: contentFarEdge,
|
|
836
|
-
y: contentRect.bottom
|
|
837
|
-
},
|
|
838
|
-
{
|
|
839
|
-
x: contentNearEdge,
|
|
840
|
-
y: contentRect.bottom
|
|
841
|
-
}
|
|
842
|
-
],
|
|
843
|
-
side: side
|
|
709
|
+
area: [
|
|
710
|
+
// Apply a bleed on clientX to ensure that our exit point is
|
|
711
|
+
// consistently within polygon bounds
|
|
712
|
+
{ x: event.clientX + bleed, y: event.clientY },
|
|
713
|
+
{ x: contentNearEdge, y: contentRect.top },
|
|
714
|
+
{ x: contentFarEdge, y: contentRect.top },
|
|
715
|
+
{ x: contentFarEdge, y: contentRect.bottom },
|
|
716
|
+
{ x: contentNearEdge, y: contentRect.bottom }
|
|
717
|
+
],
|
|
718
|
+
side
|
|
844
719
|
});
|
|
845
720
|
window.clearTimeout(pointerGraceTimerRef.current);
|
|
846
|
-
pointerGraceTimerRef.current = window.setTimeout(
|
|
847
|
-
|
|
848
|
-
|
|
721
|
+
pointerGraceTimerRef.current = window.setTimeout(
|
|
722
|
+
() => contentContext.onPointerGraceIntentChange(null),
|
|
723
|
+
300
|
|
724
|
+
);
|
|
725
|
+
} else {
|
|
849
726
|
contentContext.onTriggerLeave(event);
|
|
850
|
-
if (event.defaultPrevented) return;
|
|
727
|
+
if (event.defaultPrevented) return;
|
|
851
728
|
contentContext.onPointerGraceIntentChange(null);
|
|
729
|
+
}
|
|
730
|
+
})
|
|
731
|
+
),
|
|
732
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
733
|
+
const isTypingAhead = contentContext.searchRef.current !== "";
|
|
734
|
+
if (props.disabled || isTypingAhead && event.key === " ") return;
|
|
735
|
+
if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
|
|
736
|
+
context.onOpenChange(true);
|
|
737
|
+
context.content?.focus();
|
|
738
|
+
event.preventDefault();
|
|
852
739
|
}
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
}, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
|
|
884
|
-
present: forceMount || context.open
|
|
885
|
-
}, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Slot, {
|
|
886
|
-
scope: props.__scopeMenu
|
|
887
|
-
}, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
|
|
888
|
-
id: subContext.contentId,
|
|
889
|
-
"aria-labelledby": subContext.triggerId
|
|
890
|
-
}, subContentProps, {
|
|
891
|
-
ref: composedRefs,
|
|
892
|
-
align: "start",
|
|
893
|
-
side: rootContext.dir === 'rtl' ? 'left' : 'right',
|
|
894
|
-
disableOutsidePointerEvents: false,
|
|
895
|
-
disableOutsideScroll: false,
|
|
896
|
-
trapFocus: false,
|
|
897
|
-
onOpenAutoFocus: (event)=>{
|
|
898
|
-
var _ref$current;
|
|
899
|
-
// when opening a submenu, focus content for keyboard users only
|
|
900
|
-
if (rootContext.isUsingKeyboardRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
740
|
+
})
|
|
741
|
+
}
|
|
742
|
+
) });
|
|
743
|
+
}
|
|
744
|
+
);
|
|
745
|
+
MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
|
|
746
|
+
var SUB_CONTENT_NAME = "MenuSubContent";
|
|
747
|
+
var MenuSubContent = React.forwardRef(
|
|
748
|
+
(props, forwardedRef) => {
|
|
749
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeMenu);
|
|
750
|
+
const { forceMount = portalContext.forceMount, ...subContentProps } = props;
|
|
751
|
+
const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);
|
|
752
|
+
const rootContext = useMenuRootContext(CONTENT_NAME, props.__scopeMenu);
|
|
753
|
+
const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
|
|
754
|
+
const ref = React.useRef(null);
|
|
755
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
757
|
+
MenuContentImpl,
|
|
758
|
+
{
|
|
759
|
+
id: subContext.contentId,
|
|
760
|
+
"aria-labelledby": subContext.triggerId,
|
|
761
|
+
...subContentProps,
|
|
762
|
+
ref: composedRefs,
|
|
763
|
+
align: "start",
|
|
764
|
+
side: rootContext.dir === "rtl" ? "left" : "right",
|
|
765
|
+
disableOutsidePointerEvents: false,
|
|
766
|
+
disableOutsideScroll: false,
|
|
767
|
+
trapFocus: false,
|
|
768
|
+
onOpenAutoFocus: (event) => {
|
|
769
|
+
if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
|
|
901
770
|
event.preventDefault();
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
,
|
|
906
|
-
onFocusOutside: $cnSS2$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>{
|
|
907
|
-
// We prevent closing when the trigger is focused to avoid triggering a re-open animation
|
|
908
|
-
// on pointer interaction.
|
|
771
|
+
},
|
|
772
|
+
onCloseAutoFocus: (event) => event.preventDefault(),
|
|
773
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
|
|
909
774
|
if (event.target !== subContext.trigger) context.onOpenChange(false);
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
rootContext.onClose();
|
|
775
|
+
}),
|
|
776
|
+
onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(props.onEscapeKeyDown, (event) => {
|
|
777
|
+
rootContext.onClose();
|
|
913
778
|
event.preventDefault();
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
// Submenu key events bubble through portals. We only care about keys in this menu.
|
|
779
|
+
}),
|
|
780
|
+
onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
|
|
917
781
|
const isKeyDownInside = event.currentTarget.contains(event.target);
|
|
918
|
-
const isCloseKey =
|
|
782
|
+
const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
|
|
919
783
|
if (isKeyDownInside && isCloseKey) {
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
event.preventDefault();
|
|
784
|
+
context.onOpenChange(false);
|
|
785
|
+
subContext.trigger?.focus();
|
|
786
|
+
event.preventDefault();
|
|
924
787
|
}
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
});
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
return open ?
|
|
933
|
-
}
|
|
934
|
-
function
|
|
935
|
-
return checked ===
|
|
936
|
-
}
|
|
937
|
-
function
|
|
938
|
-
return
|
|
939
|
-
}
|
|
940
|
-
function
|
|
788
|
+
})
|
|
789
|
+
}
|
|
790
|
+
) }) }) });
|
|
791
|
+
}
|
|
792
|
+
);
|
|
793
|
+
MenuSubContent.displayName = SUB_CONTENT_NAME;
|
|
794
|
+
function getOpenState(open) {
|
|
795
|
+
return open ? "open" : "closed";
|
|
796
|
+
}
|
|
797
|
+
function isIndeterminate(checked) {
|
|
798
|
+
return checked === "indeterminate";
|
|
799
|
+
}
|
|
800
|
+
function getCheckedState(checked) {
|
|
801
|
+
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
802
|
+
}
|
|
803
|
+
function focusFirst(candidates) {
|
|
941
804
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
942
|
-
for (const candidate of candidates){
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
805
|
+
for (const candidate of candidates) {
|
|
806
|
+
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
807
|
+
candidate.focus();
|
|
808
|
+
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
947
809
|
}
|
|
948
|
-
}
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
);
|
|
955
|
-
}
|
|
956
|
-
/**
|
|
957
|
-
* This is the "meat" of the typeahead matching logic. It takes in all the values,
|
|
958
|
-
* the search and the current match, and returns the next match (or `undefined`).
|
|
959
|
-
*
|
|
960
|
-
* We normalize the search because if a user has repeatedly pressed a character,
|
|
961
|
-
* we want the exact same behavior as if we only had that one character
|
|
962
|
-
* (ie. cycle through options starting with that character)
|
|
963
|
-
*
|
|
964
|
-
* We also reorder the values by wrapping the array around the current match.
|
|
965
|
-
* This is so we always look forward from the current match, and picking the first
|
|
966
|
-
* match will always be the correct one.
|
|
967
|
-
*
|
|
968
|
-
* Finally, if the normalized search is exactly one character, we exclude the
|
|
969
|
-
* current match from the values because otherwise it would be the first to match always
|
|
970
|
-
* and focus would never move. This is as opposed to the regular case, where we
|
|
971
|
-
* don't want focus to move if the current match still matches.
|
|
972
|
-
*/ function $213e4d2df823067d$var$getNextMatch(values, search, currentMatch) {
|
|
973
|
-
const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
|
|
974
|
-
);
|
|
810
|
+
}
|
|
811
|
+
function wrapArray(array, startIndex) {
|
|
812
|
+
return array.map((_, index) => array[(startIndex + index) % array.length]);
|
|
813
|
+
}
|
|
814
|
+
function getNextMatch(values, search, currentMatch) {
|
|
815
|
+
const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
|
|
975
816
|
const normalizedSearch = isRepeated ? search[0] : search;
|
|
976
817
|
const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
|
|
977
|
-
let wrappedValues =
|
|
818
|
+
let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
|
|
978
819
|
const excludeCurrentMatch = normalizedSearch.length === 1;
|
|
979
|
-
if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v)=>v !== currentMatch
|
|
980
|
-
|
|
981
|
-
|
|
820
|
+
if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
|
|
821
|
+
const nextMatch = wrappedValues.find(
|
|
822
|
+
(value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
982
823
|
);
|
|
983
|
-
return nextMatch !== currentMatch ? nextMatch :
|
|
984
|
-
}
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
function $213e4d2df823067d$var$isPointInPolygon(point, polygon) {
|
|
988
|
-
const { x: x , y: y } = point;
|
|
824
|
+
return nextMatch !== currentMatch ? nextMatch : void 0;
|
|
825
|
+
}
|
|
826
|
+
function isPointInPolygon(point, polygon) {
|
|
827
|
+
const { x, y } = point;
|
|
989
828
|
let inside = false;
|
|
990
|
-
for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
829
|
+
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
830
|
+
const xi = polygon[i].x;
|
|
831
|
+
const yi = polygon[i].y;
|
|
832
|
+
const xj = polygon[j].x;
|
|
833
|
+
const yj = polygon[j].y;
|
|
834
|
+
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
835
|
+
if (intersect) inside = !inside;
|
|
997
836
|
}
|
|
998
837
|
return inside;
|
|
999
|
-
}
|
|
1000
|
-
function
|
|
838
|
+
}
|
|
839
|
+
function isPointerInGraceArea(event, area) {
|
|
1001
840
|
if (!area) return false;
|
|
1002
|
-
const cursorPos = {
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
return
|
|
1007
|
-
}
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
const $213e4d2df823067d$export$d7a01e11500dfb6f = $213e4d2df823067d$export$71bdb9d1e2909932;
|
|
1026
|
-
const $213e4d2df823067d$export$2ea8a7a591ac5eac = $213e4d2df823067d$export$5fbbb3ba7297405f;
|
|
1027
|
-
const $213e4d2df823067d$export$6d4de93b380beddf = $213e4d2df823067d$export$e7142ab31822bde6;
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
841
|
+
const cursorPos = { x: event.clientX, y: event.clientY };
|
|
842
|
+
return isPointInPolygon(cursorPos, area);
|
|
843
|
+
}
|
|
844
|
+
function whenMouse(handler) {
|
|
845
|
+
return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
|
|
846
|
+
}
|
|
847
|
+
var Root3 = Menu;
|
|
848
|
+
var Anchor2 = MenuAnchor;
|
|
849
|
+
var Portal = MenuPortal;
|
|
850
|
+
var Content2 = MenuContent;
|
|
851
|
+
var Group = MenuGroup;
|
|
852
|
+
var Label = MenuLabel;
|
|
853
|
+
var Item2 = MenuItem;
|
|
854
|
+
var CheckboxItem = MenuCheckboxItem;
|
|
855
|
+
var RadioGroup = MenuRadioGroup;
|
|
856
|
+
var RadioItem = MenuRadioItem;
|
|
857
|
+
var ItemIndicator = MenuItemIndicator;
|
|
858
|
+
var Separator = MenuSeparator;
|
|
859
|
+
var Arrow2 = MenuArrow;
|
|
860
|
+
var Sub = MenuSub;
|
|
861
|
+
var SubTrigger = MenuSubTrigger;
|
|
862
|
+
var SubContent = MenuSubContent;
|
|
863
|
+
})();
|
|
1032
864
|
//# sourceMappingURL=index.js.map
|