@radix-ui/react-navigation-menu 1.2.18 → 1.2.19-rc.1784059564143

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -6,6 +6,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
7
  var __getProtoOf = Object.getPrototypeOf;
8
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
9
10
  var __export = (target, all) => {
10
11
  for (var name in all)
11
12
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -80,8 +81,8 @@ var [createNavigationMenuContext, createNavigationMenuScope] = (0, import_react_
80
81
  );
81
82
  var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
82
83
  var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
83
- var NavigationMenu = React.forwardRef(
84
- (props, forwardedRef) => {
84
+ var NavigationMenu = /* @__PURE__ */ React.forwardRef(
85
+ /* @__PURE__ */ __name(function NavigationMenu2(props, forwardedRef) {
85
86
  const {
86
87
  __scopeNavigationMenu,
87
88
  value: valueProp,
@@ -102,7 +103,7 @@ var NavigationMenu = React.forwardRef(
102
103
  const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
103
104
  const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
104
105
  prop: valueProp,
105
- onChange: (value2) => {
106
+ onChange: /* @__PURE__ */ __name((value2) => {
106
107
  const isOpen = value2 !== "";
107
108
  const hasSkipDelayDuration = skipDelayDuration > 0;
108
109
  if (isOpen) {
@@ -116,7 +117,7 @@ var NavigationMenu = React.forwardRef(
116
117
  );
117
118
  }
118
119
  onValueChange?.(value2);
119
- },
120
+ }, "onChange"),
120
121
  defaultProp: defaultValue ?? "",
121
122
  caller: NAVIGATION_MENU_NAME
122
123
  });
@@ -188,12 +189,12 @@ var NavigationMenu = React.forwardRef(
188
189
  )
189
190
  }
190
191
  );
191
- }
192
+ }, "NavigationMenu")
192
193
  );
193
- NavigationMenu.displayName = NAVIGATION_MENU_NAME;
194
194
  var SUB_NAME = "NavigationMenuSub";
195
- var NavigationMenuSub = React.forwardRef(
196
- (props, forwardedRef) => {
195
+ var NavigationMenuSub = /* @__PURE__ */ React.forwardRef(
196
+ // blank line to reduce diff noise
197
+ /* @__PURE__ */ __name(function NavigationMenuSub2(props, forwardedRef) {
197
198
  const {
198
199
  __scopeNavigationMenu,
199
200
  value: valueProp,
@@ -224,10 +225,9 @@ var NavigationMenuSub = React.forwardRef(
224
225
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
225
226
  }
226
227
  );
227
- }
228
+ }, "NavigationMenuSub")
228
229
  );
229
- NavigationMenuSub.displayName = SUB_NAME;
230
- var NavigationMenuProvider = (props) => {
230
+ var NavigationMenuProvider = /* @__PURE__ */ __name((props) => {
231
231
  const {
232
232
  scope,
233
233
  isRootMenu,
@@ -283,21 +283,22 @@ var NavigationMenuProvider = (props) => {
283
283
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentProvider, { scope, items: viewportContent, children }) })
284
284
  }
285
285
  );
286
- };
286
+ }, "NavigationMenuProvider");
287
287
  var LIST_NAME = "NavigationMenuList";
288
- var NavigationMenuList = React.forwardRef(
289
- (props, forwardedRef) => {
288
+ var NavigationMenuList = /* @__PURE__ */ React.forwardRef(
289
+ // blank line to reduce diff noise
290
+ /* @__PURE__ */ __name(function NavigationMenuList2(props, forwardedRef) {
290
291
  const { __scopeNavigationMenu, ...listProps } = props;
291
292
  const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
292
293
  const list = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef });
293
294
  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 }) });
294
- }
295
+ }, "NavigationMenuList")
295
296
  );
296
- NavigationMenuList.displayName = LIST_NAME;
297
297
  var ITEM_NAME = "NavigationMenuItem";
298
298
  var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME);
