@mui/x-data-grid 5.8.0 → 5.9.0

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -206,9 +206,15 @@ export const applyInitialState = (columnsState, initialState) => {
 
   for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
     const field = columnsWithUpdatedDimensions[i];
-    newColumnLookup[field] = _extends({}, newColumnLookup[field], dimensions[field], {
+
+    const newColDef = _extends({}, newColumnLookup[field], {
       hasBeenResized: true
     });
+
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
   }
 
   const newColumnsState = {
@@ -294,16 +300,20 @@ export const createColumnsState = ({
       columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
 
-    let hasValidDimension = false;
-
-    if (!existingState.hasBeenResized) {
-      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
-    }
+    let hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
 
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
     columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
       hide: newColumn.hide == null ? false : newColumn.hide
     }, newColumn, {
-      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+      hasBeenResized
     });
   });
 
@@ -392,4 +402,47 @@ export const createColumnsState = ({
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState
-});
+});
+export function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+    const row = visibleRows[i];
+
+    if (row) {
+      const rowId = visibleRows[i].id;
+      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender({
+  firstColumnIndex,
+  minColumnIndex,
+  columnBuffer,
+  firstRowToRender,
+  lastRowToRender,
+  apiRef,
+  visibleRows
+}) {
+  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    lastRowToRender,
+    visibleRows
+  });
+  return firstColumnToRender;
+}

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { GridEvents } from '../../../models/events/gridEvents';
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export const useGridColumnSpanning = apiRef => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+    const sizes = lookup.current;
+
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
+    return lookup.current[rowId]?.[columnIndex];
+  }, []); // Calculate `colSpan` for the cell.
+
+  const calculateCellColSpan = React.useCallback(params => {
+    const {
+      columnIndex,
+      rowId,
+      minFirstColumnIndex,
+      maxLastColumnIndex
+    } = params;
+    const visibleColumns = apiRef.current.getVisibleColumns();
+    const columnsLength = visibleColumns.length;
+    const column = visibleColumns[columnIndex];
+    const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+
+    if (!colSpan || colSpan === 1) {
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: 1,
+          width: column.computedWidth
+        }
+      });
+      return {
+        colSpan: 1
+      };
+    }
+
+    let width = column.computedWidth;
+
+    for (let j = 1; j < colSpan; j += 1) {
+      const nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        const nextColumn = visibleColumns[nextColumnIndex];
+        width += nextColumn.computedWidth;
+        setCellColSpanInfo(rowId, columnIndex + j, {
+          spannedByColSpan: true,
+          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+          leftVisibleCellIndex: columnIndex
+        });
+      }
+
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan,
+          width
+        }
+      });
+    }
+
+    return {
+      colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
+
+  const calculateColSpan = React.useCallback(({
+    rowId,
+    minFirstColumn,
+    maxLastColumn
+  }) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn
+      });
+
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  const columnSpanningApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo,
+    unstable_calculateColSpan: calculateColSpan
+  };
+  useGridApiMethod(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
+  const handleColumnReorderChange = React.useCallback(() => {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+};

package/modern/hooks/features/columns/useGridColumns.js

@@ -5,7 +5,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -208,7 +208,13 @@ export function useGridColumns(apiRef, props) {
       if (colDef.hasBeenResized) {
         const colDefDimensions = {};
         COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
-          colDefDimensions[propertyName] = colDef[propertyName];
+          let propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
         });
         dimensions[colDef.field] = colDefDimensions;
       }
@@ -262,12 +268,23 @@ export function useGridColumns(apiRef, props) {
    * EVENTS
    */
 
-  const handlepipeProcessorRegister = React.useCallback(name => {
-    if (name !== 'hydrateColumns') {
-      return;
+  const prevInnerWidth = React.useRef(null);
+
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setGridColumnsState(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
     }
+  };
+
+  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
 
-    logger.info(`Columns pre-processing have changed, regenerating the columns`);
+  const hydrateColumns = React.useCallback(() => {
+    logger.info(`Columns pipe processing have changed, regenerating the columns`);
     const columnsState = createColumnsState({
       apiRef,
       columnTypes,
@@ -278,18 +295,7 @@ export function useGridColumns(apiRef, props) {
     });
     setGridColumnsState(columnsState);
   }, [apiRef, logger, setGridColumnsState, columnTypes]);
-  const prevInnerWidth = React.useRef(null);
-
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
-      setGridColumnsState(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
-    }
-  };
-
-  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -144,12 +144,12 @@ export function useGridDimensions(apiRef, props) {
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
     if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
     if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
@@ -170,7 +170,7 @@ export function useGridDimensions(apiRef, props) {
     debounceResize();
   }, [props.autoHeight, debounceResize, logger, resize]);
   useEnhancedEffect(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.visibleRowsSet, updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
   useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);

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

@@ -223,10 +223,7 @@ export const useGridCellEditing = (apiRef, props) => {
     }
 
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
-    const column = apiRef.current.getColumn(field);
     const {
-      value,
       error,
       isProcessingProps
     } = editingState[id][field];
@@ -235,12 +232,7 @@ export const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
-    const rowUpdate = column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : _extends({}, row, {
-      [field]: value
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
@@ -252,6 +244,7 @@ export const useGridCellEditing = (apiRef, props) => {
       };
 
       try {
+        const row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           updateFocusedCellIfNeeded();
@@ -320,11 +313,26 @@ export const useGridCellEditing = (apiRef, props) => {
     editingState = gridEditRowsStateSelector(apiRef.current.state);
     return !editingState[id][field].error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
+    const column = apiRef.current.getColumn(field);
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const {
+      value
+    } = editingState[id][field];
+    const row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value,
+      row
+    }) : _extends({}, row, {
+      [field]: value
+    });
+  }, [apiRef]);
   const editingApi = {
     getCellMode,
     startCellEditMode,
     stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

package/modern/hooks/features/editRows/useGridEditing.new.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridCellEditing } from './useGridCellEditing.new';
-import { GridCellModes } from '../../../models/gridEditRowModel';
+import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
@@ -99,7 +99,7 @@ export const useGridEditing = (apiRef, props) => {
     } = params;
     return new Promise(resolve => {
       maybeDebounce(id, field, debounceMs, async () => {
-        const setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+        const setEditCellValueToCall = props.editMode === GridEditModes.Row ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
         // By the time this callback runs the user may have cancelled the editing
 
         if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
@@ -109,10 +109,14 @@ export const useGridEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, props.editMode]);
+  const getRowWithUpdatedValues = React.useCallback((id, field) => {
+    return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };

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

@@ -334,20 +334,7 @@ export const useGridRowEditing = (apiRef, props) => {
       return;
     }
 
-    let rowUpdate = _extends({}, row);
-
-    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
-      const column = apiRef.current.getColumn(field);
-
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
-      } else {
-        rowUpdate[field] = fieldProps.value;
-      }
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
@@ -489,11 +476,32 @@ export const useGridRowEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const row = apiRef.current.getRow(id);
+
+    let rowUpdate = _extends({}, row);
+
+    Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
+      const column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   const editingApi = {
     getRowMode,
     startRowEditMode,
     stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
 };

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

@@ -40,11 +40,7 @@ export const useGridFilter = (apiRef, props) => {
     stateSelector: gridFilterModelSelector,
     changeEvent: GridEvents.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;
@@ -55,9 +51,16 @@ export const useGridFilter = (apiRef, props) => {
         filter: _extends({}, state.filter, filteringResult)
       });
     });
-    apiRef.current.publishEvent(GridEvents.visibleRowsSet);
+    apiRef.current.publishEvent(GridEvents.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];
@@ -237,8 +240,10 @@ export const useGridFilter = (apiRef, props) => {
     if (methodName === 'filtering') {
       apiRef.current.unstable_applyFilters();
     }
-  }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.unstable_applyFilters);
+  }, [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, GridEvents.rowsSet, updateFilteredRows);
   useGridApiEventHandler(apiRef, GridEvents.rowExpansionChange, apiRef.current.unstable_applyFilters);
   useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
   useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);

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

@@ -102,21 +102,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);

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -9,6 +9,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 +17,38 @@ 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') => {
+    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    const rowId = visibleSortedRows[rowIndex]?.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 +101,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -102,9 +120,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 +130,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));
           }

package/modern/hooks/features/rows/gridRowsSelector.js

@@ -1,6 +1,7 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridRowsStateSelector = state => state.rows;
 export const gridRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalRowCount);
+export const gridRowsLoadingSelector = createSelector(gridRowsStateSelector, rows => rows.loading);
 export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.idRowsLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);