@mui/x-charts 8.22.0 → 8.23.0

package/esm/PieChart/dataTransform/useTransformData.js

@@ -4,18 +4,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useIsItemFocusedGetter } from "../../hooks/useIsItemFocusedGetter.js";
-import { deg2rad } from "../../internals/angleConversion.js";
+import { getModifiedArcProperties } from "./getModifiedArcProperties.js";
 export function useTransformData(series) {
   const {
     id: seriesId,
     data,
     faded,
-    highlighted,
-    paddingAngle: basePaddingAngle = 0,
-    innerRadius: baseInnerRadius = 0,
-    arcLabelRadius: baseArcLabelRadius,
-    outerRadius: baseOuterRadius,
-    cornerRadius: baseCornerRadius = 0
+    highlighted
   } = series;
   const {
     isFaded: isItemFaded,
@@ -30,29 +25,29 @@ export function useTransformData(series) {
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
     const isFocused = isItemFocused({
-      seriesType: 'pie',
+      type: 'pie',
       seriesId,
       dataIndex: itemIndex
     });
+
+    // TODO v9: Replace the second argument with the result of useSeriesLayout
+    const arcSizes = getModifiedArcProperties(series, {
+      radius: {
+        inner: series.innerRadius ?? 0,
+        outer: series.outerRadius,
+        label: series.arcLabelRadius ?? 0,
+        available: 0
+      }
+    }, isHighlighted, isFaded);
     const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, deg2rad(attributesOverride.paddingAngle ?? basePaddingAngle));
-    const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
-    const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
-    const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
-    const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return _extends({}, item, attributesOverride, {
       dataIndex: itemIndex,
       isFaded,
       isHighlighted,
-      isFocused,
-      paddingAngle,
-      innerRadius,
-      outerRadius,
-      cornerRadius,
-      arcLabelRadius
-    });
-  }), [baseCornerRadius, baseInnerRadius, baseOuterRadius, basePaddingAngle, baseArcLabelRadius, data, faded, highlighted, isItemFaded, isItemHighlighted, isItemFocused, seriesId]);
+      isFocused
+    }, arcSizes);
+  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/esm/PieChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ import tooltipGetter from "./tooltip.js";
 import seriesLayout from "./seriesLayout.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import keyboardFocusHandler from "./keyboardFocusHandler.js";
 export const pieSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -12,5 +13,6 @@ export const pieSeriesConfig = {
   legendGetter,
   tooltipGetter,
   tooltipItemPositionGetter,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler
 };

package/esm/PieChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'pie', 'pie'>;
+export default keyboardFocusHandler;

package/esm/PieChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['pie']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/PieChart/seriesConfig/tooltipPosition.js

@@ -1,44 +1,35 @@
 import { findMinMax } from "../../internals/findMinMax.js";
