fix: quickfilter outside of root

mui · Jan 9, 2025 · a9c8b65 · a9c8b65
1 parent 049a999
commit a9c8b65
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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/...x-data-grid/src/utils/css/themeManager.ts → ...-data-grid/src/utils/css/themeManager.tsx b/...x-data-grid/src/utils/css/themeManager.ts → ...-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
@@ -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
@@ -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
@@ -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
@@ -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" },
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export type { OutputSelector } from './createSelector';
		export { GridPortalWrapper } from './css/themeManager';