[core] Fix missing context display names

packages/mui-base/src/Unstable_Popup/PopupContext.ts

@@ -6,3 +6,7 @@ export interface PopupContextValue {
 }
 
 export const PopupContext = React.createContext<PopupContextValue | null>(null);
+
+if (process.env.NODE_ENV !== 'production') {
+  PopupContext.displayName = 'PopupContext';
+}

packages/mui-base/src/useCompound/useCompoundParent.ts

@@ -43,7 +43,9 @@ export const CompoundComponentContext = React.createContext<CompoundComponentCon
   any
 > | null>(null);
 
-CompoundComponentContext.displayName = 'CompoundComponentContext';
+if (process.env.NODE_ENV !== 'production') {
+  CompoundComponentContext.displayName = 'CompoundComponentContext';
+}
 
 export interface UseCompoundParentReturnValue<Key, Subitem extends { ref: React.RefObject<Node> }> {
   /**

packages/mui-base/src/useDropdown/DropdownContext.ts

@@ -12,4 +12,8 @@ export interface DropdownContextValue {
 
 const DropdownContext = React.createContext<DropdownContextValue | null>(null);
 
+if (process.env.NODE_ENV !== 'production') {
+  DropdownContext.displayName = 'DropdownContext';
+}
+
 export { DropdownContext };

packages/mui-base/src/useList/ListContext.ts

@@ -8,6 +8,7 @@ export interface ListContextValue<ItemValue> {
 }
 
 export const ListContext = React.createContext<ListContextValue<any> | null>(null);
+
 if (process.env.NODE_ENV !== 'production') {
   ListContext.displayName = 'ListContext';
 }

packages/mui-base/src/useTransition/TransitionContext.ts

@@ -20,3 +20,7 @@ export type TransitionContextValue = {
 };
 
 export const TransitionContext = React.createContext<TransitionContextValue | null>(null);
+
+if (process.env.NODE_ENV !== 'production') {
+  TransitionContext.displayName = 'TransitionContext';
+}

packages/mui-base/src/utils/ClassNameConfigurator.tsx

@@ -15,6 +15,10 @@ const defaultContextValue: ClassNameConfiguration = {
 const ClassNameConfiguratorContext =
   React.createContext<ClassNameConfiguration>(defaultContextValue);
 
+if (process.env.NODE_ENV !== 'production') {
+  ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext';
+}
+
 export interface ClassNameConfiguratorProps extends Partial<ClassNameConfiguration> {
   children?: React.ReactNode;
 }

packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx

@@ -12,6 +12,10 @@ import useSlot from '../utils/useSlot';
 
 export const AvatarGroupContext = React.createContext<AvatarGroupOwnerState | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  AvatarGroupContext.displayName = 'AvatarGroupContext';
+}
+
 const useUtilityClasses = () => {
   const slots = {
     root: ['root'],

packages/mui-joy/src/Chip/ChipContext.ts

@@ -7,4 +7,8 @@ const ChipColorContext = React.createContext<Pick<ChipProps, 'disabled' | 'varia
   color: undefined,
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  ChipColorContext.displayName = 'ChipColorContext';
+}
+
 export default ChipColorContext;

packages/mui-joy/src/FormControl/FormControlContext.ts

@@ -16,4 +16,8 @@ export type FormControlContextValue =
 
 const FormControlContext = React.createContext<FormControlContextValue>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  FormControlContext.displayName = 'FormControlContext';
+}
+
 export default FormControlContext;

packages/mui-joy/src/List/ComponentListContext.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const ComponentListContext = React.createContext<string | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  ComponentListContext.displayName = 'ComponentListContext';
+}
+
 export default ComponentListContext;

packages/mui-joy/src/List/GroupListContext.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const GroupListContext = React.createContext<undefined | 'menu' | 'select'>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  GroupListContext.displayName = 'GroupListContext';
+}
+
 export default GroupListContext;

packages/mui-joy/src/List/NestedListContext.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const NestedListContext = React.createContext<boolean | string>(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  NestedListContext.displayName = 'NestedListContext';
+}
+
 export default NestedListContext;

packages/mui-joy/src/List/RowListContext.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const RowListContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  RowListContext.displayName = 'RowListContext';
+}
+
 export default RowListContext;

packages/mui-joy/src/List/WrapListContext.ts

@@ -2,4 +2,8 @@ import * as React from 'react';
 
 const WrapListContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  WrapListContext.displayName = 'WrapListContext';
+}
+
 export default WrapListContext;

packages/mui-joy/src/ListItem/ListItem.tsx

@@ -17,7 +17,7 @@ import NestedListContext from '../List/NestedListContext';
 import RowListContext from '../List/RowListContext';
 import WrapListContext from '../List/WrapListContext';
 import ComponentListContext from '../List/ComponentListContext';
-import ListSubheaderDispatch from '../ListSubheader/ListSubheaderContext';
+import ListSubheaderContext from '../ListSubheader/ListSubheaderContext';
 import GroupListContext from '../List/GroupListContext';
 
 const useUtilityClasses = (ownerState: ListItemOwnerState) => {
@@ -244,7 +244,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
   });
 
   return (
-    <ListSubheaderDispatch.Provider value={setSubheaderId}>
+    <ListSubheaderContext.Provider value={setSubheaderId}>
       <NestedListContext.Provider value={nested ? subheaderId || true : false}>
         <SlotRoot {...rootProps}>
           {startAction && <SlotStartAction {...startActionProps}>{startAction}</SlotStartAction>}
@@ -265,7 +265,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
           {endAction && <SlotEndAction {...endActionProps}>{endAction}</SlotEndAction>}
         </SlotRoot>
       </NestedListContext.Provider>
-    </ListSubheaderDispatch.Provider>
+    </ListSubheaderContext.Provider>
   );
 }) as OverridableComponent<ListItemTypeMap>;
 

packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts

@@ -4,4 +4,8 @@ const ListItemButtonOrientationContext = React.createContext<'horizontal' | 'ver
   'horizontal',
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  ListItemButtonOrientationContext.displayName = 'ListItemButtonOrientationContext';
+}
+
 export default ListItemButtonOrientationContext;

packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx

@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import { createRenderer } from '@mui-internal/test-utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import ListSubheader, { listSubheaderClasses as classes } from '@mui/joy/ListSubheader';
-import ListSubheaderDispatch from './ListSubheaderContext';
+import ListSubheaderContext from './ListSubheaderContext';
 import describeConformance from '../../test/describeConformance';
 
 describe('Joy <ListSubheader />', () => {
@@ -50,9 +50,9 @@ describe('Joy <ListSubheader />', () => {
   it('should call dispatch context with the generated id', () => {
     const dispatch = spy();
     const { container } = render(
-      <ListSubheaderDispatch.Provider value={dispatch}>
+      <ListSubheaderContext.Provider value={dispatch}>
         <ListSubheader />
-      </ListSubheaderDispatch.Provider>,
+      </ListSubheaderContext.Provider>,
     );
 
     // @ts-ignore

packages/mui-joy/src/ListSubheader/ListSubheader.tsx

@@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { styled, useThemeProps } from '../styles';
 import { ListSubheaderOwnerState, ListSubheaderTypeMap } from './ListSubheaderProps';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
-import ListSubheaderDispatch from './ListSubheaderContext';
+import ListSubheaderContext from './ListSubheaderContext';
 import useSlot from '../utils/useSlot';
 import { INVERTED_COLORS_ATTR } from '../colorInversion/colorInversionUtils';
 
@@ -88,7 +88,7 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) {
     ...other
   } = props;
   const id = useId(idOverride);
-  const setSubheaderId = React.useContext(ListSubheaderDispatch);
+  const setSubheaderId = React.useContext(ListSubheaderContext);
 
   React.useEffect(() => {
     if (setSubheaderId) {

packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
 
-const ListSubheaderDispatch = React.createContext<
+const ListSubheaderContext = React.createContext<
   undefined | React.Dispatch<React.SetStateAction<string>>
 >(undefined);
 
-export default ListSubheaderDispatch;
+if (process.env.NODE_ENV !== 'production') {
+  ListSubheaderContext.displayName = 'ListSubheaderContext';
+}
+
+export default ListSubheaderContext;

packages/mui-joy/src/Modal/CloseModalContext.ts

@@ -3,4 +3,8 @@ import { ModalProps } from './ModalProps';
 
 const CloseModalContext = React.createContext<undefined | ModalProps['onClose']>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  CloseModalContext.displayName = 'CloseModalContext';
+}
+
 export default CloseModalContext;

packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts

@@ -3,4 +3,8 @@ import { ModalDialogProps } from './ModalDialogProps';
 
 const ModalDialogSizeContext = React.createContext<undefined | ModalDialogProps['size']>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  ModalDialogSizeContext.displayName = 'ModalDialogSizeContext';
+}
+
 export default ModalDialogSizeContext;

packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts

@@ -6,4 +6,8 @@ const ModalDialogVariantColorContext = React.createContext<
   | (Pick<ModalDialogProps, 'variant' | 'color'> & { labelledBy?: string; describedBy?: string })
 >(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  ModalDialogVariantColorContext.displayName = 'ModalDialogVariantColorContext';
+}
+
 export default ModalDialogVariantColorContext;

packages/mui-joy/src/Tabs/SizeTabsContext.ts

@@ -3,4 +3,8 @@ import { TabsProps } from './TabsProps';
 
 const SizeTabsContext = React.createContext<Exclude<TabsProps['size'], undefined>>('md');
 
+if (process.env.NODE_ENV !== 'production') {
+  SizeTabsContext.displayName = 'SizeTabsContext';
+}
+
 export default SizeTabsContext;

packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx

@@ -17,4 +17,8 @@ const ToggleButtonGroupContext = React.createContext<ToggleButtonGroupContextTyp
   undefined,
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';
+}
+
 export default ToggleButtonGroupContext;

packages/mui-joy/src/Typography/Typography.tsx

@@ -22,6 +22,10 @@ import { TypographySystem } from '../styles/types';
  */
 export const TypographyNestedContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  TypographyNestedContext.displayName = 'TypographyNestedContext';
+}
+
 /**
  * @internal
  * Typography's level will be inherit within this context unless an explicit `level` prop is provided.
@@ -30,6 +34,10 @@ export const TypographyNestedContext = React.createContext(false);
  */
 export const TypographyInheritContext = React.createContext(false);
 
+if (process.env.NODE_ENV !== 'production') {
+  TypographyInheritContext.displayName = 'TypographyInheritContext';
+}
+
 const useUtilityClasses = (ownerState: TypographyOwnerState) => {
   const { gutterBottom, noWrap, level, color, variant } = ownerState;
 

packages/mui-joy/src/styles/variantColorInheritance.tsx

@@ -3,6 +3,10 @@ import { ColorPaletteProp, VariantProp } from '@mui/joy/styles/types';
 
 const VariantColorContext = React.createContext<string | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  VariantColorContext.displayName = 'VariantColorContext';
+}
+
 /**
  * @internal For internal usage only.
  *

packages/mui-material-next/src/Tabs/TabsListContext.js

@@ -3,4 +3,8 @@ import * as React from 'react';
 
 const TabsListContext = React.createContext(null);
 
+if (process.env.NODE_ENV !== 'production') {
+  TabsListContext.displayName = 'TabsListContext';
+}
+
 export default TabsListContext;

packages/mui-system/src/Unstable_Grid/createGrid.tsx

@@ -57,7 +57,11 @@ export default function createGrid(
     componentName = 'MuiGrid',
   } = options;
 
-  const OverflowContext = React.createContext<boolean | undefined>(undefined);
+  const GridOverflowContext = React.createContext<boolean | undefined>(undefined);
+
+  if (process.env.NODE_ENV !== 'production') {
+    GridOverflowContext.displayName = 'GridOverflowContext';
+  }
 
   const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => {
     const { container, direction, spacing, wrap, gridSize } = ownerState;
@@ -91,7 +95,7 @@ export default function createGrid(
     const theme = useTheme();
     const themeProps = useThemeProps<typeof inProps & { component?: React.ElementType }>(inProps);
     const props = extendSxProp(themeProps) as Omit<typeof themeProps, 'color'> & GridOwnerState; // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(OverflowContext);
+    const overflow = React.useContext(GridOverflowContext);
     const {
       className,
       children,
@@ -171,11 +175,13 @@ export default function createGrid(
     );
 
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
-      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
       // 2. It is a nested grid with different `disableEqualOverflow` from the context.
       result = (
-        <OverflowContext.Provider value={disableEqualOverflow}>{result}</OverflowContext.Provider>
+        <GridOverflowContext.Provider value={disableEqualOverflow}>
+          {result}
+        </GridOverflowContext.Provider>
       );
     }
 

packages/mui-system/src/cssVars/createCssVarsProvider.js

@@ -48,6 +48,10 @@ export default function createCssVarsProvider(options) {
   }
   const ColorSchemeContext = React.createContext(undefined);
 
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
+
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
     if (!value) {