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

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -21,7 +21,6 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
-import { randomNumberBetween } from '../utils/utils';
 import { PinnedPosition } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -65,16 +64,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,
@@ -95,6 +92,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const handleRef = 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 = {
@@ -215,7 +215,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = _extends({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight
+      minHeight,
+      '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
     if (sizes?.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
@@ -243,12 +244,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const randomNumber = randomNumberBetween(10000, 20, 80);
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = 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
@@ -260,25 +262,18 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         pinnedOffset = dimensions.columnsTotalWidth - columnPositions[indexRelativeToAllColumns] - column.computedWidth + scrollbarWidth;
         break;
       case PinnedPosition.NONE:
+      case PinnedPosition.VIRTUAL:
         pinnedOffset = 0;
         break;
     }
     if (rowNode?.type === 'skeletonRow') {
-      const {
-        width
-      } = cellColSpanInfo.cellProps;
-      const contentWidth = Math.round(randomNumber());
       return /*#__PURE__*/_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
@@ -288,28 +283,22 @@ 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 === PinnedPosition.VIRTUAL;
     return /*#__PURE__*/_jsx(slots.cell, _extends({
       column: column,
       width: width,
       rowId: rowId,
-      height: rowHeight,
       align: column.align || 'left',
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
       editCellState: editCellState,
-      isNotVisible: cellIsNotVisible
-    }, slotProps?.cell, {
+      isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength,
-      gridHasScrollX: dimensions.hasScrollX
-    }), column.field);
+      sectionLength: sectionLength
+    }, slotProps?.cell), column.field);
   };
 
   /* Start of rendering */
@@ -327,18 +316,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, 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, PinnedPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -364,7 +351,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       role: "presentation",
       className: gridClasses.cellOffsetLeft,
       style: {
-        width: offsets.left
+        width: offsetLeft
       }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
@@ -418,13 +405,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       width: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
-  firstColumnToRender: PropTypes.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
-  focusedCell: PropTypes.string,
-  focusedCellColumnIndexNotInRange: PropTypes.number,
+  focusedColumnIndex: PropTypes.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.
@@ -432,19 +417,21 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: PropTypes.number.isRequired,
   isFirstVisible: PropTypes.bool.isRequired,
   isLastVisible: PropTypes.bool.isRequired,
-  isNotVisible: PropTypes.bool,
-  lastColumnToRender: PropTypes.number.isRequired,
-  offsets: PropTypes.shape({
-    left: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired
-  }).isRequired,
+  isNotVisible: PropTypes.bool.isRequired,
+  offsetLeft: PropTypes.number.isRequired,
+  offsetTop: PropTypes.number,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   pinnedColumns: PropTypes.object.isRequired,
-  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object,
+  renderContext: PropTypes.shape({
+    firstColumnIndex: PropTypes.number.isRequired,
+    firstRowIndex: PropTypes.number.isRequired,
+    lastColumnIndex: PropTypes.number.isRequired,
+    lastRowIndex: PropTypes.number.isRequired
+  }).isRequired,
+  row: PropTypes.object.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -20,6 +20,7 @@ export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   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 = {
@@ -73,7 +74,6 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       editCellState,
       align,
       colIndex,
-      height,
       width,
       className,
       style: styleProp,
@@ -131,10 +131,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 = 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);
   }
@@ -199,8 +202,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
     const cellStyle = _extends({
-      '--width': `${width}px`,
-      '--height': typeof height === 'number' ? `${height}px` : height
+      '--width': `${width}px`
     }, styleProp);
     if (pinnedPosition === PinnedPosition.LEFT) {
       cellStyle.left = pinnedOffset;
@@ -209,7 +211,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       cellStyle.right = pinnedOffset;
     }
     return cellStyle;
-  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;
@@ -319,8 +321,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: PropTypes.bool,
     value: PropTypes.any
   }),
-  gridHasScrollX: PropTypes.bool.isRequired,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   isNotVisible: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
@@ -330,7 +330,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
   pinnedOffset: PropTypes.number.isRequired,
-  pinnedPosition: PropTypes.oneOf([0, 1, 2]).isRequired,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   sectionIndex: PropTypes.number.isRequired,
   sectionLength: PropTypes.number.isRequired,

package/modern/components/cell/GridSkeletonCell.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "align", "width", "contentWidth"];
+const _excluded = ["field", "align", "width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { fastMemo } from '../../utils/fastMemo';
+import { randomNumberBetween } from '../../utils/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const randomWidth = randomNumberBetween(10000, 20, 80);
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -22,7 +25,7 @@ function GridSkeletonCell(props) {
   const {
       align,
       width,
-      contentWidth
+      height
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
@@ -31,14 +34,18 @@ function GridSkeletonCell(props) {
     align
   };
   const classes = useUtilityClasses(ownerState);
+  const contentWidth = Math.round(randomWidth());
   return /*#__PURE__*/_jsx("div", _extends({
     className: classes.root,
     style: {
-      width
+      height,
+      maxWidth: width,
+      minWidth: width
     }
   }, other, {
     children: /*#__PURE__*/_jsx(Skeleton, {
-      width: `${contentWidth}%`
+      width: `${contentWidth}%`,
+      height: 25
     })
   }));
 }
@@ -48,8 +55,9 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   align: PropTypes.string.isRequired,
-  contentWidth: PropTypes.number.isRequired,
   field: PropTypes.string.isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   width: PropTypes.number.isRequired
 } : void 0;
-export { GridSkeletonCell };
+const Memoized = fastMemo(GridSkeletonCell);
+export { Memoized as GridSkeletonCell };

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -36,7 +36,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   const checkboxElement = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRef = useForkRef(checkboxElement, ref);
-  const element = apiRef.current.getCellElement(id, field);
   const handleChange = event => {
     const params = {
       value: event.target.checked,
@@ -45,10 +44,13 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
   };
   React.useLayoutEffect(() => {
-    if (tabIndex === 0 && element) {
-      element.tabIndex = -1;
+    if (tabIndex === 0) {
+      const element = apiRef.current.getCellElement(id, field);
+      if (element) {
+        element.tabIndex = -1;
+      }
     }
-  }, [element, tabIndex]);
+  }, [apiRef, tabIndex, id, field]);
   React.useEffect(() => {
     if (hasFocus) {
       const input = checkboxElement.current?.querySelector('input');

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -152,7 +152,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: apiRef.current.getLocaleText('columnsManagementNoColumns')
       })]
-    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+    }), (!disableShowHideToggle || !disableResetButton) && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(FormControlLabel, {

package/modern/components/containers/GridRootStyles.js

@@ -341,7 +341,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnSeparator}`]: {
       visibility: 'hidden',
       position: 'absolute',
-      zIndex: 100,
+      zIndex: 3,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -441,8 +441,6 @@ export const GridRootStyles = styled('div', {
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
-      '--width': '0px',
-      '--height': '0px',
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
       overflow: 'hidden',
@@ -462,7 +460,8 @@ export const GridRootStyles = styled('div', {
       lineHeight: 'inherit'
     },
     [`& .${c.cellEmpty}`]: {
-      padding: 0
+      padding: 0,
+      height: 'unset'
     },
     [`& .${c.cell}.${c['cell--selectionMode']}`]: {
       cursor: 'default'
@@ -578,6 +577,12 @@ export const GridRootStyles = styled('div', {
       flex: '0 0 auto',
       display: 'inline-block'
     },
+    [`& .${c.cellSkeleton}`]: {
+      flex: '0 0 auto',
+      height: '100%',
+      display: 'inline-flex',
+      alignItems: 'center'
+    },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',
       width: '100%',

package/modern/components/virtualization/GridBottomContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 2,
+  zIndex: 4,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
 });
 export function GridBottomContainer(props) {

package/modern/components/virtualization/GridTopContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 2,
+  zIndex: 4,
   top: 0,
   '&::after': {
     content: '" "',

package/modern/components/virtualization/GridVirtualScroller.js

@@ -59,8 +59,10 @@ function GridVirtualScroller(props) {
     getContentProps,
     getRenderZoneProps,
     getScrollbarVerticalProps,
-    getScrollbarHorizontalProps
+    getScrollbarHorizontalProps,
+    getRows
   } = virtualScroller;
+  const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
@@ -75,19 +77,19 @@ function GridVirtualScroller(props) {
         })]
       }), /*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
-          children: [virtualScroller.getRows(), /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
+          children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
+      })), rows.length > 0 && /*#__PURE__*/_jsx(SpaceFiller, {}), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "bottom",
           virtualScroller: virtualScroller
         })
       })]
-    })), /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
-    }, getScrollbarVerticalProps())), /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -7,7 +7,8 @@ import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridOffsetsSelector } from '../../hooks/features/virtualization';
+import { gridRowsMetaSelector } from '../../hooks/features/rows';
+import { gridRenderContextSelector } from '../../hooks/features/virtualization';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,13 +39,17 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const offsetTop = useGridSelector(apiRef, () => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
+  });
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps,
     style: {
-      transform: `translate3d(0, ${offsets.top}px, 0)`
+      transform: `translate3d(0, ${offsetTop}px, 0)`
     }
   }, other));
 });

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -32,7 +32,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
 export const useGridPipeProcessing = apiRef => {
-  const processorsCache = React.useRef({});
+  const cache = React.useRef({});
   const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
     if (isRunning.current || !groupCache) {
@@ -45,52 +45,54 @@ export const useGridPipeProcessing = apiRef => {
     isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    const groupCache = processorsCache.current[group];
+    const groupCache = cache.current[group];
     const oldProcessor = groupCache.processors.get(id);
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
+      groupCache.processorsAsArray = Array.from(cache.current[group].processors.values());
       runAppliers(groupCache);
     }
     return () => {
-      processorsCache.current[group].processors.set(id, null);
+      cache.current[group].processors.delete(id);
+      cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values());
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
-    if (!processorsCache.current[group]) {
-      processorsCache.current[group] = {
+    if (!cache.current[group]) {
+      cache.current[group] = {
         processors: new Map(),
+        processorsAsArray: [],
         appliers: {}
       };
     }
-    processorsCache.current[group].appliers[id] = applier;
+    cache.current[group].appliers[id] = applier;
     return () => {
-      const _appliers = processorsCache.current[group].appliers,
+      const _appliers = cache.current[group].appliers,
         otherAppliers = _objectWithoutPropertiesLoose(_appliers, [id].map(_toPropertyKey));
-      processorsCache.current[group].appliers = otherAppliers;
+      cache.current[group].appliers = otherAppliers;
     };
   }, []);
   const requestPipeProcessorsApplication = React.useCallback(group => {
-    const groupCache = processorsCache.current[group];
-    runAppliers(groupCache);
+    runAppliers(cache.current[group]);
   }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
-    if (!processorsCache.current[group]) {
+    if (!cache.current[group]) {
       return value;
     }
-    const preProcessors = Array.from(processorsCache.current[group].processors.values());
-    return preProcessors.reduce((acc, preProcessor) => {
-      if (!preProcessor) {
-        return acc;
-      }
-      return preProcessor(acc, context);
-    }, value);
+    const processors = cache.current[group].processorsAsArray;
+    let result = value;
+    for (let i = 0; i < processors.length; i += 1) {
+      result = processors[i](result, context);
+    }
+    return result;
   }, []);
   const preProcessingPrivateApi = {
     registerPipeProcessor,