@mui/x-charts 8.22.0 → 8.22.1

package/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/hooks/useInteractionItemProps.js

@@ -25,7 +25,13 @@ 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 = (0, _useEventCallback.default)(() => {
     interactionActive.current = false;
@@ -54,7 +60,12 @@ 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/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/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

package/hooks/useLegend.js

@@ -8,7 +8,6 @@ exports.useLegend = useLegend;
 var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
 var _useSeries = require("./useSeries");
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 function getSeriesToDisplay(series, seriesConfig) {
   return Object.keys(series).flatMap(seriesType => {
     const getter = seriesConfig[seriesType].legendGetter;
@@ -28,7 +27,7 @@ function getSeriesToDisplay(series, seriesConfig) {
 function useLegend() {
   const series = (0, _useSeries.useSeries)();
   const store = (0, _useStore.useStore)();
-  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
+  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
   return {
     items: getSeriesToDisplay(series, seriesConfig)
   };

package/hooks/usePieSeries.js

@@ -10,7 +10,6 @@ exports.usePieSeriesLayout = usePieSeriesLayout;
 var _seriesSelectorOfType = require("../internals/seriesSelectorOfType");
 var _useStore = require("../internals/store/useStore");
 var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
-var _useSelector = require("../internals/store/useSelector");
 /**
  * Get access to the internal state of pie series.
  *
@@ -54,6 +53,6 @@ function usePieSeriesContext() {
  */
 function usePieSeriesLayout() {
   const store = (0, _useStore.useStore)();
-  const seriesLayout = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesLayout);
+  const seriesLayout = store.use(_useChartSeries.selectorChartSeriesLayout);
   return seriesLayout.pie ?? {};
 }

package/hooks/useSeries.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSeries = useSeries;
 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 internal state of series.
@@ -16,5 +15,5 @@ var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/u
  */
 function useSeries() {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
+  return store.use(_useChartSeries.selectorChartSeriesProcessed);
 }

package/hooks/useSkipAnimation.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSkipAnimation = useSkipAnimation;
 var _useChartAnimation = require("../internals/plugins/corePlugins/useChartAnimation");
 var _useStore = require("../internals/store/useStore");
-var _useSelector = require("../internals/store/useSelector");
 /**
  * A hook to get if chart animations should be skipped.
  *
@@ -15,6 +14,6 @@ var _useSelector = require("../internals/store/useSelector");
  */
 function useSkipAnimation(skipAnimation) {
   const store = (0, _useStore.useStore)();
-  const storeSkipAnimation = (0, _useSelector.useSelector)(store, _useChartAnimation.selectorChartSkipAnimation);
+  const storeSkipAnimation = store.use(_useChartAnimation.selectorChartSkipAnimation);
   return skipAnimation || storeSkipAnimation;
 }

package/hooks/useZAxis.js

@@ -8,13 +8,12 @@ exports.useZAxes = useZAxes;
 exports.useZAxis = useZAxis;
 var _useStore = require("../internals/store/useStore");
 var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
-var _useSelector = require("../internals/store/useSelector");
 function useZAxes() {
   const store = (0, _useStore.useStore)();
   const {
     axis: zAxis,
     axisIds: zAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartZAxis.selectorChartZAxis) ?? {
+  } = store.use(_useChartZAxis.selectorChartZAxis) ?? {
     axis: {},
     axisIds: []
   };

package/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/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/internals/index.js

@@ -434,18 +434,6 @@ Object.keys(_useStore).forEach(function (key) {
     }
   });
 });
-var _useSelector = require("./store/useSelector");
-Object.keys(_useSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useSelector[key];
-    }
-  });
-});
 var _BarChart = require("../BarChart/BarChart.plugins");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
-var _useSelector = require("../../../store/useSelector");
 var _constants = require("../../../../constants");
 var _useChartDimensions = require("./useChartDimensions.selectors");
 var _defaultizeMargin = require("../../../defaultizeMargin");
