@pega/react-sdk-overrides 24.2.11 → 25.1.10

package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,4 +1,5 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { FormControl, FormLabel } from '@mui/material';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SingleReferenceReadOnlyProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -59,5 +60,12 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
     {}
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
-  return <>{component}</>;
+  return (
+    <>
+      <FormControl variant='standard' sx={{ display: 'flex', flexDirection: 'row' }}>
+        <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
+        {component}
+      </FormControl>
+    </>
+  );
 }

package/lib/template/SubTabs/SubTabs.tsx

@@ -1,9 +1,9 @@
-import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Children, type PropsWithChildren, useEffect, useState } from 'react';
 import { Tab, Tabs } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
 
 import { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SubTabsProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/SubTabs/tabUtils.ts

@@ -19,7 +19,8 @@ export const getVisibleTabs = (allTabs, uuid) => {
         const { name: viewName, deferLoadId = `${viewName}_${uuid}_${index}` } = config;
         child.getPConnect().registerAdditionalProps({
           deferLoadId,
-          isChildDeferLoad: true
+          isChildDeferLoad: true,
+          lastUpdateCaseTime: '@P caseInfo.lastUpdateTime'
         });
       }
       index += 1;
@@ -66,3 +67,119 @@ export const tabClick = (id, availableTabs, currentTabId, setCurrentTabId, tabIt
   PCore.getDeferLoadManager().activate(activeId, nextPConn?.getContextName());
   PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn?.getContextName());
 };
+
+export const searchtabsClick = (id, mainTabs, currentTabId, setCurrentTabId) => {
+  const currentTab = mainTabs.find(item => item.id === currentTabId && item.visibility());
+  const currentPConn = currentTab?.getPConnect();
+  const { deferLoadId } = currentPConn?.getConfigProps() ?? {};
+  PCore.getDeferLoadManager().deactivate(deferLoadId, currentPConn.getContextName());
+
+  setCurrentTabId(id);
+  const nextActiveTab = mainTabs.find(item => item.id === id && item.visibility());
+  if (mainTabs && nextActiveTab?.content === null) {
+    nextActiveTab.content = nextActiveTab.getPConnect().getComponent();
+  }
+
+  const nextPConn = nextActiveTab.getPConnect();
+  const { deferLoadId: activeId } = nextPConn.getConfigProps();
+  PCore.getDeferLoadManager().activate(activeId, nextPConn.getContextName());
+  PCore.getDeferLoadManager().refreshComponent(activeId, nextPConn.getContextName());
+};
+
+export const getTabLabel = tabPConnect => {
+  const config = tabPConnect.getConfigProps();
+
+  const label = config.inheritedProps?.find(obj => obj.prop === 'label')?.value;
+
+  if (label) {
+    return label;
+  }
+  if (config.label) {
+    return config.label;
+  }
+
+  if (tabPConnect.getReferencedView()?.config?.label) {
+    return tabPConnect.getReferencedView()?.config?.label;
+  }
+
+  return PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+};
+
+export const getActiveTabId = (mainTabs, currentTabId) => {
+  let firstVisibleTabId = null;
+  let updatedActiveId = currentTabId;
+  let isCurrentTabFound = false;
+
+  if (!mainTabs?.length) {
+    return updatedActiveId;
+  }
+
+  for (let i = 0; i < mainTabs.length; i += 1) {
+    const tab = mainTabs[i];
+    const tabConfig = tab.getPConnect().getConfigProps();
+    const tabId = tab?.id || `${tab.getPConnect().viewName}-${tabConfig.name || getTabLabel(tab.getPConnect())}-${i}`;
+    const isTabVisible = !Object.hasOwn(tabConfig, 'visibility') || tabConfig.visibility === true;
+    if (isTabVisible && !firstVisibleTabId) {
+      firstVisibleTabId = tabId;
+      if (isCurrentTabFound) {
+        updatedActiveId = firstVisibleTabId;
+        break;
+      }
+    }
+    if (tabId === currentTabId) {
+      isCurrentTabFound = true;
+      if (isTabVisible) {
+        break;
+      } else if (firstVisibleTabId) {
+        updatedActiveId = firstVisibleTabId;
+        break;
+      }
+    }
+  }
+  return updatedActiveId;
+};
+/**
+ *
+ * @param {*} deferLoadedTabs list of deferLoadedTabs
+ * @param {string} tabViewName (optional) if provided, tabId of the given tabView will be returned
+ * @returns {string} a tab id is returned
+ */
+export const getFirstVisibleTabId = (deferLoadedTabs, tabViewName) => {
+  let tabIndex = 0;
+
+  const viewName = deferLoadedTabs?.props?.getPConnect()?.options?.viewName;
+
+  const deferTabsChildren = deferLoadedTabs.props.getPConnect().getChildren();
+  if (tabViewName) {
+    const firstVisibleTab = deferTabsChildren?.find((item, index) => {
+      const tabConfig = item.getPConnect().getConfigProps();
+      if (tabViewName === tabConfig.name) {
+        tabIndex = index;
+        return true;
+      }
+      return false;
+    });
+    const tabConfig = firstVisibleTab.getPConnect().getConfigProps();
+
+    return `${viewName}-${tabConfig.name || getTabLabel(firstVisibleTab.getPConnect())}-${tabIndex}`;
+  }
+
+  const firstVisibleTab = deferLoadedTabs.props
+    .getPConnect()
+    .getChildren()
+    ?.find((item, index) => {
+      const tabConfig = item.getPConnect().getConfigProps();
+      if (!('visibility' in tabConfig) || tabConfig.visibility === true) {
+        tabIndex = index;
+        return true;
+      }
+      return false;
+    });
+
+  if (!firstVisibleTab) {
+    return null;
+  }
+
+  const tabConfig = firstVisibleTab.getPConnect().getConfigProps();
+  return `${viewName}-${tabConfig.name || getTabLabel(firstVisibleTab.getPConnect())}-${tabIndex}`;
+};

