@mui/x-charts 8.22.1 → 8.24.0

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

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

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

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

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

@@ -0,0 +1,6 @@
+export 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/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,18 @@
+import { getNonEmptySeriesArray } from "./getNonEmptySeriesArray.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 function getNextNonEmptySeries(series, availableSeriesTypes, type, seriesId) {
+  const nonEmptySeries = 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/esm/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/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getNonEmptySeriesArray.js

@@ -0,0 +1,9 @@
+export 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/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.d.ts

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

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

@@ -0,0 +1,18 @@
+import { getNonEmptySeriesArray } from "./getNonEmptySeriesArray.js";
+
+/**
+ * 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 nonEmptySeries = 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/esm/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/esm/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.js

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

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

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

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

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

package/esm/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/esm/internals/plugins/featurePlugins/useChartVisibilityManager/isIdentifierVisible.js

@@ -0,0 +1,5 @@
+import { serializeIdentifier } from "../../corePlugins/useChartSeries/serializeIdentifier.js";
+export const isIdentifierVisible = (visibilityMap, identifier, seriesConfig) => {
+  const uniqueId = serializeIdentifier(seriesConfig, identifier);
+  return !visibilityMap.has(uniqueId);
+};

package/esm/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/esm/internals/plugins/featurePlugins/useChartVisibilityManager/useChartVisibilityManager.js

@@ -0,0 +1,78 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
+import { EMPTY_VISIBILITY_MAP } from "./useChartVisibilityManager.selectors.js";
+import { visibilityParamToMap } from "./visibilityParamToMap.js";
+export const useChartVisibilityManager = ({
+  store,
+  params,
+  seriesConfig,
+  instance
+}) => {
+  // Manage controlled state
+  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', _extends({}, store.state.visibilityManager, {
+      visibilityMap: visibilityParamToMap(params.hiddenItems, seriesConfig)
+    }));
+  }, [store, params.hiddenItems, seriesConfig]);
+  const hideItem = useEventCallback(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', _extends({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const showItem = useEventCallback(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', _extends({}, store.state.visibilityManager, {
+      visibilityMap: newVisibilityMap
+    }));
+    params.onHiddenItemsChange?.(Array.from(newVisibilityMap.values()));
+  });
+  const toggleItem = useEventCallback(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
+    }
+  };
+};
+useChartVisibilityManager.getInitialState = (params, _, seriesConfig) => ({
+  visibilityManager: {
+    visibilityMap: params.hiddenItems ? visibilityParamToMap(params.hiddenItems, seriesConfig) : EMPTY_VISIBILITY_MAP,
+    isControlled: params.hiddenItems !== undefined
+  }
+});
+useChartVisibilityManager.params = {
+  onHiddenItemsChange: true,
+  hiddenItems: true
+};

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

@@ -0,0 +1,16 @@
+import type { VisibilityIdentifier } from "./useChartVisibilityManager.types.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+export declare const EMPTY_VISIBILITY_MAP: Map<any, any>;
+/**
+ * Selector to get the hidden identifiers from the visibility manager.
+ */
+export declare const selectorVisibilityMap: (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("./useChartVisibilityManager.types.js").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => Map<any, any>;
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+export declare const selectorIsItemVisibleGetter: (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("./useChartVisibilityManager.types.js").UseChartVisibilityManagerState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => (seriesConfig: ChartSeriesConfig<ChartSeriesType>, identifier: VisibilityIdentifier) => boolean;

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

@@ -0,0 +1,19 @@
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { isIdentifierVisible } from "./isIdentifierVisible.js";
+/**
+ * Selector to get the visibility manager state.
+ */
+const selectVisibilityManager = state => state.visibilityManager;
+export const EMPTY_VISIBILITY_MAP = new Map();
+
+/**
+ * Selector to get the hidden identifiers from the visibility manager.
+ */
+export const selectorVisibilityMap = createSelector(selectVisibilityManager, visibilityManager => visibilityManager?.visibilityMap ?? EMPTY_VISIBILITY_MAP);
+
+/**
+ * Selector that returns a function which returns whether an item is visible.
+ */
+export const selectorIsItemVisibleGetter = createSelectorMemoized(selectorVisibilityMap, visibilityMap => {
+  return (seriesConfig, identifier) => isIdentifierVisible(visibilityMap, identifier, seriesConfig);
+});

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

@@ -0,0 +1,90 @@
+import { type ChartPluginSignature } from "../../models/index.js";
+import { type UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
+import { type SeriesItemIdentifier } from "../../../../models/index.js";
+import { type ChartSeriesType } from "../../../../models/seriesType/config.js";
+export type VisibilityIdentifier<T extends ChartSeriesType = ChartSeriesType> = Partial<SeriesItemIdentifier<T>> & (SeriesItemIdentifier<T> extends {
+  subType?: infer U;
+} ? {
+  type: T;
+  subType: U;
+} : {
+  type: T;
+});
+export type VisibilityMap = Map<string, VisibilityIdentifier>;
+export type IsItemVisibleFunction = {
+  /**
+   * Function to check if an item is visible based on its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to check.
+   * @returns {boolean} Whether the item is visible.
+   */
+  (identifier: VisibilityIdentifier): boolean;
+};
+export interface UseChartVisibilityManagerInstance<T extends ChartSeriesType> {
+  /**
+   * Hide an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to hide.
+   */
+  hideItem(identifier: VisibilityIdentifier<T>): void;
+  /**
+   * Show an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to show.
+   */
+  showItem(identifier: VisibilityIdentifier<T>): void;
+  /**
+   * Toggle the visibility of an item by its identifier.
+   *
+   * @param {VisibilityIdentifier} identifier The identifier of the item to toggle.
+   */
+  toggleItemVisibility(identifier: VisibilityIdentifier<T>): void;
+}
+export interface UseChartVisibilityManagerParameters<T extends ChartSeriesType> {
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange?: (hiddenItems: VisibilityIdentifier<T>[]) => void;
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems?: VisibilityIdentifier<T>[];
+}
+export type UseChartVisibilityManagerDefaultizedParameters<T extends ChartSeriesType> = UseChartVisibilityManagerParameters<T>;
+export interface UseChartVisibilityManagerState {
+  visibilityManager: {
+    /**
+     * Map of hidden identifiers by their serialized form.
+     */
+    visibilityMap: VisibilityMap;
+    /**
+     * Internal information to know if the user controls the state or not.
+     */
+    isControlled: boolean;
+  };
+}
+export type UseChartVisibilityManagerSignature<T extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
+  instance: UseChartVisibilityManagerInstance<T>;
+  state: UseChartVisibilityManagerState;
+  params: UseChartVisibilityManagerParameters<T>;
+  defaultizedParams: UseChartVisibilityManagerDefaultizedParameters<T>;
+  dependencies: [UseChartSeriesSignature];
+}>;

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

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

package/esm/internals/plugins/featurePlugins/useChartVisibilityManager/visibilityParamToMap.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 visibilityParamToMap: (hiddenItems: VisibilityIdentifier[] | undefined, seriesConfig: ChartSeriesConfig<ChartSeriesType>) => VisibilityMap;

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

@@ -0,0 +1,11 @@
+import { serializeIdentifier } from "../../corePlugins/useChartSeries/serializeIdentifier.js";
+export const visibilityParamToMap = (hiddenItems, seriesConfig) => {
+  const visibilityMap = new Map();
+  if (hiddenItems) {
+    hiddenItems.forEach(identifier => {
+      const uniqueId = serializeIdentifier(seriesConfig, identifier);
+      visibilityMap.set(uniqueId, identifier);
+    });
+  }
+  return visibilityMap;
+};

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

@@ -0,0 +1,2 @@
+import type { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+export type IdentifierSerializer<TSeriesType extends ChartSeriesType> = (identifier: ChartsSeriesConfig[TSeriesType]['itemIdentifier']) => string;

package/esm/internals/plugins/models/seriesConfig/identifierSerializer.types.js

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

package/esm/internals/plugins/models/seriesConfig/index.d.ts

@@ -7,4 +7,5 @@ export * from "./seriesLayout.types.js";
 export * from "./tooltipGetter.types.js";
 export * from "./tooltipItemPositionGetter.types.js";
 export * from "./legendGetter.types.js";
-export * from "./getSeriesWithDefaultValues.types.js";
+export * from "./getSeriesWithDefaultValues.types.js";
+export * from "./identifierSerializer.types.js";

package/esm/internals/plugins/models/seriesConfig/index.js

@@ -7,4 +7,5 @@ export * from "./seriesLayout.types.js";
 export * from "./tooltipGetter.types.js";
 export * from "./tooltipItemPositionGetter.types.js";
 export * from "./legendGetter.types.js";
-export * from "./getSeriesWithDefaultValues.types.js";
+export * from "./getSeriesWithDefaultValues.types.js";
+export * from "./identifierSerializer.types.js";

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

@@ -8,6 +8,8 @@ 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";
+import { type IdentifierSerializer } from "./identifierSerializer.types.js";
 export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   seriesProcessor: SeriesProcessor<TSeriesType>;
   /**
@@ -19,6 +21,13 @@ export type ChartSeriesTypeConfig<TSeriesType extends ChartSeriesType> = {
   tooltipGetter: TooltipGetter<TSeriesType>;
   tooltipItemPositionGetter?: TooltipItemPositionGetter<TSeriesType>;
   getSeriesWithDefaultValues: GetSeriesWithDefaultValues<TSeriesType>;
+  keyboardFocusHandler?: KeyboardFocusHandler<TSeriesType>;
+  /**
+   * A function to serialize the series item identifier into a unique string.
+   * @param {ChartsSeriesConfig[TSeriesType]['itemIdentifier']} identifier The series item identifier.
+   * @returns {string} A unique string representation of the identifier.
+   */
+  identifierSerializer: IdentifierSerializer<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;