@pega/react-sdk-overrides 0.24.3 → 0.25.1

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -1,20 +1,19 @@
 /* eslint-disable no-nested-ternary */
 
 import { useState, useEffect, useContext } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Card, CardHeader, Avatar, Typography } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
-import DayjsUtils from '@date-io/dayjs';
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert, Card, CardHeader, Avatar, Typography } from '@mui/material';
 
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/helpers';
+import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/infra/Containers/container-helpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { withSimpleViewContainerRenderer } from '../SimpleView/SimpleView';
+import { withSimpleViewContainerRenderer } from '@pega/react-sdk-components/lib/components/infra/Containers/SimpleView/SimpleView';
 
 import { addContainerItem, getToDoAssignments, showBanner, hasContainerItems } from './helpers';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 interface FlowContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -118,12 +117,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
     if (caseViewMode && caseViewMode === 'review') {
       return true;
     }
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (caseViewMode && caseViewMode === 'perform') {
-      return false;
-    }
-
-    return true;
+    return !(caseViewMode && caseViewMode === 'perform');
   }
 
   function initComponent() {
@@ -182,11 +176,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
 
     const childCases = ourPConn.getValue(pCoreConstants.CASE_INFO.CHILD_ASSIGNMENTS, ''); // 2nd arg empty string until typedefs properly allow optional
     // const allAssignments = [];
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (childCases && childCases.length > 0) {
-      return true;
-    }
-    return false;
+    return !!(childCases && childCases.length > 0);
   }
 
   function hasAssignments() {
@@ -267,17 +257,15 @@ export const FlowContainer = (props: FlowContainerProps) => {
     // if have caseMessage show message and end
     const theCaseMessages = localizedVal(thePConn.getValue('caseMessages', ''), localeCategory); // 2nd arg empty string until typedefs properly allow optional
 
-    if (theCaseMessages || !hasAssignments()) {
+    // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
+    // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
+    if (!hasAssignments()) {
       // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
       // So, if we get here and caseMessages$ is empty, use default value in DX API response
       setCaseMessages(theCaseMessages || localizedVal('Thank you! The next step in this case has been routed appropriately.', localeCategory));
       setHasCaseMessages(true);
       setShowConfirm(true);
 
-      // publish this "assignmentFinished" for mashup, need to get approved as a standard
-      // @ts-ignore - second parameter “payload” for publish method should be optional
-      PCore.getPubSubUtils().publish('assignmentFinished');
-
       // debugger;
       setCheckSvg(Utils.getImageSrc('check', Utils.getSDKStaticConentUrl()));
     } else {
@@ -289,7 +277,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
 
   const caseId = thePConn.getCaseSummary().content.pyID;
   const urgency = getPConnect().getCaseSummary().assignments ? getPConnect().getCaseSummary().assignments?.[0].urgency : '';
-  const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName());
+  const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName() || '');
 
   const bShowBanner = showBanner(getPConnect);
 
@@ -313,21 +301,21 @@ export const FlowContainer = (props: FlowContainerProps) => {
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}
-              <MuiPickersUtilsProvider utils={DayjsUtils}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>
                   {rootViewElement}
                 </Assignment>
-              </MuiPickersUtilsProvider>
+              </LocalizationProvider>
             </Card>
           ) : (
             <Card className={`${classes.root} psdk-root`}>
               <Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>
               {displayPageMessages()}
-              <MuiPickersUtilsProvider utils={DayjsUtils}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>
                   {rootViewElement}
                 </Assignment>
-              </MuiPickersUtilsProvider>
+              </LocalizationProvider>
             </Card>
           )
         ) : (

package/lib/infra/Containers/FlowContainer/helpers.ts

@@ -88,11 +88,7 @@ export const hasAssignments = pConnect => {
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
-  // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-  if (assignments || childCasesAssignments || isCaseWideLocalAction(pConnect)) {
-    return true;
-  }
-  return false;
+  return !!(assignments || childCasesAssignments || isCaseWideLocalAction(pConnect));
 };
 
 export const showBanner = getPConnect => {

package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -49,10 +49,15 @@ function ListViewActionButtons(props: ListViewActionButtonsProps) {
           getPConnect()
             .getActionsApi()
             .submitEmbeddedDataModal(context)
-            .then(() => {})
+            .then(() => {
+              closeActionsDialog();
+            })
+            .catch(err => {
+              // eslint-disable-next-line no-console
+              console.log(err);
+            })
             .finally(() => {
               setIsDisabled(false);
-              closeActionsDialog();
             });
         }}
       >

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -1,10 +1,10 @@
 import { createElement, useEffect, useRef, useState } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import { makeStyles } from '@material-ui/core/styles';
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import makeStyles from '@mui/styles/makeStyles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import difference from 'lodash.difference';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
@@ -315,7 +315,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         </DialogTitle>
         <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
           {bShowModal ? (
-            <MuiPickersUtilsProvider utils={DayjsUtils}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
               <Assignment
                 getPConnect={createdView.configObject.getPConnect}
                 itemKey={itemKey}
@@ -327,7 +327,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
               >
                 {arNewChildrenAsReact}
               </Assignment>
-            </MuiPickersUtilsProvider>
+            </LocalizationProvider>
           ) : null}
         </DialogContent>
 

package/lib/infra/Containers/SimpleView/helper.ts

@@ -1,7 +1,7 @@
 import { useEffect, createElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/helpers';
+import { isContainerInitialized } from '@pega/react-sdk-components/lib/components/infra/Containers/container-helpers';
 
 const processRootViewDetails = (rootView, containerItem, options) => {
   const {

package/lib/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -1,5 +1,5 @@
 import React, { createElement, useContext, useEffect, useState } from 'react';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-shadow */
-/* eslint-disable operator-assignment */
 import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import { v4 as uuidv4 } from 'uuid';
+import { TextField } from '@mui/material';
 import { debounce } from 'throttle-debounce';
 import DatePicker from 'react-datepicker';
 
@@ -20,8 +18,8 @@ interface DashboardFilterProps extends PConnProps {
 }
 
 export default function DashboardFilter(props: PropsWithChildren<DashboardFilterProps>) {
-  const { children = [], name, filterProp, type = '', metadata = null, getPConnect } = props;
-  const { current: filterId } = useRef(uuidv4());
+  const { children, name, filterProp, type = '', metadata = null, getPConnect } = props;
+  const { current: filterId } = useRef(crypto.randomUUID());
 
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
@@ -35,7 +33,7 @@ export default function DashboardFilter(props: PropsWithChildren<DashboardFilter
         } else if (type === 'RadioButtons') {
           const reference = getPConnect().getFullReference() + filterProp;
           const radList = document.getElementsByName(reference);
-          for (let i = 0; i < radList.length; i = i + 1) {
+          for (let i = 0; i < radList.length; i += 1) {
             if ((radList[i] as HTMLInputElement).value === '') {
               (radList[i] as HTMLInputElement).checked = true;
             } else {

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-template */
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
-import { Grid, Link } from '@material-ui/core';
+import { Grid, Link } from '@mui/material';
 
 import DashboardFilter from './DashboardFilter';
 
@@ -46,7 +46,6 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
   }
   let propInfo: any = PCore.getMetadataUtils().getPropertyMetadata(cleanedName, filterMeta.config.ruleClass);
   if (!propInfo) {
-    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
     propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
   }
   const { type: propertyType } = propInfo || { type: 'Text' };
@@ -78,13 +77,13 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
   const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
   if (filterComponents && filterComponents.length > 0) {
     filterComponents.push(
-      <Grid>
+      <Grid style={{ display: 'flex', alignItems: 'center' }}>
         <Link
           style={{ cursor: 'pointer' }}
           onClick={() => {
-            // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
           }}
+          underline='hover'
         >
           Clear All
         </Link>

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, createElement } from 'react';
-import { Box, Card, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
@@ -12,6 +12,7 @@ interface DeferLoadProps extends PConnProps {
   isChildDeferLoad?: boolean;
   isTab: boolean;
   deferLoadId: string;
+  lastUpdateCaseTime: any;
 }
 
 //
@@ -34,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -69,8 +70,8 @@ export default function DeferLoad(props: DeferLoadProps) {
   const getViewOptions = () => ({
     viewContext: resourceType,
     pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
-    container: isContainerPreview ? 'preview' : null,
-    containerName: isContainerPreview ? 'preview' : null,
+    container: isContainerPreview ? 'preview' : undefined,
+    containerName: isContainerPreview ? 'preview' : undefined,
     updateData: isContainerPreview
   });
 
@@ -95,7 +96,7 @@ export default function DeferLoad(props: DeferLoadProps) {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -113,7 +114,6 @@ export default function DeferLoad(props: DeferLoadProps) {
         getPConnect()
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
-            // @ts-ignore - Type 'boolean' is not assignable to type 'string'
             skipSemanticUrl: true,
             // @ts-ignore
             isDeferLoaded: true
@@ -145,7 +145,7 @@ export default function DeferLoad(props: DeferLoadProps) {
           console.log(`deferload: ${error}`);
         });
     }
-  }, [name, getPConnect, currentLoadedAssignment]);
+  }, [name, getPConnect, currentLoadedAssignment, lastUpdateCaseTime]);
   /* TODO Cosmos need to handle for now added a wrapper div with pos relative */
   let deferLoadContent;
   if (isLoading) {

package/lib/infra/MultiStep/MultiStep.tsx

@@ -11,7 +11,7 @@ interface MultiStepProps extends PConnProps {
   actionButtons: any[];
   onButtonPress: any;
   bIsVertical: boolean;
-  arNavigationSteps: any[];
+  arNavigationSteps: any;
 }
 
 export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
@@ -21,6 +21,12 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
   const { bIsVertical, arNavigationSteps } = props;
 
+  let currentStep = arNavigationSteps.find(({ visited_status: vs }) => vs === 'current');
+  if (!currentStep) {
+    const lastActiveStepIndex = arNavigationSteps.findLastIndex(({ visited_status: vs }) => vs === 'success');
+    currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
+  }
+
   // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
   // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
 
@@ -48,16 +54,16 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     return 'psdk-vertical-step-body';
   }
 
-  function _getHIconClass(status): string {
-    if (status === 'current') {
+  function _getHIconClass(step): string {
+    if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-icon-selected';
     }
 
     return 'psdk-horizontal-step-icon';
   }
 
-  function _getHLabelClass(status): string {
-    if (status === 'current') {
+  function _getHLabelClass(step): string {
+    if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-label-selected';
     }
 
@@ -65,12 +71,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   }
 
   function _showHLine(index: number): boolean {
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (index < arNavigationSteps.length - 1) {
-      return true;
-    }
-
-    return false;
+    return index < arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -138,12 +139,12 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
               return (
                 <React.Fragment key={mainStep.actionID}>
                   <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep.visited_status)}>
+                    <div className={_getHIconClass(mainStep)}>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep.visited_status)}>
+                    <div className={_getHLabelClass(mainStep)}>
                       <div className='psdk-horizontal-step-text-label' id='selected-label'>
                         {mainStep.name}
                       </div>
@@ -176,7 +177,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                     ))}
                   </ul>
                 )}
-                {!mainStep?.steps && mainStep.visited_status === 'current' && (
+                {!mainStep?.steps && mainStep.ID === currentStep?.ID && (
                   <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
                     {children}
                   </AssignmentCard>

package/lib/infra/NavBar/NavBar.css

@@ -165,4 +165,5 @@
 
 .scrollable {
   overflow-y: scroll !important;
+  min-height: 200px !important;
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import clsx from 'clsx';
 
 import {
@@ -15,19 +16,22 @@ import {
   Menu,
   MenuItem,
   Typography
-} from '@material-ui/core';
-import PersonOutlineIcon from '@material-ui/icons/PersonOutlineOutlined';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
-import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import AddIcon from '@material-ui/icons/Add';
-import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
-import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+} from '@mui/material';
+import PersonOutlineIcon from '@mui/icons-material/PersonOutlineOutlined';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import TabletAndroidOutlineIcon from '@mui/icons-material/TabletAndroidOutlined';
+import AirportShuttleOutlinedIcon from '@mui/icons-material/AirportShuttleOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import AddIcon from '@mui/icons-material/Add';
+import WorkOutlineIcon from '@mui/icons-material/WorkOutline';
+import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
@@ -48,7 +52,11 @@ interface NavBarProps extends PConnProps {
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
   'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
-  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
+  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />,
+  'pi pi-tablet': <TabletAndroidOutlineIcon fontSize='large' />,
+  'pi pi-ambulance': <AirportShuttleOutlinedIcon fontSize='large' />,
+  'pi pi-ink-solid': <EditOutlinedIcon fontSize='large' />,
+  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -203,7 +211,7 @@ export default function NavBar(props: NavBarProps) {
               }
             />
             <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen}>
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
                 <ChevronLeftIcon className={classes.appListIcon} />
               </IconButton>
             </ListItemSecondaryAction>
@@ -256,7 +264,7 @@ export default function NavBar(props: NavBarProps) {
             <ListItemText primary={portalOperator} />
             {open && (
               <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick}>
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
                   <ChevronRightIcon />
                 </IconButton>
               </ListItemSecondaryAction>

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,6 +1,5 @@
 import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import isEqual from 'lodash.isequal';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
@@ -54,6 +53,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
   const pConn = getPConnect();
 
   const options = { context: 'app' };
+  const rootView = useRef(null);
 
   const [componentName, setComponentName] = useState('');
 
@@ -146,7 +146,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     return noPortalContent;
   }
 
-  let rootView: any;
   let rootViewConfig: any = null;
 
   useEffect(() => {
@@ -180,8 +179,8 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
       }
     };
 
-    if (!isEqual(currentRootConfig, prevRootConfig)) {
-      rootView = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig));
+    if (prevRootConfig === null || !PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
+      rootView.current = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig)) as any;
     }
 
     // debugging/investigation help
@@ -189,7 +188,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
 
     return (
       <div id='ModalManager'>
-        {rootView}
+        {rootView.current}
         {MemoizedModalViewContainer}
         <div id='MemoizedPreviewViewContainer' />
         <div id='ReAuthMessageModal' />

package/lib/infra/Stages/Stages.tsx

@@ -1,7 +1,7 @@
-import { Breadcrumbs, Card, Typography } from '@material-ui/core';
-import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
-import DoneIcon from '@material-ui/icons/Done';
-import { makeStyles } from '@material-ui/core/styles';
+import { Breadcrumbs, Card, Typography } from '@mui/material';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import DoneIcon from '@mui/icons-material/Done';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -1,5 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
-import { Tab, Divider } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
+import { Tab, Divider } from '@mui/material';
 
 // LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -18,7 +18,8 @@ interface LeftAlignVerticalTabsProps {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%'
+    maxWidth: '100%',
+    alignItems: 'flex-start'
   },
   wrapper: {
     display: 'block',

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Tabs from '@material-ui/core/Tabs';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';