@mui/x-data-grid 8.9.1 → 8.10.0

package/esm/hooks/features/columns/useGridColumnSpanning.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridEvent } from "../../utils/useGridEvent.js";
 /**
@@ -6,36 +5,10 @@ import { useGridEvent } from "../../utils/useGridEvent.js";
  * @requires useGridParamsApi (method)
  */
 export const useGridColumnSpanning = apiRef => {
-  const lookup = React.useRef({});
-  const getCellColSpanInfo = (rowId, columnIndex) => {
-    return lookup.current[rowId]?.[columnIndex];
-  };
-  const resetColSpan = () => {
-    lookup.current = {};
-  };
-
-  // Calculate `colSpan` for each cell in the row
-  const calculateColSpan = React.useCallback(({
-    rowId,
-    minFirstColumn,
-    maxLastColumn,
-    columns
-  }) => {
-    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
-      const cellProps = calculateCellColSpan({
-        apiRef,
-        lookup: lookup.current,
-        columnIndex: i,
-        rowId,
-        minFirstColumnIndex: minFirstColumn,
-        maxLastColumnIndex: maxLastColumn,
-        columns
-      });
-      if (cellProps.colSpan > 1) {
-        i += cellProps.colSpan - 1;
-      }
-    }
-  }, [apiRef]);
+  const virtualizer = apiRef.current.virtualizer;
+  const resetColSpan = virtualizer.api.resetColSpan;
+  const getCellColSpanInfo = virtualizer.api.getCellColSpanInfo;
+  const calculateColSpan = virtualizer.api.calculateColSpan;
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };
@@ -46,62 +19,4 @@ export const useGridColumnSpanning = apiRef => {
   useGridApiMethod(apiRef, columnSpanningPublicApi, 'public');
   useGridApiMethod(apiRef, columnSpanningPrivateApi, 'private');
   useGridEvent(apiRef, 'columnOrderChange', resetColSpan);
-};
-function calculateCellColSpan(params) {
-  const {
-    apiRef,
-    lookup,
-    columnIndex,
-    rowId,
-    minFirstColumnIndex,
-    maxLastColumnIndex,
-    columns
-  } = params;
-  const columnsLength = columns.length;
-  const column = columns[columnIndex];
-  const row = apiRef.current.getRow(rowId);
-  const value = apiRef.current.getRowValue(row, column);
-  const colSpan = typeof column.colSpan === 'function' ? column.colSpan(value, row, column, apiRef) : column.colSpan;
-  if (!colSpan || colSpan === 1) {
-    setCellColSpanInfo(lookup, rowId, columnIndex, {
-      spannedByColSpan: false,
-      cellProps: {
-        colSpan: 1,
-        width: column.computedWidth
-      }
-    });
-    return {
-      colSpan: 1
-    };
-  }
-  let width = column.computedWidth;
-  for (let j = 1; j < colSpan; j += 1) {
-    const nextColumnIndex = columnIndex + j;
-    // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
-    if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-      const nextColumn = columns[nextColumnIndex];
-      width += nextColumn.computedWidth;
-      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
-        spannedByColSpan: true,
-        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
-        leftVisibleCellIndex: columnIndex
-      });
-    }
-    setCellColSpanInfo(lookup, rowId, columnIndex, {
-      spannedByColSpan: false,
-      cellProps: {
-        colSpan,
-        width
-      }
-    });
-  }
-  return {
-    colSpan
-  };
-}
-function setCellColSpanInfo(lookup, rowId, columnIndex, cellColSpanInfo) {
-  if (!lookup[rowId]) {
-    lookup[rowId] = {};
-  }
-  lookup[rowId][columnIndex] = cellColSpanInfo;
-}
+};

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/dimensions/useGridDimensions.js

@@ -2,11 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerDocument from '@mui/utils/ownerDocument';
-import { throttle } from '@mui/x-internals/throttle';
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+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";
@@ -14,10 +11,6 @@ import { useGridLogger } from "../../utils/useGridLogger.js";
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
 import { gridDimensionsSelector } from "./gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../density/index.js";
-import { gridRenderContextSelector } from "../virtualization/index.js";
-import { useGridSelector } from "../../utils/index.js";
-import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
@@ -66,148 +59,10 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
-  const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
-  const isFirstSizing = React.useRef(true);
-  const {
-    rowHeight,
-    headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
-    headersTotalHeight,
-    leftPinnedWidth,
-    rightPinnedWidth
-  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
+  const virtualizer = apiRef.current.virtualizer;
+  const updateDimensions = virtualizer.api.updateDimensions;
+  const getViewportPageSize = virtualizer.api.getViewportPageSize;
   const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef), [apiRef]);
-  const setDimensions = React.useCallback(dimensions => {
-    apiRef.current.setState(state => _extends({}, state, {
-      dimensions
-    }));
-    if (apiRef.current.rootElementRef.current) {
-      setCSSVariables(apiRef.current.rootElementRef.current, gridDimensionsSelector(apiRef));
-    }
-  }, [apiRef]);
-  const getViewportPageSize = React.useCallback(() => {
-    const dimensions = gridDimensionsSelector(apiRef);
-    if (!dimensions.isReady) {
-      return 0;
-    }
-    const currentPage = getVisibleRows(apiRef);
-
-    // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
-    // to find out the maximum number of rows that can fit in the visible part of the grid
-    if (props.getRowHeight) {
-      const renderContext = gridRenderContextSelector(apiRef);
-      const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
-      return Math.min(viewportPageSize - 1, currentPage.rows.length);
-    }
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.getRowHeight, rowHeight]);
-  const updateDimensions = React.useCallback(() => {
-    if (isFirstSizing.current) {
-      return;
-    }
-    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
-    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-    // https://github.com/mui/mui-x/issues/15721
-    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
-    const rowsMeta = gridRowsMetaSelector(apiRef);
-    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
-    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
-    const contentSize = {
-      width: columnsTotalWidth,
-      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
-    };
-    let viewportOuterSize;
-    let viewportInnerSize;
-    let hasScrollX = false;
-    let hasScrollY = false;
-    if (props.autoHeight) {
-      hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: topContainerHeight + bottomContainerHeight + contentSize.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
-        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
-      };
-    } else {
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width),
-        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
-      };
-      const content = contentSize;
-      const container = viewportInnerSize;
-      const hasScrollXIfNoYScrollBar = content.width > container.width;
-      const hasScrollYIfNoXScrollBar = content.height > container.height;
-      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
-        hasScrollY = hasScrollYIfNoXScrollBar;
-        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
-
-        // We recalculate the scroll y to consider the size of the x scrollbar.
-        if (hasScrollX) {
-          hasScrollY = content.height + scrollbarSize > container.height;
-        }
-      }
-      if (hasScrollY) {
-        viewportInnerSize.width -= scrollbarSize;
-      }
-      if (hasScrollX) {
-        viewportInnerSize.height -= scrollbarSize;
-      }
-    }
-    const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
-    const minimumSize = {
-      width: columnsTotalWidth,
-      height: topContainerHeight + contentSize.height + bottomContainerHeight
-    };
-    const newDimensions = {
-      isReady: true,
-      root: rootDimensionsRef.current,
-      viewportOuterSize,
-      viewportInnerSize,
-      contentSize,
-      minimumSize,
-      hasScrollX,
-      hasScrollY,
-      scrollbarSize,
-      headerHeight,
-      groupHeaderHeight,
-      headerFilterHeight,
-      rowWidth,
-      rowHeight,
-      columnsTotalWidth,
-      leftPinnedWidth,
-      rightPinnedWidth,
-      headersTotalHeight,
-      topContainerHeight,
-      bottomContainerHeight
-    };
-    const prevDimensions = apiRef.current.state.dimensions;
-    if (isDeepEqual(prevDimensions, newDimensions)) {
-      return;
-    }
-    setDimensions(newDimensions);
-    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
-    }
-    apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
-  const updateDimensionCallback = useEventCallback(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? throttle(() => {
-    updateDimensionCallback();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
-  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     getRootDimensions
   };
@@ -215,14 +70,12 @@ export function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
   useGridApiMethod(apiRef, apiPublic, 'public');
   useGridApiMethod(apiRef, apiPrivate, 'private');
-  const handleRootMount = React.useCallback(root => {
+  const handleRootMount = root => {
     setCSSVariables(root, gridDimensionsSelector(apiRef));
-  }, [apiRef]);
-  const handleResize = React.useCallback(size => {
-    rootDimensionsRef.current = size;
+  };
+  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;
@@ -231,17 +84,19 @@ export function useGridDimensions(apiRef, props) {
       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;
     }
-    if (isFirstSizing.current || !debouncedUpdateDimensions) {
-      // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      isFirstSizing.current = false;
-      updateDimensions();
-      return;
-    }
-    debouncedUpdateDimensions();
-  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  };
   useGridEventPriority(apiRef, 'rootMount', handleRootMount);
   useGridEventPriority(apiRef, 'resize', handleResize);
   useGridEventPriority(apiRef, 'debouncedResize', props.onResize);
+  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (previous, next) => {
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, next);
+    }
+    if (!areElementSizesEqual(next.viewportInnerSize, previous.viewportInnerSize)) {
+      apiRef.current.publishEvent('viewportInnerSizeChange', next.viewportInnerSize);
+    }
+    apiRef.current.publishEvent('debouncedResize', next.root);
+  });
 }
 function setCSSVariables(root, dimensions) {
   const set = (k, v) => root.style.setProperty(k, v);
@@ -271,31 +126,6 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
     rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
   };
 }
-const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(element, scrollbarSize) {
-  if (scrollbarSize !== undefined) {
-    return scrollbarSize;
-  }
-  if (element === null) {
-    return 0;
-  }
-  const cachedSize = scrollbarSizeCache.get(element);
-  if (cachedSize !== undefined) {
-    return cachedSize;
-  }
-  const doc = ownerDocument(element);
-  const scrollDiv = doc.createElement('div');
-  scrollDiv.style.width = '99px';
-  scrollDiv.style.height = '99px';
-  scrollDiv.style.position = 'absolute';
-  scrollDiv.style.overflow = 'scroll';
-  scrollDiv.className = 'scrollDiv';
-  element.appendChild(scrollDiv);
-  const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  element.removeChild(scrollDiv);
-  scrollbarSizeCache.set(element, size);
-  return size;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

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/keyboardNavigation/useGridKeyboardNavigation.js

@@ -58,7 +58,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       }
     }
     const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
-    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
+    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
     const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === nonRowSpannedRowId);

package/esm/hooks/features/keyboardNavigation/utils.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridColDef, GridRowId } from "../../../models/index.js";
-import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridRowId } from "../../../models/index.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 export declare const getLeftColumnIndex: ({
   currentColIndex,
   firstColIndex,
@@ -23,4 +23,4 @@ export declare const getRightColumnIndex: ({
   lastColIndex: number;
   isRtl: boolean;
 }) => number | null;
-export declare function findNonRowSpannedCell(apiRef: RefObject<GridApiCommunity>, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down'): GridRowId;
+export declare function findNonRowSpannedCell(apiRef: RefObject<GridPrivateApiCommunity>, rowId: GridRowId, colIndex: number, rowSpanScanDirection: 'up' | 'down'): GridRowId;

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

@@ -1,5 +1,5 @@
+import { Rowspan } from '@mui/x-virtualizer';
 import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.js";
-import { gridRowSpanningHiddenCellsSelector } from "../rows/gridRowSpanningSelectors.js";
 export const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
@@ -34,9 +34,9 @@ export const getRightColumnIndex = ({
   }
   return null;
 };
-export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
-  const rowSpanHiddenCells = gridRowSpanningHiddenCellsSelector(apiRef);
-  if (!rowSpanHiddenCells[rowId]?.[field]) {
+export function findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection) {
+  const rowSpanHiddenCells = Rowspan.selectors.hiddenCells(apiRef.current.virtualizer.store.state);
+  if (!rowSpanHiddenCells[rowId]?.[colIndex]) {
     return rowId;
   }
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
@@ -44,7 +44,7 @@ export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection
   let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
   while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {
     const nextRowId = filteredSortedRowIds[nextRowIndex];
-    if (!rowSpanHiddenCells[nextRowId]?.[field]) {
+    if (!rowSpanHiddenCells[nextRowId]?.[colIndex]) {
       return nextRowId;
     }
     nextRowIndex += rowSpanScanDirection === 'down' ? 1 : -1;

package/esm/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -2,7 +2,6 @@ import type { GridRowModelUpdate } from '@mui/x-data-grid';
 import type { GridColDef } from "../../../models/colDef/index.js";
 export interface GridPivotingStatePartial {
   active: boolean;
-  panelOpen: boolean;
   initialColumns: Map<string, GridColDef> | undefined;
 }
 export interface GridPivotingPrivateApiCommunity {

package/esm/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -5,7 +5,4 @@ export declare const gridPivotActiveSelector: (args_0: import("react").RefObject
 } | null>) => boolean;
 export declare const gridPivotInitialColumnsSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => Map<string, GridColDef>;
-export declare const gridPivotPanelOpenSelector: (args_0: import("react").RefObject<{
-  state: GridStateCommunity;
-} | null>) => boolean;
+} | null>) => Map<string, GridColDef>;

package/esm/hooks/features/pivoting/gridPivotingSelectors.js

@@ -4,5 +4,4 @@ const gridPivotingStateSelector = createRootSelector(
 state => state.pivoting);
 export const gridPivotActiveSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.active);
 const emptyColumns = new Map();
-export const gridPivotInitialColumnsSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);
-export const gridPivotPanelOpenSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.panelOpen);
+export const gridPivotInitialColumnsSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);

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);

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -43,7 +43,8 @@ export const useGridRowSelection = (apiRef, props) => {
       callback(...args);
     }
   }, [props.rowSelection]);
-  const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
+  const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
+  const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants) && isNestedData;
   const propRowSelectionModel = React.useMemo(() => {
     return props.rowSelectionModel;
   }, [props.rowSelectionModel]);
@@ -62,7 +63,6 @@ export const useGridRowSelection = (apiRef, props) => {
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
   const tree = useGridSelector(apiRef, gridRowTreeSelector);
-  const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;

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

@@ -137,6 +137,11 @@ export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendant
         }
       }
     };
+    // For root level rows, we don't need to traverse parents
+    const rowNode = tree[selectedRow];
+    if (!rowNode || rowNode.parent === GRID_ROOT_GROUP_ID) {
+      return;
+    }
     traverseParents(selectedRow);
   }
 };

package/esm/hooks/features/rows/gridRowsMetaInterfaces.d.ts

@@ -1,12 +1,6 @@
+import type { HeightEntry } from '@mui/x-virtualizer/models';
 import { GridRowId } from "../../../models/gridRows.js";
-export type HeightEntry = {
-  content: number;
-  spacingTop: number;
-  spacingBottom: number;
-  detail: number;
-  autoHeight: boolean;
-  needsFirstMeasurement: boolean;
-};
+export type { HeightEntry } from '@mui/x-virtualizer/models';
 export type HeightCache = Map<GridRowId, HeightEntry>;
 export interface GridRowsMetaInternalCache {
   /**

package/esm/hooks/features/rows/gridRowsMetaState.d.ts

@@ -1,21 +1,5 @@
+import { RowsMetaState } from '@mui/x-virtualizer/models';
 /**
  * The grid rows total height and row positions.
  */
-export interface GridRowsMetaState {
-  /**
-   * The sum of all visible grid rows in the current rows.
-   */
-  currentPageTotalHeight: number;
-  /**
-   * The grid rows positions.
-   */
-  positions: number[];
-  /**
-   * The total height of the pinned top rows.
-   */
-  pinnedTopRowsTotalHeight: number;
-  /**
-   * The total height of the pinned bottom rows.
-   */
-  pinnedBottomRowsTotalHeight: number;
-}
+export interface GridRowsMetaState extends RowsMetaState {}

package/esm/hooks/features/rows/useGridRowAriaAttributes.js

@@ -9,7 +9,9 @@ export const useGridRowAriaAttributes = () => {
     const ariaAttributes = {};
     const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
     ariaAttributes['aria-rowindex'] = ariaRowIndex;
-    if (apiRef.current.isRowSelectable(rowNode.id)) {
+
+    // XXX: fix this properly
+    if (rowNode && apiRef.current.isRowSelectable(rowNode.id)) {
       ariaAttributes['aria-selected'] = apiRef.current.isRowSelected(rowNode.id);
     }
     return ariaAttributes;

package/esm/hooks/features/rows/useGridRowSpanning.d.ts

@@ -1,19 +1,9 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridColDef } from "../../../models/colDef/index.js";
-import type { GridRowId } from "../../../models/gridRows.js";
+import { RowSpanningState } from '@mui/x-virtualizer/models';
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-export interface GridRowSpanningState {
-  spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
-  hiddenCells: Record<GridRowId, Record<GridColDef['field'], boolean>>;
-  /**
-   * For each hidden cell, it contains the row index corresponding to the cell that is
-   * the origin of the hidden cell. i.e. the cell which is spanned.
-   * Used by the virtualization to properly keep the spanned cells in view.
-   */
-  hiddenCellOriginMap: Record<number, Record<GridColDef['field'], number>>;
-}
+export interface GridRowSpanningState extends RowSpanningState {}
 export type RowRange = {
   firstRowIndex: number;
   lastRowIndex: number;