use selectors

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

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InteractionContext } from '../context/InteractionProvider';
+import { useStore } from '../internals/useStore';
 import { useSeries } from '../hooks/useSeries';
 import { useSvgRef } from '../hooks';
 import { useCartesianContext } from '../context/CartesianProvider';
@@ -27,7 +27,8 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
 
   const svgRef = useSvgRef();
   const series = useSeries();
-  const { axis } = React.useContext(InteractionContext);
+  const store = useStore();
+
   const { xAxisIds, xAxis, yAxisIds, yAxis } = useCartesianContext();
 
   React.useEffect(() => {
@@ -39,9 +40,10 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
     const handleMouseClick = (event: MouseEvent) => {
       event.preventDefault();
 
-      const isXaxis = axis.x && axis.x.index !== -1;
+      const { x: axisX, y: axisY } = store.value.interaction.axis;
+      const isXaxis = axisX && axisX.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-      const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
+      const dataIndex = isXaxis ? axisX && axisX.index : axisY && axisY.index;
 
       if (dataIndex == null) {
         return;
@@ -72,7 +74,7 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
     return () => {
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [axis.x, axis.y, onAxisClick, series, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [onAxisClick, series, store, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <React.Fragment />;

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

@@ -4,10 +4,12 @@ import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 import { warnOnce } from '@mui/x-internals/warning';
 import { animated, useSpring } from '@react-spring/web';
-import { InteractionContext } from '../context/InteractionProvider';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';
 import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
+import { useSelector } from '../internals/useSelector';
+import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { useStore } from '../internals/useStore';
 
 export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> &
   Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
@@ -66,13 +68,14 @@ function CircleMarkElement(props: CircleMarkElementProps) {
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
   });
-  const { axis } = React.useContext(InteractionContext);
+  const store = useStore();
+  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
 
   const position = useSpring({ to: { x, y }, immediate: skipAnimation });
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
     isFaded,
     color,
   };

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

@@ -5,11 +5,13 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { LineHighlightElement, LineHighlightElementProps } from './LineHighlightElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import { InteractionContext } from '../context/InteractionProvider';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
 import { useDrawingArea } from '../hooks/useDrawingArea';
+import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/useStore';
 
 export interface LineHighlightPlotSlots {
   lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
@@ -48,9 +50,11 @@ function LineHighlightPlot(props: LineHighlightPlotProps) {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const drawingArea = useDrawingArea();
-  const { axis } = React.useContext(InteractionContext);
+  const store = useStore();
+  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
+
+  const highlightedIndex = xAxisIdentifier?.index;
 
-  const highlightedIndex = axis.x?.index;
   if (highlightedIndex === undefined) {
     return null;
   }

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

@@ -5,10 +5,12 @@ import { styled } from '@mui/material/styles';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from '../internals/getSymbol';
-import { InteractionContext } from '../context/InteractionProvider';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';
 import { MarkElementOwnerState, useUtilityClasses } from './markElementClasses';
+import { selectorChartsInteractionXAxis } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/useStore';
 
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
@@ -65,13 +67,15 @@ function MarkElement(props: MarkElementProps) {
   const { isFaded, isHighlighted } = useItemHighlighted({
     seriesId: id,
   });
-  const { axis } = React.useContext(InteractionContext);
+
+  const store = useStore();
+  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
 
   const position = useSpring({ to: { x, y }, immediate: skipAnimation });
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
     isFaded,
     color,
   };

packages/x-charts/src/ScatterChart/Scatter.tsx

@@ -8,10 +8,12 @@ import {
 } from '../models/seriesType/scatter';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
 import { D3Scale } from '../models/axis';
 import { useHighlighted } from '../context';
 import { useDrawingArea } from '../hooks/useDrawingArea';
+import { selectorChartsInteractionUseVoronoid } from '../context/InteractionSelectors';
+import { useSelector } from '../internals/useSelector';
+import { useStore } from '../internals/useStore';
 
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
@@ -46,9 +48,10 @@ function Scatter(props: ScatterProps) {
 
   const drawingArea = useDrawingArea();
 
-  const { useVoronoiInteraction } = React.useContext(InteractionContext);
+  const store = useStore();
+  const usesVoronoiInteraction = useSelector(store, selectorChartsInteractionUseVoronoid);
 
-  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const skipInteractionHandlers = usesVoronoiInteraction || series.disableHover;
   const getInteractionItemProps = useInteractionItemProps(skipInteractionHandlers);
   const { isFaded, isHighlighted } = useHighlighted();