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

package/tests/assets/sdk-r/components/create/override-sdk/field/ObjectReference/utils.ts

@@ -2,9 +2,13 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 export const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-const getLeafNameFromPropertyName = property => property?.substr(property.lastIndexOf('.'));
+const getLeafNameFromPropertyName = (property: string) => property?.substr(property.lastIndexOf('.') + 1);
 
-const isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];
+const isSelfReferencedProperty = (param: string, referenceProp: string) => {
+  const propName = getPropertyValue(param);
+  const propNameAfterDot = propName.substring(propName.indexOf('.') + 1);
+  return referenceProp?.includes(propNameAfterDot);
+};
 
 export const AT_FILTEREDLIST = '@FILTERED_LIST';
 export const AT_PROPERTY = '@P';
@@ -17,12 +21,12 @@ export const PAGELIST = '!PL!';
 export const PERIOD = '.';
 const AT = '@';
 
-export function updatePageListPropertyValue(value) {
+export function updatePageListPropertyValue(value: string) {
   value = value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);
   return value;
 }
 
-export function getPropertyValue(value) {
+export function getPropertyValue(value: string) {
   if (value.startsWith(AT)) {
     value = value.substring(value.indexOf(' ') + 1);
     if (value.startsWith(PERIOD)) value = value.substring(1);
@@ -33,25 +37,38 @@ export function getPropertyValue(value) {
   return value;
 }
 
-const getCompositeKeys = (c11nEnv, property) => {
+const getReferenceProp = (config: any) => {
+  if (config.mode === SELECTION_MODE.MULTI) {
+    return config?.pagelistValue?.substring(4) ?? '';
+  }
+  const property = config.value;
+  const arr = property?.split('.') ?? [];
+  if (arr.length > 1) {
+    arr.pop();
+    return arr.slice(1).join('.');
+  }
+  return '';
+};
+
+const getCompositeKeys = (c11nEnv: any, property: string) => {
   const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(property) || {};
-  return Object.values(parameters).reduce((compositeKeys: any, param) => {
-    if (isSelfReferencedProperty(property, param)) {
+  return Object.values(parameters).reduce((compositeKeys: string[], param: any) => {
+    if (isSelfReferencedProperty(param, property)) {
       let propName = getPropertyValue(param);
-      propName = propName.substring(propName.indexOf('.'));
+      propName = propName.substring(propName.indexOf('.') + 1);
       compositeKeys.push(propName);
     }
     return compositeKeys;
   }, []);
 };
 
-export const generateColumns = (config, pConn, referenceType) => {
+export const generateColumns = (config: any, pConn: any, referenceType: string) => {
   const displayField = getLeafNameFromPropertyName(config.displayField);
-  const referenceProp = config.value.split('.', 2)[1];
-  const compositeKeys: any = getCompositeKeys(pConn, referenceProp);
-  let value = getLeafNameFromPropertyName(config.value);
+  const referenceProp = getReferenceProp(config);
+  const compositeKeys = getCompositeKeys(pConn, referenceProp);
+  let value = getLeafNameFromPropertyName(config.mode === SELECTION_MODE.MULTI ? config.selectionKey : config.value);
 
-  const columns: any = [];
+  const columns: any[] = [];
   if (displayField) {
     columns.push({
       value: displayField,
@@ -61,6 +78,9 @@ export const generateColumns = (config, pConn, referenceType) => {
     });
   }
   if (value && compositeKeys.indexOf(value) !== -1) {
+    if (!config.value) {
+      config.value = `@P .${referenceProp}.${value}`;
+    }
     columns.push({
       value,
       setProperty: 'Associated property',
@@ -68,7 +88,7 @@ export const generateColumns = (config, pConn, referenceType) => {
     });
   } else {
     const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;
-    config.value = `@P .${referenceProp}${actualValue}`;
+    config.value = `@P .${referenceProp}.${actualValue}`;
     value = actualValue;
     columns.push({
       value: actualValue,
@@ -79,9 +99,9 @@ export const generateColumns = (config, pConn, referenceType) => {
 
   config.datasource = {
     fields: {
-      key: getLeafNameFromPropertyName(config.value),
-      text: getLeafNameFromPropertyName(config.displayField),
-      value: getLeafNameFromPropertyName(config.value)
+      key: `.${getLeafNameFromPropertyName(config.value)}`,
+      text: `.${getLeafNameFromPropertyName(config.displayField)}`,
+      value: `.${getLeafNameFromPropertyName(config.value)}`
     }
   };
 
@@ -95,17 +115,85 @@ export const generateColumns = (config, pConn, referenceType) => {
   }
 
   compositeKeys.forEach(key => {
+    const descriptorsFieldName = `.${key}`;
     if (value !== key)
       columns.push({
-        value: key,
+        value: descriptorsFieldName,
         display: 'false',
         secondary: 'true',
         useForSearch: false,
-        setProperty: `.${referenceProp}${key}`
+        setProperty: `.${referenceProp}.${key}`
       });
   });
 
   config.columns = columns;
 };
 
-export const getDataRelationshipContextFromKey = key => key.split('.', 2)[1];
+export const addCompositeKeysToConfig = (config: any, pConn: any) => {
+  const referenceProp = getReferenceProp(config);
+  const fieldMetadata = pConn.getFieldMetadata(referenceProp) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: string[] = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param);
+    }
+  });
+  config.compositeKeys = compositeKeys;
+};
+
+export const getDataRelationshipContextFromKey = (key: string) => {
+  const firstIndexOfDot = key.indexOf('.');
+  if (firstIndexOfDot > -1) {
+    const lastIndexOfDot = key.lastIndexOf('.');
+    if (lastIndexOfDot > firstIndexOfDot) {
+      return key.substring(firstIndexOfDot + 1, lastIndexOfDot);
+    }
+  }
+  return '';
+};
+
+export const createNewRecord = ({
+  referenceType,
+  disableStartingFieldsForReference,
+  pConn,
+  contextClass,
+  startingFields,
+  getPConnect
+}: {
+  referenceType: string;
+  disableStartingFieldsForReference: boolean;
+  pConn: any;
+  contextClass: string;
+  startingFields: Record<string, any>;
+  getPConnect: any;
+}) => {
+  if (referenceType === 'Case') {
+    if (!disableStartingFieldsForReference) {
+      // @ts-ignore
+      startingFields[PCore.getNameSpaceUtils().getDefaultQualifiedName('pyAddCaseContextPage')] = {
+        pyID: pConn.getCaseInfo().getKey()?.split(' ')?.pop()
+      };
+    }
+    return pConn.getActionsApi().createWork(contextClass, {
+      openCaseViewAfterCreate: false,
+      startingFields
+    });
+  }
+  if (referenceType === 'Data') {
+    return getPConnect().getActionsApi().showDataObjectCreateView(contextClass);
+  }
+};
+
+export const getAdditionalInfo = (pConn: any, propertyName: string) => {
+  const parentFieldMetadata = pConn.getFieldMetadata(getDataRelationshipContextFromKey(propertyName));
+  return parentFieldMetadata?.additionalInformation
+    ? {
+        content: parentFieldMetadata.additionalInformation
+      }
+    : undefined;
+};
+
+export const camelCase = (str: string) => {
+  return str.replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : '')).replace(/^[A-Z]/, char => char.toLowerCase());
+};

package/tests/assets/sdk-r/components/create/override-sdk/field/Percentage/Percentage.tsx

@@ -6,6 +6,8 @@ import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConn
 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';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
@@ -15,6 +17,12 @@ interface PercentageProps extends PConnFieldProps {
   currencyISOCode?: string;
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Percentage(props: PercentageProps) {
@@ -28,7 +36,6 @@ export default function Percentage(props: PercentageProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     // onChange,
     // onBlur,
     readOnly,
@@ -39,7 +46,9 @@ export default function Percentage(props: PercentageProps) {
     hideLabel,
     placeholder,
     showGroupSeparators,
-    decimalPrecision
+    decimalPrecision,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -47,7 +56,15 @@ export default function Percentage(props: PercentageProps) {
   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);
@@ -63,7 +80,7 @@ export default function Percentage(props: PercentageProps) {
   }
 
   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') {
@@ -107,6 +124,7 @@ export default function Percentage(props: PercentageProps) {
       suffix='%'
       slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx

@@ -4,9 +4,17 @@ import { MuiTelInput } from 'mui-tel-input';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface PhoneProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Phone here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Phone(props: PhoneProps) {
@@ -20,14 +28,15 @@ export default function Phone(props: PhoneProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     onChange,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
@@ -37,7 +46,15 @@ export default function Phone(props: PhoneProps) {
   const [inputValue, setInputValue] = useState(value);
   useEffect(() => setInputValue(value), [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
+  });
 
   let testProp = {};
 
@@ -46,7 +63,7 @@ export default function Phone(props: PhoneProps) {
   };
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -76,6 +93,7 @@ export default function Phone(props: PhoneProps) {
             }
           }}
           disableDropdown={disableDropdown}
+          sx={getFieldSx(status)}
         />
       </div>
     );
@@ -108,6 +126,7 @@ export default function Phone(props: PhoneProps) {
       label={label}
       value={inputValue}
       slotProps={{ input: { ...testProp } }}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/RadioButtons/RadioButtons.tsx

@@ -5,6 +5,8 @@ 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 type { 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';
 
 // Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
 interface RadioButtonsProps extends PConnFieldProps {
@@ -18,6 +20,11 @@ interface RadioButtonsProps extends PConnFieldProps {
   imageSize?: string;
   showImageDescription?: boolean;
   datasource?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
 }
 
 export default function RadioButtons(props: RadioButtonsProps) {
@@ -32,7 +39,6 @@ export default function RadioButtons(props: RadioButtonsProps) {
     readOnly,
     validatemessage,
     helperText,
-    status,
     required,
     inline,
     displayMode,
@@ -44,7 +50,9 @@ export default function RadioButtons(props: RadioButtonsProps) {
     datasource,
     imagePosition,
     imageSize,
-    showImageDescription
+    showImageDescription,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -52,9 +60,17 @@ export default function RadioButtons(props: RadioButtonsProps) {
   const theConfigProps = thePConn.getConfigProps();
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const className = thePConn.getCaseInfo().getClassName();
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   let configProperty = (thePConn.getRawMetadata() as any)?.config?.value || '';
   configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
   configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
@@ -134,7 +150,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
   }
 
   return (
-    <FormControl variant='standard' error={status === 'error'} required={required}>
+    <FormControl variant='standard' error={status === 'error'} required={required} sx={getFormControlSx(status)}>
       <FormLabel component='legend'>{label}</FormLabel>
       <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
         {theOptions.map(theOption => {

package/tests/assets/sdk-r/components/create/override-sdk/field/RichText/RichText.css

@@ -1,79 +0,0 @@
-.tox .tox-toolbar {
-  background-color: var(--app-background-color) !important;
-}
-
-.tox .tox-toolbar__primary {
-  background-color: var(--app-background-color) !important;
-}
-
-.tox .tox-toolbar__button {
-  color: var(--app-text-color) !important;
-}
-
-.tox .tox-toolbar__button--enabled {
-  background: var(--app-primary-color) !important;
-  color: #fff !important;
-}
-
-.tox .tox-dialog {
-  background-color: var(--modal-top-color) !important;
-  color: var(--app-text-color) !important;
-  border: 1px solid var(--modal-border-color) !important;
-  padding: 20px !important;
-  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
-}
-
-.tox .tox-dialog__header {
-  background-color: var(--modal-top-color) !important;
-  color: var(--app-text-color) !important;
-  font-weight: 500;
-  border-bottom: 1px solid var(--modal-border-color);
-}
-
-.tox .tox-dialog__footer {
-  background: transparent !important;
-  border-top: 1px solid var(--modal-border-color);
-}
-
-.tox .tox-dialog-wrap__backdrop {
-  background-color: var(--modal-background-color) !important;
-}
-
-.tox .tox-dialog__body input,
-.tox .tox-dialog__body textarea,
-.tox .tox-dialog__body select {
-  background: initial !important;
-  color: var(--app-text-color) !important;
-  border: 1px solid var(--app-neutral-color) !important;
-  border-radius: 4px !important;
-  padding: 6px 10px !important;
-  font-size: 1em !important;
-  font-family: inherit !important;
-}
-
-.tox .tox-dialog__body button {
-  background: transparent;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 4px !important;
-  padding: 8px 16px !important;
-  font-size: 1em !important;
-  cursor: pointer !important;
-}
-
-.tox .tox-dialog__footer .tox-button {
-  background: var(--app-primary-color) !important;
-  color: #fff !important;
-  border: none !important;
-  border-radius: 4px !important;
-  padding: 8px 16px !important;
-  font-size: 1em !important;
-  cursor: pointer !important;
-}
-
-.tox .tox-dialog__footer .tox-button--secondary {
-  background: var(--app-secondary-color) !important;
-  color: var(--secondary-button-text-color) !important;
-  font-size: 0.875rem !important;
-  cursor: pointer !important;
-}

package/tests/assets/sdk-r/components/create/override-sdk/field/RichText/RichText.tsx

@@ -69,7 +69,7 @@ export default function RichText(props: RichTextProps) {
 
     const handleBlur = () => {
       if (editorRef.current) {
-        const editorValue = editorRef.current.getContent({ format: 'html' });
+        const editorValue = editorRef.current.getHTML();
         const property = (pConn.getStateProps() as any).value;
         handleEvent(actionsApi, 'changeNblur', property, editorValue);
       }

package/tests/assets/sdk-r/components/create/override-sdk/field/SelectableCard/SelectableCard.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Radio, Checkbox, FormControlLabel, Card, CardContent, Typography } from '@mui/material';
 import { resolveReferenceFields } from './utils';
 
@@ -33,7 +34,22 @@ export default function SelectableCard(props) {
   const cardDataSource = readOnly || displayMode === 'DISPLAY_ONLY' ? readOnlyList || [] : dataSource?.source;
   const imageDescriptionKey = showImageDescription ? imageDescription : undefined;
 
-  let radioItemSelected = false;
+  const handleCardClick = event => {
+    if (disabled || readOnly) return;
+    // If the click landed on or inside a label/input, native behavior already handles it.
+    if (event.target.closest?.('label, input')) return;
+    // Find the radio/checkbox input inside this card and click it programmatically.
+    const input = event.currentTarget.querySelector('input[type="radio"], input[type="checkbox"]');
+    if (input) input.click();
+  };
+
+  const radioItemSelected = type === 'radio' && (cardDataSource || []).some(item => radioBtnValue === item[recordKey]);
+
+  useEffect(() => {
+    if (type === 'radio' && setIsRadioCardSelected) {
+      setIsRadioCardSelected(radioItemSelected);
+    }
+  }, [radioItemSelected, type, setIsRadioCardSelected]);
 
   return (
     <>
@@ -75,7 +91,12 @@ export default function SelectableCard(props) {
 
         const component = (
           <div key={item[recordKey]} style={{ paddingTop: '15px' }}>
-            <Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
+            <Card
+              className={className}
+              style={{ display: 'flex', flexDirection: 'column', height: '100%', cursor: disabled || readOnly ? 'default' : 'pointer' }}
+              data-testid={testId}
+              onClick={handleCardClick}
+            >
               <CardContent
                 style={{
                   ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { display: 'flex', height: '100%' }),
@@ -118,7 +139,7 @@ export default function SelectableCard(props) {
                           onBlur={onBlur}
                           onClick={onClick}
                           onKeyDown={onKeyDown}
-                          disabled={disabled}
+                          disabled={disabled || readOnly}
                           {...additionalProps}
                         />
                       }
@@ -135,7 +156,7 @@ export default function SelectableCard(props) {
                           onBlur={onBlur}
                           onClick={onClick}
                           onKeyDown={onKeyDown}
-                          disabled={disabled}
+                          disabled={disabled || readOnly}
                           {...additionalProps}
                         />
                       }
@@ -162,14 +183,8 @@ export default function SelectableCard(props) {
           </div>
         );
 
-        if (type === 'radio' && radioBtnValue === item[recordKey]) {
-          radioItemSelected = true;
-        }
-
         return component;
       })}
-
-      {type === 'radio' && setIsRadioCardSelected && setIsRadioCardSelected(radioItemSelected)}
     </>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/TextArea/TextArea.tsx

@@ -4,10 +4,18 @@ 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 type { 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';
 
 interface TextAreaProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function TextArea(props: TextAreaProps) {
@@ -21,21 +29,30 @@ export default function TextArea(props: TextAreaProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     fieldMetadata,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   const [inputValue, setInputValue] = useState('');
 
   let readOnlyProp = {};
@@ -45,7 +62,7 @@ export default function TextArea(props: TextAreaProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -89,6 +106,7 @@ export default function TextArea(props: TextAreaProps) {
       slotProps={{
         input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
       }}
+      sx={getFieldSx(status)}
     />
   );
 }