From a9c8b6509b071026e70b1b4109c6207002c82194 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Thu, 9 Jan 2025 18:03:54 -0500
Subject: [PATCH] fix: quickfilter outside of root

---
 .../filtering-recipes/QuickFilterOutsideOfGrid.js     | 11 +++++++++--
 .../filtering-recipes/QuickFilterOutsideOfGrid.tsx    | 11 +++++++++--
 .../migration-data-grid-v7/migration-data-grid-v7.md  |  1 +
 .../utils/css/{themeManager.ts => themeManager.tsx}   |  5 +++++
 packages/x-data-grid/src/utils/index.ts               |  1 +
 scripts/x-data-grid-premium.exports.json              |  1 +
 scripts/x-data-grid-pro.exports.json                  |  1 +
 scripts/x-data-grid.exports.json                      |  1 +
 8 files changed, 28 insertions(+), 4 deletions(-)
 rename packages/x-data-grid/src/utils/css/{themeManager.ts => themeManager.tsx} (89%)

diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
index 5649acb1c0ea7..7d5ae0bc0b06a 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
@@ -2,14 +2,21 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridPortalWrapper,
+  GridToolbarQuickFilter,
+  GridToolbar,
+} from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')}>
-        <GridToolbarQuickFilter />
+        <GridPortalWrapper>
+          <GridToolbarQuickFilter />
+        </GridPortalWrapper>
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
index 71b254306e90c..45e49efecb35d 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
@@ -2,14 +2,21 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridPortalWrapper,
+  GridToolbarQuickFilter,
+  GridToolbar,
+} from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')!}>
-        <GridToolbarQuickFilter />
+        <GridPortalWrapper>
+          <GridToolbarQuickFilter />
+        </GridPortalWrapper>
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index 85b8dfa37d6c5..37ceef86ab6b7 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -98,6 +98,7 @@ Below are described the steps you need to make to migrate from v7 to v8.
 ### Other exports
 
 - `ariaV8` experimental flag is removed. It's now the default behavior.
+- Sub-components that are in a React Portal must now be wrapped with `GridPortalWrapper`
 
 <!-- ### Editing
 
diff --git a/packages/x-data-grid/src/utils/css/themeManager.ts b/packages/x-data-grid/src/utils/css/themeManager.tsx
similarity index 89%
rename from packages/x-data-grid/src/utils/css/themeManager.ts
rename to packages/x-data-grid/src/utils/css/themeManager.tsx
index e1b25d2d23ec3..b1869c151d66f 100644
--- a/packages/x-data-grid/src/utils/css/themeManager.ts
+++ b/packages/x-data-grid/src/utils/css/themeManager.tsx
@@ -14,6 +14,11 @@ export function useThemeVariablesClassName() {
   return getClassNameForTheme(useTheme());
 }
 
+export function GridPortalWrapper({ children }: { children: React.ReactNode }) {
+  const className = useThemeVariablesClassName();
+  return <div className={className}>{children}</div>;
+}
+
 function getClassNameForTheme(theme: Theme) {
   let className = classNameByTheme.get(theme);
   if (className) {
diff --git a/packages/x-data-grid/src/utils/index.ts b/packages/x-data-grid/src/utils/index.ts
index d9aac67504426..eab74045bb02c 100644
--- a/packages/x-data-grid/src/utils/index.ts
+++ b/packages/x-data-grid/src/utils/index.ts
@@ -1 +1,2 @@
 export type { OutputSelector } from './createSelector';
+export { GridPortalWrapper } from './css/themeManager';
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
index e9d6c4df85d34..859f3c83d9be1 100644
--- a/scripts/x-data-grid-premium.exports.json
+++ b/scripts/x-data-grid-premium.exports.json
@@ -463,6 +463,7 @@
   { "name": "GridPinnedRowNode", "kind": "TypeAlias" },
   { "name": "GridPinnedRowsProp", "kind": "Interface" },
   { "name": "GridPipeProcessingLookup", "kind": "Interface" },
+  { "name": "GridPortalWrapper", "kind": "Function" },
   { "name": "GridPreferencePanelInitialState", "kind": "TypeAlias" },
   { "name": "GridPreferencePanelParams", "kind": "Interface" },
   { "name": "GridPreferencePanelState", "kind": "Interface" },
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 78e596e05085e..bc77ebd119c43 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -424,6 +424,7 @@
   { "name": "GridPinnedRowNode", "kind": "TypeAlias" },
   { "name": "GridPinnedRowsProp", "kind": "Interface" },
   { "name": "GridPipeProcessingLookup", "kind": "Interface" },
+  { "name": "GridPortalWrapper", "kind": "Function" },
   { "name": "GridPreferencePanelInitialState", "kind": "TypeAlias" },
   { "name": "GridPreferencePanelParams", "kind": "Interface" },
   { "name": "GridPreferencePanelState", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index 36c02ff61d172..5949b351aa98a 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -386,6 +386,7 @@
   { "name": "gridPinnedColumnsSelector", "kind": "Variable" },
   { "name": "GridPinnedRowNode", "kind": "TypeAlias" },
   { "name": "GridPipeProcessingLookup", "kind": "Interface" },
+  { "name": "GridPortalWrapper", "kind": "Function" },
   { "name": "GridPreferencePanelInitialState", "kind": "TypeAlias" },
   { "name": "GridPreferencePanelParams", "kind": "Interface" },
   { "name": "GridPreferencePanelState", "kind": "Interface" },