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

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPicklist/index.tsx

@@ -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 StyledPegaDxilMyPicklistWrapper from './styles';
 
 interface IOption {
@@ -135,7 +136,7 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
       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 PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
 
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
@@ -217,7 +218,7 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
         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/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/index.tsx

@@ -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 StyledPegaDxilMyRadiobuttonsWrapper from './styles';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
@@ -65,7 +66,7 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     setSelectedButton(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MySearchbox/index.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';
@@ -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 StyledPegaDxilMySearchboxWrapper from './styles';
 
 interface IOption {
@@ -154,7 +155,7 @@ export default function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
     }
   }, []);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -196,7 +197,7 @@ export default function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
         getOptionLabel={(option: IOption) => {
           return option.value ? option.value : '';
         }}
-        getOptionSelected={(option: any) => {
+        isOptionEqualToValue={(option: any) => {
           return option.value ? option.value : '';
         }}
         fullWidth

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/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 StyledPegaDxilMyTextWrapper from './styles';
 
 interface PegaDxilMyTextProps extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/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 StyledPegaDxilMyTextInputWrapper from './styles';
 
 interface PegaDxilMyTextInputProps extends PConnFieldProps {
@@ -51,7 +52,7 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -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 StyledPegaDxilMyTimeOfDayWrapper from './styles';
 
 interface PegaDxilMyTimeOfDayProps extends PConnFieldProps {
@@ -19,10 +22,13 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
   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 PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
 
   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,28 +64,32 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
 
   return (
     <StyledPegaDxilMyTimeOfDayWrapper>
-      <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}
-          InputProps={{ inputProps: { ...testProp } }}
+          slotProps={{
+            textField: {
+              variant: 'outlined',
+              placeholder: 'hh:mm am',
+              required,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { ...testProp }
+            }
+          }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </StyledPegaDxilMyTimeOfDayWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx

@@ -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 StyledPegaDxilMyUrlWrapper from './styles';
 
 interface PegaDxilMyUrlProps extends PConnFieldProps {
@@ -17,14 +20,13 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
   const TextInput = getComponentFromMap('TextInput');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -34,7 +36,17 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
   } = 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 PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
     'data-test-id': testId
   };
 
+  const handleChange = event => {
+    setInputValue(event?.target?.value);
+  };
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <StyledPegaDxilMyUrlWrapper>
       <TextField
@@ -63,11 +83,11 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
         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}
         InputProps={{ inputProps: { ...testProp } }}
       />
     </StyledPegaDxilMyUrlWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/index.tsx

@@ -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 PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
   // 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/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/mock.ts

@@ -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/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/demo.stories.tsx

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyPage/OneColumn.tsx

@@ -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/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/index.tsx

@@ -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 PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDet
 
   // 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/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnDetails/mock.ts

@@ -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/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx

@@ -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 PegaDxilMyTwoColumnForm from './index';
 import { pyReviewRaw } from './mock';
@@ -24,24 +25,26 @@ type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
 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 = '';
+  
   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>
     );
 
   if (label === 'Email')