@base-ui/react 1.3.0 → 1.4.0

package/menu/submenu-trigger/MenuSubmenuTrigger.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuSubmenuTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
+var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _warn = require("@base-ui/utils/warn");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _floatingUiReact = require("../../floating-ui-react");
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useBaseUiId = require("../../utils/useBaseUiId");
@@ -36,6 +40,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     delay = 100,
     closeDelay = 0,
     disabled: disabledProp = false,
+    style,
     ...elementProps
   } = componentProps;
   const listItem = (0, _useCompositeListItem.useCompositeListItem)();
@@ -64,6 +69,16 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     triggerElementRef.current = el;
     store.set('activeTriggerElement', el);
   }, [store]);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+      const element = triggerElementRef.current;
+      if (element && (0, _isElementDisabled.isElementDisabled)(element) && !disabledProp) {
+        const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+        (0, _warn.warn)(`A disabled element was detected on <Menu.SubmenuTrigger>. To properly disable the trigger, use the \`disabled\` prop on the component instead of setting it on the rendered element.${ownerStackMessage}`);
+      }
+    });
+  }
   const submenuRootContext = (0, _MenuSubmenuRootContext.useMenuSubmenuRootContext)();
   if (!submenuRootContext?.parentMenu) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.' : (0, _formatErrorMessage2.default)(37));
@@ -92,7 +107,7 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
     typingRef: parentMenuStore.context.typingRef,
     nativeButton,
     itemMetadata,
-    nodeId: menuPositionerContext?.nodeId
+    nodeId: menuPositionerContext?.context.nodeId
   });
   const hoverEnabled = store.useState('hoverEnabled');
   const allowMouseEnter = parentMenuStore.useState('allowMouseEnter');
@@ -109,7 +124,8 @@ const MenuSubmenuTrigger = exports.MenuSubmenuTrigger = /*#__PURE__*/React.forwa
       close: closeDelay
     } : 0,
     triggerElementRef,
-    externalTree: floatingTreeRoot
+    externalTree: floatingTreeRoot,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = (0, _floatingUiReact.useClick)(floatingRootContext, {
     enabled: !disabled,

package/menu/trigger/MenuTrigger.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MenuTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
 var _fastHooks = require("@base-ui/utils/fastHooks");
@@ -28,6 +27,7 @@ var _CompositeItem = require("../../composite/item/CompositeItem");
 var _CompositeRootContext = require("../../composite/root/CompositeRootContext");
 var _findRootOwnerId = require("../utils/findRootOwnerId");
 var _popups = require("../../utils/popups");
+var _useTriggerFocusGuards = require("../../utils/popups/useTriggerFocusGuards");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _reasons = require("../../utils/reasons");
 var _useMixedToggleClickHandler = require("../../utils/useMixedToggleClickHandler");
@@ -35,7 +35,6 @@ var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootCo
 var _MenubarContext = require("../../menubar/MenubarContext");
 var _constants = require("../../utils/constants");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _jsxRuntime = require("react/jsx-runtime");
 const BOUNDARY_OFFSET = 2;
 
@@ -57,6 +56,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     closeDelay = 0,
     handle,
     payload,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _MenuRootContext.useMenuRootContext)(true);
@@ -151,7 +151,8 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
     },
     triggerElementRef,
     externalTree: floatingTreeRoot,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
 
   // Whether to ignore clicks to open the menu.
@@ -200,33 +201,11 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
   }, isInMenubar ? {
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = (0, _useStableCallback.useStableCallback)(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = (0, _utils.getTabbableBeforeElement)(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = (0, _useStableCallback.useStableCallback)(event => {
-    const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && (0, _utils.isOutsideEvent)(event, currentPositionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = (0, _utils.getTabbableAfterElement)(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && (0, _utils.contains)(currentPositionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = (0, _utils.getNextTabbable)(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     enabled: !isInMenubar,
     stateAttributesMapping: _popupStateMapping.pressableTriggerOpenStateMapping,
@@ -239,6 +218,7 @@ const MenuTrigger = exports.MenuTrigger = (0, _fastHooks.fastComponentRef)(funct
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: ref,
       props: props,

package/menu/viewport/MenuViewport.js

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

package/menubar/Menubar.js

@@ -7,18 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Menubar = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _floatingUiReact = require("../floating-ui-react");
 var _MenubarContext = require("./MenubarContext");
-var _useOpenInteractionType = require("../utils/useOpenInteractionType");
 var _CompositeRoot = require("../composite/root/CompositeRoot");
 var _useBaseUiId = require("../utils/useBaseUiId");
+var _MenubarDataAttributes = require("./MenubarDataAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 const menubarStateAttributesMapping = {
   hasSubmenuOpen(value) {
-    return {
-      'data-has-submenu-open': value ? 'true' : 'false'
-    };
+    return value ? {
+      [_MenubarDataAttributes.MenubarDataAttributes.hasSubmenuOpen]: ''
+    } : null;
   }
 };
 
@@ -36,15 +35,11 @@ const Menubar = exports.Menubar = /*#__PURE__*/React.forwardRef(function Menubar
     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
-  } = (0, _useOpenInteractionType.useOpenInteractionType)(hasSubmenuOpen);
-  (0, _useScrollLock.useScrollLock)(modal && hasSubmenuOpen && openMethod !== 'touch', contentElement);
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const state = {
     orientation,
@@ -71,13 +66,14 @@ const Menubar = exports.Menubar = /*#__PURE__*/React.forwardRef(function Menubar
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.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/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/menubar/MenubarDataAttributes.js

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MenuTriggerDataAttributes = void 0;
-let MenuTriggerDataAttributes = exports.MenuTriggerDataAttributes = /*#__PURE__*/function (MenuTriggerDataAttributes) {
+exports.MenubarDataAttributes = void 0;
+let MenubarDataAttributes = exports.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/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/merge-props/mergeProps.js

@@ -26,7 +26,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.
@@ -42,21 +42,23 @@ const EMPTY_PROPS = {};
  */
 
 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;
 }
@@ -80,24 +82,46 @@ 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.
@@ -154,7 +178,7 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return ourHandler;
   }
   if (!ourHandler) {
-    return theirHandler;
+    return wrapEventHandler(theirHandler);
   }
   return event => {
     if (isSyntheticEvent(event)) {
@@ -171,6 +195,17 @@ function mergeEventHandlers(ourHandler, theirHandler) {
     return result;
   };
 }
+function wrapEventHandler(handler) {
+  if (!handler) {
+    return handler;
+  }
+  return event => {
+    if (isSyntheticEvent(event)) {
+      makeEventPreventable(event);
+    }
+    return handler(event);
+  };
+}
 function makeEventPreventable(event) {
   event.preventBaseUIHandler = () => {
     event.baseUIHandlerPrevented = true;

package/meter/indicator/MeterIndicator.js

@@ -20,6 +20,7 @@ const MeterIndicator = exports.MeterIndicator = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const context = (0, _MeterRootContext.useMeterRootContext)();

package/meter/label/MeterLabel.js

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

package/meter/root/MeterRoot.js

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

package/meter/track/MeterTrack.js

@@ -18,6 +18,7 @@ const MeterTrack = exports.MeterTrack = /*#__PURE__*/React.forwardRef(function M
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/meter/value/MeterValue.js

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

package/navigation-menu/arrow/NavigationMenuArrow.js

@@ -21,6 +21,7 @@ const NavigationMenuArrow = exports.NavigationMenuArrow = /*#__PURE__*/React.for
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -26,6 +26,7 @@ const NavigationMenuBackdrop = exports.NavigationMenuBackdrop = /*#__PURE__*/Rea
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/content/NavigationMenuContent.js

@@ -46,6 +46,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     className,
     render,
     keepMounted = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -137,6 +138,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, {
@@ -153,6 +155,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef, ref, handleCurrentContentRef],
       props: [defaultProps, hidden ? {

package/navigation-menu/icon/NavigationMenuIcon.js

@@ -20,6 +20,7 @@ const NavigationMenuIcon = exports.NavigationMenuIcon = /*#__PURE__*/React.forwa
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/item/NavigationMenuItem.js

@@ -22,6 +22,7 @@ const NavigationMenuItem = exports.NavigationMenuItem = /*#__PURE__*/React.forwa
     className,
     render,
     value: valueProp,
+    style,
     ...elementProps
   } = componentProps;
   const fallbackValue = (0, _useBaseUiId.useBaseUiId)();

package/navigation-menu/link/NavigationMenuLink.js

@@ -26,6 +26,7 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
     render,
     active = false,
     closeOnClick = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -65,6 +66,7 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
     tag: "a",
     render: render,
     className: className,
+    style: style,
     state: state,
     refs: [forwardedRef],
     props: [defaultProps, elementProps]

package/navigation-menu/list/NavigationMenuList.js

@@ -27,8 +27,10 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
+  const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
   const {
     orientation,
     open,
@@ -45,7 +47,8 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
   const hoverInteractionsEnabled = positionerElement || viewportElement ? true : !value;
   (0, _floatingUiReact.useHoverFloatingInteraction)(context, {
     enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
-    closeDelay
+    closeDelay,
+    nodeId
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(context, {
     enabled: interactionsEnabled,
@@ -64,9 +67,7 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
   // `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 ? _constants.EMPTY_OBJECT : {
     onKeyDown(event) {
       const shouldStop = orientation === 'horizontal' && (event.key === 'ArrowLeft' || event.key === 'ArrowRight') || orientation === 'vertical' && (event.key === 'ArrowUp' || event.key === 'ArrowDown');
       if (shouldStop) {
@@ -74,7 +75,9 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
       }
     }
   };
-  const props = [dismissProps?.floating || _constants.EMPTY_OBJECT, defaultProps, elementProps];
+  const props = [dismissProps?.floating || _constants.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
@@ -96,6 +99,7 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: props,

package/navigation-menu/popup/NavigationMenuPopup.js

@@ -30,6 +30,7 @@ const NavigationMenuPopup = exports.NavigationMenuPopup = /*#__PURE__*/React.for
     className,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/navigation-menu/positioner/NavigationMenuPositioner.js

@@ -8,19 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavigationMenuPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _owner = require("@base-ui/utils/owner");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _utils = require("../../floating-ui-react/utils");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _NavigationMenuPortalContext = require("../portal/NavigationMenuPortalContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _NavigationMenuPositionerContext = require("./NavigationMenuPositionerContext");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _constants = require("../../utils/constants");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _usePositioner = require("../../utils/usePositioner");
 var _jsxRuntime = require("react/jsx-runtime");
 const EMPTY_ROOT_CONTEXT = (0, _getEmptyRootContext.getEmptyRootContext)();
 
@@ -55,6 +55,7 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _NavigationMenuPortalContext.useNavigationMenuPortalContext)();
@@ -83,12 +84,7 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
 
     // 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 (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(positionerElement, 'focusin', onFocus, true), (0, _addEventListener.addEventListener)(positionerElement, 'focusout', onFocus, true));
   }, [positionerElement]);
   const domReference = (floatingRootContext || EMPTY_ROOT_CONTEXT).useState('domReferenceElement');
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
@@ -112,20 +108,6 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
     // and position transition simultaneously when side=top or side=left.
     adaptiveOrigin: _adaptiveOriginMiddleware.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,
@@ -146,16 +128,15 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
       });
     }
     const win = (0, _owner.ownerWindow)(positionerElement);
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return (0, _addEventListener.addEventListener)(win, 'resize', handleResize);
   }, [open, resizeTimeout, positionerElement]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement, positionerRef],
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement, positionerRef],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationMenuPositionerContext.NavigationMenuPositionerContext.Provider, {
     value: positioning,