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

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

@@ -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 { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -7,13 +8,15 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import StyledPegaDxilMyDecimalWrapper 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 PegaDxilMyDecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   currencyISOCode?: string;
   decimalPrecision?: number;
-  showGroupSeparators?: string;
+  showGroupSeparators?: boolean;
   formatter?: string;
 }
 
@@ -38,13 +41,15 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
     displayMode,
     hideLabel,
     currencyISOCode = 'USD',
-    decimalPrecision = 2,
-    showGroupSeparators = true,
+    decimalPrecision,
+    showGroupSeparators,
     testId,
     placeholder,
     formatter
   } = props;
 
+  const [values, setValues] = useState(value.toString());
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
@@ -57,6 +62,12 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
   let formattedValue = '';
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
@@ -76,34 +87,39 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
     'data-test-id': testId
   };
 
-  function decimalOnBlur(event, inValue) {
-    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  function decimalOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
   }
 
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
   return (
-  <StyledPegaDxilMyDecimalWrapper>
-    <CurrencyTextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      readOnly={!!readOnly}
-      type='text'
-      outputFormat='number'
-      textAlign='left'
-      InputProps={{ inputProps: { ...testProp } }}
-      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}
-      decimalCharacter={theCurrDec}
-      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
-      decimalPlaces={decimalPrecision}
-      onBlur={!readOnly ? decimalOnBlur : undefined}
-    />
-   </StyledPegaDxilMyDecimalWrapper>
+    <StyledPegaDxilMyDecimalWrapper>
+      <NumericFormat
+        valueIsNumericString
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        error={status === 'error'}
+        label={label}
+        value={values}
+        onValueChange={val => {
+          handleChange(val);
+        }}
+        onBlur={!readOnly ? decimalOnBlur : undefined}
+        prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+        decimalSeparator={theCurrDec}
+        thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        customInput={TextField}
+      />
+    </StyledPegaDxilMyDecimalWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/config.json

@@ -10,7 +10,7 @@
   "type": "Field",
   "subtype": "Text-Email",
   "icon": "images/pz-email-active.svg",
- "properties": [
+  "properties": [
     {
       "name": "label",
       "label": "Field label",

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyEmail/mock.ts

@@ -12,4 +12,4 @@ export const configProps = {
   disabled: false,
   displayMode: '',
   validatemessage: ''
-};
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/config.json

@@ -0,0 +1,64 @@
+{
+  "name": "Pega_DXIL_MyIconButtonURL",
+  "label": "My Icon Button URL",
+  "description": "My Icon Button URL",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyIconButtonURL",
+  "type": "Field",
+  "subtype": "Text-URL",
+  "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/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/demo.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyIconButtonUrl from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyIconButtonUrl> = {
+  title: 'PegaDxilMyIconButtonUrl',
+  component: PegaDxilMyIconButtonUrl,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyIconButtonUrl>;
+
+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 BasePegaDxilMyIconButtonUrl: 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 <PegaDxilMyIconButtonUrl {...props} {...args} />;
+};
+
+BasePegaDxilMyIconButtonUrl.args = {
+  countryCode: configProps.countryCode
+};

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

@@ -0,0 +1,157 @@
+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 StyledPegaDxilMyIconButtonUrlWrapper from './styles';
+
+// IMPORTANT
+// import LanguageIcon from '@mui/icons-material/Language';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import LanguageIcon from '@material-ui/icons/Language';
+import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
+
+interface PegaDxilMyIconButtonUrlProps 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 PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
+  // 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 <StyledPegaDxilMyIconButtonUrlWrapper> {displayComp} </StyledPegaDxilMyIconButtonUrlWrapper>;
+  }
+
+  const localLabel = ''
+    .concat(PConnect.getLocalizedValue('State list for', '', ''))
+    .concat(PConnect.getLocalizedValue(` ${countryCode}`, '', ''))
+    .concat(' ');
+
+  return (
+    <StyledPegaDxilMyIconButtonUrlWrapper>
+      <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>
+      )}
+    </StyledPegaDxilMyIconButtonUrlWrapper>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyIconButtonURL/styles.js

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/config.json

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

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

@@ -73,23 +73,22 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
 
   return (
     <StyledPegaDxilMyIntegerWrapper>
-    <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'
-      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
-    />
+      <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'
+        inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+      />
     </StyledPegaDxilMyIntegerWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/mock.ts

@@ -18,4 +18,4 @@ export const fieldMetadata = {
   type: 'Integer',
   displayAs: 'pxInteger',
   label: 'Integer sample'
-};
+};

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

@@ -9,7 +9,6 @@ interface PegaDxilMyParagraphProps extends PConnFieldProps {
   fieldMetadata?: any;
 }
 
-
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -80,7 +79,6 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
         value={value}
         InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
       />
-     </StyledPegaDxilMyParagraphWrapper>
+    </StyledPegaDxilMyParagraphWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/mock.ts

@@ -19,4 +19,4 @@ export const fieldMetadata = {
   displayAs: 'pxTextArea',
   label: 'Paragraph sample',
   maxLength: 256
-};
+};

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/config.json

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

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

@@ -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 StyledPegaDxilMyPercentageWrapper 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 PegaDxilMyPercentageProps 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 PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     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 PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   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 PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   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 (
     <StyledPegaDxilMyPercentageWrapper>
-      <CurrencyTextField
+      <NumericFormat
+        valueIsNumericString
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -82,20 +98,19 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
         size='small'
         required={required}
         disabled={disabled}
-        readOnly={!!readOnly}
         error={status === 'error'}
         label={label}
-        value={value}
-        type='text'
-        outputFormat='number'
-        textAlign='left'
-        InputProps={{
-          inputProps: { ...testProp }
+        value={values}
+        onValueChange={val => {
+          handleChange(val);
         }}
-        currencySymbol=''
-        decimalCharacter={theCurrDec}
-        digitGroupSeparator={theCurrSep}
         onBlur={!readOnly ? PercentageOnBlur : undefined}
+        decimalSeparator={theCurrDec}
+        thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalScale={decimalPrecision}
+        suffix='%'
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        customInput={TextField}
       />
     </StyledPegaDxilMyPercentageWrapper>
   );