[DataGrid] Update scrollbar positions to match native behavior

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

@@ -29,7 +29,6 @@ import {
   gridEditRowsStateSelector,
   gridRowIsEditingSelector,
 } from '../hooks/features/editing/gridEditingSelectors';
-import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
 import { useGridConfiguration } from '../hooks/utils/useGridConfiguration';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
@@ -473,7 +472,6 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props,
       {cells}
       <div role="presentation" className={clsx(gridClasses.cell, gridClasses.cellEmpty)} />
       {rightCells}
-      {scrollbarWidth !== 0 && <ScrollbarFiller pinnedRight={pinnedColumns.right.length > 0} />}
     </div>
   );
 });

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

@@ -23,7 +23,6 @@ import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../utils/cellBorderUtils';
 import { escapeOperandAttributeSelector } from '../utils/domUtils';
-import { GridScrollbarFillerCell } from './GridScrollbarFillerCell';
 import { rtlFlipSide } from '../utils/rtlFlipSide';
 import { attachPinnedStyle } from '../internals/utils';
 
@@ -140,7 +139,6 @@ const GridSkeletonLoadingOverlay = forwardRef<HTMLDivElement, React.HTMLAttribut
           const emptyCell = (
             <slots.skeletonCell key={`skeleton-filler-column-${i}`} width={emptyCellWidth} empty />
           );
-          const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
 
           if (hasFillerBefore) {
             rowCells.push(emptyCell);
@@ -170,15 +168,6 @@ const GridSkeletonLoadingOverlay = forwardRef<HTMLDivElement, React.HTMLAttribut
           if (hasFillerAfter) {
             rowCells.push(emptyCell);
           }
-
-          if (hasScrollbarFiller) {
-            rowCells.push(
-              <GridScrollbarFillerCell
-                key={`skeleton-scrollbar-filler-${i}`}
-                pinnedRight={pinnedColumns.right.length > 0}
-              />,
-            );
-          }
         }
 
         array.push(

packages/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -164,11 +164,6 @@ export const GridRootStyles = styled('div', {
     { [`& .${c.scrollbar}`]: styles.scrollbar },
     { [`& .${c['scrollbar--horizontal']}`]: styles['scrollbar--horizontal'] },
     { [`& .${c['scrollbar--vertical']}`]: styles['scrollbar--vertical'] },
-    { [`& .${c.scrollbarFiller}`]: styles.scrollbarFiller },
-    { [`& .${c['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom'] },
-    { [`& .${c['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop'] },
-    { [`& .${c['scrollbarFiller--header']}`]: styles['scrollbarFiller--header'] },
-    { [`& .${c['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight'] },
     { [`& .${c.sortIcon}`]: styles.sortIcon },
     { [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell },
     {
@@ -544,8 +539,7 @@ export const GridRootStyles = styled('div', {
 
     /* Bottom border of the top-container */
     [`& .${c['row--borderBottom']} .${c.columnHeader},
-      & .${c['row--borderBottom']} .${c.filler},
-      & .${c['row--borderBottom']} .${c.scrollbarFiller}`]: {
+      & .${c['row--borderBottom']} .${c.filler}`]: {
       borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
     },
     [`& .${c['row--borderBottom']} .${c.cell}`]: {
@@ -598,11 +592,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c.pinnedRows}`]: {
       backgroundColor: 'var(--DataGrid-pinnedBackground)',
     },
-    [`& .${c['pinnedRows--top']} :first-of-type`]: {
-      [`& .${c.cell}, .${c.scrollbarFiller}`]: {
-        borderTop: 'none',
-      },
-    },
     [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
       userSelect: 'none',
     },
@@ -773,23 +762,6 @@ export const GridRootStyles = styled('div', {
       marginRight: t.spacing(2),
     },
 
-    /* ScrollbarFiller styles */
-    [`.${c.scrollbarFiller}`]: {
-      minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-      alignSelf: 'stretch',
-      [`&.${c['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)',
-      },
-      [`&.${c['scrollbarFiller--borderBottom']}`]: {
-        borderBottom: '1px solid var(--DataGrid-rowBorderColor)',
-      },
-      [`&.${c['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: 'var(--DataGrid-pinnedBackground)',
-        position: 'sticky',
-        right: 0,
-      },
-    },
-
     [`& .${c.filler}`]: {
       flex: '1 0 auto',
     },

packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx

@@ -33,7 +33,8 @@ const GridToolbarContainerRoot = styled('div', {
   alignItems: 'center',
   flexWrap: 'wrap',
   gap: theme.spacing(1),
-  padding: theme.spacing(0.5, 0.5, 0),
+  padding: theme.spacing(0.5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
 const GridToolbarContainer = forwardRef<HTMLDivElement, GridToolbarContainerProps>(

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

@@ -50,21 +50,19 @@ const Scrollbar = styled('div')({
 
 const ScrollbarVertical = styled(Scrollbar)({
   width: 'var(--size)',
-  height:
-    'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
   overflowX: 'hidden',
   // Disable focus-visible style, it's a scrollbar.
   outline: 0,
   '& > div': {
     width: 'var(--size)',
   },
-  top: 'var(--DataGrid-topContainerHeight)',
-  right: '0px',
+  top: 0,
+  bottom: 0,
+  right: 0,
 });
 
 const ScrollbarHorizontal = styled(Scrollbar)({
-  width: '100%',
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
@@ -73,7 +71,16 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   '& > div': {
     height: 'var(--size)',
   },
-  bottom: '0px',
+  bottom: 0,
+  left: 0,
+});
+
+export const ScrollbarCorner = styled(Scrollbar)({
+  width: 'var(--size)',
+  height: 'var(--size)',
+  bottom: 0,
+  right: 0,
+  overflow: 'scroll',
 });
 
 const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProps>(
@@ -90,18 +97,8 @@ 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 =
-      dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
-
-    const scrollbarSize =
-      props.position === 'vertical'
-        ? dimensions.viewportInnerSize.height
-        : dimensions.viewportOuterSize.width;
-
-    const scrollbarInnerSize =
-      scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
+    const scrollbarInnerSize = dimensions.minimumSize[propertyDimension];
 
     const onScrollerScroll = useEventCallback(() => {
       const scrollbar = scrollbarRef.current;
@@ -123,8 +120,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       }
       isLocked.current = true;
 
-      const value = scrollPosition[propertyScrollPosition] / contentSize;
-      scrollbar[propertyScroll] = value * scrollbarInnerSize;
+      scrollbar[propertyScroll] = scrollPosition[propertyScrollPosition];
     });
 
     const onScrollbarScroll = useEventCallback(() => {
@@ -141,8 +137,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       }
       isLocked.current = true;
 
-      const value = scrollbar[propertyScroll] / scrollbarInnerSize;
-      scroller[propertyScroll] = value * contentSize;
+      scroller[propertyScroll] = scrollbar[propertyScroll];
     });
 
     useOnMount(() => {
@@ -164,15 +159,23 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
 
     const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
 
+    // TODO: Check why this is needed
+    const listViewStyle =
+      props.position === 'vertical' && rootProps.unstable_listView
+        ? { bottom: 0, top: 0 }
+        : undefined;
+
     return (
       <Container
         ref={useForkRef(ref, scrollbarRef)}
         className={classes.root}
-        style={
-          props.position === 'vertical' && rootProps.unstable_listView
-            ? { height: '100%', top: 0 }
-            : undefined
-        }
+        style={{
+          bottom:
+            props.position === 'vertical' && dimensions.hasScrollX ? 'var(--size)' : undefined,
+          right:
+            props.position === 'horizontal' && dimensions.hasScrollY ? 'var(--size)' : undefined,
+          ...listViewStyle,
+        }}
         tabIndex={-1}
         aria-hidden="true"
       >

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

@@ -17,7 +17,7 @@ import { GridBottomContainer as BottomContainer } from './GridBottomContainer';
 import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerContent';
 import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
 import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
-import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
+import { GridVirtualScrollbar as Scrollbar, ScrollbarCorner } from './GridVirtualScrollbar';
 import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
 
 type OwnerState = Pick<DataGridProcessedProps, 'classes'> & {
@@ -127,6 +127,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
         <Scrollbar position="horizontal" {...getScrollbarHorizontalProps()} />
       )}
       {dimensions.hasScrollY && <Scrollbar position="vertical" {...getScrollbarVerticalProps()} />}
+      {dimensions.hasScrollX && dimensions.hasScrollY && <ScrollbarCorner />}
       {props.children}
     </Container>
   );

packages/x-data-grid/src/constants/gridClasses.ts

@@ -554,31 +554,6 @@ export interface GridClasses {
    * Styles applied to the horizontal scrollbar.
    */
   'scrollbar--vertical': string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell.
-   */
-  scrollbarFiller: string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell, in header position.
-   */
-  'scrollbarFiller--header': string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell, with a border top.
-   */
-  'scrollbarFiller--borderTop': string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell, with a border bottom.
-   */
-  'scrollbarFiller--borderBottom': string;
-  /**
-   * @ignore - do not document.
-   * Styles applied to the scrollbar filler cell.
-   */
-  'scrollbarFiller--pinnedRight': string;
   /**
    * Styles applied to the footer selected row count element.
    */
@@ -815,11 +790,6 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'scrollbar',
   'scrollbar--vertical',
   'scrollbar--horizontal',
-  'scrollbarFiller',
-  'scrollbarFiller--header',
-  'scrollbarFiller--borderTop',
-  'scrollbarFiller--borderBottom',
-  'scrollbarFiller--pinnedRight',
   'selectedRowCount',
   'sortIcon',
   'toolbarContainer',

packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -27,7 +27,6 @@ import {
 } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
 import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
 import { gridClasses } from '../../../constants/gridClasses';
@@ -176,13 +175,8 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
     leftOverflow: number,
     borderBottom: boolean = false,
   ) => {
-    const isPinnedRight = params?.position === PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
 
-    const hasScrollbarFiller =
-      (pinnedColumns.right.length > 0 && isPinnedRight) ||
-      (pinnedColumns.right.length === 0 && isNotPinned);
-
     const leftOffsetWidth = offsetLeft - leftOverflow;
 
     return (
@@ -198,14 +192,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
             )}
           />
         )}
-        {hasScrollbarFiller && (
-          <ScrollbarFiller
-            header
-            pinnedRight={isPinnedRight}
-            borderBottom={borderBottom}
-            borderTop={false}
-          />
-        )}
       </React.Fragment>
     );
   };