@pega/dx-component-builder-sdk 0.24.1 → 0.24.2

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

@@ -1,5 +1,6 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { useState } from 'react';
+import { NumericFormat } from 'react-number-format';
 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';
@@ -7,13 +8,14 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+/* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
 */
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   currencyISOCode?: string;
+  allowDecimals: boolean;
 }
 
 // Duplicated runtime code from React SDK
@@ -38,15 +40,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     displayMode,
     hideLabel,
     currencyISOCode = 'USD',
-    placeholder
+    placeholder,
+    allowDecimals
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
-
-  // console.log(`Currency: label: ${label} value: ${value}`);
+  const [values, setValues] = useState(value.toString());
 
   const testProp = {
     'data-test-id': testId
@@ -61,6 +63,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let currencyProp = {};
+  currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
+
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
@@ -69,40 +80,39 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  function currOnBlur(event, inValue) {
-    // console.log(`Currency currOnBlur inValue: ${inValue}`);
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function currOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
-  // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);
+  const handleChange = val => {
+    setValues(val.value);
+  };
 
   return (
-  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <CurrencyTextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      readOnly={!!readOnly}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='text'
-      outputFormat='number'
-      textAlign='left'
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-      InputProps={{ inputProps: { ...testProp } }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
-      currencySymbol={theCurrSym}
-      decimalCharacter={theCurrDec}
-      digitGroupSeparator={theCurrSep}
-      onBlur={!readOnly ? currOnBlur : undefined}
-    />
-  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <NumericFormat
+        valueIsNumericString
+        label={label}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        required={required}
+        disabled={disabled}
+        onValueChange={val => {
+          handleChange(val);
+        }}
+        onBlur={!readOnly ? currOnBlur : undefined}
+        error={status === 'error'}
+        name='numberformat'
+        value={values}
+        {...currencyProp}
+        decimalScale={allowDecimals !== false ? 2 : 0}
+        fixedDecimalScale={allowDecimals}
+		    {{! pick new delimiters for mustache }}
+	      {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+		    <%={{ }}=%>     {{! revert delimiters for mustache }}
+        customInput={TextField}
+      />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/mock.ts.mustache

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Decimal',
   displayAs: 'pxCurrency',
   label: 'Currency sample'
-};
+};

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-input-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -1,5 +1,6 @@
-import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-
+import { TextField } from '@material-ui/core';
+import { NumericFormat } from 'react-number-format';
+import { useState } from 'react';
 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';
@@ -7,13 +8,15 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+/* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
 */
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
-  currencyISOCode: string;
+  currencyISOCode?: string;
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -37,9 +40,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showGroupSeparators,
+    decimalPrecision
   } = props;
 
+  const [values, setValues] = useState(value.toString());
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
@@ -48,7 +55,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
 
-  // console.log(`Percentage: label: ${label} value: ${value}`);
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
 
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
@@ -68,13 +79,18 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const theCurrDec = theSymbols.theDecimalIndicator;
   const theCurrSep = theSymbols.theDigitGroupSeparator;
 
-  function PercentageOnBlur(event, inValue) {
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function PercentageOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <CurrencyTextField
+      <NumericFormat
+        valueIsNumericString
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -82,23 +98,22 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
-        value={value}
-        type='text'
-        outputFormat='number'
-        textAlign='left'
+        value={values}
+        onValueChange={val => {
+          handleChange(val);
+        }}
+        onBlur={!readOnly ? PercentageOnBlur : undefined}
+        decimalSeparator={theCurrDec}
+        thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalScale={decimalPrecision}
+        suffix='%'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{
-          inputProps: { ...testProp }
-        }}
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
-        currencySymbol=''
-        decimalCharacter={theCurrDec}
-        digitGroupSeparator={theCurrSep}
-        onBlur={!readOnly ? PercentageOnBlur : undefined}
+        customInput={TextField}
       />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/mock.ts.mustache

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Decimal',
   displayAs: 'pxPercentage',
   label: 'Percentage sample'
-};
+};

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

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
@@ -13,31 +12,74 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  const [value, setValue] = useState(configProps.value);
+if (!window.PCore) {
+  window.PCore = {} as any;
+}
+
+const statelistData = {
+  data: [
+    {
+      pyLabel: 'Massachusetts',
+      pyStateCode: 'MA'
+    },
+    {
+      pyLabel: 'Rhode Island',
+      pyStateCode: 'RI'
+    },
+    {
+      pyLabel: 'Connecticut',
+      pyStateCode: 'CT'
+    }
+  ]
+};
+
+window.PCore.getDataPageUtils = (() => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    }
+  };
+}) as any;
 
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
-    value,
-    placeholder: configProps.placeholder,
+    countryCode: configProps.countryCode,
     getPConnect: () => {
       return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
-              setValue(theValue);
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
             }
           };
         },
-        getStateProps: () => {
-          return { value: '.name' };
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
         }
       };
-    },
-    onChange: event => {
-      setValue(event.target.value);
-    },
-    onBlur: () => {
-      return configProps.value;
     }
   };
 
@@ -45,14 +87,5 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
-  label: configProps.label,
-  helperText: configProps.helperText,
-  testId: configProps.testId,
-  readOnly: configProps.readOnly,
-  disabled: configProps.disabled,
-  required: configProps.required,
-  status: configProps.status,
-  hideLabel: configProps.hideLabel,
-  displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage
+  countryCode: configProps.countryCode
 };

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

@@ -1,79 +1,160 @@
-import { TextField } from '@material-ui/core';
+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 { 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';
 
+// 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';
+
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  countryCode: string;
 }
 
-// Duplicated runtime code from React SDK
+export const textFormatter = (value: string, validUrl: string) => {
+  return <Link href={validUrl}>{value}</Link>;
+};
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 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 TextInput = getComponentFromMap('TextInput');
+  const TextContent = getComponentFromMap('TextContent');
 
-  const {
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    onBlur,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel,
-    placeholder
-  } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const { value, displayMode, countryCode = 'USA', getPConnect, testId } = props;
+  const [stateList, setStateList] = useState<any[]>([]);
+  const [showTable, setShowTable] = useState(false);
+  const [validUrl, setValidUrl] = useState('about:blank');
+  const PConnect = getPConnect();
 
-  if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  // toggle showing table and getting table data
+  function showHideTable() {
+    setShowTable(prevShowTable => !prevShowTable);
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  // check if url is valid (simple)
+  function validateUrl(href: string) {
+    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+      href
+    );
   }
 
-  if (readOnly) {
-    return <TextInput {...props} />;
-  }
+  // Testing to see if value entered is valid url, if not can't use it.
+  // Reason for this code is that you can NOT pass to Link component
+  // a bad url, or it will error out.
+  // For example: Since the value is the property field,
+  // it could be entered from another component and thus as it is
+  // entered (typed in), it won't be valid until it is all entered.
+  // NOTE: can't have a blank value for the url as the Link element will error out
+  // in App studio preview
+  useEffect(() => {
+    if (validateUrl(value as string)) {
+      setValidUrl(value as string);
+    } else {
+      setValidUrl('about:blank');
+    }
+  }, [value]);
+
+  // going to get data for worklist to put into a table
+  // data comes from calling a PCore function to get
+  // get data from a data page and a PConnect function
+  // to get getContextName
+  useEffect(() => {
+    const dataViewName = 'D_pyStateList';
+    const context = PConnect.getContextName();
+    const params = { pyCountry: countryCode };
 
-  let testProp = {};
+    // only retrieve table data if table is shown
+    if (showTable) {
+      PCore.getDataPageUtils()
+        .getDataAsync(dataViewName, context, params, null, null)
+        // @ts-ignore
+        .then((response: any) => {
+          // table requires an index or will get setExtraStackFrame error
+          setStateList(
+            response.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                stateName: entry.pyLabel,
+                stateCode: entry.pyStateCode,
+                id: index
+              };
+            })
+          );
+        })
+        .catch((error: any) => {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        });
+    }
+  }, [PConnect, countryCode, showTable]);
 
-  testProp = {
-    'data-test-id': testId
-  };
+  // when DISPLAY_ONLY, in this example we will just show the URL.
+  if (displayMode === 'DISPLAY_ONLY') {
+    const displayComp = textFormatter(validUrl, validUrl);
+    return <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
+  }
+
+  const localLabel = ''
+    .concat(PConnect.getLocalizedValue('State list for', '', ''))
+    .concat(PConnect.getLocalizedValue(` ${countryCode}`, '', ''))
+    .concat(' ');
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <TextField
-        type='url'
-        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}
-        {{! pick new delimiters for mustache }}
-        {{=<% %>=}}
-        InputProps={{ inputProps: { ...testProp } }}
-        <%={{ }}=%>     {{! revert delimiters for mustache }}
-      />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <div style={{ display: 'flex' }} data-testid={testId}>
+        <ArrowForwardIcon />
+        <TextContent displayAs='body' content={localLabel} />
+        <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
+          <IconButton onClick={showHideTable} style={{ padding: '0 0.25rem' }}>
+            <FormatListNumberedIcon />
+          </IconButton>
+        </Tooltip>
+        {
+          // eslint-disable-next-line jsx-a11y/control-has-associated-label
+          <a href={validUrl} style={{ padding: '0 0.25rem' }}>
+            <LanguageIcon />
+          </a>
+        }
+      </div>
+      {showTable && (
+        <TableContainer component={Paper}>
+          <Table aria-label="{PConnect.getLocalizedValue('State list', '', '')}">
+            <TableHead>
+              <TableRow>
+                <TableCell>{PConnect.getLocalizedValue('State name', '', '')}</TableCell>
+                <TableCell>{PConnect.getLocalizedValue('State code', '', '')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {stateList.map(row => (
+                <TableRow key={row.stateName}>
+                  <TableCell component='th' scope='row'>
+                    {row.stateName}
+                  </TableCell>
+                  <TableCell>{row.stateCode}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/mock.ts.mustache

@@ -1,16 +1,4 @@
 // eslint-disable-next-line import/prefer-default-export
 export const configProps = {
-  value: '',
-  label: 'URL Sample',
-  placeholder: 'URL Placeholder',
-  helperText: 'URL Helper Text',
-  testId: 'url-12345678',
-  hasSuggestions: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  displayMode: '',
-  status: '',
-  hideLabel: false,
-  validatemessage: ''
-};
+  countryCode: 'USA'
+};

package/src/tasks/create/templates/SDK-React/field/Integer/config.json.mustache

@@ -10,7 +10,7 @@
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-integer-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

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

@@ -73,26 +73,25 @@ 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={intOnChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='text'
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={intOnChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        type='text'
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
-