@base-ui/react 1.4.1 → 1.5.0

package/esm/internals/useRenderElement.js

@@ -121,6 +121,8 @@ function evaluateRenderProp(element, render, props, state) {
     // so we can throw before with custom message.
     if (process.env.NODE_ENV !== 'production') {
       if (! /*#__PURE__*/React.isValidElement(newElement)) {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(['Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.', 'A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.', 'https://base-ui.com/r/invalid-render-prop'].join('\n'));
       }
     }

package/esm/menu/arrow/MenuArrow.js

@@ -14,8 +14,8 @@ import { popupStateMapping } from "../../utils/popupStateMapping.js";
  */
 export const MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/menu/backdrop/MenuBackdrop.js

@@ -20,8 +20,8 @@ const stateAttributesMapping = {
  */
 export const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

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

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { MenuCheckboxItemContext } from "./MenuCheckboxItemContext.js";
 import { REGULAR_ITEM, useMenuItem } from "../item/useMenuItem.js";
@@ -69,17 +68,16 @@ export const MenuCheckboxItem = /*#__PURE__*/React.forwardRef(function MenuCheck
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useStableCallback(event => {
-    const details = {
-      ...createChangeEventDetails(REASONS.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = createChangeEventDetails(REASONS.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     onCheckedChange?.(!checked, details);
     if (details.isCanceled) {
       return;
     }
     setChecked(currentlyChecked => !currentlyChecked);
-  });
+  }
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: itemMapping,

package/esm/menu/group/MenuGroup.js

@@ -19,9 +19,6 @@ export const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(compon
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState(undefined);
-  const context = React.useMemo(() => ({
-    setLabelId
-  }), [setLabelId]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     props: {
@@ -31,7 +28,7 @@ export const MenuGroup = /*#__PURE__*/React.forwardRef(function MenuGroup(compon
     }
   });
   return /*#__PURE__*/_jsx(MenuGroupContext.Provider, {
-    value: context,
+    value: setLabelId,
     children: element
   });
 });

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

@@ -1,6 +1,4 @@
 import * as React from 'react';
-export interface MenuGroupContext {
-  setLabelId: (id: string | undefined) => void;
-}
+export type MenuGroupContext = (id: string | undefined) => void;
 export declare const MenuGroupContext: React.Context<MenuGroupContext | undefined>;
 export declare function useMenuGroupRootContext(): MenuGroupContext;

package/esm/menu/group/MenuGroupContext.js

@@ -7,7 +7,7 @@ if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuG
 export function useMenuGroupRootContext() {
   const context = React.useContext(MenuGroupContext);
   if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuGroupRootContext is missing. Menu group parts must be used within <Menu.Group>.' : _formatErrorMessage(31));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: MenuGroupContext is missing. Menu group parts must be used within <Menu.Group> or <Menu.RadioGroup>.' : _formatErrorMessage(31));
   }
   return context;
 }

package/esm/menu/group-label/MenuGroupLabel.js

@@ -12,18 +12,16 @@ import { useMenuGroupRootContext } from "../group/MenuGroupContext.js";
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-export const MenuGroupLabel = /*#__PURE__*/React.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
+export const MenuGroupLabel = /*#__PURE__*/React.forwardRef(function MenuGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    id: idProp,
+    className,
     style,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
-  const {
-    setLabelId
-  } = useMenuGroupRootContext();
+  const setLabelId = useMenuGroupRootContext();
   useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {

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

@@ -58,9 +58,9 @@ export const MenuLinkItem = /*#__PURE__*/React.forwardRef(function MenuLinkItem(
   function getItemProps(externalProps) {
     return mergeProps(commonProps, externalProps, getButtonProps);
   }
-  const state = React.useMemo(() => ({
+  const state = {
     highlighted
-  }), [highlighted]);
+  };
   return useRenderElement('a', componentProps, {
     state,
     props: [itemProps, elementProps, getItemProps],

package/esm/menu/popup/MenuPopup.js

@@ -54,6 +54,8 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const closeDelay = store.useState('closeDelay');
   const activeTriggerElement = store.useState('activeTriggerElement');
+  const hoverEnabled = store.useState('hoverEnabled');
+  const disabled = store.useState('disabled');
   const isContextMenu = parent.type === 'context-menu';
   useOpenChangeComplete({
     open,
@@ -73,12 +75,13 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
       floatingTreeRoot.events.off('close', handleClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const hoverEnabled = store.useState('hoverEnabled');
-  const disabled = store.useState('disabled');
   useHoverFloatingInteraction(floatingContext, {
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
+  const setPopupElement = React.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     transitionStatus,
     side,
@@ -87,9 +90,6 @@ export const MenuPopup = /*#__PURE__*/React.forwardRef(function MenuPopup(compon
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { MenuRadioGroupContext } from "./MenuRadioGroupContext.js";
+import { MenuGroupContext } from "../group/MenuGroupContext.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -21,16 +22,17 @@ export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
     onValueChange: onValueChangeProp,
     disabled = false,
     style,
+    'aria-labelledby': ariaLabelledByProp,
     ...elementProps
   } = componentProps;
+  const [labelId, setLabelId] = React.useState(undefined);
   const [value, setValueUnwrapped] = useControlled({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = useStableCallback(onValueChangeProp);
   const setValue = useStableCallback((newValue, eventDetails) => {
-    onValueChange?.(newValue, eventDetails);
+    onValueChangeProp?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -44,6 +46,7 @@ export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
     ref: forwardedRef,
     props: {
       role: 'group',
+      'aria-labelledby': ariaLabelledByProp ?? labelId,
       'aria-disabled': disabled || undefined,
       ...elementProps
     }
@@ -53,9 +56,12 @@ export const MenuRadioGroup = /*#__PURE__*/React.memo(/*#__PURE__*/React.forward
     setValue,
     disabled
   }), [value, setValue, disabled]);
-  return /*#__PURE__*/_jsx(MenuRadioGroupContext.Provider, {
-    value: context,
-    children: element
+  return /*#__PURE__*/_jsx(MenuGroupContext.Provider, {
+    value: setLabelId,
+    children: /*#__PURE__*/_jsx(MenuRadioGroupContext.Provider, {
+      value: context,
+      children: element
+    })
   });
 }));
 if (process.env.NODE_ENV !== "production") MenuRadioGroup.displayName = "MenuRadioGroup";

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

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMenuRootContext } from "../root/MenuRootContext.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
@@ -69,13 +68,12 @@ export const MenuRadioItem = /*#__PURE__*/React.forwardRef(function MenuRadioIte
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = useStableCallback(event => {
-    const details = {
-      ...createChangeEventDetails(REASONS.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = createChangeEventDetails(REASONS.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     setSelectedValue(value, details);
-  });
+  }
   const element = useRenderElement('div', componentProps, {
     state,
     stateAttributesMapping: itemMapping,

package/esm/menu/root/MenuRoot.js

@@ -6,9 +6,9 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useId } from '@base-ui/utils/useId';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
-import { EMPTY_ARRAY } from '@base-ui/utils/empty';
+import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { fastComponent } from '@base-ui/utils/fastHooks';
-import { FloatingTree, useDismiss, useFloatingNodeId, useFloatingParentNodeId, useInteractions, useListNavigation, useRole, useTypeahead, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
+import { FloatingTree, useDismiss, useFloatingNodeId, useFloatingParentNodeId, useListNavigation, useTypeahead, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
 import { MenuRootContext, useMenuRootContext } from "./MenuRootContext.js";
 import { useMenubarContext } from "../../menubar/MenubarContext.js";
 import { TYPEAHEAD_RESET_MS } from "../../internals/constants.js";
@@ -19,7 +19,7 @@ import { REASONS } from "../../internals/reasons.js";
 import { useContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
 import { mergeProps } from "../../merge-props/index.js";
 import { MenuStore } from "../store/MenuStore.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps } from "../../utils/popups/index.js";
 import { useMenuSubmenuRootContext } from "../submenu-root/MenuSubmenuRootContext.js";
 
 /**
@@ -98,28 +98,11 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const rootId = useId();
+  const floatingId = useId();
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = useFloatingNodeId(floatingTreeRoot);
   const floatingParentNodeIdFromContext = useFloatingParentNodeId();
-  useIsoLayoutEffect(() => {
-    if (contextMenuContext && !parentMenuRootContext) {
-      // This is a context menu root.
-      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
-      store.update({
-        parent: {
-          type: 'context-menu',
-          context: contextMenuContext
-        },
-        floatingNodeId: floatingNodeIdFromContext,
-        floatingParentNodeId: floatingParentNodeIdFromContext
-      });
-    } else if (parentMenuRootContext) {
-      store.update({
-        floatingNodeId: floatingNodeIdFromContext,
-        floatingParentNodeId: floatingParentNodeIdFromContext
-      });
-    }
-  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
   const open = store.useState('open');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const positionerElement = store.useState('positionerElement');
@@ -131,6 +114,10 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
   const payload = store.useState('payload');
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const openEventRef = React.useRef(null);
+  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
+  const allowOutsidePressDismissalTimeout = useTimeout();
+  const allowTouchToCloseRef = React.useRef(true);
+  const allowTouchToCloseTimeout = useTimeout();
   const nested = floatingParentNodeId != null;
   if (process.env.NODE_ENV !== 'production') {
     if (parent.type !== undefined && modalProp !== undefined) {
@@ -145,7 +132,7 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
     openMethod,
-    rootId: useId()
+    rootId
   });
   useImplicitActiveTrigger(store);
   const {
@@ -156,8 +143,25 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       stickIfOpen: true
     });
   });
-  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = useTimeout();
+  useIsoLayoutEffect(() => {
+    if (contextMenuContext && !parentMenuRootContext) {
+      // This is a context menu root.
+      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
+      store.update({
+        parent: {
+          type: 'context-menu',
+          context: contextMenuContext
+        },
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    } else if (parentMenuRootContext) {
+      store.update({
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    }
+  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
   React.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -183,8 +187,6 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
-  const allowTouchToCloseRef = React.useRef(true);
-  const allowTouchToCloseTimeout = useTimeout();
   const setOpen = useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
@@ -258,23 +260,10 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       store.set('instantType', undefined);
     }
   });
-  const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
-  }, [store]);
-  React.useImperativeHandle(actionsRef, () => ({
-    unmount: forceUnmount,
-    close: handleImperativeClose
-  }), [forceUnmount, handleImperativeClose]);
-  let ctx;
-  if (parent.type === 'context-menu') {
-    ctx = parent.context;
-  }
-  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
-  React.useImperativeHandle(ctx?.actionsRef, () => ({
-    setOpen
-  }), [setOpen]);
   const floatingRootContext = useSyncedFloatingRootContext({
     popupStore: store,
+    floatingId,
+    nested: floatingParentNodeIdFromContext != null,
     onOpenChange: setOpen
   });
   const floatingEvents = floatingRootContext.context.events;
@@ -288,6 +277,21 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
       floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
   }, [floatingEvents, setOpen]);
+  const handleImperativeClose = React.useCallback(() => {
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
+  }, [store]);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  let ctx;
+  if (parent.type === 'context-menu') {
+    ctx = parent.context;
+  }
+  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
+  React.useImperativeHandle(ctx?.actionsRef, () => ({
+    setOpen
+  }), [setOpen]);
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
@@ -301,9 +305,6 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     },
     externalTree: nested ? floatingTreeRoot : undefined
   });
-  const role = useRole(floatingRootContext, {
-    role: 'menu'
-  });
   const direction = useDirection();
   const setActiveIndex = React.useCallback(index => {
     if (store.select('activeIndex') === index) {
@@ -326,7 +327,7 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
     externalTree: nested ? floatingTreeRoot : undefined,
     focusItemOnHover: highlightItemOnHover
   });
-  const onTypingChange = React.useCallback(nextTyping => {
+  const onTyping = React.useCallback(nextTyping => {
     store.context.typingRef.current = nextTyping;
   }, [store]);
   const typeahead = useTypeahead(floatingRootContext, {
@@ -339,34 +340,28 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
         store.set('activeIndex', index);
       }
     },
-    onTypingChange
+    onTyping
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps,
-    getTriggerProps
-  } = useInteractions([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React.useMemo(() => {
-    const mergedProps = mergeProps(getReferenceProps(), {
+    const mergedProps = mergeProps(typeahead.reference, listNavigation.reference, dismiss.reference, {
       onMouseMove() {
         store.set('allowMouseEnter', true);
       }
     }, interactionTypeProps);
-    delete mergedProps.role;
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = open;
     return mergedProps;
-  }, [getReferenceProps, store, interactionTypeProps]);
+  }, [store, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, open]);
   const inactiveTriggerProps = React.useMemo(() => {
-    const triggerProps = getTriggerProps();
-    if (!triggerProps) {
-      return triggerProps;
-    }
-    const mergedProps = mergeProps(triggerProps, interactionTypeProps);
-    delete mergedProps.role;
-    delete mergedProps['aria-controls'];
+    const mergedProps = mergeProps(listNavigation.trigger, dismiss.trigger, interactionTypeProps);
+    mergedProps['aria-haspopup'] = 'menu';
+    mergedProps['aria-expanded'] = false;
     return mergedProps;
-  }, [getTriggerProps, interactionTypeProps]);
-  const popupProps = React.useMemo(() => getFloatingProps({
+  }, [listNavigation.trigger, dismiss.trigger, interactionTypeProps]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, {
+    id: floatingId,
+    role: 'menu',
+    'aria-labelledby': activeTriggerElement?.id,
     onMouseMove() {
       store.set('allowMouseEnter', true);
       if (parent.type === 'menu') {
@@ -387,9 +382,9 @@ export const MenuRoot = fastComponent(function MenuRoot(props) {
         relay(event);
       }
     }
-  }), [getFloatingProps, parent.type, store]);
-  const itemProps = React.useMemo(() => getItemProps(), [getItemProps]);
-  store.useSyncedValues({
+  }, typeahead.floating, listNavigation.floating, dismiss.floating), [activeTriggerElement, floatingId, parent.type, store, typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? EMPTY_OBJECT;
+  usePopupInteractionProps(store, {
     floatingRootContext,
     activeTriggerProps,
     inactiveTriggerProps,

package/esm/menu/store/MenuHandle.js

@@ -36,7 +36,7 @@ export class MenuHandle {
    * Indicates whether the menu is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }