@mui/x-data-grid 5.15.1 → 5.15.2

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.15.2
+
+_Aug 11, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Improve quick filtering with row grouping (#5701) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.15.2` / `@mui/x-data-grid-pro@5.15.2` / `@mui/x-data-grid-premium@5.15.2`
+
+#### Changes
+
+- [DataGrid] Catch errors if rows freezing is not supported (#5711) @cherniavskii
+- [DataGrid] Preserve cell mode when entering edit mode while commiting (#5686) @m4theushw
+- [DataGridPremium] Let quick filter search in row grouping children (#5701) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.0-beta.5` / `@mui/x-date-picker-pro@5.0.0-beta.5`
+
+#### Changes
+
+- [pickers] Add `react-dom` to peerDependencies (#5752) @cherniavskii
+- [TimePicker] Set clock focus outline to `none` (#5758) @LukasTy
+- [pickers] Fix theme augmentation with TypeScript (#5596) @alexfauquette
+- [pickers] Reset input value when locale is modified (#5310) @alexfauquette
+- [pickers] Support `disableHighlightToday` on `MonthPicker` and `YearPicker` (#5562) @flaviendelangle
+- [pickers] Fallback to desktop mode when `matchMedia` is unavailable (#5684) @LukasTy
+- [pickers] Trigger `onChange` when clearing or accepting `Invalid date` (#5740) @LukasTy
+
+### Docs
+
+- [docs] Add RFC GH issue template (#5739) @bytasv
+- [docs] Add description to the `GridExportStateParams` page (#5654) @oliviertassinari
+- [docs] Improve the Events page (#5413) @flaviendelangle
+- [docs] Use new editing API in the introduction demos (#5728) @oliviertassinari
+
+### Core
+
+- [core] Remove duplicated `FUNDING.yml` file (#5656) @oliviertassinari
+- [core] Remove outdated Next.js options (#5727) @oliviertassinari
+- [core] Update tooling to run with React 18 (#4155) @m4theushw
+- [test] Fix failing dynamic row height tests on Edge (#5707) @m4theushw
+
 ## 5.15.1
 
 _Aug 4, 2022_

package/DataGrid/DataGrid.js

@@ -645,7 +645,7 @@ DataGridRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

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

@@ -15,6 +15,7 @@ import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../mode
 const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
+  const cellModesModelRef = React.useRef(cellModesModel);
   const prevCellModesModel = React.useRef({});
   const {
     processRowUpdate,
@@ -62,6 +63,10 @@ export const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.View) {
+      return;
+    }
+
     const newParams = _extends({}, params, {
       reason: GridCellEditStopReasons.cellFocusOut
     });
@@ -194,18 +199,21 @@ 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) => {
-    const newModel = _extends({}, cellModesModel);
+    // 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
+    const newModel = _extends({}, cellModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = _extends({}, newModel[id], {
         [field]: _extends({}, newProps)
       });
     } else {
-      const _cellModesModel$id = cellModesModel[id],
-            otherFields = _objectWithoutPropertiesLoose(_cellModesModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
+      const _newModel$id = newModel[id],
+            otherFields = _objectWithoutPropertiesLoose(_newModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
 
 
       newModel[id] = otherFields;
@@ -216,7 +224,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
 
     updateCellModesModel(newModel);
-  }, [cellModesModel, updateCellModesModel]);
+  }, [updateCellModesModel]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);
@@ -289,12 +297,12 @@ export const useGridCellEditing = (apiRef, props) => {
     apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
 
     const finishCellEditMode = () => {
+      updateOrDeleteFieldState(id, field, null);
+      updateFieldInCellModesModel(id, field, null);
+
       if (cellToFocusAfter !== 'none') {
         apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
       }
-
-      updateOrDeleteFieldState(id, field, null);
-      updateFieldInCellModesModel(id, field, null);
     };
 
     if (ignoreModifications) {

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

@@ -16,6 +16,7 @@ import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models
 const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
+  const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
   const focusTimeout = React.useRef(null);
   const nextFocusedCell = React.useRef(null);
@@ -90,6 +91,11 @@ export const useGridRowEditing = (apiRef, props) => {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {
           return;
+        } // The row may already changed its mode
+
+
+        if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
+          return;
         }
 
         const rowParams = apiRef.current.getRowParams(params.id);
@@ -260,10 +266,11 @@ 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({}, rowModesModel);
+    const newModel = _extends({}, rowModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = _extends({}, newProps);
@@ -272,7 +279,7 @@ export const useGridRowEditing = (apiRef, props) => {
     }
 
     updateRowModesModel(newModel);
-  }, [rowModesModel, updateRowModesModel]);
+  }, [updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);

package/hooks/features/filter/gridFilterState.d.ts

@@ -1,5 +1,12 @@
+import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterModel } from '../../../models/gridFilterModel';
 import { GridRowId } from '../../../models/gridRows';
+export declare type GridFilterItemResult = {
+    [key: Required<GridFilterItem>['id']]: boolean;
+};
+export declare type GridQuickFilterValueResult = {
+    [key: string]: boolean;
+};
 export declare const getDefaultGridFilterModel: () => GridFilterModel;
 export interface GridFilterState {
     filterModel: GridFilterModel;
@@ -31,8 +38,12 @@ export interface GridFilterInitialState {
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
  */
-export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => boolean;
+export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => {
+    passingFilterItems: null | GridFilterItemResult;
+    passingQuickFilterValues: null | GridQuickFilterValueResult;
+};
 export interface GridFilteringMethodParams {
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
+    filterModel: GridFilterModel;
 }
 export declare type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { GridFilterItem, GridFilterModel } from '../../../models';
+import { GridFilterItem, GridFilterModel, GridRowId } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { GridAggregatedFilterItemApplier } from './gridFilterState';
+import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from './gridFilterState';
+declare type GridFilterItemApplierNotAggregated = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => GridFilterItemResult;
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -19,12 +20,14 @@ export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, d
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
+export declare const buildAggregatedFilterItemsApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} values The model with which we want to filter the rows.
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-export declare const buildAggregatedQuickFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
-export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier | null;
+export declare const buildAggregatedQuickFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItemApplierNotAggregated | null;
+export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridApiCommunity>) => GridAggregatedFilterItemApplier;
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel) => boolean;
+export {};

package/hooks/features/filter/gridFilterUtils.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
+import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
-import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -78,10 +78,8 @@ export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFil
 
 export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
-    items,
-    linkOperator = GridLinkOperator.And
+    items
   } = filterModel;
-  const tree = gridRowTreeSelector(apiRef);
 
   const getFilterCallbackFromItem = filterItem => {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -145,18 +143,12 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   }
 
   return (rowId, shouldApplyFilter) => {
-    if (tree[rowId].position === 'footer') {
-      return true;
-    }
-
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers; // Return `false` as soon as we have a failing filter
-
-    if (linkOperator === GridLinkOperator.And) {
-      return filteredAppliers.every(applier => applier.fn(rowId));
-    } // Return `true` as soon as we have a passing filter
-
-
-    return filteredAppliers.some(applier => applier.fn(rowId));
+    const resultPerItemId = {};
+    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers;
+    filteredAppliers.forEach(applier => {
+      resultPerItemId[applier.item.id] = applier.fn(rowId);
+    });
+    return resultPerItemId;
   };
 };
 /**
@@ -168,8 +160,7 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
 
 export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const {
-    quickFilterValues = [],
-    quickFilterLogicOperator = GridLinkOperator.And
+    quickFilterValues = []
   } = filterModel;
 
   if (quickFilterValues.length === 0) {
@@ -190,6 +181,11 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   }); // If some value does not have an applier we ignore them
 
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
+
+  if (sanitizedQuickFilterValues.length === 0) {
+    return null;
+  }
+
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
     const columnsFieldsToFilter = [];
@@ -198,10 +194,10 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
         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) => columnsFieldsToFilter.some(field => {
+    });
+    const quickFilterValueResult = {};
+    sanitizedQuickFilterValues.forEach((value, index) => {
+      const isPassing = columnsFieldsToFilter.some(field => {
         var _appliersPerColumnFie, _appliersPerColumnFie2;
 
         if (appliersPerColumnField[field][index] == null) {
@@ -209,36 +205,71 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
         }
 
         return (_appliersPerColumnFie = (_appliersPerColumnFie2 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie.call(_appliersPerColumnFie2, usedCellParams[field]);
-      }));
-    } // Return `true` as soon as we have have a quick filter value that match any column
+      });
+      quickFilterValueResult[value] = isPassing;
+    });
+    return quickFilterValueResult;
+  };
+};
+export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+  return (rowId, shouldApplyFilter) => ({
+    passingFilterItems: isRowMatchingFilterItems && isRowMatchingFilterItems(rowId, shouldApplyFilter),
+    passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
+  });
+};
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+  var _filterModel$quickFil, _filterModel$linkOper;
 
+  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
+  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
 
-    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
-      var _appliersPerColumnFie3, _appliersPerColumnFie4;
+  const quickFilterLogicOperator = (_filterModel$quickFil = filterModel.quickFilterLogicOperator) != null ? _filterModel$quickFil : getDefaultGridFilterModel().quickFilterLogicOperator;
+  const linkOperator = (_filterModel$linkOper = filterModel.linkOperator) != null ? _filterModel$linkOper : getDefaultGridFilterModel().linkOperator; // get result for filter items model
 
-      if (appliersPerColumnField[field][index] == null) {
+  if (cleanedAllFilterItemResults.length > 0) {
+    // Return true if the item pass with one of the rows
+    const filterItemPredicate = item => {
+      return cleanedAllFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
+    };
+
+    if (linkOperator === GridLinkOperator.And) {
+      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+
+      if (!passesAllFilters) {
         return false;
       }
+    } else {
+      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
 
-      return (_appliersPerColumnFie3 = (_appliersPerColumnFie4 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie3.call(_appliersPerColumnFie4, usedCellParams[field]);
-    }));
-  };
-};
-export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+      if (!passesSomeFilters) {
+        return false;
+      }
+    }
+  } // get result for quick filter model
 
-  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
-    return null;
-  }
 
-  if (isRowMatchingFilterItems == null) {
-    return isRowMatchingQuickFilter;
-  }
+  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+    // Return true if the item pass with one of the rows
+    const quickFilterValuePredicate = value => {
+      return cleanedAllQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
+    };
+
+    if (quickFilterLogicOperator === GridLinkOperator.And) {
+      const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
 
-  if (isRowMatchingQuickFilter == null) {
-    return isRowMatchingFilterItems;
+      if (!passesAllQuickFilterValues) {
+        return false;
+      }
+    } else {
+      const passesSomeQuickFilterValues = filterModel.quickFilterValues.some(quickFilterValuePredicate);
+
+      if (!passesSomeQuickFilterValues) {
+        return false;
+      }
+    }
   }
 
-  return (rowId, shouldApplyFilter) => isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
+  return true;
 };

package/hooks/features/filter/useGridFilter.js

@@ -12,7 +12,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
@@ -49,7 +49,8 @@ export const useGridFilter = (apiRef, props) => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
-        isRowMatchingFilters
+        isRowMatchingFilters,
+        filterModel: filterModel != null ? filterModel : getDefaultGridFilterModel()
       });
       return _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
@@ -261,7 +262,19 @@ export const useGridFilter = (apiRef, props) => {
 
       for (let i = 0; i < rowIds.length; i += 1) {
         const rowId = rowIds[i];
-        filteredRowsLookup[rowId] = params.isRowMatchingFilters(rowId);
+        let isRowPassing;
+
+        if (typeof rowId === 'string' && rowId.startsWith('auto-generated-group-footer')) {
+          isRowPassing = true;
+        } else {
+          const {
+            passingFilterItems,
+            passingQuickFilterValues
+          } = params.isRowMatchingFilters(rowId);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+        }
+
+        filteredRowsLookup[rowId] = isRowPassing;
       }
 
       return {

package/hooks/features/focus/useGridFocus.js

@@ -60,6 +60,12 @@ export const useGridFocus = (apiRef, props) => {
       return;
     }
 
+    if (focusedCell) {
+      // There's a focused cell but another cell was clicked
+      // Publishes an event to notify that the focus was lost
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field));
+    }
+
     apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
@@ -191,11 +197,7 @@ export const useGridFocus = (apiRef, props) => {
 
     if (!apiRef.current.getRow(focusedCell.id)) {
       return;
-    } // There's a focused cell but another cell was clicked
-    // Publishes an event to notify that the focus was lost
-
-
-    apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+    }
 
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
@@ -206,7 +208,10 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: null
         }
       }));
-      apiRef.current.forceUpdate();
+      apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
+      // Publishes an event to notify that the focus was lost
+
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
     }
   }, [apiRef]);
   const handleCellModeChange = React.useCallback(params => {

package/hooks/features/rows/useGridRows.js

@@ -26,8 +26,11 @@ export const rowsStateInitializer = (state, props, apiRef) => {
 };
 export const useGridRows = (apiRef, props) => {
   if (process.env.NODE_ENV !== 'production') {
-    // Freeze rows for immutability
-    Object.freeze(props.rows);
+    try {
+      // Freeze the `rows` prop so developers have a fast failure if they try to use Array.prototype.push().
+      Object.freeze(props.rows);
+    } catch (error) {// Sometimes, it's impossible to freeze, so we give up on it.
+    }
   }
 
   const logger = useGridLogger(apiRef, 'useGridRows');

package/hooks/features/statePersistence/gridStatePersistenceInterface.d.ts

@@ -20,6 +20,9 @@ export interface GridRestoreStatePreProcessingValue {
      */
     callbacks: (() => void)[];
 }
+/**
+ * Object passed as parameter in the `exportState()` grid API method.
+ */
 export interface GridExportStateParams {
     /**
      * By default, the grid exports all the models.

package/index.js

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

package/internals/index.d.ts

@@ -18,6 +18,7 @@ export { useGridDensity, densityStateInitializer } from '../hooks/features/densi
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
+export { passFilterLogic } from '../hooks/features/filter/gridFilterUtils';
 export type { GridAggregatedFilterItemApplier } from '../hooks/features/filter/gridFilterState';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';

package/internals/index.js

@@ -15,6 +15,7 @@ export { useGridDensity, densityStateInitializer } from '../hooks/features/densi
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
+export { passFilterLogic } from '../hooks/features/filter/gridFilterUtils';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';

package/legacy/DataGrid/DataGrid.js

@@ -647,7 +647,7 @@ DataGridRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

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

@@ -23,6 +23,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       cellModesModel = _React$useState2[0],
       setCellModesModel = _React$useState2[1];
 
+  var cellModesModelRef = React.useRef(cellModesModel);
   var prevCellModesModel = React.useRef({});
   var processRowUpdate = props.processRowUpdate,
       onProcessRowUpdateError = props.onProcessRowUpdateError,
@@ -70,6 +71,10 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       return;
     }
 
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.View) {
+      return;
+    }
+
     var newParams = _extends({}, params, {
       reason: GridCellEditStopReasons.cellFocusOut
     });
@@ -198,17 +203,20 @@ 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) {
-    var newModel = _extends({}, cellModesModel);
+    // 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
+    var newModel = _extends({}, cellModesModelRef.current);
 
     if (newProps !== null) {
       newModel[id] = _extends({}, newModel[id], _defineProperty({}, field, _extends({}, newProps)));
     } else {
-      var _cellModesModel$id = cellModesModel[id],
-          fieldToRemove = _cellModesModel$id[field],
-          otherFields = _objectWithoutProperties(_cellModesModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
+      var _newModel$id = newModel[id],
+          fieldToRemove = _newModel$id[field],
+          otherFields = _objectWithoutProperties(_newModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
 
 
       newModel[id] = otherFields;
@@ -219,7 +227,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     }
 
     updateCellModesModel(newModel);
-  }, [cellModesModel, updateCellModesModel]);
+  }, [updateCellModesModel]);
   var updateOrDeleteFieldState = React.useCallback(function (id, field, newProps) {
     apiRef.current.setState(function (state) {
       var newEditingState = _extends({}, state.editRows);
@@ -286,12 +294,12 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
 
               finishCellEditMode = function finishCellEditMode() {
+                updateOrDeleteFieldState(id, field, null);
+                updateFieldInCellModesModel(id, field, null);
+
                 if (cellToFocusAfter !== 'none') {
                   apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
                 }
-
-                updateOrDeleteFieldState(id, field, null);
-                updateFieldInCellModesModel(id, field, null);
               };
 
               if (!ignoreModifications) {