From 490bc5ccea01f0c919db9bc23d4c5bc30601b7f9 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Tue, 5 Sep 2023 17:26:14 +0300
Subject: [PATCH] [DataGrid] Make the pinned rows be on top of the no rows
 overlay (#9986)

---
 .../components/DataGridProVirtualScroller.tsx |  4 +--
 .../src/components/base/GridOverlays.tsx      | 30 +++++++++++++++----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
index 2bd499fc64d0..f764a456743a 100644
--- a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
+++ b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -170,8 +170,8 @@ const VirtualScrollerPinnedRows = styled('div', {
   const boxShadowColor = getBoxShadowColor(theme);
   return {
     position: 'sticky',
-    // should be above the detail panel
-    zIndex: 3,
+    // should be above the no rows overlay
+    zIndex: 4,
     backgroundColor: (theme.vars || theme).palette.background.default,
     ...(theme.vars
       ? { backgroundImage: theme.vars.overlays?.[2] }
diff --git a/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx b/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
index 1b10680459b6..e3423d6bac6a 100644
--- a/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
+++ b/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import {
   unstable_composeClasses as composeClasses,
@@ -20,19 +21,24 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
+  shouldForwardProp: (prop) => prop !== 'overlayType',
   overridesResolver: (props, styles) => styles.overlayWrapper,
-})({
+})<{ overlayType: 'loadingOverlay' | string }>(({ overlayType }) => ({
   position: 'sticky', // To stay in place while scrolling
   top: 0,
   left: 0,
   width: 0, // To stay above the content instead of shifting it down
   height: 0, // To stay above the content instead of shifting it down
-  zIndex: 4, // Should be above pinned columns, pinned rows and detail panel
-});
+  zIndex:
+    overlayType === 'loadingOverlay'
+      ? 5 // Should be above pinned columns, pinned rows, and detail panel
+      : 4, // Should be above pinned columns and detail panel
+}));
 
 const GridOverlayWrapperInner = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
+  shouldForwardProp: (prop) => prop !== 'overlayType',
   overridesResolver: (props, styles) => styles.overlayWrapperInner,
 })({});
 
@@ -49,7 +55,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-function GridOverlayWrapper(props: React.PropsWithChildren<{}>) {
+function GridOverlayWrapper(props: React.PropsWithChildren<{ overlayType: string }>) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
 
@@ -77,7 +83,7 @@ function GridOverlayWrapper(props: React.PropsWithChildren<{}>) {
   }
 
   return (
-    <GridOverlayWrapperRoot className={clsx(classes.root)}>
+    <GridOverlayWrapperRoot className={clsx(classes.root)} overlayType={props.overlayType}>
       <GridOverlayWrapperInner
         className={clsx(classes.inner)}
         style={{
@@ -90,6 +96,14 @@ function GridOverlayWrapper(props: React.PropsWithChildren<{}>) {
   );
 }
 
+GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  overlayType: PropTypes.string.isRequired,
+} as any;
+
 export function GridOverlays() {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -102,22 +116,26 @@ export function GridOverlays() {
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
 
   let overlay: React.JSX.Element | null = null;
+  let overlayType = '';
 
   if (showNoRowsOverlay) {
     overlay = <rootProps.slots.noRowsOverlay {...rootProps.slotProps?.noRowsOverlay} />;
+    overlayType = 'noRowsOverlay';
   }
 
   if (showNoResultsOverlay) {
     overlay = <rootProps.slots.noResultsOverlay {...rootProps.slotProps?.noResultsOverlay} />;
+    overlayType = 'noResultsOverlay';
   }
 
   if (loading) {
     overlay = <rootProps.slots.loadingOverlay {...rootProps.slotProps?.loadingOverlay} />;
+    overlayType = 'loadingOverlay';
   }
 
   if (overlay === null) {
     return null;
   }
 
-  return <GridOverlayWrapper>{overlay}</GridOverlayWrapper>;
+  return <GridOverlayWrapper overlayType={overlayType}>{overlay}</GridOverlayWrapper>;
 }