@base-ui/react 1.1.0 → 1.3.0

package/navigation-menu/root/NavigationMenuRoot.js

@@ -17,10 +17,25 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _NavigationMenuRootContext = require("./NavigationMenuRootContext");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _setFixedSize = require("../utils/setFixedSize");
+var _getCssDimensions = require("../../utils/getCssDimensions");
 var _reasons = require("../../utils/reasons");
+var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
+var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
 var _jsxRuntime = require("react/jsx-runtime");
 const blockedReturnFocusReasons = new Set([_reasons.REASONS.triggerHover, _reasons.REASONS.outsidePress, _reasons.REASONS.focusOut]);
+function setSharedFixedSize(popupElement, positionerElement) {
+  const {
+    width,
+    height
+  } = (0, _getCssDimensions.getCssDimensions)(popupElement);
+  if (width === 0 || height === 0) {
+    return;
+  }
+  popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${width}px`);
+  popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${height}px`);
+  positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+  positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+}
 
 /**
  * Groups all parts of the navigation menu.
@@ -40,6 +55,7 @@ const NavigationMenuRoot = exports.NavigationMenuRoot = /*#__PURE__*/React.forwa
     onOpenChangeComplete
   } = componentProps;
   const nested = (0, _floatingUiReact.useFloatingParentNodeId)() != null;
+  const parentRootContext = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)(true);
   const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: valueParam,
     default: defaultValue,
@@ -78,8 +94,7 @@ const NavigationMenuRoot = exports.NavigationMenuRoot = /*#__PURE__*/React.forwa
       setActivationDirection(null);
       setFloatingRootContext(undefined);
       if (positionerElement && popupElement) {
-        (0, _setFixedSize.setFixedSize)(popupElement, 'popup');
-        (0, _setFixedSize.setFixedSize)(positionerElement, 'positioner');
+        setSharedFixedSize(popupElement, positionerElement);
       }
     }
     if (nextValue !== value) {
@@ -89,6 +104,9 @@ const NavigationMenuRoot = exports.NavigationMenuRoot = /*#__PURE__*/React.forwa
       return;
     }
     setValueUnwrapped(nextValue);
+    if (nested && !nextValue && eventDetails.reason === _reasons.REASONS.linkPress && parentRootContext) {
+      parentRootContext.setValue(null, eventDetails);
+    }
   });
   const handleUnmount = (0, _useStableCallback.useStableCallback)(() => {
     const doc = (0, _owner.ownerDocument)(rootRef.current);
@@ -202,19 +220,20 @@ function TreeContext(props) {
   const {
     open
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     nested
-  }), [open, nested]);
+  };
   const element = (0, _useRenderElement.useRenderElement)(nested ? 'div' : 'nav', props.componentProps, {
     state,
     ref: [props.forwardedRef, rootRef],
-    props: [{
-      'aria-orientation': orientation
-    }, elementProps]
+    props: elementProps
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuRootContext.NavigationMenuTreeContext.Provider, {
     value: nodeId,
-    children: element
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingNode, {
+      id: nodeId,
+      children: element
+    })
   });
 }

package/navigation-menu/root/NavigationMenuRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/navigation-menu/trigger/NavigationMenuTrigger.d.ts

@@ -14,7 +14,7 @@ export interface NavigationMenuTriggerState {
    */
   open: boolean;
 }
-export interface NavigationMenuTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', NavigationMenuTrigger.State> {}
+export interface NavigationMenuTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', NavigationMenuTriggerState> {}
 export declare namespace NavigationMenuTrigger {
   type State = NavigationMenuTriggerState;
   type Props = NavigationMenuTriggerProps;

package/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -8,13 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavigationMenuTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _dom = require("@floating-ui/utils/dom");
 var _tabbable = require("tabbable");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _owner = require("@base-ui/utils/owner");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _floatingUiReact = require("../../floating-ui-react");
+var _useHoverInteractionSharedState = require("../../floating-ui-react/hooks/useHoverInteractionSharedState");
 var _utils = require("../../floating-ui-react/utils");
 var _NavigationMenuItemContext = require("../item/NavigationMenuItemContext");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
@@ -23,15 +27,16 @@ var _reasons = require("../../utils/reasons");
 var _constants = require("../../utils/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
 var _popupStateMapping = require("../../utils/popupStateMapping");
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _isOutsideMenuEvent = require("../utils/isOutsideMenuEvent");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
-var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
-var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
 var _CompositeItem = require("../../composite/item/CompositeItem");
 var _useButton = require("../../use-button");
+var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
 var _getCssDimensions = require("../../utils/getCssDimensions");
 var _constants2 = require("../utils/constants");
 var _NavigationMenuDismissContext = require("../list/NavigationMenuDismissContext");
+var _NavigationMenuPopupCssVars = require("../popup/NavigationMenuPopupCssVars");
+var _NavigationMenuPositionerCssVars = require("../positioner/NavigationMenuPositionerCssVars");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_SIZE = {
   width: 0,
@@ -63,12 +68,14 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     setFloatingRootContext,
     popupElement,
     viewportElement,
+    transitionStatus,
     rootRef,
     beforeOutsideRef,
     afterOutsideRef,
     afterInsideRef,
     beforeInsideRef,
     prevTriggerElementRef,
+    currentContentRef,
     delay,
     closeDelay,
     orientation,
@@ -83,18 +90,27 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
   const dismissProps = (0, _NavigationMenuDismissContext.useNavigationMenuDismissContext)();
   const stickIfOpenTimeout = (0, _useTimeout.useTimeout)();
   const focusFrame = (0, _useAnimationFrame.useAnimationFrame)();
-  const sizeFrame1 = (0, _useAnimationFrame.useAnimationFrame)();
-  const sizeFrame2 = (0, _useAnimationFrame.useAnimationFrame)();
+  const mutationFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const resizeFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const sizeFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [stickIfOpen, setStickIfOpen] = React.useState(true);
   const [pointerType, setPointerType] = React.useState('');
+  const triggerElementRef = React.useRef(null);
   const allowFocusRef = React.useRef(false);
   const prevSizeRef = React.useRef(DEFAULT_SIZE);
   const animationAbortControllerRef = React.useRef(null);
+  const skipAutoSizeSyncRef = React.useRef(false);
   const isActiveItem = open && value === itemValue;
   const isActiveItemRef = (0, _useValueAsRef.useValueAsRef)(isActiveItem);
   const interactionsEnabled = positionerElement ? true : !value;
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement);
+  const hoverFloatingElement = positionerElement || viewportElement;
+  const hoverInteractionsEnabled = hoverFloatingElement ? true : !value;
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, false, false);
+  const handleTriggerElement = React.useCallback(element => {
+    triggerElementRef.current = element;
+    setTriggerElement(element);
+  }, []);
   React.useEffect(() => {
     animationAbortControllerRef.current?.abort();
   }, [isActiveItem]);
@@ -105,7 +121,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, 'auto');
     popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, 'auto');
   }
-  const handleValueChange = (0, _useStableCallback.useStableCallback)((currentWidth, currentHeight) => {
+  function clearFixedSizes() {
     if (!popupElement || !positionerElement) {
       return;
     }
@@ -113,6 +129,28 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     popupElement.style.removeProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight);
     positionerElement.style.removeProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth);
     positionerElement.style.removeProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight);
+  }
+  function setSharedFixedSizes(width, height) {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${width}px`);
+    popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${height}px`);
+    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+  }
+  function scheduleAutoSizeReset() {
+    animationAbortControllerRef.current = new AbortController();
+    runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
+  }
+  const handleValueChange = (0, _useStableCallback.useStableCallback)((currentWidth, currentHeight, options = {}) => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    const {
+      syncPositioner = false
+    } = options;
+    clearFixedSizes();
     const {
       width,
       height
@@ -125,24 +163,106 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     }
     popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
     popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
-    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
-    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
-    sizeFrame1.request(() => {
+    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${syncPositioner ? currentWidth : measuredWidth}px`);
+    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${syncPositioner ? currentHeight : measuredHeight}px`);
+    sizeFrame.request(() => {
       popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
       popupElement.style.setProperty(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
-      sizeFrame2.request(() => {
-        animationAbortControllerRef.current = new AbortController();
-        runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
+      if (syncPositioner) {
+        positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
+        positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
+      }
+      scheduleAutoSizeReset();
+    });
+  });
+  const handleInterruptedMutationResize = (0, _useStableCallback.useStableCallback)((currentWidth, currentHeight) => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    sizeFrame.cancel();
+    mutationFrame.cancel();
+    animationAbortControllerRef.current?.abort();
+    animationAbortControllerRef.current = null;
+    if (currentWidth === 0 || currentHeight === 0) {
+      return;
+    }
+    setSharedFixedSizes(currentWidth, currentHeight);
+    mutationFrame.request(() => {
+      mutationFrame.request(() => {
+        clearFixedSizes();
+        const {
+          width,
+          height
+        } = (0, _getCssDimensions.getCssDimensions)(popupElement);
+        const measuredWidth = width || currentWidth || prevSizeRef.current.width;
+        const measuredHeight = height || currentHeight || prevSizeRef.current.height;
+        setSharedFixedSizes(currentWidth, currentHeight);
+        sizeFrame.request(() => {
+          setSharedFixedSizes(measuredWidth, measuredHeight);
+          scheduleAutoSizeReset();
+        });
       });
     });
   });
+  const syncCurrentSize = (0, _useStableCallback.useStableCallback)(() => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    sizeFrame.cancel();
+    animationAbortControllerRef.current?.abort();
+    animationAbortControllerRef.current = null;
+    clearFixedSizes();
+    const {
+      width,
+      height
+    } = (0, _getCssDimensions.getCssDimensions)(popupElement);
+    if (width === 0 || height === 0) {
+      return;
+    }
+    prevSizeRef.current = {
+      width,
+      height
+    };
+    setAutoSizes();
+    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+    positionerElement.style.setProperty(_NavigationMenuPositionerCssVars.NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+  });
+  const getMutationBaseline = (0, _useStableCallback.useStableCallback)(() => {
+    if (!popupElement) {
+      return {
+        size: prevSizeRef.current,
+        syncPositioner: false
+      };
+    }
+    const popupWidth = popupElement.style.getPropertyValue(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupWidth);
+    const popupHeight = popupElement.style.getPropertyValue(_NavigationMenuPopupCssVars.NavigationMenuPopupCssVars.popupHeight);
+    const isResizing = popupWidth !== '' && popupWidth !== 'auto' && popupHeight !== '' && popupHeight !== 'auto';
+    if (!isResizing) {
+      return {
+        size: prevSizeRef.current,
+        syncPositioner: false
+      };
+    }
+    return {
+      size: {
+        width: popupElement.offsetWidth || prevSizeRef.current.width,
+        height: popupElement.offsetHeight || prevSizeRef.current.height
+      },
+      syncPositioner: true
+    };
+  });
   React.useEffect(() => {
     if (!open) {
       stickIfOpenTimeout.clear();
-      sizeFrame1.cancel();
-      sizeFrame2.cancel();
+      mutationFrame.cancel();
+      resizeFrame.cancel();
+      sizeFrame.cancel();
+      animationAbortControllerRef.current?.abort();
+      animationAbortControllerRef.current = null;
+      skipAutoSizeSyncRef.current = false;
+      setPointerType('');
     }
-  }, [stickIfOpenTimeout, open, sizeFrame1, sizeFrame2]);
+  }, [stickIfOpenTimeout, open, mutationFrame, resizeFrame, sizeFrame]);
   React.useEffect(() => {
     if (!mounted) {
       prevSizeRef.current = DEFAULT_SIZE;
@@ -153,7 +273,6 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       return undefined;
     }
     const resizeObserver = new ResizeObserver(() => {
-      // Using `getCssDimensions` here causes issues due to fractional values.
       prevSizeRef.current = {
         width: popupElement.offsetWidth,
         height: popupElement.offsetHeight
@@ -165,14 +284,41 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     };
   }, [popupElement]);
   React.useEffect(() => {
-    if (!popupElement || !isActiveItem || typeof MutationObserver !== 'function') {
+    if (!open || !isActiveItem || !popupElement || !positionerElement) {
+      return undefined;
+    }
+    const win = (0, _owner.ownerWindow)(positionerElement);
+    function handleResize() {
+      resizeFrame.cancel();
+      resizeFrame.request(syncCurrentSize);
+    }
+    win.addEventListener('resize', handleResize);
+    return () => {
+      resizeFrame.cancel();
+      win.removeEventListener('resize', handleResize);
+    };
+  }, [open, isActiveItem, popupElement, positionerElement, resizeFrame, syncCurrentSize]);
+  React.useEffect(() => {
+    const observedElement = currentContentRef.current;
+    if (!observedElement || !popupElement || !isActiveItem || typeof MutationObserver !== 'function') {
       return undefined;
     }
     const mutationObserver = new MutationObserver(() => {
-      animationAbortControllerRef.current?.abort();
-      handleValueChange(prevSizeRef.current.width, prevSizeRef.current.height);
+      if (transitionStatus === 'starting' || popupElement.hasAttribute(_stateAttributesMapping.TransitionStatusDataAttributes.startingStyle)) {
+        syncCurrentSize();
+        return;
+      }
+      const {
+        size,
+        syncPositioner
+      } = getMutationBaseline();
+      if (syncPositioner) {
+        handleInterruptedMutationResize(size.width, size.height);
+        return;
+      }
+      handleValueChange(size.width, size.height);
     });
-    mutationObserver.observe(popupElement, {
+    mutationObserver.observe(observedElement, {
       childList: true,
       subtree: true,
       characterData: true
@@ -180,7 +326,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     return () => {
       mutationObserver.disconnect();
     };
-  }, [popupElement, positionerElement, isActiveItem, handleValueChange]);
+  }, [currentContentRef, popupElement, isActiveItem, transitionStatus, getMutationBaseline, handleInterruptedMutationResize, handleValueChange, syncCurrentSize]);
   React.useEffect(() => {
     if (isActiveItem && open && popupElement && allowFocusRef.current) {
       allowFocusRef.current = false;
@@ -191,12 +337,26 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     return () => {
       focusFrame.cancel();
     };
-  }, [beforeOutsideRef, focusFrame, handleValueChange, isActiveItem, open, popupElement]);
+  }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (isActiveItemRef.current && open && popupElement) {
+      if (transitionStatus === 'starting') {
+        const hasNestedMenu = currentContentRef.current?.querySelector('[data-nested]') != null;
+        if (hasNestedMenu) {
+          sizeFrame.request(syncCurrentSize);
+          return () => {
+            sizeFrame.cancel();
+          };
+        }
+      }
+      if (skipAutoSizeSyncRef.current) {
+        skipAutoSizeSyncRef.current = false;
+        return undefined;
+      }
       handleValueChange(0, 0);
     }
-  }, [isActiveItemRef, open, popupElement, handleValueChange]);
+    return undefined;
+  }, [currentContentRef, handleValueChange, isActiveItemRef, open, popupElement, sizeFrame, syncCurrentSize, transitionStatus]);
   function handleOpenChange(nextOpen, eventDetails) {
     const isHover = eventDetails.reason === _reasons.REASONS.triggerHover;
     if (!interactionsEnabled) {
@@ -236,33 +396,61 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     onOpenChange: handleOpenChange,
     elements: {
       reference: triggerElement,
-      floating: positionerElement || viewportElement
+      floating: hoverFloatingElement
+    }
+  });
+  const hoverInteractionState = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(context);
+  React.useEffect(() => {
+    if (!open) {
+      context.context.dataRef.current.openEvent = undefined;
+      hoverInteractionState.pointerType = undefined;
+      hoverInteractionState.interactedInside = false;
+      hoverInteractionState.restTimeoutPending = false;
+      hoverInteractionState.openChangeTimeout.clear();
+      hoverInteractionState.restTimeout.clear();
+      (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(hoverInteractionState);
+    }
+  }, [context, hoverInteractionState, open]);
+  const getInlineHandleCloseContext = (0, _useStableCallback.useStableCallback)(() => {
+    if (!nested || positionerElement || !triggerElementRef.current || !hoverFloatingElement) {
+      return null;
     }
+    return getHandleCloseContext(triggerElementRef.current, hoverFloatingElement, nodeId);
   });
-  const hover = (0, _floatingUiReact.useHover)(context, {
+  function getScope() {
+    return triggerElementRef.current?.closest('ul') ?? null;
+  }
+  const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(context, {
+    enabled: hoverInteractionsEnabled,
     move: false,
     handleClose: (0, _floatingUiReact.safePolygon)({
-      blockPointerEvents: pointerType !== 'touch'
+      blockPointerEvents: pointerType !== 'touch' && (!_detectBrowser.isWebKit || nested),
+      getScope
     }),
     restMs: mounted && positionerElement ? 0 : delay,
     delay: {
       close: closeDelay
-    }
+    },
+    triggerElementRef,
+    getHandleCloseContext: getInlineHandleCloseContext
   });
+  const hover = React.useMemo(() => hoverProps ? {
+    reference: hoverProps
+  } : undefined, [hoverProps]);
   const click = (0, _floatingUiReact.useClick)(context, {
     enabled: interactionsEnabled,
     stickIfOpen,
     toggle: isActiveItem
   });
+  const {
+    getReferenceProps
+  } = (0, _floatingUiReact.useInteractions)([hover, click]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (isActiveItem) {
       setFloatingRootContext(context);
       prevTriggerElementRef.current = triggerElement;
     }
   }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
-  const {
-    getReferenceProps
-  } = (0, _floatingUiReact.useInteractions)([hover, click]);
   function handleActivation(event) {
     ReactDOM.flushSync(() => {
       const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
@@ -280,7 +468,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       // Reset the `openEvent` to `undefined` when the active item changes so that a
       // `click` -> `hover` on new trigger -> `hover` back to old trigger doesn't unexpectedly
       // cause the popup to remain stuck open when leaving the old trigger.
-      if (event.type !== 'click') {
+      if (event.type !== 'click' && value != null) {
         context.context.dataRef.current.openEvent = undefined;
       }
       if (pointerType === 'touch' && event.type !== 'click') {
@@ -289,11 +477,20 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       if (value != null) {
         setValue(itemValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(event.type === 'mouseenter' ? _reasons.REASONS.triggerHover : _reasons.REASONS.triggerPress, event.nativeEvent));
       }
+      if (event.type === 'mouseenter' && nested && !positionerElement && pointerType !== 'touch' && hoverFloatingElement && (0, _dom.isHTMLElement)(event.currentTarget)) {
+        const scopeElement = getScope();
+        if (!scopeElement) {
+          return;
+        }
+        (0, _useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(hoverInteractionState, {
+          scopeElement,
+          referenceElement: event.currentTarget,
+          floatingElement: hoverFloatingElement
+        });
+      }
     });
   }
   const handleOpenEvent = (0, _useStableCallback.useStableCallback)(event => {
-    // For nested scenarios without positioner/popup, we can still open the menu
-    // but we can't do size calculations
     if (!popupElement || !positionerElement) {
       handleActivation(event);
       return;
@@ -302,12 +499,16 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       width,
       height
     } = (0, _getCssDimensions.getCssDimensions)(popupElement);
+    const shouldSkipAutoSizeSync = value != null && value !== itemValue && (event.type === 'click' || pointerType !== 'touch');
     handleActivation(event);
+    if (shouldSkipAutoSizeSync) {
+      skipAutoSizeSyncRef.current = true;
+    }
     handleValueChange(width, height);
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open: isActiveItem
-  }), [isActiveItem]);
+  };
   function handleSetPointerType(event) {
     setPointerType(event.pointerType);
   }
@@ -368,7 +569,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     focusableWhenDisabled: true,
     native: nativeButton
   });
-  const referenceElement = positionerElement || viewportElement;
+  const referenceElement = hoverFloatingElement;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
       tag: "button",
@@ -376,7 +577,7 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
       className: className,
       state: state,
       stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
-      refs: [forwardedRef, setTriggerElement, buttonRef],
+      refs: [forwardedRef, handleTriggerElement, buttonRef],
       props: [getReferenceProps, dismissProps?.reference || _constants.EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
     }), isActiveItem && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
@@ -399,9 +600,12 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
             const elementToFocus = afterInsideRef.current && (0, _tabbable.isTabbable)(afterInsideRef.current) ? afterInsideRef.current : triggerElement;
             elementToFocus?.focus();
           } else {
-            const nextTabbable = (0, _utils.getNextTabbable)(triggerElement);
+            let nextTabbable = (0, _utils.getNextTabbable)(triggerElement);
+            if (nested && !positionerElement && referenceElement && nextTabbable && (0, _utils.contains)(referenceElement, nextTabbable)) {
+              nextTabbable = (0, _utils.getTabbableAfterElement)(afterInsideRef.current);
+            }
             nextTabbable?.focus();
-            if (!(0, _utils.contains)(rootRef.current, nextTabbable)) {
+            if ((!nested || positionerElement) && !(0, _utils.contains)(rootRef.current, nextTabbable)) {
               setValue(null, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));
             }
           }
@@ -410,4 +614,28 @@ const NavigationMenuTrigger = exports.NavigationMenuTrigger = /*#__PURE__*/React
     })]
   });
 });
-if (process.env.NODE_ENV !== "production") NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+if (process.env.NODE_ENV !== "production") NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+function getPlacementFromElements(domReferenceElement, floatingElement) {
+  const referenceRect = domReferenceElement.getBoundingClientRect();
+  const floatingRect = floatingElement.getBoundingClientRect();
+  const referenceCenterX = referenceRect.left + referenceRect.width / 2;
+  const referenceCenterY = referenceRect.top + referenceRect.height / 2;
+  const floatingCenterX = floatingRect.left + floatingRect.width / 2;
+  const floatingCenterY = floatingRect.top + floatingRect.height / 2;
+  const deltaX = floatingCenterX - referenceCenterX;
+  const deltaY = floatingCenterY - referenceCenterY;
+  if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+    return deltaX >= 0 ? 'right' : 'left';
+  }
+  return deltaY >= 0 ? 'bottom' : 'top';
+}
+function getHandleCloseContext(domReferenceElement, floatingElement, nodeId) {
+  return {
+    placement: getPlacementFromElements(domReferenceElement, floatingElement),
+    elements: {
+      domReference: domReferenceElement,
+      floating: floatingElement
+    },
+    nodeId
+  };
+}

