@base-ui/react 1.1.0 → 1.3.0

package/meter/root/MeterRoot.js

@@ -7,19 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MeterRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _MeterRootContext = require("./MeterRootContext");
 var _formatNumber = require("../../utils/formatNumber");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
-function formatValue(value, locale, format) {
-  if (!format) {
-    return (0, _formatNumber.formatNumber)(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return (0, _formatNumber.formatNumber)(value, locale, format);
-}
-
 /**
  * Groups all parts of the meter and provides the value for screen readers.
  * Renders a `<div>` element.
@@ -36,10 +28,11 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
     value: valueProp,
     render,
     className,
+    children,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
-  const formattedValue = formatValue(valueProp, locale, format);
+  const formattedValue = (0, _formatNumber.formatNumberValue)(valueProp, locale, format);
   let ariaValuetext = `${valueProp}%`;
   if (getAriaValueText) {
     ariaValuetext = getAriaValueText(formattedValue, valueProp);
@@ -52,7 +45,14 @@ const MeterRoot = exports.MeterRoot = /*#__PURE__*/React.forwardRef(function Met
     'aria-valuemin': min,
     'aria-valuenow': valueProp,
     'aria-valuetext': ariaValuetext,
-    role: 'meter'
+    role: 'meter',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        role: "presentation",
+        style: _visuallyHidden.visuallyHidden,
+        children: "x"
+      })]
+    })
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,

package/meter/track/MeterTrack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Contains the meter indicator and represents the entire range of the meter.
@@ -8,7 +8,9 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterTrack: React.ForwardRefExoticComponent<Omit<MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterRoot.State> {}
+export interface MeterTrackState extends MeterRootState {}
+export interface MeterTrackProps extends BaseUIComponentProps<'div', MeterTrackState> {}
 export declare namespace MeterTrack {
+  type State = MeterTrackState;
   type Props = MeterTrackProps;
 }

package/meter/value/MeterValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { MeterRoot } from "../root/MeterRoot.js";
+import type { MeterRootState } from "../root/MeterRoot.js";
 /**
  * A text element displaying the current value.
  * Renders a `<span>` element.
@@ -8,9 +8,11 @@ import type { MeterRoot } from "../root/MeterRoot.js";
  * Documentation: [Base UI Meter](https://base-ui.com/react/components/meter)
  */
 export declare const MeterValue: React.ForwardRefExoticComponent<Omit<MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterRoot.State>, 'children'> {
-  children?: null | ((formattedValue: string, value: number) => React.ReactNode);
+export interface MeterValueState extends MeterRootState {}
+export interface MeterValueProps extends Omit<BaseUIComponentProps<'span', MeterValueState>, 'children'> {
+  children?: null | ((formattedValue: string, value: number) => React.ReactNode) | undefined;
 }
 export declare namespace MeterValue {
+  type State = MeterValueState;
   type Props = MeterValueProps;
 }

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

@@ -13,11 +13,20 @@ export interface NavigationMenuArrowState {
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface NavigationMenuArrowProps extends BaseUIComponentProps<'div', NavigationMenuArrow.State> {}
+export interface NavigationMenuArrowProps extends BaseUIComponentProps<'div', NavigationMenuArrowState> {}
 export declare namespace NavigationMenuArrow {
   type State = NavigationMenuArrowState;
   type Props = NavigationMenuArrowProps;

package/navigation-menu/arrow/NavigationMenuArrow.js

@@ -33,12 +33,12 @@ const NavigationMenuArrow = exports.NavigationMenuArrow = /*#__PURE__*/React.for
     arrowUncentered,
     arrowStyles
   } = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/navigation-menu/arrow/NavigationMenuArrowDataAttributes.js

@@ -18,12 +18,12 @@ let NavigationMenuArrowDataAttributes = exports.NavigationMenuArrowDataAttribute
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuArrowDataAttributes["side"] = "data-side";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuArrowDataAttributes["align"] = "data-align";
+  NavigationMenuArrowDataAttributes[NavigationMenuArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popup arrow is uncentered.
    */

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

@@ -18,7 +18,7 @@ export interface NavigationMenuBackdropState {
    */
   transitionStatus: TransitionStatus;
 }
-export interface NavigationMenuBackdropProps extends BaseUIComponentProps<'div', NavigationMenuBackdrop.State> {}
+export interface NavigationMenuBackdropProps extends BaseUIComponentProps<'div', NavigationMenuBackdropState> {}
 export declare namespace NavigationMenuBackdrop {
   type State = NavigationMenuBackdropState;
   type Props = NavigationMenuBackdropProps;

package/navigation-menu/backdrop/NavigationMenuBackdrop.js

@@ -33,10 +33,10 @@ const NavigationMenuBackdrop = exports.NavigationMenuBackdrop = /*#__PURE__*/Rea
     mounted,
     transitionStatus
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

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

@@ -23,7 +23,14 @@ export interface NavigationMenuContentState {
    */
   activationDirection: 'left' | 'right' | 'up' | 'down' | null;
 }
-export interface NavigationMenuContentProps extends BaseUIComponentProps<'div', NavigationMenuContent.State> {}
+export interface NavigationMenuContentProps extends BaseUIComponentProps<'div', NavigationMenuContentState> {
+  /**
+   * Whether to keep the content mounted in the DOM while the popup is closed.
+   * Ensures the content is present during server-side rendering for web crawlers.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+}
 export declare namespace NavigationMenuContent {
   type State = NavigationMenuContentState;
   type Props = NavigationMenuContentProps;

package/navigation-menu/content/NavigationMenuContent.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NavigationMenuContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _inertValue = require("@base-ui/utils/inertValue");
 var _floatingUiReact = require("../../floating-ui-react");
 var _utils = require("../../floating-ui-react/utils");
@@ -18,6 +19,7 @@ var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _CompositeRoot = require("../../composite/root/CompositeRoot");
 var _popupStateMapping = require("../../utils/popupStateMapping");
+var _constants = require("../../utils/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -43,6 +45,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
   const {
     className,
     render,
+    keepMounted = false,
     ...elementProps
   } = componentProps;
   const {
@@ -59,6 +62,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
   const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
   const open = popupMounted && value === itemValue;
   const ref = React.useRef(null);
+  const [hasMountedInPortal, setHasMountedInPortal] = React.useState(false);
   const [focusInside, setFocusInside] = React.useState(false);
   const {
     mounted,
@@ -80,11 +84,21 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
       }
     }
   });
-  const state = React.useMemo(() => ({
+
+  // When a content re-enters while still mounted (e.g. switching top-level triggers
+  // back before the exit animation completes), the DOM element hasn't changed so the
+  // callback ref won't fire again. Ensure the shared ref is updated so the
+  // MutationObserver in the trigger watches the correct content element.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (open && ref.current) {
+      currentContentRef.current = ref.current;
+    }
+  }, [open, currentContentRef]);
+  const state = {
     open,
     transitionStatus,
     activationDirection
-  }), [open, transitionStatus, activationDirection]);
+  };
   const handleCurrentContentRef = React.useCallback(node => {
     if (node) {
       currentContentRef.current = node;
@@ -114,8 +128,24 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
     ...commonProps
   } : commonProps;
   const portalContainer = viewportTargetElement || viewportElement;
-  const shouldRender = portalContainer !== null && mounted;
-  if (!portalContainer || !shouldRender) {
+  const hidden = keepMounted && !mounted;
+  const shouldRenderInline = keepMounted && !portalContainer && !hasMountedInPortal;
+  if (keepMounted && portalContainer && !hasMountedInPortal) {
+    setHasMountedInPortal(true);
+  }
+  if (shouldRenderInline) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
+      render: render,
+      className: className,
+      state: state,
+      refs: [forwardedRef],
+      props: [defaultProps, {
+        hidden: true
+      }, elementProps],
+      stateAttributesMapping: stateAttributesMapping
+    });
+  }
+  if (!portalContainer || !mounted && !keepMounted) {
     return null;
   }
   return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingNode, {
@@ -125,7 +155,9 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
       className: className,
       state: state,
       refs: [forwardedRef, ref, handleCurrentContentRef],
-      props: [defaultProps, elementProps],
+      props: [defaultProps, hidden ? {
+        hidden: true
+      } : _constants.EMPTY_OBJECT, elementProps],
       stateAttributesMapping: stateAttributesMapping
     })
   }), portalContainer);

package/navigation-menu/icon/NavigationMenuIcon.d.ts

@@ -5,14 +5,14 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuIcon: React.ForwardRefExoticComponent<Omit<NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuIcon: React.ForwardRefExoticComponent<Omit<NavigationMenuIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface NavigationMenuIconState {
   /**
    * Whether the navigation menu is open and the item is active.
    */
   open: boolean;
 }
-export interface NavigationMenuIconProps extends BaseUIComponentProps<'span', NavigationMenuIcon.State> {}
+export interface NavigationMenuIconProps extends BaseUIComponentProps<'span', NavigationMenuIconState> {}
 export declare namespace NavigationMenuIcon {
   type State = NavigationMenuIconState;
   type Props = NavigationMenuIconProps;

package/navigation-menu/icon/NavigationMenuIcon.js

@@ -30,9 +30,9 @@ const NavigationMenuIcon = exports.NavigationMenuIcon = /*#__PURE__*/React.forwa
     value
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
   const isActiveItem = open && value === itemValue;
-  const state = React.useMemo(() => ({
+  const state = {
     open: isActiveItem
-  }), [isActiveItem]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,

package/navigation-menu/item/NavigationMenuItem.d.ts

@@ -6,9 +6,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export interface NavigationMenuItemState {}
-export interface NavigationMenuItemProps extends BaseUIComponentProps<'li', NavigationMenuItem.State> {
+export interface NavigationMenuItemProps extends BaseUIComponentProps<'li', NavigationMenuItemState> {
   /**
    * A unique value that identifies this navigation menu item.
    * If no value is provided, a unique ID will be generated automatically.

package/navigation-menu/item/NavigationMenuItemContext.js

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

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

@@ -13,17 +13,17 @@ export interface NavigationMenuLinkState {
    */
   active: boolean;
 }
-export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLink.State> {
+export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', NavigationMenuLinkState> {
   /**
    * Whether the link is the currently active page.
    * @default false
    */
-  active?: boolean;
+  active?: boolean | undefined;
   /**
    * Whether to close the navigation menu when the link is clicked.
    * @default false
    */
-  closeOnClick?: boolean;
+  closeOnClick?: boolean | undefined;
 }
 export declare namespace NavigationMenuLink {
   type State = NavigationMenuLinkState;

package/navigation-menu/link/NavigationMenuLink.js

@@ -36,9 +36,9 @@ const NavigationMenuLink = exports.NavigationMenuLink = /*#__PURE__*/React.forwa
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
   const nodeId = (0, _NavigationMenuRootContext.useNavigationMenuTreeContext)();
   const tree = (0, _floatingUiReact.useFloatingTree)();
-  const state = React.useMemo(() => ({
+  const state = {
     active
-  }), [active]);
+  };
   const defaultProps = {
     'aria-current': active ? 'page' : undefined,
     tabIndex: undefined,

package/navigation-menu/list/NavigationMenuDismissContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/navigation-menu/list/NavigationMenuList.d.ts

@@ -6,14 +6,14 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export interface NavigationMenuListState {
   /**
    * If `true`, the popup is open.
    */
   open: boolean;
 }
-export interface NavigationMenuListProps extends BaseUIComponentProps<'ul', NavigationMenuList.State> {}
+export interface NavigationMenuListProps extends BaseUIComponentProps<'ul', NavigationMenuListState> {}
 export declare namespace NavigationMenuList {
   type State = NavigationMenuListState;
   type Props = NavigationMenuListProps;

package/navigation-menu/list/NavigationMenuList.js

@@ -35,11 +35,18 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
     floatingRootContext,
     positionerElement,
     value,
+    closeDelay,
+    viewportElement,
     nested
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
   const fallbackContext = React.useMemo(() => (0, _getEmptyRootContext.getEmptyRootContext)(), []);
   const context = floatingRootContext || fallbackContext;
   const interactionsEnabled = positionerElement ? true : !value;
+  const hoverInteractionsEnabled = positionerElement || viewportElement ? true : !value;
+  (0, _floatingUiReact.useHoverFloatingInteraction)(context, {
+    enabled: Boolean(floatingRootContext) && hoverInteractionsEnabled,
+    closeDelay
+  });
   const dismiss = (0, _floatingUiReact.useDismiss)(context, {
     enabled: interactionsEnabled,
     outsidePressEvent: 'intentional',
@@ -50,14 +57,16 @@ const NavigationMenuList = exports.NavigationMenuList = /*#__PURE__*/React.forwa
     }
   });
   const dismissProps = floatingRootContext ? dismiss : undefined;
-  const state = React.useMemo(() => ({
+  const state = {
     open
-  }), [open]);
+  };
 
   // `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 ? {} : {
+  const defaultProps = nested ? {
+    'aria-orientation': orientation
+  } : {
     onKeyDown(event) {
       const shouldStop = orientation === 'horizontal' && (event.key === 'ArrowLeft' || event.key === 'ArrowRight') || orientation === 'vertical' && (event.key === 'ArrowUp' || event.key === 'ArrowDown');
       if (shouldStop) {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { Align, Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A container for the navigation menu contents.
  * Renders a `<nav>` element.
@@ -17,8 +18,20 @@ export interface NavigationMenuPopupState {
    * The transition status of the popup.
    */
   transitionStatus: TransitionStatus;
+  /**
+   * The side of the anchor the popup is positioned on.
+   */
+  side: Side;
+  /**
+   * The alignment of the popup relative to the anchor.
+   */
+  align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
+  anchorHidden: boolean;
 }
-export interface NavigationMenuPopupProps extends BaseUIComponentProps<'nav', NavigationMenuPopup.State> {}
+export interface NavigationMenuPopupProps extends BaseUIComponentProps<'nav', NavigationMenuPopupState> {}
 export declare namespace NavigationMenuPopup {
   type State = NavigationMenuPopupState;
   type Props = NavigationMenuPopupProps;

package/navigation-menu/popup/NavigationMenuPopup.js

@@ -40,13 +40,13 @@ const NavigationMenuPopup = exports.NavigationMenuPopup = /*#__PURE__*/React.for
   const positioning = (0, _NavigationMenuPositionerContext.useNavigationMenuPositionerContext)();
   const direction = (0, _DirectionContext.useDirection)();
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
-  }), [open, transitionStatus, positioning.side, positioning.align, positioning.anchorHidden]);
+  };
 
   // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
   let isOriginSide = positioning.side === 'top';

package/navigation-menu/popup/NavigationMenuPopupDataAttributes.js

@@ -26,11 +26,11 @@ let NavigationMenuPopupDataAttributes = exports.NavigationMenuPopupDataAttribute
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuPopupDataAttributes["side"] = "data-side";
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to the specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuPopupDataAttributes["align"] = "data-align";
+  NavigationMenuPopupDataAttributes[NavigationMenuPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   return NavigationMenuPopupDataAttributes;
 }({});

package/navigation-menu/portal/NavigationMenuPortal.d.ts

@@ -8,20 +8,19 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
 export declare const NavigationMenuPortal: React.ForwardRefExoticComponent<Omit<NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace NavigationMenuPortal {
-  interface State {}
-}
-export interface NavigationMenuPortalProps extends FloatingPortal.Props<NavigationMenuPortal.State> {
+export interface NavigationMenuPortalState {}
+export interface NavigationMenuPortalProps extends FloatingPortal.Props<NavigationMenuPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * A parent element to render the portal element into.
    */
-  container?: FloatingPortal.Props<NavigationMenuPortal.State>['container'];
+  container?: FloatingPortal.Props<NavigationMenuPortalState>['container'] | undefined;
 }
 export declare namespace NavigationMenuPortal {
+  type State = NavigationMenuPortalState;
   type Props = NavigationMenuPortalProps;
 }

package/navigation-menu/portal/NavigationMenuPortalContext.js

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

package/navigation-menu/positioner/NavigationMenuPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnchorPositioning.js";
+import { type Align, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 /**
  * Positions the navigation menu against the currently active trigger.
  * Renders a `<div>` element.
@@ -13,15 +13,24 @@ export interface NavigationMenuPositionerState {
    * Whether the navigation menu is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
   /**
    * Whether CSS transitions should be disabled.
    */
   instant: boolean;
 }
-export interface NavigationMenuPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', NavigationMenuPositioner.State> {}
+export interface NavigationMenuPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', NavigationMenuPositionerState> {}
 export declare namespace NavigationMenuPositioner {
   type State = NavigationMenuPositionerState;
   type Props = NavigationMenuPositionerProps;

package/navigation-menu/positioner/NavigationMenuPositioner.js

@@ -126,13 +126,13 @@ const NavigationMenuPositioner = exports.NavigationMenuPositioner = /*#__PURE__*
       }
     };
   }, [open, mounted, positioning.positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     instant
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, instant]);
+  };
   React.useEffect(() => {
     if (!open) {
       return undefined;

package/navigation-menu/positioner/NavigationPositionerDataAttributes.js

@@ -22,12 +22,12 @@ let NavigationMenuPositionerDataAttributes = exports.NavigationMenuPositionerDat
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  NavigationMenuPositionerDataAttributes["side"] = "data-side";
+  NavigationMenuPositionerDataAttributes[NavigationMenuPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to the specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  NavigationMenuPositionerDataAttributes["align"] = "data-align";
+  NavigationMenuPositionerDataAttributes[NavigationMenuPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    */

package/navigation-menu/root/NavigationMenuRoot.d.ts

@@ -19,15 +19,15 @@ export interface NavigationMenuRootState {
    */
   nested: boolean;
 }
-export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRoot.State> {
+export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', NavigationMenuRootState> {
   /**
    * A ref to imperative actions.
    */
-  actionsRef?: React.RefObject<NavigationMenuRoot.Actions | null>;
+  actionsRef?: React.RefObject<NavigationMenuRoot.Actions | null> | undefined;
   /**
    * Event handler called after any animations complete when the navigation menu is closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * The controlled value of the navigation menu item that should be currently open.
    * When non-nullish, the menu will be open. When nullish, the menu will be closed.
@@ -46,22 +46,22 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: any, eventDetails: NavigationMenuRoot.ChangeEventDetails) => void) | undefined;
   /**
-   * How long to wait before opening the navigation menu. Specified in milliseconds.
+   * How long to wait before opening the navigation popup. Specified in milliseconds.
    * @default 50
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
-   * How long to wait before closing the navigation menu. Specified in milliseconds.
+   * How long to wait before closing the navigation popup. Specified in milliseconds.
    * @default 50
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * The orientation of the navigation menu.
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical' | undefined;
 }
 export interface NavigationMenuRootActions {
   unmount: () => void;