@base-ui/react 1.0.0 → 1.2.0

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

@@ -8,7 +8,7 @@ import { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuContentState {
   /**
    * If `true`, the component is open.
@@ -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', NavigationMenuContent.State> {
+  /**
+   * 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

@@ -18,6 +18,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 +44,7 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
   const {
     className,
     render,
+    keepMounted = false,
     ...elementProps
   } = componentProps;
   const {
@@ -59,12 +61,19 @@ 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,
     setMounted,
     transitionStatus
   } = (0, _useTransitionStatus.useTransitionStatus)(open);
+
+  // If the popup unmounts before the content's exit animation completes, reset the internal
+  // mounted state so the next open can re-enter via `transitionStatus="starting"`.
+  if (mounted && !popupMounted) {
+    setMounted(false);
+  }
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     ref,
     open,
@@ -74,11 +83,11 @@ const NavigationMenuContent = exports.NavigationMenuContent = /*#__PURE__*/React
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus,
     activationDirection
-  }), [open, transitionStatus, activationDirection]);
+  };
   const handleCurrentContentRef = React.useCallback(node => {
     if (node) {
       currentContentRef.current = node;
@@ -108,8 +117,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, {
@@ -119,7 +144,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,7 +5,7 @@ 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<NavigationMenuIconProps & 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.

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,7 +6,7 @@ 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<NavigationMenuItemProps & 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> {
   /**

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

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenuLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export interface NavigationMenuLinkState {
   /**
    * Whether the link is the currently active page.
@@ -18,12 +18,12 @@ export interface NavigationMenuLinkProps extends BaseUIComponentProps<'a', Navig
    * 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,7 +6,7 @@ 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<NavigationMenuListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export interface NavigationMenuListState {
   /**
    * If `true`, the popup is open.

package/navigation-menu/list/NavigationMenuList.js

@@ -50,9 +50,9 @@ 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.

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

@@ -1,13 +1,14 @@
 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.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuPopup: React.ForwardRefExoticComponent<NavigationMenuPopupProps & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenuPopup: React.ForwardRefExoticComponent<Omit<NavigationMenuPopupProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface NavigationMenuPopupState {
   /**
    * If `true`, the popup is open.
@@ -17,6 +18,18 @@ 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 declare namespace NavigationMenuPopup {

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

@@ -7,7 +7,7 @@ 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<NavigationMenuPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuPortal: React.ForwardRefExoticComponent<Omit<NavigationMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace NavigationMenuPortal {
   interface State {}
 }
@@ -16,11 +16,11 @@ export interface NavigationMenuPortalProps extends FloatingPortal.Props<Navigati
    * 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<NavigationMenuPortal.State>['container'] | undefined;
 }
 export declare namespace NavigationMenuPortal {
   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

@@ -7,7 +7,7 @@ import { useAnchorPositioning, type Align, type Side } from "../../utils/useAnch
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuPositioner: React.ForwardRefExoticComponent<NavigationMenuPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuPositioner: React.ForwardRefExoticComponent<Omit<NavigationMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NavigationMenuPositionerState {
   /**
    * Whether the navigation menu is currently open.

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

@@ -8,7 +8,7 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuRoot: React.ForwardRefExoticComponent<NavigationMenuRootProps & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenuRoot: React.ForwardRefExoticComponent<Omit<NavigationMenuRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface NavigationMenuRootState {
   /**
    * If `true`, the popup is open.
@@ -23,11 +23,11 @@ export interface NavigationMenuRootProps extends BaseUIComponentProps<'nav', Nav
   /**
    * A ref to imperative actions.
    */
-  actionsRef?: React.RefObject<NavigationMenuRoot.Actions>;
+  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.
    * @default 50
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the navigation menu. 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;

package/navigation-menu/root/NavigationMenuRoot.js

@@ -202,10 +202,10 @@ function TreeContext(props) {
   const {
     open
   } = (0, _NavigationMenuRootContext.useNavigationMenuRootContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     nested
-  }), [open, nested]);
+  };
   const element = (0, _useRenderElement.useRenderElement)(nested ? 'div' : 'nav', props.componentProps, {
     state,
     ref: [props.forwardedRef, rootRef],

package/navigation-menu/root/NavigationMenuRootContext.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/trigger/NavigationMenuTrigger.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  *
  * Documentation: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu)
  */
-export declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface NavigationMenuTriggerState {
   /**
    * If `true`, the popup is open and the item is active.