@radix-ui/react-navigation-menu - npm Package Compare versions

Comparing version 1.0.1-rc.21 to 1.1.0-rc.1

dist/index.d.ts

@@ -12,9 +12,25 @@ import * as React from "react";
 type PrimitiveNavProps = Radix.ComponentPropsWithoutRef<typeof Primitive.nav>;
-export interface NavigationMenuProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, Omit<PrimitiveNavProps, 'defaultValue'> {
+export interface NavigationMenuProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, PrimitiveNavProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
     dir?: Direction;
     orientation?: Orientation;
+    /**
+     * 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.
+     * @defaultValue 300
+     */
+    skipDelayDuration?: number;
 }
 export const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
 type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
-export interface NavigationMenuSubProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, Omit<PrimitiveDivProps, 'defaultValue'> {
+export interface NavigationMenuSubProps extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>, PrimitiveDivProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
     orientation?: Orientation;
@@ -30,7 +46,11 @@ }
     rootNavigationMenu: NavigationMenuElement | null;
+    value: string;
+    onTriggerEnter(itemValue: string): void;
+    onTriggerLeave?(): void;
+    onContentEnter?(): void;
+    onContentLeave?(): void;
+    onItemSelect(itemValue: string): void;
+    onItemDismiss(): void;
 }
 interface NavigationMenuProviderProps extends NavigationMenuProviderPrivateProps {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
 }
@@ -37,0 +57,0 @@ type PrimitiveUnorderedListProps = Radix.ComponentPropsWithoutRef<typeof Primitive.ul>;

dist/index.js

@@ -74,3 +74,3 @@ var $6jHCS$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 const $7f73b938b73b5118$export$5b2278cf1e8bcae2 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props;
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , delayDuration: delayDuration = 200 , skipDelayDuration: skipDelayDuration = 300 , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props;
     const [navigationMenu, setNavigationMenu] = $6jHCS$react.useState(null);
@@ -80,11 +80,81 @@ const composedRef = $6jHCS$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setNavigationMenu(node)
     const direction = $6jHCS$radixuireactdirection.useDirection(dir);
