@mui/x-data-grid 8.0.0-alpha.4 → 8.0.0-alpha.6

package/components/toolbar/GridToolbar.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";
 import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
 import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
@@ -11,7 +12,7 @@ import { GridToolbarExport } from "./GridToolbarExport.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+const GridToolbar = forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   const _ref = props,
@@ -27,9 +28,8 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -11,5 +11,5 @@ interface GridToolbarColumnsButtonProps {
         tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarColumnsButton };

package/components/toolbar/GridToolbarColumnsButton.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -38,7 +39,6 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
       id: columnButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
@@ -48,6 +48,7 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
     }, rootProps.slotProps?.baseButton, buttonProps, {
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -11,5 +11,5 @@ interface GridToolbarDensitySelectorProps {
         tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarDensitySelector };

package/components/toolbar/GridToolbarDensitySelector.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -11,7 +11,7 @@ import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -72,12 +72,11 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: option.icon
-    }), option.label]
+    iconStart: option.icon,
+    children: option.label
   }, index));
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
@@ -85,7 +84,6 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
         size: "small",
         startIcon: startIcon,
         "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
@@ -95,6 +93,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         id: densityButtonId,
         onClick: handleDensitySelectorOpen
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarExport.d.ts

@@ -36,5 +36,5 @@ declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): R
 declare namespace GridPrintExportMenuItem {
     var propTypes: any;
 }
-declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps> | React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/components/toolbar/GridToolbarExport.js

@@ -5,6 +5,7 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
@@ -83,7 +84,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   })
 } : void 0;
-const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+const GridToolbarExport = forwardRef(function GridToolbarExport(props, ref) {
   const _ref = props,
     {
       csvOptions = {},

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -11,7 +11,7 @@ interface GridToolbarExportContainerProps {
         tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
+declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<GridToolbarExportContainerProps>> | React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExportContainer };

package/components/toolbar/GridToolbarExportContainer.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+const GridToolbarExportContainer = forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
     children,
     slotProps = {}
@@ -44,7 +45,6 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
         size: "small",
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
         "aria-expanded": open,
@@ -54,6 +54,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         id: exportButtonId,
         onClick: handleMenuOpen
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { BadgeProps } from '@mui/material/Badge';
+import { BadgeProps } from '../../models/gridBaseSlots';
 export interface GridToolbarFilterButtonProps {
     /**
      * The props used for each slot inside.
@@ -13,5 +13,5 @@ export interface GridToolbarFilterButtonProps {
         badge?: Partial<BadgeProps>;
     };
 }
-declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/components/toolbar/GridToolbarFilterButton.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
@@ -31,7 +32,10 @@ const GridToolbarFilterListRoot = styled('ul', {
   margin: theme.spacing(1, 1, 0.5),
   padding: theme.spacing(0, 1)
 }));
-const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
+
+// FIXME(v8:romgrk): override slotProps
+
+const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -97,7 +101,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
       id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
@@ -112,6 +115,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       })),
       onClick: toggleFilter
     }, rootProps.slotProps?.baseButton, buttonProps, {
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/components/toolbar/GridToolbarQuickFilter.js

@@ -8,6 +8,7 @@ import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { getDataGridUtilityClass } from "../../constants/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -31,13 +32,8 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 })(({
   theme
 }) => ({
-  width: 'auto',
-  paddingBottom: theme.spacing(0.5),
-  '& input': {
-    marginLeft: theme.spacing(0.5)
-  },
-  '& .MuiInput-underline:before': {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  [`.${outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.body2.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
@@ -91,7 +87,8 @@ function GridToolbarQuickFilter(props) {
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.slots.baseTextField,
     ownerState: rootProps,
-    variant: "standard",
+    variant: "outlined",
+    size: "small",
     value: searchValue,
     onChange: handleSearchValueChange,
     className: clsx(classes.root, className),
@@ -100,23 +97,30 @@ function GridToolbarQuickFilter(props) {
     type: "search"
   }, other, {
     InputProps: _extends({
-      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
-        fontSize: "small"
-      }),
-      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-        size: "small",
-        sx: [searchValue ? {
-          visibility: 'visible'
-        } : {
-          visibility: 'hidden'
-        }],
-        onClick: handleSearchReset
-      }, rootProps.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+      startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
           fontSize: "small"
         })
-      }))
+      }),
+      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+        position: "end",
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          sx: [searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          }],
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
     }, other.InputProps)
   }, rootProps.slotProps?.baseTextField));
 }

package/components/virtualization/GridMainContainer.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export declare const GridMainContainer: React.ForwardRefExoticComponent<{
+export declare const GridMainContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<{
+    className: string;
+}>> | React.ForwardRefExoticComponent<{
     className: string;
 } & {
     children?: React.ReactNode | undefined;

package/components/virtualization/GridMainContainer.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,16 +22,16 @@ const Element = styled('div', {
   display: 'flex',
   flexDirection: 'column'
 });
-export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const GridMainContainer = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const configuration = useGridConfiguration();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/_jsxs(Element, _extends({
-    ref: ref,
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
-  }, ariaAttributes, {
+  }, ariaAttributes, rootProps.slotProps?.main, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/components/virtualization/GridVirtualScrollbar.d.ts

@@ -3,5 +3,5 @@ type Position = 'vertical' | 'horizontal';
 type GridVirtualScrollbarProps = {
     position: Position;
 };
-declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/components/virtualization/GridVirtualScrollbar.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useOnMount } from "../../hooks/utils/useOnMount.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.js";
@@ -52,7 +53,7 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   },
   bottom: '0px'
 });
-const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const isLocked = React.useRef(false);

package/components/virtualization/GridVirtualScrollerContent.d.ts

@@ -2,5 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
+}> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerContent };

package/components/virtualization/GridVirtualScrollerContent.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,15 +21,14 @@ const VirtualScrollerContentRoot = styled('div', {
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
 })({});
-const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
+const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
-  return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
     ownerState: rootProps,
-    className: clsx(classes.root, props.className)
+    className: clsx(classes.root, props.className),
+    ref: ref
   }));
 });
 export { GridVirtualScrollerContent };

package/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -2,5 +2,7 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
+}> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerRenderZone };

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
@@ -31,7 +32,7 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   // Prevents margin collapsing when using `getRowSpacing`
   flexDirection: 'column'
 });
-const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
@@ -45,12 +46,13 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
     return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps,
     style: {
       transform: `translate3d(0, ${offsetTop}px, 0)`
     }
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 export { GridVirtualScrollerRenderZone };

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -47,7 +47,7 @@ export const useGridColumnHeaders = props => {
   const isRtl = useRtl();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
+  const hasColumnVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
@@ -87,8 +87,15 @@ export const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext,
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    let firstColumnToRender;
+    let lastColumnToRender;
+    if (!rootProps.disableVirtualization && !hasColumnVirtualization) {
+      firstColumnToRender = 0;
+      lastColumnToRender = maxLastColumn;
+    } else {
+      firstColumnToRender = currentContext.firstColumnIndex;
+      lastColumnToRender = currentContext.lastColumnIndex;
+    }
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -4,6 +4,7 @@ export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
     includeOutliers: boolean;
     outliersFactor: number;
     expand: boolean;
+    disableColumnVirtualization: boolean;
 };
 export type GridAutosizeOptions = {
     /**
@@ -30,6 +31,11 @@ export type GridAutosizeOptions = {
      * @default false
      */
     expand?: boolean;
+    /**
+     * If false, column virtualization is not disabled while resizing.
+     * @default true
+     */
+    disableColumnVirtualization?: boolean;
 };
 /**
  * The Resize API interface that is available in the grid `apiRef`.

package/hooks/features/columnResize/gridColumnResizeApi.js

@@ -2,7 +2,8 @@ export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange">) => void;
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -460,6 +460,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -486,8 +487,10 @@ export const useGridColumnResize = (apiRef, props) => {
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
     try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
+      if (!props.disableVirtualization && options.disableColumnVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(false);
+        await columnVirtualizationDisabled();
+      }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {
         width: widthByField[column.field],
@@ -519,10 +522,12 @@ export const useGridColumnResize = (apiRef, props) => {
         }
       });
     } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
+      if (!props.disableVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(true);
+      }
       isAutosizingRef.current = false;
     }
-  }, [apiRef, columnVirtualizationDisabled]);
+  }, [apiRef, columnVirtualizationDisabled, props.disableVirtualization]);
 
   /**
    * EFFECTS

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

@@ -53,4 +53,4 @@ export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender,
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView'>): number;
+export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'unstable_listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -319,6 +319,7 @@ export function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
-  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
 }