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

package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+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';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -32,11 +34,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
   const helperTextToDisplay = validatemessage || helperText;
 
-  // console.log(`Integer: label: ${label} value: ${value}`);
+  const [inputValue, setInputValue] = useState('');
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -68,7 +79,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     }
 
     // Pass through to the Constellation change handler
-    onChange(event);
+    setInputValue(event.target.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
   }
 
   return (
@@ -82,10 +97,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         required={required}
         disabled={disabled}
         onChange={intOnChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         type='text'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import MenuItem from '@material-ui/core/MenuItem';
+import { TextField } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
 import isDeepEqual from 'fast-deep-equal/react';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface IOption {
@@ -135,7 +136,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       const optionsList = [...list];
       optionsList.unshift({
         key: placeholder,
-        value: thePConn.getLocalizedValue(placeholder, '', '')
+        value: thePConn.getLocalizedValue(placeholder)
       }); // 2nd and 3rd args empty string until typedef marked correctly
       setOptions(optionsList);
     }
@@ -170,7 +171,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
@@ -217,7 +218,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
-        placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
+        placeholder={thePConn.getLocalizedValue(placeholder, '', '')}
         size='small'
         required={required}
         disabled={disabled}

package/src/tasks/create/templates/SDK-React/field/Picklist-Autocomplete/index.tsx.mustache

@@ -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';
@@ -8,6 +8,7 @@ import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/d
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface IOption {
@@ -154,7 +155,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     }
   }, []);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -198,7 +199,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         getOptionLabel={(option: IOption) => {
           return option.value ? option.value : '';
         }}
-        getOptionSelected={(option: any) => {
+        isOptionEqualToValue={(option: any) => {
           return option.value ? option.value : '';
         }}
         <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/index.tsx.mustache

@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
-import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@material-ui/core';
+import { Radio, RadioGroup, FormControl, FormControlLabel, FormLabel, FormHelperText } from '@mui/material';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
@@ -65,7 +66,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     setSelectedButton(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}

package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/src/tasks/create/templates/SDK-React/field/Text-Email/index.tsx.mustache

@@ -1,8 +1,11 @@
-import { InputAdornment, TextField } from '@material-ui/core';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import { useEffect, useState } from 'react';
+import { InputAdornment, TextField } from '@mui/material';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
 
 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';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -18,14 +21,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -33,9 +35,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -53,6 +66,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <TextField
@@ -63,11 +85,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         type='email'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+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';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     fieldMetadata,
@@ -35,11 +37,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const [inputValue, setInputValue] = useState('');
+
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -59,6 +70,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <TextField
@@ -72,11 +92,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -1,5 +1,5 @@
-import MuiPhoneNumber from 'material-ui-phone-number';
 import { useEffect, useState } from 'react';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -50,7 +50,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -63,11 +63,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return (
       <div>
         <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-          <MuiPhoneNumber
+          <MuiTelInput
             fullWidth
             helperText={helperTextToDisplay}
             placeholder={placeholder ?? ''}
             size='small'
+            defaultCountry='US'
             required={required}
             disabled={disabled}
             onChange={onChange}
@@ -101,13 +102,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <MuiPhoneNumber
+      <MuiTelInput
         fullWidth
         variant='outlined'
         helperText={helperTextToDisplay}
         placeholder={placeholder ?? ''}
         size='small'
-        defaultCountry='us'
+        defaultCountry='US'
         required={required}
         disabled={disabled}
         onChange={handleChange}

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -1,7 +1,10 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const TextInput = getComponentFromMap('TextInput');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -34,7 +36,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  const [inputValue, setInputValue] = useState('');
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -52,6 +64,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     'data-test-id': testId
   };
 
+  const handleChange = event => {
+    setInputValue(event?.target?.value);
+  };
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <TextField
@@ -63,11 +83,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         size='small'
         required={required}
         disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
         error={status === 'error'}
         label={label}
-        value={value}
+        value={inputValue}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         InputProps={{ inputProps: { ...testProp } }}

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -1,10 +1,13 @@
-import { KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
@@ -19,10 +22,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
   const helperTextToDisplay = validatemessage || helperText;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -42,11 +48,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
-    onChange({ value: theValue });
+    handleEvent(actions, 'changeNblur', propName, theValue);
   };
 
   let timeValue: any = null;
-  if (value) {
+  if (value && Object.keys(value).length) {
     const timeArray = value.split(':').map(itm => Number(itm));
     timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
   }
@@ -58,31 +64,35 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardTimePicker
-          variant='inline'
-          inputVariant='outlined'
-          placeholder='hh:mm am'
-          keyboardIcon={<AccessTimeIcon />}
-          fullWidth
-          required={required}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
+          // keyboardIcon={<AccessTimeIcon />}
+          // fullWidth
+
           disabled={disabled}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
           minutesStep={5}
-          size='small'
           label={label}
-          autoOk
-          mask='__:__ _m'
+          // autoOk
+          // mask='__:__ _m'
           format='hh:mm a'
           value={timeValue}
           onChange={handleChange}
-          {{! pick new delimiters for mustache }}
-          {{=<% %>=}}
-          InputProps={{ inputProps: { ...testProp } }}
-          <%={{ }}=%>     {{! revert delimiters for mustache }}
+    {{! pick new delimiters for mustache }}
+    {{=<% %>=}}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              placeholder: 'hh:mm am',
+              required,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { ...testProp }
+            }
+          }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/template/DETAILS/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(), {