@base-ui/react 1.2.0 → 1.4.0

package/esm/navigation-menu/trigger/NavigationMenuTrigger.js

@@ -2,12 +2,17 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { isTabbable } from 'tabbable';
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { ownerWindow } from '@base-ui/utils/owner';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHover, useInteractions } from "../../floating-ui-react/index.js";
-import { contains, getNextTabbable, getPreviousTabbable, isOutsideEvent, stopEvent } from "../../floating-ui-react/utils.js";
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { safePolygon, useClick, useFloatingRootContext, useFloatingTree, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
+import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "../../floating-ui-react/hooks/useHoverInteractionSharedState.js";
+import { contains, getTabbableAfterElement, getNextTabbable, getPreviousTabbable, isOutsideEvent, stopEvent } from "../../floating-ui-react/utils.js";
 import { useNavigationMenuItemContext } from "../item/NavigationMenuItemContext.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -15,11 +20,21 @@ import { REASONS } from "../../utils/reasons.js";
 import { EMPTY_ARRAY, ownerVisuallyHidden, PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
 import { isOutsideMenuEvent } from "../utils/isOutsideMenuEvent.js";
 import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { useButton } from "../../use-button/index.js";
+import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { getCssDimensions } from "../../utils/getCssDimensions.js";
 import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from "../utils/constants.js";
 import { useNavigationMenuDismissContext } from "../list/NavigationMenuDismissContext.js";
+import { NavigationMenuPopupCssVars } from "../popup/NavigationMenuPopupCssVars.js";
+import { NavigationMenuPositionerCssVars } from "../positioner/NavigationMenuPositionerCssVars.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_SIZE = {
+  width: 0,
+  height: 0
+};
 
 /**
  * Opens the navigation menu popup when hovered or clicked, revealing the
@@ -28,13 +43,13 @@ import { useNavigationMenuDismissContext } from "../list/NavigationMenuDismissCo
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function NavigationMenuTrigger(componentProps, forwardedRef) {
   const {
     className,
     render,
     nativeButton = true,
     disabled,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -47,12 +62,15 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     setFloatingRootContext,
     popupElement,
     viewportElement,
+    transitionStatus,
     rootRef,
     beforeOutsideRef,
     afterOutsideRef,
     afterInsideRef,
     beforeInsideRef,
     prevTriggerElementRef,
+    popupAutoSizeResetRef,
+    currentContentRef,
     delay,
     closeDelay,
     orientation,
@@ -67,17 +85,256 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
   const dismissProps = useNavigationMenuDismissContext();
   const stickIfOpenTimeout = useTimeout();
   const focusFrame = useAnimationFrame();
+  const mutationFrame = useAnimationFrame();
+  const resizeFrame = useAnimationFrame();
+  const sizeFrame = 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 skipAutoSizeSyncRef = React.useRef(false);
   const isActiveItem = open && value === itemValue;
+  const isActiveItemRef = useValueAsRef(isActiveItem);
   const interactionsEnabled = positionerElement ? true : !value;
+  const hoverFloatingElement = positionerElement || viewportElement;
+  const hoverInteractionsEnabled = hoverFloatingElement ? true : !value;
+  const runOnceAnimationsFinish = useAnimationsFinished(popupElement, false, false);
+  const handleTriggerElement = React.useCallback(element => {
+    triggerElementRef.current = element;
+    setTriggerElement(element);
+  }, []);
+  const cancelAutoSizeReset = useStableCallback((force = false) => {
+    if (!force && popupAutoSizeResetRef.current.owner !== itemValue) {
+      return;
+    }
+    popupAutoSizeResetRef.current.abortController?.abort();
+    popupAutoSizeResetRef.current.abortController = null;
+    popupAutoSizeResetRef.current.owner = null;
+  });
+  React.useEffect(cancelAutoSizeReset, [isActiveItem, cancelAutoSizeReset]);
+  function setAutoSizes() {
+    if (!popupElement) {
+      return;
+    }
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, 'auto');
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, 'auto');
+  }
+  function clearFixedSizes() {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);
+    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);
+    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);
+    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);
+  }
+  function setSharedFixedSizes(width, height) {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${width}px`);
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${height}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+  }
+  function scheduleAutoSizeReset() {
+    cancelAutoSizeReset(true);
+    const abortController = new AbortController();
+    popupAutoSizeResetRef.current.abortController = abortController;
+    popupAutoSizeResetRef.current.owner = itemValue;
+    runOnceAnimationsFinish(() => {
+      if (popupAutoSizeResetRef.current.abortController !== abortController || popupAutoSizeResetRef.current.owner !== itemValue) {
+        return;
+      }
+      popupAutoSizeResetRef.current.abortController = null;
+      popupAutoSizeResetRef.current.owner = null;
+      setAutoSizes();
+    }, abortController.signal);
+  }
+  const handleValueChange = useStableCallback((currentWidth, currentHeight, options = {}) => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    cancelAutoSizeReset(true);
+    const {
+      syncPositioner = false
+    } = options;
+    clearFixedSizes();
+    const {
+      width,
+      height
+    } = getCssDimensions(popupElement);
+    const measuredWidth = width || prevSizeRef.current.width;
+    const measuredHeight = height || prevSizeRef.current.height;
+    if (currentHeight === 0 || currentWidth === 0) {
+      currentWidth = measuredWidth;
+      currentHeight = measuredHeight;
+    }
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
+    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${syncPositioner ? currentWidth : measuredWidth}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${syncPositioner ? currentHeight : measuredHeight}px`);
+    sizeFrame.request(() => {
+      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
+      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${measuredHeight}px`);
+      if (syncPositioner) {
+        positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${measuredWidth}px`);
+        positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${measuredHeight}px`);
+      }
+      scheduleAutoSizeReset();
+    });
+  });
+  const handleInterruptedMutationResize = useStableCallback((currentWidth, currentHeight) => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    sizeFrame.cancel();
+    mutationFrame.cancel();
+    cancelAutoSizeReset(true);
+    if (currentWidth === 0 || currentHeight === 0) {
+      return;
+    }
+    setSharedFixedSizes(currentWidth, currentHeight);
+    mutationFrame.request(() => {
+      mutationFrame.request(() => {
+        clearFixedSizes();
+        const {
+          width,
+          height
+        } = 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 = useStableCallback(() => {
+    if (!popupElement || !positionerElement) {
+      return;
+    }
+    sizeFrame.cancel();
+    cancelAutoSizeReset(true);
+    clearFixedSizes();
+    const {
+      width,
+      height
+    } = getCssDimensions(popupElement);
+    if (width === 0 || height === 0) {
+      return;
+    }
+    prevSizeRef.current = {
+      width,
+      height
+    };
+    setAutoSizes();
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerWidth, `${width}px`);
+    positionerElement.style.setProperty(NavigationMenuPositionerCssVars.positionerHeight, `${height}px`);
+  });
+  const getMutationBaseline = useStableCallback(() => {
+    if (!popupElement) {
+      return {
+        size: prevSizeRef.current,
+        syncPositioner: false
+      };
+    }
+    const popupWidth = popupElement.style.getPropertyValue(NavigationMenuPopupCssVars.popupWidth);
+    const popupHeight = popupElement.style.getPropertyValue(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();
+      mutationFrame.cancel();
+      resizeFrame.cancel();
+      sizeFrame.cancel();
+      cancelAutoSizeReset(true);
+      skipAutoSizeSyncRef.current = false;
+      setPointerType('');
+    }
+  }, [stickIfOpenTimeout, open, mutationFrame, resizeFrame, sizeFrame, cancelAutoSizeReset]);
+  React.useEffect(() => {
+    if (!mounted) {
+      prevSizeRef.current = DEFAULT_SIZE;
+    }
+  }, [mounted]);
+  React.useEffect(() => {
+    if (!popupElement || typeof ResizeObserver !== 'function') {
+      return undefined;
     }
-  }, [stickIfOpenTimeout, open]);
+    const resizeObserver = new ResizeObserver(() => {
+      prevSizeRef.current = {
+        width: popupElement.offsetWidth,
+        height: popupElement.offsetHeight
+      };
+    });
+    resizeObserver.observe(popupElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [popupElement]);
+  React.useEffect(() => {
+    if (!open || !isActiveItem || !popupElement || !positionerElement) {
+      return undefined;
+    }
+    const win = ownerWindow(positionerElement);
+    function handleResize() {
+      resizeFrame.cancel();
+      resizeFrame.request(syncCurrentSize);
+    }
+    const unsubscribe = addEventListener(win, 'resize', handleResize);
+    return () => {
+      resizeFrame.cancel();
+      unsubscribe();
+    };
+  }, [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(() => {
+      if (transitionStatus === 'starting' || popupElement.hasAttribute(TransitionStatusDataAttributes.startingStyle)) {
+        syncCurrentSize();
+        return;
+      }
+      const {
+        size,
+        syncPositioner
+      } = getMutationBaseline();
+      if (syncPositioner) {
+        handleInterruptedMutationResize(size.width, size.height);
+        return;
+      }
+      handleValueChange(size.width, size.height);
+    });
+    mutationObserver.observe(observedElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [currentContentRef, popupElement, isActiveItem, transitionStatus, getMutationBaseline, handleInterruptedMutationResize, handleValueChange, syncCurrentSize]);
   React.useEffect(() => {
     if (isActiveItem && open && popupElement && allowFocusRef.current) {
       allowFocusRef.current = false;
@@ -89,6 +346,29 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       focusFrame.cancel();
     };
   }, [beforeOutsideRef, focusFrame, isActiveItem, open, popupElement]);
+  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;
+      }
+      const {
+        width,
+        height
+      } = getCssDimensions(popupElement);
+      handleValueChange(width, height);
+    }
+    return undefined;
+  }, [currentContentRef, handleValueChange, isActiveItemRef, open, popupElement, sizeFrame, syncCurrentSize, transitionStatus]);
   function handleOpenChange(nextOpen, eventDetails) {
     const isHover = eventDetails.reason === REASONS.triggerHover;
     if (!interactionsEnabled) {
@@ -128,35 +408,68 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     onOpenChange: handleOpenChange,
     elements: {
       reference: triggerElement,
-      floating: positionerElement || viewportElement
+      floating: hoverFloatingElement
     }
   });
-  const hover = useHover(context, {
+  const hoverInteractionState = useHoverInteractionSharedState(context);
+  const shouldBlockSafePolygonPointerEvents = pointerType !== 'touch';
+  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();
+      clearSafePolygonPointerEventsMutation(hoverInteractionState);
+    }
+  }, [context, hoverInteractionState, open]);
+  const getInlineHandleCloseContext = useStableCallback(() => {
+    if (!nested || positionerElement || !triggerElementRef.current || !hoverFloatingElement) {
+      return null;
+    }
+    return getHandleCloseContext(triggerElementRef.current, hoverFloatingElement, nodeId);
+  });
+  function getScope() {
+    if (!nested || !positionerElement) {
+      return triggerElementRef.current?.closest('ul') ?? null;
+    }
+    return null;
+  }
+  const hoverProps = useHoverReferenceInteraction(context, {
+    enabled: hoverInteractionsEnabled,
     move: false,
     handleClose: safePolygon({
-      blockPointerEvents: pointerType !== 'touch'
+      blockPointerEvents: shouldBlockSafePolygonPointerEvents,
+      getScope
     }),
     restMs: mounted && positionerElement ? 0 : delay,
     delay: {
       close: closeDelay
-    }
+    },
+    triggerElementRef,
+    getHandleCloseContext: getInlineHandleCloseContext
   });
+  const hover = React.useMemo(() => hoverProps ? {
+    reference: hoverProps
+  } : undefined, [hoverProps]);
   const click = useClick(context, {
     enabled: interactionsEnabled,
     stickIfOpen,
     toggle: isActiveItem
   });
+  const {
+    getReferenceProps
+  } = useInteractions([hover, click]);
   useIsoLayoutEffect(() => {
     if (isActiveItem) {
       setFloatingRootContext(context);
       prevTriggerElementRef.current = triggerElement;
     }
   }, [isActiveItem, context, setFloatingRootContext, prevTriggerElementRef, triggerElement]);
-  const {
-    getReferenceProps
-  } = useInteractions([hover, click]);
   function handleActivation(event) {
     ReactDOM.flushSync(() => {
+      const currentTarget = isHTMLElement(event.currentTarget) ? event.currentTarget : null;
       const prevTriggerRect = prevTriggerElementRef.current?.getBoundingClientRect();
       if (mounted && prevTriggerRect && triggerElement) {
         const nextTriggerRect = triggerElement.getBoundingClientRect();
@@ -172,7 +485,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       // 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') {
@@ -181,20 +494,55 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       if (value != null) {
         setValue(itemValue, createChangeEventDetails(event.type === 'mouseenter' ? REASONS.triggerHover : REASONS.triggerPress, event.nativeEvent));
       }
+      if (event.type === 'mouseenter' && shouldBlockSafePolygonPointerEvents && (!nested || !positionerElement) && hoverFloatingElement && currentTarget) {
+        const applyPointerEventsMutation = () => {
+          const scopeElement = getScope() ?? currentTarget.ownerDocument.body;
+          applySafePolygonPointerEventsMutation(hoverInteractionState, {
+            scopeElement,
+            referenceElement: currentTarget,
+            floatingElement: hoverFloatingElement
+          });
+        };
+        if (value != null && value !== itemValue) {
+          queueMicrotask(applyPointerEventsMutation);
+        } else {
+          applyPointerEventsMutation();
+        }
+      }
     });
   }
+  const handleOpenEvent = useStableCallback(event => {
+    if (!popupElement || !positionerElement) {
+      handleActivation(event);
+      return;
+    }
+    const {
+      width,
+      height
+    } = 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 = {
     open: isActiveItem
   };
   function handleSetPointerType(event) {
     setPointerType(event.pointerType);
   }
+  function handleTriggerPointerDown(event) {
+    handleSetPointerType(event);
+    clearSafePolygonPointerEventsMutation(hoverInteractionState);
+  }
   const defaultProps = {
     tabIndex: 0,
-    onMouseEnter: handleActivation,
-    onClick: handleActivation,
+    onMouseEnter: handleOpenEvent,
+    onClick: handleOpenEvent,
     onPointerEnter: handleSetPointerType,
-    onPointerDown: handleSetPointerType,
+    onPointerDown: handleTriggerPointerDown,
     'aria-expanded': isActiveItem,
     'aria-controls': isActiveItem ? popupElement?.id : undefined,
     [NAVIGATION_MENU_TRIGGER_IDENTIFIER]: '',
@@ -220,7 +568,7 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
       const openVertical = orientation === 'vertical' && event.key === 'ArrowRight';
       if (openHorizontal || openVertical) {
         setValue(itemValue, createChangeEventDetails(REASONS.listNavigation, event.nativeEvent));
-        handleActivation(event);
+        handleOpenEvent(event);
         stopEvent(event);
       }
     },
@@ -246,15 +594,16 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     focusableWhenDisabled: true,
     native: nativeButton
   });
-  const referenceElement = positionerElement || viewportElement;
+  const referenceElement = hoverFloatingElement;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(CompositeItem, {
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       stateAttributesMapping: pressableTriggerOpenStateMapping,
-      refs: [forwardedRef, setTriggerElement, buttonRef],
+      refs: [forwardedRef, handleTriggerElement, buttonRef],
       props: [getReferenceProps, dismissProps?.reference || EMPTY_ARRAY, defaultProps, elementProps, getButtonProps]
     }), isActiveItem && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(FocusGuard, {
@@ -274,12 +623,18 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
         ref: afterOutsideRef,
         onFocus: event => {
           if (referenceElement && isOutsideEvent(event, referenceElement)) {
-            const elementToFocus = afterInsideRef.current && isTabbable(afterInsideRef.current) ? afterInsideRef.current : triggerElement;
+            ReactDOM.flushSync(() => {
+              setViewportInert(false);
+            });
+            const elementToFocus = afterInsideRef.current || triggerElement;
             elementToFocus?.focus();
           } else {
-            const nextTabbable = getNextTabbable(triggerElement);
+            let nextTabbable = getNextTabbable(triggerElement);
+            if (nested && !positionerElement && referenceElement && nextTabbable && contains(referenceElement, nextTabbable)) {
+              nextTabbable = getTabbableAfterElement(afterInsideRef.current);
+            }
             nextTabbable?.focus();
-            if (!contains(rootRef.current, nextTabbable)) {
+            if ((!nested || positionerElement) && !contains(rootRef.current, nextTabbable)) {
               setValue(null, createChangeEventDetails(REASONS.focusOut, event.nativeEvent));
             }
           }
@@ -288,4 +643,28 @@ export const NavigationMenuTrigger = /*#__PURE__*/React.forwardRef(function Navi
     })]
   });
 });
