@pega/dx-component-builder-sdk 0.23.13 → 0.23.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.23.13",
+  "version": "0.23.14",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -300,6 +300,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Email',
         value: 'Email'
       },
+      {
+        name: 'Field Group',
+        value: 'Group'
+      },
       {
         name: 'Integer',
         value: 'Integer'
@@ -704,6 +708,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Radio Buttons',
         value: 'RadioButtons'
       },
+      {
+        name: 'Rich Text',
+        value: 'RichText'
+      },
       {
         name: 'Scalar List',
         value: 'ScalarList'
@@ -789,6 +797,10 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Pulse',
         value: 'Pulse'
+      },
+      {
+        name: 'Rich Text Editor',
+        value: 'RichTextEditor'
       }
     ],
     infra: [

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

@@ -2,28 +2,28 @@ import { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 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 Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on this componentName
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -33,7 +33,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -50,11 +52,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -62,7 +64,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   };
 
   const handleBlur = event => {
-    thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional
+    thePConn.getValidationApi().validate(event.target.checked);
   };
 
   let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
@@ -75,20 +77,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <FormControl required={required} error={status === 'error'}>
-      <FormGroup>
-        <FormControlLabel
-          control={theCheckbox}
-          checked={checked}
-          onChange={!readOnly ? handleChange : undefined}
-          onBlur={!readOnly ? handleBlur : undefined}
-          label={caption}
-          labelPlacement='end'
-          data-test-id={testId}
-        />
-      </FormGroup>
-      <FormHelperText>{helperTextToDisplay}</FormHelperText>
-    </FormControl>
+      <FormControl required={required} error={status === 'error'}>
+        <FormGroup>
+          <FormControlLabel
+            control={theCheckbox}
+            checked={checked}
+            onChange={!readOnly ? handleChange : undefined}
+            onBlur={!readOnly ? handleBlur : undefined}
+            label={caption}
+            labelPlacement='end'
+            data-test-id={testId}
+          />
+        </FormGroup>
+        <FormHelperText>{helperTextToDisplay}</FormHelperText>
+      </FormControl>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -16,11 +16,9 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 TextInput = getComponentFromMap('TextInput');
@@ -96,30 +94,30 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <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'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      onAccept={handleAccept}
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
-      InputProps={{ ...testProp }}
-     <%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+        <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'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onBlur={!readOnly ? onBlur : undefined}
+          onAccept={handleAccept}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+          InputProps={{ ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+        />
      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -12,11 +12,9 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 TextInput = getComponentFromMap('TextInput');
@@ -88,26 +86,26 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
-    <KeyboardDateTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
-      format={`${dateFormatInfo.dateFormatString} hh:mm a`}
-      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
-      minutesStep={5}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onAccept={handleAccept}
-      data-test-id={testId}
-    />
+        <KeyboardDateTimePicker
+          variant='inline'
+          inputVariant='outlined'
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
+          format={`${dateFormatInfo.dateFormatString} hh:mm a`}
+          mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+          minutesStep={5}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onAccept={handleAccept}
+          data-test-id={testId}
+        />
      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -20,7 +20,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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');
@@ -95,10 +94,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       type='text'
       outputFormat='number'
       textAlign='left'
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
       InputProps={{ inputProps: { ...testProp } }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
       currencySymbol=''
       decimalCharacter={theCurrDec}
       digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}

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

@@ -19,7 +19,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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');
@@ -100,10 +99,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       type='text'
       outputFormat='number'
       textAlign='left'
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
       InputProps={{ inputProps: { ...testProp } }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
       currencySymbol={theCurrSym}
       decimalCharacter={theCurrDec}
       digitGroupSeparator={theCurrSep}

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

@@ -27,7 +27,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 TextInput = getComponentFromMap('TextInput');
@@ -90,10 +89,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         label={label}
         value={value}
         type='number'
-  {{! pick new delimiters for mustache }}
-  {{=<% %>=}}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
         inputProps={{ ...testProp }}
-  <%={{ }}=%>     {{! revert delimiters for mustache }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -11,7 +11,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 TextInput = getComponentFromMap('TextInput');
@@ -88,10 +87,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       label={label}
       value={value}
       type='text'
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
       inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -62,7 +62,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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');
@@ -226,10 +225,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       label={label}
       value={value === '' && !readOnly ? placeholder : value}
       select
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
       InputProps={{ ...readOnlyProp, ...testProp }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>

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

@@ -55,7 +55,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 TextInput = getComponentFromMap('TextInput');
@@ -192,37 +191,37 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   //  key/value structure to what Autocomplete expects
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <Autocomplete
-      options={options}
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      getOptionLabel={(option: IOption) => {
-        return option.value ? option.value : '';
-      }}
-      getOptionSelected={(option: any) => {
-        return option.value ? option.value : '';
-      }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-      fullWidth
-      onChange={handleChange}
-      value={selectedValue}
-      inputValue={inputValue || selectedValue}
-      onInputChange={handleInputValue}
-      renderInput={params => (
-        <TextField
-          {...params}
-          fullWidth
-          variant='outlined'
-          helperText={helperTextToDisplay}
-          placeholder={placeholder}
-          size='small'
-          required={required}
-          error={status === 'error'}
-          label={label}
-          data-test-id={testId}
-        />
-      )}
-    />
+      <Autocomplete
+        options={options}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        getOptionLabel={(option: IOption) => {
+          return option.value ? option.value : '';
+        }}
+        getOptionSelected={(option: any) => {
+          return option.value ? option.value : '';
+        }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+        fullWidth
+        onChange={handleChange}
+        value={selectedValue}
+        inputValue={inputValue || selectedValue}
+        onInputChange={handleInputValue}
+        renderInput={params => (
+          <TextField
+            {...params}
+            fullWidth
+            variant='outlined'
+            helperText={helperTextToDisplay}
+            placeholder={placeholder}
+            size='small'
+            required={required}
+            error={status === 'error'}
+            label={label}
+            data-test-id={testId}
+          />
+        )}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -17,7 +17,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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');
@@ -97,27 +96,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <FormControl error={status === 'error'} required={required}>
-      <FormLabel component='legend'>{label}</FormLabel>
-      <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
-        {theOptions.map(theOption => {
-          return (
-            <FormControlLabel
-              value={theOption.key}
-              key={theOption.key}
-              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} />}
-            />
-          );
-        })}
-      </RadioGroup>
-      <FormHelperText>{helperTextToDisplay}</FormHelperText>
-    </FormControl>
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <FormControl error={status === 'error'} required={required}>
+        <FormLabel component='legend'>{label}</FormLabel>
+        <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
+          {theOptions.map(theOption => {
+            return (
+              <FormControlLabel
+                value={theOption.key}
+                key={theOption.key}
+                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} />}
+              />
+            );
+          })}
+        </RadioGroup>
+        <FormHelperText>{helperTextToDisplay}</FormHelperText>
+      </FormControl>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -14,7 +14,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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');
@@ -81,24 +80,24 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={handleChange}
-      onBlur={!readOnly ? handleBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={inputValue}
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={inputValue}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -12,7 +12,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 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 TextInput = getComponentFromMap('TextInput');
@@ -56,32 +55,32 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      fullWidth
-      variant='outlined'
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='email'
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <MailOutlineIcon />
-          </InputAdornment>
-        ),
-        inputProps: { ...testProp }
-      }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        type='email'
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position='start'>
+              <MailOutlineIcon />
+            </InputAdornment>
+          ),
+          inputProps: { ...testProp }
+        }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }