@base-ui/react 1.1.0 → 1.2.0

package/esm/floating-ui-react/utils/element.js

@@ -1,4 +1,4 @@
-import { isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
+import { isElement, isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
 import { isJSDOM } from '@base-ui/utils/detectBrowser';
 import { FOCUSABLE_ATTRIBUTE, TYPEABLE_SELECTOR } from "./constants.js";
 export function activeElement(doc) {
@@ -33,6 +33,21 @@ export function contains(parent, child) {
   // Give up, the result is false
   return false;
 }
+export function isTargetInsideEnabledTrigger(target, triggerElements) {
+  if (!isElement(target)) {
+    return false;
+  }
+  const targetElement = target;
+  if (triggerElements.hasElement(targetElement)) {
+    return !targetElement.hasAttribute('data-trigger-disabled');
+  }
+  for (const [, trigger] of triggerElements.entries()) {
+    if (contains(trigger, targetElement)) {
+      return !trigger.hasAttribute('data-trigger-disabled');
+    }
+  }
+  return false;
+}
 export function getTarget(event) {
   if ('composedPath' in event) {
     return event.composedPath()[0];
@@ -57,9 +72,6 @@ export function isEventTargetWithin(event, node) {
 export function isRootElement(element) {
   return element.matches('html,body');
 }
-export function getDocument(node) {
-  return node?.ownerDocument || document;
-}
 export function isTypeableElement(element) {
   return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
 }

package/esm/floating-ui-react/utils/enqueueFocus.d.ts

@@ -1,8 +1,8 @@
 import type { FocusableElement } from 'tabbable';
 interface Options {
-  preventScroll?: boolean;
-  cancelPrevious?: boolean;
-  sync?: boolean;
+  preventScroll?: boolean | undefined;
+  cancelPrevious?: boolean | undefined;
+  sync?: boolean | undefined;
 }
 export declare function enqueueFocus(el: FocusableElement | null, options?: Options): void;
 export {};

package/esm/floating-ui-react/utils/event.js

@@ -7,11 +7,9 @@ export function isReactEvent(event) {
   return 'nativeEvent' in event;
 }
 
-// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
+// License: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts
 export function isVirtualClick(event) {
-  // FIXME: Firefox is now emitting a deprecation warning for `mozInputSource`.
-  // Try to find a workaround for this. `react-aria` source still has the check.
-  if (event.mozInputSource === 0 && event.isTrusted) {
+  if (event.pointerType === '' && event.isTrusted) {
     return true;
   }
   if (isAndroid && event.pointerType) {

package/esm/floating-ui-react/utils/markOthers.js

@@ -1,7 +1,7 @@
 // Modified to add conditional `aria-hidden` support:
 // https://github.com/theKashey/aria-hidden/blob/9220c8f4a4fd35f63bee5510a9f41a37264382d4/src/index.ts
 import { getNodeName } from '@floating-ui/utils/dom';
-import { getDocument } from "./element.js";
+import { ownerDocument } from '@base-ui/utils/owner';
 const counters = {
   inert: new WeakMap(),
   'aria-hidden': new WeakMap(),
@@ -116,6 +116,6 @@ function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, iner
   };
 }
 export function markOthers(avoidElements, ariaHidden = false, inert = false) {
-  const body = getDocument(avoidElements[0]).body;
+  const body = ownerDocument(avoidElements[0]).body;
   return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
 }

package/esm/floating-ui-react/utils/tabbable.js

@@ -1,5 +1,6 @@
 import { tabbable } from 'tabbable';
-import { activeElement, contains, getDocument } from "./element.js";
+import { ownerDocument } from '@base-ui/utils/owner';
+import { activeElement, contains } from "./element.js";
 export const getTabbableOptions = () => ({
   getShadowRoot: true,
   displayCheck:
@@ -14,23 +15,23 @@ function getTabbableIn(container, dir) {
   if (len === 0) {
     return undefined;
   }
-  const active = activeElement(getDocument(container));
+  const active = activeElement(ownerDocument(container));
   const index = list.indexOf(active);
   // eslint-disable-next-line no-nested-ternary
   const nextIndex = index === -1 ? dir === 1 ? 0 : len - 1 : index + dir;
   return list[nextIndex];
 }
 export function getNextTabbable(referenceElement) {
-  return getTabbableIn(getDocument(referenceElement).body, 1) || referenceElement;
+  return getTabbableIn(ownerDocument(referenceElement).body, 1) || referenceElement;
 }
 export function getPreviousTabbable(referenceElement) {
-  return getTabbableIn(getDocument(referenceElement).body, -1) || referenceElement;
+  return getTabbableIn(ownerDocument(referenceElement).body, -1) || referenceElement;
 }
 function getTabbableNearElement(referenceElement, dir) {
   if (!referenceElement) {
     return null;
   }
-  const list = tabbable(getDocument(referenceElement).body, getTabbableOptions());
+  const list = tabbable(ownerDocument(referenceElement).body, getTabbableOptions());
   const elementCount = list.length;
   if (elementCount === 0) {
     return null;

package/esm/form/Form.d.ts

@@ -11,7 +11,7 @@ import { FormContext } from "./FormContext.js";
  */
 export declare const Form: {
   <FormValues extends Record<string, any> = Record<string, any>>(props: Form.Props<FormValues> & {
-    ref?: React.Ref<HTMLFormElement>;
+    ref?: React.Ref<HTMLFormElement> | undefined;
   }): React.JSX.Element;
 };
 export type FormSubmitEventReason = typeof REASONS.none;
@@ -32,18 +32,18 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    *
    * @default 'onSubmit'
    */
-  validationMode?: FormValidationMode;
+  validationMode?: FormValidationMode | undefined;
   /**
    * Validation errors returned externally, typically after submission by a server or a form action.
    * This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
    * and values correspond to error(s) related to that field.
    */
-  errors?: FormContext['errors'];
+  errors?: FormContext['errors'] | undefined;
   /**
    * Event handler called when the form is submitted.
    * `preventDefault()` is called on the native submit event when used.
    */
-  onFormSubmit?: (formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void;
+  onFormSubmit?: ((formValues: FormValues, eventDetails: Form.SubmitEventDetails) => void) | undefined;
   /**
    * A ref to imperative actions.
    * - `validate`: Validates all fields when called. Optionally pass a field name to validate a single field.
@@ -56,7 +56,7 @@ export interface FormProps<FormValues extends Record<string, any> = Record<strin
    * actionsRef.current.validate('email');
    * ```
    */
-  actionsRef?: React.RefObject<Form.Actions | null>;
+  actionsRef?: React.RefObject<Form.Actions | null> | undefined;
 }
 export declare namespace Form {
   type Props<FormValues extends Record<string, any> = Record<string, any>> = FormProps<FormValues>;

package/esm/index.d.ts

@@ -11,6 +11,7 @@ export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.1.0
+ * @base-ui/react v1.2.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";
 export * from "./direction-provider/index.js";
+export * from "./drawer/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
 export * from "./form/index.js";

package/esm/input/Input.d.ts

@@ -7,13 +7,13 @@ import { Field } from "../field/index.js";
  *
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
-export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface InputProps extends BaseUIComponentProps<'input', Input.State> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'];
-  defaultValue?: Field.Control.Props['defaultValue'];
+  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  defaultValue?: Field.Control.Props['defaultValue'] | undefined;
 }
 export interface InputState extends Field.Control.State {}
 export type InputChangeEventReason = Field.Control.ChangeEventReason;

package/esm/labelable-provider/LabelableContext.d.ts

@@ -6,7 +6,7 @@ export interface LabelableContext {
    * When `null` the association is implicit.
    */
   controlId: string | null | undefined;
-  setControlId: React.Dispatch<React.SetStateAction<string | null | undefined>>;
+  registerControlId: (source: symbol, id: string | null | undefined) => void;
   /**
    * The `id` of the label.
    */

package/esm/labelable-provider/LabelableContext.js

@@ -8,7 +8,7 @@ import { NOOP } from "../utils/noop.js";
  */
 export const LabelableContext = /*#__PURE__*/React.createContext({
   controlId: undefined,
-  setControlId: NOOP,
+  registerControlId: NOOP,
   labelId: undefined,
   setLabelId: NOOP,
   messageIds: [],

package/esm/labelable-provider/LabelableProvider.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { mergeProps } from "../merge-props/index.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
@@ -11,12 +13,40 @@ import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const LabelableProvider = function LabelableProvider(props) {
   const defaultId = 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 = useRefWithInit(() => new Map());
   const {
     messageIds: parentMessageIds
   } = useLabelableContext();
+  const registerControlId = 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 mergeProps({
       'aria-describedby': parentMessageIds.concat(messageIds).join(' ') || undefined
@@ -24,13 +54,13 @@ export const LabelableProvider = function LabelableProvider(props) {
   }, [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__*/_jsx(LabelableContext.Provider, {
     value: contextValue,
     children: props.children

package/esm/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/esm/labelable-provider/useLabelableId.js

@@ -1,6 +1,9 @@
 'use client';
 
+import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { isElement } from '@floating-ui/utils/dom';
 import { NOOP } from "../utils/noop.js";
 import { useBaseUiId } from "../utils/useBaseUiId.js";
@@ -13,28 +16,51 @@ export function useLabelableId(params = {}) {
   } = params;
   const {
     controlId,
-    setControlId
+    registerControlId
   } = useLabelableContext();
   const defaultId = useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React.useRef(false);
+  const hadExplicitIdRef = React.useRef(id != null);
+  const unregisterControlId = useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
   useIsoLayoutEffect(() => {
-    if (!implicit && !id || setControlId === NOOP) {
+    if (registerControlId === NOOP) {
       return undefined;
     }
+    let nextId;
     if (implicit) {
       const elem = controlRef?.current;
       if (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/esm/menu/arrow/MenuArrow.js

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

package/esm/menu/arrow/MenuArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let MenuArrowDataAttributes = function (MenuArrowDataAttributes) {
    * 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"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  MenuArrowDataAttributes["align"] = "data-align";
+  MenuArrowDataAttributes[MenuArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the menu arrow is uncentered.
    */

package/esm/menu/backdrop/MenuBackdrop.js

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

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

@@ -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/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,7 +3,7 @@ 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)
  */
@@ -13,7 +13,7 @@ export interface MenuCheckboxItemIndicatorProps extends BaseUIComponentProps<'sp
    * 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/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/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/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/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";

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

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

@@ -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/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],