[core] Make context definitions consistent (mui#735)

atomiks · Oct 17, 2024 · 8c52af4 · 8c52af4
1 parent 7445aad
commit 8c52af4
Show file tree

Hide file tree

Showing 71 changed files with 368 additions and 226 deletions.
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Slider } from '@base_ui/react/Slider';
-import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
+import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
 
 const STOPS = [
   {
@@ -33,7 +33,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = useSliderRootContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useTheme } from '@mui/system';
 import { Slider } from '@base_ui/react/Slider';
 import { Tooltip } from '@base_ui/react/Tooltip';
-import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
+import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
 
 function useIsDarkMode() {
   const theme = useTheme();
@@ -74,7 +74,7 @@ export default function App() {
 
 const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef<any>) {
   const { index, style, ...otherProps } = props;
-  const { percentageValues } = useSliderContext();
+  const { percentageValues } = useSliderRootContext();
   const isFilled = percentageValues[0] >= index * 10;
   return (
     <span

diff --git a/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts b/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts
@@ -18,10 +18,17 @@ export const AlertDialogRootContext = React.createContext<AlertDialogRootContext
   undefined,
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  AlertDialogRootContext.displayName = 'AlertDialogRootContext';
+}
+
 export function useAlertDialogRootContext() {
   const context = React.useContext(AlertDialogRootContext);
   if (context === undefined) {
-    throw new Error('useAlertDialogRootContext must be used within an AlertDialogRoot');
+    throw new Error(
+      'Base UI: AlertDialogRootContext is missing. AlertDialog parts must be placed within <AlertDialog.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts b/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts
@@ -4,14 +4,19 @@ import type { CheckboxRoot } from './CheckboxRoot';
 
 export type CheckboxRootContext = CheckboxRoot.OwnerState;
 
-export const CheckboxRootContext = React.createContext<CheckboxRootContext | null>(null);
+export const CheckboxRootContext = React.createContext<CheckboxRootContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  CheckboxRootContext.displayName = 'CheckboxRootContext';
+}
 
 export function useCheckboxRootContext() {
   const context = React.useContext(CheckboxRootContext);
-  if (context === null) {
+  if (context === undefined) {
     throw new Error(
-      'Base UI: Checkbox.Indicator must be placed inside the Checkbox.Root component.',
+      'Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.',
     );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts
@@ -9,12 +9,21 @@ export interface CheckboxGroupRootContext {
   parent: UseCheckboxGroupParent.ReturnValue;
 }
 
-export const CheckboxGroupRootContext = React.createContext<CheckboxGroupRootContext | null>(null);
+export const CheckboxGroupRootContext = React.createContext<CheckboxGroupRootContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CheckboxGroupRootContext.displayName = 'CheckboxGroupRootContext';
+}
 
 export function useCheckboxGroupRootContext(optional = true) {
   const context = React.useContext(CheckboxGroupRootContext);
-  if (context === null && !optional) {
-    throw new Error('Base UI: CheckboxGroupRootContext is not defined.');
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI: CheckboxGroupRootContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { Collapsible } from '@base_ui/react/Collapsible';
-import { CollapsibleContext } from '../Root/CollapsibleContext';
 import { describeConformance } from '../../../test/describeConformance';
+import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 
-const contextValue: Collapsible.Root.Context = {
+const contextValue: CollapsibleRootContext = {
   animated: false,
   contentId: 'ContentId',
   disabled: false,
@@ -28,7 +28,9 @@ describe('<Collapsible.Content />', () => {
     inheritComponent: 'div',
     render: (node) => {
       const { container, ...other } = render(
-        <CollapsibleContext.Provider value={contextValue}>{node}</CollapsibleContext.Provider>,
+        <CollapsibleRootContext.Provider value={contextValue}>
+          {node}
+        </CollapsibleRootContext.Provider>,
       );
 
       return { container, ...other };

diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { useCollapsibleContext } from '../Root/CollapsibleContext';
+import { useCollapsibleContext } from '../Root/CollapsibleRootContext';
 import type { CollapsibleRoot } from '../Root/CollapsibleRoot';
 import { collapsibleStyleHookMapping } from '../Root/styleHooks';
 import { useCollapsibleContent } from './useCollapsibleContent';

diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useCollapsibleRoot } from './useCollapsibleRoot';
-import { CollapsibleContext } from './CollapsibleContext';
+import { CollapsibleRootContext } from './CollapsibleRootContext';
 import { collapsibleStyleHookMapping } from './styleHooks';
 
 /**
@@ -50,7 +50,7 @@ const CollapsibleRoot = React.forwardRef(function CollapsibleRoot(
     [collapsible.open, collapsible.disabled, collapsible.transitionStatus],
   );
 
-  const contextValue: CollapsibleRoot.Context = React.useMemo(
+  const contextValue: CollapsibleRootContext = React.useMemo(
     () => ({
       ...collapsible,
       ownerState,
@@ -69,24 +69,22 @@ const CollapsibleRoot = React.forwardRef(function CollapsibleRoot(
 
   if (!renderProp) {
     return (
-      <CollapsibleContext.Provider value={contextValue}>{children}</CollapsibleContext.Provider>
+      <CollapsibleRootContext.Provider value={contextValue}>
+        {children}
+      </CollapsibleRootContext.Provider>
     );
   }
 
   return (
-    <CollapsibleContext.Provider value={contextValue}>
+    <CollapsibleRootContext.Provider value={contextValue}>
       {renderElement()}
-    </CollapsibleContext.Provider>
+    </CollapsibleRootContext.Provider>
   );
 });
 
 export { CollapsibleRoot };
 
 export namespace CollapsibleRoot {
-  export interface Context extends useCollapsibleRoot.ReturnValue {
-    ownerState: OwnerState;
-  }
-
   export interface OwnerState
     extends Pick<useCollapsibleRoot.ReturnValue, 'open' | 'disabled' | 'transitionStatus'> {}
 

diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts b/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts
@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+import type { CollapsibleRoot } from './CollapsibleRoot';
+import type { useCollapsibleRoot } from './useCollapsibleRoot';
+
+export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue {
+  ownerState: CollapsibleRoot.OwnerState;
+}
+
+export const CollapsibleRootContext = React.createContext<CollapsibleRootContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CollapsibleRootContext.displayName = 'CollapsibleRootContext';
+}
+
+export function useCollapsibleContext() {
+  const context = React.useContext(CollapsibleRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>.',
+    );
+  }
+
+  return context;
+}
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { Collapsible } from '@base_ui/react/Collapsible';
-import { CollapsibleContext } from '../Root/CollapsibleContext';
 import { describeConformance } from '../../../test/describeConformance';
+import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 
-const contextValue: Collapsible.Root.Context = {
+const contextValue: CollapsibleRootContext = {
   animated: false,
   contentId: 'ContentId',
   disabled: false,
@@ -28,7 +28,9 @@ describe('<Collapsible.Trigger />', () => {
     inheritComponent: 'button',
     render: (node) => {
       const { container, ...other } = render(
-        <CollapsibleContext.Provider value={contextValue}>{node}</CollapsibleContext.Provider>,
+        <CollapsibleRootContext.Provider value={contextValue}>
+          {node}
+        </CollapsibleRootContext.Provider>,
       );
 
       return { container, ...other };

diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { BaseUIComponentProps } from '../../utils/types';
-import { useCollapsibleContext } from '../Root/CollapsibleContext';
+import { useCollapsibleContext } from '../Root/CollapsibleRootContext';
 import { CollapsibleRoot } from '../Root/CollapsibleRoot';
 import { collapsibleStyleHookMapping } from '../Root/styleHooks';
 import { useCollapsibleTrigger } from './useCollapsibleTrigger';

diff --git a/packages/mui-base/src/Composite/List/CompositeListContext.ts b/packages/mui-base/src/Composite/List/CompositeListContext.ts
@@ -16,6 +16,10 @@ export const CompositeListContext = React.createContext<CompositeListContextValu
   elementsRef: { current: [] },
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  CompositeListContext.displayName = 'CompositeListContext';
+}
+
 export function useCompositeListContext() {
   return React.useContext(CompositeListContext);
 }
diff --git a/packages/mui-base/src/Composite/Root/CompositeRoot.tsx b/packages/mui-base/src/Composite/Root/CompositeRoot.tsx
@@ -39,7 +39,7 @@ const CompositeRoot = React.forwardRef(function CompositeRoot(
     extraProps: otherProps,
   });
 
-  const contextValue: CompositeRootContext.Value = React.useMemo(
+  const contextValue: CompositeRootContext = React.useMemo(
     () => ({ activeIndex, onActiveIndexChange }),
     [activeIndex, onActiveIndexChange],
   );

diff --git a/packages/mui-base/src/Composite/Root/CompositeRootContext.ts b/packages/mui-base/src/Composite/Root/CompositeRootContext.ts
@@ -1,19 +1,26 @@
 'use client';
 import * as React from 'react';
 
-export const CompositeRootContext = React.createContext<CompositeRootContext.Value | null>(null);
+export interface CompositeRootContext {
+  activeIndex: number;
+  onActiveIndexChange: (index: number) => void;
+}
+
+export const CompositeRootContext = React.createContext<CompositeRootContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CompositeRootContext.displayName = 'CompositeRootContext';
+}
 
 export function useCompositeRootContext() {
   const context = React.useContext(CompositeRootContext);
-  if (context === null) {
-    throw new Error('<Composite.Item> must be used within <Composite.Root>');
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.',
+    );
   }
-  return context;
-}
 
-export namespace CompositeRootContext {
-  export interface Value {
-    activeIndex: number;
-    onActiveIndexChange: (index: number) => void;
-  }
+  return context;
 }
diff --git a/packages/mui-base/src/Dialog/Root/DialogRootContext.ts b/packages/mui-base/src/Dialog/Root/DialogRootContext.ts
@@ -24,7 +24,10 @@ export const DialogRootContext = React.createContext<DialogRootContext | undefin
 export function useDialogRootContext() {
   const context = React.useContext(DialogRootContext);
   if (context === undefined) {
-    throw new Error('useDialogRootContext must be used within a DialogRoot');
+    throw new Error(
+      'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Field/Root/FieldRootContext.ts b/packages/mui-base/src/Field/Root/FieldRootContext.ts
@@ -70,7 +70,9 @@ export function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);
 
   if (context.setControlId === NOOP && !optional) {
-    throw new Error('Base UI: Field components must be placed within <Field.Root>.');
+    throw new Error(
+      'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.',
+    );
   }
 
   return context;

diff --git a/packages/mui-base/src/Form/Root/FormRootContext.ts b/packages/mui-base/src/Form/Root/FormRootContext.ts
@@ -28,6 +28,10 @@ export const FormRootContext = React.createContext<FormRootContext>({
   onClearErrors: () => {},
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  FormRootContext.displayName = 'FormRootContext';
+}
+
 export function useFormRootContext() {
   return React.useContext(FormRootContext);
 }
diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx
@@ -13,7 +13,7 @@ const testRootContext: MenuRootContext = {
   getPositionerProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
-  parentContext: null,
+  parentContext: undefined,
   nested: false,
   triggerElement: null,
   setTriggerElement: () => {},

diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts b/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('useMenuCheckboxItemContext must be used within a MenuCheckboxItemProvider');
+    throw new Error(
+      'Base UI: MenuCheckboxItemContext is missing. MenuCheckboxItem parts must be placed within <Menu.CheckboxItem>.',
+    );
   }
 
   return context;

diff --git a/packages/mui-base/src/Menu/Group/MenuGroupContext.ts b/packages/mui-base/src/Menu/Group/MenuGroupContext.ts
@@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 export function useMenuGroupRootContext() {
   const context = React.useContext(MenuGroupContext);
-  if (context == null) {
+  if (context === undefined) {
     throw new Error('Base UI: Missing MenuGroupRootContext provider');
   }
 

diff --git a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx b/packages/mui-base/src/Menu/Item/MenuItem.test.tsx
@@ -13,7 +13,7 @@ const testRootContext: MenuRootContext = {
   getPositionerProps: (p) => ({ ...p }),
   getTriggerProps: (p) => ({ ...p }),
   getItemProps: (p) => ({ ...p }),
-  parentContext: null,
+  parentContext: undefined,
   nested: false,
   triggerElement: null,
   setTriggerElement: () => {},