@mui/x-charts-pro 8.2.0 → 8.3.1

package/BarChartPro/BarChartPro.d.ts

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { BarChartProps } from '@mui/x-charts/BarChart';
 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 BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
+}
 /**
  * Demos:
  *

package/BarChartPro/BarChartPro.js

@@ -22,11 +22,13 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _internals = require("@mui/x-charts/internals");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _BarChartPro = require("./BarChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
  * Demos:
  *
@@ -47,7 +49,8 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
       initialZoom,
       zoomData,
       onZoomChange,
-      apiRef
+      apiRef,
+      showToolbar
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -76,10 +79,10 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!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)(_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: [/*#__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)), !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, {}), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       }))]
     }))
   }));
@@ -229,6 +232,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * An array of [[BarSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
@@ -316,6 +324,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -376,6 +387,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -431,6 +445,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -486,6 +503,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -541,6 +561,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -596,6 +619,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -651,6 +677,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -706,6 +735,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),
@@ -773,6 +805,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -832,6 +867,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -886,6 +924,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -940,6 +981,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -994,6 +1038,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1048,6 +1095,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1102,6 +1152,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   }), _propTypes.default.shape({
@@ -1156,6 +1209,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minSpan: _propTypes.default.number,
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
+      slider: _propTypes.default.shape({
+        enabled: _propTypes.default.bool
+      }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
   })]).isRequired),

package/CHANGELOG.md

@@ -5,6 +5,201 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.3.1
+
+_May 14, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Norwegian Bokmål (nb-NO) locale on the Data Grid
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid and Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@100pearlcent, @htollefsen, @JanPretzel, @sai6855.
+Following are all team members who have contributed to this release:
+@bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @MBilalShafi, @oliviertassinari, @prakhargupta1.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.1`
+
+- [DataGrid] Add `reason` param for `onRowSelectionModelChange` callback (#17545) @sai6855
+- [DataGrid] Fix `renderContext` calculation loop (#17779) @cherniavskii
+- [DataGrid] Fix column spanning jump on scroll (#17759) @cherniavskii
+- [DataGrid] Fix material augmentation not working (#17761) @cherniavskii
+- [DataGrid] Use arguments selector for checkbox props (#17683) @MBilalShafi
+- [l10n] Improve Norwegian Bokmål (nb-NO) locale (#17766) @htollefsen
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-data-grid-pro@8.3.1` [![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.3.1`.
+
+#### `@mui/x-data-grid-premium@8.3.1` [![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.3.1`, plus:
+
+- [DataGridPremium] Fix aggregation label not being used in pivot panel (#17760) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.1`
+
+- [fields] Add notch to the field outlined when the label is manually shrank (#17620) @flaviendelangle
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-date-pickers-pro@8.3.1` [![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.3.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.3.1`
+
+- [charts] Fix infinite tick number when zoom range is zero (#17750) @bernardobelchior
+- [charts] Improve tick rendering performance (#17755) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.1` [![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.3.1`, plus:
+
+- [charts-pro] Fix ESM build issue with Vite (#17774) @bernardobelchior
+- [charts-pro] Add benchmark for zoomed in scatter chart (#17756) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.3.1` [![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.3.1`.
+
+### Docs
+
+- [docs] Fix 301 to Next.js docs for license @oliviertassinari
+- [docs] Fix AI assistant API URL (#17745) @oliviertassinari
+- [docs] Fix heading structure in README @oliviertassinari
+- [docs] Fix translation keys documentation (#17811) @JanPretzel
+- [docs] Improve CHANGELOG format @oliviertassinari
+
+### Core
+
+- [core] Apply YAML convention, blank line only at top level @oliviertassinari
+- [code-infra] Fix dynamic import missing extensions (#17767) @Janpot
+- [code-infra] Replace `mocha` with `vitest` for browser & jsdom tests (#14508) @JCQuintas
+- [scheduler] Create the package and setup a private doc page (#17239) @flaviendelangle
+
+## 8.3.0
+
+_May 8, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Added new styling options and shapes for `<FunnelChart />`, including `variant`, `borderRadius`, `pyramid`, and `step-pyramid` curves.
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to this community member for a valuable contribution: @ptuukkan.
+Team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.0`
+
+- [DataGrid] Fix cell editing of computed columns with data source (#17684) @ptuukkan
+- [DataGrid] Fix lazy loading crash with `isRowSelectable` prop (#17629) @MBilalShafi
+- [DataGrid] Fix: use CSS nonce (#17726) @romgrk
+- [DataGrid] Ignore `preProcessEditCellProps` for non-editable columns when starting a row update (#17732) @arminmeh
+- [DataGrid] Avoid applying row selection propagation on filtered rows (#17739) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.3.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.3.0`.
+
+#### `@mui/x-data-grid-premium@8.3.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.3.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.0`
+
+- [DateTimePicker] Fix focus behavior on desktop variant (#17719) @LukasTy
+- [pickers] Avoid `DigitalClock` stealing focus from a Picker open button on close (#17686) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.3.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.3.0`, plus:
+
+- [DateRangePicker] Fix to reset range position after closing mobile Picker (#17631) @LukasTy
+
+### Charts
+
+- The `<FunnelChart />` series now accepts a `variant='outlined'` prop for a simpler style.
+  <img width="398" alt="Screenshot 2025-05-06 at 20 36 12" src="https://github.com/user-attachments/assets/00fef14f-9026-421e-a4b6-7e081adce1e8" />
+
+- Add a `borderRadius` property to `<FunnelChart />`. All funnels have `8px` as a default value.
+  <img width="386" alt="Screenshot 2025-05-06 at 14 00 20" src="https://github.com/user-attachments/assets/4f4cc0e7-01ce-4ed6-a0e1-a387f78def23" />
+
+- Add a `pyramid` curve to `<FunnelChart />`, which allows creation of a pyramid-shaped funnel.
+  <img width="344" alt="Screenshot 2025-05-06 at 14 32 59" src="https://github.com/user-attachments/assets/0b2896e0-0478-4766-bb1b-258a4977a751" />
+
+- Add a `step-pyramid` curve to `<FunnelChart />`, which creates a stepped-pyramid like shape.
+  <img width="344" alt="Screenshot 2025-05-06 at 14 33 03" src="https://github.com/user-attachments/assets/894f0ab3-7898-40fe-b0df-560feea4085a" />
+
+#### `@mui/x-charts@8.3.0`
+
+- [charts] Add charts toolbar with zoom options (#17615) @bernardobelchior
+- [charts] Add zoom slider (#17496) @bernardobelchior
+- [charts] Cleanup compiler warnings (#17360) @alexfauquette
+- [charts] Fix `<PieArcLabel />` not taking `arcLabelRadius` into account (#17655) @bernardobelchior
+- [charts] Fix spark line not having clip path (#17501) @bernardobelchior
+- [charts] Fix type issue with ESM (#17624) @alexfauquette
+- [charts] Improve `<MarkElement />` performance (#17546) @bernardobelchior
+- [charts] Rename `materialSlots` internal constant (#17710) @bernardobelchior
+- [charts] Update zoom slider design (#17682) @bernardobelchior
+- [charts] Fix zoom being documented as available for heatmap (#17657) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.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.3.0`, plus:
+
+- [charts-pro] Add `pyramid` curve to `<FunnelChart />` (#17665) @JCQuintas
+- [charts-pro] Add `variant='outlined'` to `<FunnelChart />` series (#17661) @JCQuintas
+- [charts-pro] Add a `borderRadius` property to `<FunnelChart />` (#17660) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.0`
+
+- [tree view] Bug fix - Escape does not cancel Drag n Drop (#17735) @rita-codes
+- [tree view] Fix keyboard navigation error (#17685) @rita-codes
+- [tree view] Continue cleaning the plugin system (#17386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.3.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.3.0`.
+
+### Docs
+
+- [charts] Add population pyramid demo (#17652) @bernardobelchior
+- [charts] Fix randomised argos test (#17658) @JCQuintas
+- [docs] Make preview messaging consistent in charts @bernardobelchior
+
+### Core
+
+- [code-infra] Avoid `node` types in the built packages (#17533) @LukasTy
+- [code-infra] Add `pkg.pr.new` publishing (#17402) @Janpot
+- [code-infra] Normalize author package in org @oliviertassinari
+- [code-infra] Remove required checkout step (#17729) @JCQuintas
+- [docs-infra] Normalize netlify.toml in org @oliviertassinari
+
 ## 8.2.0
 
 _May 1, 2025_
@@ -424,8 +619,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
+Team members who have contributed to this release: @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
@@ -738,7 +932,7 @@ We'd like to offer a big thanks to the 21 contributors who made this release pos
 - 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
 - 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers
 
-## Breaking changes
+### Breaking changes
 
 - ℹ️ The peer dependency on `@mui/material` has been updated to accept only v7.
   This has been done to increase the adoption rate of ESM.
@@ -751,7 +945,7 @@ Following are all team members who have contributed to this release:
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
-## Alpha release highlights
+### Alpha release highlights
 
 Below are the highlights of the alpha releases leading up to this beta release:
 
@@ -3045,8 +3239,7 @@ We'd like to offer a big thanks to the 4 contributors who made this release poss
 
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@arminmeh, @cherniavskii, @LukasTy, @michelengelen.
+Team members who have contributed to this release: @arminmeh, @cherniavskii, @LukasTy, @michelengelen.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -17,7 +17,7 @@ var _useLicenseVerifier = require("@mui/x-license/useLicenseVerifier");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc0NjA0NjgwMDAwMA==";
+const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/ChartZoomSlider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+export declare function ChartZoomSlider(): React.JSX.Element;

package/ChartZoomSlider/ChartZoomSlider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartZoomSlider = ChartZoomSlider;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _ChartAxisZoomSlider = require("./internals/ChartAxisZoomSlider");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders the zoom slider for all x and y axes that have it enabled.
+ */
+function ChartZoomSlider() {
+  const {
+    xAxisIds,
+    xAxis: xAxes
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxisIds,
+    yAxis: yAxes
+  } = (0, _hooks.useYAxes)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [xAxisIds.map(axisId => {
+      const xAxis = xAxes[axisId];
+      const slider = xAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSlider.ChartAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "x"
+      }, axisId);
+    }), yAxisIds.map(axisId => {
+      const yAxis = yAxes[axisId];
+      const slider = yAxis.zoom?.slider;
+      if (!slider?.enabled) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSlider.ChartAxisZoomSlider, {
+        axisId: axisId,
+        axisDirection: "y"
+      }, axisId);
+    })]
+  });
+}

