[core] refactor: remove manual displayName

babel.config.js

@@ -113,6 +113,10 @@ module.exports = function getBabelConfig(api) {
       : []),
   ];
 
+  if (process.env.NODE_ENV !== 'test') {
+    plugins.push('@mui/internal-babel-plugin-display-name');
+  }
+
   if (process.env.NODE_ENV === 'test') {
     plugins.push([
       'babel-plugin-module-resolver',

docs/src/components/pricing/LicenseModelContext.tsx

@@ -2,10 +2,6 @@ import * as React from 'react';
 
 const LicenseModel = React.createContext<any>({});
 
-if (process.env.NODE_ENV !== 'production') {
-  LicenseModel.displayName = 'LicenseModel';
-}
-
 export function LicenseModelProvider(props: any) {
   const [licenseModel, setLicenseModel] = React.useState<string>('annual');
   const value = React.useMemo(

docs/src/modules/components/PageContext.tsx

@@ -28,8 +28,4 @@ export interface MuiPageContext {
 
 const PageContext = React.createContext<MuiPageContext>(undefined!);
 
-if (process.env.NODE_ENV !== 'production') {
-  PageContext.displayName = 'PageContext';
-}
-
 export default PageContext;

docs/src/modules/components/ThemeContext.tsx

@@ -87,16 +87,8 @@ export const DispatchContext = React.createContext<React.ActionDispatch<any>>(()
   throw new Error('Forgot to wrap component in `ThemeProvider`');
 });
 
-if (process.env.NODE_ENV !== 'production') {
-  DispatchContext.displayName = 'ThemeDispatchContext';
-}
-
 export const ThemeOptionsContext = React.createContext(themeInitialOptions);
 
-if (process.env.NODE_ENV !== 'production') {
-  ThemeOptionsContext.displayName = 'ThemeOptionsContext';
-}
-
 export function ThemeProvider(props: React.PropsWithChildren) {
   const { children } = props;
 

docs/src/modules/utils/codeStylingSolution.js

@@ -7,9 +7,6 @@ const CodeStylingContext = React.createContext({
   codeStyling: CODE_STYLING.SYSTEM,
   setCodeStyling: () => {},
 });
-if (process.env.NODE_ENV !== 'production') {
-  CodeStylingContext.displayName = 'CodeStyling';
-}
 
 function useFirstRender() {
   const firstRenderRef = React.useRef(true);

docs/src/modules/utils/codeVariant.js

@@ -7,9 +7,6 @@ const CodeVariantContext = React.createContext({
   codeVariant: CODE_VARIANTS.TS,
   setCodeVariant: () => {},
 });
-if (process.env.NODE_ENV !== 'production') {
-  CodeVariantContext.displayName = 'CodeVariant';
-}
 
 function useFirstRender() {
   const firstRenderRef = React.useRef(true);

docs/src/pages/versions/VersionsContext.js

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

package.json

@@ -122,6 +122,7 @@
     "@babel/register": "^7.27.1",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
+    "@mui/internal-babel-plugin-display-name": "^1.0.0",
     "@mui/internal-babel-plugin-resolve-imports": "^2.0.3",
     "@mui/internal-babel-plugin-minify-errors": "^2.0.4",
     "@mui/internal-docs-utils": "workspace:^",

packages/mui-docs/src/i18n/i18n.tsx

@@ -51,9 +51,6 @@ const UserLanguageContext = React.createContext<UserLanguageContextValue>({
   userLanguage: '',
   setUserLanguage: () => {},
 });
-if (process.env.NODE_ENV !== 'production') {
-  UserLanguageContext.displayName = 'UserLanguage';
-}
 
 export interface UserLanguageProviderProps {
   children: React.ReactNode;

packages/mui-joy/src/Accordion/AccordionContext.ts

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

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

@@ -12,10 +12,6 @@ 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/ButtonGroup/ButtonGroupContext.ts

@@ -13,8 +13,4 @@ interface IButtonGroupContext {
  */
 const ButtonGroupContext = React.createContext<IButtonGroupContext>({});
 
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupContext.displayName = 'ButtonGroupContext';
-}
-
 export default ButtonGroupContext;

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

@@ -7,8 +7,4 @@ 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,8 +16,4 @@ 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,8 +2,4 @@ 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,8 +2,4 @@ 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,8 +2,4 @@ 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,8 +2,4 @@ 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,8 +2,4 @@ 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/ListItemButton/ListItemButtonOrientationContext.ts

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

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

@@ -4,8 +4,4 @@ const ListSubheaderContext = React.createContext<
   undefined | React.Dispatch<React.SetStateAction<string>>
 >(undefined);
 
-if (process.env.NODE_ENV !== 'production') {
-  ListSubheaderContext.displayName = 'ListSubheaderContext';
-}
-
 export default ListSubheaderContext;

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

@@ -3,8 +3,4 @@ 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,8 +3,4 @@ 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,8 +6,4 @@ 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/RadioGroup/RadioGroupContext.ts

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

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

@@ -3,8 +3,4 @@ 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,8 +17,4 @@ 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

@@ -20,10 +20,6 @@ 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.
@@ -32,10 +28,6 @@ if (process.env.NODE_ENV !== 'production') {
  */
 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,10 +3,6 @@ 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-lab/src/TabContext/TabContext.js

@@ -6,9 +6,6 @@ import PropTypes from 'prop-types';
  * @type {React.Context<{ idPrefix: string; value: string } | null>}
  */
 const Context = React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  Context.displayName = 'TabContext';
-}
 
 function useUniquePrefix() {
   const [id, setId] = React.useState(null);

packages/mui-lab/src/Timeline/TimelineContext.ts

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

packages/mui-material/src/Accordion/AccordionContext.js

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

packages/mui-material/src/ButtonGroup/ButtonGroupButtonContext.ts

@@ -10,8 +10,4 @@ const ButtonGroupButtonContext = React.createContext<ButtonPositionClassName | u
   undefined,
 );
 
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
-}
-
 export default ButtonGroupButtonContext;

packages/mui-material/src/ButtonGroup/ButtonGroupContext.ts

@@ -19,8 +19,4 @@ interface ButtonGroupContextType {
  */
 const ButtonGroupContext = React.createContext<ButtonGroupContextType>({});
 
-if (process.env.NODE_ENV !== 'production') {
-  ButtonGroupContext.displayName = 'ButtonGroupContext';
-}
-
 export default ButtonGroupContext;

packages/mui-material/src/Dialog/DialogContext.ts

@@ -7,8 +7,4 @@ interface DialogContextValue {
 
 const DialogContext = React.createContext<DialogContextValue>({});
 
-if (process.env.NODE_ENV !== 'production') {
-  DialogContext.displayName = 'DialogContext';
-}
-
 export default DialogContext;

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

@@ -30,8 +30,4 @@ export interface FormControlState extends Pick<FormControlProps, ContextFromProp
  */
 const FormControlContext = React.createContext<FormControlState | undefined>(undefined);
 
-if (process.env.NODE_ENV !== 'production') {
-  FormControlContext.displayName = 'FormControlContext';
-}
-
 export default FormControlContext;

packages/mui-material/src/GridLegacy/GridLegacyContext.js

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

packages/mui-material/src/ImageList/ImageListContext.js

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

packages/mui-material/src/List/ListContext.js

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

packages/mui-material/src/RadioGroup/RadioGroupContext.ts

@@ -12,8 +12,4 @@ export interface RadioGroupContextValue {
  */
 const RadioGroupContext = React.createContext<RadioGroupContextValue | undefined>(undefined);
 
-if (process.env.NODE_ENV !== 'production') {
-  RadioGroupContext.displayName = 'RadioGroupContext';
-}
-
 export default RadioGroupContext;