qpp-style 1.34.0-rm.0 → 1.34.0-rm.2

package/components/Error/error.js

@@ -1,4 +1,4 @@
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import ErrorUI from "./ErrorUI";
 
 /**
@@ -13,13 +13,13 @@ export default class ErrorPage {
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
-    render(
+    const root = createRoot(options.rootElement);
+    root.render(
       <ErrorUI
         type={options.type}
         code={options.code}
         message={options.message}
       />,
-      options.rootElement,
     );
   }
 }

package/components/Footer/footer.js

@@ -1,4 +1,4 @@
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import FooterUI from "./FooterUI";
 
 /**
@@ -11,9 +11,11 @@ export default class Footer {
    */
   constructor(options) {
     if ("rootElement" in options) {
-      render(<FooterUI />, options.rootElement);
+      const root = createRoot(options.rootElement);
+      root.render(<FooterUI />);
     } else {
-      render(<FooterUI />, options);
+      const root = createRoot(options);
+      root.render(<FooterUI />);
     }
   }
 }

package/components/Header/header.js

@@ -1,4 +1,4 @@
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import HeaderUI from "./HeaderUI.jsx";
 
 /**
@@ -16,7 +16,8 @@ export default class Header {
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
-    render(
+    const root = createRoot(options.rootElement);
+    root.render(
       <HeaderUI
         isLoginEnabled={options.isLoginEnabled}
         skipToContentId={options.skipToContentId}
@@ -33,7 +34,6 @@ export default class Header {
         content={options.content}
         isIESupportPage={options.isIESupportPage}
       />,
-      options.rootElement,
     );
   }
 }

package/components/Modal/LegacyModal.jsx

@@ -1,5 +1,5 @@
 import { Component } from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import ReactModal from "react-modal";
 import { CloseXIcon } from "../../lib/SvgComponents.jsx";
 import SanitizedContent from "../SanitizedContent";
@@ -61,7 +61,8 @@ class Modal extends Component {
 }
 
 const displayModal = ({ content, main }) => {
-  render(<Modal content={content} showModal={true} />, main);
+  const root = createRoot(document.getElementById("root"));
+  root.render(<Modal content={content} showModal={true} />, main);
 };
 
 Modal.propTypes = {

package/components/Session/SessionDialogWrapped.jsx

@@ -1,4 +1,4 @@
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import SessionDialogUI from "../Session";
 
 /**
@@ -6,6 +6,7 @@ import SessionDialogUI from "../Session";
  */
 export default class SessionDialog {
   constructor(options) {
-    render(<SessionDialogUI />, options.rootElement);
+    const root = createRoot(options.rootElement);
+    root.render(<SessionDialogUI />);
   }
 }

package/components/SideNav/index.js

@@ -1,4 +1,4 @@
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SideNavUI } from "./UI";
 
 const SideNav = (options = {}) => {
@@ -12,7 +12,8 @@ const SideNav = (options = {}) => {
     rootElement,
   } = options;
 
-  return render(
+  const root = createRoot(rootElement);
+  return root.render(
     <SideNavUI
       onExpanded={onExpanded}
       onCollapsed={onCollapsed}
@@ -21,7 +22,6 @@ const SideNav = (options = {}) => {
       items={items}
       isAltStyle={isAltStyle}
     />,
-    rootElement,
   );
 };