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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.242.1",
+  "version": "0.242.2",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
@@ -78,27 +80,29 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <DatePicker
-      label={label}
-      disabled={disabled}
-      format={dateFormatInfo.dateFormatString}
-      value={dateValue}
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
+          label={label}
+          disabled={disabled}
+          format={dateFormatInfo.dateFormatString}
+          value={dateValue}
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
-      slotProps={{
-        textField: {
-          required,
-          variant: 'outlined',
-          placeholder: dateFormatInfo.dateFormatStringLC,
-          error: status === 'error',
-          helperText: helperTextToDisplay,
-          size: 'small',
-          InputProps: { ...testProp }
-        }
-      }}
+          slotProps={{
+            textField: {
+              required,
+              variant: 'outlined',
+              placeholder: dateFormatInfo.dateFormatStringLC,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { ...testProp }
+            }
+          }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
-      onChange={handleChange}
-    />
+          onChange={handleChange}
+        />
+      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs, { Dayjs } from 'dayjs';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
@@ -8,7 +10,6 @@ import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-compon
 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 {
@@ -72,7 +73,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <DateTimePicker
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DateTimePicker
           // fullWidth
           // autoOk
           disabled={disabled}
@@ -96,7 +98,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
             }
           }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
-      />
+        />
+      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -1,5 +1,7 @@
 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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -58,6 +60,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           // keyboardIcon={<AccessTimeIcon />}
           // fullWidth
@@ -85,6 +88,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           }}
     <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
+      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { pyReviewRaw } from './mock';
@@ -26,26 +27,28 @@ const renderField = resolvedProps => {
 
   const variant = displayMode === 'LABELS_LEFT' ? '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