@mui/x-data-grid 7.24.0 → 7.25.0

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

@@ -30,37 +30,52 @@ export function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  const getCellParams = React.useCallback((id, field) => {
-    const colDef = props.unstable_listView ? gridListColumnSelector(apiRef.current.state) : apiRef.current.getColumn(field);
-    const row = apiRef.current.getRow(id);
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
+  const getCellParamsForRow = React.useCallback((id, field, row, {
+    cellMode,
+    colDef,
+    hasFocus,
+    rowNode,
+    tabIndex
+  }) => {
     const rawValue = row[field];
     const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
-    const cellFocus = gridFocusCellSelector(apiRef);
-    const cellTabIndex = gridTabIndexCellSelector(apiRef);
     const params = {
       id,
       field,
       row,
       rowNode,
       colDef,
-      cellMode: apiRef.current.getCellMode(id, field),
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      cellMode,
+      hasFocus,
+      tabIndex,
       value,
       formattedValue: value,
       isEditable: false,
-      api: {}
+      api: null
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
-  }, [apiRef, props.unstable_listView]);
+  }, [apiRef]);
+  const getCellParams = React.useCallback((id, field) => {
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+    if (!row || !rowNode) {
+      throw new MissingRowIdError(`No row with id #${id} found`);
+    }
+    const cellFocus = gridFocusCellSelector(apiRef);
+    const cellTabIndex = gridTabIndexCellSelector(apiRef);
+    const cellMode = apiRef.current.getCellMode(id, field);
+    return apiRef.current.getCellParamsForRow(id, field, row, {
+      colDef: props.unstable_listView && props.unstable_listColumn?.field === field ? gridListColumnSelector(apiRef.current.state) : apiRef.current.getColumn(field),
+      rowNode,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      cellMode
+    });
+  }, [apiRef, props.unstable_listView, props.unstable_listColumn?.field]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
@@ -119,5 +134,9 @@ export function useGridParamsApi(apiRef, props) {
     getColumnHeaderParams,
     getColumnHeaderElement
   };
+  const paramsPrivateApi = {
+    getCellParamsForRow
+  };
   useGridApiMethod(apiRef, paramsApi, 'public');
+  useGridApiMethod(apiRef, paramsPrivateApi, 'private');
 }

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

@@ -3,12 +3,14 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
-import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridRowTreeSelector } from "./gridRowsSelector.js";
-import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
 import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { runIf } from "../../../utils/utils.js";