299
- var NavigationMenuItem = React.forwardRef(
300
- (props, forwardedRef) => {
299
+ var NavigationMenuItem = /* @__PURE__ */ React.forwardRef(
300
+ // blank line to reduce diff noise
301
+ /* @__PURE__ */ __name(function NavigationMenuItem2(props, forwardedRef) {
301
302
  const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;
302
303
  const autoValue = (0, import_react_id.useId)();
303
304
  const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
@@ -336,11 +337,10 @@ var NavigationMenuItem = React.forwardRef(
336
337
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.li, { ...itemProps, ref: forwardedRef })
337
338
  }
338
339
  );
339
- }
340
+ }, "NavigationMenuItem")
340
341
  );
341
- NavigationMenuItem.displayName = ITEM_NAME;
342
342
  var TRIGGER_NAME = "NavigationMenuTrigger";
343
- var NavigationMenuTrigger = React.forwardRef((props, forwardedRef) => {
343
+ var NavigationMenuTrigger = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuTrigger2(props, forwardedRef) {
344
344
  const { __scopeNavigationMenu, disabled, ...triggerProps } = props;
345
345
  const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);
346
346
  const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);
@@ -419,12 +419,11 @@ var NavigationMenuTrigger = React.forwardRef((props, forwardedRef) => {
419
419
  context.viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-owns": contentId })
420
420
  ] })
421
421
  ] });
422
- });
423
- NavigationMenuTrigger.displayName = TRIGGER_NAME;
424
- var LINK_NAME = "NavigationMenuLink";
422
+ }, "NavigationMenuTrigger"));
425
423
  var LINK_SELECT = "navigationMenu.linkSelect";
426
- var NavigationMenuLink = React.forwardRef(
427
- (props, forwardedRef) => {
424
+ var NavigationMenuLink = /* @__PURE__ */ React.forwardRef(
425
+ // blank line to reduce diff noise
426
+ /* @__PURE__ */ __name(function NavigationMenuLink2(props, forwardedRef) {
428
427
  const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;
429
428
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
430
429
  import_react_primitive.Primitive.a,
@@ -455,11 +454,10 @@ var NavigationMenuLink = React.forwardRef(
455
454
  )
456
455
  }
457
456
  ) });
458
- }
457
+ }, "NavigationMenuLink")
459
458
  );
460
- NavigationMenuLink.displayName = LINK_NAME;
461
459
  var INDICATOR_NAME = "NavigationMenuIndicator";
462
- var NavigationMenuIndicator = React.forwardRef((props, forwardedRef) => {
460
+ var NavigationMenuIndicator = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuIndicator2(props, forwardedRef) {
463
461
  const { forceMount, ...indicatorProps } = props;
464
462
  const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);
465
463
  const isVisible = Boolean(context.value);
@@ -467,9 +465,8 @@ var NavigationMenuIndicator = React.forwardRef((props, forwardedRef) => {
467
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 }) }),
468
466
  context.indicatorTrack
469
467
  ) : null;
470
- });
471
- NavigationMenuIndicator.displayName = INDICATOR_NAME;
472
- var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => {
468
+ }, "NavigationMenuIndicator"));
469
+ var NavigationMenuIndicatorImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuIndicatorImpl2(props, forwardedRef) {
473
470
  const { __scopeNavigationMenu, ...indicatorProps } = props;
474
471
  const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);
475
472
  const getItems = useCollection(__scopeNavigationMenu);
@@ -484,14 +481,14 @@ var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => {
484
481
  const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
485
482
  if (triggerNode) setActiveTrigger(triggerNode);
486
483
  }, [getItems, context.value]);
487
- const handlePositionChange = () => {
484
+ const handlePositionChange = /* @__PURE__ */ __name(() => {
488
485
  if (activeTrigger) {
489
486
  setPosition({
490
487
  size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
491
488
  offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
492
489
  });
493
490
  }
494
- };
491
+ }, "handlePositionChange");
495
492
  useResizeObserver(activeTrigger, handlePositionChange);
496
493
  useResizeObserver(context.indicatorTrack, handlePositionChange);
497
494
  return position ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -519,9 +516,9 @@ var NavigationMenuIndicatorImpl = React.forwardRef((props, forwardedRef) => {
519
516
  }
520
517
  }
521
518
  ) : null;
522
- });
519
+ }, "NavigationMenuIndicatorImpl"));
523
520
  var CONTENT_NAME = "NavigationMenuContent";
524
- var NavigationMenuContent = React.forwardRef((props, forwardedRef) => {
521
+ var NavigationMenuContent = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuContent2(props, forwardedRef) {
525
522
  const { forceMount, ...contentProps } = props;
526
523
  const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
527
524
  const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);
@@ -554,9 +551,8 @@ var NavigationMenuContent = React.forwardRef((props, forwardedRef) => {
554
551
  }
555
552
  }
556
553
  ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs });
557
- });
558
- NavigationMenuContent.displayName = CONTENT_NAME;
559
- var ViewportContentMounter = React.forwardRef((props, forwardedRef) => {
554
+ }, "NavigationMenuContent"));
555
+ var ViewportContentMounter = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function ViewportContentMounter2(props, forwardedRef) {
560
556
  const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);
561
557
  const { onViewportContentChange, onViewportContentRemove } = context;
562
558
  (0, import_react_use_layout_effect.useLayoutEffect)(() => {
@@ -569,9 +565,9 @@ var ViewportContentMounter = React.forwardRef((props, forwardedRef) => {
569
565
  return () => onViewportContentRemove(props.value);
570
566
  }, [props.value, onViewportContentRemove]);
571
567
  return null;
572
- });
568
+ }, "ViewportContentMounter"));
573
569
  var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
574
- var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => {
570
+ var NavigationMenuContentImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuContentImpl2(props, forwardedRef) {
575
571
  const {
576
572
  __scopeNavigationMenu,
577
573
  value,
@@ -593,11 +589,11 @@ var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => {
593
589
  React.useEffect(() => {
594
590
  const content = ref.current;
595
591
  if (context.isRootMenu && content) {
596
- const handleClose = () => {
592
+ const handleClose = /* @__PURE__ */ __name(() => {
597
593
  onItemDismiss();
598
594
  onRootContentClose();
599
595
  if (content.contains(document.activeElement)) triggerRef.current?.focus();
600
- };
596
+ }, "handleClose");
601
597
  content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
602
598
  return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
603
599
  }
@@ -670,16 +666,15 @@ var NavigationMenuContentImpl = React.forwardRef((props, forwardedRef) => {
670
666
  })
671
667
  }
672
668
  ) });
673
- });
669
+ }, "NavigationMenuContentImpl"));
674
670
  var VIEWPORT_NAME = "NavigationMenuViewport";
675
- var NavigationMenuViewport = React.forwardRef((props, forwardedRef) => {
671
+ var NavigationMenuViewport = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuViewport2(props, forwardedRef) {
676
672
  const { forceMount, ...viewportProps } = props;
677
673
  const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);
678
674
  const open = Boolean(context.value);
679
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 }) });
680
- });
681
- NavigationMenuViewport.displayName = VIEWPORT_NAME;
682
- var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => {
676
+ }, "NavigationMenuViewport"));
677
+ var NavigationMenuViewportImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __name(function NavigationMenuViewportImpl2(props, forwardedRef) {
683
678
  const { __scopeNavigationMenu, children, ...viewportImplProps } = props;
684
679
  const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
685
680
  const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.onViewportChange);
@@ -693,9 +688,9 @@ var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => {
693
688
  const viewportHeight = size ? size?.height + "px" : void 0;
694
689
  const open = Boolean(context.value);
695
690
  const activeContentValue = open ? context.value : context.previousValue;
696
- const handleSizeChange = () => {
691
+ const handleSizeChange = /* @__PURE__ */ __name(() => {
697
692
  if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
698
- };
693
+ }, "handleSizeChange");
699
694
  useResizeObserver(content, handleSizeChange);
700
695
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
701
696
  import_react_primitive.Primitive.div,
@@ -727,8 +722,8 @@ var NavigationMenuViewportImpl = React.forwardRef((props, forwardedRef) => {
727
722
  })
728
723
  }
729
724
  );
