@pega/dx-component-builder-sdk 25.1.16 → 26.1.10

package/package.json

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

package/src/constants.js

@@ -315,6 +315,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Email',
         value: 'Email'
       },
+      {
+        name: 'EmbeddedData Multi',
+        value: 'EmbeddedDataMulti'
+      },
       {
         name: 'Field Group',
         value: 'Group'

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/utils.ts.mustache

@@ -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/src/tasks/create/templates/Constellation/template/DETAILS/DetailsRender.tsx.mustache

@@ -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/src/tasks/create/templates/Constellation/template/DETAILS-region/DetailsRender.tsx.mustache

@@ -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/src/tasks/create/templates/Constellation/template/FORM/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/src/tasks/create/templates/Constellation/template/FORM-region/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/src/tasks/create/templates/SDK-React/field/Boolean/index.tsx.mustache

@@ -6,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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -30,6 +32,11 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   showImageDescription: string;
   renderMode: string;
   image: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
 }
 
 const useStyles = makeStyles(() => ({
@@ -61,7 +68,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     testId,
     required,
     disabled,
-    status,
     helperText,
     validatemessage,
     displayMode,
@@ -82,18 +88,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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
@@ -114,11 +130,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [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 => {
@@ -258,7 +274,7 @@ const handleCheckboxChange = (event, item) => {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <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/src/tasks/create/templates/SDK-React/field/Date/demo.stories.tsx.mustache

@@ -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 {{COMPONENT_CLASS_NAME}} from './index';
@@ -41,7 +44,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

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

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -19,6 +19,12 @@ function getFormattedDate(date) {
 
 interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
           label={label}
           disabled={disabled}
@@ -100,13 +109,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
           onChange={handleChange}
         />
-      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -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 {{COMPONENT_CLASS_NAME}} from './index';
@@ -40,7 +44,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
+   return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

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

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
           // fullWidth
           // autoOk
@@ -109,12 +118,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
-      </LocalizationProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -6,6 +6,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -19,6 +21,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   decimalPrecision?: number;
   showGroupSeparators?: boolean;
   formatter?: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -35,7 +43,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     helperText,
@@ -46,7 +53,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     showGroupSeparators,
     testId,
     placeholder,
-    formatter
+    formatter,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -54,7 +63,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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
+  });
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -81,16 +98,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   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') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function decimalOnBlur() {
     handleEvent(actions, 'changeNblur', propName, values);
@@ -125,7 +140,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
         customInput={TextField}
       />

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

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -17,6 +19,12 @@ interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     testId,
@@ -42,18 +49,26 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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') {
@@ -115,7 +130,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         fixedDecimalScale={allowDecimals}
 		    {{! pick new delimiters for mustache }}
 	      {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
 		    <%={{ }}=%>     {{! revert delimiters for mustache }}
         customInput={TextField}
       />

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

@@ -6,6 +6,8 @@ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -18,6 +20,12 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   currencyISOCode?: string;
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -32,7 +40,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     disabled,
     value = '',
     validatemessage,
-    status,
     // onChange,
     // onBlur,
     readOnly,
@@ -43,7 +50,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     hideLabel,
     placeholder,
     showGroupSeparators,
-    decimalPrecision
+    decimalPrecision,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -51,7 +60,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   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
+  });
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
@@ -67,18 +84,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   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') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -116,7 +129,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         suffix='%'
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         <%={{ }}=%>     {{! revert delimiters for mustache }}
         customInput={TextField}
       />