@pega/react-sdk-overrides 24.2.10 → 25.1.10

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.
@@ -9,19 +10,29 @@ interface WssQuickCreateProps {
   actions?: any[];
 }
 
+const useStyles = makeStyles(theme => ({
+  quickLinkList: {
+    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
+    color: 'var(--app-text-color)',
+    borderRadius: '16px',
+    border: '1px solid var(--app-primary-color)'
+  }
+}));
+
 export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
+  const classes = useStyles();
 
   return (
     <div>
-      <h1 id='quick-links-heading' className='quick-link-heading'>
+      <h1 id='quick-links-heading' className='quick-links-heading'>
         {heading}
       </h1>
       <ul id='quick-links' className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {
             return (
-              <li className='quick-link-list' key={element.label}>
+              <li className={classes.quickLinkList} key={element.label}>
                 <Button className='quick-link-button' onClick={element.onClick}>
                   <span className='quick-link-button-span'>
                     {element.icon && <img className='quick-link-icon' src={element.icon} />}

package/lib/field/AutoComplete/AutoComplete.tsx

@@ -7,7 +7,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 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 IOption {
   key: string;

package/lib/field/CancelAlert/CancelAlert.css

@@ -5,7 +5,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--modal-background-color);
   position: fixed;
   z-index: 9999;
   top: 0px;
@@ -16,9 +16,9 @@
   display: table;
   margin: auto;
   min-width: 550px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--modal-top-color);
+  border: 1px solid var(--modal-border-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
 }

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Button, Grid, IconButton, Snackbar } from '@mui/material';
+import { Button, Grid2, IconButton, Snackbar } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './CancelAlert.css';
 
 interface CancelAlertProps extends PConnFieldProps {
@@ -58,14 +58,12 @@ export default function CancelAlert(props: CancelAlertProps) {
   function cancelHandler() {
     if (isReverseCoexistence) {
       dismiss(true);
-      // @ts-ignore - An argument for 'payload' was not provided.
       PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);
     } else if (!isDataObject && !isLocalAction && !isBulkAction) {
       disableButton(btnIds.DELETE);
       actionsAPI
         .deleteCaseInCreateStage(containerItemID, hideDelete)
         .then(() => {
-          // @ts-ignore - An argument for 'payload' was not provided.
           PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
         })
         .catch(() => {
@@ -78,13 +76,12 @@ export default function CancelAlert(props: CancelAlertProps) {
         });
     } else if (isLocalAction) {
       dismiss(true);
-      actionsAPI.cancelAssignment(containerItemID);
+      actionsAPI.cancelAssignment(containerItemID, false);
     } else if (isBulkAction) {
       dismiss(true);
       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 });
     }
   }
@@ -128,10 +125,10 @@ export default function CancelAlert(props: CancelAlertProps) {
             <p>{localizedVal(content, localeCategory)}</p>
           </div>
           <div className='action-controls'>
-            <Grid container spacing={4} justifyContent='space-between'>
-              <Grid item>{leftButton}</Grid>
-              <Grid item>{rightButton}</Grid>
-            </Grid>
+            <Grid2 container spacing={4} justifyContent='space-between'>
+              <Grid2>{leftButton}</Grid2>
+              <Grid2>{rightButton}</Grid2>
+            </Grid2>
           </div>
         </div>
       </div>

package/lib/field/Checkbox/Checkbox.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
@@ -6,7 +5,7 @@ import makeStyles from '@mui/styles/makeStyles';
 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 { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -21,18 +20,33 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  hideFieldLabels: boolean;
+  additionalProps: any;
+  imagePosition: string;
+  imageSize: string;
+  showImageDescription: string;
+  renderMode: string;
+  image: string;
 }
 
 const useStyles = makeStyles(() => ({
   checkbox: {
     display: 'flex',
     flexDirection: 'column'
+  },
+  selectableCard: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
+    gridAutoRows: '1fr',
+    gap: '0.5rem'
   }
 }));
 
 export default function CheckboxComponent(props: CheckboxProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -56,8 +70,20 @@ export default function CheckboxComponent(props: CheckboxProps) {
     selectionList,
     primaryField,
     referenceList,
-    readonlyContextList: selectedvalues
+    readonlyContextList: selectedvalues,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    imagePosition,
+    imageSize,
+    showImageDescription,
+    renderMode,
+    image
   } = props;
+  const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [theSelectedButton, setSelectedButton] = useState(value);
   const classes = useStyles();
   const helperTextToDisplay = validatemessage || helperText;
   const thePConn = getPConnect();
@@ -71,12 +97,17 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   useEffect(() => {
-    if (referenceList?.length > 0) {
+    if (referenceList?.length > 0 && !readOnlyMode) {
       thePConn.setReferenceList(selectionList);
       updateNewInstuctions(thePConn, selectionList);
     }
   }, [thePConn]);
 
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
@@ -93,6 +124,68 @@ export default function CheckboxComponent(props: CheckboxProps) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
+  const handleCheckboxChange = (event, item) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, item);
+    }
+    thePConn.clearErrorMessages({ property: selectionList });
+  };
+
+  const actions = thePConn.getActionsApi();
+
+  const commonProps = {
+    ...additionalProps,
+    className: 'standard',
+    disabled,
+    readOnly,
+    onClick: (actions as any).onClick
+  };
+
+  if (variant === 'card') {
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div className={classes.selectableCard}>
+          <SelectableCard
+            {...commonProps}
+            testId={testId}
+            displayMode={displayMode}
+            dataSource={datasource}
+            getPConnect={getPConnect}
+            readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
+            onChange={e => {
+              e.stopPropagation();
+              const recordKey = selectionKey?.split('.').pop();
+              const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
+              handleCheckboxChange(e, {
+                id: selectedItem[recordKey as any],
+                primary: selectedItem[recordKey as any]
+              });
+            }}
+            onBlur={() => {
+              thePConn.getValidationApi().validate(selectedvalues, selectionList);
+            }}
+            hideFieldLabels={hideFieldLabels}
+            recordKey={selectionKey?.split('.').pop()}
+            cardLabel={primaryField.split('.').pop()}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: image?.split('.').pop(),
+              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+            }}
+            readOnlyList={selectedvalues}
+            type='checkbox'
+            showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
+          />
+        </div>
+      </div>
+    );
+  }
+
   const handleChangeMultiMode = (event, element) => {
     if (event.target.checked) {
       insertInstruction(thePConn, selectionList, selectionKey, primaryField, {

package/lib/field/Currency/Currency.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 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 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';
@@ -45,9 +45,11 @@ export default function Currency(props: CurrrencyProps) {
   const helperTextToDisplay = validatemessage || helperText;
   const [values, setValues] = useState(value.toString());
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
 
   // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
   const theSymbols = getCurrencyCharacters(currencyISOCode);
@@ -56,7 +58,7 @@ export default function Currency(props: CurrrencyProps) {
   const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
@@ -86,6 +88,7 @@ export default function Currency(props: CurrrencyProps) {
   return (
     <NumericFormat
       valueIsNumericString
+      variant={readOnly ? 'standard' : 'outlined'}
       label={label}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
@@ -101,7 +104,7 @@ export default function Currency(props: CurrrencyProps) {
       {...currencyProp}
       decimalScale={allowDecimals !== false ? 2 : 0}
       fixedDecimalScale={allowDecimals}
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/lib/field/Currency/currency-utils.ts

@@ -1,6 +1,5 @@
-// eslint-disable-next-line import/no-named-default
 import { default as CurrencyAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
-// eslint-disable-next-line import/no-named-default
+
 import { default as CurrencyMapAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/CurrencyMap';
 
 export const getCurrencyOptions = (inISOCode: string) => {

package/lib/field/Date/Date.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs, { Dayjs } from 'dayjs';
 
@@ -6,7 +6,7 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-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';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
 function getFormattedDate(date) {
@@ -39,6 +39,10 @@ export default function Date(props: DateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(value));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
@@ -58,11 +62,7 @@ export default function Date(props: DateProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     if (date && date.isValid()) {
@@ -85,7 +85,7 @@ export default function Date(props: DateProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProp }
+          InputProps: { ...testProps }
         }
       }}
       onChange={handleChange}

package/lib/field/DateTime/DateTime.tsx

@@ -1,12 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import dayjs, { Dayjs } from 'dayjs';
-
+import DateFormatter from '@pega/react-sdk-components/lib/components/helpers/formatters/Date';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-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 DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -19,7 +19,10 @@ export default function DateTime(props: DateTimeProps) {
 
   const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
 
-  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
+  const environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -34,6 +37,10 @@ export default function DateTime(props: DateTimeProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
@@ -53,15 +60,12 @@ export default function DateTime(props: DateTimeProps) {
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
-    setDateValue(date);
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 
@@ -81,7 +85,6 @@ export default function DateTime(props: DateTimeProps) {
       label={label}
       value={dateValue}
       onChange={handleChange}
-      data-test-id={testId}
       slotProps={{
         textField: {
           variant: 'outlined',
@@ -90,7 +93,7 @@ export default function DateTime(props: DateTimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProp }
+          InputProps: { ...testProps }
         }
       }}
     />

package/lib/field/Decimal/Decimal.tsx

@@ -1,11 +1,11 @@
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, 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';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
@@ -58,6 +58,10 @@ export default function Decimal(props: DecimalProps) {
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {
@@ -68,7 +72,7 @@ export default function Decimal(props: DecimalProps) {
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
   } else {
-    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
@@ -79,9 +83,7 @@ export default function Decimal(props: DecimalProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function decimalOnBlur() {
     handleEvent(actions, 'changeNblur', propName, values);
@@ -109,10 +111,11 @@ export default function Decimal(props: DecimalProps) {
       }}
       onBlur={!readOnly ? decimalOnBlur : undefined}
       prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+      suffix={readOnly && formatter === 'Percentage' ? '%' : ''}
       decimalSeparator={theCurrDec}
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/lib/field/Dropdown/Dropdown.tsx

@@ -6,7 +6,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 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 IOption {
   key: string;
@@ -137,7 +137,7 @@ export default function Dropdown(props: DropdownProps) {
   }, [theDatasource]);
 
   useEffect(() => {
-    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
@@ -165,34 +165,38 @@ export default function Dropdown(props: DropdownProps) {
 
   let readOnlyProp = {};
 
-  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))}
-      />
-    );
-  }
+  const displayFn = (displayM, val) => {
+    if (displayM === 'DISPLAY_ONLY') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        />
+      );
+    }
+
+    if (displayM === 'STACKED_LARGE_VAL') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant='stacked'
+        />
+      );
+    }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    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'
-      />
-    );
+    return null;
+  };
+
+  if (displayMode) {
+    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
   }
 
   if (readOnly) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
+  const testProps: any = {
     'data-test-id': testId
   };
 
@@ -220,11 +224,12 @@ export default function Dropdown(props: DropdownProps) {
       label={label}
       value={value === '' && !readOnly ? placeholder : value}
       select
-      InputProps={{ ...readOnlyProp, ...testProp }}
+      slotProps={{
+        input: { ...readOnlyProp, ...testProps }
+      }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
-          {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
           {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         </MenuItem>
       ))}

package/lib/field/Email/Email.tsx

@@ -3,7 +3,7 @@ import { InputAdornment, TextField } from '@mui/material';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 
 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 EmailProps extends PConnFieldProps {
@@ -55,11 +55,7 @@ export default function Email(props: EmailProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -85,13 +81,15 @@ export default function Email(props: EmailProps) {
       label={label}
       value={inputValue}
       type='email'
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <MailOutlineIcon />
-          </InputAdornment>
-        ),
-        inputProps: { ...testProp }
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position='start'>
+              <MailOutlineIcon />
+            </InputAdornment>
+          ),
+          inputProps: { ...testProps }
+        }
       }}
     />
   );