@pega/react-sdk-overrides 23.1.12 → 24.2.10

package/lib/field/TextArea/TextArea.tsx

@@ -1,5 +1,7 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -13,14 +15,13 @@ export default function TextArea(props: TextAreaProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     fieldMetadata,
@@ -30,12 +31,20 @@ export default function TextArea(props: TextAreaProps) {
     placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
-
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const [inputValue, setInputValue] = useState('');
+
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -55,6 +64,15 @@ export default function TextArea(props: TextAreaProps) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       multiline
@@ -67,11 +85,11 @@ export default function TextArea(props: TextAreaProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
     />
   );

package/lib/field/TextContent/TextContent.tsx

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

package/lib/field/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -47,7 +47,7 @@ export default function TextInput(props: TextInputProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/Time/Time.tsx

@@ -1,7 +1,8 @@
-import { KeyboardTimePicker } from '@material-ui/pickers';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import dayjs from 'dayjs';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -14,10 +15,12 @@ export default function Time(props: TimeProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
   const helperTextToDisplay = validatemessage || helperText;
-
-  if (displayMode === 'LABELS_LEFT') {
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -37,11 +40,11 @@ export default function Time(props: TimeProps) {
 
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
-    onChange({ value: theValue });
+    handleEvent(actions, 'changeNblur', propName, theValue);
   };
 
   let timeValue: any = null;
-  if (value) {
+  if (value && Object.keys(value).length) {
     const timeArray = value.split(':').map(itm => Number(itm));
     timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
   }
@@ -52,25 +55,29 @@ export default function Time(props: TimeProps) {
   //
 
   return (
-    <KeyboardTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='hh:mm am'
-      keyboardIcon={<AccessTimeIcon />}
-      fullWidth
-      required={required}
+    <TimePicker
+      // keyboardIcon={<AccessTimeIcon />}
+      // fullWidth
+
       disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
       minutesStep={5}
-      size='small'
       label={label}
-      autoOk
-      mask='__:__ _m'
+      // autoOk
+      // mask='__:__ _m'
       format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
-      InputProps={{ inputProps: { ...testProp } }}
+      slotProps={{
+        textField: {
+          variant: 'outlined',
+          placeholder: 'hh:mm am',
+          required,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProp }
+        }
+      }}
     />
   );
 }

package/lib/field/URL/URL.tsx

@@ -1,5 +1,7 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -16,14 +18,13 @@ export default function URLComponent(props: URLComponentProps) {
   const TextInput = getComponentFromMap('TextInput');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -33,7 +34,17 @@ export default function URLComponent(props: URLComponentProps) {
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  const [inputValue, setInputValue] = useState('');
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -51,6 +62,14 @@ export default function URLComponent(props: URLComponentProps) {
     'data-test-id': testId
   };
 
+  const handleChange = event => {
+    setInputValue(event?.target?.value);
+  };
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       type='url'
@@ -61,11 +80,11 @@ export default function URLComponent(props: URLComponentProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ inputProps: { ...testProp } }}
     />
   );

package/lib/field/UserReference/UserReference.tsx

@@ -1,9 +1,10 @@
 import { memo, useEffect, useState } from 'react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -12,6 +13,7 @@ const SEARCH_BOX = 'Search box';
 interface UserReferenceProps extends PConnProps {
   // If any, enter additional props that only exist on URLComponent here
   displayAs?: string;
+  displayMode?: string;
   label?: string;
   value?: any;
   testId?: string;
@@ -36,6 +38,7 @@ const UserReference = (props: UserReferenceProps) => {
   const {
     label = '',
     displayAs = '',
+    displayMode = '',
     getPConnect,
     value = '',
     testId = '',
@@ -96,6 +99,14 @@ const UserReference = (props: UserReferenceProps) => {
 
   let userReferenceComponent: any = null;
 
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant='stacked' />;
+  }
+
   if (readOnly && showAsFormattedText) {
     if (userId) {
       userReferenceComponent = (
@@ -172,7 +183,6 @@ const UserReference = (props: UserReferenceProps) => {
       );
     }
   }
-
   return userReferenceComponent;
 };
 

package/lib/helpers/common-utils.ts

@@ -1,8 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 export function isEmptyObject(obj: Object): boolean {
   return Object.keys(obj).length === 0;
 }
-
-export function isInfinity23OrHigher() {
-  const pCoreVersion = PCore.getPCoreVersion();
-  return ['8.23.0', '23.1.1', '23.1.2'].includes(pCoreVersion);
-}

package/lib/helpers/field-group-utils.ts

@@ -49,8 +49,8 @@ export function buildView(pConn, index, viewConfigPath): ReactElement {
   };
 
   const view = PCore.createPConnect(config);
-  if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
-    view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
+  if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+    view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
   }
   return createElement(createPConnectComponent(), view);
 }

package/lib/helpers/simpleTableHelpers.ts

@@ -231,7 +231,7 @@ export const filterData = filterByColumns => {
           case 'Date':
           case 'DateTime':
           case 'Time':
-            value = item[filterObj.ref] !== null ?? item[filterObj.ref] !== '' ? Utils.getSeconds(item[filterObj.ref]) : null;
+            value = (item[filterObj.ref] !== null ?? item[filterObj.ref] !== '') ? Utils.getSeconds(item[filterObj.ref]) : null;
             filterValue =
               filterObj.containsFilterValue !== null && filterObj.containsFilterValue !== '' ? Utils.getSeconds(filterObj.containsFilterValue) : null;
 

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import { Grid, Divider } from '@material-ui/core';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import { Grid, Divider } from '@mui/material';
 
 // ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
 interface ActionButtonsProps {

package/lib/infra/Assignment/Assignment.tsx

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { useFocusFirstField, useScrolltoTop } from '@pega/react-sdk-components/lib/hooks';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -41,6 +42,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
   const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
   const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  const approveCase = actionsAPI.approveCase?.bind(actionsAPI);
+  const rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
   // const showPage = actionsAPI.showPage.bind(actionsAPI);
 
   const [showSnackbar, setShowSnackbar] = useState(false);
@@ -84,6 +87,10 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     return formedSteps;
   }
 
+  const scrollId = window.location.href.includes('embedded') ? '#pega-part-of-page' : '#portal';
+  useScrolltoTop(scrollId, children);
+  useFocusFirstField('Assignment', children);
+
   useEffect(() => {
     if (children) {
       const firstChild = Array.isArray(children) ? children[0] : children;
@@ -92,7 +99,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
 
       if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData.caseInfo;
+        const oCaseInfo = oData?.caseInfo;
 
         if (oCaseInfo && oCaseInfo.actionButtons) {
           setActionButtons(oCaseInfo.actionButtons);
@@ -132,7 +139,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -167,6 +174,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
           savePromise
             .then(() => {
+              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
@@ -211,11 +219,22 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'rejectCase': {
+          const rejectPromise = rejectCase(itemKey);
+
+          rejectPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Rejection failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
     } else if (sButtonType === 'primary') {
-      // eslint-disable-next-line sonarjs/no-small-switch
       switch (sAction) {
         case 'finishAssignment': {
           const finishPromise = finishAssignment(itemKey);
@@ -229,6 +248,18 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'approveCase': {
+          const approvePromise = approveCase(itemKey);
+
+          approvePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Approve failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
@@ -263,7 +294,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     refreshProps.forEach(prop => {
       PCore.getRefreshManager().registerForRefresh(
         'PROP_CHANGE',
-        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, null, pageReference, {
+        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, '', pageReference, {
           ...refreshOptions,
           refreshFor: prop[0]
         }),

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -1,11 +1,8 @@
 /* eslint-disable no-nested-ternary */
 
 import { useState, useEffect, useContext } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Card, CardHeader, Avatar, Typography } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
-import DayjsUtils from '@date-io/dayjs';
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert, Card, CardHeader, Avatar, Typography } from '@mui/material';
 
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -15,6 +12,8 @@ import { withSimpleViewContainerRenderer } from '../SimpleView/SimpleView';
 
 import { addContainerItem, getToDoAssignments, showBanner, hasContainerItems } from './helpers';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 interface FlowContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -99,6 +98,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
+  const key = `${thePConn.getCaseInfo().getClassName()}!CASE!${thePConn.getCaseInfo().getName()}`.toUpperCase();
   const classes = useStyles();
 
   function getBuildName(): string {
@@ -266,7 +266,9 @@ export const FlowContainer = (props: FlowContainerProps) => {
     // if have caseMessage show message and end
     const theCaseMessages = localizedVal(thePConn.getValue('caseMessages', ''), localeCategory); // 2nd arg empty string until typedefs properly allow optional
 
-    if (theCaseMessages || !hasAssignments()) {
+    // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
+    // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
+    if (!hasAssignments()) {
       // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
       // So, if we get here and caseMessages$ is empty, use default value in DX API response
       setCaseMessages(theCaseMessages || localizedVal('Thank you! The next step in this case has been routed appropriately.', localeCategory));
@@ -306,26 +308,27 @@ export const FlowContainer = (props: FlowContainerProps) => {
           !displayOnlyFA ? (
             <Card className={`${classes.root} psdk-root`}>
               <CardHeader
-                title={<Typography variant='h6'>{containerName}</Typography>}
-                subheader={`Task in ${caseId} \u2022 Priority ${urgency}`}
+                id='assignment-header'
+                title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
+                subheader={`${localizedVal('Task in', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}
-              <MuiPickersUtilsProvider utils={DayjsUtils}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>
                   {rootViewElement}
                 </Assignment>
-              </MuiPickersUtilsProvider>
+              </LocalizationProvider>
             </Card>
           ) : (
             <Card className={`${classes.root} psdk-root`}>
-              <Typography variant='h6'>{containerName}</Typography>
+              <Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>
               {displayPageMessages()}
-              <MuiPickersUtilsProvider utils={DayjsUtils}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <Assignment getPConnect={getPConnect} itemKey={itemKey}>
                   {rootViewElement}
                 </Assignment>
-              </MuiPickersUtilsProvider>
+              </LocalizationProvider>
             </Card>
           )
         ) : (

package/lib/infra/Containers/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -49,10 +49,13 @@ function ListViewActionButtons(props: ListViewActionButtonsProps) {
           getPConnect()
             .getActionsApi()
             .submitEmbeddedDataModal(context)
-            .then(() => {})
-            .finally(() => {
+            .then(() => {
               setIsDisabled(false);
               closeActionsDialog();
+            })
+            .catch(err => {
+              // eslint-disable-next-line no-console
+              console.log(err);
             });
         }}
       >

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -1,10 +1,10 @@
 import { createElement, useEffect, useRef, useState } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import { makeStyles } from '@material-ui/core/styles';
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import makeStyles from '@mui/styles/makeStyles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import difference from 'lodash.difference';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
@@ -315,7 +315,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         </DialogTitle>
         <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
           {bShowModal ? (
-            <MuiPickersUtilsProvider utils={DayjsUtils}>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
               <Assignment
                 getPConnect={createdView.configObject.getPConnect}
                 itemKey={itemKey}
@@ -327,7 +327,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
               >
                 {arNewChildrenAsReact}
               </Assignment>
-            </MuiPickersUtilsProvider>
+            </LocalizationProvider>
           ) : null}
         </DialogContent>
 

package/lib/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -1,5 +1,5 @@
 import React, { createElement, useContext, useEffect, useState } from 'react';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable operator-assignment */
 import { forwardRef, PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import { v4 as uuidv4 } from 'uuid';
 import { debounce } from 'throttle-debounce';
 import DatePicker from 'react-datepicker';
@@ -97,7 +97,7 @@ export default function DashboardFilter(props: PropsWithChildren<DashboardFilter
     metadata.config.onRecordChange = e => {
       fireFilterChange(e.id);
     };
-    return getPConnect().createComponent(metadata, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
+    return getPConnect().createComponent(metadata, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional);
   };
 
   const onChange = dates => {

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-template */
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
-import { Grid, Link } from '@material-ui/core';
+import { Grid, Link } from '@mui/material';
 
 import DashboardFilter from './DashboardFilter';
 
@@ -85,6 +85,7 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
             // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
           }}
+          underline='hover'
         >
           Clear All
         </Link>