@mui/x-data-grid 6.14.0 → 6.16.0

package/node/hooks/features/export/useGridPrintExport.js

@@ -19,6 +19,7 @@ var _useGridPagination = require("../pagination/useGridPagination");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -49,13 +50,14 @@ 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 = (0, _utils.unstable_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 = (0, _utils2.getColumnsToExport)({
       apiRef,
       options: {
@@ -68,14 +70,25 @@ const useGridPrintExport = (apiRef, props) => {
     columns.forEach(column => {
       newColumnVisibilityModel[column.field] = exportedColumnFields.includes(column.field);
     });
+    if (includeCheckboxes) {
+      newColumnVisibilityModel[_gridCheckboxSelectionColDef.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) => {
     const normalizeOptions = (0, _extends2.default)({
       copyStyles: true,
       hideToolbar: false,
-      hideFooter: false
+      hideFooter: false,
+      includeCheckboxes: false
     }, options);
     const printDoc = printWindow.contentDocument;
     if (!printDoc) {
@@ -106,10 +119,21 @@ const useGridPrintExport = (apiRef, props) => {
     }
 
     // Expand container height to accommodate all rows
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight}px`;
+    const computedTotalHeight = rowsMeta.currentPageTotalHeight + (0, _gridColumnsUtils.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?.getRowsToExport) {
+      const gridFooterElement = gridClone.querySelector(`.${_gridClasses.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');
@@ -182,11 +206,13 @@ 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`);
@@ -196,6 +222,7 @@ 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 = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    previousRows.current = apiRef.current.getSortedRows();
     if (props.pagination) {
       const visibleRowCount = (0, _gridFilterSelector.gridExpandedRowCountSelector)(apiRef);
       const paginationModel = {
@@ -207,8 +234,11 @@ const useGridPrintExport = (apiRef, props) => {
       (0, _useGridPagination.mergeStateWithPaginationModel)(visibleRowCount, 'DataGridPro', paginationModel));
       apiRef.current.forceUpdate();
     }
-    await updateGridColumnsForPrint(options?.fields, options?.allColumns);
-    apiRef.current.unstable_disableVirtualization();
+    await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
+    if (options?.getRowsToExport) {
+      updateGridRowsForPrint(options.getRowsToExport);
+    }
+    apiRef.current.unstable_setVirtualization(false);
     await raf(); // wait for the state changes to take action
     const printWindow = buildPrintWindow(options?.fileName);
     if (process.env.NODE_ENV === 'test') {
@@ -229,7 +259,7 @@ 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/node/hooks/features/filter/gridFilterUtils.js

@@ -11,10 +11,12 @@ var _utils = require("../../../colDef/utils");
 var _gridFilterState = require("./gridFilterState");
 var _warning = require("../../../utils/warning");
 var _columns = require("../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;
 }
@@ -167,7 +169,7 @@ const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disabl
 
   // 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$$ = {
@@ -179,9 +181,10 @@ const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef, disabl
 
       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/node/hooks/features/focus/useGridFocus.js

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

package/node/hooks/features/index.js

@@ -156,4 +156,15 @@ Object.keys(_headerFiltering).forEach(function (key) {
       return _headerFiltering[key];
     }
   });
+});
+var _virtualization = require("./virtualization");
+Object.keys(_virtualization).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _virtualization[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _virtualization[key];
+    }
+  });
 });

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridVirtualizationSelector = exports.gridVirtualizationEnabledSelector = exports.gridVirtualizationColumnEnabledSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+const gridVirtualizationSelector = state => state.virtualization;
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+exports.gridVirtualizationSelector = gridVirtualizationSelector;
+const gridVirtualizationEnabledSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.enabled);
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ */
+exports.gridVirtualizationEnabledSelector = gridVirtualizationEnabledSelector;
+const gridVirtualizationColumnEnabledSelector = (0, _createSelector.createSelector)(gridVirtualizationSelector, state => state.enabledForColumns);
+exports.gridVirtualizationColumnEnabledSelector = gridVirtualizationColumnEnabledSelector;

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

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

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

@@ -26,12 +26,12 @@ var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelecto
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
+var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["style"],
-  _excluded2 = ["style"];
+  _excluded2 = ["style"]; // Uses binary search to avoid looping through all possible positions
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// Uses binary search to avoid looping through all possible positions
 function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
@@ -77,9 +77,10 @@ const useGridVirtualScroller = props => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const enabled = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationEnabledSelector);
+  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector);
   const {
     ref,
-    disableVirtualization,
     onRenderZonePositioning,
     renderZoneMinColumnIndex = 0,
     renderZoneMaxColumnIndex = visibleColumns.length,
@@ -96,7 +97,7 @@ const useGridVirtualScroller = props => {
   const renderZoneRef = React.useRef(null);
   const rootRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_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,
@@ -107,6 +108,12 @@ 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();
@@ -158,7 +165,7 @@ const useGridVirtualScroller = props => {
     return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
-    if (disableVirtualization) {
+    if (!enabled) {
       return {
         firstRowIndex: 0,
         lastRowIndex: currentPage.rows.length,
@@ -175,23 +182,25 @@ 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,
@@ -199,16 +208,16 @@ 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]);
   (0, _utils.unstable_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]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     setContainerDimensions({
       width: rootRef.current.clientWidth,
@@ -257,12 +266,13 @@ 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,
@@ -276,13 +286,13 @@ 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]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (containerDimensions.width == null) {
       return;
     }
     const initialRenderContext = computeRenderContext();
-    updateRenderContext(initialRenderContext);
+    setRenderContext(initialRenderContext);
     const {
       top,
       left
@@ -293,7 +303,7 @@ const useGridVirtualScroller = props => {
       renderContext: initialRenderContext
     };
     apiRef.current.publishEvent('scrollPositionChange', params);
-  }, [apiRef, computeRenderContext, containerDimensions.width, updateRenderContext]);
+  }, [apiRef, computeRenderContext, containerDimensions.width, setRenderContext]);
   const handleScroll = (0, _utils.unstable_useEventCallback)(event => {
     const {
       scrollTop,
@@ -318,7 +328,7 @@ 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);
@@ -332,7 +342,7 @@ const useGridVirtualScroller = props => {
     if (shouldSetState) {
       // Prevents batching render context changes
       ReactDOM.flushSync(() => {
-        updateRenderContext(nextRenderContext);
+        setRenderContext(nextRenderContext);
       });
       prevTotalWidth.current = columnsTotalWidth;
     }
@@ -349,6 +359,12 @@ const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowMouseEnter', params => {
+    setHoveredRowId(params.id ?? null);
+  });
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowMouseLeave', () => {
+    setHoveredRowId(null);
+  });
   const getRows = (params = {
     renderContext
   }) => {
@@ -364,8 +380,8 @@ 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,
@@ -505,6 +521,7 @@ const useGridVirtualScroller = props => {
         isLastVisible: lastVisibleRowIndex,
         position: position
       }, rowProps, rootRowProps, {
+        hovered: hoveredRowId === id,
         style: rowStyleCache.current[id]
       }), id));
     }
@@ -546,9 +563,6 @@ const useGridVirtualScroller = props => {
     }
     return style;
   }, [needsHorizontalScrollbar, rootProps.autoHeight]);
-  const getRenderContext = React.useCallback(() => {
-    return prevRenderContext.current;
-  }, []);
   apiRef.current.register('private', {
     getRenderContext
   });

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridVirtualization = useGridVirtualization;
+exports.virtualizationStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const virtualizationStateInitializer = (state, props) => {
+  const virtualization = {
+    enabled: !props.disableVirtualization,
+    enabledForColumns: true
+  };
+  return (0, _extends2.default)({}, state, {
+    virtualization
+  });
+};
+exports.virtualizationStateInitializer = virtualizationStateInitializer;
+function useGridVirtualization(apiRef, props) {
+  /*
+   * API METHODS
+   */
+
+  const setVirtualization = enabled => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      virtualization: (0, _extends2.default)({}, state.virtualization, {
+        enabled
+      })
+    }));
+  };
+  const setColumnVirtualization = enabled => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      virtualization: (0, _extends2.default)({}, state.virtualization, {
+        enabledForColumns: enabled
+      })
+    }));
+  };
+  const api = {
+    unstable_setVirtualization: setVirtualization,
+    unstable_setColumnVirtualization: setColumnVirtualization
+  };
+  (0, _useGridApiMethod.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/node/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/node/internals/index.js

@@ -26,6 +26,7 @@ var _exportNames = {
   columnsStateInitializer: true,
   getTotalHeaderHeight: true,
   useGridColumnSpanning: true,
+  gridColumnsStateSelector: true,
   useGridColumnGrouping: true,
   columnGroupsStateInitializer: true,
   useGridDensity: true,
@@ -292,6 +293,12 @@ Object.defineProperty(exports, "gridAdditionalRowGroupsSelector", {
     return _gridRowsSelector.gridAdditionalRowGroupsSelector;
   }
 });
+Object.defineProperty(exports, "gridColumnsStateSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnsStateSelector;
+  }
+});
 Object.defineProperty(exports, "gridEditRowsStateSelector", {
   enumerable: true,
   get: function () {
@@ -646,6 +653,7 @@ var _useGridColumnMenu = require("../hooks/features/columnMenu/useGridColumnMenu
 var _useGridColumns = require("../hooks/features/columns/useGridColumns");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
 var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpanning");
+var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridColumnGrouping");
 var _useGridDensity = require("../hooks/features/density/useGridDensity");
 var _useGridCsvExport = require("../hooks/features/export/useGridCsvExport");
@@ -674,10 +682,34 @@ var _useGridEvents = require("../hooks/features/events/useGridEvents");
 var _useGridDimensions = require("../hooks/features/dimensions/useGridDimensions");
 var _useGridStatePersistence = require("../hooks/features/statePersistence/useGridStatePersistence");
 var _useGridVirtualScroller = require("../hooks/features/virtualization/useGridVirtualScroller");
+var _virtualization = require("../hooks/features/virtualization");
+Object.keys(_virtualization).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _virtualization[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _virtualization[key];
+    }
+  });
+});
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
 var _utils = require("../hooks/features/export/utils");
+var _createControllablePromise = require("../utils/createControllablePromise");
+Object.keys(_createControllablePromise).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _createControllablePromise[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _createControllablePromise[key];
+    }
+  });
+});
 var _createSelector = require("../utils/createSelector");
 var _domUtils = require("../utils/domUtils");
 var _keyboardUtils = require("../utils/keyboardUtils");
@@ -685,6 +717,18 @@ var _utils2 = require("../utils/utils");
 var _warning = require("../utils/warning");
 var _exportAs = require("../utils/exportAs");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _useOnMount = require("../hooks/utils/useOnMount");
+Object.keys(_useOnMount).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useOnMount[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOnMount[key];
+    }
+  });
+});
 var _csvSerializer = require("../hooks/features/export/serializers/csvSerializer");
 var _utils3 = require("../colDef/utils");
 Object.keys(_utils3).forEach(function (key) {