@base-ui/react 1.0.0 → 1.2.0

package/labelable-provider/LabelableProvider.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LabelableProvider = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _mergeProps = require("../merge-props");
 var _useBaseUiId = require("../utils/useBaseUiId");
 var _LabelableContext = require("./LabelableContext");
@@ -16,12 +18,40 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 const LabelableProvider = exports.LabelableProvider = function LabelableProvider(props) {
   const defaultId = (0, _useBaseUiId.useBaseUiId)();
-  const [controlId, setControlId] = React.useState(props.initialControlId === undefined ? defaultId : props.initialControlId);
+  const [controlId, setControlIdState] = React.useState(props.initialControlId === undefined ? defaultId : props.initialControlId);
   const [labelId, setLabelId] = React.useState(undefined);
   const [messageIds, setMessageIds] = React.useState([]);
+  const registrationsRef = (0, _useRefWithInit.useRefWithInit)(() => new Map());
   const {
     messageIds: parentMessageIds
   } = (0, _LabelableContext.useLabelableContext)();
+  const registerControlId = (0, _useStableCallback.useStableCallback)((source, nextId) => {
+    const registrations = registrationsRef.current;
+    if (nextId === undefined) {
+      registrations.delete(source);
+      return;
+    }
+    registrations.set(source, nextId);
+
+    // Only flush when registering, not when unregistering.
+    // This prevents loops during rapid unmount/remount cycles (e.g. React Activity).
+    // The next registration will pick up the correct state.
+    setControlIdState(prev => {
+      if (registrations.size === 0) {
+        return undefined;
+      }
+      let nextControlId;
+      for (const id of registrations.values()) {
+        if (prev !== undefined && id === prev) {
+          return prev;
+        }
+        if (nextControlId === undefined) {
+          nextControlId = id;
+        }
+      }
+      return nextControlId;
+    });
+  });
   const getDescriptionProps = React.useCallback(externalProps => {
     return (0, _mergeProps.mergeProps)({
       'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || undefined
@@ -29,13 +59,13 @@ const LabelableProvider = exports.LabelableProvider = function LabelableProvider
   }, [parentMessageIds, messageIds]);
   const contextValue = React.useMemo(() => ({
     controlId,
-    setControlId,
+    registerControlId,
     labelId,
     setLabelId,
     messageIds,
     setMessageIds,
     getDescriptionProps
-  }), [controlId, setControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
+  }), [controlId, registerControlId, labelId, setLabelId, messageIds, setMessageIds, getDescriptionProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelableContext.LabelableContext.Provider, {
     value: contextValue,
     children: props.children

package/labelable-provider/useLabelableId.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export declare function useLabelableId(params?: useLabelableId.Parameters): string | undefined;
 export interface UseLabelableIdParameters {
   id?: string | undefined;
@@ -5,11 +6,11 @@ export interface UseLabelableIdParameters {
    * Whether implicit labelling is supported.
    * @default false
    */
-  implicit?: boolean;
+  implicit?: boolean | undefined;
   /**
    * A ref to an element that can be implicitly labelled.
    */
-  controlRef?: React.RefObject<HTMLElement | null>;
+  controlRef?: React.RefObject<HTMLElement | null> | undefined;
 }
 export type UseLabelableIdReturnValue = string;
 export declare namespace useLabelableId {

package/labelable-provider/useLabelableId.js

@@ -1,11 +1,15 @@
 "use strict";
 'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLabelableId = useLabelableId;
+var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _dom = require("@floating-ui/utils/dom");
 var _noop = require("../utils/noop");
 var _useBaseUiId = require("../utils/useBaseUiId");
@@ -18,28 +22,51 @@ function useLabelableId(params = {}) {
   } = params;
   const {
     controlId,
-    setControlId
+    registerControlId
   } = (0, _LabelableContext.useLabelableContext)();
   const defaultId = (0, _useBaseUiId.useBaseUiId)(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = (0, _useRefWithInit.useRefWithInit)(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React.useRef(false);
+  const hadExplicitIdRef = React.useRef(id != null);
+  const unregisterControlId = (0, _useStableCallback.useStableCallback)(() => {
+    if (!hasRegisteredRef.current || registerControlId === _noop.NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!implicit && !id || setControlId === _noop.NOOP) {
+    if (registerControlId === _noop.NOOP) {
       return undefined;
     }
+    let nextId;
     if (implicit) {
       const elem = controlRef?.current;
       if ((0, _dom.isElement)(elem) && elem.closest('label') != null) {
-        setControlId(id ?? null);
+        nextId = id ?? null;
       } else {
-        setControlId(controlId ?? defaultId);
+        nextId = controlIdForEffect ?? defaultId;
       }
-    } else if (id) {
-      setControlId(id);
+    } else if (id != null) {
+      hadExplicitIdRef.current = true;
+      nextId = id;
+    } else if (hadExplicitIdRef.current) {
+      nextId = defaultId;
+    } else {
+      unregisterControlId();
+      return undefined;
     }
-    return () => {
-      if (id) {
-        setControlId(undefined);
-      }
-    };
-  }, [id, controlRef, controlId, setControlId, implicit, defaultId]);
+    if (nextId === undefined) {
+      unregisterControlId();
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, nextId);
+    return undefined;
+  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
+  React.useEffect(() => {
+    return unregisterControlId;
+  }, [unregisterControlId]);
   return controlId ?? defaultId;
 }

package/menu/arrow/MenuArrow.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 MenuArrow: React.ForwardRefExoticComponent<MenuArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuArrow: React.ForwardRefExoticComponent<Omit<MenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuArrowState {
   /**
    * Whether the menu is currently open.

package/menu/arrow/MenuArrow.js

@@ -34,12 +34,12 @@ const MenuArrow = exports.MenuArrow = /*#__PURE__*/React.forwardRef(function Men
     arrowStyles
   } = (0, _MenuPositionerContext.useMenuPositionerContext)();
   const open = store.useState('open');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [arrowRef, forwardedRef],
     stateAttributesMapping: _popupStateMapping.popupStateMapping,

package/menu/arrow/MenuArrowDataAttributes.js

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

package/menu/backdrop/MenuBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuBackdrop: React.ForwardRefExoticComponent<MenuBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuBackdrop: React.ForwardRefExoticComponent<Omit<MenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuBackdropState {
   /**
    * Whether the menu is currently open.

package/menu/backdrop/MenuBackdrop.js

@@ -38,10 +38,10 @@ const MenuBackdrop = exports.MenuBackdrop = /*#__PURE__*/React.forwardRef(functi
   const transitionStatus = store.useState('transitionStatus');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
   const contextMenuContext = (0, _ContextMenuRootContext.useContextMenuRootContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,

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

@@ -7,7 +7,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<MenuCheckboxItemProps & React.RefAttributes<Element>>;
+export declare const MenuCheckboxItem: React.ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export type MenuCheckboxItemState = {
   /**
    * Whether the checkbox item should ignore user interaction.
@@ -28,40 +28,40 @@ export interface MenuCheckboxItemProps extends NonNativeButtonProps, BaseUICompo
    *
    * 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/menu/checkbox-item/MenuCheckboxItemContext.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/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<MenuCheckboxItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<MenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface MenuCheckboxItemIndicatorProps extends BaseUIComponentProps<'span', MenuCheckboxItemIndicator.State> {
   /**
    * 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 {
   /**

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

@@ -14,7 +14,7 @@ var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 /**
  * 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)
  */
@@ -40,12 +40,12 @@ const MenuCheckboxItemIndicator = exports.MenuCheckboxItemIndicator = /*#__PURE_
       }
     }
   });
-  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 = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: [forwardedRef, indicatorRef],

package/menu/group/MenuGroup.d.ts

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

package/menu/group/MenuGroupContext.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/menu/group-label/MenuGroupLabel.d.ts

@@ -6,7 +6,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<MenuGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuGroupLabel: React.ForwardRefExoticComponent<Omit<MenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface MenuGroupLabelProps extends BaseUIComponentProps<'div', MenuGroupLabel.State> {}
 export interface MenuGroupLabelState {}
 export declare namespace MenuGroupLabel {

package/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";

package/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";

package/menu/index.parts.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "Item", {
     return _MenuItem.MenuItem;
   }
 });
+Object.defineProperty(exports, "LinkItem", {
+  enumerable: true,
+  get: function () {
+    return _MenuLinkItem.MenuLinkItem;
+  }
+});
 Object.defineProperty(exports, "Popup", {
   enumerable: true,
   get: function () {
@@ -130,6 +136,7 @@ var _MenuCheckboxItemIndicator = require("./checkbox-item-indicator/MenuCheckbox
 var _MenuGroup = require("./group/MenuGroup");
 var _MenuGroupLabel = require("./group-label/MenuGroupLabel");
 var _MenuItem = require("./item/MenuItem");
+var _MenuLinkItem = require("./link-item/MenuLinkItem");
 var _MenuPopup = require("./popup/MenuPopup");
 var _MenuPortal = require("./portal/MenuPortal");
 var _MenuPositioner = require("./positioner/MenuPositioner");

package/menu/item/MenuItem.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<Element>>;
+export declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface MenuItemState {
   /**
    * Whether the item should ignore user interaction.
@@ -21,26 +21,26 @@ export interface MenuItemProps extends NonNativeButtonProps, BaseUIComponentProp
   /**
    * 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/menu/item/MenuItem.js

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

package/menu/item/useMenuItem.js

@@ -11,8 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useButton = require("../../use-button");
 var _mergeProps = require("../../merge-props");
-var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
-var _reasons = require("../../utils/reasons");
+var _useMenuItemCommonProps = require("./useMenuItemCommonProps");
 const REGULAR_ITEM = exports.REGULAR_ITEM = {
   type: 'regular-item'
 };
@@ -28,11 +27,6 @@ function useMenuItem(params) {
     nodeId
   } = params;
   const itemRef = React.useRef(null);
-  const contextMenuContext = (0, _ContextMenuRootContext.useContextMenuRootContext)(true);
-  const isContextMenu = contextMenuContext !== undefined;
-  const {
-    events: menuEvents
-  } = store.useState('floatingTreeRoot');
   const {
     getButtonProps,
     buttonRef
@@ -41,23 +35,17 @@ function useMenuItem(params) {
     focusableWhenDisabled: true,
     native: nativeButton
   });
+  const commonProps = (0, _useMenuItemCommonProps.useMenuItemCommonProps)({
+    closeOnClick,
+    highlighted,
+    id,
+    nodeId,
+    store,
+    itemRef,
+    itemMetadata
+  });
   const getItemProps = React.useCallback(externalProps => {
-    return (0, _mergeProps.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 (0, _mergeProps.mergeProps)(commonProps, {
       onMouseEnter() {
         if (itemMetadata.type !== 'submenu-trigger') {
           return;
@@ -68,33 +56,9 @@ function useMenuItem(params) {
         if (event.key === ' ' && store.context.typingRef.current) {
           event.preventBaseUIHandler();
         }
-      },
-      onClick(event) {
-        if (closeOnClick) {
-          menuEvents.emit('close', {
-            domEvent: event,
-            reason: _reasons.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 = (0, _useMergedRefs.useMergedRefs)(itemRef, buttonRef);
   return React.useMemo(() => ({
     getItemProps,

package/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;
+}