@mui/x-data-grid 6.0.0-alpha.0 → 6.0.0-alpha.2

package/hooks/features/sorting/useGridSorting.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
 import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from './gridSortingSelector';
-import { gridRowIdsSelector, gridRowTreeSelector } from '../rows';
+import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from '../rows';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
 import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { getTreeNodeDescendants } from '../rows/gridRowsUtils';
 export const sortingStateInitializer = (state, props) => {
   var _ref, _props$sortModel, _props$initialState, _props$initialState$s;
 
@@ -82,11 +82,11 @@ export const useGridSorting = (apiRef, props) => {
 
   const applySorting = React.useCallback(() => {
     apiRef.current.setState(state => {
-      if (props.sortingMode === GridFeatureModeConstant.server) {
+      if (props.sortingMode === 'server') {
         logger.debug('Skipping sorting rows as sortingMode = server');
         return _extends({}, state, {
           sorting: _extends({}, state.sorting, {
-            sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
+            sortedRows: getTreeNodeDescendants(gridRowTreeSelector(apiRef), GRID_ROOT_GROUP_ID, false)
           })
         });
       }
@@ -190,38 +190,14 @@ export const useGridSorting = (apiRef, props) => {
   }, [apiRef, props.disableMultipleColumnsSorting]);
   const flatSortingMethod = React.useCallback(params => {
     const rowTree = gridRowTreeSelector(apiRef);
+    const rootGroupNode = rowTree[GRID_ROOT_GROUP_ID];
+    const sortedChildren = params.sortRowList ? params.sortRowList(rootGroupNode.children.map(childId => rowTree[childId])) : [...rootGroupNode.children];
 
-    if (!params.sortRowList) {
-      const bodyRowIds = [];
-      const footerRowIds = [];
-      gridRowIdsSelector(apiRef).forEach(rowId => {
-        if (rowTree[rowId].isPinned) {
-          return;
-        }
-
-        if (rowTree[rowId].position === 'footer') {
-          footerRowIds.push(rowId);
-        } else {
-          bodyRowIds.push(rowId);
-        }
-      });
-      return [...bodyRowIds, ...footerRowIds];
+    if (rootGroupNode.footerId != null) {
+      sortedChildren.push(rootGroupNode.footerId);
     }
 
-    const bodyRows = [];
-    const footerRowIds = [];
-    Object.values(rowTree).forEach(rowNode => {
-      if (rowNode.isPinned) {
-        return;
-      }
-
-      if (rowNode.position === 'footer') {
-        footerRowIds.push(rowNode.id);
-      } else {
-        bodyRows.push(rowNode);
-      }
-    });
-    return [...params.sortRowList(bodyRows), ...footerRowIds];
+    return sortedChildren;
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

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

@@ -45,6 +45,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             alignItems?: import("csstype").Property.AlignItems | undefined;
             alignSelf?: import("csstype").Property.AlignSelf | undefined;
             alignTracks?: import("csstype").Property.AlignTracks | undefined;
+            animationComposition?: import("csstype").Property.AnimationComposition | undefined;
             animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
             animationDirection?: import("csstype").Property.AnimationDirection | undefined;
             animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
@@ -240,6 +241,8 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
             maskSize?: import("csstype").Property.MaskSize<string | number> | undefined;
             maskType?: import("csstype").Property.MaskType | undefined;
+            mathDepth?: import("csstype").Property.MathDepth | undefined;
+            mathShift?: import("csstype").Property.MathShift | undefined;
             mathStyle?: import("csstype").Property.MathStyle | undefined;
             maxBlockSize?: import("csstype").Property.MaxBlockSize<string | number> | undefined;
             maxHeight?: import("csstype").Property.MaxHeight<string | number> | undefined;
@@ -357,7 +360,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | undefined;
             textDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
             textDecorationThickness?: import("csstype").Property.TextDecorationThickness<string | number> | undefined;
-            textDecorationWidth?: import("csstype").Property.TextDecorationThickness<string | number> | undefined;
             textEmphasisColor?: import("csstype").Property.TextEmphasisColor | undefined;
             textEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | undefined;
             textEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | undefined;
@@ -465,7 +467,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             MozBoxSizing?: import("csstype").Property.BoxSizing | undefined;
             MozColumnCount?: import("csstype").Property.ColumnCount | undefined;
             MozColumnFill?: import("csstype").Property.ColumnFill | undefined;
-            MozColumnGap?: import("csstype").Property.ColumnGap<string | number> | undefined;
             MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
             MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
             MozColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<string | number> | undefined;
@@ -499,7 +500,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             MozWindowDragging?: import("csstype").Property.MozWindowDragging | undefined;
             MozWindowShadow?: import("csstype").Property.MozWindowShadow | undefined;
             msAccelerator?: import("csstype").Property.MsAccelerator | undefined;
-            msAlignSelf?: import("csstype").Property.AlignSelf | undefined;
             msBlockProgression?: import("csstype").Property.MsBlockProgression | undefined;
             msContentZoomChaining?: import("csstype").Property.MsContentZoomChaining | undefined;
             msContentZoomLimitMax?: import("csstype").Property.MsContentZoomLimitMax | undefined;
@@ -520,7 +520,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             msHyphenateLimitZone?: import("csstype").Property.MsHyphenateLimitZone<string | number> | undefined;
             msHyphens?: import("csstype").Property.Hyphens | undefined;
             msImeAlign?: import("csstype").Property.MsImeAlign | undefined;
-            msJustifySelf?: import("csstype").Property.JustifySelf | undefined;
             msLineBreak?: import("csstype").Property.LineBreak | undefined;
             msOrder?: import("csstype").Property.Order | undefined;
             msOverflowStyle?: import("csstype").Property.MsOverflowStyle | undefined;
@@ -543,6 +542,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             msScrollbarFaceColor?: import("csstype").Property.MsScrollbarFaceColor | undefined;
             msScrollbarHighlightColor?: import("csstype").Property.MsScrollbarHighlightColor | undefined;
             msScrollbarShadowColor?: import("csstype").Property.MsScrollbarShadowColor | undefined;
+            msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | undefined;
             msTextAutospace?: import("csstype").Property.MsTextAutospace | undefined;
             msTextCombineHorizontal?: import("csstype").Property.TextCombineUpright | undefined;
             msTextOverflow?: import("csstype").Property.TextOverflow | undefined;
@@ -592,7 +592,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             WebkitClipPath?: import("csstype").Property.ClipPath | undefined;
             WebkitColumnCount?: import("csstype").Property.ColumnCount | undefined;
             WebkitColumnFill?: import("csstype").Property.ColumnFill | undefined;
-            WebkitColumnGap?: import("csstype").Property.ColumnGap<string | number> | undefined;
             WebkitColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
             WebkitColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
             WebkitColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<string | number> | undefined;
@@ -721,7 +720,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             scrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
             scrollSnapTypeX?: import("csstype").Property.ScrollSnapTypeX | undefined;
             scrollSnapTypeY?: import("csstype").Property.ScrollSnapTypeY | undefined;
-            scrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | undefined;
             KhtmlBoxAlign?: import("csstype").Property.BoxAlign | undefined;
             KhtmlBoxDirection?: import("csstype").Property.BoxDirection | undefined;
             KhtmlBoxFlex?: import("csstype").Property.BoxFlex | undefined;
@@ -768,7 +766,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
             MozUserInput?: import("csstype").Property.MozUserInput | undefined;
             msImeMode?: import("csstype").Property.ImeMode | undefined;
-            msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | undefined;
             OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
             OAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
             OAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -8,7 +8,6 @@ import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
-import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
@@ -16,7 +15,8 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
+import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
+import { getMinimalContentHeight } from '../rows/gridRowsUtils'; // Uses binary search to avoid looping through all possible positions
 
 import { jsx as _jsx } from "react/jsx-runtime";
 export function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
@@ -69,7 +69,6 @@ export const useGridVirtualScroller = props => {
   } = props;
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -91,16 +90,16 @@ export const useGridVirtualScroller = props => {
     var _currentPage$range, _currentPage$range2;
 
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
-    const lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
-    const lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
-    let allRowsMeasured = lastMeasuredIndex === Infinity;
+    let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
 
-    if ((_currentPage$range2 = currentPage.range) != null && _currentPage$range2.lastRowIndex && !allRowsMeasured) {
+    if ((_currentPage$range = currentPage.range) != null && _currentPage$range.lastRowIndex && !allRowsMeasured) {
       // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
     }
 
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+    const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.firstRowIndex) || 0), 0, rowsMeta.positions.length);
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
       // If all rows were measured (when no row has "auto" as height) or all rows before the offset
       // were measured, then use a binary search because it's faster.
       return binarySearch(offset, rowsMeta.positions);
@@ -110,7 +109,7 @@ export const useGridVirtualScroller = props => {
     // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
 
 
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, (_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex, (_currentPage$range4 = currentPage.range) == null ? void 0 : _currentPage$range4.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
@@ -420,19 +419,14 @@ export const useGridVirtualScroller = props => {
       height,
       minHeight: shouldExtendContent ? '100%' : 'auto'
     };
-
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = 2 * rowHeight; // Give room to show the overlay when there's no row.
-    }
-
     return size;
-  }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
+  }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {
-    contentSize.height = 2 * rowHeight; // Give room to show the overlay when there no rows.
+    contentSize.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
   }
 
   const rootStyle = {};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.0
+/** @license MUI v6.0.0-alpha.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/index.d.ts

@@ -30,7 +30,8 @@ export { useGridEditing as useGridEditing_new, editingStateInitializer as editin
 export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old, } from '../hooks/features/editRows/useGridEditing.old';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
-export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRowsValue, GridPinnedRowsState, } from '../hooks/features/rows/gridRowsState';
+export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRowsValue, GridRowsPartialUpdates, GridRowsPartialUpdateAction, GridTreeDepths, GridRowTreeUpdatedGroupsManager, GridRowTreeUpdateGroupAction, GridPinnedRowsState, } from '../hooks/features/rows/gridRowsInterfaces';
+export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';

package/internals/index.js

@@ -26,6 +26,7 @@ export { useGridEditing as useGridEditing_new, editingStateInitializer as editin
 export { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
+export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
 export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';

package/legacy/DataGrid/useDataGridProps.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT } from '../constants';
-import { GridDensityTypes, GridEditModes, GridFeatureModeConstant } from '../models';
+import { GridDensityTypes, GridEditModes } from '../models';
 var DATA_GRID_FORCED_PROPS = {
   apiRef: undefined,
   disableMultipleColumnsFiltering: true,
@@ -44,7 +44,7 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableVirtualization: false,
   disableIgnoreModificationsIfProcessingProps: false,
   editMode: GridEditModes.Cell,
-  filterMode: GridFeatureModeConstant.client,
+  filterMode: 'client',
   headerHeight: 56,
   hideFooter: false,
   hideFooterPagination: false,
@@ -53,14 +53,14 @@ export var DATA_GRID_PROPS_DEFAULT_VALUES = {
   logger: console,
   logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
   pagination: false,
-  paginationMode: GridFeatureModeConstant.client,
+  paginationMode: 'client',
   rowHeight: 52,
   rowsPerPageOptions: [25, 50, 100],
   rowSpacingType: 'margin',
   showCellRightBorder: false,
   showColumnRightBorder: false,
   sortingOrder: ['asc', 'desc', null],
-  sortingMode: GridFeatureModeConstant.client,
+  sortingMode: 'client',
   throttleRowsMs: 0,
   disableColumnReorder: false,
   disableColumnResize: false,

package/legacy/components/DataGridVirtualScroller.js

@@ -6,7 +6,9 @@ import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
 import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
 import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrollerRenderZone';
 import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import { GridOverlays } from './base/GridOverlays';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
   var className = props.className,
       disableVirtualization = props.disableVirtualization,
@@ -21,14 +23,14 @@ var DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVir
       getRenderZoneProps = _useGridVirtualScroll.getRenderZoneProps,
       getRows = _useGridVirtualScroll.getRows;
 
-  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({
+  return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({
     className: className
   }, getRootProps(other), {
-    children: /*#__PURE__*/_jsx(GridVirtualScrollerContent, _extends({}, getContentProps(), {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(GridVirtualScrollerContent, _extends({}, getContentProps(), {
       children: /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
         children: getRows()
       }))
-    }))
+    }))]
   }));
 });
 export { DataGridVirtualScroller };

