@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/hooks/features/events/useGridEvents.js

@@ -1,4 +1,3 @@
-import { GridEvents } from '../../../models/events';
 import { useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 
 /**
@@ -6,21 +5,21 @@ import { useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
  * @requires useGridColumns (event) - can be after, async only
  */
 export function useGridEvents(apiRef, props) {
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderClick, props.onColumnHeaderClick);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderDoubleClick, props.onColumnHeaderDoubleClick);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderOver, props.onColumnHeaderOver);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderOut, props.onColumnHeaderOut);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderEnter, props.onColumnHeaderEnter);
-  useGridApiOptionHandler(apiRef, GridEvents.columnHeaderLeave, props.onColumnHeaderLeave);
-  useGridApiOptionHandler(apiRef, GridEvents.columnOrderChange, props.onColumnOrderChange);
-  useGridApiOptionHandler(apiRef, GridEvents.cellClick, props.onCellClick);
-  useGridApiOptionHandler(apiRef, GridEvents.cellDoubleClick, props.onCellDoubleClick);
-  useGridApiOptionHandler(apiRef, GridEvents.cellKeyDown, props.onCellKeyDown);
-  useGridApiOptionHandler(apiRef, GridEvents.cellFocusOut, props.onCellFocusOut);
-  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelClose, props.onPreferencePanelClose);
-  useGridApiOptionHandler(apiRef, GridEvents.preferencePanelOpen, props.onPreferencePanelOpen);
-  useGridApiOptionHandler(apiRef, GridEvents.rowDoubleClick, props.onRowDoubleClick);
-  useGridApiOptionHandler(apiRef, GridEvents.rowClick, props.onRowClick);
-  useGridApiOptionHandler(apiRef, GridEvents.componentError, props.onError);
-  useGridApiOptionHandler(apiRef, GridEvents.stateChange, props.onStateChange);
+  useGridApiOptionHandler(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
+  useGridApiOptionHandler(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);
+  useGridApiOptionHandler(apiRef, 'columnHeaderEnter', props.onColumnHeaderEnter);
+  useGridApiOptionHandler(apiRef, 'columnHeaderLeave', props.onColumnHeaderLeave);
+  useGridApiOptionHandler(apiRef, 'columnOrderChange', props.onColumnOrderChange);
+  useGridApiOptionHandler(apiRef, 'cellClick', props.onCellClick);
+  useGridApiOptionHandler(apiRef, 'cellDoubleClick', props.onCellDoubleClick);
+  useGridApiOptionHandler(apiRef, 'cellKeyDown', props.onCellKeyDown);
+  useGridApiOptionHandler(apiRef, 'cellFocusOut', props.onCellFocusOut);
+  useGridApiOptionHandler(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
+  useGridApiOptionHandler(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
+  useGridApiOptionHandler(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
+  useGridApiOptionHandler(apiRef, 'rowClick', props.onRowClick);
+  useGridApiOptionHandler(apiRef, 'componentError', props.onError);
+  useGridApiOptionHandler(apiRef, 'stateChange', props.onStateChange);
 }

package/legacy/hooks/features/export/serializers/csvSerializer.js

@@ -1,7 +1,7 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 
-var serialiseCellValue = function serialiseCellValue(value, delimiterCharacter) {
+var serializeCellValue = function serializeCellValue(value, delimiterCharacter) {
   if (typeof value === 'string') {
     var formattedValue = value.replace(/"/g, '""'); // Make sure value containing delimiter or line break won't be split into multiple rows
 
@@ -19,7 +19,7 @@ var serialiseCellValue = function serialiseCellValue(value, delimiterCharacter)
 
 var objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 
-var serialiseRow = function serialiseRow(id, columns, getCellParams, delimiterCharacter) {
+var serializeRow = function serializeRow(id, columns, getCellParams, delimiterCharacter) {
   return columns.map(function (column) {
     var cellParams = getCellParams(id, column.field);
 
@@ -29,7 +29,7 @@ var serialiseRow = function serialiseRow(id, columns, getCellParams, delimiterCh
       }
     }
 
-    return serialiseCellValue(cellParams.formattedValue, delimiterCharacter);
+    return serializeCellValue(cellParams.formattedValue, delimiterCharacter);
   });
 };
 
@@ -40,7 +40,7 @@ export function buildCSV(options) {
       delimiterCharacter = options.delimiterCharacter,
       includeHeaders = options.includeHeaders;
   var CSVBody = rowIds.reduce(function (acc, id) {
-    return "".concat(acc).concat(serialiseRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter), "\r\n");
+    return "".concat(acc).concat(serializeRow(id, columns, getCellParams, delimiterCharacter).join(delimiterCharacter), "\r\n");
   }, '').trim();
 
   if (!includeHeaders) {
@@ -50,7 +50,7 @@ export function buildCSV(options) {
   var CSVHead = "".concat(columns.filter(function (column) {
     return column.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field;
   }).map(function (column) {
-    return serialiseCellValue(column.headerName || column.field, delimiterCharacter);
+    return serializeCellValue(column.headerName || column.field, delimiterCharacter);
   }).join(delimiterCharacter), "\r\n");
   return "".concat(CSVHead).concat(CSVBody).trim();
 }

package/legacy/hooks/features/export/useGridCsvExport.js

@@ -1,24 +1,12 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridFilteredSortedRowIdsSelector } from '../filter';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { exportAs } from '../../../utils/exportAs';
 import { buildCSV } from './serializers/csvSerializer';
-import { getColumnsToExport } from './utils';
-
-var defaultGetRowsToExport = function defaultGetRowsToExport(_ref) {
-  var apiRef = _ref.apiRef;
-  var filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
-  var selectedRows = apiRef.current.getSelectedRows();
-
-  if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(function (id) {
-      return selectedRows.has(id);
-    });
-  }
-
-  return filteredSortedRowIds;
-};
+import { getColumnsToExport, defaultGetRowsToExport } from './utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { GridCsvExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -27,7 +15,7 @@ var defaultGetRowsToExport = function defaultGetRowsToExport(_ref) {
  * @requires useGridParamsApi (method)
  */
 
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export var useGridCsvExport = function useGridCsvExport(apiRef) {
   var logger = useGridLogger(apiRef, 'useGridCsvExport');
   var getDataAsCsv = React.useCallback(function () {
@@ -64,4 +52,23 @@ export var useGridCsvExport = function useGridCsvExport(apiRef) {
     exportDataAsCsv: exportDataAsCsv
   };
   useGridApiMethod(apiRef, csvExportApi, 'GridCsvExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var addExportMenuButtons = React.useCallback(function (initialValue, options) {
+    var _options$csvOptions;
+
+    if ((_options$csvOptions = options.csvOptions) != null && _options$csvOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [].concat(_toConsumableArray(initialValue), [{
+      component: /*#__PURE__*/_jsx(GridCsvExportMenuItem, {
+        options: options.csvOptions
+      }),
+      componentName: 'csvExport'
+    }]);
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
 };

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -12,6 +12,9 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getColumnsToExport } from './utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
+import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
  * @requires useGridColumns (state)
@@ -262,4 +265,23 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     exportDataAsPrint: exportDataAsPrint
   };
   useGridApiMethod(apiRef, printExportApi, 'GridPrintExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var addExportMenuButtons = React.useCallback(function (initialValue, options) {
+    var _options$printOptions;
+
+    if ((_options$printOptions = options.printOptions) != null && _options$printOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [].concat(_toConsumableArray(initialValue), [{
+      component: /*#__PURE__*/_jsx(GridPrintExportMenuItem, {
+        options: options.printOptions
+      }),
+      componentName: 'printExport'
+    }]);
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
 };

package/legacy/hooks/features/export/utils.js

@@ -1,4 +1,5 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
+import { gridFilteredSortedRowIdsSelector } from '../filter';
 export var getColumnsToExport = function getColumnsToExport(_ref) {
   var apiRef = _ref.apiRef,
       options = _ref.options;
@@ -18,4 +19,17 @@ export var getColumnsToExport = function getColumnsToExport(_ref) {
   return validColumns.filter(function (column) {
     return !column.disableExport;
   });
+};
+export var defaultGetRowsToExport = function defaultGetRowsToExport(_ref2) {
+  var apiRef = _ref2.apiRef;
+  var filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  var selectedRows = apiRef.current.getSelectedRows();
+
+  if (selectedRows.size > 0) {
+    return filteredSortedRowIds.filter(function (id) {
+      return selectedRows.has(id);
+    });
+  }
+
+  return filteredSortedRowIds;
 };

package/legacy/hooks/features/filter/gridFilterState.js

@@ -2,6 +2,8 @@ import { GridLinkOperator } from '../../../models/gridFilterItem';
 export var getDefaultGridFilterModel = function getDefaultGridFilterModel() {
   return {
     items: [],
-    linkOperator: GridLinkOperator.And
+    linkOperator: GridLinkOperator.And,
+    quickFilterValues: [],
+    quickFilterLogicOperator: GridLinkOperator.And
   };
 };

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
+import { gridColumnFieldsSelector } from '../columns';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -86,7 +87,7 @@ export var mergeStateWithFilterModel = function mergeStateWithFilterModel(filter
  * @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 var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(filterModel, apiRef) {
+export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
   var items = filterModel.items,
       _filterModel$linkOper = filterModel.linkOperator,
       linkOperator = _filterModel$linkOper === void 0 ? GridLinkOperator.And : _filterModel$linkOper;
@@ -160,7 +161,7 @@ export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(
 
   return function (rowId, shouldApplyFilter) {
     var filteredAppliers = shouldApplyFilter ? appliers.filter(function (applier) {
-      return shouldApplyFilter(applier.item);
+      return shouldApplyFilter(applier.item.columnField);
     }) : appliers; // Return `false` as soon as we have a failing filter
 
     if (linkOperator === GridLinkOperator.And) {
@@ -174,4 +175,97 @@ export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(
       return applier.fn(rowId);
     });
   };
+};
+/**
+ * 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 var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilterApplier(filterModel, apiRef) {
+  var _filterModel$quickFil = filterModel.quickFilterValues,
+      quickFilterValues = _filterModel$quickFil === void 0 ? [] : _filterModel$quickFil,
+      _filterModel$quickFil2 = filterModel.quickFilterLogicOperator,
+      quickFilterLogicOperator = _filterModel$quickFil2 === void 0 ? GridLinkOperator.And : _filterModel$quickFil2;
+
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+
+  var columnsFields = gridColumnFieldsSelector(apiRef);
+  var appliersPerColumnField = {};
+  columnsFields.forEach(function (field) {
+    var column = apiRef.current.getColumn(field);
+    var getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
+
+    if (!getApplyQuickFilterFn) {
+      return;
+    }
+
+    appliersPerColumnField[field] = quickFilterValues.map(function (value) {
+      return getApplyQuickFilterFn(value, column, apiRef);
+    });
+  }); // If some value does not have an applier we ignore them
+
+  var sanitizedQuickFilterValues = quickFilterValues.filter(function (value, index) {
+    return Object.keys(appliersPerColumnField).some(function (field) {
+      return appliersPerColumnField[field][index] != null;
+    });
+  });
+  return function (rowId, shouldApplyFilter) {
+    var usedCellParams = {};
+    Object.keys(appliersPerColumnField).forEach(function (columnField) {
+      if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
+        usedCellParams[columnField] = apiRef.current.getCellParams(rowId, 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(function (value, index) {
+        return Object.keys(appliersPerColumnField).some(function (field) {
+          var _appliersPerColumnFie, _appliersPerColumnFie2;
+
+          if (appliersPerColumnField[field][index] == null) {
+            return false;
+          }
+
+          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
+
+
+    return sanitizedQuickFilterValues.some(function (value, index) {
+      return Object.keys(appliersPerColumnField).some(function (field) {
+        var _appliersPerColumnFie3, _appliersPerColumnFie4;
+
+        if (appliersPerColumnField[field][index] == null) {
+          return false;
+        }
+
+        return (_appliersPerColumnFie3 = (_appliersPerColumnFie4 = appliersPerColumnField[field])[index]) == null ? void 0 : _appliersPerColumnFie3.call(_appliersPerColumnFie4, usedCellParams[field]);
+      });
+    });
+  };
+};
+export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(filterModel, apiRef) {
+  var isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
+  var isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+
+  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
+    return null;
+  }
+
+  if (isRowMatchingFilterItems == null) {
+    return isRowMatchingQuickFilter;
+  }
+
+  if (isRowMatchingQuickFilter == null) {
+    return isRowMatchingFilterItems;
+  }
+
+  return function (rowId, shouldApplyFilter) {
+    return isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
+  };
 };

package/legacy/hooks/features/filter/useGridFilter.js

@@ -1,7 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -15,6 +14,7 @@ import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
 import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var filterStateInitializer = function filterStateInitializer(state, props, apiRef) {
   var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
@@ -43,13 +43,9 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
     stateSelector: gridFilterModelSelector,
-    changeEvent: GridEvents.filterModelChange
+    changeEvent: 'filterModelChange'
   });
-  /**
-   * API METHODS
-   */
-
-  var applyFilters = React.useCallback(function () {
+  var updateFilteredRows = React.useCallback(function () {
     apiRef.current.setState(function (state) {
       var filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       var isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
@@ -60,9 +56,16 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent('filteredRowsSet');
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  var applyFilters = React.useCallback(function () {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   var upsertFilterItem = React.useCallback(function (item) {
     var filterModel = gridFilterModelSelector(apiRef);
 
@@ -143,6 +146,17 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
       linkOperator: linkOperator
     }));
   }, [apiRef]);
+  var setQuickFilterValues = React.useCallback(function (values) {
+    var filterModel = gridFilterModelSelector(apiRef);
+
+    if (isDeepEqual(filterModel.quickFilterValues, values)) {
+      return;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      quickFilterValues: _toConsumableArray(values)
+    }));
+  }, [apiRef]);
   var setFilterModel = React.useCallback(function (model) {
     var currentModel = gridFilterModelSelector(apiRef);
 
@@ -166,7 +180,8 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     setFilterModel: setFilterModel,
     showFilterPanel: showFilterPanel,
     hideFilterPanel: hideFilterPanel,
-    getVisibleRowModels: getVisibleRowModels
+    getVisibleRowModels: getVisibleRowModels,
+    setQuickFilterValues: setQuickFilterValues
   };
   useGridApiMethod(apiRef, filterApi, 'GridFilterApi');
   /**
@@ -260,11 +275,13 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
-  useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  }, [apiRef]); // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
+  // Otherwise, the state is not consistent during the render
+
+  useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

package/legacy/hooks/features/focus/useGridFocus.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument } from '@mui/material/utils';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -32,14 +31,9 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridFocus');
   var lastClickedCell = React.useRef(null);
   var setCellFocus = React.useCallback(function (id, field) {
-    // The row might have been deleted
-    if (!apiRef.current.getRow(id)) {
-      return;
-    }
-
     var focusedCell = gridFocusCellSelector(apiRef);
 
-    if ((focusedCell == null ? void 0 : focusedCell.id) === id && focusedCell.field === field) {
+    if ((focusedCell == null ? void 0 : focusedCell.id) === id && (focusedCell == null ? void 0 : focusedCell.field) === field) {
       return;
     }
 
@@ -62,15 +56,20 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
         }
       });
     });
-    apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.cellFocusIn, apiRef.current.getCellParams(id, field));
+    apiRef.current.forceUpdate(); // The row might have been deleted
+
+    if (!apiRef.current.getRow(id)) {
+      return;
+    }
+
+    apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   var setColumnHeaderFocus = React.useCallback(function (field) {
     var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var cell = gridFocusCellSelector(apiRef);
 
     if (cell) {
-      apiRef.current.publishEvent(GridEvents.cellFocusOut, apiRef.current.getCellParams(cell.id, cell.field), event);
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
     }
 
     apiRef.current.setState(function (state) {
@@ -105,21 +104,31 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
       rowIndexToFocus += 1;
     }
 
+    var currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+
     if (columnIndexToFocus >= visibleColumns.length) {
-      // Go to next row if we are at the last column
+      // Go to next row if we are after the last column
       rowIndexToFocus += 1;
-      columnIndexToFocus = 0;
+
+      if (rowIndexToFocus < currentPage.rows.length) {
+        // Go to first column of the next row if there's one more row
+        columnIndexToFocus = 0;
+      }
     } else if (columnIndexToFocus < 0) {
-      // Go to previous row if we are at the first column
+      // Go to previous row if we are before the first column
       rowIndexToFocus -= 1;
-      columnIndexToFocus = visibleColumns.length - 1;
+
+      if (rowIndexToFocus >= 0) {
+        // Go to last column of the previous if there's one more row
+        columnIndexToFocus = visibleColumns.length - 1;
+      }
     }
 
-    var currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-    rowIndexToFocus = clamp(rowIndexToFocus, currentPage.range.firstRowIndex, currentPage.range.lastRowIndex);
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPage.rows.length - 1);
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
     var rowToFocus = currentPage.rows[rowIndexToFocus];
     var columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
@@ -190,7 +199,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
     // Publishes an event to notify that the focus was lost
 
 
-    apiRef.current.publishEvent(GridEvents.cellFocusOut, apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+    apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
 
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
@@ -217,29 +226,25 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);
+  var handleRowSet = React.useCallback(function () {
+    var cell = gridFocusCellSelector(apiRef); // If the focused cell is in a row which does not exist anymore, then remove the focus
+
+    if (cell && !apiRef.current.getRow(cell.id)) {
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          focus: {
+            cell: null,
+            columnHeader: null
+          }
+        });
+      });
+    }
+  }, [apiRef]);
   useGridApiMethod(apiRef, {
     setCellFocus: setCellFocus,
     setColumnHeaderFocus: setColumnHeaderFocus,
     unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
   }, 'GridFocusApi');
-  React.useEffect(function () {
-    var cell = gridFocusCellSelector(apiRef);
-
-    if (cell) {
-      var updatedRow = apiRef.current.getRow(cell.id);
-
-      if (!updatedRow) {
-        apiRef.current.setState(function (state) {
-          return _extends({}, state, {
-            focus: {
-              cell: null,
-              columnHeader: null
-            }
-          });
-        });
-      }
-    }
-  }, [apiRef, props.rows]);
   React.useEffect(function () {
     var doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.addEventListener('click', handleDocumentClick);
@@ -247,10 +252,11 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
       doc.removeEventListener('click', handleDocumentClick);
     };
   }, [apiRef, handleDocumentClick]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderBlur, handleBlur);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, handleCellDoubleClick);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseUp, handleCellMouseUp);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.cellModeChange, handleCellModeChange);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderFocus, handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
+  useGridApiEventHandler(apiRef, 'cellMouseUp', handleCellMouseUp);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
 };