@mui/x-data-grid 7.24.1 → 7.26.0

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { ResizeObserver } from "../../../utils/ResizeObserver.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { eslintUseValue } from "../../../utils/utils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { gridDensityFactorSelector } from "../density/densitySelector.js";
-import { gridFilterModelSelector } from "../filter/gridFilterSelector.js";
 import { gridPaginationSelector } from "../pagination/gridPaginationSelector.js";
-import { gridSortModelSelector } from "../sorting/gridSortingSelector.js";
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
-import { gridPinnedRowsSelector } from "./gridRowsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
+import { gridPinnedRowsSelector, gridRowCountSelector } from "./gridRowsSelector.js";
+import { gridDimensionsSelector, gridRowHeightSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { getValidRowHeight, getRowHeightWarning } from "./gridRowsUtils.js";
 /* eslint-disable no-underscore-dangle */
 
@@ -20,10 +19,18 @@ export const rowsMetaStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowsMeta = {
     heights: new Map()
   };
+  const baseRowHeight = gridRowHeightSelector(apiRef.current.state);
+  const dataRowCount = gridRowCountSelector(apiRef);
+  const pagination = gridPaginationSelector(apiRef.current.state);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
   return _extends({}, state, {
     rowsMeta: {
-      currentPageTotalHeight: 0,
-      positions: []
+      currentPageTotalHeight: rowCount * baseRowHeight,
+      positions: Array.from({
+        length: rowCount
+      }, (_, i) => i * baseRowHeight),
+      pinnedTopRowsTotalHeight: 0,
+      pinnedBottomRowsTotalHeight: 0
     }
   });
 };
@@ -43,12 +50,9 @@ export const useGridRowsMeta = (apiRef, props) => {
   const hasRowWithAutoHeight = React.useRef(false);
   const isHeightMetaValid = React.useRef(false);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const paginationState = useGridSelector(apiRef, gridPaginationSelector);
-  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const rowHeight = useGridSelector(apiRef, () => gridDimensionsSelector(apiRef.current.state).rowHeight);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
   const getRowHeightEntry = rowId => {
     let entry = heightCache.get(rowId);
     if (entry === undefined) {
@@ -110,11 +114,17 @@ export const useGridRowsMeta = (apiRef, props) => {
     }
     apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row);
     return entry;
-  }, [apiRef, currentPage.rows.length, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
+  }, [apiRef, currentPage.rows, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    pinnedRows.top.forEach(processHeightEntry);
-    pinnedRows.bottom.forEach(processHeightEntry);
+    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
+    const pinnedBottomRowsTotalHeight = pinnedRows.bottom.reduce((acc, row) => {
+      const entry = processHeightEntry(row);
+      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+    }, 0);
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
@@ -126,14 +136,21 @@ export const useGridRowsMeta = (apiRef, props) => {
       // No row has height=auto, so all rows are already measured
       lastMeasuredRowIndex.current = Infinity;
     }
+    const didHeightsChange = pinnedTopRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedTopRowsTotalHeight || pinnedBottomRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedBottomRowsTotalHeight || currentPageTotalHeight !== apiRef.current.state.rowsMeta.currentPageTotalHeight;
+    const rowsMeta = {
+      currentPageTotalHeight,
+      positions,
+      pinnedTopRowsTotalHeight,
+      pinnedBottomRowsTotalHeight
+    };
     apiRef.current.setState(state => {
       return _extends({}, state, {
-        rowsMeta: {
-          currentPageTotalHeight,
-          positions
-        }
+        rowsMeta
       });
     });
+    if (didHeightsChange) {
+      apiRef.current.updateDimensions();
+    }
     isHeightMetaValid.current = true;
   }, [apiRef, pinnedRows, currentPage.rows, processHeightEntry]);
   const getRowHeight = rowId => {
@@ -181,9 +198,9 @@ export const useGridRowsMeta = (apiRef, props) => {
 
   // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     hydrateRowsMeta();
-  }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
+  }, [hydrateRowsMeta]);
   const rowsMetaApi = {
     unstable_getRowHeight: getRowHeight,
     unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,

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

@@ -24,15 +24,16 @@ export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRow
       id,
       model
     });
-  }
-  const rowNode = rowTree[id];
-  if (rowNode && isAutogeneratedRowNode(rowNode)) {
-    acc.push({
-      id,
-      model: {
-        [GRID_ID_AUTOGENERATED]: id
-      }
-    });
+  } else {
+    const rowNode = rowTree[id];
+    if (rowNode && isAutogeneratedRowNode(rowNode)) {
+      acc.push({
+        id,
+        model: {
+          [GRID_ID_AUTOGENERATED]: id
+        }
+      });
+    }
   }
   return acc;
 }, []));

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

@@ -6,7 +6,7 @@ import { gridRenderContextSelector } from "./gridVirtualizationSelectors.js";
 import { gridFocusCellSelector } from "../focus/index.js";
 import { gridVisibleRowsSelector } from "../pagination/index.js";
 import { gridRowsLookupSelector } from "../rows/index.js";
-const gridIsFocusedCellOutOfContex = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
+const gridIsFocusedCellOutOfContext = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
   if (!focusedCell) {
     return false;
   }
@@ -19,7 +19,7 @@ const gridIsFocusedCellOutOfContex = createSelector(gridFocusCellSelector, gridR
   const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
   return !isInRenderContext;
 });
-export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContex, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridRowsLookupSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
+export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContext, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridRowsLookupSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
   if (!isFocusedCellOutOfRenderContext) {
     return null;
   }

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

@@ -6,15 +6,15 @@ import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
 import { useRtl } from '@mui/system/RtlProvider';
 import reactMajor from '@mui/x-internals/reactMajor';
+import { gridDimensionsSelector, gridColumnsTotalWidthSelector, gridContentHeightSelector, gridHasFillerSelector, gridRowHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { useRunOnce } from "../../utils/useRunOnce.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
 import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { useGridApiEventHandler } from "../../utils/index.js";
+import { useGridApiOptionHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
 import { clamp, range } from "../../../utils/utils.js";
 import { selectedIdsLookupSelector } from "../rowSelection/gridRowSelectionSelector.js";
@@ -25,7 +25,9 @@ import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { minimalContentHeight } from "../rows/gridRowsUtils.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "../columns/index.js";
 import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
@@ -55,28 +57,26 @@ export const useGridVirtualScroller = () => {
   const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef));
   const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedColumns = listView ? {
-    left: [],
-    right: []
-  } : pinnedColumnDefinitions;
+  const pinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+  const pinnedColumns = listView ? EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = useRtl();
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
+  const currentPage = useGridVisibleRows(apiRef);
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const contentHeight = dimensions.contentSize.height;
-  const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
   const isRenderContextReady = React.useRef(false);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
+  const contentHeight = useGridSelector(apiRef, gridContentHeightSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const needsHorizontalScrollbar = useGridSelector(apiRef, needsHorizontalScrollbarSelector);
+  const verticalScrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
@@ -84,7 +84,10 @@ export const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = roundDimensions(initialRect);
+    let lastSize = {
+      width: roundToDecimalPlaces(initialRect.width, 1),
+      height: roundToDecimalPlaces(initialRect.height, 1)
+    };
     if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
       previousSize.current = lastSize;
       apiRef.current.publishEvent('resize', lastSize);
@@ -97,7 +100,10 @@ export const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = roundDimensions(entry.contentRect);
+      const newSize = {
+        width: roundToDecimalPlaces(entry.contentRect.width, 1),
+        height: roundToDecimalPlaces(entry.contentRect.height, 1)
+      };
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -137,7 +143,7 @@ export const useGridVirtualScroller = () => {
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
@@ -152,22 +158,28 @@ export const useGridVirtualScroller = () => {
     });
 
     // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // So we wait until we have valid dimensions before publishing the first event.
-    if (dimensions.isReady && didRowsIntervalChange) {
+    // but only does something if we already have a render context, because
+    // otherwise we would call an update directly on mount
+    const isReady = gridDimensionsSelector(apiRef.current.state).isReady;
+    if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
     previousContextScrollPosition.current = scrollPosition.current;
-  }, [apiRef, dimensions.isReady]);
+  }, [apiRef]);
   const triggerUpdateRenderContext = useEventCallback(() => {
     const scroller = scrollerRef.current;
     if (!scroller) {
       return undefined;
     }
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
+    const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
+    const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
+
+    // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
-      top: scroller.scrollTop,
-      left: scroller.scrollLeft
+      top: clamp(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? clamp(scroller.scrollLeft, -maxScrollLeft, 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -180,7 +192,7 @@ export const useGridVirtualScroller = () => {
     const columnScroll = Math.abs(scrollPosition.current.left - previousContextScrollPosition.current.left);
 
     // PERF: use the computed minimum column width instead of a static one
-    const didCrossThreshold = rowScroll >= dimensions.rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
+    const didCrossThreshold = rowScroll >= rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
     const didChangeDirection = scrollCache.direction !== direction;
     const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
@@ -202,7 +214,7 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -214,40 +226,25 @@ export const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!gridDimensionsSelector(apiRef.current.state).isReady && (enabledForRows || enabledForColumns)) {
+      return;
+    }
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
     // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
   };
-  const handleScroll = useEventCallback(event => {
+  const handleScroll = useEventCallback(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
       return;
     }
-    const {
-      scrollTop,
-      scrollLeft
-    } = event.currentTarget;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
-      return;
-    }
-    if (!isRtl) {
-      if (scrollLeft < 0) {
-        return;
-      }
-    }
-    if (isRtl) {
-      if (scrollLeft > 0) {
-        return;
-      }
-    }
     const nextRenderContext = triggerUpdateRenderContext();
     apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollTop,
-      left: scrollLeft,
+      top: scrollPosition.current.top,
+      left: scrollPosition.current.left,
       renderContext: nextRenderContext
     });
   });
@@ -261,7 +258,12 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const baseRenderContext = params.renderContext ?? renderContext;
+    let baseRenderContext = renderContext;
+    if (params.renderContext) {
+      baseRenderContext = params.renderContext;
+      baseRenderContext.firstColumnIndex = renderContext.firstColumnIndex;
+      baseRenderContext.lastColumnIndex = renderContext.lastColumnIndex;
+    }
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -355,7 +357,7 @@ export const useGridVirtualScroller = () => {
         }
       }
       let currentRenderContext = baseRenderContext;
-      if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
+      if (frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
       const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
@@ -369,9 +371,8 @@ export const useGridVirtualScroller = () => {
         rowId: id,
         index: rowIndex,
         selected: isSelected,
-        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
-        columnsTotalWidth: dimensions.columnsTotalWidth,
+        columnsTotalWidth: columnsTotalWidth,
         rowHeight: baseRowHeight,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
@@ -382,8 +383,8 @@ export const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isVirtualFocusRow,
         showBottomBorder: showBottomBorder,
-        scrollbarWidth: dimensions.hasScrollY ? dimensions.scrollbarSize : 0,
-        gridHasFiller: dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width
+        scrollbarWidth: verticalScrollbarWidth,
+        gridHasFiller: gridHasFiller
       }, rowProps), id));
       if (isVirtualFocusRow) {
         return;
@@ -400,7 +401,6 @@ export const useGridVirtualScroller = () => {
     });
     return rows;
   };
-  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth > outerSize.width;
   const scrollerStyle = React.useMemo(() => ({
     overflowX: !needsHorizontalScrollbar || listView ? 'hidden' : undefined,
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
@@ -436,14 +436,11 @@ export const useGridVirtualScroller = () => {
       scrollerRef.current.scrollLeft = 0;
     }
   }, [listView, scrollerRef]);
-  useRunOnce(outerSize.width !== 0, () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
-    const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-    updateRenderContext(initialRenderContext);
+  useRunOnce(renderContext !== EMPTY_RENDER_CONTEXT, () => {
     apiRef.current.publishEvent('scrollPositionChange', {
       top: scrollPosition.current.top,
       left: scrollPosition.current.left,
-      renderContext: initialRenderContext
+      renderContext
     });
     isRenderContextReady.current = true;
     if (rootProps.initialState?.scroll && scrollerRef.current) {
@@ -496,9 +493,9 @@ export const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  useGridApiEventHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -527,14 +524,23 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
+    }),
+    getScrollAreaProps: () => ({
+      scrollPosition
     })
   };
 };
+// dimension selectors
+function needsHorizontalScrollbarSelector(state) {
+  return state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width;
+}
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
@@ -573,6 +579,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return _extends({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -824,13 +835,4 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
-}
-
-// Round to avoid issues with subpixel rendering
-// https://github.com/mui/mui-x/issues/15721
-function roundDimensions(dimensions) {
-  return {
-    width: Math.round(dimensions.width * 10) / 10,
-    height: Math.round(dimensions.height * 10) / 10
-  };
 }

package/modern/hooks/utils/useGridSelector.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useLazyRef } from "./useLazyRef.js";
-import { useOnMount } from "./useOnMount.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
@@ -42,8 +42,10 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: null
+  args: undefined
 });
+const EMPTY = [];
+const emptyGetSnapshot = () => null;
 
 // TODO v8: Remove this function
 export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
@@ -60,15 +62,31 @@ export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
       const newState = applySelector(apiRef, refs.current.selector);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };
 
@@ -96,14 +114,30 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
       setState(newState);
     }
   }
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
+  const subscribe = React.useCallback(() => {
+    if (refs.current.subscription) {
+      return null;
+    }
+    refs.current.subscription = apiRef.current.store.subscribe(() => {
       const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
     });
-  });
+    return null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  EMPTY);
+  const unsubscribe = React.useCallback(() => {
+    return () => {
+      if (refs.current.subscription) {
+        refs.current.subscription();
+        refs.current.subscription = undefined;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
+  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 };

package/modern/hooks/utils/useIsSSR.js

@@ -0,0 +1,5 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+const emptySubscribe = () => () => {};
+const clientSnapshot = () => false;
+const serverSnapshot = () => true;
+export const useIsSSR = () => useSyncExternalStore(emptySubscribe, clientSnapshot, serverSnapshot);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.24.1
+ * @mui/x-data-grid v7.26.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -22,6 +22,7 @@ export { useGridDensity, densityStateInitializer } from "../hooks/features/densi
 export { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.js";
 export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.js";
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
+export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
 export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
@@ -42,7 +43,6 @@ export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
 export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from "../hooks/features/rows/gridRowsUtils.js";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
-export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
@@ -50,6 +50,7 @@ export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/grid
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
+export * from "../hooks/features/dimensions/gridDimensionsSelectors.js";
 export { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/virtualization/useGridVirtualScroller.js";
 export * from "../hooks/features/virtualization/index.js";

package/modern/models/api/index.js

@@ -1,4 +1,3 @@
-export * from "./gridParamsApi.js";
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
 export * from "./gridRowApi.js";

package/modern/utils/roundToDecimalPlaces.js

@@ -0,0 +1,3 @@
+export function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}

package/modern/utils/utils.js

@@ -196,4 +196,9 @@ export function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
+export function eslintUseValue(_) {}
+export const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};