@mui/x-charts 8.22.0 → 8.22.1

package/esm/hooks/useIsItemFocused.js

@@ -1,7 +1,6 @@
 '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.
@@ -13,5 +12,5 @@ import { selectorChartsItemIsFocused } from "../internals/plugins/featurePlugins
  */
 export function useIsItemFocused(item) {
   const store = useStore();
-  return useSelector(store, selectorChartsItemIsFocused, item);
+  return store.use(selectorChartsItemIsFocused, item);
 }

package/esm/hooks/useItemHighlighted.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 /**
  * A hook to check the highlighted state of the item.
@@ -14,8 +13,8 @@ import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals
  */
 export function useItemHighlighted(item) {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
-  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  const isHighlighted = store.use(selectorChartsIsHighlighted, item);
+  const isFaded = store.use(selectorChartsIsFaded, item);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/esm/hooks/useItemHighlightedGetter.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js";
 /**
@@ -13,8 +12,8 @@ import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } fr
  */
 export function useItemHighlightedGetter() {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlightedCallback);
-  const isFaded = useSelector(store, selectorChartsIsFadedCallback);
+  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(selectorChartsIsFadedCallback);
   return {
     isHighlighted,
     isFaded

package/esm/hooks/useLegend.js

@@ -3,7 +3,6 @@
 import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
 import { useSeries } from "./useSeries.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 function getSeriesToDisplay(series, seriesConfig) {
   return Object.keys(series).flatMap(seriesType => {
     const getter = seriesConfig[seriesType].legendGetter;
@@ -23,7 +22,7 @@ function getSeriesToDisplay(series, seriesConfig) {
 export function useLegend() {
   const series = useSeries();
   const store = useStore();
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   return {
     items: getSeriesToDisplay(series, seriesConfig)
   };

package/esm/hooks/usePieSeries.js

@@ -3,7 +3,6 @@
 import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartSeriesLayout } from "../internals/plugins/corePlugins/useChartSeries/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 
 /**
  * Get access to the internal state of pie series.
@@ -48,6 +47,6 @@ export function usePieSeriesContext() {
  */
 export function usePieSeriesLayout() {
   const store = useStore();
-  const seriesLayout = useSelector(store, selectorChartSeriesLayout);
+  const seriesLayout = store.use(selectorChartSeriesLayout);
   return seriesLayout.pie ?? {};
 }

package/esm/hooks/useSeries.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the internal state of series.
@@ -11,5 +10,5 @@ import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/u
  */
 export function useSeries() {
   const store = useStore();
-  return useSelector(store, selectorChartSeriesProcessed);
+  return store.use(selectorChartSeriesProcessed);
 }

package/esm/hooks/useSkipAnimation.js

@@ -2,7 +2,6 @@
 
 import { selectorChartSkipAnimation } from "../internals/plugins/corePlugins/useChartAnimation/index.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 
 /**
  * A hook to get if chart animations should be skipped.
@@ -11,6 +10,6 @@ import { useSelector } from "../internals/store/useSelector.js";
  */
 export function useSkipAnimation(skipAnimation) {
   const store = useStore();
-  const storeSkipAnimation = useSelector(store, selectorChartSkipAnimation);
+  const storeSkipAnimation = store.use(selectorChartSkipAnimation);
   return skipAnimation || storeSkipAnimation;
 }

package/esm/hooks/useZAxis.js

@@ -2,13 +2,12 @@
 
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 export function useZAxes() {
   const store = useStore();
   const {
     axis: zAxis,
     axisIds: zAxisIds
-  } = useSelector(store, selectorChartZAxis) ?? {
+  } = store.use(selectorChartZAxis) ?? {
     axis: {},
     axisIds: []
   };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.22.0
+ * @mui/x-charts v8.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/index.d.ts

@@ -37,7 +37,6 @@ export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugi
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
-export * from "./store/useSelector.js";
 export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";

package/esm/internals/index.js

@@ -42,7 +42,6 @@ export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugi
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
-export * from "./store/useSelector.js";
 
 // plugins configs
 

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
@@ -136,7 +135,7 @@ export const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const drawingArea = store.use(selectorChartDrawingArea);
   const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
   const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
   const isPointInside = React.useCallback((x, y, targetElement) => {

package/esm/internals/plugins/corePlugins/useChartSeries/useColorProcessor.js

@@ -1,12 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector } from "../../../store/useSelector.js";
 import { useStore } from "../../../store/useStore.js";
 import { selectorChartSeriesConfig } from "./useChartSeries.selectors.js";
 export function useColorProcessor(seriesType) {
   const store = useStore();
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   const colorProcessors = React.useMemo(() => {
     const rep = {};
     Object.keys(seriesConfig).forEach(seriesT => {

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

@@ -5,7 +5,6 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getSVGPoint } from "../../../getSVGPoint.js";
-import { useSelector } from "../../../store/useSelector.js";
 import { selectorIsBrushEnabled } from "./useChartBrush.selectors.js";
 export const useChartBrush = ({
   store,
@@ -13,7 +12,7 @@ export const useChartBrush = ({
   instance,
   params
 }) => {
-  const isEnabled = useSelector(store, selectorIsBrushEnabled);
+  const isEnabled = store.use(selectorIsBrushEnabled);
   useEnhancedEffect(() => {
     store.set('brush', _extends({}, store.state.brush, {
       enabled: params.brushConfig.enabled,

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

@@ -7,7 +7,6 @@ import { useStoreEffect } from '@mui/x-internals/store';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import { warnOnce } from '@mui/x-internals/warning';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
-import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
@@ -37,17 +36,17 @@ export const useChartCartesianAxis = ({
       warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
-  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const processedSeries = store.use(selectorChartSeriesProcessed);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
   const {
     axis: xAxisWithScale,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   const {
     axis: yAxisWithScale,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
+  } = store.use(selectorChartYAxis);
   useAssertModelConsistency({
     warningPrefix: 'MUI X Charts',
     componentName: 'Chart',

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { useSelector } from "../../../store/useSelector.js";
 import { useStore } from "../../../store/useStore.js";
 import { selectorChartZoomIsInteracting } from "./useChartCartesianAxisRendering.selectors.js";
 /**
@@ -14,6 +13,6 @@ import { selectorChartZoomIsInteracting } from "./useChartCartesianAxisRendering
  */
 export function useInternalIsZoomInteracting() {
   const store = useStore();
-  const isInteracting = useSelector(store, selectorChartZoomIsInteracting);
+  const isInteracting = store.use(selectorChartZoomIsInteracting);
   return isInteracting;
 }

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { getSVGPoint } from "../../../getSVGPoint.js";
-import { useSelector } from "../../../store/useSelector.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";
@@ -23,17 +22,17 @@ export const useChartClosestPoint = ({
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
-  const zoomIsInteracting = useSelector(store, selectorChartZoomIsInteracting);
+  } = store.use(selectorChartYAxis);
+  const zoomIsInteracting = store.use(selectorChartZoomIsInteracting);
   const {
     series,
     seriesOrder
-  } = useSelector(store, selectorChartSeriesProcessed)?.scatter ?? {};
-  const flatbushMap = useSelector(store, zoomIsInteracting ? selectorChartSeriesEmptyFlatbushMap : selectorChartSeriesFlatbushMap);
+  } = store.use(selectorChartSeriesProcessed)?.scatter ?? {};
+  const flatbushMap = store.use(zoomIsInteracting ? selectorChartSeriesEmptyFlatbushMap : selectorChartSeriesFlatbushMap);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {

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

@@ -41,10 +41,13 @@ export const useChartHighlight = ({
   });
   const setHighlight = useEventCallback(newItem => {
     const prevHighlight = store.state.highlight;
-    if (prevHighlight.isControlled || fastObjectShallowCompare(prevHighlight.item, newItem)) {
+    if (fastObjectShallowCompare(prevHighlight.item, newItem)) {
       return;
     }
     params.onHighlightChange?.(newItem);
+    if (prevHighlight.isControlled) {
+      return;
+    }
     store.set('highlight', {
       item: newItem,
       lastUpdate: 'pointer',

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

@@ -3,7 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
-import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { defaultizeAxis } from "./defaultizeAxis.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
@@ -32,18 +31,18 @@ export const useChartPolarAxis = ({
       warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
-  const center = useSelector(store, selectorChartPolarCenter);
-  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const processedSeries = store.use(selectorChartSeriesProcessed);
+  const center = store.use(selectorChartPolarCenter);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
   const {
     axis: rotationAxisWithScale,
     axisIds: rotationAxisIds
-  } = useSelector(store, selectorChartRotationAxis);
+  } = store.use(selectorChartRotationAxis);
   const {
     axis: radiusAxisWithScale,
     axisIds: radiusAxisIds
-  } = useSelector(store, selectorChartRadiusAxis);
+  } = store.use(selectorChartRadiusAxis);
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useChartPolarAxis`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one

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

@@ -1,26 +1,27 @@
 import type { ChartPluginSignature } from "../../models/index.js";
-import type { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 export interface UseChartTooltipInstance {
   /**
    * Setter for the item the user is pointing at.
-   * @param {ChartItemIdentifier} newItem The identifier of the item.
+   * @param {SeriesItemIdentifier} newItem The identifier of the item.
    */
-  setTooltipItem: (newItem: ChartItemIdentifier<ChartSeriesType>) => void;
+  setTooltipItem: (newItem: SeriesItemIdentifier<ChartSeriesType>) => void;
   /**
    * Remove the item the user was pointing at.
    * - If `itemToRemove` is provided, it removes the item only if it matches the current one.
    *   Otherwise it assumes the item got already updated and does nothing.
    * - If `itemToRemove` is not provided, it removes the current item unconditionally.
-   * @param {ChartItemIdentifier} itemToRemove The identifier of the item.
+   * @param {SeriesItemIdentifier} itemToRemove The identifier of the item.
    */
-  removeTooltipItem: (itemToRemove?: ChartItemIdentifier<ChartSeriesType>) => void;
+  removeTooltipItem: (itemToRemove?: SeriesItemIdentifier<ChartSeriesType>) => void;
 }
 export interface UseChartTooltipState {
   tooltip: {
     /**
      * The item currently under the pointer.
      */
-    item: null | ChartItemIdentifier<ChartSeriesType>;
+    item: null | SeriesItemIdentifier<ChartSeriesType>;
   };
 }
 export type UseChartTooltipSignature = ChartPluginSignature<{

package/esm/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -1,4 +1,5 @@
-import type { ChartItemIdentifier, ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
 import { type SeriesId } from "../../../../models/seriesType/common.js";
 import { type AxisId, type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type PolarAxisDefaultized, type ComputedXAxis, type ComputedYAxis } from "../../../../models/axis.js";
 import { type ChartsLabelMarkProps } from "../../../../ChartsLabel/ChartsLabelMark.js";
@@ -7,7 +8,7 @@ export interface ItemTooltip<T extends ChartSeriesType> {
   /**
    * An object that identifies the item to display.
    */
-  identifier: ChartItemIdentifier<T>;
+  identifier: SeriesItemIdentifier<T>;
   /**
    * The color associated with the item.
    */
@@ -59,7 +60,7 @@ export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   series: ChartSeriesDefaultized<TSeriesType>;
   axesConfig: TooltipGetterAxesConfig;
   getColor: ColorGetter<TSeriesType>;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: SeriesItemIdentifier<TSeriesType> | null;
 }) => (TSeriesType extends 'radar' ? ItemTooltipWithMultipleValues<TSeriesType> : ItemTooltip<TSeriesType>) | null;
 /**
  * If `axisId` is set to undefined, the default axis will be used.

package/esm/internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.d.ts

@@ -1,4 +1,5 @@
-import type { ChartItemIdentifier, ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import { type ChartsRotationAxisProps, type ChartsRadiusAxisProps, type ComputedXAxis, type ComputedYAxis } from "../../../../models/axis.js";
 import { type ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
 import { type ProcessedSeries, type SeriesLayout } from "../../corePlugins/useChartSeries/index.js";
@@ -13,7 +14,7 @@ export type TooltipItemPositionGetter<TSeriesType extends ChartSeriesType> = (pa
   series: ProcessedSeries<TSeriesType>;
   axesConfig: TooltipPositionGetterAxesConfig;
   drawingArea: ChartDrawingArea;
-  identifier: ChartItemIdentifier<TSeriesType> | null;
+  identifier: SeriesItemIdentifier<TSeriesType> | null;
   seriesLayout: SeriesLayout<TSeriesType>;
   /**
    * The preferred placement of the tooltip related to the element.

package/esm/internals/seriesSelectorOfType.js

@@ -2,7 +2,6 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { useStore } from "./store/useStore.js";
-import { useSelector } from "./store/useSelector.js";
 export const selectorAllSeriesOfType = createSelector(selectorChartSeriesProcessed, (processedSeries, seriesType) => processedSeries[seriesType]);
 export const selectorSeriesOfType = createSelectorMemoized(selectorChartSeriesProcessed, (processedSeries, seriesType, ids) => {
   if (ids === undefined || Array.isArray(ids) && ids.length === 0) {
@@ -30,9 +29,9 @@ export const selectorSeriesOfType = createSelectorMemoized(selectorChartSeriesPr
 });
 export const useAllSeriesOfType = seriesType => {
   const store = useStore();
-  return useSelector(store, selectorAllSeriesOfType, seriesType);
+  return store.use(selectorAllSeriesOfType, seriesType);
 };
 export const useSeriesOfType = (seriesType, seriesId) => {
   const store = useStore();
-  return useSelector(store, selectorSeriesOfType, seriesType, seriesId);
+  return store.use(selectorSeriesOfType, seriesType, seriesId);
 };

package/esm/models/seriesType/config.d.ts

@@ -90,8 +90,6 @@ export type ChartSeriesDefaultized<T extends ChartSeriesType> = ChartsSeriesConf
   stackedData: [number, number][];
 } : ChartsSeriesConfig[T]['series'];
 export type ChartSeriesLayout<T extends ChartSeriesType> = ChartsSeriesConfig[T] extends any ? ChartsSeriesConfig[T]['seriesLayout'] : never;
-export type ChartItemIdentifier<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
-export type ChartItemIdentifierWithData<T extends ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
 export type DatasetElementType<T> = {
   [key: string]: T;
 };

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/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/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/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.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,