React downgraded to version 17 (#395)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "24.1.10",
+  "version": "0.242.2",
   "description": "React SDK packaging: bridge and components, overrides",
   "main": "index.ts",
   "scripts": {
@@ -62,12 +62,12 @@
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.difference": "^4.5.0",
-    "material-ui-phone-number-2": "^1.3.0",
-    "react": "^18.2.0",
+    "material-ui-phone-number": "^3.0.0",
+    "react": "^17.0.2",
     "react-datepicker": "^4.25.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.2",
     "react-number-format": "^5.4.2",
-    "react-redux": "^9.1.0",
+    "react-redux": "^8.1.3",
     "react-router-dom": "^6.22.3",
     "throttle-debounce": "^5.0.2"
   },
@@ -82,7 +82,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.73",
+    "@types/react": "^17.0.83",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",

packages/react-sdk-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-components",
-  "version": "24.1.10",
+  "version": "0.242.2",
   "description": "React SDK Infrastructure: bridge and components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

packages/react-sdk-components/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -13,6 +13,5 @@
 
 .psdk-case-summary-fields {
   padding: calc(2 * 0.5rem);
-  display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }

packages/react-sdk-components/src/components/field/Phone/Phone.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import MuiPhoneNumber from 'material-ui-phone-number-2';
+import MuiPhoneNumber from 'material-ui-phone-number';
 
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '../../../types/PConnProps';

packages/react-sdk-components/src/components/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -18,7 +18,8 @@ interface LeftAlignVerticalTabsProps {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%'
+    maxWidth: '100%',
+    alignItems: 'flex-start'
   },
   wrapper: {
     display: 'block',

packages/react-sdk-components/src/index.tsx

@@ -1,16 +1,16 @@
 // from react_root.js
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import TopLevelApp from '../src/samples/TopLevelApp';
 import './common.css';
 
 const outletElement = document.getElementById('outlet');
 
 if (outletElement) {
-  const root = createRoot(outletElement);
-  root.render(
+  render(
     <BrowserRouter>
       <TopLevelApp />
-    </BrowserRouter>
+    </BrowserRouter>,
+    document.getElementById('outlet')
   );
 }

packages/react-sdk-components/src/samples/Embedded/EmbeddedTopLevel/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/button-has-type */
 import { useState, useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import Typography from '@mui/material/Typography';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
@@ -335,10 +335,9 @@ export default function EmbeddedTopLevel() {
         </ThemeProvider>
       </StyledEngineProvider>
     );
-    const root = createRoot(target);
 
     // Initial render of component passed in (which should be a RootContainer)
-    root.render(<>{theComponent}</>);
+    ReactDOM.render(<>{theComponent}</>, target);
 
     // Initial render to show that we have a PConnect and can render in the target location
     // render( <div>EmbeddedTopLevel initialRender in {domContainerID} with PConn of {componentName}</div>, target);

packages/react-sdk-components/src/samples/FullPortal/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { useLocation, useNavigate } from 'react-router-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
@@ -106,10 +106,10 @@ export default function FullPortal() {
       </StyledEngineProvider>
     );
 
-    const root = createRoot(target || document.getElementById('pega-root') || document.getElementsByTagName(domContainerID)[0]);
-    root.render(
+    ReactDOM.render(
       // was <Component
-      theComponent
+      theComponent,
+      target || document.getElementById('pega-root') || document.getElementsByTagName(domContainerID)[0]
     );
   }
 

packages/react-sdk-overrides/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "24.1.10",
+  "version": "0.242.2",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [