@mui/x-charts-pro 8.22.1 → 8.24.0

package/FunnelChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.funnelSeriesConfig = void 0;
+var _internals = require("@mui/x-charts/internals");
 var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -20,5 +21,6 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
 };

package/FunnelChart/seriesConfig/legend.js

@@ -11,16 +11,19 @@ const legendGetter = params => {
     series
   } = params;
   return seriesOrder.reduce((acc, seriesId) => {
-    series[seriesId].data.forEach(item => {
+    series[seriesId].data.forEach((item, dataIndex) => {
       const formattedLabel = (0, _internals.getLabel)(item.label, 'legend');
       if (formattedLabel === undefined) {
         return;
       }
+      const id = item.id ?? dataIndex;
       acc.push({
+        type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        id: item.id,
-        itemId: item.id,
+        id,
+        itemId: id,
+        dataIndex,
         color: item.color,
         label: formattedLabel
       });

package/Heatmap/Heatmap.d.ts

@@ -34,13 +34,13 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: Readonly<Omit<MakeOptional<XAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
+  xAxis: Readonly<MakeOptional<XAxis<'band'>, 'scaleType'>[]>;
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: Readonly<Omit<MakeOptional<YAxis<'band'>, 'scaleType'>, 'zoom'>[]>;
+  yAxis: Readonly<MakeOptional<YAxis<'band'>, 'scaleType'>[]>;
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeries]] objects.

package/Heatmap/Heatmap.js

@@ -20,6 +20,7 @@ var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _constants = require("@mui/x-charts/constants");
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _seriesConfig = require("./seriesConfig");
 var _HeatmapTooltip = require("./HeatmapTooltip");
@@ -155,7 +156,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
           slotProps: slotProps
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
           id: clipPathId
-        }), children]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), children]
       }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps?.tooltip))]
     }))
   });
@@ -169,9 +170,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
       exportAsImage: _propTypes.default.func.isRequired,
-      exportAsPrint: _propTypes.default.func.isRequired
+      exportAsPrint: _propTypes.default.func.isRequired,
+      setAxisZoomData: _propTypes.default.func.isRequired,
+      setZoomData: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    preventHighlight: _propTypes.default.bool,
+    preventTooltip: _propTypes.default.bool
+  }),
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
@@ -211,6 +222,15 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: _propTypes.default.string,
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -245,6 +265,12 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: _propTypes.default.func,
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeries]] objects.
@@ -346,7 +372,22 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
-    valueFormatter: _propTypes.default.func
+    valueFormatter: _propTypes.default.func,
+    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
+      maxEnd: _propTypes.default.number,
+      maxSpan: _propTypes.default.number,
+      minSpan: _propTypes.default.number,
+      minStart: _propTypes.default.number,
+      panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
+      }),
+      step: _propTypes.default.number
+    }), _propTypes.default.bool])
   })).isRequired,
   /**
    * The configuration of the y-axes.
@@ -411,7 +452,22 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.number,
+    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      filterMode: _propTypes.default.oneOf(['discard', 'keep']),
+      maxEnd: _propTypes.default.number,
+      maxSpan: _propTypes.default.number,
+      minSpan: _propTypes.default.number,
+      minStart: _propTypes.default.number,
+      panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
+      }),
+      step: _propTypes.default.number
+    }), _propTypes.default.bool])
   })).isRequired,
   /**
    * The configuration of the z-axes.
@@ -437,5 +493,53 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number
-  }))
+  })),
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoomData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: _propTypes.default.shape({
+    pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['drag']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
+    }), _propTypes.default.shape({
+      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    })]).isRequired),
+    zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['doubleTapReset']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['brush']).isRequired
+    })]).isRequired)
+  })
 } : void 0;

package/Heatmap/Heatmap.plugins.d.ts

@@ -1,4 +1,5 @@
-import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type ConvertSignaturesIntoPlugins, type UseChartBrushSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type HeatmapPluginSignatures = [UseChartZAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartHighlightSignature, UseChartProExportSignature];
+import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
+export type HeatmapPluginSignatures = [UseChartZAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartHighlightSignature, UseChartProExportSignature, UseChartBrushSignature, UseChartProZoomSignature];
 export declare const HEATMAP_PLUGINS: ConvertSignaturesIntoPlugins<HeatmapPluginSignatures>;

package/Heatmap/Heatmap.plugins.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.HEATMAP_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
-const HEATMAP_PLUGINS = exports.HEATMAP_PLUGINS = [_internals.useChartZAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _useChartProExport.useChartProExport];
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+const HEATMAP_PLUGINS = exports.HEATMAP_PLUGINS = [_internals.useChartZAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _useChartProExport.useChartProExport, _internals.useChartBrush, _useChartProZoom.useChartProZoom];

package/Heatmap/HeatmapItem.d.ts

@@ -9,7 +9,7 @@ export interface HeatmapItemSlots {
   cell?: React.ElementType;
 }
 export interface HeatmapItemSlotProps {
-  cell?: Partial<React.ComponentPropsWithRef<'rect'>>;
+  cell?: Partial<HeatmapCellProps>;
 }
 export interface HeatmapItemProps {
   dataIndex: number;
@@ -20,6 +20,8 @@ export interface HeatmapItemProps {
   x: number;
   y: number;
   color: string;
+  isHighlighted?: boolean;
+  isFaded?: boolean;
   /**
    * The props used for each component slot.
    * @default {}
@@ -39,6 +41,13 @@ export interface HeatmapItemOwnerState {
   isHighlighted: boolean;
   classes?: Partial<HeatmapClasses>;
 }
+export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapItemOwnerState;
+}
 /**
  * @ignore - internal component.
  */

