@pega/react-sdk-overrides 24.1.10 → 24.2.11

package/lib/field/Decimal/Decimal.tsx

@@ -1,6 +1,6 @@
-import { TextField } from '@material-ui/core';
 import { NumericFormat } from 'react-number-format';
-import { useState } from 'react';
+import { TextField } from '@mui/material';
+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';
@@ -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,10 +72,10 @@ 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 === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
@@ -109,6 +113,7 @@ 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}

package/lib/field/Dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import MenuItem from '@material-ui/core/MenuItem';
+import { TextField } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
 import isDeepEqual from 'fast-deep-equal/react';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
@@ -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,25 +165,33 @@ export default function Dropdown(props: DropdownProps) {
 
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
-    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}
+          // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        />
+      );
+    }
+
+    if (displayM === 'STACKED_LARGE_VAL') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant='stacked'
+        />
+      );
+    }
+
+    return null;
+  };
 
-  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'
-      />
-    );
+  if (displayMode) {
+    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
   }
 
   if (readOnly) {
@@ -224,7 +232,6 @@ export default function Dropdown(props: DropdownProps) {
     >
       {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

@@ -1,8 +1,10 @@
-import { InputAdornment, TextField } from '@material-ui/core';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import { useEffect, useState } from 'react';
+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 handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface EmailProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -14,14 +16,13 @@ export default function Email(props: EmailProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -29,9 +30,20 @@ export default function Email(props: EmailProps) {
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -49,6 +61,15 @@ export default function Email(props: EmailProps) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       fullWidth
@@ -58,11 +79,11 @@ export default function Email(props: EmailProps) {
       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}
+      value={inputValue}
       type='email'
       InputProps={{
         startAdornment: (

package/lib/field/Group/Group.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useMemo } from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -15,7 +15,7 @@ interface GroupProps extends PConnFieldProps {
 export default function Group(props: GroupProps) {
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
-  const isReadOnly = displayMode === 'LABELS_LEFT';
+  const isReadOnly = displayMode === 'DISPLAY_ONLY';
 
   const content = useMemo(() => {
     return (

package/lib/field/Integer/Integer.tsx

@@ -1,5 +1,7 @@
-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';
 
@@ -13,14 +15,13 @@ export default function Integer(props: IntegerProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -28,11 +29,20 @@ export default function Integer(props: IntegerProps) {
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
   const helperTextToDisplay = validatemessage || helperText;
 
-  // console.log(`Integer: label: ${label} value: ${value}`);
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -64,7 +74,11 @@ export default function Integer(props: IntegerProps) {
     }
 
     // Pass through to the Constellation change handler
-    onChange(event);
+    setInputValue(event.target.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
   }
 
   return (
@@ -77,10 +91,10 @@ export default function Integer(props: IntegerProps) {
       required={required}
       disabled={disabled}
       onChange={intOnChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       type='text'
       inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
     />

package/lib/field/Multiselect/Multiselect.tsx

@@ -1,15 +1,9 @@
-import { Checkbox, TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
 import { doSearch, getDisplayFieldsMetaData, useDeepMemo, preProcessColumns, getGroupDataForItemsTree } from './utils';
 import { insertInstruction, deleteInstruction } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 import { debounce } from 'throttle-debounce';
 
-const icon = <CheckBoxOutlineBlankIcon fontSize='small' />;
-const checkedIcon = <CheckBoxIcon fontSize='small' />;
-
 export default function Multiselect(props) {
   const {
     getPConnect,
@@ -226,16 +220,16 @@ export default function Multiselect(props) {
       fullWidth
       options={itemsTree}
       disableCloseOnSelect
-      getOptionSelected={(option: any, val: any) => option?.primary === val?.primary}
+      // getOptionSelected={(option: any, val: any) => option?.primary === val?.primary}
       getOptionLabel={(option: any) => option?.primary}
       onChange={handleChange}
       value={selectedItems}
-      renderOption={(option: any, { selected }) => (
-        <>
-          <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
-          {option.primary}
-        </>
-      )}
+      // renderOption={(_props, option: any, { selected }) => (
+      //   <>
+      //     <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
+      //     {option.primary}
+      //   </>
+      // )}
       renderInput={params => (
         <TextField {...params} variant='outlined' fullWidth label={label} placeholder={placeholder} size='small' onChange={onSearchHandler} />
       )}

package/lib/field/Percentage/Percentage.tsx

@@ -1,6 +1,6 @@
-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 { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
@@ -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} />;
   }
 

package/lib/field/Phone/Phone.tsx

@@ -1,5 +1,5 @@
-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';
@@ -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,11 +57,12 @@ 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}
@@ -90,13 +91,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}

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,5 +1,5 @@
 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';
@@ -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

@@ -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

@@ -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,6 +1,6 @@
-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';
@@ -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,5 +1,7 @@
-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';
 
@@ -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} />;
   }
 
@@ -55,6 +64,15 @@ export default function TextArea(props: TextAreaProps) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       multiline
@@ -67,11 +85,11 @@ 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}
+      value={inputValue}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
     />
   );

package/lib/field/TextContent/TextContent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 

package/lib/field/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
 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';
@@ -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} />;
   }