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

package/dist/index.d.mts

@@ -5,21 +5,8 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 
-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];
+type Orientation = 'vertical' | 'horizontal';
+type Direction = 'ltr' | 'rtl';
 declare const createNavigationMenuScope: _radix_ui_react_context.CreateScope;
 type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>;
 type PrimitiveNavProps = React.ComponentPropsWithoutRef<typeof Primitive.nav>;
@@ -30,28 +17,15 @@ 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. When `activationMode` is `manual`, this prop is ignored.
-     *
-     * @default 200
+     * The duration from when the pointer enters the trigger until the tooltip gets opened.
+     * @defaultValue 200
      */
     delayDuration?: number;
     /**
-     * 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
+     * How much time a user has to enter another trigger without incurring a delay again.
+     * @defaultValue 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>;
@@ -60,24 +34,6 @@ 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 {
@@ -86,7 +42,6 @@ interface NavigationMenuProviderPrivateProps {
     children: React.ReactNode;
     orientation: Orientation;
     dir: Direction;
-    activationMode: ActivationMode;
     rootNavigationMenu: NavigationMenuElement | null;
     value: string;
     onTriggerEnter(itemValue: string): void;
@@ -158,5 +113,14 @@ interface NavigationMenuViewportProps extends Omit<NavigationMenuViewportImplPro
 declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
 interface NavigationMenuViewportImplProps extends PrimitiveDivProps {
 }
+declare const Root: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+declare const Sub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>;
+declare const List: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+declare const Item: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Link: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const Indicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
 
-export { NavigationMenuContent as Content, NavigationMenuIndicator as Indicator, NavigationMenuItem as Item, NavigationMenuLink as Link, NavigationMenuList as List, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuSub, type NavigationMenuSubProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, NavigationMenu as Root, NavigationMenuSub as Sub, NavigationMenuTrigger as Trigger, NavigationMenuViewport as Viewport, createNavigationMenuScope };
+export { Content, Indicator, Item, Link, List, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuSub, type NavigationMenuSubProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, Root, Sub, Trigger, Viewport, createNavigationMenuScope };

package/dist/index.d.ts

@@ -5,21 +5,8 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 
-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];
+type Orientation = 'vertical' | 'horizontal';
+type Direction = 'ltr' | 'rtl';
 declare const createNavigationMenuScope: _radix_ui_react_context.CreateScope;
 type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>;
 type PrimitiveNavProps = React.ComponentPropsWithoutRef<typeof Primitive.nav>;
@@ -30,28 +17,15 @@ 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. When `activationMode` is `manual`, this prop is ignored.
-     *
-     * @default 200
+     * The duration from when the pointer enters the trigger until the tooltip gets opened.
+     * @defaultValue 200
      */
     delayDuration?: number;
     /**
-     * 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
+     * How much time a user has to enter another trigger without incurring a delay again.
+     * @defaultValue 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>;
@@ -60,24 +34,6 @@ 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 {
@@ -86,7 +42,6 @@ interface NavigationMenuProviderPrivateProps {
     children: React.ReactNode;
     orientation: Orientation;
     dir: Direction;
-    activationMode: ActivationMode;
     rootNavigationMenu: NavigationMenuElement | null;
     value: string;
     onTriggerEnter(itemValue: string): void;
@@ -158,5 +113,14 @@ interface NavigationMenuViewportProps extends Omit<NavigationMenuViewportImplPro
 declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
 interface NavigationMenuViewportImplProps extends PrimitiveDivProps {
 }
+declare const Root: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+declare const Sub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>;
+declare const List: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+declare const Item: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Link: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const Indicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
 
-export { NavigationMenuContent as Content, NavigationMenuIndicator as Indicator, NavigationMenuItem as Item, NavigationMenuLink as Link, NavigationMenuList as List, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuSub, type NavigationMenuSubProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, NavigationMenu as Root, NavigationMenuSub as Sub, NavigationMenuTrigger as Trigger, NavigationMenuViewport as Viewport, createNavigationMenuScope };
+export { Content, Indicator, Item, Link, List, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuSub, type NavigationMenuSubProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, Root, Sub, Trigger, Viewport, createNavigationMenuScope };

package/dist/index.js

@@ -32,11 +32,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Content: () => NavigationMenuContent,
-  Indicator: () => NavigationMenuIndicator,
-  Item: () => NavigationMenuItem,
-  Link: () => NavigationMenuLink,
-  List: () => NavigationMenuList,
+  Content: () => Content,
+  Indicator: () => Indicator,
+  Item: () => Item,
+  Link: () => Link,
+  List: () => List,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuIndicator: () => NavigationMenuIndicator,
@@ -46,10 +46,10 @@ __export(index_exports, {
   NavigationMenuSub: () => NavigationMenuSub,
   NavigationMenuTrigger: () => NavigationMenuTrigger,
   NavigationMenuViewport: () => NavigationMenuViewport,
-  Root: () => NavigationMenu,
-  Sub: () => NavigationMenuSub,
-  Trigger: () => NavigationMenuTrigger,
-  Viewport: () => NavigationMenuViewport,
+  Root: () => Root2,
+  Sub: () => Sub,
+  Trigger: () => Trigger,
+  Viewport: () => Viewport,
   createNavigationMenuScope: () => createNavigationMenuScope
 });
 module.exports = __toCommonJS(index_exports);
@@ -72,18 +72,6 @@ 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);
@@ -102,9 +90,8 @@ var NavigationMenu = /* @__PURE__ */ React.forwardRef(
       defaultValue,
       delayDuration = 200,
       skipDelayDuration = 300,
-      orientation = Orientation.Horizontal,
+      orientation = "horizontal",
       dir,
-      activationMode = ActivationMode.Automatic,
       ...NavigationMenuProps
     } = props;
     const [navigationMenu, setNavigationMenu] = React.useState(null);
