@mui/x-charts 8.21.0 → 8.22.1

package/esm/themeAugmentation/props.d.ts

@@ -1,15 +1,15 @@
-import { BarLabelProps } from "../BarChart/BarLabel/index.js";
-import { BarChartProps } from "../BarChart/BarChart.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsLegendProps } from "../ChartsLegend/index.js";
-import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { ChartsTooltipProps } from "../ChartsTooltip/index.js";
-import { LineChartProps } from "../LineChart/LineChart.js";
-import { ScatterChartProps } from "../ScatterChart/ScatterChart.js";
-import { PieChartProps } from "../PieChart/PieChart.js";
-import { ChartsXAxisProps, ChartsYAxisProps } from "../models/axis.js";
-import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import { type BarLabelProps } from "../BarChart/BarLabel/index.js";
+import { type BarChartProps } from "../BarChart/BarChart.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsLegendProps } from "../ChartsLegend/index.js";
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
+import { type LineChartProps } from "../LineChart/LineChart.js";
+import { type ScatterChartProps } from "../ScatterChart/ScatterChart.js";
+import { type PieChartProps } from "../PieChart/PieChart.js";
+import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
+import { type ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
+import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
 export interface ChartsComponentsPropsList {
   MuiChartsXAxis: ChartsXAxisProps;
   MuiChartsYAxis: ChartsYAxisProps;

package/esm/utils/index.d.ts

@@ -1,4 +1,5 @@
 /**
  * Exported utility functions for the x-charts library.
  */
-export * from "./niceDomain.js";
+export * from "./niceDomain.js";
+export { tickFrequencies } from "./timeTicks.js";

package/esm/utils/index.js

@@ -2,4 +2,5 @@
  * Exported utility functions for the x-charts library.
  */
 
-export * from "./niceDomain.js";
+export * from "./niceDomain.js";
+export { tickFrequencies } from "./timeTicks.js";

package/esm/utils/niceDomain.d.ts

@@ -1,5 +1,5 @@
-import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
-import { ContinuousScaleName } from "../models/index.js";
+import { type NumberValue } from '@mui/x-charts-vendor/d3-scale';
+import { type ContinuousScaleName } from "../models/index.js";
 /**
  * Returns a nice domain for the given scale type and domain.
  * Does not modify the original domain.

package/esm/utils/timeTicks.d.ts

@@ -0,0 +1,2 @@
+import type { TickFrequency, TickFrequencyDefinition } from "../models/timeTicks.js";
+export declare const tickFrequencies: Record<TickFrequency, TickFrequencyDefinition>;

package/esm/utils/timeTicks.js

@@ -0,0 +1,62 @@
+function yearNumber(from, to) {
+  return Math.abs(to.getFullYear() - from.getFullYear());
+}
+function monthNumber(from, to) {
+  return Math.abs(to.getFullYear() * 12 + to.getMonth() - 12 * from.getFullYear() - from.getMonth());
+}
+function dayNumber(from, to) {
+  return Math.abs(to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24);
+}
+function hourNumber(from, to) {
+  return Math.abs(to.getTime() - from.getTime()) / (1000 * 60 * 60);
+}
+export const tickFrequencies = {
+  years: {
+    getTickNumber: yearNumber,
+    isTick: (prev, value) => value.getFullYear() !== prev.getFullYear(),
+    format: d => d.getFullYear().toString()
+  },
+  quarterly: {
+    getTickNumber: (from, to) => Math.floor(monthNumber(from, to) / 3),
+    isTick: (prev, value) => value.getMonth() !== prev.getMonth() && value.getMonth() % 3 === 0,
+    format: new Intl.DateTimeFormat('default', {
+      month: 'short'
+    }).format
+  },
+  months: {
+    getTickNumber: monthNumber,
+    isTick: (prev, value) => value.getMonth() !== prev.getMonth(),
+    format: new Intl.DateTimeFormat('default', {
+      month: 'short'
+    }).format
+  },
+  biweekly: {
+    getTickNumber: (from, to) => dayNumber(from, to) / 14,
+    isTick: (prev, value) => (value.getDay() < prev.getDay() || dayNumber(value, prev) > 7) && Math.floor(value.getDate() / 7) % 2 === 1,
+    format: new Intl.DateTimeFormat('default', {
+      day: 'numeric'
+    }).format
+  },
+  weeks: {
+    getTickNumber: (from, to) => dayNumber(from, to) / 7,
+    isTick: (prev, value) => value.getDay() < prev.getDay() || dayNumber(value, prev) >= 7,
+    format: new Intl.DateTimeFormat('default', {
+      day: 'numeric'
+    }).format
+  },
+  days: {
+    getTickNumber: dayNumber,
+    isTick: (prev, value) => value.getDate() !== prev.getDate(),
+    format: new Intl.DateTimeFormat('default', {
+      day: 'numeric'
+    }).format
+  },
+  hours: {
+    getTickNumber: hourNumber,
+    isTick: (prev, value) => value.getHours() !== prev.getHours(),
+    format: new Intl.DateTimeFormat('default', {
+      hour: '2-digit',
+      minute: '2-digit'
+    }).format
+  }
+};

package/hooks/animation/useAnimate.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = Props> {
   /**
    * Function that returns the interpolation function for animating props.

package/hooks/animation/useAnimateArea.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AnimatedAreaProps } from "../../LineChart/index.js";
 type UseAnimateAreaParams = Pick<AnimatedAreaProps, 'd' | 'skipAnimation'> & {
   ref?: React.Ref<SVGPathElement>;

package/hooks/animation/useAnimateBar.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { BarProps } from "../../BarChart/AnimatedBarElement.js";
 type UseAnimateBarParams = Pick<BarProps, 'x' | 'y' | 'xOrigin' | 'yOrigin' | 'width' | 'height' | 'skipAnimation' | 'layout'> & {
   ref?: React.Ref<SVGRectElement>;

package/hooks/animation/useAnimateBarLabel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { BarLabelProps } from "../../BarChart/index.js";
 type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation' | 'placement'> & {
   ref?: React.Ref<SVGTextElement>;

package/hooks/animation/useAnimateGaugeValueArc.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 interface UseAnimateGaugeValueArcParams {
   ref?: React.Ref<SVGPathElement>;
   startAngle: number;

package/hooks/animation/useAnimateLine.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AnimatedLineProps } from "../../LineChart/index.js";
 type UseAnimateLineParams = Pick<AnimatedLineProps, 'd' | 'skipAnimation'> & {
   ref?: React.Ref<SVGPathElement>;

package/hooks/animation/useAnimatePieArc.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PieArcProps } from "../../PieChart/index.js";
 type UseAnimatePieArcParams = Pick<PieArcProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
   ref?: React.Ref<SVGPathElement>;

package/hooks/animation/useAnimatePieArcLabel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { PieArcLabelProps } from "../../PieChart/index.js";
 type UseAnimatePieArcLabelParams = Pick<PieArcLabelProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'skipAnimation'> & {
   ref?: React.Ref<SVGTextElement>;

package/hooks/index.d.ts

@@ -8,7 +8,7 @@ export * from "./useSvgRef.js";
 export * from "./useSeries.js";
 export * from "./useDataset.js";
 export * from "./useScatterSeries.js";
-export * from "./usePieSeries.js";
+export { type UsePieSeriesReturnValue, type UsePieSeriesContextReturnValue, usePieSeries, usePieSeriesContext } from "./usePieSeries.js";
 export * from "./useBarSeries.js";
 export * from "./useLineSeries.js";
 export * from "./useRadarSeries.js";

package/hooks/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  usePieSeries: true,
+  usePieSeriesContext: true,
   useChartGradientId: true,
   useChartGradientIdObjectBound: true
 };
@@ -19,6 +21,18 @@ Object.defineProperty(exports, "useChartGradientIdObjectBound", {
     return _useChartGradientId.useChartGradientIdObjectBound;
   }
 });
+Object.defineProperty(exports, "usePieSeries", {
+  enumerable: true,
+  get: function () {
+    return _usePieSeries.usePieSeries;
+  }
+});
+Object.defineProperty(exports, "usePieSeriesContext", {
+  enumerable: true,
+  get: function () {
+    return _usePieSeries.usePieSeriesContext;
+  }
+});
 var _useDrawingArea = require("./useDrawingArea");
 Object.keys(_useDrawingArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -140,17 +154,6 @@ Object.keys(_useScatterSeries).forEach(function (key) {
   });
 });
 var _usePieSeries = require("./usePieSeries");
-Object.keys(_usePieSeries).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _usePieSeries[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _usePieSeries[key];
-    }
-  });
-});
 var _useBarSeries = require("./useBarSeries");
 Object.keys(_useBarSeries).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/useAxis.d.ts

@@ -1,4 +1,4 @@
-import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName, type AxisScaleConfig, type ChartsXAxisProps, type ChartsYAxisProps, type ComputedAxis } from "../models/axis.js";
+import { type AxisId, type ChartsRadiusAxisProps, type ChartsRotationAxisProps, type PolarAxisDefaultized, type ScaleName, type AxisScaleConfig, type ChartsXAxisProps, type ChartsYAxisProps, type ComputedAxis } from "../models/axis.js";
 /**
  * Get all the x-axes.
  *

package/hooks/useAxis.js

@@ -14,7 +14,6 @@ exports.useYAxes = useYAxes;
 exports.useYAxis = useYAxis;
 var _useChartCartesianAxisRendering = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 /**
  * Get all the x-axes.
@@ -36,7 +35,7 @@ function useXAxes() {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartXAxis);
+  } = store.use(_useChartCartesianAxisRendering.selectorChartXAxis);
   return {
     xAxis,
     xAxisIds
@@ -63,7 +62,7 @@ function useYAxes() {
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
+  } = store.use(_useChartCartesianAxisRendering.selectorChartYAxis);
   return {
     yAxis,
     yAxisIds
@@ -91,7 +90,7 @@ function useXAxis(axisId) {
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartXAxis);
+  } = store.use(_useChartCartesianAxisRendering.selectorChartXAxis);
   const id = axisId ?? xAxisIds[0];
   return xAxis[id];
 }
@@ -117,7 +116,7 @@ function useYAxis(axisId) {
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
+  } = store.use(_useChartCartesianAxisRendering.selectorChartYAxis);
   const id = axisId ?? yAxisIds[0];
   return yAxis[id];
 }
@@ -142,7 +141,7 @@ function useRotationAxes() {
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRotationAxis);
+  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
   return {
     rotationAxis,
     rotationAxisIds
@@ -169,7 +168,7 @@ function useRadiusAxes() {
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRadiusAxis);
+  } = store.use(_useChartPolarAxis.selectorChartRadiusAxis);
   return {
     radiusAxis,
     radiusAxisIds
@@ -200,7 +199,7 @@ function useRotationAxis(axisId) {
   const {
     axis: rotationAxis,
     axisIds: rotationAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRotationAxis);
+  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
   const id = axisId ?? rotationAxisIds[0];
   return rotationAxis[id];
 }
@@ -229,7 +228,7 @@ function useRadiusAxis(axisId) {
   const {
     axis: radiusAxis,
     axisIds: radiusAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRadiusAxis);
+  } = store.use(_useChartPolarAxis.selectorChartRadiusAxis);
   const id = axisId ?? radiusAxisIds[0];
   return radiusAxis[id];
 }

package/hooks/useAxisSystem.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAxisSystem = useAxisSystem;
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 /**
  * @internals
@@ -18,8 +17,8 @@ var _useStore = require("../internals/store/useStore");
  */
 function useAxisSystem() {
   const store = (0, _useStore.useStore)();
-  const rawRotationAxis = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRawRotationAxis);
-  const rawXAxis = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartRawXAxis);
+  const rawRotationAxis = store.use(_useChartPolarAxis.selectorChartRawRotationAxis);
+  const rawXAxis = store.use(_useChartCartesianAxis.selectorChartRawXAxis);
   if (rawRotationAxis !== undefined) {
     return 'polar';
   }

package/hooks/useBarSeries.d.ts

@@ -1,6 +1,6 @@
-import { ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
-import { SeriesId } from "../models/seriesType/common.js";
-import { ChartSeriesDefaultized } from "../models/seriesType/config.js";
+import { type ProcessedSeries } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.types.js";
+import { type SeriesId } from "../models/seriesType/common.js";
+import { type ChartSeriesDefaultized } from "../models/seriesType/config.js";
 export type UseBarSeriesReturnValue = ChartSeriesDefaultized<'bar'>;
 export type UseBarSeriesContextReturnValue = ProcessedSeries['bar'];
 /**

package/hooks/useBrush.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBrush = useBrush;
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 /**
  * Get the current brush state.
@@ -17,5 +16,5 @@ var _useStore = require("../internals/store/useStore");
  */
 function useBrush() {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, _useChartBrush.selectorBrushState);
+  return store.use(_useChartBrush.selectorBrushState);
 }

package/hooks/useChartGradientId.d.ts

@@ -1,4 +1,4 @@
-import { AxisId } from "../models/axis.js";
+import { type AxisId } from "../models/axis.js";
 /**
  * Returns a function that generates a gradient id for the given axis id.
  */

package/hooks/useChartId.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useChartId = useChartId;
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartId = require("../internals/plugins/corePlugins/useChartId/useChartId.selectors");
 /**
  * Get the unique identifier of the chart.
@@ -14,5 +13,5 @@ var _useChartId = require("../internals/plugins/corePlugins/useChartId/useChartI
  */
 function useChartId() {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, _useChartId.selectorChartId);
+  return store.use(_useChartId.selectorChartId);
 }

package/hooks/useChartRootRef.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 /**
  * Get the ref for the root chart element.
  * @returns The root chart element ref.

package/hooks/useColorScale.d.ts

@@ -1,4 +1,4 @@
-import { AxisId, AxisScaleComputedConfig, ScaleName } from "../models/axis.js";
+import { type AxisId, type AxisScaleComputedConfig, type ScaleName } from "../models/axis.js";
 /**
  * Get the X axis color scale.
  *

package/hooks/useDataset.d.ts

@@ -1,4 +1,4 @@
-import { DatasetType } from "../models/seriesType/config.js";
+import { type DatasetType } from "../models/seriesType/config.js";
 /**
  * Get access to the dataset used to populate series and axes data.
  * @returns {DatasetType | undefined} The dataset array if provided, otherwise undefined.

package/hooks/useDataset.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDataset = useDataset;
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 /**
  * Get access to the dataset used to populate series and axes data.
@@ -14,5 +13,5 @@ var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/u
  */
 function useDataset() {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartDataset);
+  return store.use(_useChartSeries.selectorChartDataset);
 }

package/hooks/useDrawingArea.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDrawingArea = useDrawingArea;
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 /**
  * Get the drawing area dimensions and coordinates. The drawing area is the area where the chart is rendered.
@@ -17,5 +16,5 @@ var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDime
  */
 function useDrawingArea() {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  return store.use(_useChartDimensions.selectorChartDrawingArea);
 }

package/hooks/useFocusedItem.d.ts

@@ -1,5 +1,5 @@
-import { ChartSeriesType } from "../models/seriesType/config.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type ChartSeriesType } from "../models/seriesType/config.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export type FocusedItemData = {
   seriesType: ChartSeriesType;
   seriesId: SeriesId;

package/hooks/useFocusedItem.js

@@ -8,16 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFocusedItem = useFocusedItem;
 var React = _interopRequireWildcard(require("react"));
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 /**
  * Get the focused item from keyboard navigation.
  */
 function useFocusedItem() {
   const store = (0, _useStore.useStore)();
-  const focusedSeriesType = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedSeriesType);
-  const focusedSeriesId = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedSeriesId);
-  const focusedDataIndex = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedDataIndex);
+  const focusedSeriesType = store.use(_useChartKeyboardNavigation.selectorChartsFocusedSeriesType);
+  const focusedSeriesId = store.use(_useChartKeyboardNavigation.selectorChartsFocusedSeriesId);
+  const focusedDataIndex = store.use(_useChartKeyboardNavigation.selectorChartsFocusedDataIndex);
   return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
     seriesType: focusedSeriesType,
     seriesId: focusedSeriesId,

package/hooks/useInteractionItemProps.d.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { SeriesItemIdentifierWithData } from "../models/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { ChartSeriesType, type ChartItemIdentifierWithData } from "../models/seriesType/config.js";
-import { ChartInstance } from "../internals/plugins/models/index.js";
+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 } 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) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifierWithData<ChartSeriesType>): {
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: SeriesItemIdentifier<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useInteractionItemProps.js

@@ -23,14 +23,19 @@ const useInteractionItemProps = (data, skip) => {
   const interactionActive = React.useRef(false);
   const onPointerEnter = (0, _useEventCallback.default)(() => {
     interactionActive.current = true;
-    instance.setItemInteraction(data, {
-      interaction: 'pointer'
+    instance.setLastUpdateSource('pointer');
+    instance.setTooltipItem(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
     });
-    instance.setHighlight(data);
   });
   const onPointerLeave = (0, _useEventCallback.default)(() => {
     interactionActive.current = false;
-    instance.removeItemInteraction(data);
+    instance.removeTooltipItem(data);
     instance.clearHighlight();
   });
   React.useEffect(() => {
@@ -53,16 +58,20 @@ function getInteractionItemProps(instance, item) {
     if (!item) {
       return;
     }
-    instance.setItemInteraction(item, {
-      interaction: 'pointer'
+    instance.setLastUpdateSource('pointer');
+    instance.setTooltipItem(item);
+    instance.setHighlight(
+    // @ts-ignore
+    item.type === 'sankey' ? item : {
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
     });
-    instance.setHighlight(item);
   }
   function onPointerLeave() {
     if (!item) {
       return;
     }
-    instance.removeItemInteraction(item);
+    instance.removeTooltipItem(item);
     instance.clearHighlight();
   }
   return {

package/hooks/useIsItemFocused.d.ts

@@ -1,4 +1,4 @@
-import { FocusedItemData } from "./useFocusedItem.js";
+import { type FocusedItemData } from "./useFocusedItem.js";
 type UseItemFocusedParams = FocusedItemData;
 /**
  * A hook to check if an item has the focus.

package/hooks/useIsItemFocused.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useIsItemFocused = useIsItemFocused;
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 /**
  * A hook to check if an item has the focus.
@@ -18,5 +17,5 @@ var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/u
  */
 function useIsItemFocused(item) {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsItemIsFocused, item);
+  return store.use(_useChartKeyboardNavigation.selectorChartsItemIsFocused, item);
 }

package/hooks/useIsItemFocusedGetter.d.ts

@@ -1,4 +1,4 @@
-import { FocusedItemData } from "./useFocusedItem.js";
+import { type FocusedItemData } from "./useFocusedItem.js";
 /**
  * A hook to check focus state of multiple items.
  * If you're interested by a single one, consider using `useIsItemFocused`.

package/hooks/useItemHighlighted.d.ts

@@ -1,4 +1,4 @@
-import { HighlightItemData } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.js";
+import { type HighlightItemData } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.js";
 type UseItemHighlightedReturnType = {
   /**
    * Whether the item is highlighted.

package/hooks/useItemHighlighted.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useItemHighlighted = useItemHighlighted;
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 /**
  * A hook to check the highlighted state of the item.
@@ -19,8 +18,8 @@ var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHi
  */
 function useItemHighlighted(item) {
   const store = (0, _useStore.useStore)();
-  const isHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsHighlighted, item);
-  const isFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsFaded, item);
+  const isHighlighted = store.use(_useChartHighlight.selectorChartsIsHighlighted, item);
+  const isFaded = store.use(_useChartHighlight.selectorChartsIsFaded, item);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/hooks/useItemHighlightedGetter.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useItemHighlightedGetter = useItemHighlightedGetter;
-var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors");
 /**
@@ -18,8 +17,8 @@ var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHi
  */
 function useItemHighlightedGetter() {
   const store = (0, _useStore.useStore)();
-  const isHighlighted = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsHighlightedCallback);
-  const isFaded = (0, _useSelector.useSelector)(store, _useChartHighlight.selectorChartsIsFadedCallback);
+  const isHighlighted = store.use(_useChartHighlight.selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(_useChartHighlight.selectorChartsIsFadedCallback);
   return {
     isHighlighted,
     isFaded