@pega/react-sdk-overrides 24.2.10 → 25.1.10

package/lib/helpers/field-group-utils.ts

@@ -1,4 +1,4 @@
-import { createElement, ReactElement } from 'react';
+import { createElement, type ReactElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 

package/lib/helpers/formatters/Currency.ts

@@ -1,14 +1,15 @@
 import { getLocale } from './common';
 import CurrencyMap from './CurrencyMap';
 
+const isValidValue = value => {
+  return value !== null && value !== undefined && value !== '';
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
   const currentLocale: string | undefined = getLocale(locale);
-  if (value !== null && value !== undefined) {
-    return Number(value).toLocaleString(currentLocale, {
-      minimumFractionDigits: decPlaces,
-      maximumFractionDigits: decPlaces
-    });
+  if (isValidValue(value)) {
+    return Number(value).toLocaleString(currentLocale, { minimumFractionDigits: decPlaces, maximumFractionDigits: decPlaces });
   }
   return value;
 }
@@ -19,15 +20,17 @@ function CurrencyFormatter(
 ): string {
   const currentLocale: string | undefined = getLocale(locale);
   let formattedValue: string = value;
-  if (value !== null && value !== undefined && value !== '') {
-    formattedValue = NumberFormatter(value, {
-      locale: currentLocale,
-      decPlaces,
-      style,
-      currency
-    });
+  if (isValidValue(value)) {
+    formattedValue = NumberFormatter(value, { locale: currentLocale, decPlaces, style, currency });
 
-    let countryCode: string | undefined = currentLocale?.split('-')[1].toUpperCase();
+    // For currency other than EUR, we need to determine the country code from currency code
+    // If currency is EUR, we use the locale to determine the country code
+    let countryCode: string | undefined;
+    if (currency !== 'EUR') {
+      countryCode = currency.substring(0, 2);
+    } else {
+      countryCode = currentLocale?.split('-')[1].toUpperCase();
+    }
 
     // If countryCode is still undefined, setting it as US
     if (!countryCode) {
@@ -56,7 +59,7 @@ function CurrencyFormatter(
 
 function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
   let formattedValue: string = value;
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale });
     return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
   }
@@ -67,11 +70,8 @@ export default {
   Currency: (value, options) => CurrencyFormatter(value, options),
   'Currency-Code': (value, options) => CurrencyFormatter(value, { ...options, symbol: false }),
   Decimal: (value, options) => NumberFormatter(value, options),
-  'Decimal-Auto': (value, options) =>
-    NumberFormatter(value, {
-      ...options,
-      decPlaces: Number.isInteger(value) ? 0 : 2
-    }),
+  'Decimal-Auto': (value, options) => NumberFormatter(value, { ...options, decPlaces: Number.isInteger(value) ? 0 : 2 }),
   Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
-  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' })
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' }),
+  isValidValue
 };

package/lib/helpers/formatters/CurrencyMap.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-template-curly-in-string */
-
 type CurrencyMapType = {
   name: string;
   symbolFormat: string;

package/lib/helpers/formatters/common.ts

@@ -7,7 +7,8 @@ export function getLocale(locale: string = '') {
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
-export function getCurrentTimezone(timezone: string = 'America/New_York') {
+export function getCurrentTimezone(timezone?: string) {
+  // use timezone if specified
   if (timezone) return timezone;
   return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }

package/lib/helpers/formatters/index.ts

@@ -18,10 +18,8 @@ function getDateObject(text): Date {
   const day = parseInt(timeStamp.substr(6, 2), 10);
 
   const date = new Date();
-
-  date.setDate(day);
-  date.setMonth(month);
-  date.setFullYear(year);
+  // Fix to handle all the dates, raised via https://github.com/pegasystems/react-sdk-components/issues/442
+  date.setFullYear(year, month, day);
 
   if (isDateTime) {
     const hours = parseInt(timeStamp.substr(9, 2), 10);

package/lib/helpers/object-utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the value of the key from objectInfo/caseInfo
+ * Added fallback to retrieve from caseInfo if objectInfo not present.
+ * @param pConnect
+ * @param key
+ * @returns the value of key
+ */
+export const getResolvedConstantValue = (pConnect: typeof PConnect, key: string) => {
+  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
+};

package/lib/helpers/simpleTableHelpers.ts

@@ -89,6 +89,51 @@ export const getApiContext = (processedData, pConnect, reorderCB) => {
   };
 };
 
+const PRIMARY_FIELDS = 'pyPrimaryFields';
+const SUPPORTED_FIELD_TYPES = [
+  'Address',
+  'TextArea',
+  'TextInput',
+  'Phone',
+  'Email',
+  'Time',
+  'URL',
+  'Percentage',
+  'Integer',
+  'Decimal',
+  'Date',
+  'DateTime',
+  'Currency',
+  'Checkbox',
+  'Dropdown',
+  'AutoComplete',
+  'UserReference',
+  'RichText'
+];
+
+export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
+  let primaryFields: any = [];
+  let configFields: any = [];
+
+  if (primaryFieldsViewIndex > -1) {
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    if (Array.isArray(primaryFieldVMD)) {
+      primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    } else if (primaryFieldVMD?.classID === contextClass) {
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    }
+
+    if (primaryFields.length) {
+      primaryFields = primaryFields.filter(primaryField => SUPPORTED_FIELD_TYPES.includes(primaryField.type));
+    }
+  }
+
+  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  // filter duplicate fields after combining raw fields and primary fields
+  return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
+};
+
 export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, name, propertyLabel, isDataObject, parameters) => {
   return {
     name,
@@ -126,11 +171,80 @@ export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, nam
   };
 };
 
-export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+export function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+/**
+ * [getFieldLabel]
+ * Description - A utility that returns resolved field label for "@FL" annotation i.e from data model.
+ * @param {Object} fieldConfig
+ * @returns {string} resolved label string
+ *
+ * example:
+ * fieldConfig = {label: "@FL .pyID", classID: "TestCase-Work"};
+ * return "Case ID"
+ */
+export function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+  return fieldLabel;
+}
+
+export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
+  const labelsOfFields: any = [];
+  const { columnsRawConfig = [] } = options;
+  fields.forEach((field, idx) => {
+    const rawColumnConfig = columnsRawConfig[idx]?.config;
+    if (field.config.value === PRIMARY_FIELDS) {
+      labelsOfFields.push('');
+    } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
+      labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
+    } else {
+      labelsOfFields.push(field.config.label || field.config.caption);
+    }
+  });
+
+  if (primaryFieldsViewIndex > -1) {
+    const totalPrimaryFieldsColumns = configFields.length - fields.length + 1;
+    if (totalPrimaryFieldsColumns) {
+      const primaryFieldLabels: any = [];
+      for (let i = primaryFieldsViewIndex; i < primaryFieldsViewIndex + totalPrimaryFieldsColumns; i += 1) {
+        let label = configFields[i].config?.label;
+        if (isFLProperty(label)) {
+          label = getFieldLabel(configFields[i].config);
+        } else if (label.startsWith('@')) {
+          label = label.substring(3);
+        }
+        if (pConnect) {
+          label = pConnect.getLocalizedValue(label);
+        }
+        primaryFieldLabels.push(label);
+      }
+      labelsOfFields.splice(primaryFieldsViewIndex, 1, ...primaryFieldLabels);
+    } else {
+      labelsOfFields.splice(primaryFieldsViewIndex, 1);
+    }
+  }
+  return labelsOfFields;
+};
+
+export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+  const { primaryFieldsViewIndex, fields } = options;
+
+  // get resolved field labels for primary fields raw config included in configFields
+  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
+  });
+
   const fieldDefs = configFields.map((field, index) => {
     return {
       type: 'text',
-      label: fields[index].config.label || fields[index].config.caption,
+      label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
       name: field.config.value.substr(4),
@@ -213,7 +327,7 @@ export function createPConnect(contextName, referenceList, pageReference): any {
   };
 
   // create PConnect object
-  const config = { meta: {}, options };
+  const config: any = { meta: {}, options };
   const { getPConnect } = PCore.createPConnect(config);
 
   return getPConnect();
@@ -231,11 +345,10 @@ export const filterData = filterByColumns => {
           case 'Date':
           case 'DateTime':
           case 'Time':
-            value = (item[filterObj.ref] !== null ?? item[filterObj.ref] !== '') ? Utils.getSeconds(item[filterObj.ref]) : null;
+            value = item[filterObj.ref] !== null || item[filterObj.ref] !== '' ? Utils.getSeconds(item[filterObj.ref]) : null;
             filterValue =
               filterObj.containsFilterValue !== null && filterObj.containsFilterValue !== '' ? Utils.getSeconds(filterObj.containsFilterValue) : null;
 
-            // eslint-disable-next-line sonarjs/no-nested-switch
             switch (filterObj.containsFilter) {
               case 'notequal':
                 // becasue filterValue is in minutes, need to have a range of less than 60 secons
@@ -302,7 +415,6 @@ export const filterData = filterByColumns => {
             value = item[filterObj.ref].toLowerCase();
             filterValue = filterObj.containsFilterValue.toLowerCase();
 
-            // eslint-disable-next-line sonarjs/no-nested-switch
             switch (filterObj.containsFilter) {
               case 'contains':
                 if (value.indexOf(filterValue) < 0) {

package/lib/helpers/utils.ts

@@ -48,7 +48,6 @@ export class Utils {
           // eslint-disable-next-line no-case-declarations
           const dataPage = configProps.datasource;
           if (typeof dataPage === 'string' && dataObject[dataPage]) {
-            // eslint-disable-next-line no-alert
             alert('need to handle data page');
           } else {
             let listSourceItems = configProps.listOutput;
@@ -337,6 +336,14 @@ export class Utils {
   static isObject(objValue) {
     return objValue && typeof objValue === 'object' && objValue.constructor === Object;
   }
+
+  static getMappedKey(key) {
+    const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+    if (!mappedKey) {
+      return key;
+    }
+    return mappedKey;
+  }
 }
 
 export default Utils;

package/lib/helpers/versionHelpers.ts

@@ -10,6 +10,5 @@ export const sdkVersion = '8.7';
 export function compareSdkPCoreVersions() {
   // const theConstellationVersion = PCore.getPCoreVersion();
 
-  // eslint-disable-next-line no-console
   console.warn(`Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`);
 }

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,6 +1,6 @@
 import makeStyles from '@mui/styles/makeStyles';
 import Button from '@mui/material/Button';
-import { Grid, Divider } from '@mui/material';
+import { Grid2, Divider } from '@mui/material';
 
 // ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
 interface ActionButtonsProps {
@@ -10,13 +10,18 @@ interface ActionButtonsProps {
   onButtonPress: any;
 }
 
-const useStyles = makeStyles((/* theme */) => ({
-  button: {
-    padding: '0px 5px'
-  },
+const useStyles = makeStyles(theme => ({
   divider: {
     marginTop: '10px',
     marginBottom: '10px'
+  },
+  secondaryButton: {
+    backgroundColor: theme.actionButtons.secondary.backgroundColor,
+    color: theme.actionButtons.secondary.color
+  },
+  primaryButton: {
+    backgroundColor: theme.actionButtons.primary.backgroundColor,
+    color: theme.actionButtons.primary.color
   }
 }));
 
@@ -33,42 +38,44 @@ export default function ActionButtons(props: ActionButtonsProps) {
   return (
     <>
       <Divider className={classes.divider} />
-      <Grid container spacing={4} justifyContent='space-between'>
-        <Grid item>
-          <Grid container spacing={1}>
+      <Grid2 container spacing={4} justifyContent='space-between'>
+        <Grid2>
+          <Grid2 container spacing={1}>
             {arSecondaryButtons.map(sButton => (
-              <Grid item key={sButton.name}>
+              <Grid2 key={sButton.name}>
                 <Button
-                  variant='contained'
+                  className={classes.secondaryButton}
                   color='secondary'
+                  variant='contained'
                   onClick={() => {
                     _onButtonPress(sButton.jsAction, 'secondary');
                   }}
                 >
                   {localizedVal(sButton.name, localeCategory)}
                 </Button>
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
-        </Grid>
-        <Grid item>
-          <Grid container spacing={1}>
+          </Grid2>
+        </Grid2>
+        <Grid2>
+          <Grid2 container spacing={1}>
             {arMainButtons.map(mButton => (
-              <Grid item key={mButton.name}>
+              <Grid2 key={mButton.name}>
                 <Button
-                  variant='contained'
+                  className={classes.primaryButton}
                   color='primary'
+                  variant='contained'
                   onClick={() => {
                     _onButtonPress(mButton.jsAction, 'primary');
                   }}
                 >
                   {localizedVal(mButton.name, localeCategory)}
                 </Button>
-              </Grid>
+              </Grid2>
             ))}
-          </Grid>
-        </Grid>
-      </Grid>
+          </Grid2>
+        </Grid2>
+      </Grid2>
     </>
   );
 }

package/lib/infra/Assignment/Assignment.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useState } from 'react';
 import Snackbar from '@mui/material/Snackbar';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
@@ -6,14 +6,14 @@ import CloseIcon from '@mui/icons-material/Close';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { useFocusFirstField, useScrolltoTop } from '@pega/react-sdk-components/lib/hooks';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AssignmentProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   itemKey: string;
   isInModal: boolean;
   banners: any[];
-  // eslint-disable-next-line react/no-unused-prop-types
+
   actionButtons: any[];
 }
 
@@ -33,8 +33,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'Assignment';
-  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -76,7 +76,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   function getStepsInfo(steps, formedSteps: any = []) {
     steps.forEach(step => {
       if (step.name) {
-        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+        step.name = localizationService.getLocalizedText(step.name);
       }
       if (step.steps) {
         formedSteps = getStepsInfo(step.steps, formedSteps);
@@ -97,43 +97,50 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+      const caseInfo = oData?.caseInfo;
+      if (!oWorkData?.caseInfo || oWorkData.caseInfo.assignments === null || !caseInfo) {
+        return;
+      }
 
-      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData?.caseInfo;
+      // Set action buttons
+      if (caseInfo.actionButtons) {
+        setActionButtons(caseInfo.actionButtons);
+      }
 
-        if (oCaseInfo && oCaseInfo.actionButtons) {
-          setActionButtons(oCaseInfo.actionButtons);
-        }
+      // Handle navigation setup
+      const navigation = caseInfo.navigation;
+      if (!navigation) {
+        setHasNavigation(false);
+        return;
+      }
 
-        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
-          setHasNavigation(true);
+      const isStandardTemplate = navigation.template?.toLowerCase() === 'standard';
+      const hasSingleStep = navigation.steps?.length === 1;
+      const shouldHideNavigation = isStandardTemplate || hasSingleStep;
 
-          if (
-            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
-            oCaseInfo?.navigation?.steps?.length === 1
-          ) {
-            setHasNavigation(false);
-          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
-            setIsVertical(true);
-          } else {
-            setIsVertical(false);
-          }
+      setHasNavigation(!shouldHideNavigation);
 
-          if (oCaseInfo?.navigation?.steps) {
-            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
-            const formedSteps = getStepsInfo(steps);
-            setArNavigationSteps(formedSteps);
-          }
+      if (shouldHideNavigation) {
+        return;
+      }
 
-          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
-        }
+      // set vertical navigation
+      const isVerticalTemplate = navigation.template?.toLowerCase() === 'vertical';
+      setIsVertical(isVerticalTemplate);
+
+      if (navigation.steps) {
+        const steps = JSON.parse(JSON.stringify(navigation.steps));
+        const formedSteps = getStepsInfo(steps);
+        setArNavigationSteps(formedSteps);
       }
+
+      setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
     }
   }, [children]);
 
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
-    // eslint-disable-next-line no-console
+
     console.error(theMessage);
     setSnackbarMessage(message);
     setShowSnackbar(true);
@@ -147,7 +154,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   function onSaveActionSuccess(data) {
-    actionsAPI.cancelAssignment(itemKey).then(() => {
+    actionsAPI.cancelAssignment(itemKey, false).then(() => {
       PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
     });
   }
@@ -174,7 +181,6 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
           savePromise
             .then(() => {
-              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
@@ -189,10 +195,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           // check if create stage (modal)
           const { PUB_SUB_EVENTS } = PCore.getConstants();
           const { publish } = PCore.getPubSubUtils();
-          // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
           const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
           const isLocalAction =
-            // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
             thePConn.getCaseInfo().isLocalAction() ||
             (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
           if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
@@ -206,7 +210,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
                 showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
               });
           } else {
-            const cancelPromise = cancelAssignment(itemKey);
+            const cancelPromise = cancelAssignment(itemKey, false);
 
             cancelPromise
               .then(data => {
@@ -275,7 +279,6 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   // expected format of refreshConditions : [{field: ".Name", event: "Changes"}]
-  // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
   const refreshConditions = thePConn.getCaseInfo()?.getActionRefreshConditions();
   const context = thePConn.getContextName();
   const pageReference = thePConn.getPageReference();

package/lib/infra/AssignmentCard/AssignmentCard.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { type PropsWithChildren, useEffect, useState } from 'react';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 interface AssignmentCardProps extends PConnProps {