@pega/dx-component-builder-sdk 24.2.14 → 25.1.11

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.css

@@ -17,7 +17,7 @@
 
 .psdk-current-svg-icon {
   width: 1rem;
-  filter: var(--app-primary-color-filter);
+  filter: var(--svg-color);
 }
 
 .psdk-not-current-svg-icon {
@@ -40,7 +40,7 @@ mat-horizontal-stepper {
 
 .psdk-sub-step-not-current {
   padding-left: 0.625rem;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
 }
 
 .psdk-flow-container-top {
@@ -79,36 +79,37 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: #fff;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
+  color: var(--app-text-color);
+}
+
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
+  background-color: var(--app-primary-color);
+  color: var(--app-text-color);
+  flex-shrink: 0;
+}
+
 .psdk-vertical-step-icon-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
-}
-
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
-  background-color: var(--app-primary-color);
-  color: #fff;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
 }
 
 .psdk-vertical-step-label {
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--step-label-color);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,33 +155,39 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
-  overflow: hidden;
   outline: none;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
   display: flex;
   height: 72px;
-  overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: #fff;
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +198,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: #fff;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
+  color: var(--text-secondary-color);
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+.current .psdk-horizontal-step-label {
+  color: var(--text-primary-color);
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './MultiStep.css';
 
@@ -27,56 +27,27 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
   }
 
-  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
-
-  function _getVIconClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-icon-selected';
-    }
-
-    return 'psdk-vertical-step-icon';
-  }
-
-  function _getVLabelClass(status): string {
-    if (status === 'current') {
-      return 'psdk-vertical-step-label-selected';
-    }
-
-    return 'psdk-vertical-step-label';
-  }
-
   function _getVBodyClass(index: number): string {
-    if (index < arNavigationSteps.length - 1) {
-      return 'psdk-vertical-step-body psdk-vertical-step-line';
-    }
+    const baseClass = 'psdk-vertical-step-body';
+    const isNotLastStep = index < arNavigationSteps.length - 1;
 
-    return 'psdk-vertical-step-body';
+    return isNotLastStep ? `${baseClass} psdk-vertical-step-line` : baseClass;
   }
 
-  function _getHIconClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-icon-selected';
-    }
+  function _getAutoFlexClass(currentStep): string {
+    const currentStepIndex = arNavigationSteps.findIndex(step => step.ID === currentStep?.ID);
+    const totalSteps = arNavigationSteps.length;
+    const lastStep = arNavigationSteps[totalSteps - 1];
 
-    return 'psdk-horizontal-step-icon';
-  }
-
-  function _getHLabelClass(step): string {
-    if (step.ID === currentStep?.ID) {
-      return 'psdk-horizontal-step-label-selected';
-    }
+    // Apply flex-auto class if current step is active OR if current step is second-to-last and the last step is active
+    const isCurrentStepActive = currentStep.visited_status === 'current';
+    const isSecondToLastWithActiveLastStep = currentStepIndex === totalSteps - 2 && lastStep?.visited_status === 'current';
 
-    return 'psdk-horizontal-step-label';
+    return isCurrentStepActive || isSecondToLastWithActiveLastStep ? 'flex-auto' : '';
   }
 