+    const openTimerRef = $6jHCS$react.useRef(0);
+    const closeTimerRef = $6jHCS$react.useRef(0);
+    const skipDelayTimerRef = $6jHCS$react.useRef(0);
+    const [isOpenDelayed, setIsOpenDelayed] = $6jHCS$react.useState(true);
+    const [value1 = '', setValue] = $6jHCS$radixuireactusecontrollablestate.useControllableState({
+        prop: valueProp,
+        onChange: (value)=>{
+            const isOpen = value !== '';
+            const hasSkipDelayDuration = skipDelayDuration > 0;
+            if (isOpen) {
+                window.clearTimeout(skipDelayTimerRef.current);
+                if (hasSkipDelayDuration) setIsOpenDelayed(false);
+            } else {
+                window.clearTimeout(skipDelayTimerRef.current);
+                skipDelayTimerRef.current = window.setTimeout(()=>setIsOpenDelayed(true)
+                , skipDelayDuration);
+            }
+            onValueChange === null || onValueChange === void 0 || onValueChange(value);
+        },
+        defaultProp: defaultValue
+    });
+    const startCloseTimer = $6jHCS$react.useCallback(()=>{
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = window.setTimeout(()=>setValue('')
+        , 150);
+    }, [
+        setValue
+    ]);
+    const handleOpen = $6jHCS$react.useCallback((itemValue)=>{
+        window.clearTimeout(closeTimerRef.current);
+        setValue(itemValue);
+    }, [
+        setValue
+    ]);
+    const handleDelayedOpen = $6jHCS$react.useCallback((itemValue)=>{
+        const isOpenItem = value1 === itemValue;
+        if (isOpenItem) // If the item is already open (e.g. we're transitioning from the content to the trigger)
+        // then we want to clear the close timer immediately.
+        window.clearTimeout(closeTimerRef.current);
+        else openTimerRef.current = window.setTimeout(()=>{
+            window.clearTimeout(closeTimerRef.current);
+            setValue(itemValue);
+        }, delayDuration);
+    }, [
+        value1,
+        setValue,
+        delayDuration
+    ]);
+    $6jHCS$react.useEffect(()=>{
+        return ()=>{
+            window.clearTimeout(openTimerRef.current);
+            window.clearTimeout(closeTimerRef.current);
+            window.clearTimeout(skipDelayTimerRef.current);
+        };
+    }, []);
     return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuProvider, {
         scope: __scopeNavigationMenu,
         isRootMenu: true,
-        value: value,
-        onValueChange: onValueChange,
-        defaultValue: defaultValue,
+        value: value1,
         dir: direction,
         orientation: orientation,
-        rootNavigationMenu: navigationMenu
+        rootNavigationMenu: navigationMenu,
+        onTriggerEnter: (itemValue)=>{
+            window.clearTimeout(openTimerRef.current);
+            if (isOpenDelayed) handleDelayedOpen(itemValue);
+            else handleOpen(itemValue);
+        },
+        onTriggerLeave: ()=>{
+            window.clearTimeout(openTimerRef.current);
+            startCloseTimer();
+        },
+        onContentEnter: ()=>window.clearTimeout(closeTimerRef.current)
+        ,
+        onContentLeave: startCloseTimer,
+        onItemSelect: (itemValue)=>{
+            setValue((prevValue)=>prevValue === itemValue ? '' : itemValue
+            );
+        },
+        onItemDismiss: ()=>setValue('')
     }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.nav, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({
@@ -105,4 +175,9 @@ "aria-label": "Main",
 const $7f73b938b73b5118$export$5958edd6c4ee7c79 = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , ...subProps } = props;
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , ...subProps } = props;
     const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$SUB_NAME, __scopeNavigationMenu);
