Fixed an issue where modals would not show in PersonaBar

Dnn.AdminExperience/ClientSide/Dnn.React.Common/.storybook/main.ts

@@ -13,9 +13,23 @@ const config : StorybookConfig = {
         "@storybook/addon-onboarding",
         "@storybook/addon-docs",
     ],
-    framework: 'storybook-react-rsbuild',
+    framework: {
+        name: 'storybook-react-rsbuild',
+        options: {
+            builder: {
+                lazyCompilation: false,
+            },
+        },
+    },
     rsbuildFinal: (config) => {
         return mergeRsbuildConfig(config, {
+            tools: {
+                rspack: {
+                    output: {
+                        globalObject: "self",
+                    },
+                },
+            },
             plugins: [
                 pluginReact({
                     swcReactOptions: {

Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json

@@ -35,7 +35,6 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-day-picker": "^7.4.10",
     "react-height": "^3.0.2",
-    "react-modal": "^3.16.3",
     "react-motion": "^0.5.2",
     "react-scrollbar": "^0.5.6",
     "react-slider": "2.0.6",

Dnn.AdminExperience/ClientSide/Dnn.React.Common/rsbuild.config.ts

@@ -10,22 +10,20 @@ const packageJson = requireModule("./package.json");
 
 const isProduction = process.env.npm_lifecycle_event === "build";
 
-const externalizeNodeModules = ({ request }: { request?: string }) => {
-  if (!request) {
-    return undefined;
-  }
-
-  if (request.startsWith(".") || path.isAbsolute(request)) {
-    return undefined;
-  }
-
-  // Keep loader/runtime virtual requests bundled.
-  if (request.includes("!") || request.includes("?")) {
-    return undefined;
-  }
-
-  return request;
-};
+// Modules explicitly provided by Persona Bar runtime globals.
+const runtimeProvidedExternals = new Set([
+  "react",
+  "prop-types",
+  "redux",
+  "react-redux",
+  "react-dom",
+  "redux-immutable-state-invariant",
+  "redux-thunk",
+  "react-collapse",
+  "react-custom-scrollbars",
+  "react-widgets",
+  "es6-promise",
+]);
 
 export default defineConfig({
   source: {
@@ -70,11 +68,18 @@ export default defineConfig({
         globalObject: "this",
       },
       externals: [
-        ({ request }) => {
-          if (request === "react" || request === "prop-types") {
+        ({ request }: { request?: string }) => {
+          if (!request) {
+            return undefined;
+          }
+
+          if (runtimeProvidedExternals.has(request)) {
             return request;
           }
-          return externalizeNodeModules({ request });
+
+          // Bundle everything else in dnn-react-common so runtime-only globals
+          // do not break components (for example react-modal internals).
+          return undefined;
         },
       ],
       resolve: {

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Modal/index.jsx

@@ -1,12 +1,61 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import ReactModal from "react-modal";
+import ReactDOM from "react-dom";
 import {Scrollbars} from "react-custom-scrollbars";
 import { XThinIcon } from "../SvgIcons";
 import "./style.less";
 
 
 class Modal extends Component {
+    componentDidMount() {
+        if (this.props.isOpen) {
+            this.handleModalOpened();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (!prevProps.isOpen && this.props.isOpen) {
+            this.handleModalOpened();
+        } else if (prevProps.isOpen && !this.props.isOpen) {
+            this.handleModalClosed();
+        }
+    }
+
+    componentWillUnmount() {
+        this.handleModalClosed();
+    }
+
+    handleModalOpened() {
+        if (document && document.body) {
+            document.body.classList.add("ReactModal__Body--open");
+        }
+        if (this.props.onAfterOpen) {
+            this.props.onAfterOpen();
+        }
+    }
+
+    handleModalClosed() {
+        if (document && document.body) {
+            document.body.classList.remove("ReactModal__Body--open");
+        }
+    }
+
+    onOverlayMouseDown() {
+        if (this.props.shouldCloseOnOverlayClick && this.props.onRequestClose) {
+            this.props.onRequestClose();
+        }
+    }
+
+    onContentMouseDown(event) {
+        event.stopPropagation();
+    }
+
+    onPortalKeyDown(event) {
+        if (event.key === "Escape" && this.props.onRequestClose) {
+            this.props.onRequestClose();
+        }
+    }
+
     getScrollbarStyle(props) {
         return {
             width: "100%",
@@ -24,57 +73,92 @@ class Modal extends Component {
         if (document.getElementsByClassName("dnn-persona-bar-page-header") && document.getElementsByClassName("dnn-persona-bar-page-header").length > 0 && !props.modalHeight) {
             modalTopMargin = document.getElementsByClassName("dnn-persona-bar-page-header")[0].offsetHeight;
         }
-        return (props.style || {
+        const defaultStyles = {
             overlay: {
+                position: "fixed",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
                 zIndex: "99999",
                 backgroundColor: "rgba(0,0,0,0.6)"
             },
             content: {
                 top: modalTopMargin + props.dialogVerticalMargin,
                 left: props.dialogHorizontalMargin + 85,
+                right: "auto",
+                bottom: "auto",
                 padding: 0,
                 borderRadius: 0,
                 border: "none",
                 width: modalWidth - props.dialogHorizontalMargin * 2,
                 height: props.modalHeight || "60%",
                 backgroundColor: "#FFFFFF",
                 position: "absolute",
+                overflow: "auto",
+                WebkitOverflowScrolling: "touch",
+                outline: "none",
                 userSelect: "none",
                 WebkitUserSelect: "none",
                 MozUserSelect: "none",
                 MsUserSelect: "none",
                 boxSizing: "border-box"
             }
-        });
+        };
+
+        const customOverlay = props.style && props.style.overlay ? props.style.overlay : {};
+        const customContent = props.style && props.style.content ? props.style.content : {};
+
+        return {
+            overlay: {
+                ...defaultStyles.overlay,
+                ...customOverlay
+            },
+            content: {
+                ...defaultStyles.content,
+                ...customContent
+            }
+        };
     }
 
     render() {
         const {props} = this;
+        if (!props.isOpen || !document || !document.body) {
+            return null;
+        }
+
         const modalStyles = this.getModalStyles(props);
         const scrollBarStyle = this.getScrollbarStyle(props);
-        return (
-            <ReactModal
-                isOpen={props.isOpen}
-                onRequestClose={props.onRequestClose}
-                onAfterOpen={props.onAfterOpen}
-                closeTimeoutMS={props.closeTimeoutMS}
-                shouldCloseOnOverlayClick={props.shouldCloseOnOverlayClick}
-                style={modalStyles}>
-                {props.header &&
-                    <div className="modal-header">
-                        <h3>{props.header}</h3>
-                        {props.headerChildren}
-                        <div className="close-modal-button" onClick={props.onRequestClose}>
-                            <XThinIcon />
-                        </div>
-                    </div>
-                }
-                <Scrollbars style={scrollBarStyle}>
-                    <div style={props.contentStyle}>
-                        {props.children}
+        return ReactDOM.createPortal(
+            <div className="ReactModalPortal" onKeyDown={this.onPortalKeyDown.bind(this)}>
+                <div
+                    className="ReactModal__Overlay"
+                    style={modalStyles.overlay}
+                    onMouseDown={this.onOverlayMouseDown.bind(this)}>
+                    <div
+                        className="ReactModal__Content"
+                        style={modalStyles.content}
+                        role="dialog"
+                        aria-modal="true"
+                        onMouseDown={this.onContentMouseDown.bind(this)}>
+                        {props.header &&
+                            <div className="modal-header">
+                                <h3>{props.header}</h3>
+                                {props.headerChildren}
+                                <div className="close-modal-button" onClick={props.onRequestClose}>
+                                    <XThinIcon />
+                                </div>
+                            </div>
+                        }
+                        <Scrollbars style={scrollBarStyle}>
+                            <div style={props.contentStyle}>
+                                {props.children}
+                            </div>
+                        </Scrollbars>
                     </div>
-                </Scrollbars>
-            </ReactModal>
+                </div>
+            </div>,
+            document.body
         );
     }
 }