@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,17 +1,8 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import {
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  useTheme,
-} from '@mui/material';
+import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import {
-  useAfterInitialEffect,
-  useConsolidatedRef,
-  useUID,
-} from '@pega/sdk-react';
+import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/sdk-react';
 
 const useStyles = makeStyles((theme) => ({
   fieldLabel: {
@@ -38,10 +29,7 @@ interface RichTextEditorProps {
   onChange: React.EventHandler<any>;
 }
 
-const RichTextEditor = forwardRef(function RichTextEditor(
-  props: RichTextEditorProps,
-  ref,
-) {
+const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
   const theme = useTheme();
   const classes = useStyles();
   const uid = useUID();
@@ -102,17 +90,12 @@ const RichTextEditor = forwardRef(function RichTextEditor(
     const value = defaultValue || '--';
 
     richTextComponent = (
-      <div
-        key={id}
-        id={id}
-        className='readonly-richtext-editor'
-        dangerouslySetInnerHTML={{ __html: value }}
-      />
+      <div key={id} id={id} className="readonly-richtext-editor" dangerouslySetInnerHTML={{ __html: value }} />
     );
   } else {
     richTextComponent = (
       <Editor
-        tinymceScriptSrc='tinymce/tinymce.min.js'
+        tinymceScriptSrc="tinymce/tinymce.min.js"
         onInit={(_evt, editor) => {
           editorRef.current = editor;
         }}
@@ -152,14 +135,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(
           menubar: false,
           statusbar: false,
           min_height: 130,
-          plugins: [
-            'lists',
-            'advlist',
-            'autolink',
-            'image',
-            'link',
-            'autoresize',
-          ],
+          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
           autoresize_bottom_margin: 0,
           toolbar: disabled
             ? false
@@ -178,17 +154,9 @@ const RichTextEditor = forwardRef(function RichTextEditor(
   }
 
   return (
-    <FormControl
-      variant='standard'
-      data-test-id={testId}
-      error={error}
-      required={required}
-    >
+    <FormControl variant="standard" data-test-id={testId} error={error} required={required}>
       {!labelHidden && (
-        <InputLabel
-          id='demo-simple-select-error-label'
-          className={classes.fieldLabel}
-        >
+        <InputLabel id="demo-simple-select-error-label" className={classes.fieldLabel}>
           {label}
         </InputLabel>
       )}

package/templates/react-sdk-reference/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -10,13 +10,13 @@ interface WssQuickCreateProps {
   actions?: any[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   quickLinkList: {
     backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
     color: 'var(--app-text-color)',
     borderRadius: '16px',
-    border: '1px solid var(--app-primary-color)'
-  }
+    border: '1px solid var(--app-primary-color)',
+  },
 }));
 
 export default function WssQuickCreate(props: WssQuickCreateProps) {
@@ -25,17 +25,17 @@ export default function WssQuickCreate(props: WssQuickCreateProps) {
 
   return (
     <div>
-      <h1 id='quick-links-heading' className='quick-links-heading'>
+      <h1 id="quick-links-heading" className="quick-links-heading">
         {heading}
       </h1>
-      <ul id='quick-links' className='quick-link-ul-list'>
+      <ul id="quick-links" className="quick-link-ul-list">
         {actions &&
-          actions.map(element => {
+          actions.map((element) => {
             return (
               <li className={classes.quickLinkList} key={element.label}>
-                <Button className='quick-link-button' onClick={element.onClick}>
-                  <span className='quick-link-button-span'>
-                    {element.icon && <img className='quick-link-icon' src={element.icon} />}
+                <Button className="quick-link-button" onClick={element.onClick}>
+                  <span className="quick-link-button-span">
+                    {element.icon && <img className="quick-link-icon" src={element.icon} />}
                     <span>{element.label}</span>
                   </span>
                 </Button>

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

@@ -14,18 +14,18 @@ interface IOption {
   value: string;
 }
 
-const preProcessColumns = columnList => {
-  return columnList.map(col => {
+const preProcessColumns = (columnList) => {
+  return columnList.map((col) => {
     const tempColObj = { ...col };
     tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
     return tempColObj;
   });
 };
 
-const getDisplayFieldsMetaData = columnList => {
-  const displayColumns = columnList.filter(col => col.display === 'true');
+const getDisplayFieldsMetaData = (columnList) => {
+  const displayColumns = columnList.filter((col) => col.display === 'true');
   const metaDataObj: any = { key: '', primary: '', secondary: [] };
-  const keyCol = columnList.filter(col => col.key === 'true');
+  const keyCol = columnList.filter((col) => col.key === 'true');
   metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
   for (let index = 0; index < displayColumns.length; index += 1) {
     if (displayColumns[index].primary === 'true') {
@@ -71,7 +71,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
     status,
     helperText,
     hideLabel,
-    onRecordChange
+    onRecordChange,
   } = props;
 
   const context = getPConnect().getContextName();
@@ -93,7 +93,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
 
   const flattenParameters = (params = {}) => {
     const flatParams = {};
-    Object.keys(params).forEach(key => {
+    Object.keys(params).forEach((key) => {
       const { name, value: theVal } = params[key];
       flatParams[name] = theVal;
     });
@@ -106,22 +106,28 @@ export default function AutoComplete(props: AutoCompleteProps) {
   if (deferDatasource && datasourceMetadata?.datasource?.name) {
     listType = 'datapage';
     datasource = datasourceMetadata.datasource.name;
-    const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+    const {
+      parameters: dataSourceParameters,
+      propertyForDisplayText,
+      propertyForValue,
+    } = datasourceMetadata.datasource;
     parameters = flattenParameters(dataSourceParameters);
-    const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+    const displayProp = propertyForDisplayText.startsWith('@P')
+      ? propertyForDisplayText.substring(3)
+      : propertyForDisplayText;
     const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
     columns = [
       {
         key: 'true',
         setProperty: 'Associated property',
-        value: valueProp
+        value: valueProp,
       },
       {
         display: 'true',
         primary: 'true',
         useForSearch: true,
-        value: displayProp
-      }
+        value: displayProp,
+      },
     ];
   }
   columns = preProcessColumns(columns);
@@ -137,11 +143,11 @@ export default function AutoComplete(props: AutoCompleteProps) {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
-        results?.forEach(element => {
+        results?.forEach((element) => {
           const val = element[displayColumn.primary]?.toString();
           const obj = {
             key: element[displayColumn.key] || element.pyGUID,
-            value: val
+            value: val,
           };
           optionsData.push(obj);
         });
@@ -155,11 +161,11 @@ export default function AutoComplete(props: AutoCompleteProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
   }
 
   if (value) {
-    const index = options?.findIndex(element => element.key === value);
+    const index = options?.findIndex((element) => element.key === value);
     if (index > -1) {
       selectedValue = options[index].value;
     } else {
@@ -180,7 +186,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
   };
 
   if (readOnly) {
-    const theValAsString = options?.find(opt => opt.key === value)?.value;
+    const theValAsString = options?.find((opt) => opt.key === value)?.value;
     return <TextInput {...props} value={theValAsString} />;
   }
   // Need to use both getOptionLabel and getOptionSelected to map our
@@ -199,14 +205,14 @@ export default function AutoComplete(props: AutoCompleteProps) {
       value={selectedValue}
       inputValue={inputValue || selectedValue}
       onInputChange={handleInputValue}
-      renderInput={params => (
+      renderInput={(params) => (
         <TextField
           {...params}
           fullWidth
-          variant='outlined'
+          variant="outlined"
           helperText={helperTextToDisplay}
           placeholder={placeholder}
-          size='small'
+          size="small"
           required={required}
           error={status === 'error'}
           label={label}

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

@@ -17,7 +17,16 @@ interface CancelAlertProps extends PConnFieldProps {
 }
 
 export default function CancelAlert(props: CancelAlertProps) {
-  const { heading, content, getPConnect, itemKey: containerItemID, hideDelete, isDataObject, skipReleaseLockRequest, dismiss } = props;
+  const {
+    heading,
+    content,
+    getPConnect,
+    itemKey: containerItemID,
+    hideDelete,
+    isDataObject,
+    skipReleaseLockRequest,
+    dismiss,
+  } = props;
   const actionsAPI = getPConnect().getActionsApi();
   const containerManagerAPI = getPConnect().getContainerManager();
   const isLocalAction = getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
@@ -30,28 +39,28 @@ export default function CancelAlert(props: CancelAlertProps) {
   const btnIds = {
     SAVE_AND_CLOSE: 'saveAndClose',
     CONTINUE_WORKING: 'continueWorking',
-    DELETE: 'delete'
+    DELETE: 'delete',
   };
 
   const [buttonsState, setButtonsState] = useState({
     [btnIds.SAVE_AND_CLOSE]: false,
-    [btnIds.DELETE]: false
+    [btnIds.DELETE]: false,
   });
 
   const [showSnackbar, setShowSnackbar] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
 
   function disableButton(id) {
-    setButtonsState(prevState => ({
+    setButtonsState((prevState) => ({
       ...prevState,
-      [id]: true
+      [id]: true,
     }));
   }
 
   function enableButton(id) {
-    setButtonsState(prevState => ({
+    setButtonsState((prevState) => ({
       ...prevState,
-      [id]: false
+      [id]: false,
     }));
   }
 
@@ -82,7 +91,10 @@ export default function CancelAlert(props: CancelAlertProps) {
       actionsAPI.cancelBulkAction(containerItemID);
     } else {
       dismiss(true);
-      containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
+      containerManagerAPI.removeContainerItem({
+        containerItemID,
+        skipReleaseLockRequest,
+      });
     }
   }
 
@@ -96,8 +108,8 @@ export default function CancelAlert(props: CancelAlertProps) {
   const leftButton = (
     <Button
       name={btnIds.CONTINUE_WORKING}
-      variant='contained'
-      color='secondary'
+      variant="contained"
+      color="secondary"
       onClick={() => {
         dismiss();
         if (isReverseCoexistence) {
@@ -111,21 +123,27 @@ export default function CancelAlert(props: CancelAlertProps) {
   );
 
   const rightButton = (
-    <Button name={btnIds.DELETE} variant='contained' color='primary' disabled={buttonsState[btnIds.DELETE]} onClick={cancelHandler}>
+    <Button
+      name={btnIds.DELETE}
+      variant="contained"
+      color="primary"
+      disabled={buttonsState[btnIds.DELETE]}
+      onClick={cancelHandler}
+    >
       {localizedVal('Discard', localeCategory)}
     </Button>
   );
 
   return (
     <>
-      <div className='cancel-alert-background'>
-        <div className='cancel-alert-top'>
+      <div className="cancel-alert-background">
+        <div className="cancel-alert-top">
           <h3>{localizedVal(heading, localeCategory)}</h3>
           <div>
             <p>{localizedVal(content, localeCategory)}</p>
           </div>
-          <div className='action-controls'>
-            <Grid container spacing={4} justifyContent='space-between'>
+          <div className="action-controls">
+            <Grid container spacing={4} justifyContent="space-between">
               <Grid>{leftButton}</Grid>
               <Grid>{rightButton}</Grid>
             </Grid>
@@ -138,8 +156,8 @@ export default function CancelAlert(props: CancelAlertProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />

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

@@ -33,14 +33,14 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
 const useStyles = makeStyles(() => ({
   checkbox: {
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
   },
   selectableCard: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
     gridAutoRows: '1fr',
-    gap: '0.5rem'
-  }
+    gap: '0.5rem',
+  },
 }));
 
 export default function CheckboxComponent(props: CheckboxProps) {
@@ -78,7 +78,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
     imageSize,
     showImageDescription,
     renderMode,
-    image
+    image,
   } = props;
   const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
 
@@ -113,14 +113,14 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant="stacked" />;
   }
 
-  const handleChange = event => {
+  const handleChange = (event) => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
   };
 
-  const handleBlur = event => {
+  const handleBlur = (event) => {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
@@ -140,7 +140,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
     className: 'standard',
     disabled,
     readOnly,
-    onClick: (actions as any).onClick
+    onClick: (actions as any).onClick,
   };
 
   if (variant === 'card') {
@@ -155,13 +155,13 @@ export default function CheckboxComponent(props: CheckboxProps) {
             dataSource={datasource}
             getPConnect={getPConnect}
             readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
-            onChange={e => {
+            onChange={(e) => {
               e.stopPropagation();
               const recordKey = selectionKey?.split('.').pop();
-              const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
+              const selectedItem = datasource?.source?.find((item) => item[recordKey as any] === e.target.id) ?? {};
               handleCheckboxChange(e, {
                 id: selectedItem[recordKey as any],
-                primary: selectedItem[recordKey as any]
+                primary: selectedItem[recordKey as any],
               });
             }}
             onBlur={() => {
@@ -175,11 +175,13 @@ export default function CheckboxComponent(props: CheckboxProps) {
               imageSize,
               showImageDescription,
               imageField: image?.split('.').pop(),
-              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop(),
             }}
             readOnlyList={selectedvalues}
-            type='checkbox'
-            showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
+            type="checkbox"
+            showNoValue={
+              (renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0
+            }
           />
         </div>
       </div>
@@ -190,18 +192,18 @@ export default function CheckboxComponent(props: CheckboxProps) {
     if (event.target.checked) {
       insertInstruction(thePConn, selectionList, selectionKey, primaryField, {
         id: element.key,
-        primary: element.text ?? element.value
+        primary: element.text ?? element.value,
       });
     } else {
       deleteInstruction(thePConn, selectionList, selectionKey, {
         id: element.key,
-        primary: element.text ?? element.value
+        primary: element.text ?? element.value,
       });
     }
     thePConn.clearErrorMessages({
       property: selectionList,
       category: '',
-      context: ''
+      context: '',
     });
   };
 
@@ -216,8 +218,8 @@ export default function CheckboxComponent(props: CheckboxProps) {
           control={
             <Checkbox
               key={index}
-              checked={selectedvalues?.some?.(data => data[dataField] === element.key)}
-              onChange={event => handleChangeMultiMode(event, element)}
+              checked={selectedvalues?.some?.((data) => data[dataField] === element.key)}
+              onChange={(event) => handleChangeMultiMode(event, element)}
               onBlur={() => {
                 thePConn.getValidationApi().validate(selectedvalues, selectionList);
               }}
@@ -226,9 +228,9 @@ export default function CheckboxComponent(props: CheckboxProps) {
           }
           key={index}
           label={element.text ?? element.value}
-          labelPlacement='end'
+          labelPlacement="end"
           data-test-id={testId}
-        />
+        />,
       );
     });
     theCheckbox = <div className={classes.checkbox}>{listOfCheckboxes}</div>;
@@ -237,7 +239,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
       <FormControlLabel
         control={
           <Checkbox
-            color='primary'
+            color="primary"
             checked={checked}
             onChange={!readOnly ? handleChange : undefined}
             onBlur={!readOnly ? handleBlur : undefined}
@@ -247,15 +249,15 @@ export default function CheckboxComponent(props: CheckboxProps) {
           />
         }
         label={caption}
-        labelPlacement='end'
+        labelPlacement="end"
         data-test-id={testId}
       />
     );
   }
 
   return (
-    <FormControl variant='standard' required={required} error={status === 'error'}>
-      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
+    <FormControl variant="standard" required={required} error={status === 'error'}>
+      {!hideLabel && <FormLabel component="legend">{label}</FormLabel>}
       <FormGroup>{theCheckbox}</FormGroup>
       <FormHelperText>{helperTextToDisplay}</FormHelperText>
     </FormControl>

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

@@ -36,7 +36,7 @@ export default function Currency(props: CurrrencyProps) {
     hideLabel,
     currencyISOCode = 'USD',
     placeholder,
-    allowDecimals
+    allowDecimals,
   } = props;
 
   const pConn = getPConnect();
@@ -67,21 +67,25 @@ export default function Currency(props: CurrrencyProps) {
   }
 
   let currencyProp = {};
-  currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
+  currencyProp = {
+    prefix: theCurrSym,
+    decimalSeparator: theCurrDec,
+    thousandSeparator: theCurrSep,
+  };
 
   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' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant="stacked" />;
   }
 
   function currOnBlur() {
     handleEvent(actions, 'changeNblur', propName, values);
   }
 
-  const handleChange = val => {
+  const handleChange = (val) => {
     setValues(val.value);
   };
 
@@ -94,12 +98,12 @@ export default function Currency(props: CurrrencyProps) {
       placeholder={placeholder ?? ''}
       required={required}
       disabled={disabled}
-      onValueChange={val => {
+      onValueChange={(val) => {
         handleChange(val);
       }}
       onBlur={!readOnly ? currOnBlur : undefined}
       error={status === 'error'}
-      name='numberformat'
+      name="numberformat"
       value={values}
       {...currencyProp}
       decimalScale={allowDecimals !== false ? 2 : 0}

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

@@ -42,7 +42,7 @@ export const getCurrencyCharacters = (inISOCode: string) => {
   const theCurrencyChars = {
     theCurrencySymbol: '$',
     theDecimalIndicator: '.',
-    theDigitGroupSeparator: ','
+    theDigitGroupSeparator: ',',
   };
 
   const theCurrencyOptions = getCurrencyOptions(inISOCode);

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

@@ -22,7 +22,20 @@ export default function Date(props: DateProps) {
   const TextInput = getComponentFromRegistry('TextInput');
   const FieldValueList = getComponentFromRegistry('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value,
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+  } = props;
 
   const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
@@ -45,16 +58,16 @@ export default function Date(props: DateProps) {
 
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
-      format: dateFormatInfo.dateFormatString
+      format: dateFormatInfo.dateFormatString,
     });
     return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
     const formattedDate = format(props.value, 'date', {
-      format: dateFormatInfo.dateFormatString
+      format: dateFormatInfo.dateFormatString,
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant="stacked" />;
   }
 
   if (readOnly) {
@@ -64,7 +77,7 @@ export default function Date(props: DateProps) {
 
   const testProps: any = { 'data-test-id': testId };
 
-  const handleChange = date => {
+  const handleChange = (date) => {
     if (date && date.isValid()) {
       setDateValue(date);
       handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
@@ -85,8 +98,8 @@ export default function Date(props: DateProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProps }
-        }
+          InputProps: { ...testProps },
+        },
       }}
       onChange={handleChange}
     />