fix: update to React 18 and MUI6

.eslintrc.json

@@ -97,7 +97,7 @@
       }
     },
     {
-      "files": "*.@(jsx|tsx|mdx)",
+      "files": "*.@(jsx|ts|tsx|mdx)",
       "rules": {
         "react/react-in-jsx-scope": "off",
         // Set up configuration for future sweep

.prettierrc.js

@@ -1,9 +1,7 @@
 // Prettier config options: https://prettier.io/docs/en/options.html
 // Shared front-end config: https://git.pega.io/projects/FE/repos/configs/browse/packages/prettier-config/index.json
 
-const pegaPrettierConfig = require('@pega/prettier-config');
-
-module.exports = {
-  ...pegaPrettierConfig,
+module.exports = import('@pega/prettier-config').then(pegaPrettierConfig => ({
+  ...pegaPrettierConfig.default,
   printWidth: 150
-};
+}));

package.json

@@ -53,49 +53,32 @@
     "_internal-build-jest-assets": "dx-component-builder-sdk buildJestAssets"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.7",
-    "@mui/styles": "^5.16.7",
-    "@mui/x-date-pickers": "^7.20.0",
-    "@pega/auth": "^0.2.30",
+    "@pega/auth": "^0.2.31",
     "@pega/cosmos-react-condition-builder": "^7.0.4",
     "@pega/cosmos-react-core": "^7.0.4",
     "@pega/cosmos-react-work": "^7.0.4",
-    "@pega/react-sdk-components": "~24.2.11",
+    "@pega/react-sdk-components": "~0.25.2",
     "@storybook/react-webpack5": "^8.6.14",
-    "@tinymce/tinymce-react": "^5.1.1",
+    "@types/react-dom": "^18.3.7",
     "@types/styled-components": "^5.1.34",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "downloadjs": "^1.4.7",
-    "fast-deep-equal": "^3.1.3",
-    "lodash.difference": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
-    "mui-tel-input": "^6.0.1",
-    "react": "^17.0.2",
-    "react-datepicker": "^4.25.0",
-    "react-dom": "^17.0.2",
-    "react-number-format": "^5.4.2",
-    "react-redux": "^8.1.3",
-    "react-router-dom": "^6.22.3",
-    "styled-components": "^6.1.8",
-    "throttle-debounce": "^5.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.8.1",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@loadable/component": "^5.16.3",
-    "@pega/configs": "^0.7.0",
+    "@pega/configs": "^0.16.3",
     "@pega/constellationjs": "~24.2.2",
     "@pega/dx-component-builder-sdk": "~24.2.12",
     "@pega/pcore-pconnect-typedefs": "~3.2.2",
-    "@pega/react-sdk-overrides": "~24.2.11",
-    "@playwright/test": "^1.52.0",
+    "@pega/react-sdk-overrides": "~0.25.2",
+    "@playwright/test": "^1.54.2",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
     "@storybook/addon-storysource": "^8.6.14",
@@ -106,51 +89,52 @@
     "@storybook/test": "^8.6.14",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.6.14",
-    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
+    "@types/jest": "^30.0.0",
     "@types/lodash.isequal": "^4.5.8",
-    "@types/react": "^17.0.83",
+    "@types/react": "^18.3.23",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^8.34.1",
-    "caniuse-lite": "^1.0.30001576",
-    "compression-webpack-plugin": "^10.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "caniuse-lite": "^1.0.30001735",
+    "compression-webpack-plugin": "^11.1.0",
+    "copy-webpack-plugin": "^13.0.1",
     "cspell": "^8.3.2",
-    "css-loader": "^6.8.1",
+    "css-loader": "^7.1.2",
     "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^27.6.2",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.23.0",
     "eslint-plugin-storybook": "^0.6.15",
     "fast-glob": "^3.3.2",
     "file-loader": "^6.2.0",
     "glob-parent": "^6.0.2",
-    "html-webpack-plugin": "^5.6.0",
+    "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "null-loader": "^4.0.1",
-    "prettier": "^3.1.1",
+    "prettier": "^3.6.2",
     "prop-types": "^15.8.1",
-    "sass-loader": "^13.3.3",
-    "shx": "^0.3.4",
+    "sass-loader": "^16.0.5",
+    "shx": "^0.4.0",
     "storybook": "^8.6.14",
-    "style-loader": "^3.3.4",
-    "stylelint": "^16.1.0",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.23.1",
     "tinymce": "^6.8.6",
     "trim-newlines": "^5.0.0",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.4.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.2",
     "update-browserslist-db": "^1.0.13",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
+    "webpack": "^5.101.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "browser": {
     "[module-name]": false

src/index.tsx

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

src/samples/AppSelector/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 import Embedded from '../Embedded';
 import FullPortal from '../FullPortal';

src/samples/FullPortal/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable no-console */
 import { useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { SdkConfigAccess, loginIfNecessary, getAvailablePortals } from '@pega/auth/lib/sdk-auth-manager';