@pega/dx-component-builder-sdk 0.242.1 → 0.242.3

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/index.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+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 { makeStyles } from '@material-ui/core/styles';
+
 import StyledPegaDxilMyBooleanWrapper from './styles';
 
 interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
@@ -81,7 +82,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     }
   }, [thePConn]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
@@ -166,7 +167,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
-      <FormControl required={required} error={status === 'error'}>
+      <FormControl variant='standard' required={required} error={status === 'error'}>
         {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
         <FormGroup>{theCheckbox}</FormGroup>
         <FormHelperText>{helperTextToDisplay}</FormHelperText>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
 import { 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 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 '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+
 import StyledPegaDxilMyCurrencyWrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
@@ -72,7 +73,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   let currencyProp = {};
   currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/index.tsx

@@ -1,10 +1,15 @@
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { useState } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs, { Dayjs } from 'dayjs';
+
 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 StyledPegaDxilMyDateWrapper from './styles';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
@@ -24,22 +29,9 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    getPConnect,
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    onBlur,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+  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 pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -54,7 +46,7 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });
@@ -81,41 +73,33 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
 
   const handleChange = date => {
     if (date && date.isValid()) {
-      onChange({ value: getFormattedDate(date) });
-    }
-  };
-
-  const handleAccept = date => {
-    if (date && date.isValid()) {
+      setDateValue(date);
       handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
     }
   };
 
   return (
     <StyledPegaDxilMyDateWrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDatePicker
-          disableToolbar
-          variant='inline'
-          inputVariant='outlined'
-          placeholder={dateFormatInfo.dateFormatStringLC}
-          format={dateFormatInfo.dateFormatString}
-          mask={dateFormatInfo.dateFormatMask}
-          fullWidth
-          autoOk
-          required={required}
-          disabled={disabled}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
-          size='small'
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
           label={label}
-          value={value || null}
+          disabled={disabled}
+          format={dateFormatInfo.dateFormatString}
+          value={dateValue}
+          slotProps={{
+            textField: {
+              required,
+              variant: 'outlined',
+              placeholder: dateFormatInfo.dateFormatStringLC,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { ...testProp }
+            }
+          }}
           onChange={handleChange}
-          onBlur={!readOnly ? onBlur : undefined}
-          onAccept={handleAccept}
-          InputProps={{ ...testProp }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </StyledPegaDxilMyDateWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/index.tsx

@@ -1,7 +1,11 @@
-import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { useState } from 'react';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs, { Dayjs } from 'dayjs';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
+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';
@@ -20,21 +24,9 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    getPConnect,
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+  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 pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -49,7 +41,7 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
     });
@@ -68,12 +60,14 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  const handleChange = date => {
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
-    onChange({ value: changeValue });
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
   };
 
-  const handleAccept = date => {
+  const handleChange = date => {
+    setDateValue(date);
     const changeValue = date && date.isValid() ? date.toISOString() : null;
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
@@ -85,28 +79,31 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
 
   return (
     <StyledPegaDxilMyDateTimeWrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDateTimePicker
-          variant='inline'
-          inputVariant='outlined'
-          fullWidth
-          autoOk
-          required={required}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DateTimePicker
+          // fullWidth
+          // autoOk
           disabled={disabled}
-          placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
           format={`${dateFormatInfo.dateFormatString} hh:mm a`}
-          mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+          // mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
           minutesStep={5}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
-          size='small'
           label={label}
-          value={value || null}
+          value={dateValue}
           onChange={handleChange}
-          onAccept={handleAccept}
           data-test-id={testId}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              required,
+              placeholder: `${dateFormatInfo.dateFormatStringLC} hh:mm a`,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { ...testProp }
+            }
+          }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </StyledPegaDxilMyDateTimeWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.tsx

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
 import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { useState } from 'react';
-import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+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 StyledPegaDxilMyDecimalWrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
@@ -75,7 +76,7 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
     formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
@@ -98,7 +99,7 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   return (
     <StyledPegaDxilMyDecimalWrapper>
       <NumericFormat
-        valueIsNumericString
+      valueIsNumericString
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/index.tsx

@@ -1,8 +1,11 @@
-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';
+
 import StyledPegaDxilMyEmailWrapper from './styles';
 
 interface PegaDxilMyEmailProps extends PConnFieldProps {
@@ -18,14 +21,13 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -33,9 +35,20 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     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} />;
   }
 
@@ -53,6 +66,15 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <StyledPegaDxilMyEmailWrapper>
       <TextField
@@ -63,11 +85,11 @@ export default function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
         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/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { Tooltip, IconButton, Link } from '@material-ui/core';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
+import { Tooltip, IconButton, Link } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -14,9 +14,9 @@ import StyledPegaDxilMyIconButtonUrlWrapper from './styles';
 
 // IMPORTANT
 // import LanguageIcon from '@mui/icons-material/Language';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-import LanguageIcon from '@material-ui/icons/Language';
-import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import LanguageIcon from '@mui/icons-material/Language';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 
 interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
@@ -115,7 +115,7 @@ export default function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlPr
 
   return (
     <StyledPegaDxilMyIconButtonUrlWrapper>
-      <div style={{ display: 'flex' }} data-testid={testId}>
+      <div style={{ display: 'flex', alignItems: 'center' }} data-testid={testId}>
         <ArrowForwardIcon />
         <TextContent displayAs='body' content={localLabel} />
         <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
@@ -125,7 +125,7 @@ export default function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlPr
         </Tooltip>
         {
           // eslint-disable-next-line jsx-a11y/control-has-associated-label
-          <a href={validUrl} style={{ padding: '0 0.25rem' }}>
+          <a href={validUrl} style={{ display: 'flex' }}>
             <LanguageIcon />
           </a>
         }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/index.tsx

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, 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 handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+
 import StyledPegaDxilMyIntegerWrapper from './styles';
 
 interface PegaDxilMyIntegerProps extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,11 +34,20 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
     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('');
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -68,7 +79,11 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
     }
 
     // Pass through to the Constellation change handler
-    onChange(event);
+    setInputValue(event.target.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
   }
 
   return (
@@ -82,10 +97,10 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
         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/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/index.tsx

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, 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 handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+
 import StyledPegaDxilMyParagraphWrapper from './styles';
 
 interface PegaDxilMyParagraphProps extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     fieldMetadata,
@@ -35,11 +37,20 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
   } = 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} />;
   }
 
@@ -59,6 +70,15 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <StyledPegaDxilMyParagraphWrapper>
       <TextField
@@ -72,11 +92,11 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
         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 } }}
       />
     </StyledPegaDxilMyParagraphWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
-import { NumericFormat } from 'react-number-format';
 import { 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 { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+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 StyledPegaDxilMyPercentageWrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
@@ -61,7 +62,7 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx

@@ -50,7 +50,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     'data-test-id': testId
   };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -68,6 +68,7 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
             helperText={helperTextToDisplay}
             placeholder={placeholder ?? ''}
             size='small'
+            defaultCountry='us'
             required={required}
             disabled={disabled}
             onChange={onChange}