@radix-ui/react-navigation-menu 1.2.20 → 1.2.21

package/dist/index.d.mts

@@ -5,8 +5,21 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 
-type Orientation = 'vertical' | 'horizontal';
-type Direction = 'ltr' | 'rtl';
+declare const Orientation: {
+    readonly Vertical: "vertical";
+    readonly Horizontal: "horizontal";
+};
+type Orientation = (typeof Orientation)[keyof typeof Orientation];
+declare const Direction: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+declare const ActivationMode: {
+    readonly Automatic: "automatic";
+    readonly Manual: "manual";
+};
+type ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode];
 declare const createNavigationMenuScope: _radix_ui_react_context.CreateScope;
 type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>;
 type PrimitiveNavProps = React.ComponentPropsWithoutRef<typeof Primitive.nav>;
@@ -17,15 +30,28 @@ interface NavigationMenuProps extends Omit<NavigationMenuProviderProps, keyof Na
     dir?: Direction;
     orientation?: Orientation;
     /**
-     * The duration from when the pointer enters the trigger until the tooltip gets opened.
-     * @defaultValue 200
+     * The duration from when the pointer enters the trigger until the tooltip
+     * gets opened. When `activationMode` is `manual`, this prop is ignored.
+     *
+     * @default 200
      */
     delayDuration?: number;
     /**
-     * How much time a user has to enter another trigger without incurring a delay again.
-     * @defaultValue 300
+     * How much time a user has to enter another trigger without incurring a delay
+     * again. When `activationMode` is `manual`, this prop is ignored.
+     *
+     * @default 300
      */
     skipDelayDuration?: number;
+    /**
+     * Whether an item is activated automatically or manually.
+     * - `"automatic"`: hovering or focusing a trigger opens its item, and moving
+     *   away closes it after a short delay.
+     * - `"manual"`: clicking a trigger toggles the item; hover and focus are ignored
+     *
+     * @default "automatic"
+     */
+    activationMode?: ActivationMode;
 }
 declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
@@ -34,6 +60,24 @@ interface NavigationMenuSubProps extends Omit<NavigationMenuProviderProps, keyof
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     orientation?: Orientation;
+    /**
+     * Whether an item is activated automatically or manually.
+     * - `"automatic"`: hovering or focusing a trigger opens its item, and moving
+     *   away closes it after a short delay.
+     * - `"manual"`: clicking a trigger toggles the item; hover and focus are
+     *   ignored
+     *
+     * The default value is inherited from the parent Navigation Menu root
+     * component. If no value is provided to the parent, the default value is
+     * `"automatic"`.
+     */
+    activationMode?: ActivationMode;
+    /**
+     * When true, clicking a sub-menu item's trigger once it's active will not deactivate it.
+     *
+     * @default true
+     */
+    disableToggle?: boolean;
 }
 declare const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>;
 interface NavigationMenuProviderPrivateProps {
@@ -42,6 +86,7 @@ interface NavigationMenuProviderPrivateProps {
     children: React.ReactNode;
     orientation: Orientation;
     dir: Direction;
+    activationMode: ActivationMode;
     rootNavigationMenu: NavigationMenuElement | null;
     value: string;
     onTriggerEnter(itemValue: string): void;

package/dist/index.d.ts

@@ -5,8 +5,21 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 
-type Orientation = 'vertical' | 'horizontal';
-type Direction = 'ltr' | 'rtl';
+declare const Orientation: {
+    readonly Vertical: "vertical";
+    readonly Horizontal: "horizontal";
+};
+type Orientation = (typeof Orientation)[keyof typeof Orientation];
+declare const Direction: {
+    readonly LTR: "ltr";
+    readonly RTL: "rtl";
+};
+type Direction = (typeof Direction)[keyof typeof Direction];
+declare const ActivationMode: {
+    readonly Automatic: "automatic";
+    readonly Manual: "manual";
+};
+type ActivationMode = (typeof ActivationMode)[keyof typeof ActivationMode];
 declare const createNavigationMenuScope: _radix_ui_react_context.CreateScope;
 type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>;
 type PrimitiveNavProps = React.ComponentPropsWithoutRef<typeof Primitive.nav>;
@@ -17,15 +30,28 @@ interface NavigationMenuProps extends Omit<NavigationMenuProviderProps, keyof Na
     dir?: Direction;
     orientation?: Orientation;
     /**
-     * The duration from when the pointer enters the trigger until the tooltip gets opened.
-     * @defaultValue 200
+     * The duration from when the pointer enters the trigger until the tooltip
+     * gets opened. When `activationMode` is `manual`, this prop is ignored.
+     *
+     * @default 200
      */
     delayDuration?: number;
     /**
-     * How much time a user has to enter another trigger without incurring a delay again.
-     * @defaultValue 300
+     * How much time a user has to enter another trigger without incurring a delay
+     * again. When `activationMode` is `manual`, this prop is ignored.
+     *
+     * @default 300
      */
     skipDelayDuration?: number;
+    /**
+     * Whether an item is activated automatically or manually.
+     * - `"automatic"`: hovering or focusing a trigger opens its item, and moving
+     *   away closes it after a short delay.
+     * - `"manual"`: clicking a trigger toggles the item; hover and focus are ignored
+     *
+     * @default "automatic"
+     */
+    activationMode?: ActivationMode;
 }
 declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
@@ -34,6 +60,24 @@ interface NavigationMenuSubProps extends Omit<NavigationMenuProviderProps, keyof
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     orientation?: Orientation;
+    /**
+     * Whether an item is activated automatically or manually.
+     * - `"automatic"`: hovering or focusing a trigger opens its item, and moving
+     *   away closes it after a short delay.
+     * - `"manual"`: clicking a trigger toggles the item; hover and focus are
+     *   ignored
+     *
+     * The default value is inherited from the parent Navigation Menu root
+     * component. If no value is provided to the parent, the default value is
+     * `"automatic"`.
+     */
+    activationMode?: ActivationMode;
+    /**
+     * When true, clicking a sub-menu item's trigger once it's active will not deactivate it.
+     *
+     * @default true
+     */
+    disableToggle?: boolean;
 }
 declare const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>;
 interface NavigationMenuProviderPrivateProps {
@@ -42,6 +86,7 @@ interface NavigationMenuProviderPrivateProps {
     children: React.ReactNode;
     orientation: Orientation;
     dir: Direction;
+    activationMode: ActivationMode;
     rootNavigationMenu: NavigationMenuElement | null;
     value: string;
     onTriggerEnter(itemValue: string): void;

package/dist/index.js

@@ -72,6 +72,18 @@ var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect"
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
 var VisuallyHiddenPrimitive = __toESM(require("@radix-ui/react-visually-hidden"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var ActivationMode = {
+  Automatic: "automatic",
+  Manual: "manual"
+};
+var Orientation = {
+  Vertical: "vertical",
+  Horizontal: "horizontal"
+};
+var Direction = {
+  LTR: "ltr",
+  RTL: "rtl"
+};
 var NAVIGATION_MENU_NAME = "NavigationMenu";
 var [Collection, useCollection, createCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
 var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = (0, import_react_collection.createCollection)(NAVIGATION_MENU_NAME);
@@ -90,8 +102,9 @@ var NavigationMenu = /* @__PURE__ */ React.forwardRef(
       defaultValue,
       delayDuration = 200,
       skipDelayDuration = 300,
-      orientation = "horizontal",
+      orientation = Orientation.Horizontal,
       dir,
+      activationMode = ActivationMode.Automatic,
       ...NavigationMenuProps
     } = props;
     const [navigationMenu, setNavigationMenu] = React.useState(null);
@@ -161,18 +174,34 @@ var NavigationMenu = /* @__PURE__ */ React.forwardRef(
         value,
         dir: direction,
         orientation,
+        activationMode,
         rootNavigationMenu: navigationMenu,
         onTriggerEnter: (itemValue) => {
-          window.clearTimeout(openTimerRef.current);
-          if (isOpenDelayed) handleDelayedOpen(itemValue);
-          else handleOpen(itemValue);
+          if (activationMode === ActivationMode.Automatic) {
+            window.clearTimeout(openTimerRef.current);
+            if (isOpenDelayed) {
+              handleDelayedOpen(itemValue);
+            } else {
+              handleOpen(itemValue);
+            }
+          }
         },
         onTriggerLeave: () => {
-          window.clearTimeout(openTimerRef.current);
-          startCloseTimer();
+          if (activationMode === ActivationMode.Automatic) {
+            window.clearTimeout(openTimerRef.current);
+            startCloseTimer();
+          }
+        },
+        onContentEnter: () => {
+          if (activationMode === ActivationMode.Automatic) {
+            window.clearTimeout(closeTimerRef.current);
+          }
+        },
+        onContentLeave: () => {
+          if (activationMode === ActivationMode.Automatic) {
+            startCloseTimer();
+          }
         },
-        onContentEnter: () => window.clearTimeout(closeTimerRef.current),
-        onContentLeave: startCloseTimer,
         onItemSelect: (itemValue) => {
           setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
         },
@@ -200,10 +229,13 @@ var NavigationMenuSub = /* @__PURE__ */ React.forwardRef(
       value: valueProp,
       onValueChange,
       defaultValue,
-      orientation = "horizontal",
+      orientation = Orientation.Horizontal,
+      activationMode: activationModeProp,
+      disableToggle = true,
       ...subProps
     } = props;
     const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);
+    const activationMode = activationModeProp ?? context.activationMode;
     const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
       prop: valueProp,
       onChange: onValueChange,
@@ -218,9 +250,16 @@ var NavigationMenuSub = /* @__PURE__ */ React.forwardRef(
         value,
         dir: context.dir,
         orientation,
+        activationMode,
         rootNavigationMenu: context.rootNavigationMenu,
-        onTriggerEnter: (itemValue) => setValue(itemValue),
-        onItemSelect: (itemValue) => setValue(itemValue),
+        onTriggerEnter: (itemValue) => {
+          if (activationMode === ActivationMode.Automatic) {
+            setValue(itemValue);
+          }
+        },
+        onItemSelect: (itemValue) => {
+          setValue((prevValue) => disableToggle || prevValue !== itemValue ? itemValue : "");
+        },
         onItemDismiss: () => setValue(""),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
       }
@@ -234,6 +273,7 @@ var NavigationMenuProvider = /* @__PURE__ */ __name((props) => {
     rootNavigationMenu,
     dir,
     orientation,
+    activationMode,
     children,
     value,
     onItemSelect,
@@ -257,6 +297,7 @@ var NavigationMenuProvider = /* @__PURE__ */ __name((props) => {
       baseId: (0, import_react_id.useId)(),
       dir,
       orientation,
+      activationMode,
       viewport,
       onViewportChange: setViewport,
       indicatorTrack,
@@ -389,7 +430,7 @@ var NavigationMenuTrigger = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __n
           wasClickCloseRef.current = open;
         }),
         onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
-          const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+          const verticalEntryKey = context.dir === Direction.RTL ? "ArrowLeft" : "ArrowRight";
           const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
           if (open && event.key === entryKey) {
             itemContext.onEntryKeyDown();
@@ -474,7 +515,7 @@ var NavigationMenuIndicatorImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__
     null
   );
   const [position, setPosition] = React.useState(null);
-  const isHorizontal = context.orientation === "horizontal";
+  const isHorizontal = context.orientation === Orientation.Horizontal;
   const isVisible = Boolean(context.value);
   React.useEffect(() => {
     const items = getItems();
@@ -601,7 +642,7 @@ var NavigationMenuContentImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */
   const motionAttribute = React.useMemo(() => {
     const items = getItems();
     const values = items.map((item) => item.value);
-    if (context.dir === "rtl") values.reverse();
+    if (context.dir === Direction.RTL) values.reverse();
     const index = values.indexOf(context.value);
     const prevIndex = values.indexOf(context.previousValue);
     const isSelected = value === context.value;
@@ -637,7 +678,12 @@ var NavigationMenuContentImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */
       onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
         onContentFocusOutside();
         const target = event.target;
-        if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
+        const relatedTarget = event.detail.originalEvent.relatedTarget;
+        const focusMovedIntoMenu = context.rootNavigationMenu?.contains(target);
+        const focusCameFromMenu = context.rootNavigationMenu?.contains(relatedTarget);
+        if (focusMovedIntoMenu || !focusCameFromMenu) {
+          event.preventDefault();
+        }
       }),
       onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
         const target = event.target;
@@ -764,7 +810,7 @@ var FocusGroupItem = /* @__PURE__ */ React.forwardRef(
           const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
           if (isFocusNavigationKey) {
             let candidateNodes = getItems().map((item) => item.ref.current);
-            const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+            const prevItemKey = context.dir === Direction.RTL ? "ArrowRight" : "ArrowLeft";
             const prevKeys = [prevItemKey, "ArrowUp", "End"];
             if (prevKeys.includes(event.key)) candidateNodes.reverse();
             if (ARROW_KEYS.includes(event.key)) {