package/Heatmap/HeatmapItem.js

@@ -13,11 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
 var _heatmapClasses = require("./heatmapClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "dataIndex", "color", "value", "slotProps", "slots"];
+const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "slotProps", "slots"];
 const HeatmapCell = (0, _styles.styled)('rect', {
   name: 'MuiHeatmap',
   slot: 'Cell',
@@ -51,6 +50,8 @@ function HeatmapItem(props) {
       dataIndex,
       color,
       value,
+      isHighlighted = false,
+      isFaded = false,
       slotProps = {},
       slots = {}
     } = props,
@@ -60,13 +61,6 @@ function HeatmapItem(props) {
     seriesId,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _hooks.useItemHighlighted)({
-    seriesId,
-    dataIndex
-  });
   const ownerState = {
     seriesId,
     dataIndex,

package/Heatmap/HeatmapPlot.js

@@ -8,14 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.HeatmapPlot = HeatmapPlot;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
 var _useHeatmapSeries = require("../hooks/useHeatmapSeries");
 var _HeatmapItem = require("./HeatmapItem");
 var _jsxRuntime = require("react/jsx-runtime");
 function HeatmapPlot(props) {
+  const store = (0, _internals.useStore)();
   const xScale = (0, _hooks.useXScale)();
   const yScale = (0, _hooks.useYScale)();
   const colorScale = (0, _hooks.useZColorScale)();
   const series = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
+  const isHighlighted = store.use(_internals.selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(_internals.selectorChartsIsFadedCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -30,6 +34,10 @@ function HeatmapPlot(props) {
       if (x === undefined || y === undefined || !color) {
         return null;
       }
+      const item = {
+        seriesId: seriesToDisplay.id,
+        dataIndex
+      };
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapItem.HeatmapItem, {
         width: xScale.bandwidth(),
         height: yScale.bandwidth(),
@@ -40,7 +48,9 @@ function HeatmapPlot(props) {
         seriesId: series.seriesOrder[0],
         value: value,
         slots: props.slots,
-        slotProps: props.slotProps
+        slotProps: props.slotProps,
+        isHighlighted: isHighlighted(item),
+        isFaded: isFaded(item)
       }, `${xIndex}_${yIndex}`);
     })
   });

package/Heatmap/index.d.ts

@@ -1,6 +1,7 @@
 export { Heatmap } from "./Heatmap.js";
 export type { HeatmapSeries, HeatmapProps } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
+export type { HeatmapCellProps } from "./HeatmapItem.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./Heatmap.plugins.js";
 export * from "./heatmapClasses.js";

package/Heatmap/seriesConfig/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.heatmapSeriesConfig = void 0;
+var _internals = require("@mui/x-charts/internals");
 var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -19,5 +20,6 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getBaseExtremum,
   yExtremumGetter: _extremums.getBaseExtremum,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
 };

package/LineChartPro/LineChartPro.js

@@ -166,6 +166,31 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * 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: _propTypes.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['line']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -232,6 +257,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'line'>, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginSignatures>;

package/LineChartPro/LineChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.LINE_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartVisibilityManager, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/PieChartPro/PieChartPro.js

@@ -68,15 +68,15 @@ const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function
     plugins: _PieChartPro2.PIE_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
-      legendPosition: props.slotProps?.legend?.position,
-      legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
+      legendPosition: slotProps?.legend?.position,
+      legendDirection: slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
       hideLegend: hideLegend ?? false,
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
-        direction: props.slotProps?.legend?.direction ?? 'vertical',
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        direction: slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
@@ -124,6 +124,31 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * 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: _propTypes.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['pie']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -162,6 +187,11 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   })]),
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/PieChartPro/PieChartPro.plugins.d.ts

@@ -1,4 +1,4 @@
-import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartKeyboardNavigationSignature } from '@mui/x-charts/internals';
+import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartKeyboardNavigationSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type PieChartProPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
+export type PieChartProPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'pie'>, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
 export declare const PIE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<PieChartProPluginSignatures>;

package/RadarChartPro/RadarChartPro.js

@@ -93,6 +93,31 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * 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: _propTypes.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['radar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -149,6 +174,11 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/RadarChartPro/RadarChartPro.plugins.d.ts

@@ -1,4 +1,4 @@
-import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartPolarAxisSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type RadarChartProPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export type RadarChartProPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'radar'>, UseChartProExportSignature];
 export declare const RADAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<RadarChartProPluginSignatures>;

package/RadarChartPro/RadarChartPro.plugins.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.RADAR_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
-const RADAR_CHART_PRO_PLUGINS = exports.RADAR_CHART_PRO_PLUGINS = [_internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartPolarAxis, _internals.useChartHighlight, _useChartProExport.useChartProExport];
+const RADAR_CHART_PRO_PLUGINS = exports.RADAR_CHART_PRO_PLUGINS = [_internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartPolarAxis, _internals.useChartHighlight, _internals.useChartVisibilityManager, _useChartProExport.useChartProExport];

package/SankeyChart/SankeyPlot.js

@@ -17,7 +17,10 @@ var _useSankeySeries = require("../hooks/useSankeySeries");
 var _sankeyClasses = require("./sankeyClasses");
 var _SankeyNodeLabel = require("./SankeyNodeLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-const SankeyPlotRoot = (0, _styles.styled)('g')({
+const SankeyPlotRoot = (0, _styles.styled)('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   [`.${_sankeyClasses.sankeyPlotClasses.links} path, .${_sankeyClasses.sankeyPlotClasses.nodes} rect`]: {
     transition: 'opacity 0.1s ease-out, filter 0.1s ease-out'
   },

package/SankeyChart/seriesConfig/identifierSerializer.d.ts

@@ -0,0 +1,3 @@
+import { type IdentifierSerializer } from '@mui/x-charts/internals';
+declare const identifierSerializer: IdentifierSerializer<'sankey'>;
+export default identifierSerializer;

package/SankeyChart/seriesConfig/identifierSerializer.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const identifierSerializer = identifier => {
+  if (identifier.subType === 'node') {
+    return `${(0, _internals.typeSerializer)(identifier.type)}Node(${identifier.nodeId})`;
+  }
+  return `${(0, _internals.typeSerializer)(identifier.type)}Source(${identifier.sourceId})Target(${identifier.targetId})`;
+};
+var _default = exports.default = identifierSerializer;

package/SankeyChart/seriesConfig/index.js

@@ -9,6 +9,7 @@ var _getSeriesWithDefaultValues = require("./getSeriesWithDefaultValues");
 var _tooltipGetter = require("./tooltipGetter");
 var _calculateSankeyLayout = require("../calculateSankeyLayout");
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _identifierSerializer = _interopRequireDefault(require("./identifierSerializer"));
 // Simple passthrough functions for sankey chart
 const seriesProcessor = series => series;
 const colorProcessor = series => series;
@@ -30,5 +31,6 @@ const sankeySeriesConfig = exports.sankeySeriesConfig = {
   legendGetter,
   tooltipGetter: _tooltipGetter.tooltipGetter,
   tooltipItemPositionGetter: _tooltipPosition.default,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
+  identifierSerializer: _identifierSerializer.default
 };