@mui/x-charts-pro 8.22.1 → 8.23.0

package/CHANGELOG.md

@@ -5,6 +5,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.23.0
+
+_Dec 23, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support Data Grid `size`, `size(true)`, and `size(false)` [aggregations for `'boolean'` column type](https://mui.com/x/react-data-grid/aggregation/#usage-with-row-grouping)
+- 🔎 Allow zooming a heatmap
+
+Special thanks go out to these community members for their valuable contributions:
+@henkerik, @sai6855
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.23.0`
+
+- [DataGrid] Fix columns state and columns prop sync issue (#20703) @arminmeh
+- [DataGrid] Fix filter datetime with seconds (#20557) @siriwatknp
+- [DataGrid] Add new `includeHeaderFilters` flag to include header filters when autosizing columns (#20510) @siriwatknp
+- [DataGrid] Prevent default on `Enter` key down when starting editing (#20751) @siriwatknp
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#20722) @Copilot
+
+#### `@mui/x-data-grid-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.23.0`, plus:
+
+- [DataGridPro] Fix crash on rows change in tree data with pagination (#20215) @Copilot
+
+#### `@mui/x-data-grid-premium@8.23.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.23.0`, plus:
+
+- [DataGridPremium] Add aggregation for `'boolean'` column type (#20683) @arminmeh
+- [DataGridPremium] Fix strategy value computation with row grouping (#20725) @MBilalShafi
+- [DataGridPremium] Handle `isRowSelectable()` checks for the rows missing due to `keepNonExistentRowsSelected` (#20668) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.23.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.23.0`
+
+- [charts] Custom stack functions implementation (#20679) @JCQuintas
+- [charts] Extract keyboard focus navigation to the series config (#20693) @alexfauquette
+- [charts] Fix demo not wrapping in mobile (#20713) @JCQuintas
+- [charts] Fix missing dependencies in `x-charts-vendor` (#20685) @henkerik
+- [charts] Remove webkit test differences (#20707) @JCQuintas
+
+#### `@mui/x-charts-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.23.0`, plus:
+
+- [charts-pro] Allow registering preview plots from higher tier packages (#20716) @bernardobelchior
+- [charts-pro] Fix erroneous behavior when adding/removing pointers from zoom&pan gestures (#20698) @JCQuintas
+- [charts-pro] Move heatmap highlight handling to plot component (#20701) @bernardobelchior
+- [charts-pro] Add zoom to heatmap (#20708) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.23.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.23.0`
+
+- [tree view] Add new APIs to disable selection feature for tree view item (#20666) @siriwatknp
+
+#### `@mui/x-tree-view-pro@8.23.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.23.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.23.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Clarify feature availability and relationship between Community and Pro/Premium docs (#20714) @mapache-salvaje
+- [docs] Copyedit Tree View docs and apply new component style rules (DX-19) (#20652) @mapache-salvaje
+- [docs] Fix `ColumnPinningDynamicRowHeight` demo (#20750) @sai6855
+- [docs] Clean up Charts docs sidebar (DX-97) (#20700) @alelthomas
+- [docs] Fix tick labels not being shown on a demo (#20718) @sai6855
+
+### Core
+
+- [code-infra] Bump prettier to 3.7.4 (#20709) @JCQuintas
+- [code-infra] Fix contributor generation logic in changelog script (#20705) @brijeshb42
+
 ## 8.22.1
 
 _Dec 17, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -16,7 +16,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
+const releaseInfo = "MTc2NjUzNDQwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts

@@ -1,10 +1,9 @@
 import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderPreviewContentProps {
+export interface ChartAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;
   y: number;
   height: number;
   width: number;
 }
-export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -9,10 +9,7 @@ exports.ChartAxisZoomSliderPreviewContent = ChartAxisZoomSliderPreviewContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
-var _LinePreviewPlot = require("./previews/LinePreviewPlot");
-var _AreaPreviewPlot = require("./previews/AreaPreviewPlot");
-var _BarPreviewPlot = require("./previews/BarPreviewPlot");
-var _ScatterPreviewPlot = require("./previews/ScatterPreviewPlot");
+var _seriesPreviewPlotMap = require("./seriesPreviewPlotMap");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartAxisZoomSliderPreviewContent(props) {
   const {
@@ -26,24 +23,11 @@ function ChartAxisZoomSliderPreviewContent(props) {
   const processedSeries = store.use(_internals.selectorChartSeriesProcessed);
   const children = [];
   const clipId = `zoom-preview-mask-${axisId}`;
-  const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;
-  const hasBarSeries = (processedSeries.bar?.seriesOrder?.length ?? 0) > 0;
-  const hasScatterSeries = (processedSeries.scatter?.seriesOrder?.length ?? 0) > 0;
-  if (hasLineSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPreviewPlot.AreaPreviewPlot, {
-      axisId: axisId
-    }, "area"));
-  }
-  if (hasBarSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPreviewPlot.BarPreviewPlot, (0, _extends2.default)({}, props), "bar"));
-  }
-  if (hasLineSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePreviewPlot.LinePreviewPlot, {
-      axisId: axisId
-    }, "line"));
-  }
-  if (hasScatterSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPreviewPlot.ScatterPreviewPlot, (0, _extends2.default)({}, props), "scatter"));
+  for (const [seriesType, Component] of _seriesPreviewPlotMap.seriesPreviewPlotMap) {
+    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
+    if (hasSeries) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, props), seriesType));
+    }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {

package/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface AreaPreviewPlotProps extends PreviewPlotProps {}
+interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 export declare function AreaPreviewPlot({
   axisId
 }: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.d.ts

@@ -0,0 +1,4 @@
+import { type PreviewPlotProps } from "./PreviewPlot.types.js";
+export declare function LineAreaPreviewPlot({
+  axisId
+}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineAreaPreviewPlot = LineAreaPreviewPlot;
+var React = _interopRequireWildcard(require("react"));
+var _AreaPreviewPlot = require("./AreaPreviewPlot");
+var _LinePreviewPlot = require("./LinePreviewPlot");
+var _jsxRuntime = require("react/jsx-runtime");
+function LineAreaPreviewPlot({
+  axisId
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPreviewPlot.AreaPreviewPlot, {
+      axisId: axisId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePreviewPlot.LinePreviewPlot, {
+      axisId: axisId
+    })]
+  });
+}

package/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface LinePreviewPlotProps extends PreviewPlotProps {}
+import type { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 export declare function LinePreviewPlot({
   axisId
 }: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts

@@ -1,4 +1,8 @@
 import { type AxisId } from '@mui/x-charts/internals';
 export interface PreviewPlotProps {
   axisId: AxisId;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }

package/ChartZoomSlider/internals/seriesPreviewPlotMap.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { type PreviewPlotProps } from "./previews/PreviewPlot.types.js";
+export declare const seriesPreviewPlotMap: Map<keyof import("@mui/x-charts/internals").ChartsSeriesConfig, React.ComponentType<PreviewPlotProps>>;

package/ChartZoomSlider/internals/seriesPreviewPlotMap.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.seriesPreviewPlotMap = void 0;
+var _BarPreviewPlot = require("./previews/BarPreviewPlot");
+var _ScatterPreviewPlot = require("./previews/ScatterPreviewPlot");
+var _LineAreaPreviewPlot = require("./previews/LineAreaPreviewPlot");
+const seriesPreviewPlotMap = exports.seriesPreviewPlotMap = new Map([['bar', _BarPreviewPlot.BarPreviewPlot], ['line', _LineAreaPreviewPlot.LineAreaPreviewPlot], ['scatter', _ScatterPreviewPlot.ScatterPreviewPlot]]);

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/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc2NjAxNjAwMDAwMA==";
+const releaseInfo = "MTc2NjUzNDQwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts

@@ -1,10 +1,9 @@
 import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderPreviewContentProps {
+export interface ChartAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;
   y: number;
   height: number;
   width: number;
 }
-export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -1,10 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { selectorChartSeriesProcessed, useStore } from '@mui/x-charts/internals';
-import { LinePreviewPlot } from "./previews/LinePreviewPlot.js";
-import { AreaPreviewPlot } from "./previews/AreaPreviewPlot.js";
-import { BarPreviewPlot } from "./previews/BarPreviewPlot.js";
-import { ScatterPreviewPlot } from "./previews/ScatterPreviewPlot.js";
+import { seriesPreviewPlotMap } from "./seriesPreviewPlotMap.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ChartAxisZoomSliderPreviewContent(props) {
   const {
@@ -18,24 +15,11 @@ export function ChartAxisZoomSliderPreviewContent(props) {
   const processedSeries = store.use(selectorChartSeriesProcessed);
   const children = [];
   const clipId = `zoom-preview-mask-${axisId}`;
-  const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;
-  const hasBarSeries = (processedSeries.bar?.seriesOrder?.length ?? 0) > 0;
-  const hasScatterSeries = (processedSeries.scatter?.seriesOrder?.length ?? 0) > 0;
-  if (hasLineSeries) {
-    children.push(/*#__PURE__*/_jsx(AreaPreviewPlot, {
-      axisId: axisId
-    }, "area"));
-  }
-  if (hasBarSeries) {
-    children.push(/*#__PURE__*/_jsx(BarPreviewPlot, _extends({}, props), "bar"));
-  }
-  if (hasLineSeries) {
-    children.push(/*#__PURE__*/_jsx(LinePreviewPlot, {
-      axisId: axisId
-    }, "line"));
-  }
-  if (hasScatterSeries) {
-    children.push(/*#__PURE__*/_jsx(ScatterPreviewPlot, _extends({}, props), "scatter"));
+  for (const [seriesType, Component] of seriesPreviewPlotMap) {
+    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
+    if (hasSeries) {
+      children.push(/*#__PURE__*/_jsx(Component, _extends({}, props), seriesType));
+    }
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx("clipPath", {

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface AreaPreviewPlotProps extends PreviewPlotProps {}
+interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 export declare function AreaPreviewPlot({
   axisId
 }: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/esm/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.d.ts

@@ -0,0 +1,4 @@
+import { type PreviewPlotProps } from "./PreviewPlot.types.js";
+export declare function LineAreaPreviewPlot({
+  axisId
+}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/esm/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { AreaPreviewPlot } from "./AreaPreviewPlot.js";
+import { LinePreviewPlot } from "./LinePreviewPlot.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function LineAreaPreviewPlot({
+  axisId
+}) {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(AreaPreviewPlot, {
+      axisId: axisId
+    }), /*#__PURE__*/_jsx(LinePreviewPlot, {
+      axisId: axisId
+    })]
+  });
+}

package/esm/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface LinePreviewPlotProps extends PreviewPlotProps {}
+import type { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 export declare function LinePreviewPlot({
   axisId
 }: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/esm/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts

@@ -1,4 +1,8 @@
 import { type AxisId } from '@mui/x-charts/internals';
 export interface PreviewPlotProps {
   axisId: AxisId;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }

package/esm/ChartZoomSlider/internals/seriesPreviewPlotMap.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { type PreviewPlotProps } from "./previews/PreviewPlot.types.js";
+export declare const seriesPreviewPlotMap: Map<keyof import("@mui/x-charts/internals").ChartsSeriesConfig, React.ComponentType<PreviewPlotProps>>;

package/esm/ChartZoomSlider/internals/seriesPreviewPlotMap.js

@@ -0,0 +1,4 @@
+import { BarPreviewPlot } from "./previews/BarPreviewPlot.js";
+import { ScatterPreviewPlot } from "./previews/ScatterPreviewPlot.js";
+import { LineAreaPreviewPlot } from "./previews/LineAreaPreviewPlot.js";
+export const seriesPreviewPlotMap = new Map([['bar', BarPreviewPlot], ['line', LineAreaPreviewPlot], ['scatter', ScatterPreviewPlot]]);

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

@@ -13,6 +13,7 @@ import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
 import { ChartsLegend, ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { heatmapSeriesConfig } from "./seriesConfig/index.js";
 import { HeatmapTooltip } from "./HeatmapTooltip/index.js";
@@ -148,7 +149,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
           slotProps: slotProps
         }), /*#__PURE__*/_jsx(ChartsClipPath, {
           id: clipPathId
-        }), children]
+        }), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), children]
       }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
     }))
   });
@@ -162,9 +163,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.shape({
       exportAsImage: PropTypes.func.isRequired,
-      exportAsPrint: PropTypes.func.isRequired
+      exportAsPrint: PropTypes.func.isRequired,
+      setAxisZoomData: PropTypes.func.isRequired,
+      setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: PropTypes.shape({
+    enabled: PropTypes.bool,
+    preventHighlight: PropTypes.bool,
+    preventTooltip: PropTypes.bool
+  }),
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
@@ -204,6 +215,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.string,
+  /**
+   * The list of zoom data related to each axis.
+   * Used to initialize the zoom in a specific configuration without controlling it.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -238,6 +258,12 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
   /**
    * The series to display in the bar chart.
    * An array of [[HeatmapSeries]] objects.
@@ -339,7 +365,22 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
-    valueFormatter: PropTypes.func
+    valueFormatter: PropTypes.func,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool,
+        preview: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
+      }),
+      step: PropTypes.number
+    }), PropTypes.bool])
   })).isRequired,
   /**
    * The configuration of the y-axes.
@@ -404,7 +445,22 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.number,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      slider: PropTypes.shape({
+        enabled: PropTypes.bool,
+        preview: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
+      }),
+      step: PropTypes.number
+    }), PropTypes.bool])
   })).isRequired,
   /**
    * The configuration of the z-axes.
@@ -430,6 +486,54 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number
-  }))
+  })),
+  /**
+   * The list of zoom data related to each axis.
+   */
+  zoomData: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['drag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['pressAndDrag']).isRequired
+    }), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    })]).isRequired),
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['doubleTapReset']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['brush']).isRequired
+    })]).isRequired)
+  })
 } : void 0;
 export { Heatmap };

