@base-ui/react 1.6.0 → 1.7.0

package/menu/trigger/MenuTrigger.mjs

@@ -15,22 +15,19 @@ import { useMenuRootContext } from "../root/MenuRootContext.mjs";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useButton } from "../../internals/use-button/useButton.mjs";
-import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.mjs";
+import { isMouseWithinBounds } from "../../utils/getPseudoElementBounds.mjs";
 import { CompositeItem } from "../../internals/composite/item/CompositeItem.mjs";
 import { useCompositeRootContext } from "../../internals/composite/root/CompositeRootContext.mjs";
 import { findRootOwnerId } from "../utils/findRootOwnerId.mjs";
-import { useTriggerDataForwarding } from "../../utils/popups/index.mjs";
+import { usePopupHandleStore, useTriggerDataForwarding } from "../../utils/popups/index.mjs";
 import { useTriggerFocusGuards } from "../../utils/popups/useTriggerFocusGuards.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { useMixedToggleClickHandler } from "../../utils/useMixedToggleClickHandler.mjs";
-import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.mjs";
 import { useMenubarContext } from "../../menubar/MenubarContext.mjs";
 import { PATIENT_CLICK_THRESHOLD } from "../../internals/constants.mjs";
 import { FocusGuard } from "../../utils/FocusGuard.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BOUNDARY_OFFSET = 2;
 
 /**
  * A button that opens the menu.
@@ -38,6 +35,7 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
@@ -54,7 +52,8 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     ...elementProps
   } = componentProps;
   const rootContext = useMenuRootContext(true);
-  const store = handle?.store ?? rootContext?.store;
+  const handleStore = usePopupHandleStore(handle);
+  const store = handleStore ?? rootContext?.store;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : _formatErrorMessage(85));
   }
@@ -114,8 +113,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
       return;
     }
-    const bounds = getPseudoElementBounds(triggerRef.current);
-    if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+    if (isMouseWithinBounds(mouseEvent, triggerRef.current)) {
       return;
     }
     floatingTreeRoot.events.emit('close', {
@@ -134,7 +132,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   const parentMenubarHasSubmenuOpen = isInMenubar && parent.context.hasSubmenuOpen;
   const openOnHover = openOnHoverProp ?? parentMenubarHasSubmenuOpen;
   const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
-    enabled: openOnHover && !disabled && parent.type !== 'context-menu' && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
+    enabled: openOnHover && !disabled && (!isInMenubar || parentMenubarHasSubmenuOpen && !isMountedByThisTrigger),
     handleClose: safePolygon({
       blockPointerEvents: !isInMenubar
     }),
@@ -155,7 +153,7 @@ export const MenuTrigger = fastComponentRef(function MenuTrigger(componentProps,
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
   const click = useClick(floatingRootContext, {
-    enabled: !disabled && parent.type !== 'context-menu',
+    enabled: !disabled,
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
     ignoreMouse: false,
@@ -250,7 +248,7 @@ function useStickIfOpen(open, openReason) {
   const stickIfOpenTimeout = useTimeout();
   const [stickIfOpen, setStickIfOpen] = React.useState(false);
   useIsoLayoutEffect(() => {
-    if (open && openReason === 'trigger-hover') {
+    if (open && openReason === REASONS.triggerHover) {
       // Only allow "patient" clicks to close the menu if it's open.
       // If they clicked within 500ms of the menu opening, keep it open.
       setStickIfOpen(true);
@@ -265,8 +263,6 @@ function useStickIfOpen(open, openReason) {
   return stickIfOpen;
 }
 function useMenuParent() {
-  const contextMenuContext = useContextMenuRootContext(true);
-  const parentContext = useMenuRootContext(true);
   const menubarContext = useMenubarContext(true);
   const parent = React.useMemo(() => {
     if (menubarContext) {
@@ -275,19 +271,9 @@ function useMenuParent() {
         context: menubarContext
       };
     }
-
-    // Ensure this is not a Menu nested inside ContextMenu.Trigger.
-    // ContextMenu parentContext is always undefined as ContextMenu.Root is instantiated with
-    // <MenuRootContext.Provider value={undefined}>
-    if (contextMenuContext && !parentContext) {
-      return {
-        type: 'context-menu',
-        context: contextMenuContext
-      };
-    }
     return {
       type: undefined
     };
-  }, [contextMenuContext, parentContext, menubarContext]);
+  }, [menubarContext]);
   return parent;
 }

package/menu/utils/findRootOwnerId.js

@@ -7,7 +7,7 @@ exports.findRootOwnerId = findRootOwnerId;
 var _dom = require("@floating-ui/utils/dom");
 function findRootOwnerId(node) {
   if ((0, _dom.isHTMLElement)(node) && node.hasAttribute('data-rootownerid')) {
-    return node.getAttribute('data-rootownerid') ?? undefined;
+    return node.getAttribute('data-rootownerid');
   }
   if ((0, _dom.isLastTraversableNode)(node)) {
     return undefined;

package/menu/utils/findRootOwnerId.mjs

@@ -1,7 +1,7 @@
 import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
 export function findRootOwnerId(node) {
   if (isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
-    return node.getAttribute('data-rootownerid') ?? undefined;
+    return node.getAttribute('data-rootownerid');
   }
   if (isLastTraversableNode(node)) {
     return undefined;

package/menu/viewport/MenuViewport.js

@@ -11,13 +11,6 @@ var _MenuRootContext = require("../root/MenuRootContext");
 var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _usePopupViewport = require("../../utils/usePopupViewport");
-var _MenuViewportCssVars = require("./MenuViewportCssVars");
-const stateAttributesMapping = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
-
 /**
  * A viewport for displaying content transitions.
  * This component is only required if one popup can be opened by multiple triggers, its content
@@ -47,7 +40,6 @@ const MenuViewport = exports.MenuViewport = /*#__PURE__*/React.forwardRef(functi
   } = (0, _usePopupViewport.usePopupViewport)({
     store,
     side,
-    cssVars: _MenuViewportCssVars.MenuViewportCssVars,
     children
   });
   const state = {
@@ -61,7 +53,7 @@ const MenuViewport = exports.MenuViewport = /*#__PURE__*/React.forwardRef(functi
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: _usePopupViewport.popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";

package/menu/viewport/MenuViewport.mjs

@@ -4,13 +4,7 @@ import * as React from 'react';
 import { useMenuRootContext } from "../root/MenuRootContext.mjs";
 import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { usePopupViewport } from "../../utils/usePopupViewport.mjs";
-import { MenuViewportCssVars } from "./MenuViewportCssVars.mjs";
-const stateAttributesMapping = {
-  activationDirection: value => value ? {
-    'data-activation-direction': value
-  } : null
-};
+import { popupViewportStateMapping, usePopupViewport } from "../../utils/usePopupViewport.mjs";
 
 /**
  * A viewport for displaying content transitions.
@@ -41,7 +35,6 @@ export const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(
   } = usePopupViewport({
     store,
     side,
-    cssVars: MenuViewportCssVars,
     children
   });
   const state = {
@@ -55,7 +48,7 @@ export const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping
+    stateAttributesMapping: popupViewportStateMapping
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";

package/menubar/Menubar.js

@@ -12,6 +12,7 @@ var _MenubarContext = require("./MenubarContext");
 var _CompositeRoot = require("../internals/composite/root/CompositeRoot");
 var _useBaseUiId = require("../internals/useBaseUiId");
 var _MenubarDataAttributes = require("./MenubarDataAttributes");
+var _reasons = require("../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 const menubarStateAttributesMapping = {
   hasSubmenuOpen(value) {
@@ -100,7 +101,7 @@ function MenubarContent(props) {
         if (!rootContext.hasSubmenuOpen) {
           rootContext.setHasSubmenuOpen(true);
         }
-      } else if (details.reason !== 'sibling-open' && details.reason !== 'list-navigation') {
+      } else if (details.reason !== _reasons.REASONS.siblingOpen && details.reason !== _reasons.REASONS.listNavigation) {
         rootContext.setHasSubmenuOpen(false);
       }
     }

package/menubar/Menubar.mjs

@@ -6,6 +6,7 @@ import { MenubarContext, useMenubarContext } from "./MenubarContext.mjs";
 import { CompositeRoot } from "../internals/composite/root/CompositeRoot.mjs";
 import { useBaseUiId } from "../internals/useBaseUiId.mjs";
 import { MenubarDataAttributes } from "./MenubarDataAttributes.mjs";
+import { REASONS } from "../internals/reasons.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const menubarStateAttributesMapping = {
   hasSubmenuOpen(value) {
@@ -94,7 +95,7 @@ function MenubarContent(props) {
         if (!rootContext.hasSubmenuOpen) {
           rootContext.setHasSubmenuOpen(true);
         }
-      } else if (details.reason !== 'sibling-open' && details.reason !== 'list-navigation') {
+      } else if (details.reason !== REASONS.siblingOpen && details.reason !== REASONS.listNavigation) {
         rootContext.setHasSubmenuOpen(false);
       }
     }

package/meter/root/MeterRoot.js

@@ -41,9 +41,9 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
   const percentageValue = (0, _clamp.clamp)(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
   const clampedValue = (0, _clamp.clamp)(Number.isNaN(valueProp) ? min : valueProp, min, max);
 
-  // Without an explicit `format`, the value is displayed as its position within the range so the
-  // text stays in sync with the indicator fill for any `min`/`max` (not just the default 0–100).
-  const formattedValue = format ? (0, _formatNumber.formatNumber)(valueProp, locale, format) : (0, _formatNumber.formatNumber)(percentageValue / 100, locale, {
+  // Format the clamped value so visible and accessible text stay in sync with `aria-valuenow` and
+  // the indicator fill. The raw value remains available as the second `getAriaValueText` argument.
+  const formattedValue = format ? (0, _formatNumber.formatNumber)(clampedValue, locale, format) : (0, _formatNumber.formatNumber)(percentageValue / 100, locale, {
     style: 'percent'
   });
   let ariaValuetext = formattedValue;
@@ -67,12 +67,10 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,
-    max,
-    min,
     percentageValue,
     setLabelId,
     value: valueProp
-  }), [formattedValue, max, min, percentageValue, setLabelId, valueProp]);
+  }), [formattedValue, percentageValue, setLabelId, valueProp]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     props: [defaultProps, elementProps]

package/meter/root/MeterRoot.mjs

@@ -36,9 +36,9 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
   const percentageValue = clamp(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
   const clampedValue = clamp(Number.isNaN(valueProp) ? min : valueProp, min, max);
 
-  // Without an explicit `format`, the value is displayed as its position within the range so the
-  // text stays in sync with the indicator fill for any `min`/`max` (not just the default 0–100).
-  const formattedValue = format ? formatNumber(valueProp, locale, format) : formatNumber(percentageValue / 100, locale, {
+  // Format the clamped value so visible and accessible text stay in sync with `aria-valuenow` and
+  // the indicator fill. The raw value remains available as the second `getAriaValueText` argument.
+  const formattedValue = format ? formatNumber(clampedValue, locale, format) : formatNumber(percentageValue / 100, locale, {
     style: 'percent'
   });
   let ariaValuetext = formattedValue;
@@ -62,12 +62,10 @@ export const MeterRoot = /*#__PURE__*/React.forwardRef(function MeterRoot(compon
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,
-    max,
-    min,
     percentageValue,
     setLabelId,
     value: valueProp
-  }), [formattedValue, max, min, percentageValue, setLabelId, valueProp]);
+  }), [formattedValue, percentageValue, setLabelId, valueProp]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     props: [defaultProps, elementProps]

