@mui/x-charts 8.22.0 → 8.22.1

package/esm/PieChart/FocusedPieArc.js

@@ -0,0 +1,51 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/useFocusedItem.js";
+import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.js";
+import { PieArc, pieArcClasses } from "./PieArc.js";
+import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
+import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FocusedPieArc(props) {
+  const theme = useTheme();
+  const focusedItem = useFocusedItem();
+  const pieSeriesLayout = usePieSeriesLayout();
+  const {
+    isHighlighted,
+    isFaded
+  } = useItemHighlighted(focusedItem);
+  const pieSeries = usePieSeriesContext();
+  if (focusedItem === null || focusedItem.seriesType !== 'pie' || !pieSeries) {
+    return null;
+  }
+  const series = pieSeries?.series[focusedItem.seriesId];
+  const {
+    center,
+    radius
+  } = pieSeriesLayout[focusedItem.seriesId];
+  if (!series || !center || !radius) {
+    return null;
+  }
+  const item = series.data[focusedItem.dataIndex];
+  const arcSizes = getModifiedArcProperties(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded);
+  return /*#__PURE__*/_jsx(PieArc, _extends({
+    transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
+    startAngle: item.startAngle,
+    endAngle: item.endAngle,
+    color: "transparent",
+    pointerEvents: "none",
+    skipInteraction: true,
+    skipAnimation: true,
+    stroke: (theme.vars ?? theme).palette.text.primary,
+    id: series.id,
+    className: pieArcClasses.focusIndicator,
+    dataIndex: focusedItem.dataIndex,
+    isFaded: false,
+    isHighlighted: false,
+    isFocused: false,
+    strokeWidth: 3
+  }, arcSizes, props));
+}

package/esm/PieChart/PieArcPlot.js

@@ -5,11 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import { useFocusedItem } from "../hooks/useFocusedItem.js";
-import { PieArc, pieArcClasses } from "./PieArc.js";
+import { PieArc } from "./PieArc.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {
       slots,
@@ -28,7 +26,6 @@ function PieArcPlot(props) {
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
   const transformedData = useTransformData({
     innerRadius,
     outerRadius,
@@ -39,18 +36,12 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const {
-    dataIndex,
-    seriesId,
-    seriesType
-  } = useFocusedItem() ?? {};
-  const focusedItem = dataIndex !== undefined && seriesId === id && seriesType === 'pie' ? transformedData[dataIndex] : null;
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsxs("g", _extends({}, other, {
-    children: [transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
@@ -71,26 +62,7 @@ function PieArcPlot(props) {
           dataIndex: index
         }, item);
       })
-    }, slotProps?.pieArc), item.dataIndex)), focusedItem && /*#__PURE__*/_jsx(Arc, {
-      startAngle: focusedItem.startAngle,
-      endAngle: focusedItem.endAngle,
-      paddingAngle: focusedItem.paddingAngle,
-      innerRadius: focusedItem.innerRadius,
-      color: "transparent",
-      pointerEvents: "none",
-      skipInteraction: true,
-      outerRadius: focusedItem.outerRadius,
-      cornerRadius: focusedItem.cornerRadius,
-      skipAnimation: true,
-      stroke: (theme.vars ?? theme).palette.text.primary,
-      id: id,
-      className: pieArcClasses.focusIndicator,
-      dataIndex: focusedItem.dataIndex,
-      isFaded: false,
-      isHighlighted: false,
-      isFocused: false,
-      strokeWidth: 3
-    })]
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/esm/PieChart/PieChart.js

@@ -17,6 +17,7 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartsWrapper } from "../ChartsWrapper/index.js";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
+import { FocusedPieArc } from "./FocusedPieArc.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -88,7 +89,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
           slots: slots,
           slotProps: slotProps,
           onItemClick: onItemClick
-        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        }), /*#__PURE__*/_jsx(FocusedPieArc, {}), /*#__PURE__*/_jsx(ChartsOverlay, {
           loading: loading,
           slots: slots,
           slotProps: slotProps

package/esm/PieChart/dataTransform/getModifiedArcProperties.d.ts

@@ -0,0 +1,11 @@
+import type { DefaultizedPieSeriesType, PieSeriesLayout } from "../../models/seriesType/pie.js";
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export declare function getModifiedArcProperties(seriesDef: Pick<DefaultizedPieSeriesType, 'cornerRadius' | 'paddingAngle' | 'id' | 'highlighted' | 'faded' | 'data'>, seriesLayout: Pick<PieSeriesLayout, 'radius'>, isHighlighted: boolean, isFaded: boolean): {
+  paddingAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  cornerRadius: number;
+  arcLabelRadius: number;
+};

package/esm/PieChart/dataTransform/getModifiedArcProperties.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { deg2rad } from "../../internals/angleConversion.js";
+
+/**
+ * Function that returns arc properties after applying transformation from highlight/fade states.
+ */
+export function getModifiedArcProperties(seriesDef, seriesLayout, isHighlighted, isFaded) {
+  const {
+    faded,
+    highlighted,
+    paddingAngle: basePaddingAngle = 0,
+    cornerRadius: baseCornerRadius = 0
+  } = seriesDef;
+  const {
+    radius: {
+      inner: baseInnerRadius = 0,
+      label: baseArcLabelRadius,
+      outer: baseOuterRadius
+    }
+  } = seriesLayout;
+  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 {
+    paddingAngle,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    arcLabelRadius
+  };
+}

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,
@@ -34,25 +29,25 @@ export function useTransformData(series) {
       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/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/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/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.js

@@ -2,16 +2,15 @@
 
 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";
 /**
  * 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);
+  const focusedSeriesType = store.use(selectorChartsFocusedSeriesType);
+  const focusedSeriesId = store.use(selectorChartsFocusedSeriesId);
+  const focusedDataIndex = store.use(selectorChartsFocusedDataIndex);
   return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
     seriesType: focusedSeriesType,
     seriesId: focusedSeriesId,

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) {