@pega/dx-component-builder-sdk 0.25.5 → 0.25.7

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 = '', onChange, 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
@@ -63,18 +72,29 @@ const renderField = resolvedProps => {
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
     val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
 
+  const disableDropdown = true;
   if (label === 'Phone Number')
     val = (
-      <MuiPhoneNumber
-        value={value}
-        fullWidth
-        variant='outlined'
-        size='small'
-        style={{ fontSize: '14px' }}
-        defaultCountry='us'
-        label={label}
-        onChange={onChange}
-      />
+      <MuiTelInput
+      fullWidth
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='US'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      slotProps={{
+        input: {
+          readOnly: true,
+          ...testProp,
+        },
+      }}
+      disableDropdown={disableDropdown}
+    />
     );
 <%={{ }}=%>     {{! revert delimiters for mustache }}
 

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 Grid2, { type GridSize } from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -28,7 +28,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 
@@ -49,14 +48,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <Grid container spacing={1}>
-        <Grid item xs={12} md={aSize} className={classes.colStyles}>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <Grid2 container spacing={1}>
+        <Grid2 size={{ xs: 12, md: aSize }} className={classes.colStyles}>
           {childrenToRender[0]}
-        </Grid>
-        <Grid item xs={12} md={bSize} className={classes.colStyles}>
+        </Grid2>
+        <Grid2 size={{ xs: 12, md: bSize }} className={classes.colStyles}>
           {childrenToRender[1]}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
     </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 Grid2 from '@mui/material/Grid2';
+import makeStyles from '@mui/styles/makeStyles';
 
 interface OneColumnProps {
   // If any, enter additional props that only exist on this component
@@ -20,12 +20,15 @@ export default function OneColumn(props: OneColumnProps) {
   const { children } = props;
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12} className={classes.colStyles}>
+    <Grid2 container spacing={2}>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
         {children.map(child => {
           return child;
         })}
-      </Grid>
-    </Grid>
+      </Grid2>
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Grid2>
   );
 }

package/src/tasks/create/templates/SDK-React/template/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -3,6 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { historyData } from './mock';
 
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -13,26 +23,6 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  window.PCore = {
-    ...window.PCore,
-    getDataApiUtils: (): any => {
-      return {
-        getData: (): any => {
-          return new Promise(resolve => {
-            resolve(historyData);
-          });
-        }
-      };
-    },
-    getConstants: (): any => {
-      return {
-        CASE_INFO: {
-          CASE_INFO_ID: 'caseInfo.ID'
-        }
-      };
-    }
-  };
-
   const props = {
     label: 'Case history',
 

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

@@ -1,29 +1,32 @@
 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 { Theme } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import 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: Theme) =>
   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',
@@ -70,8 +73,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const dataViewName = 'D_pyWorkHistory';
   const context = thePConn.getContextName();
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  function computeRowData(rows: object[]): void {
+    const theRowData: object[] = [];
 
     rows.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
@@ -146,14 +149,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     // Note: using rowData.current since we're using useRef as a mutatable
     //  value that's only updated when it changes.
     if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: Object[], index) => {
+      rowData.current.forEach((dataRow: object[], index) => {
         // using dataRow[0]-dataRow[1] as the array key since it's a unique value
         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/CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/widget/PAGE/demo.stories.tsx.mustache

@@ -12,27 +12,17 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-    window.PCore = {
-    ...window.PCore,
-    getDataApiUtils: (): any => {
-      return {
-        getData: () => {
-          return new Promise(resolve => {
-            resolve(worklistData);
-          });
-        }
-      };
-    },
-    getConstants: (): any => {
-      return {
-        CASE_INFO: {
-          INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
-        }
-      };
-    },
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
   };
+};
 
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     datasource: configProps.datasource,
     whatsnewlink: configProps.whatsnewlink,

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',
@@ -73,7 +79,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const [waitingForData, setWaitingForData] = useState<boolean>(true);
   const thePConn = getPConnect();
   const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
-  const dataViewName = 'D_pyWorkHistory';
+  const dataViewName = 'D_pyMyWorkList';
   const context = thePConn.getContextName();
 
   const rowData: any = useRef([]);
@@ -103,10 +109,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     } // 2nd and 3rd args empty string until typedef marked correctly
   ];
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  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 = [];
@@ -183,15 +189,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     // Note: using rowData.current since we're using useRef as a mutatable
     //  value that's only updated when it changes.
     if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: Object[], index) => {
+      rowData.current.forEach((dataRow: object[], index) => {
         // using dataRow[0]-dataRow[1] as the array key since it's a unique value
         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/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

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

@@ -3,6 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { caseOpConfig, operatorDetails } from './mock';
 
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -13,26 +23,6 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-  window.PCore = {
-    ...window.PCore,
-    getUserApi: (): any => {
-      return {
-        getOperatorDetails: () => {
-          return new Promise(resolve => {
-            resolve(operatorDetails);
-          });
-        }
-      };
-    },
-    getLocaleUtils: (): any => {
-      return {
-        getLocaleValue: val => {
-          return val;
-        }
-      };
-    }
-  };
-  
   const props = {
     getPConnect: () => {
       return {

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 Grid2 from '@mui/material/Grid2';
+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)
   }
 }));
 
@@ -117,7 +125,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           }
         ];
       } else {
-        // eslint-disable-next-line no-console
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
         );
@@ -167,25 +174,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
     // There are fields, so build the grid.
     return (
-      <Grid container className={classes.popover} spacing={1}>
-        <Grid item xs={12}>
+      <Grid2 container className={classes.popover} spacing={1}>
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant='h6'>{caseOpName}</Typography>
-        </Grid>
+        </Grid2>
         {popoverFields.map(field => {
           return (
             <React.Fragment key={field.id}>
-              <Grid container item xs={12} spacing={1}>
-                <Grid item xs={6}>
+              <Grid2 container size={{ xs: 12 }} spacing={1}>
+                <Grid2 size={{ xs: 12 }}>
                   <Typography variant='caption'>{field.name}</Typography>
-                </Grid>
-                <Grid item xs={6}>
+                </Grid2>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='subtitle2'>{field.value}</Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </React.Fragment>
           );
         })}
-      </Grid>
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Grid2>
     );
   }
 

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 = {