@@ -174,34 +161,18 @@ var NavigationMenu = /* @__PURE__ */ React.forwardRef(
         value,
         dir: direction,
         orientation,
-        activationMode,
         rootNavigationMenu: navigationMenu,
         onTriggerEnter: (itemValue) => {
-          if (activationMode === ActivationMode.Automatic) {
-            window.clearTimeout(openTimerRef.current);
-            if (isOpenDelayed) {
-              handleDelayedOpen(itemValue);
-            } else {
-              handleOpen(itemValue);
-            }
-          }
+          window.clearTimeout(openTimerRef.current);
+          if (isOpenDelayed) handleDelayedOpen(itemValue);
+          else handleOpen(itemValue);
         },
         onTriggerLeave: () => {
-          if (activationMode === ActivationMode.Automatic) {
-            window.clearTimeout(openTimerRef.current);
-            startCloseTimer();
-          }
-        },
-        onContentEnter: () => {
-          if (activationMode === ActivationMode.Automatic) {
-            window.clearTimeout(closeTimerRef.current);
-          }
-        },
-        onContentLeave: () => {
-          if (activationMode === ActivationMode.Automatic) {
-            startCloseTimer();
-          }
+          window.clearTimeout(openTimerRef.current);
+          startCloseTimer();
         },
+        onContentEnter: () => window.clearTimeout(closeTimerRef.current),
+        onContentLeave: startCloseTimer,
         onItemSelect: (itemValue) => {
           setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
         },
@@ -229,13 +200,10 @@ var NavigationMenuSub = /* @__PURE__ */ React.forwardRef(
       value: valueProp,
       onValueChange,
       defaultValue,
-      orientation = Orientation.Horizontal,
-      activationMode: activationModeProp,
-      disableToggle = true,
+      orientation = "horizontal",
       ...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,
@@ -250,16 +218,9 @@ var NavigationMenuSub = /* @__PURE__ */ React.forwardRef(
         value,
         dir: context.dir,
         orientation,
-        activationMode,
         rootNavigationMenu: context.rootNavigationMenu,
-        onTriggerEnter: (itemValue) => {
-          if (activationMode === ActivationMode.Automatic) {
-            setValue(itemValue);
-          }
-        },
-        onItemSelect: (itemValue) => {
-          setValue((prevValue) => disableToggle || prevValue !== itemValue ? itemValue : "");
-        },
+        onTriggerEnter: (itemValue) => setValue(itemValue),
+        onItemSelect: (itemValue) => setValue(itemValue),
         onItemDismiss: () => setValue(""),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
       }
@@ -273,7 +234,6 @@ var NavigationMenuProvider = /* @__PURE__ */ __name((props) => {
     rootNavigationMenu,
     dir,
     orientation,
-    activationMode,
     children,
     value,
     onItemSelect,
@@ -297,7 +257,6 @@ var NavigationMenuProvider = /* @__PURE__ */ __name((props) => {
       baseId: (0, import_react_id.useId)(),
       dir,
       orientation,
-      activationMode,
       viewport,
       onViewportChange: setViewport,
       indicatorTrack,
@@ -430,7 +389,7 @@ var NavigationMenuTrigger = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */ __n
           wasClickCloseRef.current = open;
         }),
         onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
-          const verticalEntryKey = context.dir === Direction.RTL ? "ArrowLeft" : "ArrowRight";
+          const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
           const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
           if (open && event.key === entryKey) {
             itemContext.onEntryKeyDown();
@@ -515,7 +474,7 @@ var NavigationMenuIndicatorImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__
     null
   );
   const [position, setPosition] = React.useState(null);
-  const isHorizontal = context.orientation === Orientation.Horizontal;
+  const isHorizontal = context.orientation === "horizontal";
   const isVisible = Boolean(context.value);
   React.useEffect(() => {
     const items = getItems();
@@ -642,7 +601,7 @@ var NavigationMenuContentImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */
   const motionAttribute = React.useMemo(() => {
     const items = getItems();
     const values = items.map((item) => item.value);
-    if (context.dir === Direction.RTL) values.reverse();
+    if (context.dir === "rtl") values.reverse();
     const index = values.indexOf(context.value);
     const prevIndex = values.indexOf(context.previousValue);
     const isSelected = value === context.value;
@@ -678,12 +637,7 @@ var NavigationMenuContentImpl = /* @__PURE__ */ React.forwardRef(/* @__PURE__ */
       onFocusOutside: (0, import_primitive.composeEventHandlers)(props.onFocusOutside, (event) => {
         onContentFocusOutside();
         const target = event.target;
-        const relatedTarget = event.detail.originalEvent.relatedTarget;
-        const focusMovedIntoMenu = context.rootNavigationMenu?.contains(target);
-        const focusCameFromMenu = context.rootNavigationMenu?.contains(relatedTarget);
-        if (focusMovedIntoMenu || !focusCameFromMenu) {
-          event.preventDefault();
-        }
+        if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
       }),
       onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
         const target = event.target;
@@ -810,7 +764,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 === Direction.RTL ? "ArrowRight" : "ArrowLeft";
+            const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
             const prevKeys = [prevItemKey, "ArrowUp", "End"];
             if (prevKeys.includes(event.key)) candidateNodes.reverse();
             if (ARROW_KEYS.includes(event.key)) {
@@ -894,4 +848,13 @@ function whenMouse(handler) {
   return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
 }
 __name(whenMouse, "whenMouse");
+var Root2 = NavigationMenu;
+var Sub = NavigationMenuSub;
+var List = NavigationMenuList;
+var Item = NavigationMenuItem;
+var Trigger = NavigationMenuTrigger;
+var Link = NavigationMenuLink;
+var Indicator = NavigationMenuIndicator;
+var Content = NavigationMenuContent;
+var Viewport = NavigationMenuViewport;
 //# sourceMappingURL=index.js.map