@mui/x-charts 8.22.1 → 8.23.0

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/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/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/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/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/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";

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,12 +1,10 @@
 "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 _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 /**
@@ -14,12 +12,5 @@ var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/u
  */
 function useFocusedItem() {
   const store = (0, _useStore.useStore)();
-  const focusedSeriesType = store.use(_useChartKeyboardNavigation.selectorChartsFocusedSeriesType);
-  const focusedSeriesId = store.use(_useChartKeyboardNavigation.selectorChartsFocusedSeriesId);
-  const focusedDataIndex = store.use(_useChartKeyboardNavigation.selectorChartsFocusedDataIndex);
-  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
-    seriesType: focusedSeriesType,
-    seriesId: focusedSeriesId,
-    dataIndex: focusedDataIndex
-  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+  return store.use(_useChartKeyboardNavigation.selectorChartsFocusedItem);
 }

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

@@ -12,7 +12,7 @@ var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/u
  *
  * 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) {

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

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.22.1
+ * @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

@@ -47,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

@@ -554,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/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.d.ts

@@ -0,0 +1,13 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+import type { ChartState } from "../../models/chart.js";
+export type FocusedItemUpdater<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (currentItem: (TSeriesType extends any ? FocusedItemIdentifier<TSeriesType> : never) | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => FocusedItemIdentifier<OutputSeriesType> | null;
+/**
+ * Get the next focusable item in the chart.
+ * @param {SeriesItemIdentifier<TSeriesType> | null} currentItem The current focused item.
+ * @param {KeyboardEvent} event The keyboard event that triggered the navigation.
+ * @param {ChartState<[UseChartKeyboardNavigationSignature], []>} state The current chart state.
+ * @returns {SeriesItemIdentifier<ChartSeriesType> | null} The next focusable item or null if none found.
+ */
+export type KeyboardFocusHandler<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (event: KeyboardEvent) => FocusedItemUpdater<TSeriesType, OutputSeriesType> | null;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,3 +1,3 @@
-import { type ChartPlugin } from "../../models/index.js";
-import { type UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+import type { ChartPlugin } from "../../models/index.js";
+import type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
 export declare const useChartKeyboardNavigation: ChartPlugin<UseChartKeyboardNavigationSignature>;