@mui/x-charts 8.22.0 → 8.23.0

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.d.ts

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

package/hooks/useFocusedItem.js

@@ -1,26 +1,16 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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);
-  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
-    seriesType: focusedSeriesType,
-    seriesId: focusedSeriesId,
-    dataIndex: focusedDataIndex
-  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+  return store.use(_useChartKeyboardNavigation.selectorChartsFocusedItem);
 }

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.d.ts

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

package/hooks/useIsItemFocused.js

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

package/hooks/useIsItemFocusedGetter.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useIsItemFocusedGetter = useIsItemFocusedGetter;
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useFocusedItem = require("./useFocusedItem");
 /**
  * A hook to check focus state of multiple items.
@@ -14,5 +15,5 @@ var _useFocusedItem = require("./useFocusedItem");
  */
 function useIsItemFocusedGetter() {
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
-  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+  return item => focusedItem !== null && (0, _fastObjectShallowCompare.fastObjectShallowCompare)(focusedItem, 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.23.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/commonNextFocusItem.d.ts

@@ -0,0 +1,14 @@
+import type { UseChartKeyboardNavigationSignature } from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import type { ChartState } from "./plugins/models/chart.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+import type { FocusedItemIdentifier, SeriesId, SeriesItemIdentifier } from "../models/seriesType/index.js";
+type ReturnedItem<OutSeriesType extends ChartSeriesType> = {
+  type: OutSeriesType;
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null;
+export declare function createGetNextIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export {};

package/internals/commonNextFocusItem.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetNextIndexFocusedItem = createGetNextIndexFocusedItem;
+exports.createGetNextSeriesFocusedItem = createGetNextSeriesFocusedItem;
+exports.createGetPreviousIndexFocusedItem = createGetPreviousIndexFocusedItem;
+exports.createGetPreviousSeriesFocusedItem = createGetPreviousSeriesFocusedItem;
+var _getPreviousNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries");
+var _useChartSeries = require("./plugins/corePlugins/useChartSeries");
+var _getNextNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries");
+var _seriesHasData = require("./seriesHasData");
+function createGetNextIndexFocusedItem(compatibleSeriesTypes) {
+  return function getNextIndexFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId)) {
+      const nextSeries = (0, _getNextNonEmptySeries.getNextNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (nextSeries === null) {
+        return null;
+      }
+      type = nextSeries.type;
+      seriesId = nextSeries.seriesId;
+    }
+    const dataLength = processedSeries[type].series[seriesId].data.length;
+    return {
+      type,
+      seriesId,
+      dataIndex: ((currentItem?.dataIndex ?? -1) + 1) % dataLength
+    };
+  };
+}
+function createGetPreviousIndexFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousIndexFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !(0, _seriesHasData.seriesHasData)(processedSeries, type, seriesId)) {
+      const previousSeries = (0, _getPreviousNonEmptySeries.getPreviousNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
+      if (previousSeries === null) {
+        return null;
+      }
+      type = previousSeries.type;
+      seriesId = previousSeries.seriesId;
+    }
+    const dataLength = processedSeries[type].series[seriesId].data.length;
+    return {
+      type,
+      seriesId,
+      dataIndex: (dataLength + (currentItem?.dataIndex ?? 1) - 1) % dataLength
+    };
+  };
+}
+function createGetNextSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getNextSeriesFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const nextSeries = (0, _getNextNonEmptySeries.getNextNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
+    if (nextSeries === null) {
+      return null; // No series to move the focus to.
+    }
+    type = nextSeries.type;
+    seriesId = nextSeries.seriesId;
+    const dataLength = processedSeries[type].series[seriesId].data.length;
+    return {
+      type,
+      seriesId,
+      dataIndex: Math.min(dataLength - 1, currentItem?.dataIndex ?? 0)
+    };
+  };
+}
+function createGetPreviousSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousSeriesFocusedItem(currentItem, state) {
+    const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const previousSeries = (0, _getPreviousNonEmptySeries.getPreviousNonEmptySeries)(processedSeries, compatibleSeriesTypes, type, seriesId);
+    if (previousSeries === null) {
+      return null; // No series to move the focus to.
+    }
+    type = previousSeries.type;
+    seriesId = previousSeries.seriesId;
+    const dataLength = processedSeries[type].series[seriesId].data.length;
+    return {
+      type,
+      seriesId,
+      dataIndex: Math.min(dataLength - 1, currentItem?.dataIndex ?? 0)
+    };
+  };
+}

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";
@@ -48,7 +47,7 @@ export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
-export * from "./stackSeries.js";
+export * from "./stacking/index.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.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;
@@ -566,15 +554,15 @@ Object.keys(_getScale).forEach(function (key) {
     }
   });
 });
-var _stackSeries = require("./stackSeries");
-Object.keys(_stackSeries).forEach(function (key) {
+var _stacking = require("./stacking");
+Object.keys(_stacking).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _stackSeries[key]) return;
+  if (key in exports && exports[key] === _stacking[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _stackSeries[key];
+      return _stacking[key];
     }
   });
 });

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