@mui/x-data-grid 7.0.0-beta.2 → 7.0.0-beta.3

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

@@ -22,7 +22,7 @@ import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelec
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+import { gridOffsetsSelector, gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
 import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var EMPTY_DETAIL_PANELS = Object.freeze(new Map());
@@ -42,7 +42,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
     panels = _React$useState2[0],
     setPanels = _React$useState2[1];
   var theme = useTheme();
-  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   var cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   var cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -60,6 +59,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
   });
   var previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
   var previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
+  var offsets = useGridSelector(apiRef, gridOffsetsSelector);
   var renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   var scrollPosition = React.useRef({
     top: 0,
@@ -83,23 +83,17 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(function () {
-    var _gridRootRef$current, _gridRootRef$current2;
-    var direction = theme.direction === 'ltr' ? 1 : -1;
-    var top = gridRowsMetaSelector(apiRef.current.state).positions[renderContext.firstRowIndex];
-    var left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
-    (_gridRootRef$current = gridRootRef.current) == null || _gridRootRef$current.style.setProperty('--DataGrid-offsetTop', "".concat(top, "px"));
-    (_gridRootRef$current2 = gridRootRef.current) == null || _gridRootRef$current2.style.setProperty('--DataGrid-offsetLeft', "".concat(left, "px"));
-  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
   var updateRenderContext = React.useCallback(function (nextRenderContext, rawRenderContext) {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
     }
     var didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
+    var nextOffsets = computeOffsets(apiRef, nextRenderContext, theme.direction, pinnedColumns.left.length);
     apiRef.current.setState(function (state) {
       return _extends({}, state, {
         virtualization: _extends({}, state.virtualization, {
-          renderContext: nextRenderContext
+          renderContext: nextRenderContext,
+          offsets: nextOffsets
         })
       });
     });
@@ -113,7 +107,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
   var triggerUpdateRenderContext = function triggerUpdateRenderContext() {
     var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     var _computeRenderContext = computeRenderContext(inputs, scrollPosition),
@@ -315,6 +309,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -364,10 +359,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
       // TODO a scroll reset should not be necessary
       scrollerRef.current.scrollLeft = 0;
       scrollerRef.current.scrollTop = 0;
-    } else {
-      var _gridRootRef$current3, _gridRootRef$current4;
-      (_gridRootRef$current3 = gridRootRef.current) == null || _gridRootRef$current3.style.setProperty('--DataGrid-offsetTop', '0px');
-      (_gridRootRef$current4 = gridRootRef.current) == null || _gridRootRef$current4.style.setProperty('--DataGrid-offsetLeft', '0px');
     }
   }, [enabled, gridRootRef, scrollerRef]);
   useRunOnce(outerSize.width !== 0, function () {
@@ -640,4 +631,16 @@ export function areRenderContextsEqual(context1, context2) {
     return true;
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+}
+function computeOffsets(apiRef, renderContext, direction, pinnedLeftLength) {
+  var _rowPositions$renderC, _columnPositions$rend, _columnPositions$pinn;
+  var factor = direction === 'ltr' ? 1 : -1;
+  var rowPositions = gridRowsMetaSelector(apiRef.current.state).positions;
+  var columnPositions = gridColumnPositionsSelector(apiRef);
+  var top = (_rowPositions$renderC = rowPositions[renderContext.firstRowIndex]) != null ? _rowPositions$renderC : 0;
+  var left = factor * ((_columnPositions$rend = columnPositions[renderContext.firstColumnIndex]) != null ? _columnPositions$rend : 0) - ((_columnPositions$pinn = columnPositions[pinnedLeftLength]) != null ? _columnPositions$pinn : 0);
+  return {
+    top: top,
+    left: left
+  };
 }

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

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

package/legacy/index.js

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

package/models/events/gridEventLookup.d.ts

@@ -7,7 +7,7 @@ import type { GridSortModel } from '../gridSortModel';
 import type { GridRowSelectionModel } from '../gridRowSelectionModel';
 import type { ElementSize } from '../elementSize';
 import type { MuiBaseEvent } from '../muiEvent';
-import type { GridGroupNode, GridRowId } from '../gridRows';
+import type { GridGroupNode } from '../gridRows';
 import type { GridColumnVisibilityModel } from '../../hooks/features/columns';
 import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcessing';
 import { GridRowEditStartParams, GridRowEditStopParams } from '../params/gridRowParams';
@@ -531,13 +531,6 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridRowEditStopParams;
         event: MuiBaseEvent;
     };
-    /**
-     * Fired when the props of the edit input are committed.
-     */
-    rowEditCommit: {
-        params: GridRowId;
-        event: MuiBaseEvent;
-    };
     /**
      * Fired when a cell gains focus.
      * @ignore - do not document.

package/models/props/DataGridProps.d.ts

@@ -437,12 +437,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
      */
     onCellEditStop?: GridEventListener<'cellEditStop'>;
-    /**
-     * Callback fired when the row changes are committed.
-     * @param {GridRowId} id The row id.
-     * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-     */
-    onRowEditCommit?: GridEventListener<'rowEditCommit'>;
     /**
      * Callback fired when the row turns to edit mode.
      * @param {GridRowParams} params With all properties from [[GridRowParams]].

package/modern/DataGrid/DataGrid.js

@@ -493,12 +493,6 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowDoubleClick: PropTypes.func,
-  /**
-   * Callback fired when the row changes are committed.
-   * @param {GridRowId} id The row id.
-   * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
-   */
-  onRowEditCommit: PropTypes.func,
   /**
    * Callback fired when the row turns to edit mode.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].

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", "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", "renderedColumns", "pinnedColumns", "offsets", "dimensions", "firstColumnToRender", "lastColumnToRender", "isFirstVisible", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -67,6 +67,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       renderedColumns,
       pinnedColumns,
+      offsets,
       dimensions,
       firstColumnToRender,
       isFirstVisible,
@@ -360,8 +361,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     style: style
   }, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/_jsx("div", {
+      role: "presentation",
       className: gridClasses.cellOffsetLeft,
-      role: "presentation"
+      style: {
+        width: offsets.left
+      }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
@@ -430,6 +434,10 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
+  offsets: PropTypes.shape({
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired
+  }).isRequired,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,

package/modern/components/containers/GridRootStyles.js

@@ -192,8 +192,6 @@ export const GridRootStyles = styled('div', {
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
     '--DataGrid-hasScrollY': '0',
-    '--DataGrid-offsetTop': '0px',
-    '--DataGrid-offsetLeft': '0px',
     '--DataGrid-scrollbarSize': '10px',
     '--DataGrid-rowWidth': '0px',
     '--DataGrid-columnsTotalWidth': '0px',
@@ -562,8 +560,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.cellOffsetLeft}`]: {
       flex: '0 0 auto',
-      display: 'inline-block',
-      width: 'var(--DataGrid-offsetLeft)'
+      display: 'inline-block'
     },
     [`& .${c.columnHeaderDraggableContainer}`]: {
       display: 'flex',

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
@@ -24,7 +24,8 @@ function GridFilterInputBoolean(props) {
       focusElementRef,
       clearButton,
       tabIndex,
-      label: labelProp
+      label: labelProp,
+      variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -51,7 +52,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: labelId,
@@ -59,7 +60,8 @@ function GridFilterInputBoolean(props) {
         label: label,
         value: filterValueState,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
+        notched: variant === 'outlined' ? true : undefined,
         native: isSelectNative,
         displayEmpty: true,
         inputProps: {

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -50,6 +50,7 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
+      variant = 'standard',
       clearButton
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
@@ -90,7 +91,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -98,14 +99,15 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
         type: type || 'text',
         inputProps: {
           tabIndex,
           ref: focusElementRef,
           placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
-        native: isSelectNative
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
       }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
@@ -17,7 +17,8 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
-      InputProps
+      InputProps,
+      variant = 'standard'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
@@ -52,7 +53,7 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
+    variant: variant,
     type: type || 'text',
     InputProps: _extends({}, applying || clearButton ? {
       endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,6 +5,9 @@ import * as React from 'react';
 import clsx from 'clsx';
 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 { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,20 +28,24 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column',
-  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
+  flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: rootProps
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsets.top}px, 0)`
+    }
   }, other));
 });
 export { GridVirtualScrollerRenderZone };

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

@@ -3,11 +3,12 @@ import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
+import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { gridDimensionsSelector } from '../dimensions';
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridOffsetsSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
@@ -24,19 +25,11 @@ const SpaceFiller = styled('div')({
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
-  overridesResolver: (props, styles) => styles.columnHeaderRow
-})(({
-  ownerState: {
-    params: {
-      position
-    } = {},
-    leftOverflow = 0
-  }
-}) => ({
+  overridesResolver: (_, styles) => styles.columnHeaderRow
+})({
   display: 'flex',
-  height: 'var(--DataGrid-headerHeight)',
-  transform: position === undefined ? `translate3d(${leftOverflow !== 0 ? `calc(var(--DataGrid-offsetLeft) - ${leftOverflow}px)` : 'var(--DataGrid-offsetLeft)'}, 0, 0)` : undefined
-}));
+  height: 'var(--DataGrid-headerHeight)'
+});
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -56,10 +49,12 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
@@ -90,11 +85,18 @@ export const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFiller = (params, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && params?.position === undefined;
+    const isNotPinned = params?.position === undefined;
+    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsets.left - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [params?.position === undefined && /*#__PURE__*/_jsx(SpaceFiller, {
+      children: [isNotPinned && /*#__PURE__*/_jsx("div", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/_jsx(SpaceFiller, {
         className: gridClasses.columnHeader
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
@@ -128,13 +130,11 @@ export const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: {
-        params
-      },
-      children: [columns, getFiller(params)]
+      ownerState: rootProps,
+      children: getFillers(params, columns, 0)
     });
   };
   const getColumnGroupHeaders = params => {
@@ -200,41 +200,39 @@ export const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      const children = depthInfo.elements.map(({
+        groupId,
+        width,
+        fields,
+        colIndex,
+        hasFocus,
+        tabIndex
+      }, groupIndex) => {
+        return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
+          groupId: groupId,
+          width: width,
+          fields: fields,
+          colIndex: colIndex,
+          depth: depthIndex,
+          isLastColumn: colIndex === visibleColumns.length - fields.length,
+          maxDepth: headerToRender.length,
+          height: dimensions.headerHeight,
+          hasFocus: hasFocus,
+          tabIndex: tabIndex
+        }, groupIndex);
+      });
+      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depthIndex + 1,
-        ownerState: {
-          params,
-          leftOverflow: depthInfo.leftOverflow
-        },
-        children: [depthInfo.elements.map(({
-          groupId,
-          width,
-          fields,
-          colIndex,
-          hasFocus,
-          tabIndex
-        }, groupIndex) => {
-          return /*#__PURE__*/_jsx(GridColumnGroupHeader, {
-            groupId: groupId,
-            width: width,
-            fields: fields,
-            colIndex: colIndex,
-            depth: depthIndex,
-            isLastColumn: colIndex === visibleColumns.length - fields.length,
-            maxDepth: headerToRender.length,
-            height: dimensions.headerHeight,
-            hasFocus: hasFocus,
-            tabIndex: tabIndex
-          }, groupIndex);
-        }), getFiller(params)]
+        ownerState: rootProps,
+        children: getFillers(params, children, depthInfo.leftOverflow)
       }, depthIndex));
     });
     return columns;
   };
   return {
     renderContext,
-    getFiller,
+    getFillers,
     getColumnHeaders,
     getColumnsToRender,
     getColumnGroupHeaders,

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

@@ -24,6 +24,13 @@ export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtua
  */
 export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
 
+/**
+ * Get the offsets
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridOffsetsSelector = createSelector(gridVirtualizationSelector, state => state.offsets);
+
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.

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

@@ -20,7 +20,7 @@ import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelec
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+import { gridOffsetsSelector, 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());
@@ -37,7 +37,6 @@ export const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const theme = useTheme();
-  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -53,6 +52,7 @@ export const useGridVirtualScroller = () => {
   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,
@@ -72,22 +72,17 @@ export const useGridVirtualScroller = () => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(() => {
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const top = gridRowsMetaSelector(apiRef.current.state).positions[renderContext.firstRowIndex];
-    const left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
-    gridRootRef.current?.style.setProperty('--DataGrid-offsetTop', `${top}px`);
-    gridRootRef.current?.style.setProperty('--DataGrid-offsetLeft', `${left}px`);
-  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
   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
+          renderContext: nextRenderContext,
+          offsets: nextOffsets
         })
       });
     });
@@ -101,7 +96,7 @@ export const useGridVirtualScroller = () => {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
   const triggerUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
@@ -297,6 +292,7 @@ export const useGridVirtualScroller = () => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -344,9 +340,6 @@ export const useGridVirtualScroller = () => {
       // TODO a scroll reset should not be necessary
       scrollerRef.current.scrollLeft = 0;
       scrollerRef.current.scrollTop = 0;
-    } else {
-      gridRootRef.current?.style.setProperty('--DataGrid-offsetTop', '0px');
-      gridRootRef.current?.style.setProperty('--DataGrid-offsetLeft', '0px');
     }
   }, [enabled, gridRootRef, scrollerRef]);
   useRunOnce(outerSize.width !== 0, () => {
@@ -594,4 +587,15 @@ export function areRenderContextsEqual(context1, context2) {
     return true;
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
+}
+function computeOffsets(apiRef, 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
+  };
 }