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

package/components/virtualization/GridTopContainer.js

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

package/components/virtualization/GridVirtualScroller.js

@@ -85,9 +85,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
-    }, getScrollbarVerticalProps())), /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));

package/components/virtualization/GridVirtualScrollerRenderZone.js

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

package/constants/gridClasses.d.ts

@@ -43,6 +43,10 @@ export interface GridClasses {
      * Styles applied to the cell element if the cell is in edit mode.
      */
     'cell--editing': string;
+    /**
+     * Styles applied to the cell element in flex display mode.
+     */
+    'cell--flex': string;
     /**
      * Styles applied to the cell element if `align="center"`.
      */
@@ -55,10 +59,6 @@ export interface GridClasses {
      * Styles applied to the cell element if `align="right"`.
      */
     'cell--textRight': string;
-    /**
-     * Styles applied to the cell element if the cell has a custom renderer.
-     */
-    'cell--withRenderer': string;
     /**
      * Styles applied to the cell element if it is at the top edge of a cell selection range.
      */
@@ -91,10 +91,6 @@ export interface GridClasses {
      * Styles applied to the cell element.
      */
     cell: string;
-    /**
-     * Styles applied to the element that wraps the cell content.
-     */
-    cellContent: string;
     /**
      * Styles applied to the cell checkbox element.
      */
@@ -529,6 +525,26 @@ export interface GridClasses {
      * Styles applied to the horizontal scrollbar.
      */
     'scrollbar--vertical': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell.
+     */
+    scrollbarFiller: string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell, in header position.
+     */
+    'scrollbarFiller--header': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell, with a border top.
+     */
+    'scrollbarFiller--borderTop': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell.
+     */
+    'scrollbarFiller--pinnedRight': string;
     /**
      * Styles applied to the footer selected row count element.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const 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']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', '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', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', '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/hooks/features/clipboard/useGridClipboard.js

@@ -54,7 +54,7 @@ export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
-    if (!((event.ctrlKey || event.metaKey) && event.key === 'c')) {
+    if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
       return;
     }
 

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,23 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } 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 { gridOffsetsSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SpaceFiller = styled('div')({
   /* GridRootStyles conflict */
-  '&&': {
+  '&&&': {
     padding: 0,
     width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
   }
@@ -49,14 +50,16 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const theme = useTheme();
   const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
-  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -88,8 +91,8 @@ export const useGridColumnHeaders = props => {
   const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = (params == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
     const isNotPinned = (params == null ? void 0 : params.position) === undefined;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
-    const leftOffsetWidth = offsets.left - leftOverflow;
+    const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -69,3 +69,9 @@ export declare const gridFilterableColumnDefinitionsSelector: import("../../../u
  * @category Columns
  */
 export declare const gridFilterableColumnLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnLookup>;
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export declare const gridHasColSpanSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;

package/hooks/features/columns/gridColumnsSelector.js

@@ -135,4 +135,11 @@ export const gridFilterableColumnLookupSelector = createSelectorMemoized(gridCol
     acc[col.field] = col;
   }
   return acc;
-}, {}));
+}, {}));
+
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export const gridHasColSpanSelector = createSelectorMemoized(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));

package/hooks/features/columns/useGridColumns.js

@@ -43,9 +43,11 @@ export function useGridColumns(apiRef, props) {
     changeEvent: 'columnVisibilityModelChange'
   });
   const setGridColumnsState = React.useCallback(columnsState => {
+    var _apiRef$current$updat, _apiRef$current;
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
     apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
@@ -66,6 +68,7 @@ export function useGridColumns(apiRef, props) {
   const setColumnVisibilityModel = React.useCallback(model => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     if (currentModel !== model) {
+      var _apiRef$current$updat2, _apiRef$current2;
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
@@ -75,6 +78,7 @@ export function useGridColumns(apiRef, props) {
           keepOnlyColumnsToUpsert: false
         })
       }));
+      (_apiRef$current$updat2 = (_apiRef$current2 = apiRef.current).updateRenderContext) == null || _apiRef$current$updat2.call(_apiRef$current2);
       apiRef.current.forceUpdate();
     }
   }, [apiRef]);

package/hooks/features/editing/useGridCellEditing.js

