@mui/x-charts-pro 8.5.0 → 8.5.2

package/BarChartPro/BarChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
-export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/BarChartPro/BarChartPro.js

@@ -80,7 +80,7 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
   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)(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: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.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, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]

package/CHANGELOG.md

@@ -5,6 +5,210 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.2
+
+_Jun 12, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Improve Data Grid selectors performance
+- 🐞 Fix `useSyncExternalStore` import error in React 17
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @noobyogi0010.
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari, @prakhargupta1, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.2`
+
+- [DataGrid] Improve selectors performance (#18234) @romgrk
+- [DataGrid] Fix data grid palette when using CSS vars (#18310) @KenanYusuf
+- [DataGrid] Ignore data source request if the grid got unmounted (#18268) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.5.2` [![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.2`, plus:
+
+- [DataGridPro] Fix flex column width if it is a pinned column (#18293) @alisasanib
+- [DataGridPro] Fix inconsistent filtering results with aggregation (#17954) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.5.2` [![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.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.2`
+
+- [pickers] Add `PickerDay2` and `DateRangePickerDay2` components (#15921) @noraleonte
+- [pickers] Fix `hiddenLabel` prop propagation (#18195) @noobyogi0010
+
+#### `@mui/x-date-pickers-pro@8.5.2` [![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.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.2`
+
+- [charts] Add a default value formatter for continuous scales (#18178) @bernardobelchior
+- [charts] Add margin-bottom to charts toolbar (#18326) @bernardobelchior
+- [charts] Fix grid with band scale (#18295) @alexfauquette
+- [charts] Remove unnecessary style changes in tests (#18317) @JCQuintas
+- [charts] Remove `sx` prop merging from `useComponentRenderer` (#18235) @bernardobelchior
+- [charts] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.2` [![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.2`, plus:
+
+- [charts-pro] Document zoom slider tooltip value formatting (#18261) @bernardobelchior
+- [charts-pro] Funnel `gap` prop does not impact the drawing area (#18233) @JCQuintas
+- [charts-pro] Use `ChartsToolbarPro` types in pro charts (#18243) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.2`
+
+- [tree-view] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-tree-view-pro@8.5.2` [![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.2`.
+
+### Docs
+
+- [docs] Add toolbar custom trigger and panel recipe (#18297) @KenanYusuf
+- [docs] Copyedit the Priority support page (#18311) @mapache-salvaje
+- [docs] Remove confusing opt-out mention in telemetry docs (#18257) @prakhargupta1
+- [docs] Revise the Master Detail doc (#17927) @mapache-salvaje
+- [docs] Revise the list view doc (#17928) @mapache-salvaje
+- [docs] Audit and revise the Pro column docs (#17844) @mapache-salvaje
+- [docs] Add some more context on Heatmap (#18256) @oliviertassinari
+- [x-telemetry] Reduce Telemetry overhead (#18292) @oliviertassinari
+- [code-infra] Align Node version used in CI to v22 (#18319) @LukasTy
+- [code-infra] Fix pkg.pr.new publishing (#18316) @bernardobelchior
+- [code-infra] Revert `React` to `19.0.0` (#18265) @LukasTy
+- [code-infra] Use `catalog` for reused dependencies (#18302) @LukasTy
+- [infra] Remove unused karma/mocha deps and files (#18340) @JCQuintas
+- [infra] Update github label references to use 'scope' instead of 'component' (#18260) @michelengelen
+- [infra] Use a single browser server in CI (#18230) @JCQuintas
+
+## 8.5.1
+
+<!-- generated comparing v8.5.0..master -->
+
+_Jun 5, 2025_
+
+We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Allow exporting pie charts
+- 📚 Documentation improvements
+- 🌎 Improve Portuguese (ptPT) translations on the Data Grid
+- 🌎 Improve Portuguese (ptPT, ptBR) translations on Charts
+- 🌎 Improve Arabic (ar-SD) locale
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions: @moosekebab, @TiagoPortfolio.
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @arminmeh.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.1`
+
+- [DataGrid] Fix `registerPipeProcessor()` for Node v20 (#18241) @arminmeh
+- [DataGrid] Fix background color in column header filler cells (#18188) @KenanYusuf
+- [DataGrid] Keep pipe pre-processors execution order when callback reference changes (#17558) @arminmeh
+- [DataGrid] Use `useComponentRenderer` from x-internals (#18203) @bernardobelchior
+- [l10n] Improve Arabic (ar-SD) locale (#17959) @moosekebab
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#18064) @TiagoPortfolio
+
+#### `@mui/x-data-grid-pro@8.5.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.5.1`, plus:
+
+- [DataGridPro] Skip rendering detail panels of the rows turned into skeleton rows with lazy loading (#17958) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.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.5.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.1`
+
+- [pickers] Fix `transformOrigin` resolving based on popper `placement` (#18206) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.5.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.5.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.1`
+
+- [charts] Allow skipping tooltip render (#18050) @alexfauquette
+- [charts] Fix act warnings in toolbar tests (#18212) @JCQuintas
+- [charts] Fix prop typo in `extendVertically` (#18211) @JCQuintas
+- [charts] Fix responsive height for ChartsWrapper (#18183) @alexfauquette
+- [charts] Improve charts toolbar accessibility (#18056) @bernardobelchior
+- [charts] Let line series propagate null from the dataset (#18223) @alexfauquette
+- [l10n] Add Portuguese locales for charts (pt-PT, pt-BR) (#18069) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.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.5.1`, plus:
+
+- [charts-pro] Add `linear-sharp` curve as alternative to square edge (#17966) @JCQuintas
+- [charts-pro] Add correct classes to `FunnelSectionLabel` (#18061) @JCQuintas
+- [charts-pro] Allow exporting a pie chart (#18063) @bernardobelchior
+- [charts-pro] Fix initial render for zoom slider selection (#18208) @bernardobelchior
+- [charts-pro] Fix props being passed to DOM in FunnelChart (#18192) @JCQuintas
+- [charts-pro] Show axis value in zoom slider tooltip (#18054) @bernardobelchior
+- [charts-pro] Render the toolbar in the heatmap chart (#18247) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.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.5.1`.
+
+### Docs
+
+- [docs] Update `valueFormatter` signature in migration guide (#18226) @michelengelen
+
+### Core
+
+- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
+- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
+- chore(deps): bump babel (#18157) @renovate[bot]
+- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
+- chore(deps): bump material ui (#17802) @renovate[bot]
+- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
+- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
+- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
+- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
+- [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
+- [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
+- [code-infra] Remove `istanbul` references (#18194) @JCQuintas
+- [code-infra] Remove codesandbox:ci (#18179) @JCQuintas
+- [code-infra] Replace `mocha` with `vitest` on e2e and regression tests (#18071) @JCQuintas
+- [code-infra] Upgrade @mui/internal-test-utils (#18191) @JCQuintas
+- [code-infra] Use vitest for `no-direct-state-access` tests (#18209) @JCQuintas
+- [infra] Improve test setup (#18228) @LukasTy
+- [infra] Update bug and feature request templates to standardize label types (#18198) @michelengelen
+- [infra] Use `playwright` docker image (#18186) @LukasTy
+
 ## 8.5.0
 
 _May 29, 2025_

package/ChartContainerPro/ChartProApi.d.ts

@@ -6,6 +6,7 @@ import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins
 import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
 import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
 type PluginsPerSeriesType = {
   heatmap: HeatmapPluginsSignatures;
   line: LineChartProPluginsSignatures;
@@ -13,6 +14,7 @@ type PluginsPerSeriesType = {
   bar: BarChartProPluginsSignatures;
   funnel: FunnelChartPluginsSignatures;
   radar: RadarChartProPluginsSignatures;
+  pie: PieChartProPluginSignatures;
   composition: DefaultPluginSignatures;
 };
 /**

package/ChartDataProviderPro/ChartDataProviderPro.js

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

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -6,7 +6,6 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
   zoomData: ZoomData;
   reverse?: boolean;
-  valueFormatter?: (value: number) => string;
   showTooltip: boolean;
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
@@ -17,7 +16,6 @@ export declare function ChartAxisZoomSliderActiveTrack({
   axisPosition,
   zoomData,
   reverse,
-  valueFormatter,
   showTooltip,
   onPointerEnter,
   onPointerLeave

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -25,17 +25,12 @@ const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
     cursor: 'grab'
   }
 }));
-const formatter = Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 0
-});
-const zoomValueFormatter = value => formatter.format(value);
 function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
   zoomData,
   reverse,
-  valueFormatter = zoomValueFormatter,
   showTooltip,
   onPointerEnter,
   onPointerLeave
@@ -45,10 +40,15 @@ function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = (0, _internals.useChartContext)();
   const store = (0, _internals.useStore)();
+  const axis = (0, _internals.useSelector)(store, _internals.selectorChartAxis, axisId);
   const drawingArea = (0, _internals.useDrawingArea)();
   const activePreviewRectRef = React.useRef(null);
   const [startThumbEl, setStartThumbEl] = React.useState(null);
   const [endThumbEl, setEndThumbEl] = React.useState(null);
+  const {
+    tooltipStart,
+    tooltipEnd
+  } = getZoomSliderTooltipsText(axis, drawingArea);
   const previewThumbWidth = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_WIDTH : _constants.ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? _constants.ZOOM_SLIDER_THUMB_HEIGHT : _constants.ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -238,14 +238,47 @@ function ChartAxisZoomSliderActiveTrack({
       placement: "end"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
       anchorEl: startThumbEl,
-      open: showTooltip,
+      open: showTooltip && tooltipStart !== '',
       placement: axisPosition,
-      children: valueFormatter(zoomData.start)
+      children: tooltipStart
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipZoomSliderValue.ChartsTooltipZoomSliderValue, {
       anchorEl: endThumbEl,
-      open: showTooltip,
+      open: showTooltip && tooltipEnd !== '',
       placement: axisPosition,
-      children: valueFormatter(zoomData.end)
+      children: tooltipEnd
     })]
   });
+}
+
+/**
+ * Returns the text for the tooltips on the thumbs of the zoom slider.
+ */
+function getZoomSliderTooltipsText(axis, drawingArea) {
+  const formatValue = value => {
+    if (axis.valueFormatter) {
+      return axis.valueFormatter(value, {
+        location: 'zoom-slider-tooltip',
+        scale: axis.scale
+      });
+    }
+    return `${value}`;
+  };
+  const axisDirection = axis.position === 'top' || axis.position === 'bottom' ? 'x' : 'y';
+  let start = axisDirection === 'x' ? drawingArea.left : drawingArea.top;
+  const size = axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+  let end = start + size;
+  if (axisDirection === 'y') {
+    [start, end] = [end, start]; // Invert for y-axis
+  }
+  if (axis.reverse) {
+    [start, end] = [end, start]; // Reverse the start and end if the axis is reversed
+  }
+  const startValue = (0, _internals.invertScale)(axis.scale, axis.data ?? [], start) ?? axis.data?.at(0);
+  const endValue = (0, _internals.invertScale)(axis.scale, axis.data ?? [], end) ?? axis.data?.at(-1);
+  const tooltipStart = formatValue(startValue);
+  const tooltipEnd = formatValue(endValue);
+  return {
+    tooltipStart,
+    tooltipEnd
+  };
 }

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -74,14 +74,12 @@ function ChartAxisZoomSliderTrack(_ref) {
 
     // Ensure the zoomFromPointerDown is within the min and max range
     zoomFromPointerDown = Math.max(Math.min(zoomFromPointerDown, maxEnd), minStart);
-    let pointerMoved = false;
     const onPointerMove = (0, _rafThrottle.rafThrottle)(function onPointerMove(pointerMoveEvent) {
       const pointerMovePoint = (0, _internals.getSVGPoint)(element, pointerMoveEvent);
       const zoomFromPointerMove = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerMovePoint);
       if (zoomFromPointerMove === null) {
         return;
       }
-      pointerMoved = true;
       const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
       instance.setAxisZoomData(axisId, prevZoomData => {
         if (zoomFromPointerMove > zoomFromPointerDown) {
@@ -122,22 +120,6 @@ function ChartAxisZoomSliderTrack(_ref) {
       document.removeEventListener('pointerup', onPointerUp);
       setIsSelecting(false);
       onSelectEnd?.();
-      if (pointerMoved) {
-        return;
-      }
-
-      // If the pointer didn't move, we still need to respect the zoom constraints (minSpan, etc.)
-      // In that case, we assume the start to be the pointerZoom and calculate the end.
-      const pointerUpPoint = (0, _internals.getSVGPoint)(element, pointerUpEvent);
-      const zoomFromPointerUp = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerUpPoint);
-      if (zoomFromPointerUp === null) {
-        return;
-      }
-      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
-      instance.setAxisZoomData(axisId, prev => (0, _extends2.default)({}, prev, {
-        start: zoomFromPointerUp,
-        end: (0, _zoomUtils.calculateZoomEnd)(zoomFromPointerUp, prev, zoomOptions)
-      }));
     };
     event.preventDefault();
     event.stopPropagation();
@@ -146,10 +128,6 @@ function ChartAxisZoomSliderTrack(_ref) {
     rect.addEventListener('pointermove', onPointerMove);
     onSelectStart?.();
     setIsSelecting(true);
-    instance.setAxisZoomData(axisId, prev => (0, _extends2.default)({}, prev, {
-      start: zoomFromPointerDown,
-      end: zoomFromPointerDown
-    }));
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderTrack, (0, _extends2.default)({
     ref: ref,

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,9 +1,7 @@
 import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
+export interface ChartsToolbarProProps extends ChartsToolbarProps {}
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: React.PropsWithChildren<ChartsToolbarProps>): React.JSX.Element | null;
-export declare namespace ChartsToolbarPro {
-  var propTypes: any;
-}
+export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -8,13 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsToolbarPro = ChartsToolbarPro;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Toolbar = require("@mui/x-charts/Toolbar");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-var _ChartsToolbarZoomInButton = require("./ChartsToolbarZoomInButton");
-var _ChartsToolbarZoomOutButton = require("./ChartsToolbarZoomOutButton");
+var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
+var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * The chart toolbar component for the pro package.
@@ -38,13 +37,15 @@ function ChartsToolbarPro(props) {
     const ZoomInIcon = slots.zoomInIcon;
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInButton.ChartsToolbarZoomInButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({}, slotProps.zoomInIcon))
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutButton.ChartsToolbarZoomOutButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({}, slotProps.zoomOutIcon))
       })
     }), "zoom-out"));
@@ -55,11 +56,4 @@ function ChartsToolbarPro(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
     children: children
   }));
-}
-process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  className: _propTypes.default.string
-} : void 0;
+}

package/ChartsToolbarPro/{ChartsToolbarZoomInButton.d.ts → ChartsToolbarZoomInTrigger.d.ts}

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { ChartsSlotProps } from '@mui/x-charts/internals';
 import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-interface ChartsToolbarZoomInButtonProps {
+interface ChartsToolbarZoomInTriggerProps {
   /**
    * A function to customize the rendering of the component.
    */
-  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+  render?: RenderProp<ChartsSlotProps['baseButton']>;
 }
 /**
- * The zoom-in button for the chart toolbar.
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
  */
-declare const ChartsToolbarZoomInButton: React.ForwardRefExoticComponent<ChartsToolbarZoomInButtonProps & {
+declare const ChartsToolbarZoomInTrigger: React.ForwardRefExoticComponent<ChartsToolbarZoomInTriggerProps & {
   children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-export { ChartsToolbarZoomInButton };
+export { ChartsToolbarZoomInTrigger };

package/ChartsToolbarPro/{ChartsToolbarZoomInButton.js → ChartsToolbarZoomInTrigger.js}

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsToolbarZoomInButton = void 0;
+exports.ChartsToolbarZoomInTrigger = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -17,9 +17,10 @@ var _useChartProZoom = require("../internals/plugins/useChartProZoom");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render"];
 /**
- * The zoom-in button for the chart toolbar.
+ * A button that zooms the chart in.
+ * It renders the `baseButton` slot.
  */
-const ChartsToolbarZoomInButton = exports.ChartsToolbarZoomInButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInButton(_ref, ref) {
+const ChartsToolbarZoomInTrigger = exports.ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomInTrigger(_ref, ref) {
   let {
       render
     } = _ref,
@@ -33,7 +34,7 @@ const ChartsToolbarZoomInButton = exports.ChartsToolbarZoomInButton = /*#__PURE_
     store
   } = (0, _internals.useChartContext)();
   const disabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartCanZoomIn);
-  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),
     disabled
   }, other, {
@@ -43,8 +44,8 @@ const ChartsToolbarZoomInButton = exports.ChartsToolbarZoomInButton = /*#__PURE_
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInButton.displayName = "ChartsToolbarZoomInButton";
-process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInButton.propTypes = {
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomInTrigger.displayName = "ChartsToolbarZoomInTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomInTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/ChartsToolbarPro/{ChartsToolbarZoomOutButton.d.ts → ChartsToolbarZoomOutTrigger.d.ts}

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { ChartsSlotProps } from '@mui/x-charts/internals';
 import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-interface ChartsToolbarZoomOutButtonProps {
+interface ChartsToolbarZoomOutTriggerProps {
   /**
    * A function to customize the rendering of the component.
    */
-  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+  render?: RenderProp<ChartsSlotProps['baseButton']>;
 }
 /**
- * The zoom-out button for the chart toolbar.
+ * A button that zooms the chart out.
+ * It renders the `baseButton` slot.
  */
-declare const ChartsToolbarZoomOutButton: React.ForwardRefExoticComponent<ChartsToolbarZoomOutButtonProps & {
+declare const ChartsToolbarZoomOutTrigger: React.ForwardRefExoticComponent<ChartsToolbarZoomOutTriggerProps & {
   children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
-export { ChartsToolbarZoomOutButton };
+export { ChartsToolbarZoomOutTrigger };

package/ChartsToolbarPro/{ChartsToolbarZoomOutButton.js → ChartsToolbarZoomOutTrigger.js}

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsToolbarZoomOutButton = void 0;
+exports.ChartsToolbarZoomOutTrigger = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -17,9 +17,10 @@ var _useChartProZoom = require("../internals/plugins/useChartProZoom");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render"];
 /**
- * The zoom-out button for the chart toolbar.
+ * A button that zooms the chart out.
+ * It renders the `baseButton` slot.
  */
-const ChartsToolbarZoomOutButton = exports.ChartsToolbarZoomOutButton = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutButton(_ref, ref) {
+const ChartsToolbarZoomOutTrigger = exports.ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function ChartsToolbarZoomOutTrigger(_ref, ref) {
   let {
       render
     } = _ref,
@@ -33,7 +34,7 @@ const ChartsToolbarZoomOutButton = exports.ChartsToolbarZoomOutButton = /*#__PUR
     store
   } = (0, _internals.useChartContext)();
   const disabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartCanZoomOut);
-  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),
     disabled
   }, other, {
@@ -43,8 +44,8 @@ const ChartsToolbarZoomOutButton = exports.ChartsToolbarZoomOutButton = /*#__PUR
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") ChartsToolbarZoomOutButton.displayName = "ChartsToolbarZoomOutButton";
-process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutButton.propTypes = {
+if (process.env.NODE_ENV !== "production") ChartsToolbarZoomOutTrigger.displayName = "ChartsToolbarZoomOutTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarZoomOutTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/ChartsToolbarPro/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProProps } from "./ChartsToolbarPro.js";
+export interface ChartsToolbarProSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProProps>;
+}
+export interface ChartsToolbarProSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProProps>;
+}

package/ChartsToolbarPro/Toolbar.types.js

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

package/ChartsToolbarPro/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./ChartsToolbarPro.js";
-export * from "./ChartsToolbarZoomInButton.js";
-export * from "./ChartsToolbarZoomOutButton.js";
+export * from "./ChartsToolbarZoomInTrigger.js";
+export * from "./ChartsToolbarZoomOutTrigger.js";