@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.5

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -3,24 +3,23 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useTheme } from '@mui/material/styles';
-import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { useLazyRef } from '../../utils/useLazyRef';
 import { useResizeObserver } from '../../utils/useResizeObserver';
 import { useRunOnce } from '../../utils/useRunOnce';
-import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from '../columns/gridColumnsSelector';
 import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
-import { clamp } from '../../../utils/utils';
+import { useGridApiEventHandler } from '../../utils';
+import { clamp, range } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridOffsetsSelector, gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
 import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
@@ -49,40 +48,29 @@ export const useGridVirtualScroller = () => {
   const scrollbarHorizontalRef = React.useRef(null);
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
+  const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
   useResizeObserver(mainRef, () => apiRef.current.resize());
   const previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
   const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollPosition = React.useRef({
     top: 0,
     left: 0
   }).current;
   const prevTotalWidth = React.useRef(columnsTotalWidth);
-  const getRenderedColumns = useLazyRef(createGetRenderedColumns).current;
-  const indexOfRowWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return currentPage.rows.findIndex(row => row.id === cellFocus.id);
-    }
-    return -1;
-  }, [cellFocus, currentPage.rows]);
-  const indexOfColumnWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return visibleColumns.findIndex(column => column.field === cellFocus.field);
-    }
-    return -1;
-  }, [cellFocus, visibleColumns]);
+  const focusedCell = {
+    rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
+    columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
+  };
   const updateRenderContext = React.useCallback((nextRenderContext, rawRenderContext) => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
     }
     const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
-    const nextOffsets = computeOffsets(apiRef, nextRenderContext, theme.direction, pinnedColumns.left.length);
     apiRef.current.setState(state => {
       return _extends({}, state, {
         virtualization: _extends({}, state.virtualization, {
-          renderContext: nextRenderContext,
-          offsets: nextOffsets
+          renderContext: nextRenderContext
         })
       });
     });
@@ -96,7 +84,7 @@ export const useGridVirtualScroller = () => {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
   const triggerUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
@@ -157,9 +145,12 @@ export const useGridVirtualScroller = () => {
   const handleTouchMove = useEventCallback(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
-  const minFirstColumn = pinnedColumns.left.length;
-  const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
   const getRows = (params = {}) => {
+    if (!params.rows && !currentPage.range) {
+      return [];
+    }
+    const columnPositions = gridColumnPositionsSelector(apiRef);
+    const currentRenderContext = params.renderContext ?? renderContext;
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -176,77 +167,57 @@ export const useGridVirtualScroller = () => {
         rowIndexOffset = pinnedRows.top.length;
         break;
     }
-    const firstRowToRender = renderContext.firstRowIndex;
-    const lastRowToRender = renderContext.lastRowIndex;
-    const firstColumnToRender = renderContext.firstColumnIndex;
-    const lastColumnToRender = renderContext.lastColumnIndex;
-    if (!params.rows && !currentPage.range) {
-      return [];
-    }
-    const renderedRows = params.rows ?? currentPage.rows.slice(firstRowToRender, lastRowToRender);
-
-    // If the selected row is not within the current range of rows being displayed,
-    // we need to render it at either the top or bottom of the rows,
-    // depending on whether it is above or below the range.
-    let isRowWithFocusedCellNotInRange = false;
-    if (!isPinnedSection && indexOfRowWithFocusedCell > -1 && (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell)) {
-      isRowWithFocusedCellNotInRange = true;
-      const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-      if (indexOfRowWithFocusedCell > firstRowToRender) {
-        renderedRows.push(rowWithFocusedCell);
-      } else {
-        renderedRows.unshift(rowWithFocusedCell);
-      }
-    }
-    let isColumnWihFocusedCellNotInRange = false;
-    if (!isPinnedSection && (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell)) {
-      isColumnWihFocusedCellNotInRange = true;
-    }
-    const {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    } = getRenderedColumns(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1);
-    renderedRows.forEach(row => {
-      apiRef.current.calculateColSpan({
-        rowId: row.id,
-        minFirstColumn,
-        maxLastColumn,
-        columns: visibleColumns
-      });
-      if (pinnedColumns.left.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: 0,
-          maxLastColumn: pinnedColumns.left.length,
-          columns: visibleColumns
-        });
+    const rowModels = params.rows ?? currentPage.rows;
+    const firstRowToRender = currentRenderContext.firstRowIndex;
+    const lastRowToRender = Math.min(currentRenderContext.lastRowIndex, rowModels.length);
+    const rowIndexes = params.rows ? range(0, params.rows.length) : range(firstRowToRender, lastRowToRender);
+    let virtualRowIndex = -1;
+    if (!isPinnedSection && focusedCell.rowIndex !== -1) {
+      if (focusedCell.rowIndex < firstRowToRender) {
+        virtualRowIndex = focusedCell.rowIndex;
+        rowIndexes.unshift(virtualRowIndex);
       }
-      if (pinnedColumns.right.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
-          maxLastColumn: visibleColumns.length,
-          columns: visibleColumns
-        });
+      if (focusedCell.rowIndex >= lastRowToRender) {
+        virtualRowIndex = focusedCell.rowIndex;
+        rowIndexes.push(virtualRowIndex);
       }
-    });
+    }
     const rows = [];
     const rowProps = rootProps.slotProps?.row;
-    let isRowWithFocusedCellRendered = false;
-    for (let i = 0; i < renderedRows.length; i += 1) {
+    rowIndexes.forEach(rowIndexInPage => {
       const {
         id,
         model
-      } = renderedRows[i];
-      const rowIndexInPage = (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i;
-      let index = rowIndexOffset + rowIndexInPage;
-      if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
+      } = rowModels[rowIndexInPage];
+
+      // NOTE: This is an expensive feature, the colSpan code could be optimized.
+      if (hasColSpan) {
+        const minFirstColumn = pinnedColumns.left.length;
+        const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
+        apiRef.current.calculateColSpan({
+          rowId: id,
+          minFirstColumn,
+          maxLastColumn,
+          columns: visibleColumns
+        });
+        if (pinnedColumns.left.length > 0) {
+          apiRef.current.calculateColSpan({
+            rowId: id,
+            minFirstColumn: 0,
+            maxLastColumn: pinnedColumns.left.length,
+            columns: visibleColumns
+          });
+        }
+        if (pinnedColumns.right.length > 0) {
+          apiRef.current.calculateColSpan({
+            rowId: id,
+            minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
+            maxLastColumn: visibleColumns.length,
+            columns: visibleColumns
+          });
+        }
       }
-      const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
+      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -262,47 +233,46 @@ export const useGridVirtualScroller = () => {
       if (isLastSection) {
         if (!isPinnedSection) {
           const lastIndex = currentPage.rows.length - 1;
-          const isLastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === lastIndex + 1 : firstRowToRender + i === lastIndex;
+          const isLastVisibleRowIndex = rowIndexInPage === lastIndex;
           if (isLastVisibleRowIndex) {
             isLastVisible = true;
           }
         } else {
-          isLastVisible = i === renderedRows.length - 1;
+          isLastVisible = rowIndexInPage === rowModels.length - 1;
         }
       }
-      const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
-      const columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
-      const renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange, ...renderedColumns] : renderedColumns;
+      const isVirtualRow = rowIndexInPage === virtualRowIndex;
+      const isNotVisible = isVirtualRow;
       let tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === id) {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
+      const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
-        index: index,
+        index: rowIndex,
+        selected: isSelected,
+        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
+        offsetLeft: offsetLeft,
+        dimensions: dimensions,
         rowHeight: baseRowHeight,
-        focusedCell: focusedCell,
         tabbableCell: tabbableCell,
-        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-        renderedColumns: renderedColumnsWithFocusedCell,
-        visibleColumns: visibleColumns,
         pinnedColumns: pinnedColumns,
-        firstColumnToRender: firstColumnToRender,
-        lastColumnToRender: lastColumnToRender,
-        selected: isSelected,
-        offsets: offsets,
-        dimensions: dimensions,
+        visibleColumns: visibleColumns,
+        renderContext: currentRenderContext,
+        focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isRowNotVisible
+        isNotVisible: isNotVisible
       }, rowProps), id));
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);
       }
-    }
+    });
     return rows;
   };
   const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
@@ -355,6 +325,9 @@ export const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
+  useGridApiEventHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -388,29 +361,6 @@ export const useGridVirtualScroller = () => {
     })
   };
 };
