@pega/react-sdk-overrides 23.1.12 → 24.1.10

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -109,9 +109,9 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               label={field.config.label}
               InputProps={{
                 readOnly: true,
-                disableUnderline: true,
                 inputProps: {
-                  style: { cursor: 'pointer' }
+                  style: { cursor: 'pointer' },
+                  disableUnderline: true
                 }
               }}
             />

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -21,6 +21,7 @@ export default function CancelAlert(props: CancelAlertProps) {
   const actionsAPI = getPConnect().getActionsApi();
   const containerManagerAPI = getPConnect().getContainerManager();
   const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+  // @ts-ignore - Property 'options' is private and only accessible within class 'C11nEnv'.
   const isBulkAction = getPConnect()?.options?.isBulkAction;
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const broadCastUtils: any = PCore.getCoexistenceManager().getBroadcastUtils();
@@ -83,6 +84,7 @@ export default function CancelAlert(props: CancelAlertProps) {
       actionsAPI.cancelBulkAction(containerItemID);
     } else {
       dismiss(true);
+      // @ts-ignore - Argument of type '{ containerItemID: string; skipReleaseLockRequest: any; }' is not assignable to parameter of type 'ContainerInfo'.
       containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
     }
   }

package/lib/field/Currency/Currency.tsx

@@ -1,18 +1,19 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { useState } from 'react';
+import { NumericFormat } from 'react-number-format';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
 
-/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+/* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
 */
