@radix-ui/react-navigation-menu 1.2.0-rc.2 → 1.2.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.
Files changed (3) hide show
  1. package/dist/index.js +790 -768
  2. package/dist/index.js.map +4 -4
  3. package/package.json +15 -15
package/dist/index.js CHANGED
@@ -1,814 +1,836 @@
1
1
  "use strict";
2
2
  "use client";
3
- (() => {
4
- var __create = Object.create;
5
- var __defProp = Object.defineProperty;
6
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
- var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getProtoOf = Object.getPrototypeOf;
9
- var __hasOwnProp = Object.prototype.hasOwnProperty;
10
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
11
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
12
- }) : x)(function(x) {
13
- if (typeof require !== "undefined") return require.apply(this, arguments);
14
- throw Error('Dynamic require of "' + x + '" is not supported');
15
- });
16
- var __copyProps = (to, from, except, desc) => {
17
- if (from && typeof from === "object" || typeof from === "function") {
18
- for (let key of __getOwnPropNames(from))
19
- if (!__hasOwnProp.call(to, key) && key !== except)
20
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
21
- }
22
- return to;
23
- };
24
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
25
- // If the importer is in node compatibility mode or this is not an ESM
26
- // file that has been converted to a CommonJS file using a Babel-
27
- // compatible transform (i.e. "__esModule" has not been set), then set
28
- // "default" to the CommonJS "module.exports" for node compatibility.
29
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
30
- mod
31
- ));
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);
32
30
 