-function createGetRenderedColumns() {
-  return defaultMemoize((columns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, indexOfColumnWithFocusedCell) => {
-    // If the selected column is not within the current range of columns being displayed,
-    // we need to render it at either the left or right of the columns,
-    // depending on whether it is above or below the range.
-    let focusedCellColumnIndexNotInRange;
-    const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender);
-    if (indexOfColumnWithFocusedCell > -1) {
-      // check if it is not on the left pinned column.
-      if (firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-      // check if it is not on the right pinned column.
-      else if (lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-    }
-    return {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    };
-  });
-}
 function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
@@ -588,14 +538,8 @@ export function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-function computeOffsets(apiRef, renderContext, direction, pinnedLeftLength) {
+export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
   const factor = direction === 'ltr' ? 1 : -1;
-  const rowPositions = gridRowsMetaSelector(apiRef.current.state).positions;
-  const columnPositions = gridColumnPositionsSelector(apiRef);
-  const top = rowPositions[renderContext.firstRowIndex] ?? 0;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
-  return {
-    top,
-    left
-  };
+  return left;
 }

package/modern/hooks/features/virtualization/useGridVirtualization.js

@@ -1,10 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-export const EMPTY_OFFSETS = {
-  top: 0,
-  left: 0
-};
 export const EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -15,8 +11,7 @@ export const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT,
-    offsets: EMPTY_OFFSETS
+    renderContext: EMPTY_RENDER_CONTEXT
   };
   return _extends({}, state, {
     virtualization

package/modern/hooks/utils/useTimeout.js

@@ -1,12 +1,14 @@
+'use client';
+
 import { useLazyRef } from './useLazyRef';
 import { useOnMount } from './useOnMount';
-class Timeout {
+export class Timeout {
   constructor() {
-    this.currentId = 0;
+    this.currentId = null;
     this.clear = () => {
-      if (this.currentId !== 0) {
+      if (this.currentId !== null) {
         clearTimeout(this.currentId);
-        this.currentId = 0;
+        this.currentId = null;
       }
     };
     this.disposeEffect = () => {
@@ -16,9 +18,15 @@ class Timeout {
   static create() {
     return new Timeout();
   }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
   start(delay, fn) {
     this.clear();
-    this.currentId = setTimeout(fn, delay);
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
   }
 }
 export function useTimeout() {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.4
+ * @mui/x-data-grid v7.0.0-beta.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/utils/utils.js

@@ -30,6 +30,15 @@ export function escapeRegExp(value) {
  */
 export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
+/**
+ * Create an array containing the range [from, to[
+ */
+export function range(from, to) {
+  return Array.from({
+    length: to - from
+  }).map((_, i) => from + i);
+}
+
 /**
  * Based on `fast-deep-equal`
  *

package/node/DataGrid/DataGrid.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/node/colDef/gridBooleanOperators.js

@@ -11,7 +11,7 @@ const getGridBooleanOperators = () => [{
     if (!filterItem.value) {
       return null;
     }
-    const valueAsBoolean = filterItem.value === 'true';
+    const valueAsBoolean = String(filterItem.value) === 'true';
     return value => {
       return Boolean(value) === valueAsBoolean;
     };

package/node/components/GridRow.js

@@ -27,11 +27,10 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
-var _utils2 = require("../utils/utils");
 var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -73,16 +72,14 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       rowHeight,
       className,
       visibleColumns,
-      renderedColumns,
       pinnedColumns,
-      offsets,
+      offsetLeft,
       dimensions,
-      firstColumnToRender,
+      renderContext,
+      focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
-      focusedCellColumnIndexNotInRange,
       isNotVisible,
-      focusedCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -103,6 +100,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  const hasFocusCell = focusedColumnIndex !== undefined;
+  const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
+  const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const ownerState = {
@@ -251,12 +251,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const randomNumber = (0, _utils2.randomNumberBetween)(10000, 20, 80);
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _GridCell.PinnedPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
-    if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+    if (cellColSpanInfo?.spannedByColSpan) {
       return null;
     }
+    const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
+    const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     let pinnedOffset;
     // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
     // eslint-disable-next-line default-case
@@ -268,25 +269,18 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
         break;
       case _GridCell.PinnedPosition.NONE:
+      case _GridCell.PinnedPosition.VIRTUAL:
         pinnedOffset = 0;
         break;
     }
     if (rowNode?.type === 'skeletonRow') {
-      const {
-        width
-      } = cellColSpanInfo.cellProps;
-      const contentWidth = Math.round(randomNumber());
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         width: width,
-        contentWidth: contentWidth,
+        height: rowHeight,
         field: column.field,
         align: column.align ?? 'left'
       }, column.field);
     }
-    const {
-      colSpan,
-      width
-    } = cellColSpanInfo.cellProps;
     const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
@@ -296,10 +290,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    let cellIsNotVisible = false;
-    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-      cellIsNotVisible = true;
-    }
+    const cellIsNotVisible = pinnedPosition === _GridCell.PinnedPosition.VIRTUAL;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
       column: column,
       width: width,
@@ -335,18 +326,16 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   });
   const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   const cells = [];
-  for (let i = 0; i < renderedColumns.length; i += 1) {
-    const column = renderedColumns[i];
-    let indexRelativeToAllColumns = firstColumnToRender + i;
-    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
-      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
-        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
-      } else {
-        indexRelativeToAllColumns -= 1;
-      }
-    }
-    const indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
-    cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
+  if (hasVirtualFocusCellLeft) {
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
+  }
+  for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+    const column = visibleColumns[i];
+    const indexInSection = i - pinnedColumns.left.length;
+    cells.push(getCell(column, indexInSection, i, middleColumnsLength));
+  }
+  if (hasVirtualFocusCellRight) {
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _GridCell.PinnedPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -372,7 +361,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,
       style: {
-        width: offsets.left
+        width: offsetLeft
       }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
@@ -426,13 +415,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       width: _propTypes.default.number.isRequired
     }).isRequired
   }).isRequired,
-  firstColumnToRender: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
-  focusedCell: _propTypes.default.string,
-  focusedCellColumnIndexNotInRange: _propTypes.default.number,
+  focusedColumnIndex: _propTypes.default.number,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
@@ -440,19 +427,21 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: _propTypes.default.number.isRequired,
   isFirstVisible: _propTypes.default.bool.isRequired,
   isLastVisible: _propTypes.default.bool.isRequired,
-  isNotVisible: _propTypes.default.bool,
-  lastColumnToRender: _propTypes.default.number.isRequired,
-  offsets: _propTypes.default.shape({
-    left: _propTypes.default.number.isRequired,
-    top: _propTypes.default.number.isRequired
-  }).isRequired,
+  isNotVisible: _propTypes.default.bool.isRequired,
+  offsetLeft: _propTypes.default.number.isRequired,
+  offsetTop: _propTypes.default.number,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
   pinnedColumns: _propTypes.default.object.isRequired,
-  renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  row: _propTypes.default.object,
+  renderContext: _propTypes.default.shape({
+    firstColumnIndex: _propTypes.default.number.isRequired,
+    firstRowIndex: _propTypes.default.number.isRequired,
+    lastColumnIndex: _propTypes.default.number.isRequired,
+    lastRowIndex: _propTypes.default.number.isRequired
+  }).isRequired,
+  row: _propTypes.default.object.isRequired,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,

package/node/components/cell/GridCell.js

@@ -29,6 +29,7 @@ let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosit
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
   PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
   PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
   return PinnedPosition;
 }({});
 const EMPTY_CELL_PARAMS = {
@@ -140,10 +141,13 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     classes: rootClasses,
     getCellClassName
   } = rootProps;
-  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+
+  // There is a hidden grid state access in `applyPipeProcessor('cellClassName', ...)`
+  const pipesClassName = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
     id: rowId,
     field
-  });
+  }).filter(Boolean).join(' '));
+  const classNames = [pipesClassName];
   if (column.cellClassName) {
     classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
   }
@@ -339,7 +343,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onMouseDown: _propTypes.default.func,
   onMouseUp: _propTypes.default.func,
   pinnedOffset: _propTypes.default.number.isRequired,
-  pinnedPosition: _propTypes.default.oneOf([0, 1, 2]).isRequired,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   sectionIndex: _propTypes.default.number.isRequired,
   sectionLength: _propTypes.default.number.isRequired,