package/meter/root/MeterRootContext.d.mts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 export type MeterRootContext = {
   formattedValue: string;
-  max: number;
-  min: number;
   /**
    * The value normalized to a `0`–`100` percentage of the range, clamped to those bounds.
    */

package/meter/root/MeterRootContext.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 export type MeterRootContext = {
   formattedValue: string;
-  max: number;
-  min: number;
   /**
    * The value normalized to a `0`–`100` percentage of the range, clamped to those bounds.
    */

package/navigation-menu/arrow/NavigationMenuArrow.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Align, Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Align, Side } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Displays an element pointing toward the navigation menu's current anchor.

package/navigation-menu/arrow/NavigationMenuArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { Align, Side } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays an element pointing toward the navigation menu's current anchor.

package/navigation-menu/arrow/NavigationMenuArrow.js

@@ -11,7 +11,7 @@ var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPosi
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _getDisabledMountTransitionStyles = require("../../internals/getDisabledMountTransitionStyles");
 /**
  * Displays an element pointing toward the navigation menu's current anchor.
  * Renders a `<div>` element.

package/navigation-menu/arrow/NavigationMenuArrow.mjs

@@ -5,7 +5,7 @@ import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenu
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.mjs";
 import { popupStateMapping } from "../../utils/popupStateMapping.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.mjs";
+import { getDisabledMountTransitionStyles } from "../../internals/getDisabledMountTransitionStyles.mjs";
 
 /**
  * Displays an element pointing toward the navigation menu's current anchor.

package/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -9,13 +9,7 @@ exports.NavigationMenuBackdrop = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
 /**
  * A backdrop for the navigation menu popup.
  * Renders a `<div>` element.
@@ -49,7 +43,7 @@ const NavigationMenuBackdrop = exports.NavigationMenuBackdrop = /*#__PURE__*/Rea
         WebkitUserSelect: 'none'
       }
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping
   });
   return element;
 });