33
- // packages/react/navigation-menu/src/NavigationMenu.tsx
34
- var React = __toESM(__require("react"));
35
- var import_react_dom = __toESM(__require("react-dom"));
36
- var import_react_context = __require("@radix-ui/react-context");
37
- var import_primitive = __require("@radix-ui/primitive");
38
- var import_react_primitive = __require("@radix-ui/react-primitive");
39
- var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
40
- var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
41
- var import_react_direction = __require("@radix-ui/react-direction");
42
- var import_react_presence = __require("@radix-ui/react-presence");
43
- var import_react_id = __require("@radix-ui/react-id");
44
- var import_react_collection = __require("@radix-ui/react-collection");
45
- var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
46
- var import_react_use_previous = __require("@radix-ui/react-use-previous");
47
- var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
48
- var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
49
- var VisuallyHiddenPrimitive = __toESM(__require("@radix-ui/react-visually-hidden"));
50
- var import_jsx_runtime = __require("react/jsx-runtime");
51
- var NAVIGATION_MENU_NAME = "NavigationMenu";
52
- var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
53
- var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
54
- var [createNavigationMenuContext, createNavigationMenuScope] = (0, import_react_context.createContextScope)(
55
- NAVIGATION_MENU_NAME,
56
- [createCollectionScope, createFocusGroupCollectionScope]
57
- );
58
- var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
59
- var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
60
- var NavigationMenu = React.forwardRef(
61
- (props, forwardedRef) => {
62
- const {
63
- __scopeNavigationMenu,
64
- value: valueProp,
65
- onValueChange,
66
- defaultValue,
67
- delayDuration = 200,
68
- skipDelayDuration = 300,
69
- orientation = "horizontal",
70
- dir,
71
- ...NavigationMenuProps
72
- } = props;
73
- const [navigationMenu, setNavigationMenu] = React.useState(null);
74
- const composedRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setNavigationMenu(node));
75
- const direction = (0, import_react_direction.useDirection)(dir);
76
- const openTimerRef = React.useRef(0);
77
- const closeTimerRef = React.useRef(0);
78
- const skipDelayTimerRef = React.useRef(0);
79
- const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
80
- const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
81
- prop: valueProp,
82
- onChange: (value2) => {
83
- const isOpen = value2 !== "";
84
- const hasSkipDelayDuration = skipDelayDuration > 0;
85
- if (isOpen) {
86
- window.clearTimeout(skipDelayTimerRef.current);
87
- if (hasSkipDelayDuration) setIsOpenDelayed(false);
88
- } else {
89
- window.clearTimeout(skipDelayTimerRef.current);
90
- skipDelayTimerRef.current = window.setTimeout(
91
- () => setIsOpenDelayed(true),
92
- skipDelayDuration
93
- );
94
- }
95
- onValueChange?.(value2);
96
- },
97
- defaultProp: defaultValue
98
- });
99
- const startCloseTimer = React.useCallback(() => {
31
+ // packages/react/navigation-menu/src/index.ts
32
+ var src_exports = {};
33
+ __export(src_exports, {
34
+ Content: () => Content,
35
+ Indicator: () => Indicator,
36
+ Item: () => Item,
37
+ Link: () => Link,
38
+ List: () => List,
39
+ NavigationMenu: () => NavigationMenu,
40
+ NavigationMenuContent: () => NavigationMenuContent,
41
+ NavigationMenuIndicator: () => NavigationMenuIndicator,
42
+ NavigationMenuItem: () => NavigationMenuItem,
43
+ NavigationMenuLink: () => NavigationMenuLink,
44
+ NavigationMenuList: () => NavigationMenuList,
45
+ NavigationMenuSub: () => NavigationMenuSub,
46
+ NavigationMenuTrigger: () => NavigationMenuTrigger,
47
+ NavigationMenuViewport: () => NavigationMenuViewport,
48
+ Root: () => Root2,
49
+ Sub: () => Sub,
50
+ Trigger: () => Trigger,
51
+ Viewport: () => Viewport,
52
+ createNavigationMenuScope: () => createNavigationMenuScope
53
+ });
54
+ module.exports = __toCommonJS(src_exports);
55
+
56
+ // packages/react/navigation-menu/src/NavigationMenu.tsx
57
+ var React = __toESM(require("react"));
58
+ var import_react_dom = __toESM(require("react-dom"));
59
+ var import_react_context = require("@radix-ui/react-context");
60
+ var import_primitive = require("@radix-ui/primitive");
61
+ var import_react_primitive = require("@radix-ui/react-primitive");
62
+ var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
63
+ var import_react_compose_refs = require("@radix-ui/react-compose-refs");
64
+ var import_react_direction = require("@radix-ui/react-direction");
65
+ var import_react_presence = require("@radix-ui/react-presence");
66
+ var import_react_id = require("@radix-ui/react-id");
67
+ var import_react_collection = require("@radix-ui/react-collection");
68
+ var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
69
+ var import_react_use_previous = require("@radix-ui/react-use-previous");
70
+ var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
71
+ var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
72
+ var VisuallyHiddenPrimitive = __toESM(require("@radix-ui/react-visually-hidden"));
73
+ var import_jsx_runtime = require("react/jsx-runtime");
74
+ var NAVIGATION_MENU_NAME = "NavigationMenu";
75
+ var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
76
+ var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
77
+ var [createNavigationMenuContext, createNavigationMenuScope] = (0, import_react_context.createContextScope)(
78
+ NAVIGATION_MENU_NAME,
79
+ [createCollectionScope, createFocusGroupCollectionScope]
80
+ );
81
+ var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
82
+ var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
83
+ var NavigationMenu = React.forwardRef(
84
+ (props, forwardedRef) => {
85
+ const {
86
+ __scopeNavigationMenu,
87
+ value: valueProp,
88
+ onValueChange,
89
+ defaultValue,
90
+ delayDuration = 200,
91
+ skipDelayDuration = 300,
92
+ orientation = "horizontal",
93
+ dir,
94
+ ...NavigationMenuProps
95
+ } = props;
96
+ const [navigationMenu, setNavigationMenu] = React.useState(null);
97
+ const composedRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setNavigationMenu(node));
98
+ const direction = (0, import_react_direction.useDirection)(dir);
99
+ const openTimerRef = React.useRef(0);
100
+ const closeTimerRef = React.useRef(0);
101
+ const skipDelayTimerRef = React.useRef(0);
102
+ const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
103
+ const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
104
+ prop: valueProp,
105
+ onChange: (value2) => {
106
+ const isOpen = value2 !== "";
107
+ const hasSkipDelayDuration = skipDelayDuration > 0;
108
+ if (isOpen) {
109
+ window.clearTimeout(skipDelayTimerRef.current);
110
+ if (hasSkipDelayDuration) setIsOpenDelayed(false);
111
+ } else {
112
+ window.clearTimeout(skipDelayTimerRef.current);
113
+ skipDelayTimerRef.current = window.setTimeout(
114
+ () => setIsOpenDelayed(true),
115
+ skipDelayDuration
116
+ );
117
+ }
118
+ onValueChange?.(value2);
119
+ },
120
+ defaultProp: defaultValue
121
+ });
122
+ const startCloseTimer = React.useCallback(() => {
123
+ window.clearTimeout(closeTimerRef.current);
124
+ closeTimerRef.current = window.setTimeout(() => setValue(""), 150);
125
+ }, [setValue]);
126
+ const handleOpen = React.useCallback(
127
+ (itemValue) => {
100
128
  window.clearTimeout(closeTimerRef.current);
101
- closeTimerRef.current = window.setTimeout(() => setValue(""), 150);
102
- }, [setValue]);
103
- const handleOpen = React.useCallback(
104
- (itemValue) => {
129
+ setValue(itemValue);
130
+ },
131
+ [setValue]
132
+ );
133
+ const handleDelayedOpen = React.useCallback(
134
+ (itemValue) => {
135
+ const isOpenItem = value === itemValue;
136
+ if (isOpenItem) {
105
137
  window.clearTimeout(closeTimerRef.current);
106
- setValue(itemValue);
107
- },
108
- [setValue]
109
- );
110
- const handleDelayedOpen = React.useCallback(
111
- (itemValue) => {
112
- const isOpenItem = value === itemValue;
113
- if (isOpenItem) {
138
+ } else {
139
+ openTimerRef.current = window.setTimeout(() => {
114
140
  window.clearTimeout(closeTimerRef.current);
115
- } else {
116
- openTimerRef.current = window.setTimeout(() => {
117
- window.clearTimeout(closeTimerRef.current);
118
- setValue(itemValue);
119
- }, delayDuration);
120
- }
141
+ setValue(itemValue);
142
+ }, delayDuration);
143
+ }
144
+ },
145
+ [value, setValue, delayDuration]
146
+ );
147
+ React.useEffect(() => {
148
+ return () => {
149
+ window.clearTimeout(openTimerRef.current);
150
+ window.clearTimeout(closeTimerRef.current);
151
+ window.clearTimeout(skipDelayTimerRef.current);
152
+ };
153
+ }, []);
154
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
155
+ NavigationMenuProvider,
156
+ {
157
+ scope: __scopeNavigationMenu,
158
+ isRootMenu: true,
159
+ value,
160
+ dir: direction,
161
+ orientation,
162
+ rootNavigationMenu: navigationMenu,
163
+ onTriggerEnter: (itemValue) => {
164
+ window.clearTimeout(openTimerRef.current);
165
+ if (isOpenDelayed) handleDelayedOpen(itemValue);
166
+ else handleOpen(itemValue);
121
167
  },
122
- [value, setValue, delayDuration]
123
- );
124
- React.useEffect(() => {
125
- return () => {
168
+ onTriggerLeave: () => {
126
169
  window.clearTimeout(openTimerRef.current);
127
- window.clearTimeout(closeTimerRef.current);
128
- window.clearTimeout(skipDelayTimerRef.current);
129
- };
130
- }, []);
131
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
132
- NavigationMenuProvider,
133
- {
134
- scope: __scopeNavigationMenu,
135
- isRootMenu: true,
136
- value,
137
- dir: direction,
138
- orientation,
139
- rootNavigationMenu: navigationMenu,
140
- onTriggerEnter: (itemValue) => {
141
- window.clearTimeout(openTimerRef.current);
142
- if (isOpenDelayed) handleDelayedOpen(itemValue);
143
- else handleOpen(itemValue);
144
- },
145
- onTriggerLeave: () => {
146
- window.clearTimeout(openTimerRef.current);
147
- startCloseTimer();
148
- },
149
- onContentEnter: () => window.clearTimeout(closeTimerRef.current),
150
- onContentLeave: startCloseTimer,
151
- onItemSelect: (itemValue) => {
152
- setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
153
- },
154
- onItemDismiss: () => setValue(""),
155
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
156
- import_react_primitive.Primitive.nav,
157
- {
158
- "aria-label": "Main",
159
- "data-orientation": orientation,
160
- dir: direction,
161
- ...NavigationMenuProps,
162
- ref: composedRef
163
- }
164
- )
165
- }
166
- );
167
- }
168
- );
169
- NavigationMenu.displayName = NAVIGATION_MENU_NAME;
170
- var SUB_NAME = "NavigationMenuSub";
171
- var NavigationMenuSub = React.forwardRef(
172
- (props, forwardedRef) => {
173
- const {
174
- __scopeNavigationMenu,
175
- value: valueProp,
176
- onValueChange,
177
- defaultValue,
178
- orientation = "horizontal",
179
- ...subProps
180
- } = props;
181
- const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);
182
- const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
183
- prop: valueProp,
184
- onChange: onValueChange,
185
- defaultProp: defaultValue
186
- });
187
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
188
- NavigationMenuProvider,
189
- {
190
- scope: __scopeNavigationMenu,
191
- isRootMenu: false,
192
- value,
193
- dir: context.dir,
194
- orientation,
195
- rootNavigationMenu: context.rootNavigationMenu,
196
- onTriggerEnter: (itemValue) => setValue(itemValue),
197
- onItemSelect: (itemValue) => setValue(itemValue),
198
- onItemDismiss: () => setValue(""),
199
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
200
- }
201
- );
202
- }
203
- );
204
- NavigationMenuSub.displayName = SUB_NAME;
205
- var NavigationMenuProvider = (props) => {
170
+ startCloseTimer();
171
+ },
172
+ onContentEnter: () => window.clearTimeout(closeTimerRef.current),
173
+ onContentLeave: startCloseTimer,
174
+ onItemSelect: (itemValue) => {
175
+ setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
176
+ },
177
+ onItemDismiss: () => setValue(""),
178
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
179
+ import_react_primitive.Primitive.nav,
180
+ {
181
+ "aria-label": "Main",
182
+ "data-orientation": orientation,
183
+ dir: direction,
184
+ ...NavigationMenuProps,
185
+ ref: composedRef
186
+ }
187
+ )
188
+ }
189
+ );
190
+ }
191
+ );
192
+ NavigationMenu.displayName = NAVIGATION_MENU_NAME;
193
+ var SUB_NAME = "NavigationMenuSub";
194
+ var NavigationMenuSub = React.forwardRef(
195
+ (props, forwardedRef) => {
206
196
  const {
207
- scope,
208
- isRootMenu,
209
- rootNavigationMenu,
210
- dir,
211
- orientation,
212
- children,
213
- value,
214
- onItemSelect,
215
- onItemDismiss,
216
- onTriggerEnter,
217
- onTriggerLeave,
218
- onContentEnter,
219
- onContentLeave
197
+ __scopeNavigationMenu,
198
+ value: valueProp,
199
+ onValueChange,
200
+ defaultValue,
201
+ orientation = "horizontal",
202
+ ...subProps
220
203
  } = props;
221
- const [viewport, setViewport] = React.useState(null);
222
- const [viewportContent, setViewportContent] = React.useState(/* @__PURE__ */ new Map());
223
- const [indicatorTrack, setIndicatorTrack] = React.useState(null);
204
+ const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);
205
+ const [value = "", setValue] = (0, import_react_use_controllable_state.useControllableState)({
206
+ prop: valueProp,
207
+ onChange: onValueChange,
208
+ defaultProp: defaultValue
209
+ });
224
210
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
225
- NavigationMenuProviderImpl,
211
+ NavigationMenuProvider,
226
212
  {
227
- scope,
228
- isRootMenu,
229
- rootNavigationMenu,
213
+ scope: __scopeNavigationMenu,
214
+ isRootMenu: false,
230
215
  value,
231
- previousValue: (0, import_react_use_previous.usePrevious)(value),
232
- baseId: (0, import_react_id.useId)(),
233
- dir,
216
+ dir: context.dir,
234
217
  orientation,
235
- viewport,
236
- onViewportChange: setViewport,
237
- indicatorTrack,
238
- onIndicatorTrackChange: setIndicatorTrack,
239
- onTriggerEnter: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerEnter),
240
- onTriggerLeave: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerLeave),
241
- onContentEnter: (0, import_react_use_callback_ref.useCallbackRef)(onContentEnter),
242
- onContentLeave: (0, import_react_use_callback_ref.useCallbackRef)(onContentLeave),
243
- onItemSelect: (0, import_react_use_callback_ref.useCallbackRef)(onItemSelect),
244
- onItemDismiss: (0, import_react_use_callback_ref.useCallbackRef)(onItemDismiss),
245
- onViewportContentChange: React.useCallback((contentValue, contentData) => {
246
- setViewportContent((prevContent) => {
247
- prevContent.set(contentValue, contentData);
248
- return new Map(prevContent);
249
- });
250
- }, []),
251
- onViewportContentRemove: React.useCallback((contentValue) => {
252
- setViewportContent((prevContent) => {
253
- if (!prevContent.has(contentValue)) return prevContent;
254
- prevContent.delete(contentValue);
255
- return new Map(prevContent);
256
- });
257
- }, []),
258
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentProvider, { scope, items: viewportContent, children }) })
218
+ rootNavigationMenu: context.rootNavigationMenu,
219
+ onTriggerEnter: (itemValue) => setValue(itemValue),
220
+ onItemSelect: (itemValue) => setValue(itemValue),
221
+ onItemDismiss: () => setValue(""),
222
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
259
223
  }
260
224
  );
261
- };
262
- var LIST_NAME = "NavigationMenuList";
263
- var NavigationMenuList = React.forwardRef(
264
- (props, forwardedRef) => {
265
- const { __scopeNavigationMenu, ...listProps } = props;
266
- const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
267
- const list = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef });
268
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { style: { position: "relative" }, ref: context.onIndicatorTrackChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeNavigationMenu, children: context.isRootMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: list }) : list }) });
269
- }
270
- );
271
- NavigationMenuList.displayName = LIST_NAME;
272
- var ITEM_NAME = "NavigationMenuItem";
273
- var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME);
274
- var NavigationMenuItem = React.forwardRef(
275
- (props, forwardedRef) => {
276
- const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;
277
- const autoValue = (0, import_react_id.useId)();
278
- const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
279
- const contentRef = React.useRef(null);
280
- const triggerRef = React.useRef(null);
281
- const focusProxyRef = React.useRef(null);
282
- const restoreContentTabOrderRef = React.useRef(() => {
283
- });
284
- const wasEscapeCloseRef = React.useRef(false);
285
- const handleContentEntry = React.useCallback((side = "start") => {
286
- if (contentRef.current) {
287
- restoreContentTabOrderRef.current();
288
- const candidates = getTabbableCandidates(contentRef.current);
289
- if (candidates.length) focusFirst(side === "start" ? candidates : candidates.reverse());
290
- }
291
- }, []);
292
- const handleContentExit = React.useCallback(() => {
293
- if (contentRef.current) {
294
- const candidates = getTabbableCandidates(contentRef.current);
295
- if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
296
- }
297
- }, []);
298
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
299
- NavigationMenuItemContextProvider,
300
- {
301
- scope: __scopeNavigationMenu,
302
- value,
303
- triggerRef,
304
- contentRef,
305
- focusProxyRef,
306
- wasEscapeCloseRef,
307
- onEntryKeyDown: handleContentEntry,
308
- onFocusProxyEnter: handleContentEntry,
309
- onRootContentClose: handleContentExit,
310
- onContentFocusOutside: handleContentExit,
311
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.li, { ...itemProps, ref: forwardedRef })
312
- }
313
- );
314
- }
315
- );
316
- NavigationMenuItem.displayName = ITEM_NAME;
317
- var TRIGGER_NAME = "NavigationMenuTrigger";
318
- var NavigationMenuTrigger = React.forwardRef((props, forwardedRef) => {
319
- const { __scopeNavigationMenu, disabled, ...triggerProps } = props;
320
- const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);
321
- const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);
322
- const ref = React.useRef(null);
323
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, itemContext.triggerRef, forwardedRef);
324
- const triggerId = makeTriggerId(context.baseId, itemContext.value);
325
- const contentId = makeContentId(context.baseId, itemContext.value);
326
- const hasPointerMoveOpenedRef = React.useRef(false);
327
- const wasClickCloseRef = React.useRef(false);
328
- const open = itemContext.value === context.value;
329
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
330
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeNavigationMenu, value: itemContext.value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
331
- import_react_primitive.Primitive.button,
332
- {
333
- id: triggerId,
334
- disabled,
335
- "data-disabled": disabled ? "" : void 0,
336
- "data-state": getOpenState(open),
337
- "aria-expanded": open,
338
- "aria-controls": contentId,
339
- ...triggerProps,
340
- ref: composedRefs,
341
- onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => {
342
- wasClickCloseRef.current = false;
343
- itemContext.wasEscapeCloseRef.current = false;
344
- }),
345
- onPointerMove: (0, import_primitive.composeEventHandlers)(
346
- props.onPointerMove,
347
- whenMouse(() => {
348
- if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current)
349
- return;
350
- context.onTriggerEnter(itemContext.value);
351
- hasPointerMoveOpenedRef.current = true;
352
- })
353
- ),
354
- onPointerLeave: (0, import_primitive.composeEventHandlers)(
355
- props.onPointerLeave,
356
- whenMouse(() => {
357
- if (disabled) return;
358
- context.onTriggerLeave();
359
- hasPointerMoveOpenedRef.current = false;
360
- })
361
- ),
362
- onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
363
- context.onItemSelect(itemContext.value);
364
- wasClickCloseRef.current = open;
365
- }),
366
- onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
367
- const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
368
- const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
369
- if (open && event.key === entryKey) {
370
- itemContext.onEntryKeyDown();
371
- event.preventDefault();
372
- }
373
- })
374
- }
375
- ) }) }),
376
- open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
377
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
378
- VisuallyHiddenPrimitive.Root,
379
- {
380
- "aria-hidden": true,
381
- tabIndex: 0,
382
- ref: itemContext.focusProxyRef,
383
- onFocus: (event) => {
384
- const content = itemContext.contentRef.current;
385
- const prevFocusedElement = event.relatedTarget;
386
- const wasTriggerFocused = prevFocusedElement === ref.current;
387
- const wasFocusFromContent = content?.contains(prevFocusedElement);
388
- if (wasTriggerFocused || !wasFocusFromContent) {
389
- itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
390
- }
391
- }
392
- }
393
- ),
394
- context.viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-owns": contentId })
395
- ] })
396
- ] });
397
- });
398
- NavigationMenuTrigger.displayName = TRIGGER_NAME;
399
- var LINK_NAME = "NavigationMenuLink";
400
- var LINK_SELECT = "navigationMenu.linkSelect";
401
- var NavigationMenuLink = React.forwardRef(
402
- (props, forwardedRef) => {
403
- const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;
404
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
405
- import_react_primitive.Primitive.a,
406
- {
407
- "data-active": active ? "" : void 0,
408
- "aria-current": active ? "page" : void 0,
409
- ...linkProps,
410
- ref: forwardedRef,
411
- onClick: (0, import_primitive.composeEventHandlers)(
412
- props.onClick,
413
- (event) => {
414
- const target = event.target;
415
- const linkSelectEvent = new CustomEvent(LINK_SELECT, {
416
- bubbles: true,
417
- cancelable: true
418
- });
419
- target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true });
420
- (0, import_react_primitive.dispatchDiscreteCustomEvent)(target, linkSelectEvent);
421
- if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
422
- const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
423
- bubbles: true,
424
- cancelable: true
425
- });
426
- (0, import_react_primitive.dispatchDiscreteCustomEvent)(target, rootContentDismissEvent);
427
- }
428
- },
429
- { checkForDefaultPrevented: false }
430
- )
431
- }
432
- ) });
225
+ }
226
+ );
227
+ NavigationMenuSub.displayName = SUB_NAME;
228
+ var NavigationMenuProvider = (props) => {
229
+ const {
230
+ scope,
231
+ isRootMenu,
232
+ rootNavigationMenu,
233
+ dir,
234
+ orientation,
235
+ children,
236
+ value,
237
+ onItemSelect,
238
+ onItemDismiss,
239
+ onTriggerEnter,
240
+ onTriggerLeave,
241
+ onContentEnter,
242
+ onContentLeave
243
+ } = props;
244
+ const [viewport, setViewport] = React.useState(null);
245
+ const [viewportContent, setViewportContent] = React.useState(/* @__PURE__ */ new Map());
246
+ const [indicatorTrack, setIndicatorTrack] = React.useState(null);
247
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
248
+ NavigationMenuProviderImpl,
249
+ {
250
+ scope,
251
+ isRootMenu,
252
+ rootNavigationMenu,
253
+ value,
254
+ previousValue: (0, import_react_use_previous.usePrevious)(value),
255
+ baseId: (0, import_react_id.useId)(),
256
+ dir,
257
+ orientation,
258
+ viewport,
259
+ onViewportChange: setViewport,
260
+ indicatorTrack,
261
+ onIndicatorTrackChange: setIndicatorTrack,
262
+ onTriggerEnter: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerEnter),
263
+ onTriggerLeave: (0, import_react_use_callback_ref.useCallbackRef)(onTriggerLeave),
264
+ onContentEnter: (0, import_react_use_callback_ref.useCallbackRef)(onContentEnter),
265
+ onContentLeave: (0, import_react_use_callback_ref.useCallbackRef)(onContentLeave),
266
+ onItemSelect: (0, import_react_use_callback_ref.useCallbackRef)(onItemSelect),
267
+ onItemDismiss: (0, import_react_use_callback_ref.useCallbackRef)(onItemDismiss),
268
+ onViewportContentChange: React.useCallback((contentValue, contentData) => {
269
+ setViewportContent((prevContent) => {
270
+ prevContent.set(contentValue, contentData);
271
+ return new Map(prevContent);
272
+ });
273
+ }, []),
274
+ onViewportContentRemove: React.useCallback((contentValue) => {
275
+ setViewportContent((prevContent) => {
276
+ if (!prevContent.has(contentValue)) return prevContent;
277
+ prevContent.delete(contentValue);
278
+ return new Map(prevContent);
279
+ });
280
+ }, []),
281
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentProvider, { scope, items: viewportContent, children }) })
433
282
  }
