@pega/dx-component-builder-sdk 24.1.12 → 24.2.10

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

@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid 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';
@@ -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 MuiPhoneNumber from 'material-ui-phone-number';
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { TextField } from '@mui/material';
+import { MuiTelInput } from 'mui-tel-input';
+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';
@@ -22,30 +23,38 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange } = resolvedProps;
+  const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const helperTextToDisplay = validatemessage || helperText;
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+  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
@@ -65,15 +74,21 @@ const renderField = resolvedProps => {
 
   if (label === 'Phone Number')
     val = (
-      <MuiPhoneNumber
-        value={value}
+      <MuiTelInput
         fullWidth
         variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
         size='small'
-        style={{ fontSize: '14px' }}
-        defaultCountry='us'
-        label={label}
+        defaultCountry='US'
+        required={required}
+        disabled={disabled}
         onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        InputProps={{ ...testProp }}
       />
     );
 <%={{ }}=%>     {{! revert delimiters for mustache }}
@@ -155,7 +170,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
       hasSuggestions: false,
       onChange: val => {
         setPhone(val);
-      }
+      },
+      onBlur: () => {}
     },
     {
       readOnly: undefined,

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { Grid, GridSize } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -35,8 +35,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   // Calculate the size
   //  Default to assume the 2 columns are evenly split. However, override if templateCol
   //  (example value: "1fr 1fr")
-  let aSize: GridSize = 6;
-  let bSize: GridSize = 6;
+  let aSize = 6;
+  let bSize = 6;
 
   const colAArray = templateCol
     .replaceAll(/[a-z]+/g, '')
@@ -44,8 +44,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
     .map(itm => Number(itm));
   const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
   const ratio = 12 / totalCols;
-  aSize = (ratio * colAArray[0]) as GridSize;
-  bSize = (ratio * colAArray[1]) as GridSize;
+  aSize = (ratio * colAArray[0]) as number;
+  bSize = (ratio * colAArray[1]) as number;
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -1,5 +1,5 @@
-import { Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 
 interface OneColumnProps {
   // If any, enter additional props that only exist on this component

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

@@ -1,29 +1,31 @@
 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 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
 }
 
-const StyledTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((myTheme) =>
   createStyles({
     head: {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'silver',
-      backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled)
+      backgroundColor: myTheme.palette.text.disabled,
+      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
     },
     body: {
       borderWidth: '1px',
@@ -151,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

@@ -1,26 +1,32 @@
-import { 
-  Card, 
-  CardContent, 
-  CardHeader, 
+import {
+  Card,
+  CardContent,
+  CardHeader,
   Typography,
-  CardActions, 
+  CardActions,
   Button,
   TableContainer,
   Table,
   TableBody,
   TableHead,
-  withStyles,
-  createStyles,
-  Theme,
   TableCell,
-  TableRow 
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+  TableRow
+} from '@mui/material';
+import { withStyles, createStyles } from '@mui/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import isDeepEqual from 'fast-deep-equal/react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { useRef, useEffect, useState } from 'react';
+import { Theme as MuiTheme } from "@mui/material/styles";
+
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -30,23 +36,23 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   whatsnewlink?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginTop: myTheme.spacing(1),
+    marginBottom: myTheme.spacing(1),
     borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light
+    borderLeftColor: myTheme.palette.primary.light
   }
 }));
 
-const StyledTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((myTheme) =>
   createStyles({
     head: {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'silver',
-      backgroundColor: theme.palette.text.disabled,
-      color: theme.palette.getContrastText(theme.palette.text.disabled)
+      backgroundColor: myTheme.palette.text.disabled,
+      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
     },
     body: {
       borderWidth: '1px',
@@ -106,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 = [];
@@ -188,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/mock.ts.mustache

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/prefer-default-export
+
 export const configProps = {
   label: 'App announcement',
   header: 'Announcements',

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

@@ -1,15 +1,23 @@
 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 { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
+
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -22,14 +30,14 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   displayLabel?: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   },
   popover: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   }
 }));
 

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.