@mui/x-charts-pro 8.3.1 → 8.5.0

package/BarChartPro/BarChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { BarChartProps } from '@mui/x-charts/BarChart';
+import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
 }
 /**
  * Demos:

package/BarChartPro/BarChartPro.js

@@ -26,7 +26,7 @@ var _ChartZoomSlider = require("../ChartZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
-var _BarChartPro = require("./BarChartPro.plugins");
+var _BarChartPro2 = require("./BarChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
@@ -74,19 +74,21 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     zoomData,
     onZoomChange,
     apiRef,
-    plugins: _BarChartPro.BAR_CHART_PRO_PLUGINS
+    plugins: _BarChartPro2.BAR_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
-      }))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") BarChartPro.displayName = "BarChartPro";
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -96,6 +98,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     current: _propTypes.default.shape({
       exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
+      setAxisZoomData: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
@@ -325,7 +328,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -388,7 +393,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -446,7 +453,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -504,7 +513,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -562,7 +573,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -620,7 +633,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -678,7 +693,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -736,7 +753,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -806,7 +825,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -868,7 +889,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -925,7 +948,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -982,7 +1007,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1039,7 +1066,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1096,7 +1125,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1153,7 +1184,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1210,7 +1243,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])

package/CHANGELOG.md

@@ -5,6 +5,219 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.0
+
+_May 29, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add support for exporting `RadarChartPro`, `FunnelChart` and `Heatmap` as image and PDF.
+- 📊 `RadarChart` is now stable.
+
+Special thanks go out to the community members for their valuable contributions:
+@xBlizZer, @sai6855, @alisasanib.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.0`
+
+- [DataGrid] Avoid ResizeObserver loop error (#17984) @cherniavskii
+- [DataGrid] Fix column management `toggleColumn` event type (#18023) @KenanYusuf
+- [DataGrid] Remove unnecessary `any` type (#17979) @sai6855
+
+#### `@mui/x-data-grid-pro@8.5.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.5.0`, plus:
+
+- [DataGridPro] Allow multi sorting without modifier key (#17925) @cherniavskii
+- [DataGridPro] Row reordering icon improvements (#17947) @KenanYusuf
+- [DataGridPro] Fix pinned columns order in column management (#17950) @alisasanib
+
+#### `@mui/x-data-grid-premium@8.5.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.5.0`, plus:
+
+- [DataGridPremium] Export `GridApiPremium` type (#18037) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.5.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.5.0`, plus:
+
+- [DateRangePicker] Allow to override the format in the field (#17972) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.5.0`
+
+- [charts] Add `render` prop to charts toolbar components (#17649) @bernardobelchior
+- [charts] Add configurable slots to toolbar (#17712) @bernardobelchior
+- [charts] Export `useFunnelSeries` and `useRadarSeries` (#18034) @JCQuintas
+- [charts] Expose `ChartApi` through context (#18004) @bernardobelchior
+- [charts] Mark Radar chart as stable (#17946) @alexfauquette
+- [charts] Only update store if interaction item is different (#17851) @bernardobelchior
+- [charts] Reuse shared date utils (#18014) @JCQuintas
+- [charts] Use Map for string cache instead of object (#17982) @bernardobelchior
+- [charts] Fix Population pyramid demo (#17987) @oliviertassinari
+
+#### `@mui/x-charts-pro@8.5.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.5.0`, plus:
+
+- [charts-pro] Add range selection to zoom slider (#17949) @bernardobelchior
+- [charts-pro] Allow configuring zoom slider tooltip (#18030) @bernardobelchior
+- [charts-pro] Allow exporting a funnel chart (#17957) @bernardobelchior
+- [charts-pro] Allow exporting a heatmap chart (#17916) @bernardobelchior
+- [charts-pro] Allow exporting a radar chart (#17968) @bernardobelchior
+- [charts-pro] Always show both zoom slider tooltips (#18027) @bernardobelchior
+- [charts-pro] Show zoom slider tooltip when selecting range (#18028) @bernardobelchior
+- [charts-pro] Split `ChartAxisZoomSlider` into smaller files (#18011) @bernardobelchior
+- [charts-pro] Update zoom slider range selection cursor (#17977) @bernardobelchior
+- [charts-pro] Add support for Heatmap legend (#17943) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.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.5.0`.
+
+### Docs
+
+- [docs] Fix derived column pivoting demo crash (#17944) @arminmeh
+- [docs] Fix light/dark mode blink on pickers overview (#18002) @alexfauquette
+- [docs] Fix scatter shape demo causing horizontal overflow (#17974) @bernardobelchior
+
+### Core
+
+- [code-infra] Add bundle size monitor (#17754) @Janpot
+- [code-infra] Enable `babel-plugin-display-name` in vitest (#17903) @JCQuintas
+- [infra] Remove last deprecated `ponyfillGlobal` usage (#18003) @LukasTy
+- [infra] Use `babel-plugin-display-name` from npm (#18040) @LukasTy
+- [x-telemetry] Remove deprecated `ponyfillGlobal` (#17986) @xBlizZer
+
+## 8.4.0
+
+_May 21, 2025_
+
+We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔺 Support regular [`pyramid` variation in the `<FunnelChart />` component](https://mui.com/x/react-charts/funnel/#pyramid-chart):
+
+  <img width="398" alt="Pyramid funnel chart" src="https://github.com/user-attachments/assets/90ccb221-3a48-4ffa-8878-89c6db16da86" />
+
+- 📚 Documentation improvements
+- 🌎 Improve Icelandic (is-IS) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@aizerin, @arminmeh, @campmarc, @jyash97, @mapache-salvaje, @noraleonte, @nusr, @ragnarr18, @romgrk, @whereisrmsqhs.
+Following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @rita-codes.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.4.0`
+
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#14737) @campmarc
+- [DataGrid] Fix disabled typography variants crashing grid (#17934) @KenanYusuf
+- [DataGrid] Fix tree data demo crash (#17904) @MBilalShafi
+- [DataGrid] Use `exclude` selection model type if quick filter does not have actual values (#17899) @arminmeh
+- [DataGrid] Fix clipboard copy behavior for cell ranges with empty cells (#16797) @nusr
+- [l10n] Improve Icelandic (is-IS) locale (#17915) @ragnarr18
+
+#### `@mui/x-data-grid-pro@8.4.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.4.0`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17122) @whereisrmsqhs
+- [DataGridPro] Preserve row state during server-side lazy loading (#17743) @arminmeh
+- [DataGridPro] Prevent text selection when reordering rows (#16568) @jyash97
+
+#### `@mui/x-data-grid-premium@8.4.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.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.4.0`
+
+- [fields] Ensure fresh `disabled` value is used when focusing or clicking (#17914) @aizerin
+- [fields] Improve the field controlled edition (#17816) @flaviendelangle
+- [pickers] Fix `PickersTextField` overflow (#17942) @noraleonte
+
+#### `@mui/x-date-pickers-pro@8.4.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.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.4.0`
+
+- [charts] Add grouped axes demo (#17848) @bernardobelchior
+- [charts] Enable tooltip disable portal (#17871) @alexfauquette
+- [charts] Improve performance in scatter chart (#17849) @bernardobelchior
+- [charts] Recreate `isPointInside` less often (#17850) @bernardobelchior
+- [charts] Try fix for flaky `useAnimate` test (#17777) @JCQuintas
+- [charts] Add `isXInside` and `isYInside` (#17911) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.4.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.4.0`, plus:
+
+- [charts-pro] Add size for zoom slider (#17736) @bernardobelchior
+- [charts-pro] Add zoom slider tooltip (#17733) @bernardobelchior
+- [charts-pro] Clean and document Heatmap Tooltip (#17933) @alexfauquette
+- [charts-pro] Introduce `Pyramid` chart (#17783) @JCQuintas
+- [charts-pro] Update zoom slider nomenclature (#17938) @bernardobelchior
+- [charts-pro] Fix error when importing rasterizehtml (#17897) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.4.0`
+
+- [TreeView] Add `getItemChildren` prop in `RichTreeView` (#17894) @rita-codes
+- [TreeView] Add a method in the `apiRef` to toggle the editing status of an item (#17768) @rita-codes
+- [TreeView] Add missing sx prop on the Tree Item component (#17930) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.4.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.4.0`.
+
+### Docs
+
+- [docs] Add a recipe for drag and drop row grouping (#17638) @KenanYusuf
+- [docs] Add introductory text to Data Grid component pages (#17902) @KenanYusuf
+- [docs] Refactor embedded CodeSandbox on Data Grid—Quickstart page (#17749) @rita-codes
+- [docs] Remove double border on Data Grid—Quickstart demo (#17932) @rita-codes
+- [docs] Standardize `apiRef` copy (#17776) @mapache-salvaje
+- [docs][DataGrid] Revise server-side data docs (#17007) @mapache-salvaje
+- [docs][DataGrid] Audit and revise the tree data doc (#17650) @mapache-salvaje
+- [docs][pickers] Fix migration guide references to range fields (#17861) @LukasTy
+- [docs][charts] Reorganize the Tooltip documentation (#17917) @alexfauquette
+
+### Core
+
+- [core] refactor: remove manual `displayName` (#17845) @romgrk
+- [code-infra] Document how to use `vitest` cli (#17847) @JCQuintas
+- [code-infra] Increase charts export test timeout (#17909) @JCQuintas
+- [code-infra] Set `isolatedModules=true` in tsconfig (#17781) @JCQuintas
+- [infra] Ensure proper docs preview path resolution (#17863) @LukasTy
+
 ## 8.3.1
 
 _May 14, 2025_

package/ChartContainerPro/ChartContainerPro.d.ts

@@ -7,7 +7,6 @@ export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeries
 type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
   ref?: React.ForwardedRef<SVGSVGElement>;
 }) => React.JSX.Element;
-export type ChartProApi = NonNullable<NonNullable<ChartContainerProProps['apiRef']>['current']>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/ChartContainerPro/ChartContainerPro.js

@@ -52,6 +52,7 @@ const ChartContainerPro = exports.ChartContainerPro = /*#__PURE__*/React.forward
 });
 
 // @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartContainerPro.displayName = "ChartContainerPro";
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ChartContainerPro/ChartProApi.d.ts

