@pega/react-sdk-overrides 24.2.11 → 25.1.11

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -28,9 +28,10 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { buildFieldsForTable, filterData, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { buildFieldsForTable, filterData, getConfigFields, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import { initializeColumns } from '@pega/react-sdk-components/lib/components/template/ListView/utils';
 
 interface SimpleTableManualProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -74,7 +75,7 @@ const useStyles = makeStyles((/* theme */) => ({
     fontSize: '14px'
   },
   header: {
-    background: '#f5f5f5'
+    background: 'var(--table-header-background)'
   },
   tableCell: {
     borderRight: '1px solid lightgray',
@@ -163,6 +164,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
   const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
+  const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
   // NOTE: props has each child.config with datasource and value undefined
   //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
   //  We need to use the prop name as the "glue" to tie the table dataSource, displayColumns and data together.
@@ -189,15 +191,15 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
 
+  const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
+
   const fieldsWithPropNames = rawFields.map((field, index) => {
     return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
   });
 
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     buildElementsForTable();
     if (readOnlyMode || allowEditingInModal) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       generateRowsData();
     }
   }, [referenceList]);
@@ -208,7 +210,15 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   //  Constellation DX Components do). It will also have the "label", and "meta" contains the original,
   //  unchanged config info. For now, much of the info here is carried over from
   //  Constellation DX Components.
-  const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
+
+  const fieldDefs = useMemo(
+    () =>
+      isDisplayModeEnabled || readOnlyMode
+        ? initializeColumns(configFields, undefined)
+        : // For inline edit table
+          buildFieldsForTable(rawFields, getPConnect(), showDeleteButton, { primaryFieldsViewIndex, fields: resolvedFields }),
+    []
+  );
 
   useLayoutEffect(() => {
     if (allowEditingInModal) {
@@ -219,7 +229,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           fieldDefs.filter(item => item.name).map(item => item.name)
         );
     } else {
-      // @ts-ignore - An argument for 'fields' was not provided
+      // @ts-expect-error - An argument for 'fields' was not provided
       getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
     }
   }, []);
@@ -246,7 +256,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   // return the value that should be shown as the contents for the given row data
   //  of the given row field
-  function getRowValue(inRowData: Object, inColKey: string): any {
+  function getRowValue(inRowData: object, inColKey: string): any {
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey?.split('.');
     let valBuilder = inRowData;
@@ -277,7 +287,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           setRowData(data);
         })
         .catch(e => {
-          // eslint-disable-next-line no-console
           console.log(e);
         });
     } else {
@@ -286,7 +295,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       //  we're using as the table's dataSource
       const data: any = [];
       for (const row of referenceList) {
-        const dataForRow: Object = {};
+        const dataForRow: object = {};
         for (const col of displayedColumns) {
           const colKey: string = col;
           const theVal = getRowValue(row, colKey);
@@ -318,7 +327,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (allowEditingInModal && defaultView) {
       pConn
         .getActionsApi()
-        // @ts-ignore
+        // @ts-expect-error
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
     } else {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
@@ -334,7 +343,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (typeof selectedRowIndex.current === 'number') {
       pConn
         .getActionsApi()
-        // @ts-ignore
+        // @ts-expect-error
         .openEmbeddedDataModal(
           bUseSeparateViewForEdit ? editView : defaultView,
           pConn,
@@ -360,23 +369,25 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       const data: any = [];
       rawFields.forEach(item => {
         // removing label field from config to hide title in the table cell
-        item = { ...item, config: { ...item.config, label: '', displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined } };
-        const referenceListData = getReferenceList(pConn);
-        const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage
-          ? `${referenceListData}[${index}]`
-          : `${pConn.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
-        const config = {
-          meta: item,
-          options: {
-            context,
-            pageReference: pageReferenceValue,
-            referenceList: referenceListData,
-            hasForm: true
-          }
-        };
-        const view = PCore.createPConnect(config);
-        data.push(createElement(createPConnectComponent(), view));
+        if (!item.config.hide) {
+          item = { ...item, config: { ...item.config, label: '', displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined } };
+          const referenceListData = getReferenceList(pConn);
+          const isDatapage = referenceListData.startsWith('D_');
+          const pageReferenceValue = isDatapage
+            ? `${referenceListData}[${index}]`
+            : `${pConn.getPageReference()}${referenceListData.substring(referenceListData.lastIndexOf('.'))}[${index}]`;
+          const config = {
+            meta: item,
+            options: {
+              context,
+              pageReference: pageReferenceValue,
+              referenceList: referenceListData,
+              hasForm: true
+            }
+          };
+          const view = PCore.createPConnect(config);
+          data.push(createElement(createPConnectComponent(), view));
+        }
       });
       eleData.push(data);
     });
@@ -419,7 +430,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
     const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
     stabilizedThis.sort((a, b) => {
-      // eslint-disable-next-line @typescript-eslint/no-shadow
       const order = comparator(a[0], b[0]);
       if (order !== 0) return order;
       return a[1] - b[1];
@@ -574,7 +584,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   function _showFilteredIcon(columnId) {
     for (const filterObj of filterByColumns) {
       if (filterObj.ref === columnId) {
-        // eslint-disable-next-line sonarjs/prefer-single-boolean-return
         if (filterObj.containsFilterValue !== '') {
           return true;
         }
@@ -608,6 +617,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           <TableHead className={classes.header}>
             <TableRow>
               {fieldDefs.map((field: any, index) => {
+                if (field?.meta?.config?.hide) {
+                  return null; // Skip rendering if hide = true
+                }
                 return (
                   <TableCell key={`head-${displayedColumns[index]}`} className={classes.tableCell}>
                     {(readOnlyMode || allowEditingInModal) && field.cellRenderer !== 'DeleteIcon' ? (
@@ -678,7 +690,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                 .slice(0)
                 .map((row, index) => {
                   return (
-                    // eslint-disable-next-line react/no-array-index-key
                     <TableRow key={index}>
                       {row.map((item, childIndex) => {
                         const theColKey = displayedColumns[childIndex];
@@ -712,7 +723,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         </Table>
         {((readOnlyMode && (!rowData || rowData?.length === 0)) || (editableMode && (!referenceList || referenceList?.length === 0))) && (
           <div className='no-records' id='no-records'>
-            {getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
+            {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>

package/lib/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,6 +1,6 @@
 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 SimpleTableSelectProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/SimpleTable/SimpleTableSelectReadonly/SimpleTableSelectReadonly.tsx

@@ -0,0 +1,179 @@
+import { createElement, Fragment, useState } from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { SIMPLE_TABLE_MANUAL_READONLY } from '@pega/react-sdk-components/lib/components/field/ObjectReference/utils';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SimpleTableSelectReadonlyProps extends PConnProps {
+  label?: string;
+  referenceList: object[] | string;
+  readonlyContextList?: object[];
+  primaryField?: string;
+  referenceType?: string;
+  selectionKey?: string;
+  selectionList?: string;
+  hideLabel?: boolean;
+  variant?: string;
+  displayAs?: string;
+  displayMode?: string;
+}
+
+export default function SimpleTableSelectReadonly(props: SimpleTableSelectReadonlyProps) {
+  const {
+    label = '',
+    getPConnect,
+    readonlyContextList = [],
+    primaryField = '',
+    referenceType = '',
+    selectionKey = '',
+    selectionList = '',
+    hideLabel = false,
+    displayAs = 'readonly',
+    displayMode
+  } = props;
+
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const { DATA, CASE } = PCore.getConstants().RESOURCE_TYPES;
+  const pConn = getPConnect();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'SimpleTableSelectReadOnly';
+  const PComponent = createPConnectComponent();
+
+  const openModal = () => {
+    const rawConfig = (getPConnect().getRawMetadata() as any).config;
+    const rawFields = rawConfig?.presets?.[0].children?.[0]?.children || [];
+
+    const caseFields = rawFields
+      .filter((field: any) => field.config.value.includes(`@P .${Utils.getMappedKey('pyID')}`) || field.config.value.includes(`@P ${primaryField}`))
+      .map((field: any) => field.config.value);
+
+    const dataFields = rawFields.filter((field: any) => field.config.value.includes(`@P ${primaryField}`)).map((field: any) => field.config.value);
+
+    const defaultFields: any[] = rawConfig?.detailsDisplay || [];
+    if (defaultFields?.length === 2 && defaultFields[0].config.value === defaultFields[1].config.value) {
+      defaultFields.splice(0, 1);
+    }
+    defaultFields.forEach((field: any) => {
+      if (
+        (referenceType.toUpperCase() === CASE && !caseFields.includes(field?.config?.value)) ||
+        (referenceType.toUpperCase() === DATA && !dataFields.includes(field?.config?.value))
+      ) {
+        (getPConnect().getRawMetadata() as any).config?.presets?.[0].children?.[0]?.children?.unshift(field);
+      }
+    });
+
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
+  const renderModal = () => {
+    const SimpleTableManual = getComponentFromMap('SimpleTableManual');
+
+    let readonlyContextObject: { referenceList?: object[] } | undefined;
+    if (typeof props.referenceList === 'string') {
+      readonlyContextObject = { referenceList: readonlyContextList };
+    }
+
+    return (
+      <Dialog open={modalOpen} onClose={closeModal} maxWidth='md' fullWidth>
+        <DialogTitle>{label}</DialogTitle>
+        <DialogContent>
+          <SimpleTableManual {...props} {...readonlyContextObject} classId={SIMPLE_TABLE_MANUAL_READONLY} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeModal} variant='contained'>
+            {localizedVal('Close', localeCategory)}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };
+
+  let displayComp: any;
+
+  if (readonlyContextList && readonlyContextList.length > 0) {
+    const listLength = readonlyContextList.length;
+    const filteredList = ['combobox', 'checkboxgroup'].includes(displayAs) ? readonlyContextList : readonlyContextList.slice(0, 5);
+
+    displayComp = (
+      <div>
+        {filteredList.map((child: any, index: number) => {
+          const selectionKeyProp = selectionKey.substring(1);
+          const primaryFieldProp = primaryField?.substring(1);
+          const selectionListProp = selectionList?.substring(1);
+          const referenceLabel = child[primaryFieldProp] || '';
+
+          let resourcePayload = {};
+          let resourceParams = {};
+          let previewKey = '';
+
+          if (referenceType.toUpperCase() === CASE) {
+            previewKey = child[Utils.getMappedKey('pzInsKey')];
+            resourcePayload = { caseClassName: child.classID };
+            resourceParams = { workID: child[selectionKeyProp] };
+          }
+
+          const metadata = {
+            type: 'SemanticLink',
+            config: {
+              text: referenceLabel,
+              resourceParams,
+              resourcePayload,
+              previewKey,
+              referenceType
+            }
+          };
+
+          const childPConnectConfig = PCore.createPConnect({
+            meta: metadata,
+            options: {
+              context: pConn.getContextName(),
+              pageReference: `${pConn.getPageReference()}.${selectionListProp}[${index}]`
+            }
+          });
+
+          return (
+            <Fragment key={child[selectionKeyProp]}>
+              {createElement(PComponent, { ...childPConnectConfig })}
+              {index + 1 !== filteredList.length && ', '}
+            </Fragment>
+          );
+        })}
+        {listLength > 5 && !['combobox', 'checkboxgroup'].includes(displayAs) && (
+          <Link component='button' onClick={openModal} underline='hover'>
+            ({listLength} {localizedVal('Total', localeCategory)})
+          </Link>
+        )}
+      </div>
+    );
+  }
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return displayComp ?? <Typography variant='body2'>---</Typography>;
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '0.5rem' }}>
+      {!hideLabel && label && (
+        <Typography variant='body2' color='text.secondary'>
+          {label}
+        </Typography>
+      )}
+      {displayComp}
+      {renderModal()}
+    </div>
+  );
+}

package/lib/template/SimpleTable/SimpleTableSelectReadonly/index.tsx

@@ -0,0 +1 @@
+export { default } from './SimpleTableSelectReadonly';

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;
 }