@mui/x-data-grid 5.8.0 → 5.11.0

package/hooks/features/export/utils.js

@@ -1,4 +1,5 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
+import { gridFilteredSortedRowIdsSelector } from '../filter';
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -11,4 +12,16 @@ export const getColumnsToExport = ({
 
   const validColumns = options.allColumns ? columns : gridVisibleColumnDefinitionsSelector(apiRef);
   return validColumns.filter(column => !column.disableExport);
+};
+export const defaultGetRowsToExport = ({
+  apiRef
+}) => {
+  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  const selectedRows = apiRef.current.getSelectedRows();
+
+  if (selectedRows.size > 0) {
+    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+  }
+
+  return filteredSortedRowIds;
 };

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

@@ -1,4 +1,3 @@
-import { GridFilterItem } from '../../../models/gridFilterItem';
 import { GridFilterModel } from '../../../models/gridFilterModel';
 import { GridRowId } from '../../../models/gridRows';
 export declare const getDefaultGridFilterModel: () => GridFilterModel;
@@ -32,7 +31,7 @@ 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?: (filterItem: GridFilterItem) => boolean) => boolean;
+export declare type GridAggregatedFilterItemApplier = (rowId: GridRowId, shouldApplyItem?: (columnField: string) => boolean) => boolean;
 export interface GridFilteringMethodParams {
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
 }

package/hooks/features/filter/gridFilterState.js

@@ -1,5 +1,7 @@
 import { GridLinkOperator } from '../../../models/gridFilterItem';
 export const getDefaultGridFilterModel = () => ({
   items: [],
-  linkOperator: GridLinkOperator.And
+  linkOperator: GridLinkOperator.And,
+  quickFilterValues: [],
+  quickFilterLogicOperator: GridLinkOperator.And
 });

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

@@ -11,4 +11,12 @@ 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;
+/**
+ * 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;

package/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.
@@ -76,7 +77,7 @@ export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFil
  * @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 const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
     items,
     linkOperator = GridLinkOperator.And
@@ -144,7 +145,7 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   }
 
   return (rowId, shouldApplyFilter) => {
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item)) : appliers; // Return `false` as soon as we have a failing filter
+    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));
@@ -153,4 +154,85 @@ export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
 
     return filteredAppliers.some(applier => 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 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+  const {
+    quickFilterValues = [],
+    quickFilterLogicOperator = GridLinkOperator.And
+  } = filterModel;
+
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+
+  const columnsFields = gridColumnFieldsSelector(apiRef);
+  const appliersPerColumnField = {};
+  columnsFields.forEach(field => {
+    const column = apiRef.current.getColumn(field);
+    const getApplyQuickFilterFn = column == null ? void 0 : column.getApplyQuickFilterFn;
+
+    if (!getApplyQuickFilterFn) {
+      return;
+    }
+
+    appliersPerColumnField[field] = quickFilterValues.map(value => getApplyQuickFilterFn(value, column, 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));
+  return (rowId, shouldApplyFilter) => {
+    const usedCellParams = {};
+    Object.keys(appliersPerColumnField).forEach(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((value, index) => Object.keys(appliersPerColumnField).some(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((value, index) => Object.keys(appliersPerColumnField).some(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 const buildAggregatedFilterApplier = (filterModel, apiRef) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+
+  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
+    return null;
+  }
+
+  if (isRowMatchingFilterItems == null) {
+    return isRowMatchingQuickFilter;
+  }
+
+  if (isRowMatchingQuickFilter == null) {
+    return isRowMatchingFilterItems;
+  }
+
+  return (rowId, shouldApplyFilter) => isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
 };

package/hooks/features/filter/useGridFilter.js

@@ -1,6 +1,5 @@
 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';
@@ -14,6 +13,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 const filterStateInitializer = (state, props, apiRef) => {
   var _ref, _props$filterModel, _props$initialState, _props$initialState$f;
@@ -42,13 +42,9 @@ export const useGridFilter = (apiRef, props) => {
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
     stateSelector: gridFilterModelSelector,
-    changeEvent: GridEvents.filterModelChange
+    changeEvent: 'filterModelChange'
   });
-  /**
-   * API METHODS
-   */
-
-  const applyFilters = React.useCallback(() => {
+  const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
@@ -59,9 +55,16 @@ export const useGridFilter = (apiRef, props) => {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent('filteredRowsSet');
+  }, [props.filterMode, apiRef]);
+  /**
+   * API METHODS
+   */
+
+  const applyFilters = React.useCallback(() => {
+    updateFilteredRows();
     apiRef.current.forceUpdate();
-  }, [apiRef, props.filterMode]);
+  }, [apiRef, updateFilteredRows]);
   const upsertFilterItem = React.useCallback(item => {
     const filterModel = gridFilterModelSelector(apiRef);
     const items = [...filterModel.items];
@@ -132,6 +135,17 @@ export const useGridFilter = (apiRef, props) => {
       linkOperator
     }));
   }, [apiRef]);
