@mui/x-data-grid 8.8.0 → 8.9.2

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/columns/useGridColumns.js

@@ -14,6 +14,9 @@ import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
 import { gridPivotActiveSelector } from "../pivoting/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columns = {
+    lastColumnsProp: props.columns
+  };
   const columnsState = createColumnsState({
     apiRef,
     columnsToUpsert: props.columns,
@@ -36,7 +39,6 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  */
 export function useGridColumns(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useGridColumns');
-  const previousColumnsProp = React.useRef(props.columns);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -299,27 +301,23 @@ export function useGridColumns(apiRef, props) {
    */
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
-  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
+    if (apiRef.current.caches.columns.lastColumnsProp === props.columns) {
       return;
     }
+    apiRef.current.caches.columns.lastColumnsProp = props.columns;
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
-    if (previousColumnsProp.current === props.columns) {
-      return;
-    }
     const columnsState = createColumnsState({
       apiRef,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true,
-      updateInitialVisibilityModel: true
+      updateInitialVisibilityModel: true,
+      columnVisibilityModel: props.columnVisibilityModel
     });
-    previousColumnsProp.current = props.columns;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, props.columnVisibilityModel]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

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/export/utils.js

@@ -17,7 +17,7 @@ export const getColumnsToExport = ({
     }, []);
   }
   const validColumns = options.allColumns ? columns : gridVisibleColumnDefinitionsSelector(apiRef);
-  return validColumns.filter(column => !column.disableExport);
+  return validColumns.filter(column => column.disableExport !== true);
 };
 export const defaultGetRowsToExport = ({
   apiRef

package/esm/hooks/features/filter/useGridFilter.js

@@ -342,9 +342,9 @@ export const useGridFilter = (apiRef, props) => {
   useGridEvent(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
   useGridEvent(apiRef, 'columnVisibilityModelChange', () => {
     const filterModel = gridFilterModelSelector(apiRef);
-    if (filterModel.quickFilterValues && shouldQuickFilterExcludeHiddenColumns(filterModel)) {
+    if (filterModel.quickFilterValues?.length && shouldQuickFilterExcludeHiddenColumns(filterModel)) {
       // re-apply filters because the quick filter results may have changed
-      apiRef.current.unstable_applyFilters();
+      updateFilteredRows();
     }
   });
 
@@ -352,7 +352,7 @@ export const useGridFilter = (apiRef, props) => {
    * 1ST RENDER
    */
   useFirstRender(() => {
-    apiRef.current.unstable_applyFilters();
+    updateFilteredRows();
   });
 
   /**

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

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters" | "listView">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters">) => void;

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

@@ -16,7 +16,6 @@ import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
-import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridVisibleRowsSelector } from "../pagination/index.js";
 import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
@@ -36,7 +35,6 @@ const gridVisibleRowsWithPinnedRowsSelector = createSelectorMemoized(gridVisible
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const isRtl = useRtl();
-  const listView = props.listView;
   const getCurrentPageRows = React.useCallback(() => {
     return gridVisibleRowsWithPinnedRowsSelector(apiRef);
   }, [apiRef]);
@@ -59,8 +57,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = listView ? gridListColumnSelector(apiRef).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
-    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
+    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    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);
@@ -70,7 +68,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       rowIndex: rowIndexRelativeToAllRows
     });
     apiRef.current.setCellFocus(nonRowSpannedRowId, field);
-  }, [apiRef, logger, listView]);
+  }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
     apiRef.current.scrollToIndexes({
@@ -395,14 +393,12 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       return;
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
-    const getColumnIndexFn = listView ? () => 0 : apiRef.current.getColumnIndex;
-    const colIndexBefore = params.field ? getColumnIndexFn(params.field) : 0;
+    const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const visibleColumns = listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
-    const lastColIndex = visibleColumns.length - 1;
+    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -519,7 +515,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
+  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

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/listView/gridListViewSelectors.d.ts

@@ -1,7 +1,14 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import type { GridStateColDef } from "../../../models/colDef/gridColDef.js";
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+export declare const gridListViewSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, boolean>;
 /**
  * Get the list column definition
  * @category List View
  * @ignore - Do not document
  */
-export declare const gridListColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("./useGridListView.js").GridListViewState>;
+export declare const gridListColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridStateColDef>;

package/esm/hooks/features/listView/gridListViewSelectors.js

@@ -1,4 +1,11 @@
 import { createRootSelector } from "../../../utils/createSelector.js";
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+export const gridListViewSelector = createRootSelector(state => state.props.listView ?? false);
+
 /**
  * Get the list column definition
  * @category List View

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/rowSelection/useGridRowSelection.js

@@ -299,12 +299,13 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     const currentSelection = gridRowSelectionStateSelector(apiRef);
     const rowsLookup = gridRowsLookupSelector(apiRef);
+    const rowTree = gridRowTreeSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
     const isNonExistent = id => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
       }
-      return !rowsLookup[id] || filteredRowsLookup[id] === false;
+      return !rowTree[id] || filteredRowsLookup[id] === false;
     };
     const newSelectionModel = {
       type: currentSelection.type,
@@ -430,15 +431,15 @@ export const useGridRowSelection = (apiRef, props) => {
     const filterModel = gridFilterModelSelector(apiRef);
     const quickFilterModel = gridQuickFilterValuesSelector(apiRef);
     const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
-    if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
+    if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && (!isNestedData || props.rowSelectionPropagation?.descendants) && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',
         ids: new Set()
-      });
+      }, 'multipleRowsSelection');
     } else {
       apiRef.current.selectRows(getRowsToBeSelected(), value);
     }
-  }, [apiRef, applyAutoSelection, getRowsToBeSelected, props.checkboxSelectionVisibleOnly, props.isRowSelectable]);
+  }, [apiRef, getRowsToBeSelected, props.checkboxSelectionVisibleOnly, props.isRowSelectable, props.rowSelectionPropagation?.descendants, isNestedData]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     toggleAllRows(params.value);
   }, [toggleAllRows]);