[DataGrid] Performance: avoid layout invalidation

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -1821,6 +1821,30 @@
       "description": "Styles applied to the horizontal scrollbar.",
       "isGlobal": false
     },
+    {
+      "key": "scrollbarFiller",
+      "className": "MuiDataGridPremium-scrollbarFiller",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--borderTop",
+      "className": "MuiDataGridPremium-scrollbarFiller--borderTop",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--header",
+      "className": "MuiDataGridPremium-scrollbarFiller--header",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--pinnedRight",
+      "className": "MuiDataGridPremium-scrollbarFiller--pinnedRight",
+      "description": "",
+      "isGlobal": false
+    },
     {
       "key": "selectedRowCount",
       "className": "MuiDataGridPremium-selectedRowCount",
@@ -1875,12 +1899,6 @@
       "description": "Styles applied to the virtualization content when its height is bigger than the virtualization container.",
       "isGlobal": false
     },
-    {
-      "key": "virtualScrollerRenderZone",
-      "className": "MuiDataGridPremium-virtualScrollerRenderZone",
-      "description": "Styles applied to the virtualization render zone.",
-      "isGlobal": false
-    },
     {
       "key": "withBorderColor",
       "className": "MuiDataGridPremium-withBorderColor",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -1742,6 +1742,30 @@
       "description": "Styles applied to the horizontal scrollbar.",
       "isGlobal": false
     },
+    {
+      "key": "scrollbarFiller",
+      "className": "MuiDataGridPro-scrollbarFiller",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--borderTop",
+      "className": "MuiDataGridPro-scrollbarFiller--borderTop",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--header",
+      "className": "MuiDataGridPro-scrollbarFiller--header",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--pinnedRight",
+      "className": "MuiDataGridPro-scrollbarFiller--pinnedRight",
+      "description": "",
+      "isGlobal": false
+    },
     {
       "key": "selectedRowCount",
       "className": "MuiDataGridPro-selectedRowCount",
@@ -1796,12 +1820,6 @@
       "description": "Styles applied to the virtualization content when its height is bigger than the virtualization container.",
       "isGlobal": false
     },
-    {
-      "key": "virtualScrollerRenderZone",
-      "className": "MuiDataGridPro-virtualScrollerRenderZone",
-      "description": "Styles applied to the virtualization render zone.",
-      "isGlobal": false
-    },
     {
       "key": "withBorderColor",
       "className": "MuiDataGridPro-withBorderColor",

docs/pages/x/api/data-grid/data-grid.json

@@ -1603,6 +1603,30 @@
       "description": "Styles applied to the horizontal scrollbar.",
       "isGlobal": false
     },
+    {
+      "key": "scrollbarFiller",
+      "className": "MuiDataGrid-scrollbarFiller",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--borderTop",
+      "className": "MuiDataGrid-scrollbarFiller--borderTop",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--header",
+      "className": "MuiDataGrid-scrollbarFiller--header",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbarFiller--pinnedRight",
+      "className": "MuiDataGrid-scrollbarFiller--pinnedRight",
+      "description": "",
+      "isGlobal": false
+    },
     {
       "key": "selectedRowCount",
       "className": "MuiDataGrid-selectedRowCount",
@@ -1657,12 +1681,6 @@
       "description": "Styles applied to the virtualization content when its height is bigger than the virtualization container.",
       "isGlobal": false
     },
-    {
-      "key": "virtualScrollerRenderZone",
-      "className": "MuiDataGrid-virtualScrollerRenderZone",
-      "description": "Styles applied to the virtualization render zone.",
-      "isGlobal": false
-    },
     {
       "key": "withBorderColor",
       "className": "MuiDataGrid-withBorderColor",

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -1170,6 +1170,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the horizontal scrollbar"
     },
+    "scrollbarFiller": { "description": "" },
+    "scrollbarFiller--borderTop": { "description": "" },
+    "scrollbarFiller--header": { "description": "" },
+    "scrollbarFiller--pinnedRight": { "description": "" },
     "selectedRowCount": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the footer selected row count element"
@@ -1207,10 +1211,6 @@
       "nodeName": "the virtualization content",
       "conditions": "its height is bigger than the virtualization container"
     },
-    "virtualScrollerRenderZone": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the virtualization render zone"
-    },
     "withBorderColor": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}. Sets border color only.",
       "nodeName": "cells",

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -1112,6 +1112,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the horizontal scrollbar"
     },
+    "scrollbarFiller": { "description": "" },
+    "scrollbarFiller--borderTop": { "description": "" },
+    "scrollbarFiller--header": { "description": "" },
+    "scrollbarFiller--pinnedRight": { "description": "" },
     "selectedRowCount": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the footer selected row count element"
@@ -1149,10 +1153,6 @@
       "nodeName": "the virtualization content",
       "conditions": "its height is bigger than the virtualization container"
     },
-    "virtualScrollerRenderZone": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the virtualization render zone"
-    },
     "withBorderColor": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}. Sets border color only.",
       "nodeName": "cells",

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -978,6 +978,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the horizontal scrollbar"
     },
+    "scrollbarFiller": { "description": "" },
+    "scrollbarFiller--borderTop": { "description": "" },
+    "scrollbarFiller--header": { "description": "" },
+    "scrollbarFiller--pinnedRight": { "description": "" },
     "selectedRowCount": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the footer selected row count element"