730
- });
731
- var NavigationMenuViewportItem = ({
725
+ }, "NavigationMenuViewportImpl"));
726
+ var NavigationMenuViewportItem = /* @__PURE__ */ __name(({
732
727
  contentRef,
733
728
  isActive,
734
729
  onActiveContentChange,
@@ -744,19 +739,19 @@ var NavigationMenuViewportItem = ({
744
739
  );
745
740
  const composedRefs = (0, import_react_compose_refs.useComposedRefs)(contentRef, handleContentChange);
746
741
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuContentImpl, { ...props, ref: composedRefs });
747
- };
742
+ }, "NavigationMenuViewportItem");
748
743
  var FOCUS_GROUP_NAME = "FocusGroup";
749
- var FocusGroup = React.forwardRef(
750
- (props, forwardedRef) => {
744
+ var FocusGroup = /* @__PURE__ */ React.forwardRef(
745
+ /* @__PURE__ */ __name(function FocusGroup2(props, forwardedRef) {
751
746
  const { __scopeNavigationMenu, ...groupProps } = props;
752
747
  const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
753
748
  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 }) }) });
754
- }
749
+ }, "FocusGroup")
755
750
  );
756
751
  var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
757
752
  var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
758
- var FocusGroupItem = React.forwardRef(
759
- (props, forwardedRef) => {
753
+ var FocusGroupItem = /* @__PURE__ */ React.forwardRef(
754
+ /* @__PURE__ */ __name(function FocusGroupItem2(props, forwardedRef) {
760
755
  const { __scopeNavigationMenu, ...groupProps } = props;
761
756
  const getItems = useFocusGroupCollection(__scopeNavigationMenu);
762
757
  const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
@@ -782,20 +777,21 @@ var FocusGroupItem = React.forwardRef(
782
777
  })
783
778
  }
784
779
  ) });
785
- }
780
+ }, "FocusGroupItem")
786
781
  );
787
782
  function getTabbableCandidates(container) {
788
783
  const nodes = [];
789
784
  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
790
- acceptNode: (node) => {
785
+ acceptNode: /* @__PURE__ */ __name((node) => {
791
786
  const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
792
787
  if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
793
788
  return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
794
- }
789
+ }, "acceptNode")
795
790
  });
796
791
  while (walker.nextNode()) nodes.push(walker.currentNode);
797
792
  return nodes;
798
793
  }
794
+ __name(getTabbableCandidates, "getTabbableCandidates");
799
795
  function focusFirst(candidates) {
800
796
  const previouslyFocusedElement = document.activeElement;
801
797
  return candidates.some((candidate) => {
@@ -804,6 +800,7 @@ function focusFirst(candidates) {
804
800
  return document.activeElement !== previouslyFocusedElement;
805
801
  });
806
802
  }
803
+ __name(focusFirst, "focusFirst");
807
804
  function removeFromTabOrder(candidates) {
808
805
  candidates.forEach((candidate) => {
809
806
  candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
@@ -816,6 +813,7 @@ function removeFromTabOrder(candidates) {
816
813
  });
817
814
  };
818
815
  }
816
+ __name(removeFromTabOrder, "removeFromTabOrder");
819
817
  function useResizeObserver(element, onResize) {
820
818
  const handleResize = (0, import_react_use_callback_ref.useCallbackRef)(onResize);
821
819
  (0, import_react_use_layout_effect.useLayoutEffect)(() => {
@@ -833,18 +831,23 @@ function useResizeObserver(element, onResize) {
833
831
  }
834
832
  }, [element, handleResize]);
835
833
  }
834
+ __name(useResizeObserver, "useResizeObserver");
836
835
  function getOpenState(open) {
837
836
  return open ? "open" : "closed";
838
837
  }
838
+ __name(getOpenState, "getOpenState");
839
839
  function makeTriggerId(baseId, value) {
840
840
  return `${baseId}-trigger-${value}`;
841
841
  }
842
+ __name(makeTriggerId, "makeTriggerId");
842
843
  function makeContentId(baseId, value) {
843
844
  return `${baseId}-content-${value}`;
844
845
  }
846
+ __name(makeContentId, "makeContentId");
845
847
  function whenMouse(handler) {
846
848
  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
847
849
  }
850
+ __name(whenMouse, "whenMouse");
848
851
  var Root2 = NavigationMenu;
849
852
  var Sub = NavigationMenuSub;
850
853
  var List = NavigationMenuList;