@mui/x-data-grid 7.14.0 → 7.16.0

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { warnOnce } from '../../../internals/utils/warning';
+import { warnOnce } from "../../../internals/utils/warning.js";
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {

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

@@ -1,2 +1,2 @@
-export * from './gridSortingSelector';
-export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from './gridSortingUtils';
+export * from "./gridSortingSelector.js";
+export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from "./gridSortingUtils.js";

package/modern/hooks/features/sorting/useGridSorting.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
-import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from './gridSortingSelector';
-import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from '../rows';
-import { useFirstRender } from '../../utils/useFirstRender';
-import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
-import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { getTreeNodeDescendants } from '../rows/gridRowsUtils';
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
+import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from "./gridSortingSelector.js";
+import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from "../rows/index.js";
+import { useFirstRender } from "../../utils/useFirstRender.js";
+import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../../core/strategyProcessing/index.js";
+import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from "./gridSortingUtils.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { getTreeNodeDescendants } from "../rows/gridRowsUtils.js";
 export const sortingStateInitializer = (state, props) => {
   const sortModel = props.sortModel ?? props.initialState?.sorting?.sortModel ?? [];
   return _extends({}, state, {

package/modern/hooks/features/statePersistence/useGridStatePersistence.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils';
+import { useGridApiMethod } from "../../utils/index.js";
 export const useGridStatePersistence = apiRef => {
   const exportState = React.useCallback((params = {}) => {
     const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {}, params);

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

@@ -1,4 +1,4 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 /**
  * Get the columns state
  * @category Virtualization
@@ -8,15 +8,22 @@ export const gridVirtualizationSelector = state => state.virtualization;
 /**
  * Get the enabled state for virtualization
  * @category Virtualization
+ * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
  */
 export const gridVirtualizationEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabled);
 
 /**
- * Get the enabled state for virtualization
+ * Get the enabled state for column virtualization
  * @category Virtualization
  */
 export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForColumns);
 
+/**
+ * Get the enabled state for row virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationRowEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForRows);
+
 /**
  * Get the render context
  * @category Virtualization

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

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

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

@@ -5,25 +5,25 @@ import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallb
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
 import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
-import { useTheme } from '@mui/material/styles';
-import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridRootProps } from '../../utils/useGridRootProps';
-import { useGridSelector } from '../../utils/useGridSelector';
-import { useRunOnce } from '../../utils/useRunOnce';
-import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from '../columns/gridColumnsSelector';
-import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
-import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
-import { useGridApiEventHandler } from '../../utils';
-import * as platform from '../../../utils/platform';
-import { clamp, range } from '../../../utils/utils';
-import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
-import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
-import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
-import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
+import { useGridSelector } from "../../utils/useGridSelector.js";
+import { useRunOnce } from "../../utils/useRunOnce.js";
+import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
+import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
+import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
+import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { useGridApiEventHandler } from "../../utils/index.js";
+import * as platform from "../../../utils/platform.js";
+import { clamp, range } from "../../../utils/utils.js";
+import { selectedIdsLookupSelector } from "../rowSelection/gridRowSelectionSelector.js";
+import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
+import { getFirstNonSpannedColumnToRender } from "../columns/gridColumnsUtils.js";
+import { getMinimalContentHeight } from "../rows/gridRowsUtils.js";
+import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
+import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -39,9 +39,9 @@ const EMPTY_SCROLL_POSITION = {
   left: 0
 };
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
-const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
+const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
   direction: ScrollDirection.NONE,
-  buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
+  buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
 let isJSDOM = false;
 try {
@@ -55,7 +55,7 @@ export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector) && !isJSDOM;
+  const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
@@ -63,7 +63,7 @@ export const useGridVirtualScroller = () => {
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -100,7 +100,7 @@ export const useGridVirtualScroller = () => {
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(theme.direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const focusedCell = {
     rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
     columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
@@ -165,8 +165,8 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(theme.direction, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
-    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
     // Prevents batching render context changes
@@ -177,7 +177,7 @@ export const useGridVirtualScroller = () => {
     return nextRenderContext;
   };
   const forceUpdateRenderContext = () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
     // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
     frozenContext.current = undefined;
@@ -193,12 +193,12 @@ export const useGridVirtualScroller = () => {
     if (scrollTop < 0) {
       return;
     }
-    if (theme.direction === 'ltr') {
+    if (!isRtl) {
       if (scrollLeft < 0) {
         return;
       }
     }
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       if (scrollLeft > 0) {
         return;
       }
@@ -325,9 +325,9 @@ export const useGridVirtualScroller = () => {
       if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
-      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, isRtl, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
-      rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
+      rows.push(/*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
         index: rowIndex,
@@ -384,14 +384,16 @@ export const useGridVirtualScroller = () => {
     apiRef.current.resize();
   }, [apiRef, rowsMeta.currentPageTotalHeight]);
   useEnhancedEffect(() => {
-    if (enabled) {
-      // TODO a scroll reset should not be necessary
+    // TODO a scroll reset should not be necessary
+    if (enabledForColumns) {
       scrollerRef.current.scrollLeft = 0;
+    }
+    if (enabledForRows) {
       scrollerRef.current.scrollTop = 0;
     }
-  }, [enabled, gridRootRef, scrollerRef]);
+  }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
   useRunOnce(outerSize.width !== 0, () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
     updateRenderContext(initialRenderContext);
     apiRef.current.publishEvent('scrollPositionChange', {
@@ -441,14 +443,14 @@ export const useGridVirtualScroller = () => {
     })
   };
 };
-function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
+function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
   const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
   return {
-    enabled,
+    enabledForRows,
     enabledForColumns,
     apiRef,
     autoHeight: rootProps.autoHeight,
@@ -469,21 +471,18 @@ function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
-  let renderContext;
-  if (!inputs.enabled) {
-    renderContext = {
-      firstRowIndex: 0,
-      lastRowIndex: inputs.rows.length,
-      firstColumnIndex: 0,
-      lastColumnIndex: inputs.visibleColumns.length
-    };
-  } else {
-    const {
-      top,
-      left
-    } = scrollPosition;
-    const realLeft = Math.abs(left) + inputs.leftPinnedWidth;
-
+  const renderContext = {
+    firstRowIndex: 0,
+    lastRowIndex: inputs.rows.length,
+    firstColumnIndex: 0,
+    lastColumnIndex: inputs.visibleColumns.length
+  };
+  const {
+    top,
+    left
+  } = scrollPosition;
+  const realLeft = Math.abs(left) + inputs.leftPinnedWidth;
+  if (inputs.enabledForRows) {
     // Clamp the value because the search may return an index out of bounds.
     // In the last index, this is not needed because Array.slice doesn't include it.
     const firstRowIndex = Math.min(getNearestIndexToRender(inputs, top, {
@@ -491,38 +490,36 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
       lastPosition: inputs.rowsMeta.positions[inputs.rowsMeta.positions.length - 1] + inputs.lastRowHeight
     }), inputs.rowsMeta.positions.length - 1);
     const lastRowIndex = inputs.autoHeight ? firstRowIndex + inputs.rows.length : getNearestIndexToRender(inputs, top + inputs.viewportInnerHeight);
+    renderContext.firstRowIndex = firstRowIndex;
+    renderContext.lastRowIndex = lastRowIndex;
+  }
+  if (inputs.enabledForColumns) {
     let firstColumnIndex = 0;
     let lastColumnIndex = inputs.columnPositions.length;
-    if (inputs.enabledForColumns) {
-      let hasRowWithAutoHeight = false;
-      const [firstRowToRender, lastRowToRender] = getIndexesToRender({
-        firstIndex: firstRowIndex,
-        lastIndex: lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: inputs.rows.length,
-        bufferBefore: scrollCache.buffer.rowBefore,
-        bufferAfter: scrollCache.buffer.rowAfter,
-        positions: inputs.rowsMeta.positions,
-        lastSize: inputs.lastRowHeight
+    let hasRowWithAutoHeight = false;
+    const [firstRowToRender, lastRowToRender] = getIndexesToRender({
+      firstIndex: renderContext.firstRowIndex,
+      lastIndex: renderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: inputs.rows.length,
+      bufferBefore: scrollCache.buffer.rowBefore,
+      bufferAfter: scrollCache.buffer.rowAfter,
+      positions: inputs.rowsMeta.positions,
+      lastSize: inputs.lastRowHeight
+    });
+    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+      const row = inputs.rows[i];
+      hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+    }
+    if (!hasRowWithAutoHeight) {
+      firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
+        atStart: true,
+        lastPosition: inputs.columnsTotalWidth
       });
-      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-        const row = inputs.rows[i];
-        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
-      }
-      if (!hasRowWithAutoHeight) {
-        firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
-          atStart: true,
-          lastPosition: inputs.columnsTotalWidth
-        });
-        lastColumnIndex = binarySearch(realLeft + inputs.viewportInnerWidth, inputs.columnPositions);
-      }
+      lastColumnIndex = binarySearch(realLeft + inputs.viewportInnerWidth, inputs.columnPositions);
     }
-    renderContext = {
-      firstRowIndex,
-      lastRowIndex,
-      firstColumnIndex,
-      lastColumnIndex
-    };
+    renderContext.firstColumnIndex = firstColumnIndex;
+    renderContext.lastColumnIndex = lastColumnIndex;
   }
   const actualRenderContext = deriveRenderContext(inputs, renderContext, scrollCache);
   return actualRenderContext;
@@ -645,8 +642,8 @@ export function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
-  const factor = direction === 'ltr' ? 1 : -1;
+export function computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedLeftLength) {
+  const factor = isRtl ? -1 : 1;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
@@ -670,8 +667,8 @@ function directionForDelta(dx, dy) {
   }
   /* eslint-enable */
 }
-function bufferForDirection(mode, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
-  if (mode === 'rtl') {
+function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+  if (isRtl) {
     switch (direction) {
       case ScrollDirection.LEFT:
         direction = ScrollDirection.RIGHT;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 export const EMPTY_RENDER_CONTEXT = {
   firstRowIndex: 0,
   lastRowIndex: 0,
@@ -8,9 +8,14 @@ export const EMPTY_RENDER_CONTEXT = {
   lastColumnIndex: 0
 };
 export const virtualizationStateInitializer = (state, props) => {
+  const {
+    disableVirtualization,
+    autoHeight
+  } = props;
   const virtualization = {
-    enabled: !props.disableVirtualization,
-    enabledForColumns: true,
+    enabled: !disableVirtualization,
+    enabledForColumns: !disableVirtualization,
+    enabledForRows: !disableVirtualization && !autoHeight,
     renderContext: EMPTY_RENDER_CONTEXT
   };
   return _extends({}, state, {
@@ -25,7 +30,9 @@ export function useGridVirtualization(apiRef, props) {
   const setVirtualization = enabled => {
     apiRef.current.setState(state => _extends({}, state, {
       virtualization: _extends({}, state.virtualization, {
-        enabled
+        enabled,
+        enabledForColumns: enabled,
+        enabledForRows: enabled && !props.autoHeight
       })
     }));
   };
@@ -49,6 +56,6 @@ export function useGridVirtualization(apiRef, props) {
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
     setVirtualization(!props.disableVirtualization);
-  }, [props.disableVirtualization]);
+  }, [props.disableVirtualization, props.autoHeight]);
   /* eslint-enable react-hooks/exhaustive-deps */
 }

package/modern/hooks/index.js

@@ -1,3 +1,3 @@
-export * from './features';
-export * from './utils';
-export * from './core';
+export * from "./features/index.js";
+export * from "./utils/index.js";
+export * from "./core/index.js";

package/modern/hooks/utils/index.js

@@ -1,8 +1,8 @@
-export * from './useGridApiEventHandler';
-export * from './useGridApiMethod';
-export * from './useGridLogger';
-export { useGridSelector } from './useGridSelector';
-export * from './useGridNativeEventListener';
-export * from './useFirstRender';
-export * from './useOnMount';
-export * from './useRunOnce';
+export * from "./useGridApiEventHandler.js";
+export * from "./useGridApiMethod.js";
+export * from "./useGridLogger.js";
+export { useGridSelector } from "./useGridSelector.js";
+export * from "./useGridNativeEventListener.js";
+export * from "./useFirstRender.js";
+export * from "./useOnMount.js";
+export * from "./useRunOnce.js";

package/modern/hooks/utils/useGridApiContext.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridApiContext } from '../../components/GridApiContext';
+import { GridApiContext } from "../../components/GridApiContext.js";
 export function useGridApiContext() {
   const apiRef = React.useContext(GridApiContext);
   if (apiRef === undefined) {

package/modern/hooks/utils/useGridApiEventHandler.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TimerBasedCleanupTracking } from '../../utils/cleanupTracking/TimerBasedCleanupTracking';
-import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking';
+import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBasedCleanupTracking.js";
+import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
 /**
  * Signal to the underlying logic what version of the public component API
  * of the data grid is exposed.

package/modern/hooks/utils/useGridAriaAttributes.js

@@ -1,11 +1,11 @@
-import { gridVisibleColumnDefinitionsSelector } from '../features/columns/gridColumnsSelector';
-import { useGridSelector } from './useGridSelector';
-import { useGridRootProps } from './useGridRootProps';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../features/columnGrouping/gridColumnGroupsSelector';
-import { gridPinnedRowsCountSelector } from '../features/rows/gridRowsSelector';
-import { useGridPrivateApiContext } from './useGridPrivateApiContext';
-import { isMultipleRowSelectionEnabled } from '../features/rowSelection/utils';
-import { gridExpandedRowCountSelector } from '../features/filter/gridFilterSelector';
+import { gridVisibleColumnDefinitionsSelector } from "../features/columns/gridColumnsSelector.js";
+import { useGridSelector } from "./useGridSelector.js";
+import { useGridRootProps } from "./useGridRootProps.js";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../features/columnGrouping/gridColumnGroupsSelector.js";
+import { gridPinnedRowsCountSelector } from "../features/rows/gridRowsSelector.js";
+import { useGridPrivateApiContext } from "./useGridPrivateApiContext.js";
+import { isMultipleRowSelectionEnabled } from "../features/rowSelection/utils.js";
+import { gridExpandedRowCountSelector } from "../features/filter/gridFilterSelector.js";
 export const useGridAriaAttributes = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();

package/modern/hooks/utils/useGridConfiguration.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridConfigurationContext } from '../../components/GridConfigurationContext';
+import { GridConfigurationContext } from "../../components/GridConfigurationContext.js";
 export const useGridConfiguration = () => {
   const configuration = React.useContext(GridConfigurationContext);
   if (configuration === undefined) {

package/modern/hooks/utils/useGridNativeEventListener.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { isFunction } from '../../utils/utils';
-import { useGridLogger } from './useGridLogger';
+import { isFunction } from "../../utils/utils.js";
+import { useGridLogger } from "./useGridLogger.js";
 export const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = useGridLogger(apiRef, 'useNativeEventListener');
   const [added, setAdded] = React.useState(false);

package/modern/hooks/utils/useGridRootProps.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridRootPropsContext } from '../../context/GridRootPropsContext';
+import { GridRootPropsContext } from "../../context/GridRootPropsContext.js";
 export const useGridRootProps = () => {
   const contextValue = React.useContext(GridRootPropsContext);
   if (!contextValue) {

package/modern/hooks/utils/useGridSelector.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
-import { useLazyRef } from './useLazyRef';
-import { useOnMount } from './useOnMount';
-import { warnOnce } from '../../internals/utils/warning';
+import { useLazyRef } from "./useLazyRef.js";
+import { useOnMount } from "./useOnMount.js";
+import { warnOnce } from "../../internals/utils/warning.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }

package/modern/hooks/utils/useGridVisibleRows.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from '../features/pagination/gridPaginationSelector';
-import { gridExpandedSortedRowEntriesSelector } from '../features/filter/gridFilterSelector';
+import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from "../features/pagination/gridPaginationSelector.js";
+import { gridExpandedSortedRowEntriesSelector } from "../features/filter/gridFilterSelector.js";
 export const getVisibleRows = (apiRef, props) => {
   let rows;
   let range;

package/modern/index.js

@@ -1,26 +1,26 @@
 /**
- * @mui/x-data-grid v7.14.0
+ * @mui/x-data-grid v7.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { useGridApiContext } from './hooks/utils/useGridApiContext';
-export { useGridApiRef } from './hooks/utils/useGridApiRef';
-export { useGridRootProps } from './hooks/utils/useGridRootProps';
-export * from './DataGrid';
-export * from './components';
-export * from './constants';
-export * from './hooks';
-export * from './models';
-export * from './context';
-export * from './colDef';
-export * from './utils';
-export { GridColumnHeaders } from './components/GridColumnHeaders';
+export { useGridApiContext } from "./hooks/utils/useGridApiContext.js";
+export { useGridApiRef } from "./hooks/utils/useGridApiRef.js";
+export { useGridRootProps } from "./hooks/utils/useGridRootProps.js";
+export * from "./DataGrid/index.js";
+export * from "./components/index.js";
+export * from "./constants/index.js";
+export * from "./hooks/index.js";
+export * from "./models/index.js";
+export * from "./context/index.js";
+export * from "./colDef/index.js";
+export * from "./utils/index.js";
+export { GridColumnHeaders } from "./components/GridColumnHeaders.js";
 /**
  * Reexportable components.
  */
-export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './components/reexportable';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from "./components/reexportable.js";
 
 /**
  * The full grid API.