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

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/ToDo.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-shadow */
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Box,
   Button,
@@ -13,19 +13,53 @@ import {
   ListItem,
   ListItemText,
   ListItemSecondaryAction
-} from '@material-ui/core';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import ArrowForwardIosOutlinedIcon from '@material-ui/icons/ArrowForwardIosOutlined';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+} from '@mui/material';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './ToDo.css';
 
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
+  return PCore.getDataPageUtils()
+    .getDataAsync(
+      datapage,
+      context,
+      {},
+      {
+        pageNumber: 1,
+        pageSize: numberOfRecords
+      },
+      {
+        select: Object.keys(fields).map(key => ({ field: PCore.getAnnotationUtils().getPropertyName(fields[key]) }))
+      },
+      {
+        invalidateCache: true,
+        additionalApiParams: {
+          includeTotalCount
+        }
+      }
+    )
+    .then(response => {
+      return {
+        ...response,
+        data: (Array.isArray(response?.data) ? response.data : []).map(row =>
+          Object.keys(fields).reduce((obj, key) => {
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            return obj;
+          }, {})
+        )
+      };
+    });
+};
+
 interface ToDoProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   datasource?: any;
@@ -37,7 +71,7 @@ interface ToDoProps extends PConnProps {
   itemKey?: string;
   showTodoList?: boolean;
   type?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   context?: string;
   isConfirm?: boolean;
 }
@@ -81,12 +115,20 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ToDo(props: ToDoProps) {
-  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = props;
+  const {
+    getPConnect,
+    context,
+    datasource = [],
+    headerText = 'To do',
+    showTodoList = true,
+    myWorkList = {},
+    type = 'worklist',
+    isConfirm = false
+  } = props;
 
   const CONSTS = PCore.getConstants();
 
   const bLogging = true;
-  let assignmentCount = 0;
   const currentUser = PCore.getEnvironmentInfo().getOperatorName();
   const currentUserInitials = Utils.getInitials(currentUser);
   const assignmentsSource = datasource?.source || myWorkList?.source;
@@ -106,17 +148,36 @@ export default function ToDo(props: ToDoProps) {
   const showlessLocalizedValue = localizedVal('show_less', 'CosmosFields');
   const showMoreLocalizedValue = localizedVal('show_more', 'CosmosFields');
   const canPerform = assignments?.[0]?.canPerform === 'true' || assignments?.[0]?.canPerform === true;
-  // const { setOpen } = useNavBar();
+  const [count, setCount] = useState(0);
+
+  const {
+    WORK_BASKET: { MY_WORK_LIST }
+  } = PCore.getConstants();
 
   function initAssignments(): any[] {
     if (assignmentsSource) {
-      assignmentCount = assignmentsSource.length;
       return topThreeAssignments(assignmentsSource);
     }
     // turn off todolist
     return [];
   }
 
+  const deferLoadWorklistItems = useCallback(
+    responseData => {
+      setCount(responseData.totalCount);
+      setAssignments(responseData.data);
+    },
+    [MY_WORK_LIST]
+  );
+
+  useEffect(() => {
+    if (Object.keys(myWorkList).length && myWorkList.datapage) {
+      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, 3, true, context).then(responseData => {
+        deferLoadWorklistItems(responseData);
+      });
+    }
+  }, []);
+
   const getAssignmentId = assignment => {
     return type === CONSTS.TODO ? assignment.ID : assignment.id;
   };
@@ -137,7 +198,7 @@ export default function ToDo(props: ToDoProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -146,12 +207,18 @@ export default function ToDo(props: ToDoProps) {
 
   function _showMore() {
     setBShowMore(false);
-    setAssignments(assignmentsSource);
+    if (type === CONSTS.WORKLIST && count && count > assignments.length && !assignmentsSource) {
+      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, count, false, context).then(response => {
+        setAssignments(response.data);
+      });
+    } else {
+      setAssignments(assignmentsSource);
+    }
   }
 
   function _showLess() {
     setBShowMore(true);
-    setAssignments(topThreeAssignments(assignmentsSource));
+    setAssignments(assignments => assignments.slice(0, 3));
   }
 
   function clickGo(assignment) {
@@ -223,12 +290,15 @@ export default function ToDo(props: ToDoProps) {
     );
   };
 
+  // eslint-disable-next-line no-nested-ternary
+  const getCount = () => (assignmentsSource ? assignmentsSource.length : type === CONSTS.WORKLIST ? count : 0);
+
   const toDoContent = (
     <>
       {showTodoList && (
         <CardHeader
           title={
-            <Badge badgeContent={assignmentCount} overlap='rectangular' color='primary'>
+            <Badge badgeContent={getCount()} overlap='rectangular' color='primary'>
               <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
@@ -249,7 +319,7 @@ export default function ToDo(props: ToDoProps) {
             </div>
             {(!isConfirm || canPerform) && (
               <div style={{ marginLeft: 'auto' }}>
-                <IconButton id='go-btn' onClick={() => clickGo(assignment)}>
+                <IconButton id='go-btn' onClick={() => clickGo(assignment)} size='large'>
                   <ArrowForwardIosOutlinedIcon />
                 </IconButton>
               </div>
@@ -267,7 +337,7 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge badgeContent={assignmentCount} overlap='rectangular' color='primary'>
+                <Badge badgeContent={getCount()} overlap='rectangular' color='primary'>
                   <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
@@ -280,7 +350,7 @@ export default function ToDo(props: ToDoProps) {
                 <ListItem key={getAssignmentId(assignment)} dense divider onClick={() => clickGo(assignment)}>
                   <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
                   <ListItemSecondaryAction>
-                    <IconButton onClick={() => clickGo(assignment)}>
+                    <IconButton onClick={() => clickGo(assignment)} size='large'>
                       <ArrowForwardIosOutlinedIcon />
                     </IconButton>
                   </ListItemSecondaryAction>
@@ -294,7 +364,7 @@ export default function ToDo(props: ToDoProps) {
       {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <>{toDoContent}</>}
 
-      {assignmentCount > 3 && (
+      {getCount() > 3 && (
         <Box display='flex' justifyContent='center'>
           {bShowMore ? (
             <Button color='primary' onClick={_showMore}>

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +16,7 @@ const meta: Meta<typeof PegaDxilMyBoolean> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyBoolean>;
 
-export const BasePegaDxilMyBoolean: Story = args => {
+export const BasePegaDxilMyBoolean: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -31,7 +30,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => { /* nothing */}

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

@@ -87,7 +87,6 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
         handleEvent(actions, "changeNblur", propName, event.target.checked);
       }}
       onBlur={(event: { target: { checked: any; }; }) => {
-        // @ts-ignore
         pConn.getValidationApi().validate(event.target.checked);
       }}
       data-testid={testId}
@@ -98,15 +97,17 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
       <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
+    return (
+      <StyledPegaDxilMyBooleanWrapper>
+       {displayComponent}
+      </StyledPegaDxilMyBooleanWrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/mock.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: true,
   label: 'Boolean label',

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

@@ -104,8 +104,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
   }, [validatemessage, hasSuggestions, myStatus]);
 
   // calculate min and max range of calendar
-  // @ts-ignore
-  const currentYear = getFullYear();
+  const currentYear = getFullYear(null);
 
   const yearFromValue = getFullYear(value);
   const maxDate = getMaxDate(
@@ -161,7 +160,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
      }
 
 
-    if (formatter !== "" && formatExists(formatter)){
+    if (formatter !== "" && formatExists(formatter)) {
         // @ts-ignore
         const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
@@ -225,8 +224,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
           hideLabel={hideLabel}
           testId={testId}
           additionalProps={textAdditionalProps}
-          // @ts-ignore
-          customFormat={getDateFormat(locale)}
+          customFormat={getDateFormat(locale, null)}
         />
       </StyledPegaDxilMyDateWrapper>
     );

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/demo.stories.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
@@ -15,7 +14,7 @@ const meta: Meta<typeof PegaDxilMyInteger> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyInteger>;
 
-export const BasePegaDxilMyInteger: Story = args => {
+export const BasePegaDxilMyInteger: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/event-utils.ts

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

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

@@ -112,21 +112,17 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
 
   useEffect(() => {
     if (displayAs === 'slider' && value === '') {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, sliderDefaultValue);
     }
   }, [actions, displayAs, propName, sliderDefaultValue, value]);
 
   const { decimalPrecision, currencyDecimalPrecision = 'auto', currencyISOCode = 'USD' } = props;
-  let noOfDecimals = parseInt(decimalPrecision, 10);
-  // @ts-ignore
+  let noOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(noOfDecimals)) noOfDecimals = undefined;
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
   let unit;
-  let unitPlacement;
 
-  // @ts-ignore
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode as string)) {
     switch (formatter) {
       case 'Decimal': {
         break;
@@ -134,7 +130,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
       case 'Percentage': {
         showGroupSeparators = false;
         unit = '%';
-        unitPlacement = 'after';
         break;
       }
       case 'Decimal-Auto': {
@@ -178,7 +173,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
             notation
           }}
           unit={unit}
-          unitPlacement={unitPlacement}
         />
       );
 
@@ -230,13 +224,11 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
     setIntegerValue(enteredValue);
     // const parsedValue = integerValue !== '' ? Number(integerValue) : '';
     if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
       hasValueChange.current = true;
     }
     // In case of stepper variation there is no blur event as component is never focussed unless forced. Need to update redux on change.
     if (displayAs === 'stepper') {
-      // @ts-ignore
       handleEvent(actions, 'changeNblur', propName, enteredValue !== '' ? Number(enteredValue) : '');
     }
   }
@@ -268,7 +260,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
       ticks={showTicks && { [min]: `${min}`, [max]: `${max}` }}
       onChange={(selectedValue) => {
         onChangeHandler(selectedValue.toString());
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, selectedValue);
       }}
     />
@@ -295,7 +286,6 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
       }}
       onBlur={() => {
         if (!readOnly && (hasValueChange.current || !value)) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, integerValue !== '' ? Number(integerValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyInteger/mock.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Integer Sample',
@@ -12,7 +11,9 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: '',
+  variant: ''
 };
 
 export const stateProps = {

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

@@ -1,12 +1,13 @@
 /* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 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 { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import { makeStyles } from '@material-ui/core/styles';
+
 import StyledPegaDxilMyBooleanWrapper from './styles';
 
 interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
@@ -81,7 +82,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     }
   }, [thePConn]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
@@ -166,7 +167,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
-      <FormControl required={required} error={status === 'error'}>
+      <FormControl variant='standard' required={required} error={status === 'error'}>
         {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
         <FormGroup>{theCheckbox}</FormGroup>
         <FormHelperText>{helperTextToDisplay}</FormHelperText>

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

@@ -1,11 +1,12 @@
-import { TextField } from '@material-ui/core';
 import { useState } from 'react';
 import { NumericFormat } from 'react-number-format';
+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 { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+
 import StyledPegaDxilMyCurrencyWrapper from './styles';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
@@ -72,7 +73,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   let currencyProp = {};
   currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 

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

@@ -1,10 +1,15 @@
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
+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';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-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 StyledPegaDxilMyDateWrapper from './styles';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
@@ -24,22 +29,9 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const {
-    getPConnect,
-    label,
-    required,
-    disabled,
-    value = '',
-    validatemessage,
-    status,
-    onChange,
-    onBlur,
-    readOnly,
-    testId,
-    helperText,
-    displayMode,
-    hideLabel
-  } = props;
+  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -54,7 +46,7 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });
@@ -81,41 +73,33 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
 
   const handleChange = date => {
     if (date && date.isValid()) {
-      onChange({ value: getFormattedDate(date) });
-    }
-  };
-
-  const handleAccept = date => {
-    if (date && date.isValid()) {
+      setDateValue(date);
       handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
     }
   };
 
   return (
     <StyledPegaDxilMyDateWrapper>
-      <MuiPickersUtilsProvider utils={DayjsUtils}>
-        <KeyboardDatePicker
-          disableToolbar
-          variant='inline'
-          inputVariant='outlined'
-          placeholder={dateFormatInfo.dateFormatStringLC}
-          format={dateFormatInfo.dateFormatString}
-          mask={dateFormatInfo.dateFormatMask}
-          fullWidth
-          autoOk
-          required={required}
-          disabled={disabled}
-          error={status === 'error'}
-          helperText={helperTextToDisplay}
-          size='small'
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
           label={label}
-          value={value || null}
+          disabled={disabled}
+          format={dateFormatInfo.dateFormatString}
+          value={dateValue}
+          slotProps={{
+            textField: {
+              required,
+              variant: 'outlined',
+              placeholder: dateFormatInfo.dateFormatStringLC,
+              error: status === 'error',
+              helperText: helperTextToDisplay,
+              size: 'small',
+              InputProps: { ...testProp }
+            }
+          }}
           onChange={handleChange}
-          onBlur={!readOnly ? onBlur : undefined}
-          onAccept={handleAccept}
-          InputProps={{ ...testProp }}
         />
-      </MuiPickersUtilsProvider>
+      </LocalizationProvider>
     </StyledPegaDxilMyDateWrapper>
   );
 }