@mui/x-data-grid 5.10.0 → 5.12.0

package/hooks/features/rows/useGridRowsMeta.js

@@ -21,39 +21,76 @@ export const rowsMetaStateInitializer = state => _extends({}, state, {
 
 export const useGridRowsMeta = (apiRef, props) => {
   const {
-    getRowHeight,
-    getRowSpacing
+    getRowHeight: getRowHeightProp,
+    getRowSpacing,
+    getEstimatedRowHeight
   } = props;
-  const rowsHeightLookup = React.useRef({});
-  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  const rowsHeightLookup = React.useRef({}); // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+  const lastMeasuredRowIndex = React.useRef(-1);
+  const hasRowWithAutoHeight = React.useRef(false);
+  const rowHeightFromDensity = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
+    hasRowWithAutoHeight.current = false;
     apiRef.current.setState(state => {
-      const positions = [];
       const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
-      const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
+      const positions = [];
       const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
         positions.push(acc);
-        let baseRowHeight;
-        const isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
+
+        if (!rowsHeightLookup.current[row.id]) {
+          rowsHeightLookup.current[row.id] = {
+            sizes: {
+              base: rowHeightFromDensity
+            },
+            isResized: false,
+            autoHeight: false,
+            needsFirstMeasurement: true // Assume all rows will need to be measured by default
+
+          };
+        }
+
+        const {
+          isResized,
+          needsFirstMeasurement,
+          sizes
+        } = rowsHeightLookup.current[row.id];
+        let baseRowHeight = rowHeightFromDensity;
+        const existingBaseRowHeight = sizes.base;
 
         if (isResized) {
-          // do not recalculate resized row height and use the value from the lookup
-          baseRowHeight = rowsHeightLookup.current[row.id].value;
-        } else {
-          baseRowHeight = currentRowHeight;
+          // Do not recalculate resized row height and use the value from the lookup
+          baseRowHeight = existingBaseRowHeight;
+        } else if (getRowHeightProp) {
+          const rowHeightFromUser = getRowHeightProp(_extends({}, row, {
+            densityFactor
+          }));
 
-          if (getRowHeight) {
-            var _getRowHeight;
+          if (rowHeightFromUser === 'auto') {
+            if (needsFirstMeasurement) {
+              const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
+                densityFactor
+              })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
 
+              baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeightFromDensity;
+            } else {
+              baseRowHeight = existingBaseRowHeight;
+            }
+
+            hasRowWithAutoHeight.current = true;
+            rowsHeightLookup.current[row.id].autoHeight = true;
+          } else {
             // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = (_getRowHeight = getRowHeight(_extends({}, row, {
-              densityFactor
-            }))) != null ? _getRowHeight : currentRowHeight;
+            baseRowHeight = rowHeightFromUser != null ? rowHeightFromUser : rowHeightFromDensity;
+            rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
+            rowsHeightLookup.current[row.id].autoHeight = false;
           }
+        } else {
+          rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
         } // We use an object to make simple to check if a height is already added or not
 
 
@@ -74,13 +111,9 @@ export const useGridRowsMeta = (apiRef, props) => {
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
         }
 
-        const sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
-        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
-        rowsHeightLookup.current[row.id] = {
-          value: baseRowHeight,
-          sizes,
-          isResized
-        };
+        const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
+        rowsHeightLookup.current[row.id].sizes = processedSizes;
+        const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
         return acc + finalRowHeight;
       }, 0);
       return _extends({}, state, {
@@ -90,41 +123,72 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
-  const getTargetRowHeight = rowId => {
-    var _rowsHeightLookup$cur;
+    if (!hasRowWithAutoHeight.current) {
+      // No row has height=auto, so all rows are already measured
+      lastMeasuredRowIndex.current = Infinity;
+    }
 
-    return ((_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.value) || rowHeight;
-  };
+    apiRef.current.forceUpdate();
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  const getRowHeight = React.useCallback(rowId => {
+    const height = rowsHeightLookup.current[rowId];
+    return height ? height.sizes.base : rowHeightFromDensity;
+  }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => {
-    var _rowsHeightLookup$cur2;
+    var _rowsHeightLookup$cur;
 
-    return (_rowsHeightLookup$cur2 = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur2.sizes;
+    return (_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.sizes;
   };
 
   const setRowHeight = React.useCallback((id, height) => {
-    rowsHeightLookup.current[id] = {
-      value: height,
-      isResized: true,
-      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
-        base: height
-      })
-    };
+    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].isResized = true;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
-  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, [hydrateRowsMeta]);
+  const storeMeasuredRowHeight = React.useCallback((id, height) => {
+    if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
+      return;
+    } // Only trigger hydration if the value is different, otherwise we trigger a loop
+
+
+    const needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
+    rowsHeightLookup.current[id].sizes.base = height;
+
+    if (needsHydration) {
+      hydrateRowsMeta();
+    }
+  }, [hydrateRowsMeta]);
+  const rowHasAutoHeight = React.useCallback(id => {
+    var _rowsHeightLookup$cur2;
+
+    return ((_rowsHeightLookup$cur2 = rowsHeightLookup.current[id]) == null ? void 0 : _rowsHeightLookup$cur2.autoHeight) || false;
+  }, []);
+  const getLastMeasuredRowIndex = React.useCallback(() => {
+    return lastMeasuredRowIndex.current;
+  }, []);
+  const setLastMeasuredRowIndex = React.useCallback(index => {
+    if (hasRowWithAutoHeight.current) {
+      lastMeasuredRowIndex.current = index;
+    }
+  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
 
   React.useEffect(() => {
     hydrateRowsMeta();
-  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  }, [rowHeightFromDensity, filterState, paginationState, sortingState, hydrateRowsMeta]);
   useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
-    unstable_getRowHeight: getTargetRowHeight,
+    unstable_getLastMeasuredRowIndex: getLastMeasuredRowIndex,
+    unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,
+    unstable_rowHasAutoHeight: rowHasAutoHeight,
+    unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
-    unstable_setRowHeight: setRowHeight
+    unstable_setRowHeight: setRowHeight,
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

package/hooks/features/rows/useGridRowsPreProcessors.js

@@ -3,6 +3,7 @@ import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../c
 const flatRowTreeCreationMethod = ({
   ids,
   idRowsLookup,
+  idToIdLookup,
   previousTree
 }) => {
   const tree = {};
@@ -28,6 +29,7 @@ const flatRowTreeCreationMethod = ({
     tree,
     treeDepth: 1,
     idRowsLookup,
+    idToIdLookup,
     ids
   };
 };

package/hooks/features/scroll/useGridScroll.js

@@ -16,7 +16,12 @@ function scrollIntoView(dimensions) {
     offsetHeight,
     offsetTop
   } = dimensions;
-  const elementBottom = offsetTop + offsetHeight;
+  const elementBottom = offsetTop + offsetHeight; // Always scroll to top when cell is higher than viewport to avoid scroll jump
+  // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
+
+  if (offsetHeight > clientHeight) {
+    return offsetTop;
+  }
 
   if (elementBottom - clientHeight > scrollTop) {
     return elementBottom - clientHeight;

package/hooks/features/selection/useGridSelection.d.ts

@@ -9,4 +9,4 @@ export declare const selectionStateInitializer: GridStateInitializer<Pick<DataGr
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridSelection: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'selectionModel' | 'onSelectionModelChange' | 'disableMultipleSelection' | 'disableSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes'>) => void;
+export declare const useGridSelection: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'selectionModel' | 'onSelectionModelChange' | 'disableMultipleSelection' | 'disableSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes' | 'keepNonExistentRowsSelected'>) => void;

package/hooks/features/selection/useGridSelection.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -56,7 +55,7 @@ export const useGridSelection = (apiRef, props) => {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: gridSelectionStateSelector,
-    changeEvent: GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   const {
     checkboxSelection,
@@ -198,6 +197,10 @@ export const useGridSelection = (apiRef, props) => {
    */
 
   const removeOutdatedSelection = React.useCallback(() => {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     const currentSelection = gridSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -214,12 +217,12 @@ export const useGridSelection = (apiRef, props) => {
     if (hasChanged) {
       apiRef.current.setSelectionModel(Object.values(selectionLookup));
     }
-  }, [apiRef]);
+  }, [apiRef, props.keepNonExistentRowsSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey; // multiple selection is only allowed if:
     // - it is a checkboxSelection
     // - it is a keyboard selection
-    // - CTRL is pressed
+    // - Ctrl is pressed
 
     const isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
     const resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -349,12 +352,12 @@ export const useGridSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  useGridApiEventHandler(apiRef, GridEvents.sortedRowsSet, removeOutdatedSelection);
-  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
-  useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventSelectionOnShift);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', removeOutdatedSelection);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', handleRowSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'cellMouseDown', preventSelectionOnShift);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   /**
    * EFFECTS
    */

package/hooks/features/sorting/useGridSorting.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -36,7 +35,7 @@ export const useGridSorting = (apiRef, props) => {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: gridSortModelSelector,
-    changeEvent: GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   const upsertSortModel = React.useCallback((field, sortItem) => {
     const sortModel = gridSortModelSelector(apiRef);
@@ -101,7 +100,7 @@ export const useGridSorting = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.publishEvent(GridEvents.sortedRowsSet);
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
@@ -204,7 +203,7 @@ export const useGridSorting = (apiRef, props) => {
   const handleColumnHeaderKeyDown = React.useCallback(({
     colDef
   }, event) => {
-    // CTRL + Enter opens the column menu
+    // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(colDef, undefined, event.shiftKey);
     }
@@ -227,11 +226,11 @@ export const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderClick, handleColumnHeaderClick);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'rowsSet', apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

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

@@ -28,6 +28,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
         minFirstColumn?: number | undefined;
         maxLastColumn?: number | undefined;
         availableSpace?: number | null | undefined;
+        ignoreAutoHeight?: boolean | undefined;
     }) => JSX.Element[] | null;
     getRootProps: ({ style, ...other }?: {
         style?: {} | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -12,7 +12,6 @@ import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
@@ -88,17 +87,36 @@ export const useGridVirtualScroller = props => {
       top,
       left
     } = scrollPosition.current;
-    const firstRowIndex = getIndexFromScroll(top, rowsMeta.positions);
+    const firstRowIndex = Math.min(Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex()), getIndexFromScroll(top, rowsMeta.positions));
     const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
-    const firstColumnIndex = getIndexFromScroll(left, columnPositions);
-    const lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+    let hasRowWithAutoHeight = false;
+    let firstColumnIndex = 0;
+    let lastColumnIndex = columnPositions.length;
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: firstRowIndex,
+      lastIndex: lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+
+    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+      const row = currentPage.rows[i];
+      hasRowWithAutoHeight = apiRef.current.unstable_rowHasAutoHeight(row.id);
+    }
+
+    if (!hasRowWithAutoHeight) {
+      firstColumnIndex = getIndexFromScroll(left, columnPositions);
+      lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+    }
+
     return {
       firstRowIndex,
       lastRowIndex,
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, currentPage.rows.length, columnPositions, containerWidth, visibleColumns.length]);
+  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
   React.useEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -116,7 +134,7 @@ export const useGridVirtualScroller = props => {
       setContainerWidth(rootRef.current.clientWidth);
     }
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
+  useGridApiEventHandler(apiRef, 'resize', handleResize);
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
@@ -176,7 +194,7 @@ export const useGridVirtualScroller = props => {
       left,
       renderContext: initialRenderContext
     };
-    apiRef.current.publishEvent(GridEvents.rowsScroll, params);
+    apiRef.current.publishEvent('rowsScroll', params);
   }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
 
   const handleScroll = event => {
@@ -199,7 +217,7 @@ export const useGridVirtualScroller = props => {
     const bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
     const shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
 
-    apiRef.current.publishEvent(GridEvents.rowsScroll, {
+    apiRef.current.publishEvent('rowsScroll', {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
@@ -215,11 +233,11 @@ export const useGridVirtualScroller = props => {
   };
 
   const handleWheel = event => {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerWheel, {}, event);
+    apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
   };
 
   const handleTouchMove = event => {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerTouchMove, {}, event);
+    apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   };
 
   const getRows = (params = {
@@ -229,7 +247,8 @@ export const useGridVirtualScroller = props => {
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerWidth
+      availableSpace = containerWidth,
+      ignoreAutoHeight
     } = params;
 
     if (!currentPage.range || !nextRenderContext || availableSpace == null) {
@@ -282,7 +301,7 @@ export const useGridVirtualScroller = props => {
         model
       } = renderedRows[i];
       const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      const targetRowHeight = apiRef.current.unstable_getRowHeight(id);
+      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
 
       if (selectedRowsLookup[id] == null) {
@@ -296,7 +315,7 @@ export const useGridVirtualScroller = props => {
       rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
         row: model,
         rowId: id,
-        rowHeight: targetRowHeight,
+        rowHeight: baseRowHeight,
         cellFocus: cellFocus // TODO move to inside the row
         ,
         cellTabIndex: cellTabIndex // TODO move to inside the row
@@ -342,7 +361,7 @@ export const useGridVirtualScroller = props => {
     return size;
   }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
   React.useEffect(() => {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerContentSizeChange);
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -11,7 +11,10 @@ declare enum GridSignature {
     DataGrid = "DataGrid",
     DataGridPro = "DataGridPro"
 }
-export declare function createUseGridApiEventHandler(registry: CleanupTracking): <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions | undefined) => void;
+interface RegistryContainer {
+    registry: CleanupTracking | null;
+}
+export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions | undefined) => void;
 export declare const unstable_resetCleanupTracking: () => void;
 export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E> | undefined, options?: EventListenerOptions | undefined) => void;
 export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEventsStr>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;

package/hooks/utils/useGridApiEventHandler.js

@@ -6,20 +6,25 @@ import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTra
  * Signal to the underlying logic what version of the public component API
  * of the data grid is exposed.
  */
-var GridSignature; // We use class to make it easier to detect in heap snapshots by name
+var GridSignature;
 
 (function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";
   GridSignature["DataGridPro"] = "DataGridPro";
 })(GridSignature || (GridSignature = {}));
 
+// We use class to make it easier to detect in heap snapshots by name
 class ObjectToBeRetainedByReact {} // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
 // Check https://github.com/facebook/react/issues/15317 to get more information
 
 
-export function createUseGridApiEventHandler(registry) {
+export function createUseGridApiEventHandler(registryContainer) {
   let cleanupTokensCounter = 0;
   return function useGridApiEventHandler(apiRef, eventName, handler, options) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+    }
+
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
     const handlerRef = React.useRef();
@@ -40,7 +45,7 @@ export function createUseGridApiEventHandler(registry) {
       cleanupTokenRef.current = {
         cleanupToken: cleanupTokensCounter
       };
-      registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
+      registryContainer.registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
       () => {
         var _subscription$current;
 
@@ -53,7 +58,7 @@ export function createUseGridApiEventHandler(registry) {
       subscription.current = null;
 
       if (cleanupTokenRef.current) {
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
     }
@@ -71,10 +76,10 @@ export function createUseGridApiEventHandler(registry) {
         subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
       }
 
-      if (cleanupTokenRef.current && registry) {
+      if (cleanupTokenRef.current && registryContainer.registry) {
         // If the effect was called, it means that this render was committed
         // so we can trust the cleanup function to remove the listener.
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
 
@@ -87,10 +92,18 @@ export function createUseGridApiEventHandler(registry) {
     }, [apiRef, eventName, options]);
   };
 }
-const registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking(); // eslint-disable-next-line @typescript-eslint/naming-convention
+const registryContainer = {
+  registry: null
+}; // TODO: move to @mui/x-data-grid/internals
+// eslint-disable-next-line @typescript-eslint/naming-convention
 
-export const unstable_resetCleanupTracking = () => registry.reset();
-export const useGridApiEventHandler = createUseGridApiEventHandler(registry);
+export const unstable_resetCleanupTracking = () => {
+  var _registryContainer$re;
+
+  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  registryContainer.registry = null;
+};
+export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
 const optionsSubscriberOptions = {
   isFirst: true
 };

package/hooks/utils/useGridNativeEventListener.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { isFunction } from '../../utils/utils';
 import { useGridLogger } from './useGridLogger';
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
@@ -32,7 +31,7 @@ export const useGridNativeEventListener = (apiRef, ref, eventName, handler, opti
         boundElem.removeEventListener(eventName, wrapHandler, options);
       };
 
-      apiRef.current.subscribeEvent(GridEvents.unmount, unsubscribe);
+      apiRef.current.subscribeEvent('unmount', unsubscribe);
     }
   }, [ref, wrapHandler, eventName, added, logger, options, apiRef]);
 };

package/hooks/utils/useGridSelector.js

@@ -1,7 +1,7 @@
 import { buildWarning } from '../../utils/warning';
 
 function isOutputSelector(selector) {
-  return selector.cache;
+  return selector.acceptsApiRef;
 }
 
 const stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);

package/index.d.ts

@@ -14,6 +14,8 @@ export * from './context';
 export * from './colDef';
 export * from './utils';
 export type { DataGridProps, GridExperimentalFeatures } from './models/props/DataGridProps';
+export type { GridToolbarExportProps } from './components/toolbar/GridToolbarExport';
+export type { GridExportFormat, GridExportExtension } from './models/gridExport';
 /**
  * The full grid API.
  */

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.0
+/** @license MUI v5.12.0
  *
  * 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

@@ -44,8 +44,12 @@ export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
 export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
-export { createSelector } from '../utils/createSelector';
+export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
+export { createSelector, unstable_resetCreateSelectorCache } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual } from '../utils/utils';
+export { buildWarning } from '../utils/warning';
+export { exportAs } from '../utils/exportAs';
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';
+export type { GridApiCaches } from '../models/gridApiCaches';