@@ -0,0 +1,26 @@
+import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
+import { HeatmapPluginsSignatures } from "../Heatmap/Heatmap.plugins.js";
+import { LineChartProPluginsSignatures } from "../LineChartPro/LineChartPro.plugins.js";
+import { ScatterChartProPluginsSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
+import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins.js";
+import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
+import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+type PluginsPerSeriesType = {
+  heatmap: HeatmapPluginsSignatures;
+  line: LineChartProPluginsSignatures;
+  scatter: ScatterChartProPluginsSignatures;
+  bar: BarChartProPluginsSignatures;
+  funnel: FunnelChartPluginsSignatures;
+  radar: RadarChartProPluginsSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartProApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartProApi<'composition'>
+ */
+export type ChartProApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
+export {};

package/ChartContainerPro/ChartProApi.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ChartContainerPro/index.d.ts

@@ -1,2 +1,3 @@
 import "../typeOverloads/index.js";
-export * from "./ChartContainerPro.js";
+export * from "./ChartContainerPro.js";
+export * from "./ChartProApi.js";

package/ChartContainerPro/index.js

@@ -14,4 +14,15 @@ Object.keys(_ChartContainerPro).forEach(function (key) {
       return _ChartContainerPro[key];
     }
   });
+});
+var _ChartProApi = require("./ChartProApi");
+Object.keys(_ChartProApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProApi[key];
+    }
+  });
 });

