@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 // @ts-nocheck
 import { useState, useEffect, useRef } from 'react';
 import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import { useMemo } from 'react';
 import { RadioButton, RadioButtonGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
@@ -77,7 +76,7 @@ function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
   const propName: string = stateProps.value;
   const configProps = pConn.getConfigProps();
   const className = pConn.getCaseInfo().getClassName();
- 
+
   // @ts-ignore
   let configProperty = pConn.getRawMetadata()?.config?.value || '';
   configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/date.ts

@@ -64,7 +64,6 @@ const types = ['fromNow', 'customFormat'];
 function DateFormatter(
   value,
   // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/no-shadow
   { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}
 ) {
   if (!value) return value;
@@ -108,7 +107,6 @@ function DateFormatter(
 export function format(value, options) {
   if (!value) return null;
   const { type, locale, timezone, formatter, translate } = options;
-  // eslint-disable-next-line @typescript-eslint/no-shadow
   const { format, variant } = (constellationToCosmosFormatterMap.get(type) as any).get(formatter);
   return formatDateTime(parseToDate(value), {
     t: translate,

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

@@ -1,5 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetStateAction } from 'react';
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
 import get from 'lodash.get';

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/repeat-utils.ts

@@ -1,5 +1,3 @@
-/* eslint-disable sonarjs/no-collapsible-if */
-/* eslint-disable func-names */
 // @ts-nocheck
 import { splitConditionTree } from '@pega/cosmos-react-condition-builder';
 import cloneDeep from 'lodash/cloneDeep.js';
@@ -54,7 +52,6 @@ export function launchLocalAction(getPConnect, rowContext, action, cb) {
     // "ASSIGN-WORKLIST ON8TTL-C11NGALL-WORK LAT-3!ENTERINFO_FLOW_1" use case
     const [assignKey] = assignmentID.split('!');
     const [, className, workId] = assignKey.split(' ');
-    // eslint-disable-next-line prefer-template
     caseID = className + ' ' + workId;
   }
   openLocalAction(action.ID, {
@@ -271,7 +268,6 @@ export function getDescriptorsFieldName(property, pageClass) {
   return property;
 }
 
-// eslint-disable-next-line @typescript-eslint/default-param-last, sonarjs/cognitive-complexity
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '', getPConnect) {
   const queryFields = [];
   // Descriptors can be configured only for single selectionMode properties

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

@@ -115,7 +115,7 @@ export function usePaginate() {
 }
 
 export function useDeepMemo(memoFn: any, key: any) {
-  const ref = useRef();
+  const ref = useRef<{ key: any; value: any } | undefined>(undefined);
   // @ts-ignore
   if (!ref.current || !equal(key, ref.current.key)) {
     // @ts-ignore

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTextInput/StatusWork.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

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

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
 import type { PConnProps } from './PConnProps';

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyDetails/utils.js

@@ -135,9 +135,7 @@ export function getInstructions(pConnect, instructions = 'casestep') {
 
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
-    /* eslint-disable no-console */
     console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
-    /* eslint-enable no-console */
     return undefined;
   }
 

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyForm/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

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

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Button, useToaster } from '@pega/cosmos-react-core';
 

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/HighlightRender.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
 import type { PConnProps } from './PConnProps';

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/StatusWork.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/mock.ts

@@ -1,4 +1,3 @@
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnForm/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

package/tests/assets/sdk-r/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageCaseWidget/Avatar.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import  React from 'react';
 import { useEffect, useState } from 'react';
 import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';

package/tests/assets/sdk-r/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -1,5 +1,3 @@
-
-/* eslint-disable no-nested-ternary */
 import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyBoolean",
   "type": "Field",
   "subtype": "Boolean",

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
@@ -7,6 +6,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFormControlSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyBooleanWrapper from './styles';
 
@@ -31,6 +32,11 @@ interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   showImageDescription: string;
   renderMode: string;
   image: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
 }
 
 const useStyles = makeStyles(() => ({
@@ -62,7 +68,6 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     testId,
     required,
     disabled,
-    status,
     helperText,
     validatemessage,
     displayMode,
@@ -83,18 +88,28 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     imageSize,
     showImageDescription,
     renderMode,
-    image
+    image,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
     
   const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [theSelectedButton, setSelectedButton] = useState(value);
   const classes = useStyles();
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   const [checked, setChecked] = useState<any>(false);
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly
@@ -115,11 +130,11 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
+    return <FieldValueList name={caption} value={value ? trueLabel : falseLabel} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
+    return <FieldValueList name={caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -256,7 +271,7 @@ const handleCheckboxChange = (event, item) => {
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
-      <FormControl variant='standard' required={required} error={status === 'error'}>
+      <FormControl variant='standard' required={required} error={status === 'error'} sx={getFormControlSx(status)}>
         {!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/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyCurrency",
   "type": "Field",
   "subtype": "Decimal-Currency",

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

@@ -6,6 +6,8 @@ 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyCurrencyWrapper from './styles';
 
@@ -17,6 +19,12 @@ interface PegaDxilMyCurrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   currencyISOCode?: string;
   allowDecimals: boolean;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -33,7 +41,6 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     testId,
@@ -42,18 +49,26 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     hideLabel,
     currencyISOCode = 'USD',
     placeholder,
-    allowDecimals
+    allowDecimals,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const [values, setValues] = useState(value.toString());
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
+  const testProps: any = { 'data-test-id': testId };
 
   useEffect(() => {
     setValues(value.toString());
@@ -78,7 +93,7 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -113,7 +128,8 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
         {...currencyProp}
         decimalScale={allowDecimals !== false ? 2 : 0}
         fixedDecimalScale={allowDecimals}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         customInput={TextField}
       />
     </StyledPegaDxilMyCurrencyWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDate/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyDate",
   "type": "Field",
   "subtype": "Date",

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

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyDate from './index';
@@ -41,7 +44,11 @@ export const BasePegaDxilMyDate: Story = args => {
     }
   };
 
-  return <PegaDxilMyDate {...props} {...args} />;
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <PegaDxilMyDate {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 BasePegaDxilMyDate.args = {

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

@@ -1,7 +1,5 @@
 import { useEffect, 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';
@@ -9,6 +7,8 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyDateWrapper from './styles';
 
@@ -19,6 +19,12 @@ function getFormattedDate(date) {
 
 interface PegaDxilMyDateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -29,14 +35,22 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const { getPConnect, label, required, disabled, value, validatemessage, readOnly, testId, helperText, displayMode, hideLabel, showFieldMessage, messageConfig = {} } = props;
 
   const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   // Start with default dateFormatInfo
   const dateFormatInfo = dateFormatInfoDefault;
@@ -54,7 +68,7 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -69,11 +83,7 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     if (date && date.isValid()) {
@@ -84,7 +94,6 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
 
   return (
     <StyledPegaDxilMyDateWrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
           label={label}
           disabled={disabled}
@@ -98,12 +107,12 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
           onChange={handleChange}
         />
-      </LocalizationProvider>
     </StyledPegaDxilMyDateWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyDateTime",
   "type": "Field",
   "subtype": "DateTime",

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

@@ -1,4 +1,8 @@
 import { useState } from 'react';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyDateTime from './index';
@@ -40,7 +44,11 @@ export const BasePegaDxilMyDateTime: Story = args => {
     }
   };
 
-  return <PegaDxilMyDateTime {...props} {...args} />;
+   return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <PegaDxilMyDateTime {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 BasePegaDxilMyDateTime.args = {

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

@@ -1,7 +1,5 @@
 import { useEffect, 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 DateFormatter from '@pega/react-sdk-components/lib/components/helpers/formatters/Date';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
@@ -9,11 +7,19 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 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 useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyDateTimeWrapper from './styles';
 
 interface PegaDxilMyDateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -24,7 +30,7 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, readOnly, testId, helperText, displayMode, hideLabel, showFieldMessage, messageConfig = {} } = props;
 
   const environmentInfo = PCore.getEnvironmentInfo();
   const timezone = environmentInfo && environmentInfo.getTimeZone();
@@ -34,7 +40,15 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   // Start with default dateFormatInfo
   const dateFormatInfo = dateFormatInfoDefault;
@@ -52,7 +66,7 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -67,14 +81,10 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
-    const timeZoneDateTime = dayjs.tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
     const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
@@ -87,7 +97,6 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
 
   return (
     <StyledPegaDxilMyDateTimeWrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
           // fullWidth
           // autoOk
@@ -107,11 +116,11 @@ export default function PegaDxilMyDateTime(props: PegaDxilMyDateTimeProps) {
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
         />
-      </LocalizationProvider>
     </StyledPegaDxilMyDateTimeWrapper>
   );
 }