@mui/x-data-grid 7.17.0 → 7.18.0

package/models/gridStateCommunity.d.ts

@@ -5,6 +5,7 @@ import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
 import type { GridRowSelectionModel } from './gridRowSelectionModel';
 import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFilterState';
 import type { GridColumnResizeState } from '../hooks/features/columnResize';
+import type { GridRowSpanningState } from '../hooks/features/rows/useGridRowSpanning';
 /**
  * The state of `DataGrid`.
  */
@@ -30,6 +31,7 @@ export interface GridStateCommunity {
     density: GridDensityState;
     virtualization: GridVirtualizationState;
     columnResize: GridColumnResizeState;
+    rowSpanning: GridRowSpanningState;
 }
 /**
  * The initial state of `DataGrid`.

package/models/props/DataGridProps.d.ts

@@ -357,6 +357,11 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default false
      */
     disableAutosize: boolean;
+    /**
+     * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+     * @default false
+     */
+    unstable_rowSpanning: boolean;
 }
 /**
  * The `DataGrid` props with no default value.
@@ -748,6 +753,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onProcessRowUpdateError?: (error: any) => void;
     columnGroupingModel?: GridColumnGroupingModel;
+    /**
+     * Sets the height in pixels of the column group headers in the Data Grid.
+     * Inherits the `columnHeaderHeight` value if not set.
+     */
+    columnGroupHeaderHeight?: number;
     /**
      * Callback called when the data is copied to the clipboard.
      * @param {string} data The data copied to the clipboard.

package/modern/DataGrid/DataGrid.js

@@ -118,6 +118,11 @@ DataGridRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -743,5 +748,10 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  unstable_rowSpanning: PropTypes.bool
 };

package/modern/DataGrid/useDataGridComponent.js

@@ -27,6 +27,7 @@ import { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSp
 import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/features/columnGrouping/useGridColumnGrouping.js";
 import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/features/virtualization/index.js";
 import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
+import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/features/rows/useGridRowSpanning.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -48,6 +49,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
   useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);
@@ -59,6 +61,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
+  useGridRowSpanning(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -73,7 +73,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0
+  throttleRowsMs: 0,
+  unstable_rowSpanning: false
 };
 const defaultSlots = DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridProps = inProps => {

package/modern/components/GridRow.js

@@ -338,6 +338,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       height: PropTypes.number.isRequired,
       width: PropTypes.number.isRequired
     }).isRequired,
+    groupHeaderHeight: PropTypes.number.isRequired,
     hasScrollX: PropTypes.bool.isRequired,
     hasScrollY: PropTypes.bool.isRequired,
     headerFilterHeight: PropTypes.number.isRequired,

package/modern/components/cell/GridCell.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
+import { useRtl } from '@mui/system/RtlProvider';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
@@ -17,6 +18,7 @@ import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusState
 import { MissingRowIdError } from "../../hooks/features/rows/useGridParamsApi.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -106,6 +108,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const isRtl = useRtl();
   const field = column.field;
   const cellParams = useGridSelector(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
@@ -126,6 +129,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     id: rowId,
     field
   }));
+  const hiddenCells = useGridSelector(apiRef, gridRowSpanningHiddenCellsSelector);
+  const spannedCells = useGridSelector(apiRef, gridRowSpanningSpannedCellsSelector);
   const {
     cellMode,
     hasFocus,
@@ -198,6 +203,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
+  const isCellRowSpanned = hiddenCells[rowId]?.[field] ?? false;
+  const rowSpan = spannedCells[rowId]?.[field] ?? 1;
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -210,14 +217,21 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const cellStyle = _extends({
       '--width': `${width}px`
     }, styleProp);
-    if (pinnedPosition === PinnedPosition.LEFT) {
-      cellStyle.left = pinnedOffset;
+    const isLeftPinned = pinnedPosition === PinnedPosition.LEFT;
+    const isRightPinned = pinnedPosition === PinnedPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
+      cellStyle[side] = pinnedOffset;
     }
-    if (pinnedPosition === PinnedPosition.RIGHT) {
-      cellStyle.right = pinnedOffset;
+    if (rowSpan > 1) {
+      cellStyle.height = `calc(var(--height) * ${rowSpan})`;
+      cellStyle.zIndex = 5;
     }
     return cellStyle;
-  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -237,6 +251,16 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
+  if (isCellRowSpanned) {
+    return /*#__PURE__*/_jsx("div", {
+      "data-colindex": colIndex,
+      role: "presentation",
+      style: _extends({}, style, {
+        minWidth: 'var(--width)',
+        maxWidth: 'var(--width)'
+      })
+    });
+  }
   if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
