@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors.js

@@ -8,11 +8,23 @@ var _store = require("@mui/x-internals/store");
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 var _useChartInteraction = require("../useChartInteraction");
+var _useChartInteraction2 = require("../useChartInteraction/useChartInteraction.selectors");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors");
 var _getAxisValue = require("./getAxisValue");
 var _getValueToPositionMapper = require("../../../../hooks/getValueToPositionMapper");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 const selectorChartControlledCartesianAxisTooltip = state => state.controlledCartesianAxisTooltip;
 const EMPTY_ARRAY = [];
+function getKeyboardAxisTooltip(keyboardIndex, axes) {
+  if (keyboardIndex === undefined) {
+    return EMPTY_ARRAY;
+  }
+  const axis = axes.axis[keyboardIndex.axisId];
+  if (!axis?.triggerTooltip) {
+    return EMPTY_ARRAY;
+  }
+  return [keyboardIndex];
+}
 
 /**
  * Get x-axis ids and corresponding data index that should be display in the tooltip.
@@ -24,7 +36,7 @@ const selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionT
     // uses string/number as arguments.
     resultEqualityCheck: _isDeepEqual.isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerX, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartInteraction2.selectorChartsLastInteraction, _useChartKeyboardNavigation.selectorChartsKeyboardXAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -35,6 +47,9 @@ const selectorChartsInteractionTooltipXAxes = exports.selectorChartsInteractionT
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }
@@ -56,7 +71,7 @@ const selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionT
     // uses string/number as arguments.
     resultEqualityCheck: _isDeepEqual.isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, _useChartInteraction.selectorChartsInteractionPointerY, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartInteraction2.selectorChartsLastInteraction, _useChartKeyboardNavigation.selectorChartsKeyboardYAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -67,6 +82,9 @@ const selectorChartsInteractionTooltipYAxes = exports.selectorChartsInteractionT
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianTooltip.selectors.mjs

@@ -2,11 +2,23 @@ import { createSelector, createSelectorMemoized, createSelectorMemoizedWithOptio
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.mjs";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/index.mjs";
+import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.mjs";
+import { selectorChartsKeyboardXAxisIndex, selectorChartsKeyboardYAxisIndex } from "../useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.mjs";
 import { getAxisIndex } from "./getAxisValue.mjs";
 import { getValueToPositionMapper } from "../../../../hooks/getValueToPositionMapper.mjs";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
 const selectorChartControlledCartesianAxisTooltip = state => state.controlledCartesianAxisTooltip;
 const EMPTY_ARRAY = [];
+function getKeyboardAxisTooltip(keyboardIndex, axes) {
+  if (keyboardIndex === undefined) {
+    return EMPTY_ARRAY;
+  }
+  const axis = axes.axis[keyboardIndex.axisId];
+  if (!axis?.triggerTooltip) {
+    return EMPTY_ARRAY;
+  }
+  return [keyboardIndex];
+}
 
 /**
  * Get x-axis ids and corresponding data index that should be display in the tooltip.
@@ -18,7 +30,7 @@ export const selectorChartsInteractionTooltipXAxes = createSelectorMemoizedWithO
     // uses string/number as arguments.
     resultEqualityCheck: isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerX, selectorChartXAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsLastInteraction, selectorChartsKeyboardXAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -29,6 +41,9 @@ export const selectorChartsInteractionTooltipXAxes = createSelectorMemoizedWithO
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }
@@ -50,7 +65,7 @@ export const selectorChartsInteractionTooltipYAxes = createSelectorMemoizedWithO
     // uses string/number as arguments.
     resultEqualityCheck: isDeepEqual
   }
-})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerY, selectorChartYAxis, (controlledValues, value, axes) => {
+})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsLastInteraction, selectorChartsKeyboardYAxisIndex, (controlledValues, value, axes, lastInteraction, keyboardIndex) => {
   if (controlledValues !== undefined) {
     if (controlledValues.length === 0) {
       return EMPTY_ARRAY;
@@ -61,6 +76,9 @@ export const selectorChartsInteractionTooltipYAxes = createSelectorMemoizedWithO
     }) => ids.has(axisId));
     return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
   }
+  if (lastInteraction === 'keyboard') {
+    return getKeyboardAxisTooltip(keyboardIndex, axes);
+  }
   if (value === null) {
     return EMPTY_ARRAY;
   }

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -24,10 +24,12 @@ const useChartClosestPoint = ({
     chartsLayerContainerRef
   } = instance;
   const {
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick
   } = params;
+  const resolvedDisableHitArea = disableHitArea;
+  const resolvedHitAreaRadius = hitAreaRadius;
   const {
     axis: xAxis,
     axisIds: xAxisIds
@@ -46,11 +48,11 @@ const useChartClosestPoint = ({
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
     store.set('voronoi', {
-      isVoronoiEnabled: !disableVoronoi
+      isVoronoiEnabled: !resolvedDisableHitArea
     });
-  }, [store, disableVoronoi]);
+  }, [store, resolvedDisableHitArea]);
   React.useEffect(() => {
-    if (chartsLayerContainerRef.current === null || disableVoronoi) {
+    if (chartsLayerContainerRef.current === null || resolvedDisableHitArea) {
       return undefined;
     }
     const element = chartsLayerContainerRef.current;
@@ -71,7 +73,7 @@ const useChartClosestPoint = ({
         const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
         const xAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.state, xAxisId);
         const yAxisZoom = (0, _useChartCartesianAxis.selectorChartAxisZoomData)(store.state, yAxisId);
-        const maxRadius = voronoiMaxRadius === 'item' ? aSeries.markerSize : voronoiMaxRadius;
+        const maxRadius = resolvedHitAreaRadius === 'item' ? aSeries.markerSize : resolvedHitAreaRadius;
         const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
         const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
         const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
@@ -181,7 +183,7 @@ const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [chartsLayerContainerRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+  }, [chartsLayerContainerRef, yAxis, xAxis, resolvedHitAreaRadius, onItemClick, resolvedDisableHitArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = (0, _useEventCallback.default)(() => {
@@ -205,15 +207,15 @@ exports.useChartClosestPoint = useChartClosestPoint;
 useChartClosestPoint.getDefaultizedParams = ({
   params
 }) => (0, _extends2.default)({}, params, {
-  disableVoronoi: params.disableVoronoi ?? !params.series.some(item => item.type === 'scatter')
+  disableHitArea: params.disableHitArea ?? !params.series.some(item => item.type === 'scatter')
 });
 useChartClosestPoint.getInitialState = params => ({
   voronoi: {
-    isVoronoiEnabled: !params.disableVoronoi
+    isVoronoiEnabled: !params.disableHitArea
   }
 });
 useChartClosestPoint.params = {
-  disableVoronoi: true,
-  voronoiMaxRadius: true,
+  disableHitArea: true,
+  hitAreaRadius: true,
   onItemClick: true
 };

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.mjs

@@ -17,10 +17,12 @@ export const useChartClosestPoint = ({
     chartsLayerContainerRef
   } = instance;
   const {
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick
   } = params;
+  const resolvedDisableHitArea = disableHitArea;
+  const resolvedHitAreaRadius = hitAreaRadius;
   const {
     axis: xAxis,
     axisIds: xAxisIds
@@ -39,11 +41,11 @@ export const useChartClosestPoint = ({
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
     store.set('voronoi', {
-      isVoronoiEnabled: !disableVoronoi
+      isVoronoiEnabled: !resolvedDisableHitArea
     });
-  }, [store, disableVoronoi]);
+  }, [store, resolvedDisableHitArea]);
   React.useEffect(() => {
-    if (chartsLayerContainerRef.current === null || disableVoronoi) {
+    if (chartsLayerContainerRef.current === null || resolvedDisableHitArea) {
       return undefined;
     }
     const element = chartsLayerContainerRef.current;
@@ -64,7 +66,7 @@ export const useChartClosestPoint = ({
         const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
         const xAxisZoom = selectorChartAxisZoomData(store.state, xAxisId);
         const yAxisZoom = selectorChartAxisZoomData(store.state, yAxisId);
-        const maxRadius = voronoiMaxRadius === 'item' ? aSeries.markerSize : voronoiMaxRadius;
+        const maxRadius = resolvedHitAreaRadius === 'item' ? aSeries.markerSize : resolvedHitAreaRadius;
         const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
         const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
         const yZoomStart = (yAxisZoom?.start ?? 0) / 100;
@@ -174,7 +176,7 @@ export const useChartClosestPoint = ({
       pressHandler.cleanup();
       pressEndHandler.cleanup();
     };
-  }, [chartsLayerContainerRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
+  }, [chartsLayerContainerRef, yAxis, xAxis, resolvedHitAreaRadius, onItemClick, resolvedDisableHitArea, instance, seriesOrder, series, flatbushMap, defaultXAxisId, defaultYAxisId, store]);
 
   // Instance implementation
   const enableVoronoiCallback = useEventCallback(() => {
@@ -197,15 +199,15 @@ export const useChartClosestPoint = ({
 useChartClosestPoint.getDefaultizedParams = ({
   params
 }) => _extends({}, params, {
-  disableVoronoi: params.disableVoronoi ?? !params.series.some(item => item.type === 'scatter')
+  disableHitArea: params.disableHitArea ?? !params.series.some(item => item.type === 'scatter')
 });
 useChartClosestPoint.getInitialState = params => ({
   voronoi: {
-    isVoronoiEnabled: !params.disableVoronoi
+    isVoronoiEnabled: !params.disableHitArea
   }
 });
 useChartClosestPoint.params = {
-  disableVoronoi: true,
-  voronoiMaxRadius: true,
+  disableHitArea: true,
+  hitAreaRadius: true,
   onItemClick: true
 };

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.types.d.mts

@@ -27,15 +27,15 @@ export interface UseChartVoronoiState {
 }
 export interface UseChartVoronoiParameters {
   /**
-   * If true, the voronoi interaction are ignored.
+   * If true, the hit area interaction is disabled and falls back to hover events.
    */
