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