+import { gridPageSizeSelector } from "../pagination/index.js";
+import { gridDataRowIdsSelector } from "./gridRowsSelector.js";
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -53,8 +55,8 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       const backwardsHiddenCells = [];
       if (index === rangeToProcess.firstRowIndex) {
         let prevIndex = index - 1;
-        const prevRowEntry = visibleRows[prevIndex];
-        while (prevIndex >= range.firstRowIndex && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
+        let prevRowEntry = visibleRows[prevIndex];
+        while (prevIndex >= range.firstRowIndex && prevRowEntry && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
           const currentRow = visibleRows[prevIndex + 1];
           if (hiddenCells[currentRow.id]) {
             hiddenCells[currentRow.id][colDef.field] = true;
@@ -68,6 +70,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
           spannedRowId = prevRowEntry.id;
           spannedRowIndex = prevIndex;
           prevIndex -= 1;
+          prevRowEntry = visibleRows[prevIndex];
         }
       }
       backwardsHiddenCells.forEach(hiddenCellIndex => {
@@ -123,6 +126,24 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     processedRange
   };
 };
+const getInitialRangeToProcess = (props, apiRef) => {
+  const rowCount = gridDataRowIdsSelector(apiRef).length;
+  if (props.pagination) {
+    const pageSize = gridPageSizeSelector(apiRef);
+    let paginationLastRowIndex = DEFAULT_ROWS_TO_PROCESS;
+    if (pageSize > 0) {
+      paginationLastRowIndex = pageSize - 1;
+    }
+    return {
+      firstRowIndex: 0,
+      lastRowIndex: Math.min(paginationLastRowIndex, rowCount)
+    };
+  }
+  return {
+    firstRowIndex: 0,
+    lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, rowCount)
+  };
+};
 
 /**
  * @requires columnsStateInitializer (method) - should be initialized before
@@ -130,74 +151,52 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 export const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.unstable_rowSpanning) {
-    const rowIds = state.rows.dataRowIds || [];
-    const orderedFields = state.columns.orderedFields || [];
-    const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
-    const columnsLookup = state.columns.lookup;
-    const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
-    if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
-      return _extends({}, state, {
-        rowSpanning: EMPTY_STATE
-      });
-    }
-    const rangeToProcess = {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
-    };
-    const rows = rowIds.map(id => ({
-      id,
-      model: dataRowIdToModelLookup[id]
-    }));
-    const colDefs = orderedFields.map(field => columnsLookup[field]);
-    const {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
+  if (!props.unstable_rowSpanning) {
     return _extends({}, state, {
-      rowSpanning: {
-        spannedCells,
-        hiddenCells,
-        hiddenCellOriginMap
-      }
+      rowSpanning: EMPTY_STATE
+    });
+  }
+  const rowIds = state.rows.dataRowIds || [];
+  const orderedFields = state.columns.orderedFields || [];
+  const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
+  const columnsLookup = state.columns.lookup;
+  const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
+  if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
+    return _extends({}, state, {
+      rowSpanning: EMPTY_STATE
     });
   }
+  const rangeToProcess = getInitialRangeToProcess(props, apiRef);
+  const rows = rowIds.map(id => ({
+    id,
+    model: dataRowIdToModelLookup[id]
+  }));
+  const colDefs = orderedFields.map(field => columnsLookup[field]);
+  const {
+    spannedCells,
+    hiddenCells,
+    hiddenCellOriginMap
+  } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
   return _extends({}, state, {
-    rowSpanning: EMPTY_STATE
+    rowSpanning: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    }
   });
 };
 export const useGridRowSpanning = (apiRef, props) => {
-  const {
-    range,
-    rows: visibleRows
-  } = useGridVisibleRows(apiRef, props);
-  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
-  const colDefs = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const processedRange = useLazyRef(() => {
-    return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
-    } : EMPTY_RANGE;
+    return apiRef.current.state.rowSpanning !== EMPTY_STATE ? getInitialRangeToProcess(props, apiRef) : EMPTY_RANGE;
   });
-  const lastRange = React.useRef(EMPTY_RANGE);
-  const updateRowSpanningState = React.useCallback(
-  // A reset needs to occur when:
-  // - The `unstable_rowSpanning` prop is updated (feature flag)
-  // - The filtering is applied
-  // - The sorting is applied
-  // - The `paginationModel` is updated
-  // - The rows are updated
-  (resetState = true) => {
-    if (!props.unstable_rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => _extends({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
-      }
-      return;
-    }
+  const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
+    const {
+      range,
+      rows: visibleRows
+    } = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
     if (range === null || !isRowContextInitialized(renderContext)) {
       return;
     }
@@ -211,6 +210,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     if (rangeToProcess === null) {
       return;
     }
+    const colDefs = gridVisibleColumnDefinitionsSelector(apiRef);
     const {
       spannedCells,
       hiddenCells,
@@ -223,7 +223,8 @@ export const useGridRowSpanning = (apiRef, props) => {
     const currentSpannedCellsCount = Object.keys(apiRef.current.state.rowSpanning.spannedCells).length;
     const currentHiddenCellsCount = Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length;
     const shouldUpdateState = resetState || newSpannedCellsCount !== currentSpannedCellsCount || newHiddenCellsCount !== currentHiddenCellsCount;
-    if (!shouldUpdateState) {
+    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
+    if (!shouldUpdateState || hasNoSpannedCells) {
       return;
     }
     apiRef.current.setState(state => {
@@ -235,33 +236,35 @@ export const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
-  const prevRenderContext = React.useRef(renderContext);
-  const isFirstRender = React.useRef(true);
-  const shouldResetState = React.useRef(false);
-  const previousTree = React.useRef(tree);
-  React.useEffect(() => {
-    const firstRender = isFirstRender.current;
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-    if (tree !== previousTree.current) {
-      previousTree.current = tree;
-      updateRowSpanningState(true);
+  }, [apiRef, processedRange, props.pagination, props.paginationMode]);
+
+  // Reset events trigger a full re-computation of the row spanning state:
+  // - The `unstable_rowSpanning` prop is updated (feature flag)
+  // - The filtering is applied
+  // - The sorting is applied
+  // - The `paginationModel` is updated
+  // - The rows are updated
+  const resetRowSpanningState = React.useCallback(() => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    if (!isRowContextInitialized(renderContext)) {
       return;
     }
-    if (range && lastRange.current && isRowRangeUpdated(range, lastRange.current)) {
-      lastRange.current = range;
-      shouldResetState.current = true;
-    }
-    if (!firstRender && prevRenderContext.current !== renderContext) {
-      if (isRowRangeUpdated(prevRenderContext.current, renderContext)) {
-        updateRowSpanningState(shouldResetState.current);
-        shouldResetState.current = false;
+    updateRowSpanningState(renderContext, true);
+  }, [apiRef, updateRowSpanningState]);
+  useGridApiEventHandler(apiRef, 'renderedRowsIntervalChange', runIf(props.unstable_rowSpanning, updateRowSpanningState));
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', runIf(props.unstable_rowSpanning, resetRowSpanningState));
+  useGridApiEventHandler(apiRef, 'paginationModelChange', runIf(props.unstable_rowSpanning, resetRowSpanningState));
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', runIf(props.unstable_rowSpanning, resetRowSpanningState));
+  useGridApiEventHandler(apiRef, 'columnsChange', runIf(props.unstable_rowSpanning, resetRowSpanningState));
+  React.useEffect(() => {
+    if (!props.unstable_rowSpanning) {
+      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rowSpanning: EMPTY_STATE
+        }));
       }
-      prevRenderContext.current = renderContext;
-      return;
+    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
+      resetRowSpanningState();
     }
-    updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
+  }, [apiRef, resetRowSpanningState, props.unstable_rowSpanning]);
 };

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

@@ -39,7 +39,6 @@ export const useGridRows = (apiRef, props) => {
     }
   }
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const currentPage = getVisibleRows(apiRef);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = useTimeout();
@@ -66,12 +65,6 @@ export const useGridRows = (apiRef, props) => {
     }
     return row.id;
   }, [getRowIdProp]);
-  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
-    id
-  }, index) => {
-    acc[id] = index;
-    return acc;
-  }, {}), [currentPage.rows]);
   const throttledRowsChange = React.useCallback(({
     cache,
     throttle
@@ -170,7 +163,13 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => gridDataRowIdsSelector(apiRef), [apiRef]);
-  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => {
+    const row = apiRef.current.getRow(id);
+    const {
+      rowToIndexMap
+    } = getVisibleRows(apiRef);
+    return rowToIndexMap.get(row);
+  }, [apiRef]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
     if (!currentNode) {

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

@@ -1,6 +1,7 @@
 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";
@@ -110,7 +111,7 @@ 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);
@@ -181,7 +182,7 @@ 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]);
   const rowsMetaApi = {

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

@@ -19,7 +19,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -72,7 +72,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 export const buildAggregatedSortingApplier = (sortModel, apiRef) => {

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

@@ -25,7 +25,10 @@ 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;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -45,14 +48,6 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-let isJSDOM = false;
-try {
-  if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
-  }
-} catch (_) {
-  /* ignore */
-}
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -65,17 +60,13 @@ export const useGridVirtualScroller = () => {
   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;
@@ -91,7 +82,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);
@@ -104,7 +98,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;
       }
