@pega/react-sdk-overrides 23.1.12 → 24.2.10

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -23,7 +23,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
@@ -46,7 +46,7 @@ export default function DetailsThreeColumn(props: DetailsThreeColumnProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
     });
   }
 

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -23,7 +23,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
@@ -46,7 +46,7 @@ export default function DetailsTwoColumn(props: DetailsTwoColumnProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -1,6 +1,7 @@
 import React, { Children, useMemo, useState } from 'react';
-import { makeStyles, Tab, Tabs } from '@material-ui/core';
-import { TabContext, TabPanel } from '@material-ui/lab';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -30,7 +31,7 @@ function DynamicTabs(props: DynamicTabsProps) {
   const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
   const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
   const memoisedTabViews = useMemo(() => {
-    pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
+    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     pConnect.setInheritedProp('readOnly', true);
 
     return (

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo } from 'react';
 
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -37,9 +37,16 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const resolvedList = getReferenceList(pConn);
   pConn.setReferenceList(resolvedList);
   const pageReference = `${pConn.getPageReference()}${resolvedList}`;
-  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
+  useLayoutEffect(() => {
+    if (!isReadonlyMode) {
+      // @ts-ignore - Expected 3 arguments, but got 1
+      pConn.getListActions().initDefaultPageInstructions(resolvedList);
+    }
+  }, [referenceList?.length]);
+
   const getDynamicHeaderProp = (item, index) => {
     if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {
       return item[heading.substring(1)];
@@ -51,6 +58,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
+      // @ts-ignore - An argument for 'pageRef' was not provided.
       pConn.getListActions().insert({}, referenceList.length);
     }
   };
@@ -63,6 +71,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
+        // @ts-ignore - An argument for 'pageRef' was not provided.
         pConn.getListActions().deleteEntry(index);
       }
     };
@@ -87,7 +96,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     );
   }
 
-  pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+  pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
   const memoisedReadOnlyList = useMemo(() => {
     return referenceList.map((item, index) => {
       const key = item[heading] || `field-group-row-${index}`;

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface InlineDashboardProps extends PConnProps {

package/lib/template/InlineDashboardPage/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "InlineDashboardPage",
+  "label": "Inline Dashboard",
+  "description": "Inline Dashboard Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "InlineDashboardPage.svg",
+  "properties": []
+}

package/lib/template/ListView/ListView.tsx

@@ -4,37 +4,39 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 
 import React, { useState, useEffect, useRef } from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Paper from '@material-ui/core/Paper';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import SearchIcon from '@material-ui/icons/Search';
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import { Radio } from '@material-ui/core';
-import Checkbox from '@material-ui/core/Checkbox';
+import { Theme } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Paper from '@mui/material/Paper';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import SearchIcon from '@mui/icons-material/Search';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+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 Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { Radio } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
 
 import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 
@@ -65,7 +67,6 @@ interface ListViewProps extends PConnProps {
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
 let myRows: any[];
-let myDisplayColumnList: any[];
 
 let menuColumnId = '';
 let menuColumnType = '';
@@ -119,6 +120,7 @@ export default function ListView(props: ListViewProps) {
   const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
 
   const [arRows, setRows] = useState<any[]>([]);
+  const [rowsData, setRowsData] = useState<any[]>([]);
   const [arColumns, setColumns] = useState<any[]>([]);
   const [response, setResponse] = useState<any[]>([]);
 
@@ -291,16 +293,6 @@ export default function ListView(props: ListViewProps) {
     });
   }
 
-  function getMyColumnList(arCols: any[]): string[] {
-    const myColList: string[] = [];
-
-    arCols.forEach(col => {
-      myColList.push(col.id);
-    });
-
-    return myColList;
-  }
-
   /** Will return field from a filter expression */
   function getFieldFromFilter(filter, dateRange = false) {
     let fieldValue;
@@ -543,8 +535,8 @@ export default function ListView(props: ListViewProps) {
 
     // store globally, so can be searched, filtered, etc.
     myRows = usingDataResults;
-    myDisplayColumnList = getMyColumnList(myColumns);
 
+    setRowsData(myRows);
     // At this point, if we have data ready to render and haven't been asked
     //  to NOT call setRows and setColumns, call them
     if (bCallSetRowsColumns) {
@@ -604,24 +596,22 @@ export default function ListView(props: ListViewProps) {
   }, [listContext]);
 
   function searchFilter(value: string, rows: any[]) {
+    const cols = arColumns.map(ele => {
+      return ele.id;
+    });
+
     function filterArray(el: any): boolean {
-      const bReturn = false;
-      for (const key of Object.keys(el)) {
-        // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
-        if (myDisplayColumnList.includes(key)) {
-          let myVal = el[key];
-          if (myVal !== null) {
-            if (typeof myVal !== 'string') {
-              myVal = myVal.toString();
-            }
-            if (myVal.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
-              return true;
-            }
+      return Object.keys(el).some(key => {
+        // only search columns that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
+        if (cols.includes(key)) {
+          const myVal = el[key];
+          if (myVal !== null && typeof myVal !== 'undefined') {
+            const strVal = String(myVal); // Ensure myVal is a string
+            return strVal.toLowerCase().includes(value.toLowerCase());
           }
         }
-      }
-
-      return bReturn;
+        return false;
+      });
     }
 
     rows = rows.filter(filterArray);
@@ -631,8 +621,7 @@ export default function ListView(props: ListViewProps) {
 
   function _onSearch(event: any) {
     const searchValue = event.target.value;
-
-    const filteredRows = searchFilter(searchValue, myRows.slice());
+    const filteredRows = searchFilter(searchValue, rowsData?.slice());
 
     setRows(filteredRows);
   }
@@ -653,6 +642,7 @@ export default function ListView(props: ListViewProps) {
 
     thePConn
       .getActionsApi()
+      // @ts-ignore
       .openAssignment(pzInsKey, pxRefObjectClass, options)
       .then(() => {
         // console.log("openAssignment successful");
@@ -682,7 +672,7 @@ export default function ListView(props: ListViewProps) {
     }
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -885,6 +875,7 @@ export default function ListView(props: ListViewProps) {
         pzInsKey = row[`${associationCategory}:pzInsKey`];
       }
       if (column.isAssignmentLink) {
+        // @ts-ignore
         thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
           channelName: ''
@@ -1043,33 +1034,35 @@ export default function ListView(props: ListViewProps) {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {stableSort(arRows, getComparator(order, orderBy))
-                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map(row => {
-                        return (
-                          <TableRow key={row.pxRefObjectInsName || row.pyID || row.pyGUID}>
-                            {arColumns.map(column => {
-                              const value = row[column.id];
-                              return (
-                                <TableCell key={column.id} align={column.align} className={classes.cell}>
-                                  {_showButton(column.id, row) || column.displayAsLink ? (
-                                    <Link
-                                      component='button'
-                                      onClick={() => {
-                                        _listViewClick(row, column);
-                                      }}
-                                    >
-                                      {column.format && typeof value === 'number' ? column.format(value) : value}
-                                    </Link>
-                                  ) : (
-                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
-                                  )}
-                                </TableCell>
-                              );
-                            })}
-                          </TableRow>
-                        );
-                      })}
+                    {arRows &&
+                      stableSort(arRows, getComparator(order, orderBy))
+                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                        .map(row => {
+                          return (
+                            <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                              {arColumns.map(column => {
+                                const value = row[column.id];
+                                return (
+                                  <TableCell key={column.id} align={column.align} className={classes.cell}>
+                                    {_showButton(column.id, row) || column.displayAsLink ? (
+                                      <Link
+                                        component='button'
+                                        onClick={() => {
+                                          _listViewClick(row, column);
+                                        }}
+                                        underline='hover'
+                                      >
+                                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                                      </Link>
+                                    ) : (
+                                      <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                    )}
+                                  </TableCell>
+                                );
+                              })}
+                            </TableRow>
+                          );
+                        })}
                   </TableBody>
                 </Table>
               </TableContainer>
@@ -1104,7 +1097,7 @@ export default function ListView(props: ListViewProps) {
                         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                         .map(row => {
                           return (
-                            <TableRow key={row.pxRefObjectInsName || row.pyGUID || row.pyID}>
+                            <TableRow key={row[rowID]}>
                               {selectionMode === SELECTION_MODE.SINGLE && (
                                 <TableCell>
                                   <Radio
@@ -1169,7 +1162,7 @@ export default function ListView(props: ListViewProps) {
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+              <Select variant='standard' value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
                 <MenuItem value='notequal'>is not equal to</MenuItem>
                 <MenuItem value='after'>after</MenuItem>
                 <MenuItem value='before'>before</MenuItem>
@@ -1178,6 +1171,7 @@ export default function ListView(props: ListViewProps) {
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1189,6 +1183,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1200,6 +1195,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1212,12 +1208,13 @@ export default function ListView(props: ListViewProps) {
             </>
           ) : (
             <>
-              <Select fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+              <Select variant='standard' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
               </Select>
               <TextField
+                variant='standard'
                 autoFocus
                 margin='dense'
                 id='containsFilter'

package/lib/template/ListView/utils.ts

@@ -678,7 +678,7 @@ export const readContextResponse = async (context, params) => {
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
     if (compositeKeys.length) {
-      otherContext.setCompositeKeys(compositeKeys);
+      otherContext?.setCompositeKeys(compositeKeys);
     }
     if (otherContext) {
       otherContext.fetchRowActionDetails = null;

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -29,7 +29,7 @@ export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProp
       }
     },
     '',
-    '',
+    0,
     {}
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 

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

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid, { GridSize } from '@mui/material/Grid';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -26,7 +26,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
-  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
   getPConnect().setInheritedProp('readOnly', true);
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
@@ -49,7 +49,7 @@ export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface OneColumnProps extends PConnProps {

package/lib/template/PromotedFilters/PromotedFilters.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState, createElement } from 'react';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
@@ -87,6 +87,7 @@ export default function PromotedFilters(props: PromotedFilterProps) {
     };
     return getPConnect().getContainerManager().addTransientItem({
       id: viewName,
+      // @ts-ignore - Property 'coreHeaders' is missing in type '{ classID: string; }' but required in type '{ coreHeaders: any; }'.
       data: filtersWithClassID
     });
   }, []);