@mui/x-data-grid 5.17.17 → 5.17.18

package/CHANGELOG.md

@@ -3,16 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.18
+
+_Jan 5, 2023_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.18` / `@mui/x-data-grid-pro@v5.17.18` / `@mui/x-data-grid-premium@v5.17.18`
+
+#### Changes
+
+- [DataGrid] Fix rows not rendering properly after height change (#7376) @cherniavskii
+- [DataGrid] Fix selected text in cell input not being copied in Firefox (#7330) @cherniavskii
+- [DataGridPremium] Export row grouping column menu components (#7308) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.13` / `@mui/x-date-pickers-pro@v5.0.13`
+
+#### Changes
+
+- [pickers] Fix the product license reference name (#7367)
+
+### Docs
+
+- [docs] Redirect translated pages (#7370) @cherniavskii
+
+### Core
+
+- [core] Fix release date (#7314) @DanailH
+- [core] Fix the product license reference name (#7367) @oliviertassinari
+- [core] Upgrade monorepo (#7344) @cherniavskii
+
 ## 5.17.17
 
-_Dec 23, 2022_
+_Dec 24, 2022_
 
 We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
 
 - 🌍 Improve Russian (ru-RU) and Korean (ko-KR) locales
 - 🐞 Bugfixes
 
-### `@mui/x-data-grid@5.17.17` / `@mui/x-data-grid-pro@5.17.17` / `@mui/x-data-grid-premium@5.17.17`
+### `@mui/x-data-grid@v5.17.17` / `@mui/x-data-grid-pro@v5.17.17` / `@mui/x-data-grid-premium@v5.17.17`
 
 #### Changes
 
@@ -20,7 +52,7 @@ We'd like to offer a big thanks to the 4 contributors who made this release poss
 - [DataGridPro] Use row ID as `key` of the detail panels (#7311) @m4theushw
 - [DataGridPremium] Fix `exceljs` import with parcel (#7285) @alexfauquette
 
-### `@mui/x-date-pickers@5.0.12` / `@mui/x-date-pickers-pro@5.0.12`
+### `@mui/x-date-pickers@v5.0.12` / `@mui/x-date-pickers-pro@v5.0.12`
 
 #### Changes
 

package/hooks/features/clipboard/useGridClipboard.js

@@ -20,6 +20,24 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+
+function hasNativeSelection(element) {
+  var _window$getSelection;
+
+  if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+    return true;
+  }
+
+  if (!element) {
+    return false;
+  }
+
+  if ((element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+
+  return false;
+}
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
@@ -46,8 +64,6 @@ export const useGridClipboard = apiRef => {
     }
   }, [apiRef]);
   const handleKeydown = React.useCallback(event => {
-    var _window$getSelection;
-
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS.
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -57,7 +73,7 @@ export const useGridClipboard = apiRef => {
     } // Do nothing if there's a native selection
 
 
-    if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+    if (hasNativeSelection(event.target)) {
       return;
     }
 

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -85,7 +85,10 @@ export const useGridVirtualScroller = props => {
     top: 0,
     left: 0
   });
-  const [containerWidth, setContainerWidth] = React.useState(null);
+  const [containerDimensions, setContainerDimensions] = React.useState({
+    width: null,
+    height: null
+  });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
     var _currentPage$range, _currentPage$range2;
@@ -129,7 +132,7 @@ export const useGridVirtualScroller = props => {
     // In the last index, this is not needed because Array.slice doesn't include it.
 
     const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
     let hasRowWithAutoHeight = false;
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
@@ -148,7 +151,7 @@ export const useGridVirtualScroller = props => {
 
     if (!hasRowWithAutoHeight) {
       firstColumnIndex = binarySearch(left, columnPositions);
-      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
+      lastColumnIndex = binarySearch(left + containerDimensions.width, columnPositions);
     }
 
     return {
@@ -157,7 +160,7 @@ export const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   useEnhancedEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -168,10 +171,16 @@ export const useGridVirtualScroller = props => {
     }
   }, [disableVirtualization]);
   useEnhancedEffect(() => {
-    setContainerWidth(rootRef.current.clientWidth);
+    setContainerDimensions({
+      width: rootRef.current.clientWidth,
+      height: rootRef.current.clientHeight
+    });
   }, [rowsMeta.currentPageTotalHeight]);
   const handleResize = React.useCallback(params => {
-    setContainerWidth(params.width);
+    setContainerDimensions({
+      width: params.width,
+      height: params.height
+    });
   }, []);
   useGridApiEventHandler(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
@@ -229,7 +238,7 @@ export const useGridVirtualScroller = props => {
     prevRenderContext.current = nextRenderContext;
   }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   useEnhancedEffect(() => {
-    if (containerWidth == null) {
+    if (containerDimensions.width == null) {
       return;
     }
 
@@ -245,7 +254,7 @@ export const useGridVirtualScroller = props => {
       renderContext: initialRenderContext
     };
     apiRef.current.publishEvent('rowsScroll', params);
-  }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
+  }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
 
   const handleScroll = event => {
     const {
@@ -297,7 +306,7 @@ export const useGridVirtualScroller = props => {
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerWidth,
+      availableSpace = containerDimensions.width,
       rowIndexOffset = 0,
       position = 'center'
     } = params;
@@ -403,7 +412,7 @@ export const useGridVirtualScroller = props => {
     return rows;
   };
 
-  const needsHorizontalScrollbar = containerWidth && columnsTotalWidth > containerWidth;
+  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
   const contentSize = React.useMemo(() => {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.17
+/** @license MUI X v5.17.18
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/hooks/features/clipboard/useGridClipboard.js

@@ -20,6 +20,24 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+
+function hasNativeSelection(element) {
+  var _window$getSelection;
+
+  if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+    return true;
+  }
+
+  if (!element) {
+    return false;
+  }
+
+  if ((element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+
+  return false;
+}
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
@@ -48,8 +66,6 @@ export var useGridClipboard = function useGridClipboard(apiRef) {
     }
   }, [apiRef]);
   var handleKeydown = React.useCallback(function (event) {
-    var _window$getSelection;
-
     var isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS.
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -59,7 +75,7 @@ export var useGridClipboard = function useGridClipboard(apiRef) {
     } // Do nothing if there's a native selection
 
 
-    if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+    if (hasNativeSelection(event.target)) {
       return;
     }
 

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

@@ -94,10 +94,13 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     left: 0
   });
 
-  var _React$useState3 = React.useState(null),
+  var _React$useState3 = React.useState({
+    width: null,
+    height: null
+  }),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      containerWidth = _React$useState4[0],
-      setContainerWidth = _React$useState4[1];
+      containerDimensions = _React$useState4[0],
+      setContainerDimensions = _React$useState4[1];
 
   var prevTotalWidth = React.useRef(columnsTotalWidth);
   var getNearestIndexToRender = React.useCallback(function (offset) {
@@ -141,7 +144,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     // In the last index, this is not needed because Array.slice doesn't include it.
 
     var firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
+    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
     var hasRowWithAutoHeight = false;
     var firstColumnIndex = 0;
     var lastColumnIndex = columnPositions.length;
@@ -164,7 +167,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
 
     if (!hasRowWithAutoHeight) {
       firstColumnIndex = binarySearch(left, columnPositions);
-      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
+      lastColumnIndex = binarySearch(left + containerDimensions.width, columnPositions);
     }
 
     return {
@@ -173,7 +176,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       firstColumnIndex: firstColumnIndex,
       lastColumnIndex: lastColumnIndex
     };
-  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   useEnhancedEffect(function () {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = "translate3d(0px, 0px, 0px)";
@@ -184,10 +187,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
   }, [disableVirtualization]);
   useEnhancedEffect(function () {
-    setContainerWidth(rootRef.current.clientWidth);
+    setContainerDimensions({
+      width: rootRef.current.clientWidth,
+      height: rootRef.current.clientHeight
+    });
   }, [rowsMeta.currentPageTotalHeight]);
   var handleResize = React.useCallback(function (params) {
-    setContainerWidth(params.width);
+    setContainerDimensions({
+      width: params.width,
+      height: params.height
+    });
   }, []);
   useGridApiEventHandler(apiRef, 'resize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
@@ -257,7 +266,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     prevRenderContext.current = nextRenderContext;
   }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   useEnhancedEffect(function () {
-    if (containerWidth == null) {
+    if (containerDimensions.width == null) {
       return;
     }
 
@@ -272,7 +281,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       renderContext: initialRenderContext
     };
     apiRef.current.publishEvent('rowsScroll', params);
-  }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
+  }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
 
   var handleScroll = function handleScroll(event) {
     var _event$currentTarget = event.currentTarget,
@@ -326,7 +335,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         _params$maxLastColumn = params.maxLastColumn,
         maxLastColumn = _params$maxLastColumn === void 0 ? renderZoneMaxColumnIndex : _params$maxLastColumn,
         _params$availableSpac = params.availableSpace,
-        availableSpace = _params$availableSpac === void 0 ? containerWidth : _params$availableSpac,
+        availableSpace = _params$availableSpac === void 0 ? containerDimensions.width : _params$availableSpac,
         _params$rowIndexOffse = params.rowIndexOffset,
         rowIndexOffset = _params$rowIndexOffse === void 0 ? 0 : _params$rowIndexOffse,
         _params$position = params.position,
@@ -441,7 +450,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     return rows;
   };
 
-  var needsHorizontalScrollbar = containerWidth && columnsTotalWidth > containerWidth;
+  var needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
   var contentSize = React.useMemo(function () {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.17
+/** @license MUI X v5.17.18
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -20,6 +20,22 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+
+function hasNativeSelection(element) {
+  if (window.getSelection()?.toString() !== '') {
+    return true;
+  }
+
+  if (!element) {
+    return false;
+  }
+
+  if ((element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+
+  return false;
+}
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
@@ -55,7 +71,7 @@ export const useGridClipboard = apiRef => {
     } // Do nothing if there's a native selection
 
 
-    if (window.getSelection()?.toString() !== '') {
+    if (hasNativeSelection(event.target)) {
       return;
     }
 

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

@@ -83,7 +83,10 @@ export const useGridVirtualScroller = props => {
     top: 0,
     left: 0
   });
-  const [containerWidth, setContainerWidth] = React.useState(null);
+  const [containerDimensions, setContainerDimensions] = React.useState({
+    width: null,
+    height: null
+  });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
@@ -125,7 +128,7 @@ export const useGridVirtualScroller = props => {
     // In the last index, this is not needed because Array.slice doesn't include it.
 
     const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
     let hasRowWithAutoHeight = false;
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
@@ -144,7 +147,7 @@ export const useGridVirtualScroller = props => {
 
     if (!hasRowWithAutoHeight) {
       firstColumnIndex = binarySearch(left, columnPositions);
-      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
+      lastColumnIndex = binarySearch(left + containerDimensions.width, columnPositions);
     }
 
     return {
@@ -153,7 +156,7 @@ export const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   useEnhancedEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -164,10 +167,16 @@ export const useGridVirtualScroller = props => {
     }
   }, [disableVirtualization]);
   useEnhancedEffect(() => {
-    setContainerWidth(rootRef.current.clientWidth);
+    setContainerDimensions({
+      width: rootRef.current.clientWidth,
+      height: rootRef.current.clientHeight
+    });
   }, [rowsMeta.currentPageTotalHeight]);
   const handleResize = React.useCallback(params => {
-    setContainerWidth(params.width);
+    setContainerDimensions({
+      width: params.width,
+      height: params.height
+    });
   }, []);
   useGridApiEventHandler(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
@@ -225,7 +234,7 @@ export const useGridVirtualScroller = props => {
     prevRenderContext.current = nextRenderContext;
   }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   useEnhancedEffect(() => {
-    if (containerWidth == null) {
+    if (containerDimensions.width == null) {
       return;
     }
 
@@ -241,7 +250,7 @@ export const useGridVirtualScroller = props => {
       renderContext: initialRenderContext
     };
     apiRef.current.publishEvent('rowsScroll', params);
-  }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
+  }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
 
   const handleScroll = event => {
     const {
@@ -293,7 +302,7 @@ export const useGridVirtualScroller = props => {
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerWidth,
+      availableSpace = containerDimensions.width,
       rowIndexOffset = 0,
       position = 'center'
     } = params;
@@ -397,7 +406,7 @@ export const useGridVirtualScroller = props => {
     return rows;
   };
 
-  const needsHorizontalScrollbar = containerWidth && columnsTotalWidth > containerWidth;
+  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
   const contentSize = React.useMemo(() => {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.17
+/** @license MUI X v5.17.18
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -32,6 +32,24 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+
+function hasNativeSelection(element) {
+  var _window$getSelection;
+
+  if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+    return true;
+  }
+
+  if (!element) {
+    return false;
+  }
+
+  if ((element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+
+  return false;
+}
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
@@ -58,8 +76,6 @@ const useGridClipboard = apiRef => {
     }
   }, [apiRef]);
   const handleKeydown = React.useCallback(event => {
-    var _window$getSelection;
-
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS.
     // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would
     // be wrong with a Dvorak keyboard (as if pressing J).
@@ -69,7 +85,7 @@ const useGridClipboard = apiRef => {
     } // Do nothing if there's a native selection
 
 
-    if (((_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString()) !== '') {
+    if (hasNativeSelection(event.target)) {
       return;
     }
 

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

@@ -122,7 +122,10 @@ const useGridVirtualScroller = props => {
     top: 0,
     left: 0
   });
-  const [containerWidth, setContainerWidth] = React.useState(null);
+  const [containerDimensions, setContainerDimensions] = React.useState({
+    width: null,
+    height: null
+  });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
     var _currentPage$range, _currentPage$range2;
@@ -166,7 +169,7 @@ const useGridVirtualScroller = props => {
     // In the last index, this is not needed because Array.slice doesn't include it.
 
     const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
     let hasRowWithAutoHeight = false;
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
@@ -185,7 +188,7 @@ const useGridVirtualScroller = props => {
 
     if (!hasRowWithAutoHeight) {
       firstColumnIndex = binarySearch(left, columnPositions);
-      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
+      lastColumnIndex = binarySearch(left + containerDimensions.width, columnPositions);
     }
 
     return {
@@ -194,7 +197,7 @@ const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -205,10 +208,16 @@ const useGridVirtualScroller = props => {
     }
   }, [disableVirtualization]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    setContainerWidth(rootRef.current.clientWidth);
+    setContainerDimensions({
+      width: rootRef.current.clientWidth,
+      height: rootRef.current.clientHeight
+    });
   }, [rowsMeta.currentPageTotalHeight]);
   const handleResize = React.useCallback(params => {
-    setContainerWidth(params.width);
+    setContainerDimensions({
+      width: params.width,
+      height: params.height
+    });
   }, []);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
@@ -266,7 +275,7 @@ const useGridVirtualScroller = props => {
     prevRenderContext.current = nextRenderContext;
   }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (containerWidth == null) {
+    if (containerDimensions.width == null) {
       return;
     }
 
@@ -282,7 +291,7 @@ const useGridVirtualScroller = props => {
       renderContext: initialRenderContext
     };
     apiRef.current.publishEvent('rowsScroll', params);
-  }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
+  }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
 
   const handleScroll = event => {
     const {
@@ -334,7 +343,7 @@ const useGridVirtualScroller = props => {
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerWidth,
+      availableSpace = containerDimensions.width,
       rowIndexOffset = 0,
       position = 'center'
     } = params;
@@ -440,7 +449,7 @@ const useGridVirtualScroller = props => {
     return rows;
   };
 
-  const needsHorizontalScrollbar = containerWidth && columnsTotalWidth > containerWidth;
+  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
   const contentSize = React.useMemo(() => {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.17
+/** @license MUI X v5.17.18
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.17.17",
+  "version": "5.17.18",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",