@mui/x-data-grid 5.12.2 → 5.13.1

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -10,5 +10,5 @@ export interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title'
         button?: ButtonProps;
     };
 }
-declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<Pick<GridToolbarFilterButtonProps, "hidden" | "color" | "style" | "open" | "translate" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onClose" | "sx" | "classes" | "components" | "componentsProps" | "TransitionComponent" | "TransitionProps" | "onOpen" | "placement" | "arrow" | "describeChild" | "disableFocusListener" | "disableHoverListener" | "disableInteractive" | "disableTouchListener" | "enterDelay" | "enterNextDelay" | "enterTouchDelay" | "followCursor" | "leaveDelay" | "leaveTouchDelay" | "PopperComponent" | "PopperProps"> & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<Pick<GridToolbarFilterButtonProps, "hidden" | "color" | "style" | "open" | "translate" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onClose" | "sx" | "classes" | "components" | "placement" | "arrow" | "componentsProps" | "TransitionComponent" | "TransitionProps" | "onOpen" | "describeChild" | "disableFocusListener" | "disableHoverListener" | "disableInteractive" | "disableTouchListener" | "enterDelay" | "enterNextDelay" | "enterTouchDelay" | "followCursor" | "leaveDelay" | "leaveTouchDelay" | "PopperComponent" | "PopperProps"> & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/hooks/features/dimensions/useGridDimensions.js

@@ -71,21 +71,34 @@ export function useGridDimensions(apiRef, props) {
       rootElement.removeChild(scrollDiv);
     }
 
-    const viewportOuterSize = {
-      width: rootDimensionsRef.current.width,
-      height: props.autoHeight ? rowsMeta.currentPageTotalHeight : rootDimensionsRef.current.height - headerHeight
-    };
-    const {
-      hasScrollX,
-      hasScrollY
-    } = hasScroll({
-      content: {
-        width: Math.round(columnsTotalWidth),
-        height: rowsMeta.currentPageTotalHeight
-      },
-      container: viewportOuterSize,
-      scrollBarSize
-    });
+    let viewportOuterSize;
+    let hasScrollX;
+    let hasScrollY;
+
+    if (props.autoHeight) {
+      hasScrollY = false;
+      hasScrollX = Math.round(columnsTotalWidth) > rootDimensionsRef.current.width;
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
+      };
+    } else {
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rootDimensionsRef.current.height - headerHeight
+      };
+      const scrollInformation = hasScroll({
+        content: {
+          width: Math.round(columnsTotalWidth),
+          height: rowsMeta.currentPageTotalHeight
+        },
+        container: viewportOuterSize,
+        scrollBarSize
+      });
+      hasScrollY = scrollInformation.hasScrollY;
+      hasScrollX = scrollInformation.hasScrollX;
+    }
+
     const viewportInnerSize = {
       width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),
       height: viewportOuterSize.height - (hasScrollX ? scrollBarSize : 0)

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