package/navigation-menu/utils/isOutsideMenuEvent.d.ts

@@ -5,7 +5,7 @@ interface Targets {
 }
 interface Params {
   popupElement: HTMLElement | null;
-  viewportElement?: HTMLElement | null;
+  viewportElement?: HTMLElement | null | undefined;
   rootRef: React.RefObject<HTMLDivElement | null>;
   tree: FloatingTreeType | null;
   nodeId: string | undefined;

package/navigation-menu/viewport/NavigationMenuViewport.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuViewportState {}
-export interface NavigationMenuViewportProps extends BaseUIComponentProps<'div', NavigationMenuViewport.State> {}
+export interface NavigationMenuViewportProps extends BaseUIComponentProps<'div', NavigationMenuViewportState> {}
 export declare namespace NavigationMenuViewport {
   type State = NavigationMenuViewportState;
   type Props = NavigationMenuViewportProps;

package/navigation-menu/viewport/NavigationMenuViewport.js

@@ -82,7 +82,8 @@ const NavigationMenuViewport = exports.NavigationMenuViewport = /*#__PURE__*/Rea
     viewportInert,
     setViewportInert
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const hasPositioner = Boolean((0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true));
+  const positioning = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)(true);
+  const hasPositioner = Boolean(positioning);
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (domReference) {

package/number-field/decrement/NumberFieldDecrement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A stepper button that decreases the field value when clicked.
  * Renders an `<button>` element.
@@ -8,8 +8,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<Omit<NumberFieldDecrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface NumberFieldDecrementState extends NumberFieldRoot.State {}
-export interface NumberFieldDecrementProps extends NativeButtonProps, BaseUIComponentProps<'button', NumberFieldDecrement.State> {}
+export interface NumberFieldDecrementState extends NumberFieldRootState {}
+export interface NumberFieldDecrementProps extends NativeButtonProps, BaseUIComponentProps<'button', NumberFieldDecrementState> {}
 export declare namespace NumberFieldDecrement {
   type State = NumberFieldDecrementState;
   type Props = NumberFieldDecrementProps;