@mui/x-data-grid 6.14.0 → 6.16.0

package/components/toolbar/GridToolbarExportContainer.js

@@ -38,14 +38,6 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
       handleMenuClose();
     }
   };
-  const handleMenuClickAway = event => {
-    var _buttonRef$current;
-    if (buttonRef.current === event.target || // if user clicked on the icon
-    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
   if (children == null) {
     return null;
   }
@@ -66,7 +58,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClickAway,
+      onClose: handleMenuClose,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: exportMenuId,

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled, useTheme } from '@mui/system';
+import { styled, useTheme } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
+import { useGridSelector } from '../../utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -11,6 +12,7 @@ import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColu
 import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { areRenderContextsEqual, getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
+import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridColumnHeaderRow = styled('div', {
@@ -46,6 +48,7 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -164,7 +167,7 @@ export const useGridColumnHeaders = props => {
       maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     });
-    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+    const firstColumnToRender = !hasVirtualization ? 0 : getFirstColumnIndexToRenderRef.current({
       firstColumnIndex: nextRenderContext.firstColumnIndex,
       minColumnIndex: minFirstColumn,
       columnBuffer: rootProps.columnBuffer,
@@ -173,7 +176,7 @@ export const useGridColumnHeaders = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
-    const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
+    const lastColumnToRender = !hasVirtualization ? maxLastColumn : Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/hooks/features/export/useGridPrintExport.js

@@ -12,6 +12,7 @@ import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function raf() {
   return new Promise(resolve => {
@@ -40,13 +41,14 @@ export const useGridPrintExport = (apiRef, props) => {
   const doc = React.useRef(null);
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
+  const previousRows = React.useRef([]);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef]);
 
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly
-  const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
+  const updateGridColumnsForPrint = React.useCallback((fields, allColumns, includeCheckboxes) => new Promise(resolve => {
     const exportedColumnFields = getColumnsToExport({
       apiRef,
       options: {
@@ -59,15 +61,26 @@ export const useGridPrintExport = (apiRef, props) => {
     columns.forEach(column => {
       newColumnVisibilityModel[column.field] = exportedColumnFields.includes(column.field);
     });
+    if (includeCheckboxes) {
+      newColumnVisibilityModel[GRID_CHECKBOX_SELECTION_COL_DEF.field] = true;
+    }
     apiRef.current.setColumnVisibilityModel(newColumnVisibilityModel);
     resolve();
   }), [apiRef]);
+  const updateGridRowsForPrint = React.useCallback(getRowsToExport => {
+    const rowsToExportIds = getRowsToExport({
+      apiRef
+    });
+    const newRows = rowsToExportIds.map(id => apiRef.current.getRow(id));
+    apiRef.current.setRows(newRows);
+  }, [apiRef]);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
     var _querySelector, _querySelector2;
     const normalizeOptions = _extends({
       copyStyles: true,
       hideToolbar: false,
-      hideFooter: false
+      hideFooter: false,
+      includeCheckboxes: false
     }, options);
     const printDoc = printWindow.contentDocument;
     if (!printDoc) {
@@ -100,10 +113,21 @@ export const useGridPrintExport = (apiRef, props) => {
     }
 
     // Expand container height to accommodate all rows
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight}px`;
+    const computedTotalHeight = rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight;
+    gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
 
+    // the footer is always being placed at the bottom of the page as if all rows are exported
+    // so if getRowsToExport is being used to only export a subset of rows then we need to
+    // adjust the footer position to be correctly placed at the bottom of the grid
+    if (options != null && options.getRowsToExport) {
+      const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
+      gridFooterElement.style.position = 'absolute';
+      gridFooterElement.style.width = '100%';
+      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    }
+
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
     // prevents us to do it
     const container = document.createElement('div');
@@ -177,11 +201,13 @@ export const useGridPrintExport = (apiRef, props) => {
       // if the apiRef.current.exportState(); did not exported the column visibility, we update it
       apiRef.current.setColumnVisibilityModel(previousColumnVisibility.current);
     }
-    apiRef.current.unstable_enableVirtualization();
+    apiRef.current.unstable_setVirtualization(true);
+    apiRef.current.setRows(previousRows.current);
 
     // Clear local state
     previousGridState.current = null;
     previousColumnVisibility.current = {};
+    previousRows.current = [];
   }, [apiRef]);
   const exportDataAsPrint = React.useCallback(async options => {
     logger.debug(`Export data as Print`);
@@ -191,6 +217,7 @@ export const useGridPrintExport = (apiRef, props) => {
     previousGridState.current = apiRef.current.exportState();
     // It appends that the visibility model is not exported, especially if columnVisibility is not controlled
     previousColumnVisibility.current = gridColumnVisibilityModelSelector(apiRef);
+    previousRows.current = apiRef.current.getSortedRows();
     if (props.pagination) {
       const visibleRowCount = gridExpandedRowCountSelector(apiRef);
       const paginationModel = {
@@ -202,8 +229,11 @@ export const useGridPrintExport = (apiRef, props) => {
       mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
       apiRef.current.forceUpdate();
     }
-    await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns);
-    apiRef.current.unstable_disableVirtualization();
+    await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns, options == null ? void 0 : options.includeCheckboxes);
+    if (options != null && options.getRowsToExport) {
+      updateGridRowsForPrint(options.getRowsToExport);
+    }
+    apiRef.current.unstable_setVirtualization(false);
     await raf(); // wait for the state changes to take action
     const printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
     if (process.env.NODE_ENV === 'test') {
@@ -224,7 +254,7 @@ export const useGridPrintExport = (apiRef, props) => {
       };
       doc.current.body.appendChild(printWindow);
     }
-  }, [props, logger, apiRef, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint]);
+  }, [props, logger, apiRef, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint, updateGridRowsForPrint]);
   const printExportApi = {
     exportDataAsPrint
   };

package/hooks/features/filter/gridFilterUtils.js

@@ -4,10 +4,13 @@ import { GLOBAL_API_REF, isInternalFilter } from '../../../colDef/utils';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
+
+// Fixes https://github.com/mui/mui-x/issues/10056
+const globalScope = typeof window === 'undefined' ? globalThis : window;
+const evalCode = globalScope[atob('ZXZhbA==')];
 let hasEval;
 try {
-  // eslint-disable-next-line no-eval
-  hasEval = eval('true');
+  hasEval = evalCode('true');
 } catch (_) {
   hasEval = false;
 }
@@ -158,7 +161,7 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
-  const filterItemTemplate = `(function filterItem$$(row, shouldApplyFilter) {
+  const filterItemTemplate = `(function filterItem$$(appliers, row, shouldApplyFilter) {
       ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 
       const result$$ = {
@@ -170,9 +173,10 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
 
       return result$$;
     })`;
-
-  // eslint-disable-next-line no-eval
-  const filterItem = eval(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  const filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
+  const filterItem = (row, shouldApplyItem) => {
+    return filterItemCore(appliers, row, shouldApplyItem);
+  };
   filterItemsApplierId += 1;
   return filterItem;
 };

package/hooks/features/focus/useGridFocus.js

@@ -383,7 +383,6 @@ export const useGridFocus = (apiRef, props) => {
     };
   }, [apiRef, handleDocumentClick]);
   useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
-  useGridApiEventHandler(apiRef, 'headerFilterBlur', handleBlur);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);

package/hooks/features/index.d.ts

@@ -12,3 +12,4 @@ export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';
 export * from './headerFiltering';
+export * from './virtualization';

package/hooks/features/index.js

@@ -12,4 +12,5 @@ export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';
-export * from './headerFiltering';
+export * from './headerFiltering';
+export * from './virtualization';

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

@@ -0,0 +1,16 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+export declare const gridVirtualizationSelector: (state: GridStateCommunity) => import("./useGridVirtualization").GridVirtualizationState;
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+export declare const gridVirtualizationEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+export declare const gridVirtualizationColumnEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;

package/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -0,0 +1,18 @@
+import { createSelector } from '../../../utils/createSelector';
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+export const gridVirtualizationSelector = state => state.virtualization;
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabled);
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForColumns);

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

@@ -0,0 +1,2 @@
+export * from './useGridVirtualization';
+export * from './gridVirtualizationSelectors';

package/hooks/features/virtualization/index.js

@@ -0,0 +1,2 @@
+export * from './useGridVirtualization';
+export * from './gridVirtualizationSelectors';

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

@@ -12,7 +12,6 @@ export declare const getRenderableIndexes: ({ firstIndex, lastIndex, buffer, min
 export declare const areRenderContextsEqual: (context1: GridRenderContext, context2: GridRenderContext) => boolean;
 interface UseGridVirtualScrollerProps {
     ref: React.Ref<HTMLDivElement>;
-    disableVirtualization?: boolean;
     renderZoneMinColumnIndex?: number;
     renderZoneMaxColumnIndex?: number;
     onRenderZonePositioning?: (params: {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -19,8 +19,10 @@ import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelec
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+
 // Uses binary search to avoid looping through all possible positions
+import { jsx as _jsx } from "react/jsx-runtime";
 export function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
@@ -65,9 +67,10 @@ export const useGridVirtualScroller = props => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector);
+  const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const {
     ref,
-    disableVirtualization,
     onRenderZonePositioning,
     renderZoneMinColumnIndex = 0,
     renderZoneMaxColumnIndex = visibleColumns.length,
@@ -84,7 +87,7 @@ export const useGridVirtualScroller = props => {
   const renderZoneRef = React.useRef(null);
   const rootRef = React.useRef(null);
   const handleRef = useForkRef(ref, rootRef);
-  const [renderContext, setRenderContext] = React.useState(null);
+  const [renderContext, setRenderContextState] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const scrollPosition = React.useRef({
     top: 0,
@@ -95,6 +98,12 @@ export const useGridVirtualScroller = props => {
     height: null
   });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
+  // Each visible row (not to be confused with a filter result) is composed of a central row element
+  // and up to two additional row elements for pinned columns (left and right).
+  // When hovering any of these elements, the :hover styles are applied only to the row element that
+  // was actually hovered, not its additional siblings. To make it look like a contiguous row,
+  // we add/remove the .Mui-hovered class to all of the row elements inside one visible row.
+  const [hoveredRowId, setHoveredRowId] = React.useState(null);
   const rowStyleCache = React.useRef(Object.create(null));
   const prevGetRowProps = React.useRef();
   const prevRootRowStyle = React.useRef();
@@ -147,7 +156,7 @@ export const useGridVirtualScroller = props => {
     return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, (_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex, (_currentPage$range4 = currentPage.range) == null ? void 0 : _currentPage$range4.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
-    if (disableVirtualization) {
+    if (!enabled) {
       return {
         firstRowIndex: 0,
         lastRowIndex: currentPage.rows.length,
@@ -164,23 +173,25 @@ export const useGridVirtualScroller = props => {
     // In the last index, this is not needed because Array.slice doesn't include it.
     const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
     const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
-    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.rowHasAutoHeight(row.id);
-    }
-    if (!hasRowWithAutoHeight) {
-      firstColumnIndex = binarySearch(Math.abs(left), columnPositions);
-      lastColumnIndex = binarySearch(Math.abs(left) + containerDimensions.width, columnPositions);
+    if (enabledForColumns) {
+      let hasRowWithAutoHeight = false;
+      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.rowHasAutoHeight(row.id);
+      }
+      if (!hasRowWithAutoHeight) {
+        firstColumnIndex = binarySearch(Math.abs(left), columnPositions);
+        lastColumnIndex = binarySearch(Math.abs(left) + containerDimensions.width, columnPositions);
+      }
     }
     return {
       firstRowIndex,
@@ -188,16 +199,16 @@ export const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
+  }, [enabled, enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
   useEnhancedEffect(() => {
-    if (disableVirtualization) {
-      renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
-    } else {
+    if (enabled) {
       // TODO a scroll reset should not be necessary
       rootRef.current.scrollLeft = 0;
       rootRef.current.scrollTop = 0;
+    } else {
+      renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
     }
-  }, [disableVirtualization]);
+  }, [enabled]);
   useEnhancedEffect(() => {
     setContainerDimensions({
       width: rootRef.current.clientWidth,
@@ -246,12 +257,13 @@ export const useGridVirtualScroller = props => {
       });
     }
   }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer, theme.direction]);
-  const updateRenderContext = React.useCallback(nextRenderContext => {
+  const getRenderContext = React.useCallback(() => prevRenderContext.current, []);
+  const setRenderContext = React.useCallback(nextRenderContext => {
     if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
       updateRenderZonePosition(nextRenderContext);
       return;
     }
-    setRenderContext(nextRenderContext);
+    setRenderContextState(nextRenderContext);
     updateRenderZonePosition(nextRenderContext);
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
@@ -265,13 +277,13 @@ export const useGridVirtualScroller = props => {
       lastRowToRender
     });
     prevRenderContext.current = nextRenderContext;
-  }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer, updateRenderZonePosition]);
+  }, [apiRef, setRenderContextState, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer, updateRenderZonePosition]);
   useEnhancedEffect(() => {
     if (containerDimensions.width == null) {
       return;
     }
     const initialRenderContext = computeRenderContext();
-    updateRenderContext(initialRenderContext);
+    setRenderContext(initialRenderContext);
     const {
       top,
       left
@@ -282,7 +294,7 @@ export const useGridVirtualScroller = props => {
       renderContext: initialRenderContext
     };
     apiRef.current.publishEvent('scrollPositionChange', params);
-  }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
+  }, [apiRef, computeRenderContext, containerDimensions.width, setRenderContext]);
   const handleScroll = useEventCallback(event => {
     const {
       scrollTop,
@@ -307,7 +319,7 @@ export const useGridVirtualScroller = props => {
     }
 
     // When virtualization is disabled, the context never changes during scroll
-    const nextRenderContext = disableVirtualization ? prevRenderContext.current : computeRenderContext();
+    const nextRenderContext = enabled ? computeRenderContext() : prevRenderContext.current;
     const topRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
     const bottomRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastRowIndex - prevRenderContext.current.lastRowIndex);
     const topColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
@@ -321,7 +333,7 @@ export const useGridVirtualScroller = props => {
     if (shouldSetState) {
       // Prevents batching render context changes
       ReactDOM.flushSync(() => {
-        updateRenderContext(nextRenderContext);
+        setRenderContext(nextRenderContext);
       });
       prevTotalWidth.current = columnsTotalWidth;
     }
@@ -338,6 +350,13 @@ export const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
+  useGridApiEventHandler(apiRef, 'rowMouseEnter', params => {
+    var _params$id;
+    setHoveredRowId((_params$id = params.id) != null ? _params$id : null);
+  });
+  useGridApiEventHandler(apiRef, 'rowMouseLeave', () => {
+    setHoveredRowId(null);
+  });
   const getRows = (params = {
     renderContext
   }) => {
@@ -354,8 +373,8 @@ export const useGridVirtualScroller = props => {
     if (!nextRenderContext || availableSpace == null) {
       return null;
     }
-    const rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0;
-    const columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0;
+    const rowBuffer = enabled ? rootProps.rowBuffer : 0;
+    const columnBuffer = enabled ? rootProps.columnBuffer : 0;
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
@@ -496,6 +515,7 @@ export const useGridVirtualScroller = props => {
         isLastVisible: lastVisibleRowIndex,
         position: position
       }, rowProps, rootRowProps, {
+        hovered: hoveredRowId === id,
         style: rowStyleCache.current[id]
       }), id));
     }
@@ -537,9 +557,6 @@ export const useGridVirtualScroller = props => {
     }
     return style;
   }, [needsHorizontalScrollbar, rootProps.autoHeight]);
-  const getRenderContext = React.useCallback(() => {
-    return prevRenderContext.current;
-  }, []);
   apiRef.current.register('private', {
     getRenderContext
   });

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+type RootProps = Pick<DataGridProcessedProps, 'disableVirtualization'>;
+export type GridVirtualizationState = {
+    enabled: boolean;
+    enabledForColumns: boolean;
+};
+export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
+export declare function useGridVirtualization(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export {};

package/hooks/features/virtualization/useGridVirtualization.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+export const virtualizationStateInitializer = (state, props) => {
+  const virtualization = {
+    enabled: !props.disableVirtualization,
+    enabledForColumns: true
+  };
+  return _extends({}, state, {
+    virtualization
+  });
+};
+export function useGridVirtualization(apiRef, props) {
+  /*
+   * API METHODS
+   */
+
+  const setVirtualization = enabled => {
+    apiRef.current.setState(state => _extends({}, state, {
+      virtualization: _extends({}, state.virtualization, {
+        enabled
+      })
+    }));
+  };
+  const setColumnVirtualization = enabled => {
+    apiRef.current.setState(state => _extends({}, state, {
+      virtualization: _extends({}, state.virtualization, {
+        enabledForColumns: enabled
+      })
+    }));
+  };
+  const api = {
+    unstable_setVirtualization: setVirtualization,
+    unstable_setColumnVirtualization: setColumnVirtualization
+  };
+  useGridApiMethod(apiRef, api, 'public');
+
+  /*
+   * EFFECTS
+   */
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(() => {
+    setVirtualization(!props.disableVirtualization);
+  }, [props.disableVirtualization]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+}

package/index.js

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

package/internals/index.d.ts

@@ -21,6 +21,7 @@ export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/feature
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { gridColumnsStateSelector } from '../hooks/features/columns/gridColumnsSelector';
 export { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columnGrouping/useGridColumnGrouping';
 export type { GridColumnGroupLookup } from '../hooks/features/columnGrouping/gridColumnGroupsInterfaces';
 export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
@@ -57,12 +58,14 @@ export { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export type { GridRestoreStatePreProcessingContext } from '../hooks/features/statePersistence/gridStatePersistenceInterface';
 export { useGridVirtualScroller, getRenderableIndexes, } from '../hooks/features/virtualization/useGridVirtualScroller';
+export * from '../hooks/features/virtualization';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } 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 { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
+export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
 export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
@@ -71,6 +74,7 @@ export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+export * from '../hooks/utils/useOnMount';
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';
 export type { GridApiCaches } from '../models/gridApiCaches';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';