@pega/dx-component-builder-sdk 0.242.1 → 0.242.3

package/src/tasks/create/templates/SDK-React/template/DETAILS/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,13 +183,30 @@ export const pyReviewRaw = {
           required: true,
           testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT'
+          displayMode: 'DISPLAY_ONLY',
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
+                };
+              },
+              getStateProps: () => {
+                return { value: '.email' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
           value: '+16397975093',
           label: 'Phone',
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           hasSuggestions: false,
           getPConnect: () => {
             return {
@@ -215,7 +232,7 @@ export const pyReviewRaw = {
           value: '90.99',
           label: 'Price',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -237,7 +254,7 @@ export const pyReviewRaw = {
           value: '100 Mbps',
           label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: 'LABELS_LEFT',
+          displayMode: 'DISPLAY_ONLY',
           getPConnect: () => {
             return {
               getActionsApi: () => {
@@ -347,7 +364,7 @@ export const pyReviewResolved = {
       }
     }
   ],
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const regionChildrenResolved = [
@@ -355,13 +372,13 @@ export const regionChildrenResolved = [
     readOnly: true,
     value: '',
     label: 'SLA Deadline',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'DISPLAY_ONLY'
   },
   {
     readOnly: true,
     value: '',
     label: 'SLA Goal',
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'DISPLAY_ONLY'
   },
   {
     readOnly: true,
@@ -378,6 +395,6 @@ export const regionChildrenResolved = [
         value: 'Current Date Time'
       }
     ],
-    displayMode: 'LABELS_LEFT'
+    displayMode: 'DISPLAY_ONLY'
   }
 ];

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -21,7 +21,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   // 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) =>
     createElement(createPConnectComponent(), {

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

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { pyReviewRaw } from './mock';
@@ -24,28 +25,30 @@ 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 }}
+{{=<% %>=}}
   if (label === 'Service Date')
     val = (
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDatePicker
-          variant='inline'
-          inputVariant='outlined'
-          placeholder='mm/dd/yyyy'
-          fullWidth
-          format='MM/DD/YYYY'
-          mask='__/__/____'
-          size='small'
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
           label={label}
-          value={value || null}
+          format='MM/DD/YYYY'
+          value={value ? dayjs(value) : null}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              placeholder: 'mm/dd/yyyy',
+              size: 'small'
+            }
+          }}
           onChange={onChange}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     );
 
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
   if (label === 'Email')
     val = (
       <TextField

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