@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/field/Multiselect/utils.ts

@@ -0,0 +1,230 @@
+import { useRef } from 'react';
+import equal from 'fast-deep-equal';
+import cloneDeep from 'lodash.clonedeep';
+import { updateNewInstuctions, insertInstruction, deleteInstruction } from '../../helpers/instructions-utils';
+
+export const setVisibilityForList = (c11nEnv, visibility) => {
+  const { selectionMode, selectionList, renderMode, referenceList } = c11nEnv.getComponentConfig();
+  // usecase:multiselect, fieldgroup, editable table
+  if ((selectionMode === PCore.getConstants().LIST_SELECTION_MODE.MULTI && selectionList) || (renderMode === 'Editable' && referenceList)) {
+    c11nEnv.getListActions().setVisibility(visibility);
+  }
+};
+
+const useDeepMemo = (memoFn, key) => {
+  const ref: any = useRef();
+  if (!ref.current || !equal(key, ref.current.key)) {
+    ref.current = { key, value: memoFn() };
+  }
+  return ref.current.value;
+};
+
+const preProcessColumns = columns => {
+  return columns?.map(col => {
+    const tempColObj = { ...col };
+    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    if (tempColObj.setProperty) {
+      tempColObj.setProperty = col.setProperty && col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty;
+    }
+    return tempColObj;
+  });
+};
+
+const getDisplayFieldsMetaData = columns => {
+  const displayColumns = columns?.filter(col => col.display === 'true');
+  const metaDataObj: any = {
+    key: '',
+    primary: '',
+    secondary: []
+  };
+  const keyCol = columns?.filter(col => col.key === 'true');
+  metaDataObj.key = keyCol?.length > 0 ? keyCol[0].value : 'auto';
+  const itemsRecordsColumn = columns?.filter(col => col.itemsRecordsColumn === 'true');
+  if (itemsRecordsColumn?.length > 0) {
+    metaDataObj.itemsRecordsColumn = itemsRecordsColumn[0].value;
+  }
+  const itemsGroupKeyColumn = columns?.filter(col => col.itemsGroupKeyColumn === 'true');
+  if (itemsGroupKeyColumn?.length > 0) {
+    metaDataObj.itemsGroupKeyColumn = itemsGroupKeyColumn[0].value;
+  }
+  for (let index = 0; index < displayColumns?.length; index += 1) {
+    if (displayColumns[index].secondary === 'true') {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    } else if (displayColumns[index].primary === 'true') {
+      metaDataObj.primary = displayColumns[index].value;
+    }
+  }
+  return metaDataObj;
+};
+
+const createSingleTreeObejct = (entry, displayFieldMeta, showSecondaryData, selected) => {
+  const secondaryArr: any = [];
+  displayFieldMeta.secondary.forEach(col => {
+    secondaryArr.push(entry[col]);
+  });
+  const isSelected = selected.some(item => item.id === entry[displayFieldMeta.key]);
+
+  return {
+    id: entry[displayFieldMeta.key],
+    primary: entry[displayFieldMeta.primary],
+    secondary: showSecondaryData ? secondaryArr : [],
+    selected: isSelected
+  };
+};
+
+const putItemsDataInItemsTree = (listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected) => {
+  let newTreeItems = itemsTree.slice();
+  const showSecondaryData = !showSecondaryInSearchOnly;
+  for (const obj of listObjData) {
+    const items = obj[displayFieldMeta.itemsRecordsColumn].map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+
+    newTreeItems = newTreeItems.map(caseObject => {
+      if (caseObject.id === obj[displayFieldMeta.itemsGroupKeyColumn]) {
+        caseObject.items = [...items];
+      }
+      return caseObject;
+    });
+  }
+  return newTreeItems;
+};
+
+const prepareSearchResults = (listObjData, displayFieldMeta) => {
+  const searchResults: any = [];
+  for (const obj of listObjData) {
+    searchResults.push(...obj[displayFieldMeta.itemsRecordsColumn]);
+  }
+  return searchResults;
+};
+
+const doSearch = async (
+  searchText,
+  clickedGroup,
+  initialCaseClass,
+  displayFieldMeta,
+  dataApiObj, // deep clone of the dataApiObj
+  itemsTree,
+  isGroupData,
+  showSecondaryInSearchOnly,
+  selected
+) => {
+  let searchTextForUngroupedData = '';
+  if (dataApiObj) {
+    // creating dataApiObject in grouped data cases
+    if (isGroupData) {
+      dataApiObj = cloneDeep(dataApiObj);
+      dataApiObj.fetchedNQData = false;
+      dataApiObj.cache = {};
+
+      // if we have no search text and no group selected, return the original tree
+      if (searchText === '' && clickedGroup === '') {
+        return itemsTree;
+      }
+
+      // setting the inital search text & search classes in ApiObject
+      dataApiObj.parameters[Object.keys(dataApiObj.parameters)[1]] = searchText;
+      dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = initialCaseClass;
+
+      // if we have a selected group
+      if (clickedGroup) {
+        // check if the data for this group is already present and no search text
+        if (searchText === '') {
+          const containsData = itemsTree.find(item => item.id === clickedGroup);
+          // do not make API call when items of respective group are already fetched
+          if (containsData?.items?.length) return itemsTree;
+        }
+
+        dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
+      }
+    } else {
+      searchTextForUngroupedData = searchText;
+    }
+
+    // search API call
+    const response = await dataApiObj.fetchData(searchTextForUngroupedData).catch(() => {
+      return itemsTree;
+    });
+
+    let listObjData = response.data;
+    let newItemsTree = [];
+    if (isGroupData) {
+      if (searchText) {
+        listObjData = prepareSearchResults(listObjData, displayFieldMeta);
+      } else {
+        newItemsTree = putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
+        return newItemsTree;
+      }
+    }
+    const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
+    if (listObjData !== undefined && listObjData.length > 0) {
+      newItemsTree = listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+    }
+    return newItemsTree;
+  }
+
+  return itemsTree;
+};
+
+const setValuesToPropertyList = (searchText, assocProp, items, columns, actions, updatePropertyInRedux = true) => {
+  const setPropertyList = columns
+    ?.filter(col => col.setProperty)
+    .map(col => {
+      return {
+        source: col.value,
+        target: col.setProperty,
+        key: col.key,
+        primary: col.primary
+      };
+    });
+  const valueToSet: any = [];
+  if (setPropertyList.length > 0) {
+    setPropertyList.forEach(prop => {
+      items.forEach(item => {
+        if (prop.key === 'true' && item) {
+          valueToSet.push(item.id);
+        } else if (prop.primary === 'true' || !item) {
+          valueToSet.push(searchText);
+        }
+      });
+
+      if (updatePropertyInRedux) {
+        // BUG-666851 setting options so that the store values are replaced and not merged
+        const options = {
+          isArrayDeepMerge: false
+        };
+        if (prop.target === 'Associated property') {
+          actions.updateFieldValue(assocProp, valueToSet, options);
+        } else {
+          actions.updateFieldValue(`.${prop.target}`, valueToSet, options);
+        }
+      }
+    });
+  }
+  return valueToSet;
+};
+
+const getGroupDataForItemsTree = (groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) => {
+  return groupDataSource?.map(group => {
+    const secondaryArr: any = [];
+    groupsDisplayFieldMeta.secondary.forEach(col => {
+      secondaryArr.push(group[col]);
+    });
+    return {
+      id: group[groupsDisplayFieldMeta.key],
+      primary: group[groupsDisplayFieldMeta.primary],
+      secondary: showSecondaryInSearchOnly ? [] : secondaryArr,
+      items: []
+    };
+  });
+};
+
+export {
+  useDeepMemo,
+  preProcessColumns,
+  getDisplayFieldsMetaData,
+  doSearch,
+  setValuesToPropertyList,
+  getGroupDataForItemsTree,
+  updateNewInstuctions,
+  insertInstruction,
+  deleteInstruction
+};