@@ -143,7 +142,7 @@ const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const drawingArea = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
+  const drawingArea = store.use(_useChartDimensions.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/internals/plugins/corePlugins/useChartSeries/useColorProcessor.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useColorProcessor = useColorProcessor;
 var React = _interopRequireWildcard(require("react"));
-var _useSelector = require("../../../store/useSelector");
 var _useStore = require("../../../store/useStore");
 var _useChartSeries = require("./useChartSeries.selectors");
 function useColorProcessor(seriesType) {
   const store = (0, _useStore.useStore)();
-  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
+  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
   const colorProcessors = React.useMemo(() => {
     const rep = {};
     Object.keys(seriesConfig).forEach(seriesT => {

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

@@ -12,7 +12,6 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _getSVGPoint = require("../../../getSVGPoint");
-var _useSelector = require("../../../store/useSelector");
 var _useChartBrush = require("./useChartBrush.selectors");
 const useChartBrush = ({
   store,
@@ -20,7 +19,7 @@ const useChartBrush = ({
   instance,
   params
 }) => {
-  const isEnabled = (0, _useSelector.useSelector)(store, _useChartBrush.selectorIsBrushEnabled);
+  const isEnabled = store.use(_useChartBrush.selectorIsBrushEnabled);
   (0, _useEnhancedEffect.default)(() => {
     store.set('brush', (0, _extends2.default)({}, store.state.brush, {
       enabled: params.brushConfig.enabled,

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

@@ -14,7 +14,6 @@ var _store = require("@mui/x-internals/store");
 var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
 var _warning = require("@mui/x-internals/warning");
 var _colorPalettes = require("../../../../colorPalettes");
-var _useSelector = require("../../../store/useSelector");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
@@ -44,17 +43,17 @@ const useChartCartesianAxis = ({
       (0, _warning.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 = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
-  const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
-  const isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
+  const processedSeries = store.use(_useChartSeries.selectorChartSeriesProcessed);
+  const isInteractionEnabled = store.use(_useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
     axis: xAxisWithScale,
     axisIds: xAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartXAxis);
+  } = store.use(_useChartCartesianAxisRendering.selectorChartXAxis);
   const {
     axis: yAxisWithScale,
     axisIds: yAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartYAxis);
+  } = store.use(_useChartCartesianAxisRendering.selectorChartYAxis);
   (0, _useAssertModelConsistency.useAssertModelConsistency)({
     warningPrefix: 'MUI X Charts',
     componentName: 'Chart',

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useInternalIsZoomInteracting = useInternalIsZoomInteracting;
-var _useSelector = require("../../../store/useSelector");
 var _useStore = require("../../../store/useStore");
 var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.selectors");
 /**
@@ -19,6 +18,6 @@ var _useChartCartesianAxisRendering = require("./useChartCartesianAxisRendering.
  */
 function useInternalIsZoomInteracting() {
   const store = (0, _useStore.useStore)();
-  const isInteracting = (0, _useSelector.useSelector)(store, _useChartCartesianAxisRendering.selectorChartZoomIsInteracting);
+  const isInteracting = store.use(_useChartCartesianAxisRendering.selectorChartZoomIsInteracting);
   return isInteracting;
 }

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

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _getSVGPoint = require("../../../getSVGPoint");
-var _useSelector = require("../../../store/useSelector");
 var _useChartCartesianAxis = require("../useChartCartesianAxis");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _findClosestPoints = require("./findClosestPoints");
@@ -30,17 +29,17 @@ const useChartClosestPoint = ({
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  } = store.use(_useChartCartesianAxis.selectorChartXAxis);
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
-  const zoomIsInteracting = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartZoomIsInteracting);
+  } = store.use(_useChartCartesianAxis.selectorChartYAxis);
+  const zoomIsInteracting = store.use(_useChartCartesianAxis.selectorChartZoomIsInteracting);
   const {
     series,
     seriesOrder
-  } = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed)?.scatter ?? {};
-  const flatbushMap = (0, _useSelector.useSelector)(store, zoomIsInteracting ? _useChartCartesianAxis.selectorChartSeriesEmptyFlatbushMap : _useChartCartesianAxis.selectorChartSeriesFlatbushMap);
+  } = store.use(_useChartSeries.selectorChartSeriesProcessed)?.scatter ?? {};
+  const flatbushMap = store.use(zoomIsInteracting ? _useChartCartesianAxis.selectorChartSeriesEmptyFlatbushMap : _useChartCartesianAxis.selectorChartSeriesFlatbushMap);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {

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

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

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

@@ -10,7 +10,6 @@ exports.useChartPolarAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
-var _useSelector = require("../../../store/useSelector");
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
 var _useChartInteraction = require("../useChartInteraction");
@@ -39,18 +38,18 @@ const useChartPolarAxis = ({
       (0, _warning.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 = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartDrawingArea);
-  const processedSeries = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesProcessed);
-  const center = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartPolarCenter);
-  const isInteractionEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
+  const processedSeries = store.use(_useChartSeries.selectorChartSeriesProcessed);
+  const center = store.use(_useChartPolarAxis.selectorChartPolarCenter);
+  const isInteractionEnabled = store.use(_useChartInteraction.selectorChartsInteractionIsInitialized);
   const {
     axis: rotationAxisWithScale,
     axisIds: rotationAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRotationAxis);
+  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
   const {
     axis: radiusAxisWithScale,
     axisIds: radiusAxisIds
-  } = (0, _useSelector.useSelector)(store, _useChartPolarAxis.selectorChartRadiusAxis);
+  } = store.use(_useChartPolarAxis.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/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/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/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/internals/seriesSelectorOfType.js

@@ -8,7 +8,6 @@ var _warning = require("@mui/x-internals/warning");
 var _store = require("@mui/x-internals/store");
 var _useChartSeries = require("./plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 var _useStore = require("./store/useStore");
-var _useSelector = require("./store/useSelector");
 const selectorAllSeriesOfType = exports.selectorAllSeriesOfType = (0, _store.createSelector)(_useChartSeries.selectorChartSeriesProcessed, (processedSeries, seriesType) => processedSeries[seriesType]);
 const selectorSeriesOfType = exports.selectorSeriesOfType = (0, _store.createSelectorMemoized)(_useChartSeries.selectorChartSeriesProcessed, (processedSeries, seriesType, ids) => {
   if (ids === undefined || Array.isArray(ids) && ids.length === 0) {
@@ -36,11 +35,11 @@ const selectorSeriesOfType = exports.selectorSeriesOfType = (0, _store.createSel
 });
 const useAllSeriesOfType = seriesType => {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, selectorAllSeriesOfType, seriesType);
+  return store.use(selectorAllSeriesOfType, seriesType);
 };
 exports.useAllSeriesOfType = useAllSeriesOfType;
 const useSeriesOfType = (seriesType, seriesId) => {
   const store = (0, _useStore.useStore)();
-  return (0, _useSelector.useSelector)(store, selectorSeriesOfType, seriesType, seriesId);
+  return store.use(selectorSeriesOfType, seriesType, seriesId);
 };
 exports.useSeriesOfType = useSeriesOfType;

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.22.0",
+  "version": "8.22.1",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",

package/esm/internals/store/useSelector.d.ts

@@ -1,2 +0,0 @@
-import { useStore as useInternalStore } from '@mui/x-internals/store';
-export declare const useSelector: typeof useInternalStore;

package/esm/internals/store/useSelector.js

@@ -1,2 +0,0 @@
-import { useStore as useInternalStore } from '@mui/x-internals/store';
-export const useSelector = useInternalStore;

package/internals/store/useSelector.d.ts

@@ -1,2 +0,0 @@
-import { useStore as useInternalStore } from '@mui/x-internals/store';
-export declare const useSelector: typeof useInternalStore;

package/internals/store/useSelector.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSelector = void 0;
-var _store = require("@mui/x-internals/store");
-const useSelector = exports.useSelector = _store.useStore;