@pega/react-sdk-overrides 24.2.10 → 25.1.10

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

@@ -1,5 +1,4 @@
-/* eslint-disable no-nested-ternary */
-import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -28,8 +27,9 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 interface SimpleTableManualProps extends PConnProps {
@@ -52,14 +52,29 @@ interface SimpleTableManualProps extends PConnProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
+  validatemessage?: string;
+  required?: boolean;
 }
 
 const useStyles = makeStyles((/* theme */) => ({
   label: {
     margin: '8px'
   },
+  tableLabel: {
+    '&::after': {
+      display: 'inline',
+      content: '" *"',
+      verticalAlign: 'top',
+      color: 'var(--app-error-color)'
+    }
+  },
+  message: {
+    margin: '8px',
+    color: 'var(--app-error-color)',
+    fontSize: '14px'
+  },
   header: {
-    background: '#f5f5f5'
+    background: 'var(--table-header-background)'
   },
   tableCell: {
     borderRight: '1px solid lightgray',
@@ -110,7 +125,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     editModeConfig,
     displayMode,
     useSeparateViewForEdit,
-    viewForEditModal
+    viewForEditModal,
+    required,
+    validatemessage
   } = props;
   const pConn = getPConnect();
   const [rowData, setRowData] = useState([]);
@@ -130,7 +147,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState<string>('notequal');
   const [displayDialogDateValue, setDisplayDialogDateValue] = useState<string>('');
   const selectedRowIndex: any = useRef(null);
-
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'SimpleTable';
   const parameters = fieldMetadata?.datasource?.parameters;
   const { referenceListStr } = getContext(getPConnect());
   const label = labelProp || propertyLabel;
@@ -145,6 +163,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.
@@ -176,15 +195,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   });
 
   useEffect(() => {
-    if (editableMode && !allowEditingInModal) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      buildElementsForTable();
-    }
-  }, [referenceList.length]);
-
-  useEffect(() => {
+    buildElementsForTable();
     if (readOnlyMode || allowEditingInModal) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       generateRowsData();
     }
   }, [referenceList]);
@@ -195,19 +207,21 @@ 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 = buildFieldsForTable(rawFields, getPConnect(), showDeleteButton, {
+    primaryFieldsViewIndex,
+    fields: resolvedFields
+  });
 
   useLayoutEffect(() => {
     if (allowEditingInModal) {
       getPConnect()
         .getListActions()
-        // @ts-ignore - An argument for 'uniqueField' was not provided.
         .initDefaultPageInstructions(
           getPConnect().getReferenceList(),
           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());
     }
   }, []);
@@ -234,7 +248,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;
@@ -265,7 +279,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           setRowData(data);
         })
         .catch(e => {
-          // eslint-disable-next-line no-console
           console.log(e);
         });
     } else {
@@ -274,7 +287,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);
@@ -306,9 +319,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (allowEditingInModal && defaultView) {
       pConn
         .getActionsApi()
+        // @ts-expect-error
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
     } else {
-      // @ts-ignore - An argument for 'pageRef' was not provided.
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
 
@@ -322,6 +335,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (typeof selectedRowIndex.current === 'number') {
       pConn
         .getActionsApi()
+        // @ts-expect-error
         .openEmbeddedDataModal(
           bUseSeparateViewForEdit ? editView : defaultView,
           pConn,
@@ -334,12 +348,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const deleteRecord = () => {
     setEditAnchorEl(null);
-    // @ts-ignore - An argument for 'pageRef' was not provided.
     pConn.getListActions().deleteEntry(selectedRowIndex.current);
   };
 
   const deleteRecordFromInlineEditable = (index: number) => {
-    // @ts-ignore - An argument for 'pageRef' was not provided.
     pConn.getListActions().deleteEntry(index);
   };
 
@@ -349,23 +361,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: '' } };
-        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);
     });
@@ -397,23 +411,27 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   type Order = 'asc' | 'desc';
 
-  function getComparator<Key extends keyof any>(
-    theOrder: Order,
-    orderedBy: Key
-  ): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
-    return theOrder === 'desc' ? (a, b) => descendingComparator(a, b, orderedBy) : (a, b) => -descendingComparator(a, b, orderedBy);
+  interface Comparator<T> {
+    (a: T, b: T): number;
+  }
+
+  function getComparator<Key extends keyof any, T extends Record<Key, any>>(theOrder: Order, orderedBy: Key): Comparator<T> {
+    return theOrder === 'desc' ? (a: T, b: T) => descendingComparator<T>(a, b, orderedBy) : (a: T, b: T) => -descendingComparator<T>(a, b, orderedBy);
   }
 
   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];
     });
 
-    return stabilizedThis.map(el => el[0]);
+    const newElements = new Array(stabilizedThis.length);
+    stabilizedThis.forEach((el, index) => {
+      newElements[index] = elements[el[1]];
+    });
+    return newElements;
   }
 
   function _menuClick(event, columnId: string, columnType: string, labelValue: string) {
@@ -558,7 +576,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;
         }
@@ -583,19 +600,24 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     <>
       <TableContainer component={Paper} style={{ margin: '4px 0px' }} id='simple-table-manual'>
         {propsToUse.label && (
-          <h3 className={classes.label}>
+          <h3 className={`${classes.label} ${required ? classes.tableLabel : ''}`}>
             {propsToUse.label} {results()}
           </h3>
         )}
+        {validatemessage && <div className={classes.message}>{validatemessage}</div>}
         <Table>
           <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 ? (
-                      <div>
+                    {(readOnlyMode || allowEditingInModal) && field.cellRenderer !== 'DeleteIcon' ? (
+                      <div style={{ display: 'flex' }}>
                         <TableSortLabel
+                          style={{ width: '75%' }}
                           active={orderBy === displayedColumns[index]}
                           direction={orderBy === displayedColumns[index] ? order : 'asc'}
                           onClick={createSortHandler(displayedColumns[index])}
@@ -607,8 +629,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                           ) : null}
                         </TableSortLabel>
                         <MoreIcon
+                          style={{ cursor: 'pointer', zIndex: 1000 }}
                           id='menu-icon'
-                          className={classes.moreIcon}
                           onClick={event => {
                             _menuClick(event, field.name, field.meta.type, field.label);
                           }}
@@ -624,6 +646,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           </TableHead>
           <TableBody>
             {editableMode &&
+              !allowEditingInModal &&
               elements.map((row: any, index) => {
                 const theKey = `row-${index}`;
                 return (
@@ -659,55 +682,47 @@ 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}>
-                      {displayedColumns.map(colKey => {
+                      {row.map((item, childIndex) => {
+                        const theColKey = displayedColumns[childIndex];
                         return (
-                          <TableCell key={colKey} className={classes.tableCell}>
-                            {showDeleteButton && colKey === 'DeleteIcon' ? (
-                              <div>
-                                <MoreIcon
-                                  id='table-edit-menu-icon'
-                                  className={classes.moreIcon}
-                                  onClick={event => {
-                                    editMenuClick(event, index);
-                                  }}
-                                />
-                                <Menu id='table-edit-menu' anchorEl={editAnchorEl} keepMounted open={Boolean(editAnchorEl)} onClose={_menuClose}>
-                                  <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
-                                  <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
-                                </Menu>
-                              </div>
-                            ) : typeof row[colKey] === 'boolean' && !row[colKey] ? (
-                              'False'
-                            ) : typeof row[colKey] === 'boolean' && row[colKey] ? (
-                              'True'
-                            ) : (
-                              row[colKey] || '---'
-                            )}
+                          <TableCell key={theColKey} className={classes.tableCell}>
+                            {item}
                           </TableCell>
                         );
                       })}
+                      {showDeleteButton && (
+                        <TableCell key='DeleteIcon' className={classes.tableCell}>
+                          <div>
+                            <MoreIcon
+                              id='table-edit-menu-icon'
+                              className={classes.moreIcon}
+                              onClick={event => {
+                                editMenuClick(event, index);
+                              }}
+                            />
+                            <Menu id='table-edit-menu' anchorEl={editAnchorEl} keepMounted open={Boolean(editAnchorEl)} onClose={_menuClose}>
+                              <MenuItem onClick={() => editRecord()}>Edit</MenuItem>
+                              <MenuItem onClick={() => deleteRecord()}>Delete</MenuItem>
+                            </Menu>
+                          </div>
+                        </TableCell>
+                      )}
                     </TableRow>
                   );
                 })}
           </TableBody>
         </Table>
-        {readOnlyMode && rowData && rowData.length === 0 && (
-          <div className='no-records' id='no-records'>
-            No records found.
-          </div>
-        )}
-        {editableMode && referenceList && referenceList.length === 0 && (
+        {((readOnlyMode && (!rowData || rowData?.length === 0)) || (editableMode && (!referenceList || referenceList?.length === 0))) && (
           <div className='no-records' id='no-records'>
-            No records found.
+            {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
           <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
-            + Add
+            + {localizedVal('Add', localeCategory)}
           </Link>
         </div>
       )}

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
@@ -57,10 +57,8 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
 
   // Need to get this written so typedefs work
   const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
-    ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'.
-      pConn.getFieldMetadata(`@P .${referenceProp}`)
-    : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'.
-      pConn.getCurrentPageFieldMetadata(contextPageReference);
+    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
+    : pConn.getCurrentPageFieldMetadata(contextPageReference);
 
   const compositeKeys: any[] = [];
   Object.values(fieldParameters).forEach((param: any) => {

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