+  const setQuickFilterValues = React.useCallback(values => {
+    const filterModel = gridFilterModelSelector(apiRef);
+
+    if (isDeepEqual(filterModel.quickFilterValues, values)) {
+      return;
+    }
+
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      quickFilterValues: [...values]
+    }));
+  }, [apiRef]);
   const setFilterModel = React.useCallback(model => {
     const currentModel = gridFilterModelSelector(apiRef);
 
@@ -153,7 +167,8 @@ export const useGridFilter = (apiRef, props) => {
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
-    getVisibleRowModels
+    getVisibleRowModels,
+    setQuickFilterValues
   };
   useGridApiMethod(apiRef, filterApi, 'GridFilterApi');
   /**
@@ -245,11 +260,13 @@ export const 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/hooks/features/focus/useGridFocus.d.ts

@@ -8,4 +8,4 @@ export declare const focusStateInitializer: GridStateInitializer;
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridFocus: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;

package/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';
@@ -30,14 +29,9 @@ export const useGridFocus = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFocus');
   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 = 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;
     }
 
@@ -60,14 +54,19 @@ export const 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]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
     const 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(state => {
@@ -102,21 +101,31 @@ export const useGridFocus = (apiRef, props) => {
       rowIndexToFocus += 1;
     }
 
+    const 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;
+      }
     }
 
-    const 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);
     const rowToFocus = currentPage.rows[rowIndexToFocus];
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
@@ -186,7 +195,7 @@ export const 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);
@@ -211,27 +220,23 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);
+  const handleRowSet = React.useCallback(() => {
+    const 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(state => _extends({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null
+        }
+      }));
+    }
+  }, [apiRef]);
   useGridApiMethod(apiRef, {
     setCellFocus,
     setColumnHeaderFocus,
     unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
   }, 'GridFocusApi');
-  React.useEffect(() => {
-    const cell = gridFocusCellSelector(apiRef);
-
-    if (cell) {
-      const updatedRow = apiRef.current.getRow(cell.id);
-
-      if (!updatedRow) {
-        apiRef.current.setState(state => _extends({}, state, {
-          focus: {
-            cell: null,
-            columnHeader: null
-          }
-        }));
-      }
-    }
-  }, [apiRef, props.rows]);
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.addEventListener('click', handleDocumentClick);
@@ -239,10 +244,11 @@ export const 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);
 };

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -8,5 +8,6 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -9,6 +8,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSel
 import { gridClasses } from '../../../constants/gridClasses';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -16,21 +16,40 @@ import { isNavigationKey } from '../../../utils/keyboardUtils';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const currentPage = useGridVisibleRows(apiRef, props);
-  const goToCell = React.useCallback((colIndex, rowIndex) => {
+  /**
+   * @param {number} colIndex Index of the column to focus
+   * @param {number} rowIndex index of the row to focus
+   * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   */
+
+  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+    var _visibleSortedRows$ro;
+
+    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
+      if (closestColumnToUse === 'left') {
+        colIndex = nextCellColSpanInfo.leftVisibleCellIndex;
+      } else if (closestColumnToUse === 'right') {
+        colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
     logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    const node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -83,7 +102,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -102,9 +121,9 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -112,6 +131,18 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
       case ' ':
         {
+          const field = params.field;
+
+          if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          const colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
           }
@@ -284,10 +315,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', cellParams, event);
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/hooks/features/pagination/useGridPage.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { GridEvents } from '../../../models/events';
 import { gridVisibleTopLevelRowCountSelector } from '../filter';
 import { gridPageSelector, gridPageSizeSelector } from './gridPaginationSelector';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
@@ -45,7 +44,7 @@ export const useGridPage = (apiRef, props) => {
     propModel: props.page,
     propOnChange: props.onPageChange,
     stateSelector: gridPageSelector,
-    changeEvent: GridEvents.pageChange
+    changeEvent: 'pageChange'
   });
   /**
    * API METHODS
@@ -114,8 +113,8 @@ export const useGridPage = (apiRef, props) => {
     rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
   });
 
-  useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
-  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
+  useGridApiEventHandler(apiRef, 'pageSizeChange', handlePageSizeChange);
+  useGridApiEventHandler(apiRef, 'pageChange', handlePageChange);
   /**
    * EFFECTS
    */

package/hooks/features/pagination/useGridPageSize.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
@@ -27,7 +26,7 @@ export const useGridPageSize = (apiRef, props) => {
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,
     stateSelector: gridPageSizeSelector,
-    changeEvent: GridEvents.pageSizeChange
+    changeEvent: 'pageSizeChange'
   });
   /**
    * API METHODS
@@ -100,7 +99,7 @@ export const useGridPageSize = (apiRef, props) => {
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleUpdateAutoPageSize);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   /**
    * EFFECTS
    */

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -1,11 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
-import { useGridSelector } from '../../utils/useGridSelector';
 export const preferencePanelStateInitializer = (state, props) => {
   var _props$initialState$p, _props$initialState;
 
@@ -21,7 +19,6 @@ export const preferencePanelStateInitializer = (state, props) => {
 
 export const useGridPreferencesPanel = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**
@@ -30,9 +27,10 @@ export const useGridPreferencesPanel = apiRef => {
 
   const hidePreferences = React.useCallback(() => {
     logger.debug('Hiding Preferences Panel');
+    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
 
     if (preferencePanelState.openedPanelValue) {
-      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+      apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
     }
@@ -43,7 +41,7 @@ export const useGridPreferencesPanel = apiRef => {
       }
     }));
     apiRef.current.forceUpdate();
-  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   const doNotHidePanel = React.useCallback(() => {
@@ -63,7 +61,7 @@ export const useGridPreferencesPanel = apiRef => {
         openedPanelValue: newValue
       })
     }));
-    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+    apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
     apiRef.current.forceUpdate();