@mui/x-data-grid 8.2.0 → 8.3.1

package/CHANGELOG.md

@@ -5,6 +5,201 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.3.1
+
+_May 14, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Norwegian Bokmål (nb-NO) locale on the Data Grid
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid and Pickers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@100pearlcent, @htollefsen, @JanPretzel, @sai6855.
+Following are all team members who have contributed to this release:
+@bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @MBilalShafi, @oliviertassinari, @prakhargupta1.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.1`
+
+- [DataGrid] Add `reason` param for `onRowSelectionModelChange` callback (#17545) @sai6855
+- [DataGrid] Fix `renderContext` calculation loop (#17779) @cherniavskii
+- [DataGrid] Fix column spanning jump on scroll (#17759) @cherniavskii
+- [DataGrid] Fix material augmentation not working (#17761) @cherniavskii
+- [DataGrid] Use arguments selector for checkbox props (#17683) @MBilalShafi
+- [l10n] Improve Norwegian Bokmål (nb-NO) locale (#17766) @htollefsen
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-data-grid-pro@8.3.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.3.1`.
+
+#### `@mui/x-data-grid-premium@8.3.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.3.1`, plus:
+
+- [DataGridPremium] Fix aggregation label not being used in pivot panel (#17760) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.1`
+
+- [fields] Add notch to the field outlined when the label is manually shrank (#17620) @flaviendelangle
+- [l10n] Improve Korean (ko-KR) locale (#17484) @100pearlcent
+
+#### `@mui/x-date-pickers-pro@8.3.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.3.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.3.1`
+
+- [charts] Fix infinite tick number when zoom range is zero (#17750) @bernardobelchior
+- [charts] Improve tick rendering performance (#17755) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.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.3.1`, plus:
+
+- [charts-pro] Fix ESM build issue with Vite (#17774) @bernardobelchior
+- [charts-pro] Add benchmark for zoomed in scatter chart (#17756) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.3.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.3.1`.
+
+### Docs
+
+- [docs] Fix 301 to Next.js docs for license @oliviertassinari
+- [docs] Fix AI assistant API URL (#17745) @oliviertassinari
+- [docs] Fix heading structure in README @oliviertassinari
+- [docs] Fix translation keys documentation (#17811) @JanPretzel
+- [docs] Improve CHANGELOG format @oliviertassinari
+
+### Core
+
+- [core] Apply YAML convention, blank line only at top level @oliviertassinari
+- [code-infra] Fix dynamic import missing extensions (#17767) @Janpot
+- [code-infra] Replace `mocha` with `vitest` for browser & jsdom tests (#14508) @JCQuintas
+- [scheduler] Create the package and setup a private doc page (#17239) @flaviendelangle
+
+## 8.3.0
+
+_May 8, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Added new styling options and shapes for `<FunnelChart />`, including `variant`, `borderRadius`, `pyramid`, and `step-pyramid` curves.
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to this community member for a valuable contribution: @ptuukkan.
+Team members who have contributed to this release: @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.3.0`
+
+- [DataGrid] Fix cell editing of computed columns with data source (#17684) @ptuukkan
+- [DataGrid] Fix lazy loading crash with `isRowSelectable` prop (#17629) @MBilalShafi
+- [DataGrid] Fix: use CSS nonce (#17726) @romgrk
+- [DataGrid] Ignore `preProcessEditCellProps` for non-editable columns when starting a row update (#17732) @arminmeh
+- [DataGrid] Avoid applying row selection propagation on filtered rows (#17739) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.3.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.3.0`.
+
+#### `@mui/x-data-grid-premium@8.3.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.3.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.3.0`
+
+- [DateTimePicker] Fix focus behavior on desktop variant (#17719) @LukasTy
+- [pickers] Avoid `DigitalClock` stealing focus from a Picker open button on close (#17686) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.3.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.3.0`, plus:
+
+- [DateRangePicker] Fix to reset range position after closing mobile Picker (#17631) @LukasTy
+
+### Charts
+
+- The `<FunnelChart />` series now accepts a `variant='outlined'` prop for a simpler style.
+  <img width="398" alt="Screenshot 2025-05-06 at 20 36 12" src="https://github.com/user-attachments/assets/00fef14f-9026-421e-a4b6-7e081adce1e8" />
+
+- Add a `borderRadius` property to `<FunnelChart />`. All funnels have `8px` as a default value.
+  <img width="386" alt="Screenshot 2025-05-06 at 14 00 20" src="https://github.com/user-attachments/assets/4f4cc0e7-01ce-4ed6-a0e1-a387f78def23" />
+
+- Add a `pyramid` curve to `<FunnelChart />`, which allows creation of a pyramid-shaped funnel.
+  <img width="344" alt="Screenshot 2025-05-06 at 14 32 59" src="https://github.com/user-attachments/assets/0b2896e0-0478-4766-bb1b-258a4977a751" />
+
+- Add a `step-pyramid` curve to `<FunnelChart />`, which creates a stepped-pyramid like shape.
+  <img width="344" alt="Screenshot 2025-05-06 at 14 33 03" src="https://github.com/user-attachments/assets/894f0ab3-7898-40fe-b0df-560feea4085a" />
+
+#### `@mui/x-charts@8.3.0`
+
+- [charts] Add charts toolbar with zoom options (#17615) @bernardobelchior
+- [charts] Add zoom slider (#17496) @bernardobelchior
+- [charts] Cleanup compiler warnings (#17360) @alexfauquette
+- [charts] Fix `<PieArcLabel />` not taking `arcLabelRadius` into account (#17655) @bernardobelchior
+- [charts] Fix spark line not having clip path (#17501) @bernardobelchior
+- [charts] Fix type issue with ESM (#17624) @alexfauquette
+- [charts] Improve `<MarkElement />` performance (#17546) @bernardobelchior
+- [charts] Rename `materialSlots` internal constant (#17710) @bernardobelchior
+- [charts] Update zoom slider design (#17682) @bernardobelchior
+- [charts] Fix zoom being documented as available for heatmap (#17657) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.3.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.3.0`, plus:
+
+- [charts-pro] Add `pyramid` curve to `<FunnelChart />` (#17665) @JCQuintas
+- [charts-pro] Add `variant='outlined'` to `<FunnelChart />` series (#17661) @JCQuintas
+- [charts-pro] Add a `borderRadius` property to `<FunnelChart />` (#17660) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.3.0`
+
+- [tree view] Bug fix - Escape does not cancel Drag n Drop (#17735) @rita-codes
+- [tree view] Fix keyboard navigation error (#17685) @rita-codes
+- [tree view] Continue cleaning the plugin system (#17386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.3.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.3.0`.
+
+### Docs
+
+- [charts] Add population pyramid demo (#17652) @bernardobelchior
+- [charts] Fix randomised argos test (#17658) @JCQuintas
+- [docs] Make preview messaging consistent in charts @bernardobelchior
+
+### Core
+
+- [code-infra] Avoid `node` types in the built packages (#17533) @LukasTy
+- [code-infra] Add `pkg.pr.new` publishing (#17402) @Janpot
+- [code-infra] Normalize author package in org @oliviertassinari
+- [code-infra] Remove required checkout step (#17729) @JCQuintas
+- [docs-infra] Normalize netlify.toml in org @oliviertassinari
+
 ## 8.2.0
 
 _May 1, 2025_
@@ -424,8 +619,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 - 📚 Documentation improvements
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
+Team members who have contributed to this release: @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @noraleonte, @romgrk, @alexfauquette.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
@@ -738,7 +932,7 @@ We'd like to offer a big thanks to the 21 contributors who made this release pos
 - 🌍 Improve Chinese (zh-CN), (zh-HK), (zh-TW), Czech (cs-CZ), Korean (ko-KR) and Slovak (sk-Sk) locales on the Data Grid
 - 🌍 Improve Chinese (zh-CN), (zh-HK) and (zh-TW) locales on the Pickers
 
-## Breaking changes
+### Breaking changes
 
 - ℹ️ The peer dependency on `@mui/material` has been updated to accept only v7.
   This has been done to increase the adoption rate of ESM.
@@ -751,7 +945,7 @@ Following are all team members who have contributed to this release:
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 
-## Alpha release highlights
+### Alpha release highlights
 
 Below are the highlights of the alpha releases leading up to this beta release:
 
@@ -3045,8 +3239,7 @@ We'd like to offer a big thanks to the 4 contributors who made this release poss
 
 - 🐞 Bugfixes
 
-Team members who have contributed to this release:
-@arminmeh, @cherniavskii, @LukasTy, @michelengelen.
+Team members who have contributed to this release: @arminmeh, @cherniavskii, @LukasTy, @michelengelen.
 
 <!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
 

package/components/GridScrollArea.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridScrollArea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
@@ -149,7 +148,7 @@ function GridScrollAreaContent(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
     ref: rootRef,
-    className: (0, _clsx.default)(classes.root),
+    className: classes.root,
     ownerState: ownerState,
     onDragOver: handleDragOver,
     style: style

package/components/base/GridOverlays.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _dimensions = require("../../hooks/features/dimensions");
@@ -70,11 +69,11 @@ function GridOverlayWrapper(props) {
     classes: rootProps.classes
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root)
+    className: classes.root
   }, props, {
     right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
-      className: (0, _clsx.default)(classes.inner),
+      className: classes.inner,
       style: {
         height,
         width: dimensions.viewportOuterSize.width

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -65,11 +65,13 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     }
   }, []);
   const isSelectable = apiRef.current.isRowSelectable(id);
-  const checkboxPropsSelector = (0, _utils2.getCheckboxPropsSelector)(id, rootProps.rowSelectionPropagation?.parents ?? false);
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector, undefined, _useGridSelector.objectShallowCompare);
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils2.checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }

package/components/columnSelection/GridHeaderCheckbox.js

@@ -83,6 +83,10 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
     const candidates = new Set();
     for (let i = 0; i < rowIds.length; i += 1) {
       const id = rowIds[i];
+      if (!apiRef.current.getRow(id)) {
+        // The row could have been removed
+        continue;
+      }
       if (apiRef.current.isRowSelectable(id)) {
         candidates.add(id);
       }

package/esm/components/GridScrollArea.js

@@ -2,7 +2,6 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import clsx from 'clsx';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
@@ -142,7 +141,7 @@ function GridScrollAreaContent(props) {
   }
   return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
     ref: rootRef,
-    className: clsx(classes.root),
+    className: classes.root,
     ownerState: ownerState,
     onDragOver: handleDragOver,
     style: style

package/esm/components/base/GridOverlays.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import clsx from 'clsx';
 import { minimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
@@ -62,11 +61,11 @@ export function GridOverlayWrapper(props) {
     classes: rootProps.classes
   }));
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
-    className: clsx(classes.root)
+    className: classes.root
   }, props, {
     right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
-      className: clsx(classes.inner),
+      className: classes.inner,
       style: {
         height,
         width: dimensions.viewportOuterSize.width

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -8,8 +8,8 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { objectShallowCompare, useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { getCheckboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { checkboxPropsSelector } from "../../hooks/features/rowSelection/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -57,11 +57,13 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     }
   }, []);
   const isSelectable = apiRef.current.isRowSelectable(id);
-  const checkboxPropsSelector = getCheckboxPropsSelector(id, rootProps.rowSelectionPropagation?.parents ?? false);
   const {
     isIndeterminate,
     isChecked
-  } = useGridSelector(apiRef, checkboxPropsSelector, undefined, objectShallowCompare);
+  } = useGridSelector(apiRef, checkboxPropsSelector, {
+    groupId: id,
+    autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
+  });
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }

package/esm/components/columnSelection/GridHeaderCheckbox.js

@@ -75,6 +75,10 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     const candidates = new Set();
     for (let i = 0; i < rowIds.length; i += 1) {
       const id = rowIds[i];
+      if (!apiRef.current.getRow(id)) {
+        // The row could have been removed
+        continue;
+      }
       if (apiRef.current.isRowSelectable(id)) {
         candidates.add(id);
       }

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -302,13 +302,21 @@ export function getFirstNonSpannedColumnToRender({
   visibleRows
 }) {
   let firstNonSpannedColumnToRender = firstColumnToRender;
-  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
-    const row = visibleRows[i];
-    if (row) {
-      const rowId = visibleRows[i].id;
-      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
-      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
-        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+  let foundStableColumn = false;
+
+  // Keep checking columns until we find one that's not spanned in any visible row
+  while (!foundStableColumn && firstNonSpannedColumnToRender >= 0) {
+    foundStableColumn = true;
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = visibleRows[i];
+      if (row) {
+        const rowId = visibleRows[i].id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstNonSpannedColumnToRender);
+        if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan && cellColSpanInfo.leftVisibleCellIndex < firstNonSpannedColumnToRender) {
+          firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+          foundStableColumn = false;
+          break; // Check the new column index against the visible rows, because it might be spanned
+        }
       }
     }
   }

package/esm/hooks/features/editing/useGridCellEditing.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useGridEvent, useGridEventPriority } from "../../utils/useGridEvent.js";
 import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
@@ -330,7 +331,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field);
     if (props.dataSource?.updateRow) {
-      if (row[field] === rowUpdate[field]) {
+      if (isDeepEqual(row, rowUpdate)) {
         finishCellEditMode();
         return;
       }

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -13,7 +13,7 @@ import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
+import { gridColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
@@ -313,8 +313,9 @@ export const useGridRowEditing = (apiRef, props) => {
       initialValue
     } = params;
     const row = apiRef.current.getRow(id);
-    const columnFields = gridColumnFieldsSelector(apiRef);
-    const newProps = columnFields.reduce((acc, field) => {
+    const columns = gridColumnDefinitionsSelector(apiRef);
+    const newProps = columns.reduce((acc, col) => {
+      const field = col.field;
       const cellParams = apiRef.current.getCellParams(id, field);
       if (!cellParams.isEditable) {
         return acc;
@@ -331,7 +332,7 @@ export const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
+        isProcessingProps: column.editable && !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -340,8 +341,8 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-    columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
-      const column = apiRef.current.getColumn(field);
+    columns.filter(column => column.editable && !!column.preProcessEditCellProps && deleteValue).forEach(column => {
+      const field = column.field;
       const value = apiRef.current.getCellValue(id, field);
       const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -92,7 +92,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * API METHODS
    */
-  const setRowSelectionModel = React.useCallback(model => {
+  const setRowSelectionModel = React.useCallback((model, reason) => {
     if (props.signature === GridSignature.DataGrid && !canHaveMultipleSelection && (model.type !== 'include' || model.ids.size > 1)) {
       throw new Error(['MUI X: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
@@ -101,7 +101,7 @@ export const useGridRowSelection = (apiRef, props) => {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => _extends({}, state, {
         rowSelection: props.rowSelection ? model : emptyModel
-      }));
+      }), reason);
     }
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => {
@@ -142,7 +142,7 @@ export const useGridRowSelection = (apiRef, props) => {
           findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
         }
       }
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
     } else {
       logger.debug(`Toggling selection for row ${id}`);
       const selectionModel = gridRowSelectionStateSelector(apiRef);
@@ -168,7 +168,7 @@ export const useGridRowSelection = (apiRef, props) => {
       }
       const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       }
     }
   }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
@@ -235,7 +235,7 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     const isSelectionValid = newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelectionModel);
+      apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
   const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
@@ -360,7 +360,7 @@ export const useGridRowSelection = (apiRef, props) => {
           apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
         }
       } else {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
   }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree, getRowsToBeSelected]);

package/esm/hooks/features/rowSelection/utils.d.ts

@@ -5,7 +5,10 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import { type GridRowSelectionPropagation } from "../../../models/gridRowSelectionModel.js";
 import { type RowSelectionManager } from "../../../models/gridRowSelectionManager.js";
 export declare const ROW_SELECTION_PROPAGATION_DEFAULT: GridRowSelectionPropagation;
-export declare function getCheckboxPropsSelector(groupId: GridRowId, autoSelectParents: boolean): import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, RowSelectionManager, {
+export declare const checkboxPropsSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity.js").GridStateCommunity, {
+  groupId: GridRowId;
+  autoSelectParents: boolean;
+}, {
   isIndeterminate: boolean;
   isChecked: boolean;
 }>;

package/esm/hooks/features/rowSelection/utils.js

@@ -27,41 +27,42 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-
-// TODO v8: Use `createSelectorV8`
-export function getCheckboxPropsSelector(groupId, autoSelectParents) {
-  return createSelector(gridRowTreeSelector, gridSortedRowIdsSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, sortedRowIds, filteredRowsLookup, rowSelectionManager) => {
-    const groupNode = rowTree[groupId];
-    if (!groupNode || groupNode.type !== 'group') {
-      return {
-        isIndeterminate: false,
-        isChecked: rowSelectionManager.has(groupId)
-      };
+export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+  groupId,
+  autoSelectParents
+}) => {
+  const groupNode = rowTree[groupId];
+  if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
+    return {
+      isIndeterminate: false,
+      isChecked: rowSelectionManager.has(groupId)
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (filteredRowsLookup[itemToTraverseId] === false ||
+    // Perf: Skip checking the rest of the descendants if we already
+    // know that there is a selected and an unselected descendant
+    hasSelectedDescendant && hasUnSelectedDescendant) {
+      return;
     }
-    if (rowSelectionManager.has(groupId)) {
-      return {
-        isIndeterminate: false,
-        isChecked: true
-      };
+    const node = rowTree[itemToTraverseId];
+    if (node?.type === 'group') {
+      node.children.forEach(traverseDescendants);
     }
-    let selectableDescendantsCount = 0;
-    let selectedDescendantsCount = 0;
-    const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
-    for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
-      const id = sortedRowIds[index];
-      if (filteredRowsLookup[id] !== false) {
-        selectableDescendantsCount += 1;
-        if (rowSelectionManager.has(id)) {
-          selectedDescendantsCount += 1;
-        }
-      }
+    if (rowSelectionManager.has(itemToTraverseId)) {
+      hasSelectedDescendant = true;
+    } else {
+      hasUnSelectedDescendant = true;
     }
-    return {
-      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || !rowSelectionManager.has(groupId)),
-      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionManager.has(groupId)
-    };
-  });
-}
+  };
+  traverseDescendants(groupId);
+  return {
+    isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+  };
+});
 export function isMultipleRowSelectionEnabled(props) {
   if (props.signature === GridSignature.DataGrid) {
     // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
@@ -97,7 +98,7 @@ const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
 export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow, rowSelectionManager = gridRowSelectionManagerSelector(apiRef)) => {
   const filteredRows = gridFilteredRowsLookupSelector(apiRef);
   const selectedDescendants = new Set([]);
-  if (!autoSelectDescendants && !autoSelectParents) {
+  if (!autoSelectDescendants && !autoSelectParents || filteredRows[selectedRow] === false) {
     return;
   }
   if (autoSelectDescendants) {

package/esm/hooks/features/virtualization/useGridVirtualScroller.js

@@ -218,12 +218,13 @@ export const useGridVirtualScroller = () => {
     scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-
-    // Prevents batching render context changes
-    ReactDOM.flushSync(() => {
-      updateRenderContext(nextRenderContext);
-    });
-    scrollTimeout.start(1000, triggerUpdateRenderContext);
+    if (!areRenderContextsEqual(nextRenderContext, renderContext)) {
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
+      scrollTimeout.start(1000, triggerUpdateRenderContext);
+    }
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {