@mui/x-data-grid 7.22.3 → 7.23.1

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.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/joy/joySlots.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slotProps", "variant", "color", "sx"],
+const _excluded = ["slotProps", "variant", "color", "sx", "anchorOrigin"],
   _excluded2 = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
   _excluded3 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
   _excluded4 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
@@ -64,10 +64,15 @@ function convertVariant(variant, defaultVariant = 'plain') {
 const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       color,
-      sx
+      sx,
+      anchorOrigin
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(JoyBadge, _extends({}, props, {
+    anchorOrigin: anchorOrigin?.horizontal && anchorOrigin?.vertical ? anchorOrigin : {
+      vertical: 'top',
+      horizontal: 'right'
+    },
     color: convertColor(color),
     variant: "plain",
     sx: sx,

package/modern/locales/deDE.js

@@ -34,8 +34,7 @@ const deDEGrid = {
   columnsManagementNoColumns: 'Keine Spalten',
   columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
   columnsManagementReset: 'Zurücksetzen',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Löschen',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',

package/modern/locales/esES.js

@@ -34,8 +34,7 @@ const esESGrid = {
   columnsManagementNoColumns: 'Sin columnas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar todas',
   columnsManagementReset: 'Restablecer',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Limpiar',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/modern/locales/ptBR.js

@@ -34,8 +34,7 @@ const ptBRGrid = {
   columnsManagementNoColumns: 'Nenhuma coluna',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
   columnsManagementReset: 'Redefinir',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Limpar',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelRemoveAll: 'Remover todos',

package/modern/locales/ptPT.js

@@ -34,8 +34,7 @@ const ptPTGrid = {
   columnsManagementNoColumns: 'Sem colunas',
   columnsManagementShowHideAllText: 'Mostrar/Ocultar Todas',
   columnsManagementReset: 'Repor',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Limpar',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
   filterPanelRemoveAll: 'Excluir todos',

package/modern/locales/zhCN.js

@@ -34,8 +34,7 @@ const zhCNGrid = {
   columnsManagementNoColumns: '没有列',
   columnsManagementShowHideAllText: '显示/隐藏所有',
   columnsManagementReset: '重置',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
   filterPanelRemoveAll: '清除全部',

package/node/DataGrid/DataGrid.js

@@ -773,5 +773,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.default.bool
+  unstable_rowSpanning: _propTypes.default.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.default.bool
 };

package/node/components/cell/GridCell.js

@@ -21,7 +21,6 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
-var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
@@ -122,16 +121,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 _useGridParamsApi.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;
   }, _useGridSelector.objectShallowCompare);
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
@@ -219,6 +215,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
         padding: 0,
         opacity: 0,
         width: 0,
+        height: 0,
         border: 0
       };
     }
@@ -237,6 +234,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/node/components/toolbar/GridToolbarColumnsButton.js

@@ -44,7 +44,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
       id: columnButtonId,
@@ -53,10 +53,9 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
       "aria-haspopup": "menu",
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {})
-    }, buttonProps, {
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -93,7 +93,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         ref: handleRef,
         size: "small",
@@ -102,10 +102,9 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
         "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__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -51,7 +51,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         ref: handleRef,
         size: "small",
@@ -60,10 +60,9 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
         "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__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -45,6 +45,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
+  const badgeProps = slotProps.badge || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
@@ -102,7 +103,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
       id: filterButtonId,
@@ -111,14 +112,14 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, (0, _extends2.default)({
         badgeContent: activeFilters.length,
-        color: "primary",
+        color: "primary"
+      }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
+      })),
       onClick: toggleFilter
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

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

package/node/constants/dataGridPropsDefaultValues.js

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

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

@@ -291,7 +291,7 @@ 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/node/hooks/features/columnResize/useGridColumnResize.js

@@ -498,7 +498,8 @@ const useGridColumnResize = (apiRef, props) => {
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {
         width: widthByField[column.field],
-        computedWidth: widthByField[column.field]
+        computedWidth: widthByField[column.field],
+        flex: 0
       }));
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);

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

@@ -76,6 +76,7 @@ function useGridDimensions(apiRef, props) {
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => (0, _throttle.throttle)(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
+  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
   const previousSize = React.useRef();
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = (0, _utils.unstable_useEventCallback)(dimensions => {
@@ -248,7 +249,7 @@ 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/node/hooks/features/index.js

@@ -91,6 +91,17 @@ Object.keys(_focus).forEach(function (key) {
     }
   });
 });
+var _listView = require("./listView");
+Object.keys(_listView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _listView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _listView[key];
+    }
+  });
+});
 var _pagination = require("./pagination");
 Object.keys(_pagination).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.gridListColumnSelector = void 0;
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 const gridListColumnSelector = state => state.listViewColumn;
 exports.gridListColumnSelector = gridListColumnSelector;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridListViewSelectors = require("./gridListViewSelectors");
+Object.keys(_gridListViewSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridListViewSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridListViewSelectors[key];
+    }
+  });
+});

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

@@ -257,11 +257,7 @@ const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
@@ -489,10 +485,5 @@ const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };
 exports.useGridRowSelection = useGridRowSelection;

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

@@ -15,8 +15,8 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
-var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridSelector = require("../../utils/useGridSelector");
@@ -59,7 +59,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 */
@@ -97,7 +97,44 @@ const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
-  (0, _useResizeObserver.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.default >= 19) {
+      return () => {
+        mainRef.current = null;
+        observer.disconnect();
+      };
+    }
+    return undefined;
+  }, [apiRef, mainRef]);
 
   /*
    * Scroll context logic
@@ -148,9 +185,13 @@ const useGridVirtualScroller = () => {
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef, dimensions.isReady]);
   const triggerUpdateRenderContext = (0, _utils.unstable_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;
@@ -400,10 +441,6 @@ const useGridVirtualScroller = () => {
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     // TODO a scroll reset should not be necessary
     if (enabledForColumns) {
@@ -439,7 +476,7 @@ const useGridVirtualScroller = () => {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef
+      ref: mainRefCallback
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
@@ -497,7 +534,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false
+    listView: rootProps.unstable_listView ?? false,
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -545,11 +583,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/node/index.js

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