package/ChartDataProviderPro/ChartDataProviderPro.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { ChartSeriesType, ChartAnyPluginSignature, ChartProviderProps } from '@mui/x-charts/internals';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'];
+export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'] & {
+  /**
+   * Slots to customize charts' components.
+   */
+  slots?: Partial<ChartsSlotsPro>;
+  /**
+   * The props for the slots.
+   */
+  slotProps?: Partial<ChartsSlotPropsPro>;
+};
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -14,10 +14,11 @@ var _Watermark = require("@mui/x-license/Watermark");
 var _internals = require("@mui/x-charts/internals");
 var _ChartsLocalizationProvider = require("@mui/x-charts/ChartsLocalizationProvider");
 var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
+var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -50,7 +51,9 @@ function ChartDataProviderPro(props) {
   const {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   } = (0, _useChartDataProviderProProps.useChartDataProviderProProps)((0, _extends2.default)({}, props, {
     plugins: props.plugins ?? _allPlugins.DEFAULT_PLUGINS
   }));
@@ -58,7 +61,12 @@ function ChartDataProviderPro(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLocalizationProvider.ChartsLocalizationProvider, {
       localeText: localeText,
-      children: children
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: _material.defaultSlotsMaterial,
+        children: children
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
       packageName: packageIdentifier,
       releaseInfo: releaseInfo
@@ -118,6 +126,14 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: _propTypes.default.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: _propTypes.default.object,
   theme: _propTypes.default.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -5,4 +5,6 @@ export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesT
   children: import("react").ReactNode;
   localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
   chartProviderProps: import("@mui/x-charts/internals").ChartProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("@mui/x-charts/internals").ChartsSlots> | undefined;
+  slotProps: Partial<import("@mui/x-charts/internals").ChartsSlotProps> | undefined;
 };

package/ChartDataProviderPro/useChartDataProviderProProps.js

@@ -10,12 +10,16 @@ const useChartDataProviderProProps = props => {
   const {
     chartProviderProps,
     localeText,
+    slots,
+    slotProps,
     children
   } = (0, _internals.useChartDataProviderProps)(props);
   return {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   };
 };
 exports.useChartDataProviderProProps = useChartDataProviderProProps;

package/ChartZoomSlider/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./ChartZoomSlider.js";
-export { type ChartAxisZoomSliderHandleClasses, type ChartAxisZoomSliderHandleClassKey, chartAxisZoomSliderHandleClasses } from "./internals/chartAxisZoomSliderHandleClasses.js";
+export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";