@@ -70,6 +70,12 @@ export const useGridCellEditing = (apiRef, props) => {
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       let reason;
 
       if (event.key === 'Escape') {
@@ -92,7 +98,7 @@ export const useGridCellEditing = (apiRef, props) => {
       let reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 

package/hooks/features/editRows/useGridCellEditing.old.js

@@ -179,6 +179,12 @@ export const useCellEditing = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, cellEditingApi, 'EditRowApi');
   const handleCellKeyDown = React.useCallback(async (params, event) => {
+    // Wait until IME is settled for Asian languages like Japanese and Chinese
+    // TODO: `event.which` is depricated but this is a temporary workaround
+    if (event.which === 229) {
+      return;
+    }
+
     const {
       id,
       field,

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

@@ -110,6 +110,12 @@ export const useGridRowEditing = (apiRef, props) => {
   }, []);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridRowModes.Edit) {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       let reason;
 
       if (event.key === 'Escape') {
@@ -148,7 +154,7 @@ export const useGridRowEditing = (apiRef, props) => {
       let reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 

package/hooks/features/editRows/useGridRowEditing.old.js

@@ -176,6 +176,12 @@ export const useGridRowEditing = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, rowEditingApi, 'EditRowApi');
   const handleCellKeyDown = React.useCallback(async (params, event) => {
+    // Wait until IME is settled for Asian languages like Japanese and Chinese
+    // TODO: `event.which` is depricated but this is a temporary workaround
+    if (event.which === 229) {
+      return;
+    }
+
     const {
       cellMode,
       isEditable

package/hooks/features/filter/gridFilterUtils.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
-import { gridColumnFieldsSelector } from '../columns';
+import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -18,8 +18,9 @@ export const cleanFilterItem = (item, apiRef) => {
   }
 
   if (cleanItem.operatorValue == null) {
-    // we select a default operator
-    const column = apiRef.current.getColumn(cleanItem.columnField);
+    // Selects a default operator
+    // We don't use `apiRef.current.getColumn` because it is not ready during state initialization
+    const column = gridColumnLookupSelector(apiRef)[cleanItem.columnField];
     cleanItem.operatorValue = column && column.filterOperators[0].value;
   }
 
@@ -185,14 +186,16 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
+    const columnsFieldsToFilter = [];
     Object.keys(appliersPerColumnField).forEach(columnField => {
       if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
         usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
+        columnsFieldsToFilter.push(columnField);
       }
     }); // Return `false` as soon as we have a quick filter value that does not match any column
 
     if (quickFilterLogicOperator === GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
         var _appliersPerColumnFie, _appliersPerColumnFie2;
 
         if (appliersPerColumnField[field][index] == null) {
@@ -204,7 +207,7 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     } // Return `true` as soon as we have have a quick filter value that match any column
 
 
-    return sanitizedQuickFilterValues.some((value, index) => Object.keys(appliersPerColumnField).some(field => {
+    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
       var _appliersPerColumnFie3, _appliersPerColumnFie4;
 
       if (appliersPerColumnField[field][index] == null) {

package/hooks/features/filter/useGridFilter.js

@@ -113,7 +113,25 @@ export const useGridFilter = (apiRef, props) => {
 
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
-      const filterItemsWithValue = filterModel.items.filter(item => item.value !== undefined);
+      const filterItemsWithValue = filterModel.items.filter(item => {
+        var _column$filterOperato;
+
+        if (item.value !== undefined) {
+          return true;
+        }
+
+        const column = apiRef.current.getColumn(item.columnField);
+        const filterOperator = (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.find(operator => operator.value === item.operatorValue);
+        const requiresFilterValue = typeof (filterOperator == null ? void 0 : filterOperator.requiresFilterValue) === 'undefined' ? true : filterOperator == null ? void 0 : filterOperator.requiresFilterValue; // Operators like `isEmpty` don't have and don't require `item.value`.
+        // So we don't want to remove them from the filter model if `item.value === undefined`.
+        // See https://github.com/mui/mui-x/issues/5402
+
+        if (requiresFilterValue) {
+          return false;
+        }
+
+        return true;
+      });
       let newFilterItems;
       const filterItemOnTarget = filterItemsWithValue.find(item => item.columnField === targetColumnField);
 

package/hooks/features/rows/useGridRows.js

@@ -97,7 +97,7 @@ export const useGridRows = (apiRef, props) => {
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
-      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
@@ -323,10 +323,23 @@ export const useGridRows = (apiRef, props) => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    }
+
+    const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
+    if (areNewRowsAlreadyInState) {
+      // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
+      if (!isNewLoadingAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            loading: props.loading
+          })
+        }));
+        apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates = props.loading;
+        apiRef.current.forceUpdate();
+      }
 
-    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }
 

package/hooks/features/rows/useGridRowsPreProcessors.js

@@ -11,7 +11,7 @@ const flatRowTreeCreationMethod = ({
   for (let i = 0; i < ids.length; i += 1) {
     const rowId = ids[i];
 
-    if (previousTree && previousTree[rowId]) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -54,6 +54,8 @@ export const getRenderableIndexes = ({
   return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
 };
 export const useGridVirtualScroller = props => {
+  var _currentPage$range3, _currentPage$range4;
+
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
@@ -86,8 +88,17 @@ export const useGridVirtualScroller = props => {
   const [containerWidth, setContainerWidth] = React.useState(null);
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
-    const lastMeasuredIndex = Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex());
-    const allRowsMeasured = lastMeasuredIndex === Infinity;
+    var _currentPage$range, _currentPage$range2;
+
+    const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
+    const lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+    const lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
+    let allRowsMeasured = lastMeasuredIndex === Infinity;
+
+    if ((_currentPage$range2 = currentPage.range) != null && _currentPage$range2.lastRowIndex && !allRowsMeasured) {
+      // Check if all rows in this page are already measured
+      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+    }
 
     if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
       // If all rows were measured (when no row has "auto" as height) or all rows before the offset
@@ -100,7 +111,7 @@ export const useGridVirtualScroller = props => {
 
 
     return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
-  }, [apiRef, rowsMeta.positions]);
+  }, [apiRef, (_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex, (_currentPage$range4 = currentPage.range) == null ? void 0 : _currentPage$range4.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
       return {

package/hooks/utils/useGridApiContext.js

@@ -4,7 +4,7 @@ export function useGridApiContext() {
   const apiRef = React.useContext(GridApiContext);
 
   if (apiRef === undefined) {
-    throw new Error(['MUI: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid or DataGridPro parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
   }
 
   return apiRef;

package/hooks/utils/useGridRootProps.js

@@ -4,7 +4,7 @@ export const useGridRootProps = () => {
   const contextValue = React.useContext(GridRootPropsContext);
 
   if (!contextValue) {
-    throw new Error('MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.');
+    throw new Error('MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.');
   }
 
   return contextValue;

package/index.js

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

package/legacy/DataGrid/DataGrid.js

@@ -88,7 +88,7 @@ DataGridRaw.propTypes = {
     if (props.columns && props.columns.some(function (column) {
       return column.resizable;
     })) {
-      return new Error(["MUI: `column.resizable = true` is not a valid prop.", 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      return new Error(["MUI: `column.resizable = true` is not a valid prop.", 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
 
     return null;
@@ -658,14 +658,14 @@ DataGridRaw.propTypes = {
    */
   pageSize: chainPropTypes(PropTypes.number, function (props) {
     if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) {
-      return new Error(["MUI: `<DataGrid pageSize={".concat(props.pageSize, "} />` is not a valid prop."), "Only page size below ".concat(MAX_PAGE_SIZE, " is available in the MIT version."), '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      return new Error(["MUI: `<DataGrid pageSize={".concat(props.pageSize, "} />` is not a valid prop."), "Only page size below ".concat(MAX_PAGE_SIZE, " is available in the MIT version."), '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
 
     return null;
   }),
   pagination: function pagination(props) {
     if (props.pagination === false) {
-      return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to disable the pagination.'].join('\n'));
+      return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));
     }
 
     return null;
@@ -745,7 +745,7 @@ DataGridRaw.propTypes = {
    */
   selectionModel: chainPropTypes(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), function (props) {
     if (!props.checkboxSelection && Array.isArray(props.selectionModel) && props.selectionModel.length > 1) {
-      return new Error(["MUI: `<DataGrid selectionModel={".concat(JSON.stringify(props.selectionModel), "} />` is not a valid prop."), 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to the DataGridPro component to unlock multiple selection.'].join('\n'));
+      return new Error(["MUI: `<DataGrid selectionModel={".concat(JSON.stringify(props.selectionModel), "} />` is not a valid prop."), 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
 
     return null;

package/legacy/colDef/gridDateOperators.js

@@ -111,7 +111,8 @@ export var getGridDateOperators = function getGridDateOperators(showTime) {
         var value = _ref2.value;
         return value == null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isNotEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
@@ -119,6 +120,7 @@ export var getGridDateOperators = function getGridDateOperators(showTime) {
         var value = _ref3.value;
         return value != null;
       };
-    }
+    },
+    requiresFilterValue: false
   }];
 };

package/legacy/colDef/gridNumericOperators.js

@@ -150,7 +150,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         var value = _ref8.value;
         return value == null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isNotEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
@@ -158,7 +159,8 @@ export var getGridNumericOperators = function getGridNumericOperators() {
         var value = _ref9.value;
         return value != null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isAnyOf',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {

package/legacy/colDef/gridStringOperators.js

@@ -13,6 +13,7 @@ export var getGridStringQuickFilterFn = function getGridStringQuickFilterFn(valu
   };
 };
 export var getGridStringOperators = function getGridStringOperators() {
+  var disableTrim = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return [{
     value: 'contains',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
@@ -20,7 +21,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
-      var filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
       return function (_ref2) {
         var value = _ref2.value;
         return value != null ? filterRegex.test(value.toString()) : false;
@@ -34,13 +36,14 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
       var collator = new Intl.Collator(undefined, {
         sensitivity: 'base',
         usage: 'search'
       });
       return function (_ref3) {
         var value = _ref3.value;
-        return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+        return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
       };
     },
     InputComponent: GridFilterInputValue
@@ -51,7 +54,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
-      var filterRegex = new RegExp("^".concat(escapeRegExp(filterItem.value), ".*$"), 'i');
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp("^".concat(escapeRegExp(filterItemValue), ".*$"), 'i');
       return function (_ref4) {
         var value = _ref4.value;
         return value != null ? filterRegex.test(value.toString()) : false;
@@ -65,7 +69,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
-      var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItem.value), "$"), 'i');
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+      var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItemValue), "$"), 'i');
       return function (_ref5) {
         var value = _ref5.value;
         return value != null ? filterRegex.test(value.toString()) : false;
@@ -79,7 +84,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         var value = _ref6.value;
         return value === '' || value == null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isNotEmpty',
     getApplyFilterFn: function getApplyFilterFn() {
@@ -87,7 +93,8 @@ export var getGridStringOperators = function getGridStringOperators() {
         var value = _ref7.value;
         return value !== '' && value != null;
       };
-    }
+    },
+    requiresFilterValue: false
   }, {
     value: 'isAnyOf',
     getApplyFilterFn: function getApplyFilterFn(filterItem) {
@@ -95,13 +102,16 @@ export var getGridStringOperators = function getGridStringOperators() {
         return null;
       }
 
+      var filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(function (val) {
+        return val.trim();
+      });
       var collator = new Intl.Collator(undefined, {
         sensitivity: 'base',
         usage: 'search'
       });
       return function (_ref8) {
         var value = _ref8.value;
-        return value != null ? filterItem.value.some(function (filterValue) {
+        return value != null ? filterItemValue.some(function (filterValue) {
           return collator.compare(filterValue, value.toString() || '') === 0;
         }) : false;
       };

package/legacy/components/GridRow.js

@@ -112,7 +112,7 @@ function GridRow(props) {
       // Fallback for IE
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  });
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(function () {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the

package/legacy/components/cell/GridBooleanCell.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -31,6 +32,7 @@ export var GridBooleanCell = /*#__PURE__*/React.memo(function (props) {
       getValue = props.getValue,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var ownerState = {
     classes: rootProps.classes
@@ -42,7 +44,7 @@ export var GridBooleanCell = /*#__PURE__*/React.memo(function (props) {
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,
-    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
 });

package/legacy/components/cell/GridEditBooleanCell.js

@@ -11,6 +11,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -44,6 +45,7 @@ function GridEditBooleanCell(props) {
       onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var inputRef = React.useRef(null);
   var id = useId();
 
@@ -77,7 +79,7 @@ function GridEditBooleanCell(props) {
             case 4:
               setValueState(newValue);
               _context.next = 7;
-              return api.setEditCellValue({
+              return apiRef.current.setEditCellValue({
                 id: idProp,
                 field: field,
                 value: newValue
@@ -94,7 +96,7 @@ function GridEditBooleanCell(props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [api, field, idProp, onValueChange]);
+  }(), [apiRef, field, idProp, onValueChange]);
   React.useEffect(function () {
     setValueState(value);
   }, [value]);

package/legacy/components/cell/GridEditDateCell.js

@@ -11,6 +11,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -42,6 +43,7 @@ function GridEditDateCell(props) {
       other = _objectWithoutProperties(props, _excluded);
 
   var isDateTime = colDef.type === 'dateTime';
+  var apiRef = useGridApiContext();
   var inputRef = React.useRef();
   var valueTransformed = React.useMemo(function () {
     var parsedDate;
@@ -117,7 +119,7 @@ function GridEditDateCell(props) {
                 parsed: newParsedDate,
                 formatted: newFormattedDate
               });
-              api.setEditCellValue({
+              apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
                 value: newParsedDate
@@ -134,7 +136,7 @@ function GridEditDateCell(props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [api, field, id, onValueChange]);
+  }(), [apiRef, field, id, onValueChange]);
   React.useEffect(function () {
     setValueState(function (state) {
       var _valueTransformed$par, _state$parsed;