@@ -9,7 +9,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
@@ -99,12 +99,11 @@ export const useGridCellEditing = (apiRef, props) => {
       }
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if (isPasteShortcut(event)) {
         reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Delete on Windows, Backspace on macOS
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridCellEditStartReasons.deleteKeyDown;
       }
       if (reason) {

package/hooks/features/editing/useGridRowEditing.js

@@ -9,7 +9,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey } from '../../../utils/keyboardUtils';
+import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef(null);
+  const focusTimeout = React.useRef();
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
@@ -77,7 +77,6 @@ export const useGridRowEditing = (apiRef, props) => {
     nextFocusedCell.current = null;
     focusTimeout.current = setTimeout(() => {
       var _nextFocusedCell$curr;
-      focusTimeout.current = null;
       if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {
@@ -160,12 +159,11 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       if (isPrintableKey(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
-      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+      } else if (isPasteShortcut(event)) {
         reason = GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridRowEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete' || event.key === 'Backspace') {
-        // Delete on Windows, Backspace on macOS
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridRowEditStartReasons.deleteKeyDown;
       }
       if (reason) {

package/hooks/features/filter/useGridFilter.js

@@ -107,7 +107,7 @@ export const useGridFilter = (apiRef, props) => {
     const filterModel = gridFilterModelSelector(apiRef);
     const existingItems = [...filterModel.items];
     items.forEach(item => {
-      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+      const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
       if (itemIndex === -1) {
         existingItems.push(item);
       } else {
@@ -115,7 +115,7 @@ export const useGridFilter = (apiRef, props) => {
       }
     });
     apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items
+      items: existingItems
     }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {

package/hooks/features/rows/useGridRows.js

@@ -266,13 +266,16 @@ export const useGridRows = (apiRef, props) => {
     const dataRowIdToIdLookup = _extends({}, gridRowsDataRowIdToIdLookupSelector(apiRef));
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
+    const seenIds = new Set();
     for (let i = 0; i < newRows.length; i += 1) {
       const rowModel = newRows[i];
       const rowId = getRowIdFromRowModel(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
-      const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
-      delete dataRowIdToModelLookup[replacedRowId];
-      delete dataRowIdToIdLookup[replacedRowId];
-      delete tree[replacedRowId];
+      const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
+      if (!seenIds.has(removedRowId)) {
+        delete dataRowIdToModelLookup[removedRowId];
+        delete dataRowIdToIdLookup[removedRowId];
+        delete tree[removedRowId];
+      }
       const rowTreeNodeConfig = {
         id: rowId,
         depth: 0,
@@ -283,6 +286,7 @@ export const useGridRows = (apiRef, props) => {
       dataRowIdToModelLookup[rowId] = rowModel;
       dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
+      seenIds.add(rowId);
     }
     tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
       children: rootGroupChildren

package/hooks/features/rows/useGridRowsMeta.js

@@ -107,14 +107,9 @@ export const useGridRowsMeta = (apiRef, props) => {
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
       }
-      const initialHeights = {};
-      /* eslint-disable-next-line no-restricted-syntax */
-      for (const key in sizes) {
-        if (/^base[A-Z]/.test(key)) {
-          initialHeights[key] = sizes[key];
-        }
-      }
-      initialHeights.baseCenter = baseRowHeight;
+      const initialHeights = {
+        baseCenter: baseRowHeight
+      };
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
@@ -133,19 +128,16 @@ export const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
-      let maximumBaseSize = 0;
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
       /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
-        if (/^base[A-Z]/.test(key)) {
-          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
-        } else {
+        if (key !== 'baseCenter') {
           otherSizes += value;
         }
       }
-      return acc + maximumBaseSize + otherSizes;
+      return acc + processedSizes.baseCenter + otherSizes;
     }, 0);
     pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null || _pinnedRows$top.forEach(row => {
       calculateRowProcessedSizes(row);

package/hooks/features/sorting/gridSortingUtils.js

@@ -28,7 +28,15 @@ const parseSortItem = (sortItem, apiRef) => {
   if (!column || sortItem.sort === null) {
     return null;
   }
-  const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  let comparator;
+  if (column.getSortComparator) {
+    comparator = column.getSortComparator(sortItem.sort);
+  } else {
+    comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  }
+  if (!comparator) {
+    return null;
+  }
   const getSortCellParams = id => ({
     id,
     field: column.field,

package/hooks/features/sorting/useGridSorting.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -214,7 +213,7 @@ export const useGridSorting = (apiRef, props) => {
       return;
     }
     // Ctrl + Enter opens the column menu
-    if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
+    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn, props.disableColumnSorting]);

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

@@ -21,15 +21,6 @@ export declare const gridVirtualizationColumnEnabledSelector: import("../../../u
  * @ignore - do not document.
  */
 export declare const gridRenderContextSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRenderContext>;
-/**
- * Get the offsets
- * @category Virtualization
- * @ignore - do not document.
- */
-export declare const gridOffsetsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
-    top: number;
-    left: number;
-}>;
 /**
  * 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/hooks/features/virtualization/gridVirtualizationSelectors.js

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

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Theme } from '@mui/material/styles';
 import { GridPinnedRowsPosition } from '../rows/gridRowsInterfaces';
 import { GridRenderContext, GridRowEntry, GridRowId } from '../../../models';
 export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
@@ -9,6 +10,7 @@ export declare const useGridVirtualScroller: () => {
     getRows: (params?: {
         rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
         position?: keyof import("../rows/gridRowsInterfaces").GridPinnedRowsState | undefined;
+        renderContext?: GridRenderContext | undefined;
     }) => React.ReactNode[];
     getContainerProps: () => {
         ref: React.RefObject<HTMLDivElement>;
@@ -39,3 +41,4 @@ export declare const useGridVirtualScroller: () => {
     };
 };
 export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridRenderContext, direction: Theme['direction'], pinnedLeftLength: number): number;