@pega/react-sdk-overrides 0.23.16 → 0.23.18

package/lib/field/Phone/Phone.tsx

@@ -15,7 +15,8 @@ export default function Phone(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -25,11 +26,12 @@ export default function Phone(props) {
     'data-test-id': testId
   };
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -56,7 +58,6 @@ export default function Phone(props) {
     );
   }
 
-
   const handleChange = inputVal => {
     let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
     phoneValue = `+${phoneValue}`;

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -23,7 +23,8 @@ export default function RadioButtons(props) {
     status,
     required,
     inline,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -43,10 +44,11 @@ export default function RadioButtons(props) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   const handleChange = event => {

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 /* although this is called the SemanticLink component, we are not yet displaying as a
 SemanticLink in SDK and only showing the value as a read only text field. */
@@ -43,6 +44,7 @@ export default function SemanticLink(props) {
     text,
     displayMode,
     label,
+    hideLabel
   } = props;
   const classes = useStyles();
 
@@ -60,6 +62,10 @@ export default function SemanticLink(props) {
       </Grid>
     );
   }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={text} variant='stacked' />;
+  }
 }
 
 SemanticLink.propTypes = {

package/lib/field/TextArea/TextArea.tsx

@@ -16,7 +16,8 @@ export default function TextArea(props) {
     testId,
     fieldMetadata,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -24,11 +25,12 @@ export default function TextArea(props) {
 
   let readOnlyProp = {};
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/field/TextInput/TextInput.tsx

@@ -16,7 +16,8 @@ export default function TextInput(props) {
     testId,
     fieldMetadata,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -24,11 +25,12 @@ export default function TextInput(props) {
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/field/Time/Time.tsx

@@ -16,15 +16,17 @@ export default function Time(props) {
     onChange,
     readOnly,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   if (displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/field/URL/URL.tsx

@@ -18,15 +18,17 @@ export default function URLComponent(props) {
     onBlur,
     readOnly,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/helpers/date-format-utils.ts

@@ -0,0 +1,66 @@
+import { getLocale } from './formatters/common';
+
+
+export const dateFormatInfoDefault = {
+  dateFormatString: "MM/DD/YYYY",
+  dateFormatStringLong: "MMM DD, YYYY",
+  dateFormatStringLC: "mm/dd/yyyy",
+  dateFormatMask: "__/__/____"
+}
+
+export const getDateFormatInfo = () => {
+  const theDateFormatInfo = dateFormatInfoDefault;
+  const theLocale = getLocale(); // PCore.getEnvironmentInfo().getUseLocale() || "US-en";
+
+  // NOTE: this date was chosen since it has a day larger than 12. If you change it,
+  //  you'll need to change the indexOf values below!
+  const theTestDate = new Date(Date.parse('30 November 2023 12:00:00 GMT'));
+  const theTestDateLocaleString = new Intl.DateTimeFormat(theLocale).format(theTestDate);
+
+  // console.log(`theLocale: ${theLocale} theTestDateLocaleString: ${theTestDateLocaleString}`);
+
+  // Build the format string based on where '11' (mm), '30' (dd), and '2023' (yyyy) are
+  //  Example: US locations are 0, 3, 6 but for NL locations are 3, 0, 6
+  const locMM = theTestDateLocaleString.indexOf('11');
+  const locDD = theTestDateLocaleString.indexOf('30');
+  const locYYYY = theTestDateLocaleString.indexOf('2023');
+
+  const arrPieces = [
+    {
+      loc: locMM,
+      format: 'MM',
+      longFormat: 'MMM',
+      placeholder: 'mm',
+      mask: '__'
+    },
+    {
+      loc: locDD,
+      format: 'DD',
+      longFormat: 'DD',
+      placeholder: 'dd',
+      mask: '__'
+    },
+    {
+      loc: locYYYY,
+      format: 'YYYY',
+      longFormat: 'YYYY',
+      placeholder: 'yyyy',
+      mask: '____'
+    }
+   ];
+
+  // Sort the associative array by order of appearance (loc) of each piece
+  arrPieces.sort((a, b) => {
+    if (a.loc < b.loc) return -1;
+    if (a.loc > b.loc) return 1;
+    return 0;
+  });
+
+  // Construct the structure to return...
+  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}/${arrPieces[1].format}/${arrPieces[2].format}`;
+  theDateFormatInfo.dateFormatStringLong = `${arrPieces[0].longFormat} ${arrPieces[1].longFormat}, ${arrPieces[2].longFormat}`;
+  theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}/${arrPieces[1].placeholder}/${arrPieces[2].placeholder}`;
+  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}/${arrPieces[1].mask}/${arrPieces[2].mask}`;
+
+  return theDateFormatInfo;
+}

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

@@ -35,9 +35,7 @@ export const buildView = (pConn, index, viewConfigPath) => {
   const isDatapage = referenceList.startsWith('D_');
   const pageReference = isDatapage
     ? `${referenceList}[${index}]`
-    : `${pConn.getPageReference()}${referenceList.substring(
-        referenceList.lastIndexOf('.')
-      )}[${index}]`;
+    : `${pConn.getPageReference()}${referenceList}[${index}]`;
   const meta = viewConfigPath
     ? pConn.getRawMetadata().children[0].children[0]
     : pConn.getRawMetadata().children[0];

package/lib/helpers/formatters/Currency.js

@@ -14,16 +14,24 @@ function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
 
 function CurrencyFormatter(
   value,
-  { symbol = true, position, locale, decPlaces = 2 } = {}
+  { symbol = true, position, locale, decPlaces = 2, style = "currency", currency = "USD" } = {}
 ) {
   const currentLocale = getLocale(locale);
   let formattedValue = value;
-  if (value !== null && value !== undefined) {
+  if (value !== null && value !== undefined && value !== '') {
     formattedValue = NumberFormatter(value, {
       locale: currentLocale,
-      decPlaces
+      decPlaces,
+      style,
+      currency
     });
-    const countryCode = currentLocale.split("-")[1];
+
+    let countryCode =  currentLocale.split("-")[1].toUpperCase();
+
+    // If countryCode is still undefined, setting it as US
+    if( !countryCode ){
+      countryCode = 'US';
+    }
 
     let code;
     if (symbol) {
@@ -33,7 +41,7 @@ function CurrencyFormatter(
     }
 
     // if position is provided, change placeholder accordingly.
-    if (position) {
+    if (position && code) {
       if (position.toLowerCase() === "before" && code.indexOf("{#}") === 0) {
         code = code.slice(3) + code.slice(0, 3);
       } else if (

package/lib/helpers/formatters/common.js

@@ -1,6 +1,10 @@
 export function getLocale(locale) {
+  // use locale if specified
   if (locale) return locale;
-  return document.documentElement.lang;
+  // otherwise, use operator locale if it's defined
+  if (window.PCore.getEnvironmentInfo().getUseLocale()) return window.PCore.getEnvironmentInfo().getUseLocale();
+  // fallback
+  return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
 export function getCurrentTimezone(timezone) {

package/lib/helpers/formatters/index.js

@@ -113,6 +113,11 @@ export function format(value, type, options = {}) {
       break;
     }
 
+    case "userreference": {
+      formattedValue = value.userName;
+      break;
+    }
+
     default:
       formattedValue = value;
   }

package/lib/helpers/template-utils.ts

@@ -0,0 +1,80 @@
+//  This file is adapted from React DX components/template/utils.js
+
+declare const PCore: any;
+
+export function getAllFields(pConnect: any) {
+  const metadata = pConnect.getRawMetadata();
+  let allFields = [];
+  if (metadata.children && metadata.children.map) {
+    allFields = metadata.children.map((fields) => {
+      const children = fields.children instanceof Array ? fields.children : [];
+      return children.map((field) => field.config);
+    });
+  }
+  return allFields;
+}
+
+
+export function filterForFieldValueList(fields : any) {
+  return fields
+    .filter(({ visibility }) => visibility !== false)
+    .map(({ value, label }) => ({
+      id: label.toLowerCase(),
+      name: label,
+      value
+    }));
+}
+
+
+/**
+ * Determine if the current view is the view of the case step/assignment.
+ * @param {Function} pConnect PConnect object for the component
+ */
+ export function getIsAssignmentView(pConnect) {
+  // Get caseInfo content from the store which contains the view info about the current assignment/step
+  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
+  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+
+  return assignmentViewId === currentViewId;
+}
+
+/**
+ * A hook that gets the instructions content for a view.
+ * @param {Function} pConnect PConnect object for the component
+ * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
+ */
+export function getInstructions(pConnect, instructions = 'casestep') {
+  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+
+  // Determine if this view is the current assignment/step view
+  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
+
+  // Case step instructions
+  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
+    return caseStepInstructions;
+  }
+
+  // No instructions
+  if (instructions === 'none') {
+    return undefined;
+  }
+
+  // If the annotation wasn't processed correctly, don't return any instruction text
+  if (instructions?.startsWith('@PARAGRAPH')) {
+    return undefined;
+  }
+
+  // Custom instructions from the view
+  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
+  // it is evaluated by core logic to the content
+  if (instructions !== 'casestep' && instructions !== 'none') {
+    return instructions;
+  }
+  return undefined;
+}

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

@@ -339,6 +339,72 @@ export default function FlowContainer(props) {
       if (window.sessionStorage.getItem("okToInitFlowContainer") === "true") {
         initContainer();
       }
+
+      // this check in routingInfo, mimic React to check and get the internals of the
+      // flowContainer and force updates to pConnect/redux
+      if (routingInfo && loadingInfo !== undefined) {
+
+        // debugging/investigation help
+        // console.log(`${thePConn.getComponentName()}: >>routingInfo: ${JSON.stringify(routingInfo)}`);
+
+        const currentOrder = routingInfo.accessedOrder;
+        const currentItems = routingInfo.items;
+        const type = routingInfo.type;
+        if (currentOrder && currentItems) {       // JA - making more similar to React version
+          const key = currentOrder[currentOrder.length - 1];
+
+          // save off itemKey to be used for finishAssignment, etc.
+          // debugger;
+          setItemKey(key);
+
+          if (currentOrder.length > 0 &&
+            currentItems[key] &&
+            currentItems[key].view &&
+            type === "single" &&
+            !Utils.isEmptyObject(currentItems[key].view)) {
+            const currentItem = currentItems[key];
+            const rootView = currentItem.view;
+            const { context } = rootView.config;
+            const config = { meta: rootView };
+
+            config["options"] = {
+              context: currentItem.context,
+              pageReference: context || localPConn.getPageReference(),
+              hasForm: true,
+              isFlowContainer: true,
+              containerName: localPConn.getContainerName(),
+              containerItemName: key,
+              parentPageReference: localPConn.getPageReference()
+            };
+
+            const configObject = PCore.createPConnect(config);
+
+            // Since we're setting an array, need to add in an appropriate key
+            //  to remove React warning.
+            configObject["key"] = config["options"].parentPageReference;
+
+            // keep track of these changes
+            const theNewChildren: Array<Object> = [];
+            theNewChildren.push(configObject);
+            setArNewChildren(theNewChildren);
+
+            // JEA - adapted from Nebula FlowContainer since we want to render children that are React components
+            const root = createElement(createPConnectComponent(), configObject);
+            setArNewChildrenAsReact([root]);
+
+            const oWorkItem = configObject.getPConnect(); // was theNewChildren[0].getPConnect()
+            const oWorkData = oWorkItem.getDataObject();
+
+
+            // check if have oWorkData, there are times due to timing of state change, when this
+            // may not be available
+            if (oWorkData) {
+              setContainerName(getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name);
+            }
+          }
+        }
+
+      }
     }
 
     // if have caseMessage show message and end
@@ -359,81 +425,11 @@ export default function FlowContainer(props) {
 
       // debugger;
       setCheckSvg(Utils.getImageSrc("check", PCore.getAssetLoader().getStaticServerUrl()));
-      return;
     }
     else {
       // debugger;
       setHasCaseMessages(false);
     }
-
-
-    // this check in routingInfo, mimic React to check and get the internals of the
-    // flowContainer and force updates to pConnect/redux
-    if (routingInfo && loadingInfo !== undefined) {
-
-      // debugging/investigation help
-      // console.log(`${thePConn.getComponentName()}: >>routingInfo: ${JSON.stringify(routingInfo)}`);
-
-      const currentOrder = routingInfo.accessedOrder;
-      const currentItems = routingInfo.items;
-      const type = routingInfo.type;
-      if (currentOrder && currentItems) {       // JA - making more similar to React version
-        const key = currentOrder[currentOrder.length - 1];
-
-        // save off itemKey to be used for finishAssignment, etc.
-        // debugger;
-        setItemKey(key);
-
-        if (currentOrder.length > 0 &&
-          currentItems[key] &&
-          currentItems[key].view &&
-          type === "single" &&
-          !Utils.isEmptyObject(currentItems[key].view)) {
-          const currentItem = currentItems[key];
-          const rootView = currentItem.view;
-          const { context } = rootView.config;
-          const config = { meta: rootView };
-
-          config["options"] = {
-            context: currentItem.context,
-            pageReference: context || localPConn.getPageReference(),
-            hasForm: true,
-            isFlowContainer: true,
-            containerName: localPConn.getContainerName(),
-            containerItemName: key,
-            parentPageReference: localPConn.getPageReference()
-          };
-
-          const configObject = PCore.createPConnect(config);
-
-          // Since we're setting an array, need to add in an appropriate key
-          //  to remove React warning.
-          configObject["key"] = config["options"].parentPageReference;
-
-          // keep track of these changes
-          const theNewChildren: Array<Object> = [];
-          theNewChildren.push(configObject);
-          setArNewChildren(theNewChildren);
-
-          // JEA - adapted from Nebula FlowContainer since we want to render children that are React components
-          const root = createElement(createPConnectComponent(), configObject);
-          setArNewChildrenAsReact([root]);
-
-          const oWorkItem = configObject.getPConnect(); // was theNewChildren[0].getPConnect()
-          const oWorkData = oWorkItem.getDataObject();
-
-
-          // check if have oWorkData, there are times due to timing of state change, when this
-          // may not be available
-          if (oWorkData) {
-            setContainerName(getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name);
-          }
-        }
-      }
-
-    }
-
-
   }, [props]);
 
   const caseId = thePConn.getCaseSummary().content.pyID;

package/lib/infra/MultiStep/MultiStep.css

@@ -34,7 +34,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-sub-step-current {
-  padding-left: 0.625rem; 
+  padding-left: 0.625rem;
   font-weight: bold;
   color: rgba(0,0,0,.87);
 }
@@ -53,7 +53,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-sub-step-list {
-  list-style: none; 
+  list-style: none;
   padding-bottom: 0.625rem;
 }
 
@@ -219,35 +219,21 @@ mat-horizontal-stepper {
 .psdk-horizontal-step-label {
   color: rgba(0,0,0,.54);
   display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   min-width: 50px;
   vertical-align: middle;
   font-size: 14px;
   font-weight: 500;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  white-space: initial;
 }
 
 .psdk-horizontal-step-label-selected {
   color: rgba(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;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.psdk-horizontal-step-text-label {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: block;
+  white-space: initial;
 }
 
 .psdk-horizontal-step-line {