package/templates/react-sdk-reference/src/components/field/ObjectReference/ObjectReference.tsx

@@ -0,0 +1,235 @@
+import { useMemo } from 'react';
+
+import Grid from '@mui/material/Grid';
+
+import { SELECTION_MODE, generateColumns, getDataRelationshipContextFromKey } from './utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface ObjectReferenceProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on ObjectReference here
+  getPConnect: any;
+  displayMode;
+  allowAndPersistChangesInReviewMode: any;
+  targetObjectType: any;
+  mode: string;
+  parameters: object;
+  hideLabel: boolean;
+  inline: boolean;
+  showPromotedFilters: boolean;
+  additionalFields: any;
+}
+
+export default function ObjectReference(props: ObjectReferenceProps) {
+  const {
+    getPConnect,
+    displayMode,
+    allowAndPersistChangesInReviewMode: editableInReview = false,
+    targetObjectType,
+    mode = '',
+    parameters,
+    hideLabel = false,
+    inline = false,
+    showPromotedFilters = false,
+    additionalFields
+  } = props;
+
+  const SingleReferenceReadonly = getComponentFromRegistry('SingleReferenceReadOnly');
+
+  // Configs
+  const pConn = getPConnect();
+  const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
+  const rawViewMetadata = pConn.getRawMetadata();
+  const refFieldMetadata = pConn.getFieldMetadata(rawViewMetadata?.config?.value?.split('.', 2)[1]);
+
+  // Destructured properties
+  const propsToUse = { ...pConn.getInheritedProps(), ...props };
+
+  // Computed variables
+  const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
+  const canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes(rawViewMetadata.config.componentType);
+
+  // Editable first child on change handler
+  const onRecordChange = event => {
+    const caseKey = pConn.getCaseInfo().getKey();
+    const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
+    refreshOptions.propertyName = rawViewMetadata.config?.value;
+
+    if (!canBeChangedInReviewMode || !pConn.getValue('__currentPageTabViewName')) {
+      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
+      const viewName = rawViewMetadata.name;
+      if (viewName && viewName.length > 0) {
+        getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+      }
+    }
+
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value if event.id is unset
+    // When value is empty propValue will be undefined here and no value will be set for the reference
+    const propValue = event?.id || event?.target?.value;
+    const propName =
+      rawViewMetadata.type === 'SimpleTableSelect' && mode === SELECTION_MODE.MULTI
+        ? PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config.selectionList)
+        : PCore.getAnnotationUtils().getPropertyName(rawViewMetadata.config?.value);
+
+    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+      PCore.getCaseUtils()
+        .getCaseEditLock(caseKey, '')
+        .then(caseResponse => {
+          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+          let curr = {};
+          const commitData = curr;
+
+          pageTokens.forEach(el => {
+            if (el !== '') {
+              curr[el] = {};
+              curr = curr[el];
+            }
+          });
+
+          // expecting format like {Customer: {pyID:"C-100"}}
+          const propArr = propName.split('.');
+          propArr.forEach((element, idx) => {
+            if (idx + 1 === propArr.length) {
+              curr[element] = propValue;
+            } else {
+              curr[element] = {};
+              curr = curr[element];
+            }
+          });
+
+          PCore.getCaseUtils()
+            .updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, pConn.getContextName())
+            .then(response => {
+              PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), (response.data as any).data.caseInfo.lastUpdateTime);
+              PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
+            });
+        });
+    }
+  };
+
+  // Prepare first child
+  const recreatedFirstChild = useMemo(() => {
+    const type = rawViewMetadata.config.componentType;
+
+    /* Read-only variants */
+    if (type === 'SemanticLink' && !canBeChangedInReviewMode) {
+      const config = {
+        ...rawViewMetadata.config,
+        primaryField: rawViewMetadata.config.displayField
+      };
+      config.caseClass = rawViewMetadata.config.targetObjectClass;
+      config.text = config.primaryField;
+      config.caseID = config.value;
+      config.contextPage = `@P .${
+        rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null
+      }`;
+      config.resourceParams = {
+        workID: config.value
+      };
+      config.resourcePayload = {
+        caseClassName: config.caseClass
+      };
+
+      return getPConnect().createComponent({
+        type: 'SemanticLink',
+        config: {
+          ...config,
+          displayMode,
+          referenceType,
+          hideLabel,
+          dataRelationshipContext: rawViewMetadata.config?.displayField
+            ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
+            : null
+        }
+      });
+    }
+    if (isDisplayModeEnabled && !canBeChangedInReviewMode) {
+      return (
+        <SingleReferenceReadonly
+          config={{
+            ...rawViewMetadata.config,
+            primaryField: rawViewMetadata.config.displayField
+          }}
+          getPConnect={getPConnect}
+          label={propsToUse.label}
+          type={type}
+          displayAs='readonly'
+          displayMode={displayMode}
+          activeViewRuleClass={rawViewMetadata.config.targetObjectClass} // for older views which may not have context class set, fall back to previous behavior
+          referenceType={referenceType}
+          hideLabel={hideLabel}
+          dataRelationshipContext={
+            rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null
+          }
+          additionalFields={additionalFields}
+        />
+      );
+    }
+
+    // 1) Set datasource
+    generateColumns(rawViewMetadata.config, pConn, referenceType);
+    rawViewMetadata.config.deferDatasource = true;
+    rawViewMetadata.config.listType = 'datapage';
+    if (['Dropdown', 'AutoComplete'].includes(type) && !rawViewMetadata.config.placeholder) {
+      rawViewMetadata.config.placeholder = '@L Select...';
+    }
+
+    // 2) Pass through configs
+    rawViewMetadata.config.showPromotedFilters = showPromotedFilters;
+
+    if (!canBeChangedInReviewMode) {
+      rawViewMetadata.config.displayMode = displayMode;
+    }
+
+    // 3) Define field meta
+    let fieldMetaData: any = null;
+
+    fieldMetaData = {
+      datasourceMetadata: {
+        datasource: {
+          parameters: {}
+        }
+      }
+    };
+    if (rawViewMetadata.config?.parameters) {
+      fieldMetaData.datasourceMetadata.datasource.parameters = parameters;
+    }
+    fieldMetaData.datasourceMetadata.datasource.propertyForDisplayText = rawViewMetadata?.config?.datasource?.fields?.text.startsWith('@P')
+      ? rawViewMetadata?.config?.datasource?.fields?.text?.substring(3)
+      : rawViewMetadata?.config?.datasource?.fields?.text;
+    fieldMetaData.datasourceMetadata.datasource.propertyForValue = rawViewMetadata?.config?.datasource?.fields?.value.startsWith('@P')
+      ? rawViewMetadata?.config?.datasource?.fields?.value?.substring(3)
+      : rawViewMetadata?.config?.datasource?.fields?.value;
+    fieldMetaData.datasourceMetadata.datasource.name = rawViewMetadata.config?.referenceList;
+
+    return getPConnect().createComponent({
+      type,
+      config: {
+        ...rawViewMetadata.config,
+        descriptors: mode === SELECTION_MODE.SINGLE ? refFieldMetadata?.descriptors : null,
+        datasourceMetadata: fieldMetaData?.datasourceMetadata,
+        required: propsToUse.required,
+        visibility: propsToUse.visibility,
+        disabled: propsToUse.disabled,
+        label: propsToUse.label,
+        parameters: rawViewMetadata.config.parameters,
+        readOnly: false,
+        localeReference: rawViewMetadata.config.localeReference,
+        ...(mode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+        contextClass: rawViewMetadata.config.targetObjectClass,
+        primaryField: rawViewMetadata.config?.displayField,
+        dataRelationshipContext: rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null,
+        hideLabel,
+        onRecordChange,
+        inline
+      }
+    });
+  }, [rawViewMetadata.config?.datasource?.source, parameters, propsToUse.required, propsToUse.disabled, getPConnect().getPageReference()]);
+
+  // Prepare children to render
+  return (
+    <Grid container>
+      <Grid>{recreatedFirstChild}</Grid>
+    </Grid>
+  );
+}

