@pega/dx-component-builder-sdk 0.24.7 → 0.25.6

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -1,11 +1,12 @@
-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.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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
@@ -53,7 +54,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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
 
@@ -61,7 +66,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     readOnlyProp = { readOnly: true };
   }
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -12,10 +12,6 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-if (!window.PCore) {
-  window.PCore = {} as any;
-}
-
 const statelistData = {
   data: [
     {
@@ -33,7 +29,7 @@ const statelistData = {
   ]
 };
 
-window.PCore.getDataPageUtils = (() => {
+window.PCore.getDataPageUtils = (): any => {
   return {
     getDataAsync: () => {
       return new Promise(resolve => {
@@ -41,7 +37,7 @@ window.PCore.getDataPageUtils = (() => {
       });
     }
   };
-}) as any;
+};
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper 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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
@@ -117,7 +117,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {{! pick new delimiters for mustache }}
       {{=<% %>=}}
-      <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', '', '')}>
@@ -126,8 +126,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           </IconButton>
         </Tooltip>
         {
-          // eslint-disable-next-line jsx-a11y/control-has-associated-label
-          <a href={validUrl} style={{ padding: '0 0.25rem' }}>
+          <a href={validUrl} target='_blank' style={{ display: 'flex' }} rel='noreferrer'>
             <LanguageIcon />
           </a>
         }

package/src/tasks/create/templates/SDK-React/field/Integer/demo.stories.tsx.mustache

@@ -26,6 +26,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,11 +34,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     }
 
     // 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         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'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -1,12 +1,13 @@
 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';
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface IOption {
@@ -135,14 +136,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       const optionsList = [...list];
       optionsList.unshift({
         key: placeholder,
-        value: thePConn.getLocalizedValue(placeholder, '', '')
+        value: thePConn.getLocalizedValue(placeholder)
       }); // 2nd and 3rd args empty string until typedef marked correctly
       setOptions(optionsList);
     }
   }, [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);
@@ -170,25 +171,31 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   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}
+          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'
+        />
+      );
+    }
+
+    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) {
@@ -217,7 +224,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
-        placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
+        placeholder={thePConn.getLocalizedValue(placeholder, '', '')}
         size='small'
         required={required}
         disabled={disabled}
@@ -233,7 +240,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       >
         {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/src/tasks/create/templates/SDK-React/field/Picklist-Autocomplete/index.tsx.mustache

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -8,6 +8,7 @@ import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/d
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface IOption {
@@ -154,7 +155,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     }
   }, []);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -198,7 +199,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         getOptionLabel={(option: IOption) => {
           return option.value ? option.value : '';
         }}
-        getOptionSelected={(option: any) => {
+        isOptionEqualToValue={(option: any) => {
           return option.value ? option.value : '';
         }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache

@@ -1,10 +1,11 @@
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
@@ -12,6 +13,13 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   inline: boolean;
   fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
 }
 
 // Duplicated runtime code from React SDK
@@ -20,6 +28,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -33,7 +42,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     inline,
     displayMode,
     hideLabel,
-    fieldMetadata
+    fieldMetadata,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    datasource,
+    imagePosition,
+    imageSize,
+    showImageDescription
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -65,11 +81,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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))}
       />
     );
@@ -79,7 +94,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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'
       />
@@ -94,9 +108,41 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
+  if (variant === 'card') {
+    const stateProps = thePConn.getStateProps();
+    return (
+      <div>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+          <SelectableCard
+            hideFieldLabels={hideFieldLabels}
+            additionalProps={additionalProps}
+            getPConnect={getPConnect}
+            dataSource={datasource}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: stateProps.image?.split('.').pop(),
+              imageDescription: stateProps.imageDescription?.split('.').pop()
+            }}
+            onChange={handleChange}
+            recordKey={stateProps.value?.split('.').pop()}
+            cardLabel={stateProps.primaryField?.split('.').pop()}
+            radioBtnValue={value}
+            type='radio'
+            setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+          />
+        </div>
+      </div>
+    );
+  }
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <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 => {
@@ -107,7 +153,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
                 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/src/tasks/create/templates/SDK-React/field/Text/demo.stories.tsx.mustache

@@ -26,6 +26,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache

@@ -1,9 +1,10 @@
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/src/tasks/create/templates/SDK-React/field/Text-Email/demo.stories.tsx.mustache

@@ -25,6 +25,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-Email/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -18,14 +21,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -33,9 +35,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <TextField
@@ -63,11 +85,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         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'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}

package/src/tasks/create/templates/SDK-React/field/Text-Input/demo.stories.tsx.mustache

@@ -27,6 +27,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -1,9 +1,10 @@
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/demo.stories.tsx.mustache

@@ -27,6 +27,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },