@mui/x-data-grid 7.28.0 → 7.28.2

package/CHANGELOG.md

@@ -3,6 +3,98 @@
 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_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@jyash97, @nusr.
+
+Following are all team members who have contributed to this release:
+@arminmeh, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.28.1`
+
+- [DataGrid] Fix error while editing rows with custom id (@arminmeh) (#17050)
+
+#### `@mui/x-data-grid-pro@7.28.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@7.28.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (@arminmeh) (#17032)
+
+#### `@mui/x-data-grid-premium@7.28.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@7.28.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (@arminmeh) (#17074)
+
+### Tree View
+
+#### `@mui/x-tree-view@7.28.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.28.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@7.28.1`, plus:
+
+- [TreeView] Allow moving an item after the last children of some other item (@jyash97) (#17065)
+
+### Docs
+
+- [docs] Fix Data Grid advanced list view demo (#17066) @KenanYusuf
+- [docs] Fix custom detail panel toggle state update (@nusr) (#17018)
+
 ## 7.28.0
 
 _Mar 17, 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/components/columnSelection/GridHeaderCheckbox.js

@@ -55,7 +55,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to an object to make O(1) checking if a row exists or not
     // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
@@ -63,7 +63,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       acc[id] = true;
       return acc;
     }, {});
-  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);

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/editing/useGridRowEditing.js

@@ -406,7 +406,7 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

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.0
+ * @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/components/columnSelection/GridHeaderCheckbox.js

@@ -55,7 +55,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to an object to make O(1) checking if a row exists or not
     // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
@@ -63,7 +63,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       acc[id] = true;
       return acc;
     }, {});
-  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);

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/editing/useGridRowEditing.js

@@ -406,7 +406,7 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

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.0
+ * @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/components/columnSelection/GridHeaderCheckbox.js

@@ -63,7 +63,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
-    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly || rootProps.paginationMode === 'server' ? visibleRowIds : paginatedVisibleRowIds;
 
     // Convert to an object to make O(1) checking if a row exists or not
     // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
@@ -71,7 +71,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
       acc[id] = true;
       return acc;
     }, {});
-  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [rootProps.pagination, rootProps.paginationMode, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);

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/editing/useGridRowEditing.js

@@ -414,7 +414,7 @@ const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
         // The row might have been deleted

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.0
+ * @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.0",
+  "version": "7.28.2",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",