@mui/x-data-grid 8.9.2 → 8.10.1

package/esm/hooks/core/useGridVirtualizer.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { roundToDecimalPlaces } from '@mui/x-internals/math';
+import { lruMemoize } from '@mui/x-internals/lruMemoize';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { useVirtualizer } from '@mui/x-virtualizer';
+import { useVirtualizer, Dimensions } from '@mui/x-virtualizer';
 import { useFirstRender } from "../utils/useFirstRender.js";
 import { createSelector } from "../../utils/createSelector.js";
 import { useGridSelector } from "../utils/useGridSelector.js";
-import { gridContentHeightSelector, gridHasFillerSelector, gridVerticalScrollbarWidthSelector } from "../features/dimensions/gridDimensionsSelectors.js";
+import { gridHasFillerSelector, gridVerticalScrollbarWidthSelector } from "../features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../features/density/index.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../features/columns/gridColumnsSelector.js";
 import { gridPinnedRowsSelector, gridRowCountSelector } from "../features/rows/gridRowsSelector.js";
@@ -31,6 +33,18 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
   return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 
+/** Translates virtualizer state to grid state */
+const addGridDimensionsCreator = () => lruMemoize((dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight) => {
+  return _extends({}, dimensions, {
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight
+  });
+}, {
+  maxSize: 1
+});
+
 /**
  * Virtualizer setup
  */
@@ -46,9 +60,6 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const isRowSelected = id => rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
   const currentPage = useGridVisibleRows(apiRef);
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
-
-  /* TODO: extract dimensions code */
-  const contentHeight = useGridSelector(apiRef, gridContentHeightSelector);
   const verticalScrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const hasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const {
@@ -67,16 +78,17 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const headersTotalHeight = getTotalHeaderHeight(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
-  const dimensions = {
+  const dimensionsParams = {
     rowHeight,
     headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
     columnsTotalWidth,
-    headersTotalHeight,
     leftPinnedWidth,
-    rightPinnedWidth
+    rightPinnedWidth,
+    topPinnedHeight: headersTotalHeight,
+    bottomPinnedHeight: 0,
+    scrollbarSize: rootProps.scrollbarSize
   };
+  const addGridDimensions = useLazyRef(addGridDimensionsCreator).current;
 
   // </DIMENSIONS>
 
@@ -93,32 +105,42 @@ export function useGridVirtualizer(apiRef, rootProps) {
 
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const virtualizer = useVirtualizer({
-    scrollbarSize: rootProps.scrollbarSize,
-    dimensions,
+    refs: {
+      container: apiRef.current.mainElementRef,
+      scroller: apiRef.current.virtualScrollerRef,
+      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+    },
+    dimensions: dimensionsParams,
+    virtualization: {
+      isRtl,
+      rowBufferPx: rootProps.rowBufferPx,
+      columnBufferPx: rootProps.columnBufferPx
+    },
+    colspan: {
+      enabled: hasColSpan,
+      getColspan: (rowId, column) => {
+        if (typeof column.colSpan === 'function') {
+          const row = apiRef.current.getRow(rowId);
+          const value = apiRef.current.getRowValue(row, column);
+          return column.colSpan(value, row, column, apiRef) ?? 0;
+        }
+        return column.colSpan ?? 1;
+      }
+    },
     initialState: {
       scroll: rootProps.initialState?.scroll,
-      dimensions: apiRef.current.state.dimensions,
       rowSpanning: apiRef.current.state.rowSpanning,
       virtualization: apiRef.current.state.virtualization
     },
-    isRtl,
     rows: currentPage.rows,
     range: currentPage.range,
-    rowIdToIndexMap: currentPage.rowIdToIndexMap,
     rowCount,
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
-    hasColSpan,
-    contentHeight,
-    minimalContentHeight,
     autoHeight,
+    minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;
@@ -130,14 +152,20 @@ export function useGridVirtualizer(apiRef, rootProps) {
     getEstimatedRowHeight: React.useMemo(() => getEstimatedRowHeight ? rowEntry => getEstimatedRowHeight(_extends({}, rowEntry, {
       densityFactor: density
     })) : undefined, [getEstimatedRowHeight, density]),
-    getRowSpacing: React.useMemo(() => getRowSpacing ? (rowEntry, visibility) => getRowSpacing(_extends({}, rowEntry, visibility, {
-      indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
-    })) : undefined, [apiRef, getRowSpacing]),
+    getRowSpacing: React.useMemo(() => getRowSpacing ? rowEntry => {
+      const indexRelativeToCurrentPage = currentPage.rowIdToIndexMap.get(rowEntry.id) ?? -1;
+      const visibility = {
+        isFirstVisible: indexRelativeToCurrentPage === 0,
+        isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+        indexRelativeToCurrentPage
+      };
+      return getRowSpacing(_extends({}, rowEntry, visibility, {
+        indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
+      }));
+    } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: useEventCallback((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
     focusedVirtualCell: useEventCallback(() => focusedVirtualCell),
-    rowBufferPx: rootProps.rowBufferPx,
-    columnBufferPx: rootProps.columnBufferPx,
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: useEventCallback(size => apiRef.current.publishEvent('resize', size)),
     onWheel: useEventCallback(event => {
@@ -157,14 +185,6 @@ export function useGridVirtualizer(apiRef, rootProps) {
       });
     },
     scrollReset,
-    getColspan: (rowId, column) => {
-      if (typeof column.colSpan === 'function') {
-        const row = apiRef.current.getRow(rowId);
-        const value = apiRef.current.getRowValue(row, column);
-        return column.colSpan(value, row, column, apiRef) ?? 0;
-      }
-      return column.colSpan ?? 0;
-    },
     renderRow: params => /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
       row: params.model,
       rowId: params.id,
@@ -174,7 +194,7 @@ export function useGridVirtualizer(apiRef, rootProps) {
       columnsTotalWidth: columnsTotalWidth,
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
-      visibleColumns: params.columns,
+      visibleColumns: visibleColumns,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -196,16 +216,16 @@ export function useGridVirtualizer(apiRef, rootProps) {
   //
   // TODO(v9): Remove this
   useFirstRender(() => {
-    apiRef.current.store.state.dimensions = virtualizer.store.state.dimensions;
+    apiRef.current.store.state.dimensions = addGridDimensions(virtualizer.store.state.dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight);
     apiRef.current.store.state.rowsMeta = virtualizer.store.state.rowsMeta;
     apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
   });
+  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (_, dimensions) => {
+    apiRef.current.setState(gridState => _extends({}, gridState, {
+      dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
+    }));
+  });
   useStoreEffect(virtualizer.store, identity, (_, state) => {
-    if (state.dimensions !== apiRef.current.state.dimensions) {
-      apiRef.current.setState(gridState => _extends({}, gridState, {
-        dimensions: state.dimensions
-      }));
-    }
     if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => _extends({}, gridState, {
         rowsMeta: state.rowsMeta

package/esm/hooks/features/dataSource/cache.js

@@ -6,9 +6,6 @@ export class GridDataSourceCacheDefault {
     ttl = 300_000,
     getKey = getKeyDefault
   }) {
-    this.cache = void 0;
-    this.ttl = void 0;
-    this.getKey = void 0;
     this.cache = {};
     this.ttl = ttl;
     this.getKey = getKey;

package/esm/hooks/features/dataSource/gridDataSourceError.js

@@ -1,30 +1,30 @@
 export class GridGetRowsError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+
+  /**
+   * The original error that caused this error
+   */
+
   constructor(options) {
     super(options.message);
-    /**
-     * The parameters used in the failed request
-     */
-    this.params = void 0;
-    /**
-     * The original error that caused this error
-     */
-    this.cause = void 0;
     this.name = 'GridGetRowsError';
     this.params = options.params;
     this.cause = options.cause;
   }
 }
 export class GridUpdateRowError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+
+  /**
+   * The original error that caused this error
+   */
+
   constructor(options) {
     super(options.message);
-    /**
-     * The parameters used in the failed request
-     */
-    this.params = void 0;
-    /**
-     * The original error that caused this error
-     */
-    this.cause = void 0;
     this.name = 'GridUpdateRowError';
     this.params = options.params;
     this.cause = options.cause;

package/esm/hooks/features/dataSource/models.d.ts

@@ -1,15 +1,24 @@
 import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams } from "../../../models/gridDataSource.js";
 import type { GridRowId, GridRowModel } from "../../../models/gridRows.js";
 import type { GridDataSourceCacheDefaultConfig } from "./cache.js";
+/**
+ * The parameters for the `fetchRows` method.
+ */
+export interface GridDataSourceFetchRowsParams extends Partial<GridGetRowsParams> {
+  /**
+   * If `true`, bypasses the cache and forces a refetch of the rows from the server.
+   */
+  skipCache?: boolean;
+}
 export interface GridDataSourceApiBase {
   /**
    * Fetches the rows from the server.
    * If no `parentId` option is provided, it fetches the root rows.
    * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
    * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
-   * @param {Partial<GridGetRowsParams>} params Request parameters override.
+   * @param {GridDataSourceFetchRowsParams} params Request parameters override.
    */
-  fetchRows: (parentId?: GridRowId, params?: Partial<GridGetRowsParams>) => void;
+  fetchRows: (parentId?: GridRowId, params?: GridDataSourceFetchRowsParams) => void;
   /**
    * The data source cache object.
    */

package/esm/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -10,7 +10,7 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   api: {
     public: GridDataSourceApi;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: Partial<import("@mui/x-data-grid").GridGetRowsParams>) => void) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams) => void) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["skipCache"];
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import debounce from '@mui/utils/debounce';
@@ -53,10 +55,15 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
       return;
     }
     options.clearDataSourceState?.();
-    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), params);
+    const _ref = params || {},
+      {
+        skipCache
+      } = _ref,
+      getRowsParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
     const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
     const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
-    if (responses.every(response => response !== undefined)) {
+    if (!skipCache && responses.every(response => response !== undefined)) {
       apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
         response: CacheChunkManager.mergeResponses(responses),
         fetchParams

package/esm/hooks/features/dataSource/utils.js

@@ -18,57 +18,56 @@ export class CacheChunkManager {
    * Has no effect if cursor pagination is used.
    */
   constructor(chunkSize) {
-    this.chunkSize = void 0;
-    this.getCacheKeys = key => {
-      if (this.chunkSize < 1 || typeof key.start !== 'number') {
-        return [key];
-      }
-
-      // split the range into chunks
-      const chunkedKeys = [];
-      for (let i = key.start; i <= key.end; i += this.chunkSize) {
-        const end = Math.min(i + this.chunkSize - 1, key.end);
-        chunkedKeys.push(_extends({}, key, {
-          start: i,
-          end
-        }));
-      }
-      return chunkedKeys;
-    };
-    this.splitResponse = (key, response) => {
-      const cacheKeys = this.getCacheKeys(key);
-      if (cacheKeys.length === 1) {
-        return new Map([[key, response]]);
-      }
-      const responses = new Map();
-      cacheKeys.forEach(chunkKey => {
-        const isLastChunk = chunkKey.end === key.end;
-        const responseSlice = _extends({}, response, {
-          pageInfo: _extends({}, response.pageInfo, {
-            // If the original response had page info, update that information for all but last chunk and keep the original value for the last chunk
-            hasNextPage: response.pageInfo?.hasNextPage !== undefined && !isLastChunk ? true : response.pageInfo?.hasNextPage,
-            nextCursor: response.pageInfo?.nextCursor !== undefined && !isLastChunk ? response.rows[chunkKey.end + 1].id : response.pageInfo?.nextCursor
-          }),
-          rows: typeof chunkKey.start !== 'number' || typeof key.start !== 'number' ? response.rows : response.rows.slice(chunkKey.start - key.start, chunkKey.end - key.start + 1)
-        });
-        responses.set(chunkKey, responseSlice);
-      });
-      return responses;
-    };
     this.chunkSize = chunkSize;
   }
-}
-CacheChunkManager.mergeResponses = responses => {
-  if (responses.length === 1) {
-    return responses[0];
-  }
-  return responses.reduce((acc, response) => ({
-    rows: [...acc.rows, ...response.rows],
-    rowCount: response.rowCount,
-    pageInfo: response.pageInfo
-  }), {
-    rows: [],
-    rowCount: 0,
-    pageInfo: {}
-  });
-};
+  getCacheKeys = key => {
+    if (this.chunkSize < 1 || typeof key.start !== 'number') {
+      return [key];
+    }
+
+    // split the range into chunks
+    const chunkedKeys = [];
+    for (let i = key.start; i <= key.end; i += this.chunkSize) {
+      const end = Math.min(i + this.chunkSize - 1, key.end);
+      chunkedKeys.push(_extends({}, key, {
+        start: i,
+        end
+      }));
+    }
+    return chunkedKeys;
+  };
+  splitResponse = (key, response) => {
+    const cacheKeys = this.getCacheKeys(key);
+    if (cacheKeys.length === 1) {
+      return new Map([[key, response]]);
+    }
+    const responses = new Map();
+    cacheKeys.forEach(chunkKey => {
+      const isLastChunk = chunkKey.end === key.end;
+      const responseSlice = _extends({}, response, {
+        pageInfo: _extends({}, response.pageInfo, {
+          // If the original response had page info, update that information for all but last chunk and keep the original value for the last chunk
+          hasNextPage: response.pageInfo?.hasNextPage !== undefined && !isLastChunk ? true : response.pageInfo?.hasNextPage,
+          nextCursor: response.pageInfo?.nextCursor !== undefined && !isLastChunk ? response.rows[chunkKey.end + 1].id : response.pageInfo?.nextCursor
+        }),
+        rows: typeof chunkKey.start !== 'number' || typeof key.start !== 'number' ? response.rows : response.rows.slice(chunkKey.start - key.start, chunkKey.end - key.start + 1)
+      });
+      responses.set(chunkKey, responseSlice);
+    });
+    return responses;
+  };
+  static mergeResponses = responses => {
+    if (responses.length === 1) {
+      return responses[0];
+    }
+    return responses.reduce((acc, response) => ({
+      rows: [...acc.rows, ...response.rows],
+      rowCount: response.rowCount,
+      pageInfo: response.pageInfo
+    }), {
+      rows: [],
+      rowCount: 0,
+      pageInfo: {}
+    });
+  };
+}

package/esm/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -1,62 +1,5 @@
-import type { ElementSize } from "../../../models/elementSize.js";
-export interface GridDimensions {
-  /**
-   * Indicates that the dimensions have been initialized.
-   */
-  isReady: boolean;
-  /**
-   * The root container size.
-   */
-  root: ElementSize;
-  /**
-   * The viewport size including scrollbars.
-   */
-  viewportOuterSize: ElementSize;
-  /**
-   * The viewport size not including scrollbars.
-   */
-  viewportInnerSize: ElementSize;
-  /**
-   * The size of the main content (unpinned rows & columns).
-   */
-  contentSize: ElementSize;
-  /**
-   * The minimum size to display the grid, including all pinned sections and headers.
-   */
-  minimumSize: ElementSize;
-  /**
-   * Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column.
-   */
-  hasScrollX: boolean;
-  /**
-   * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
-   */
-  hasScrollY: boolean;
-  /**
-   * Size of the scrollbar used to scroll the rows in pixel.
-   * It is defined even when the scrollbar is currently not needed.
-   */
-  scrollbarSize: number;
-  /**
-   * Width of a row.
-   */
-  rowWidth: number;
-  /**
-   * Height of a row.
-   */
-  rowHeight: number;
-  /**
-   * Size of all the visible columns.
-   */
-  columnsTotalWidth: number;
-  /**
-   * Size of left pinned columns.
-   */
-  leftPinnedWidth: number;
-  /**
-   * Size of right pinned columns.
-   */
-  rightPinnedWidth: number;
+import type { DimensionsState } from '@mui/x-virtualizer/models';
+export interface GridDimensions extends DimensionsState {
   /**
    * Height of one column header.
    */
@@ -73,14 +16,6 @@ export interface GridDimensions {
    * Height of all the column headers.
    */
   headersTotalHeight: number;
-  /**
-   * Size of the top container.
-   */
-  topContainerHeight: number;
-  /**
-   * Size of the bottom container.
-   */
-  bottomContainerHeight: number;
 }
 export interface GridDimensionsApi {
   /**

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

@@ -3,7 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { Dimensions } from '@mui/x-virtualizer';
 import { useGridEventPriority } from "../../utils/useGridEvent.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { createSelector } from "../../../utils/createSelector.js";
@@ -57,8 +56,6 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
   return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 export function useGridDimensions(apiRef, props) {
-  const logger = useGridLogger(apiRef, 'useResizeContainer');
-  const errorShown = React.useRef(false);
   const virtualizer = apiRef.current.virtualizer;
   const updateDimensions = virtualizer.api.updateDimensions;
   const getViewportPageSize = virtualizer.api.getViewportPageSize;
@@ -75,20 +72,28 @@ export function useGridDimensions(apiRef, props) {
   const handleRootMount = root => {
     setCSSVariables(root, gridDimensionsSelector(apiRef));
   };
-  const handleResize = size => {
-    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
-      errorShown.current = true;
-    }
-    if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
-      errorShown.current = true;
-    }
-  };
   useGridEventPriority(apiRef, 'rootMount', handleRootMount);
-  useGridEventPriority(apiRef, 'resize', handleResize);
   useGridEventPriority(apiRef, 'debouncedResize', props.onResize);
-  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (previous, next) => {
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const logger = useGridLogger(apiRef, 'useResizeContainer');
+    const errorShown = React.useRef(false);
+    useGridEventPriority(apiRef, 'resize', size => {
+      if (!getRootDimensions().isReady) {
+        return;
+      }
+      if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+        logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+        errorShown.current = true;
+      }
+      if (size.width === 0 && !errorShown.current && !isJSDOM) {
+        logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+        errorShown.current = true;
+      }
+    });
+    /* eslint-enable react-hooks/rules-of-hooks */
+  }
+  useStoreEffect(apiRef.current.store, s => s.dimensions, (previous, next) => {
     if (apiRef.current.rootElementRef.current) {
       setCSSVariables(apiRef.current.rootElementRef.current, next);
     }

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -343,7 +343,10 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-    columns.filter(column => column.editable && !!column.preProcessEditCellProps && deleteValue).forEach(column => {
+    columns.filter(column => {
+      const isCellEditable = apiRef.current.getCellParams(id, column.field).isEditable;
+      return isCellEditable && column.editable && !!column.preProcessEditCellProps && deleteValue;
+    }).forEach(column => {
       const field = column.field;
       const value = apiRef.current.getCellValue(id, field);
       const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;

package/esm/hooks/features/export/serializers/csvSerializer.js

@@ -44,10 +44,9 @@ export const serializeCellValue = (cellParams, options) => {
   return sanitizeCellValue(value, csvOptions);
 };
 class CSVRow {
+  rowString = '';
+  isEmpty = true;
   constructor(options) {
-    this.options = void 0;
-    this.rowString = '';
-    this.isEmpty = true;
     this.options = options;
   }
   addValue(value) {

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

@@ -107,11 +107,11 @@ export const useGridPrintExport = (apiRef, props) => {
 
     // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
     gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
+    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbar}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
     const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
-      gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
+      gridClone.querySelector(`.${gridClasses.toolbar}`)?.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter && gridFooterElement) {
@@ -209,12 +209,7 @@ export const useGridPrintExport = (apiRef, props) => {
       }));
     }
     previousVirtualizationState.current = apiRef.current.state.virtualization;
-    apiRef.current.setState(state => _extends({}, state, {
-      virtualization: _extends({}, state.virtualization, {
-        enabled: false,
-        enabledForColumns: false
-      })
-    }));
+    apiRef.current.unstable_setVirtualization(false);
     await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
     updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
     await raf(); // wait for the state changes to take action

package/esm/hooks/features/rowReorder/gridRowReorderInterfaces.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The row reorder state.
+ */
+export interface GridRowReorderState {
+  /**
+   * Whether a row drag operation is currently active.
+   */
+  isActive: boolean;
+}

package/esm/hooks/features/rowReorder/gridRowReorderInterfaces.js

@@ -0,0 +1 @@
+export {};

package/esm/hooks/features/rowReorder/gridRowReorderSelector.d.ts

@@ -0,0 +1,5 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridRowReorderStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("./gridRowReorderInterfaces.js").GridRowReorderState>;
+export declare const gridIsRowDragActiveSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;

package/esm/hooks/features/rowReorder/gridRowReorderSelector.js

@@ -0,0 +1,3 @@
+import { createRootSelector, createSelector } from "../../../utils/createSelector.js";
+export const gridRowReorderStateSelector = createRootSelector(state => state.rowReorder);
+export const gridIsRowDragActiveSelector = createSelector(gridRowReorderStateSelector, rowReorder => rowReorder?.isActive ?? false);