@mui/x-charts 8.27.0 → 9.0.0-alpha.1

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

@@ -0,0 +1,149 @@
+import { createSelector, createSelectorMemoized, createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/index.js";
+import { getAxisIndex } from "./getAxisValue.js";
+import { getValueToPositionMapper } from "../../../../hooks/getValueToPositionMapper.js";
+import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
+const selectorChartControlledCartesianAxisTooltip = state => state.controlledCartesianAxisTooltip;
+const EMPTY_ARRAY = [];
+
+/**
+ * Get x-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipXAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerX, selectorChartXAxis, (controlledValues, value, axes) => {
+  if (controlledValues !== undefined) {
+    if (controlledValues.length === 0) {
+      return EMPTY_ARRAY;
+    }
+    const ids = new Set(axes.axisIds);
+    const filteredArray = controlledValues.filter(({
+      axisId
+    }) => ids.has(axisId));
+    return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
+  }
+  if (value === null) {
+    return EMPTY_ARRAY;
+  }
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
+});
+
+/**
+ * Get y-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipYAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartControlledCartesianAxisTooltip, selectorChartsInteractionPointerY, selectorChartYAxis, (controlledValues, value, axes) => {
+  if (controlledValues !== undefined) {
+    if (controlledValues.length === 0) {
+      return EMPTY_ARRAY;
+    }
+    const ids = new Set(axes.axisIds);
+    const filteredArray = controlledValues.filter(({
+      axisId
+    }) => ids.has(axisId));
+    return filteredArray.length === controlledValues.length ? controlledValues : filteredArray;
+  }
+  if (value === null) {
+    return EMPTY_ARRAY;
+  }
+  return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
+    axisId,
+    dataIndex: getAxisIndex(axes.axis[axisId], value)
+  })).filter(({
+    dataIndex
+  }) => dataIndex >= 0);
+});
+
+/**
+ * Return `true` if the axis tooltip has something to display.
+ */
+export const selectorChartsInteractionAxisTooltip = createSelector(selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes, (xTooltip, yTooltip) => xTooltip.length > 0 || yTooltip.length > 0);
+function getCoordinatesFromAxis(identifier, axes) {
+  const axis = axes.axis[identifier.axisId];
+  if (!axis) {
+    return null;
+  }
+  const value = axis.data?.[identifier.dataIndex];
+  if (value == null) {
+    return null;
+  }
+  const coordinate = getValueToPositionMapper(axis.scale)(value);
+  if (coordinate === undefined) {
+    return null;
+  }
+  return coordinate;
+}
+export const selectorChartsTooltipAxisPosition = createSelectorMemoized(selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes, selectorChartXAxis, selectorChartYAxis, selectorChartDrawingArea, function selectorChartsTooltipItemPosition(xAxesIdentifiers, yAxesIdentifiers, xAxes, yAxes, drawingArea, placement) {
+  if (xAxesIdentifiers.length === 0 && yAxesIdentifiers.length === 0) {
+    return null;
+  }
+  if (xAxesIdentifiers.length > 0) {
+    const x = getCoordinatesFromAxis(xAxesIdentifiers[0], xAxes);
+    if (x === null) {
+      return null;
+    }
+    switch (placement) {
+      case 'left':
+      case 'right':
+        return {
+          x,
+          y: drawingArea.top + drawingArea.height / 2
+        };
+      case 'bottom':
+        return {
+          x,
+          y: drawingArea.top + drawingArea.height
+        };
+      case 'top':
+      default:
+        return {
+          x,
+          y: drawingArea.top
+        };
+    }
+  }
+  if (yAxesIdentifiers.length > 0) {
+    const y = getCoordinatesFromAxis(yAxesIdentifiers[0], yAxes);
+    if (y === null) {
+      return null;
+    }
+    switch (placement) {
+      case 'right':
+        return {
+          x: drawingArea.left + drawingArea.width / 2,
+          y
+        };
+      case 'bottom':
+      case 'top':
+        return {
+          x: drawingArea.left + drawingArea.width / 2,
+          y
+        };
+      case 'left':
+      default:
+        return {
+          x: drawingArea.left + drawingArea.width / 2,
+          y
+        };
+    }
+  }
+  return null;
+});

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

@@ -4,16 +4,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getSVGPoint } from "../../../getSVGPoint.js";
+import { getChartPoint } from "../../../getChartPoint.js";
 import { selectorChartAxisZoomData, selectorChartSeriesEmptyFlatbushMap, selectorChartSeriesFlatbushMap, selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { findClosestPoints } from "./findClosestPoints.js";
 export const useChartClosestPoint = ({
-  svgRef,
   params,
   store,
   instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const {
     disableVoronoi,
     voronoiMaxRadius,
@@ -47,7 +49,7 @@ export const useChartClosestPoint = ({
     const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
-      const svgPoint = getSVGPoint(element, event);
+      const svgPoint = getChartPoint(element, event);
       if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
         return 'outside-chart';
       }

package/esm/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.selectors.d.ts

@@ -1,3 +1,3 @@
-export declare const selectorChartsIsVoronoiEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartClosestPoint.types.js").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsIsVoronoiEnabled: (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 & import("./useChartClosestPoint.types.js").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean | undefined;

package/esm/internals/plugins/featurePlugins/useChartHighlight/createIsFaded.d.ts

@@ -1,3 +1,3 @@
-import { type HighlightScope } from "./highlightConfig.types.js";
+import { type HighlightScope, type ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { type HighlightItemData } from "./useChartHighlight.types.js";
-export declare function createIsFaded(highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;
+export declare function createIsFaded<SeriesType extends Exclude<ChartSeriesType, 'sankey'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;

package/esm/internals/plugins/featurePlugins/useChartHighlight/createIsHighlighted.d.ts

@@ -1,3 +1,3 @@
-import { type HighlightScope } from "./highlightConfig.types.js";
+import { type ChartSeriesType, type HighlightScope } from "../../../../models/seriesType/config.js";
 import { type HighlightItemData } from "./useChartHighlight.types.js";
-export declare function createIsHighlighted(highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;
+export declare function createIsHighlighted<SeriesType extends Exclude<ChartSeriesType, 'sankey'>>(highlightScope: HighlightScope<SeriesType> | null | undefined, highlightedItem: HighlightItemData | null): (item: HighlightItemData | null) => boolean;

package/esm/internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.d.ts

@@ -1,6 +1,6 @@
 export type HighlightOptions = 'none' | 'item' | 'series';
 export type FadeOptions = 'none' | 'series' | 'global';
-export type HighlightScope = {
+export type CommonHighlightScope = {
   /**
    * The scope of highlighted elements.
    * - 'none': no highlight.

package/esm/internals/plugins/featurePlugins/useChartHighlight/highlightStates.d.ts

@@ -1,16 +1,20 @@
-import { type HighlightItemData } from "./useChartHighlight.types.js";
-import { type HighlightScope } from "./highlightConfig.types.js";
-import { type SeriesId } from "../../../../models/seriesType/common.js";
-export declare function isSeriesHighlighted(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
-export declare function isSeriesFaded(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
+import type { SeriesId } from "../../../../models/seriesType/index.js";
+import type { ChartsSeriesConfig, HighlightScope } from "../../../../models/seriesType/config.js";
+import type { HighlightItemData } from "./useChartHighlight.types.js";
+type SeriesTypeWithDataIndex = 'radar' | 'line' | 'scatter' | 'bar' | (ChartsSeriesConfig extends {
+  rangeBar: any;
+} ? 'rangeBar' : never);
+export declare function isSeriesHighlighted<SeriesType extends SeriesTypeWithDataIndex>(scope: Partial<HighlightScope<SeriesType>> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
+export declare function isSeriesFaded<SeriesType extends SeriesTypeWithDataIndex>(scope: Partial<HighlightScope<SeriesType>> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
 /**
  * Returns the data index of the highlighted item for a specific series.
  * If the item is not highlighted, it returns `null`.
  */
-export declare function getSeriesHighlightedItem(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;
+export declare function getSeriesHighlightedDataIndex<SeriesType extends SeriesTypeWithDataIndex>(scope: Partial<HighlightScope<SeriesType>> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;
 /**
  * Returns the data index of the "unfaded item" for a specific series.
  * An "unfaded item" is the only item of a faded series that shouldn't be faded.
  * If the series is not faded or if there is no highlighted item, it returns `null`.
  */
-export declare function getSeriesUnfadedItem(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;
+export declare function getSeriesUnfadedDataIndex<SeriesType extends SeriesTypeWithDataIndex>(scope: Partial<HighlightScope<SeriesType>> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;
+export {};

package/esm/internals/plugins/featurePlugins/useChartHighlight/highlightStates.js

@@ -12,7 +12,7 @@ export function isSeriesFaded(scope, item, seriesId) {
  * Returns the data index of the highlighted item for a specific series.
  * If the item is not highlighted, it returns `null`.
  */
-export function getSeriesHighlightedItem(scope, item, seriesId) {
+export function getSeriesHighlightedDataIndex(scope, item, seriesId) {
   return scope?.highlight === 'item' && item?.seriesId === seriesId ? item.dataIndex : null;
 }
 
@@ -21,11 +21,11 @@ export function getSeriesHighlightedItem(scope, item, seriesId) {
  * An "unfaded item" is the only item of a faded series that shouldn't be faded.
  * If the series is not faded or if there is no highlighted item, it returns `null`.
  */
-export function getSeriesUnfadedItem(scope, item, seriesId) {
+export function getSeriesUnfadedDataIndex(scope, item, seriesId) {
   if (isSeriesHighlighted(scope, item, seriesId)) {
     return null;
   }
-  if (getSeriesHighlightedItem(scope, item, seriesId) === item?.dataIndex) {
+  if (getSeriesHighlightedDataIndex(scope, item, seriesId) === item?.dataIndex) {
     return null;
   }
   return (scope?.fade === 'series' || scope?.fade === 'global') && item?.seriesId === seriesId ? item.dataIndex : null;

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -1,36 +1,34 @@
-import { type SeriesId } from "../../../../models/seriesType/common.js";
 import { type HighlightItemData } from "./useChartHighlight.types.js";
-import { type HighlightScope } from "./highlightConfig.types.js";
-export declare const selectorChartsHighlightScopePerSeriesId: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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<{}> & {
+export declare const selectorChartsHighlightScopePerSeriesId: (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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => Map<SeriesId, Partial<HighlightScope> | undefined>;
-export declare const selectorChartsHighlightedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}) => Map<string, Partial<any> | undefined>;
+export declare const selectorChartsHighlightedItem: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => HighlightItemData | null;
-export declare const selectorChartsHighlightScope: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+export declare const selectorChartsHighlightScope: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => Partial<HighlightScope> | null;
-export declare const selectorChartsIsHighlightedCallback: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}) => Partial<any> | null;
+export declare const selectorChartsIsHighlightedCallback: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => (item: HighlightItemData | null) => boolean;
-export declare const selectorChartsIsFadedCallback: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+export declare const selectorChartsIsFadedCallback: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => (item: HighlightItemData | null) => boolean;
-export declare const selectorChartsIsHighlighted: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+export declare const selectorChartsIsHighlighted: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, item: HighlightItemData | null) => boolean;
-export declare const selectorChartIsSeriesHighlighted: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+export declare const selectorChartIsSeriesHighlighted: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, seriesId: SeriesId) => boolean;
-export declare const selectorChartIsSeriesFaded: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}, seriesId: string) => boolean;
+export declare const selectorChartIsSeriesFaded: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, seriesId: SeriesId) => boolean;
-export declare const selectorChartSeriesUnfadedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}, seriesId: string) => boolean;
+export declare const selectorChartSeriesUnfadedItem: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, seriesId: SeriesId) => number | null | undefined;
-export declare const selectorChartSeriesHighlightedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}, seriesId: string) => number | null | undefined;
+export declare const selectorChartSeriesHighlightedItem: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, seriesId: SeriesId) => number | null | undefined;
-export declare const selectorChartsIsFaded: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}, seriesId: string) => number | null | undefined;
+export declare const selectorChartsIsFaded: (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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, item: HighlightItemData | null) => boolean;

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -1,11 +1,11 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { createIsFaded } from "./createIsFaded.js";
-import { getSeriesHighlightedItem, getSeriesUnfadedItem, isSeriesFaded, isSeriesHighlighted } from "./highlightStates.js";
+import { getSeriesHighlightedDataIndex, getSeriesUnfadedDataIndex, isSeriesFaded, isSeriesHighlighted } from "./highlightStates.js";
 import { selectorChartsKeyboardItem } from "../useChartKeyboardNavigation/index.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 const selectHighlight = state => state.highlight;
-export const selectorChartsHighlightScopePerSeriesId = createSelector(selectorChartSeriesProcessed, processedSeries => {
+export const selectorChartsHighlightScopePerSeriesId = createSelectorMemoized(selectorChartSeriesProcessed, processedSeries => {
   const map = new Map();
   Object.keys(processedSeries).forEach(seriesType => {
     const seriesData = processedSeries[seriesType];
@@ -36,8 +36,8 @@ export const selectorChartsIsHighlighted = createSelector(selectorChartsHighligh
 });
 export const selectorChartIsSeriesHighlighted = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, isSeriesHighlighted);
 export const selectorChartIsSeriesFaded = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, isSeriesFaded);
-export const selectorChartSeriesUnfadedItem = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, getSeriesUnfadedItem);
-export const selectorChartSeriesHighlightedItem = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, getSeriesHighlightedItem);
+export const selectorChartSeriesUnfadedItem = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, getSeriesUnfadedDataIndex);
+export const selectorChartSeriesHighlightedItem = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, getSeriesHighlightedDataIndex);
 export const selectorChartsIsFaded = createSelector(selectorChartsHighlightScope, selectorChartsHighlightedItem, function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
   return createIsFaded(highlightScope, highlightedItem)(item);
 });

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -1,18 +1,18 @@
-export declare const selectorChartsInteractionIsInitialized: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionIsInitialized: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartsInteractionPointer: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPointer: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("./useChartInteraction.types.js").Coordinate | null;
-export declare const selectorChartsInteractionPointerX: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPointerX: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
-export declare const selectorChartsInteractionPointerY: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPointerY: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number | null;
-export declare const selectorChartsLastInteraction: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsLastInteraction: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => import("./useChartInteraction.types.js").InteractionUpdateSource | undefined;
-export declare const selectorChartsPointerType: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsPointerType: (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("./useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => "mouse" | "pen" | "touch" | null;

package/esm/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { getSVGPoint } from "../../../getSVGPoint.js";
+import { getChartPoint } from "../../../getChartPoint.js";
 export const useChartItemClick = ({
   params,
   store,
@@ -15,14 +15,14 @@ export const useChartItemClick = ({
     };
   }
   const getItemPosition = event => {
-    const svgPoint = getSVGPoint(event?.currentTarget, event);
+    const svgPoint = getChartPoint(event?.currentTarget, event);
     if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
       return undefined;
     }
     let item = undefined;
-    for (const seriesType of Object.keys(store.state.series.seriesConfig)) {
+    for (const seriesType of Object.keys(store.state.seriesConfig.config)) {
       // @ts-ignore The type inference for store.state does not support generic yet
-      item = store.state.series.seriesConfig[seriesType].getItemAtPosition?.(store.state, {
+      item = store.state.seriesConfig.config[seriesType].getItemAtPosition?.(store.state, {
         x: svgPoint.x,
         y: svgPoint.y
       });

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

@@ -1,14 +1,15 @@
-import type { ChartPluginSignature, ChartSeriesTypeRequiredPlugins } from "../../models/index.js";
+import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesTypeRequiredPlugins } from "../../corePlugins/useChartSeriesConfig/index.js";
 export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * The callback fired when an item is clicked.
    *
    * @param {React.MouseEvent<SVGSVGElement, MouseEvent>} event The click event.
-   * @param {SeriesItemIdentifier<SeriesType>} item The clicked item.
+   * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>, item: SeriesItemIdentifier<SeriesType>) => void;
+  onItemClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
   handleClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.d.ts

@@ -6,9 +6,9 @@ import type { UseChartCartesianAxisSignature } from "../useChartCartesianAxis/in
 export type FocusedItemUpdater<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (currentItem: (TSeriesType extends any ? FocusedItemIdentifier<TSeriesType> : never) | null, state: TSeriesType extends CartesianChartSeriesType ? Pick<ChartState<[UseChartKeyboardNavigationSignature], [UseChartCartesianAxisSignature], TSeriesType>, 'series' | 'cartesianAxis'> : Pick<ChartState<[UseChartKeyboardNavigationSignature], [], TSeriesType>, 'series'>) => FocusedItemIdentifier<OutputSeriesType> | null;
 /**
  * Get the next focusable item in the chart.
- * @param {SeriesItemIdentifier<TSeriesType> | null} currentItem The current focused item.
+ * @param {SeriesItemIdentifierWithType<TSeriesType> | null} currentItem The current focused item.
  * @param {KeyboardEvent} event The keyboard event that triggered the navigation.
  * @param {ChartState<[UseChartKeyboardNavigationSignature], []>} state The current chart state.
- * @returns {SeriesItemIdentifier<ChartSeriesType> | null} The next focusable item or null if none found.
+ * @returns {SeriesItemIdentifierWithType<ChartSeriesType> | null} The next focusable item or null if none found.
  */
 export type KeyboardFocusHandler<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (event: KeyboardEvent) => FocusedItemUpdater<TSeriesType, OutputSeriesType> | null;

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

@@ -5,11 +5,15 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
+import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.js";
 export const useChartKeyboardNavigation = ({
   params,
   store,
-  svgRef
+  instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const removeFocus = useEventCallback(function removeFocus() {
     if (store.state.keyboardNavigation.item !== null) {
       store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
@@ -24,14 +28,15 @@ export const useChartKeyboardNavigation = ({
     }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
+      const seriesConfig = selectorChartSeriesConfig(store.state);
       let seriesType = newFocusedItem?.type;
       if (!seriesType) {
-        seriesType = Object.keys(selectorChartDefaultizedSeries(store.state)).find(key => store.state.series.seriesConfig[key] !== undefined);
+        seriesType = Object.keys(selectorChartDefaultizedSeries(store.state)).find(key => seriesConfig[key] !== undefined);
         if (seriesType === undefined) {
           return;
         }
       }
-      const calculateFocusedItem = store.state.series.seriesConfig[seriesType]?.keyboardFocusHandler?.(event);
+      const calculateFocusedItem = seriesConfig[seriesType]?.keyboardFocusHandler?.(event);
       if (!calculateFocusedItem) {
         return;
       }

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

@@ -1,23 +1,23 @@
 import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
 import { type AxisItemIdentifier } from "../../../../models/axis.js";
-export declare const selectorChartsItemIsFocused: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartsItemIsFocused: (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;
 }, item: FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig>) => boolean;
-export declare const selectorChartsHasFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartsHasFocusedItem: (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;
-export declare const selectorChartsFocusedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+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;
-export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+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;
-export declare const selectorChartsKeyboardXAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartsKeyboardXAxisIndex: (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;
 }) => AxisItemIdentifier | undefined;
-export declare const selectorChartsKeyboardYAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartsKeyboardYAxisIndex: (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;
 }) => AxisItemIdentifier | undefined;
-export declare const selectorChartsKeyboardItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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> & {
+export declare const selectorChartsKeyboardItem: (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;