@mui/x-charts-pro 8.5.2 → 8.6.0

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.6.0
+
+_Jun 27, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add export menu to charts toolbar
+- 📅 Add `usePickerAdapter` hook to access the date adapter.
+
+  You can use the adapter in your custom components if you need them to work with multiple date libraries — [Learn more](https://mui.com/x/react-date-pickers/custom-components/#access-date-adapter).
+- 🌎 Improve Danish (da-DK) locale
+- 🌎 Improve German (de-DE) locale
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimka123
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.6.0`
+
+- [DataGrid] Fix `label` type in `GridActionsCellItem` type (#18175) @sai6855
+- [DataGrid] Fix grid menu not closing when pressing escape/tab (#18300) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18428) @ShahrazH
+- [l10n] Improve German (de-DE) locale (#18388) @omalyutin
+
+#### `@mui/x-data-grid-pro@8.6.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.6.0`, plus:
+
+- [DataGridPro] Fix lazy loading params calculated from rendering context (#18460) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.6.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.6.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.6.0`
+
+- [pickers] Add `usePickerAdapter` hook (#18457) @LukasTy
+- [pickers] Fix to use latest `value` when updating `lastCommittedValue` in internal state (#18518) @LukasTy
+- [pickers] Use `usePickerAdapter` hook internally instead of `useUtils` (#18465) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.6.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.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.6.0`
+
+- [charts] Add `data-series` to charts legend item (#18414) @bernardobelchior
+- [charts] Add `data-series` to bar charts (#18413) @bernardobelchior
+- [charts] Add `data-series` to elements of line chart (#18409) @bernardobelchior
+- [charts] Add `data-series` to pie charts (#18432) @bernardobelchior
+- [charts] Fix missing key in bar plot (#18502) @bernardobelchior
+- [charts] Split axis utils from main file (#18517) @JCQuintas
+- [charts] Improve touch behavior for polar axis (#18531) @JCQuintas
+- [charts] Add `isElementInside` helper (#18530) @JCQuintas
+
+#### `@mui/x-charts-pro@8.6.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.6.0`, plus:
+
+- [charts-pro] Add export menu to charts toolbar (#18210) @bernardobelchior
+- [charts-pro] Fix export docs mentioning tooltip instead of toolbar (#18490) @bernardobelchior
+- [charts-pro] Fix iframe not being removed after print export (#18500) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.6.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.6.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.6.0`, plus:
+
+- [tree view pro] Fix theme augmentation (#18437) @LukasTy
+
+### Codemod
+
+#### `@mui/x-codemod@8.6.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Document `GridRenderContext` (#18492) @arminmeh
+- [docs] Prevent stale rows to appear on sort and filter change in the lazy loading demo (#18461) @arminmeh
+- [docs][pickers] Update action bar demo to use the `nextOrAccept` action (#18505) @LukasTy
+- [docs] Update indeterminate checkbox section in migration guide (#18229) @michelengelen
+- [docs] Data source nested pagination recipe (#14777) @MBilalShafi
+
+### Core
+
+- [core] Avoid json stringify whole window object (#18512) @vadimka123
+
+### Miscellaneous
+
+- [code-infra] Dynamically get pickers adapters dependencies versions (#18446) @JCQuintas
+- [infra] Adjust inquirer version and usage (#18495) @michelengelen
+- [infra] Use `String.raw` for creating the remote regex (#18462) @michelengelen
+
+## 8.5.3
+
+_Jun 19, 2025_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @arminmeh, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.3`
+
+- [DataGrid] Fix export menu button tooltip being interactive when menu is open (#18327) @bernardobelchior
+- [DataGrid] Fix column menu scroll close (#18065) @alisasanib
+- [DataGrid] Fix page size issue with data source (#18419) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.5.3` [![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.3`, plus:
+
+- [DataGridPro] Ignore missing `rowCount` response when new children are fetched with the data source (#17711) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.3` [![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.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.3`
+
+- [pickers] Add `inputSizeSmall` to classes interface (#18242) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.5.3` [![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.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.3`
+
+- [charts] Add item class to list item around each series in legend (#18411) @bernardobelchior
+- [charts] Allow `tabIndex` in surface and legend (#18344) @JCQuintas
+- [charts] Explore selector typing (#18362) @alexfauquette
+- [charts] Fix highlight with number ids (#18423) @alexfauquette
+- [charts] Make scatter chart use data attributes (#18048) @alexfauquette
+
+#### `@mui/x-charts-pro@8.5.3` [![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.3`, plus:
+
+- [charts-pro] Add data-series to elements of funnel chart (#18067) @JCQuintas
+- [charts-pro] Hide values outside minStart and maxEnd in zoom slider (#18336) @bernardobelchior
+- [charts-pro] Fix `FunnelChart` label positioning with different curves (#18354) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.3` [![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.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.5.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix 404 in charts docs (#18440) @alexfauquette
+- [docs][pickers] Fix adapter version resolving when opening demo to edit (#18363) @LukasTy
+
+### Core
+
+- [core] Fix pnpm valelint error (#18420) @oliviertassinari
+
+### Miscellaneous
+
+- [code-infra] Add back a `Playwright` renovate group (#18397) @LukasTy
+- [code-infra] Setup `CODEOWNERS` for charts repositories (#18418) @JCQuintas
+- [code-infra] Strengthen `URL` usage for test config (#18444) @LukasTy
+- [code-infra] Use `vitest` bundled types (#17758) @JCQuintas
+- [infra] Stabilise tests by removing babel and plugins from vitest (#18341) @JCQuintas
+- [infra] Add automated release PR creation script (#18345) @michelengelen
+
 ## 8.5.2
 
 _Jun 12, 2025_
@@ -94,7 +296,7 @@ Same changes as in `@mui/x-tree-view@8.5.2`.
 - [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] 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
@@ -189,15 +391,6 @@ Same changes as in `@mui/x-tree-view@8.5.1`.
 
 ### 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
@@ -4641,7 +4834,6 @@ No changes since `@mui/x-charts@7.22.2`.
 - [docs] Add `next` version links (#15423) @LukasTy
 - [docs] Use the `loading` state in the demos (#15538) @cherniavskii
 - [docs] Add data caching to lazy loaded detail panel demo (#15506) @cherniavskii
-
 - [code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
 - [docs-infra] Transpile `.ts` demo files (#15421) @KenanYusuf
 - [core] Clarify release version bump strategy (#15536) @cherniavskii

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 = "MTc0OTY3OTIwMDAwMA==";
+const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -24,7 +24,7 @@ function ChartAxisZoomSlider({
 }) {
   const store = (0, _internals.useStore)();
   const drawingArea = (0, _internals.useDrawingArea)();
-  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, axisId);
+  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -40,7 +40,7 @@ function ChartAxisZoomSliderActiveTrack({
     svgRef
   } = (0, _internals.useChartContext)();
   const store = (0, _internals.useStore)();
-  const axis = (0, _internals.useSelector)(store, _internals.selectorChartAxis, axisId);
+  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);
@@ -56,10 +56,6 @@ function ChartAxisZoomSliderActiveTrack({
     if (!activePreviewRect) {
       return;
     }
-
-    /* min and max values of zoom to ensure the pointer anchor in the slider is maintained  */
-    let pointerZoomMin;
-    let pointerZoomMax;
     let prevPointerZoom = 0;
     const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
       const element = svgRef.current;
@@ -67,11 +63,10 @@ function ChartAxisZoomSliderActiveTrack({
         return;
       }
       const point = (0, _internals.getSVGPoint)(element, event);
-      let pointerZoom = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, point);
+      const pointerZoom = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, point);
       if (pointerZoom === null) {
         return;
       }
-      pointerZoom = Math.max(pointerZoomMin, Math.min(pointerZoomMax, pointerZoom));
       const deltaZoom = pointerZoom - prevPointerZoom;
       prevPointerZoom = pointerZoom;
       instance.moveZoomRange(axisId, deltaZoom);
@@ -95,8 +90,6 @@ function ChartAxisZoomSliderActiveTrack({
         return;
       }
       prevPointerZoom = pointerDownZoom;
-      pointerZoomMin = pointerDownZoom - axisZoomData.start;
-      pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
       document.addEventListener('pointerup', onPointerUp);
       activePreviewRect.addEventListener('pointermove', onPointerMove);
     };
@@ -137,23 +130,12 @@ function ChartAxisZoomSliderActiveTrack({
     }
     const point = (0, _internals.getSVGPoint)(element, event);
     instance.setZoomData(prevZoomData => {
-      const {
-        left,
-        top,
-        width,
-        height
-      } = (0, _internals.selectorChartDrawingArea)(store.getSnapshot());
       const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
       return prevZoomData.map(zoom => {
         if (zoom.axisId === axisId) {
-          let newEnd;
-          if (axisDirection === 'x') {
-            newEnd = (point.x - left) / width * 100;
-          } else {
-            newEnd = (top + height - point.y) / height * 100;
-          }
-          if (reverse) {
-            newEnd = 100 - newEnd;
+          const newEnd = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, point);
+          if (newEnd === null) {
+            return zoom;
           }
           return (0, _extends2.default)({}, zoom, {
             end: (0, _zoomUtils.calculateZoomEnd)(newEnd, zoom, zoomOptions)
@@ -171,14 +153,21 @@ function ChartAxisZoomSliderActiveTrack({
   let startThumbY;
   let endThumbX;
   let endThumbY;
+  const {
+    minStart,
+    maxEnd
+  } = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
+  const range = maxEnd - minStart;
+  const zoomStart = Math.max(minStart, zoomData.start);
+  const zoomEnd = Math.min(zoomData.end, maxEnd);
   if (axisDirection === 'x') {
-    previewX = zoomData.start / 100 * drawingArea.width;
+    previewX = (zoomStart - minStart) / range * drawingArea.width;
     previewY = 0;
-    previewWidth = drawingArea.width * (zoomData.end - zoomData.start) / 100;
+    previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
     previewHeight = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
-    startThumbX = zoomData.start / 100 * drawingArea.width;
+    startThumbX = (zoomStart - minStart) / range * drawingArea.width;
     startThumbY = 0;
-    endThumbX = zoomData.end / 100 * drawingArea.width;
+    endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
     endThumbY = 0;
     if (reverse) {
       previewX = drawingArea.width - previewX - previewWidth;
@@ -189,13 +178,13 @@ function ChartAxisZoomSliderActiveTrack({
     endThumbX -= previewThumbWidth / 2;
   } else {
     previewX = 0;
-    previewY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
     previewWidth = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
-    previewHeight = drawingArea.height * (zoomData.end - zoomData.start) / 100;
+    previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
     startThumbX = 0;
-    startThumbY = drawingArea.height - zoomData.start / 100 * drawingArea.height;
+    startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
     endThumbX = 0;
-    endThumbY = drawingArea.height - zoomData.end / 100 * drawingArea.height;
+    endThumbY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
     if (reverse) {
       previewY = drawingArea.height - previewY - previewHeight;
       startThumbY = drawingArea.height - startThumbY;

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -63,17 +63,10 @@ function ChartAxisZoomSliderTrack(_ref) {
       return;
     }
     const pointerDownPoint = (0, _internals.getSVGPoint)(element, event);
-    let zoomFromPointerDown = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerDownPoint);
+    const zoomFromPointerDown = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerDownPoint);
     if (zoomFromPointerDown === null) {
       return;
     }
-    const {
-      minStart,
-      maxEnd
-    } = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), axisId);
-
-    // Ensure the zoomFromPointerDown is within the min and max range
-    zoomFromPointerDown = Math.max(Math.min(zoomFromPointerDown, maxEnd), minStart);
     const onPointerMove = (0, _rafThrottle.rafThrottle)(function onPointerMove(pointerMoveEvent) {
       const pointerMovePoint = (0, _internals.getSVGPoint)(element, pointerMoveEvent);
       const zoomFromPointerMove = (0, _zoomUtils.calculateZoomFromPoint)(store.getSnapshot(), axisId, pointerMovePoint);

package/ChartZoomSlider/internals/zoom-utils.d.ts

@@ -1,4 +1,6 @@
-import { AxisId, ChartState, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { AxisId, ChartState, DefaultedXAxis, DefaultedYAxis, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { ChartDrawingArea } from '@mui/x-charts/hooks';
 export declare function calculateZoomFromPoint(state: ChartState<any>, axisId: AxisId, point: DOMPoint): number | null;
+export declare function calculateZoomFromPointImpl(drawingArea: ChartDrawingArea, axis: Pick<DefaultedXAxis | DefaultedYAxis, 'position' | 'reverse'>, zoomOptions: Pick<DefaultizedZoomOptions, 'minStart' | 'maxEnd'>, point: Pick<DOMPoint, 'x' | 'y'>): number;
 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;

package/ChartZoomSlider/internals/zoom-utils.js

@@ -5,28 +5,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculateZoomEnd = calculateZoomEnd;
 exports.calculateZoomFromPoint = calculateZoomFromPoint;
+exports.calculateZoomFromPointImpl = calculateZoomFromPointImpl;
 exports.calculateZoomStart = calculateZoomStart;
 var _internals = require("@mui/x-charts/internals");
 function calculateZoomFromPoint(state, axisId, point) {
+  const axis = (0, _internals.selectorChartRawAxis)(state, axisId);
+  if (!axis) {
+    return null;
+  }
+  return calculateZoomFromPointImpl((0, _internals.selectorChartDrawingArea)(state), axis, (0, _internals.selectorChartAxisZoomOptionsLookup)(state, axisId), point);
+}
+function calculateZoomFromPointImpl(drawingArea, axis, zoomOptions, point) {
   const {
     left,
     top,
     height,
     width
-  } = (0, _internals.selectorChartDrawingArea)(state);
-  const axis = (0, _internals.selectorChartRawAxis)(state, axisId);
-  if (!axis) {
-    return null;
-  }
+  } = drawingArea;
+  const {
+    minStart,
+    maxEnd
+  } = zoomOptions;
   const axisDirection = axis.position === 'right' || axis.position === 'left' ? 'y' : 'x';
+  const range = maxEnd - minStart;
   let pointerZoom;
   if (axisDirection === 'x') {
-    pointerZoom = (point.x - left) / width * 100;
+    pointerZoom = (point.x - left) / width * range;
   } else {
-    pointerZoom = (top + height - point.y) / height * 100;
+    pointerZoom = (top + height - point.y) / height * range;
   }
   if (axis.reverse) {
-    pointerZoom = 100 - pointerZoom;
+    pointerZoom = maxEnd - pointerZoom;
+  } else {
+    pointerZoom += minStart;
   }
   return pointerZoom;
 }

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartImageExportOptions } from "../internals/plugins/useChartProExport/index.js";
+import { ChartsSlotPropsPro } from "../internals/material/index.js";
+export interface ChartsToolbarImageExportOptions extends Omit<ChartImageExportOptions, 'type'>, Required<Pick<ChartImageExportOptions, 'type'>> {}
+export type ChartsToolbarImageExportTriggerProps = ChartsSlotPropsPro['baseButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotPropsPro['baseButton']>;
+  /**
+   * The options to apply on the image export.
+   * @demos
+   *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
+   */
+  options?: ChartsToolbarImageExportOptions;
+};
+/**
+ * A button that triggers an image export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+declare const ChartsToolbarImageExportTrigger: React.ForwardRefExoticComponent<ChartsToolbarImageExportTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsToolbarImageExportTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarImageExportTrigger };

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarImageExportTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _internals = require("@mui/x-charts/internals");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "options", "onClick"];
+/**
+ * A button that triggers an image export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarImageExportTrigger = exports.ChartsToolbarImageExportTrigger = (0, _forwardRef.forwardRef)(function ChartsToolbarImageExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const apiRef = (0, _context.useChartApiContext)();
+  const handleClick = event => {
+    apiRef.current.exportAsImage(options);
+    onClick?.(event);
+  };
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarImageExportTrigger.displayName = "ChartsToolbarImageExportTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.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,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  /**
+   * The options to apply on the image export.
+   * @demos
+   *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
+   */
+  options: _propTypes.default.shape({
+    fileName: _propTypes.default.string,
+    quality: _propTypes.default.number,
+    type: _propTypes.default.string.isRequired
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number
+} : void 0;

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartPrintExportOptions } from "../internals/plugins/useChartProExport/index.js";
+import { ChartsSlotPropsPro } from "../internals/material/index.js";
+export interface ChartsToolbarPrintExportOptions extends ChartPrintExportOptions {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+}
+export type ChartsToolbarPrintExportTriggerProps = ChartsSlotPropsPro['baseButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotPropsPro['baseButton']>;
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+   */
+  options?: ChartPrintExportOptions;
+};
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+declare const ChartsToolbarPrintExportTrigger: React.ForwardRefExoticComponent<ChartsToolbarPrintExportTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsToolbarPrintExportTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarPrintExportTrigger };

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarPrintExportTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _internals = require("@mui/x-charts/internals");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "options", "onClick"];
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarPrintExportTrigger = exports.ChartsToolbarPrintExportTrigger = (0, _forwardRef.forwardRef)(function ChartsToolbarPrintExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const apiRef = (0, _context.useChartApiContext)();
+  const handleClick = event => {
+    apiRef.current.exportAsPrint(options);
+    onClick?.(event);
+  };
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarPrintExportTrigger.displayName = "ChartsToolbarPrintExportTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.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,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+   */
+  options: _propTypes.default.shape({
+    fileName: _propTypes.default.string
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number
+} : void 0;