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

package/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,23 +72,17 @@ export const useGridVirtualScroller = () => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(() => {
-    var _gridRootRef$current, _gridRootRef$current2;
-    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 = gridRootRef.current) == null || _gridRootRef$current.style.setProperty('--DataGrid-offsetTop', `${top}px`);
-    (_gridRootRef$current2 = gridRootRef.current) == null || _gridRootRef$current2.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
         })
       });
     });
@@ -102,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);
@@ -300,6 +294,7 @@ export const useGridVirtualScroller = () => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -347,10 +342,6 @@ export const 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, () => {
@@ -599,4 +590,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;
+  const factor = direction === 'ltr' ? 1 : -1;
+  const rowPositions = gridRowsMetaSelector(apiRef.current.state).positions;
+  const columnPositions = gridColumnPositionsSelector(apiRef);
+  const top = (_rowPositions$renderC = rowPositions[renderContext.firstRowIndex]) != null ? _rowPositions$renderC : 0;
+  const left = factor * ((_columnPositions$rend = columnPositions[renderContext.firstColumnIndex]) != null ? _columnPositions$rend : 0) - ((_columnPositions$pinn = columnPositions[pinnedLeftLength]) != null ? _columnPositions$pinn : 0);
+  return {
+    top,
+    left
+  };
 }

package/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -8,6 +8,14 @@ export type GridVirtualizationState = {
     enabled: boolean;
     enabledForColumns: boolean;
     renderContext: GridRenderContext;
+    offsets: {
+        top: number;
+        left: number;
+    };
+};
+export declare const EMPTY_OFFSETS: {
+    top: number;
+    left: number;
 };
 export declare const EMPTY_RENDER_CONTEXT: {
     firstRowIndex: number;

package/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 const EMPTY_OFFSETS = {
+  top: 0,
+  left: 0
+};
 export const EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -11,7 +15,8 @@ export const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT
+    renderContext: EMPTY_RENDER_CONTEXT,
+    offsets: EMPTY_OFFSETS
   };
   return _extends({}, state, {
     virtualization

package/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/legacy/DataGrid/DataGrid.js

@@ -498,12 +498,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/legacy/components/GridRow.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _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"];
+var _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';
@@ -65,6 +65,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     visibleColumns = props.visibleColumns,
     renderedColumns = props.renderedColumns,
     pinnedColumns = props.pinnedColumns,
+    offsets = props.offsets,
     dimensions = props.dimensions,
     firstColumnToRender = props.firstColumnToRender,
     lastColumnToRender = props.lastColumnToRender,
@@ -366,8 +367,11 @@ var 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", {
@@ -436,6 +440,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/legacy/components/containers/GridRootStyles.js

@@ -66,8 +66,6 @@ export var 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',
@@ -339,8 +337,7 @@ export var GridRootStyles = styled('div', {
     backgroundColor: pinnedSelectedHoverBackground
   })))), "& .".concat(c.cellOffsetLeft), {
     flex: '0 0 auto',
-    display: 'inline-block',
-    width: 'var(--DataGrid-offsetLeft)'
+    display: 'inline-block'
   }), "& .".concat(c.columnHeaderDraggableContainer), {
     display: 'flex',
     width: '100%',

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
+var _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';
@@ -27,6 +27,8 @@ function GridFilterInputBoolean(props) {
     clearButton = props.clearButton,
     tabIndex = props.tabIndex,
     labelProp = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
     InputLabelProps = props.InputLabelProps,
     others = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(item.value || ''),
@@ -56,7 +58,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
         labelId: labelId,
@@ -64,7 +66,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/legacy/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+var _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,8 @@ function GridFilterInputSingleSelect(props) {
     placeholder = props.placeholder,
     tabIndex = props.tabIndex,
     labelProp = props.label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     InputLabelProps = props.InputLabelProps,
@@ -91,7 +93,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -99,14 +101,15 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: "standard",
+        variant: variant,
         type: type || 'text',
         inputProps: {
           tabIndex: tabIndex,
           ref: focusElementRef,
           placeholder: placeholder != null ? placeholder : apiRef.current.getLocaleText('filterPanelInputPlaceholder')
         },
-        native: isSelectNative
+        native: isSelectNative,
+        notched: variant === 'outlined' ? true : undefined
       }, others /* FIXME: typing error */, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelect, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps"];
+var _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';
@@ -20,6 +20,8 @@ function GridFilterInputValue(props) {
     isFilterActive = props.isFilterActive,
     clearButton = props.clearButton,
     InputProps = props.InputProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'standard' : _props$variant,
     others = _objectWithoutProperties(props, _excluded);
   var filterTimeout = useTimeout();
   var _React$useState = React.useState((_item$value = item.value) != null ? _item$value : ''),
@@ -58,7 +60,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/legacy/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,18 +28,22 @@ var VirtualScrollerRenderZoneRoot = styled('div', {
   position: 'absolute',
   display: 'flex',
   // Prevents margin collapsing when using `getRowSpacing`
-  flexDirection: 'column',
-  transform: 'translate3d(0, var(--DataGrid-offsetTop), 0)'
+  flexDirection: 'column'
 });
 var GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   var className = props.className,
     other = _objectWithoutProperties(props, _excluded);
+  var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var classes = useUtilityClasses(rootProps);
+  var offsets = useGridSelector(apiRef, gridOffsetsSelector);
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: rootProps
+    ownerState: rootProps,
+    style: {
+      transform: "translate3d(0, ".concat(offsets.top, "px, 0)")
+    }
   }, other));
 });
 export { GridVirtualScrollerRenderZone };

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

@@ -4,11 +4,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';
@@ -25,21 +26,12 @@ var SpaceFiller = styled('div')({
 export var GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderRow',
-  overridesResolver: function overridesResolver(props, styles) {
+  overridesResolver: function overridesResolver(_, styles) {
     return styles.columnHeaderRow;
   }
-})(function (_ref) {
-  var _ref$ownerState = _ref.ownerState,
-    _ref$ownerState$param = _ref$ownerState.params,
-    _ref$ownerState$param2 = _ref$ownerState$param === void 0 ? {} : _ref$ownerState$param,
-    position = _ref$ownerState$param2.position,
-    _ref$ownerState$leftO = _ref$ownerState.leftOverflow,
-    leftOverflow = _ref$ownerState$leftO === void 0 ? 0 : _ref$ownerState$leftO;
-  return {
-    display: 'flex',
-    height: 'var(--DataGrid-headerHeight)',
-    transform: position === undefined ? "translate3d(".concat(leftOverflow !== 0 ? "calc(var(--DataGrid-offsetLeft) - ".concat(leftOverflow, "px)") : 'var(--DataGrid-offsetLeft)', ", 0, 0)") : undefined
-  };
+})({
+  display: 'flex',
+  height: 'var(--DataGrid-headerHeight)'
 });
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
@@ -64,10 +56,12 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     resizeCol = _React$useState4[0],
     setResizeCol = _React$useState4[1];
   var apiRef = useGridPrivateApiContext();
+  var rootProps = useGridRootProps();
   var hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   var innerRef = React.useRef(null);
   var handleInnerRef = useForkRef(innerRefProp, innerRef);
   var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var offsets = useGridSelector(apiRef, gridOffsetsSelector);
   var renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   var visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(function () {
@@ -92,11 +86,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   var getColumnsToRender = function getColumnsToRender(params) {
-    var _ref2 = params || {},
-      _ref2$renderContext = _ref2.renderContext,
-      currentContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
-      _ref2$maxLastColumn = _ref2.maxLastColumn,
-      maxLastColumn = _ref2$maxLastColumn === void 0 ? visibleColumns.length : _ref2$maxLastColumn;
+    var _ref = params || {},
+      _ref$renderContext = _ref.renderContext,
+      currentContext = _ref$renderContext === void 0 ? renderContext : _ref$renderContext,
+      _ref$maxLastColumn = _ref.maxLastColumn,
+      maxLastColumn = _ref$maxLastColumn === void 0 ? visibleColumns.length : _ref$maxLastColumn;
     var firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
     var lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
@@ -106,12 +100,19 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       lastColumnToRender: lastColumnToRender
     };
   };
-  var getFiller = function getFiller(params) {
-    var borderTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var getFillers = function getFillers(params, children, leftOverflow) {
+    var borderTop = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isPinnedRight = (params == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
-    var hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && (params == null ? void 0 : params.position) === undefined;
+    var isNotPinned = (params == null ? void 0 : params.position) === undefined;
+    var hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
+    var leftOffsetWidth = offsets.left - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [(params == null ? void 0 : 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,
@@ -145,13 +146,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: {
-        params: params
-      },
-      children: [columns, getFiller(params)]
+      ownerState: rootProps,
+      children: getFillers(params, columns, 0)
     });
   };
   var getColumnGroupHeaders = function getColumnGroupHeaders(params) {
@@ -171,16 +170,16 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       var rowStructure = columnGroupsHeaderStructure[depth];
       var firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
       var firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
-      var firstGroupIndex = rowStructure.findIndex(function (_ref4) {
-        var groupId = _ref4.groupId,
-          columnFields = _ref4.columnFields;
+      var firstGroupIndex = rowStructure.findIndex(function (_ref3) {
+        var groupId = _ref3.groupId,
+          columnFields = _ref3.columnFields;
         return groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender);
       });
       var lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
       var lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
-      var lastGroupIndex = rowStructure.findIndex(function (_ref5) {
-        var groupId = _ref5.groupId,
-          columnFields = _ref5.columnFields;
+      var lastGroupIndex = rowStructure.findIndex(function (_ref4) {
+        var groupId = _ref4.groupId,
+          columnFields = _ref4.columnFields;
         return groupId === lastGroupToRender && columnFields.includes(lastColumnFieldToRender);
       });
       var visibleColumnGroupHeader = rowStructure.slice(firstGroupIndex, lastGroupIndex + 1).map(function (groupStructure) {
@@ -200,9 +199,9 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         return acc + ((_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0);
       }, 0);
       var columnIndex = firstColumnToRender;
-      var elements = visibleColumnGroupHeader.map(function (_ref6) {
-        var groupId = _ref6.groupId,
-          columnFields = _ref6.columnFields;
+      var elements = visibleColumnGroupHeader.map(function (_ref5) {
+        var groupId = _ref5.groupId,
+          columnFields = _ref5.columnFields;
         var hasFocus = columnGroupHeaderFocus !== null && columnGroupHeaderFocus.depth === depth && columnFields.includes(columnGroupHeaderFocus.field);
         var tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
         var headerInfo = {
@@ -227,40 +226,38 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       _loop(depth);
     }
     headerToRender.forEach(function (depthInfo, depthIndex) {
-      columns.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      var children = depthInfo.elements.map(function (_ref2, groupIndex) {
+        var groupId = _ref2.groupId,
+          width = _ref2.width,
+          fields = _ref2.fields,
+          colIndex = _ref2.colIndex,
+          hasFocus = _ref2.hasFocus,
+          tabIndex = _ref2.tabIndex;
+        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: params,
-          leftOverflow: depthInfo.leftOverflow
-        },
-        children: [depthInfo.elements.map(function (_ref3, groupIndex) {
-          var groupId = _ref3.groupId,
-            width = _ref3.width,
-            fields = _ref3.fields,
-            colIndex = _ref3.colIndex,
-            hasFocus = _ref3.hasFocus,
-            tabIndex = _ref3.tabIndex;
-          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: renderContext,
-    getFiller: getFiller,
+    getFillers: getFillers,
     getColumnHeaders: getColumnHeaders,
     getColumnsToRender: getColumnsToRender,
     getColumnGroupHeaders: getColumnGroupHeaders,

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

@@ -32,6 +32,15 @@ export var gridRenderContextSelector = createSelector(gridVirtualizationSelector
   return state.renderContext;
 });
 
+/**
+ * Get the offsets
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export var gridOffsetsSelector = createSelector(gridVirtualizationSelector, function (state) {
+  return 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.