-  function _showHLine(index: number): boolean {
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (index < arNavigationSteps.length - 1) {
-      return true;
-    }
-
-    return false;
+  function isLastStep(index: number): boolean {
+    return index === arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -91,13 +62,13 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             return (
               <React.Fragment key={mainStep.actionID}>
                 <div className='psdk-vertical-step'>
-                  <div className='psdk-vertical-step-header'>
-                    <div className={_getVIconClass(mainStep.visited_status)}>
+                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                    <div className={`psdk-vertical-step-icon`}>
                       <div className='psdk-vertical-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
                   <div className={_getVBodyClass(index)}>
                     {mainStep?.steps && (
@@ -127,9 +98,11 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </ul>
                     )}
                     {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                        {children}
-                      </AssignmentCard>
+                      <div style={{ paddingLeft: 20 }}>
+                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                          {children}
+                        </AssignmentCard>
+                      </div>
                     )}
                   </div>
                 </div>
@@ -143,19 +116,15 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
             {arNavigationSteps.map((mainStep, index) => {
               return (
                 <React.Fragment key={mainStep.actionID}>
-                  <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep)}>
+                  <div className={`psdk-horizontal-step-header ${mainStep.visited_status}`}>
+                    <div className='psdk-horizontal-step-icon'>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep)}>
-                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
-                        {mainStep.name}
-                      </div>
-                    </div>
+                    <div className='psdk-horizontal-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
                   </div>
-                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                  {!isLastStep(index) && <div className={`psdk-horizontal-step-line ${_getAutoFlexClass(mainStep)}`} />}
                 </React.Fragment>
               );
             })}

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css

@@ -154,7 +154,7 @@
   text-align: center;
   display: inline-flex;
   background: var(--app-neutral-color);
-  color: white;
+  color: var(--app-text-color);
   font-weight: normal;
   font-size: 1rem;
 }

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.tsx

@@ -7,9 +7,9 @@ import {
   Drawer,
   List,
   ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
-  ListItemSecondaryAction,
   Collapse,
   Divider,
   IconButton,
@@ -36,13 +36,13 @@ import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './NavBar.css';
 
 interface NavBarProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  // eslint-disable-next-line react/no-unused-prop-types
+
   appName?: string;
   pages?: any[];
   caseTypes: any[];
@@ -93,7 +93,8 @@ const useStyles = makeStyles(theme => ({
   },
   appListLogo: {
     marginRight: theme.spacing(2),
-    width: '3.6rem'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appListIcon: {
     color: theme.palette.getContrastText(theme.palette.primary.light)
@@ -125,7 +126,6 @@ export default function NavBar(props: NavBarProps) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const localeUtils = PCore.getLocaleUtils();
-  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
@@ -133,9 +133,19 @@ export default function NavBar(props: NavBarProps) {
   const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
   const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
-
+  // @ts-ignore
+  const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || pConn.getValue('.pyLocaleReference');
   useEffect(() => {
-    setNavPages(JSON.parse(JSON.stringify(pages)));
+    const updatedPages = pages.map((page: any) => {
+      const destinationObject: any = {};
+      pConn.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      const name = localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      return { ...page, name };
+    });
+    setNavPages(updatedPages);
   }, [pages]);
 
   function navPanelButtonClick(oPageData: any) {
@@ -145,7 +155,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .showPage(pyRuleName, pyClassName)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('showPage completed', localeCategory)}`);
       });
   }
@@ -161,7 +170,6 @@ export default function NavBar(props: NavBarProps) {
       .getActionsApi()
       .createWork(sCaseType, actionInfo)
       .then(() => {
-        // eslint-disable-next-line no-console
         console.log(`${localizedVal('createWork completed', localeCategory)}`);
       });
   }
@@ -199,7 +207,14 @@ export default function NavBar(props: NavBarProps) {
     >
       {open ? (
         <List className={classes.appListItem}>
-          <ListItem onClick={handleDrawerOpen}>
+          <ListItem
+            onClick={handleDrawerOpen}
+            secondaryAction={
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
+                <ChevronLeftIcon className={classes.appListIcon} />
+              </IconButton>
+            }
+          >
             <ListItemIcon>
               <img src={portalLogoImage} className={classes.appListLogo} />
             </ListItemIcon>
@@ -210,11 +225,6 @@ export default function NavBar(props: NavBarProps) {
                 </Typography>
               }
             />
-            <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
-                <ChevronLeftIcon className={classes.appListIcon} />
-              </IconButton>
-            </ListItemSecondaryAction>
           </ListItem>
         </List>
       ) : (
@@ -223,17 +233,16 @@ export default function NavBar(props: NavBarProps) {
         </div>
       )}
       <List>
-        <ListItem button onClick={handleCaseItemClick}>
+        <ListItemButton onClick={handleCaseItemClick}>
           <ListItemIcon>{bShowCaseTypes && open ? <ClearOutlinedIcon fontSize='large' /> : <AddIcon fontSize='large' />}</ListItemIcon>
           <ListItemText primary='Create' />
           {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
       </List>
       <Collapse in={bShowCaseTypes && open} timeout='auto' unmountOnExit className='scrollable'>
         <List component='div' disablePadding>
           {caseTypes.map(caseType => (
-            <ListItem
-              button
+            <ListItemButton
               className={classes.nested}
               onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
               key={caseType.pyLabel}
@@ -241,34 +250,36 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
-            </ListItem>
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))} />
+            </ListItemButton>
           ))}
         </List>
       </Collapse>
       <List>
         {navPages.map(page => (
-          <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
+          <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
-          </ListItem>
+            <ListItemText primary={page.name} />
+          </ListItemButton>
         ))}
       </List>
       <Divider />
       <List className='marginTopAuto'>
         <>
-          <ListItem onClick={navPanelOperatorButtonClick}>
+          <ListItem
+            onClick={navPanelOperatorButtonClick}
+            secondaryAction={
+              open ? (
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
+                  <ChevronRightIcon />
+                </IconButton>
+              ) : null
+            }
+          >
             <ListItemIcon id='person-icon'>
               <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
             <ListItemText primary={portalOperator} />
-            {open && (
-              <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
-                  <ChevronRightIcon />
-                </IconButton>
-              </ListItemSecondaryAction>
-            )}
           </ListItem>
           <Menu
             anchorEl={anchorEl}

package/tests/assets/sdk-r/components/create/override-sdk/infra/Reference/Reference.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ReferenceProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -12,8 +12,7 @@ export default function Reference(props: ReferenceProps) {
   const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
-  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
-  const referenceConfig = { ...pConnect.getComponentConfig() } || {};
+  const referenceConfig = { ...pConnect.getComponentConfig() };
 
   delete referenceConfig?.name;
   delete referenceConfig?.type;
@@ -34,7 +33,7 @@ export default function Reference(props: ReferenceProps) {
     }
   };
 
-  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  // @ts-expect-error - Argument of type 'null' is not assignable to parameter of type 'string'.
   const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
     pageReference: context && context.startsWith('@CLASS') ? '' : context
   });

package/tests/assets/sdk-r/components/create/override-sdk/infra/Region/Region.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 
 // Region does NOT have getPConnect. So, no need to extend from PConnProps
 interface RegionProps {

package/tests/assets/sdk-r/components/create/override-sdk/infra/RootContainer/RootContainer.tsx

@@ -1,11 +1,11 @@
-import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, createElement, type PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
 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';
 import { LazyMap as LazyComponentMap } from '@pega/react-sdk-components/lib/components_map';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RootContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -179,7 +179,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
       }
     };
 
-    if (!PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
+    if (prevRootConfig === null || !PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
       rootView.current = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig)) as any;
     }
 
@@ -196,7 +196,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     );
   }
   if (renderingMode === 'noPortal') {
-    // eslint-disable-next-line no-console
     console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
     const theChildren = pConn.getChildren() as any[];

package/tests/assets/sdk-r/components/create/override-sdk/infra/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/tests/assets/sdk-r/components/create/override-sdk/infra/Stages/Stages.tsx

@@ -3,7 +3,7 @@ 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';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface StagesProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -57,14 +57,13 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
-
+  const localizationService = pConn.getLocalizationService();
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
+      name: localizationService.getLocalizedText(stage.name),
       id: theID,
       complete: stage.visited_status === 'completed',
       current: theID === currentStageID,

package/tests/assets/sdk-r/components/create/override-sdk/infra/View/View.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useEffect } from 'react';
+import { type PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Need to import any templates that we might render
 
@@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [
   'WideNarrowDetails',
   'Confirmation',
   'DynamicTabs',
-  'DetailsSubTabs'
+  'DetailsSubTabs',
+  'ListView'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {