@mui/x-charts 8.22.1 → 8.24.0

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

@@ -11,92 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.helpers");
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
-function getNextIndexFocusedItem(state) {
-  const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  if (type === undefined ||
-  // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(processedSeries, type, seriesId)) {
-    const nextSeries = (0, _useChartKeyboardNavigation.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 = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  if (type === undefined ||
-  // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(processedSeries, type, seriesId)) {
-    const previousSeries = (0, _useChartKeyboardNavigation.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 = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  const nextSeries = (0, _useChartKeyboardNavigation.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 = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  const previousSeries = (0, _useChartKeyboardNavigation.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)
-  };
-}
 const useChartKeyboardNavigation = ({
   params,
   store,
@@ -116,26 +31,18 @@ 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((0, _useChartSeries.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((0, _extends2.default)({}, store.state.highlight && {

package/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -3,29 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItemIsDefined = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedItem = void 0;
 var _store = require("@mui/x-internals/store");
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _useChartCartesianAxisRendering = require("../useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
 const selectKeyboardNavigation = state => state.keyboardNavigation;
-const selectorChartsItemIsFocused = exports.selectorChartsItemIsFocused = (0, _store.createSelector)(selectKeyboardNavigation, (keyboardNavigationState, item) => {
-  return keyboardNavigationState?.item != null && keyboardNavigationState.item.type === item.seriesType && keyboardNavigationState.item.seriesId === item.seriesId && keyboardNavigationState.item.dataIndex === item.dataIndex;
-});
+const selectorChartsItemIsFocused = exports.selectorChartsItemIsFocused = (0, _store.createSelector)(selectKeyboardNavigation, (keyboardNavigationState, item) => keyboardNavigationState?.item != null && (0, _fastObjectShallowCompare.fastObjectShallowCompare)(keyboardNavigationState.item, item));
 const selectorChartsHasFocusedItem = exports.selectorChartsHasFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item != null);
-const selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesType = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.type);
-const selectorChartsFocusedSeriesId = exports.selectorChartsFocusedSeriesId = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
-const selectorChartsFocusedDataIndex = exports.selectorChartsFocusedDataIndex = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
+const selectorChartsFocusedItem = exports.selectorChartsFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _store.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;
   }
@@ -35,11 +32,11 @@ const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis,
   }
   return {
     axisId,
-    dataIndex
+    dataIndex: item.dataIndex
   };
 };
-const selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardXAxisIndex = (0, _store.createSelector)(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
-const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _store.createSelector)(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
+const selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardXAxisIndex = (0, _store.createSelector)(selectorChartsFocusedItem, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('x'));
+const selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardYAxisIndex = (0, _store.createSelector)(selectorChartsFocusedItem, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartSeries.selectorChartSeriesProcessed, createSelectAxisHighlight('y'));
 const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _store.createSelector)(selectKeyboardNavigation, function selectorChartsKeyboardItem(keyboardState) {
   if (keyboardState?.item == null) {
     return null;
@@ -52,7 +49,4 @@ const selectorChartsKeyboardItem = exports.selectorChartsKeyboardItem = (0, _sto
     return null;
   }
   return keyboardState.item;
-});
-const selectorChartsKeyboardItemIsDefined = exports.selectorChartsKeyboardItemIsDefined = (0, _store.createSelector)(selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, function selectorChartsKeyboardItemIsDefined(seriesType, seriesId, dataIndex) {
-  return seriesId !== undefined && dataIndex !== undefined;
 });

package/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.d.ts

@@ -0,0 +1,3 @@
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useChartSeries.types.js";
+export declare function getMaxSeriesLength<OutSeriesType extends Exclude<ChartSeriesType, 'sankey'>>(series: ProcessedSeries<ChartSeriesType>, availableSeriesTypes: Set<OutSeriesType>): number;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMaxSeriesLength = getMaxSeriesLength;
+function getMaxSeriesLength(series, availableSeriesTypes) {
+  return Object.keys(series).filter(type => availableSeriesTypes.has(type)).flatMap(type => {
+    const seriesOfType = series[type];
+    return seriesOfType.seriesOrder.filter(seriesId => seriesOfType.series[seriesId].data.length > 0 && seriesOfType.series[seriesId].data.some(value => value != null)).map(seriesId => seriesOfType.series[seriesId].data.length);
+  }).reduce((maxLengths, length) => Math.max(maxLengths, length), 0);
+}

package/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNextNonEmptySeries = getNextNonEmptySeries;
+var _getNonEmptySeriesArray = require("./getNonEmptySeriesArray");
+/**
+ * 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.
+ */
+function getNextNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
+  const nonEmptySeries = (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(series, availableSeriesTypes);
+  if (nonEmptySeries.length === 0) {
+    return null;
+  }
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined ? nonEmptySeries.findIndex(seriesItem => seriesItem.type === type && seriesItem.seriesId === seriesId) : -1;
+  return nonEmptySeries[(currentSeriesIndex + 1) % nonEmptySeries.length];
+}

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

@@ -0,0 +1,7 @@
+import type { SeriesId } from "../../../../../models/seriesType/common.js";
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useChartSeries.types.js";
+export declare function getNonEmptySeriesArray<OutSeriesType extends Exclude<ChartSeriesType, 'sankey'>>(series: ProcessedSeries<ChartSeriesType>, availableSeriesTypes: Set<OutSeriesType>): {
+  seriesId: SeriesId;
+  type: OutSeriesType;
+}[];

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNonEmptySeriesArray.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNonEmptySeriesArray = getNonEmptySeriesArray;
+function getNonEmptySeriesArray(series, availableSeriesTypes) {
+  return Object.keys(series).filter(type => availableSeriesTypes.has(type)).flatMap(type => {
+    const seriesOfType = series[type];
+    return seriesOfType.seriesOrder.filter(seriesId => seriesOfType.series[seriesId].data.length > 0 && seriesOfType.series[seriesId].data.some(value => value != null)).map(seriesId => ({
+      type,
+      seriesId
+    }));
+  });
+}

package/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPreviousNonEmptySeries = getPreviousNonEmptySeries;
+var _getNonEmptySeriesArray = require("./getNonEmptySeriesArray");
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+function getPreviousNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
+  const nonEmptySeries = (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(series, availableSeriesTypes);
+  if (nonEmptySeries.length === 0) {
+    return null;
+  }
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined ? nonEmptySeries.findIndex(seriesItem => seriesItem.type === type && seriesItem.seriesId === seriesId) : -1;
+  if (currentSeriesIndex <= 0) {
+    // If no current series, or if it's the first series
+    return nonEmptySeries[nonEmptySeries.length - 1];
+  }
+  return nonEmptySeries[(currentSeriesIndex - 1 + nonEmptySeries.length) % nonEmptySeries.length];
+}

package/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.d.ts

@@ -1,20 +1,12 @@
 export declare const selectorChartsTooltipPointerItem: (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("./useChartTooltip.types.js").UseChartTooltipState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
+}) => import("../../../../index.js").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | import("../../../../index.js").RadarItemIdentifier | null;
 export declare const selectorChartsTooltipPointerItemIsDefined: (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("./useChartTooltip.types.js").UseChartTooltipState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => 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").LineItemIdentifier | import("../../../../index.js").BarItemIdentifier | import("../../../../index.js").ScatterItemIdentifier | import("../../../../index.js").PieItemIdentifier | 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/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.js

@@ -16,7 +16,7 @@ const selectTooltip = state => state.tooltip;
 const selectorChartsTooltipPointerItem = exports.selectorChartsTooltipPointerItem = (0, _store.createSelector)(selectTooltip, tooltip => tooltip?.item ?? null);
 const selectorChartsTooltipPointerItemIsDefined = exports.selectorChartsTooltipPointerItemIsDefined = (0, _store.createSelector)(selectorChartsTooltipPointerItem, item => item !== null);
 const selectorChartsTooltipItem = exports.selectorChartsTooltipItem = (0, _store.createSelector)(_useChartInteraction.selectorChartsLastInteraction, selectorChartsTooltipPointerItem, _useChartKeyboardNavigation.selectorChartsKeyboardItem, (lastInteraction, pointerItem, keyboardItem) => lastInteraction === 'keyboard' ? keyboardItem : pointerItem ?? null);
-const selectorChartsTooltipItemIsDefined = exports.selectorChartsTooltipItemIsDefined = (0, _store.createSelector)(_useChartInteraction.selectorChartsLastInteraction, selectorChartsTooltipPointerItemIsDefined, _useChartKeyboardNavigation.selectorChartsKeyboardItemIsDefined, (lastInteraction, pointerItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : pointerItemIsDefined);
+const selectorChartsTooltipItemIsDefined = exports.selectorChartsTooltipItemIsDefined = (0, _store.createSelector)(_useChartInteraction.selectorChartsLastInteraction, selectorChartsTooltipPointerItemIsDefined, _useChartKeyboardNavigation.selectorChartsHasFocusedItem, (lastInteraction, pointerItemIsDefined, keyboardItemIsDefined) => lastInteraction === 'keyboard' ? keyboardItemIsDefined : pointerItemIsDefined);
 const selectorChartsTooltipAxisConfig = (0, _store.createSelectorMemoized)(selectorChartsTooltipItem, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, _useChartPolarAxis.selectorChartRotationAxis, _useChartPolarAxis.selectorChartRadiusAxis, _useChartSeries.selectorChartSeriesProcessed, function selectorChartsTooltipAxisConfig(identifier, {
   axis: xAxis,
   axisIds: xAxisIds

package/internals/plugins/featurePlugins/useChartVisibilityManager/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartVisibilityManager } from "./useChartVisibilityManager.js";
+export * from "./useChartVisibilityManager.types.js";
+export * from "./useChartVisibilityManager.selectors.js";

package/internals/plugins/featurePlugins/useChartVisibilityManager/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartVisibilityManager: true
+};
+Object.defineProperty(exports, "useChartVisibilityManager", {
+  enumerable: true,
+  get: function () {
+    return _useChartVisibilityManager.useChartVisibilityManager;
+  }
+});
+var _useChartVisibilityManager = require("./useChartVisibilityManager");
+var _useChartVisibilityManager2 = require("./useChartVisibilityManager.types");
+Object.keys(_useChartVisibilityManager2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartVisibilityManager2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartVisibilityManager2[key];
+    }
+  });
+});
+var _useChartVisibilityManager3 = require("./useChartVisibilityManager.selectors");
+Object.keys(_useChartVisibilityManager3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartVisibilityManager3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartVisibilityManager3[key];
+    }
+  });
+});

package/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.d.ts

@@ -0,0 +1,4 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+import type { VisibilityIdentifier, VisibilityMap } from "./useChartVisibilityManager.types.js";
+export declare const isIdentifierVisible: (visibilityMap: VisibilityMap, identifier: VisibilityIdentifier, seriesConfig: ChartSeriesConfig<ChartSeriesType>) => boolean;

package/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIdentifierVisible = void 0;
+var _serializeIdentifier = require("../../corePlugins/useChartSeries/serializeIdentifier");
+const isIdentifierVisible = (visibilityMap, identifier, seriesConfig) => {
+  const uniqueId = (0, _serializeIdentifier.serializeIdentifier)(seriesConfig, identifier);
+  return !visibilityMap.has(uniqueId);
+};
+exports.isIdentifierVisible = isIdentifierVisible;

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

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

package/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.js

@@ -0,0 +1,85 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartVisibilityManager = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEffectAfterFirstRender = require("@mui/x-internals/useEffectAfterFirstRender");
+var _useChartVisibilityManager = require("./useChartVisibilityManager.selectors");
+var _visibilityParamToMap = require("./visibilityParamToMap");
+const useChartVisibilityManager = ({
+  store,
+  params,
+  seriesConfig,
+  instance
+}) => {
+  // Manage controlled state
+  (0, _useEffectAfterFirstRender.useEffectAfterFirstRender)(() => {
+    if (params.hiddenItems === undefined) {
+      return;
+    }
+    if (process.env.NODE_ENV !== 'production' && !store.state.visibilityManager.isControlled) {
+      console.error([`MUI X Charts: A chart component is changing the \`hiddenItems\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+    }
+    store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
+      visibilityMap: (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems, seriesConfig)
+    }));
+  }, [store, params.hiddenItems, seriesConfig]);
+  const hideItem = (0, _useEventCallback.default)(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.set(id, identifier);
+    store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const showItem = (0, _useEventCallback.default)(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (!visibilityMap.has(id)) {
+      return;
+    }
+    const newVisibilityMap = new Map(visibilityMap);
+    newVisibilityMap.delete(id);
+    store.set('visibilityManager', (0, _extends2.default)({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const toggleItem = (0, _useEventCallback.default)(identifier => {
+    const visibilityMap = store.state.visibilityManager.visibilityMap;
+    const id = instance.serializeIdentifier(identifier);
+    if (visibilityMap.has(id)) {
+      showItem(identifier);
+    } else {
+      hideItem(identifier);
+    }
+  });
+  return {
+    instance: {
+      hideItem,
+      showItem,
+      toggleItemVisibility: toggleItem
+    }
+  };
+};
+exports.useChartVisibilityManager = useChartVisibilityManager;
+useChartVisibilityManager.getInitialState = (params, _, seriesConfig) => ({
+  visibilityManager: {
+    visibilityMap: params.hiddenItems ? (0, _visibilityParamToMap.visibilityParamToMap)(params.hiddenItems, seriesConfig) : _useChartVisibilityManager.EMPTY_VISIBILITY_MAP,
+    isControlled: params.hiddenItems !== undefined
+  }
+});
+useChartVisibilityManager.params = {
+  onHiddenItemsChange: true,
+  hiddenItems: true
+};