@mui/x-data-grid-pro 8.27.3 → 8.27.5

package/CHANGELOG.md

@@ -5,6 +5,127 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.27.5
+
+_Mar 11, 2026_
+
+We'd like to extend a big thank you to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@bernardobelchior, @JCQuintas, @MBilalShafi, @michelengelen, @mj12albert, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.5`
+
+- [DataGrid] Fix crash when `rows` and `rowModesModel` are updated simultaneously (#21684) @michelengelen
+- [DataGrid] Forward rest props in `GridFilterInputMultipleValue` (#21444) @siriwatknp
+- [DataGrid] Remove double rtl inversion logic for columns pinning (#21443) @siriwatknp
+- [DataGrid] Add missing `resizablePanelHandle` classes to `gridClasses` object (#21632) @sai6855
+- [DataGrid] Refactor `headerAlign` style calls (#21633) @sai6855
+- [DataGrid] Fix keyboard navigation with single-row checkbox selection (#21529) @mj12albert
+
+#### `@mui/x-data-grid-pro@8.27.5` [![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.27.5`, plus:
+
+- [DataGridPro] Add `role="presentation"` to detail panel toggle header content (#21691) @michelengelen
+- [DataGridPro] Fix sorting not reflected in nested server-side data (#21641) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.27.5` [![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.27.5`.
+
+### Charts
+
+#### `@mui/x-charts@8.27.5`
+
+- [charts] Refactor `BarChart` classes structure (#21601) (#21644) @JCQuintas
+- [charts] Refactor `LineChart` classes structure (#21672) @JCQuintas
+- [charts] Refactor `ScatterChart` classes structure (#21706) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.5` [![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.27.5`, plus:
+
+- [charts-pro] Fix image export truncated when page is zoomed out (#21696) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.5` [![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.27.5`.
+
+### Docs
+
+- [docs] Fix `AssistantWithDataSource` demo crashing (#21631) @sai6855
+- [docs] Move Range Bar Chart to existing charts (#21122) @bernardobelchior
+
+### Core
+
+- [code-infra] Fix datagrid test flakyness (#21657) @JCQuintas
+- [code-infra] Removed `getTeamMembers` function and usage from the release script (#21608) @michelengelen
+
+### Miscellaneous
+
+- [test] Add missing tests for forwarding props to filter operators in DataGrid (#21700) @siriwatknp
+
+## 8.27.4
+
+_Mar 5, 2026_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌎 Improve Ukrainian (uk-UA) locale
+
+Special thanks go out to this community member for their valuable contribution:
+@lion1963
+
+The following team members contributed to this release:
+@arminmeh, @brijeshb42, @dav-is, @JCQuintas, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.4`
+
+- [DataGrid] Prevent unnecessary row selection checkbox rerendering (#21571) @arminmeh
+- [DataGrid] Make `GridScrollArea` overrides resolver dynamic (#21612) @sai6855
+- [l10n] Improve Ukrainian (uk-UA) locale (#21381) @lion1963
+
+#### `@mui/x-data-grid-pro@8.27.4` [![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.27.4`, plus:
+
+- [DataGridPro] Use `getRowId` prop to calculate the tree data row update (#21544) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.27.4` [![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.27.4`.
+
+### Charts
+
+#### `@mui/x-charts@8.27.4`
+
+- [charts] Deprecate `ChartDataProvider` in favour of `ChartsDataProvider` (#21549) @JCQuintas
+- [charts] Rename `ChartContainer` to `ChartsContainer` (#21186) @JCQuintas
+- [charts] Rename `ChartZoomSlider` to `ChartsZoomSlider` (#21572) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.4` [![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.27.4`.
+
+#### `@mui/x-charts-premium@8.27.4` [![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.27.4`.
+
+### Core
+
+- [code-infra] Add eslint rule to prevent `Math.random` in docs (#21505) (#21563) @JCQuintas
+- [code-infra] V8 Dedupe (#21561) @JCQuintas
+- [docs-infra] Apply Cookie Banner to v8.x Branch (#21448) @dav-is
+- [code-infra] Setup checkout to do full clone for non master branches (#21624) @brijeshb42
+
 ## 8.27.3
 
 _Feb 25, 2026_

package/DataGridPro/DataGridPro.js

@@ -34,7 +34,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc3MTk3NzYwMDAwMA==";
+const releaseInfo = "MTc3MzE4NzIwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -68,7 +68,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', 'columnHeader--filter', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _internals.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _internals.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight'],
+    root: ['columnHeader', 'columnHeader--filter', colDef.headerAlign && `columnHeader--align${(0, _capitalize.default)(colDef.headerAlign)}`, 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _internals.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _internals.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight'],
     input: ['columnHeaderFilterInput'],
     operatorLabel: ['columnHeaderFilterOperatorLabel']
   };

package/esm/DataGridPro/DataGridPro.js

@@ -27,7 +27,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc3MTk3NzYwMDAwMA==";
+const releaseInfo = "MTc3MzE4NzIwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -61,7 +61,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', 'columnHeader--filter', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight'],
+    root: ['columnHeader', 'columnHeader--filter', colDef.headerAlign && `columnHeader--align${capitalize(colDef.headerAlign)}`, 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight'],
     input: ['columnHeaderFilterInput'],
     operatorLabel: ['columnHeaderFilterOperatorLabel']
   };

package/esm/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { useGridSelector, GridGetRowsError, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { useGridSelector, GridGetRowsError, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID, gridRowsLookupSelector } from '@mui/x-data-grid';
 import { gridRowGroupsToFetchSelector, useGridDataSourceBase, CacheChunkManager, gridGetRowsParamsSelector, DataSourceRowsUpdateStrategy, GridStrategyGroup, getTreeNodeDescendants } from '@mui/x-data-grid/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { NestedDataManager, RequestStatus, getGroupKeys } from "./utils.js";
@@ -56,6 +56,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
   const onDataSourceErrorProp = props.onDataSourceError;
   const replaceGroupRows = React.useCallback((groupId, groupPath, rows) => {
     const tree = gridRowTreeSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
     const fetchedRowIds = new Set(rows.map(row => gridRowIdSelector(apiRef, row)));
     const currentGroupRows = getTreeNodeDescendants(tree, groupId, false, true);
     const rowsToDelete = [];
@@ -69,15 +70,13 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
         if (fetchedRowIds.has(descendantId)) {
           continue;
         }
-        rowsToDelete.push({
-          id: descendantId,
+        rowsToDelete.push(_extends({}, rowsLookup[descendantId], {
           _action: 'delete'
-        });
+        }));
       }
-      rowsToDelete.push({
-        id: rowId,
+      rowsToDelete.push(_extends({}, rowsLookup[rowId], {
         _action: 'delete'
-      });
+      }));
     });
     if (rowsToDelete.length > 0) {
       apiRef.current.updateNestedRows(rowsToDelete, groupPath);
@@ -200,6 +199,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     });
   }, [apiRef]);
   const removeChildrenRows = React.useCallback(parentId => {
+    const rowsLookup = gridRowsLookupSelector(apiRef);
     const rowNode = gridRowNodeSelector(apiRef, parentId);
     if (!rowNode || rowNode.type !== 'group' || rowNode.children.length === 0) {
       return;
@@ -213,10 +213,9 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       if (node.type === 'group' && node.children.length > 0) {
         node.children.forEach(traverse);
       }
-      removedRows.push({
-        id: nodeId,
+      removedRows.push(_extends({}, rowsLookup[nodeId], {
         _action: 'delete'
-      });
+      }));
     };
     rowNode.children.forEach(traverse);
     if (removedRows.length > 0) {
@@ -241,6 +240,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       apiRef.current.setRows(response.rows);
     } else {
       const tree = gridRowTreeSelector(apiRef);
+      const rowsLookup = gridRowsLookupSelector(apiRef);
       // Remove existing outdated rows before setting the new ones
       // Create a set of the current root rows
       const parentRowsToDelete = new Set(getTreeNodeDescendants(tree, GRID_ROOT_GROUP_ID, false, true));
@@ -254,15 +254,13 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           const descendants = getTreeNodeDescendants(tree, parentRowId, false, false);
           for (let i = descendants.length - 1; i >= 0; i -= 1) {
             // delete deepest descendants first
-            rowsToDelete.push({
-              id: descendants[i],
+            rowsToDelete.push(_extends({}, rowsLookup[descendants[i]], {
               _action: 'delete'
-            });
+            }));
           }
-          rowsToDelete.push({
-            id: parentRowId,
+          rowsToDelete.push(_extends({}, rowsLookup[parentRowId], {
             _action: 'delete'
-          });
+          }));
         });
       }
       apiRef.current.updateRows(response.rows.concat(rowsToDelete));

package/esm/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -30,6 +30,7 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF
   renderHeader: ({
     colDef
   }) => /*#__PURE__*/_jsx("div", {
-    "aria-label": colDef.headerName
+    "aria-label": colDef.headerName,
+    role: "presentation"
   })
 });

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.27.3
+ * @mui/x-data-grid-pro v8.27.5
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -63,6 +63,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
   const onDataSourceErrorProp = props.onDataSourceError;
   const replaceGroupRows = React.useCallback((groupId, groupPath, rows) => {
     const tree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+    const rowsLookup = (0, _xDataGrid.gridRowsLookupSelector)(apiRef);
     const fetchedRowIds = new Set(rows.map(row => (0, _xDataGrid.gridRowIdSelector)(apiRef, row)));
     const currentGroupRows = (0, _internals.getTreeNodeDescendants)(tree, groupId, false, true);
     const rowsToDelete = [];
@@ -76,15 +77,13 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
         if (fetchedRowIds.has(descendantId)) {
           continue;
         }
-        rowsToDelete.push({
-          id: descendantId,
+        rowsToDelete.push((0, _extends2.default)({}, rowsLookup[descendantId], {
           _action: 'delete'
-        });
+        }));
       }
-      rowsToDelete.push({
-        id: rowId,
+      rowsToDelete.push((0, _extends2.default)({}, rowsLookup[rowId], {
         _action: 'delete'
-      });
+      }));
     });
     if (rowsToDelete.length > 0) {
       apiRef.current.updateNestedRows(rowsToDelete, groupPath);
@@ -207,6 +206,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     });
   }, [apiRef]);
   const removeChildrenRows = React.useCallback(parentId => {
+    const rowsLookup = (0, _xDataGrid.gridRowsLookupSelector)(apiRef);
     const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, parentId);
     if (!rowNode || rowNode.type !== 'group' || rowNode.children.length === 0) {
       return;
@@ -220,10 +220,9 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       if (node.type === 'group' && node.children.length > 0) {
         node.children.forEach(traverse);
       }
-      removedRows.push({
-        id: nodeId,
+      removedRows.push((0, _extends2.default)({}, rowsLookup[nodeId], {
         _action: 'delete'
-      });
+      }));
     };
     rowNode.children.forEach(traverse);
     if (removedRows.length > 0) {
@@ -248,6 +247,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       apiRef.current.setRows(response.rows);
     } else {
       const tree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+      const rowsLookup = (0, _xDataGrid.gridRowsLookupSelector)(apiRef);
       // Remove existing outdated rows before setting the new ones
       // Create a set of the current root rows
       const parentRowsToDelete = new Set((0, _internals.getTreeNodeDescendants)(tree, _xDataGrid.GRID_ROOT_GROUP_ID, false, true));
@@ -261,15 +261,13 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           const descendants = (0, _internals.getTreeNodeDescendants)(tree, parentRowId, false, false);
           for (let i = descendants.length - 1; i >= 0; i -= 1) {
             // delete deepest descendants first
-            rowsToDelete.push({
-              id: descendants[i],
+            rowsToDelete.push((0, _extends2.default)({}, rowsLookup[descendants[i]], {
               _action: 'delete'
-            });
+            }));
           }
-          rowsToDelete.push({
-            id: parentRowId,
+          rowsToDelete.push((0, _extends2.default)({}, rowsLookup[parentRowId], {
             _action: 'delete'
-          });
+          }));
         });
       }
       apiRef.current.updateRows(response.rows.concat(rowsToDelete));

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -42,6 +42,7 @@ const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = exports.GRID_DETAIL_PANEL_TOGGLE_COL_DE
   renderHeader: ({
     colDef
   }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    "aria-label": colDef.headerName
+    "aria-label": colDef.headerName,
+    role: "presentation"
   })
 });

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.27.3
+ * @mui/x-data-grid-pro v8.27.5
  *
  * @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-data-grid-pro",
-  "version": "8.27.3",
+  "version": "8.27.5",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -37,9 +37,9 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid": "8.27.3",
-    "@mui/x-internals": "8.26.0",
-    "@mui/x-license": "8.26.0"
+    "@mui/x-license": "8.26.0",
+    "@mui/x-data-grid": "8.27.5",
+    "@mui/x-internals": "8.26.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",