package/lib/template/TwoColumn/TwoColumn/TwoColumn.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@mui/material';
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 
@@ -43,13 +42,13 @@ export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+    <Grid2 container spacing={1}>
+      <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
         {childrenToRender[0]}
-      </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
         {childrenToRender[1]}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/lib/template/TwoColumn/TwoColumnPage/TwoColumnPage.tsx

@@ -1,5 +1,5 @@
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/TwoColumn/TwoColumnTab/TwoColumnTab.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@mui/material';
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnTabProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -23,7 +23,6 @@ export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 
@@ -43,13 +42,13 @@ export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>
   bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+    <Grid2 container spacing={1}>
+      <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
         {childrenToRender[0]}
-      </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
         {childrenToRender[1]}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/lib/template/WideNarrow/WideNarrow/WideNarrow.tsx

@@ -1,16 +1,16 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   a: any;
   b: any;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   title?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   cols?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   icon?: string;
 }
 

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@mui/material/Grid';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface WideNarrowDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -36,7 +36,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
 
     return createElement(createPConnectComponent(), {
       ...theConfigObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     });
   });
@@ -66,21 +66,21 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
   return (
     <FieldGroup name={theName}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children?.map((child, i) => (
-          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/lib/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrowForm.css';
 
 interface WideNarrowFormProps extends PConnProps {

package/lib/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx

@@ -1,6 +1,6 @@
-import { Children, PropsWithChildren } from 'react';
+import { Children, type PropsWithChildren } 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';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface WideNarrowPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/WssNavBar/WssNavBar.css

@@ -1,5 +1,5 @@
 .link-style {
-  color: white !important;
+  color: var(--app-text-color) !important;
   text-transform: capitalize !important;
   font-size: 1rem !important;
 }

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -8,7 +8,7 @@ import { IconButton, Menu, MenuItem, Typography, Button } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import MenuIcon from '@mui/icons-material/Menu';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
 
 interface WssNavBarProps extends PConnProps {
@@ -17,10 +17,10 @@ interface WssNavBarProps extends PConnProps {
   navLinks: any[];
   operator: { currentUserInitials: string };
   navDisplayOptions: { alignment: string; position: string };
-  // eslint-disable-next-line react/no-unused-prop-types
+
   portalName: string;
   imageSrc: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   fullImageSrc: string;
   appName: any;
 }
@@ -36,10 +36,10 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   appListLogo: {
-    width: '3.6rem'
+    maxWidth: '100%',
+    height: '3rem'
   },
   appName: {
-    color: 'white',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(4),
     fontSize: '1.5rem'
@@ -85,7 +85,7 @@ export default function WssNavBar(props: WssNavBarProps) {
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
-        <Container maxWidth='xl'>
+        <Container maxWidth={false}>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />

package/lib/template/utils.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { isValidElement } from 'react';
+
+export function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityChecker?) {
+  const filterVisibleChildren = children => {
+    return children
+      ?.getPConnect()
+      ?.getChildren()
+      ?.filter(child => {
+        const configProps = child.getPConnect().getConfigProps();
+        const defaultVisibilityCn = !('visibility' in configProps) || configProps.visibility === true;
+        return defaultVisibilityCn && (portalSpecificVisibilityChecker?.(configProps) ?? true);
+      });
+  };
+  const convertChildrenToSummaryData = children => {
+    return children?.map(childItem => {
+      const childPConnData = childItem.getPConnect().resolveConfigProps(childItem.getPConnect().getRawMetadata());
+      return childPConnData;
+    });
+  };
+
+  const summaryFieldChildren = caseSummaryRegion.props
+    .getPConnect()
+    .getChildren()[0]
+    ?.getPConnect()
+    ?.getReferencedViewPConnect()
+    ?.getPConnect()
+    ?.getChildren();
+
+  const primarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 0
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[0]))
+      : undefined;
+  const secondarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 1
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[1]))
+      : undefined;
+
+  return {
+    primarySummaryFields,
+    secondarySummaryFields
+  };
+}
+
+export const filterUtilities = (utils: ReactNode) => {
+  let utilsMeta;
+  if (isValidElement(utils)) {
+    const pConnect = utils.props.getPConnect();
+    utilsMeta = pConnect.getRawMetadata?.();
+    if (!utilsMeta?.children?.length) return;
+    utilsMeta = {
+      ...utilsMeta,
+      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true)
+    };
+    return utilsMeta.children?.length ? pConnect.createComponent(utilsMeta) : undefined;
+  }
+  return utilsMeta;
+};

package/lib/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AppAnnouncementProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/widget/Attachment/Attachment.css

@@ -42,6 +42,10 @@
   flex-direction: row;
   padding: 0.25rem 0rem 0.25rem 0.25rem;
   margin-bottom: 0.5rem;
+  align-items: center;
+  border: 0.0625rem solid var(--utility-card-border-color);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
 }
 
 .psdk-utility-card-icon {
@@ -54,6 +58,7 @@
 .psdk-utility-card-svg-icon {
   width: 2.5rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-card-main {
@@ -71,14 +76,7 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
   display: inline-block;
-}
-
-.psdk-utility-card {
-  display: flex;
-  align-items: center;
-  border: 0.0625rem solid rgb(207, 207, 207);
-  border-radius: calc(0.25rem);
-  min-height: 3rem;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-button {