@@ -1015,10 +1019,6 @@
       "nodeName": "the virtualization content",
       "conditions": "its height is bigger than the virtualization container"
     },
-    "virtualScrollerRenderZone": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the virtualization render zone"
-    },
     "withBorderColor": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}. Sets border color only.",
       "nodeName": "cells",

packages/x-data-grid-pro/src/components/GridDetailPanel.tsx

@@ -12,27 +12,32 @@ const DetailPanel = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
   overridesResolver: (props, styles) => styles.detailPanel,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
+  position: 'relative',
   width:
     'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  backgroundColor: (theme.vars || theme).palette.background.default,
+  backgroundColor: 'var(--DataGrid-containerBackground)',
   overflow: 'auto',
-}));
+});
 
 interface GridDetailPanelProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
   /**
    * The row ID that this panel belongs to.
    */
   rowId: GridRowId;
+  /**
+   * The top position.
+   */
+  top: number;
   /**
    * The panel height.
    */
   height: number | 'auto';
 }
 
 function GridDetailPanel(props: GridDetailPanelProps) {
-  const { rowId, height, className, children } = props;
+  const { rowId, height, top, className, children } = props;
   const apiRef = useGridPrivateApiContext();
   const ref = React.useRef<HTMLDivElement | null>(null);
   const rootProps = useGridRootProps();
@@ -65,7 +70,7 @@ function GridDetailPanel(props: GridDetailPanelProps) {
       ref={ref}
       ownerState={ownerState}
       role="presentation"
-      style={{ height }}
+      style={{ top, height }}
       className={className}
     >
       {children}

packages/x-data-grid-pro/src/components/GridDetailPanels.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { getDataGridUtilityClass, useGridSelector, GridRowId } from '@mui/x-data-grid';
+import {
+  getDataGridUtilityClass,
+  gridRowsMetaSelector,
+  useGridSelector,
+  GridRowId,
+} from '@mui/x-data-grid';
 import { GridDetailPanelsProps, EMPTY_DETAIL_PANELS } from '@mui/x-data-grid/internals';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -31,6 +36,7 @@ function GridDetailPanelsImpl({ virtualScroller }: GridDetailPanelsProps) {
   const classes = useUtilityClasses();
   const { setPanels } = virtualScroller;
 
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const detailPanelsContent = useGridSelector(
     apiRef,
@@ -55,19 +61,21 @@ function GridDetailPanelsImpl({ virtualScroller }: GridDetailPanelsProps) {
 
       const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
       const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId);
 
       return (
         <GridDetailPanel
           key={`panel-${rowId}`}
           rowId={rowId}
+          top={top}
           height={height}
           className={classes.detailPanel}
         >
           {content}
         </GridDetailPanel>
       );
     },
-    [apiRef, classes.detailPanel, detailPanelsHeights, detailPanelsContent],
+    [apiRef, classes.detailPanel, rowsMeta, detailPanelsHeights, detailPanelsContent],
   );
 
   React.useEffect(() => {

packages/x-data-grid-pro/src/components/GridPinnedRows.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-data-grid';
+import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridStore } from '@mui/x-data-grid';
 import {
   GridPinnedRowsProps,
   gridPinnedRowsSelector,
-  gridRenderContextSelector,
   useGridPrivateApiContext,
 } from '@mui/x-data-grid/internals';
 
@@ -20,7 +19,7 @@ export function GridPinnedRows({ position, virtualScroller, ...other }: GridPinn
   const classes = useUtilityClasses();
   const apiRef = useGridPrivateApiContext();
 
-  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
+  const renderContext = useGridStore(apiRef, 'virtualization.renderContext');
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
   const rows = pinnedRowsData[position];
 

packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx

@@ -365,20 +365,20 @@ describe('<DataGridPro /> - Column pinning', () => {
       it('should change the side when called on a pinned column', () => {
         render(<TestCase />);
 
-        const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!;
+        const content = $(`.${gridClasses.virtualScrollerContent}`)!;
 
-        expect($(renderZone, '[data-field="currencyPair"]')!.className).not.to.include('pinned');
+        expect($(content, '[data-field="currencyPair"]')!.className).not.to.include('pinned');
 
         act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect(
-          $(renderZone, `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
+          $(content, `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
         ).not.to.equal(null);
-        expect($(renderZone, '[data-field="currencyPair"]')!.className).to.include('pinned');
+        expect($(content, '[data-field="currencyPair"]')!.className).to.include('pinned');
 
         act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.RIGHT));
-        expect($$(renderZone, `.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
+        expect($$(content, `.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
         expect(
-          $(renderZone, `.${gridClasses['cell--pinnedRight']}[data-field="currencyPair"]`),
+          $(content, `.${gridClasses['cell--pinnedRight']}[data-field="currencyPair"]`),
         ).not.to.equal(null);
       });
 
@@ -398,8 +398,8 @@ describe('<DataGridPro /> - Column pinning', () => {
         expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).not.to.equal(0);
         act(() => apiRef.current.unpinColumn('currencyPair'));
         expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
-        const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!;
-        expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
+        const content = $(`.${gridClasses.virtualScrollerContent}`)!;
+        expect(content.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
       });
     });