@mui/x-charts 8.22.0 → 8.23.0

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -1,25 +1,22 @@
 import { createSelector } from '@mui/x-internals/store';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
 const selectKeyboardNavigation = state => state.keyboardNavigation;
-export const selectorChartsItemIsFocused = createSelector(selectKeyboardNavigation, (keyboardNavigationState, item) => {
-  return keyboardNavigationState?.item != null && keyboardNavigationState.item.type === item.seriesType && keyboardNavigationState.item.seriesId === item.seriesId && keyboardNavigationState.item.dataIndex === item.dataIndex;
-});
+export const selectorChartsItemIsFocused = createSelector(selectKeyboardNavigation, (keyboardNavigationState, item) => keyboardNavigationState?.item != null && fastObjectShallowCompare(keyboardNavigationState.item, item));
 export const selectorChartsHasFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item != null);
-export const selectorChartsFocusedSeriesType = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.type);
-export const selectorChartsFocusedSeriesId = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
-export const selectorChartsFocusedDataIndex = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
+export const selectorChartsFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 export const selectorChartsIsKeyboardNavigationEnabled = createSelector(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
 
 /**
  * Selectors to override highlight behavior.
  */
 
-const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis, series) => {
-  if (type === undefined || seriesId === undefined || dataIndex === undefined) {
+const createSelectAxisHighlight = direction => (item, axis, series) => {
+  if (item == null || !('dataIndex' in item) || item.dataIndex === undefined) {
     return undefined;
   }
-  const seriesConfig = series[type]?.series[seriesId];
+  const seriesConfig = series[item.type]?.series[item.seriesId];
   if (!seriesConfig) {
     return undefined;
   }
@@ -29,11 +26,11 @@ const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis,
   }
   return {
     axisId,
-    dataIndex
+    dataIndex: item.dataIndex
   };
 };
-export const selectorChartsKeyboardXAxisIndex = createSelector(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartXAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
-export const selectorChartsKeyboardYAxisIndex = createSelector(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
+export const selectorChartsKeyboardXAxisIndex = createSelector(selectorChartsFocusedItem, selectorChartXAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
+export const selectorChartsKeyboardYAxisIndex = createSelector(selectorChartsFocusedItem, selectorChartYAxis, selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
 export const selectorChartsKeyboardItem = createSelector(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
   if (keyboardState?.item == null) {
     return null;
@@ -46,7 +43,4 @@ export const selectorChartsKeyboardItem = createSelector(selectKeyboardNavigatio
     return null;
   }
   return keyboardState.item;
-});
-export const selectorChartsKeyboardItemIsDefined = createSelector(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, function selectorChartsKeyboardItemIsDefined(seriesType, seriesId, dataIndex) {
-  return seriesId !== undefined && dataIndex !== undefined;
 });

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

@@ -1,27 +1,12 @@
-import { type ChartPluginSignature } from "../../models/index.js";
-import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
-import { type SeriesId } from "../../../../models/seriesType/common.js";
-import { type UseChartInteractionSignature } from "../useChartInteraction/index.js";
-import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
+import type { ChartPluginSignature } from "../../models/index.js";
+import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
+import type { UseChartHighlightSignature } from "../useChartHighlight/index.js";
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 export interface UseChartKeyboardNavigationInstance {}
-type SeriesItemIdentifier<SeriesType extends ChartSeriesType = FocusableSeriesTypes> = SeriesType extends FocusableSeriesTypes ? {
-  /**
-   * The type of the series
-   */
-  type: SeriesType;
-  /**
-   * The id of the series with focus.
-   */
-  seriesId: SeriesId;
-  /**
-   * The index of the data point with focus.
-   */
-  dataIndex: number;
-} : never;
-export type FocusableSeriesTypes = 'bar' | 'line' | 'scatter' | 'pie';
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
-    item: null | SeriesItemIdentifier;
+    item: null | FocusedItemIdentifier<ChartSeriesType>;
     enableKeyboardNavigation: boolean;
   };
 }

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.d.ts

@@ -0,0 +1,15 @@
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { SeriesId } from "../../../../../models/seriesType/common.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/index.js";
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ * @param series - The processed series from the store.
+ * @param availableSeriesTypes - The set of series types that can be focused.
+ * @param type - The current series type.
+ * @param seriesId - The current series id.
+ */
+export declare function getNextNonEmptySeries<OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = Exclude<ChartSeriesType, 'sankey'>>(series: ProcessedSeries<ChartSeriesType>, availableSeriesTypes: Set<OutSeriesType>, type?: ChartSeriesType, seriesId?: SeriesId): {
+  type: OutSeriesType;
+  seriesId: SeriesId;
+} | null;

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js

@@ -0,0 +1,45 @@
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ * @param series - The processed series from the store.
+ * @param availableSeriesTypes - The set of series types that can be focused.
+ * @param type - The current series type.
+ * @param seriesId - The current series id.
+ */
+export function getNextNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
+  const seriesType = Object.keys(series);
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : -1;
+  const typesAvailable = seriesType.filter(t => availableSeriesTypes?.has(t));
+  const startingTypeIndex = type !== undefined && series[type] ? typesAvailable.indexOf(type) : 0;
+
+  // Loop over all series types starting with the current seriesType
+  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
+    const typeIndex = (startingTypeIndex + typeGap) % typesAvailable.length;
+    const seriesOfType = series[typesAvailable[typeIndex]];
+
+    // Edge case for the current series type: we don't loop on previous series of the same type.
+    const startingSeriesIndex = typeGap === 0 ? currentSeriesIndex + 1 : 0;
+    for (let seriesIndex = startingSeriesIndex; seriesIndex < seriesOfType.seriesOrder.length; seriesIndex += 1) {
+      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+        return {
+          type: typesAvailable[typeIndex],
+          seriesId: seriesOfType.seriesOrder[seriesIndex]
+        };
+      }
+    }
+  }
+
+  // End looping on the initial type up to the initial series (excluded)
+  const typeIndex = startingTypeIndex;
+  const seriesOfType = series[typesAvailable[typeIndex]];
+  const endingSeriesIndex = currentSeriesIndex;
+  for (let seriesIndex = 0; seriesIndex < endingSeriesIndex; seriesIndex += 1) {
+    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+      return {
+        type: typesAvailable[typeIndex],
+        seriesId: seriesOfType.seriesOrder[seriesIndex]
+      };
+    }
+  }
+  return null;
+}

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.d.ts

@@ -0,0 +1,11 @@
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { SeriesId } from "../../../../../models/seriesType/common.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/index.js";
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export declare function getPreviousNonEmptySeries<OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = Exclude<ChartSeriesType, 'sankey'>>(series: ProcessedSeries<ChartSeriesType>, availableSeriesTypes: Set<OutSeriesType>, type?: ChartSeriesType, seriesId?: SeriesId): {
+  type: OutSeriesType;
+  seriesId: SeriesId;
+} | null;

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js

@@ -0,0 +1,40 @@
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export function getPreviousNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
+  const seriesType = Object.keys(series);
+  const startingSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : 1;
+  const typesAvailable = seriesType.filter(t => availableSeriesTypes?.has(t));
+  const startingTypeIndex = type !== undefined && series[type] ? typesAvailable.indexOf(type) : 0;
+
+  // Loop over all series types starting with the current seriesType
+  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
+    const typeIndex = (typesAvailable.length + startingTypeIndex - typeGap) % typesAvailable.length;
+    const seriesOfType = series[typesAvailable[typeIndex]];
+    const maxGap = typeGap === 0 ? startingSeriesIndex + 1 : seriesOfType.seriesOrder.length;
+    for (let seriesGap = 1; seriesGap < maxGap; seriesGap += 1) {
+      const seriesIndex = (seriesOfType.seriesOrder.length + startingSeriesIndex - seriesGap) % seriesOfType.seriesOrder.length;
+      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+        return {
+          type: typesAvailable[typeIndex],
+          seriesId: seriesOfType.seriesOrder[seriesIndex]
+        };
+      }
+    }
+  }
+
+  // End looping on the initial type down to the initial series (excluded)
+  const typeIndex = startingTypeIndex;
+  const seriesOfType = series[typesAvailable[typeIndex]];
+  const availableSeriesIds = seriesOfType.seriesOrder;
+  for (let seriesIndex = availableSeriesIds.length - 1; seriesIndex > startingSeriesIndex; seriesIndex -= 1) {
+    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+      return {
+        type: typesAvailable[typeIndex],
+        seriesId: seriesOfType.seriesOrder[seriesIndex]
+      };
+    }
+  }
+  return null;
+}

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