package/legacy/components/GridPagination.js

@@ -54,8 +54,7 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
   }
 
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
-    ref: ref // @ts-ignore
-    ,
+    ref: ref,
     component: "div",
     count: paginationState.rowCount,
     page: paginationState.page <= lastPage ? paginationState.page : lastPage,

package/legacy/components/GridRow.js

@@ -7,7 +7,7 @@ var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowH
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses, useForkRef } from '@mui/material';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -20,7 +20,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
 import { randomNumberBetween } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -55,7 +55,7 @@ var EmptyCell = function EmptyCell(_ref) {
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var _apiRef$current$getRo;
 
   var selected = props.selected,
@@ -88,8 +88,9 @@ function GridRow(props) {
   var currentPage = useGridVisibleRows(apiRef, rootProps);
   var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  var handleRef = useForkRef(ref, refProp);
   var ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   var _ref2 = (_apiRef$current$getRo = apiRef.current.getRootDimensions()) != null ? _apiRef$current$getRo : {
@@ -344,6 +345,7 @@ function GridRow(props) {
   }
 
   var randomNumber = randomNumberBetween(10000, 20, 80);
+  var rowType = apiRef.current.getRowNode(rowId).type;
   var cells = [];
 
   for (var i = 0; i < renderedColumns.length; i += 1) {
@@ -355,7 +357,7 @@ function GridRow(props) {
     var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      if (row) {
+      if (rowType !== 'skeletonRow') {
         var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
             colSpan = _cellColSpanInfo$cell.colSpan,
             width = _cellColSpanInfo$cell.width;
@@ -387,7 +389,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -400,8 +402,7 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/components/base/GridBody.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
-import { GridOverlays } from './GridOverlays';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
@@ -55,7 +54,7 @@ function GridBody(props) {
     apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
-    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {
+    children: [/*#__PURE__*/_jsx(ColumnHeadersComponent, {
       ref: columnsContainerRef,
       innerRef: columnHeadersRef
     }), /*#__PURE__*/_jsx(GridAutoSizer, {

package/legacy/components/base/GridOverlays.js

@@ -2,20 +2,57 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var GridOverlayWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.overlayWrapper;
+  }
+})({
+  position: 'sticky',
+  // To stay in place while scrolling
+  top: 0,
+  left: 0,
+  width: 0,
+  // To stay above the content instead of shifting it down
+  height: 0,
+  // To stay above the content instead of shifting it down
+  zIndex: 4 // Should be above pinned columns, pinned rows and detail panel
+
+});
+var GridOverlayWrapperInner = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.overlayWrapperInner;
+  }
+})({});
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['overlayWrapper'],
+    inner: ['overlayWrapperInner']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
 
 function GridOverlayWrapper(props) {
   var _viewportInnerSize$he, _viewportInnerSize$wi;
 
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
 
   var _React$useState = React.useState(function () {
     var _apiRef$current$getRo, _apiRef$current$getRo2;
@@ -37,22 +74,27 @@ function GridOverlayWrapper(props) {
   var height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
 
   if (rootProps.autoHeight && height === 0) {
-    height = 'auto';
+    height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
   }
 
+  var classes = useUtilityClasses(_extends({}, props, {
+    classes: rootProps.classes
+  }));
+
   if (!viewportInnerSize) {
     return null;
   }
 
-  return /*#__PURE__*/_jsx("div", _extends({
-    style: {
-      height: height,
-      width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
-      position: 'absolute',
-      top: totalHeaderHeight,
-      bottom: height === 'auto' ? 0 : undefined
-    }
-  }, props));
+  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
+    className: clsx(classes.root),
+    children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
+      className: clsx(classes.inner),
+      style: {
+        height: height,
+        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+      }
+    }, props))
+  });
 }
 
 export function GridOverlays() {

package/legacy/components/cell/GridBooleanCell.js

@@ -7,6 +7,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { isAutoGeneratedRow } from '../../hooks/features/rows/gridRowsUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -141,7 +142,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 var GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export var renderBooleanCell = function renderBooleanCell(params) {
-  if (params.rowNode.isAutoGenerated) {
+  if (isAutoGeneratedRow(params.rowNode)) {
     return '';
   }
 

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -82,17 +82,12 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     }
   }, [apiRef, props]);
 
-  if (rowNode.position === 'footer') {
+  if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
 
   var isSelectable = apiRef.current.isRowSelectable(id);
   var label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
-
-  if (rowNode.isPinned) {
-    return null;
-  }
-
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,

package/legacy/components/containers/GridOverlay.js

@@ -27,13 +27,8 @@ var GridOverlayRoot = styled('div', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    position: 'absolute',
-    top: 0,
-    zIndex: 4,
-    // should be above pinned columns, pinned rows and detail panel
     width: '100%',
     height: '100%',
-    pointerEvents: 'none',
     display: 'flex',
     alignSelf: 'center',
     alignItems: 'center',

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

@@ -264,7 +264,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   }, [currentOperator]);
   return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
     ref: ref,
-    className: classes.root
+    className: classes.root,
+    "data-id": item.id
   }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -75,8 +75,10 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
         className: classes.root,
         children: activeFilters.map(function (item, index) {
+          var _item$value;
+
           return _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
-            children: "".concat(lookup[item.columnField].headerName || item.columnField, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat(item.value)
+            children: "".concat(lookup[item.columnField].headerName || item.columnField, "\n                  ").concat(getOperatorLabel(item), "\n                  ").concat((_item$value = item.value) != null ? _item$value : '')
           }, index));
         })
       })]

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

@@ -283,7 +283,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
     var columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }