@mui/x-data-grid 8.2.0 → 8.3.0

package/CHANGELOG.md

@@ -5,6 +5,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_

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/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/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/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/utils.js

@@ -97,7 +97,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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.2.0
+ * @mui/x-data-grid v8.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/material/index.js

@@ -9,19 +9,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded7 = ["material"],
   _excluded8 = ["material"],
   _excluded9 = ["material"],
+  _excluded0 = ["material"],
+  _excluded1 = ["material"],
   _excluded10 = ["material"],
-  _excluded11 = ["material"],
+  _excluded11 = ["material", "label", "className"],
   _excluded12 = ["material"],
-  _excluded13 = ["material", "label", "className"],
-  _excluded14 = ["material"],
-  _excluded15 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded16 = ["slotProps", "material"],
-  _excluded17 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded18 = ["key"],
-  _excluded19 = ["inputProps", "InputProps", "InputLabelProps"],
-  _excluded20 = ["slotProps", "material"],
-  _excluded21 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded22 = ["native"];
+  _excluded13 = ["inert", "iconStart", "iconEnd", "children", "material"],
+  _excluded14 = ["slotProps", "material"],
+  _excluded15 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded16 = ["key"],
+  _excluded17 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded18 = ["slotProps", "material"],
+  _excluded19 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded20 = ["native"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -327,7 +327,7 @@ const BaseIconButton = forwardRef(function BaseIconButton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded10);
+    rest = _objectWithoutPropertiesLoose(props, _excluded0);
   return /*#__PURE__*/_jsx(MUIIconButton, _extends({}, rest, material, {
     ref: ref
   }));
@@ -336,7 +336,7 @@ const BaseTooltip = forwardRef(function BaseTooltip(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded11);
+    rest = _objectWithoutPropertiesLoose(props, _excluded1);
   return /*#__PURE__*/_jsx(MUITooltip, _extends({}, rest, material, {
     ref: ref
   }));
@@ -345,7 +345,7 @@ const BaseSkeleton = forwardRef(function BaseSkeleton(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded12);
+    rest = _objectWithoutPropertiesLoose(props, _excluded10);
   return /*#__PURE__*/_jsx(MUISkeleton, _extends({}, rest, material, {
     ref: ref
   }));
@@ -356,7 +356,7 @@ const BaseSwitch = forwardRef(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded13);
+    rest = _objectWithoutPropertiesLoose(props, _excluded11);
   if (!label) {
     return /*#__PURE__*/_jsx(MUISwitch, _extends({}, rest, material, {
       className: className,
@@ -375,7 +375,7 @@ const BaseMenuList = forwardRef(function BaseMenuList(props, ref) {
   const {
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded14);
+    rest = _objectWithoutPropertiesLoose(props, _excluded12);
   return /*#__PURE__*/_jsx(MUIMenuList, _extends({}, rest, material, {
     ref: ref
   }));
@@ -388,7 +388,7 @@ function BaseMenuItem(props) {
       children,
       material
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded15);
+    other = _objectWithoutPropertiesLoose(props, _excluded13);
   if (inert) {
     other.disableRipple = true;
   }
@@ -407,7 +407,7 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded16);
+    rest = _objectWithoutPropertiesLoose(props, _excluded14);
   return /*#__PURE__*/_jsx(MUITextField, _extends({
     variant: "outlined"
   }, rest, material, {
@@ -434,7 +434,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded17);
+    rest = _objectWithoutPropertiesLoose(props, _excluded15);
   return /*#__PURE__*/_jsx(MUIAutocomplete, _extends({
     id: id,
     multiple: multiple,
@@ -451,7 +451,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded18);
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded16);
       return /*#__PURE__*/_jsx(MUIChip, _extends({
         variant: "outlined",
         size: "small",
@@ -464,7 +464,7 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = _objectWithoutPropertiesLoose(params, _excluded19);
+        inputRest = _objectWithoutPropertiesLoose(params, _excluded17);
       return /*#__PURE__*/_jsx(MUITextField, _extends({}, inputRest, {
         label: label,
         placeholder: placeholder,
@@ -488,7 +488,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded20);
+    rest = _objectWithoutPropertiesLoose(props, _excluded18);
   const result = rest;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -537,7 +537,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded21);
+    rest = _objectWithoutPropertiesLoose(props, _excluded19);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -635,7 +635,7 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded22);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded20);
   if (native) {
     return /*#__PURE__*/_jsx("option", _extends({}, props));
   }

package/esm/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -1,6 +1,6 @@
 import { CleanupTracking, UnregisterToken, UnsubscribeFn } from "./CleanupTracking.js";
 export declare class TimerBasedCleanupTracking implements CleanupTracking {
-  timeouts?: Map<number, NodeJS.Timeout> | undefined;
+  timeouts?: Map<number, number> | undefined;
   cleanupTimeout: number;
   constructor(timeout?: number);
   register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;

package/esm/utils/css/context.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLASSNAME_PREFIX = 'MuiDataGridVariables';
@@ -25,19 +26,21 @@ export function GridPortalWrapper({
 }
 export function GridCSSVariablesContext(props) {
   const config = useGridConfiguration();
+  const rootProps = useGridRootProps();
   const description = config.hooks.useCSSVariables();
   const context = React.useMemo(() => {
     const className = `${CLASSNAME_PREFIX}-${description.id}`;
     const cssString = `.${className}{${variablesToString(description.variables)}}`;
     const tag = /*#__PURE__*/_jsx("style", {
       href: `/${className}`,
+      nonce: rootProps.nonce,
       children: cssString
     });
     return {
       className,
       tag
     };
-  }, [description]);
+  }, [rootProps.nonce, description]);
   return /*#__PURE__*/_jsx(CSSVariablesContext.Provider, {
     value: context,
     children: props.children

package/hooks/features/editing/useGridCellEditing.js

@@ -13,6 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -338,7 +339,7 @@ const useGridCellEditing = (apiRef, props) => {
     }
     const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field);
     if (props.dataSource?.updateRow) {
-      if (row[field] === rowUpdate[field]) {
+      if ((0, _isDeepEqual.isDeepEqual)(row, rowUpdate)) {
         finishCellEditMode();
         return;
       }

package/hooks/features/editing/useGridRowEditing.js

@@ -321,8 +321,9 @@ const useGridRowEditing = (apiRef, props) => {
       initialValue
     } = params;
     const row = apiRef.current.getRow(id);
-    const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
-    const newProps = columnFields.reduce((acc, field) => {
+    const columns = (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
+    const newProps = columns.reduce((acc, col) => {
+      const field = col.field;
       const cellParams = apiRef.current.getCellParams(id, field);
       if (!cellParams.isEditable) {
         return acc;
@@ -339,7 +340,7 @@ const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
+        isProcessingProps: column.editable && !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -348,8 +349,8 @@ 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 ? (0, _utils2.getDefaultCellValue)(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({

package/hooks/features/rowSelection/utils.js

@@ -105,7 +105,7 @@ const getFilteredRowNodeSiblings = (tree, filteredRows, id) => {
 const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendants, autoSelectParents, addRow, rowSelectionManager = (0, _gridRowSelectionSelector.gridRowSelectionManagerSelector)(apiRef)) => {
   const filteredRows = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
   const selectedDescendants = new Set([]);
-  if (!autoSelectDescendants && !autoSelectParents) {
+  if (!autoSelectDescendants && !autoSelectParents || filteredRows[selectedRow] === false) {
     return;
   }
   if (autoSelectDescendants) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.2.0
+ * @mui/x-data-grid v8.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/material/index.js

@@ -64,19 +64,19 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded7 = ["material"],
   _excluded8 = ["material"],
   _excluded9 = ["material"],
+  _excluded0 = ["material"],
+  _excluded1 = ["material"],
   _excluded10 = ["material"],
-  _excluded11 = ["material"],
+  _excluded11 = ["material", "label", "className"],
   _excluded12 = ["material"],
-  _excluded13 = ["material", "label", "className"],
-  _excluded14 = ["material"],
-  _excluded15 = ["inert", "iconStart", "iconEnd", "children", "material"],
-  _excluded16 = ["slotProps", "material"],
-  _excluded17 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
-  _excluded18 = ["key"],
-  _excluded19 = ["inputProps", "InputProps", "InputLabelProps"],
-  _excluded20 = ["slotProps", "material"],
-  _excluded21 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
-  _excluded22 = ["native"];
+  _excluded13 = ["inert", "iconStart", "iconEnd", "children", "material"],
+  _excluded14 = ["slotProps", "material"],
+  _excluded15 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded16 = ["key"],
+  _excluded17 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded18 = ["slotProps", "material"],
+  _excluded19 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded20 = ["native"];
 /* eslint-disable material-ui/disallow-react-api-in-server-components */
 
 const InputAdornment = (0, _styles.styled)(_InputAdornment.default)(({
@@ -340,7 +340,7 @@ const BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, rest, material, {
     ref: ref
   }));
@@ -349,7 +349,7 @@ const BaseTooltip = (0, _forwardRef.forwardRef)(function BaseTooltip(props, ref)
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded1);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({}, rest, material, {
     ref: ref
   }));
@@ -358,7 +358,7 @@ const BaseSkeleton = (0, _forwardRef.forwardRef)(function BaseSkeleton(props, re
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, rest, material, {
     ref: ref
   }));
@@ -369,7 +369,7 @@ const BaseSwitch = (0, _forwardRef.forwardRef)(function BaseSwitch(props, ref) {
       label,
       className
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded13);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
   if (!label) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, rest, material, {
       className: className,
@@ -388,7 +388,7 @@ const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, re
   const {
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, (0, _extends2.default)({}, rest, material, {
     ref: ref
   }));
@@ -401,7 +401,7 @@ function BaseMenuItem(props) {
       children,
       material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded13);
   if (inert) {
     other.disableRipple = true;
   }
@@ -420,7 +420,7 @@ function BaseTextField(props) {
       slotProps,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded16);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({
     variant: "outlined"
   }, rest, material, {
@@ -447,7 +447,7 @@ function BaseAutocomplete(props) {
       slotProps,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded17);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     id: id,
     multiple: multiple,
@@ -464,7 +464,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded18);
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded16);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         variant: "outlined",
         size: "small",
@@ -477,7 +477,7 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded19);
+        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded17);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, inputRest, {
         label: label,
         placeholder: placeholder,
@@ -501,7 +501,7 @@ function transformInputProps(props, wrapAdornments = true) {
       slotProps,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded20);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded18);
   const result = rest;
   if (wrapAdornments) {
     if (result.startAdornment) {
@@ -550,7 +550,7 @@ function BasePopper(props) {
       placement,
       material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded21);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded19);
   const modifiers = React.useMemo(() => {
     const result = [{
       name: 'preventOverflow',
@@ -648,7 +648,7 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded22);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded20);
   if (native) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", (0, _extends2.default)({}, props));
   }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.2.0",
-  "description": "The Community plan edition of the Data Grid components (MUI X).",
+  "version": "8.3.0",
   "author": "MUI Team",
+  "description": "The Community plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
   "license": "MIT",
   "bugs": {
@@ -39,13 +39,13 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0",
+    "@babel/runtime": "^7.27.1",
     "@mui/utils": "^7.0.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.2.0"
+    "@mui/x-internals": "8.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -1,6 +1,6 @@
 import { CleanupTracking, UnregisterToken, UnsubscribeFn } from "./CleanupTracking.js";
 export declare class TimerBasedCleanupTracking implements CleanupTracking {
-  timeouts?: Map<number, NodeJS.Timeout> | undefined;
+  timeouts?: Map<number, number> | undefined;
   cleanupTimeout: number;
   constructor(timeout?: number);
   register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;

package/utils/css/context.js

@@ -9,6 +9,7 @@ exports.GridPortalWrapper = GridPortalWrapper;
 exports.useCSSVariablesClass = useCSSVariablesClass;
 exports.useCSSVariablesContext = useCSSVariablesContext;
 var React = _interopRequireWildcard(require("react"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLASSNAME_PREFIX = 'MuiDataGridVariables';
@@ -35,19 +36,21 @@ function GridPortalWrapper({
 }
 function GridCSSVariablesContext(props) {
   const config = (0, _useGridConfiguration.useGridConfiguration)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const description = config.hooks.useCSSVariables();
   const context = React.useMemo(() => {
     const className = `${CLASSNAME_PREFIX}-${description.id}`;
     const cssString = `.${className}{${variablesToString(description.variables)}}`;
     const tag = /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
       href: `/${className}`,
+      nonce: rootProps.nonce,
       children: cssString
     });
     return {
       className,
       tag
     };
-  }, [description]);
+  }, [rootProps.nonce, description]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CSSVariablesContext.Provider, {
     value: context,
     children: props.children