-import { getPercentageValue } from "../../internals/getPercentageValue.js";
-import { getPieCoordinates } from "../getPieCoordinates.js";
 const tooltipItemPositionGetter = params => {
   const {
     series,
-    drawingArea,
     identifier,
-    placement
+    placement,
+    seriesLayout
   } = params;
   if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.pie?.series[identifier.seriesId];
-  if (itemSeries == null) {
+  const layout = seriesLayout.pie?.[identifier.seriesId];
+  if (itemSeries == null || layout == null) {
     return null;
   }
   const {
-    cx,
-    cy,
-    availableRadius
-  } = getPieCoordinates({
-    cx: itemSeries.cx,
-    cy: itemSeries.cy
-  }, drawingArea);
+    center,
+    radius
+  } = layout;
   const {
-    data,
-    innerRadius: baseInnerRadius = 0,
-    outerRadius: baseOuterRadius
+    data
   } = itemSeries;
-  const innerRadius = Math.max(0, getPercentageValue(baseInnerRadius ?? 0, availableRadius));
-  const outerRadius = Math.max(0, getPercentageValue(baseOuterRadius ?? availableRadius, availableRadius));
   const dataItem = data[identifier.dataIndex];
   if (!dataItem) {
     return null;
   }
 
   // Compute the 4 corner points of the arc to get the bounding box.
-  const points = [[innerRadius, dataItem.startAngle], [innerRadius, dataItem.endAngle], [outerRadius, dataItem.startAngle], [outerRadius, dataItem.endAngle]].map(([radius, angle]) => ({
-    x: cx + radius * Math.sin(angle),
-    y: cy - radius * Math.cos(angle)
+  const points = [[radius.inner, dataItem.startAngle], [radius.inner, dataItem.endAngle], [radius.outer, dataItem.startAngle], [radius.outer, dataItem.endAngle]].map(([r, angle]) => ({
+    x: center.x + r * Math.sin(angle),
+    y: center.y - r * Math.cos(angle)
   }));
   const [x0, x1] = findMinMax(points.map(p => p.x));
   const [y0, y1] = findMinMax(points.map(p => p.y));

package/esm/RadarChart/RadarAxis/useRadarAxis.js

@@ -6,7 +6,6 @@ import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins
 import { isOrdinalScale } from "../../internals/scaleGuards.js";
 import { degToRad } from "../../internals/degToRad.js";
 import { clampAngle } from "../../internals/clampAngle.js";
-import { useSelector } from "../../internals/store/useSelector.js";
 import { rad2deg } from "../../internals/angleConversion.js";
 /**
  * Returns an array with on item par metrics with the different point to label.
@@ -28,7 +27,7 @@ export function useRadarAxis(params) {
   const {
     cx,
     cy
-  } = useSelector(store, selectorChartPolarCenter);
+  } = store.use(selectorChartPolarCenter);
   if (metric === undefined || !rotationScale || rotationScale.domain().length === 0) {
     return null;
   }

package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -1,7 +1,6 @@
 import { useRadiusAxes } from "../../hooks/useAxis.js";
 import { useRadarSeries } from "../../hooks/useRadarSeries.js";
 import { useRotationScale } from "../../hooks/useScale.js";
-import { useSelector } from "../../internals/store/useSelector.js";
 import { useStore } from "../../internals/store/useStore.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
@@ -17,9 +16,9 @@ export function useRadarAxisHighlight() {
     instance
   } = useChartContext();
   const store = useStore();
-  const rotationAxisIndex = useSelector(store, selectorChartsInteractionRotationAxisIndex);
-  const rotationAxisValue = useSelector(store, selectorChartsInteractionRotationAxisValue);
-  const center = useSelector(store, selectorChartPolarCenter);
+  const rotationAxisIndex = store.use(selectorChartsInteractionRotationAxisIndex);
+  const rotationAxisValue = store.use(selectorChartsInteractionRotationAxisValue);
+  const center = store.use(selectorChartPolarCenter);
   const highlightedIndex = rotationAxisIndex;
   if (!rotationScale) {
     return null;

package/esm/RadarChart/RadarGrid/useRadarGridData.js

@@ -2,7 +2,6 @@ import { useRotationScale } from "../../hooks/useScale.js";
 import { useRadiusAxes } from "../../hooks/index.js";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
-import { useSelector } from "../../internals/store/useSelector.js";
 export function useRadarGridData() {
   const {
     instance,
@@ -15,7 +14,7 @@ export function useRadarGridData() {
   const {
     cx,
     cy
-  } = useSelector(store, selectorChartPolarCenter);
+  } = store.use(selectorChartPolarCenter);
   if (!rotationScale || rotationScale.domain().length === 0) {
     return null;
   }

package/esm/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
 import { getSVGPoint } from "../../internals/getSVGPoint.js";
 import { generateSvg2rotation } from "../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation.js";
-import { useSelector } from "../../internals/store/useSelector.js";
 import { getAxisIndex } from "../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js";
 import { useStore } from "../../internals/store/useStore.js";
 import { useSvgRef } from "../../hooks/useSvgRef.js";
@@ -16,7 +15,7 @@ export function useRadarRotationIndex() {
   const svgRef = useSvgRef();
   const store = useStore();
   const rotationAxis = useRotationAxis();
-  const center = useSelector(store, selectorChartPolarCenter);
+  const center = store.use(selectorChartPolarCenter);
   const rotationIndexGetter = React.useCallback(function rotationIndexGetter(event) {
     const element = svgRef.current;
     if (!element || !rotationAxis) {

package/esm/ScatterChart/BatchScatter.js

@@ -5,7 +5,6 @@ import { styled } from '@mui/material/styles';
 import { useUtilityClasses } from "./scatterClasses.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesUnfadedItem, selectorChartSeriesHighlightedItem } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_POINTS_PER_PATH = 1000;
@@ -119,10 +118,10 @@ export function BatchScatter(props) {
   const {
     store
   } = useChartContext();
-  const isSeriesHighlighted = useSelector(store, selectorChartIsSeriesHighlighted, series.id);
-  const isSeriesFaded = useSelector(store, selectorChartIsSeriesFaded, series.id);
-  const seriesHighlightedItem = useSelector(store, selectorChartSeriesHighlightedItem, series.id);
-  const seriesUnfadedItem = useSelector(store, selectorChartSeriesUnfadedItem, series.id);
+  const isSeriesHighlighted = store.use(selectorChartIsSeriesHighlighted, series.id);
+  const isSeriesFaded = store.use(selectorChartIsSeriesFaded, series.id);
+  const seriesHighlightedItem = store.use(selectorChartSeriesHighlightedItem, series.id);
+  const seriesUnfadedItem = store.use(selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
   const classes = useUtilityClasses(inClasses);

package/esm/ScatterChart/FocusedScatterMark.js

@@ -18,7 +18,7 @@ export function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = useYAxes();
-  if (focusedItem === null || focusedItem.seriesType !== 'scatter' || !scatterSeries) {
+  if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
   const series = scatterSeries?.series[focusedItem.seriesId];

package/esm/ScatterChart/Scatter.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { getInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
 import { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { ScatterMarker } from "./ScatterMarker.js";
@@ -41,7 +40,7 @@ function Scatter(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const isVoronoiEnabled = useSelector(store, selectorChartsIsVoronoiEnabled);
+  const isVoronoiEnabled = store.use(selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const {
     isFaded,

package/esm/ScatterChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ import legendGetter from "./legend.js";
 import tooltipGetter from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
+import keyboardFocusHandler from "./keyboardFocusHandler.js";
 export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -13,5 +14,6 @@ export const scatterSeriesConfig = {
   tooltipItemPositionGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler
 };

package/esm/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', 'bar' | 'line' | 'scatter'>;
+export default keyboardFocusHandler;

package/esm/ScatterChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/hooks/useAxis.js

@@ -2,7 +2,6 @@
 
 import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 import { selectorChartRadiusAxis, selectorChartRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 /**
  * Get all the x-axes.
@@ -24,7 +23,7 @@ export function useXAxes() {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   return {
     xAxis,
     xAxisIds
@@ -51,7 +50,7 @@ export function useYAxes() {
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
+  } = store.use(selectorChartYAxis);
   return {
     yAxis,
     yAxisIds
@@ -79,7 +78,7 @@ export function useXAxis(axisId) {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   const id = axisId ?? xAxisIds[0];
   return xAxis[id];
 }
@@ -105,7 +104,7 @@ export function useYAxis(axisId) {
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
+  } = store.use(selectorChartYAxis);
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }
@@ -130,7 +129,7 @@ export function useRotationAxes() {
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
-  } = useSelector(store, selectorChartRotationAxis);
+  } = store.use(selectorChartRotationAxis);
   return {
     rotationAxis,
     rotationAxisIds
@@ -157,7 +156,7 @@ export function useRadiusAxes() {
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
-  } = useSelector(store, selectorChartRadiusAxis);
+  } = store.use(selectorChartRadiusAxis);
   return {
     radiusAxis,
     radiusAxisIds
@@ -188,7 +187,7 @@ export function useRotationAxis(axisId) {
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
-  } = useSelector(store, selectorChartRotationAxis);
+  } = store.use(selectorChartRotationAxis);
   const id = axisId ?? rotationAxisIds[0];
   return rotationAxis[id];
 }
@@ -217,7 +216,7 @@ export function useRadiusAxis(axisId) {
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
-  } = useSelector(store, selectorChartRadiusAxis);
+  } = store.use(selectorChartRadiusAxis);
   const id = axisId ?? radiusAxisIds[0];
   return radiusAxis[id];
 }

package/esm/hooks/useAxisSystem.js

@@ -2,7 +2,6 @@
 
 import { selectorChartRawXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { selectorChartRawRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 
 /**
@@ -14,8 +13,8 @@ import { useStore } from "../internals/store/useStore.js";
  */
 export function useAxisSystem() {
   const store = useStore();
-  const rawRotationAxis = useSelector(store, selectorChartRawRotationAxis);
-  const rawXAxis = useSelector(store, selectorChartRawXAxis);
+  const rawRotationAxis = store.use(selectorChartRawRotationAxis);
+  const rawXAxis = store.use(selectorChartRawXAxis);
   if (rawRotationAxis !== undefined) {
     return 'polar';
   }

package/esm/hooks/useBrush.js

@@ -1,5 +1,4 @@
 import { selectorBrushState } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 
 /**
@@ -12,5 +11,5 @@ import { useStore } from "../internals/store/useStore.js";
  */
 export function useBrush() {
   const store = useStore();
-  return useSelector(store, selectorBrushState);
+  return store.use(selectorBrushState);
 }

package/esm/hooks/useChartId.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 
 /**
@@ -10,5 +9,5 @@ import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/use
  */
 export function useChartId() {
   const store = useStore();
-  return useSelector(store, selectorChartId);
+  return store.use(selectorChartId);
 }

package/esm/hooks/useDataset.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartDataset } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the dataset used to populate series and axes data.
@@ -9,5 +8,5 @@ import { selectorChartDataset } from "../internals/plugins/corePlugins/useChartS
  */
 export function useDataset() {
   const store = useStore();
-  return useSelector(store, selectorChartDataset);
+  return store.use(selectorChartDataset);
 }

package/esm/hooks/useDrawingArea.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 /**
  * Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
@@ -12,5 +11,5 @@ import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useCh
  */
 export function useDrawingArea() {
   const store = useStore();
-  return useSelector(store, selectorChartDrawingArea);
+  return store.use(selectorChartDrawingArea);
 }

package/esm/hooks/useFocusedItem.d.ts

@@ -1,15 +1,4 @@
-import { type ChartSeriesType } from "../models/seriesType/config.js";
-import { type SeriesId } from "../models/seriesType/common.js";
-export type FocusedItemData = {
-  seriesType: ChartSeriesType;
-  seriesId: SeriesId;
-  dataIndex: number;
-};
 /**
  * Get the focused item from keyboard navigation.
  */
-export declare function useFocusedItem(): {
-  seriesType: "line" | "bar" | "scatter" | "pie";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | null;
+export declare function useFocusedItem(): import("../index.js").FocusedItemIdentifier<keyof import("../internals/index.js").ChartsSeriesConfig> | null;

package/esm/hooks/useFocusedItem.js

@@ -1,20 +1,12 @@
 'use client';
 
-import * as React from 'react';
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { selectorChartsFocusedItem } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+
 /**
  * Get the focused item from keyboard navigation.
  */
 export function useFocusedItem() {
   const store = useStore();
-  const focusedSeriesType = useSelector(store, selectorChartsFocusedSeriesType);
-  const focusedSeriesId = useSelector(store, selectorChartsFocusedSeriesId);
-  const focusedDataIndex = useSelector(store, selectorChartsFocusedDataIndex);
-  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
-    seriesType: focusedSeriesType,
-    seriesId: focusedSeriesId,
-    dataIndex: focusedDataIndex
-  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+  return store.use(selectorChartsFocusedItem);
 }

package/esm/hooks/useInteractionItemProps.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { type SeriesItemIdentifierWithData } from "../models/index.js";
 import type { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import type { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import type { ChartSeriesType, ChartItemIdentifier } from "../models/seriesType/config.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+import type { SeriesItemIdentifier } from "../models/seriesType/index.js";
 import type { ChartInstance } from "../internals/plugins/models/index.js";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithData, skip?: boolean) => {
@@ -10,7 +11,7 @@ export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithDat
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: ChartItemIdentifier<ChartSeriesType>): {
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: SeriesItemIdentifier<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/esm/hooks/useInteractionItemProps.js

@@ -17,7 +17,13 @@ export const useInteractionItemProps = (data, skip) => {
     interactionActive.current = true;
     instance.setLastUpdateSource('pointer');
     instance.setTooltipItem(data);
-    instance.setHighlight(data);
+    // TODO: uniformize sankey and other types to get a single plugin
+    instance.setHighlight(
+    // @ts-ignore
+    data.type === 'sankey' ? data : {
+      seriesId: data.seriesId,
+      dataIndex: data.dataIndex
+    });
   });
   const onPointerLeave = useEventCallback(() => {
     interactionActive.current = false;
@@ -45,7 +51,12 @@ export function getInteractionItemProps(instance, item) {
     }
     instance.setLastUpdateSource('pointer');
     instance.setTooltipItem(item);
-    instance.setHighlight(item);
+    instance.setHighlight(
+    // @ts-ignore
+    item.type === 'sankey' ? item : {
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    });
   }
   function onPointerLeave() {
     if (!item) {

package/esm/hooks/useIsItemFocused.d.ts

@@ -1,11 +1,12 @@
-import { type FocusedItemData } from "./useFocusedItem.js";
-type UseItemFocusedParams = FocusedItemData;
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+import type { FocusedItemIdentifier } from "../models/seriesType/index.js";
+type UseItemFocusedParams = FocusedItemIdentifier<ChartSeriesType>;
 /**
  * A hook to check if an item has the focus.
  *
  * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
  *
- * @param {FocusedItemData} item is the item to check
+ * @param {FocusedItemIdentifier} item is the item to check
  * @returns {boolean} the focus state
  */
 export declare function useIsItemFocused(item: UseItemFocusedParams): boolean;

package/esm/hooks/useIsItemFocused.js

@@ -1,17 +1,16 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartsItemIsFocused } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 /**
  * A hook to check if an item has the focus.
  *
  * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
  *
- * @param {FocusedItemData} item is the item to check
+ * @param {FocusedItemIdentifier} item is the item to check
  * @returns {boolean} the focus state
  */
 export function useIsItemFocused(item) {
   const store = useStore();
-  return useSelector(store, selectorChartsItemIsFocused, item);
+  return store.use(selectorChartsItemIsFocused, item);
 }

package/esm/hooks/useIsItemFocusedGetter.d.ts

@@ -1,8 +1,9 @@
-import { type FocusedItemData } from "./useFocusedItem.js";
+import type { FocusedItemIdentifier } from "../models/seriesType/index.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
 /**
  * A hook to check focus state of multiple items.
  * If you're interested by a single one, consider using `useIsItemFocused`.
  *
  * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
  */
-export declare function useIsItemFocusedGetter(): (item: FocusedItemData) => boolean;
+export declare function useIsItemFocusedGetter(): (item: FocusedItemIdentifier<ChartSeriesType>) => boolean;

package/esm/hooks/useIsItemFocusedGetter.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { useFocusedItem } from "./useFocusedItem.js";
 
 /**
@@ -10,5 +11,5 @@ import { useFocusedItem } from "./useFocusedItem.js";
  */
 export function useIsItemFocusedGetter() {
   const focusedItem = useFocusedItem();
-  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+  return item => focusedItem !== null && fastObjectShallowCompare(focusedItem, item);
 }