@mui/x-charts 8.22.1 → 8.23.0

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

@@ -1,19 +1,12 @@
 'use client';
 
-import * as React from 'react';
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { selectorChartsFocusedItem } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+
 /**
  * Get the focused item from keyboard navigation.
  */
 export function useFocusedItem() {
   const store = useStore();
-  const focusedSeriesType = store.use(selectorChartsFocusedSeriesType);
-  const focusedSeriesId = store.use(selectorChartsFocusedSeriesId);
-  const focusedDataIndex = store.use(selectorChartsFocusedDataIndex);
-  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
-    seriesType: focusedSeriesType,
-    seriesId: focusedSeriesId,
-    dataIndex: focusedDataIndex
-  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+  return store.use(selectorChartsFocusedItem);
 }

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

@@ -7,7 +7,7 @@ import { selectorChartsItemIsFocused } from "../internals/plugins/featurePlugins
  *
  * 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 function useIsItemFocused(item) {

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { useFocusedItem } from "./useFocusedItem.js";
 
 /**
@@ -10,5 +11,5 @@ import { useFocusedItem } from "./useFocusedItem.js";
  */
 export function useIsItemFocusedGetter() {
   const focusedItem = useFocusedItem();
-  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+  return item => focusedItem !== null && fastObjectShallowCompare(focusedItem, item);
 }

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

@@ -0,0 +1,84 @@
+import { getPreviousNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js";
+import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/index.js";
+import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js";
+import { seriesHasData } from "./seriesHasData.js";
+export function createGetNextIndexFocusedItem(compatibleSeriesTypes) {
+  return function getNextIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId)) {
+      const nextSeries = 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
+    };
+  };
+}
+export function createGetPreviousIndexFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId)) {
+      const previousSeries = 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
+    };
+  };
+}
+export function createGetNextSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getNextSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const nextSeries = 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)
+    };
+  };
+}
+export function createGetPreviousSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const previousSeries = 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/esm/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/esm/internals/index.js

@@ -57,7 +57,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/esm/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/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js

@@ -0,0 +1 @@
+export {};

package/esm/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>;

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

@@ -4,92 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getNextSeriesWithData, getPreviousSeriesWithData, seriesHasData } from "./useChartKeyboardNavigation.helpers.js";
-import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
-function getNextIndexFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  if (type === undefined ||
-  // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
-    const nextSeries = getNextSeriesWithData(processedSeries, 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: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
-  };
-}
-function getPreviousIndexFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  if (type === undefined ||
-  // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
-    const previousSeries = getPreviousSeriesWithData(processedSeries, 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 + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
-  };
-}
-function getNextSeriesFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  const nextSeries = getNextSeriesWithData(processedSeries, 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, state.keyboardNavigation.item?.dataIndex ?? 0)
-  };
-}
-function getPreviousSeriesFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  const previousSeries = getPreviousSeriesWithData(processedSeries, 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, state.keyboardNavigation.item?.dataIndex ?? 0)
-  };
-}
+import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 export const useChartKeyboardNavigation = ({
   params,
   store,
@@ -109,26 +24,18 @@ export const useChartKeyboardNavigation = ({
     }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
-      switch (event.key) {
-        case 'ArrowRight':
-          newFocusedItem = getNextIndexFocusedItem(store.state);
-          break;
-        case 'ArrowLeft':
-          newFocusedItem = getPreviousIndexFocusedItem(store.state);
-          break;
-        case 'ArrowDown':
-          {
-            newFocusedItem = getPreviousSeriesFocusedItem(store.state);
-            break;
-          }
-        case 'ArrowUp':
-          {
-            newFocusedItem = getNextSeriesFocusedItem(store.state);
-            break;
-          }
-        default:
-          break;
+      let seriesType = newFocusedItem?.type;
+      if (!seriesType) {
+        seriesType = Object.keys(selectorChartDefaultizedSeries(store.state)).find(key => store.state.series.seriesConfig[key] !== undefined);
+        if (seriesType === undefined) {
+          return;
+        }
+      }
+      const calculateFocusedItem = store.state.series.seriesConfig[seriesType]?.keyboardFocusHandler?.(event);
+      if (!calculateFocusedItem) {
+        return;
       }
+      newFocusedItem = calculateFocusedItem(newFocusedItem, store.state);
       if (newFocusedItem !== store.state.keyboardNavigation.item) {
         event.preventDefault();
         store.update(_extends({}, store.state.highlight && {

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

@@ -1,21 +1,14 @@
-import { type SeriesId } from "../../../../models/seriesType/common.js";
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
 import { type AxisItemIdentifier } from "../../../../models/axis.js";
-import { type FocusedItemData } from "../../../../hooks/useFocusedItem.js";
 export declare const selectorChartsItemIsFocused: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, item: FocusedItemData) => boolean;
+}, item: FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig>) => boolean;
 export declare const selectorChartsHasFocusedItem: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartsFocusedSeriesType: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+export declare const selectorChartsFocusedItem: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => "line" | "bar" | "scatter" | "pie" | undefined;
-export declare const selectorChartsFocusedSeriesId: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => SeriesId | undefined;
-export declare const selectorChartsFocusedDataIndex: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => number | undefined;
+}) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;
 export declare const selectorChartsIsKeyboardNavigationEnabled: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;
@@ -27,23 +20,4 @@ export declare const selectorChartsKeyboardYAxisIndex: (args_0: import("../../co
 }) => AxisItemIdentifier | undefined;
 export declare const selectorChartsKeyboardItem: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => {
-  type: "line";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | {
-  type: "bar";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | {
-  type: "scatter";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | {
-  type: "pie";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | null;
-export declare const selectorChartsKeyboardItemIsDefined: (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("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean;
+}) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;

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;