[core] refactor: remove manual displayName (#17845)

Author: romgrk

babel.config.js

@@ -92,6 +92,7 @@ module.exports = function getBabelConfig(api) {
         ignoreFilenames: ['DataGrid.tsx', 'DataGridPro.tsx'],
       },
     ],
+    '@mui/internal-babel-plugin-display-name',
     [
       'transform-inline-environment-variables',
       {

package.json

@@ -85,6 +85,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",
+    "@mui/internal-babel-plugin-display-name": "github:mui/mui-public#master&path:./packages/babel-plugin-display-name",
     "@mui/internal-babel-plugin-resolve-imports": "^2.0.1",
     "@mui/internal-markdown": "^2.0.4",
     "@mui/internal-test-utils": "^2.0.7",

packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx

@@ -13,10 +13,6 @@ export const ChartsLocalizationContext = React.createContext<ChartsLocalizationC
   null,
 );
 
-if (process.env.NODE_ENV !== 'production') {
-  ChartsLocalizationContext.displayName = 'ChartsLocalizationContext';
-}
-
 export interface ChartsLocalizationProviderProps {
   children?: React.ReactNode;
   /**

packages/x-charts/src/Gauge/GaugeProvider.tsx

@@ -127,10 +127,6 @@ export const GaugeContext = React.createContext<
   valueAngle: null,
 });
 
-if (process.env.NODE_ENV !== 'production') {
-  GaugeContext.displayName = 'GaugeContext';
-}
-
 export interface GaugeProviderProps extends GaugeConfig, CircularConfig {
   children: React.ReactNode;
 }

packages/x-charts/src/context/ChartProvider/ChartContext.tsx

@@ -5,7 +5,3 @@ import type { ChartContextValue } from './ChartProvider.types';
  * @ignore - internal component.
  */
 export const ChartContext = React.createContext<ChartContextValue<any> | null>(null);
-
-if (process.env.NODE_ENV !== 'production') {
-  ChartContext.displayName = 'ChartContext';
-}

packages/x-data-grid/src/components/GridApiContext.ts

@@ -2,7 +2,3 @@
 import * as React from 'react';
 
 export const GridApiContext = React.createContext<unknown>(undefined);
-
-if (process.env.NODE_ENV !== 'production') {
-  GridApiContext.displayName = 'GridApiContext';
-}

packages/x-data-grid/src/components/GridConfigurationContext.ts

@@ -2,7 +2,3 @@
 import * as React from 'react';
 
 export const GridConfigurationContext = React.createContext<unknown>(undefined);
-
-if (process.env.NODE_ENV !== 'production') {
-  GridConfigurationContext.displayName = 'GridConfigurationContext';
-}

packages/x-data-grid/src/context/GridRootPropsContext.ts

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

packages/x-data-grid/src/hooks/utils/useGridPrivateApiContext.ts

@@ -5,10 +5,6 @@ import { GridPrivateApiCommunity } from '../../models/api/gridApiCommunity';
 
 export const GridPrivateApiContext = React.createContext<unknown>(undefined);
 
-if (process.env.NODE_ENV !== 'production') {
-  GridPrivateApiContext.displayName = 'GridPrivateApiContext';
-}
-
 export function useGridPrivateApiContext<
   PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity,
 >(): RefObject<PrivateApi> {

packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx

@@ -22,10 +22,6 @@ export type MuiPickersAdapterContextNullableValue = {
 export const MuiPickersAdapterContext =
   React.createContext<MuiPickersAdapterContextNullableValue | null>(null);
 
-if (process.env.NODE_ENV !== 'production') {
-  MuiPickersAdapterContext.displayName = 'MuiPickersAdapterContext';
-}
-
 export interface LocalizationProviderProps<TLocale> {
   children?: React.ReactNode;
   /**

packages/x-license/src/Unstable_LicenseInfoProvider/MuiLicenseInfoContext.ts

@@ -4,8 +4,4 @@ import { MuiLicenseInfo } from '../utils/licenseInfo';
 
 const MuiLicenseInfoContext = React.createContext<MuiLicenseInfo>({ key: undefined });
 
-if (process.env.NODE_ENV !== 'production') {
-  MuiLicenseInfoContext.displayName = 'MuiLicenseInfoContext';
-}
-
 export default MuiLicenseInfoContext;

packages/x-scheduler/src/joy/event-calendar/EventCalendar.tsx

@@ -5,5 +5,3 @@ import './EventCalendar.css';
 export const EventCalendar = React.forwardRef(function EventCalendar() {
   return <div className="EventCalendar">HELLO WORLD</div>;
 });
-
-EventCalendar.displayName = 'EventCalendar';

packages/x-tree-view/src/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.ts

@@ -6,7 +6,3 @@ import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
 export const TreeViewItemDepthContext = React.createContext<
   ((state: TreeViewState<[UseTreeViewItemsSignature]>, itemId: TreeViewItemId) => number) | number
 >(() => -1);
-
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewItemDepthContext.displayName = 'TreeViewItemDepthContext';
-}

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewChildrenItemProvider.tsx

@@ -9,10 +9,6 @@ import { selectorItemOrderedChildrenIds } from '../plugins/useTreeViewItems/useT
 export const TreeViewChildrenItemContext =
   React.createContext<TreeViewChildrenItemContextValue | null>(null);
 
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewChildrenItemContext.displayName = 'TreeViewChildrenItemContext';
-}
-
 interface TreeViewChildrenItemProviderProps {
   itemId: string | null;
   idAttribute: string | null;

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewContext.ts

@@ -7,10 +7,6 @@ import { TreeViewContextValue } from './TreeViewProvider.types';
  */
 export const TreeViewContext = React.createContext<TreeViewContextValue<any> | null>(null);
 
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewContext.displayName = 'TreeViewContext';
-}
-
 export const useTreeViewContext = <
   TSignatures extends readonly TreeViewAnyPluginSignature[],
   TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = [],

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewStyleContext.ts

@@ -63,10 +63,6 @@ export const TreeViewStyleContext = React.createContext<TreeViewStyleContextValu
   slotProps: {},
 });
 
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewStyleContext.displayName = 'TreeViewStyleContext';
-}
-
 export const useTreeViewStyleContext = () => {
   return React.useContext(TreeViewStyleContext);
 };

packages/x-tree-view/src/internals/components/RichTreeViewItems.tsx

@@ -15,10 +15,6 @@ const RichTreeViewItemsContext = React.createContext<
   ((itemId: TreeViewItemId) => React.ReactNode) | null
 >(null);
 
-if (process.env.NODE_ENV !== 'production') {
-  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
-}
-
 const WrappedTreeItem = React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,