434
283
  );
435
- NavigationMenuLink.displayName = LINK_NAME;
436
- var INDICATOR_NAME = "NavigationMenuIndicator";
437
- var NavigationMenuIndicator = React.forwardRef((props, forwardedRef) => {
438
- const { forceMount, ...indicatorProps } = props;
439
- const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);
440
- const isVisible = Boolean(context.value);
441
- return context.indicatorTrack ? import_react_dom.default.createPortal(
442
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuIndicatorImpl, { ...indicatorProps, ref: forwardedRef }) }),
443
- context.indicatorTrack
444
- ) : null;
445
- });
446
- NavigationMenuIndicator.displayName = INDICATOR_NAME;
447
- var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => {
448
- const { __scopeNavigationMenu, ...indicatorProps } = props;
449
- const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);
450
- const getItems = useCollection(__scopeNavigationMenu);
451
- const [activeTrigger, setActiveTrigger] = React.useState(
452
- null
453
- );
454
- const [position, setPosition] = React.useState(null);
455
- const isHorizontal = context.orientation === "horizontal";
456
- const isVisible = Boolean(context.value);
457
- React.useEffect(() => {
458
- const items = getItems();
459
- const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
460
- if (triggerNode) setActiveTrigger(triggerNode);
461
- }, [getItems, context.value]);
462
- const handlePositionChange = () => {
463
- if (activeTrigger) {
464
- setPosition({
465
- size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
466
- offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
467
- });
284
+ };
285
+ var LIST_NAME = "NavigationMenuList";
286
+ var NavigationMenuList = React.forwardRef(
287
+ (props, forwardedRef) => {
288
+ const { __scopeNavigationMenu, ...listProps } = props;
289
+ const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
290
+ const list = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef });
291
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { style: { position: "relative" }, ref: context.onIndicatorTrackChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeNavigationMenu, children: context.isRootMenu ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: list }) : list }) });
292
+ }
293
+ );
294
+ NavigationMenuList.displayName = LIST_NAME;
295
+ var ITEM_NAME = "NavigationMenuItem";
296
+ var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME);
297
+ var NavigationMenuItem = React.forwardRef(
298
+ (props, forwardedRef) => {
299
+ const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;
300
+ const autoValue = (0, import_react_id.useId)();
301
+ const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
302
+ const contentRef = React.useRef(null);
303
+ const triggerRef = React.useRef(null);
304
+ const focusProxyRef = React.useRef(null);
305
+ const restoreContentTabOrderRef = React.useRef(() => {
306
+ });
307
+ const wasEscapeCloseRef = React.useRef(false);
308
+ const handleContentEntry = React.useCallback((side = "start") => {
309
+ if (contentRef.current) {
310
+ restoreContentTabOrderRef.current();
311
+ const candidates = getTabbableCandidates(contentRef.current);
312
+ if (candidates.length) focusFirst(side === "start" ? candidates : candidates.reverse());
468
313
  }
469
- };
470
- useResizeObserver(activeTrigger, handlePositionChange);
471
- useResizeObserver(context.indicatorTrack, handlePositionChange);
472
- return position ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
473
- import_react_primitive.Primitive.div,
314
+ }, []);
315
+ const handleContentExit = React.useCallback(() => {
316
+ if (contentRef.current) {
317
+ const candidates = getTabbableCandidates(contentRef.current);
318
+ if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
319
+ }
320
+ }, []);
321
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
322
+ NavigationMenuItemContextProvider,
474
323
  {
475
- "aria-hidden": true,
476
- "data-state": isVisible ? "visible" : "hidden",
477
- "data-orientation": context.orientation,
478
- ...indicatorProps,
479
- ref: forwardedRef,
480
- style: {
481
- position: "absolute",
482
- ...isHorizontal ? {
483
- left: 0,
484
- width: position.size + "px",
485
- transform: `translateX(${position.offset}px)`
486
- } : {
487
- top: 0,
488
- height: position.size + "px",
489
- transform: `translateY(${position.offset}px)`
490
- },
491
- ...indicatorProps.style
492
- }
324
+ scope: __scopeNavigationMenu,
325
+ value,
326
+ triggerRef,
327
+ contentRef,
328
+ focusProxyRef,
329
+ wasEscapeCloseRef,
330
+ onEntryKeyDown: handleContentEntry,
331
+ onFocusProxyEnter: handleContentEntry,
332
+ onRootContentClose: handleContentExit,
333
+ onContentFocusOutside: handleContentExit,
334
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.li, { ...itemProps, ref: forwardedRef })
493
335
  }
494
- ) : null;
495
- });
496
- var CONTENT_NAME = "NavigationMenuContent";
497
- var NavigationMenuContent = React.forwardRef((props, forwardedRef) => {
498
- const { forceMount, ...contentProps } = props;
499
- const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
500
- const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);
501
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(itemContext.contentRef, forwardedRef);
502
- const open = itemContext.value === context.value;
503
- const commonProps = {
504
- value: itemContext.value,
505
- triggerRef: itemContext.triggerRef,
506
- focusProxyRef: itemContext.focusProxyRef,
507
- wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
508
- onContentFocusOutside: itemContext.onContentFocusOutside,
509
- onRootContentClose: itemContext.onRootContentClose,
510
- ...contentProps
511
- };
512
- return !context.viewport ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
513
- NavigationMenuContentImpl,
336
+ );
337
+ }
338
+ );
339
+ NavigationMenuItem.displayName = ITEM_NAME;
340
+ var TRIGGER_NAME = "NavigationMenuTrigger";
341
+ var NavigationMenuTrigger = React.forwardRef((props, forwardedRef) => {
342
+ const { __scopeNavigationMenu, disabled, ...triggerProps } = props;
343
+ const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);
344
+ const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);
345
+ const ref = React.useRef(null);
346
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, itemContext.triggerRef, forwardedRef);
347
+ const triggerId = makeTriggerId(context.baseId, itemContext.value);
348
+ const contentId = makeContentId(context.baseId, itemContext.value);
349
+ const hasPointerMoveOpenedRef = React.useRef(false);
350
+ const wasClickCloseRef = React.useRef(false);
351
+ const open = itemContext.value === context.value;
352
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
353
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeNavigationMenu, value: itemContext.value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
354
+ import_react_primitive.Primitive.button,
514
355
  {
356
+ id: triggerId,
357
+ disabled,
358
+ "data-disabled": disabled ? "" : void 0,
515
359
  "data-state": getOpenState(open),
516
- ...commonProps,
360
+ "aria-expanded": open,
361
+ "aria-controls": contentId,
362
+ ...triggerProps,
517
363
  ref: composedRefs,
518
- onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter),
364
+ onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, () => {
365
+ wasClickCloseRef.current = false;
366
+ itemContext.wasEscapeCloseRef.current = false;
367
+ }),
368
+ onPointerMove: (0, import_primitive.composeEventHandlers)(
369
+ props.onPointerMove,
370
+ whenMouse(() => {
371
+ if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current)
372
+ return;
373
+ context.onTriggerEnter(itemContext.value);
374
+ hasPointerMoveOpenedRef.current = true;
375
+ })
376
+ ),
519
377
  onPointerLeave: (0, import_primitive.composeEventHandlers)(
520
378
  props.onPointerLeave,
521
- whenMouse(context.onContentLeave)
379
+ whenMouse(() => {
380
+ if (disabled) return;
381
+ context.onTriggerLeave();
382
+ hasPointerMoveOpenedRef.current = false;
383
+ })
522
384
  ),
523
- style: {
524
- // Prevent interaction when animating out
525
- pointerEvents: !open && context.isRootMenu ? "none" : void 0,
526
- ...commonProps.style
527
- }
385
+ onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => {
386
+ context.onItemSelect(itemContext.value);
387
+ wasClickCloseRef.current = open;
388
+ }),
389
+ onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
390
+ const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
391
+ const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
392
+ if (open && event.key === entryKey) {
393
+ itemContext.onEntryKeyDown();
394
+ event.preventDefault();
395
+ }
396
+ })
528
397
  }
529
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs });
530
- });
531
- NavigationMenuContent.displayName = CONTENT_NAME;
532
- var ViewportContentMounter = React.forwardRef((props, forwardedRef) => {
533
- const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
534
- const { onViewportContentChange, onViewportContentRemove } = context;
535
- (0, import_react_use_layout_effect.useLayoutEffect)(() => {
536
- onViewportContentChange(props.value, {
398
+ ) }) }),
399
+ open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
400
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
401
+ VisuallyHiddenPrimitive.Root,
402
+ {
403
+ "aria-hidden": true,
404
+ tabIndex: 0,
405
+ ref: itemContext.focusProxyRef,
406
+ onFocus: (event) => {
407
+ const content = itemContext.contentRef.current;
408
+ const prevFocusedElement = event.relatedTarget;
409
+ const wasTriggerFocused = prevFocusedElement === ref.current;
410
+ const wasFocusFromContent = content?.contains(prevFocusedElement);
411
+ if (wasTriggerFocused || !wasFocusFromContent) {
412
+ itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
413
+ }
414
+ }
415
+ }
416
+ ),
417
+ context.viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-owns": contentId })
418
+ ] })
419
+ ] });
420
+ });
421
+ NavigationMenuTrigger.displayName = TRIGGER_NAME;
422
+ var LINK_NAME = "NavigationMenuLink";
423
+ var LINK_SELECT = "navigationMenu.linkSelect";
424
+ var NavigationMenuLink = React.forwardRef(
425
+ (props, forwardedRef) => {
426
+ const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;
427
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
428
+ import_react_primitive.Primitive.a,
429
+ {
430
+ "data-active": active ? "" : void 0,
431
+ "aria-current": active ? "page" : void 0,
432
+ ...linkProps,
537
433
  ref: forwardedRef,
538
- ...props
434
+ onClick: (0, import_primitive.composeEventHandlers)(
435
+ props.onClick,
436
+ (event) => {
437
+ const target = event.target;
438
+ const linkSelectEvent = new CustomEvent(LINK_SELECT, {
439
+ bubbles: true,
440
+ cancelable: true
441
+ });
442
+ target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true });
443
+ (0, import_react_primitive.dispatchDiscreteCustomEvent)(target, linkSelectEvent);
444
+ if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
445
+ const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
446
+ bubbles: true,
447
+ cancelable: true
448
+ });
449
+ (0, import_react_primitive.dispatchDiscreteCustomEvent)(target, rootContentDismissEvent);
450
+ }
451
+ },
452
+ { checkForDefaultPrevented: false }
453
+ )
454
+ }
455
+ ) });
456
+ }
457
+ );
458
+ NavigationMenuLink.displayName = LINK_NAME;
459
+ var INDICATOR_NAME = "NavigationMenuIndicator";
460
+ var NavigationMenuIndicator = React.forwardRef((props, forwardedRef) => {
461
+ const { forceMount, ...indicatorProps } = props;
462
+ const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);
463
+ const isVisible = Boolean(context.value);
464
+ return context.indicatorTrack ? import_react_dom.default.createPortal(
465
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuIndicatorImpl, { ...indicatorProps, ref: forwardedRef }) }),
466
+ context.indicatorTrack
467
+ ) : null;
468
+ });
469
+ NavigationMenuIndicator.displayName = INDICATOR_NAME;
470
+ var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => {
471
+ const { __scopeNavigationMenu, ...indicatorProps } = props;
472
+ const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);
473
+ const getItems = useCollection(__scopeNavigationMenu);
474
+ const [activeTrigger, setActiveTrigger] = React.useState(
475
+ null
476
+ );
477
+ const [position, setPosition] = React.useState(null);
478
+ const isHorizontal = context.orientation === "horizontal";
479
+ const isVisible = Boolean(context.value);
480
+ React.useEffect(() => {
481
+ const items = getItems();
482
+ const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
483
+ if (triggerNode) setActiveTrigger(triggerNode);
484
+ }, [getItems, context.value]);
485
+ const handlePositionChange = () => {
486
+ if (activeTrigger) {
487
+ setPosition({
488
+ size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
489
+ offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
539
490
  });
540
- }, [props, forwardedRef, onViewportContentChange]);
541
- (0, import_react_use_layout_effect.useLayoutEffect)(() => {
542
- return () => onViewportContentRemove(props.value);
543
- }, [props.value, onViewportContentRemove]);
544
- return null;
545
- });
546
- var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
547
- var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => {
548
- const {
549
- __scopeNavigationMenu,
550
- value,
551
- triggerRef,
552
- focusProxyRef,
553
- wasEscapeCloseRef,
554
- onRootContentClose,
555
- onContentFocusOutside,
556
- ...contentProps
557
- } = props;
558
- const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);
559
- const ref = React.useRef(null);
560
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef);
561
- const triggerId = makeTriggerId(context.baseId, value);
562
- const contentId = makeContentId(context.baseId, value);
563
- const getItems = useCollection(__scopeNavigationMenu);
564
- const prevMotionAttributeRef = React.useRef(null);
565
- const { onItemDismiss } = context;
566
- React.useEffect(() => {
567
- const content = ref.current;
568
- if (context.isRootMenu && content) {
569
- const handleClose = () => {
570
- onItemDismiss();
571
- onRootContentClose();
572
- if (content.contains(document.activeElement)) triggerRef.current?.focus();
573
- };
574
- content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
575
- return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
491
+ }
492
+ };
493
+ useResizeObserver(activeTrigger, handlePositionChange);
494
+ useResizeObserver(context.indicatorTrack, handlePositionChange);
495
+ return position ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
496
+ import_react_primitive.Primitive.div,
497
+ {
498
+ "aria-hidden": true,
499
+ "data-state": isVisible ? "visible" : "hidden",
500
+ "data-orientation": context.orientation,
501
+ ...indicatorProps,
502
+ ref: forwardedRef,
503
+ style: {
504
+ position: "absolute",
505
+ ...isHorizontal ? {
506
+ left: 0,
507
+ width: position.size + "px",
508
+ transform: `translateX(${position.offset}px)`
509
+ } : {
510
+ top: 0,
511
+ height: position.size + "px",
512
+ transform: `translateY(${position.offset}px)`
513
+ },
514
+ ...indicatorProps.style
515
+ }
516
+ }
517
+ ) : null;
518
+ });
519
+ var CONTENT_NAME = "NavigationMenuContent";
520
+ var NavigationMenuContent = React.forwardRef((props, forwardedRef) => {
521
+ const { forceMount, ...contentProps } = props;
522
+ const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
523
+ const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);
524
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(itemContext.contentRef, forwardedRef);
525
+ const open = itemContext.value === context.value;
526
+ const commonProps = {
527
+ value: itemContext.value,
528
+ triggerRef: itemContext.triggerRef,
529
+ focusProxyRef: itemContext.focusProxyRef,
530
+ wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
531
+ onContentFocusOutside: itemContext.onContentFocusOutside,
532
+ onRootContentClose: itemContext.onRootContentClose,
533
+ ...contentProps
534
+ };
535
+ return !context.viewport ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
536
+ NavigationMenuContentImpl,
537
+ {
538
+ "data-state": getOpenState(open),
539
+ ...commonProps,
540
+ ref: composedRefs,
541
+ onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter),
542
+ onPointerLeave: (0, import_primitive.composeEventHandlers)(
543
+ props.onPointerLeave,
544
+ whenMouse(context.onContentLeave)
545
+ ),
546
+ style: {
547
+ // Prevent interaction when animating out
548
+ pointerEvents: !open && context.isRootMenu ? "none" : void 0,
549
+ ...commonProps.style
576
550
  }
577
- }, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);
578
- const motionAttribute = React.useMemo(() => {
579
- const items = getItems();
580
- const values = items.map((item) => item.value);
581
- if (context.dir === "rtl") values.reverse();
582
- const index = values.indexOf(context.value);
583
- const prevIndex = values.indexOf(context.previousValue);
584
- const isSelected = value === context.value;
585
- const wasSelected = prevIndex === values.indexOf(value);
586
- if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
587
- const attribute = (() => {
588
- if (index !== prevIndex) {
589
- if (isSelected && prevIndex !== -1) return index > prevIndex ? "from-end" : "from-start";
590
- if (wasSelected && index !== -1) return index > prevIndex ? "to-start" : "to-end";
551
+ }
552
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs });
553
+ });
554
+ NavigationMenuContent.displayName = CONTENT_NAME;
555
+ var ViewportContentMounter = React.forwardRef((props, forwardedRef) => {
556
+ const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
557
+ const { onViewportContentChange, onViewportContentRemove } = context;
558
+ (0, import_react_use_layout_effect.useLayoutEffect)(() => {
559
+ onViewportContentChange(props.value, {
560
+ ref: forwardedRef,
561
+ ...props
562
+ });
563
+ }, [props, forwardedRef, onViewportContentChange]);
564
+ (0, import_react_use_layout_effect.useLayoutEffect)(() => {
565
+ return () => onViewportContentRemove(props.value);
566
+ }, [props.value, onViewportContentRemove]);
567
+ return null;
568
+ });
569
+ var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
570
+ var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => {
571
+ const {
572
+ __scopeNavigationMenu,
573
+ value,
574
+ triggerRef,
575
+ focusProxyRef,
576
+ wasEscapeCloseRef,
577
+ onRootContentClose,
578
+ onContentFocusOutside,
579
+ ...contentProps
580
+ } = props;
581
+ const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);
582
+ const ref = React.useRef(null);
583
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef);
584
+ const triggerId = makeTriggerId(context.baseId, value);
585
+ const contentId = makeContentId(context.baseId, value);
586
+ const getItems = useCollection(__scopeNavigationMenu);
587
+ const prevMotionAttributeRef = React.useRef(null);
588
+ const { onItemDismiss } = context;
589
+ React.useEffect(() => {
590
+ const content = ref.current;
591
+ if (context.isRootMenu && content) {
592
+ const handleClose = () => {
593
+ onItemDismiss();
594
+ onRootContentClose();
595
+ if (content.contains(document.activeElement)) triggerRef.current?.focus();
596
+ };
597
+ content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
598
+ return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
599
+ }
600
+ }, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);
601
+ const motionAttribute = React.useMemo(() => {
602
+ const items = getItems();
603
+ const values = items.map((item) => item.value);
604
+ if (context.dir === "rtl") values.reverse();
605
+ const index = values.indexOf(context.value);
606
+ const prevIndex = values.indexOf(context.previousValue);
607
+ const isSelected = value === context.value;
608
+ const wasSelected = prevIndex === values.indexOf(value);
609
+ if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
610
+ const attribute = (() => {
611
+ if (index !== prevIndex) {
612
+ if (isSelected && prevIndex !== -1) return index > prevIndex ? "from-end" : "from-start";
613
+ if (wasSelected && index !== -1) return index > prevIndex ? "to-start" : "to-end";
614
+ }
615
+ return null;
616
+ })();
617
+ prevMotionAttributeRef.current = attribute;
618
+ return attribute;
619
+ }, [context.previousValue, context.value, context.dir, getItems, value]);
620
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
621
+ import_react_dismissable_layer.DismissableLayer,
622
+ {
623
+ id: contentId,
624
+ "aria-labelledby": triggerId,
625
+ "data-motion": motionAttribute,
626
+ "data-orientation": context.orientation,
627
+ ...contentProps,
628
+ ref: composedRefs,
629
+ disableOutsidePointerEvents: false,
630
+ onDismiss: () => {
631
+ const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {
632
+ bubbles: true,
633
+ cancelable: true
634
+ });
635
+ ref.current?.dispatchEvent(rootContentDismissEvent);
636
+ },
637
+ onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
638
+ onContentFocusOutside();
639
+ const target = event.target;
640
+ if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
641
+ }),
642
+ onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
643
+ const target = event.target;
644
+ const isTrigger = getItems().some((item) => item.ref.current?.contains(target));
645
+ const isRootViewport = context.isRootMenu && context.viewport?.contains(target);
646
+ if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
647
+ }),
648
+ onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
649
+ const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
650
+ const isTabKey = event.key === "Tab" && !isMetaKey;
651
+ if (isTabKey) {
652
+ const candidates = getTabbableCandidates(event.currentTarget);
653
+ const focusedElement = document.activeElement;
654
+ const index = candidates.findIndex((candidate) => candidate === focusedElement);
655
+ const isMovingBackwards = event.shiftKey;
656
+ const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
657
+ if (focusFirst(nextCandidates)) {
658
+ event.preventDefault();
659
+ } else {
660
+ focusProxyRef.current?.focus();
661
+ }
591
662
  }
592
- return null;
593
- })();
594
- prevMotionAttributeRef.current = attribute;
595
- return attribute;
596
- }, [context.previousValue, context.value, context.dir, getItems, value]);
597
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroup, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
598
- import_react_dismissable_layer.DismissableLayer,
663
+ }),
664
+ onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(props.onEscapeKeyDown, (event) => {
665
+ wasEscapeCloseRef.current = true;
666
+ })
667
+ }
668
+ ) });
669
+ });
670
+ var VIEWPORT_NAME = "NavigationMenuViewport";
671
+ var NavigationMenuViewport = React.forwardRef((props, forwardedRef) => {
672
+ const { forceMount, ...viewportProps } = props;
673
+ const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);
674
+ const open = Boolean(context.value);
675
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuViewportImpl, { ...viewportProps, ref: forwardedRef }) });
676
+ });
677
+ NavigationMenuViewport.displayName = VIEWPORT_NAME;
678
+ var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => {
679
+ const { __scopeNavigationMenu, children, ...viewportImplProps } = props;
680
+ const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
681
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.onViewportChange);
682
+ const viewportContentContext = useViewportContentContext(
683
+ CONTENT_NAME,
684
+ props.__scopeNavigationMenu
685
+ );
686
+ const [size, setSize] = React.useState(null);
687
+ const [content, setContent] = React.useState(null);
688
+ const viewportWidth = size ? size?.width + "px" : void 0;
689
+ const viewportHeight = size ? size?.height + "px" : void 0;
690
+ const open = Boolean(context.value);
691
+ const activeContentValue = open ? context.value : context.previousValue;
692
+ const handleSizeChange = () => {
693
+ if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
694
+ };
695
+ useResizeObserver(content, handleSizeChange);
696
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
697
+ import_react_primitive.Primitive.div,
698
+ {
699
+ "data-state": getOpenState(open),
700
+ "data-orientation": context.orientation,
701
+ ...viewportImplProps,
702
+ ref: composedRefs,
703
+ style: {
704
+ // Prevent interaction when animating out
705
+ pointerEvents: !open && context.isRootMenu ? "none" : void 0,
706
+ ["--radix-navigation-menu-viewport-width"]: viewportWidth,
707
+ ["--radix-navigation-menu-viewport-height"]: viewportHeight,
708
+ ...viewportImplProps.style
709
+ },
710
+ onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter),
711
+ onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, whenMouse(context.onContentLeave)),
712
+ children: Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props2 }]) => {
713
+ const isActive = activeContentValue === value;
714
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isActive, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
715
+ NavigationMenuContentImpl,
716
+ {
717
+ ...props2,
718
+ ref: (0, import_react_compose_refs.composeRefs)(ref, (node) => {
719
+ if (isActive && node) setContent(node);
720
+ })
721
+ }
722
+ ) }, value);
723
+ })
724
+ }
725
+ );
726
+ });
727
+ var FOCUS_GROUP_NAME = "FocusGroup";
728
+ var FocusGroup = React.forwardRef(
729
+ (props, forwardedRef) => {
730
+ const { __scopeNavigationMenu, ...groupProps } = props;
731
+ const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
732
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Provider, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Slot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { dir: context.dir, ...groupProps, ref: forwardedRef }) }) });
733
+ }
734
+ );
735
+ var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
736
+ var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
737
+ var FocusGroupItem = React.forwardRef(
738
+ (props, forwardedRef) => {
739
+ const { __scopeNavigationMenu, ...groupProps } = props;
740
+ const getItems = useFocusGroupCollection(__scopeNavigationMenu);
741
+ const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
742
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.ItemSlot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
743
+ import_react_primitive.Primitive.button,
599
744
  {
600
- id: contentId,
601
- "aria-labelledby": triggerId,
602
- "data-motion": motionAttribute,
603
- "data-orientation": context.orientation,
604
- ...contentProps,
605
- ref: composedRefs,
606
- disableOutsidePointerEvents: false,
607
- onDismiss: () => {
608
- const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {
609
- bubbles: true,
610
- cancelable: true
611
- });
612
- ref.current?.dispatchEvent(rootContentDismissEvent);
613
- },
614
- onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
615
- onContentFocusOutside();
616
- const target = event.target;
617
- if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
618
- }),
619
- onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
620
- const target = event.target;
621
- const isTrigger = getItems().some((item) => item.ref.current?.contains(target));
622
- const isRootViewport = context.isRootMenu && context.viewport?.contains(target);
623
- if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
624
- }),
745
+ ...groupProps,
746
+ ref: forwardedRef,
625
747
  onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
626
- const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
627
- const isTabKey = event.key === "Tab" && !isMetaKey;
628
- if (isTabKey) {
629
- const candidates = getTabbableCandidates(event.currentTarget);
630
- const focusedElement = document.activeElement;
631
- const index = candidates.findIndex((candidate) => candidate === focusedElement);
632
- const isMovingBackwards = event.shiftKey;
633
- const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
634
- if (focusFirst(nextCandidates)) {
635
- event.preventDefault();
636
- } else {
637
- focusProxyRef.current?.focus();
748
+ const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
749
+ if (isFocusNavigationKey) {
750
+ let candidateNodes = getItems().map((item) => item.ref.current);
751
+ const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
752
+ const prevKeys = [prevItemKey, "ArrowUp", "End"];
753
+ if (prevKeys.includes(event.key)) candidateNodes.reverse();
754
+ if (ARROW_KEYS.includes(event.key)) {
755
+ const currentIndex = candidateNodes.indexOf(event.currentTarget);
756
+ candidateNodes = candidateNodes.slice(currentIndex + 1);
638
757
  }
758
+ setTimeout(() => focusFirst(candidateNodes));
759
+ event.preventDefault();
639
760
  }
640
- }),
641
- onEscapeKeyDown: (0, import_primitive.composeEventHandlers)(props.onEscapeKeyDown, (event) => {
642
- wasEscapeCloseRef.current = true;
643
761
  })
644
762
  }
645
763
  ) });
764
+ }
765
+ );
766
+ function getTabbableCandidates(container) {
767
+ const nodes = [];
768
+ const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
769
+ acceptNode: (node) => {
770
+ const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
771
+ if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
772
+ return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
773
+ }
646
774
  });
