@radix-ui/react-menu 2.1.0-rc.1 → 2.1.0-rc.3

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