@mui/x-charts-pro 8.19.0 → 8.20.0

package/CHANGELOG.md

@@ -5,6 +5,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
 ## 8.19.0
 
 _Nov 20, 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 = "MTc2MzU5NjgwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -35,6 +35,10 @@ const Rect = (0, _styles.styled)('rect')(({
     cursor: 'ns-resize'
   }
 }));
+function preventDefault(event) {
+  event.preventDefault();
+}
+
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
@@ -60,28 +64,38 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
   React.useEffect(() => {
     const thumb = thumbRef.current;
     if (!thumb) {
-      return;
+      return () => {};
     }
+
+    // Prevent scrolling on touch devices when dragging the thumb
+    thumb.addEventListener('touchmove', preventDefault, {
+      passive: false
+    });
     const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
       onMoveEvent(event);
     });
-    const onPointerUp = () => {
+    const onPointerEnd = event => {
       thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointerup', onPointerUp);
+      thumb.removeEventListener('pointerup', onPointerEnd);
+      thumb.removeEventListener('pointercancel', onPointerEnd);
+      thumb.releasePointerCapture(event.pointerId);
     };
     const onPointerDown = event => {
       // Prevent text selection when dragging the thumb
       event.preventDefault();
       event.stopPropagation();
       thumb.setPointerCapture(event.pointerId);
-      thumb.addEventListener('pointerup', onPointerUp);
       thumb.addEventListener('pointermove', onPointerMove);
+      thumb.addEventListener('pointercancel', onPointerEnd);
+      thumb.addEventListener('pointerup', onPointerEnd);
     };
     thumb.addEventListener('pointerdown', onPointerDown);
-
-    // eslint-disable-next-line consistent-return
     return () => {
       thumb.removeEventListener('pointerdown', onPointerDown);
+      thumb.removeEventListener('pointermove', onPointerMove);
+      thumb.removeEventListener('pointercancel', onPointerEnd);
+      thumb.removeEventListener('pointerup', onPointerEnd);
+      thumb.removeEventListener('touchmove', preventDefault);
       onPointerMove.clear();
     };
   }, [onMoveEvent, orientation]);

package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -16,7 +16,7 @@ const _excluded = ["id", "color", "gradientId", "onClick"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
-})();
+})({});
 function AreaPreviewPlot({
   axisId
 }) {

package/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectorSankeyHighlightedItem = exports.selectorNodeHighlightConfig = exports.selectorNodeFadeConfig = exports.selectorLinkHighlightConfig = exports.selectorLinkFadeConfig = exports.selectorIsSankeyItemFaded = exports.selectorIsNodeHighlighted = exports.selectorIsLinkHighlighted = void 0;
 var _store = require("@mui/x-internals/store");
+var _internals = require("@mui/x-charts/internals");
 const selectorSankeyHighlight = state => state.highlight;
-const selectSeries = state => state.series;
-const selectorSankeySeries = (0, _store.createSelector)(selectSeries, series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const selectorSankeySeries = (0, _store.createSelector)(_internals.selectorChartSeriesProcessed, processedSeries => processedSeries.sankey?.series[processedSeries.sankey?.seriesOrder[0]] || null);
 const DEFAULT_NODE_HIGHLIGHT = 'links';
 const DEFAULT_LINK_HIGHLIGHT = 'links';
 const DEFAULT_FADE = 'none';

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

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -28,6 +28,10 @@ const Rect = styled('rect')(({
     cursor: 'ns-resize'
   }
 }));
+function preventDefault(event) {
+  event.preventDefault();
+}
+
 /**
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
@@ -53,28 +57,38 @@ export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function C
   React.useEffect(() => {
     const thumb = thumbRef.current;
     if (!thumb) {
-      return;
+      return () => {};
     }
+
+    // Prevent scrolling on touch devices when dragging the thumb
+    thumb.addEventListener('touchmove', preventDefault, {
+      passive: false
+    });
     const onPointerMove = rafThrottle(event => {
       onMoveEvent(event);
     });
-    const onPointerUp = () => {
+    const onPointerEnd = event => {
       thumb.removeEventListener('pointermove', onPointerMove);
-      thumb.removeEventListener('pointerup', onPointerUp);
+      thumb.removeEventListener('pointerup', onPointerEnd);
+      thumb.removeEventListener('pointercancel', onPointerEnd);
+      thumb.releasePointerCapture(event.pointerId);
     };
     const onPointerDown = event => {
       // Prevent text selection when dragging the thumb
       event.preventDefault();
       event.stopPropagation();
       thumb.setPointerCapture(event.pointerId);
-      thumb.addEventListener('pointerup', onPointerUp);
       thumb.addEventListener('pointermove', onPointerMove);
+      thumb.addEventListener('pointercancel', onPointerEnd);
+      thumb.addEventListener('pointerup', onPointerEnd);
     };
     thumb.addEventListener('pointerdown', onPointerDown);
-
-    // eslint-disable-next-line consistent-return
     return () => {
       thumb.removeEventListener('pointerdown', onPointerDown);
+      thumb.removeEventListener('pointermove', onPointerMove);
+      thumb.removeEventListener('pointercancel', onPointerEnd);
+      thumb.removeEventListener('pointerup', onPointerEnd);
+      thumb.removeEventListener('touchmove', preventDefault);
       onPointerMove.clear();
     };
   }, [onMoveEvent, orientation]);

package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js

@@ -8,7 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
-})();
+})({});
 export function AreaPreviewPlot({
   axisId
 }) {

package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -1,7 +1,7 @@
 import { createSelector } from '@mui/x-internals/store';
+import { selectorChartSeriesProcessed } from '@mui/x-charts/internals';
 const selectorSankeyHighlight = state => state.highlight;
-const selectSeries = state => state.series;
-const selectorSankeySeries = createSelector(selectSeries, series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const selectorSankeySeries = createSelector(selectorChartSeriesProcessed, processedSeries => processedSeries.sankey?.series[processedSeries.sankey?.seriesOrder[0]] || null);
 const DEFAULT_NODE_HIGHLIGHT = 'links';
 const DEFAULT_LINK_HIGHLIGHT = 'links';
 const DEFAULT_FADE = 'none';

package/esm/index.js

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.19.0",
+  "version": "8.20.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,11 +31,11 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.19.0",
+    "@mui/x-charts": "8.20.0",
     "@mui/x-charts-vendor": "8.19.0",
+    "@mui/x-internals": "8.19.0",
     "@mui/x-internal-gestures": "0.3.6",
-    "@mui/x-license": "8.19.0",
-    "@mui/x-internals": "8.19.0"
+    "@mui/x-license": "8.19.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",