@pega/sdk 0.0.3 → 0.0.4

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

@@ -24,7 +24,7 @@ export default function Multiselect(props) {
     maxResultsDisplay,
     groupColumnsConfig = [{}],
     selectionList,
-    value
+    value,
   } = props;
   let { datasource = [], columns = [{}] } = props;
 
@@ -35,21 +35,21 @@ export default function Multiselect(props) {
         value: primaryField,
         display: 'true',
         useForSearch: true,
-        primary: 'true'
+        primary: 'true',
       },
       {
         value: selectionKey,
         setProperty: selectionKey,
-        key: 'true'
-      }
+        key: 'true',
+      },
     ];
     let secondaryColumns: any = [];
     if (secondaryFields) {
-      secondaryColumns = secondaryFields.map(secondaryField => ({
+      secondaryColumns = secondaryFields.map((secondaryField) => ({
         value: secondaryField,
         display: 'true',
         secondary: 'true',
-        useForSearch: 'true'
+        useForSearch: 'true',
       }));
     } else {
       secondaryColumns = [
@@ -57,8 +57,8 @@ export default function Multiselect(props) {
           value: selectionKey,
           display: 'true',
           secondary: 'true',
-          useForSearch: 'true'
-        }
+          useForSearch: 'true',
+        },
       ];
     }
     if (referenceType === 'Case') {
@@ -79,7 +79,7 @@ export default function Multiselect(props) {
       listType,
       maxResultsDisplay: maxResultsDisplay || '100',
       columns: preProcessColumns(columns),
-      groupColumnsConfig: preProcessColumns(groupColumnsConfig)
+      groupColumnsConfig: preProcessColumns(groupColumnsConfig),
     };
   }, [
     datasource,
@@ -91,17 +91,18 @@ export default function Multiselect(props) {
     listType,
     maxResultsDisplay,
     columns,
-    groupColumnsConfig
+    groupColumnsConfig,
   ]);
   const groupsDisplayFieldMeta = useMemo(
     () => (listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.groupColumnsConfig) : null),
-    [dataConfig.groupColumnsConfig]
+    [dataConfig.groupColumnsConfig],
   );
 
-  const itemsTreeBaseData = getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) || [];
+  const itemsTreeBaseData =
+    getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) || [];
 
   const [itemsTree, setItemsTree] = useState(
-    isGroupData ? getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) : []
+    isGroupData ? getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) : [],
   );
 
   const displayFieldMeta = listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
@@ -112,16 +113,22 @@ export default function Multiselect(props) {
   const dataApiObj: any = useRef();
 
   // main search function trigger
-  const getCaseListBasedOnParams = async (searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) => {
+  const getCaseListBasedOnParams = async (
+    searchText,
+    group,
+    selectedRows,
+    currentItemsTree,
+    isTriggeredFromSearch = false,
+  ) => {
     if (referenceList && referenceList.length > 0) {
       selectedRows = await listActions.getSelectedRows(true);
 
       selectedRows =
         selectedRows &&
-        selectedRows.map(item => {
+        selectedRows.map((item) => {
           return {
             id: item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey],
-            primary: item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField]
+            primary: item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField],
           };
         });
       setSelectedItems(selectedRows);
@@ -138,7 +145,7 @@ export default function Multiselect(props) {
       initalItemsTree,
       isGroupData,
       showSecondaryInSearchOnly,
-      selectedRows || []
+      selectedRows || [],
     );
     setItemsTree(res);
   };
@@ -157,7 +164,7 @@ export default function Multiselect(props) {
     if (listType !== 'associated') {
       PCore.getDataApi()
         ?.init(dataConfig, contextName)
-        .then(dataObj => {
+        .then((dataObj) => {
           dataApiObj.current = dataObj;
           if (!isGroupData) {
             getCaseListBasedOnParamsDebounced.current(inputValue ?? '', '', [...selectedItems], [...itemsTree]);
@@ -166,17 +173,17 @@ export default function Multiselect(props) {
     }
   }, [dataConfig, listType, dataConfig.columns, inputValue, dataConfig.groupColumnsConfig, showSecondaryInSearchOnly]);
 
-  const onSearchHandler = ev => {
+  const onSearchHandler = (ev) => {
     const searchText = ev.target.value;
     setInputValue(searchText);
     getCaseListBasedOnParamsDebounced.current(searchText, '', [...selectedItems], [...itemsTree], true);
   };
 
-  const setSelectedItemsForReferenceList = item => {
+  const setSelectedItemsForReferenceList = (item) => {
     // Clear error messages if any
     const propName = pConn.getStateProps().selectionList;
     pConn.clearErrorMessages({
-      property: propName
+      property: propName,
     });
     const { selected } = item;
     if (selected) {
@@ -190,19 +197,19 @@ export default function Multiselect(props) {
     let clickedItem;
     let updatedItems: any = [];
     if (newSelectedValues && newSelectedValues.length > 0) {
-      updatedItems = newSelectedValues.map(ele => {
+      updatedItems = newSelectedValues.map((ele) => {
         ele.selected = true;
         return ele;
       });
     }
     if (newSelectedValues.length > selectedItems.length) {
-      clickedItem = newSelectedValues.filter(item => !selectedItems.some((ele: any) => ele.id === item.id));
+      clickedItem = newSelectedValues.filter((item) => !selectedItems.some((ele: any) => ele.id === item.id));
     } else {
       clickedItem = selectedItems.filter((item: any) => !newSelectedValues.some((ele: any) => ele.id === item.id));
       clickedItem[0].selected = false;
     }
-    itemsTree.forEach(ele => {
-      ele.selected = !!updatedItems.find(item => item.id === ele.id);
+    itemsTree.forEach((ele) => {
+      ele.selected = !!updatedItems.find((item) => item.id === ele.id);
     });
 
     setSelectedItems(updatedItems);
@@ -230,8 +237,16 @@ export default function Multiselect(props) {
       //     {option.primary}
       //   </>
       // )}
-      renderInput={params => (
-        <TextField {...params} variant='outlined' fullWidth label={label} placeholder={placeholder} size='small' onChange={onSearchHandler} />
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          fullWidth
+          label={label}
+          placeholder={placeholder}
+          size="small"
+          onChange={onSearchHandler}
+        />
       )}
     />
   );

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

@@ -6,7 +6,10 @@ import { updateNewInstuctions, insertInstruction, deleteInstruction } from '../.
 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)) {
+  if (
+    (selectionMode === PCore.getConstants().LIST_SELECTION_MODE.MULTI && selectionList) ||
+    (renderMode === 'Editable' && referenceList)
+  ) {
     c11nEnv.getListActions().setVisibility(visibility);
   }
 };
@@ -19,31 +22,32 @@ const useDeepMemo = (memoFn, key) => {
   return ref.current.value;
 };
 
-const preProcessColumns = columns => {
-  return columns?.map(col => {
+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;
+      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 getDisplayFieldsMetaData = (columns) => {
+  const displayColumns = columns?.filter((col) => col.display === 'true');
   const metaDataObj: any = {
     key: '',
     primary: '',
-    secondary: []
+    secondary: [],
   };
-  const keyCol = columns?.filter(col => col.key === 'true');
+  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');
+  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');
+  const itemsGroupKeyColumn = columns?.filter((col) => col.itemsGroupKeyColumn === 'true');
   if (itemsGroupKeyColumn?.length > 0) {
     metaDataObj.itemsGroupKeyColumn = itemsGroupKeyColumn[0].value;
   }
@@ -59,16 +63,16 @@ const getDisplayFieldsMetaData = columns => {
 
 const createSingleTreeObejct = (entry, displayFieldMeta, showSecondaryData, selected) => {
   const secondaryArr: any = [];
-  displayFieldMeta.secondary.forEach(col => {
+  displayFieldMeta.secondary.forEach((col) => {
     secondaryArr.push(entry[col]);
   });
-  const isSelected = selected.some(item => item.id === entry[displayFieldMeta.key]);
+  const isSelected = selected.some((item) => item.id === entry[displayFieldMeta.key]);
 
   return {
     id: entry[displayFieldMeta.key],
     primary: entry[displayFieldMeta.primary],
     secondary: showSecondaryData ? secondaryArr : [],
-    selected: isSelected
+    selected: isSelected,
   };
 };
 
@@ -76,9 +80,11 @@ const putItemsDataInItemsTree = (listObjData, displayFieldMeta, itemsTree, showS
   let newTreeItems = itemsTree.slice();
   const showSecondaryData = !showSecondaryInSearchOnly;
   for (const obj of listObjData) {
-    const items = obj[displayFieldMeta.itemsRecordsColumn].map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+    const items = obj[displayFieldMeta.itemsRecordsColumn].map((entry) =>
+      createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected),
+    );
 
-    newTreeItems = newTreeItems.map(caseObject => {
+    newTreeItems = newTreeItems.map((caseObject) => {
       if (caseObject.id === obj[displayFieldMeta.itemsGroupKeyColumn]) {
         caseObject.items = [...items];
       }
@@ -105,7 +111,7 @@ const doSearch = async (
   itemsTree,
   isGroupData,
   showSecondaryInSearchOnly,
-  selected
+  selected,
 ) => {
   let searchTextForUngroupedData = '';
   if (dataApiObj) {
@@ -128,7 +134,7 @@ const doSearch = async (
       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);
+          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;
         }
@@ -150,13 +156,21 @@ const doSearch = async (
       if (searchText) {
         listObjData = prepareSearchResults(listObjData, displayFieldMeta);
       } else {
-        newItemsTree = putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
+        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));
+      newItemsTree = listObjData.map((entry) =>
+        createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected),
+      );
     }
     return newItemsTree;
   }
@@ -166,19 +180,19 @@ const doSearch = async (
 
 const setValuesToPropertyList = (searchText, assocProp, items, columns, actions, updatePropertyInRedux = true) => {
   const setPropertyList = columns
-    ?.filter(col => col.setProperty)
-    .map(col => {
+    ?.filter((col) => col.setProperty)
+    .map((col) => {
       return {
         source: col.value,
         target: col.setProperty,
         key: col.key,
-        primary: col.primary
+        primary: col.primary,
       };
     });
   const valueToSet: any = [];
   if (setPropertyList.length > 0) {
-    setPropertyList.forEach(prop => {
-      items.forEach(item => {
+    setPropertyList.forEach((prop) => {
+      items.forEach((item) => {
         if (prop.key === 'true' && item) {
           valueToSet.push(item.id);
         } else if (prop.primary === 'true' || !item) {
@@ -189,7 +203,7 @@ const setValuesToPropertyList = (searchText, assocProp, items, columns, actions,
       if (updatePropertyInRedux) {
         // BUG-666851 setting options so that the store values are replaced and not merged
         const options = {
-          isArrayDeepMerge: false
+          isArrayDeepMerge: false,
         };
         if (prop.target === 'Associated property') {
           actions.updateFieldValue(assocProp, valueToSet, options);
@@ -203,16 +217,16 @@ const setValuesToPropertyList = (searchText, assocProp, items, columns, actions,
 };
 
 const getGroupDataForItemsTree = (groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) => {
-  return groupDataSource?.map(group => {
+  return groupDataSource?.map((group) => {
     const secondaryArr: any = [];
-    groupsDisplayFieldMeta.secondary.forEach(col => {
+    groupsDisplayFieldMeta.secondary.forEach((col) => {
       secondaryArr.push(group[col]);
     });
     return {
       id: group[groupsDisplayFieldMeta.key],
       primary: group[groupsDisplayFieldMeta.primary],
       secondary: showSecondaryInSearchOnly ? [] : secondaryArr,
-      items: []
+      items: [],
     };
   });
 };
@@ -226,5 +240,5 @@ export {
   getGroupDataForItemsTree,
   updateNewInstuctions,
   insertInstruction,
-  deleteInstruction
+  deleteInstruction,
 };

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

@@ -31,7 +31,7 @@ export default function ObjectReference(props: ObjectReferenceProps) {
     hideLabel = false,
     inline = false,
     showPromotedFilters = false,
-    additionalFields
+    additionalFields,
   } = props;
 
   const SingleReferenceReadonly = getComponentFromRegistry('SingleReferenceReadOnly');
@@ -47,10 +47,11 @@ export default function ObjectReference(props: ObjectReferenceProps) {
 
   // Computed variables
   const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-  const canBeChangedInReviewMode = editableInReview && ['Autocomplete', 'Dropdown'].includes(rawViewMetadata.config.componentType);
+  const canBeChangedInReviewMode =
+    editableInReview && ['Autocomplete', 'Dropdown'].includes(rawViewMetadata.config.componentType);
 
   // Editable first child on change handler
-  const onRecordChange = event => {
+  const onRecordChange = (event) => {
     const caseKey = pConn.getCaseInfo().getKey();
     const refreshOptions = { autoDetectRefresh: true, propertyName: '' };
     refreshOptions.propertyName = rawViewMetadata.config?.value;
@@ -74,12 +75,12 @@ export default function ObjectReference(props: ObjectReferenceProps) {
     if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
       PCore.getCaseUtils()
         .getCaseEditLock(caseKey, '')
-        .then(caseResponse => {
+        .then((caseResponse) => {
           const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
           let curr = {};
           const commitData = curr;
 
-          pageTokens.forEach(el => {
+          pageTokens.forEach((el) => {
             if (el !== '') {
               curr[el] = {};
               curr = curr[el];
@@ -98,9 +99,17 @@ export default function ObjectReference(props: ObjectReferenceProps) {
           });
 
           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);
+            .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);
             });
         });
@@ -115,19 +124,21 @@ export default function ObjectReference(props: ObjectReferenceProps) {
     if (type === 'SemanticLink' && !canBeChangedInReviewMode) {
       const config = {
         ...rawViewMetadata.config,
-        primaryField: rawViewMetadata.config.displayField
+        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
+        rawViewMetadata.config?.displayField
+          ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
+          : null
       }`;
       config.resourceParams = {
-        workID: config.value
+        workID: config.value,
       };
       config.resourcePayload = {
-        caseClassName: config.caseClass
+        caseClassName: config.caseClass,
       };
 
       return getPConnect().createComponent({
@@ -139,8 +150,8 @@ export default function ObjectReference(props: ObjectReferenceProps) {
           hideLabel,
           dataRelationshipContext: rawViewMetadata.config?.displayField
             ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
-            : null
-        }
+            : null,
+        },
       });
     }
     if (isDisplayModeEnabled && !canBeChangedInReviewMode) {
@@ -148,18 +159,20 @@ export default function ObjectReference(props: ObjectReferenceProps) {
         <SingleReferenceReadonly
           config={{
             ...rawViewMetadata.config,
-            primaryField: rawViewMetadata.config.displayField
+            primaryField: rawViewMetadata.config.displayField,
           }}
           getPConnect={getPConnect}
           label={propsToUse.label}
           type={type}
-          displayAs='readonly'
+          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
+            rawViewMetadata.config?.displayField
+              ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
+              : null
           }
           additionalFields={additionalFields}
         />
@@ -187,19 +200,21 @@ export default function ObjectReference(props: ObjectReferenceProps) {
     fieldMetaData = {
       datasourceMetadata: {
         datasource: {
-          parameters: {}
-        }
-      }
+          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.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({
@@ -218,13 +233,21 @@ export default function ObjectReference(props: ObjectReferenceProps) {
         ...(mode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
         contextClass: rawViewMetadata.config.targetObjectClass,
         primaryField: rawViewMetadata.config?.displayField,
-        dataRelationshipContext: rawViewMetadata.config?.displayField ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField) : null,
+        dataRelationshipContext: rawViewMetadata.config?.displayField
+          ? getDataRelationshipContextFromKey(rawViewMetadata.config.displayField)
+          : null,
         hideLabel,
         onRecordChange,
-        inline
-      }
+        inline,
+      },
     });
-  }, [rawViewMetadata.config?.datasource?.source, parameters, propsToUse.required, propsToUse.disabled, getPConnect().getPageReference()]);
+  }, [
+    rawViewMetadata.config?.datasource?.source,
+    parameters,
+    propsToUse.required,
+    propsToUse.disabled,
+    getPConnect().getPageReference(),
+  ]);
 
   // Prepare children to render
   return (

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

@@ -2,7 +2,7 @@ import { Utils } from '../../helpers/utils';
 
 export const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-const getLeafNameFromPropertyName = property => property?.substr(property.lastIndexOf('.'));
+const getLeafNameFromPropertyName = (property) => property?.substr(property.lastIndexOf('.'));
 
 const isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];
 
@@ -18,7 +18,8 @@ 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);
+  value =
+    value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);
   return value;
 }
 
@@ -57,14 +58,14 @@ export const generateColumns = (config, pConn, referenceType) => {
       value: displayField,
       display: 'true',
       useForSearch: true,
-      primary: 'true'
+      primary: 'true',
     });
   }
   if (value && compositeKeys.indexOf(value) !== -1) {
     columns.push({
       value,
       setProperty: 'Associated property',
-      key: 'true'
+      key: 'true',
     });
   } else {
     const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;
@@ -73,7 +74,7 @@ export const generateColumns = (config, pConn, referenceType) => {
     columns.push({
       value: actualValue,
       setProperty: 'Associated property',
-      key: 'true'
+      key: 'true',
     });
   }
 
@@ -81,8 +82,8 @@ export const generateColumns = (config, pConn, referenceType) => {
     fields: {
       key: getLeafNameFromPropertyName(config.value),
       text: getLeafNameFromPropertyName(config.displayField),
-      value: getLeafNameFromPropertyName(config.value)
-    }
+      value: getLeafNameFromPropertyName(config.value),
+    },
   };
 
   if (referenceType === 'Case') {
@@ -90,22 +91,22 @@ export const generateColumns = (config, pConn, referenceType) => {
       secondary: 'true',
       display: 'true',
       value: Utils.getMappedKey('pyID'),
-      useForSearch: true
+      useForSearch: true,
     });
   }
 
-  compositeKeys.forEach(key => {
+  compositeKeys.forEach((key) => {
     if (value !== key)
       columns.push({
         value: key,
         display: 'false',
         secondary: 'true',
         useForSearch: false,
-        setProperty: `.${referenceProp}${key}`
+        setProperty: `.${referenceProp}${key}`,
       });
   });
 
   config.columns = columns;
 };
 
-export const getDataRelationshipContextFromKey = key => key.split('.', 2)[1];
+export const getDataRelationshipContextFromKey = (key) => key.split('.', 2)[1];

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

@@ -39,7 +39,7 @@ export default function Percentage(props: PercentageProps) {
     hideLabel,
     placeholder,
     showGroupSeparators,
-    decimalPrecision
+    decimalPrecision,
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -67,7 +67,7 @@ export default function Percentage(props: PercentageProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant="stacked" />;
   }
 
   const testProps: any = { 'data-test-id': testId };
@@ -80,7 +80,7 @@ export default function Percentage(props: PercentageProps) {
     handleEvent(actions, 'changeNblur', propName, values);
   }
 
-  const handleChange = val => {
+  const handleChange = (val) => {
     setValues(val.value);
   };
 
@@ -91,20 +91,20 @@ export default function Percentage(props: PercentageProps) {
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
-      size='small'
+      size="small"
       required={required}
       disabled={disabled}
       error={status === 'error'}
       label={label}
       value={values}
-      onValueChange={val => {
+      onValueChange={(val) => {
         handleChange(val);
       }}
       onBlur={!readOnly ? PercentageOnBlur : undefined}
       decimalSeparator={theCurrDec}
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={decimalPrecision}
-      suffix='%'
+      suffix="%"
       slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />