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

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

@@ -142,7 +142,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
     }
     return apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: readOnlyFilters
-    }));
+    }), 'removeAllFilterItems');
   }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(function () {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {

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/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

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/rows/gridRowsUtils.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { gridDimensionsSelector } from '../dimensions';
+import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
 export var GRID_ROOT_GROUP_ID = "auto-generated-group-node-root";
 export var GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export var buildRootGroup = function buildRootGroup() {

package/legacy/hooks/features/rows/useGridRows.js

@@ -124,7 +124,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   var updateRows = React.useCallback(function (updates) {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
-      throw new Error(["MUI X: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     var nonPinnedRowsUpdates = [];
     updates.forEach(function (update) {
@@ -263,7 +263,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
   }, [apiRef, logger]);
   var replaceRows = React.useCallback(function (firstRowToRender, newRows) {
     if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
-      throw new Error(["MUI X: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+      throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
     if (newRows.length === 0) {
       return;

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.

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);
@@ -51,7 +50,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
   var gridRootRef = apiRef.current.rootElementRef;
   var mainRef = apiRef.current.mainElementRef;
   var scrollerRef = apiRef.current.virtualScrollerRef;
-  var renderZoneRef = React.useRef(null);
   var scrollbarVerticalRef = React.useRef(null);
   var scrollbarHorizontalRef = React.useRef(null);
   var contentHeight = dimensions.contentSize.height;
@@ -61,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,
@@ -84,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
         })
       });
     });
@@ -114,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),
@@ -262,6 +255,14 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
       var _renderedRows$i = renderedRows[i],
         id = _renderedRows$i.id,
         model = _renderedRows$i.model;
+      var rowIndexInPage = ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
+      var index = rowIndexOffset + rowIndexInPage;
+      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
+        index = indexOfRowWithFocusedCell;
+        isRowWithFocusedCellRendered = true;
+      } else if (isRowWithFocusedCellRendered) {
+        index -= 1;
+      }
       var isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
       var baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       var isSelected = void 0;
@@ -272,7 +273,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
       }
       var isFirstVisible = false;
       if (params.position === undefined) {
-        isFirstVisible = i === 0;
+        isFirstVisible = rowIndexInPage === 0;
       }
       var isLastVisible = false;
       if (isLastSection) {
@@ -294,13 +295,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
         var cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      var index = rowIndexOffset + ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
-      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
-      }
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -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 () {
@@ -414,7 +405,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller() {
     },
     getRenderZoneProps: function getRenderZoneProps() {
       return {
-        ref: renderZoneRef,
         role: 'rowgroup'
       };
     },
@@ -641,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.1
+ * @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/internals/utils/propValidation.js

@@ -1,5 +1,5 @@
 export var propValidatorsDataGrid = [function (props) {
-  return props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You can not use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined;
+  return props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined;
 }];
 var warnedOnceMap = new Set();
 var warnOnce = function warnOnce(message) {

package/legacy/joy/joySlots.js

@@ -412,8 +412,8 @@ var joySlots = _extends({}, joyIconSlots, {
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,
-  baseFormControl: JoyFormControl,
-  baseTooltip: JoyTooltip,
+  baseFormControl: JoyFormControl /* FIXME: typing error */,
+  baseTooltip: JoyTooltip /* FIXME: typing error */,
   pagination: Pagination,
   loadingOverlay: LoadingOverlay
 });

package/legacy/locales/daDK.js

@@ -11,8 +11,8 @@ var daDKGrid = {
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Luftig',
   // Columns selector toolbar button text
-  toolbarColumns: 'Kolonne',
-  toolbarColumnsLabel: 'Vælg kolonne',
+  toolbarColumns: 'Kolonner',
+  toolbarColumnsLabel: 'Vælg kolonner',
   // Filters toolbar button text
   toolbarFilters: 'Filtre',
   toolbarFiltersLabel: 'Vis filtre',
@@ -41,12 +41,12 @@ var daDKGrid = {
   filterPanelRemoveAll: 'Fjern alle',
   filterPanelDeleteIconLabel: 'Slet',
   filterPanelLogicOperator: 'Logisk operator',
-  filterPanelOperator: 'Operatorer',
+  filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'Og',
   filterPanelOperatorOr: 'Eller',
-  filterPanelColumns: 'Kolonne',
+  filterPanelColumns: 'Kolonner',
   filterPanelInputLabel: 'Værdi',
-  filterPanelInputPlaceholder: 'Filter værdi',
+  filterPanelInputPlaceholder: 'Filterværdi',
   // Filter operators text
   filterOperatorContains: 'indeholder',
   filterOperatorEquals: 'lig med',
@@ -93,10 +93,10 @@ var daDKGrid = {
   filterValueFalse: 'negativ',
   // Column menu text
   columnMenuLabel: 'Menu',
-  columnMenuShowColumns: 'Vis Kolonner',
+  columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
-  columnMenuFilter: 'Filtre',
-  columnMenuHideColumn: 'Skjul',
+  columnMenuFilter: 'Filtrer',
+  columnMenuHideColumn: 'Skjul kolonne',
   columnMenuUnsort: 'Fjern sortering',
   columnMenuSortAsc: 'Sorter stigende',
   columnMenuSortDesc: 'Sorter faldende',
@@ -132,16 +132,16 @@ var daDKGrid = {
   pinToRight: 'Fastgør til højre',
   unpin: 'Frigiv',
   // Tree Data
-  treeDataGroupingHeaderName: 'Gruppering',
+  treeDataGroupingHeaderName: 'Gruppe',
   treeDataExpand: 'Vis underelementer',
   treeDataCollapse: 'Skjul underelementer',
   // Grouping columns
-  groupingColumnHeaderName: 'Gruppér',
+  groupingColumnHeaderName: 'Gruppe',
   groupColumn: function groupColumn(name) {
     return "Grupp\xE9r efter ".concat(name);
   },
   unGroupColumn: function unGroupColumn(name) {
-    return "Fjern grupp\xE9ring efter ".concat(name);
+    return "Fjern gruppering efter ".concat(name);
   },
   // Master/detail
   detailPanelToggle: 'Udvid/kollaps detaljepanel',
@@ -150,7 +150,7 @@ var daDKGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Omarrangering af rækker',
   // Aggregation
-  aggregationMenuItemHeader: 'Aggregation',
+  aggregationMenuItemHeader: 'Aggregering',
   aggregationFunctionLabelSum: 'sum',
   aggregationFunctionLabelAvg: 'gns',
   aggregationFunctionLabelMin: 'min',