@@ -172,9 +169,13 @@ export const useGridVirtualScroller = () => {
     if (!scroller) {
       return undefined;
     }
+    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;
@@ -227,34 +228,15 @@ export const useGridVirtualScroller = () => {
     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
     });
   });
@@ -376,7 +358,6 @@ export const useGridVirtualScroller = () => {
         rowId: id,
         index: rowIndex,
         selected: isSelected,
-        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
         columnsTotalWidth: dimensions.columnsTotalWidth,
         rowHeight: baseRowHeight,
@@ -534,11 +515,13 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     })
   };
 };
@@ -580,6 +563,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return _extends({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -831,13 +819,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/useGridApiRef.js

@@ -2,4 +2,6 @@ import * as React from 'react';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export const useGridApiRef = () => React.useRef({});
+export const useGridApiRef = () =>
+// TODO v8: initialize with null (see https://github.com/mui/mui-x/issues/16135#issuecomment-2589395230 and https://github.com/mui/mui-x/issues/16000#issuecomment-2567820735)
+React.useRef({});

package/modern/index.js

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

package/modern/locales/faIR.js

@@ -34,8 +34,7 @@ const faIRGrid = {
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
   columnsManagementReset: 'بازنشانی',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'پاک کردن',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',
@@ -49,9 +48,9 @@ const faIRGrid = {
   filterPanelInputPlaceholder: 'فیلتر مقدار',
   // Filter operators text
   filterOperatorContains: 'شامل',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'شامل نمیشود',
   filterOperatorEquals: 'مساوی',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'برابر نیست',
   filterOperatorStartsWith: 'شروع با',
   filterOperatorEndsWith: 'پایان با',
   filterOperatorIs: 'هست',
@@ -71,9 +70,9 @@ const faIRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'شامل',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'شامل نمیشود',
   headerFilterOperatorEquals: 'مساوی',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'برابر نیست',
   headerFilterOperatorStartsWith: 'شروع با',
   headerFilterOperatorEndsWith: 'پایان با',
   headerFilterOperatorIs: 'هست',

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/isJSDOM.js

@@ -0,0 +1 @@
+export const isJSDOM = typeof window !== 'undefined' && /jsdom|HappyDOM/.test(window.navigator.userAgent);