[data grid] Fix renderContext calculation with scroll bounce / over-scroll (#16297)

Signed-off-by: Lauri <[email protected]>
Signed-off-by: Kenan Yusuf <[email protected]>
Co-authored-by: Kenan Yusuf <[email protected]>

Author: lauri865

packages/x-data-grid/src/components/GridRow.tsx

@@ -56,7 +56,6 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   index: number;
   rowHeight: number | 'auto';
-  offsetTop: number | undefined;
   offsetLeft: number;
   columnsTotalWidth: number;
   firstColumnIndex: number;
@@ -92,7 +91,6 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props,
     className,
     visibleColumns,
     pinnedColumns,
-    offsetTop,
     offsetLeft,
     columnsTotalWidth,
     firstColumnIndex,
@@ -503,7 +501,6 @@ GridRow.propTypes = {
   isNotVisible: PropTypes.bool.isRequired,
   lastColumnIndex: PropTypes.number.isRequired,
   offsetLeft: PropTypes.number.isRequired,
-  offsetTop: PropTypes.number,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,

packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx

@@ -15,7 +15,13 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
 type Position = 'vertical' | 'horizontal';
 type OwnerState = DataGridProcessedProps;
-type GridVirtualScrollbarProps = { position: Position };
+type GridVirtualScrollbarProps = {
+  position: Position;
+  scrollPosition: React.RefObject<{
+    left: number;
+    top: number;
+  }>;
+};
 
 const useUtilityClasses = (ownerState: OwnerState, position: Position) => {
   const { classes } = ownerState;
@@ -83,6 +89,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
 
     const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
     const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
     const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
 
     const contentSize =
@@ -97,31 +104,33 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
 
     const onScrollerScroll = useEventCallback(() => {
-      const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current;
+      const scrollPosition = props.scrollPosition.current;
+
       if (!scrollbar) {
         return;
       }
 
-      if (scroller[propertyScroll] === lastPosition.current) {
+      if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
         return;
       }
 
-      lastPosition.current = scroller[propertyScroll];
+      lastPosition.current = scrollPosition[propertyScrollPosition];
 
       if (isLocked.current) {
         isLocked.current = false;
         return;
       }
       isLocked.current = true;
 
-      const value = scroller[propertyScroll] / contentSize;
+      const value = scrollPosition[propertyScrollPosition] / contentSize;
       scrollbar[propertyScroll] = value * scrollbarInnerSize;
     });
 
     const onScrollbarScroll = useEventCallback(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current;
+
       if (!scrollbar) {
         return;
       }
@@ -139,7 +148,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
     useOnMount(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current!;
-      const options = { capture: true, passive: true };
+      const options: AddEventListenerOptions = { passive: true };
       scroller.addEventListener('scroll', onScrollerScroll, options);
       scrollbar.addEventListener('scroll', onScrollbarScroll, options);
       return () => {

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -115,7 +115,6 @@ export const useGridVirtualScroller = () => {
   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);
   const mainRef = apiRef.current.mainElementRef;
@@ -264,9 +263,19 @@ export const useGridVirtualScroller = () => {
       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;
@@ -342,34 +351,17 @@ export const useGridVirtualScroller = () => {
     updateRenderContext(nextRenderContext);
   };
 
-  const handleScroll = useEventCallback((event: React.UIEvent) => {
+  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,
     });
   });
@@ -536,7 +528,6 @@ export const useGridVirtualScroller = () => {
           rowId={id}
           index={rowIndex}
           selected={isSelected}
-          offsetTop={params.rows ? undefined : rowsMeta.positions[rowIndexInPage]}
           offsetLeft={offsetLeft}
           columnsTotalWidth={dimensions.columnsTotalWidth}
           rowHeight={baseRowHeight}
@@ -717,8 +708,16 @@ export const useGridVirtualScroller = () => {
       ref: onContentSizeApplied,
     }),
     getRenderZoneProps: () => ({ role: 'rowgroup' }),
-    getScrollbarVerticalProps: () => ({ ref: scrollbarVerticalRef, role: 'presentation' }),
-    getScrollbarHorizontalProps: () => ({ ref: scrollbarHorizontalRef, role: 'presentation' }),
+    getScrollbarVerticalProps: () => ({
+      ref: scrollbarVerticalRef,
+      role: 'presentation',
+      scrollPosition,
+    }),
+    getScrollbarHorizontalProps: () => ({
+      ref: scrollbarHorizontalRef,
+      role: 'presentation',
+      scrollPosition,
+    }),
   };
 };