+    const [value = '', setValue] = $6jHCS$radixuireactusecontrollablestate.useControllableState({
+        prop: valueProp,
+        onChange: onValueChange,
+        defaultProp: defaultValue
+    });
     return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuProvider, {
@@ -112,7 +187,10 @@ scope: __scopeNavigationMenu,
         value: value,
-        onValueChange: onValueChange,
-        defaultValue: defaultValue,
         dir: context.dir,
         orientation: orientation,
-        rootNavigationMenu: context.rootNavigationMenu
+        rootNavigationMenu: context.rootNavigationMenu,
+        onTriggerEnter: (itemValue)=>setValue(itemValue)
+        ,
+        onItemSelect: (itemValue)=>setValue(itemValue)
+        ,
+        onItemDismiss: ()=>setValue('')
     }, /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($6jHCS$babelruntimehelpersextends))({
@@ -128,18 +206,6 @@ "data-orientation": orientation
 /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$NavigationMenuProvider = (props)=>{
-    const { scope: scope , isRootMenu: isRootMenu , rootNavigationMenu: rootNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , dir: dir , orientation: orientation , children: children  } = props;
+    const { scope: scope , isRootMenu: isRootMenu , rootNavigationMenu: rootNavigationMenu , dir: dir , orientation: orientation , children: children , value: value , onItemSelect: onItemSelect , onItemDismiss: onItemDismiss , onTriggerEnter: onTriggerEnter , onTriggerLeave: onTriggerLeave , onContentEnter: onContentEnter , onContentLeave: onContentLeave  } = props;
     const [viewport, setViewport] = $6jHCS$react.useState(null);
     const [viewportContent, setViewportContent] = $6jHCS$react.useState(new Map());
     const [indicatorTrack, setIndicatorTrack] = $6jHCS$react.useState(null);
-    const closeTimerRef = $6jHCS$react.useRef(0);
-    const [value = '', setValue] = $6jHCS$radixuireactusecontrollablestate.useControllableState({
-        prop: valueProp,
-        onChange: onValueChange,
-        defaultProp: defaultValue
-    });
-    $6jHCS$react.useEffect(()=>{
-        return ()=>window.clearTimeout(closeTimerRef.current)
-        ;
-    }, [
-        closeTimerRef
-    ]);
     return /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$NavigationMenuProviderImpl, {
@@ -158,31 +224,8 @@ scope: scope,
         onIndicatorTrackChange: setIndicatorTrack,
-        onItemOver: $6jHCS$react.useCallback((itemValue)=>{
-            if (isRootMenu) window.clearTimeout(closeTimerRef.current);
-            setValue(itemValue);
-        }, [
-            setValue,
-            isRootMenu
-        ]),
-        onItemLeave: $6jHCS$react.useCallback(()=>{
-            if (isRootMenu) {
-                window.clearTimeout(closeTimerRef.current);
-                closeTimerRef.current = window.setTimeout(()=>setValue('')
-                , 150);
-            }
-        }, [
-            setValue,
-            isRootMenu
-        ]),
-        onItemSelect: $6jHCS$react.useCallback((itemValue)=>{
-            setValue((prevValue)=>{
-                return isRootMenu ? prevValue === itemValue ? '' : itemValue : itemValue;
-            });
-        }, [
-            setValue,
-            isRootMenu
-        ]),
-        onItemDismiss: $6jHCS$react.useCallback(()=>setValue('')
-        , [
-            setValue
-        ]),
+        onTriggerEnter: $6jHCS$radixuireactusecallbackref.useCallbackRef(onTriggerEnter),
+        onTriggerLeave: $6jHCS$radixuireactusecallbackref.useCallbackRef(onTriggerLeave),
+        onContentEnter: $6jHCS$radixuireactusecallbackref.useCallbackRef(onContentEnter),
+        onContentLeave: $6jHCS$radixuireactusecallbackref.useCallbackRef(onContentLeave),
+        onItemSelect: $6jHCS$radixuireactusecallbackref.useCallbackRef(onItemSelect),
+        onItemDismiss: $6jHCS$radixuireactusecallbackref.useCallbackRef(onItemDismiss),
         onViewportContentChange: $6jHCS$react.useCallback((contentValue, contentData)=>{
@@ -289,2 +332,3 @@ setViewportContent((prevContent)=>{
     const contentId = $7f73b938b73b5118$var$makeContentId(context.baseId, itemContext.value);
+    const hasPointerMoveOpenedRef = $6jHCS$react.useRef(false);
     const wasClickCloseRef = $6jHCS$react.useRef(false);
@@ -311,8 +355,10 @@ const open = itemContext.value === context.value;
         onPointerMove: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerMove, $7f73b938b73b5118$var$whenMouse(()=>{
-            if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current) return;
-            context.onItemOver(itemContext.value);
+            if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current) return;
+            context.onTriggerEnter(itemContext.value);
+            hasPointerMoveOpenedRef.current = true;
         })),
         onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $7f73b938b73b5118$var$whenMouse(()=>{
             if (disabled) return;
-            context.onItemLeave();
+            context.onTriggerLeave();
+            hasPointerMoveOpenedRef.current = false;
         })),
@@ -481,6 +527,4 @@ onClick: $6jHCS$radixuiprimitive.composeEventHandlers(props.onClick, ()=>{
         ref: composedRefs,
-        onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerEnter, ()=>{
-            context.onItemOver(itemContext.value);
-        }),
-        onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $7f73b938b73b5118$var$whenMouse(context.onItemLeave)),
+        onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerEnter, context.onContentEnter),
+        onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $7f73b938b73b5118$var$whenMouse(context.onContentLeave)),
         style: {
@@ -696,6 +740,4 @@ // Prevent interaction when animating out
         },
-        onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props1.onPointerEnter, ()=>{
-            context.onItemOver(activeContentValue);
-        }),
-        onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props1.onPointerLeave, $7f73b938b73b5118$var$whenMouse(context.onItemLeave))
+        onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props1.onPointerEnter, context.onContentEnter),
+        onPointerLeave: $6jHCS$radixuiprimitive.composeEventHandlers(props1.onPointerLeave, $7f73b938b73b5118$var$whenMouse(context.onContentLeave))
     }), Array.from(viewportContentContext.items).map(([value, { ref: ref , forceMount: forceMount , ...props }])=>{
@@ -702,0 +744,0 @@ const isActive = activeContentValue === value;

dist/index.module.js

 import $yHMN2$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
-import {forwardRef as $yHMN2$forwardRef, useState as $yHMN2$useState, createElement as $yHMN2$createElement, useRef as $yHMN2$useRef, useEffect as $yHMN2$useEffect, useCallback as $yHMN2$useCallback, Fragment as $yHMN2$Fragment, useMemo as $yHMN2$useMemo} from "react";
+import {forwardRef as $yHMN2$forwardRef, useState as $yHMN2$useState, useRef as $yHMN2$useRef, useCallback as $yHMN2$useCallback, useEffect as $yHMN2$useEffect, createElement as $yHMN2$createElement, Fragment as $yHMN2$Fragment, useMemo as $yHMN2$useMemo} from "react";
 import $yHMN2$reactdom from "react-dom";
@@ -48,3 +48,3 @@ import {createContextScope as $yHMN2$createContextScope} from "@radix-ui/react-context";
 const $322c88a641701f3b$export$5b2278cf1e8bcae2 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
-    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props;
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , delayDuration: delayDuration = 200 , skipDelayDuration: skipDelayDuration = 300 , orientation: orientation = 'horizontal' , dir: dir , ...NavigationMenuProps } = props;
     const [navigationMenu, setNavigationMenu] = $yHMN2$useState(null);
@@ -54,11 +54,81 @@ const composedRef = $yHMN2$useComposedRefs(forwardedRef, (node)=>setNavigationMenu(node)
     const direction = $yHMN2$useDirection(dir);
+    const openTimerRef = $yHMN2$useRef(0);
+    const closeTimerRef = $yHMN2$useRef(0);
+    const skipDelayTimerRef = $yHMN2$useRef(0);
+    const [isOpenDelayed, setIsOpenDelayed] = $yHMN2$useState(true);
+    const [value1 = '', setValue] = $yHMN2$useControllableState({
+        prop: valueProp,
+        onChange: (value)=>{
+            const isOpen = value !== '';
+            const hasSkipDelayDuration = skipDelayDuration > 0;
+            if (isOpen) {
+                window.clearTimeout(skipDelayTimerRef.current);
+                if (hasSkipDelayDuration) setIsOpenDelayed(false);
+            } else {
+                window.clearTimeout(skipDelayTimerRef.current);
+                skipDelayTimerRef.current = window.setTimeout(()=>setIsOpenDelayed(true)
+                , skipDelayDuration);
+            }
+            onValueChange === null || onValueChange === void 0 || onValueChange(value);
+        },
+        defaultProp: defaultValue
+    });
+    const startCloseTimer = $yHMN2$useCallback(()=>{
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = window.setTimeout(()=>setValue('')
+        , 150);
+    }, [
+        setValue
+    ]);
+    const handleOpen = $yHMN2$useCallback((itemValue)=>{
+        window.clearTimeout(closeTimerRef.current);
+        setValue(itemValue);
+    }, [
+        setValue
+    ]);
+    const handleDelayedOpen = $yHMN2$useCallback((itemValue)=>{
+        const isOpenItem = value1 === itemValue;
+        if (isOpenItem) // If the item is already open (e.g. we're transitioning from the content to the trigger)
+        // then we want to clear the close timer immediately.
+        window.clearTimeout(closeTimerRef.current);
+        else openTimerRef.current = window.setTimeout(()=>{
+            window.clearTimeout(closeTimerRef.current);
+            setValue(itemValue);
+        }, delayDuration);
+    }, [
+        value1,
+        setValue,
+        delayDuration
+    ]);
+    $yHMN2$useEffect(()=>{
+        return ()=>{
+            window.clearTimeout(openTimerRef.current);
+            window.clearTimeout(closeTimerRef.current);
+            window.clearTimeout(skipDelayTimerRef.current);
+        };
+    }, []);
     return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuProvider, {
         scope: __scopeNavigationMenu,
         isRootMenu: true,
-        value: value,
-        onValueChange: onValueChange,
-        defaultValue: defaultValue,
+        value: value1,
         dir: direction,
         orientation: orientation,
-        rootNavigationMenu: navigationMenu
+        rootNavigationMenu: navigationMenu,
+        onTriggerEnter: (itemValue)=>{
+            window.clearTimeout(openTimerRef.current);
+            if (isOpenDelayed) handleDelayedOpen(itemValue);
+            else handleOpen(itemValue);
+        },
+        onTriggerLeave: ()=>{
+            window.clearTimeout(openTimerRef.current);
+            startCloseTimer();
+        },
+        onContentEnter: ()=>window.clearTimeout(closeTimerRef.current)
+        ,
+        onContentLeave: startCloseTimer,
+        onItemSelect: (itemValue)=>{
+            setValue((prevValue)=>prevValue === itemValue ? '' : itemValue
+            );
+        },
+        onItemDismiss: ()=>setValue('')
     }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.nav, $yHMN2$babelruntimehelpersesmextends({
@@ -79,4 +149,9 @@ "aria-label": "Main",
 const $322c88a641701f3b$export$5958edd6c4ee7c79 = /*#__PURE__*/ $yHMN2$forwardRef((props, forwardedRef)=>{
-    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , ...subProps } = props;
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , orientation: orientation = 'horizontal' , ...subProps } = props;
     const context = $322c88a641701f3b$var$useNavigationMenuContext($322c88a641701f3b$var$SUB_NAME, __scopeNavigationMenu);
+    const [value = '', setValue] = $yHMN2$useControllableState({
+        prop: valueProp,
+        onChange: onValueChange,
+        defaultProp: defaultValue
+    });
     return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuProvider, {
@@ -86,7 +161,10 @@ scope: __scopeNavigationMenu,
         value: value,
-        onValueChange: onValueChange,
-        defaultValue: defaultValue,
         dir: context.dir,
         orientation: orientation,
-        rootNavigationMenu: context.rootNavigationMenu
+        rootNavigationMenu: context.rootNavigationMenu,
+        onTriggerEnter: (itemValue)=>setValue(itemValue)
+        ,
+        onItemSelect: (itemValue)=>setValue(itemValue)
+        ,
+        onItemDismiss: ()=>setValue('')
     }, /*#__PURE__*/ $yHMN2$createElement($yHMN2$Primitive.div, $yHMN2$babelruntimehelpersesmextends({
@@ -102,18 +180,6 @@ "data-orientation": orientation
 /* -----------------------------------------------------------------------------------------------*/ const $322c88a641701f3b$var$NavigationMenuProvider = (props)=>{
-    const { scope: scope , isRootMenu: isRootMenu , rootNavigationMenu: rootNavigationMenu , value: valueProp , onValueChange: onValueChange , defaultValue: defaultValue , dir: dir , orientation: orientation , children: children  } = props;
+    const { scope: scope , isRootMenu: isRootMenu , rootNavigationMenu: rootNavigationMenu , dir: dir , orientation: orientation , children: children , value: value , onItemSelect: onItemSelect , onItemDismiss: onItemDismiss , onTriggerEnter: onTriggerEnter , onTriggerLeave: onTriggerLeave , onContentEnter: onContentEnter , onContentLeave: onContentLeave  } = props;
     const [viewport, setViewport] = $yHMN2$useState(null);
     const [viewportContent, setViewportContent] = $yHMN2$useState(new Map());
     const [indicatorTrack, setIndicatorTrack] = $yHMN2$useState(null);
-    const closeTimerRef = $yHMN2$useRef(0);
-    const [value = '', setValue] = $yHMN2$useControllableState({
-        prop: valueProp,
-        onChange: onValueChange,
-        defaultProp: defaultValue
-    });
-    $yHMN2$useEffect(()=>{
-        return ()=>window.clearTimeout(closeTimerRef.current)
-        ;
-    }, [
-        closeTimerRef
-    ]);
     return /*#__PURE__*/ $yHMN2$createElement($322c88a641701f3b$var$NavigationMenuProviderImpl, {
@@ -132,31 +198,8 @@ scope: scope,
         onIndicatorTrackChange: setIndicatorTrack,
-        onItemOver: $yHMN2$useCallback((itemValue)=>{
-            if (isRootMenu) window.clearTimeout(closeTimerRef.current);
-            setValue(itemValue);
-        }, [
-            setValue,
-            isRootMenu
-        ]),
-        onItemLeave: $yHMN2$useCallback(()=>{
-            if (isRootMenu) {
-                window.clearTimeout(closeTimerRef.current);
-                closeTimerRef.current = window.setTimeout(()=>setValue('')
-                , 150);
-            }
-        }, [
-            setValue,
-            isRootMenu
-        ]),
-        onItemSelect: $yHMN2$useCallback((itemValue)=>{
-            setValue((prevValue)=>{
-                return isRootMenu ? prevValue === itemValue ? '' : itemValue : itemValue;
-            });
-        }, [
-            setValue,
-            isRootMenu
-        ]),
-        onItemDismiss: $yHMN2$useCallback(()=>setValue('')
-        , [
-            setValue
-        ]),
+        onTriggerEnter: $yHMN2$useCallbackRef(onTriggerEnter),
+        onTriggerLeave: $yHMN2$useCallbackRef(onTriggerLeave),
+        onContentEnter: $yHMN2$useCallbackRef(onContentEnter),
+        onContentLeave: $yHMN2$useCallbackRef(onContentLeave),
+        onItemSelect: $yHMN2$useCallbackRef(onItemSelect),
+        onItemDismiss: $yHMN2$useCallbackRef(onItemDismiss),
         onViewportContentChange: $yHMN2$useCallback((contentValue, contentData)=>{
@@ -263,2 +306,3 @@ setViewportContent((prevContent)=>{
     const contentId = $322c88a641701f3b$var$makeContentId(context.baseId, itemContext.value);
+    const hasPointerMoveOpenedRef = $yHMN2$useRef(false);
     const wasClickCloseRef = $yHMN2$useRef(false);
@@ -285,8 +329,10 @@ const open = itemContext.value === context.value;
         onPointerMove: $yHMN2$composeEventHandlers(props.onPointerMove, $322c88a641701f3b$var$whenMouse(()=>{
-            if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current) return;
-            context.onItemOver(itemContext.value);
+            if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current) return;
+            context.onTriggerEnter(itemContext.value);
+            hasPointerMoveOpenedRef.current = true;
         })),
         onPointerLeave: $yHMN2$composeEventHandlers(props.onPointerLeave, $322c88a641701f3b$var$whenMouse(()=>{
             if (disabled) return;
-            context.onItemLeave();
+            context.onTriggerLeave();
+            hasPointerMoveOpenedRef.current = false;
         })),
@@ -455,6 +501,4 @@ onClick: $yHMN2$composeEventHandlers(props.onClick, ()=>{
         ref: composedRefs,
-        onPointerEnter: $yHMN2$composeEventHandlers(props.onPointerEnter, ()=>{
-            context.onItemOver(itemContext.value);
-        }),
-        onPointerLeave: $yHMN2$composeEventHandlers(props.onPointerLeave, $322c88a641701f3b$var$whenMouse(context.onItemLeave)),
+        onPointerEnter: $yHMN2$composeEventHandlers(props.onPointerEnter, context.onContentEnter),
+        onPointerLeave: $yHMN2$composeEventHandlers(props.onPointerLeave, $322c88a641701f3b$var$whenMouse(context.onContentLeave)),
         style: {
@@ -670,6 +714,4 @@ // Prevent interaction when animating out
         },
-        onPointerEnter: $yHMN2$composeEventHandlers(props1.onPointerEnter, ()=>{
-            context.onItemOver(activeContentValue);
-        }),
-        onPointerLeave: $yHMN2$composeEventHandlers(props1.onPointerLeave, $322c88a641701f3b$var$whenMouse(context.onItemLeave))
+        onPointerEnter: $yHMN2$composeEventHandlers(props1.onPointerEnter, context.onContentEnter),
+        onPointerLeave: $yHMN2$composeEventHandlers(props1.onPointerLeave, $322c88a641701f3b$var$whenMouse(context.onContentLeave))
     }), Array.from(viewportContentContext.items).map(([value, { ref: ref , forceMount: forceMount , ...props }])=>{
@@ -676,0 +718,0 @@ const isActive = activeContentValue === value;

package.json

 {
   "name": "@radix-ui/react-navigation-menu",
-  "version": "1.0.1-rc.21",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
@@ -21,10 +21,10 @@ "source": "src/index.ts",
     "@radix-ui/primitive": "1.0.0",
-    "@radix-ui/react-collection": "1.0.1-rc.14",
+    "@radix-ui/react-collection": "1.0.1-rc.15",
     "@radix-ui/react-compose-refs": "1.0.0",
     "@radix-ui/react-context": "1.0.0",
     "@radix-ui/react-direction": "1.0.0",
-    "@radix-ui/react-dismissable-layer": "1.0.1-rc.21",
+    "@radix-ui/react-dismissable-layer": "1.0.1-rc.22",
     "@radix-ui/react-id": "1.0.0",
     "@radix-ui/react-presence": "1.0.0",
-    "@radix-ui/react-primitive": "1.0.1-rc.14",
+    "@radix-ui/react-primitive": "1.0.1-rc.15",
     "@radix-ui/react-use-callback-ref": "1.0.0",
@@ -34,3 +34,3 @@ "@radix-ui/react-use-controllable-state": "1.0.0",
     "@radix-ui/react-use-previous": "1.0.0",
-    "@radix-ui/react-visually-hidden": "1.0.1-rc.14"
+    "@radix-ui/react-visually-hidden": "1.0.1-rc.15"
   },
@@ -37,0 +37,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

295732

increased by6.29%

Lines of code

1868

increased by6.14%

Dependency changes

• + Added@radix-ui/react-collection@1.0.1-rc.15(transitive)

• + Added@radix-ui/react-dismissable-layer@1.0.1-rc.22(transitive)

• + Added@radix-ui/react-primitive@1.0.1-rc.15(transitive)

• + Added@radix-ui/react-slot@1.0.1-rc.2(transitive)

• + Added@radix-ui/react-use-escape-keydown@1.0.1-rc.12(transitive)

• + Added@radix-ui/react-visually-hidden@1.0.1-rc.15(transitive)

• - Removed@radix-ui/react-collection@1.0.1-rc.14(transitive)

• - Removed@radix-ui/react-dismissable-layer@1.0.1-rc.21(transitive)

• - Removed@radix-ui/react-primitive@1.0.1-rc.14(transitive)

• - Removed@radix-ui/react-slot@1.0.1-rc.1(transitive)

• - Removed@radix-ui/react-use-escape-keydown@1.0.1-rc.11(transitive)

• - Removed@radix-ui/react-visually-hidden@1.0.1-rc.14(transitive)

• Updated@radix-ui/react-collection@1.0.1-rc.15

• Updated@radix-ui/react-dismissable-layer@1.0.1-rc.22

• Updated@radix-ui/react-primitive@1.0.1-rc.15

• Updated@radix-ui/react-visually-hidden@1.0.1-rc.15