@pega/react-sdk-overrides 0.25.2 → 0.25.4

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

@@ -6,11 +6,11 @@ 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,5 +1,5 @@
 import { createElement } from 'react';
-import Grid, { type 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';
@@ -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/OneColumn/OneColumn/OneColumn.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@mui/material';
+import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -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/PromotedFilters/PromotedFilters.tsx

@@ -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,3 @@
+export default function SelfServiceCaseView(props) {
+  console.log('SelfServiceCaseView props:', props);
+}

package/lib/template/SelfServiceCaseView/index.tsx

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

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { useRef } from 'react';
 
 import { buildMetaForListView, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
@@ -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

@@ -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];

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import { Grid2, type GridSize } from '@mui/material';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -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}`);
   }
 

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import { Grid2, type GridSize } from '@mui/material';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -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}`);
   }
 

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

@@ -6,11 +6,11 @@ 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,5 +1,5 @@
 import { createElement } from 'react';
-import Grid, { type 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';
@@ -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/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

@@ -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'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appName: {
-    color: 'white',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(4),
     fontSize: '1.5rem'

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 {