@pega/react-sdk-overrides 0.24.4 → 0.25.2

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

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Grid2, type GridSize } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -43,13 +43,13 @@ export default function TwoColumn(props: PropsWithChildren<TwoColumnProps>) {
   bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+    <Grid2 container spacing={1}>
+      <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
         {childrenToRender[0]}
-      </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
         {childrenToRender[1]}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

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

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

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

@@ -1,7 +1,7 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { Grid2, type GridSize } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface TwoColumnTabProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -43,13 +43,13 @@ export default function TwoColumnTab(props: PropsWithChildren<TwoColumnTabProps>
   bSize = (ratio * colAArray[1]) as GridSize;
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
+    <Grid2 container spacing={1}>
+      <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
         {childrenToRender[0]}
-      </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
         {childrenToRender[1]}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

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

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {

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

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@material-ui/core/Grid';
+import Grid, { type 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';
 
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface WideNarrowDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -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/WideNarrow/WideNarrowForm/WideNarrowForm.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrowForm.css';
 
 interface WideNarrowFormProps extends PConnProps {

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

@@ -1,6 +1,6 @@
-import { Children, PropsWithChildren } from 'react';
+import { Children, type PropsWithChildren } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface WideNarrowPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -1,14 +1,14 @@
 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
 
 interface WssNavBarProps extends PConnProps {
@@ -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,6 +1,6 @@
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AppAnnouncementProps extends PConnProps {
   // If any, enter additional props that only exist on this component

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,13 +2,13 @@
 /* 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';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './Attachment.css';
 
@@ -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,15 +1,17 @@
 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 type { 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';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseHistoryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -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,5 +1,5 @@
-import { Button } from '@material-ui/core';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { Button } from '@mui/material';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';
 
 interface ActionButtonsForFileUtilProps extends PConnProps {

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,12 +7,12 @@ 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';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FileUtilityProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -508,10 +508,11 @@ export default function FileUtility(props: FileUtilityProps) {
             aria-expanded={open ? 'true' : undefined}
             aria-haspopup='true'
             onClick={handleClick}
+            size='large'
           >
             <MoreVertIcon />
           </IconButton>
-          <Menu style={{ marginTop: '3rem' }} id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+          <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
             <MenuItem style={{ fontSize: '14px' }} onClick={onAddFilesClick}>
               {thePConn.getLocalizedValue('Add files', '', '')}
             </MenuItem>{' '}

package/lib/widget/Followers/Followers.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
-import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FollowersProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface QuickCreateProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -35,7 +35,6 @@ export default function QuickCreate(props: QuickCreateProps) {
     const defaultCases: any = [];
     const envInfo = PCore.getEnvironmentInfo();
     if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
-      // @ts-ignore - Property 'forEach' does not exist on type 'string'
       envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
         if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
           defaultCases.push({

package/lib/widget/QuickCreate/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "QuickCreate",
+  "label": "Quick create",
+  "description": "Quick create widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": [],
+  "defaultConfig": {}
+}

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -1,8 +1,8 @@
 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';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './SummaryItem.css';
 
@@ -69,10 +69,11 @@ export default function SummaryItem(props: SummaryItemProps) {
               aria-expanded={open ? 'true' : undefined}
               aria-haspopup='true'
               onClick={handleClick}
+              size='large'
             >
               <MoreVertIcon />
             </IconButton>
-            <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+            <Menu id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
               {item.actions &&
                 item.actions.map(option => (
                   <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>

package/lib/widget/SummaryList/SummaryList.tsx

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