clickGo(assignment)}>
- clickGo(assignment)}>
+ clickGo(assignment)} size='large'>
diff --git a/packages/react-sdk-components/src/index.tsx b/packages/react-sdk-components/src/index.tsx
index 6496e06c..ef70e7e2 100644
--- a/packages/react-sdk-components/src/index.tsx
+++ b/packages/react-sdk-components/src/index.tsx
@@ -1,5 +1,5 @@
// from react_root.js
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import TopLevelApp from '../src/samples/TopLevelApp';
import './common.css';
@@ -7,10 +7,10 @@ import './common.css';
const outletElement = document.getElementById('outlet');
if (outletElement) {
- render(
+ const root = createRoot(outletElement);
+ root.render(
- ,
- document.getElementById('outlet')
+
);
}
diff --git a/packages/react-sdk-components/src/samples/AppSelector/index.tsx b/packages/react-sdk-components/src/samples/AppSelector/index.tsx
index 3ca70529..0c3ae1cb 100644
--- a/packages/react-sdk-components/src/samples/AppSelector/index.tsx
+++ b/packages/react-sdk-components/src/samples/AppSelector/index.tsx
@@ -1,4 +1,4 @@
-import { Switch, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
import EmbeddedTopLevel from '../Embedded/EmbeddedTopLevel';
import FullPortal from '../FullPortal';
@@ -16,15 +16,15 @@ const baseURL = '/';
const AppSelector = () => {
return (
-
-
-
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
);
};
diff --git a/packages/react-sdk-components/src/samples/AuthPage/index.jsx b/packages/react-sdk-components/src/samples/AuthPage/index.jsx
deleted file mode 100644
index d15d7915..00000000
--- a/packages/react-sdk-components/src/samples/AuthPage/index.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { getHomeUrl, authIsMainRedirect, authRedirectCallback } from '@pega/auth/lib/sdk-auth-manager';
-import { authDone } from '@pega/auth/lib/auth-code-redirect';
-
-export default function AuthPage() {
- if (authIsMainRedirect()) {
- authRedirectCallback(window.location.href, () => {
- // eslint-disable-next-line no-restricted-globals
- location.href = `${getHomeUrl()}portal`;
- });
- } else {
- authDone();
- }
-
- return ;
-}
diff --git a/packages/react-sdk-components/src/samples/Embedded/EmbeddedSwatch/index.tsx b/packages/react-sdk-components/src/samples/Embedded/EmbeddedSwatch/index.tsx
index 8a87dd29..de015e33 100644
--- a/packages/react-sdk-components/src/samples/Embedded/EmbeddedSwatch/index.tsx
+++ b/packages/react-sdk-components/src/samples/Embedded/EmbeddedSwatch/index.tsx
@@ -1,5 +1,5 @@
/* eslint-disable react/button-has-type */
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles(theme => ({
swatchHeader: {
diff --git a/packages/react-sdk-components/src/samples/Embedded/EmbeddedTopLevel/index.tsx b/packages/react-sdk-components/src/samples/Embedded/EmbeddedTopLevel/index.tsx
index 76b8bad4..ecbdc1c3 100644
--- a/packages/react-sdk-components/src/samples/Embedded/EmbeddedTopLevel/index.tsx
+++ b/packages/react-sdk-components/src/samples/Embedded/EmbeddedTopLevel/index.tsx
@@ -1,9 +1,10 @@
/* eslint-disable react/button-has-type */
import { useState, useEffect } from 'react';
-import { render } from 'react-dom';
-import Typography from '@material-ui/core/Typography';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { createTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { createRoot } from 'react-dom/client';
+import Typography from '@mui/material/Typography';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
import { sdkIsLoggedIn, loginIfNecessary, sdkSetAuthHeader, sdkSetCustomTokenParamsCB, getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
import StoreContext from '../../../bridge/Context/StoreContext';
@@ -12,9 +13,11 @@ import EmbeddedSwatch from '../EmbeddedSwatch';
import { compareSdkPCoreVersions } from '../../../components/helpers/versionHelpers';
import { getSdkComponentMap } from '../../../bridge/helpers/sdk_component_map';
import localSdkComponentMap from '../../../../sdk-local-component-map';
+import { theme } from '../../../theme';
declare const myLoadMashup: any;
+// eslint-disable-next-line @typescript-eslint/no-shadow
const useStyles = makeStyles(theme => ({
embedTopRibbon: {
display: 'none',
@@ -103,17 +106,6 @@ const useStyles = makeStyles(theme => ({
}));
export default function EmbeddedTopLevel() {
- const theme = createTheme({
- // palette: {
- // primary: {
- // main: '#2196f3',
- // },
- // secondary: {
- // main: '#ff9800',
- // },
- // },
- });
-
// Array of 3 shopping options to display
const shoppingOptions = [
{
@@ -294,10 +286,12 @@ export default function EmbeddedTopLevel() {
return (
// eslint-disable-next-line react/jsx-no-constructed-context-values
-
-
- {thePConnObj}
-
+
+
+
+ {thePConnObj}
+
+
);
}
@@ -334,14 +328,17 @@ export default function EmbeddedTopLevel() {
}
const theComponent = (
-
-
-
-
+
+
+
+
+
+
);
+ const root = createRoot(target);
// Initial render of component passed in (which should be a RootContainer)
- render(<>{theComponent}, target);
+ root.render(<>{theComponent});
// Initial render to show that we have a PConnect and can render in the target location
// render( EmbeddedTopLevel initialRender in {domContainerID} with PConn of {componentName}
, target);
diff --git a/packages/react-sdk-components/src/samples/FullPortal/index.tsx b/packages/react-sdk-components/src/samples/FullPortal/index.tsx
index 431e58f4..607c9550 100644
--- a/packages/react-sdk-components/src/samples/FullPortal/index.tsx
+++ b/packages/react-sdk-components/src/samples/FullPortal/index.tsx
@@ -1,8 +1,8 @@
import { useEffect, useMemo, useState } from 'react';
-import ReactDOM from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
-import { useLocation, useHistory } from 'react-router-dom';
+import { createRoot } from 'react-dom/client';
+import { useLocation, useNavigate } from 'react-router-dom';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import { SdkConfigAccess, loginIfNecessary, getAvailablePortals } from '@pega/auth/lib/sdk-auth-manager';
import StoreContext from '../../bridge/Context/StoreContext';
@@ -10,6 +10,7 @@ import createPConnectComponent from '../../bridge/react_pconnect';
import { compareSdkPCoreVersions } from '../../components/helpers/versionHelpers';
import { getSdkComponentMap } from '../../bridge/helpers/sdk_component_map';
import localSdkComponentMap from '../../../sdk-local-component-map';
+import { theme } from '../../theme';
import InvalidPortal from './InvalidPortal';
@@ -27,23 +28,16 @@ export default function FullPortal() {
const [defaultPortalName, setDefaultPortalName] = useState('');
const [availablePortals, setAvailablePortals] = useState([]);
- const history = useHistory();
+ const navigate = useNavigate();
const query = useQuery();
if (query.get('portal')) {
const portalValue: any = query.get('portal');
sessionStorage.setItem('rsdk_portalName', portalValue);
}
-
- const theme = createTheme({
- // palette: {
- // primary: {
- // main: '#2196f3',
- // },
- // secondary: {
- // main: '#ff9800',
- // },
- // },
- });
+ if (query.get('locale')) {
+ const localeOverride: any = query.get('locale');
+ sessionStorage.setItem('rsdk_locale', localeOverride);
+ }
// const outlet = document.getElementById("outlet");
@@ -66,10 +60,12 @@ export default function FullPortal() {
return (
// eslint-disable-next-line react/jsx-no-constructed-context-values
-
-
- {thePConnObj}
-
+
+
+
+ {thePConnObj}
+
+
);
}
@@ -102,16 +98,18 @@ export default function FullPortal() {
// var theComponent = the Component
;
const theComponent = (
-
-
- ;
-
+
+
+
+ ;
+
+
);
- ReactDOM.render(
+ const root = createRoot(target || document.getElementById('pega-root') || document.getElementsByTagName(domContainerID)[0]);
+ root.render(
// was