-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/esm/navigation-menu/utils/isOutsideMenuEvent.d.ts

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

package/esm/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/esm/navigation-menu/viewport/NavigationMenuViewport.js

@@ -4,15 +4,12 @@ import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useId } from '@base-ui/utils/useId';
 import { inertValue } from '@base-ui/utils/inertValue';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { usePopupAutoResize } from "../../utils/usePopupAutoResize.js";
 import { getNextTabbable, getPreviousTabbable, isOutsideEvent, contains } from "../../floating-ui-react/utils.js";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
 import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_ROOT_CONTEXT = getEmptyRootContext();
 function Guards({
@@ -68,15 +65,11 @@ export const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function Nav
     render,
     children,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const id = useId(idProp);
   const {
-    open,
-    mounted,
-    value,
-    popupElement,
-    positionerElement,
     setViewportElement,
     setViewportTargetElement,
     floatingRootContext,
@@ -86,17 +79,6 @@ export const NavigationMenuViewport = /*#__PURE__*/React.forwardRef(function Nav
   } = useNavigationMenuRootContext();
   const positioning = useNavigationMenuPositionerContext(true);
   const hasPositioner = Boolean(positioning);
-  const direction = useDirection();
-  const enableAutoResize = useStableCallback(() => open);
-  usePopupAutoResize({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: value,
-    enabled: enableAutoResize,
-    side: positioning?.side ?? 'bottom',
-    direction
-  });
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   useIsoLayoutEffect(() => {
     if (domReference) {

package/esm/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;