@pega/react-sdk-overrides 24.2.11 → 25.1.10

package/lib/template/ListView/hooks.ts

@@ -14,7 +14,6 @@ export default function useInit(props) {
     ref,
     showDynamicFields,
     isDataObject,
-    xRayUid,
     cosmosTableRef
   } = props;
   let { editing, selectionMode } = props;
@@ -27,7 +26,6 @@ export default function useInit(props) {
 
     (async function init() {
       // promise to fetch metadata
-      // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
       const metaDataPromise: Promise<any> = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
 
       const promisesArray = [metaDataPromise];
@@ -73,8 +71,7 @@ export default function useInit(props) {
         getPConnect,
         compositeKeys,
         isSearchable,
-        isCacheable: true,
-        xRayUid
+        isCacheable: true
       }).then(async context => {
         if (isCompStillMounted) {
           return readContextResponse(context, {
@@ -83,7 +80,6 @@ export default function useInit(props) {
             selectionCountThreshold,
             ref,
             selectionMode,
-            xRayUid,
             cosmosTableRef
           });
         }

package/lib/template/ListView/utils.ts

@@ -13,14 +13,21 @@ export const formatConstants = {
 class DataApi {
   mappedPropertyToOriginalProperty: any;
   originalPropertyToMappedProperty: any;
-  constructor() {
+  showRecords: any;
+  constructor(showRecords = true) {
+    this.showRecords = showRecords;
     this.originalPropertyToMappedProperty = {};
     this.mappedPropertyToOriginalProperty = {};
+    this.setShowRecords = this.setShowRecords.bind(this);
     this.setPropertyMaps = this.setPropertyMaps.bind(this);
     this.getMappedProperty = this.getMappedProperty.bind(this);
     this.getOriginalProperty = this.getOriginalProperty.bind(this);
   }
 
+  setShowRecords(showRecords) {
+    this.showRecords = showRecords;
+  }
+
   setPropertyMaps(originalToMappedPropertyObj = {}, mappedToOriginalPropertyObj = {}) {
     this.originalPropertyToMappedProperty = {
       ...this.originalPropertyToMappedProperty,
@@ -536,6 +543,28 @@ function prepareExtraFields(metaFields, configFields, configFieldSet, reportColu
 
 const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
 
+function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+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;
+
+  const definedOnClassID = fieldMetaData.definedOnClassID;
+  const localeValue = PCore.getLocaleUtils().getLocaleValue(
+    fieldLabel,
+    `${definedOnClassID ?? fieldMetaData.classID ?? classID}.${propertyName}`,
+    PCore.getLocaleUtils().FIELD_LABELS_BUNDLE_KEY,
+    null
+  );
+  return localeValue || fieldLabel;
+}
+
 function populateRenderingOptions(name, config, field) {
   const shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
   if (shouldDisplayAsSemanticLink) {
@@ -550,6 +579,7 @@ function populateRenderingOptions(name, config, field) {
     config.cellRenderer = formatConstants.Integer;
   }
 }
+
 export function initializeColumns(fields: any[] = [], getMappedProperty: any = null) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -562,7 +592,9 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
 
     let label = field.config.label || field.config.caption;
     const { show = true, displayAs } = field.config;
-    if (label.startsWith('@')) {
+    if (isFLProperty(label)) {
+      label = getFieldLabel(field.config);
+    } else if (label.startsWith('@')) {
       label = label.substring(3);
     }
 
@@ -650,10 +682,11 @@ export function updatePageFieldsConfig(configFields, parentClassID) {
 }
 
 export const readContextResponse = async (context, params) => {
-  const { getPConnect, apiContext, setListContext, children, showDynamicFields, referenceList, isDataObject } = params;
-  const { promisesResponseArray, apiContext: otherContext } = context;
-  // eslint-disable-next-line sonarjs/no-unused-collection
+  const { getPConnect, apiContext, setListContext, children, showDynamicFields, referenceList, isDataObject, ref } = params;
+  const { promisesResponseArray, setShowRecords, apiContext: otherContext } = context;
+
   const listOfComponents: any[] = [];
+  ref.setShowRecords = setShowRecords;
   const {
     data: { fields: metaFields, classID, isQueryable }
   } = promisesResponseArray[0];

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -1,4 +1,4 @@
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface MultiReferenceReadOnlyProps extends PConnProps {
   config: { referenceList: any; readonlyContextList: any };

package/lib/template/NarrowWide/NarrowWide/NarrowWide.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 './NarrowWide.css';
 
 interface NarrowWideProps 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/NarrowWide/NarrowWideDetails/NarrowWideDetails.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 NarrowWideDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -31,7 +31,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     })
   );
@@ -56,21 +56,21 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
   return (
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {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/NarrowWide/NarrowWideForm/NarrowWideForm.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 './NarrowWideForm.css';
 
 interface NarrowWideFormProps extends PConnProps {

package/lib/template/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactElement } 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 NarrowWidePageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/OneColumn/OneColumn/OneColumn.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@mui/material';
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid2 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 OneColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -21,12 +21,12 @@ export default function OneColumn(props: PropsWithChildren<OneColumnProps>) {
   const { children } = props;
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12} className={classes.colStyles}>
+    <Grid2 container spacing={2}>
+      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
         {(children as ReactElement[]).map(child => {
           return child;
         })}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/lib/template/OneColumn/OneColumnPage/OneColumnPage.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 OneColumnPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/OneColumn/OneColumnTab/OneColumnTab.tsx

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

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -6,7 +6,7 @@ import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import './PromotedFilters.css';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Can't use PromotedFilterProps until getContainerManager() knows about addTransientItem
 //  Currently just expects "object"
@@ -57,7 +57,6 @@ function Filters({ filters, transientItemID, localeReference }) {
       }
     });
 
-    // eslint-disable-next-line react/no-array-index-key
     return <React.Fragment key={index}>{createElement(createPConnectComponent(), c11nEnv)}</React.Fragment>;
   });
 }

package/lib/template/SelfServiceCaseView/SelfServiceCaseView.tsx

@@ -0,0 +1,145 @@
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import Grid2 from '@mui/material/Grid2';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { prepareCaseSummaryData, filterUtilities } from '@pega/react-sdk-components/lib/components/template/utils';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  caseViewHeader: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.getContrastText(theme.palette.info.light),
+    borderRadius: 'inherit'
+  },
+  caseViewIconBox: {
+    backgroundColor: theme.palette.info.dark,
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+    padding: theme.spacing(1)
+  },
+  caseViewIconImage: {
+    filter: 'var(--svg-color)'
+  }
+}));
+
+export default function SelfServiceCaseView(props) {
+  const classes = useStyles();
+  const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
+  const CaseSummary = getComponentFromMap('CaseSummary');
+  const {
+    icon = '',
+    getPConnect,
+    header,
+    subheader,
+    showCaseLifecycle = true,
+    showSummaryRegion = true,
+    showUtilitiesRegion = true,
+    showCaseActions = true,
+    children,
+    caseClass,
+    caseInfo: { availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' }
+  } = props;
+  const pConnect = getPConnect();
+  const [bShowCaseLifecycle, bShowSummaryRegion, bShowUtilitiesRegion, bShowCaseActions] = [
+    showCaseLifecycle,
+    showSummaryRegion,
+    showUtilitiesRegion,
+    showCaseActions
+  ].map((prop: boolean | string) => prop === true || prop === 'true');
+  const isObjectType: boolean = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+  const localeKey = pConnect?.getCaseLocaleReference();
+  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+  const renderedRegions: any = isObjectType
+    ? {
+        caseSummary: children[0],
+        utilities: filterUtilities(children[2])
+      }
+    : {
+        caseSummary: children[0],
+        stages: children[1],
+        todo: children[2],
+        utilities: filterUtilities(children[4])
+      };
+  const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+    renderedRegions.caseSummary,
+    (config: any) => config?.availableInChannel?.selfService === true
+  );
+
+  const isUtilitiesRegionNotEmpty: () => boolean = () => {
+    const utilitiesElement = renderedRegions.utilities;
+    if (utilitiesElement?.props?.getPConnect()?.getChildren()?.length > 0) {
+      return utilitiesElement.props
+        .getPConnect()
+        .getChildren()
+        .some((prop: { getPConnect: () => any }) => prop.getPConnect().getConfigProps().visibility !== false);
+    }
+    return false;
+  };
+
+  return (
+    <div>
+      {bShowCaseActions && (
+        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', margin: '10px' }}>
+          <div>{PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}</div>
+          <CaseViewActionsMenu
+            getPConnect={getPConnect}
+            availableActions={availableActions}
+            availableProcesses={availableProcesses}
+            caseTypeName={caseTypeName}
+            caseTypeID={caseTypeID}
+          />
+        </div>
+      )}
+      <div>
+        <Grid2 container>
+          <Grid2 size={{ xs: 3 }}>
+            {bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0) && (
+              <div>
+                <Card className={classes.root}>
+                  <CardHeader
+                    className={classes.caseViewHeader}
+                    title={
+                      <Typography variant='h6' component='div' id='case-name'>
+                        {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                      </Typography>
+                    }
+                    subheader={
+                      <Typography variant='body1' component='div' id='caseId'>
+                        {subheader}
+                      </Typography>
+                    }
+                    avatar={
+                      <Avatar className={classes.caseViewIconBox} variant='square'>
+                        <img src={svgCase} className={classes.caseViewIconImage} />
+                      </Avatar>
+                    }
+                  />
+                  <Divider />
+                  <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+                  <Divider />
+                </Card>
+              </div>
+            )}
+          </Grid2>
+
+          <Grid2 size={{ xs: 6 }}>
+            {bShowCaseLifecycle && renderedRegions.stages}
+            {renderedRegions.todo}
+          </Grid2>
+
+          {bShowUtilitiesRegion && isUtilitiesRegionNotEmpty() && <Grid2 size={{ xs: 3 }}>{renderedRegions.utilities}</Grid2>}
+        </Grid2>
+      </div>
+    </div>
+  );
+}

package/lib/template/SelfServiceCaseView/index.tsx

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

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

@@ -1,10 +1,9 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useRef } from 'react';
 
 import { buildMetaForListView, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 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';
 
 // Can't use SimpleTableProps until getComponentConfig() and getFieldMetadata() are NOT private
 interface SimpleTableProps extends PConnProps {
@@ -90,7 +89,7 @@ export default function SimpleTable(props: SimpleTableProps) {
     );
 
     const metaForPConnect = JSON.parse(JSON.stringify(metaForListView));
-    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
+    // @ts-expect-error - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
     metaForPConnect.config.parameters = rawParams ?? PCore.getMetadataUtils().getPropertyMetadata(name)?.datasource?.parameters;
 
     const { referenceListStr: referenceList } = getContext(getPConnect());

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, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -29,7 +29,7 @@ import { getReferenceList } from '@pega/react-sdk-components/lib/components/help
 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 {
@@ -74,7 +74,7 @@ const useStyles = makeStyles((/* theme */) => ({
     fontSize: '14px'
   },
   header: {
-    background: '#f5f5f5'
+    background: 'var(--table-header-background)'
   },
   tableCell: {
     borderRight: '1px solid lightgray',
@@ -163,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.
@@ -194,10 +195,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   });
 
   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 +207,10 @@ 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) {
@@ -219,7 +221,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 +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;
@@ -277,7 +279,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           setRowData(data);
         })
         .catch(e => {
-          // eslint-disable-next-line no-console
           console.log(e);
         });
     } else {
@@ -286,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);
@@ -318,7 +319,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 +335,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 +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: '', 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 +422,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 +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;
         }
@@ -608,6 +609,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 +682,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 +715,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