@@ -6,15 +6,7 @@ export declare const selectorChartsTooltipPointerItemIsDefined: (args_0: import(
 }) => boolean;
 export declare const selectorChartsTooltipItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../../index.js").PieItemIdentifier | {
-  type: "bar";
-  seriesId: import("../../../index.js").SeriesId;
-  dataIndex: number;
-} | {
-  type: "scatter";
-  seriesId: import("../../../index.js").SeriesId;
-  dataIndex: number;
-} | import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
+}) => import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
 export declare const selectorChartsTooltipItemIsDefined: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;

package/esm/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.js

@@ -1,7 +1,7 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartSeriesLayout } from "../../corePlugins/useChartSeries/index.js";
 import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
-import { selectorChartsKeyboardItem, selectorChartsKeyboardItemIsDefined } from "../useChartKeyboardNavigation/index.js";
+import { selectorChartsKeyboardItem, selectorChartsHasFocusedItem } from "../useChartKeyboardNavigation/index.js";
 import { selectorChartsLastInteraction } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { isCartesianSeries } from "../../../isCartesian.js";
@@ -10,7 +10,7 @@ const selectTooltip = state => state.tooltip;
 export const selectorChartsTooltipPointerItem = createSelector(selectTooltip, tooltip => tooltip?.item ?? null);
 export const selectorChartsTooltipPointerItemIsDefined = createSelector(selectorChartsTooltipPointerItem, item => item !== null);
 export const selectorChartsTooltipItem = createSelector(selectorChartsLastInteraction, selectorChartsTooltipPointerItem, selectorChartsKeyboardItem, (lastInteraction, pointerItem, keyboardItem) => lastInteraction === 'keyboard' ? keyboardItem : pointerItem ?? null);
-export const selectorChartsTooltipItemIsDefined = createSelector(selectorChartsLastInteraction, selectorChartsTooltipPointerItemIsDefined, selectorChartsKeyboardItemIsDefined, (lastInteraction, pointerItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : pointerItemIsDefined);
+export const selectorChartsTooltipItemIsDefined = createSelector(selectorChartsLastInteraction, selectorChartsTooltipPointerItemIsDefined, selectorChartsHasFocusedItem, (lastInteraction, pointerItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : pointerItemIsDefined);
 const selectorChartsTooltipAxisConfig = createSelectorMemoized(selectorChartsTooltipItem, selectorChartXAxis, selectorChartYAxis, selectorChartRotationAxis, selectorChartRadiusAxis, selectorChartSeriesProcessed, function selectorChartsTooltipAxisConfig(identifier, {
   axis: xAxis,
   axisIds: xAxisIds

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/seriesConfig.types.d.ts

@@ -8,6 +8,7 @@ import { type PolarExtremumGetter } from "./polarExtremumGetter.types.js";
 import { type GetSeriesWithDefaultValues } from "./getSeriesWithDefaultValues.types.js";
 import { type TooltipItemPositionGetter } from "./tooltipItemPositionGetter.types.js";
 import { type SeriesLayoutGetter } from "./seriesLayout.types.js";
+import { type KeyboardFocusHandler } from "../../featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   seriesProcessor: SeriesProcessor<TSeriesType>;
   /**
@@ -19,6 +20,7 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   tooltipGetter: TooltipGetter<TSeriesType>;
   tooltipItemPositionGetter?: TooltipItemPositionGetter<TSeriesType>;
   getSeriesWithDefaultValues: GetSeriesWithDefaultValues<TSeriesType>;
+  keyboardFocusHandler?: KeyboardFocusHandler<TSeriesType>;
 } & (TSeriesType extends CartesianChartSeriesType ? {
   xExtremumGetter: CartesianExtremumGetter<TSeriesType>;
   yExtremumGetter: CartesianExtremumGetter<TSeriesType>;

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

@@ -1,6 +1,6 @@
 import type { ChartSeriesDefaultized, ChartSeriesType, ChartsSeriesConfig, DatasetType } from "../../../../models/seriesType/config.js";
 import type { SeriesId } from "../../../../models/seriesType/common.js";
-import type { StackingGroupsType } from "../../../stackSeries.js";
+import type { StackingGroupsType } from "../../../stacking/index.js";
 export type SeriesProcessorParams<TSeriesType extends ChartSeriesType> = {
   series: Record<SeriesId, ChartsSeriesConfig[TSeriesType]['seriesInput']>;
   seriesOrder: SeriesId[];

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

@@ -0,0 +1,4 @@
+import type { SeriesId } from "../models/seriesType/common.js";
+import type { ChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import type { ProcessedSeries } from "./plugins/corePlugins/useChartSeries/index.js";
+export declare function seriesHasData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type: ChartSeriesType, seriesId: SeriesId): boolean;

package/esm/internals/seriesHasData.js

@@ -0,0 +1,8 @@
+export function seriesHasData(series, type, seriesId) {
+  // @ts-ignore sankey is not in MIT version
+  if (type === 'sankey') {
+    return false;
+  }
+  const data = series[type]?.series[seriesId]?.data;
+  return data != null && data.length > 0;
+}

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/internals/stacking/index.d.ts

@@ -0,0 +1 @@
+export * from "./stackSeries.js";

package/esm/internals/stacking/index.js

@@ -0,0 +1 @@
+export * from "./stackSeries.js";

package/esm/internals/stacking/offset/index.d.ts

@@ -0,0 +1 @@
+export * from "./offsetDiverging.js";

package/esm/internals/stacking/offset/index.js

@@ -0,0 +1 @@
+export * from "./offsetDiverging.js";

package/esm/internals/stacking/offset/offsetDiverging.d.ts

@@ -0,0 +1,8 @@
+import type { Series } from '@mui/x-charts-vendor/d3-shape';
+/**
+ * Positive values are stacked above zero, while negative values are stacked below zero.
+ *
+ * @param series A series generated by a stack generator.
+ * @param order An array of numeric indexes representing the stack order.
+ */
+export declare function offsetDiverging(series: Series<any, any>[], order: Iterable<number>): void;

package/esm/internals/stacking/offset/offsetDiverging.js

@@ -0,0 +1,47 @@
+// Adapted from D3.js's offsetDiverging function https://github.com/d3/d3-shape/blob/main/src/offset/diverging.js
+// Hidden series (with all zero values) affect the stacking in a different way in our implementation compared to the D3 behavior.
+// The D3 stacking keep those values at the 0 "line", which creates issues when animating between hidden and visible states.
+// In our modification, we stack them on top/below already stacked items according to the sign of their original value.
+// A hidden negative value will be placed below all the already stacked negative values
+
+/**
+ * Positive values are stacked above zero, while negative values are stacked below zero.
+ *
+ * @param series A series generated by a stack generator.
+ * @param order An array of numeric indexes representing the stack order.
+ */
+export function offsetDiverging(series, order) {
+  if (series.length === 0) {
+    return;
+  }
+  const seriesCount = series.length;
+  const numericOrder = order;
+  const pointCount = series[numericOrder[0]].length;
+  for (let pointIndex = 0; pointIndex < pointCount; pointIndex += 1) {
+    let positiveSum = 0;
+    let negativeSum = 0;
+    for (let seriesIndex = 0; seriesIndex < seriesCount; seriesIndex += 1) {
+      const currentSeries = series[numericOrder[seriesIndex]];
+      const dataPoint = currentSeries[pointIndex];
+      const difference = dataPoint[1] - dataPoint[0];
+      if (difference > 0) {
+        dataPoint[0] = positiveSum;
+        positiveSum += difference;
+        dataPoint[1] = positiveSum;
+      } else if (difference < 0) {
+        dataPoint[1] = negativeSum;
+        negativeSum += difference;
+        dataPoint[0] = negativeSum;
+      } else if (dataPoint.data[currentSeries.key] > 0) {
+        dataPoint[0] = positiveSum;
+        dataPoint[1] = positiveSum;
+      } else if (dataPoint.data[currentSeries.key] < 0) {
+        dataPoint[1] = negativeSum;
+        dataPoint[0] = negativeSum;
+      } else {
+        dataPoint[0] = 0;
+        dataPoint[1] = 0;
+      }
+    }
+  }
+}

package/esm/internals/{stackSeries.d.ts → stacking/stackSeries.d.ts}

@@ -1,6 +1,6 @@
-import { stackOrderAppearance as d3StackOrderAppearance, stackOrderAscending as d3StackOrderAscending, stackOrderDescending as d3StackOrderDescending, stackOrderInsideOut as d3StackOrderInsideOut, stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOffsetExpand as d3StackOffsetExpand, stackOffsetDiverging as d3StackOffsetDiverging, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle, type Series } from '@mui/x-charts-vendor/d3-shape';
-import type { StackOffsetType, StackOrderType } from "../models/stacking.js";
-import { type SeriesId, type StackableSeriesType } from "../models/seriesType/common.js";
+import { stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOrderAppearance as d3OrderAppearance, stackOrderAscending as d3OrderAscending, stackOrderDescending as d3OrderDescending, stackOrderInsideOut as d3OrderInsideOut, stackOffsetExpand as d3StackOffsetExpand, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle, type Series } from '@mui/x-charts-vendor/d3-shape';
+import type { StackOffsetType, StackOrderType } from "../../models/stacking.js";
+import { type SeriesId, type StackableSeriesType } from "../../models/seriesType/common.js";
 type FormatterParams<T> = {
   series: Record<SeriesId, T>;
   seriesOrder: SeriesId[];
@@ -18,19 +18,19 @@ export declare const StackOrder: {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.
    * */
-  appearance: typeof d3StackOrderAppearance;
+  appearance: typeof d3OrderAppearance;
   /**
    *  Series order such that the smallest series (according to the sum of values) is at the bottom.
    * */
-  ascending: typeof d3StackOrderAscending;
+  ascending: typeof d3OrderAscending;
   /**
    * Series order such that the largest series (according to the sum of values) is at the bottom.
    */
-  descending: typeof d3StackOrderDescending;
+  descending: typeof d3OrderDescending;
   /**
    * Series order such that the earliest series (according to the maximum value) are on the inside and the later series are on the outside. This order is recommended for streamgraphs in conjunction with the wiggle offset. See Stacked Graphs—Geometry & Aesthetics by Byron & Wattenberg for more information.
    */
-  insideOut: typeof d3StackOrderInsideOut;
+  insideOut: typeof d3OrderInsideOut;
   /**
    * Given series order [0, 1, … n - 1] where n is the number of elements in series. Thus, the stack order is given by the key accessor.
    */
@@ -48,7 +48,7 @@ export declare const StackOffset: {
   /**
    * Positive values are stacked above zero, negative values are stacked below zero, and zero values are stacked at zero.
    * */
-  diverging: typeof d3StackOffsetDiverging;
+  diverging: (series: Series<any, any>, order: Iterable<number>) => void;
   /**
    * Applies a zero baseline.
    * */

package/esm/internals/{stackSeries.js → stacking/stackSeries.js}

@@ -1,21 +1,22 @@
-import { stackOrderAppearance as d3StackOrderAppearance, stackOrderAscending as d3StackOrderAscending, stackOrderDescending as d3StackOrderDescending, stackOrderInsideOut as d3StackOrderInsideOut, stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOffsetExpand as d3StackOffsetExpand, stackOffsetDiverging as d3StackOffsetDiverging, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle } from '@mui/x-charts-vendor/d3-shape';
+import { stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOrderAppearance as d3OrderAppearance, stackOrderAscending as d3OrderAscending, stackOrderDescending as d3OrderDescending, stackOrderInsideOut as d3OrderInsideOut, stackOffsetExpand as d3StackOffsetExpand, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle } from '@mui/x-charts-vendor/d3-shape';
+import { offsetDiverging } from "./offset/index.js";
 export const StackOrder = {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.
    * */
-  appearance: d3StackOrderAppearance,
+  appearance: d3OrderAppearance,
   /**
    *  Series order such that the smallest series (according to the sum of values) is at the bottom.
    * */
-  ascending: d3StackOrderAscending,
+  ascending: d3OrderAscending,
   /**
    * Series order such that the largest series (according to the sum of values) is at the bottom.
    */
-  descending: d3StackOrderDescending,
+  descending: d3OrderDescending,
   /**
    * Series order such that the earliest series (according to the maximum value) are on the inside and the later series are on the outside. This order is recommended for streamgraphs in conjunction with the wiggle offset. See Stacked Graphs—Geometry & Aesthetics by Byron & Wattenberg for more information.
    */
-  insideOut: d3StackOrderInsideOut,
+  insideOut: d3OrderInsideOut,
   /**
    * Given series order [0, 1, … n - 1] where n is the number of elements in series. Thus, the stack order is given by the key accessor.
    */
@@ -33,7 +34,8 @@ export const StackOffset = {
   /**
    * Positive values are stacked above zero, negative values are stacked below zero, and zero values are stacked at zero.
    * */
-  diverging: d3StackOffsetDiverging,
+  // @ts-expect-error, d3 types are wrong, our custom function implements the correct signature
+  diverging: offsetDiverging,
   /**
    * Applies a zero baseline.
    * */

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/esm/models/seriesType/index.d.ts

@@ -1,4 +1,5 @@
-import { type BarSeriesType, type DefaultizedBarSeriesType } from "./bar.js";
+import type { DefaultizedProps } from '@mui/x-internals/types';
+import type { BarSeriesType, DefaultizedBarSeriesType } from "./bar.js";
 import { type CartesianChartSeriesType, type ChartSeriesType, type ChartsSeriesConfig, type StackableChartSeriesType } from "./config.js";
 type AllSeriesType<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['seriesProp'];
 /**
@@ -19,6 +20,7 @@ type DefaultizedCartesianSeriesType = DefaultizedSeriesType<CartesianChartSeries
 type StackableSeriesType = DefaultizedSeriesType<StackableChartSeriesType>;
 export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifier'];
 export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> = ChartsSeriesConfig[T]['itemIdentifierWithData'];
+export type FocusedItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = T extends 'line' ? DefaultizedProps<ChartsSeriesConfig[T]['itemIdentifier'], 'dataIndex'> : ChartsSeriesConfig[T]['itemIdentifier'];
 export { type SeriesId } from "./common.js";
 export * from "./line.js";
 export * from "./bar.js";