@base-ui/react 1.1.0 → 1.3.0

package/esm/menu/checkbox-item/MenuCheckboxItem.d.ts

@@ -8,7 +8,7 @@ import type { MenuRoot } from "../root/MenuRoot.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuCheckboxItem: React.ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type MenuCheckboxItemState = {
+export interface MenuCheckboxItemState {
   /**
    * Whether the checkbox item should ignore user interaction.
    */
@@ -21,47 +21,47 @@ export type MenuCheckboxItemState = {
    * Whether the checkbox item is currently ticked.
    */
   checked: boolean;
-};
-export interface MenuCheckboxItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuCheckboxItem.State> {
+}
+export interface MenuCheckboxItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuCheckboxItemState> {
   /**
    * Whether the checkbox item is currently ticked.
    *
    * To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Whether the checkbox item is initially ticked.
    *
    * To render a controlled checkbox item, use the `checked` prop instead.
    * @default false
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Event handler called when the checkbox item is ticked or unticked.
    */
-  onCheckedChange?: (checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails) => void;
+  onCheckedChange?: ((checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails) => void) | undefined;
   /**
    * The click handler for the menu item.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', MenuCheckboxItemState>['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 type MenuCheckboxItemChangeEventReason = MenuRoot.ChangeEventReason;
 export type MenuCheckboxItemChangeEventDetails = MenuRoot.ChangeEventDetails;

package/esm/menu/checkbox-item/MenuCheckboxItemContext.js

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

package/esm/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.d.ts

@@ -3,17 +3,17 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 import { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Indicates whether the checkbox item is ticked.
- * Renders a `<div>` element.
+ * Renders a `<span>` element.
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<MenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface MenuCheckboxItemIndicatorProps extends BaseUIComponentProps<'span', MenuCheckboxItemIndicator.State> {
+export interface MenuCheckboxItemIndicatorProps extends BaseUIComponentProps<'span', MenuCheckboxItemIndicatorState> {
   /**
    * Whether to keep the HTML element in the DOM when the checkbox item is not checked.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface MenuCheckboxItemIndicatorState {
   /**
@@ -24,7 +24,13 @@ export interface MenuCheckboxItemIndicatorState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the item is highlighted.
+   */
   highlighted: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace MenuCheckboxItemIndicator {

package/esm/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js

@@ -9,7 +9,7 @@ import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 
 /**
  * Indicates whether the checkbox item is ticked.
- * 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 MenuCheckboxItemIndicator = /*#__PURE__*/React.forwardRef(function
       }
     }
   });
-  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,
     ref: [forwardedRef, indicatorRef],

package/esm/menu/group/MenuGroup.d.ts

@@ -7,7 +7,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuGroup: React.ForwardRefExoticComponent<Omit<MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MenuGroupProps extends BaseUIComponentProps<'div', MenuGroup.State> {
+export interface MenuGroupProps extends BaseUIComponentProps<'div', MenuGroupState> {
   /**
    * The content of the component.
    */

package/esm/menu/group/MenuGroupContext.js

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

package/esm/menu/group-label/MenuGroupLabel.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
 export declare const MenuGroupLabel: React.ForwardRefExoticComponent<Omit<MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface MenuGroupLabelProps extends BaseUIComponentProps<'div', MenuGroupLabel.State> {}
+export interface MenuGroupLabelProps extends BaseUIComponentProps<'div', MenuGroupLabelState> {}
 export interface MenuGroupLabelState {}
 export declare namespace MenuGroupLabel {
   type Props = MenuGroupLabelProps;

package/esm/menu/index.d.ts

@@ -4,9 +4,10 @@ export type * from "./arrow/MenuArrow.js";
 export type * from "./backdrop/MenuBackdrop.js";
 export type * from "./checkbox-item/MenuCheckboxItem.js";
 export type * from "./checkbox-item-indicator/MenuCheckboxItemIndicator.js";
-export type * from "./group/MenuGroup.js";
 export type * from "./group-label/MenuGroupLabel.js";
+export type * from "./group/MenuGroup.js";
 export type * from "./item/MenuItem.js";
+export type * from "./link-item/MenuLinkItem.js";
 export type * from "./popup/MenuPopup.js";
 export type * from "./portal/MenuPortal.js";
 export type * from "./positioner/MenuPositioner.js";
@@ -15,4 +16,5 @@ export type * from "./radio-item/MenuRadioItem.js";
 export type * from "./radio-item-indicator/MenuRadioItemIndicator.js";
 export type * from "./submenu-root/MenuSubmenuRoot.js";
 export type * from "./trigger/MenuTrigger.js";
-export type * from "./submenu-trigger/MenuSubmenuTrigger.js";
+export type * from "./submenu-trigger/MenuSubmenuTrigger.js";
+export type * from "./viewport/MenuViewport.js";

package/esm/menu/index.parts.d.ts

@@ -5,6 +5,7 @@ export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "./checkbox-i
 export { MenuGroup as Group } from "./group/MenuGroup.js";
 export { MenuGroupLabel as GroupLabel } from "./group-label/MenuGroupLabel.js";
 export { MenuItem as Item } from "./item/MenuItem.js";
+export { MenuLinkItem as LinkItem } from "./link-item/MenuLinkItem.js";
 export { MenuPopup as Popup } from "./popup/MenuPopup.js";
 export { MenuPortal as Portal } from "./portal/MenuPortal.js";
 export { MenuPositioner as Positioner } from "./positioner/MenuPositioner.js";
@@ -14,6 +15,7 @@ export { MenuRadioItemIndicator as RadioItemIndicator } from "./radio-item-indic
 export { MenuRoot as Root } from "./root/MenuRoot.js";
 export { MenuSubmenuRoot as SubmenuRoot } from "./submenu-root/MenuSubmenuRoot.js";
 export { MenuTrigger as Trigger } from "./trigger/MenuTrigger.js";
+export { MenuViewport as Viewport } from "./viewport/MenuViewport.js";
 export { Separator } from "../separator/Separator.js";
 export { MenuSubmenuTrigger as SubmenuTrigger } from "./submenu-trigger/MenuSubmenuTrigger.js";
 export { MenuHandle as Handle, createMenuHandle as createHandle } from "./store/MenuHandle.js";

package/esm/menu/index.parts.js

@@ -5,6 +5,7 @@ export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "./checkbox-i
 export { MenuGroup as Group } from "./group/MenuGroup.js";
 export { MenuGroupLabel as GroupLabel } from "./group-label/MenuGroupLabel.js";
 export { MenuItem as Item } from "./item/MenuItem.js";
+export { MenuLinkItem as LinkItem } from "./link-item/MenuLinkItem.js";
 export { MenuPopup as Popup } from "./popup/MenuPopup.js";
 export { MenuPortal as Portal } from "./portal/MenuPortal.js";
 export { MenuPositioner as Positioner } from "./positioner/MenuPositioner.js";
@@ -14,6 +15,7 @@ export { MenuRadioItemIndicator as RadioItemIndicator } from "./radio-item-indic
 export { MenuRoot as Root } from "./root/MenuRoot.js";
 export { MenuSubmenuRoot as SubmenuRoot } from "./submenu-root/MenuSubmenuRoot.js";
 export { MenuTrigger as Trigger } from "./trigger/MenuTrigger.js";
+export { MenuViewport as Viewport } from "./viewport/MenuViewport.js";
 export { Separator } from "../separator/Separator.js";
 export { MenuSubmenuTrigger as SubmenuTrigger } from "./submenu-trigger/MenuSubmenuTrigger.js";
 export { MenuHandle as Handle, createMenuHandle as createHandle } from "./store/MenuHandle.js";

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

@@ -17,30 +17,30 @@ export interface MenuItemState {
    */
   highlighted: boolean;
 }
-export interface MenuItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuItem.State> {
+export interface MenuItemProps extends NonNativeButtonProps, BaseUIComponentProps<'div', MenuItemState> {
   /**
    * The click handler for the menu item.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', MenuItemState>['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 true
    */
-  closeOnClick?: boolean;
+  closeOnClick?: boolean | undefined;
 }
 export declare namespace MenuItem {
   type State = MenuItemState;

package/esm/menu/item/MenuItem.js

@@ -48,10 +48,10 @@ export const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(componen
     nodeId: menuPositionerContext?.nodeId,
     itemMetadata: REGULAR_ITEM
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     highlighted
-  }), [disabled, highlighted]);
+  };
   return useRenderElement('div', componentProps, {
     state,
     props: [itemProps, elementProps, getItemProps],

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

@@ -4,7 +4,7 @@ import { MenuStore } from "../store/MenuStore.js";
 export declare const REGULAR_ITEM: {
   type: "regular-item";
 };
-export declare function useMenuItem(params: useMenuItem.Parameters): useMenuItem.ReturnValue;
+export declare function useMenuItem(params: UseMenuItemParameters): UseMenuItemReturnValue;
 export interface UseMenuItemParameters {
   /**
    * Whether to close the menu when the item is clicked.
@@ -32,7 +32,7 @@ export interface UseMenuItemParameters {
   /**
    * Additional data specific to the item type.
    */
-  itemMetadata: useMenuItem.Metadata;
+  itemMetadata: UseMenuItemMetadata;
   /**
    * The node id of the menu positioner.
    */
@@ -41,6 +41,11 @@ export interface UseMenuItemParameters {
    * The menu store.
    */
   store: MenuStore<any>;
+  /**
+   * Whether a typeahead session is in progress.
+   * @default store.context.typingRef
+   */
+  typingRef?: React.RefObject<boolean> | undefined;
 }
 export type UseMenuItemMetadata = typeof REGULAR_ITEM | {
   type: 'submenu-trigger';
@@ -58,8 +63,4 @@ export interface UseMenuItemReturnValue {
    */
   itemRef: React.RefCallback<HTMLElement> | null;
 }
-export declare namespace useMenuItem {
-  type Parameters = UseMenuItemParameters;
-  type Metadata = UseMenuItemMetadata;
-  type ReturnValue = UseMenuItemReturnValue;
-}
+export interface UseMenuItemState {}

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'
 };
@@ -16,78 +15,41 @@ export function useMenuItem(params) {
     highlighted,
     id,
     store,
+    typingRef = store.context.typingRef,
     nativeButton,
     itemMetadata,
     nodeId
   } = params;
   const itemRef = React.useRef(null);
-  const contextMenuContext = useContextMenuRootContext(true);
-  const isContextMenu = contextMenuContext !== undefined;
-  const {
-    events: menuEvents
-  } = store.useState('floatingTreeRoot');
   const {
     getButtonProps,
     buttonRef
   } = useButton({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
+  });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    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;
         }
         itemMetadata.setActive();
-      },
-      onKeyUp(event) {
-        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, itemMetadata]);
   const mergedRef = useMergedRefs(itemRef, buttonRef);
   return React.useMemo(() => ({
     getItemProps,

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

@@ -0,0 +1,46 @@
+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>;
+  /**
+   * Whether a typeahead session is in progress.
+   */
+  typingRef?: React.RefObject<boolean> | undefined;
+  /**
+   * 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, onKeyDown,
+ * onMouseMove, onClick, and onMouseUp handlers.
+ */
+export declare function useMenuItemCommonProps(params: UseMenuItemCommonPropsParameters): HTMLProps;
+export interface UseMenuItemCommonPropsState {}

package/esm/menu/item/useMenuItemCommonProps.js

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { isMac } from '@base-ui/utils/detectBrowser';
+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, onKeyDown,
+ * onMouseMove, onClick, and onMouseUp handlers.
+ */
+export function useMenuItemCommonProps(params) {
+  const {
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    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,
+    onKeyDown(event) {
+      if (event.key === ' ' && typingRef?.current) {
+        event.preventDefault();
+      }
+    },
+    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;
+        }
+
+        // On non-macOS platforms, this mouseup belongs to the right-click gesture
+        // that opened the context menu, so it must not activate an item.
+        if (isContextMenu && !isMac && event.button === 2) {
+          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, typingRef, 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', MenuLinkItemState> {
+  /**
+   * 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,69 @@
+'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";
+import { useButton } from "../../use-button/index.js";
+import { mergeProps } from "../../merge-props/index.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 typingRef = store.context.typingRef;
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    native: false,
+    composite: true
+  });
+  const commonProps = useMenuItemCommonProps({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    typingRef,
+    itemRef: linkRef
+  });
+  function getItemProps(externalProps) {
+    return mergeProps(commonProps, externalProps, getButtonProps);
+  }
+  const state = React.useMemo(() => ({
+    highlighted
+  }), [highlighted]);
+  return useRenderElement('a', componentProps, {
+    state,
+    props: [itemProps, elementProps, getItemProps],
+    ref: [linkRef, buttonRef, 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;
+}({});