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

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

@@ -501,12 +501,6 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowDoubleClick: _propTypes.default.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.default.func,
   /**
    * Callback fired when the row turns to edit mode.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].

package/node/components/GridRow.js

@@ -31,7 +31,7 @@ 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", "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"];
 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 => {
@@ -75,6 +75,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       visibleColumns,
       renderedColumns,
       pinnedColumns,
+      offsets,
       dimensions,
       firstColumnToRender,
       isFirstVisible,
@@ -368,8 +369,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     style: style
   }, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,
-      role: "presentation"
+      style: {
+        width: offsets.left
+      }
     }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
     }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -438,6 +442,10 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   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,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,

package/node/components/containers/GridRootStyles.js

@@ -199,8 +199,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.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',
@@ -569,8 +567,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: {
       flex: '0 0 auto',
-      display: 'inline-block',
-      width: 'var(--DataGrid-offsetLeft)'
+      display: 'inline-block'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',

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

@@ -13,7 +13,7 @@ var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label", "variant", "InputLabelProps"];
 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 BooleanOperatorContainer = (0, _styles.styled)('div')({
@@ -32,7 +32,8 @@ function GridFilterInputBoolean(props) {
       focusElementRef,
       clearButton,
       tabIndex,
-      label: labelProp
+      label: labelProp,
+      variant = 'standard'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -59,7 +60,7 @@ function GridFilterInputBoolean(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
         labelId: labelId,
@@ -67,7 +68,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/node/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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 renderSingleSelectOptions = ({
@@ -58,6 +58,7 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
+      variant = 'standard',
       clearButton
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -98,7 +99,7 @@ function GridFilterInputSingleSelect(props) {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: "standard",
+        variant: variant,
         children: label
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
         id: id,
@@ -106,14 +107,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/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -13,7 +13,7 @@ var _utils = require("@mui/utils");
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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; }
 function GridFilterInputValue(props) {
@@ -26,7 +26,8 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
-      InputProps
+      InputProps,
+      variant = 'standard'
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = (0, _useTimeout.useTimeout)();
@@ -61,7 +62,7 @@ function GridFilterInputValue(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
+    variant: variant,
     type: type || 'text',
     InputProps: (0, _extends2.default)({}, applying || clearButton ? {
       endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {

package/node/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -11,6 +11,9 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _utils = require("@mui/utils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _virtualization = require("../../hooks/features/virtualization");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,19 +37,23 @@ const VirtualScrollerRenderZoneRoot = (0, _system.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 = exports.GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
+  const offsets = (0, _useGridSelector.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: rootProps
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsets.top}px, 0)`
+    }
   }, other));
 });

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

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _utils2 = require("../../utils");
+var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
@@ -32,19 +33,11 @@ const SpaceFiller = (0, _styles.styled)('div')({
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.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)'
+});
 const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -64,10 +57,12 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const hasVirtualization = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = (0, _utils.unstable_useForkRef)(innerRefProp, innerRef);
   const dimensions = (0, _utils2.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
+  const offsets = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridOffsetsSelector);
   const renderContext = (0, _utils2.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const visiblePinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   React.useEffect(() => {
@@ -98,11 +93,18 @@ const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFiller = (params, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === _columns.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [params?.position === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
+      children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "presentation",
+        style: {
+          width: leftOffsetWidth
+        }
+      }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(SpaceFiller, {
         className: _gridClasses.gridClasses.columnHeader
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         header: true,
@@ -136,13 +138,11 @@ const useGridColumnHeaders = props => {
         tabIndex: tabIndex
       }, other), colDef.field));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
-      ownerState: {
-        params
-      },
-      children: [columns, getFiller(params)]
+      ownerState: rootProps,
+      children: getFillers(params, columns, 0)
     });
   };
   const getColumnGroupHeaders = params => {
@@ -208,41 +208,39 @@ const useGridColumnHeaders = props => {
       });
     }
     headerToRender.forEach((depthInfo, depthIndex) => {
-      columns.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnHeaderRow, {
+      const children = depthInfo.elements.map(({
+        groupId,
+        width,
+        fields,
+        colIndex,
+        hasFocus,
+        tabIndex
+      }, groupIndex) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.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/node/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = void 0;
+exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = exports.gridRenderContextSelector = exports.gridRenderContextColumnsSelector = exports.gridOffsetsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 /**
  * Get the columns state
@@ -31,6 +31,13 @@ const gridVirtualizationColumnEnabledSelector = exports.gridVirtualizationColumn
  */
 const gridRenderContextSelector = exports.gridRenderContextSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.renderContext);
 
+/**
+ * Get the offsets
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+const gridOffsetsSelector = exports.gridOffsetsSelector = (0, _createSelector.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/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -48,7 +48,6 @@ const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const theme = (0, _styles.useTheme)();
-  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
   const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
   const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
@@ -64,6 +63,7 @@ const useGridVirtualScroller = () => {
   (0, _useResizeObserver.useResizeObserver)(mainRef, () => apiRef.current.resize());
   const previousContext = React.useRef(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
   const previousRowContext = React.useRef(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
+  const offsets = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridOffsetsSelector);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const scrollPosition = React.useRef({
     top: 0,
@@ -83,22 +83,17 @@ const useGridVirtualScroller = () => {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  React.useEffect(() => {
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const top = (0, _gridRowsMetaSelector.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 (0, _extends2.default)({}, state, {
         virtualization: (0, _extends2.default)({}, state.virtualization, {
-          renderContext: nextRenderContext
+          renderContext: nextRenderContext,
+          offsets: nextOffsets
         })
       });
     });
@@ -112,7 +107,7 @@ 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);
@@ -308,6 +303,7 @@ const useGridVirtualScroller = () => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
+        offsets: offsets,
         dimensions: dimensions,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
@@ -355,9 +351,6 @@ 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]);
   (0, _useRunOnce.useRunOnce)(outerSize.width !== 0, () => {
@@ -606,4 +599,15 @@ 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 = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state).positions;
+  const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
+  const top = rowPositions[renderContext.firstRowIndex] ?? 0;
+  const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
+  return {
+    top,
+    left
+  };
 }

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EMPTY_RENDER_CONTEXT = void 0;
+exports.EMPTY_RENDER_CONTEXT = exports.EMPTY_OFFSETS = void 0;
 exports.useGridVirtualization = useGridVirtualization;
 exports.virtualizationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -12,6 +12,10 @@ var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 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 EMPTY_OFFSETS = exports.EMPTY_OFFSETS = {
+  top: 0,
+  left: 0
+};
 const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -22,7 +26,8 @@ const virtualizationStateInitializer = (state, props) => {
   const virtualization = {
     enabled: !props.disableVirtualization,
     enabledForColumns: true,
-    renderContext: EMPTY_RENDER_CONTEXT
+    renderContext: EMPTY_RENDER_CONTEXT,
+    offsets: EMPTY_OFFSETS
   };
   return (0, _extends2.default)({}, state, {
     virtualization

package/node/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.3",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@mui/system": "^5.15.7",
-    "@mui/utils": "^5.15.7",
+    "@mui/system": "^5.15.9",
+    "@mui/utils": "^5.15.9",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"