@mui/x-data-grid 5.4.0 → 5.6.0

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

@@ -0,0 +1,309 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridFilter = exports.filterStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _events = require("../../../models/events");
+
+var _gridFeatureMode = require("../../../models/gridFeatureMode");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridLogger = require("../../utils/useGridLogger");
+
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+
+var _gridPreferencePanelsValue = require("../preferencesPanel/gridPreferencePanelsValue");
+
+var _gridFilterState = require("./gridFilterState");
+
+var _gridFilterSelector = require("./gridFilterSelector");
+
+var _useFirstRender = require("../../utils/useFirstRender");
+
+var _rows = require("../rows");
+
+var _preProcessing = require("../../core/preProcessing");
+
+var _useGridRegisterFilteringMethod = require("./useGridRegisterFilteringMethod");
+
+var _gridFilterUtils = require("./gridFilterUtils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const filterStateInitializer = (state, props, apiRef) => {
+  var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
+
+  const filterModel = (_ref = (_props$filterModel = props.filterModel) != null ? _props$filterModel : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$f = _props$initialState.filter) == null ? void 0 : _props$initialState$f.filterModel) != null ? _ref : (0, _gridFilterState.getDefaultGridFilterModel)();
+  return (0, _extends2.default)({}, state, {
+    filter: {
+      filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef),
+      visibleRowsLookup: {},
+      filteredDescendantCountLookup: {}
+    }
+  });
+};
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ * @requires useGridRows (event)
+ */
+
+
+exports.filterStateInitializer = filterStateInitializer;
+
+const useGridFilter = (apiRef, props) => {
+  const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFilter');
+  const filteringMethodCollectionRef = React.useRef({});
+  const lastFilteringMethodApplied = React.useRef(null);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'filter',
+    propModel: props.filterModel,
+    propOnChange: props.onFilterModelChange,
+    stateSelector: _gridFilterSelector.gridFilterModelSelector,
+    changeEvent: _events.GridEvents.filterModelChange
+  });
+  /**
+   * API METHODS
+   */
+
+  const applyFilters = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      const rowGroupingName = (0, _rows.gridRowGroupingNameSelector)(state, apiRef.current.instanceId);
+      const filteringMethod = filteringMethodCollectionRef.current[rowGroupingName];
+
+      if (!filteringMethod) {
+        throw new Error('MUI: Invalid filtering method.');
+      }
+
+      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
+      const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
+      lastFilteringMethodApplied.current = filteringMethod;
+      const filteringResult = filteringMethod({
+        isRowMatchingFilters
+      });
+      return (0, _extends2.default)({}, state, {
+        filter: (0, _extends2.default)({}, state.filter, filteringResult)
+      });
+    });
+    apiRef.current.publishEvent(_events.GridEvents.visibleRowsSet);
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.filterMode]);
+  const upsertFilterItem = React.useCallback(item => {
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+    const items = [...filterModel.items];
+    const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+
+    if (itemIndex === -1) {
+      items.push(item);
+    } else {
+      items[itemIndex] = item;
+    }
+
+    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      items
+    }));
+  }, [apiRef]);
+  const deleteFilterItem = React.useCallback(itemToDelete => {
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+    const items = filterModel.items.filter(item => item.id !== itemToDelete.id);
+
+    if (items.length === filterModel.items.length) {
+      return;
+    }
+
+    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      items
+    }));
+  }, [apiRef]);
+  const showFilterPanel = React.useCallback(targetColumnField => {
+    logger.debug('Displaying filter panel');
+
+    if (targetColumnField) {
+      const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+      const filterItemsWithValue = filterModel.items.filter(item => item.value !== undefined);
+      let newFilterItems;
+      const filterItemOnTarget = filterItemsWithValue.find(item => item.columnField === targetColumnField);
+
+      if (filterItemOnTarget) {
+        newFilterItems = filterItemsWithValue;
+      } else if (props.disableMultipleColumnsFiltering) {
+        newFilterItems = [{
+          columnField: targetColumnField
+        }];
+      } else {
+        newFilterItems = [...filterItemsWithValue, {
+          columnField: targetColumnField
+        }];
+      }
+
+      apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+        items: newFilterItems
+      }));
+    }
+
+    apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+  }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  const hideFilterPanel = React.useCallback(() => {
+    logger.debug('Hiding filter panel');
+    apiRef.current.hidePreferences();
+  }, [apiRef, logger]);
+  const setFilterLinkOperator = React.useCallback(linkOperator => {
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+
+    if (filterModel.linkOperator === linkOperator) {
+      return;
+    }
+
+    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      linkOperator
+    }));
+  }, [apiRef]);
+  const setFilterModel = React.useCallback(model => {
+    const currentModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+
+    if (currentModel !== model) {
+      logger.debug('Setting filter model');
+      apiRef.current.setState((0, _gridFilterUtils.mergeStateWithFilterModel)(model, props.disableMultipleColumnsFiltering, apiRef));
+      apiRef.current.unstable_applyFilters();
+    }
+  }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
+  const getVisibleRowModels = React.useCallback(() => {
+    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
+    return new Map(visibleSortedRows.map(row => [row.id, row.model]));
+  }, [apiRef]);
+  const filterApi = {
+    setFilterLinkOperator,
+    unstable_applyFilters: applyFilters,
+    deleteFilterItem,
+    upsertFilterItem,
+    setFilterModel,
+    showFilterPanel,
+    hideFilterPanel,
+    getVisibleRowModels
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, filterApi, 'GridFilterApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const stateExportPreProcessing = React.useCallback(prevState => {
+    const filterModelToExport = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+
+    if (filterModelToExport.items.length === 0 && filterModelToExport.linkOperator === (0, _gridFilterState.getDefaultGridFilterModel)().linkOperator) {
+      return prevState;
+    }
+
+    return (0, _extends2.default)({}, prevState, {
+      filter: {
+        filterModel: filterModelToExport
+      }
+    });
+  }, [apiRef]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    var _context$stateToResto;
+
+    const filterModel = (_context$stateToResto = context.stateToRestore.filter) == null ? void 0 : _context$stateToResto.filterModel;
+
+    if (filterModel == null) {
+      return params;
+    }
+
+    apiRef.current.setState((0, _gridFilterUtils.mergeStateWithFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef));
+    return (0, _extends2.default)({}, params, {
+      callbacks: [...params.callbacks, apiRef.current.unstable_applyFilters]
+    });
+  }, [apiRef, props.disableMultipleColumnsFiltering]);
+  const flatFilteringMethod = React.useCallback(params => {
+    if (props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client && params.isRowMatchingFilters) {
+      const rowIds = (0, _rows.gridRowIdsSelector)(apiRef);
+      const filteredRowsLookup = {};
+
+      for (let i = 0; i < rowIds.length; i += 1) {
+        const rowId = rowIds[i];
+        filteredRowsLookup[rowId] = params.isRowMatchingFilters(rowId);
+      }
+
+      return {
+        filteredRowsLookup,
+        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` since no row is collapsed.
+        visibleRowsLookup: filteredRowsLookup,
+        filteredDescendantCountLookup: {}
+      };
+    }
+
+    return {
+      visibleRowsLookup: {},
+      filteredRowsLookup: {},
+      filteredDescendantCountLookup: {}
+    };
+  }, [apiRef, props.filterMode]);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _useGridRegisterFilteringMethod.useGridRegisterFilteringMethod)(apiRef, 'none', flatFilteringMethod);
+  /**
+   * EVENTS
+   */
+
+  const handleColumnsChange = React.useCallback(() => {
+    logger.debug('onColUpdated - GridColumns changed, applying filters');
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+    const filterableColumnsLookup = (0, _gridColumnsSelector.gridFilterableColumnLookupSelector)(apiRef);
+    const newFilterItems = filterModel.items.filter(item => item.columnField && filterableColumnsLookup[item.columnField]);
+
+    if (newFilterItems.length < filterModel.items.length) {
+      apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+        items: newFilterItems
+      }));
+    }
+  }, [apiRef, logger]);
+  const handlePreProcessorRegister = React.useCallback(name => {
+    if (name !== 'filteringMethod') {
+      return;
+    }
+
+    filteringMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('filteringMethod', {});
+    const rowGroupingName = (0, _rows.gridRowGroupingNameSelector)(apiRef);
+
+    if (lastFilteringMethodApplied.current !== filteringMethodCollectionRef.current[rowGroupingName]) {
+      apiRef.current.unstable_applyFilters();
+    }
+  }, [apiRef]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnsChange, handleColumnsChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  /**
+   * 1ST RENDER
+   */
+
+  (0, _useFirstRender.useFirstRender)(() => {
+    // This line of pre-processor initialization should always come after the registration of `flatFilteringMethod`
+    // Otherwise on the 1st render there would be no filtering method registered
+    filteringMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('filteringMethod', {});
+    apiRef.current.unstable_applyFilters();
+  });
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(() => {
+    if (props.filterModel !== undefined) {
+      apiRef.current.setFilterModel(props.filterModel);
+    }
+  }, [apiRef, logger, props.filterModel]);
+};
+
+exports.useGridFilter = useGridFilter;

package/node/hooks/features/filter/useGridRegisterFilteringMethod.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRegisterFilteringMethod = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _preProcessing = require("../../core/preProcessing");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useGridRegisterFilteringMethod = (apiRef, groupingName, filteringMethod) => {
+  const updateRegistration = React.useCallback(filteringMethodCollection => {
+    filteringMethodCollection[groupingName] = filteringMethod;
+    return filteringMethodCollection;
+  }, [groupingName, filteringMethod]);
+  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'filteringMethod', updateRegistration);
+};
+
+exports.useGridRegisterFilteringMethod = useGridRegisterFilteringMethod;

package/node/hooks/features/focus/gridFocusState.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/hooks/features/focus/gridFocusStateSelector.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusCellSelector = void 0;
+
+var _createSelector = require("../../../utils/createSelector");
+
+const gridFocusStateSelector = state => state.focus;
+
+exports.gridFocusStateSelector = gridFocusStateSelector;
+const gridFocusCellSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.cell);
+exports.gridFocusCellSelector = gridFocusCellSelector;
+const gridFocusColumnHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeader);
+exports.gridFocusColumnHeaderSelector = gridFocusColumnHeaderSelector;
+
+const gridTabIndexStateSelector = state => state.tabIndex;
+
+exports.gridTabIndexStateSelector = gridTabIndexStateSelector;
+const gridTabIndexCellSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.cell);
+exports.gridTabIndexCellSelector = gridTabIndexCellSelector;
+const gridTabIndexColumnHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeader);
+exports.gridTabIndexColumnHeaderSelector = gridTabIndexColumnHeaderSelector;

package/node/hooks/features/focus/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridFocusStateSelector = require("./gridFocusStateSelector");
+
+Object.keys(_gridFocusStateSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridFocusStateSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridFocusStateSelector[key];
+    }
+  });
+});
+
+var _gridFocusState = require("./gridFocusState");
+
+Object.keys(_gridFocusState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridFocusState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridFocusState[key];
+    }
+  });
+});

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

@@ -0,0 +1,237 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridFocus = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _utils = require("@mui/material/utils");
+
+var _events = require("../../../models/events");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+var _useGridLogger = require("../../utils/useGridLogger");
+
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+
+var _useGridStateInit = require("../../utils/useGridStateInit");
+
+var _gridFocusStateSelector = require("./gridFocusStateSelector");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridRows (method)
+ * @requires useGridEditing (event)
+ */
+const useGridFocus = (apiRef, props) => {
+  const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFocus');
+  (0, _useGridStateInit.useGridStateInit)(apiRef, state => (0, _extends2.default)({}, state, {
+    focus: {
+      cell: null,
+      columnHeader: null
+    },
+    tabIndex: {
+      cell: null,
+      columnHeader: null
+    }
+  }));
+  const lastClickedCell = React.useRef(null);
+  const setCellFocus = React.useCallback((id, field) => {
+    // The row might have been deleted
+    if (!apiRef.current.getRow(id)) {
+      return;
+    }
+
+    const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+
+    if ((focusedCell == null ? void 0 : focusedCell.id) === id && focusedCell.field === field) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on cell with id=${id} and field=${field}`);
+      return (0, _extends2.default)({}, state, {
+        tabIndex: {
+          cell: {
+            id,
+            field
+          },
+          columnHeader: null
+        },
+        focus: {
+          cell: {
+            id,
+            field
+          },
+          columnHeader: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent(_events.GridEvents.cellFocusIn, apiRef.current.getCellParams(id, field));
+  }, [apiRef, logger]);
+  const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+
+    if (cell) {
+      apiRef.current.publishEvent(_events.GridEvents.cellFocusOut, apiRef.current.getCellParams(cell.id, cell.field), event);
+    }
+
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on column header with colIndex=${field}`);
+      return (0, _extends2.default)({}, state, {
+        tabIndex: {
+          columnHeader: {
+            field
+          },
+          cell: null
+        },
+        focus: {
+          columnHeader: {
+            field
+          },
+          cell: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]);
+  const handleCellDoubleClick = React.useCallback(({
+    id,
+    field
+  }) => {
+    apiRef.current.setCellFocus(id, field);
+  }, [apiRef]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
+    if (event.key === 'Enter' || event.key === 'Tab' || (0, _keyboardUtils.isNavigationKey)(event.key)) {
+      return;
+    }
+
+    apiRef.current.setCellFocus(params.id, params.field);
+  }, [apiRef]);
+  const handleColumnHeaderFocus = React.useCallback(({
+    field
+  }, event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    apiRef.current.setColumnHeaderFocus(field, event);
+  }, [apiRef]);
+  const handleBlur = React.useCallback(() => {
+    logger.debug(`Clearing focus`);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      focus: {
+        cell: null,
+        columnHeader: null
+      }
+    }));
+  }, [logger, apiRef]);
+  const handleCellMouseUp = React.useCallback(params => {
+    lastClickedCell.current = params;
+  }, []);
+  const handleDocumentClick = React.useCallback(event => {
+    const cellParams = lastClickedCell.current;
+    lastClickedCell.current = null;
+    const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+
+    if (!focusedCell) {
+      if (cellParams) {
+        apiRef.current.setCellFocus(cellParams.id, cellParams.field);
+      }
+
+      return;
+    }
+
+    if ((cellParams == null ? void 0 : cellParams.id) === focusedCell.id && (cellParams == null ? void 0 : cellParams.field) === focusedCell.field) {
+      return;
+    }
+
+    const cellElement = apiRef.current.getCellElement(focusedCell.id, focusedCell.field);
+
+    if (cellElement != null && cellElement.contains(event.target)) {
+      return;
+    } // The row might have been deleted during the click
+
+
+    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(_events.GridEvents.cellFocusOut, apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+
+    if (cellParams) {
+      apiRef.current.setCellFocus(cellParams.id, cellParams.field);
+    } else {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null
+        }
+      }));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef]);
+  const handleCellModeChange = React.useCallback(params => {
+    if (params.cellMode === 'view') {
+      return;
+    }
+
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+
+    if ((cell == null ? void 0 : cell.id) !== params.id || (cell == null ? void 0 : cell.field) !== params.field) {
+      apiRef.current.setCellFocus(params.id, params.field);
+    }
+  }, [apiRef]);
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, {
+    setCellFocus,
+    setColumnHeaderFocus
+  }, 'GridFocusApi');
+  React.useEffect(() => {
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+
+    if (cell) {
+      const updatedRow = apiRef.current.getRow(cell.id);
+
+      if (!updatedRow) {
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          focus: {
+            cell: null,
+            columnHeader: null
+          }
+        }));
+      }
+    }
+  }, [apiRef, props.rows]);
+  React.useEffect(() => {
+    const doc = (0, _utils.ownerDocument)(apiRef.current.rootElementRef.current);
+    doc.addEventListener('click', handleDocumentClick);
+    return () => {
+      doc.removeEventListener('click', handleDocumentClick);
+    };
+  }, [apiRef, handleDocumentClick]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderBlur, handleBlur);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellDoubleClick, handleCellDoubleClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellMouseUp, handleCellMouseUp);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellKeyDown, handleCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellModeChange, handleCellModeChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderFocus, handleColumnHeaderFocus);
+};
+
+exports.useGridFocus = useGridFocus;