@radix-ui/react-menu 2.0.7-rc.9 → 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.js CHANGED
@@ -1,1032 +1,864 @@
1
- var $cnSS2$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
2
- var $cnSS2$react = require("react");
3
- var $cnSS2$radixuiprimitive = require("@radix-ui/primitive");
4
- var $cnSS2$radixuireactcollection = require("@radix-ui/react-collection");
5
- var $cnSS2$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
6
- var $cnSS2$radixuireactcontext = require("@radix-ui/react-context");
7
- var $cnSS2$radixuireactdirection = require("@radix-ui/react-direction");
8
- var $cnSS2$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
9
- var $cnSS2$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
10
- var $cnSS2$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
11
- var $cnSS2$radixuireactid = require("@radix-ui/react-id");
12
- var $cnSS2$radixuireactpopper = require("@radix-ui/react-popper");
13
- var $cnSS2$radixuireactportal = require("@radix-ui/react-portal");
14
- var $cnSS2$radixuireactpresence = require("@radix-ui/react-presence");
15
- var $cnSS2$radixuireactprimitive = require("@radix-ui/react-primitive");
16
- var $cnSS2$radixuireactrovingfocus = require("@radix-ui/react-roving-focus");
17
- var $cnSS2$radixuireactslot = require("@radix-ui/react-slot");
18
- var $cnSS2$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
19
- var $cnSS2$ariahidden = require("aria-hidden");
20
- var $cnSS2$reactremovescroll = require("react-remove-scroll");
21
-
22
- function $parcel$export(e, n, v, s) {
23
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
24
- }
25
- function $parcel$interopDefault(a) {
26
- return a && a.__esModule ? a.default : a;
27
- }
28
-
29
- $parcel$export(module.exports, "createMenuScope", () => $213e4d2df823067d$export$4027731b685e72eb);
30
- $parcel$export(module.exports, "Menu", () => $213e4d2df823067d$export$d9b273488cd8ce6f);
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
- const $213e4d2df823067d$var$SELECTION_KEYS = [
85
- 'Enter',
86
- ' '
87
- ];
88
- const $213e4d2df823067d$var$FIRST_KEYS = [
89
- 'ArrowDown',
90
- 'PageUp',
91
- 'Home'
92
- ];
93
- const $213e4d2df823067d$var$LAST_KEYS = [
94
- 'ArrowUp',
95
- 'PageDown',
96
- 'End'
97
- ];
98
- const $213e4d2df823067d$var$FIRST_LAST_KEYS = [
99
- ...$213e4d2df823067d$var$FIRST_KEYS,
100
- ...$213e4d2df823067d$var$LAST_KEYS
101
- ];
102
- const $213e4d2df823067d$var$SUB_OPEN_KEYS = {
103
- ltr: [
104
- ...$213e4d2df823067d$var$SELECTION_KEYS,
105
- 'ArrowRight'
106
- ],
107
- rtl: [
108
- ...$213e4d2df823067d$var$SELECTION_KEYS,
109
- 'ArrowLeft'
110
- ]
111
- };
112
- const $213e4d2df823067d$var$SUB_CLOSE_KEYS = {
113
- ltr: [
114
- 'ArrowLeft'
115
- ],
116
- rtl: [
117
- 'ArrowRight'
118
- ]
119
- };
120
- /* -------------------------------------------------------------------------------------------------
121
- * Menu
122
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$MENU_NAME = 'Menu';
123
- const [$213e4d2df823067d$var$Collection, $213e4d2df823067d$var$useCollection, $213e4d2df823067d$var$createCollectionScope] = $cnSS2$radixuireactcollection.createCollection($213e4d2df823067d$var$MENU_NAME);
124
- const [$213e4d2df823067d$var$createMenuContext, $213e4d2df823067d$export$4027731b685e72eb] = $cnSS2$radixuireactcontext.createContextScope($213e4d2df823067d$var$MENU_NAME, [
125
- $213e4d2df823067d$var$createCollectionScope,
126
- $cnSS2$radixuireactpopper.createPopperScope,
127
- $cnSS2$radixuireactrovingfocus.createRovingFocusGroupScope
128
- ]);
129
- const $213e4d2df823067d$var$usePopperScope = $cnSS2$radixuireactpopper.createPopperScope();
130
- const $213e4d2df823067d$var$useRovingFocusGroupScope = $cnSS2$radixuireactrovingfocus.createRovingFocusGroupScope();
131
- const [$213e4d2df823067d$var$MenuProvider, $213e4d2df823067d$var$useMenuContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$MENU_NAME);
132
- const [$213e4d2df823067d$var$MenuRootProvider, $213e4d2df823067d$var$useMenuRootContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$MENU_NAME);
133
- const $213e4d2df823067d$export$d9b273488cd8ce6f = (props)=>{
134
- const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true } = props;
135
- const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
136
- const [content, setContent] = $cnSS2$react.useState(null);
137
- const isUsingKeyboardRef = $cnSS2$react.useRef(false);
138
- const handleOpenChange = $cnSS2$radixuireactusecallbackref.useCallbackRef(onOpenChange);
139
- const direction = $cnSS2$radixuireactdirection.useDirection(dir);
140
- $cnSS2$react.useEffect(()=>{
141
- // Capture phase ensures we set the boolean before any side effects execute
142
- // in response to the key or pointer event as they might depend on this value.
143
- const handleKeyDown = ()=>{
144
- isUsingKeyboardRef.current = true;
145
- document.addEventListener('pointerdown', handlePointer, {
146
- capture: true,
147
- once: true
148
- });
149
- document.addEventListener('pointermove', handlePointer, {
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 /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuProvider, {
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: open,
103
+ open,
174
104
  onOpenChange: handleOpenChange,
175
- content: content,
176
- onContentChange: setContent
177
- }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuRootProvider, {
178
- scope: __scopeMenu,
179
- onClose: $cnSS2$react.useCallback(()=>handleOpenChange(false)
180
- , [
181
- handleOpenChange
182
- ]),
183
- isUsingKeyboardRef: isUsingKeyboardRef,
184
- dir: direction,
185
- modal: modal
186
- }, children)));
187
- };
188
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$d9b273488cd8ce6f, {
189
- displayName: $213e4d2df823067d$var$MENU_NAME
190
- });
191
- /* -------------------------------------------------------------------------------------------------
192
- * MenuAnchor
193
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$ANCHOR_NAME = 'MenuAnchor';
194
- const $213e4d2df823067d$export$9fa5ebd18bee4d43 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
195
- const { __scopeMenu: __scopeMenu , ...anchorProps } = props;
196
- const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
197
- return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Anchor, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, popperScope, anchorProps, {
198
- ref: forwardedRef
199
- }));
200
- });
201
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$9fa5ebd18bee4d43, {
202
- displayName: $213e4d2df823067d$var$ANCHOR_NAME
203
- });
204
- /* -------------------------------------------------------------------------------------------------
205
- * MenuPortal
206
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$PORTAL_NAME = 'MenuPortal';
207
- const [$213e4d2df823067d$var$PortalProvider, $213e4d2df823067d$var$usePortalContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$PORTAL_NAME, {
208
- forceMount: undefined
209
- });
210
- const $213e4d2df823067d$export$793392f970497feb = (props)=>{
211
- const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props;
212
- const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$PORTAL_NAME, __scopeMenu);
213
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$PortalProvider, {
214
- scope: __scopeMenu,
215
- forceMount: forceMount
216
- }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
217
- present: forceMount || context.open
218
- }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactportal.Portal, {
219
- asChild: true,
220
- container: container
221
- }, children)));
222
- };
223
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$793392f970497feb, {
224
- displayName: $213e4d2df823067d$var$PORTAL_NAME
225
- });
226
- /* -------------------------------------------------------------------------------------------------
227
- * MenuContent
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 $cnSS2$ariahidden.hideOthers(content);
254
- }, []);
255
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, props, {
256
- ref: composedRefs // we make sure we're not trapping once it's been closed
257
- ,
258
- trapFocus: context.open // make sure to only disable pointer events when open
259
- ,
260
- disableOutsidePointerEvents: context.open,
261
- disableOutsideScroll: true // When focus is trapped, a `focusout` event may still happen.
262
- ,
263
- onFocusOutside: $cnSS2$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault()
264
- , {
265
- checkForDefaultPrevented: false
266
- }),
267
- onDismiss: ()=>context.onOpenChange(false)
268
- }));
269
- });
270
- const $213e4d2df823067d$var$MenuRootContentNonModal = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
271
- const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
272
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, props, {
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
- /* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuContentImpl = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
281
- const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEntryFocus: onEntryFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props;
282
- const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, __scopeMenu);
283
- const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$CONTENT_NAME, __scopeMenu);
284
- const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
285
- const rovingFocusGroupScope = $213e4d2df823067d$var$useRovingFocusGroupScope(__scopeMenu);
286
- const getItems = $213e4d2df823067d$var$useCollection(__scopeMenu);
287
- const [currentItemId, setCurrentItemId] = $cnSS2$react.useState(null);
288
- const contentRef = $cnSS2$react.useRef(null);
289
- const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, contentRef, context.onContentChange);
290
- const timerRef = $cnSS2$react.useRef(0);
291
- const searchRef = $cnSS2$react.useRef('');
292
- const pointerGraceTimerRef = $cnSS2$react.useRef(0);
293
- const pointerGraceIntentRef = $cnSS2$react.useRef(null);
294
- const pointerDirRef = $cnSS2$react.useRef('right');
295
- const lastPointerXRef = $cnSS2$react.useRef(0);
296
- const ScrollLockWrapper = disableOutsideScroll ? $cnSS2$reactremovescroll.RemoveScroll : $cnSS2$react.Fragment;
297
- const scrollLockWrapperProps = disableOutsideScroll ? {
298
- as: $cnSS2$radixuireactslot.Slot,
299
- allowPinchZoom: true
300
- } : undefined;
301
- const handleTypeaheadSearch = (key)=>{
302
- var _items$find, _items$find2;
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)=>!item.disabled
305
- );
229
+ const items = getItems().filter((item) => !item.disabled);
306
230
  const currentItem = document.activeElement;
307
- const currentMatch = (_items$find = items.find((item)=>item.ref.current === currentItem
308
- )) === null || _items$find === void 0 ? void 0 : _items$find.textValue;
309
- const values = items.map((item)=>item.textValue
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
- searchRef.current = value;
316
- window.clearTimeout(timerRef.current);
317
- if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('')
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
- * Imperative focus during keydown is risky so we prevent React's batching updates
322
- * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
323
- */ setTimeout(()=>newItem.focus()
324
- );
325
- };
326
- $cnSS2$react.useEffect(()=>{
327
- return ()=>window.clearTimeout(timerRef.current)
328
- ;
329
- }, []); // Make sure the whole tree has focus guards as our `MenuContent` may be
330
- // the last element in the DOM (beacuse of the `Portal`)
331
- $cnSS2$radixuireactfocusguards.useFocusGuards();
332
- const isPointerMovingToSubmenu = $cnSS2$react.useCallback((event)=>{
333
- var _pointerGraceIntentRe, _pointerGraceIntentRe2;
334
- const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
335
- return isMovingTowards && $213e4d2df823067d$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
336
- }, []);
337
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuContentProvider, {
338
- scope: __scopeMenu,
339
- searchRef: searchRef,
340
- onItemEnter: $cnSS2$react.useCallback((event)=>{
341
- if (isPointerMovingToSubmenu(event)) event.preventDefault();
342
- }, [
343
- isPointerMovingToSubmenu
344
- ]),
345
- onItemLeave: $cnSS2$react.useCallback((event)=>{
346
- var _contentRef$current;
347
- if (isPointerMovingToSubmenu(event)) return;
348
- (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
349
- setCurrentItemId(null);
350
- }, [
351
- isPointerMovingToSubmenu
352
- ]),
353
- onTriggerLeave: $cnSS2$react.useCallback((event)=>{
354
- if (isPointerMovingToSubmenu(event)) event.preventDefault();
355
- }, [
356
- isPointerMovingToSubmenu
357
- ]),
358
- pointerGraceTimerRef: pointerGraceTimerRef,
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
- }, /*#__PURE__*/ $cnSS2$react.createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactfocusscope.FocusScope, {
363
- asChild: true,
364
- trapped: trapFocus,
365
- onMountAutoFocus: $cnSS2$radixuiprimitive.composeEventHandlers(onOpenAutoFocus, (event)=>{
366
- var _contentRef$current2;
367
- // when opening, explicitly focus the content area only and leave
368
- // `onEntryFocus` in control of focusing first item
369
- event.preventDefault();
370
- (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.focus({
371
- preventScroll: true
372
- });
373
- }),
374
- onUnmountAutoFocus: onCloseAutoFocus
375
- }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactdismissablelayer.DismissableLayer, {
376
- asChild: true,
377
- disableOutsidePointerEvents: disableOutsidePointerEvents,
378
- onEscapeKeyDown: onEscapeKeyDown,
379
- onPointerDownOutside: onPointerDownOutside,
380
- onFocusOutside: onFocusOutside,
381
- onInteractOutside: onInteractOutside,
382
- onDismiss: onDismiss
383
- }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactrovingfocus.Root, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
384
- asChild: true
385
- }, rovingFocusGroupScope, {
386
- dir: rootContext.dir,
387
- orientation: "vertical",
388
- loop: loop,
389
- currentTabStopId: currentItemId,
390
- onCurrentTabStopIdChange: setCurrentItemId,
391
- onEntryFocus: $cnSS2$radixuiprimitive.composeEventHandlers(onEntryFocus, (event)=>{
392
- // only focus first item when using keyboard
393
- if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
394
- }),
395
- preventScrollOnEntryFocus: true
396
- }), /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Content, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
397
- role: "menu",
398
- "aria-orientation": "vertical",
399
- "data-state": $213e4d2df823067d$var$getOpenState(context.open),
400
- "data-radix-menu-content": "",
401
- dir: rootContext.dir
402
- }, popperScope, contentProps, {
403
- ref: composedRefs,
404
- style: {
405
- outline: 'none',
406
- ...contentProps.style
407
- },
408
- onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(contentProps.onKeyDown, (event)=>{
409
- // submenu key events bubble through portals. We only care about keys in this menu.
410
- const target = event.target;
411
- const isKeyDownInside = target.closest('[data-radix-menu-content]') === event.currentTarget;
412
- const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
413
- const isCharacterKey = event.key.length === 1;
414
- if (isKeyDownInside) {
415
- // menus should not be navigated using tab key so we prevent it
416
- if (event.key === 'Tab') event.preventDefault();
417
- if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
418
- } // focus first/last item based on key pressed
419
- const content = contentRef.current;
420
- if (event.target !== content) return;
421
- if (!$213e4d2df823067d$var$FIRST_LAST_KEYS.includes(event.key)) return;
422
- event.preventDefault();
423
- const items = getItems().filter((item)=>!item.disabled
424
- );
425
- const candidateNodes = items.map((item)=>item.ref.current
426
- );
427
- if ($213e4d2df823067d$var$LAST_KEYS.includes(event.key)) candidateNodes.reverse();
428
- $213e4d2df823067d$var$focusFirst(candidateNodes);
429
- }),
430
- onBlur: $cnSS2$radixuiprimitive.composeEventHandlers(props.onBlur, (event)=>{
431
- // clear search buffer when leaving the menu
432
- if (!event.currentTarget.contains(event.target)) {
433
- window.clearTimeout(timerRef.current);
434
- searchRef.current = '';
435
- }
436
- }),
437
- onPointerMove: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerMove, $213e4d2df823067d$var$whenMouse((event)=>{
438
- const target = event.target;
439
- const pointerXHasChanged = lastPointerXRef.current !== event.clientX; // We don't use `event.movementX` for this check because Safari will
440
- // always return `0` on a pointer event.
441
- if (event.currentTarget.contains(target) && pointerXHasChanged) {
442
- const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left';
443
- pointerDirRef.current = newDir;
444
- lastPointerXRef.current = event.clientX;
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
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$479f0f2f71193efe, {
450
- displayName: $213e4d2df823067d$var$CONTENT_NAME
451
- });
452
- /* -------------------------------------------------------------------------------------------------
453
- * MenuGroup
454
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$GROUP_NAME = 'MenuGroup';
455
- const $213e4d2df823067d$export$22a631d1f72787bb = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
456
- const { __scopeMenu: __scopeMenu , ...groupProps } = props;
457
- return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
458
- role: "group"
459
- }, groupProps, {
460
- ref: forwardedRef
461
- }));
462
- });
463
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$22a631d1f72787bb, {
464
- displayName: $213e4d2df823067d$var$GROUP_NAME
465
- });
466
- /* -------------------------------------------------------------------------------------------------
467
- * MenuLabel
468
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$LABEL_NAME = 'MenuLabel';
469
- const $213e4d2df823067d$export$dd37bec0e8a99143 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
470
- const { __scopeMenu: __scopeMenu , ...labelProps } = props;
471
- return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, labelProps, {
472
- ref: forwardedRef
473
- }));
474
- });
475
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$dd37bec0e8a99143, {
476
- displayName: $213e4d2df823067d$var$LABEL_NAME
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
- const itemSelectEvent = new CustomEvent($213e4d2df823067d$var$ITEM_SELECT, {
493
- bubbles: true,
494
- cancelable: true
495
- });
496
- menuItem.addEventListener($213e4d2df823067d$var$ITEM_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event)
497
- , {
498
- once: true
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
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuItemImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, itemProps, {
506
- ref: composedRefs,
507
- disabled: disabled,
508
- onClick: $cnSS2$radixuiprimitive.composeEventHandlers(props.onClick, handleSelect),
509
- onPointerDown: (event)=>{
510
- var _props$onPointerDown;
511
- (_props$onPointerDown = props.onPointerDown) === null || _props$onPointerDown === void 0 || _props$onPointerDown.call(props, event);
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
- onPointerUp: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerUp, (event)=>{
515
- var _event$currentTarget;
516
- // Pointer down can move to a different menu item which should activate it on pointer up.
517
- // We dispatch a click for selection to allow composition with click based triggers and to
518
- // prevent Firefox from getting stuck in text selection mode when the menu closes.
519
- if (!isPointerDownRef.current) (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.click();
520
- }),
521
- onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
522
- const isTypingAhead = contentContext.searchRef.current !== '';
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
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$2ce376c2cc3355c8, {
537
- displayName: $213e4d2df823067d$var$ITEM_NAME
538
- });
539
- /* ---------------------------------------------------------------------------------------------- */ const $213e4d2df823067d$var$MenuItemImpl = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
540
- const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
541
- const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$ITEM_NAME, __scopeMenu);
542
- const rovingFocusGroupScope = $213e4d2df823067d$var$useRovingFocusGroupScope(__scopeMenu);
543
- const ref = $cnSS2$react.useRef(null);
544
- const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
545
- const [isFocused, setIsFocused] = $cnSS2$react.useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
546
- const [textContent, setTextContent] = $cnSS2$react.useState('');
547
- $cnSS2$react.useEffect(()=>{
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
- var _menuItem$textContent;
551
- setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim());
454
+ setTextContent((menuItem.textContent ?? "").trim());
552
455
  }
553
- }, [
554
- itemProps.children
555
- ]);
556
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.ItemSlot, {
557
- scope: __scopeMenu,
558
- disabled: disabled,
559
- textValue: textValue !== null && textValue !== void 0 ? textValue : textContent
560
- }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactrovingfocus.Item, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
561
- asChild: true
562
- }, rovingFocusGroupScope, {
563
- focusable: !disabled
564
- }), /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
565
- role: "menuitem",
566
- "data-highlighted": isFocused ? '' : undefined,
567
- "aria-disabled": disabled || undefined,
568
- "data-disabled": disabled ? '' : undefined
569
- }, itemProps, {
570
- ref: composedRefs,
571
- onPointerMove: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerMove, $213e4d2df823067d$var$whenMouse((event)=>{
572
- if (disabled) contentContext.onItemLeave(event);
573
- else {
574
- contentContext.onItemEnter(event);
575
- if (!event.defaultPrevented) {
576
- const item = event.currentTarget;
577
- item.focus();
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
- onPointerLeave: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $213e4d2df823067d$var$whenMouse((event)=>contentContext.onItemLeave(event)
582
- )),
583
- onFocus: $cnSS2$radixuiprimitive.composeEventHandlers(props.onFocus, ()=>setIsFocused(true)
584
- ),
585
- onBlur: $cnSS2$radixuiprimitive.composeEventHandlers(props.onBlur, ()=>setIsFocused(false)
586
- )
587
- }))));
588
- });
589
- /* -------------------------------------------------------------------------------------------------
590
- * MenuCheckboxItem
591
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$CHECKBOX_ITEM_NAME = 'MenuCheckboxItem';
592
- const $213e4d2df823067d$export$f6f243521332502d = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
593
- const { checked: checked = false , onCheckedChange: onCheckedChange , ...checkboxItemProps } = props;
594
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$ItemIndicatorProvider, {
595
- scope: props.__scopeMenu,
596
- checked: checked
597
- }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$export$2ce376c2cc3355c8, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
598
- role: "menuitemcheckbox",
599
- "aria-checked": $213e4d2df823067d$var$isIndeterminate(checked) ? 'mixed' : checked
600
- }, checkboxItemProps, {
601
- ref: forwardedRef,
602
- "data-state": $213e4d2df823067d$var$getCheckedState(checked),
603
- onSelect: $cnSS2$radixuiprimitive.composeEventHandlers(checkboxItemProps.onSelect, ()=>onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange($213e4d2df823067d$var$isIndeterminate(checked) ? true : !checked)
604
- , {
605
- checkForDefaultPrevented: false
606
- })
607
- })));
608
- });
609
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$f6f243521332502d, {
610
- displayName: $213e4d2df823067d$var$CHECKBOX_ITEM_NAME
611
- });
612
- /* -------------------------------------------------------------------------------------------------
613
- * MenuRadioGroup
614
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$RADIO_GROUP_NAME = 'MenuRadioGroup';
615
- const [$213e4d2df823067d$var$RadioGroupProvider, $213e4d2df823067d$var$useRadioGroupContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$RADIO_GROUP_NAME, {
616
- value: undefined,
617
- onValueChange: ()=>{}
618
- });
619
- const $213e4d2df823067d$export$ea2200c9eee416b3 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
620
- const { value: value , onValueChange: onValueChange , ...groupProps } = props;
621
- const handleValueChange = $cnSS2$radixuireactusecallbackref.useCallbackRef(onValueChange);
622
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$RadioGroupProvider, {
623
- scope: props.__scopeMenu,
624
- value: value,
625
- onValueChange: handleValueChange
626
- }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$export$22a631d1f72787bb, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, groupProps, {
627
- ref: forwardedRef
628
- })));
629
- });
630
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$ea2200c9eee416b3, {
631
- displayName: $213e4d2df823067d$var$RADIO_GROUP_NAME
632
- });
633
- /* -------------------------------------------------------------------------------------------------
634
- * MenuRadioItem
635
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$RADIO_ITEM_NAME = 'MenuRadioItem';
636
- const $213e4d2df823067d$export$69bd225e9817f6d0 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
637
- const { value: value , ...radioItemProps } = props;
638
- const context = $213e4d2df823067d$var$useRadioGroupContext($213e4d2df823067d$var$RADIO_ITEM_NAME, props.__scopeMenu);
639
- const checked = value === context.value;
640
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$ItemIndicatorProvider, {
641
- scope: props.__scopeMenu,
642
- checked: checked
643
- }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$export$2ce376c2cc3355c8, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
644
- role: "menuitemradio",
645
- "aria-checked": checked
646
- }, radioItemProps, {
647
- ref: forwardedRef,
648
- "data-state": $213e4d2df823067d$var$getCheckedState(checked),
649
- onSelect: $cnSS2$radixuiprimitive.composeEventHandlers(radioItemProps.onSelect, ()=>{
650
- var _context$onValueChang;
651
- return (_context$onValueChang = context.onValueChange) === null || _context$onValueChang === void 0 ? void 0 : _context$onValueChang.call(context, value);
652
- }, {
653
- checkForDefaultPrevented: false
654
- })
655
- })));
656
- });
657
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$69bd225e9817f6d0, {
658
- displayName: $213e4d2df823067d$var$RADIO_ITEM_NAME
659
- });
660
- /* -------------------------------------------------------------------------------------------------
661
- * MenuItemIndicator
662
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$ITEM_INDICATOR_NAME = 'MenuItemIndicator';
663
- const [$213e4d2df823067d$var$ItemIndicatorProvider, $213e4d2df823067d$var$useItemIndicatorContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$ITEM_INDICATOR_NAME, {
664
- checked: false
665
- });
666
- const $213e4d2df823067d$export$a2593e23056970a3 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
667
- const { __scopeMenu: __scopeMenu , forceMount: forceMount , ...itemIndicatorProps } = props;
668
- const indicatorContext = $213e4d2df823067d$var$useItemIndicatorContext($213e4d2df823067d$var$ITEM_INDICATOR_NAME, __scopeMenu);
669
- return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpresence.Presence, {
670
- present: forceMount || $213e4d2df823067d$var$isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true
671
- }, /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, itemIndicatorProps, {
672
- ref: forwardedRef,
673
- "data-state": $213e4d2df823067d$var$getCheckedState(indicatorContext.checked)
674
- })));
675
- });
676
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$a2593e23056970a3, {
677
- displayName: $213e4d2df823067d$var$ITEM_INDICATOR_NAME
678
- });
679
- /* -------------------------------------------------------------------------------------------------
680
- * MenuSeparator
681
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SEPARATOR_NAME = 'MenuSeparator';
682
- const $213e4d2df823067d$export$1cec7dcdd713e220 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
683
- const { __scopeMenu: __scopeMenu , ...separatorProps } = props;
684
- return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
685
- role: "separator",
686
- "aria-orientation": "horizontal"
687
- }, separatorProps, {
688
- ref: forwardedRef
689
- }));
690
- });
691
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$1cec7dcdd713e220, {
692
- displayName: $213e4d2df823067d$var$SEPARATOR_NAME
693
- });
694
- /* -------------------------------------------------------------------------------------------------
695
- * MenuArrow
696
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$ARROW_NAME = 'MenuArrow';
697
- const $213e4d2df823067d$export$bcdda4773debf5fa = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
698
- const { __scopeMenu: __scopeMenu , ...arrowProps } = props;
699
- const popperScope = $213e4d2df823067d$var$usePopperScope(__scopeMenu);
700
- return /*#__PURE__*/ $cnSS2$react.createElement($cnSS2$radixuireactpopper.Arrow, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({}, popperScope, arrowProps, {
701
- ref: forwardedRef
702
- }));
703
- });
704
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$bcdda4773debf5fa, {
705
- displayName: $213e4d2df823067d$var$ARROW_NAME
706
- });
707
- /* -------------------------------------------------------------------------------------------------
708
- * MenuSub
709
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_NAME = 'MenuSub';
710
- const [$213e4d2df823067d$var$MenuSubProvider, $213e4d2df823067d$var$useMenuSubContext] = $213e4d2df823067d$var$createMenuContext($213e4d2df823067d$var$SUB_NAME);
711
- const $213e4d2df823067d$export$71bdb9d1e2909932 = (props)=>{
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: open,
626
+ open,
729
627
  onOpenChange: handleOpenChange,
730
- content: content,
731
- onContentChange: setContent
732
- }, /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuSubProvider, {
733
- scope: __scopeMenu,
734
- contentId: $cnSS2$radixuireactid.useId(),
735
- triggerId: $cnSS2$radixuireactid.useId(),
736
- trigger: trigger,
737
- onTriggerChange: setTrigger
738
- }, children)));
739
- };
740
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$71bdb9d1e2909932, {
741
- displayName: $213e4d2df823067d$var$SUB_NAME
742
- });
743
- /* -------------------------------------------------------------------------------------------------
744
- * MenuSubTrigger
745
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
746
- const $213e4d2df823067d$export$5fbbb3ba7297405f = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
747
- const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
748
- const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
749
- const subContext = $213e4d2df823067d$var$useMenuSubContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
750
- const contentContext = $213e4d2df823067d$var$useMenuContentContext($213e4d2df823067d$var$SUB_TRIGGER_NAME, props.__scopeMenu);
751
- const openTimerRef = $cnSS2$react.useRef(null);
752
- const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange } = contentContext;
753
- const scope = {
754
- __scopeMenu: props.__scopeMenu
755
- };
756
- const clearOpenTimer = $cnSS2$react.useCallback(()=>{
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
- $cnSS2$react.useEffect(()=>clearOpenTimer
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
- window.clearTimeout(pointerGraceTimer);
768
- onPointerGraceIntentChange(null);
662
+ return () => {
663
+ window.clearTimeout(pointerGraceTimer);
664
+ onPointerGraceIntentChange(null);
769
665
  };
770
- }, [
771
- pointerGraceTimerRef,
772
- onPointerGraceIntentChange
773
- ]);
774
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$export$9fa5ebd18bee4d43, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
775
- asChild: true
776
- }, scope), /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$MenuItemImpl, ($parcel$interopDefault($cnSS2$babelruntimehelpersextends))({
777
- id: subContext.triggerId,
778
- "aria-haspopup": "menu",
779
- "aria-expanded": context.open,
780
- "aria-controls": subContext.contentId,
781
- "data-state": $213e4d2df823067d$var$getOpenState(context.open)
782
- }, props, {
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
- onPointerMove: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerMove, $213e4d2df823067d$var$whenMouse((event)=>{
797
- contentContext.onItemEnter(event);
798
- if (event.defaultPrevented) return;
799
- if (!props.disabled && !context.open && !openTimerRef.current) {
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
- context.onOpenChange(true);
803
- clearOpenTimer();
690
+ openTimerRef.current = window.setTimeout(() => {
691
+ context.onOpenChange(true);
692
+ clearOpenTimer();
804
693
  }, 100);
805
- }
806
- })),
807
- onPointerLeave: $cnSS2$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $213e4d2df823067d$var$whenMouse((event)=>{
808
- var _context$content;
809
- clearOpenTimer();
810
- const contentRect = (_context$content = context.content) === null || _context$content === void 0 ? void 0 : _context$content.getBoundingClientRect();
811
- if (contentRect) {
812
- var _context$content2;
813
- // TODO: make sure to update this when we change positioning logic
814
- const side = (_context$content2 = context.content) === null || _context$content2 === void 0 ? void 0 : _context$content2.dataset.side;
815
- const rightSide = side === 'right';
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 ? 'left' : 'right'];
818
- const contentFarEdge = contentRect[rightSide ? 'right' : 'left'];
706
+ const contentNearEdge = contentRect[rightSide ? "left" : "right"];
707
+ const contentFarEdge = contentRect[rightSide ? "right" : "left"];
819
708
  contentContext.onPointerGraceIntentChange({
820
- area: [
821
- // consistently within polygon bounds
822
- {
823
- x: event.clientX + bleed,
824
- y: event.clientY
825
- },
826
- {
827
- x: contentNearEdge,
828
- y: contentRect.top
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(()=>contentContext.onPointerGraceIntentChange(null)
847
- , 300);
848
- } else {
721
+ pointerGraceTimerRef.current = window.setTimeout(
722
+ () => contentContext.onPointerGraceIntentChange(null),
723
+ 300
724
+ );
725
+ } else {
849
726
  contentContext.onTriggerLeave(event);
850
- if (event.defaultPrevented) return; // There's 100ms where the user may leave an item before the submenu was opened.
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
- onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
855
- const isTypingAhead = contentContext.searchRef.current !== '';
856
- if (props.disabled || isTypingAhead && event.key === ' ') return;
857
- if ($213e4d2df823067d$var$SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
858
- var _context$content3;
859
- context.onOpenChange(true); // The trigger may hold focus if opened via pointer interaction
860
- // so we ensure content is given focus again when switching to keyboard.
861
- (_context$content3 = context.content) === null || _context$content3 === void 0 || _context$content3.focus(); // prevent window from scrolling
862
- event.preventDefault();
863
- }
864
- })
865
- })));
866
- });
867
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$5fbbb3ba7297405f, {
868
- displayName: $213e4d2df823067d$var$SUB_TRIGGER_NAME
869
- });
870
- /* -------------------------------------------------------------------------------------------------
871
- * MenuSubContent
872
- * -----------------------------------------------------------------------------------------------*/ const $213e4d2df823067d$var$SUB_CONTENT_NAME = 'MenuSubContent';
873
- const $213e4d2df823067d$export$e7142ab31822bde6 = /*#__PURE__*/ $cnSS2$react.forwardRef((props, forwardedRef)=>{
874
- const portalContext = $213e4d2df823067d$var$usePortalContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
875
- const { forceMount: forceMount = portalContext.forceMount , ...subContentProps } = props;
876
- const context = $213e4d2df823067d$var$useMenuContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
877
- const rootContext = $213e4d2df823067d$var$useMenuRootContext($213e4d2df823067d$var$CONTENT_NAME, props.__scopeMenu);
878
- const subContext = $213e4d2df823067d$var$useMenuSubContext($213e4d2df823067d$var$SUB_CONTENT_NAME, props.__scopeMenu);
879
- const ref = $cnSS2$react.useRef(null);
880
- const composedRefs = $cnSS2$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
881
- return /*#__PURE__*/ $cnSS2$react.createElement($213e4d2df823067d$var$Collection.Provider, {
882
- scope: props.__scopeMenu
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
- } // The menu might close because of focusing another menu item in the parent menu. We
903
- ,
904
- onCloseAutoFocus: (event)=>event.preventDefault()
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
- onEscapeKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onEscapeKeyDown, (event)=>{
912
- rootContext.onClose(); // ensure pressing escape in submenu doesn't escape full screen mode
775
+ }),
776
+ onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(props.onEscapeKeyDown, (event) => {
777
+ rootContext.onClose();
913
778
  event.preventDefault();
914
- }),
915
- onKeyDown: $cnSS2$radixuiprimitive.composeEventHandlers(props.onKeyDown, (event)=>{
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 = $213e4d2df823067d$var$SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
782
+ const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
919
783
  if (isKeyDownInside && isCloseKey) {
920
- var _subContext$trigger;
921
- context.onOpenChange(false); // We focus manually because we prevented it in `onCloseAutoFocus`
922
- (_subContext$trigger = subContext.trigger) === null || _subContext$trigger === void 0 || _subContext$trigger.focus(); // prevent window from scrolling
923
- event.preventDefault();
784
+ context.onOpenChange(false);
785
+ subContext.trigger?.focus();
786
+ event.preventDefault();
924
787
  }
925
- })
926
- })))));
927
- });
928
- /*#__PURE__*/ Object.assign($213e4d2df823067d$export$e7142ab31822bde6, {
929
- displayName: $213e4d2df823067d$var$SUB_CONTENT_NAME
930
- });
931
- /* -----------------------------------------------------------------------------------------------*/ function $213e4d2df823067d$var$getOpenState(open) {
932
- return open ? 'open' : 'closed';
933
- }
934
- function $213e4d2df823067d$var$isIndeterminate(checked) {
935
- return checked === 'indeterminate';
936
- }
937
- function $213e4d2df823067d$var$getCheckedState(checked) {
938
- return $213e4d2df823067d$var$isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
939
- }
940
- function $213e4d2df823067d$var$focusFirst(candidates) {
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
- // if focus is already where we want to go, we don't want to keep going through the candidates
944
- if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
945
- candidate.focus();
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
- * Wraps an array around itself at a given start index
951
- * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
952
- */ function $213e4d2df823067d$var$wrapArray(array, startIndex) {
953
- return array.map((_, index)=>array[(startIndex + index) % array.length]
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 = $213e4d2df823067d$var$wrapArray(values, Math.max(currentMatchIndex, 0));
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
- const nextMatch = wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
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 : undefined;
984
- }
985
- // Determine if a point is inside of a polygon.
986
- // Based on https://github.com/substack/point-in-polygon
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
- const xi = polygon[i].x;
992
- const yi = polygon[i].y;
993
- const xj = polygon[j].x;
994
- const yj = polygon[j].y; // prettier-ignore
995
- const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
996
- if (intersect) inside = !inside;
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 $213e4d2df823067d$var$isPointerInGraceArea(event, area) {
838
+ }
839
+ function isPointerInGraceArea(event, area) {
1001
840
  if (!area) return false;
1002
- const cursorPos = {
1003
- x: event.clientX,
1004
- y: event.clientY
1005
- };
1006
- return $213e4d2df823067d$var$isPointInPolygon(cursorPos, area);
1007
- }
1008
- function $213e4d2df823067d$var$whenMouse(handler) {
1009
- return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined
1010
- ;
1011
- }
1012
- const $213e4d2df823067d$export$be92b6f5f03c0fe9 = $213e4d2df823067d$export$d9b273488cd8ce6f;
1013
- const $213e4d2df823067d$export$b688253958b8dfe7 = $213e4d2df823067d$export$9fa5ebd18bee4d43;
1014
- const $213e4d2df823067d$export$602eac185826482c = $213e4d2df823067d$export$793392f970497feb;
1015
- const $213e4d2df823067d$export$7c6e2c02157bb7d2 = $213e4d2df823067d$export$479f0f2f71193efe;
1016
- const $213e4d2df823067d$export$eb2fcfdbd7ba97d4 = $213e4d2df823067d$export$22a631d1f72787bb;
1017
- const $213e4d2df823067d$export$b04be29aa201d4f5 = $213e4d2df823067d$export$dd37bec0e8a99143;
1018
- const $213e4d2df823067d$export$6d08773d2e66f8f2 = $213e4d2df823067d$export$2ce376c2cc3355c8;
1019
- const $213e4d2df823067d$export$16ce288f89fa631c = $213e4d2df823067d$export$f6f243521332502d;
1020
- const $213e4d2df823067d$export$a98f0dcb43a68a25 = $213e4d2df823067d$export$ea2200c9eee416b3;
1021
- const $213e4d2df823067d$export$371ab307eab489c0 = $213e4d2df823067d$export$69bd225e9817f6d0;
1022
- const $213e4d2df823067d$export$c3468e2714d175fa = $213e4d2df823067d$export$a2593e23056970a3;
1023
- const $213e4d2df823067d$export$1ff3c3f08ae963c0 = $213e4d2df823067d$export$1cec7dcdd713e220;
1024
- const $213e4d2df823067d$export$21b07c8f274aebd5 = $213e4d2df823067d$export$bcdda4773debf5fa;
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