@mui/x-data-grid 8.8.0 → 8.9.2

package/hooks/features/columns/useGridColumnSpanning.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridColumnSpanning = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridEvent = require("../../utils/useGridEvent");
 /**
@@ -13,36 +11,10 @@ var _useGridEvent = require("../../utils/useGridEvent");
  * @requires useGridParamsApi (method)
  */
 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
   };
@@ -54,62 +26,4 @@ const useGridColumnSpanning = apiRef => {
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnOrderChange', resetColSpan);
 };
-exports.useGridColumnSpanning = useGridColumnSpanning;
-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;
-}
+exports.useGridColumnSpanning = useGridColumnSpanning;

package/hooks/features/columns/useGridColumns.js

@@ -22,6 +22,9 @@ var _preferencesPanel = require("../preferencesPanel");
 var _pivoting = require("../pivoting");
 var _jsxRuntime = require("react/jsx-runtime");
 const columnsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columns = {
+    lastColumnsProp: props.columns
+  };
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
     columnsToUpsert: props.columns,
@@ -45,7 +48,6 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 function useGridColumns(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
-  const previousColumnsProp = React.useRef(props.columns);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -308,27 +310,23 @@ 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 = (0, _gridColumnsUtils.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/hooks/features/dimensions/useGridDimensions.js

@@ -10,11 +10,8 @@ exports.dimensionsStateInitializer = void 0;
 exports.useGridDimensions = useGridDimensions;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
-var _throttle = require("@mui/x-internals/throttle");
-var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _store = require("@mui/x-internals/store");
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _createSelector = require("../../../utils/createSelector");
@@ -22,10 +19,6 @@ var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
 var _density = require("../density");
-var _virtualization = require("../virtualization");
-var _utils = require("../../utils");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
@@ -75,148 +68,10 @@ const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_columns.g
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
-  const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
-  const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const columnsTotalWidth = (0, _utils.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(() => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef), [apiRef]);
-  const setDimensions = React.useCallback(dimensions => {
-    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-      dimensions
-    }));
-    if (apiRef.current.rootElementRef.current) {
-      setCSSVariables(apiRef.current.rootElementRef.current, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef));
-    }
-  }, [apiRef]);
-  const getViewportPageSize = React.useCallback(() => {
-    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef);
-    if (!dimensions.isReady) {
-      return 0;
-    }
-    const currentPage = (0, _useGridVisibleRows.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 = (0, _virtualization.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 = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef);
-    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
-    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
-    const contentSize = {
-      width: columnsTotalWidth,
-      height: (0, _roundToDecimalPlaces.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 ((0, _isDeepEqual.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 = (0, _useEventCallback.default)(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? (0, _throttle.throttle)(() => {
-    updateDimensionCallback();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
-  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     getRootDimensions
   };
@@ -224,14 +79,12 @@ function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
-  (0, _useEnhancedEffect.default)(updateDimensions, [updateDimensions]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
-  const handleRootMount = React.useCallback(root => {
+  const handleRootMount = root => {
     setCSSVariables(root, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef));
-  }, [apiRef]);
-  const handleResize = React.useCallback(size => {
-    rootDimensionsRef.current = size;
+  };
+  const handleResize = size => {
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.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;
@@ -240,17 +93,19 @@ 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]);
+  };
   (0, _useGridEvent.useGridEventPriority)(apiRef, 'rootMount', handleRootMount);
   (0, _useGridEvent.useGridEventPriority)(apiRef, 'resize', handleResize);
   (0, _useGridEvent.useGridEventPriority)(apiRef, 'debouncedResize', props.onResize);
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.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);
@@ -280,31 +135,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 = (0, _ownerDocument.default)(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/hooks/features/export/utils.js

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

package/hooks/features/filter/useGridFilter.js

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

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

@@ -23,7 +23,6 @@ var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilter
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
-var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _createSelector = require("../../../utils/createSelector");
 var _pagination = require("../pagination");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -43,7 +42,6 @@ const gridVisibleRowsWithPinnedRowsSelector = (0, _createSelector.createSelector
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const isRtl = (0, _RtlProvider.useRtl)();
-  const listView = props.listView;
   const getCurrentPageRows = React.useCallback(() => {
     return gridVisibleRowsWithPinnedRowsSelector(apiRef);
   }, [apiRef]);
@@ -66,8 +64,8 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef).field : (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
-    const nonRowSpannedRowId = (0, _utils.findNonRowSpannedCell)(apiRef, rowId, field, rowSpanScanDirection);
+    const field = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
+    const nonRowSpannedRowId = (0, _utils.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);
@@ -77,7 +75,7 @@ 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({
@@ -402,14 +400,12 @@ 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 ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
-    const lastColIndex = visibleColumns.length - 1;
+    const lastColIndex = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -526,7 +522,7 @@ 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/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/hooks/features/keyboardNavigation/utils.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findNonRowSpannedCell = findNonRowSpannedCell;
 exports.getRightColumnIndex = exports.getLeftColumnIndex = void 0;
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
-var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
@@ -43,9 +43,9 @@ const getRightColumnIndex = ({
   return null;
 };
 exports.getRightColumnIndex = getRightColumnIndex;
-function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
-  const rowSpanHiddenCells = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector)(apiRef);
-  if (!rowSpanHiddenCells[rowId]?.[field]) {
+function findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection) {
+  const rowSpanHiddenCells = _xVirtualizer.Rowspan.selectors.hiddenCells(apiRef.current.virtualizer.store.state);
+  if (!rowSpanHiddenCells[rowId]?.[colIndex]) {
     return rowId;
   }
   const filteredSortedRowIds = (0, _gridFilterSelector.gridFilteredSortedRowIdsSelector)(apiRef);
@@ -53,7 +53,7 @@ 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/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/hooks/features/listView/gridListViewSelectors.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridListColumnSelector = void 0;
+exports.gridListViewSelector = exports.gridListColumnSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+const gridListViewSelector = exports.gridListViewSelector = (0, _createSelector.createRootSelector)(state => state.props.listView ?? false);
+
 /**
  * Get the list column definition
  * @category List View

package/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/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/hooks/features/pivoting/gridPivotingSelectors.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPivotPanelOpenSelector = exports.gridPivotInitialColumnsSelector = exports.gridPivotActiveSelector = void 0;
+exports.gridPivotInitialColumnsSelector = exports.gridPivotActiveSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridPivotingStateSelector = (0, _createSelector.createRootSelector)(
 // @ts-ignore
 state => state.pivoting);
 const gridPivotActiveSelector = exports.gridPivotActiveSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.active);
 const emptyColumns = new Map();
-const gridPivotInitialColumnsSelector = exports.gridPivotInitialColumnsSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);
-const gridPivotPanelOpenSelector = exports.gridPivotPanelOpenSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.panelOpen);
+const gridPivotInitialColumnsSelector = exports.gridPivotInitialColumnsSelector = (0, _createSelector.createSelector)(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);