@mui/x-data-grid 7.29.3 → 7.29.4

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.29.4
+
+_May 22, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@campmarc, @whereisrmsqhs, @jyash97
+
+Following are all team members who have contributed to this release:
+@mapache-salvaje, @cherniavskii, @noraleonte.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.29.4`
+
+- [DataGrid] Fix `renderContext` calculation loop (#17806) @cherniavskii
+- [DataGrid] Fix column spanning jump on scroll (#17780) @cherniavskii
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#17866) @campmarc
+
+#### `@mui/x-data-grid-pro@7.29.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.29.4`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17890) @whereisrmsqhs
+- [DataGridPro] Prevent text selection when reordering rows (#17920) @jyash97
+
+#### `@mui/x-data-grid-premium@7.29.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.29.4`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.29.4`
+
+- [pickers] Fix `PickersTextField` overflow (#17945) @noraleonte
+
+#### `@mui/x-date-pickers-pro@7.29.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.29.4`.
+
+### Docs
+
+- [docs] Add "upgrade to v8" callout on v7 planned pages (#17901) @mapache-salvaje
+
 ## 7.29.3
 
 _May 8, 2025_

package/components/containers/GridRootStyles.js

@@ -639,7 +639,7 @@ export const GridRootStyles = styled('div', {
         borderTop: 'none'
       }
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {

package/hooks/features/columns/gridColumnsUtils.js

@@ -299,13 +299,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) {
+    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/hooks/features/pagination/useGridPaginationModel.js

@@ -138,7 +138,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -217,12 +217,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 = () => {

package/index.js

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

package/modern/components/containers/GridRootStyles.js

@@ -639,7 +639,7 @@ export const GridRootStyles = styled('div', {
         borderTop: 'none'
       }
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {

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

@@ -299,13 +299,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) {
+    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/modern/hooks/features/pagination/useGridPaginationModel.js

@@ -138,7 +138,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

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

@@ -217,12 +217,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 = () => {

package/modern/index.js

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

package/node/components/containers/GridRootStyles.js

@@ -646,7 +646,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         borderTop: 'none'
       }
     },
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {

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

@@ -314,13 +314,21 @@ 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) {
+    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/node/hooks/features/pagination/useGridPaginationModel.js

@@ -147,7 +147,7 @@ const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

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

@@ -228,12 +228,13 @@ 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 = () => {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.3
+ * @mui/x-data-grid v7.29.4
  *
  * @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.29.3",
+  "version": "7.29.4",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",