@pega/react-sdk-overrides 0.24.3 → 0.242.1

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/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);
   }
@@ -683,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;
     }
@@ -1060,6 +1049,7 @@ export default function ListView(props: ListViewProps) {
                                       onClick={() => {
                                         _listViewClick(row, column);
                                       }}
+                                      underline='hover'
                                     >
                                       {column.format && typeof value === 'number' ? column.format(value) : value}
                                     </Link>
@@ -1171,7 +1161,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>
@@ -1180,6 +1170,7 @@ export default function ListView(props: ListViewProps) {
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1191,6 +1182,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1202,6 +1194,7 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -1214,12 +1207,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/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';

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';

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

@@ -1,28 +1,28 @@
 /* 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';
@@ -698,7 +698,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       </TableContainer>
       {showAddRowButton && (
         <div style={{ fontSize: '1rem' }}>
-          <Link style={{ cursor: 'pointer' }} onClick={addRecord}>
+          <Link style={{ cursor: 'pointer' }} onClick={addRecord} underline='hover'>
             + Add
           </Link>
         </div>
@@ -716,7 +716,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 +726,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               </Select>
               {filterType === 'Date' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -737,6 +738,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'DateTime' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -748,6 +750,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
               )}
               {filterType === 'Time' && (
                 <TextField
+                  variant='standard'
                   autoFocus
                   margin='dense'
                   id='containsFilter'
@@ -760,12 +763,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/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';

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.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';
@@ -430,6 +430,7 @@ export default function Attachment(props: AttachmentProps) {
                       aria-expanded={open ? 'true' : undefined}
                       aria-haspopup='true'
                       onClick={handleClick}
+                      size='large'
                     >
                       <MoreVertIcon />
                     </IconButton>

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';
 

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -7,8 +7,8 @@ import download from 'downloadjs';
 // import SummaryList from '../../SummaryList';
 // import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
-import { IconButton, Menu, MenuItem, Button, CircularProgress } from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { IconButton, Menu, MenuItem, Button, CircularProgress } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -508,6 +508,7 @@ export default function FileUtility(props: FileUtilityProps) {
             aria-expanded={open ? 'true' : undefined}
             aria-haspopup='true'
             onClick={handleClick}
+            size='large'
           >
             <MoreVertIcon />
           </IconButton>

package/lib/widget/Followers/Followers.tsx

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

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { IconButton, Menu, MenuItem } from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -69,6 +69,7 @@ export default function SummaryItem(props: SummaryItemProps) {
               aria-expanded={open ? 'true' : undefined}
               aria-haspopup='true'
               onClick={handleClick}
+              size='large'
             >
               <MoreVertIcon />
             </IconButton>