@radix-ui/react-navigation-menu 1.0.1-rc.9 → 1.1.0-rc.2

package/dist/index.d.ts

@@ -9,13 +9,29 @@ type Direction = 'ltr' | 'rtl';
 export const createNavigationMenuScope: import("@radix-ui/react-context").CreateScope;
 type NavigationMenuElement = React.ElementRef<typeof Primitive.nav>;
 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;
 }
 export const NavigationMenuSub: React.ForwardRefExoticComponent<NavigationMenuSubProps & React.RefAttributes<HTMLDivElement>>;
@@ -26,11 +42,15 @@ interface NavigationMenuProviderPrivateProps {
     orientation: Orientation;
     dir: Direction;
     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;
 }
 type PrimitiveUnorderedListProps = Radix.ComponentPropsWithoutRef<typeof Primitive.ul>;
 export interface NavigationMenuListProps extends PrimitiveUnorderedListProps {
@@ -76,6 +96,7 @@ interface NavigationMenuContentImplPrivateProps {
     value: string;
     triggerRef: React.RefObject<NavigationMenuTriggerElement>;
     focusProxyRef: React.RefObject<FocusProxyElement>;
+    wasEscapeCloseRef: React.MutableRefObject<boolean>;
     onContentFocusOutside(): void;
     onRootContentClose(): void;
 }

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAsBA,mBAAmB,UAAU,GAAG,YAAY,CAAC;AAC7C,iBAAiB,KAAK,GAAG,KAAK,CAAC;AAiB/B,OAAA,gGAGC,CAAC;AAiCF,6BAA6B,MAAM,UAAU,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AACpE,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,oCACE,SAAQ,IAAI,CAAC,2BAA2B,EAAE,MAAM,kCAAkC,CAAC,EACjF,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,OAAA,MAAM,uGAoCL,CAAC;AAWF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,uCACE,SAAQ,IAAI,CAAC,2BAA2B,EAAE,MAAM,kCAAkC,CAAC,EACjF,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,OAAA,MAAM,gHA2BL,CAAC;AAMF;IACE,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,SAAS,CAAC;IACf,kBAAkB,EAAE,qBAAqB,GAAG,IAAI,CAAC;CAClD;AAED,qCAAsC,SAAQ,kCAAkC;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAgGD,mCAAmC,MAAM,wBAAwB,CAAC,OAAO,UAAU,EAAE,CAAC,CAAC;AACvF,wCAAkC,SAAQ,2BAA2B;CAAG;AAExE,OAAA,MAAM,oHAiBL,CAAC;AAUF,yBAAyB,MAAM,UAAU,CAAC,OAAO,wBAAwB,IAAI,CAAC,CAAC;AAiB/E,8BAA8B,MAAM,wBAAwB,CAAC,OAAO,UAAU,EAAE,CAAC,CAAC;AAClF,wCAAkC,SAAQ,sBAAsB;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,OAAA,MAAM,iHA2CL,CAAC;AAUF,oCAAoC,MAAM,UAAU,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AAC9E,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,2CAAqC,SAAQ,oBAAoB;CAAG;AAEpE,OAAA,MAAM,2HAyFJ,CAAC;AAYH,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAC7E,wCAAkC,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,OAAA,MAAM,qHAoCL,CAAC;AAWF,6CAAuC,SAAQ,gCAAgC;IAC7E;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,4HAgBJ,CAAC;AAKH,0CAA2C,SAAQ,iBAAiB;CAAG;AAuEvE,2CACE,SAAQ,IAAI,CAAC,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;IACzF;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,wHAuCJ,CAAC;AA2CH,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AAErF;IACE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,SAAS,CAAC,4BAA4B,CAAC,CAAC;IAC1D,aAAa,EAAE,MAAM,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClD,qBAAqB,IAAI,IAAI,CAAC;IAC9B,kBAAkB,IAAI,IAAI,CAAC;CAC5B;AACD,wCACE,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,CAAC,EAC9C,qCAAqC;CAAG;AAqI5C,4CACE,SAAQ,IAAI,CAAC,+BAA+B,EAAE,UAAU,GAAG,oBAAoB,CAAC;IAChF;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,0HAaJ,CAAC;AAOH,yCAA0C,SAAQ,iBAAiB;CAAG;AAwOtE,OAAA,MAAM,6FAAqB,CAAC;AAC5B,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,sGAAyB,CAAC;AAChC,OAAA,MAAM,mGAAyB,CAAC;AAChC,OAAA,MAAM,6GAA+B,CAAC;AACtC,OAAA,MAAM,uGAAyB,CAAC;AAChC,OAAA,MAAM,8GAAmC,CAAC;AAC1C,OAAA,MAAM,0GAA+B,CAAC;AACtC,OAAA,MAAM,4GAAiC,CAAC","sources":["packages/react/navigation-menu/src/packages/react/navigation-menu/src/NavigationMenu.tsx","packages/react/navigation-menu/src/packages/react/navigation-menu/src/index.ts","packages/react/navigation-menu/src/index.ts"],"sourcesContent":[null,null,"export {\n  createNavigationMenuScope,\n  //\n  NavigationMenu,\n  NavigationMenuSub,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  //\n  Root,\n  Sub,\n  List,\n  Item,\n  Trigger,\n  Link,\n  Indicator,\n  Content,\n  Viewport,\n} from './NavigationMenu';\nexport type {\n  NavigationMenuProps,\n  NavigationMenuSubProps,\n  NavigationMenuListProps,\n  NavigationMenuItemProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuLinkProps,\n  NavigationMenuIndicatorProps,\n  NavigationMenuContentProps,\n  NavigationMenuViewportProps,\n} from './NavigationMenu';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":";;;;;;AAsBA,mBAAmB,UAAU,GAAG,YAAY,CAAC;AAC7C,iBAAiB,KAAK,GAAG,KAAK,CAAC;AAiB/B,OAAA,gGAGC,CAAC;AAmCF,6BAA6B,MAAM,UAAU,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AACpE,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,oCACE,SAAQ,IAAI,CAAC,2BAA2B,EAAE,MAAM,kCAAkC,CAAC,EACjF,iBAAiB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,OAAA,MAAM,uGAkHL,CAAC;AAWF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,uCACE,SAAQ,IAAI,CAAC,2BAA2B,EAAE,MAAM,kCAAkC,CAAC,EACjF,iBAAiB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,OAAA,MAAM,gHAiCL,CAAC;AAMF;IACE,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,GAAG,EAAE,SAAS,CAAC;IACf,kBAAkB,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,cAAc,CAAC,IAAI,IAAI,CAAC;IACxB,cAAc,CAAC,IAAI,IAAI,CAAC;IACxB,cAAc,CAAC,IAAI,IAAI,CAAC;IACxB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,aAAa,IAAI,IAAI,CAAC;CACvB;AAED,qCAAsC,SAAQ,kCAAkC;CAAG;AA0EnF,mCAAmC,MAAM,wBAAwB,CAAC,OAAO,UAAU,EAAE,CAAC,CAAC;AACvF,wCAAkC,SAAQ,2BAA2B;CAAG;AAExE,OAAA,MAAM,oHAiBL,CAAC;AAUF,yBAAyB,MAAM,UAAU,CAAC,OAAO,wBAAwB,IAAI,CAAC,CAAC;AAkB/E,8BAA8B,MAAM,wBAAwB,CAAC,OAAO,UAAU,EAAE,CAAC,CAAC;AAClF,wCAAkC,SAAQ,sBAAsB;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,OAAA,MAAM,iHA6CL,CAAC;AAUF,oCAAoC,MAAM,UAAU,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AAC9E,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,2CAAqC,SAAQ,oBAAoB;CAAG;AAEpE,OAAA,MAAM,2HAkGJ,CAAC;AAYH,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAC7E,wCAAkC,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,OAAA,MAAM,qHAoCL,CAAC;AAWF,6CAAuC,SAAQ,gCAAgC;IAC7E;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,4HAgBJ,CAAC;AAKH,0CAA2C,SAAQ,iBAAiB;CAAG;AAuEvE,2CACE,SAAQ,IAAI,CAAC,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;IACzF;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,wHAyCJ,CAAC;AA2CH,6BAA6B,MAAM,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;AAErF;IACE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,SAAS,CAAC,4BAA4B,CAAC,CAAC;IAC1D,aAAa,EAAE,MAAM,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClD,iBAAiB,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD,qBAAqB,IAAI,IAAI,CAAC;IAC9B,kBAAkB,IAAI,IAAI,CAAC;CAC5B;AACD,wCACE,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,CAAC,EAC9C,qCAAqC;CAAG;AA2I5C,4CACE,SAAQ,IAAI,CAAC,+BAA+B,EAAE,UAAU,GAAG,oBAAoB,CAAC;IAChF;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,0HAaJ,CAAC;AAOH,yCAA0C,SAAQ,iBAAiB;CAAG;AAsOtE,OAAA,MAAM,6FAAqB,CAAC;AAC5B,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,sGAAyB,CAAC;AAChC,OAAA,MAAM,mGAAyB,CAAC;AAChC,OAAA,MAAM,6GAA+B,CAAC;AACtC,OAAA,MAAM,uGAAyB,CAAC;AAChC,OAAA,MAAM,8GAAmC,CAAC;AAC1C,OAAA,MAAM,0GAA+B,CAAC;AACtC,OAAA,MAAM,4GAAiC,CAAC","sources":["packages/react/navigation-menu/src/packages/react/navigation-menu/src/NavigationMenu.tsx","packages/react/navigation-menu/src/packages/react/navigation-menu/src/index.ts","packages/react/navigation-menu/src/index.ts"],"sourcesContent":[null,null,"export {\n  createNavigationMenuScope,\n  //\n  NavigationMenu,\n  NavigationMenuSub,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  //\n  Root,\n  Sub,\n  List,\n  Item,\n  Trigger,\n  Link,\n  Indicator,\n  Content,\n  Viewport,\n} from './NavigationMenu';\nexport type {\n  NavigationMenuProps,\n  NavigationMenuSubProps,\n  NavigationMenuListProps,\n  NavigationMenuItemProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuLinkProps,\n  NavigationMenuIndicatorProps,\n  NavigationMenuContentProps,\n  NavigationMenuViewportProps,\n} from './NavigationMenu';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -71,20 +71,90 @@ const [$7f73b938b73b5118$var$createNavigationMenuContext, $7f73b938b73b5118$expo
 const [$7f73b938b73b5118$var$NavigationMenuProviderImpl, $7f73b938b73b5118$var$useNavigationMenuContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$NAVIGATION_MENU_NAME);
 const [$7f73b938b73b5118$var$ViewportContentProvider, $7f73b938b73b5118$var$useViewportContentContext] = $7f73b938b73b5118$var$createNavigationMenuContext($7f73b938b73b5118$var$NAVIGATION_MENU_NAME);
 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);
     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))({
         "aria-label": "Main",
         "data-orientation": orientation,
@@ -100,17 +170,25 @@ const $7f73b938b73b5118$export$5b2278cf1e8bcae2 = /*#__PURE__*/ $6jHCS$react.for
  * NavigationMenuSub
  * -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$SUB_NAME = 'NavigationMenuSub';
 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, {
         scope: __scopeNavigationMenu,
         isRootMenu: false,
         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))({
         "data-orientation": orientation
     }, subProps, {
@@ -121,22 +199,10 @@ const $7f73b938b73b5118$export$5958edd6c4ee7c79 = /*#__PURE__*/ $6jHCS$react.for
     displayName: $7f73b938b73b5118$var$SUB_NAME
 });
 /* -----------------------------------------------------------------------------------------------*/ 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, {
         scope: scope,
         isRootMenu: isRootMenu,
@@ -150,35 +216,12 @@ const $7f73b938b73b5118$export$5958edd6c4ee7c79 = /*#__PURE__*/ $6jHCS$react.for
         onViewportChange: setViewport,
         indicatorTrack: indicatorTrack,
         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)=>{
             setViewportContent((prevContent)=>{
                 prevContent.set(contentValue, contentData);
@@ -237,6 +280,7 @@ const $7f73b938b73b5118$export$ffdbb83a2de845c2 = /*#__PURE__*/ $6jHCS$react.for
     const triggerRef = $6jHCS$react.useRef(null);
     const focusProxyRef = $6jHCS$react.useRef(null);
     const restoreContentTabOrderRef = $6jHCS$react.useRef(()=>{});
+    const wasEscapeCloseRef = $6jHCS$react.useRef(false);
     const handleContentEntry = $6jHCS$react.useCallback((side = 'start')=>{
         if (contentRef.current) {
             restoreContentTabOrderRef.current();
@@ -256,6 +300,7 @@ const $7f73b938b73b5118$export$ffdbb83a2de845c2 = /*#__PURE__*/ $6jHCS$react.for
         triggerRef: triggerRef,
         contentRef: contentRef,
         focusProxyRef: focusProxyRef,
+        wasEscapeCloseRef: wasEscapeCloseRef,
         onEntryKeyDown: handleContentEntry,
         onFocusProxyEnter: handleContentEntry,
         onRootContentClose: handleContentExit,
@@ -278,6 +323,7 @@ const $7f73b938b73b5118$export$37fe8002734d8f2 = /*#__PURE__*/ $6jHCS$react.forw
     const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(ref, itemContext.triggerRef, forwardedRef);
     const triggerId = $7f73b938b73b5118$var$makeTriggerId(context.baseId, itemContext.value);
     const contentId = $7f73b938b73b5118$var$makeContentId(context.baseId, itemContext.value);
+    const hasPointerMoveOpenedRef = $6jHCS$react.useRef(false);
     const wasClickCloseRef = $6jHCS$react.useRef(false);
     const open = itemContext.value === context.value;
     return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$react.Fragment, null, /*#__PURE__*/ $6jHCS$react.createElement($7f73b938b73b5118$var$Collection.ItemSlot, {
@@ -296,14 +342,17 @@ const $7f73b938b73b5118$export$37fe8002734d8f2 = /*#__PURE__*/ $6jHCS$react.forw
         ref: composedRefs,
         onPointerEnter: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerEnter, ()=>{
             wasClickCloseRef.current = false;
+            itemContext.wasEscapeCloseRef.current = false;
         }),
         onPointerMove: $6jHCS$radixuiprimitive.composeEventHandlers(props.onPointerMove, $7f73b938b73b5118$var$whenMouse(()=>{
-            if (disabled || wasClickCloseRef.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;
         })),
         onClick: $6jHCS$radixuiprimitive.composeEventHandlers(props.onClick, ()=>{
             context.onItemSelect(itemContext.value);
@@ -456,6 +505,7 @@ const $7f73b938b73b5118$export$38e00e996c2f93f7 = /*#__PURE__*/ $6jHCS$react.for
         value: itemContext.value,
         triggerRef: itemContext.triggerRef,
         focusProxyRef: itemContext.focusProxyRef,
+        wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
         onContentFocusOutside: itemContext.onContentFocusOutside,
         onRootContentClose: itemContext.onRootContentClose,
         ...contentProps
@@ -466,10 +516,8 @@ const $7f73b938b73b5118$export$38e00e996c2f93f7 = /*#__PURE__*/ $6jHCS$react.for
         "data-state": $7f73b938b73b5118$var$getOpenState(open)
     }, commonProps, {
         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: {
             // Prevent interaction when animating out
             pointerEvents: !open && context.isRootMenu ? 'none' : undefined,
@@ -508,7 +556,7 @@ const $7f73b938b73b5118$export$38e00e996c2f93f7 = /*#__PURE__*/ $6jHCS$react.for
 });
 /* -----------------------------------------------------------------------------------------------*/ const $7f73b938b73b5118$var$ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
 const $7f73b938b73b5118$var$NavigationMenuContentImpl = /*#__PURE__*/ $6jHCS$react.forwardRef((props, forwardedRef)=>{
-    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , triggerRef: triggerRef , focusProxyRef: focusProxyRef , onRootContentClose: onRootContentClose , onContentFocusOutside: onContentFocusOutside , ...contentProps } = props;
+    const { __scopeNavigationMenu: __scopeNavigationMenu , value: value , triggerRef: triggerRef , focusProxyRef: focusProxyRef , wasEscapeCloseRef: wasEscapeCloseRef , onRootContentClose: onRootContentClose , onContentFocusOutside: onContentFocusOutside , ...contentProps } = props;
     const context = $7f73b938b73b5118$var$useNavigationMenuContext($7f73b938b73b5118$var$CONTENT_NAME, __scopeNavigationMenu);
     const ref = $6jHCS$react.useRef(null);
     const composedRefs = $6jHCS$radixuireactcomposerefs.useComposedRefs(ref, forwardedRef);
@@ -620,6 +668,11 @@ const $7f73b938b73b5118$var$NavigationMenuContentImpl = /*#__PURE__*/ $6jHCS$rea
                     (_focusProxyRef$curren = focusProxyRef.current) === null || _focusProxyRef$curren === void 0 || _focusProxyRef$curren.focus();
                 }
             }
+        }),
+        onEscapeKeyDown: $6jHCS$radixuiprimitive.composeEventHandlers(props.onEscapeKeyDown, (event)=>{
+            // prevent the dropdown from reopening
+            // after the escape key has been pressed
+            wasEscapeCloseRef.current = true;
         })
     })));
 });
@@ -675,10 +728,8 @@ const $7f73b938b73b5118$export$ee880b97cc6d44a5 = /*#__PURE__*/ $6jHCS$react.for
             ['--radix-navigation-menu-viewport-height']: viewportHeight,
             ...viewportImplProps.style
         },
-        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 }])=>{
         const isActive = activeContentValue === value;
         return /*#__PURE__*/ $6jHCS$react.createElement($6jHCS$radixuireactpresence.Presence, {