use hooks in our own code

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingContext } from '../context/DrawingProvider';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 export type ChartsClipPathProps = {
   id: string;
@@ -14,7 +14,7 @@ export type ChartsClipPathProps = {
  */
 function ChartsClipPath(props: ChartsClipPathProps) {
   const { id, offset: offsetProps } = props;
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const offset = { top: 0, right: 0, bottom: 0, left: 0, ...offsetProps };
   return (

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

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
-import { DrawingContext } from '../context/DrawingProvider';
 import { AnchorPosition, Direction, getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsLegendClasses, getLegendUtilityClass } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
 import { DefaultChartsLegend, LegendRendererProps } from './DefaultChartsLegend';
+import { useDrawingArea } from '../hooks';
 
 export interface ChartsLegendSlots {
   /**
@@ -82,7 +82,7 @@ function ChartsLegend(inProps: ChartsLegendProps) {
   const theme = useTheme();
   const classes = useUtilityClasses({ ...props, theme });
 
-  const drawingArea = React.useContext(DrawingContext);
+  const drawingArea = useDrawingArea();
   const series = React.useContext(SeriesContext);
 
   const seriesToDisplay = getSeriesToDisplay(series);

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

@@ -4,12 +4,12 @@ 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 { SeriesContext } from '../context/SeriesContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { ScatterItemIdentifier } from '../models';
 import { SeriesId } from '../models/seriesType/common';
+import { useSvgRef } from '../hooks';
 
 export type ChartsVoronoiHandlerProps = {
   /**
@@ -29,8 +29,8 @@ type VoronoiSeries = { seriesId: SeriesId; startIndex: number; endIndex: number
 
 function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps) {
   const { voronoiMaxRadius, onItemClick } = props;
-  const svgRef = React.useContext(SvgContext);
-  const { width, height, top, left } = React.useContext(DrawingContext);
+  const svgRef = useSvgRef();
+  const { left, top, width, height } = useDrawingArea();
   const { xAxis, yAxis, xAxisIds, yAxisIds } = React.useContext(CartesianContext);
   const { dispatch } = React.useContext(InteractionContext);
 

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

@@ -4,14 +4,14 @@ import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { DrawingContext } from '../context/DrawingProvider';
 import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText, ChartsTextProps } from '../ChartsText';
 import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { getWordsByLines } from '../internals/getWordsByLines';
 
 const useUtilityClasses = (ownerState: ChartsXAxisProps & { theme: Theme }) => {
@@ -130,8 +130,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
 
   const theme = useTheme();
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
-
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const tickSize = disableTicks ? 4 : tickSizeProp;
 

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

@@ -4,8 +4,8 @@ import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, Theme } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
-import { DrawingContext } from '../context/DrawingProvider';
 import { useTicks } from '../hooks/useTicks';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { ChartsYAxisProps } from '../models/axis';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText, ChartsTextProps } from '../ChartsText';
@@ -74,7 +74,7 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   const theme = useTheme();
   const classes = useUtilityClasses({ ...defaultizedProps, theme });
 
-  const { left, top, width, height } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const tickSize = disableTicks ? 4 : tickSizeProp;
 

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

@@ -1,8 +1,8 @@
 // @ignore - do not document.
 import * as React from 'react';
-import { DrawingContext } from '../context/DrawingProvider';
 import { getPercentageValue } from '../internals/utils';
 import { getArcRatios, getAvailableRadius } from './utils';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 interface CircularConfig {
   /**
@@ -148,7 +148,7 @@ export function GaugeProvider(props: GaugeProviderProps) {
     children,
   } = props;
 
-  const { width, height, top, left } = React.useContext(DrawingContext);
+  const { left, top, width, height } = useDrawingArea();
 
   const ratios = getArcRatios(startAngle, endAngle);
 

packages/x-charts/src/LineChart/AnimatedArea.tsx

@@ -4,9 +4,9 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import { animated, useSpring } from '@react-spring/web';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { DrawingContext } from '../context/DrawingProvider';
 import { cleanId } from '../internals/utils';
 import type { AreaElementOwnerState } from './AreaElement';
+import { useDrawingArea } from '../hooks';
 
 export const AreaElementPath = styled(animated.path, {
   name: 'MuiAreaElement',
@@ -43,7 +43,8 @@ export interface AnimatedAreaProps extends React.ComponentPropsWithoutRef<'path'
  */
 function AnimatedArea(props: AnimatedAreaProps) {
   const { d, skipAnimation, ownerState, ...other } = props;
-  const { left, top, right, bottom, width, height, chartId } = React.useContext(DrawingContext);
+  const { left, top, right, bottom, width, height } = useDrawingArea();
+  const chartId = useChartId();
 
   const path = useAnimatedPath(d!, skipAnimation);
 

packages/x-charts/src/LineChart/AnimatedLine.tsx

@@ -4,9 +4,10 @@ import { animated, useSpring } from '@react-spring/web';
 import { color as d3Color } from 'd3-color';
 import { styled } from '@mui/material/styles';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { DrawingContext } from '../context/DrawingProvider';
 import { cleanId } from '../internals/utils';
 import type { LineElementOwnerState } from './LineElement';
+import { useChartId } from '../hooks/useChartId';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 
 export const LineElementPath = styled(animated.path, {
   name: 'MuiLineElement',
@@ -45,7 +46,8 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
  */
 function AnimatedLine(props: AnimatedLineProps) {
   const { d, skipAnimation, ownerState, ...other } = props;
-  const { left, top, bottom, width, height, right, chartId } = React.useContext(DrawingContext);
+  const { left, top, bottom, width, height, right } = useDrawingArea();
+  const chartId = useChartId();
 
   const path = useAnimatedPath(d, skipAnimation);
 

packages/x-charts/src/LineChart/MarkPlot.tsx

@@ -4,9 +4,9 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement, MarkElementProps } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
+import { useChartId } from '../hooks/useChartId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { LineItemIdentifier } from '../models/seriesType/line';
-import { DrawingContext } from '../context/DrawingProvider';
 import { cleanId } from '../internals/utils';
 
 export interface MarkPlotSlots {
@@ -56,7 +56,7 @@ function MarkPlot(props: MarkPlotProps) {
 
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
-  const { chartId } = React.useContext(DrawingContext);
+  const chartId = useChartId();
 
   const Mark = slots?.mark ?? MarkElement;
 

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

@@ -14,7 +14,6 @@ import {
 } from '../LineChart/extremums';
 import { AxisConfig, AxisDefaultized, isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { getScale } from '../internals/getScale';
-import { DrawingContext } from './DrawingProvider';
 import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import {
@@ -26,6 +25,7 @@ import {
 } from '../models/seriesType/config';
 import { MakeOptional } from '../models/helpers';
 import { getTickNumber } from '../hooks/useTicks';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { SeriesId } from '../models/seriesType/common';
 
 export type CartesianContextProviderProps = {
@@ -97,7 +97,7 @@ if (process.env.NODE_ENV !== 'production') {
 function CartesianContextProvider(props: CartesianContextProviderProps) {
   const { xAxis: inXAxis, yAxis: inYAxis, dataset, children } = props;
   const formattedSeries = React.useContext(SeriesContext);
-  const drawingArea = React.useContext(DrawingContext);
+  const drawingArea = useDrawingArea();
 
   const xAxis = React.useMemo(
     () =>

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

@@ -1,4 +1,5 @@
 export * from './useDrawingArea';
+export * from './useChartId';
 export * from './useScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries } from './useSeries';

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DrawingContext } from '../context/DrawingProvider';
+
+export function useChartId() {
+  const { chartId } = React.useContext(DrawingContext);
+
+  return React.useMemo(() => chartId, [chartId]);
+}

scripts/x-charts.exports.json

@@ -256,6 +256,7 @@
   { "name": "StackOffsetType", "kind": "TypeAlias" },
   { "name": "StackOrderType", "kind": "TypeAlias" },
   { "name": "unstable_useSeries", "kind": "Function" },
+  { "name": "useChartId", "kind": "Function" },
   { "name": "useDrawingArea", "kind": "Function" },
   { "name": "useGaugeState", "kind": "Function" },
   { "name": "useSvgRef", "kind": "Function" },