@pega/sdk 0.0.3 → 0.0.4

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

@@ -27,7 +27,7 @@ export default function Phone(props: PhoneProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
   } = props;
 
   const pConn = getPConnect();
@@ -42,7 +42,7 @@ export default function Phone(props: PhoneProps) {
   let testProp = {};
 
   testProp = {
-    'data-test-id': testId
+    'data-test-id': testId,
   };
 
   if (displayMode === 'DISPLAY_ONLY') {
@@ -50,7 +50,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) {
@@ -61,8 +61,8 @@ export default function Phone(props: PhoneProps) {
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
-          size='small'
-          defaultCountry='US'
+          size="small"
+          defaultCountry="US"
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -72,8 +72,8 @@ export default function Phone(props: PhoneProps) {
           slotProps={{
             input: {
               readOnly: true,
-              ...testProp
-            }
+              ...testProp,
+            },
           }}
           disableDropdown={disableDropdown}
         />
@@ -81,11 +81,11 @@ export default function Phone(props: PhoneProps) {
     );
   }
 
-  const handleChange = inputVal => {
+  const handleChange = (inputVal) => {
     setInputValue(inputVal);
   };
 
-  const handleBlur = event => {
+  const handleBlur = (event) => {
     const phoneValue = event?.target?.value;
     let phoneNumber = phoneValue.split(' ').slice(1).join();
     phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
@@ -95,11 +95,11 @@ export default function Phone(props: PhoneProps) {
   return (
     <MuiTelInput
       fullWidth
-      variant='outlined'
+      variant="outlined"
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
-      size='small'
-      defaultCountry='US'
+      size="small"
+      defaultCountry="US"
       required={required}
       disabled={disabled}
       onChange={handleChange}

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

@@ -44,7 +44,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     datasource,
     imagePosition,
     imageSize,
-    showImageDescription
+    showImageDescription,
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -59,7 +59,9 @@ export default function RadioButtons(props: RadioButtonsProps) {
   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';
@@ -80,7 +82,11 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
+        )}
       />
     );
   }
@@ -89,17 +95,21 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant='stacked'
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
+        )}
+        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
   };
 
@@ -108,7 +118,14 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+        <div
+          id="selectable-card"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))',
+            gap: '1rem',
+          }}
+        >
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}
@@ -119,13 +136,13 @@ export default function RadioButtons(props: RadioButtonsProps) {
               imageSize,
               showImageDescription,
               imageField: stateProps.image?.split('.').pop(),
-              imageDescription: stateProps.imageDescription?.split('.').pop()
+              imageDescription: stateProps.imageDescription?.split('.').pop(),
             }}
             onChange={handleChange}
             recordKey={stateProps.value?.split('.').pop()}
             cardLabel={stateProps.primaryField?.split('.').pop()}
             radioBtnValue={value}
-            type='radio'
+            type="radio"
             setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
           />
         </div>
