@base-ui/react 1.4.1 → 1.5.0

package/floating-ui-react/utils/enqueueFocus.js

@@ -9,15 +9,18 @@ let rafId = 0;
 function enqueueFocus(el, options = {}) {
   const {
     preventScroll = false,
-    cancelPrevious = true,
-    sync = false
+    sync = false,
+    shouldFocus
   } = options;
-  if (cancelPrevious) {
-    cancelAnimationFrame(rafId);
+  cancelAnimationFrame(rafId);
+  function exec() {
+    if (shouldFocus && !shouldFocus()) {
+      return;
+    }
+    el?.focus({
+      preventScroll
+    });
   }
-  const exec = () => el?.focus({
-    preventScroll
-  });
   if (sync) {
     exec();
     return _empty.NOOP;

package/floating-ui-react/utils/getEmptyRootContext.js

@@ -13,7 +13,7 @@ function getEmptyRootContext() {
     floatingElement: null,
     referenceElement: null,
     triggerElements: new _popups.PopupTriggerMap(),
-    floatingId: '',
+    floatingId: undefined,
     syncOnly: false,
     nested: false,
     onOpenChange: undefined

package/form/Form.js

@@ -66,11 +66,11 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     if (fieldName) {
       const namedField = values.find(field => field.name === fieldName);
       if (namedField) {
-        namedField.validate(false);
+        namedField.validate();
       }
     } else {
       values.forEach(field => {
-        field.validate(false);
+        field.validate();
       });
     }
   }, []);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.4.1
+ * @base-ui/react v1.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/composite/composite.d.ts

@@ -17,7 +17,6 @@ export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const VERTICAL_KEYS: Set<string>;
 export declare const VERTICAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const ARROW_KEYS: Set<string>;
-export declare const ALL_KEYS: Set<string>;
 export declare const COMPOSITE_KEYS: Set<string>;
 export declare const SHIFT: "Shift";
 export declare const CONTROL: "Control";

package/internals/composite/composite.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.PAGE_UP = exports.PAGE_DOWN = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = exports.ALL_KEYS = void 0;
+exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.PAGE_UP = exports.PAGE_DOWN = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = void 0;
 Object.defineProperty(exports, "createGridCellMap", {
   enumerable: true,
   get: function () {
@@ -81,8 +81,7 @@ const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS
 const VERTICAL_KEYS = exports.VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
 const VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_UP, ARROW_DOWN, HOME, END]);
 const ARROW_KEYS = exports.ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-const ALL_KEYS = exports.ALL_KEYS = new Set([...ARROW_KEYS, HOME, END]);
-const COMPOSITE_KEYS = exports.COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
+const COMPOSITE_KEYS = exports.COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
 const SHIFT = exports.SHIFT = 'Shift';
 const CONTROL = exports.CONTROL = 'Control';
 const ALT = exports.ALT = 'Alt';

package/internals/composite/root/useCompositeRoot.js

@@ -77,7 +77,7 @@ function useCompositeRoot(params) {
       target.setSelectionRange(0, target.value.length ?? 0);
     },
     onKeyDown(event) {
-      const RELEVANT_KEYS = enableHomeAndEndKeys ? _composite.ALL_KEYS : _composite.ARROW_KEYS;
+      const RELEVANT_KEYS = enableHomeAndEndKeys ? _composite.COMPOSITE_KEYS : _composite.ARROW_KEYS;
       if (!RELEVANT_KEYS.has(event.key)) {
         return;
       }

package/internals/createBaseUIEventDetails.d.ts

@@ -31,6 +31,8 @@ interface ReasonToEventMap {
   [REASONS.cancelOpen]: MouseEvent;
   [REASONS.siblingOpen]: Event;
   [REASONS.disabled]: Event;
+  [REASONS.missing]: Event;
+  [REASONS.initial]: Event;
   [REASONS.imperativeAction]: Event;
   [REASONS.windowResize]: UIEvent;
 }

package/internals/csp-context/index.d.ts

@@ -0,0 +1,2 @@
+export { CSPContext, useCSPContext } from "./CSPContext.js";
+export type { CSPContextValue } from "./CSPContext.js";

package/internals/csp-context/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CSPContext", {
+  enumerable: true,
+  get: function () {
+    return _CSPContext.CSPContext;
+  }
+});
+Object.defineProperty(exports, "useCSPContext", {
+  enumerable: true,
+  get: function () {
+    return _CSPContext.useCSPContext;
+  }
+});
+var _CSPContext = require("./CSPContext");

package/internals/field-register-control/index.d.ts

@@ -1,4 +1,3 @@
 export { useRegisterFieldControl } from "./useRegisterFieldControl.js";
-export type { UseRegisterFieldControlParameters } from "./useRegisterFieldControl.js";
 export { useFieldControlRegistration } from "./useFieldControlRegistration.js";
 export type { FieldControlRegistration, UseFieldControlRegistrationParameters } from "./useFieldControlRegistration.js";

package/internals/field-register-control/useFieldControlRegistration.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { FieldValidityData } from "../../field/root/FieldRoot.js";
 export interface FieldControlRegistration {
   controlRef: React.RefObject<any>;
-  getValue?: (() => unknown) | undefined;
   id: string | undefined;
+  getValue?: (() => unknown) | undefined;
   value: unknown;
 }
 export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): (source: symbol, registration: FieldControlRegistration | undefined) => void;
@@ -12,6 +12,7 @@ export interface UseFieldControlRegistrationParameters {
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;
   name: string | undefined;
+  setRegisteredFieldId: (id: string | undefined) => void;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   validityData: FieldValidityData;
 }

package/internals/field-register-control/useFieldControlRegistration.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFieldControlRegistration = useFieldControlRegistration;
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _getCombinedFieldValidityData = require("../../field/utils/getCombinedFieldValidityData");
@@ -18,6 +17,7 @@ function useFieldControlRegistration(params) {
     invalid,
     markedDirtyRef,
     name,
+    setRegisteredFieldId,
     setValidityData,
     validityData
   } = params;
@@ -27,7 +27,7 @@ function useFieldControlRegistration(params) {
   const activeFieldControlSourceRef = React.useRef(null);
   const registrationRef = React.useRef(null);
   const fallbackControlRef = React.useRef(null);
-  const getValue = (0, _useStableCallback.useStableCallback)(() => {
+  const getValueForForm = (0, _useStableCallback.useStableCallback)(() => {
     const registration = registrationRef.current;
     if (!registration) {
       return undefined;
@@ -37,22 +37,17 @@ function useFieldControlRegistration(params) {
     }
     return registration.value;
   });
-  const validate = (0, _useStableCallback.useStableCallback)((flushSync = true) => {
+  const validate = (0, _useStableCallback.useStableCallback)(() => {
     const registration = registrationRef.current;
     if (!registration) {
       return;
     }
     let nextValue = registration.value;
     if (nextValue === undefined) {
-      nextValue = getValue();
+      nextValue = getValueForForm();
     }
     markedDirtyRef.current = true;
-    if (!flushSync) {
-      commit(nextValue);
-    } else {
-      // Synchronously update the validity state so the submit event can be prevented.
-      ReactDOM.flushSync(() => commit(nextValue));
-    }
+    commit(nextValue);
   });
   function refreshRegistration() {
     const registration = registrationRef.current;
@@ -60,7 +55,7 @@ function useFieldControlRegistration(params) {
       return;
     }
     formRef.current.fields.set(registration.id, {
-      getValue,
+      getValue: getValueForForm,
       name,
       controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
@@ -79,7 +74,7 @@ function useFieldControlRegistration(params) {
     }
     let initialValue = registration.value;
     if (initialValue === undefined) {
-      initialValue = getValue();
+      initialValue = getValueForForm();
     }
     if (validityData.initialValue === null && initialValue !== null) {
       setValidityData(prev => ({
@@ -94,13 +89,13 @@ function useFieldControlRegistration(params) {
       return;
     }
     formRef.current.fields.set(registration.id, {
-      getValue,
+      getValue: getValueForForm,
       name,
       controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
       validate
     });
-  }, [formRef, getValue, invalid, name, validate, validityData]);
+  }, [formRef, getValueForForm, invalid, name, validate, validityData]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const fields = formRef.current.fields;
     return () => {
@@ -116,12 +111,14 @@ function useFieldControlRegistration(params) {
         activeFieldControlSourceRef.current = null;
         deleteRegistration();
         registrationRef.current = null;
+        setRegisteredFieldId(undefined);
       }
       return;
     }
     const previousId = registrationRef.current?.id;
     activeFieldControlSourceRef.current = source;
     registrationRef.current = registration;
+    setRegisteredFieldId(registration.id);
     if (previousId && previousId !== registration.id) {
       deleteRegistration(previousId);
     }

package/internals/field-register-control/useRegisterFieldControl.d.ts

@@ -1,5 +1,2 @@
 import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
-export interface UseRegisterFieldControlParameters extends FieldControlRegistration {
-  enabled?: boolean | undefined;
-}
-export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], params: Omit<UseRegisterFieldControlParameters, 'controlRef'>): void;
+export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], id: FieldControlRegistration['id'], value: FieldControlRegistration['value'], getFormValueOverride?: FieldControlRegistration['getValue'], enabled?: boolean): void;

package/internals/field-register-control/useRegisterFieldControl.js

@@ -9,13 +9,7 @@ exports.useRegisterFieldControl = useRegisterFieldControl;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _FieldRootContext = require("../field-root-context/FieldRootContext");
-function useRegisterFieldControl(controlRef, params) {
-  const {
-    enabled = true,
-    getValue,
-    id,
-    value
-  } = params;
+function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true) {
   const {
     registerFieldControl
   } = (0, _FieldRootContext.useFieldRootContext)();
@@ -28,14 +22,15 @@ function useRegisterFieldControl(controlRef, params) {
     if (!source || !enabled) {
       return undefined;
     }
-    registerFieldControl(source, {
+    const registration = {
       controlRef,
-      getValue,
+      getValue: getFormValueOverride,
       id,
       value
-    });
+    };
+    registerFieldControl(source, registration);
     return () => {
       registerFieldControl(source, undefined);
     };
-  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
+  }, [controlRef, enabled, getFormValueOverride, id, registerFieldControl, value]);
 }

package/internals/field-root-context/FieldRootContext.d.ts

@@ -26,5 +26,6 @@ export interface FieldRootContext {
   registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
+export declare const DEFAULT_FIELD_ROOT_CONTEXT: FieldRootContext;
 export declare const FieldRootContext: React.Context<FieldRootContext>;
 export declare function useFieldRootContext(optional?: boolean): FieldRootContext;

package/internals/field-root-context/FieldRootContext.js

@@ -6,14 +6,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FieldRootContext = void 0;
+exports.FieldRootContext = exports.DEFAULT_FIELD_ROOT_CONTEXT = void 0;
 exports.useFieldRootContext = useFieldRootContext;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _empty = require("@base-ui/utils/empty");
 var _noop = require("../noop");
 var _constants = require("../field-constants/constants");
-const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createContext({
+const DEFAULT_FIELD_ROOT_CONTEXT = exports.DEFAULT_FIELD_ROOT_CONTEXT = {
   invalid: undefined,
   name: undefined,
   validityData: {
@@ -50,7 +50,8 @@ const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createCon
     },
     commit: async () => {}
   }
-});
+};
+const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
 if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
 function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);

package/internals/form-context/FormContext.d.ts

@@ -8,7 +8,11 @@ export interface FormContext {
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
-      validate: (flushSync?: boolean | undefined) => void;
+      /**
+       * After this returns, the field registry entry reflects the latest synchronous
+       * validity verdict. Async validators do not block submit.
+       */
+      validate: () => void;
       validityData: FieldValidityData;
       controlRef: React.RefObject<HTMLElement | null>;
       getValue: () => unknown;

package/internals/reason-parts.d.ts

@@ -28,6 +28,8 @@ export declare const scrub: "scrub";
 export declare const cancelOpen: "cancel-open";
 export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
+export declare const missing: "missing";
+export declare const initial: "initial";
 export declare const imperativeAction: "imperative-action";
 export declare const swipe: "swipe";
 export declare const windowResize: "window-resize";

package/internals/reason-parts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowResize = exports.wheel = exports.triggerPress = exports.triggerHover = exports.triggerFocus = exports.trackPress = exports.swipe = exports.siblingOpen = exports.scrub = exports.pointer = exports.outsidePress = exports.none = exports.listNavigation = exports.linkPress = exports.keyboard = exports.itemPress = exports.inputPress = exports.inputPaste = exports.inputClear = exports.inputChange = exports.inputBlur = exports.incrementPress = exports.imperativeAction = exports.focusOut = exports.escapeKey = exports.drag = exports.disabled = exports.decrementPress = exports.closeWatcher = exports.closePress = exports.clearPress = exports.chipRemovePress = exports.cancelOpen = void 0;
+exports.windowResize = exports.wheel = exports.triggerPress = exports.triggerHover = exports.triggerFocus = exports.trackPress = exports.swipe = exports.siblingOpen = exports.scrub = exports.pointer = exports.outsidePress = exports.none = exports.missing = exports.listNavigation = exports.linkPress = exports.keyboard = exports.itemPress = exports.inputPress = exports.inputPaste = exports.inputClear = exports.inputChange = exports.inputBlur = exports.initial = exports.incrementPress = exports.imperativeAction = exports.focusOut = exports.escapeKey = exports.drag = exports.disabled = exports.decrementPress = exports.closeWatcher = exports.closePress = exports.clearPress = exports.chipRemovePress = exports.cancelOpen = void 0;
 const none = exports.none = 'none';
 const triggerPress = exports.triggerPress = 'trigger-press';
 const triggerHover = exports.triggerHover = 'trigger-hover';
@@ -34,6 +34,8 @@ const scrub = exports.scrub = 'scrub';
 const cancelOpen = exports.cancelOpen = 'cancel-open';
 const siblingOpen = exports.siblingOpen = 'sibling-open';
 const disabled = exports.disabled = 'disabled';
+const missing = exports.missing = 'missing';
+const initial = exports.initial = 'initial';
 const imperativeAction = exports.imperativeAction = 'imperative-action';
 const swipe = exports.swipe = 'swipe';
 const windowResize = exports.windowResize = 'window-resize';

package/internals/types.d.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type { BaseUIEvent, ComponentRenderFn, HTMLProps } from "../types/index.js";
 export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
+export type MaybeBaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & Partial<Pick<BaseUIEvent<E>, 'preventBaseUIHandler' | 'baseUIHandlerPrevented'>>;
 export interface FloatingUIOpenChangeDetails {
   open: boolean;
   reason: string;

package/internals/use-button/useButton.js

@@ -79,9 +79,7 @@ function useButton(parameters = {}) {
       onPointerDown: externalOnPointerDown,
       ...otherExternalProps
     } = externalProps;
-    const type = isNativeButton ? 'button' : undefined;
     return (0, _mergeProps.mergeProps)({
-      type,
       onClick(event) {
         if (disabled) {
           event.preventDefault();
@@ -166,9 +164,11 @@ function useButton(parameters = {}) {
         }
         externalOnPointerDown?.(event);
       }
-    }, !isNativeButton ? {
+    }, isNativeButton ? {
+      type: 'button'
+    } : {
       role: 'button'
-    } : undefined, focusableWhenDisabledProps, otherExternalProps);
+    }, focusableWhenDisabledProps, otherExternalProps);
   }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = (0, _useStableCallback.useStableCallback)(element => {
     elementRef.current = element;

package/internals/usePressAndHold.js

@@ -61,7 +61,7 @@ function usePressAndHold(params) {
     unsubscribeFromGlobalContextMenuRef.current();
     movesAfterTouchRef.current = 0;
   });
-  const startAutoChange = (0, _useStableCallback.useStableCallback)(triggerNativeEvent => {
+  function startAutoChange(triggerNativeEvent) {
     stopAutoChange();
     const element = elementRef.current;
     if (!element) {
@@ -93,7 +93,7 @@ function usePressAndHold(params) {
         }
       });
     });
-  });
+  }
   React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
   const pointerHandlers = {
     onTouchStart() {

package/internals/useRenderElement.js

@@ -129,6 +129,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/menu/arrow/MenuArrow.js

@@ -19,8 +19,8 @@ var _popupStateMapping = require("../../utils/popupStateMapping");
  */
 const MenuArrow = exports.MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/menu/backdrop/MenuBackdrop.js

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

package/menu/checkbox-item/MenuCheckboxItem.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuCheckboxItem = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _MenuCheckboxItemContext = require("./MenuCheckboxItemContext");
 var _useMenuItem = require("../item/useMenuItem");
@@ -75,17 +74,16 @@ const MenuCheckboxItem = exports.MenuCheckboxItem = /*#__PURE__*/React.forwardRe
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = (0, _useStableCallback.useStableCallback)(event => {
-    const details = {
-      ...(0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent),
-      preventUnmountOnClose: () => {}
-    };
+  function handleClick(event) {
+    const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.itemPress, event.nativeEvent, undefined, {
+      preventUnmountOnClose() {}
+    });
     onCheckedChange?.(!checked, details);
     if (details.isCanceled) {
       return;
     }
     setChecked(currentlyChecked => !currentlyChecked);
-  });
+  }
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     stateAttributesMapping: _stateAttributesMapping.itemMapping,

package/menu/group/MenuGroup.js

@@ -24,9 +24,6 @@ const MenuGroup = exports.MenuGroup = /*#__PURE__*/React.forwardRef(function Men
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState(undefined);
-  const context = React.useMemo(() => ({
-    setLabelId
-  }), [setLabelId]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     props: {
@@ -36,7 +33,7 @@ const MenuGroup = exports.MenuGroup = /*#__PURE__*/React.forwardRef(function Men
     }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuGroupContext.MenuGroupContext.Provider, {
-    value: context,
+    value: setLabelId,
     children: element
   });
 });

package/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/menu/group/MenuGroupContext.js

@@ -15,7 +15,7 @@ if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuG
 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>.' : (0, _formatErrorMessage2.default)(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>.' : (0, _formatErrorMessage2.default)(31));
   }
   return context;
 }

package/menu/group-label/MenuGroupLabel.js

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

package/menu/link-item/MenuLinkItem.js

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

package/menu/popup/MenuPopup.js

@@ -60,6 +60,8 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
   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';
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
@@ -79,12 +81,13 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
       floatingTreeRoot.events.off('close', handleClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const hoverEnabled = store.useState('hoverEnabled');
-  const disabled = store.useState('disabled');
   (0, _floatingUiReact.useHoverFloatingInteraction)(floatingContext, {
     enabled: hoverEnabled && !disabled && !isContextMenu && parent.type !== 'menubar',
     closeDelay
   });
+  const setPopupElement = React.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     transitionStatus,
     side,
@@ -93,9 +96,6 @@ const MenuPopup = exports.MenuPopup = /*#__PURE__*/React.forwardRef(function Men
     nested: parent.type === 'menu',
     instant: instantType
   };
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],