@@ -297,6 +321,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
+    "aria-rowspan": rowSpan,
     style: style,
     title: title,
     tabIndex: tabIndex,

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -53,7 +53,7 @@ export const useGridColumnHeaders = props => {
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
@@ -83,7 +83,6 @@ export const useGridColumnHeaders = props => {
   const getColumnsToRender = params => {
     const {
       renderContext: currentContext = renderContext,
-      // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
@@ -123,16 +122,22 @@ export const useGridColumnHeaders = props => {
     computedWidth
   }) => {
     let style;
-    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+    const isLeftPinned = pinnedPosition === GridPinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === GridPinnedColumnPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
       const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
       if (pinnedPosition === 'left') {
         style = {
-          left: pinnedOffset
+          [side]: pinnedOffset
         };
       }
       if (pinnedPosition === 'right') {
         style = {
-          right: pinnedOffset
+          [side]: pinnedOffset
         };
       }
     }
@@ -191,18 +196,15 @@ export const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
       }), getColumnHeaders({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
@@ -282,7 +284,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.headerHeight,
+        height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
@@ -309,7 +311,6 @@ export const useGridColumnHeaders = props => {
           params: {
             position: GridPinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
-            minFirstColumn: leftRenderContext.firstColumnIndex,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
         }), getColumnGroupHeaders({
@@ -322,7 +323,6 @@ export const useGridColumnHeaders = props => {
           params: {
             position: GridPinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
-            minFirstColumn: rightRenderContext.firstColumnIndex,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
         })]

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -302,13 +302,13 @@ export const useGridColumnResize = (apiRef, props) => {
     }
     refs.groupHeaderElements = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
     refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
-    refs.fillerLeft = findGridElement(apiRef.current, 'filler--pinnedLeft');
-    refs.fillerRight = findGridElement(apiRef.current, 'filler--pinnedRight');
+    refs.fillerLeft = findGridElement(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
+    refs.fillerRight = findGridElement(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
-    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement);
-    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
     resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };

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

@@ -29,6 +29,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -55,6 +56,7 @@ export function useGridDimensions(apiRef, props) {
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
   const headersTotalHeight = getTotalHeaderHeight(apiRef, props);
@@ -175,6 +177,7 @@ export function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -191,7 +194,7 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,
     getRootDimensions

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -14,6 +14,7 @@ import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js
 import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
+import { getDefaultCellValue } from "./utils.js";
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -249,24 +250,7 @@ export const useGridCellEditing = (apiRef, props) => {
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
     if (deleteValue) {
-      const fieldType = apiRef.current.getColumn(field).type;
-      switch (fieldType) {
-        case 'boolean':
-          newValue = false;
-          break;
-        case 'date':
-        case 'dateTime':
-        case 'number':
-          newValue = undefined;
-          break;
-        case 'singleSelect':
-          newValue = null;
-          break;
-        case 'string':
-        default:
-          newValue = '';
-          break;
-      }
+      newValue = getDefaultCellValue(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -16,6 +16,7 @@ import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
+import { getDefaultCellValue } from "./utils.js";
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -319,7 +320,11 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
-        newValue = deleteValue ? '' : initialValue;
+        if (deleteValue) {
+          newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+        } else if (initialValue) {
+          newValue = initialValue;
+        }
       }
       acc[field] = {
         value: newValue,

package/modern/hooks/features/editing/utils.js

@@ -0,0 +1,15 @@
+export const getDefaultCellValue = colDef => {
+  switch (colDef.type) {
+    case 'boolean':
+      return false;
+    case 'date':
+    case 'dateTime':
+    case 'number':
+      return undefined;
+    case 'singleSelect':
+      return null;
+    case 'string':
+    default:
+      return '';
+  }
+};

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

@@ -38,6 +38,7 @@ function buildPrintWindow(title) {
  * @requires useGridParamsApi (method)
  */
 export const useGridPrintExport = (apiRef, props) => {
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const logger = useGridLogger(apiRef, 'useGridPrintExport');
   const doc = React.useRef(null);
   const previousGridState = React.useRef(null);
@@ -46,7 +47,7 @@ export const useGridPrintExport = (apiRef, props) => {
   const previousVirtualizationState = React.useRef();
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
-  }, [apiRef]);
+  }, [apiRef, hasRootReference]);
 
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly

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

@@ -34,6 +34,7 @@ export const focusStateInitializer = state => _extends({}, state, {
 export const useGridFocus = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const publishCellFocusOut = React.useCallback((cell, event) => {
     if (cell) {
       // The row might have been deleted
@@ -380,7 +381,7 @@ export const useGridFocus = (apiRef, props) => {
     return () => {
       doc.removeEventListener('mouseup', handleDocumentClick);
     };
-  }, [apiRef, handleDocumentClick]);
+  }, [apiRef, hasRootReference, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
-import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
@@ -10,50 +10,12 @@ import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isNavigationKey } from "../../../utils/keyboardUtils.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
 import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
-function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
-  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
-}
-const getLeftColumnIndex = ({
-  currentColIndex,
-  firstColIndex,
-  lastColIndex,
-  isRtl
-}) => {
-  if (isRtl) {
-    if (currentColIndex < lastColIndex) {
-      return currentColIndex + 1;
-    }
-  } else if (!isRtl) {
-    if (currentColIndex > firstColIndex) {
-      return currentColIndex - 1;
-    }
-  }
-  return null;
-};
-const getRightColumnIndex = ({
-  currentColIndex,
-  firstColIndex,
-  lastColIndex,
-  isRtl
-}) => {
-  if (isRtl) {
-    if (currentColIndex > firstColIndex) {
-      return currentColIndex - 1;
-    }
-  } else if (!isRtl) {
-    if (currentColIndex < lastColIndex) {
-      return currentColIndex + 1;
-    }
-  }
-  return null;
-};
+import { enrichPageRowsWithPinnedRows, getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -73,11 +35,12 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
   /**
    * @param {number} colIndex Index of the column to focus
-   * @param {number} rowIndex index of the row to focus
+   * @param {GridRowId} rowId index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   * @param {string} rowSpanScanDirection Which direction to search to find the next cell not hidden by `rowSpan`.
    * TODO replace with apiRef.current.moveFocusToRelativeCell()
    */
-  const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left') => {
+  const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left', rowSpanScanDirection = 'up') => {
     const visibleSortedRows = gridExpandedSortedRowEntriesSelector(apiRef);
     const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
     if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
@@ -87,16 +50,17 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
+    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
-    const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === rowId);
+    const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === nonRowSpannedRowId);
     logger.debug(`Navigating to cell row ${rowIndexRelativeToAllRows}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex: rowIndexRelativeToAllRows
     });
-    const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    apiRef.current.setCellFocus(rowId, field);
+    apiRef.current.setCellFocus(nonRowSpannedRowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -432,7 +396,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1), isRtl ? 'right' : 'left', 'down');
           }
           break;
         }

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

@@ -0,0 +1,58 @@
+import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.js";
+import { gridRowSpanningHiddenCellsSelector } from "../rows/gridRowSpanningSelectors.js";
+import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+export function enrichPageRowsWithPinnedRows(apiRef, rows) {
+  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
+  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
+}
+export const getLeftColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}) => {
+  if (isRtl) {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  } else if (!isRtl) {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  }
+  return null;
+};
+export const getRightColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}) => {
+  if (isRtl) {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  } else if (!isRtl) {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  }
+  return null;
+};
+export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
+  const rowSpanHiddenCells = gridRowSpanningHiddenCellsSelector(apiRef);
+  if (!rowSpanHiddenCells[rowId]?.[field]) {
+    return rowId;
+  }
+  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  // find closest non row spanned cell in the given `rowSpanScanDirection`
+  let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
+  while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {
+    const nextRowId = filteredSortedRowIds[nextRowIndex];
+    if (!rowSpanHiddenCells[nextRowId]?.[field]) {
+      return nextRowId;
+    }
+    nextRowIndex += rowSpanScanDirection === 'down' ? 1 : -1;
+  }
+  return rowId;
+}

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

@@ -0,0 +1,5 @@
+import { createSelector } from "../../../utils/createSelector.js";
+const gridRowSpanningStateSelector = state => state.rowSpanning;
+export const gridRowSpanningHiddenCellsSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCells);
+export const gridRowSpanningSpannedCellsSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.spannedCells);
+export const gridRowSpanningHiddenCellsOriginMapSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCellOriginMap);