@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

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

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

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

@@ -15,7 +15,7 @@ window.PCore = {
         return 'en-GB';
       }
     };
-}
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {

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,11 +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 control from: https://github.com/unicef/material-ui-currency-textfield
+/* 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
@@ -36,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
@@ -59,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} />;
   }
@@ -67,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,9 +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 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
@@ -33,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;
@@ -44,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} />;
@@ -64,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}
@@ -78,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/config.json.mustache

@@ -0,0 +1,64 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "images/pz-url-active.svg",
+  "properties": [
+    {
+      "format": "SELECT",
+      "name": "countryCode",
+      "label": "Country code",
+      "defaultValue": "USA",
+      "source": [
+        {
+          "key": "USA",
+          "value": "United States"
+        },
+        {
+          "key": "CAN",
+          "value": "Canada"
+        },
+        {
+          "key": "AUS",
+          "value": "Australia"
+        },
+        {
+          "key": "JPN",
+          "value": "Japan"
+        },
+        {
+          "key": "IND",
+          "value": "India"
+        },
+        {
+          "key": "TUR",
+          "value": "Turkey"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+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 = {
+    countryCode: configProps.countryCode,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  countryCode: configProps.countryCode
+};

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

@@ -0,0 +1,160 @@
+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;
+}
+
+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 TextContent = getComponentFromMap('TextContent');
+
+  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();
+
+  // toggle showing table and getting table data
+  function showHideTable() {
+    setShowTable(prevShowTable => !prevShowTable);
+  }
+
+  // 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
+    );
+  }
+
+  // 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 };
+
+    // 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]);
+
+  // 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>
+      {{! 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

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  countryCode: 'USA'
+};

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

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>
   );
 }
-