fix: adjust Web Components to React 18

Author: OliwiaGowor

src/shared/components/DynamicPageComponent/DynamicPageComponent.js

@@ -335,6 +335,7 @@ export const DynamicPageComponent = ({
           className="tab-container"
           style={{ top: `${headerHeight}px` }}
           ref={tabContainerRef}
+          collapsed
           onTabSelect={e => {
             if (customActionIfFormOpen) {
               customActionIfFormOpen(
@@ -343,9 +344,9 @@ export const DynamicPageComponent = ({
                 isFormOpen,
                 setIsFormOpen,
               );
+              setSelectedSectionIdState(e.detail.tab.getAttribute('data-mode'));
               return;
             }
-
             if (isFormOpen.formOpen) {
               e.preventDefault();
             }

src/web-components/DynamicPageWebComponent.jsx

@@ -3,10 +3,6 @@ import createWebComponent from './createWebComponent';
 import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/DynamicPageComponent';
 import { ThemeProvider } from '@ui5/webcomponents-react';
 import customCSS from 'shared/components/DynamicPageComponent/DynamicPageComponent.scss?inline';
-import { styleData as pageCSS } from '@ui5/webcomponents-react/dist/components/DynamicPage/DynamicPage.module.css.js?inline';
-import { styleData as titleCSS } from '@ui5/webcomponents-react/dist/components/DynamicPageTitle/DynamicPageTitle.module.css.js?inline';
-import { styleData as headerCSS } from '@ui5/webcomponents-react/dist/components/DynamicPageHeader/DynamicPageHeader.module.css.js?inline';
-import objectPageCSS from '@ui5/webcomponents-react/dist/css/components/ObjectPage/ObjectPage.module.css?inline';
 import { parseHtmlToJsx } from './htmlTojsx';
 
 function DynamicPageWithRecoil(props) {
@@ -66,18 +62,5 @@ createWebComponent(
     'class-name',
     'custom-action-if-form-open',
   ], // Observed attributes
-  // Can be cleaned up after migration to UI5 V2
-  `${pageCSS.content}\n${headerCSS.content}\n${titleCSS.content}\n${objectPageCSS}\n${customCSS}\n
-  [data-component-name=ObjectPageTopHeader] [data-component-name=DynamicPageTitle] {
-    grid-column: 2;
-    padding-inline: 0;
-  }
-  [data-component-name=ObjectPageTopHeader] {
-    padding-inline: 2rem;
-    background-color: var(--sapObjectHeader_Background);
-  }
-  ui5-title[level=H3] {
-    line-height: calc(var(--sapFontHeader3Size)* 1.15);
-  }
-  `,
+  `${customCSS}\n`,
 );

src/web-components/createWebComponent.jsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { parseHtmlToJsx } from './htmlTojsx';
 
 function kebabToCamelCase(str) {
@@ -16,17 +16,32 @@ function createWebComponent(
     constructor() {
       super();
       this.reactRoot = null;
+      this.reactRootInstance = null;
       this._props = {};
       this._slots = {};
     }
 
     connectedCallback() {
+      if (!this.reactRoot) {
+        this.reactRoot = document.createElement('div');
+        this.appendChild(this.reactRoot);
+        this.reactRootInstance = createRoot(this.reactRoot); // Initialize root
+      }
+
       this.applyStyles();
       this.mountReactComponent();
     }
 
     disconnectedCallback() {
-      ReactDOM.unmountComponentAtNode(this.reactRoot);
+      // Delay unmounting to avoid conflicts with React rendering
+      if (this.reactRootInstance) {
+        setTimeout(() => {
+          if (this.reactRootInstance) {
+            this.reactRootInstance.unmount();
+            this.reactRootInstance = null; // Clean up instance
+          }
+        }, 0);
+      }
     }
 
     static get observedAttributes() {
@@ -76,11 +91,6 @@ function createWebComponent(
     }
 
     mountReactComponent() {
-      if (!this.reactRoot) {
-        this.reactRoot = document.createElement('div');
-        this.appendChild(this.reactRoot);
-      }
-
       // Generate props from attributes
       const propsFromAttributes = observedAttributes.reduce((acc, attr) => {
         const attrValue = this.getAttribute(attr);
@@ -122,10 +132,9 @@ function createWebComponent(
         }
       });
 
-      ReactDOM.render(
-        <ReactComponent {...defaultProps} {...props} />,
-        this.reactRoot,
-      );
+      if (this.reactRootInstance) {
+        this.reactRootInstance.render(<ReactComponent {...props} />);
+      }
     }
   }