@mui/x-data-grid 7.22.3 → 7.23.0

package/models/colDef/gridColDef.d.ts

@@ -36,43 +36,43 @@ export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = a
  */
 export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> {
     /**
-     * The column identifier. It's used to map with [[GridRowModel]] values.
+     * The unique identifier of the column. Used to map with [[GridRowModel]] values.
      */
     field: string;
     /**
-     * The title of the column rendered in the column header cell.
+     * The title displayed in the column header cell.
      */
     headerName?: string;
     /**
-     * The description of the column rendered as tooltip if the column header name is not fully displayed.
+     * The tooltip text shown when the column header name is truncated.
      */
     description?: string;
     /**
-     * Set the width of the column.
+     * The width of the column in pixels.
      * @default 100
      */
     width?: number;
     /**
-     * If set, it indicates that a column has fluid width. Range [0, ∞).
+     * The flex grow factor of the column. Must be a positive number.
      */
     flex?: number;
     /**
-     * Sets the minimum width of a column.
+     * The minimum width of the column in pixels.
      * @default 50
      */
     minWidth?: number;
     /**
-     * Sets the maximum width of a column.
+     * The maximum width of the column in pixels.
      * @default Infinity
      */
     maxWidth?: number;
     /**
-     * If `false`, removes the buttons for hiding this column.
+     * If `false`, removes the option to hide this column.
      * @default true
      */
     hideable?: boolean;
     /**
-     * If `true`, the column is sortable.
+     * If `false`, disables sorting for this column.
      * @default true
      */
     sortable?: boolean;
@@ -81,7 +81,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     sortingOrder?: readonly GridSortDirection[];
     /**
-     * If `true`, the column is resizable.
+     * If `false`, disables resizing for this column.
      * @default true
      */
     resizable?: boolean;
@@ -109,7 +109,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     sortComparator?: GridComparatorFn<V>;
     /**
-     * Allows to use a different comparator function depending on the sort direction.
+     * Provide an alternative comparator function for sorting.
      * Takes precedence over `sortComparator`.
      * @param {GridSortDirection} sortDirection The direction of the sort.
      * @returns {GridComparatorFn<V>} The comparator function to use.
@@ -122,25 +122,25 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     type?: GridColType;
     /**
-     * Allows to align the column values in cells.
+     * Align cell content.
      */
     align?: GridAlignment;
     /**
-     * Function that allows to get a specific data instead of field to render in the cell.
+     * Function that returns specific data to render in the cell instead of using the field value.
      */
     valueGetter?: GridValueGetter<R, V, F>;
     /**
-     * Function that allows to provide a specific value to be used in row spanning.
+     * Function that returns a specific value to be used in row spanning.
      */
     rowSpanValueGetter?: GridValueGetter<R, V, F>;
     /**
-     * Function that allows to customize how the entered value is stored in the row.
-     * It only works with cell/row editing.
+     * Function that customizes how the entered value is stored in the row.
+     * Only works with cell/row editing.
      * @returns {R} The row with the updated field.
      */
     valueSetter?: GridValueSetter<R, V, F>;
     /**
-     * Function that allows to apply a formatter before rendering its value.
+     * Formats the cell value before rendering.
      */
     valueFormatter?: GridValueFormatter<R, V, F>;
     /**
@@ -149,7 +149,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     valueParser?: GridValueParser<R, V, F>;
     /**
-     * Class name that will be added in cells for that column.
+     * Class name added to cells in this column.
      */
     cellClassName?: GridCellClassNamePropType<R, V>;
     /**
@@ -159,38 +159,38 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      */
     display?: 'text' | 'flex';
     /**
-     * Allows to override the component rendered as cell for this column.
+     * Override the component rendered as cell for this column.
      * @template R, V, F
      * @param {GridRenderCellParams<R, V, F>} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
     renderCell?: (params: GridRenderCellParams<R, V, F>) => React.ReactNode;
     /**
-     * Allows to override the component rendered in edit cell mode for this column.
+     * Override the component rendered in edit cell mode for this column.
      * @param {GridRenderEditCellParams} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
     renderEditCell?: (params: GridRenderEditCellParams<R, V, F>) => React.ReactNode;
     /**
      * Callback fired when the edit props of the cell changes.
-     * It allows to process the props that saved into the state.
+     * Processes the props before being saved into the state.
      * @param {GridPreProcessEditCellProps} params Object containing parameters of the cell being edited.
      * @returns {GridEditCellProps | Promise<GridEditCellProps>} The new edit cell props.
      */
     preProcessEditCellProps?: (params: GridPreProcessEditCellProps) => GridEditCellProps | Promise<GridEditCellProps>;
     /**
-     * Class name that will be added in the column header cell.
+     * Class name added to the column header cell.
      */
     headerClassName?: GridColumnHeaderClassNamePropType;
     /**
-     * Allows to render a component in the column header cell.
+     * Override the component rendered in the column header cell.
      * @template R, V, F
      * @param {GridColumnHeaderParams<R, V, F>} params Object containing parameters for the renderer.
      * @returns {React.ReactNode} The element to be rendered.
      */
     renderHeader?: (params: GridColumnHeaderParams<R, V, F>) => React.ReactNode;
     /**
-     * Header cell element alignment.
+     * Align column header content.
      */
     headerAlign?: GridAlignment;
     /**

package/models/gridDataSource.d.ts

@@ -34,7 +34,7 @@ export interface GridGetRowsResponse {
     rowCount?: number;
     /**
      * Additional `pageInfo` for advanced use-cases.
-     * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server
+     * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server.
      */
     pageInfo?: {
         hasNextPage?: boolean;
@@ -44,25 +44,25 @@ export interface GridGetRowsResponse {
 export interface GridDataSource {
     /**
      * This method will be called when the grid needs to fetch some rows.
-     * @param {GridGetRowsParams} params The parameters required to fetch the rows
-     * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse]
+     * @param {GridGetRowsParams} params The parameters required to fetch the rows.
+     * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse].
      */
     getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
     /**
      * This method will be called when the user updates a row [Not yet implemented].
-     * @param {GridRowModel} updatedRow The updated row
-     * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache
+     * @param {GridRowModel} updatedRow The updated row.
+     * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache.
      */
     updateRow?(updatedRow: GridRowModel): Promise<any>;
     /**
      * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data.
-     * @param {GridRowModel} row The row to get the group key of
-     * @returns {string} The group key for the row
+     * @param {GridRowModel} row The row to get the group key of.
+     * @returns {string} The group key for the row.
      */
     getGroupKey?: (row: GridRowModel) => string;
     /**
      * Used to determine the number of children a row has on server.
-     * @param {GridRowModel} row The row to check the number of children
+     * @param {GridRowModel} row The row to check the number of children.
      * @returns {number} The number of children the row has.
      * If the children count is not available for some reason, but there are some children, `getChildrenCount` should return `-1`.
      */
@@ -71,14 +71,14 @@ export interface GridDataSource {
 export interface GridDataSourceCache {
     /**
      * Set the cache entry for the given key.
-     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
-     * @param {GridGetRowsResponse} value The value to be stored in the cache
+     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`.
+     * @param {GridGetRowsResponse} value The value to be stored in the cache.
      */
     set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
     /**
      * Get the cache entry for the given key.
-     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
-     * @returns {GridGetRowsResponse} The value stored in the cache
+     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`.
+     * @returns {GridGetRowsResponse} The value stored in the cache.
      */
     get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
     /**

package/models/props/DataGridProps.d.ts

@@ -369,6 +369,14 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default false
      */
     unstable_rowSpanning: boolean;
+    /**
+     * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+     * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+     * For datasets with a large number of columns, this can cause performance issues.
+     * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+     * @default false
+     */
+    virtualizeColumnsWithAutoRowHeight: boolean;
 }
 /**
  * The Data Grid props with no default value.

package/modern/DataGrid/DataGrid.js

@@ -766,5 +766,13 @@ DataGridRaw.propTypes = {
    * If `true`, the Data Grid will auto span the cells over the rows having the same value.
    * @default false
    */
-  unstable_rowSpanning: PropTypes.bool
+  unstable_rowSpanning: PropTypes.bool,
+  /**
+   * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
+   * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
+   * For datasets with a large number of columns, this can cause performance issues.
+   * The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
+   * @default false
+   */
+  virtualizeColumnsWithAutoRowHeight: PropTypes.bool
 };

package/modern/components/cell/GridCell.js

@@ -15,7 +15,6 @@ import { useGridSelector, objectShallowCompare } from "../../hooks/utils/useGrid
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
-import { MissingRowIdError } from "../../hooks/features/rows/useGridParamsApi.js";
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
@@ -114,16 +113,13 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
     // associated with `rowId`/`fieldId`, but this selector runs after the state has been
     // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    try {
-      const result = apiRef.current.getCellParams(rowId, field);
-      result.api = apiRef.current;
-      return result;
-    } catch (error) {
-      if (error instanceof MissingRowIdError) {
-        return EMPTY_CELL_PARAMS;
-      }
-      throw error;
+    const row = apiRef.current.getRow(rowId);
+    if (!row) {
+      return EMPTY_CELL_PARAMS;
     }
+    const result = apiRef.current.getCellParams(rowId, field);
+    result.api = apiRef.current;
+    return result;
   }, objectShallowCompare);
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
@@ -211,6 +207,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
         padding: 0,
         opacity: 0,
         width: 0,
+        height: 0,
         border: 0
       };
     }
@@ -229,6 +226,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
       cellStyle.zIndex = 5;
+      if (isLeftPinned || isRightPinned) {
+        cellStyle.zIndex = 6;
+      }
     }
     return cellStyle;
   }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -36,7 +36,7 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: columnButtonId,
@@ -45,10 +45,9 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
-    }, buttonProps, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -85,7 +85,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -94,10 +94,9 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-haspopup": "menu",
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
-        id: densityButtonId
-      }, buttonProps, {
+        id: densityButtonId,
         onClick: handleDensitySelectorOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -43,7 +43,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -52,10 +52,9 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId
-      }, buttonProps, {
+        id: exportButtonId,
         onClick: handleMenuOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -37,6 +37,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
+  const badgeProps = slotProps.badge || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -94,7 +95,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -103,14 +104,14 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, _extends({
         badgeContent: activeFilters.length,
-        color: "primary",
+        color: "primary"
+      }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
+      })),
       onClick: toggleFilter
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -78,6 +78,7 @@ function GridToolbarQuickFilter(props) {
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
   const handleSearchValueChange = React.useCallback(event => {
     const newSearchValue = event.target.value;
     setSearchValue(newSearchValue);

package/modern/constants/dataGridPropsDefaultValues.js

@@ -56,5 +56,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  unstable_rowSpanning: false,
+  virtualizeColumnsWithAutoRowHeight: false
 };

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

@@ -283,7 +283,7 @@ export const useGridColumnHeaders = props => {
         fields: headerInfo.fields,
         colIndex: headerInfo.colIndex,
         depth: depth,
-        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
         height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -66,6 +66,7 @@ export function useGridDimensions(apiRef, props) {
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
+  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {
@@ -238,7 +239,7 @@ export function useGridDimensions(apiRef, props) {
     rootDimensionsRef.current = size;
 
     // jsdom has no layout capabilities
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;

package/modern/hooks/features/index.js

@@ -7,6 +7,7 @@ export * from "./density/index.js";
 export * from "./editing/index.js";
 export * from "./filter/index.js";
 export * from "./focus/index.js";
+export * from "./listView/index.js";
 export * from "./pagination/index.js";
 export * from "./preferencesPanel/index.js";
 export * from "./rows/index.js";

package/modern/hooks/features/listView/gridListViewSelectors.js

@@ -1,4 +1,6 @@
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 export const gridListColumnSelector = state => state.listViewColumn;

package/modern/hooks/features/listView/index.js

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.js";

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -248,11 +248,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -480,9 +476,4 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -4,8 +4,8 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
-import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useRtl } from '@mui/system/RtlProvider';
+import reactMajor from '@mui/x-internals/reactMajor';
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
@@ -48,7 +48,7 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
 let isJSDOM = false;
 try {
   if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom/.test(window.navigator.userAgent);
+    isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
   }
 } catch (_) {
   /* ignore */
@@ -86,7 +86,44 @@ export const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
-  useResizeObserver(mainRef, () => apiRef.current.resize());
+  const mainRefCallback = React.useCallback(node => {
+    mainRef.current = node;
+    if (!node) {
+      return undefined;
+    }
+    const initialRect = node.getBoundingClientRect();
+    let lastSize = {
+      width: initialRect.width,
+      height: initialRect.height
+    };
+    apiRef.current.publishEvent('resize', lastSize);
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const newSize = {
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      };
+      if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
+        return;
+      }
+      apiRef.current.publishEvent('resize', newSize);
+      lastSize = newSize;
+    });
+    observer.observe(node);
+    if (reactMajor >= 19) {
+      return () => {
+        mainRef.current = null;
+        observer.disconnect();
+      };
+    }
+    return undefined;
+  }, [apiRef, mainRef]);
 
   /*
    * Scroll context logic
@@ -137,9 +174,13 @@ export const useGridVirtualScroller = () => {
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef, dimensions.isReady]);
   const triggerUpdateRenderContext = useEventCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) {
+      return undefined;
+    }
     const newScroll = {
-      top: scrollerRef.current.scrollTop,
-      left: scrollerRef.current.scrollLeft
+      top: scroller.scrollTop,
+      left: scroller.scrollLeft
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -389,10 +430,6 @@ export const useGridVirtualScroller = () => {
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
-  useEnhancedEffect(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
   useEnhancedEffect(() => {
     // TODO a scroll reset should not be necessary
     if (enabledForColumns) {
@@ -428,7 +465,7 @@ export const useGridVirtualScroller = () => {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef
+      ref: mainRefCallback
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
@@ -485,7 +522,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false
+    listView: rootProps.unstable_listView ?? false,
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -533,11 +571,13 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
       positions: inputs.rowsMeta.positions,
       lastSize: inputs.lastRowHeight
     });
-    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-      const row = inputs.rows[i];
-      hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+    if (!inputs.virtualizeColumnsWithAutoRowHeight) {
+      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+        const row = inputs.rows[i];
+        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+      }
     }
-    if (!hasRowWithAutoHeight) {
+    if (!hasRowWithAutoHeight || inputs.virtualizeColumnsWithAutoRowHeight) {
       firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
         atStart: true,
         lastPosition: inputs.columnsTotalWidth

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.3
+ * @mui/x-data-grid v7.23.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the