package/navigation-menu/backdrop/NavigationMenuBackdrop.mjs

@@ -3,12 +3,7 @@
 import * as React from 'react';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping
-};
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
 
 /**
  * A backdrop for the navigation menu popup.
@@ -43,7 +38,7 @@ export const NavigationMenuBackdrop = /*#__PURE__*/React.forwardRef(function Nav
         WebkitUserSelect: 'none'
       }
     }, elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: popupTransitionStateMapping
   });
   return element;
 });

package/navigation-menu/backdrop/NavigationMenuBackdropDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum NavigationMenuBackdropDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/navigation-menu/backdrop/NavigationMenuBackdropDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum NavigationMenuBackdropDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/navigation-menu/backdrop/NavigationMenuBackdropDataAttributes.js

@@ -15,7 +15,7 @@ let NavigationMenuBackdropDataAttributes = exports.NavigationMenuBackdropDataAtt
    */
   NavigationMenuBackdropDataAttributes[NavigationMenuBackdropDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   NavigationMenuBackdropDataAttributes[NavigationMenuBackdropDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/navigation-menu/backdrop/NavigationMenuBackdropDataAttributes.mjs

@@ -9,7 +9,7 @@ export let NavigationMenuBackdropDataAttributes = function (NavigationMenuBackdr
    */
   NavigationMenuBackdropDataAttributes[NavigationMenuBackdropDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   NavigationMenuBackdropDataAttributes[NavigationMenuBackdropDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/navigation-menu/content/NavigationMenuContentDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum NavigationMenuContentDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the content is animating in.
+   * Present when the content begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/navigation-menu/content/NavigationMenuContentDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum NavigationMenuContentDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the content is animating in.
+   * Present when the content begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/navigation-menu/content/NavigationMenuContentDataAttributes.js

@@ -15,7 +15,7 @@ let NavigationMenuContentDataAttributes = exports.NavigationMenuContentDataAttri
    */
   NavigationMenuContentDataAttributes[NavigationMenuContentDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the content is animating in.
+   * Present when the content begins animating in.
    */
   NavigationMenuContentDataAttributes[NavigationMenuContentDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/navigation-menu/content/NavigationMenuContentDataAttributes.mjs

@@ -9,7 +9,7 @@ export let NavigationMenuContentDataAttributes = function (NavigationMenuContent
    */
   NavigationMenuContentDataAttributes[NavigationMenuContentDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the content is animating in.
+   * Present when the content begins animating in.
    */
   NavigationMenuContentDataAttributes[NavigationMenuContentDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/navigation-menu/link/NavigationMenuLink.d.mts

@@ -13,7 +13,7 @@ export interface NavigationMenuLinkState {
    */
   active: boolean;
 }
-export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState> {
+export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState, React.ComponentPropsWithRef<'a'>> {
   /**
    * Whether the link is the currently active page.
    * @default false

package/navigation-menu/link/NavigationMenuLink.d.ts

@@ -13,7 +13,7 @@ export interface NavigationMenuLinkState {
    */
   active: boolean;
 }
-export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState> {
+export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState, React.ComponentPropsWithRef<'a'>> {
   /**
    * Whether the link is the currently active page.
    * @default false

package/navigation-menu/popup/NavigationMenuPopup.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
-import { Align, Side } from "../../utils/useAnchorPositioning.mjs";
+import { Align, Side } from "../../internals/useAnchorPositioning.mjs";
 /**
  * A container for the navigation menu contents.
  * Renders a `<nav>` element.

package/navigation-menu/popup/NavigationMenuPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
-import { Align, Side } from "../../utils/useAnchorPositioning.js";
+import { Align, Side } from "../../internals/useAnchorPositioning.js";
 /**
  * A container for the navigation menu contents.
  * Renders a `<nav>` element.

package/navigation-menu/popup/NavigationMenuPopup.js

@@ -9,17 +9,11 @@ exports.NavigationMenuPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../internals/useRenderElement");
 var _NavigationMenuRootContext = require("../root/NavigationMenuRootContext");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _NavigationMenuPositionerContext = require("../positioner/NavigationMenuPositionerContext");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
+var _getDisabledMountTransitionStyles = require("../../internals/getDisabledMountTransitionStyles");
 /**
  * A container for the navigation menu contents.
  * Renders a `<nav>` element.
@@ -70,7 +64,7 @@ const NavigationMenuPopup = exports.NavigationMenuPopup = /*#__PURE__*/React.for
         [isPhysicalLeft ? 'right' : 'left']: '0'
       } : {}
     }, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping
   });
   return element;
 });

package/navigation-menu/popup/NavigationMenuPopup.mjs

@@ -3,16 +3,11 @@
 import * as React from 'react';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useNavigationMenuRootContext } from "../root/NavigationMenuRootContext.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useNavigationMenuPositionerContext } from "../positioner/NavigationMenuPositionerContext.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.mjs";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping
-};
+import { popupTransitionStateMapping } from "../../utils/popupStateMapping.mjs";
+import { getDisabledMountTransitionStyles } from "../../internals/getDisabledMountTransitionStyles.mjs";
 
 /**
  * A container for the navigation menu contents.
@@ -64,7 +59,7 @@ export const NavigationMenuPopup = /*#__PURE__*/React.forwardRef(function Naviga
         [isPhysicalLeft ? 'right' : 'left']: '0'
       } : {}
     }, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping
+    stateAttributesMapping: popupTransitionStateMapping
   });
   return element;
 });

package/navigation-menu/popup/NavigationMenuPopupDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum NavigationMenuPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/navigation-menu/popup/NavigationMenuPopupDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum NavigationMenuPopupDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/navigation-menu/popup/NavigationMenuPopupDataAttributes.js

@@ -15,7 +15,7 @@ let NavigationMenuPopupDataAttributes = exports.NavigationMenuPopupDataAttribute
    */
   NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/navigation-menu/popup/NavigationMenuPopupDataAttributes.mjs

@@ -9,7 +9,7 @@ export let NavigationMenuPopupDataAttributes = function (NavigationMenuPopupData
    */
   NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the popup is animating in.
+   * Present when the popup begins animating in.
    */
   NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**