@base-ui/react 1.1.0 → 1.2.0

package/esm/menu/item/useMenuItem.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useButton } from "../../use-button/index.js";
 import { mergeProps } from "../../merge-props/index.js";
-import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useMenuItemCommonProps } from "./useMenuItemCommonProps.js";
 export const REGULAR_ITEM = {
   type: 'regular-item'
 };
@@ -21,11 +20,6 @@ export function useMenuItem(params) {
     nodeId
   } = params;
   const itemRef = React.useRef(null);
-  const contextMenuContext = useContextMenuRootContext(true);
-  const isContextMenu = contextMenuContext !== undefined;
-  const {
-    events: menuEvents
-  } = store.useState('floatingTreeRoot');
   const {
     getButtonProps,
     buttonRef
@@ -34,23 +28,17 @@ export function useMenuItem(params) {
     focusableWhenDisabled: true,
     native: nativeButton
   });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    itemRef,
+    itemMetadata
+  });
   const getItemProps = React.useCallback(externalProps => {
-    return mergeProps({
-      id,
-      role: 'menuitem',
-      tabIndex: highlighted ? 0 : -1,
-      onMouseMove(event) {
-        if (!nodeId) {
-          return;
-        }
-
-        // Inform the floating tree that a menu item within this menu was hovered/moved over
-        // so unrelated descendant submenus can be closed.
-        menuEvents.emit('itemhover', {
-          nodeId,
-          target: event.currentTarget
-        });
-      },
+    return mergeProps(commonProps, {
       onMouseEnter() {
         if (itemMetadata.type !== 'submenu-trigger') {
           return;
@@ -61,33 +49,9 @@ export function useMenuItem(params) {
         if (event.key === ' ' && store.context.typingRef.current) {
           event.preventBaseUIHandler();
         }
-      },
-      onClick(event) {
-        if (closeOnClick) {
-          menuEvents.emit('close', {
-            domEvent: event,
-            reason: REASONS.itemPress
-          });
-        }
-      },
-      onMouseUp(event) {
-        if (contextMenuContext) {
-          const initialCursorPoint = contextMenuContext.initialCursorPointRef.current;
-          contextMenuContext.initialCursorPointRef.current = null;
-          if (isContextMenu && initialCursorPoint && Math.abs(event.clientX - initialCursorPoint.x) <= 1 && Math.abs(event.clientY - initialCursorPoint.y) <= 1) {
-            return;
-          }
-        }
-        if (itemRef.current && store.context.allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
-          // This fires whenever the user clicks on the trigger, moves the cursor, and releases it over the item.
-          // We trigger the click and override the `closeOnClick` preference to always close the menu.
-          if (itemMetadata.type === 'regular-item') {
-            itemRef.current.click();
-          }
-        }
       }
     }, externalProps, getButtonProps);
-  }, [id, highlighted, getButtonProps, closeOnClick, menuEvents, store, isContextMenu, contextMenuContext, itemMetadata, nodeId]);
+  }, [commonProps, getButtonProps, store, itemMetadata]);
   const mergedRef = useMergedRefs(itemRef, buttonRef);
   return React.useMemo(() => ({
     getItemProps,

package/esm/menu/item/useMenuItemCommonProps.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { HTMLProps } from "../../utils/types.js";
+import { MenuStore } from "../store/MenuStore.js";
+import type { UseMenuItemMetadata } from "./useMenuItem.js";
+export interface UseMenuItemCommonPropsParameters {
+  /**
+   * Whether to close the menu when the item is clicked.
+   */
+  closeOnClick: boolean;
+  /**
+   * Determines if the menu item is highlighted.
+   */
+  highlighted: boolean;
+  /**
+   * The id of the menu item.
+   */
+  id: string | undefined;
+  /**
+   * The node id of the menu positioner.
+   */
+  nodeId: string | undefined;
+  /**
+   * The menu store.
+   */
+  store: MenuStore<any>;
+  /**
+   * Ref to the item element.
+   */
+  itemRef: React.RefObject<HTMLElement | null>;
+  /**
+   * Optional metadata for checking item type before triggering click.
+   * If provided, click will only be triggered for 'regular-item' type.
+   */
+  itemMetadata?: UseMenuItemMetadata | undefined;
+}
+/**
+ * Returns common props shared by all menu item types.
+ * This hook extracts the shared logic for id, role, tabIndex, onMouseMove, onClick, and onMouseUp handlers.
+ */
+export declare function useMenuItemCommonProps(params: UseMenuItemCommonPropsParameters): HTMLProps;
+export declare namespace useMenuItemCommonProps {
+  type Parameters = UseMenuItemCommonPropsParameters;
+}

package/esm/menu/item/useMenuItemCommonProps.js

@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+import { REASONS } from "../../utils/reasons.js";
+import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
+/**
+ * Returns common props shared by all menu item types.
+ * This hook extracts the shared logic for id, role, tabIndex, onMouseMove, onClick, and onMouseUp handlers.
+ */
+export function useMenuItemCommonProps(params) {
+  const {
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    itemRef,
+    itemMetadata
+  } = params;
+  const {
+    events: menuEvents
+  } = store.useState('floatingTreeRoot');
+  const contextMenuContext = useContextMenuRootContext(true);
+  const isContextMenu = contextMenuContext !== undefined;
+  return React.useMemo(() => ({
+    id,
+    role: 'menuitem',
+    tabIndex: highlighted ? 0 : -1,
+    onMouseMove(event) {
+      if (!nodeId) {
+        return;
+      }
+
+      // Inform the floating tree that a menu item within this menu was hovered/moved over
+      // so unrelated descendant submenus can be closed.
+      menuEvents.emit('itemhover', {
+        nodeId,
+        target: event.currentTarget
+      });
+    },
+    onClick(event) {
+      if (closeOnClick) {
+        menuEvents.emit('close', {
+          domEvent: event,
+          reason: REASONS.itemPress
+        });
+      }
+    },
+    onMouseUp(event) {
+      if (contextMenuContext) {
+        const initialCursorPoint = contextMenuContext.initialCursorPointRef.current;
+        contextMenuContext.initialCursorPointRef.current = null;
+        if (isContextMenu && initialCursorPoint && Math.abs(event.clientX - initialCursorPoint.x) <= 1 && Math.abs(event.clientY - initialCursorPoint.y) <= 1) {
+          return;
+        }
+      }
+      if (itemRef.current && store.context.allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
+        // This fires whenever the user clicks on the trigger, moves the cursor, and releases it over the item.
+        // We trigger the click and override the `closeOnClick` preference to always close the menu.
+        if (!itemMetadata || itemMetadata.type === 'regular-item') {
+          itemRef.current.click();
+        }
+      }
+    }
+  }), [closeOnClick, highlighted, id, menuEvents, nodeId, store, itemRef, contextMenuContext, isContextMenu, itemMetadata]);
+}

package/esm/menu/link-item/MenuLinkItem.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A link in the menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare const MenuLinkItem: React.ForwardRefExoticComponent<Omit<MenuLinkItemProps, "ref"> & React.RefAttributes<Element>>;
+export interface MenuLinkItemState {
+  /**
+   * Whether the item is highlighted.
+   */
+  highlighted: boolean;
+}
+export interface MenuLinkItemProps extends BaseUIComponentProps<'a', MenuLinkItem.State> {
+  /**
+   * Overrides the text label to use when the item is matched during keyboard text navigation.
+   */
+  label?: string | undefined;
+  /**
+   * @ignore
+   */
+  id?: string | undefined;
+  /**
+   * Whether to close the menu when the item is clicked.
+   * @default false
+   */
+  closeOnClick?: boolean | undefined;
+}
+export declare namespace MenuLinkItem {
+  type State = MenuLinkItemState;
+  type Props = MenuLinkItemProps;
+}

package/esm/menu/link-item/MenuLinkItem.js

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import { useMenuRootContext } from "../root/MenuRootContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useMenuPositionerContext } from "../positioner/MenuPositionerContext.js";
+import { useMenuItemCommonProps } from "../item/useMenuItemCommonProps.js";
+
+/**
+ * A link in the menu that can be used to navigate to a different page or section.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    label,
+    closeOnClick = false,
+    ...elementProps
+  } = componentProps;
+  const linkRef = React.useRef(null);
+  const listItem = useCompositeListItem({
+    label
+  });
+  const menuPositionerContext = useMenuPositionerContext(true);
+  const nodeId = menuPositionerContext?.nodeId;
+  const id = useBaseUiId(idProp);
+  const {
+    store
+  } = useMenuRootContext();
+  const highlighted = store.useState('isActive', listItem.index);
+  const itemProps = store.useState('itemProps');
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    itemRef: linkRef
+  });
+  const state = React.useMemo(() => ({
+    highlighted
+  }), [highlighted]);
+  return useRenderElement('a', componentProps, {
+    state,
+    props: [itemProps, elementProps, commonProps],
+    ref: [linkRef, forwardedRef, listItem.ref]
+  });
+});
+if (process.env.NODE_ENV !== "production") MenuLinkItem.displayName = "MenuLinkItem";

package/esm/menu/link-item/MenuLinkItemDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum MenuLinkItemDataAttributes {
+  /**
+   * Present when the link is highlighted.
+   */
+  highlighted = "data-highlighted",
+}

package/esm/menu/link-item/MenuLinkItemDataAttributes.js

@@ -0,0 +1,7 @@
+export let MenuLinkItemDataAttributes = /*#__PURE__*/function (MenuLinkItemDataAttributes) {
+  /**
+   * Present when the link is highlighted.
+   */
+  MenuLinkItemDataAttributes["highlighted"] = "data-highlighted";
+  return MenuLinkItemDataAttributes;
+}({});

package/esm/menu/popup/MenuPopup.d.ts

@@ -15,7 +15,7 @@ export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopup.St
   /**
    * @ignore
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Determines the element to focus when the menu is closed.
    *
@@ -25,7 +25,7 @@ export interface MenuPopupProps extends BaseUIComponentProps<'div', MenuPopup.St
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void);
+  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
 }
 export type MenuPopupState = {
   transitionStatus: TransitionStatus;
@@ -36,6 +36,7 @@ export type MenuPopupState = {
    */
   open: boolean;
   nested: boolean;
+  instant: 'dismiss' | 'click' | 'group' | undefined;
 };
 export declare namespace MenuPopup {
   type Props = MenuPopupProps;

package/esm/menu/popup/MenuPopup.js

@@ -78,14 +78,14 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
-  const state = React.useMemo(() => ({
+  const state = {
     transitionStatus,
     side,
     align,
     open,
     nested: parent.type === 'menu',
     instant: instantType
-  }), [transitionStatus, side, align, open, parent.type, instantType]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef],

package/esm/menu/popup/MenuPopupDataAttributes.js

@@ -20,12 +20,12 @@ export let MenuPopupDataAttributes = function (MenuPopupDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  MenuPopupDataAttributes["side"] = "data-side";
+  MenuPopupDataAttributes[MenuPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  MenuPopupDataAttributes["align"] = "data-align";
+  MenuPopupDataAttributes[MenuPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss' | 'group'}

package/esm/menu/portal/MenuPortal.d.ts

@@ -16,7 +16,7 @@ export interface MenuPortalProps extends FloatingPortal.Props<MenuPortal.State>
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace MenuPortal {
   type Props = MenuPortalProps;

package/esm/menu/portal/MenuPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const MenuPortalContext = /*#__PURE__*/React.createContext(undefined);

package/esm/menu/positioner/MenuPositioner.js

@@ -12,6 +12,7 @@ import { CompositeList } from "../../composite/list/CompositeList.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
 import { useMenuPortalContext } from "../portal/MenuPortalContext.js";
 import { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
@@ -52,6 +53,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
   const open = store.useState('open');
   const modal = store.useState('modal');
   const triggerElement = store.useState('activeTriggerElement');
+  const transitionStatus = store.useState('transitionStatus');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const floatingNodeId = store.useState('floatingNodeId');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
@@ -96,7 +98,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     keepMounted,
     disableAnchorTracking,
     collisionAvoidance,
-    shiftCrossAxis: contextMenu,
+    shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
     externalTree: floatingTreeRoot
   });
   const positionerProps = React.useMemo(() => {
@@ -122,14 +124,6 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
         if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select('floatingParentNodeId')) {
           store.setOpen(false, createChangeEventDetails(REASONS.siblingOpen));
         }
-      } else if (details.parentNodeId === floatingNodeId) {
-        // Re-enable hover on the parent when a child closes, except when the child
-        // closed due to hovering a different sibling item in this parent (sibling-open).
-        // Keeping hover disabled in that scenario prevents the parent from closing
-        // immediately when the pointer then leaves it.
-        if (details.reason !== REASONS.siblingOpen) {
-          store.set('hoverEnabled', true);
-        }
       }
     }
     floatingTreeRoot.events.on('menuopenchange', onMenuOpenChange);
@@ -180,13 +174,13 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     };
     floatingTreeRoot.events.emit('menuopenchange', eventDetails);
   }, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioner.side,
     align: positioner.align,
     anchorHidden: positioner.anchorHidden,
     nested: parent.type === 'menu'
-  }), [open, positioner.side, positioner.align, positioner.anchorHidden, parent.type]);
+  };
   const contextValue = React.useMemo(() => ({
     side: positioner.side,
     align: positioner.align,
@@ -199,7 +193,7 @@ export const MenuPositioner = /*#__PURE__*/React.forwardRef(function MenuPositio
     state,
     stateAttributesMapping: popupStateMapping,
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, elementProps]
+    props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
   const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== REASONS.triggerHover || parent.type === 'menubar' && parent.context.modal);
 

package/esm/menu/positioner/MenuPositionerDataAttributes.js

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

package/esm/menu/radio-group/MenuRadioGroup.d.ts

@@ -28,13 +28,13 @@ export interface MenuRadioGroupProps extends BaseUIComponentProps<'div', MenuRad
   /**
    * Function called when the selected value changes.
    */
-  onValueChange?: (value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) => void;
+  onValueChange?: ((value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the component should ignore user interaction.
    *
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export type MenuRadioGroupState = {
   disabled: boolean;

package/esm/menu/radio-group/MenuRadioGroup.js

@@ -35,9 +35,9 @@ export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
     }
     setValueUnwrapped(newValue);
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/menu/radio-group/MenuRadioGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const MenuRadioGroupContext = /*#__PURE__*/React.createContext(undefined);

package/esm/menu/radio-item/MenuRadioItem.d.ts

@@ -30,25 +30,25 @@ export interface MenuRadioItemProps extends NonNativeButtonProps, BaseUIComponen
   /**
    * The click handler for the menu item.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', MenuRadioItemState>['onClick'] | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Overrides the text label to use when the item is matched during keyboard text navigation.
    */
-  label?: string;
+  label?: string | undefined;
   /**
    * @ignore
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether to close the menu when the item is clicked.
    * @default false
    */
-  closeOnClick?: boolean;
+  closeOnClick?: boolean | undefined;
 }
 export declare namespace MenuRadioItem {
   type State = MenuRadioItemState;

package/esm/menu/radio-item/MenuRadioItemContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const MenuRadioItemContext = /*#__PURE__*/React.createContext(undefined);

package/esm/menu/radio-item-indicator/MenuRadioItemIndicator.d.ts

@@ -3,7 +3,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 import { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Indicates whether the radio item is selected.
- * Renders a `<div>` element.
+ * Renders a `<span>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -13,7 +13,7 @@ export interface MenuRadioItemIndicatorProps extends BaseUIComponentProps<'span'
    * Whether to keep the HTML element in the DOM when the radio item is inactive.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface MenuRadioItemIndicatorState {
   /**

package/esm/menu/radio-item-indicator/MenuRadioItemIndicator.js

@@ -9,7 +9,7 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 
 /**
  * Indicates whether the radio item is selected.
- * Renders a `<div>` element.
+ * Renders a `<span>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
@@ -35,12 +35,12 @@ export const MenuRadioItemIndicator = /*#__PURE__*/React.forwardRef(function Men
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     checked: item.checked,
     disabled: item.disabled,
     highlighted: item.highlighted,
     transitionStatus
-  }), [item.checked, item.disabled, item.highlighted, transitionStatus]);
+  };
   const element = useRenderElement('span', componentProps, {
     state,
     stateAttributesMapping: itemMapping,