@base-ui/react 1.3.0 → 1.4.0

package/esm/menu/trigger/MenuTrigger.js

@@ -2,7 +2,6 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { fastComponentRef } from '@base-ui/utils/fastHooks';
@@ -11,7 +10,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { safePolygon, useClick, useFloatingTree, useFocus, useHoverReferenceInteraction, useInteractions, useFloatingNodeId, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
 import { FloatingTreeStore } from "../../floating-ui-react/components/FloatingTreeStore.js";
-import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
+import { contains } from "../../floating-ui-react/utils.js";
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
@@ -21,6 +20,7 @@ import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { useCompositeRootContext } from "../../composite/root/CompositeRootContext.js";
 import { findRootOwnerId } from "../utils/findRootOwnerId.js";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
+import { useTriggerFocusGuards } from "../../utils/popups/useTriggerFocusGuards.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useMixedToggleClickHandler } from "../../utils/useMixedToggleClickHandler.js";
@@ -28,7 +28,6 @@ import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRo
 import { useMenubarContext } from "../../menubar/MenubarContext.js";
 import { PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BOUNDARY_OFFSET = 2;
 
@@ -50,6 +49,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     closeDelay = 0,
     handle,
     payload,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
@@ -144,7 +144,8 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     },
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
 
   // Whether to ignore clicks to open the menu.
@@ -193,33 +194,11 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = useStableCallback(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useStableCallback(event => {
-    const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && isOutsideEvent(event, currentPositionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && contains(currentPositionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = getNextTabbable(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = useTriggerFocusGuards(store, triggerElementRef);
   const element = useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: pressableTriggerOpenStateMapping,
@@ -232,6 +211,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: ref,
       props: props,

package/esm/menu/viewport/MenuViewport.js

@@ -24,6 +24,7 @@ export const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/esm/menubar/Menubar.js

@@ -1,18 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { FloatingNode, FloatingTree, useFloatingNodeId, useFloatingTree } from "../floating-ui-react/index.js";
 import { MenubarContext, useMenubarContext } from "./MenubarContext.js";
-import { useOpenInteractionType } from "../utils/useOpenInteractionType.js";
 import { CompositeRoot } from "../composite/root/CompositeRoot.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { MenubarDataAttributes } from "./MenubarDataAttributes.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const menubarStateAttributesMapping = {
   hasSubmenuOpen(value) {
-    return {
-      'data-has-submenu-open': value ? 'true' : 'false'
-    };
+    return value ? {
+      [MenubarDataAttributes.hasSubmenuOpen]: ''
+    } : null;
   }
 };
 
@@ -30,15 +29,11 @@ export const Menubar = /*#__PURE__*/React.forwardRef(function Menubar(props, for
     modal = true,
     disabled = false,
     id: idProp,
+    style,
     ...elementProps
   } = props;
   const [contentElement, setContentElement] = React.useState(null);
   const [hasSubmenuOpen, setHasSubmenuOpen] = React.useState(false);
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps
-  } = useOpenInteractionType(hasSubmenuOpen);
-  useScrollLock(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = useBaseUiId(idProp);
   const state = {
     orientation,
@@ -65,13 +60,14 @@ export const Menubar = /*#__PURE__*/React.forwardRef(function Menubar(props, for
         children: /*#__PURE__*/_jsx(CompositeRoot, {
           render: render,
           className: className,
+          style: style,
           state: state,
           stateAttributesMapping: menubarStateAttributesMapping,
           refs: [forwardedRef, setContentElement, contentRef],
           props: [{
             role: 'menubar',
             id
-          }, interactionTypeProps, elementProps],
+          }, elementProps],
           orientation: orientation,
           loopFocus: loopFocus,
           highlightItemOnHover: hasSubmenuOpen

package/esm/menubar/MenubarDataAttributes.d.ts

@@ -1,12 +1,15 @@
-export declare enum MenuTriggerDataAttributes {
+export declare enum MenubarDataAttributes {
   /**
    * Present when the corresponding menubar is modal.
    */
   modal = "data-modal",
   /**
    * Determines the orientation of the menubar.
-   * @type 'horizontal' | 'vertical'
-   * @default 'horizontal'
+   * @type {'horizontal' | 'vertical'}
    */
   orientation = "data-orientation",
+  /**
+   * Present when any submenu within the menubar is open.
+   */
+  hasSubmenuOpen = "data-has-submenu-open",
 }

package/esm/menubar/MenubarDataAttributes.js

@@ -1,13 +1,16 @@
-export let MenuTriggerDataAttributes = /*#__PURE__*/function (MenuTriggerDataAttributes) {
+export let MenubarDataAttributes = /*#__PURE__*/function (MenubarDataAttributes) {
   /**
    * Present when the corresponding menubar is modal.
    */
-  MenuTriggerDataAttributes["modal"] = "data-modal";
+  MenubarDataAttributes["modal"] = "data-modal";
   /**
    * Determines the orientation of the menubar.
-   * @type 'horizontal' | 'vertical'
-   * @default 'horizontal'
+   * @type {'horizontal' | 'vertical'}
    */
-  MenuTriggerDataAttributes["orientation"] = "data-orientation";
-  return MenuTriggerDataAttributes;
+  MenubarDataAttributes["orientation"] = "data-orientation";
+  /**
+   * Present when any submenu within the menubar is open.
+   */
+  MenubarDataAttributes["hasSubmenuOpen"] = "data-has-submenu-open";
+  return MenubarDataAttributes;
 }({});

package/esm/merge-props/mergeProps.d.ts

@@ -18,7 +18,7 @@ type InputProps<T extends React.ElementType> = PropsOf<T> | ((otherProps: PropsO
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.

package/esm/merge-props/mergeProps.js

@@ -17,7 +17,7 @@ const EMPTY_PROPS = {};
  * Props can either be provided as objects or as functions that take the previous props as an argument.
  * The function will receive the merged props up to that point (going from left to right):
  * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
- * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ * The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
  *
  * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
  * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
@@ -33,21 +33,23 @@ const EMPTY_PROPS = {};
  */
 
 export function mergeProps(a, b, c, d, e) {
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(a, EMPTY_PROPS)
-  };
+  if (!c && !d && !e && !a) {
+    return createInitialMergedProps(b);
+  }
+
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(a);
   if (b) {
-    merged = mergeOne(merged, b);
+    merged = mergeInto(merged, b);
   }
   if (c) {
-    merged = mergeOne(merged, c);
+    merged = mergeInto(merged, c);
   }
   if (d) {
-    merged = mergeOne(merged, d);
+    merged = mergeInto(merged, d);
   }
   if (e) {
-    merged = mergeOne(merged, e);
+    merged = mergeInto(merged, e);
   }
   return merged;
 }
@@ -71,24 +73,46 @@ export function mergePropsN(props) {
     return EMPTY_PROPS;
   }
   if (props.length === 1) {
-    return resolvePropsGetter(props[0], EMPTY_PROPS);
+    return createInitialMergedProps(props[0]);
   }
 
-  // We need to mutably own `merged`
-  let merged = {
-    ...resolvePropsGetter(props[0], EMPTY_PROPS)
-  };
+  // We need to mutably own `merged`.
+  let merged = createInitialMergedProps(props[0]);
   for (let i = 1; i < props.length; i += 1) {
-    merged = mergeOne(merged, props[i]);
+    merged = mergeInto(merged, props[i]);
   }
   return merged;
 }
-function mergeOne(merged, inputProps) {
+function createInitialMergedProps(inputProps) {
+  if (isPropsGetter(inputProps)) {
+    // Getter-returned handlers intentionally keep their existing semantics.
+    return {
+      ...resolvePropsGetter(inputProps, EMPTY_PROPS)
+    };
+  }
+  return copyInitialProps(inputProps);
+}
+function mergeInto(merged, inputProps) {
   if (isPropsGetter(inputProps)) {
-    return inputProps(merged);
+    return resolvePropsGetter(inputProps, merged);
   }
   return mutablyMergeInto(merged, inputProps);
 }
+function copyInitialProps(inputProps) {
+  const copiedProps = {
+    ...inputProps
+  };
+
+  // `copiedProps` is our fresh own-object copy, so iterating with `for...in` is safe here.
+  // eslint-disable-next-line guard-for-in
+  for (const propName in copiedProps) {
+    const propValue = copiedProps[propName];
+    if (isEventHandler(propName, propValue)) {
+      copiedProps[propName] = wrapEventHandler(propValue);
+    }
+  }
+  return copiedProps;
+}
 
 /**
  * Merges two sets of props. In case of conflicts, the external props take precedence.
@@ -145,7 +169,7 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return ourHandler;
   }
   if (!ourHandler) {
-    return theirHandler;
+    return wrapEventHandler(theirHandler);
   }
   return event => {
     if (isSyntheticEvent(event)) {
@@ -162,6 +186,17 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return result;
   };
 }
+function wrapEventHandler(handler) {
+  if (!handler) {
+    return handler;
+  }
+  return event => {
+    if (isSyntheticEvent(event)) {
+      makeEventPreventable(event);
+    }
+    return handler(event);
+  };
+}
 export function makeEventPreventable(event) {
   event.preventBaseUIHandler = () => {
     event.baseUIHandlerPrevented = true;

package/esm/meter/indicator/MeterIndicator.js

@@ -15,6 +15,7 @@ export const MeterIndicator = /*#__PURE__*/React.forwardRef(function MeterIndica
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const context = useMeterRootContext();

package/esm/meter/label/MeterLabel.js

@@ -15,6 +15,7 @@ export const MeterLabel = /*#__PURE__*/React.forwardRef(function MeterLabel(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/esm/meter/root/MeterRoot.js

@@ -24,6 +24,7 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

package/esm/meter/track/MeterTrack.js

@@ -13,6 +13,7 @@ export const MeterTrack = /*#__PURE__*/React.forwardRef(function MeterTrack(comp
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   return useRenderElement('div', componentProps, {

package/esm/meter/value/MeterValue.js

@@ -15,6 +15,7 @@ export const MeterValue = /*#__PURE__*/React.forwardRef(function MeterValue(comp
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/arrow/NavigationMenuArrow.js

@@ -16,6 +16,7 @@ export const NavigationMenuArrow = /*#__PURE__*/React.forwardRef(function Naviga
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -20,6 +20,7 @@ export const NavigationMenuBackdrop = /*#__PURE__*/React.forwardRef(function Nav
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/content/NavigationMenuContent.js

@@ -40,6 +40,7 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
     className,
     render,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -131,6 +132,7 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
     return /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, {
@@ -147,6 +149,7 @@ export const NavigationMenuContent = /*#__PURE__*/React.forwardRef(function Navi
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef, ref, handleCurrentContentRef],
       props: [defaultProps, hidden ? {

package/esm/navigation-menu/icon/NavigationMenuIcon.js

@@ -15,6 +15,7 @@ export const NavigationMenuIcon = /*#__PURE__*/React.forwardRef(function Navigat
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/item/NavigationMenuItem.js

@@ -17,6 +17,7 @@ export const NavigationMenuItem = /*#__PURE__*/React.forwardRef(function Navigat
     className,
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const fallbackValue = useBaseUiId();

package/esm/navigation-menu/link/NavigationMenuLink.js

@@ -21,6 +21,7 @@ export const NavigationMenuLink = /*#__PURE__*/React.forwardRef(function Navigat
     render,
     active = false,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -60,6 +61,7 @@ export const NavigationMenuLink = /*#__PURE__*/React.forwardRef(function Navigat
     tag: "a",
     render: render,
     className: className,
+    style: style,
     state: state,
     refs: [forwardedRef],
     props: [defaultProps, elementProps]

package/esm/navigation-menu/list/NavigationMenuList.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useDismiss, useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
 import { getTarget } from "../../floating-ui-react/utils.js";
 import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
-import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.js";
+import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
 import { NAVIGATION_MENU_TRIGGER_IDENTIFIER } from "../utils/constants.js";
 import { NavigationMenuDismissContext } from "./NavigationMenuDismissContext.js";
@@ -22,8 +22,10 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
+  const nodeId = useNavigationMenuTreeContext();
   const {
     orientation,
     open,
@@ -40,7 +42,8 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
   const hoverInteractionsEnabled = positionerElement || viewportElement ? true : !value;
   useHoverFloatingInteraction(context, {
     enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
-    closeDelay
+    closeDelay,
+    nodeId
   });
   const dismiss = useDismiss(context, {
     enabled: interactionsEnabled,
@@ -59,9 +62,7 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
   // `stopEventPropagation` won't stop the propagation if the end of the list is reached,
   // but we want to block it in this case.
   // When nested, skip this handler so arrow keys can reach the parent CompositeRoot.
-  const defaultProps = nested ? {
-    'aria-orientation': orientation
-  } : {
+  const defaultProps = nested ? EMPTY_OBJECT : {
     onKeyDown(event) {
       const shouldStop = orientation === 'horizontal' && (event.key === 'ArrowLeft' || event.key === 'ArrowRight') || orientation === 'vertical' && (event.key === 'ArrowUp' || event.key === 'ArrowDown');
       if (shouldStop) {
@@ -69,7 +70,9 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
       }
     }
   };
-  const props = [dismissProps?.floating || EMPTY_OBJECT, defaultProps, elementProps];
+  const props = [dismissProps?.floating || EMPTY_OBJECT, defaultProps, {
+    'aria-orientation': undefined
+  }, elementProps];
 
   // When nested, skip the CompositeRoot wrapper so that triggers can participate
   // in the parent Content's composite navigation context. Also skip the onKeyDown
@@ -91,6 +94,7 @@ export const NavigationMenuList = /*#__PURE__*/React.forwardRef(function Navigat
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: props,

package/esm/navigation-menu/popup/NavigationMenuPopup.js

@@ -24,6 +24,7 @@ export const NavigationMenuPopup = /*#__PURE__*/React.forwardRef(function Naviga
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/navigation-menu/positioner/NavigationMenuPositioner.js

@@ -2,19 +2,19 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerWindow } from '@base-ui/utils/owner';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { disableFocusInside, enableFocusInside, isOutsideEvent } from "../../floating-ui-react/utils.js";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useNavigationMenuRootContext, useNavigationMenuTreeContext } from "../root/NavigationMenuRootContext.js";
 import { useNavigationMenuPortalContext } from "../portal/NavigationMenuPortalContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { NavigationMenuPositionerContext } from "./NavigationMenuPositionerContext.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { usePositioner } from "../../utils/usePositioner.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_ROOT_CONTEXT = getEmptyRootContext();
 
@@ -49,6 +49,7 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = useNavigationMenuPortalContext();
@@ -77,12 +78,7 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
 
     // Listen to the event on the capture phase so they run before the focus
     // trap elements onFocus prop is called.
-    positionerElement.addEventListener('focusin', onFocus, true);
-    positionerElement.addEventListener('focusout', onFocus, true);
-    return () => {
-      positionerElement.removeEventListener('focusin', onFocus, true);
-      positionerElement.removeEventListener('focusout', onFocus, true);
-    };
+    return mergeCleanups(addEventListener(positionerElement, 'focusin', onFocus, true), addEventListener(positionerElement, 'focusout', onFocus, true));
   }, [positionerElement]);
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   const positioning = useAnchorPositioning({
@@ -106,20 +102,6 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
     // and position transition simultaneously when side=top or side=left.
     adaptiveOrigin
   });
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioning.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioning.positionerStyles]);
   const state = {
     open,
     side: positioning.side,
@@ -140,16 +122,15 @@ export const NavigationMenuPositioner = /*#__PURE__*/React.forwardRef(function N
       });
     }
     const win = ownerWindow(positionerElement);
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return addEventListener(win, 'resize', handleResize);
   }, [open, resizeTimeout, positionerElement]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement, positionerRef],
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement, positionerRef],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/_jsx(NavigationMenuPositionerContext.Provider, {
     value: positioning,