647
- var VIEWPORT_NAME = "NavigationMenuViewport";
648
- var NavigationMenuViewport = React.forwardRef((props, forwardedRef) => {
649
- const { forceMount, ...viewportProps } = props;
650
- const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);
651
- const open = Boolean(context.value);
652
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuViewportImpl, { ...viewportProps, ref: forwardedRef }) });
775
+ while (walker.nextNode()) nodes.push(walker.currentNode);
776
+ return nodes;
777
+ }
778
+ function focusFirst(candidates) {
779
+ const previouslyFocusedElement = document.activeElement;
780
+ return candidates.some((candidate) => {
781
+ if (candidate === previouslyFocusedElement) return true;
782
+ candidate.focus();
783
+ return document.activeElement !== previouslyFocusedElement;
653
784
  });
654
- NavigationMenuViewport.displayName = VIEWPORT_NAME;
655
- var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => {
656
- const { __scopeNavigationMenu, children, ...viewportImplProps } = props;
657
- const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
658
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.onViewportChange);
659
- const viewportContentContext = useViewportContentContext(
660
- CONTENT_NAME,
661
- props.__scopeNavigationMenu
662
- );
663
- const [size, setSize] = React.useState(null);
664
- const [content, setContent] = React.useState(null);
665
- const viewportWidth = size ? size?.width + "px" : void 0;
666
- const viewportHeight = size ? size?.height + "px" : void 0;
667
- const open = Boolean(context.value);
668
- const activeContentValue = open ? context.value : context.previousValue;
669
- const handleSizeChange = () => {
670
- if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
671
- };
672
- useResizeObserver(content, handleSizeChange);
673
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
674
- import_react_primitive.Primitive.div,
675
- {
676
- "data-state": getOpenState(open),
677
- "data-orientation": context.orientation,
678
- ...viewportImplProps,
679
- ref: composedRefs,
680
- style: {
681
- // Prevent interaction when animating out
682
- pointerEvents: !open && context.isRootMenu ? "none" : void 0,
683
- ["--radix-navigation-menu-viewport-width"]: viewportWidth,
684
- ["--radix-navigation-menu-viewport-height"]: viewportHeight,
685
- ...viewportImplProps.style
686
- },
687
- onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, context.onContentEnter),
688
- onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, whenMouse(context.onContentLeave)),
689
- children: Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props2 }]) => {
690
- const isActive = activeContentValue === value;
691
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || isActive, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
692
- NavigationMenuContentImpl,
693
- {
694
- ...props2,
695
- ref: (0, import_react_compose_refs.composeRefs)(ref, (node) => {
696
- if (isActive && node) setContent(node);
697
- })
698
- }
699
- ) }, value);
700
- })
701
- }
702
- );
785
+ }
786
+ function removeFromTabOrder(candidates) {
787
+ candidates.forEach((candidate) => {
788
+ candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
789
+ candidate.setAttribute("tabindex", "-1");
703
790
  });
704
- var FOCUS_GROUP_NAME = "FocusGroup";
705
- var FocusGroup = React.forwardRef(
706
- (props, forwardedRef) => {
707
- const { __scopeNavigationMenu, ...groupProps } = props;
708
- const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
709
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Provider, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.Slot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { dir: context.dir, ...groupProps, ref: forwardedRef }) }) });
710
- }
711
- );
712
- var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
713
- var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
714
- var FocusGroupItem = React.forwardRef(
715
- (props, forwardedRef) => {
716
- const { __scopeNavigationMenu, ...groupProps } = props;
717
- const getItems = useFocusGroupCollection(__scopeNavigationMenu);
718
- const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
719
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupCollection.ItemSlot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
720
- import_react_primitive.Primitive.button,
721
- {
722
- ...groupProps,
723
- ref: forwardedRef,
724
- onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
725
- const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
726
- if (isFocusNavigationKey) {
727
- let candidateNodes = getItems().map((item) => item.ref.current);
728
- const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
729
- const prevKeys = [prevItemKey, "ArrowUp", "End"];
730
- if (prevKeys.includes(event.key)) candidateNodes.reverse();
731
- if (ARROW_KEYS.includes(event.key)) {
732
- const currentIndex = candidateNodes.indexOf(event.currentTarget);
733
- candidateNodes = candidateNodes.slice(currentIndex + 1);
734
- }
735
- setTimeout(() => focusFirst(candidateNodes));
736
- event.preventDefault();
737
- }
738
- })
739
- }
740
- ) });
741
- }
742
- );
743
- function getTabbableCandidates(container) {
744
- const nodes = [];
745
- const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
746
- acceptNode: (node) => {
747
- const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
748
- if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
749
- return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
750
- }
751
- });
752
- while (walker.nextNode()) nodes.push(walker.currentNode);
753
- return nodes;
754
- }
755
- function focusFirst(candidates) {
756
- const previouslyFocusedElement = document.activeElement;
757
- return candidates.some((candidate) => {
758
- if (candidate === previouslyFocusedElement) return true;
759
- candidate.focus();
760
- return document.activeElement !== previouslyFocusedElement;
761
- });
762
- }
763
- function removeFromTabOrder(candidates) {
791
+ return () => {
764
792
  candidates.forEach((candidate) => {
765
- candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
766
- candidate.setAttribute("tabindex", "-1");
793
+ const prevTabIndex = candidate.dataset.tabindex;
794
+ candidate.setAttribute("tabindex", prevTabIndex);
767
795
  });
768
- return () => {
769
- candidates.forEach((candidate) => {
770
- const prevTabIndex = candidate.dataset.tabindex;
771
- candidate.setAttribute("tabindex", prevTabIndex);
796
+ };
797
+ }
798
+ function useResizeObserver(element, onResize) {
799
+ const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize);
800
+ (0, import_react_use_layout_effect.useLayoutEffect)(() => {
801
+ let rAF = 0;
802
+ if (element) {
803
+ const resizeObserver = new ResizeObserver(() => {
804
+ cancelAnimationFrame(rAF);
805
+ rAF = window.requestAnimationFrame(handleResize);
772
806
  });
773
- };
774
- }
775
- function useResizeObserver(element, onResize) {
776
- const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize);
777
- (0, import_react_use_layout_effect.useLayoutEffect)(() => {
778
- let rAF = 0;
779
- if (element) {
780
- const resizeObserver = new ResizeObserver(() => {
781
- cancelAnimationFrame(rAF);
782
- rAF = window.requestAnimationFrame(handleResize);
783
- });
784
- resizeObserver.observe(element);
785
- return () => {
786
- window.cancelAnimationFrame(rAF);
787
- resizeObserver.unobserve(element);
788
- };
789
- }
790
- }, [element, handleResize]);
791
- }
792
- function getOpenState(open) {
793
- return open ? "open" : "closed";
794
- }
795
- function makeTriggerId(baseId, value) {
796
- return `${baseId}-trigger-${value}`;
797
- }
798
- function makeContentId(baseId, value) {
799
- return `${baseId}-content-${value}`;
800
- }
801
- function whenMouse(handler) {
802
- return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
803
- }
804
- var Root2 = NavigationMenu;
805
- var Sub = NavigationMenuSub;
806
- var List = NavigationMenuList;
807
- var Item = NavigationMenuItem;
808
- var Trigger = NavigationMenuTrigger;
809
- var Link = NavigationMenuLink;
810
- var Indicator = NavigationMenuIndicator;
811
- var Content = NavigationMenuContent;
812
- var Viewport = NavigationMenuViewport;
813
- })();
807
+ resizeObserver.observe(element);
808
+ return () => {
809
+ window.cancelAnimationFrame(rAF);
810
+ resizeObserver.unobserve(element);
811
+ };
812
+ }
813
+ }, [element, handleResize]);
814
+ }
815
+ function getOpenState(open) {
816
+ return open ? "open" : "closed";
817
+ }
818
+ function makeTriggerId(baseId, value) {
819
+ return `${baseId}-trigger-${value}`;
820
+ }
821
+ function makeContentId(baseId, value) {
822
+ return `${baseId}-content-${value}`;
823
+ }
824
+ function whenMouse(handler) {
825
+ return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
826
+ }
827
+ var Root2 = NavigationMenu;
828
+ var Sub = NavigationMenuSub;
829
+ var List = NavigationMenuList;
830
+ var Item = NavigationMenuItem;
831
+ var Trigger = NavigationMenuTrigger;
832
+ var Link = NavigationMenuLink;
833
+ var Indicator = NavigationMenuIndicator;
834
+ var Content = NavigationMenuContent;
835
+ var Viewport = NavigationMenuViewport;
814
836
  //# sourceMappingURL=index.js.map