@mui/x-data-grid 5.17.4 → 5.17.6

package/legacy/hooks/features/editRows/useGridCellEditing.new.js

@@ -8,6 +8,7 @@ var _excluded = ["id", "field"],
     _excluded2 = ["id", "field"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -111,6 +112,10 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     } else if (params.isEditable) {
       var _reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if (isPrintableKey(event)) {
         _reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -189,7 +194,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     var isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
-  var updateCellModesModel = React.useCallback(function (newModel) {
+  var updateCellModesModel = useEventCallback(function (newModel) {
     var isNewModelDifferentFromProp = newModel !== props.cellModesModel;
 
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
@@ -206,7 +211,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
-  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  });
   var updateFieldInCellModesModel = React.useCallback(function (id, field, newProps) {
     // We use the ref because it always contain the up-to-date value, different from the state
     // that needs a rerender to reflect the new value
@@ -260,7 +265,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  var updateStateToStartCellEditMode = React.useCallback(function (params) {
+  var updateStateToStartCellEditMode = useEventCallback(function (params) {
     var id = params.id,
         field = params.field,
         deleteValue = params.deleteValue;
@@ -271,7 +276,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, updateOrDeleteFieldState]);
+  });
   var stopCellEditMode = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
@@ -282,7 +287,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       mode: GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  var updateStateToStopCellEditMode = React.useCallback( /*#__PURE__*/function () {
+  var updateStateToStopCellEditMode = useEventCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
       var id, field, ignoreModifications, _params$cellToFocusAf, cellToFocusAfter, finishCellEditMode, editingState, _editingState$id$fiel, error, isProcessingProps, rowUpdate, handleError, row;
 
@@ -334,7 +339,11 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
 
               if (processRowUpdate) {
                 handleError = function handleError(errorThrown) {
-                  prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+                  prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+                  updateFieldInCellModesModel(id, field, {
+                    mode: GridCellModes.Edit
+                  });
 
                   if (onProcessRowUpdateError) {
                     onProcessRowUpdateError(errorThrown);
@@ -368,7 +377,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
+  }());
   var setCellEditingEditCellValue = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
       var _editingState$id, _editingState$id$fiel2;

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -6,6 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["id"],
     _excluded2 = ["id"];
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -168,6 +169,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     } else if (params.isEditable) {
       var _reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if (isPrintableKey(event)) {
         _reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -256,7 +261,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
-  var updateRowModesModel = React.useCallback(function (newModel) {
+  var updateRowModesModel = useEventCallback(function (newModel) {
     var isNewModelDifferentFromProp = newModel !== props.rowModesModel;
 
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
@@ -273,7 +278,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
-  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  });
   var updateRowInRowModesModel = React.useCallback(function (id, newProps) {
     var newModel = _extends({}, rowModesModelRef.current);
 
@@ -330,7 +335,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       mode: GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  var updateStateToStartRowEditMode = React.useCallback(function (params) {
+  var updateStateToStartRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         fieldToFocus = params.fieldToFocus,
         deleteValue = params.deleteValue;
@@ -355,7 +360,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   var stopRowEditMode = React.useCallback(function (params) {
     var id = params.id,
         other = _objectWithoutProperties(params, _excluded2);
@@ -365,7 +370,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  var updateStateToStopRowEditMode = React.useCallback(function (params) {
+  var updateStateToStopRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         ignoreModifications = params.ignoreModifications,
         focusedField = params.field,
@@ -415,7 +420,11 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+        prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+        updateRowInRowModesModel(id, {
+          mode: GridRowModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -436,7 +445,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,

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

@@ -104,16 +104,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var _currentPage$range, _currentPage$range2;
 
     var lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
-    var lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
-    var lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
-    var allRowsMeasured = lastMeasuredIndex === Infinity;
+    var allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
 
-    if ((_currentPage$range2 = currentPage.range) != null && _currentPage$range2.lastRowIndex && !allRowsMeasured) {
+    if ((_currentPage$range = currentPage.range) != null && _currentPage$range.lastRowIndex && !allRowsMeasured) {
       // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
     }
 
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+    var lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.firstRowIndex) || 0), 0, rowsMeta.positions.length);
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
       // If all rows were measured (when no row has "auto" as height) or all rows before the offset
       // were measured, then use a binary search because it's faster.
       return binarySearch(offset, rowsMeta.positions);
@@ -123,7 +123,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
 
 
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, (_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex, (_currentPage$range4 = currentPage.range) == null ? void 0 : _currentPage$range4.lastRowIndex, rowsMeta.positions]);
   var computeRenderContext = React.useCallback(function () {
     if (disableVirtualization) {

package/legacy/index.js

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

package/modern/components/GridPagination.js

@@ -47,8 +47,7 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   }
 
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
-    ref: ref // @ts-ignore
-    ,
+    ref: ref,
     component: "div",
     count: paginationState.rowCount,
     page: paginationState.page <= lastPage ? paginationState.page : lastPage,

package/modern/components/GridRow.js

@@ -5,7 +5,7 @@ const _excluded = ["selected", "rowId", "row", "index", "style", "position", "ro
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses, useForkRef } from '@mui/material';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -55,7 +55,7 @@ const EmptyCell = ({
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     selected,
     rowId,
@@ -88,6 +88,7 @@ function GridRow(props) {
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const handleRef = useForkRef(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const {
@@ -368,7 +369,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -381,8 +382,7 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -71,7 +71,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
+                  ${item.value ?? ''}`
         }, index)))
       })]
     });

package/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
       _excluded2 = ["id", "field"];
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -103,6 +104,10 @@ export const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -185,7 +190,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
-  const updateCellModesModel = React.useCallback(newModel => {
+  const updateCellModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
 
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
@@ -202,7 +207,7 @@ export const useGridCellEditing = (apiRef, props) => {
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
-  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  });
   const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
     // We use the ref because it always contain the up-to-date value, different from the state
     // that needs a rerender to reflect the new value
@@ -261,7 +266,7 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = React.useCallback(params => {
+  const updateStateToStartCellEditMode = useEventCallback(params => {
     const {
       id,
       field,
@@ -274,7 +279,7 @@ export const useGridCellEditing = (apiRef, props) => {
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, updateOrDeleteFieldState]);
+  });
   const stopCellEditMode = React.useCallback(params => {
     const {
       id,
@@ -287,7 +292,7 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStopCellEditMode = React.useCallback(async params => {
+  const updateStateToStopCellEditMode = useEventCallback(async params => {
     const {
       id,
       field,
@@ -332,7 +337,11 @@ export const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+        updateFieldInCellModesModel(id, field, {
+          mode: GridCellModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -354,7 +363,7 @@ export const useGridCellEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishCellEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
+  });
   const setCellEditingEditCellValue = React.useCallback(async params => {
     const {
       id,

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id"],
       _excluded2 = ["id"];
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -158,6 +159,10 @@ export const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if (isPrintableKey(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -250,7 +255,7 @@ export const useGridRowEditing = (apiRef, props) => {
     const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
-  const updateRowModesModel = React.useCallback(newModel => {
+  const updateRowModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
 
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
@@ -267,7 +272,7 @@ export const useGridRowEditing = (apiRef, props) => {
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
-  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  });
   const updateRowInRowModesModel = React.useCallback((id, newProps) => {
     const newModel = _extends({}, rowModesModelRef.current);
 
@@ -328,7 +333,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStartRowEditMode = React.useCallback(params => {
+  const updateStateToStartRowEditMode = useEventCallback(params => {
     const {
       id,
       fieldToFocus,
@@ -355,7 +360,7 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   const stopRowEditMode = React.useCallback(params => {
     const {
       id
@@ -367,7 +372,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = React.useCallback(params => {
+  const updateStateToStopRowEditMode = useEventCallback(params => {
     const {
       id,
       ignoreModifications,
@@ -414,7 +419,11 @@ export const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+        prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+        updateRowInRowModesModel(id, {
+          mode: GridRowModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -435,7 +444,7 @@ export const useGridRowEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,

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

@@ -87,16 +87,16 @@ export const useGridVirtualScroller = props => {
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
-    const lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0);
-    const lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
-    let allRowsMeasured = lastMeasuredIndex === Infinity;
+    let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
 
     if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
       // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
     }
 
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+    const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
       // If all rows were measured (when no row has "auto" as height) or all rows before the offset
       // were measured, then use a binary search because it's faster.
       return binarySearch(offset, rowsMeta.positions);
@@ -106,7 +106,7 @@ export const useGridVirtualScroller = props => {
     // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
 
 
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {

package/modern/index.js

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

package/node/components/GridPagination.js

@@ -75,8 +75,7 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
-    ref: ref // @ts-ignore
-    ,
+    ref: ref,
     component: "div",
     count: paginationState.rowCount,
     page: paginationState.page <= lastPage ? paginationState.page : lastPage,

package/node/components/GridRow.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridRow = GridRow;
+exports.GridRow = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -89,7 +89,7 @@ const EmptyCell = ({
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var _apiRef$current$getRo;
 
   const {
@@ -123,6 +123,7 @@ function GridRow(props) {
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeDepthSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderGroupingMaxDepthSelector);
+  const handleRef = (0, _material.useForkRef)(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const {
@@ -407,7 +408,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -420,8 +421,8 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
+exports.GridRow = GridRow;
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -98,11 +98,15 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => {
+          var _item$value;
+
+          return (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
-        }, index)))
+                  ${(_item$value = item.value) != null ? _item$value : ''}`
+          }, index));
+        })
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);