@huin-core/react-navigation-menu 1.0.2 → 1.0.4

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