@pega/react-sdk-overrides 0.242.4 → 0.242.5

package/lib/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -48,7 +48,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { label } = thePConn.getConfigProps();
     const configObj = thePConn?.getReferencedView();
     configObj.config.readOnly = true;
-    configObj.config.displayMode = 'LABELS_LEFT';
+    configObj.config.displayMode = 'DISPLAY_ONLY';
     const propToUse = { ...thePConn.getInheritedProps() };
     configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
     fieldComponents.push({

package/lib/field/AutoComplete/AutoComplete.tsx

@@ -150,7 +150,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
     }
   }, []);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/Checkbox/Checkbox.tsx

@@ -77,7 +77,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
     }
   }, [thePConn]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 

package/lib/field/Currency/Currency.tsx

@@ -67,7 +67,7 @@ export default function Currency(props: CurrrencyProps) {
   let currencyProp = {};
   currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/lib/field/Date/Date.tsx

@@ -39,7 +39,7 @@ export default function Date(props: DateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });

package/lib/field/DateTime/DateTime.tsx

@@ -34,7 +34,7 @@ export default function DateTime(props: DateTimeProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
     });

package/lib/field/Decimal/Decimal.tsx

@@ -71,7 +71,7 @@ export default function Decimal(props: DecimalProps) {
     formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/lib/field/Dropdown/Dropdown.tsx

@@ -165,7 +165,7 @@ export default function Dropdown(props: DropdownProps) {
 
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}

package/lib/field/Email/Email.tsx

@@ -43,7 +43,7 @@ export default function Email(props: EmailProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/Group/Group.tsx

@@ -15,7 +15,7 @@ interface GroupProps extends PConnFieldProps {
 export default function Group(props: GroupProps) {
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
-  const isReadOnly = displayMode === 'LABELS_LEFT';
+  const isReadOnly = displayMode === 'DISPLAY_ONLY';
 
   const content = useMemo(() => {
     return (

package/lib/field/Integer/Integer.tsx

@@ -42,7 +42,7 @@ export default function Integer(props: IntegerProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/Percentage/Percentage.tsx

@@ -58,7 +58,7 @@ export default function Percentage(props: PercentageProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/lib/field/Phone/Phone.tsx

@@ -45,7 +45,7 @@ export default function Phone(props: PhoneProps) {
     'data-test-id': testId
   };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -61,7 +61,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     setSelectedButton(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}

package/lib/field/RichText/RichText.tsx

@@ -23,7 +23,7 @@ export default function RichText(props: RichTextProps) {
 
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml />;
   }
 

package/lib/field/ScalarList/ScalarList.tsx

@@ -38,7 +38,7 @@ export default function ScalarList(props: ScalarListProps) {
         config: {
           // @ts-ignore - Type '{ readOnly: true; displayInModal: boolean; value: any; displayMode: string; label: string; }' is not assignable to type 'ComponentMetadataConfig'.
           value: scalarValue,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           label,
           ...restProps,
           // @ts-ignore - Type 'string' is not assignable to type 'boolean | undefined'.
@@ -51,7 +51,7 @@ export default function ScalarList(props: ScalarListProps) {
     ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   });
 
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
     return (
       <div>
         <CommaSeparatedList items={items} />

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -52,7 +52,7 @@ export default function SemanticLink(props: SemanticLinkProps) {
   const { text, displayMode, label, hideLabel } = props;
   const classes = useStyles();
 
-  if (displayMode === 'LABELS_LEFT' || (!displayMode && label !== undefined)) {
+  if (displayMode === 'DISPLAY_ONLY' || (!displayMode && label !== undefined)) {
     const value = text || '---';
     return (
       <Grid container spacing={1} style={{ padding: '4px 0px' }} id='semantic-link-grid'>

package/lib/field/TextArea/TextArea.tsx

@@ -44,7 +44,7 @@ export default function TextArea(props: TextAreaProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/TextInput/TextInput.tsx

@@ -47,7 +47,7 @@ export default function TextInput(props: TextInputProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/Time/Time.tsx

@@ -20,7 +20,7 @@ export default function Time(props: TimeProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/URL/URL.tsx

@@ -44,7 +44,7 @@ export default function URLComponent(props: URLComponentProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/UserReference/UserReference.tsx

@@ -99,7 +99,7 @@ const UserReference = (props: UserReferenceProps) => {
 
   let userReferenceComponent: any = null;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
   }
 

package/lib/helpers/field-group-utils.ts

@@ -49,8 +49,8 @@ export function buildView(pConn, index, viewConfigPath): ReactElement {
   };
 
   const view = PCore.createPConnect(config);
-  if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
-    view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
+  if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+    view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
   }
   return createElement(createPConnectComponent(), view);
 }

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -95,7 +95,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());

package/lib/infra/View/View.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { 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';
@@ -18,6 +18,7 @@ interface ViewProps extends PConnProps {
   visibility?: boolean;
   name?: string;
   bInForm?: boolean;
+  type?: any;
 }
 
 //
@@ -41,8 +42,9 @@ const NO_HEADER_TEMPLATES = [
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {
-  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
+  const { children, template, getPConnect, mode, visibility, name: pageName, type, title } = props;
   let { label = '', showLabel = false } = props;
+  const { PAGE_TYPES: { PAGE, LANDINGPAGE, LISTPAGE } = {}, MODAL } = PCore.getConstants();
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
   // Putting this logic here instead of copy/paste in every Form template index.js
@@ -50,12 +52,43 @@ export default function View(props: PropsWithChildren<ViewProps>) {
   const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
+  const localeUtils = PCore.getLocaleUtils();
 
   const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
   if (isEmbeddedDataView && showLabel === undefined) {
     showLabel = true;
   }
 
+  useEffect(() => {
+    // Get the localized application label
+    let applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
+    applicationLabel = localeUtils.getLocaleValue(`${applicationLabel}`, '', '');
+    const caseInfo = getPConnect().getCaseInfo();
+    const isAssignmentInCreateStage = caseInfo && caseInfo.isAssignmentInCreateStage();
+    const isRenderingInModal = getPConnect().getContainerName().includes(MODAL);
+    const isRenderingInPreviewPanel = getPConnect().getContainerName().includes('preview');
+
+    /* If assignment is in create stage and rendering in modal don't update the title.
+      Title will be updated on completion of create stage and when the assignment is rendered inline to the page.
+    */
+    const canUpdateTitle =
+      !isRenderingInPreviewPanel &&
+      (type === PAGE || type === LANDINGPAGE || type === LISTPAGE) &&
+      !(isRenderingInModal && isAssignmentInCreateStage) &&
+      PCore.getEnvironmentInfo().getRenderingMode() === 'FULL_PORTAL';
+    // Incase of home route title is same as applicationLabel so setting to empty to just show applicationLabel
+    let titleVar = title === applicationLabel ? '' : title;
+
+    if (canUpdateTitle) {
+      if (caseInfo) {
+        const name = caseInfo.getName();
+        const id = caseInfo.getBusinessID();
+        titleVar = name && id ? `${name} (${id})` : titleVar;
+      }
+      document.title = titleVar ? `${titleVar} - ${applicationLabel}` : applicationLabel;
+    }
+  }, [type, title, getPConnect, PAGE, LANDINGPAGE, LISTPAGE]);
+
   const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
   // As long as the template is defined in the dependencies of the view
   // it will be loaded, otherwise fall back to single column

package/lib/template/DataReference/DataReference.tsx

@@ -52,7 +52,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   const refList = rawViewMetadata.config.referenceList;
   const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
   let propName;
-  const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+  const isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode);
   let firstChildPConnect;
 
   /* Only for dropdown when it has param use data api to get the data back and add it to datasource */

package/lib/template/Details/Details/Details.tsx

@@ -23,7 +23,7 @@ export default function Details(props: DetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -23,7 +23,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -23,7 +23,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -31,7 +31,7 @@ function DynamicTabs(props: DynamicTabsProps) {
   const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
   const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
   const memoisedTabViews = useMemo(() => {
-    pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
+    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     pConnect.setInheritedProp('readOnly', true);
 
     return (

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -37,7 +37,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const resolvedList = getReferenceList(pConn);
   pConn.setReferenceList(resolvedList);
   const pageReference = `${pConn.getPageReference()}${resolvedList}`;
-  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
   useLayoutEffect(() => {
@@ -96,7 +96,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     );
   }
 
-  pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+  pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
   const memoisedReadOnlyList = useMemo(() => {
     return referenceList.map((item, index) => {
       const key = item[heading] || `field-group-row-${index}`;

package/lib/template/ListView/utils.ts

@@ -678,7 +678,7 @@ export const readContextResponse = async (context, params) => {
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
     if (compositeKeys.length) {
-      otherContext.setCompositeKeys(compositeKeys);
+      otherContext?.setCompositeKeys(compositeKeys);
     }
     if (otherContext) {
       otherContext.fetchRowActionDetails = null;

package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -26,7 +26,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -26,7 +26,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[])?.map((configObject, index) => {
     let theConfigObject: object = configObject;

package/package.json

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