[core] Fix missing context display names

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { SVGContext } from '../context/DrawingProvider';
+import { SvgContext } from '../context/DrawingProvider';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -24,7 +24,7 @@ export interface ChartsOnAxisClickHandlerProps {
 function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
   const { onAxisClick } = props;
 
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
   const series = React.useContext(SeriesContext);
   const { axis } = React.useContext(InteractionContext);
   const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);

packages/x-charts/src/ChartsTooltip/utils.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AxisInteractionData, ItemInteractionData } from '../context/InteractionProvider';
-import { SVGContext } from '../context/DrawingProvider';
+import { SvgContext } from '../context/DrawingProvider';
 import {
   CartesianChartSeriesType,
   ChartSeriesDefaultized,
@@ -41,7 +41,7 @@ export function generateVirtualElement(mousePosition: { x: number; y: number } |
 }
 
 export function useMouseTracker() {
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState<null | { x: number; y: number }>(null);

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

@@ -4,7 +4,7 @@ import { Delaunay } from 'd3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SvgContext, DrawingContext } from '../context/DrawingProvider';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
@@ -27,7 +27,7 @@ export type ChartsVoronoiHandlerProps = {
 
 function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   const { voronoiMaxRadius, onItemClick } = props;
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
   const { width, height, top, left } = React.useContext(DrawingContext);
   const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
   const { dispatch } = React.useContext(InteractionContext);

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

@@ -125,6 +125,10 @@ 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/CartesianContextProvider.tsx

@@ -90,6 +90,10 @@ export const CartesianContext = React.createContext<{
   // @ts-ignore
 }>({ xAxis: {}, yAxis: {}, xAxisIds: [], yAxisIds: [] });
 
+if (process.env.NODE_ENV !== 'production') {
+  CartesianContext.displayName = 'CartesianContext';
+}
+
 function CartesianContextProvider(props: CartesianContextProviderProps) {
   const { xAxis: inXAxis, yAxis: inYAxis, dataset, children } = props;
   const formattedSeries = React.useContext(SeriesContext);

packages/x-charts/src/context/DrawingProvider.tsx

@@ -54,9 +54,18 @@ export const DrawingContext = React.createContext<
   width: 400,
   chartId: '',
 });
-export const SVGContext = React.createContext<React.RefObject<SVGSVGElement>>({ current: null });
 
-function DrawingProvider(props: DrawingProviderProps) {
+if (process.env.NODE_ENV !== 'production') {
+  DrawingContext.displayName = 'DrawingContext';
+}
+
+export const SvgContext = React.createContext<React.RefObject<SVGSVGElement>>({ current: null });
+
+if (process.env.NODE_ENV !== 'production') {
+  SvgContext.displayName = 'SvgContext';
+}
+
+export function DrawingProvider(props: DrawingProviderProps) {
   const { width, height, margin, svgRef, children } = props;
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
@@ -67,10 +76,8 @@ function DrawingProvider(props: DrawingProviderProps) {
   );
 
   return (
-    <SVGContext.Provider value={svgRef}>
+    <SvgContext.Provider value={svgRef}>
       <DrawingContext.Provider value={value}>{children}</DrawingContext.Provider>
-    </SVGContext.Provider>
+    </SvgContext.Provider>
   );
 }
-
-export { DrawingProvider };

packages/x-charts/src/context/HighlightProvider.tsx

@@ -56,6 +56,10 @@ export const HighlighContext = React.createContext<HighlighState>({
   dispatch: () => null,
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  HighlighContext.displayName = 'HighlighContext';
+}
+
 const dataReducer: React.Reducer<Omit<HighlighState, 'dispatch'>, HighlighActions> = (
   prevState,
   action,

packages/x-charts/src/context/InteractionProvider.tsx

@@ -63,6 +63,10 @@ export const InteractionContext = React.createContext<InteractionState>({
   dispatch: () => null,
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  InteractionContext.displayName = 'InteractionContext';
+}
+
 const dataReducer: React.Reducer<Omit<InteractionState, 'dispatch'>, InteractionActions> = (
   prevState,
   action,

packages/x-charts/src/context/SeriesContextProvider.tsx

@@ -34,6 +34,10 @@ export type FormattedSeries = { [type in ChartSeriesType]?: FormatterResult<type
 
 export const SeriesContext = React.createContext<FormattedSeries>({});
 
+if (process.env.NODE_ENV !== 'production') {
+  SeriesContext.displayName = 'SeriesContext';
+}
+
 const seriesTypeFormatter: {
   [type in ChartSeriesType]?: (series: any, dataset?: DatasetType) => any;
 } = {

packages/x-charts/src/hooks/useAxisEvents.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { SVGContext, DrawingContext } from '../context/DrawingProvider';
+import { SvgContext, DrawingContext } from '../context/DrawingProvider';
 import { isBandScale } from '../internals/isBandScale';
 import { AxisDefaultized } from '../models/axis';
 import { getSVGPoint } from '../internals/utils';
@@ -10,7 +10,7 @@ function getAsANumber(value: number | Date) {
   return value instanceof Date ? value.getTime() : value;
 }
 export const useAxisEvents = (disableAxisListener: boolean) => {
-  const svgRef = React.useContext(SVGContext);
+  const svgRef = React.useContext(SvgContext);
   const { width, height, top, left } = React.useContext(DrawingContext);
   const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
   const { dispatch } = React.useContext(InteractionContext);

packages/x-license/src/Unstable_LicenseInfoProvider/LicenseInfoProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import LicenseInfoContext from './LicenseInfoContext';
+import MuiLicenseInfoContext from './MuiLicenseInfoContext';
 import { MuiLicenseInfo } from '../utils/licenseInfo';
 
 /**
@@ -14,5 +14,5 @@ export interface LicenseInfoProviderProps {
  * @ignore - do not document.
  */
 export function LicenseInfoProvider({ info, children }: LicenseInfoProviderProps) {
-  return <LicenseInfoContext.Provider value={info}>{children}</LicenseInfoContext.Provider>;
+  return <MuiLicenseInfoContext.Provider value={info}>{children}</MuiLicenseInfoContext.Provider>;
 }

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+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-license/src/useLicenseVerifier/useLicenseVerifier.ts

@@ -11,7 +11,7 @@ import {
 } from '../utils/licenseErrorMessageUtils';
 import { LICENSE_STATUS, LicenseStatus } from '../utils/licenseStatus';
 import { LicenseScope } from '../utils/licenseScope';
-import LicenseInfoContext from '../Unstable_LicenseInfoProvider/LicenseInfoContext';
+import MuiLicenseInfoContext from '../Unstable_LicenseInfoProvider/MuiLicenseInfoContext';
 
 export type MuiCommercialPackageName =
   | 'x-data-grid-pro'
@@ -33,7 +33,7 @@ export function useLicenseVerifier(
 ): {
   status: LicenseStatus;
 } {
-  const { key: contextKey } = React.useContext(LicenseInfoContext);
+  const { key: contextKey } = React.useContext(MuiLicenseInfoContext);
   return React.useMemo(() => {
     const licenseKey = contextKey ?? LicenseInfo.getLicenseKey();