From a77a7b22a76212205126dc760b704b7670b46b75 Mon Sep 17 00:00:00 2001
From: Danail Hadjiatanasov <hadjiatanasov@gmail.com>
Date: Tue, 5 Sep 2023 15:15:12 +0300
Subject: [PATCH] [docs] Use `Base UI` `Portal` for the quick filter recipe
 (#10188)

---
 .../filtering-recipes/QuickFilterOutsideOfGrid.js        | 9 ++++-----
 .../filtering-recipes/QuickFilterOutsideOfGrid.tsx       | 9 ++++-----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
index f7272c1d57d3e..685103643c46f 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
@@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
-      {ReactDOM.createPortal(
-        <GridToolbarQuickFilter />,
-        document.getElementById('filter-panel'),
-      )}
+      <Portal container={() => document.getElementById('filter-panel')}>
+        <GridToolbarQuickFilter />
+      </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 c592b8bda98d5..12fc5cd7a1ab5 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
@@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
-      {ReactDOM.createPortal(
-        <GridToolbarQuickFilter />,
-        document.getElementById('filter-panel')!,
-      )}
+      <Portal container={() => document.getElementById('filter-panel')!}>
+        <GridToolbarQuickFilter />
+      </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
   );