@mui/x-data-grid 7.16.0 → 7.18.0

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

@@ -61,7 +61,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
-  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
+  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
@@ -91,7 +91,6 @@ 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;
@@ -131,16 +130,22 @@ const useGridColumnHeaders = props => {
     computedWidth
   }) => {
     let style;
-    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+    const isLeftPinned = pinnedPosition === _columns.GridPinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
       const pinnedOffset = (0, _getPinnedCellOffset.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
         };
       }
     }
@@ -165,6 +170,9 @@ const useGridColumnHeaders = props => {
         columnIndex,
         computedWidth: colDef.computedWidth
       });
+      const siblingWithBorderingSeparator = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
+      const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -180,7 +188,9 @@ const useGridColumnHeaders = props => {
         style: style,
         indexInSection: i,
         sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        gridHasFiller: gridHasFiller,
+        isLastUnpinned: isLastUnpinned,
+        isSiblingFocused: isSiblingFocused
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -194,18 +204,15 @@ const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnHeaders({
         position: _columns.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: _columns.GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
@@ -285,7 +292,7 @@ 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,
@@ -312,7 +319,6 @@ const useGridColumnHeaders = props => {
           params: {
             position: _columns.GridPinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
-            minFirstColumn: leftRenderContext.firstColumnIndex,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
         }), getColumnGroupHeaders({
@@ -325,7 +331,6 @@ const useGridColumnHeaders = props => {
           params: {
             position: _columns.GridPinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
-            minFirstColumn: rightRenderContext.firstColumnIndex,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
         })]

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

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

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

@@ -38,6 +38,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -65,6 +66,7 @@ function useGridDimensions(apiRef, props) {
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.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((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props);
@@ -185,6 +187,7 @@ function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -201,7 +204,7 @@ 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/node/hooks/features/editing/useGridCellEditing.js

@@ -11,15 +11,16 @@ var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toP
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _warning = require("@mui/x-internals/warning");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
-var _warning = require("../../../internals/utils/warning");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _utils2 = require("../../../utils/utils");
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
+var _utils3 = require("./utils");
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 const useGridCellEditing = (apiRef, props) => {
@@ -257,24 +258,7 @@ 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 = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }

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

@@ -11,17 +11,18 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _warning = require("@mui/x-internals/warning");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
-var _warning = require("../../../internals/utils/warning");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _utils2 = require("../../../utils/utils");
 var _gridRowParams = require("../../../models/params/gridRowParams");
 var _colDef = require("../../../colDef");
+var _utils3 = require("./utils");
 const _excluded = ["id"],
   _excluded2 = ["id"];
 const useGridRowEditing = (apiRef, props) => {
@@ -327,7 +328,11 @@ const useGridRowEditing = (apiRef, props) => {
       }
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
-        newValue = deleteValue ? '' : initialValue;
+        if (deleteValue) {
+          newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
+        } else if (initialValue) {
+          newValue = initialValue;
+        }
       }
       acc[field] = {
         value: newValue,

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultCellValue = void 0;
+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 '';
+  }
+};
+exports.getDefaultCellValue = getDefaultCellValue;

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.buildCSV = buildCSV;
 exports.serializeCellValue = void 0;
+var _warning = require("@mui/x-internals/warning");
 var _colDef = require("../../../../colDef");
-var _warning = require("../../../../internals/utils/warning");
 function sanitizeCellValue(value, csvOptions) {
   if (value === null || value === undefined) {
     return '';

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

@@ -46,6 +46,7 @@ function buildPrintWindow(title) {
  * @requires useGridParamsApi (method)
  */
 const useGridPrintExport = (apiRef, props) => {
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPrintExport');
   const doc = React.useRef(null);
   const previousGridState = React.useRef(null);
@@ -54,7 +55,7 @@ const useGridPrintExport = (apiRef, props) => {
   const previousVirtualizationState = React.useRef();
   React.useEffect(() => {
     doc.current = (0, _utils.unstable_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/node/hooks/features/filter/gridFilterUtils.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldQuickFilterExcludeHiddenColumns = exports.sanitizeFilterModel = exports.removeDiacritics = exports.passFilterLogic = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedFilterApplier = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _warning = require("@mui/x-internals/warning");
 var _models = require("../../../models");
 var _gridFilterState = require("./gridFilterState");
-var _warning = require("../../../internals/utils/warning");
 var _getPublicApiRef = require("../../../utils/getPublicApiRef");
 var _columns = require("../columns");
 let hasEval;

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

@@ -43,6 +43,7 @@ exports.focusStateInitializer = focusStateInitializer;
 const useGridFocus = (apiRef, props) => {
   const logger = (0, _useGridLogger.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
@@ -389,7 +390,7 @@ const useGridFocus = (apiRef, props) => {
     return () => {
       doc.removeEventListener('mouseup', handleDocumentClick);
     };
-  }, [apiRef, handleDocumentClick]);
+  }, [apiRef, hasRootReference, handleDocumentClick]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', handleCellMouseDown);

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

@@ -17,51 +17,12 @@ var _gridClasses = require("../../../constants/gridClasses");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
-var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _domUtils = require("../../../utils/domUtils");
-function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = (0, _gridRowsSelector.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;
-};
-
+var _utils = require("./utils");
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -75,16 +36,17 @@ const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
   const isRtl = (0, _RtlProvider.useRtl)();
-  const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
+  const currentPageRows = React.useMemo(() => (0, _utils.enrichPageRowsWithPinnedRows)(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
    * @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 = (0, _gridFilterSelector.gridExpandedSortedRowEntriesSelector)(apiRef);
     const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
     if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
@@ -94,16 +56,17 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
+    const field = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
+    const nonRowSpannedRowId = (0, _utils.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}`);
@@ -164,7 +127,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowRight':
         {
-          const rightColIndex = getRightColumnIndex({
+          const rightColIndex = (0, _utils.getRightColumnIndex)({
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
@@ -177,7 +140,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowLeft':
         {
-          const leftColIndex = getLeftColumnIndex({
+          const leftColIndex = (0, _utils.getLeftColumnIndex)({
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
@@ -257,7 +220,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowRight':
         {
-          const rightColIndex = getRightColumnIndex({
+          const rightColIndex = (0, _utils.getRightColumnIndex)({
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
@@ -270,7 +233,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowLeft':
         {
-          const leftColIndex = getLeftColumnIndex({
+          const leftColIndex = (0, _utils.getLeftColumnIndex)({
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
@@ -439,7 +402,7 @@ 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;
         }
@@ -456,7 +419,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowRight':
         {
-          const rightColIndex = getRightColumnIndex({
+          const rightColIndex = (0, _utils.getRightColumnIndex)({
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
@@ -469,7 +432,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'ArrowLeft':
         {
-          const leftColIndex = getLeftColumnIndex({
+          const leftColIndex = (0, _utils.getLeftColumnIndex)({
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.enrichPageRowsWithPinnedRows = enrichPageRowsWithPinnedRows;
+exports.findNonRowSpannedCell = findNonRowSpannedCell;
+exports.getRightColumnIndex = exports.getLeftColumnIndex = void 0;
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+function enrichPageRowsWithPinnedRows(apiRef, rows) {
+  const pinnedRows = (0, _gridRowsSelector.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;
+};
+exports.getLeftColumnIndex = getLeftColumnIndex;
+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;
+};
+exports.getRightColumnIndex = getRightColumnIndex;
+function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
+  const rowSpanHiddenCells = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector)(apiRef);
+  if (!rowSpanHiddenCells[rowId]?.[field]) {
+    return rowId;
+  }
+  const filteredSortedRowIds = (0, _gridFilterSelector.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/node/hooks/features/rows/gridRowSpanningSelectors.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridRowSpanningSpannedCellsSelector = exports.gridRowSpanningHiddenCellsSelector = exports.gridRowSpanningHiddenCellsOriginMapSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+const gridRowSpanningStateSelector = state => state.rowSpanning;
+const gridRowSpanningHiddenCellsSelector = exports.gridRowSpanningHiddenCellsSelector = (0, _createSelector.createSelector)(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCells);
+const gridRowSpanningSpannedCellsSelector = exports.gridRowSpanningSpannedCellsSelector = (0, _createSelector.createSelector)(gridRowSpanningStateSelector, rowSpanning => rowSpanning.spannedCells);
+const gridRowSpanningHiddenCellsOriginMapSelector = exports.gridRowSpanningHiddenCellsOriginMapSelector = (0, _createSelector.createSelector)(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCellOriginMap);

package/node/hooks/features/rows/gridRowSpanningUtils.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCellValue = void 0;
+exports.getUnprocessedRange = getUnprocessedRange;
+exports.isRowContextInitialized = isRowContextInitialized;
+exports.isRowRangeUpdated = isRowRangeUpdated;
+function getUnprocessedRange(testRange, processedRange) {
+  if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
+    return null;
+  }
+  // Overflowing at the end
+  // Example: testRange={ firstRowIndex: 10, lastRowIndex: 20 }, processedRange={ firstRowIndex: 0, lastRowIndex: 15 }
+  // Unprocessed Range={ firstRowIndex: 16, lastRowIndex: 20 }
+  if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex > processedRange.lastRowIndex) {
+    return {
+      firstRowIndex: processedRange.lastRowIndex,
+      lastRowIndex: testRange.lastRowIndex
+    };
+  }
+  // Overflowing at the beginning
+  // Example: testRange={ firstRowIndex: 0, lastRowIndex: 20 }, processedRange={ firstRowIndex: 16, lastRowIndex: 30 }
+  // Unprocessed Range={ firstRowIndex: 0, lastRowIndex: 15 }
+  if (testRange.firstRowIndex < processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
+    return {
+      firstRowIndex: testRange.firstRowIndex,
+      lastRowIndex: processedRange.firstRowIndex - 1
+    };
+  }
+  // TODO: Should return two ranges handle overflowing at both ends ?
+  return testRange;
+}
+function isRowContextInitialized(renderContext) {
+  return renderContext.firstRowIndex !== 0 || renderContext.lastRowIndex !== 0;
+}
+function isRowRangeUpdated(range1, range2) {
+  return range1.firstRowIndex !== range2.firstRowIndex || range1.lastRowIndex !== range2.lastRowIndex;
+}
+const getCellValue = (row, colDef, apiRef) => {
+  if (!row) {
+    return null;
+  }
+  let cellValue = row[colDef.field];
+  const valueGetter = colDef.rowSpanValueGetter ?? colDef.valueGetter;
+  if (valueGetter) {
+    cellValue = valueGetter(cellValue, row, colDef, apiRef);
+  }
+  return cellValue;
+};
+exports.getCellValue = getCellValue;