-
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
+  allowDecimals: boolean;
 }
 
 export default function Currency(props: CurrrencyProps) {
@@ -34,15 +35,15 @@ export default function Currency(props: CurrrencyProps) {
     displayMode,
     hideLabel,
     currencyISOCode = 'USD',
-    placeholder
+    placeholder,
+    allowDecimals
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
-
-  // console.log(`Currency: label: ${label} value: ${value}`);
+  const [values, setValues] = useState(value.toString());
 
   const testProp = {
     'data-test-id': testId
@@ -57,6 +58,15 @@ export default function Currency(props: CurrrencyProps) {
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let currencyProp = {};
+  currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
+
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
@@ -65,34 +75,34 @@ export default function Currency(props: CurrrencyProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  function currOnBlur(event, inValue) {
-    // console.log(`Currency currOnBlur inValue: ${inValue}`);
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function currOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
-  // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);
+  const handleChange = val => {
+    setValues(val.value);
+  };
 
   return (
-    <CurrencyTextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
+    <NumericFormat
+      valueIsNumericString
+      label={label}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
-      size='small'
       required={required}
       disabled={disabled}
-      readOnly={!!readOnly}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='text'
-      outputFormat='number'
-      textAlign='left'
-      InputProps={{ inputProps: { ...testProp } }}
-      currencySymbol={theCurrSym}
-      decimalCharacter={theCurrDec}
-      digitGroupSeparator={theCurrSep}
+      onValueChange={val => {
+        handleChange(val);
+      }}
       onBlur={!readOnly ? currOnBlur : undefined}
+      error={status === 'error'}
+      name='numberformat'
+      value={values}
+      {...currencyProp}
+      decimalScale={allowDecimals !== false ? 2 : 0}
+      fixedDecimalScale={allowDecimals}
+      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      customInput={TextField}
     />
   );
 }

package/lib/field/Decimal/Decimal.tsx

@@ -1,12 +1,13 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { NumericFormat } from 'react-number-format';
+import { useState } from 'react';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+/* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
 */
 
@@ -14,7 +15,7 @@ interface DecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Decimal here
   currencyISOCode?: string;
   decimalPrecision?: number;
-  showGroupSeparators?: string;
+  showGroupSeparators?: boolean;
   formatter?: string;
 }
 
@@ -36,13 +37,15 @@ export default function Decimal(props: DecimalProps) {
     displayMode,
     hideLabel,
     currencyISOCode = 'USD',
-    decimalPrecision = 2,
-    showGroupSeparators = true,
+    decimalPrecision,
+    showGroupSeparators,
     testId,
     placeholder,
     formatter
   } = props;
 
+  const [values, setValues] = useState(value.toString());
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
@@ -55,6 +58,12 @@ export default function Decimal(props: DecimalProps) {
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
   let formattedValue = '';
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
@@ -74,12 +83,17 @@ export default function Decimal(props: DecimalProps) {
     'data-test-id': testId
   };
 
-  function decimalOnBlur(event, inValue) {
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function decimalOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
   return (
-    <CurrencyTextField
+    <NumericFormat
+      valueIsNumericString
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
@@ -89,17 +103,17 @@ export default function Decimal(props: DecimalProps) {
       disabled={disabled}
       error={status === 'error'}
       label={label}
-      value={value}
-      readOnly={!!readOnly}
-      type='text'
-      outputFormat='number'
-      textAlign='left'
-      InputProps={{ inputProps: { ...testProp } }}
-      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}
-      decimalCharacter={theCurrDec}
-      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
-      decimalPlaces={decimalPrecision}
+      value={values}
+      onValueChange={val => {
+        handleChange(val);
+      }}
       onBlur={!readOnly ? decimalOnBlur : undefined}
+      prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+      decimalSeparator={theCurrDec}
+      thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+      decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
+      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      customInput={TextField}
     />
   );
 }

package/lib/field/{MultiSelect → Multiselect}/Multiselect.tsx

@@ -115,7 +115,7 @@ export default function Multiselect(props) {
   const pConn = getPConnect();
   const contextName = pConn.getContextName();
   const listActions = pConn.getListActions();
-  const dataApiObj = useRef();
+  const dataApiObj: any = useRef();
 
   // main search function trigger
   const getCaseListBasedOnParams = async (searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) => {

package/lib/field/Percentage/Percentage.tsx

@@ -1,17 +1,20 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { NumericFormat } from 'react-number-format';
+import { useState } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
-/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+/* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
 */
 interface PercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Percentage here
   currencyISOCode?: string;
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
 }
 
 export default function Percentage(props: PercentageProps) {
@@ -34,9 +37,13 @@ export default function Percentage(props: PercentageProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showGroupSeparators,
+    decimalPrecision
   } = props;
 
+  const [values, setValues] = useState(value.toString());
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
@@ -45,7 +52,11 @@ export default function Percentage(props: PercentageProps) {
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
 
-  // console.log(`Percentage: label: ${label} value: ${value}`);
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
 
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
@@ -65,12 +76,17 @@ export default function Percentage(props: PercentageProps) {
   const theCurrDec = theSymbols.theDecimalIndicator;
   const theCurrSep = theSymbols.theDigitGroupSeparator;
 
-  function PercentageOnBlur(event, inValue) {
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function PercentageOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
   return (
-    <CurrencyTextField
+    <NumericFormat
+      valueIsNumericString
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
@@ -78,20 +94,19 @@ export default function Percentage(props: PercentageProps) {
       size='small'
       required={required}
       disabled={disabled}
-      readOnly={!!readOnly}
       error={status === 'error'}
       label={label}
-      value={value}
-      type='text'
-      outputFormat='number'
-      textAlign='left'
-      InputProps={{
-        inputProps: { ...testProp }
+      value={values}
+      onValueChange={val => {
+        handleChange(val);
       }}
-      currencySymbol=''
-      decimalCharacter={theCurrDec}
-      digitGroupSeparator={theCurrSep}
       onBlur={!readOnly ? PercentageOnBlur : undefined}
+      decimalSeparator={theCurrDec}
+      thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+      decimalScale={decimalPrecision}
+      suffix='%'
+      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      customInput={TextField}
     />
   );
 }

package/lib/field/Phone/Phone.tsx

@@ -1,7 +1,9 @@
 import MuiPhoneNumber from 'material-ui-phone-number';
+import { useEffect, useState } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface PhoneProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Phone here
@@ -12,6 +14,7 @@ export default function Phone(props: PhoneProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
@@ -19,7 +22,6 @@ export default function Phone(props: PhoneProps) {
     validatemessage,
     status,
     onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -27,6 +29,14 @@ export default function Phone(props: PhoneProps) {
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
   const helperTextToDisplay = validatemessage || helperText;
 
   let testProp = {};
@@ -69,15 +79,14 @@ export default function Phone(props: PhoneProps) {
   }
 
   const handleChange = inputVal => {
-    let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
-    phoneValue = `+${phoneValue}`;
-    onChange({ value: phoneValue });
+    setInputValue(inputVal);
   };
 
   const handleBlur = event => {
     const phoneValue = event?.target?.value;
-    event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
-    onBlur(event);
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
   };
 
   return (
@@ -94,7 +103,7 @@ export default function Phone(props: PhoneProps) {
       onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ ...testProp }}
     />
   );

package/lib/field/ScalarList/ScalarList.tsx

@@ -36,10 +36,12 @@ export default function ScalarList(props: ScalarListProps) {
       {
         type: componentType,
         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',
           label,
           ...restProps,
+          // @ts-ignore - Type 'string' is not assignable to type 'boolean | undefined'.
           readOnly: 'true'
         }
       },

package/lib/field/UserReference/UserReference.tsx

@@ -4,6 +4,7 @@ import { Typography } from '@material-ui/core';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -12,6 +13,7 @@ const SEARCH_BOX = 'Search box';
 interface UserReferenceProps extends PConnProps {
   // If any, enter additional props that only exist on URLComponent here
   displayAs?: string;
+  displayMode?: string;
   label?: string;
   value?: any;
   testId?: string;
@@ -36,6 +38,7 @@ const UserReference = (props: UserReferenceProps) => {
   const {
     label = '',
     displayAs = '',
+    displayMode = '',
     getPConnect,
     value = '',
     testId = '',
@@ -96,6 +99,14 @@ const UserReference = (props: UserReferenceProps) => {
 
   let userReferenceComponent: any = null;
 
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant='stacked' />;
+  }
+
   if (readOnly && showAsFormattedText) {
     if (userId) {
       userReferenceComponent = (
@@ -172,7 +183,6 @@ const UserReference = (props: UserReferenceProps) => {
       );
     }
   }
-
   return userReferenceComponent;
 };
 

package/lib/helpers/common-utils.ts

@@ -1,8 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 export function isEmptyObject(obj: Object): boolean {
   return Object.keys(obj).length === 0;
 }
-
-export function isInfinity23OrHigher() {
-  const pCoreVersion = PCore.getPCoreVersion();
-  return ['8.23.0', '23.1.1', '23.1.2'].includes(pCoreVersion);
-}

package/lib/infra/Assignment/Assignment.tsx

@@ -41,6 +41,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
   const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
   const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  const approveCase = actionsAPI.approveCase?.bind(actionsAPI);
+  const rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
   // const showPage = actionsAPI.showPage.bind(actionsAPI);
 
   const [showSnackbar, setShowSnackbar] = useState(false);
@@ -167,6 +169,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
           savePromise
             .then(() => {
+              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
@@ -211,6 +214,18 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'rejectCase': {
+          const rejectPromise = rejectCase(itemKey);
+
+          rejectPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Rejection failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
@@ -229,6 +244,18 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'approveCase': {
+          const approvePromise = approveCase(itemKey);
+
+          approvePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Approve failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
@@ -263,7 +290,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     refreshProps.forEach(prop => {
       PCore.getRefreshManager().registerForRefresh(
         'PROP_CHANGE',
-        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, null, pageReference, {
+        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, '', pageReference, {
           ...refreshOptions,
           refreshFor: prop[0]
         }),

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

@@ -99,6 +99,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
+  const key = `${thePConn.getCaseInfo().getClassName()}!CASE!${thePConn.getCaseInfo().getName()}`.toUpperCase();
   const classes = useStyles();
 
   function getBuildName(): string {
@@ -306,8 +307,9 @@ export const FlowContainer = (props: FlowContainerProps) => {
           !displayOnlyFA ? (
             <Card className={`${classes.root} psdk-root`}>
               <CardHeader
-                title={<Typography variant='h6'>{containerName}</Typography>}
-                subheader={`Task in ${caseId} \u2022 Priority ${urgency}`}
+                id='assignment-header'
+                title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
+                subheader={`${localizedVal('Task in', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}
@@ -319,7 +321,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
             </Card>
           ) : (
             <Card className={`${classes.root} psdk-root`}>
-              <Typography variant='h6'>{containerName}</Typography>
+              <Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>
               {displayPageMessages()}
               <MuiPickersUtilsProvider utils={DayjsUtils}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -97,7 +97,7 @@ export default function DashboardFilter(props: PropsWithChildren<DashboardFilter
     metadata.config.onRecordChange = e => {
       fireFilterChange(e.id);
     };
-    return getPConnect().createComponent(metadata, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+    return getPConnect().createComponent(metadata, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
   };
 
   const onChange = dates => {

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -137,8 +137,12 @@ export default function DeferLoad(props: DeferLoadProps) {
       getPConnect()
         .getActionsApi()
         .refreshCaseView(encodeURI(loadViewCaseID), name, '') // 3rd arg empty string until typedef allows optional
-        .then(data => {
+        .then((data: any) => {
           onResponse(data.root);
+        })
+        .catch(error => {
+          // eslint-disable-next-line no-console
+          console.log(`deferload: ${error}`);
         });
     }
   }, [name, getPConnect, currentLoadedAssignment]);

package/lib/infra/MultiStep/MultiStep.tsx

@@ -144,7 +144,9 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                       </div>
                     </div>
                     <div className={_getHLabelClass(mainStep.visited_status)}>
-                      <div className='psdk-horizontal-step-text-label'>{mainStep.name}</div>
+                      <div className='psdk-horizontal-step-text-label' id='selected-label'>
+                        {mainStep.name}
+                      </div>
                     </div>
                   </div>
                   {_showHLine(index) && <div className='psdk-horizontal-step-line' />}

package/lib/infra/NavBar/NavBar.tsx

@@ -249,8 +249,8 @@ export default function NavBar(props: NavBarProps) {
       <Divider />
       <List className='marginTopAuto'>
         <>
-          <ListItem onClick={navPanelOperatorButtonClick} style={{ cursor: 'pointer' }}>
-            <ListItemIcon>
+          <ListItem onClick={navPanelOperatorButtonClick}>
+            <ListItemIcon id='person-icon'>
               <PersonOutlineIcon fontSize='large' />
             </ListItemIcon>
             <ListItemText primary={portalOperator} />

package/lib/template/CaseView/CaseView.tsx

@@ -186,6 +186,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
       <Box>
         {editAction && (
           <Button
+            id='edit'
             onClick={() => {
               _editClick();
             }}
@@ -217,7 +218,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               <CardHeader
                 className={classes.caseViewHeader}
                 title={
-                  <Typography variant='h6' component='div'>
+                  <Typography variant='h6' component='div' id='case-name'>
                     {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
                   </Typography>
                 }

package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -95,7 +95,7 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
 
   return (
     <>
-      <Button aria-controls='simple-menu' aria-haspopup='true' onClick={handleClick}>
+      <Button id='actions-menu' aria-controls='simple-menu' aria-haspopup='true' onClick={handleClick}>
         {localizedVal('Actions...', localeCategory)}
       </Button>
       <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>

package/lib/template/DataReference/DataReference.tsx

@@ -128,7 +128,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
     const refreshOptions = { autoDetectRefresh: true };
     if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName', '')) {
       // 2nd arg empty string until typedef marked correctly
-      getPConnect().getActionsApi().refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), null, refreshOptions); // 2nd arg empty string until typedef marked correctly
+      getPConnect().getActionsApi().refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName', ''), '', refreshOptions); // 2nd arg empty string until typedef marked correctly
       PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
     } else {
       const pgRef = pConn.getPageReference().replace('caseInfo.content', '');

package/lib/template/DefaultForm/utils/index.ts

@@ -20,13 +20,8 @@ export const getKeyForMappedField = field => {
 
   const pConnect = field?.getPConnect?.();
 
-  if (pConnect?.meta?.type && pConnect?.meta?.config?.name) {
-    return `${pConnect.meta.type}_${pConnect.meta.config.name}`;
-  }
-
-  // Using label as a fallback if name is not defined.
-  if (pConnect?.meta?.type && pConnect?.meta?.config?.label) {
-    return `${pConnect.meta.type}_${pConnect.meta.config.label}`;
+  if (pConnect?.meta) {
+    return JSON.stringify(pConnect.meta);
   }
 
   return uuidv4();

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

@@ -46,7 +46,7 @@ export default function Details(props: DetailsProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

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

@@ -46,7 +46,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     });
   }
 

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

@@ -46,7 +46,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -51,6 +51,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
+      // @ts-ignore - An argument for 'pageRef' was not provided.
       pConn.getListActions().insert({}, referenceList.length);
     }
   };
@@ -63,6 +64,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
+        // @ts-ignore - An argument for 'pageRef' was not provided.
         pConn.getListActions().deleteEntry(index);
       }
     };

package/lib/template/ListView/ListView.tsx

@@ -65,7 +65,6 @@ interface ListViewProps extends PConnProps {
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
 let myRows: any[];
-let myDisplayColumnList: any[];
 
 let menuColumnId = '';
 let menuColumnType = '';
@@ -119,6 +118,7 @@ export default function ListView(props: ListViewProps) {
   const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
 
   const [arRows, setRows] = useState<any[]>([]);
+  const [rowsData, setRowsData] = useState<any[]>([]);
   const [arColumns, setColumns] = useState<any[]>([]);
   const [response, setResponse] = useState<any[]>([]);
 
@@ -291,16 +291,6 @@ export default function ListView(props: ListViewProps) {
     });
   }
 
-  function getMyColumnList(arCols: any[]): string[] {
-    const myColList: string[] = [];
-
-    arCols.forEach(col => {
-      myColList.push(col.id);
-    });
-
-    return myColList;
-  }
-
   /** Will return field from a filter expression */
   function getFieldFromFilter(filter, dateRange = false) {
     let fieldValue;
@@ -543,8 +533,8 @@ export default function ListView(props: ListViewProps) {
 
     // store globally, so can be searched, filtered, etc.
     myRows = usingDataResults;
-    myDisplayColumnList = getMyColumnList(myColumns);
 
+    setRowsData(myRows);
     // At this point, if we have data ready to render and haven't been asked
     //  to NOT call setRows and setColumns, call them
     if (bCallSetRowsColumns) {
@@ -604,24 +594,22 @@ export default function ListView(props: ListViewProps) {
   }, [listContext]);
 
   function searchFilter(value: string, rows: any[]) {
+    const cols = arColumns.map(ele => {
+      return ele.id;
+    });
+
     function filterArray(el: any): boolean {
-      const bReturn = false;
-      for (const key of Object.keys(el)) {
-        // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
-        if (myDisplayColumnList.includes(key)) {
-          let myVal = el[key];
-          if (myVal !== null) {
-            if (typeof myVal !== 'string') {
-              myVal = myVal.toString();
-            }
-            if (myVal.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
-              return true;
-            }
+      return Object.keys(el).some(key => {
+        // only search columns that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
+        if (cols.includes(key)) {
+          const myVal = el[key];
+          if (myVal !== null && typeof myVal !== 'undefined') {
+            const strVal = String(myVal); // Ensure myVal is a string
+            return strVal.toLowerCase().includes(value.toLowerCase());
           }
         }
-      }
-
-      return bReturn;
+        return false;
+      });
     }
 
     rows = rows.filter(filterArray);
@@ -631,8 +619,7 @@ export default function ListView(props: ListViewProps) {
 
   function _onSearch(event: any) {
     const searchValue = event.target.value;
-
-    const filteredRows = searchFilter(searchValue, myRows.slice());
+    const filteredRows = searchFilter(searchValue, rowsData?.slice());
 
     setRows(filteredRows);
   }
@@ -653,6 +640,7 @@ export default function ListView(props: ListViewProps) {
 
     thePConn
       .getActionsApi()
+      // @ts-ignore
       .openAssignment(pzInsKey, pxRefObjectClass, options)
       .then(() => {
         // console.log("openAssignment successful");
@@ -885,6 +873,7 @@ export default function ListView(props: ListViewProps) {
         pzInsKey = row[`${associationCategory}:pzInsKey`];
       }
       if (column.isAssignmentLink) {
+        // @ts-ignore
         thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
           channelName: ''
@@ -1047,7 +1036,7 @@ export default function ListView(props: ListViewProps) {
                       .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                       .map(row => {
                         return (
-                          <TableRow key={row.pxRefObjectInsName || row.pyID || row.pyGUID}>
+                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
                             {arColumns.map(column => {
                               const value = row[column.id];
                               return (
@@ -1104,7 +1093,7 @@ export default function ListView(props: ListViewProps) {
                         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                         .map(row => {
                           return (
-                            <TableRow key={row.pxRefObjectInsName || row.pyGUID || row.pyID}>
+                            <TableRow key={row[rowID]}>
                               {selectionMode === SELECTION_MODE.SINGLE && (
                                 <TableCell>
                                   <Radio

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -29,7 +29,7 @@ export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProp
       }
     },
     '',
-    '',
+    0,
     {}
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 

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

@@ -49,7 +49,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -87,6 +87,7 @@ export default function PromotedFilters(props: PromotedFilterProps) {
     };
     return getPConnect().getContainerManager().addTransientItem({
       id: viewName,
+      // @ts-ignore - Property 'coreHeaders' is missing in type '{ classID: string; }' but required in type '{ coreHeaders: any; }'.
       data: filtersWithClassID
     });
   }, []);

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -201,6 +201,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (allowEditingInModal) {
       getPConnect()
         .getListActions()
+        // @ts-ignore - An argument for 'uniqueField' was not provided.
         .initDefaultPageInstructions(
           getPConnect().getReferenceList(),
           fieldDefs.filter(item => item.name).map(item => item.name)
@@ -302,6 +303,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         .getActionsApi()
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
     } else {
+      // @ts-ignore - An argument for 'pageRef' was not provided.
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
 
@@ -327,10 +329,12 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const deleteRecord = () => {
     setEditAnchorEl(null);
+    // @ts-ignore - An argument for 'pageRef' was not provided.
     pConn.getListActions().deleteEntry(selectedRowIndex.current);
   };
 
   const deleteRecordFromInlineEditable = (index: number) => {
+    // @ts-ignore - An argument for 'pageRef' was not provided.
     pConn.getListActions().deleteEntry(index);
   };
 

package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -55,7 +55,7 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
       }
     },
     '',
-    '',
+    0,
     {}
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 

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

@@ -54,7 +54,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/lib/widget/Attachment/Attachment.tsx

@@ -8,7 +8,6 @@ import download from 'downloadjs';
 
 import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { isInfinity23OrHigher } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './Attachment.css';
@@ -61,7 +60,7 @@ export default function Attachment(props: AttachmentProps) {
   const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
 
   const resetAttachmentStoredState = () => {
-    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(isInfinity23OrHigher() ? valueRef : ''), undefined, {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(valueRef), undefined, {
       pageReference: 'context_data',
       isArrayDeepMerge: false
     });
@@ -160,6 +159,7 @@ export default function Attachment(props: AttachmentProps) {
                 messages: [
                   {
                     type: 'error',
+                    // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                     message: pConn.getLocalizedValue('Error with one or more files', '', '')
                   }
                 ],
@@ -233,6 +233,7 @@ export default function Attachment(props: AttachmentProps) {
             messages: [
               {
                 type: 'error',
+                // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                 message: pConn.getLocalizedValue('Error with one or more files', '', '')
               }
             ],

package/lib/widget/FileUtility/FileUtility/FileUtility.tsx

@@ -488,7 +488,7 @@ export default function FileUtility(props: FileUtilityProps) {
   }
 
   return (
-    <div className='psdk-utility'>
+    <div className='psdk-utility' id='file-utility'>
       {inProgress && (
         <div className='progress-div'>
           <CircularProgress />

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -35,6 +35,7 @@ export default function QuickCreate(props: QuickCreateProps) {
     const defaultCases: any = [];
     const envInfo = PCore.getEnvironmentInfo();
     if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
+      // @ts-ignore - Property 'forEach' does not exist on type 'string'
       envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
         if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
           defaultCases.push({

package/package.json

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