@pega/react-sdk-overrides 24.1.10 → 24.2.11

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

@@ -1,33 +1,33 @@
-/* eslint-disable no-nested-ternary */
 import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
-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 TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
+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 TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import makeStyles from '@mui/styles/makeStyles';
+import Link from '@mui/material/Link';
 import { createElement } from 'react';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-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 TextField from '@material-ui/core/TextField';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+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 TextField from '@mui/material/TextField';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 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 { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -52,12 +52,27 @@ 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'
   },
@@ -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;
@@ -176,13 +194,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(() => {
+    // 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();
@@ -201,7 +214,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     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)
@@ -258,11 +270,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   function generateRowsData() {
     // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
     if (!referenceList.length && dataPageName) {
-      getDataPage(dataPageName, parameters, context).then(listData => {
-        const data = formatRowsData(listData);
-        myRows = data;
-        setRowData(data);
-      });
+      getDataPage(dataPageName, parameters, context)
+        .then(listData => {
+          const data = formatRowsData(listData);
+          myRows = data;
+          setRowData(data);
+        })
+        .catch(e => {
+          // eslint-disable-next-line no-console
+          console.log(e);
+        });
     } else {
       // The referenceList prop has the JSON data for each row to be displayed
       //  in the table. So, iterate over referenceList to create the dataRows that
@@ -301,9 +318,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (allowEditingInModal && defaultView) {
       pConn
         .getActionsApi()
+        // @ts-ignore
         .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);
     }
 
@@ -317,6 +334,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     if (typeof selectedRowIndex.current === 'number') {
       pConn
         .getActionsApi()
+        // @ts-ignore
         .openEmbeddedDataModal(
           bUseSeparateViewForEdit ? editView : defaultView,
           pConn,
@@ -329,12 +347,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);
   };
 
@@ -344,7 +360,7 @@ 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: '' } };
+        item = { ...item, config: { ...item.config, label: '', displayMode: readOnlyMode || allowEditingInModal ? 'DISPLAY_ONLY' : undefined } };
         const referenceListData = getReferenceList(pConn);
         const isDatapage = referenceListData.startsWith('D_');
         const pageReferenceValue = isDatapage
@@ -378,6 +394,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   };
 
   function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
+    if (!orderedBy || (!a[orderedBy] && !b[orderedBy])) {
+      return 0;
+    }
     if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
       return -1;
     }
@@ -389,11 +408,12 @@ 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) {
@@ -405,7 +425,11 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       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) {
@@ -575,19 +599,21 @@ 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) => {
                 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])}
@@ -599,8 +625,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);
                           }}
@@ -616,6 +642,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
           </TableHead>
           <TableBody>
             {editableMode &&
+              !allowEditingInModal &&
               elements.map((row: any, index) => {
                 const theKey = `row-${index}`;
                 return (
@@ -653,53 +680,46 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                   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.fields.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
-          <Link style={{ cursor: 'pointer' }} onClick={addRecord}>
-            + Add
+          <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
+            + {localizedVal('Add', localeCategory)}
           </Link>
         </div>
       )}
@@ -716,7 +736,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         <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='equal'>is equal to</MenuItem>
                 <MenuItem value='after'>after</MenuItem>
@@ -726,6 +746,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -737,6 +758,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -748,6 +770,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -760,12 +783,13 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
             </>
           ) : (
             <>
-              <Select id='filter' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+              <Select variant='standard' id='filter' 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/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -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/SubTabs/SubTabs.tsx

@@ -1,6 +1,6 @@
 import { Children, PropsWithChildren, useEffect, useState } from 'react';
-import { 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 { getTransientTabs, getVisibleTabs, tabClick } from './tabUtils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

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

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

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

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

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.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 WideNarrowDetails(props: WideNarrowDetailsProps) {
 
   // 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) => {
     let theConfigObject: object = configObject;

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Box from '@material-ui/core/Box';
-import Toolbar from '@material-ui/core/Toolbar';
-import Container from '@material-ui/core/Container';
-import { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import MenuIcon from '@material-ui/icons/Menu';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Container from '@mui/material/Container';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import MenuIcon from '@mui/icons-material/Menu';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
@@ -128,7 +128,7 @@ export default function WssNavBar(props: WssNavBarProps) {
             {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
-              <IconButton onClick={handleOpenUserMenu}>
+              <IconButton onClick={handleOpenUserMenu} size='large'>
                 <Avatar>{operator.currentUserInitials}</Avatar>
               </IconButton>
               <Menu

package/lib/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,5 +1,5 @@
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AppAnnouncementProps extends PConnProps {

package/lib/widget/Attachment/Attachment.css

@@ -34,6 +34,7 @@
 
 .file-error {
   color: var(--app-error-color);
+  font-size: 14px;
 }
 
 .psdk-utility-card {

package/lib/widget/Attachment/Attachment.tsx

@@ -2,8 +2,8 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable no-nested-ternary */
 import { useState, useEffect, useCallback } from 'react';
-import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import download from 'downloadjs';
 
 import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
@@ -33,7 +33,7 @@ const updateAttachmentState = (pConn, key, attachments) => {
 };
 
 export default function Attachment(props: AttachmentProps) {
-  const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode } = props;
+  const { value, getPConnect, label, validatemessage, allowMultiple, extensions, displayMode, helperText } = props;
   /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
   let { required, disabled } = props;
   [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
@@ -155,11 +155,9 @@ export default function Attachment(props: AttachmentProps) {
               const context = pConn.getContextName();
               // set errors to property to block submit even on errors in file upload
               PCore.getMessageManager().addMessages({
-                // @ts-ignore
                 messages: [
                   {
                     type: 'error',
-                    // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                     message: pConn.getLocalizedValue('Error with one or more files', '', '')
                   }
                 ],
@@ -192,7 +190,6 @@ export default function Attachment(props: AttachmentProps) {
   const clearFieldErrorMessages = () => {
     const fieldName = (pConn.getStateProps() as any).value;
     const context = pConn.getContextName();
-    // @ts-ignore
     PCore.getMessageManager().clearMessages({
       type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
       property: fieldName,
@@ -217,9 +214,11 @@ export default function Attachment(props: AttachmentProps) {
         };
         if (!validateMaxSize(f, maxAttachmentSize)) {
           f.props.error = true;
+          f.inProgress = false;
           f.props.meta = pConn.getLocalizedValue(`File is too big. Max allowed size is ${maxAttachmentSize}MB.`, '', '');
         } else if (!validateFileExtension(f, extensions)) {
           f.props.error = true;
+          f.inProgress = false;
           f.props.meta = `${pConn.getLocalizedValue('File has invalid extension. Allowed extensions are:', '', '')} ${extensions.replaceAll(
             '.',
             ''
@@ -229,11 +228,9 @@ export default function Attachment(props: AttachmentProps) {
           const fieldName = (pConn.getStateProps() as any).value;
           const context = pConn.getContextName();
           PCore.getMessageManager().addMessages({
-            // @ts-ignore
             messages: [
               {
                 type: 'error',
-                // @ts-ignore - Type '{ type: string; message: string; }' is not assignable to type 'MessagesConfigObject'.
                 message: pConn.getLocalizedValue('Error with one or more files', '', '')
               }
             ],
@@ -430,6 +427,7 @@ export default function Attachment(props: AttachmentProps) {
                       aria-expanded={open ? 'true' : undefined}
                       aria-haspopup='true'
                       onClick={handleClick}
+                      size='large'
                     >
                       <MoreVertIcon />
                     </IconButton>
@@ -458,7 +456,7 @@ export default function Attachment(props: AttachmentProps) {
     <div className='file-upload-container'>
       <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
       {((files.length === 0 && allowMultiple !== 'true') || allowMultiple === 'true') && <section>{content}</section>}
-      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : ''}
+      {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : <span style={{ fontSize: '14px' }}>{helperText}</span>}
       {files && files.length > 0 && <section>{fileDisplay}</section>}
     </div>
   );

package/lib/widget/CaseHistory/CaseHistory.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
-import { withStyles, Theme, createStyles } 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 TableRow from '@material-ui/core/TableRow';
+import { Theme } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+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 TableRow from '@mui/material/TableRow';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -145,9 +147,9 @@ export default function CaseHistory(props: CaseHistoryProps) {
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
           </TableRow>
         );
       });

package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';