-  disableVoronoi?: boolean;
+  disableHitArea?: boolean;
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
    * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius?: 'item' | number | undefined;
+  hitAreaRadius?: 'item' | number | undefined;
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
@@ -44,12 +44,7 @@ export interface UseChartVoronoiParameters {
    */
   onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
-export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'voronoiMaxRadius' | 'onItemClick'> & {
-  /**
-   * If true, the voronoi plugin is disabled.
-   */
-  disableVoronoi: boolean;
-};
+export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'hitAreaRadius' | 'disableHitArea' | 'onItemClick'>;
 export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
   instance: UseChartVoronoiInstance;
   state: UseChartVoronoiState;

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.types.d.ts

@@ -27,15 +27,15 @@ export interface UseChartVoronoiState {
 }
 export interface UseChartVoronoiParameters {
   /**
-   * If true, the voronoi interaction are ignored.
+   * If true, the hit area interaction is disabled and falls back to hover events.
    */
-  disableVoronoi?: boolean;
+  disableHitArea?: boolean;
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
    * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius?: 'item' | number | undefined;
+  hitAreaRadius?: 'item' | number | undefined;
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
@@ -44,12 +44,7 @@ export interface UseChartVoronoiParameters {
    */
   onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
-export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'voronoiMaxRadius' | 'onItemClick'> & {
-  /**
-   * If true, the voronoi plugin is disabled.
-   */
-  disableVoronoi: boolean;
-};
+export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'hitAreaRadius' | 'disableHitArea' | 'onItemClick'>;
 export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
   instance: UseChartVoronoiInstance;
   state: UseChartVoronoiState;

package/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.types.d.mts

@@ -6,13 +6,13 @@ export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<SVGSVGElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
+  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
-  handleClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  handleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 export interface UseChartItemClickState {}
 export type UseChartItemClickSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.types.d.ts

@@ -6,13 +6,13 @@ export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<SVGSVGElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
+  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
-  handleClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  handleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 export interface UseChartItemClickState {}
 export type UseChartItemClickSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartKeyboardNavigation = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _useChartSeriesConfig = require("../../corePlugins/useChartSeriesConfig");
@@ -21,35 +20,42 @@ const useChartKeyboardNavigation = ({
   const {
     chartsLayerContainerRef
   } = instance;
-  const removeFocus = (0, _useEventCallback.default)(function removeFocus() {
-    if (store.state.keyboardNavigation.isFocused) {
-      store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
-        isFocused: false
-      }));
-    }
-  });
-  const restoreFocus = (0, _useEventCallback.default)(function restoreFocus() {
-    if (!store.state.keyboardNavigation.isFocused) {
-      store.update((0, _extends2.default)({}, store.state.highlight && {
-        highlight: (0, _extends2.default)({}, store.state.highlight, {
-          lastUpdate: 'keyboard'
-        })
-      }, store.state.interaction && {
-        interaction: (0, _extends2.default)({}, store.state.interaction, {
-          lastUpdate: 'keyboard'
-        })
-      }, {
-        keyboardNavigation: (0, _extends2.default)({}, store.state.keyboardNavigation, {
-          isFocused: true
-        })
-      }));
-    }
-  });
   React.useEffect(() => {
     const element = chartsLayerContainerRef.current;
     if (!element || params.disableKeyboardNavigation) {
       return undefined;
     }
+    function removeFocus(event) {
+      const root = event.currentTarget;
+      const next = event.relatedTarget;
+
+      // Avoid removing focus if we know it is moving to another children in the chart.
+      // This avoid extra computation ot remove/add focus at each keyboard pressed when navigating in the chart.
+      if (root && next instanceof Node && !root.contains(next)) {
+        if (store.state.keyboardNavigation.isFocused) {
+          store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
+            isFocused: false
+          }));
+        }
+      }
+    }
+    function restoreFocus() {
+      if (!store.state.keyboardNavigation.isFocused) {
+        store.update((0, _extends2.default)({}, store.state.highlight && {
+          highlight: (0, _extends2.default)({}, store.state.highlight, {
+            lastUpdate: 'keyboard'
+          })
+        }, store.state.interaction && {
+          interaction: (0, _extends2.default)({}, store.state.interaction, {
+            lastUpdate: 'keyboard'
+          })
+        }, {
+          keyboardNavigation: (0, _extends2.default)({}, store.state.keyboardNavigation, {
+            isFocused: true
+          })
+        }));
+      }
+    }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
@@ -83,14 +89,14 @@ const useChartKeyboardNavigation = ({
       }
     }
     element.addEventListener('keydown', keyboardHandler);
-    element.addEventListener('blur', removeFocus);
-    element.addEventListener('focus', restoreFocus);
+    element.addEventListener('focusout', removeFocus);
+    element.addEventListener('focusin', restoreFocus);
     return () => {
       element.removeEventListener('keydown', keyboardHandler);
-      element.removeEventListener('blur', removeFocus);
-      element.removeEventListener('focus', restoreFocus);
+      element.removeEventListener('focusout', removeFocus);
+      element.removeEventListener('focusin', restoreFocus);
     };
-  }, [chartsLayerContainerRef, removeFocus, restoreFocus, params.disableKeyboardNavigation, store]);
+  }, [chartsLayerContainerRef, params.disableKeyboardNavigation, store]);
   (0, _useEnhancedEffect.default)(() => {
     store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
       enabled: !params.disableKeyboardNavigation

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.mjs

@@ -2,7 +2,6 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
@@ -14,35 +13,42 @@ export const useChartKeyboardNavigation = ({
   const {
     chartsLayerContainerRef
   } = instance;
-  const removeFocus = useEventCallback(function removeFocus() {
-    if (store.state.keyboardNavigation.isFocused) {
-      store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
-        isFocused: false
-      }));
-    }
-  });
-  const restoreFocus = useEventCallback(function restoreFocus() {
-    if (!store.state.keyboardNavigation.isFocused) {
-      store.update(_extends({}, store.state.highlight && {
-        highlight: _extends({}, store.state.highlight, {
-          lastUpdate: 'keyboard'
-        })
-      }, store.state.interaction && {
-        interaction: _extends({}, store.state.interaction, {
-          lastUpdate: 'keyboard'
-        })
-      }, {
-        keyboardNavigation: _extends({}, store.state.keyboardNavigation, {
-          isFocused: true
-        })
-      }));
-    }
-  });
   React.useEffect(() => {
     const element = chartsLayerContainerRef.current;
     if (!element || params.disableKeyboardNavigation) {
       return undefined;
     }
+    function removeFocus(event) {
+      const root = event.currentTarget;
+      const next = event.relatedTarget;
+
+      // Avoid removing focus if we know it is moving to another children in the chart.
+      // This avoid extra computation ot remove/add focus at each keyboard pressed when navigating in the chart.
+      if (root && next instanceof Node && !root.contains(next)) {
+        if (store.state.keyboardNavigation.isFocused) {
+          store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
+            isFocused: false
+          }));
+        }
+      }
+    }
+    function restoreFocus() {
+      if (!store.state.keyboardNavigation.isFocused) {
+        store.update(_extends({}, store.state.highlight && {
+          highlight: _extends({}, store.state.highlight, {
+            lastUpdate: 'keyboard'
+          })
+        }, store.state.interaction && {
+          interaction: _extends({}, store.state.interaction, {
+            lastUpdate: 'keyboard'
+          })
+        }, {
+          keyboardNavigation: _extends({}, store.state.keyboardNavigation, {
+            isFocused: true
+          })
+        }));
+      }
+    }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = selectorChartSeriesConfig(store.state);
@@ -76,14 +82,14 @@ export const useChartKeyboardNavigation = ({
       }
     }
     element.addEventListener('keydown', keyboardHandler);