package/ChartZoomSlider/index.d.ts

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

package/ChartZoomSlider/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  chartAxisZoomSliderHandleClasses: true
+};
+Object.defineProperty(exports, "chartAxisZoomSliderHandleClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartAxisZoomSliderHandleClasses.chartAxisZoomSliderHandleClasses;
+  }
+});
+var _ChartZoomSlider = require("./ChartZoomSlider");
+Object.keys(_ChartZoomSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartZoomSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartZoomSlider[key];
+    }
+  });
+});
+var _chartAxisZoomSliderHandleClasses = require("./internals/chartAxisZoomSliderHandleClasses");

package/ChartZoomSlider/internals/ChartAxisZoomSlider.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+interface ChartZoomSliderProps {
+  /**
+   * The ID of the axis this overview refers to.
+   */
+  axisId: AxisId;
+  /**
+   * The direction of the axis.
+   */
+  axisDirection: 'x' | 'y';
+}
+/**
+ * Renders the zoom slider for a specific axis.
+ * @internal
+ */
+export declare function ChartAxisZoomSlider({
+  axisDirection,
+  axisId
+}: ChartZoomSliderProps): React.JSX.Element | null;
+export declare function calculateZoomStart(newStart: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'minStart' | 'minSpan' | 'maxSpan'>): number;
+export declare function calculateZoomEnd(newEnd: number, currentZoom: ZoomData, options: Pick<DefaultizedZoomOptions, 'maxEnd' | 'minSpan' | 'maxSpan'>): number;
+export {};