@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/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 '@pega/react-sdk-components/lib/components/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/lib/field/Percentage/Percentage.tsx

@@ -1,67 +1,58 @@
-import React from 'react';
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
-const useStyles = makeStyles((/* theme */) => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  }
-}));
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
+/* Using @unicef/material-ui-currency-textfield 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;
 }
 
 export default function Percentage(props: PercentageProps) {
   // Get emitted components from map (so we can get any override that may exist)
-  const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const classes = useStyles();
-
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    // onChange,
+    // onBlur,
     readOnly,
+    currencyISOCode = 'USD',
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
+
+  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);
+
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
-  }
-
-  if (readOnly) {
-    return <TextInput {...props} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   let testProp = {};
@@ -70,23 +61,37 @@ export default function Percentage(props: PercentageProps) {
     'data-test-id': testId
   };
 
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
   return (
-    <TextField
-      className={classes.input}
+    <CurrencyTextField
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder={placeholder ?? ''}
+      size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      readOnly={!!readOnly}
       error={status === 'error'}
       label={label}
       value={value}
-      type="number"
-      inputProps={{ ...testProp }}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{
+        inputProps: { ...testProp }
+      }}
+      currencySymbol=''
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={theCurrSep}
+      onBlur={!readOnly ? PercentageOnBlur : undefined}
     />
   );
 }

package/lib/field/Percentage/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Percentage",
   "type": "Field",
   "subtype": "Decimal-Percentage",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/Phone/Phone.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
+
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface PhoneProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Phone here
@@ -24,7 +24,8 @@ export default function Phone(props: PhoneProps) {
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -39,7 +40,7 @@ export default function Phone(props: PhoneProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -49,8 +50,8 @@ export default function Phone(props: PhoneProps) {
         <MuiPhoneNumber
           fullWidth
           helperText={helperTextToDisplay}
-          placeholder=""
-          size="small"
+          placeholder={placeholder ?? ''}
+          size='small'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -67,13 +68,13 @@ export default function Phone(props: PhoneProps) {
     );
   }
 
-  const handleChange = (inputVal) => {
+  const handleChange = inputVal => {
     let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
     phoneValue = `+${phoneValue}`;
     onChange({ value: phoneValue });
   };
 
-  const handleBlur = (event) => {
+  const handleBlur = event => {
     const phoneValue = event?.target?.value;
     event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
     onBlur(event);
@@ -82,11 +83,11 @@ export default function Phone(props: PhoneProps) {
   return (
     <MuiPhoneNumber
       fullWidth
-      variant="outlined"
+      variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
-      defaultCountry="us"
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='us'
       required={required}
       disabled={disabled}
       onChange={handleChange}

package/lib/field/Phone/index.tsx

@@ -1 +1 @@
-export { default } from './Phone';
+export { default } from './Phone';

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -1,20 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-// import type { PConnFieldProps } from '../../../types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
-// interface RadioButtonsProps extends PConnFieldProps {
-//   // If any, enter additional props that only exist on RadioButtons here
-//   inline: boolean,
-//   fieldMetadata?: any
-// }
-
+interface RadioButtonsProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RadioButtons here
+  inline: boolean;
+  fieldMetadata?: any;
+}
 
-export default function RadioButtons(props /* : RadioButtonsProps */ ) {
+export default function RadioButtons(props: RadioButtonsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
@@ -37,15 +36,15 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
   const thePConn = getPConnect();
   const theConfigProps = thePConn.getConfigProps();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps()["value"];
+  const propName = (thePConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
   const className = thePConn.getCaseInfo().getClassName();
 
-  let configProperty = thePConn.getRawMetadata()?.config?.value || '';
+  let configProperty = (thePConn.getRawMetadata() as any)?.config?.value || '';
   configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
   configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
 
-  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter((field) => field?.classID === className)[0] : fieldMetadata;
+  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
   let displayName = metaData?.datasource?.propertyForDisplayText;
   displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
   const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
@@ -66,6 +65,7 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
+        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -75,25 +75,26 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
+        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant="stacked"
+        variant='stacked'
       />
     );
   }
 
-  const handleChange = (event) => {
+  const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
   };
 
-  const handleBlur = (event) => {
+  const handleBlur = event => {
     thePConn.getValidationApi().validate(event.target.value, ''); // 2nd arg empty string until typedef marked correctly as optional
   };
 
   return (
     <FormControl error={status === 'error'} required={required}>
-      <FormLabel component="legend">{label}</FormLabel>
+      <FormLabel component='legend'>{label}</FormLabel>
       <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
-        {theOptions.map((theOption) => {
+        {theOptions.map(theOption => {
           return (
             <FormControlLabel
               value={theOption.key}
@@ -101,9 +102,10 @@ export default function RadioButtons(props /* : RadioButtonsProps */ ) {
               label={thePConn.getLocalizedValue(
                 theOption.value,
                 localePath,
+                // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
                 thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
               )}
-              control={<Radio key={theOption.key} color="primary" disabled={readOnly} />}
+              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}
             />
           );
         })}

package/lib/field/RadioButtons/config-ext.json

@@ -4,6 +4,5 @@
   "description": "Picklist",
   "type": "Field",
   "subtype": "Picklist",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/RichText/RichText.tsx

@@ -1,7 +1,8 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
@@ -18,16 +19,16 @@ export default function RichText(props: RichTextProps) {
   const editorRef: any = useRef(null);
 
   let { readOnly, required, disabled } = props;
-  [readOnly, required, disabled] = [readOnly, required, disabled].map((prop) => prop === true || (typeof prop === 'string' && prop === 'true'));
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
   const helperTextToDisplay = validatemessage || helperText;
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />;
   }
 
   let richTextComponent;
@@ -55,7 +56,7 @@ export default function RichText(props: RichTextProps) {
     }
     const handleChange = () => {
       if (status === 'error') {
-        const property = pConn.getStateProps()["value"];
+        const property = (pConn.getStateProps() as any).value;
         pConn.clearErrorMessages({
           property,
           category: '',
@@ -67,7 +68,7 @@ export default function RichText(props: RichTextProps) {
     const handleBlur = () => {
       if (editorRef.current) {
         const editorValue = editorRef.current.getContent({ format: 'html' });
-        const property = pConn.getStateProps()["value"];
+        const property = (pConn.getStateProps() as any).value;
         handleEvent(actionsApi, 'changeNblur', property, editorValue);
       }
     };

package/lib/field/ScalarList/ScalarList.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -8,7 +7,7 @@ interface ScalarListProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   displayInModal: boolean;
   hideLabel: boolean;
-  value: Array<any>;
+  value: any[];
   componentType: string;
   label: string;
   displayMode: string;
@@ -30,15 +29,7 @@ export default function ScalarList(props: ScalarListProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    label,
-    getPConnect,
-    componentType,
-    value: scalarValues,
-    displayMode,
-    hideLabel,
-    ...restProps
-  } = props;
+  const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
 
   const items = scalarValues?.map(scalarValue => {
     return getPConnect().createComponent(
@@ -59,12 +50,11 @@ export default function ScalarList(props: ScalarListProps) {
   });
 
   if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
-    const displayComp = (
+    return (
       <div>
         <CommaSeparatedList items={items} />
       </div>
     );
-    return displayComp;
   }
 
   const displayComp = <CommaSeparatedList items={items} />;

package/lib/field/ScalarList/config-ext.json

@@ -3,6 +3,5 @@
   "componentKey": "ScalarList",
   "name": "ScalarList",
   "type": "Field",
-  "properties": [
-  ]
+  "properties": []
 }