-    element.addEventListener('blur', removeFocus);
-    element.addEventListener('focus', restoreFocus);
+    element.addEventListener('focusout', removeFocus);
+    element.addEventListener('focusin', restoreFocus);
     return () => {
       element.removeEventListener('keydown', keyboardHandler);
-      element.removeEventListener('blur', removeFocus);
-      element.removeEventListener('focus', restoreFocus);
+      element.removeEventListener('focusout', removeFocus);
+      element.removeEventListener('focusin', restoreFocus);
     };
-  }, [chartsLayerContainerRef, removeFocus, restoreFocus, params.disableKeyboardNavigation, store]);
+  }, [chartsLayerContainerRef, params.disableKeyboardNavigation, store]);
   useEnhancedEffect(() => {
     store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
       enabled: !params.disableKeyboardNavigation

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.mts

@@ -9,6 +9,14 @@ export declare const selectorChartsHasFocusedItem: (args_0: import("../../corePl
 export declare const selectorChartsFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => FocusedItemIdentifier<keyof import("../../../index.mjs").ChartsSeriesConfig> | null;
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+export declare const selectorChartsFocusedOrToFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => FocusedItemIdentifier<keyof import("../../../index.mjs").ChartsSeriesConfig> | null;
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -9,6 +9,14 @@ export declare const selectorChartsHasFocusedItem: (args_0: import("../../corePl
 export declare const selectorChartsFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+export declare const selectorChartsFocusedOrToFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedItem = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedItem = void 0;
 var _store = require("@mui/x-internals/store");
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -12,6 +12,13 @@ const selectKeyboardNavigation = state => state.keyboardNavigation;
 const selectorChartsItemIsFocused = exports.selectorChartsItemIsFocused = (0, _store.createSelector)(selectKeyboardNavigation, (keyboardNavigationState, item) => keyboardNavigationState?.isFocused === true && keyboardNavigationState?.item != null && (0, _fastObjectShallowCompare.fastObjectShallowCompare)(keyboardNavigationState.item, item));
 const selectorChartsHasFocusedItem = exports.selectorChartsHasFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.isFocused === true && keyboardNavigationState?.item != null);
 const selectorChartsFocusedItem = exports.selectorChartsFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.isFocused === true ? keyboardNavigationState?.item ?? null : null);
+
+/**
+ * The item that is either
+ * - currently focused
+ * - will be focused when user focuses the chart
+ */
+const selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
 
 /**
@@ -37,7 +44,7 @@ const createSelectAxisHighlight = direction => (item, axis, series) => {
 };
 const selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardXAxisIndex = (0, _store.createSelector)(selectorChartsFocusedItem, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
 const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _store.createSelector)(selectorChartsFocusedItem, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
-const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _store.createSelector)(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
+const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _store.createSelectorMemoized)(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
   if (keyboardState?.isFocused !== true || keyboardState?.item == null) {
     return null;
   }