TASK: Replace react-portal with native portal for dialog component

neos · Jun 24, 2023 · 4f309a8 · 4f309a8
1 parent e947e75
commit 4f309a8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/packages/react-ui-components/package.json b/packages/react-ui-components/package.json
@@ -53,7 +53,6 @@
     "react-dom": "^16.0.0",
     "react-height": "^3.0.0",
     "react-motion": "^0.5.0",
-    "react-portal": "^4.2.0",
     "react-svg": "^11.1.2",
     "react-textarea-autosize": "^8.3.0"
   },

diff --git a/packages/react-ui-components/src/Dialog/__snapshots__/dialog.spec.tsx.snap b/packages/react-ui-components/src/Dialog/__snapshots__/dialog.spec.tsx.snap
@@ -37,7 +37,9 @@ exports[`<Dialog/> Content should render correctly. 1`] = `
 `;
 
 exports[`<Dialog/> Portal should render correctly. 1`] = `
-<Portal>
+<Portal
+  containerInfo={<body />}
+>
   <section
     autoFocus={true}
     className="dialogClassName wideClassName errorClassName"

diff --git a/packages/react-ui-components/src/Dialog/dialog.spec.tsx b/packages/react-ui-components/src/Dialog/dialog.spec.tsx
@@ -1,7 +1,6 @@
 import {shallow} from 'enzyme';
 import toJson from 'enzyme-to-json';
 import React from 'react';
-import {Portal} from 'react-portal';
 
 import DialogWithOverlay, {DialogProps, DialogWithoutOverlay} from './dialog';
 
@@ -46,24 +45,21 @@ describe('<Dialog/>', () => {
 
     it('should render the "dialog--wide" className from the "theme" prop if the style is wide.', () => {
         const wrapper = shallow(<DialogWithOverlay {...props} style="wide"/>);
-        const portal = wrapper.find(Portal);
-        const section = portal.find('section');
+        const section = wrapper.find('section');
 
         expect(section.prop('className')).toContain('wideClassName');
     });
 
     it('should render the "dialog--jumbo" className from the "theme" prop if the style is jumbo.', () => {
         const wrapper = shallow(<DialogWithOverlay {...props} style="jumbo"/>);
-        const portal = wrapper.find(Portal);
-        const section = portal.find('section');
+        const section = wrapper.find('section');
 
         expect(section.prop('className')).toContain('jumboClassName');
     });
 
     it('should render the "dialog--narrow" className from the "theme" prop if the style is narrow.', () => {
         const wrapper = shallow(<DialogWithOverlay {...props} style="narrow"/>);
-        const portal = wrapper.find(Portal);
-        const section = portal.find('section');
+        const section = wrapper.find('section');
 
         expect(section.prop('className')).toContain('narrowClassName');
     });

diff --git a/packages/react-ui-components/src/Dialog/dialog.tsx b/packages/react-ui-components/src/Dialog/dialog.tsx
@@ -1,6 +1,6 @@
 import mergeClassNames from 'classnames';
 import React, { PureComponent, ReactNode } from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Dialog, DialogManager } from './DialogManager';
 
 type DialogType = 'success' | 'warn' | 'error';
@@ -180,18 +180,17 @@ class DialogWithOverlay extends PureComponent<DialogProps> {
             return null;
         }
 
-        return (
-            <Portal>
-                <section
-                    {...rest}
-                    className={sectionClassName}
-                    role="dialog"
-                    tabIndex={0}
-                    onClick={this.handleOverlayClick}
-                >
-                    <DialogWithoutOverlay {...this.props} />
-                </section>
-            </Portal>
+        return createPortal(
+            <section
+                {...rest}
+                className={sectionClassName}
+                role="dialog"
+                tabIndex={0}
+                onClick={this.handleOverlayClick}
+            >
+                <DialogWithoutOverlay {...this.props} />
+            </section>,
+            document.body
         );
     }