@@ -134,10 +151,15 @@ export default function RadioButtons(props: RadioButtonsProps) {
   }
 
   return (
-    <FormControl variant='standard' error={status === 'error'} required={required}>
-      <FormLabel component='legend'>{label}</FormLabel>
-      <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
-        {theOptions.map(theOption => {
+    <FormControl variant="standard" error={status === 'error'} required={required}>
+      <FormLabel component="legend">{label}</FormLabel>
+      <RadioGroup
+        value={theSelectedButton}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        row={inline}
+      >
+        {theOptions.map((theOption) => {
           return (
             <FormControlLabel
               value={theOption.key}
@@ -145,9 +167,9 @@ export default function RadioButtons(props: RadioButtonsProps) {
               label={thePConn.getLocalizedValue(
                 theOption.value,
                 localePath,
-                thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+                thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
               )}
-              control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}
+              control={<Radio key={theOption.key} color="primary" disabled={readOnly} />}
             />
           );
         })}

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

@@ -16,12 +16,25 @@ export default function RichText(props: RichTextProps) {
   const FieldValueList = getComponentFromRegistry('FieldValueList');
   const RichTextEditor = getComponentFromRegistry('RichTextEditor');
 
-  const { getPConnect, value, placeholder, validatemessage, label, hideLabel, helperText, testId, displayMode, additionalProps } = props;
+  const {
+    getPConnect,
+    value,
+    placeholder,
+    validatemessage,
+    label,
+    hideLabel,
+    helperText,
+    testId,
+    displayMode,
+    additionalProps,
+  } = props;
   const pConn = getPConnect();
   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;
 
@@ -30,7 +43,7 @@ export default function RichText(props: RichTextProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant="stacked" />;
   }
 
   let richTextComponent;
@@ -62,7 +75,7 @@ export default function RichText(props: RichTextProps) {
         pConn.clearErrorMessages({
           property,
           category: '',
-          context: ''
+          context: '',
         });
       }
     };

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

@@ -30,7 +30,7 @@ export default function ScalarList(props: ScalarListProps) {
 
   const { label, getPConnect, componentType, value: scalarValues, displayMode, hideLabel, ...restProps } = props;
 
-  const items = scalarValues?.map(scalarValue => {
+  const items = scalarValues?.map((scalarValue) => {
     return getPConnect().createComponent(
       {
         type: componentType,
@@ -39,13 +39,13 @@ export default function ScalarList(props: ScalarListProps) {
           displayMode: 'DISPLAY_ONLY',
           label,
           ...restProps,
-          readOnly: 'true'
-        }
+          readOnly: 'true',
+        },
       },
       '',
       // @ts-expect-error
       '',
-      {}
+      {},
     ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   });
 
@@ -59,5 +59,5 @@ export default function ScalarList(props: ScalarListProps) {
 
   const displayComp = <CommaSeparatedList items={items} />;
 
-  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant='stacked' />;
+  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant="stacked" />;
 }

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

@@ -23,7 +23,7 @@ export default function SelectableCard(props) {
     additionalProps,
     testId,
     setIsRadioCardSelected,
-    showNoValue = false
+    showNoValue = false,
   } = props;
 
   const pConn = getPConnect();
@@ -33,7 +33,7 @@ export default function SelectableCard(props) {
   const cardDataSource = readOnly || displayMode === 'DISPLAY_ONLY' ? readOnlyList || [] : dataSource?.source;
   const imageDescriptionKey = showImageDescription ? imageDescription : undefined;
 
-  const handleCardClick = event => {
+  const handleCardClick = (event) => {
     if (disabled || readOnly) return;
     // If the click landed on or inside a label/input, native behavior already handles it.
     if (event.target.closest?.('label, input')) return;
@@ -46,21 +46,21 @@ export default function SelectableCard(props) {
 
   return (
     <>
-      {(cardDataSource || []).map(item => {
+      {(cardDataSource || []).map((item) => {
         const resolvedFields = resolveReferenceFields(item, hideFieldLabels, recordKey, pConn);
 
         const commonProps = {
           id: item[recordKey],
           key: item[recordKey],
           fields: resolvedFields,
-          label: item[cardLabel]
+          label: item[cardLabel],
         };
 
         const image = item[imageField]
           ? {
               src: item[imageField],
               alt: showImageDescription && imageDescriptionKey ? item[imageDescriptionKey] : '',
-              style: { width: imageSize, objectPosition: imagePosition }
+              style: { width: imageSize, objectPosition: imagePosition },
             }
           : undefined;
 
@@ -68,9 +68,9 @@ export default function SelectableCard(props) {
           <Card className={className} style={{ display: 'flex' }} data-testid={testId}>
             {image && <img src={image.src} alt={image.alt} style={{ width: '100px' }} />}
             <CardContent>
-              <Typography variant='body1'>{item[cardLabel]}</Typography>
+              <Typography variant="body1">{item[cardLabel]}</Typography>
               {commonProps.fields.map((field, index) => (
-                <Typography key={index} variant='body2'>
+                <Typography key={index} variant="body2">
                   {field.value}
                 </Typography>
               ))}
@@ -86,19 +86,29 @@ export default function SelectableCard(props) {
           <div key={item[recordKey]} style={{ paddingTop: '15px' }}>
             <Card
               className={className}
-              style={{ display: 'flex', flexDirection: 'column', height: '100%', cursor: disabled || readOnly ? 'default' : 'pointer' }}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                cursor: disabled || readOnly ? 'default' : 'pointer',
+              }}
               data-testid={testId}
               onClick={handleCardClick}
             >
               <CardContent
                 style={{
-                  ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { display: 'flex', height: '100%' }),
-                  ...(imagePosition === 'inline-end' && { flexDirection: 'row-reverse' })
+                  ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && {
+                    display: 'flex',
+                    height: '100%',
+                  }),
+                  ...(imagePosition === 'inline-end' && {
+                    flexDirection: 'row-reverse',
+                  }),
                 }}
               >
                 <div
                   style={{
-                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '40%' })
+                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '40%' }),
                   }}
                 >
                   {image && (
@@ -112,14 +122,14 @@ export default function SelectableCard(props) {
                         maxHeight: '100%',
                         height: '100%',
                         objectFit: 'contain',
-                        maxWidth: '100%'
+                        maxWidth: '100%',
                       }}
                     />
                   )}
                 </div>
                 <div
                   style={{
-                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '60%' })
+                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '60%' }),
                   }}
                 >
                   {type === 'radio' ? (
@@ -136,7 +146,7 @@ export default function SelectableCard(props) {
                           {...additionalProps}
                         />
                       }
-                      label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
+                      label={<Typography variant="body1">{item[cardLabel]}</Typography>}
                     />
                   ) : (
                     <FormControlLabel
@@ -144,7 +154,7 @@ export default function SelectableCard(props) {
                         <Checkbox
                           id={item[recordKey]}
                           getPConnect={getPConnect}
-                          checked={readOnlyList.some(data => data[recordKey] === item[recordKey])}
+                          checked={readOnlyList.some((data) => data[recordKey] === item[recordKey])}
                           onChange={onChange}
                           onBlur={onBlur}
                           onClick={onClick}
@@ -153,7 +163,7 @@ export default function SelectableCard(props) {
                           {...additionalProps}
                         />
                       }
-                      label={<Typography variant='body1'>{item[cardLabel]}</Typography>}
+                      label={<Typography variant="body1">{item[cardLabel]}</Typography>}
                     />
                   )}
 
@@ -162,8 +172,11 @@ export default function SelectableCard(props) {
                       key={index}
                       style={{
                         fontSize: '0.875rem',
-                        ...(field.type !== 'TextArea' && { display: 'grid', gridTemplateColumns: '1fr 1fr' }),
-                        margin: '5px'
+                        ...(field.type !== 'TextArea' && {
+                          display: 'grid',
+                          gridTemplateColumns: '1fr 1fr',
+                        }),
+                        margin: '5px',
                       }}
                     >
                       {field.name && <div>{field.name}</div>}

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

@@ -2,7 +2,7 @@ import { Link } from '@mui/material';
 
 import { Utils } from '../../helpers/utils';
 
-export const resolveReferencedPConnect = pConnect => {
+export const resolveReferencedPConnect = (pConnect) => {
   if (!pConnect || !pConnect.meta) return undefined;
   const type = pConnect?._type ?? undefined;
   const referencedPConnect = type === 'reference' && pConnect.getReferencedViewPConnect().getPConnect();
@@ -38,12 +38,16 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
     }
   }
 
-  caseSummaryComponentObject.name = pConnect.resolveConfigProps({ label: config.label }).label;
+  caseSummaryComponentObject.name = pConnect.resolveConfigProps({
+    label: config.label,
+  }).label;
 
   if (config.inheritedProps) {
-    const labelInInheritedProp = config.inheritedProps.find(inheritedProp => inheritedProp.prop === 'label');
+    const labelInInheritedProp = config.inheritedProps.find((inheritedProp) => inheritedProp.prop === 'label');
     if (labelInInheritedProp) {
-      labelInInheritedProp.value = pConnect.resolveConfigProps({ label: labelInInheritedProp.value }).label;
+      labelInInheritedProp.value = pConnect.resolveConfigProps({
+        label: labelInInheritedProp.value,
+      }).label;
     }
   }
 
@@ -51,15 +55,15 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
     case 'CaseOperator': {
       if (config.label.includes('Create operator')) {
         caseSummaryComponentObject.name = pConnect.resolveConfigProps({
-          createLabel: config.createLabel
+          createLabel: config.createLabel,
         }).createLabel;
       } else if (config.label.includes('Update operator')) {
         caseSummaryComponentObject.name = pConnect.resolveConfigProps({
-          updateLabel: config.updateLabel
+          updateLabel: config.updateLabel,
         }).updateLabel;
       } else {
         caseSummaryComponentObject.name = pConnect.resolveConfigProps({
-          resolveLabel: config.resolveLabel
+          resolveLabel: config.resolveLabel,
         }).resolveLabel;
       }
 
@@ -67,14 +71,14 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
     }
     case 'Checkbox': {
       caseSummaryComponentObject.name = pConnect.resolveConfigProps({
-        label: config.caption
+        label: config.caption,
       }).label;
 
       break;
     }
     case 'Pega_UI_PercentageWidget': {
       const rawValue = pConnect.resolveConfigProps({
-        value: config.value
+        value: config.value,
       }).value;
 
       caseSummaryComponentObject.simpleValue = rawValue || rawValue === 0 ? `${rawValue}%` : noValueComponent;
@@ -89,7 +93,7 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
     case 'Location':
     case 'RichText': {
       const rawValue = pConnect.resolveConfigProps({
-        value: config.value
+        value: config.value,
       }).value;
 
       caseSummaryComponentObject.variant = 'stacked';
@@ -98,7 +102,7 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
     }
     case 'TextArea': {
       const rawValue = pConnect.resolveConfigProps({
-        value: config.value
+        value: config.value,
       }).value;
 
       if (rawValue?.length > 22) {
@@ -111,11 +115,15 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
     case 'URL': {
       if (config.displayAs === 'Image') {
         const rawValue = pConnect.resolveConfigProps({
-          value: config.value
+          value: config.value,
         }).value;
 
         caseSummaryComponentObject.variant = 'stacked';
-        caseSummaryComponentObject.simpleValue = rawValue?.length ? <Link href={rawValue}>{rawValue}</Link> : noValueComponent;
+        caseSummaryComponentObject.simpleValue = rawValue?.length ? (
+          <Link href={rawValue}>{rawValue}</Link>
+        ) : (
+          noValueComponent
+        );
       }
       break;
     }
@@ -149,8 +157,8 @@ export function prepareComponentInCaseSummary(pConnectMeta: any, getPConnect: Fu
       ...config,
       // Need a unique key for each summary component which helps in creating new component based on visibility
       // Also a consistent key helps in rerendering summary components instead of remounting
-      key: config
-    }
+      key: config,
+    },
   });
 
   createdComponent.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
@@ -178,7 +186,7 @@ export function resolveReferenceFields(
   },
   hideFieldLabels: boolean,
   recordKey: string,
-  pConnect: typeof PConnect
+  pConnect: typeof PConnect,
 ) {
   const presets: {
     children?: {
@@ -200,10 +208,10 @@ export function resolveReferenceFields(
         config: {
           ...preset.config,
           displayMode: 'DISPLAY_ONLY',
-          contextName: pConnect.getContextName()
-        }
+          contextName: pConnect.getContextName(),
+        },
       },
-      useCustomContext: item
+      useCustomContext: item,
     };
     const configObj = PCore.createPConnect(fieldMeta);
     const meta = configObj.getPConnect().getMetadata();
@@ -217,7 +225,7 @@ export function resolveReferenceFields(
           id: `${item[recordKey]} - ${index}`,
           name: fieldInfo.name,
           value: fieldInfo.value,
-          type: preset.type
+          type: preset.type,
         };
   });
 }