[DataGrid] Add scroll shadows and fix scrollbar overlap

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

@@ -32,7 +32,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';
@@ -474,9 +473,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} borderTop={!isFirstVisible} />
-      )}
     </div>
   );
 });

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

@@ -4,35 +4,10 @@ import { gridClasses } from '../constants';
 
 const classes = {
   root: gridClasses.scrollbarFiller,
-  header: gridClasses['scrollbarFiller--header'],
-  borderTop: gridClasses['scrollbarFiller--borderTop'],
-  borderBottom: gridClasses['scrollbarFiller--borderBottom'],
-  pinnedRight: gridClasses['scrollbarFiller--pinnedRight'],
 };
 
-function GridScrollbarFillerCell({
-  header,
-  borderTop = true,
-  borderBottom,
-  pinnedRight,
-}: {
-  header?: boolean;
-  borderTop?: boolean;
-  borderBottom?: boolean;
-  pinnedRight?: boolean;
-}) {
-  return (
-    <div
-      role="presentation"
-      className={clsx(
-        classes.root,
-        header && classes.header,
-        borderTop && classes.borderTop,
-        borderBottom && classes.borderBottom,
-        pinnedRight && classes.pinnedRight,
-      )}
-    />
-  );
+function GridScrollbarFillerCell() {
+  return <div role="presentation" className={clsx(classes.root)} />;
 }
 
 export { GridScrollbarFillerCell };

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';
 
@@ -146,7 +145,6 @@ export const GridSkeletonLoadingOverlayInner = forwardRef<
         const emptyCell = (
           <slots.skeletonCell key={`skeleton-filler-column-${i}`} width={emptyCellWidth} empty />
         );
-        const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
 
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
@@ -177,15 +175,6 @@ export const GridSkeletonLoadingOverlayInner = forwardRef<
         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

@@ -143,10 +143,6 @@ export const GridRootStyles = styled('div', {
     { [`& .${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 },
     {
@@ -767,17 +763,10 @@ export const GridRootStyles = styled('div', {
     [`.${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: vars.cell.background.pinned,
-        position: 'sticky',
-        right: 0,
-      },
+      backgroundColor: 'var(--DataGrid-headerBackground)',
+      position: 'sticky',
+      right: 0,
+      zIndex: 3,
     },
 
     [`& .${c.filler}`]: {

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

@@ -49,20 +49,21 @@ 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)))',
+    'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-headerHeight) - 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: 'var(--DataGrid-headerHeight)',
+  right: 0,
 });
 
 const ScrollbarHorizontal = styled(Scrollbar)({
-  width: '100%',
+  width:
+    'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
@@ -71,7 +72,15 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   '& > div': {
     height: 'var(--size)',
   },
-  bottom: '0px',
+  bottom: 0,
+});
+
+export const ScrollbarCorner = styled(Scrollbar)({
+  width: 'var(--size)',
+  height: 'var(--size)',
+  right: 0,
+  bottom: 0,
+  overflow: 'scroll',
 });
 
 const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProps>(
@@ -81,25 +90,19 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
     const isLocked = React.useRef(false);
     const lastPosition = React.useRef(0);
     const scrollbarRef = React.useRef<HTMLDivElement>(null);
-    const contentRef = React.useRef<HTMLDivElement>(null);
     const classes = useUtilityClasses(rootProps, props.position);
     const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
 
     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]);
+      props.position === 'horizontal'
+        ? dimensions.minimumSize[propertyDimension]
+        : dimensions.minimumSize[propertyDimension] -
+          dimensions.headersTotalHeight -
+          (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
 
     const onScrollerScroll = useEventCallback(() => {
       const scrollbar = scrollbarRef.current;
@@ -121,8 +124,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(() => {
@@ -139,8 +141,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       }
       isLocked.current = true;
 
-      const value = scrollbar[propertyScroll] / scrollbarInnerSize;
-      scroller[propertyScroll] = value * contentSize;
+      scroller[propertyScroll] = scrollbar[propertyScroll];
     });
 
     useOnMount(() => {
@@ -155,11 +156,6 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       };
     });
 
-    React.useEffect(() => {
-      const content = contentRef.current!;
-      content.style.setProperty(propertyDimension, `${scrollbarInnerSize}px`);
-    }, [scrollbarInnerSize, propertyDimension]);
-
     const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
 
     return (
@@ -179,7 +175,10 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
           event.target.blur();
         }}
       >
-        <div ref={contentRef} className={classes.content} />
+        <div
+          className={classes.content}
+          style={{ [propertyDimension]: `${scrollbarInnerSize}px` }}
+        />
       </Container>
     );
   },

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

@@ -21,7 +21,7 @@ import { GridTopContainer as TopContainer } from './GridTopContainer';
 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';
 import { GridOverlayType } from '../base/GridOverlays';
 import { GridApiCommunity } from '../../models/api/gridApiCommunity';
@@ -136,6 +136,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
         <Scrollbar position="horizontal" {...getScrollbarHorizontalProps()} />
       )}
       {hasScrollY && <Scrollbar position="vertical" {...getScrollbarVerticalProps()} />}
+      {hasScrollX && hasScrollY && <ScrollbarCorner />}
       {props.children}
     </Container>
   );

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

@@ -657,26 +657,6 @@ export interface GridClasses {
    * 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.
    */
@@ -1074,10 +1054,6 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'scrollbar--vertical',
   'scrollbar--horizontal',
   'scrollbarFiller',
-  'scrollbarFiller--header',
-  'scrollbarFiller--borderTop',
-  'scrollbarFiller--borderBottom',
-  'scrollbarFiller--pinnedRight',
   'selectedRowCount',
   'sortButton',
   'sortIcon',

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

@@ -200,14 +200,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
             )}
           />
         )}
-        {hasScrollbarFiller && (
-          <ScrollbarFiller
-            header
-            pinnedRight={isPinnedRight}
-            borderBottom={borderBottom}
-            borderTop={false}
-          />
-        )}
+        {hasScrollbarFiller && <ScrollbarFiller />}
       </React.Fragment>
     );
   };