@mui/x-charts-pro 8.17.0 → 8.18.0

package/CHANGELOG.md

@@ -5,6 +5,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.18.0
+
+<!-- generated comparing v8.17.0..master -->
+
+_Nov 13, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- Add `barLabelPlacement` property to customize the bar label position in bar charts, enabling labels to be placed above bars.
+
+  ![image](https://github.com/user-attachments/assets/4bc3a75b-74b8-4c6d-896b-5f5bf837bcda)
+
+- Add `source` property to the date/time picker lifecycle and event handler context, enabling clearer differentiation between changes initiated by the picker UI and those from direct field input.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@htollefsen, @sai6855, @Sigdriv
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @JCQuintas, @michelengelen, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.18.0`
+
+- [DataGrid] Allow default event in the column action cell item click event handler (#20272) @arminmeh
+- [DataGrid] Remove unnecessary generic from `useGridApiRef` (#20277) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.18.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.18.0`.
+
+#### `@mui/x-data-grid-premium@8.18.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.18.0`, plus:
+
+- [DataGridPremium] Return the correct `cellParams` value from the aggregation cells (#20224) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.18.0`
+
+- [pickers] Keep invalid date state consistent (#20040) @michelengelen
+- [pickers] Adds new `source` property to `onChange` and `onAccept` context object (#20234) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.18.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.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.18.0`
+
+- [charts] Add prop for positioning a bar label (#20194) @Sigdriv
+- [charts] Fix applying dark mode styles in `ChartAxisZoomSliderThumb` (#20232) @sai6855
+
+#### `@mui/x-charts-pro@8.18.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.18.0`, plus:
+
+- [charts-pro] Allow specifying Content Security Policy nonce on export (#20053) @bernardobelchior
+- [charts-pro] Fix applying dark mode styles to slider (#20220) @sai6855
+- [charts-pro] Sankey should respect node order (#20065) @JCQuintas
+
+#### `@mui/x-charts-premium@8.18.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.18.0`
+
+- [tree view] Prepare tests for the new store structure (#20225) @flaviendelangle
+- [tree view] Prepare the item plugin files for the store migration (#20240) @flaviendelangle
+- [tree view] Use `TreeItemId` type instead of raw string (#20233) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.18.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.18.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.18.0`
+
+Internal changes.
+
+### Docs
+
+- [charts] Add a demo for a custom tick label (#20073) @prakhargupta1
+- [charts] Create `useAxes()` hook documentation page (#20229) @JCQuintas
+- [charts] Fix logo alignment (#20228) @JCQuintas
+- [charts] Fixes typo in import example (#20236) @htollefsen
+- [Data Grid] Add recipe for cursor pagination with data source (#19700) @siriwatknp
+- [Data Grid] Add a demo for pinned rows aggregation (#20198) @cherniavskii
+
+### Core
+
+- [docs-infra] Use deployment config from docs-infra package (#20243) @brijeshb42
+
 ## 8.17.0
 
 _Nov 5, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

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

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -24,8 +24,11 @@ const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'preview'
 })(({
   theme
-}) => ({
-  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+}) => (0, _extends2.default)({
+  fill: (theme.vars || theme).palette.grey[600]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[500]
+}), {
   cursor: 'grab',
   variants: [{
     props: {

package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartAxisZoomSliderThumb = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
@@ -21,10 +21,13 @@ const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"
 const Rect = (0, _styles.styled)('rect')(({
   theme
 }) => ({
-  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.root}`]: {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[300] : (theme.vars || theme).palette.common.white,
-    stroke: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500]
-  },
+  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.root}`]: (0, _extends2.default)({
+    fill: (theme.vars || theme).palette.common.white,
+    stroke: (theme.vars || theme).palette.grey[500]
+  }, theme.applyStyles('dark', {
+    fill: (theme.vars || theme).palette.grey[300],
+    stroke: (theme.vars || theme).palette.grey[600]
+  })),
   [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.horizontal}`]: {
     cursor: 'ew-resize'
   },

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartAxisZoomSliderTrack = ChartAxisZoomSliderTrack;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _styles = require("@mui/material/styles");
@@ -23,8 +23,11 @@ const ZoomSliderTrack = (0, _styles.styled)('rect', {
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
 })(({
   theme
-}) => ({
-  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300],
+}) => (0, _extends2.default)({
+  fill: (theme.vars || theme).palette.grey[300]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[800]
+}), {
   cursor: 'pointer',
   variants: [{
     props: {

package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -66,6 +66,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
   options: _propTypes.default.shape({
     copyStyles: _propTypes.default.bool,
     fileName: _propTypes.default.string,
+    nonce: _propTypes.default.string,
     onBeforeExport: _propTypes.default.func,
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired

package/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -66,6 +66,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
   options: _propTypes.default.shape({
     copyStyles: _propTypes.default.bool,
     fileName: _propTypes.default.string,
+    nonce: _propTypes.default.string,
     onBeforeExport: _propTypes.default.func
   }),
   /**

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -160,6 +160,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
   imageExportOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
     copyStyles: _propTypes.default.bool,
     fileName: _propTypes.default.string,
+    nonce: _propTypes.default.string,
     onBeforeExport: _propTypes.default.func,
     quality: _propTypes.default.number,
     type: _propTypes.default.string.isRequired

package/SankeyChart/calculateSankeyLayout.js

@@ -30,11 +30,11 @@ function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
     width: nodeWidth = 15,
     padding: nodePadding = 10,
     align: nodeAlign = 'justify',
-    sort: nodeSort = null
+    sort: nodeSort
   } = nodeOptions ?? {};
   const {
     color: linkColor = 'source',
-    sort: linkSort = null,
+    sort: linkSort,
     curveCorrection = 10
   } = linkOptions ?? {};
   const {
@@ -59,12 +59,21 @@ function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
   };
 
   // Create the sankey layout generator
-  let sankeyGenerator = (0, _d3Sankey.sankey)().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign((0, _utils.getNodeAlignFunction)(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
-  if (nodeSort) {
-    sankeyGenerator = sankeyGenerator.nodeSort(nodeSort);
+  const sankeyGenerator = (0, _d3Sankey.sankey)().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign((0, _utils.getNodeAlignFunction)(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
+
+  // For 'auto' or undefined, don't set anything (use d3-sankey default behavior)
+  if (typeof nodeSort === 'function') {
+    sankeyGenerator.nodeSort(nodeSort);
+  } else if (nodeSort === 'fixed') {
+    // Null is not accepted by the types.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/73953
+    sankeyGenerator.nodeSort(null);
   }
-  if (linkSort) {
-    sankeyGenerator = sankeyGenerator.linkSort(linkSort);
+  if (typeof linkSort === 'function') {
+    sankeyGenerator.linkSort(linkSort);
+  } else if (linkSort === 'fixed') {
+    // Null is not accepted by the types.
+    sankeyGenerator.linkSort(null);
   }
 
   // Generate the layout

package/SankeyChart/sankey.types.d.ts

@@ -74,12 +74,19 @@ export type SankeyNodeOptions = {
    */
   showLabels?: boolean;
   /**
-   * Custom sort function for nodes
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   *
    * @param {SankeyLayoutNode} a - First node to compare
    * @param {SankeyLayoutNode} b - Second node to compare
    * @returns {number} Comparison result
+   *
+   * @default 'auto'
    */
-  sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
 } & SankeyNodeHighlightScope;
 export type SankeyLinkOptions = {
   /**
@@ -99,12 +106,18 @@ export type SankeyLinkOptions = {
    */
   showValues?: boolean;
   /**
-   * Custom sort function for links
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   *
    * @param {SankeyLayoutLink} a - First link to compare
    * @param {SankeyLayoutLink} b - Second link to compare
    * @returns {number} Comparison result
+     * @default 'auto'
    */
-  sort?: (a: SankeyLayoutLink, b: SankeyLayoutLink) => number | null;
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
   /**
    * Applies the given number to the X dimension of the control points of the link's curve function.
    * This can create better looking links between nodes, but is dependent on the graph layout.

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

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

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -17,8 +17,11 @@ const ZoomSliderActiveTrackRect = styled('rect', {
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'preview'
 })(({
   theme
-}) => ({
-  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+}) => _extends({
+  fill: (theme.vars || theme).palette.grey[600]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[500]
+}), {
   cursor: 'grab',
   variants: [{
     props: {

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -14,10 +14,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Rect = styled('rect')(({
   theme
 }) => ({
-  [`&.${chartAxisZoomSliderThumbClasses.root}`]: {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[300] : (theme.vars || theme).palette.common.white,
-    stroke: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500]
-  },
+  [`&.${chartAxisZoomSliderThumbClasses.root}`]: _extends({
+    fill: (theme.vars || theme).palette.common.white,
+    stroke: (theme.vars || theme).palette.grey[500]
+  }, theme.applyStyles('dark', {
+    fill: (theme.vars || theme).palette.grey[300],
+    stroke: (theme.vars || theme).palette.grey[600]
+  })),
   [`&.${chartAxisZoomSliderThumbClasses.horizontal}`]: {
     cursor: 'ew-resize'
   },

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 import * as React from 'react';
 import { useChartContext, getSVGPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
@@ -16,8 +16,11 @@ const ZoomSliderTrack = styled('rect', {
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
 })(({
   theme
-}) => ({
-  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300],
+}) => _extends({
+  fill: (theme.vars || theme).palette.grey[300]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[800]
+}), {
   cursor: 'pointer',
   variants: [{
     props: {

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -58,6 +58,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
   options: PropTypes.shape({
     copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    nonce: PropTypes.string,
     onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -58,6 +58,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
   options: PropTypes.shape({
     copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    nonce: PropTypes.string,
     onBeforeExport: PropTypes.func
   }),
   /**

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -153,6 +153,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
   imageExportOptions: PropTypes.arrayOf(PropTypes.shape({
     copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    nonce: PropTypes.string,
     onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired

package/esm/SankeyChart/calculateSankeyLayout.js

@@ -24,11 +24,11 @@ export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
     width: nodeWidth = 15,
     padding: nodePadding = 10,
     align: nodeAlign = 'justify',
-    sort: nodeSort = null
+    sort: nodeSort
   } = nodeOptions ?? {};
   const {
     color: linkColor = 'source',
-    sort: linkSort = null,
+    sort: linkSort,
     curveCorrection = 10
   } = linkOptions ?? {};
   const {
@@ -53,12 +53,21 @@ export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
   };
 
   // Create the sankey layout generator
-  let sankeyGenerator = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign(getNodeAlignFunction(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
-  if (nodeSort) {
-    sankeyGenerator = sankeyGenerator.nodeSort(nodeSort);
+  const sankeyGenerator = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign(getNodeAlignFunction(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
+
+  // For 'auto' or undefined, don't set anything (use d3-sankey default behavior)
+  if (typeof nodeSort === 'function') {
+    sankeyGenerator.nodeSort(nodeSort);
+  } else if (nodeSort === 'fixed') {
+    // Null is not accepted by the types.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/73953
+    sankeyGenerator.nodeSort(null);
   }
-  if (linkSort) {
-    sankeyGenerator = sankeyGenerator.linkSort(linkSort);
+  if (typeof linkSort === 'function') {
+    sankeyGenerator.linkSort(linkSort);
+  } else if (linkSort === 'fixed') {
+    // Null is not accepted by the types.
+    sankeyGenerator.linkSort(null);
   }
 
   // Generate the layout

package/esm/SankeyChart/sankey.types.d.ts

@@ -74,12 +74,19 @@ export type SankeyNodeOptions = {
    */
   showLabels?: boolean;
   /**
-   * Custom sort function for nodes
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   *
    * @param {SankeyLayoutNode} a - First node to compare
    * @param {SankeyLayoutNode} b - Second node to compare
    * @returns {number} Comparison result
+   *
+   * @default 'auto'
    */
-  sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
 } & SankeyNodeHighlightScope;
 export type SankeyLinkOptions = {
   /**
@@ -99,12 +106,18 @@ export type SankeyLinkOptions = {
    */
   showValues?: boolean;
   /**
-   * Custom sort function for links
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   *
    * @param {SankeyLayoutLink} a - First link to compare
    * @param {SankeyLayoutLink} b - Second link to compare
    * @returns {number} Comparison result
+     * @default 'auto'
    */
-  sort?: (a: SankeyLayoutLink, b: SankeyLayoutLink) => number | null;
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
   /**
    * Applies the given number to the X dimension of the control points of the link's curve function.
    * This can create better looking links between nodes, but is dependent on the graph layout.

package/esm/index.js

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

package/esm/internals/plugins/useChartProExport/exportImage.js

@@ -18,7 +18,8 @@ export async function exportImage(element, svg, params) {
     type = 'image/png',
     quality = 0.9,
     onBeforeExport = defaultOnBeforeExport,
-    copyStyles = true
+    copyStyles = true,
+    nonce
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = ownerDocument(element);
@@ -45,7 +46,7 @@ export async function exportImage(element, svg, params) {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
-      await Promise.all(loadStyleSheets(exportDoc, root));
+      await Promise.all(loadStyleSheets(exportDoc, root, nonce));
     }
     resolve();
   };
@@ -65,7 +66,8 @@ export async function exportImage(element, svg, params) {
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
-      zoom: ratio
+      zoom: ratio,
+      nonce
     });
   } finally {
     doc.body.removeChild(iframe);

package/esm/internals/plugins/useChartProExport/print.d.ts

@@ -2,5 +2,6 @@ import { ChartPrintExportOptions } from "./useChartProExport.types.js";
 export declare function printChart(element: HTMLElement | SVGElement, {
   fileName,
   onBeforeExport,
-  copyStyles
+  copyStyles,
+  nonce
 }?: ChartPrintExportOptions): void;

package/esm/internals/plugins/useChartProExport/print.js

@@ -5,7 +5,8 @@ import { defaultOnBeforeExport } from "./defaults.js";
 export function printChart(element, {
   fileName,
   onBeforeExport = defaultOnBeforeExport,
-  copyStyles = true
+  copyStyles = true,
+  nonce
 } = {}) {
   const printWindow = createExportIframe(fileName);
   const doc = ownerDocument(element);
@@ -17,7 +18,7 @@ export function printChart(element, {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
-      await Promise.all(loadStyleSheets(printDoc, root));
+      await Promise.all(loadStyleSheets(printDoc, root, nonce));
     }
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {

package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -24,6 +24,11 @@ export interface ChartExportOptions {
    * @default true
    */
   copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
 }
 /**
  * The options to apply on the Print export.

package/index.js

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

package/internals/plugins/useChartProExport/exportImage.js

@@ -28,7 +28,8 @@ async function exportImage(element, svg, params) {
     type = 'image/png',
     quality = 0.9,
     onBeforeExport = _defaults.defaultOnBeforeExport,
-    copyStyles = true
+    copyStyles = true,
+    nonce
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = (0, _ownerDocument.default)(element);
@@ -55,7 +56,7 @@ async function exportImage(element, svg, params) {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
-      await Promise.all((0, _export.loadStyleSheets)(exportDoc, root));
+      await Promise.all((0, _export.loadStyleSheets)(exportDoc, root, nonce));
     }
     resolve();
   };
@@ -75,7 +76,8 @@ async function exportImage(element, svg, params) {
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
-      zoom: ratio
+      zoom: ratio,
+      nonce
     });
   } finally {
     doc.body.removeChild(iframe);

package/internals/plugins/useChartProExport/print.d.ts

@@ -2,5 +2,6 @@ import { ChartPrintExportOptions } from "./useChartProExport.types.js";
 export declare function printChart(element: HTMLElement | SVGElement, {
   fileName,
   onBeforeExport,
-  copyStyles
+  copyStyles,
+  nonce
 }?: ChartPrintExportOptions): void;

package/internals/plugins/useChartProExport/print.js

@@ -12,7 +12,8 @@ var _defaults = require("./defaults");
 function printChart(element, {
   fileName,
   onBeforeExport = _defaults.defaultOnBeforeExport,
-  copyStyles = true
+  copyStyles = true,
+  nonce
 } = {}) {
   const printWindow = (0, _common.createExportIframe)(fileName);
   const doc = (0, _ownerDocument.default)(element);
@@ -24,7 +25,7 @@ function printChart(element, {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
-      await Promise.all((0, _export.loadStyleSheets)(printDoc, root));
+      await Promise.all((0, _export.loadStyleSheets)(printDoc, root, nonce));
     }
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {

package/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -24,6 +24,11 @@ export interface ChartExportOptions {
    * @default true
    */
   copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
 }
 /**
  * The options to apply on the Print export.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.17.0",
+  "version": "8.18.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -28,14 +28,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.3",
+    "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.17.0",
-    "@mui/x-charts-vendor": "8.15.0",
-    "@mui/x-internal-gestures": "0.3.4",
-    "@mui/x-license": "8.17.0",
-    "@mui/x-internals": "8.17.0"
+    "@mui/x-charts-vendor": "8.18.0",
+    "@mui/x-license": "8.18.0",
+    "@mui/x-internals": "8.18.0",
+    "@mui/x-charts": "8.18.0",
+    "@mui/x-internal-gestures": "0.3.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -54,7 +54,7 @@
     }
   },
   "optionalDependencies": {
-    "rasterizehtml": "^1.3.1"
+    "rasterizehtml": "^1.4.0"
   },
   "engines": {
     "node": ">=14.0.0"