@mui/x-data-grid 7.28.1 → 7.28.2

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.28.2
+
+_Mar 28, 2025_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Team members who have contributed to this release:
+@flaviendelangle, @LukasTy, @arminmeh.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.28.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17117) @arminmeh
+
+#### `@mui/x-data-grid-pro@7.28.2` [![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@7.28.2`.
+
+#### `@mui/x-data-grid-premium@7.28.2` [![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@7.28.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.28.2`
+
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17112) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.28.2` [![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@7.28.2`.
+
+### Core
+
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17109) @LukasTy
+
 ## 7.28.1
 
 _Mar 21, 2025_

package/components/GridRow.js

@@ -192,7 +192,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
@@ -202,11 +202,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -215,7 +210,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         type: column.type,
         width: width,

package/hooks/features/columns/useGridColumns.js

@@ -44,8 +44,6 @@ export function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    apiRef.current.updateRenderContext?.();
-    apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
   /**

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -12,7 +12,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { useRunOnce } from "../../utils/useRunOnce.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+import { gridPinnedRowsSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { useGridApiOptionHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
@@ -258,6 +258,7 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = gridRowTreeSelector(apiRef);
     let baseRenderContext = renderContext;
     if (params.renderContext) {
       baseRenderContext = params.renderContext;
@@ -303,6 +304,16 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.

package/index.js

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

package/modern/components/GridRow.js

@@ -192,7 +192,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
@@ -202,11 +202,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -215,7 +210,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         type: column.type,
         width: width,

package/modern/hooks/features/columns/useGridColumns.js

@@ -44,8 +44,6 @@ export function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    apiRef.current.updateRenderContext?.();
-    apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
   /**

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

@@ -12,7 +12,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { useRunOnce } from "../../utils/useRunOnce.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+import { gridPinnedRowsSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { useGridApiOptionHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
@@ -258,6 +258,7 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = gridRowTreeSelector(apiRef);
     let baseRenderContext = renderContext;
     if (params.renderContext) {
       baseRenderContext = params.renderContext;
@@ -303,6 +304,16 @@ export const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.

package/modern/index.js

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

package/node/components/GridRow.js

@@ -199,7 +199,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
@@ -209,11 +209,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -222,7 +217,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         type: column.type,
         width: width,

package/node/hooks/features/columns/useGridColumns.js

@@ -54,8 +54,6 @@ function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    apiRef.current.updateRenderContext?.();
-    apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
   /**

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

@@ -269,6 +269,7 @@ const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     let baseRenderContext = renderContext;
     if (params.renderContext) {
       baseRenderContext = params.renderContext;
@@ -314,6 +315,16 @@ const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.

package/node/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.28.1",
+  "version": "7.28.2",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",