Update error messages

packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts

@@ -25,7 +25,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useAlertDialogRootContext() {
   const context = React.useContext(AlertDialogRootContext);
   if (context === undefined) {
-    throw new Error('Base UI: AlertDialogRootContext is not defined.');
+    throw new Error(
+      'Base UI: AlertDialogRootContext is missing. AlertDialog parts must be placed within <AlertDialog.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts

@@ -13,7 +13,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useCheckboxRootContext() {
   const context = React.useContext(CheckboxRootContext);
   if (context === undefined) {
-    throw new Error('Base UI: CheckboxRootContext is not defined.');
+    throw new Error(
+      'Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts

@@ -20,7 +20,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useCheckboxGroupRootContext(optional = true) {
   const context = React.useContext(CheckboxGroupRootContext);
   if (context === undefined && !optional) {
-    throw new Error('Base UI: CheckboxGroupRootContext is not defined.');
+    throw new Error(
+      'Base UI: CheckboxGroupRootContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx → packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts

@@ -18,7 +18,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useCollapsibleContext() {
   const context = React.useContext(CollapsibleRootContext);
   if (context === undefined) {
-    throw new Error('Base UI: CollapsibleRootContext is not defined.');
+    throw new Error(
+      'Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/Composite/Root/CompositeRootContext.ts

@@ -17,7 +17,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useCompositeRootContext() {
   const context = React.useContext(CompositeRootContext);
   if (context === undefined) {
-    throw new Error('Base UI: CompositeRootContext is not defined.');
+    throw new Error(
+      'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/Dialog/Root/DialogRootContext.ts

@@ -24,7 +24,9 @@ export const DialogRootContext = React.createContext<DialogRootContext | undefin
 export function useDialogRootContext() {
   const context = React.useContext(DialogRootContext);
   if (context === undefined) {
-    throw new Error('Base UI: DialogRootContext is not defined.');
+    throw new Error(
+      'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/Field/Root/FieldRootContext.ts

@@ -71,7 +71,7 @@ export function useFieldRootContext(optional = true) {
 
   if (context.setControlId === NOOP && !optional) {
     throw new Error(
-      'Base UI: FieldRootContext is not defined. Field components must be placed within <Field.Root>.',
+      'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.',
     );
   }
 

packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts

@@ -13,7 +13,9 @@ export const MenuCheckboxItemContext = React.createContext<MenuCheckboxItemConte
 export function useMenuCheckboxItemContext() {
   const context = React.useContext(MenuCheckboxItemContext);
   if (context === undefined) {
-    throw new Error('Base UI: MenuCheckboxItemContext is not defined.');
+    throw new Error(
+      'Base UI: MenuCheckboxItemContext is missing. MenuCheckboxItem parts must be placed within <Menu.CheckboxItem>.',
+    );
   }
 
   return context;

packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts

@@ -27,7 +27,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useMenuPositionerContext() {
   const context = React.useContext(MenuPositionerContext);
   if (context === undefined) {
-    throw new Error('Base UI: MenuPositionerContext is not defined.');
+    throw new Error(
+      'Base UI: MenuPositionerContext is missing. MenuPositioner parts must be placed within <Menu.Positioner>.',
+    );
   }
   return context;
 }

packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts

@@ -16,7 +16,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useMenuRadioGroupContext() {
   const context = React.useContext(MenuRadioGroupContext);
   if (context === undefined) {
-    throw new Error('Base UI: MenuRadioGroupContext is not defined.');
+    throw new Error(
+      'Base UI: MenuRadioGroupContext is missing. MenuRadioGroup parts must be placed within <Menu.RadioGroup>.',
+    );
   }
 
   return context;

packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts

@@ -17,7 +17,9 @@ if (process.env.NODE_ENV !== 'production') {
 export function useMenuRadioItemContext() {
   const context = React.useContext(MenuRadioItemContext);
   if (context === undefined) {
-    throw new Error('Base UI: MenuRadioItemContext is not defined.');
+    throw new Error(
+      'Base UI: MenuRadioItemContext is missing. MenuRadioItem parts must be placed within <Menu.RadioItem>.',
+    );
   }
 
   return context;

packages/mui-base/src/Menu/Root/MenuRootContext.ts

@@ -22,7 +22,9 @@ function useMenuRootContext(optional: true): MenuRootContext | undefined;
 function useMenuRootContext(optional?: boolean) {
   const context = React.useContext(MenuRootContext);
   if (context === undefined && !optional) {
-    throw new Error('Base UI: MenuRootContext is not defined.');
+    throw new Error(
+      'Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.',
+    );
   }
 
   return context;

packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx

@@ -4,7 +4,7 @@ import { screen, fireEvent } from '@mui/internal-test-utils';
 import * as NumberField from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants';
-import { NumberFieldContext } from '../Root/NumberFieldContext';
+import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
 
 const testContext = {
   getDecrementButtonProps: (externalProps) => externalProps,
@@ -15,7 +15,7 @@ const testContext = {
     invalid: false,
     readOnly: false,
   },
-} as NumberFieldContext;
+} as NumberFieldRootContext;
 
 describe('<NumberField.Decrement />', () => {
   const { render, clock } = createRenderer();
@@ -24,7 +24,9 @@ describe('<NumberField.Decrement />', () => {
     refInstanceof: window.HTMLButtonElement,
     render(node) {
       return render(
-        <NumberFieldContext.Provider value={testContext}>{node}</NumberFieldContext.Provider>,
+        <NumberFieldRootContext.Provider value={testContext}>
+          {node}
+        </NumberFieldRootContext.Provider>,
       );
     },
   }));

packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useNumberFieldContext } from '../Root/NumberFieldContext';
+import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { NumberFieldRoot } from '../Root/NumberFieldRoot';
 import { BaseUIComponentProps } from '../../utils/types';
@@ -23,7 +23,7 @@ const NumberFieldDecrement = React.forwardRef(function NumberFieldDecrement(
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { getDecrementButtonProps, ownerState } = useNumberFieldContext('Decrement');
+  const { getDecrementButtonProps, ownerState } = useNumberFieldRootContext();
 
   const { renderElement } = useComponentRenderer({
     propGetter: getDecrementButtonProps,

packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { screen } from '@mui/internal-test-utils';
 import * as NumberField from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
-import { NumberFieldContext } from '../Root/NumberFieldContext';
+import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
 
 const testContext = {
   getGroupProps: (externalProps) => ({ role: 'group', ...externalProps }),
@@ -14,7 +14,7 @@ const testContext = {
     invalid: false,
     readOnly: false,
   },
-} as NumberFieldContext;
+} as NumberFieldRootContext;
 
 describe('<NumberField.Group />', () => {
   const { render } = createRenderer();
@@ -23,7 +23,9 @@ describe('<NumberField.Group />', () => {
     refInstanceof: window.HTMLDivElement,
     render(node) {
       return render(
-        <NumberFieldContext.Provider value={testContext}>{node}</NumberFieldContext.Provider>,
+        <NumberFieldRootContext.Provider value={testContext}>
+          {node}
+        </NumberFieldRootContext.Provider>,
       );
     },
   }));

packages/mui-base/src/NumberField/Group/NumberFieldGroup.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useNumberFieldContext } from '../Root/NumberFieldContext';
+import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { NumberFieldRoot } from '../Root/NumberFieldRoot';
 import type { BaseUIComponentProps } from '../../utils/types';
@@ -23,7 +23,7 @@ const NumberFieldGroup = React.forwardRef(function NumberFieldGroup(
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { getGroupProps, ownerState } = useNumberFieldContext('Group');
+  const { getGroupProps, ownerState } = useNumberFieldRootContext();
 
   const { renderElement } = useComponentRenderer({
     propGetter: getGroupProps,

packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx

@@ -4,7 +4,7 @@ import { screen, fireEvent } from '@mui/internal-test-utils';
 import * as NumberField from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
 import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants';
-import { NumberFieldContext } from '../Root/NumberFieldContext';
+import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
 
 const testContext = {
   getIncrementButtonProps: (externalProps) => externalProps,
@@ -15,7 +15,7 @@ const testContext = {
     invalid: false,
     readOnly: false,
   },
-} as NumberFieldContext;
+} as NumberFieldRootContext;
 
 describe('<NumberField.Increment />', () => {
   const { render, clock } = createRenderer();
@@ -24,7 +24,9 @@ describe('<NumberField.Increment />', () => {
     refInstanceof: window.HTMLButtonElement,
     render(node) {
       return render(
-        <NumberFieldContext.Provider value={testContext}>{node}</NumberFieldContext.Provider>,
+        <NumberFieldRootContext.Provider value={testContext}>
+          {node}
+        </NumberFieldRootContext.Provider>,
       );
     },
   }));

packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useNumberFieldContext } from '../Root/NumberFieldContext';
+import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { NumberFieldRoot } from '../Root/NumberFieldRoot';
 import type { BaseUIComponentProps } from '../../utils/types';
@@ -23,7 +23,7 @@ const NumberFieldIncrement = React.forwardRef(function NumberFieldIncrement(
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { getIncrementButtonProps, ownerState } = useNumberFieldContext('Increment');
+  const { getIncrementButtonProps, ownerState } = useNumberFieldRootContext();
 
   const { renderElement } = useComponentRenderer({
     propGetter: getIncrementButtonProps,

packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { act, screen, fireEvent } from '@mui/internal-test-utils';
 import * as NumberField from '@base_ui/react/NumberField';
 import { createRenderer, describeConformance } from '#test-utils';
-import { NumberFieldContext } from '../Root/NumberFieldContext';
+import { NumberFieldRootContext } from '../Root/NumberFieldRootContext';
 
 const testContext = {
   getInputProps: (externalProps) => externalProps,
@@ -14,7 +14,7 @@ const testContext = {
     invalid: false,
     readOnly: false,
   },
-} as NumberFieldContext;
+} as NumberFieldRootContext;
 
 describe('<NumberField.Input />', () => {
   const { render } = createRenderer();
@@ -23,7 +23,9 @@ describe('<NumberField.Input />', () => {
     refInstanceof: window.HTMLInputElement,
     render(node) {
       return render(
-        <NumberFieldContext.Provider value={testContext}>{node}</NumberFieldContext.Provider>,
+        <NumberFieldRootContext.Provider value={testContext}>
+          {node}
+        </NumberFieldRootContext.Provider>,
       );
     },
   }));

packages/mui-base/src/NumberField/Input/NumberFieldInput.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useNumberFieldContext } from '../Root/NumberFieldContext';
+import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import type { NumberFieldRoot } from '../Root/NumberFieldRoot';
@@ -24,7 +24,7 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { getInputProps, inputRef, ownerState } = useNumberFieldContext('Input');
+  const { getInputProps, inputRef, ownerState } = useNumberFieldRootContext();
 
   const mergedInputRef = useForkRef(forwardedRef, inputRef);
 

packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { NumberFieldContext } from './NumberFieldContext';
+import { NumberFieldRootContext } from './NumberFieldRootContext';
 import { UseNumberFieldRoot, useNumberFieldRoot } from './useNumberFieldRoot';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
@@ -91,9 +91,9 @@ const NumberFieldRoot = React.forwardRef(function NumberFieldRoot(
   });
 
   return (
-    <NumberFieldContext.Provider value={contextValue}>
+    <NumberFieldRootContext.Provider value={contextValue}>
       {renderElement()}
-    </NumberFieldContext.Provider>
+    </NumberFieldRootContext.Provider>
   );
 });
 

packages/mui-base/src/NumberField/Root/NumberFieldRootContext.ts

@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+import type { UseNumberFieldRoot } from './useNumberFieldRoot';
+import type { NumberFieldRoot } from './NumberFieldRoot';
+
+export interface NumberFieldRootContext extends UseNumberFieldRoot.ReturnValue {
+  ownerState: NumberFieldRoot.OwnerState;
+}
+
+export const NumberFieldRootContext = React.createContext<NumberFieldRootContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  NumberFieldRootContext.displayName = 'NumberFieldRootContext';
+}
+
+export function useNumberFieldRootContext() {
+  const context = React.useContext(NumberFieldRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>.',
+    );
+  }
+
+  return context;
+}