@pega/dx-component-builder-sdk 0.242.2 → 0.242.4

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/mock.ts.mustache

@@ -108,7 +108,7 @@ export const pyReviewRaw = {
           value: 'John',
           label: 'First Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -133,7 +133,7 @@ export const pyReviewRaw = {
           value: '',
           label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -158,7 +158,7 @@ export const pyReviewRaw = {
           value: 'Doe',
           label: 'Last Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -183,7 +183,7 @@ export const pyReviewRaw = {
           required: true,
           testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -206,7 +206,7 @@ export const pyReviewRaw = {
           readOnly: undefined,
           value: '+16397975093',
           label: 'Phone',
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           hasSuggestions: false,
           getPConnect: () => {
             return {
@@ -232,7 +232,7 @@ export const pyReviewRaw = {
           value: '90.99',
           label: 'Price',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -254,7 +254,7 @@ export const pyReviewRaw = {
           value: '100 Mbps',
           label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -302,7 +302,7 @@ export const pyReviewRaw = {
           value: '',
           label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -327,7 +327,7 @@ export const pyReviewRaw = {
           value: 'Doe',
           label: 'Last Name',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -352,7 +352,7 @@ export const pyReviewRaw = {
           required: true,
           testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -375,7 +375,7 @@ export const pyReviewRaw = {
           readOnly: undefined,
           value: '+16397975093',
           label: 'Phone',
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           hasSuggestions: false,
           getPConnect: () => {
             return {
@@ -401,7 +401,7 @@ export const pyReviewRaw = {
           value: '90.99',
           label: 'Price',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -423,7 +423,7 @@ export const pyReviewRaw = {
           value: '100 Mbps',
           label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {

package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache

@@ -274,6 +274,19 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
                         },
                         getPConnect: () => {
                           return {
+                            getActionsApi: () => {
+                              return {
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
+                              };
+                            },
+                            getStateProps: () => {
+                              return { value: '.email' };
+                            },
                             getComputedVisibility: () => {
                               return true;
                             }

package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache

@@ -25,7 +25,7 @@ type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 const renderField = resolvedProps => {
   const { displayMode, value = '', label = '', onChange } = resolvedProps;
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
   let val: any = '';
   
 {{! pick new delimiters for mustache }}

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { withStyles, createStyles } from '@mui/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';
@@ -152,9 +153,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0] as any) : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1] as any) : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2] as any) : '---'}</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/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -112,7 +112,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   function computeRowData(rows: Object[]): void {
     const theRowData: Object[] = [];
 
-    rows.forEach((row: any, rowIndex: number) => {
+    rows?.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
       //  to a new array of values
       const rowDisplayValues: any = [];
@@ -194,10 +194,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0] as any) : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1] as any) : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2] as any) : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[3] ? (dataRow[3] as any) : '---'}</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>
+            <StyledTableCell>{dataRow[3] ? (dataRow[3]) : '---' as any}</StyledTableCell>
           </TableRow>
         );
       });

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.ts.mustache

@@ -14,7 +14,7 @@ export const caseOpConfig = {
   },
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const operatorDetails = {

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx

@@ -1,9 +1,10 @@
 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';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import StyledPegaDxilMyTestTextWrapper from './styles';
 
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -13,6 +13,5 @@
 
 .psdk-case-summary-fields {
   padding: calc(2 * 0.5rem);
-  display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
@@ -43,6 +43,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         default:
           return (
             <TextField
+              variant='standard'
               value='---'
               label={field.config.label}
               InputProps={{
@@ -61,6 +62,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'dropdown':
         return (
           <TextField
+            variant='standard'
             value={field.config.value}
             label={field.config.label}
             InputProps={{
@@ -77,6 +79,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={fieldValue}
             label={fieldLabel}
             InputProps={{
@@ -90,6 +93,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'status':
         return (
           <TextField
+            variant='standard'
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
@@ -105,6 +109,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`tel:${displayPhone}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
               InputProps={{
@@ -124,6 +129,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         return (
           <a href={`mailto:${displayEmail}`}>
             <TextField
+              variant='standard'
               value={field.config.value}
               label={field.config.label}
               InputProps={{
@@ -145,6 +151,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, {
               format: theFormat
             })}
@@ -161,6 +168,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
         const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
             InputProps={{
@@ -175,6 +183,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'userreference':
         return (
           <TextField
+            variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
             InputProps={{

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -48,7 +48,7 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { label } = thePConn.getConfigProps();
     const configObj = thePConn?.getReferencedView();
     configObj.config.readOnly = true;
-    configObj.config.displayMode = 'LABELS_LEFT';
+    configObj.config.displayMode = 'DISPLAY_ONLY';
     const propToUse = { ...thePConn.getInheritedProps() };
     configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
     fieldComponents.push({

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,8 +1,8 @@
 import { PropsWithChildren, useState } from 'react';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Divider from '@material-ui/core/Divider';
-import Link from '@material-ui/core/Link';
+import Grid from '@mui/material/Grid';
+import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -47,7 +47,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
             </Grid>
           ))}
           {props.onAdd && (
-            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 // FieldValueList is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -189,6 +189,7 @@ export default function Operator(props: OperatorProps) {
   return (
     <>
       <TextField
+        variant='standard'
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Pulse/Pulse.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';
 
 // Pulse is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+import { FormControl, FormHelperText, InputLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
 
@@ -107,7 +108,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
   }
 
   return (
-    <FormControl data-test-id={testId} error={error} required={required}>
+    <FormControl variant='standard' data-test-id={testId} error={error} required={required}>
       {!labelHidden && (
         <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
           {label}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.

package/tests/assets/sdk-r/components/create/override-sdk/field/AutoComplete/AutoComplete.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -150,7 +150,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
     }
   }, []);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -191,7 +191,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
       getOptionLabel={(option: IOption) => {
         return option.value ? option.value : '';
       }}
-      getOptionSelected={(option: any) => {
+      isOptionEqualToValue={(option: any) => {
         return option.value ? option.value : '';
       }}
       fullWidth

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/CancelAlert.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import { Button, Grid, IconButton, Snackbar } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './CancelAlert.css';
@@ -89,7 +89,7 @@ export default function CancelAlert(props: CancelAlertProps) {
     }
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }

package/tests/assets/sdk-r/components/create/override-sdk/field/Checkbox/Checkbox.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 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 { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import { makeStyles } from '@material-ui/core/styles';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -77,7 +77,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
     }
   }, [thePConn]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
@@ -161,7 +161,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }
 
   return (
-    <FormControl required={required} error={status === 'error'}>
+    <FormControl variant='standard' required={required} error={status === 'error'}>
       {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
       <FormGroup>{theCheckbox}</FormGroup>
       <FormHelperText>{helperTextToDisplay}</FormHelperText>

package/tests/assets/sdk-r/components/create/override-sdk/field/Currency/Currency.tsx

@@ -1,6 +1,6 @@
-import { TextField } from '@material-ui/core';
 import { useState } from 'react';
 import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
@@ -67,7 +67,7 @@ export default function Currency(props: CurrrencyProps) {
   let currencyProp = {};
   currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

package/tests/assets/sdk-r/components/create/override-sdk/field/Date/Date.tsx

@@ -1,4 +1,6 @@
-import { KeyboardDatePicker } from '@material-ui/pickers';
+import { useState } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs, { Dayjs } from 'dayjs';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
@@ -20,22 +22,9 @@ export default function Date(props: DateProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    getPConnect,
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    onBlur,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -50,7 +39,7 @@ export default function Date(props: DateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });
@@ -77,37 +66,29 @@ export default function Date(props: DateProps) {
 
   const handleChange = date => {
     if (date && date.isValid()) {
-      onChange({ value: getFormattedDate(date) });
-    }
-  };
-
-  const handleAccept = date => {
-    if (date && date.isValid()) {
+      setDateValue(date);
       handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
     }
   };
 
   return (
-    <KeyboardDatePicker
-      disableToolbar
-      variant='inline'
-      inputVariant='outlined'
-      placeholder={dateFormatInfo.dateFormatStringLC}
-      format={dateFormatInfo.dateFormatString}
-      mask={dateFormatInfo.dateFormatMask}
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
+    <DatePicker
       label={label}
-      value={value || null}
+      disabled={disabled}
+      format={dateFormatInfo.dateFormatString}
+      value={dateValue}
+      slotProps={{
+        textField: {
+          required,
+          variant: 'outlined',
+          placeholder: dateFormatInfo.dateFormatStringLC,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProp }
+        }
+      }}
       onChange={handleChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      onAccept={handleAccept}
-      InputProps={{ ...testProp }}
     />
   );
 }