@pega/react-sdk-overrides 0.24.4 → 0.25.2

package/lib/field/Percentage/Percentage.tsx

@@ -1,8 +1,8 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
-import { useState } from 'react';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { 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';
@@ -50,7 +50,11 @@ export default function Percentage(props: PercentageProps) {
   const helperTextToDisplay = validatemessage || helperText;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
@@ -58,7 +62,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} />;
   }
 
@@ -66,11 +70,7 @@ export default function Percentage(props: PercentageProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -105,7 +105,7 @@ export default function Percentage(props: PercentageProps) {
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={decimalPrecision}
       suffix='%'
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/lib/field/Phone/Phone.tsx

@@ -1,8 +1,8 @@
-import MuiPhoneNumber from 'material-ui-phone-number';
 import { useEffect, useState } from 'react';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { 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 {
@@ -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} />;
   }
 
@@ -57,20 +57,23 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <MuiTelInput
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
+          defaultCountry='US'
           required={required}
           disabled={disabled}
           onChange={onChange}
           error={status === 'error'}
           label={label}
           value={value}
-          InputProps={{
-            readOnly: true,
-            inputProps: { ...testProp }
+          slotProps={{
+            input: {
+              readOnly: true,
+              ...testProp
+            }
           }}
           disableDropdown={disableDropdown}
         />
@@ -90,13 +93,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}
@@ -104,7 +107,7 @@ export default function Phone(props: PhoneProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...testProp }}
+      slotProps={{ input: { ...testProp } }}
     />
   );
 }

package/lib/field/Phone/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Phone",
+  "label": "Phone",
+  "description": "Phone",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": []
+}

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
 interface RadioButtonsProps extends PConnFieldProps {
@@ -61,11 +61,10 @@ export default function RadioButtons(props: RadioButtonsProps) {
     setSelectedButton(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -75,7 +74,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         variant='stacked'
       />
@@ -91,7 +89,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
   };
 
   return (
-    <FormControl error={status === 'error'} required={required}>
+    <FormControl variant='standard' error={status === 'error'} required={required}>
       <FormLabel component='legend'>{label}</FormLabel>
       <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
         {theOptions.map(theOption => {
@@ -102,7 +100,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
               label={thePConn.getLocalizedValue(
                 theOption.value,
                 localePath,
-                // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
                 thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
               )}
               control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}

package/lib/field/RichText/RichText.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -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/RichText/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "RichText",
+  "label": "Rich text editor",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "icon": "images/pz-text-area-active.svg",
+  "properties": [],
+  "defaultConfig": {}
+}

package/lib/field/ScalarList/ScalarList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 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';
 
 // ScalarListProps can't extend PConnFieldProps because its 'value' has a different type
 interface ScalarListProps extends PConnProps {
@@ -36,22 +36,21 @@ 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',
+          displayMode: 'DISPLAY_ONLY',
           label,
           ...restProps,
-          // @ts-ignore - Type 'string' is not assignable to type 'boolean | undefined'.
           readOnly: 'true'
         }
       },
       '',
+      // @ts-ignore
       '',
       {}
     ); // 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

@@ -1,9 +1,9 @@
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 /* 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. */
@@ -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

@@ -1,7 +1,9 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextAreaProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -13,14 +15,13 @@ export default function TextArea(props: TextAreaProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     fieldMetadata,
@@ -30,12 +31,20 @@ export default function TextArea(props: TextAreaProps) {
     placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
-
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const [inputValue, setInputValue] = useState('');
+
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -49,11 +58,16 @@ export default function TextArea(props: TextAreaProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
+  const testProps: any = { 'data-test-id': testId };
 
-  testProp = {
-    'data-test-id': testId
-  };
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
 
   return (
     <TextField
@@ -67,12 +81,14 @@ export default function TextArea(props: TextAreaProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      value={inputValue}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
     />
   );
 }

package/lib/field/TextContent/TextContent.tsx

@@ -1,6 +1,6 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextContentProps extends PConnProps {
   // If any, enter additional props that only exist on TextContent here

package/lib/field/TextInput/TextInput.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TextInputProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -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} />;
   }
 
@@ -59,11 +59,7 @@ export default function TextInput(props: TextInputProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -88,7 +84,9 @@ export default function TextInput(props: TextInputProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      slotProps={{
+        input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+      }}
     />
   );
 }

package/lib/field/Time/Time.tsx

@@ -1,9 +1,10 @@
-import { KeyboardTimePicker } from '@material-ui/pickers';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import dayjs from 'dayjs';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Time here
@@ -14,10 +15,12 @@ export default function Time(props: TimeProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
   const helperTextToDisplay = validatemessage || helperText;
-
-  if (displayMode === 'LABELS_LEFT') {
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -29,19 +32,15 @@ export default function Time(props: TimeProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
-    const theValue = date && date.isValid() ? date.format('HH:mm') : null;
-    onChange({ value: theValue });
+    const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
+    handleEvent(actions, 'changeNblur', propName, theValue);
   };
 
   let timeValue: any = null;
-  if (value) {
+  if (value && Object.keys(value).length) {
     const timeArray = value.split(':').map(itm => Number(itm));
     timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
   }
@@ -52,25 +51,29 @@ export default function Time(props: TimeProps) {
   //
 
   return (
-    <KeyboardTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='hh:mm am'
-      keyboardIcon={<AccessTimeIcon />}
-      fullWidth
-      required={required}
+    <TimePicker
+      // keyboardIcon={<AccessTimeIcon />}
+      // fullWidth
+
       disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
       minutesStep={5}
-      size='small'
       label={label}
-      autoOk
-      mask='__:__ _m'
+      // autoOk
+      // mask='__:__ _m'
       format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
-      InputProps={{ inputProps: { ...testProp } }}
+      slotProps={{
+        textField: {
+          variant: 'outlined',
+          placeholder: 'hh:mm am',
+          required,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProps }
+        }
+      }}
     />
   );
 }

package/lib/field/URL/URL.tsx

@@ -1,7 +1,9 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface URLComponentProps extends PConnFieldProps {
   // If any, enter additional props that only exist on URLComponent here
@@ -16,14 +18,13 @@ export default function URLComponent(props: URLComponentProps) {
   const TextInput = getComponentFromMap('TextInput');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -33,7 +34,17 @@ export default function URLComponent(props: URLComponentProps) {
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  const [inputValue, setInputValue] = useState('');
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -45,12 +56,16 @@ export default function URLComponent(props: URLComponentProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
+  const testProps: any = { 'data-test-id': testId };
 
-  testProp = {
-    'data-test-id': testId
+  const handleChange = event => {
+    setInputValue(event?.target?.value);
   };
 
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       type='url'
@@ -61,12 +76,14 @@ export default function URLComponent(props: URLComponentProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
-      InputProps={{ inputProps: { ...testProp } }}
+      value={inputValue}
+      slotProps={{
+        input: { inputProps: { ...testProps } }
+      }}
     />
   );
 }

package/lib/field/UserReference/UserReference.tsx

@@ -1,8 +1,8 @@
 import { memo, useEffect, useState } from 'react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 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 FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
@@ -80,10 +80,8 @@ const UserReference = (props: UserReferenceProps) => {
       };
 
       PCore.getRestClient()
-        // @ts-ignore - Argument of type '{ queryPayload: { dataViewName: string; }; }' is not assignable to parameter of type 'RestApiOptionsObject'
-        // @ts-ignore - Expected 3 arguments, but got 2
         .invokeRestApi('getListData', { queryPayload })
-        .then((res: any) => {
+        .then(res => {
           const ddDataSource = res.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
             value: listItem.pyUserName
@@ -99,7 +97,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/common-utils.ts

@@ -1,4 +1,27 @@
-/* eslint-disable import/prefer-default-export */
 export function isEmptyObject(obj: Object): boolean {
   return Object.keys(obj).length === 0;
 }
+
+/**
+ * Get a localized value from the Generic Fields
+ * @param path - The path within Generic Fields (e.g., 'CosmosFields.fields.lists')
+ * @param key - The key of the string to localize
+ * @returns The localized string or the key itself if no translation is found
+ */
+export function getGenericFieldsLocalizedValue(path: string, key: string): string {
+  const GENERIC_BUNDLE_KEY = PCore.getLocaleUtils().GENERIC_BUNDLE_KEY;
+  const localeStore = PCore.getLocaleUtils().localeStore[GENERIC_BUNDLE_KEY];
+
+  if (!localeStore) return key;
+
+  // Split the path and traverse the object
+  const pathParts = path.split('.');
+  let currentObj = localeStore;
+
+  for (const part of pathParts) {
+    if (!currentObj[part]) return key;
+    currentObj = currentObj[part];
+  }
+
+  return currentObj[key] || key;
+}