package/templates/react-sdk-reference/src/components/field/ObjectReference/index.tsx

@@ -0,0 +1 @@
+export { default } from './ObjectReference';

package/templates/react-sdk-reference/src/components/field/ObjectReference/utils.ts

@@ -0,0 +1,111 @@
+import { Utils } from '../../helpers/utils';
+
+export const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+const getLeafNameFromPropertyName = property => property?.substr(property.lastIndexOf('.'));
+
+const isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];
+
+export const AT_FILTEREDLIST = '@FILTERED_LIST';
+export const AT_PROPERTY = '@P';
+export const SQUARE_BRACKET_START = '[';
+export const SQUARE_BRACKET_END = ']';
+
+export const SIMPLE_TABLE_MANUAL_READONLY = 'SimpleTableManualReadOnly';
+export const PAGE = '!P!';
+export const PAGELIST = '!PL!';
+export const PERIOD = '.';
+const AT = '@';
+
+export function updatePageListPropertyValue(value) {
+  value = value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);
+  return value;
+}
+
+export function getPropertyValue(value) {
+  if (value.startsWith(AT)) {
+    value = value.substring(value.indexOf(' ') + 1);
+    if (value.startsWith(PERIOD)) value = value.substring(1);
+  }
+  if (value.includes(SQUARE_BRACKET_START)) {
+    value = updatePageListPropertyValue(value);
+  }
+  return value;
+}
+
+const getCompositeKeys = (c11nEnv, property) => {
+  const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(property) || {};
+  return Object.values(parameters).reduce((compositeKeys: any, param) => {
+    if (isSelfReferencedProperty(property, param)) {
+      let propName = getPropertyValue(param);
+      propName = propName.substring(propName.indexOf('.'));
+      compositeKeys.push(propName);
+    }
+    return compositeKeys;
+  }, []);
+};
+
+export const generateColumns = (config, pConn, referenceType) => {
+  const displayField = getLeafNameFromPropertyName(config.displayField);
+  const referenceProp = config.value.split('.', 2)[1];
+  const compositeKeys: any = getCompositeKeys(pConn, referenceProp);
+  let value = getLeafNameFromPropertyName(config.value);
+
+  const columns: any = [];
+  if (displayField) {
+    columns.push({
+      value: displayField,
+      display: 'true',
+      useForSearch: true,
+      primary: 'true'
+    });
+  }
+  if (value && compositeKeys.indexOf(value) !== -1) {
+    columns.push({
+      value,
+      setProperty: 'Associated property',
+      key: 'true'
+    });
+  } else {
+    const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;
+    config.value = `@P .${referenceProp}${actualValue}`;
+    value = actualValue;
+    columns.push({
+      value: actualValue,
+      setProperty: 'Associated property',
+      key: 'true'
+    });
+  }
+
+  config.datasource = {
+    fields: {
+      key: getLeafNameFromPropertyName(config.value),
+      text: getLeafNameFromPropertyName(config.displayField),
+      value: getLeafNameFromPropertyName(config.value)
+    }
+  };
+
+  if (referenceType === 'Case') {
+    columns.push({
+      secondary: 'true',
+      display: 'true',
+      value: Utils.getMappedKey('pyID'),
+      useForSearch: true
+    });
+  }
+
+  compositeKeys.forEach(key => {
+    if (value !== key)
+      columns.push({
+        value: key,
+        display: 'false',
+        secondary: 'true',
+        useForSearch: false,
+        setProperty: `.${referenceProp}${key}`
+      });
+  });
+
+  config.columns = columns;
+};
+
+export const getDataRelationshipContextFromKey = key => key.split('.', 2)[1];

package/templates/react-sdk-reference/src/components/field/Percentage/Percentage.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
+import handleEvent from '../../helpers/event-utils';
+import { format } from '../../helpers/formatters';
+
+/* Using react-number-format component here, since it allows formatting decimal values,
+as per the locale.
+*/
+interface PercentageProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Percentage here
+  currencyISOCode?: string;
+  showGroupSeparators?: string;
+  decimalPrecision?: number;
+}
+
+export default function Percentage(props: PercentageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    // onChange,
+    // onBlur,
+    readOnly,
+    currencyISOCode = 'USD',
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder,
+    showGroupSeparators,
+    decimalPrecision
+  } = props;
+
+  const [values, setValues] = useState(value.toString());
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
+  }
+
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
+  return (
+    <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 ? PercentageOnBlur : undefined}
+      decimalSeparator={theCurrDec}
+      thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+      decimalScale={decimalPrecision}
+      suffix='%'
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+      customInput={TextField}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/Percentage/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Percentage",
+  "label": "Percentage",
+  "description": "Percentage",
+  "type": "Field",
+  "subtype": "Decimal-Percentage",
+  "properties": []
+}