package/esm/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/esm/Heatmap/Heatmap.plugins.js

@@ -1,3 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartTooltip, useChartInteraction, useChartHighlight } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartTooltip, useChartInteraction, useChartHighlight, useChartBrush } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const HEATMAP_PLUGINS = [useChartZAxis, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartProExport];
+import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
+export const HEATMAP_PLUGINS = [useChartZAxis, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartProExport, useChartBrush, useChartProZoom];

package/esm/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/esm/Heatmap/HeatmapItem.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "dataIndex", "color", "value", "slotProps", "slots"];
+const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useItemHighlighted } from '@mui/x-charts/hooks';
 import { useInteractionItemProps } from '@mui/x-charts/internals';
 import { getHeatmapUtilityClass } from "./heatmapClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +42,8 @@ function HeatmapItem(props) {
       dataIndex,
       color,
       value,
+      isHighlighted = false,
+      isFaded = false,
       slotProps = {},
       slots = {}
     } = props,
@@ -52,13 +53,6 @@ function HeatmapItem(props) {
     seriesId,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId,
-    dataIndex
-  });
   const ownerState = {
     seriesId,
     dataIndex,

package/esm/Heatmap/HeatmapPlot.js

@@ -2,14 +2,18 @@
 
 import PropTypes from 'prop-types';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
+import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore } from '@mui/x-charts/internals';
 import { useHeatmapSeriesContext } from "../hooks/useHeatmapSeries.js";
 import { HeatmapItem } from "./HeatmapItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function HeatmapPlot(props) {
+  const store = useStore();
   const xScale = useXScale();
   const yScale = useYScale();
   const colorScale = useZColorScale();
   const series = useHeatmapSeriesContext();
+  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(selectorChartsIsFadedCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -24,6 +28,10 @@ function HeatmapPlot(props) {
       if (x === undefined || y === undefined || !color) {
         return null;
       }
+      const item = {
+        seriesId: seriesToDisplay.id,
+        dataIndex
+      };
       return /*#__PURE__*/_jsx(HeatmapItem, {
         width: xScale.bandwidth(),
         height: yScale.bandwidth(),
@@ -34,7 +42,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/esm/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/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.22.1
+ * @mui/x-charts-pro v8.23.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/index.d.ts

@@ -1,2 +1,4 @@
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
-export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
+export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
+export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
+export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";

package/esm/internals/index.js

@@ -1 +1,2 @@
-export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.22.1
+ * @mui/x-charts-pro v8.23.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/index.d.ts

@@ -1,2 +1,4 @@
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
-export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
+export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
+export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
+export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";

package/internals/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "seriesPreviewPlotMap", {
+  enumerable: true,
+  get: function () {
+    return _seriesPreviewPlotMap.seriesPreviewPlotMap;
+  }
+});
 Object.defineProperty(exports, "useChartContainerProProps", {
   enumerable: true,
   get: function () {
     return _useChartContainerProProps.useChartContainerProProps;
   }
 });
-var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _seriesPreviewPlotMap = require("../ChartZoomSlider/internals/seriesPreviewPlotMap");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.22.1",
+  "version": "8.23.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.22.1",
-    "@mui/x-internal-gestures": "0.3.6",
-    "@mui/x-internals": "8.22.0",
-    "@mui/x-charts-vendor": "8.22.0",
-    "@mui/x-license": "8.22.0"
+    "@mui/x-charts-vendor": "8.23.0",
+    "@mui/x-charts": "8.23.0",
+    "@mui/x-internal-gestures": "0.4.0",
+    "@mui/x-internals": "8.23.0",
+    "@mui/x-license": "8.23.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",