@pega/dx-component-builder-sdk 0.25.7 → 0.26.2

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

@@ -1,17 +1,24 @@
-import { useEffect, useState } from 'react';
-import { TextField } from '@mui/material';
-import Autocomplete from '@mui/material/Autocomplete';
+import { useEffect, useState, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import { TextField, Paper, Button, Divider } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
-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';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface IOption {
   key: string;
   value: string;
+  secondary?: ReactNode[];
+  secondaryRaw?: string[];
+  group?: string;
 }
 
 const preProcessColumns = columnList => {
@@ -22,6 +29,18 @@ const preProcessColumns = columnList => {
   });
 };
 
+const getPropertyName = (rawValue: string): string => {
+  let propName;
+  if (rawValue.startsWith('@USER ')) {
+    propName = rawValue.substring(6).trim();
+  } else if (rawValue.startsWith('@P ')) {
+    propName = rawValue.substring(3).trim();
+  } else {
+    propName = rawValue.trim();
+  }
+  return propName.startsWith('.') ? propName.substring(1) : propName;
+};
+
 const getDisplayFieldsMetaData = columnList => {
   const displayColumns = columnList.filter(col => col.display === 'true');
   const metaDataObj: any = { key: '', primary: '', secondary: [] };
@@ -49,6 +68,19 @@ interface AutoCompleteProps extends PConnFieldProps {
   parameters?: any;
   datasource: any;
   columns: any[];
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
+  showCreateNew?: boolean;
+  onCreateNew?: () => void;
+  createNewLabel?: string;
+  createNewRecord?: () => Promise<unknown>;
+  contextClass?: string;
+  referenceType?: string;
+  allowCreatingRecords?: boolean;
 }
 
 export default function AutoComplete(props: AutoCompleteProps) {
@@ -68,10 +100,16 @@ export default function AutoComplete(props: AutoCompleteProps) {
     displayMode,
     deferDatasource,
     datasourceMetadata,
-    status,
     helperText,
     hideLabel,
-    onRecordChange
+    onRecordChange,
+    showFieldMessage,
+    messageConfig = {},
+    onCreateNew,
+    createNewLabel = 'Create new',
+    createNewRecord,
+    contextClass,
+    referenceType
   } = props;
 
   const context = getPConnect().getContextName();
@@ -79,13 +117,21 @@ export default function AutoComplete(props: AutoCompleteProps) {
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState<IOption[]>([]);
   const [theDatasource, setDatasource] = useState(null);
-  let selectedValue: any = '';
-  const helperTextToDisplay = validatemessage || helperText;
+  let selectedValue: any = null;
+  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
+  });
+
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -124,6 +170,36 @@ export default function AutoComplete(props: AutoCompleteProps) {
       }
     ];
   }
+
+  // Add secondary columns from columnsFormatter metadata
+  const columnsFormatter = (thePConn.getRawMetadata?.()?.config as any)?.columnsFormatter;
+  if (Array.isArray(columnsFormatter) && columnsFormatter.length > 0) {
+    columnsFormatter.forEach(formatter => {
+      if (formatter.config?.value) {
+        columns.push({
+          value: getPropertyName(formatter.config.value),
+          display: 'true',
+          useForSearch: true,
+          secondary: 'true'
+        });
+      }
+    });
+  }
+
+  // Read groupsFields from raw metadata for grouping support
+  const groupsFields = (thePConn.getRawMetadata?.()?.config as any)?.groupsFields;
+  const groupKeyFields: string[] = Array.isArray(groupsFields)
+    ? groupsFields.map((entry: any) => getPropertyName(entry?.config?.value || '')).filter(Boolean)
+    : [];
+  const isGrouped = groupKeyFields.length > 0;
+
+  // Ensure group fields are included in columns so they appear in the data page response
+  groupKeyFields.forEach(field => {
+    if (!columns.find(col => col.value === field || col.value === `.${field}`)) {
+      columns.push({ value: field, display: 'false', useForSearch: false });
+    }
+  });
+
   columns = preProcessColumns(columns);
 
   useEffect(() => {
@@ -132,26 +208,83 @@ export default function AutoComplete(props: AutoCompleteProps) {
     }
   }, [theDatasource]);
 
+  // Builds options with primary + secondary data from datapage results
+  const buildOptionsFromResults = (results: any[]): IOption[] => {
+    const optionsData: IOption[] = [];
+    const displayColumn = getDisplayFieldsMetaData(columns);
+    results?.forEach(element => {
+      const val = element[displayColumn.primary]?.toString() || '';
+      let secondaryNodes: ReactNode[] = [];
+      let secondaryRaw: string[] = [];
+
+      if (Array.isArray(columnsFormatter) && columnsFormatter.length > 0) {
+        columnsFormatter.forEach((formatter, idx) => {
+          if (formatter.config?.value) {
+            const fmtPropName = getPropertyName(formatter.config.value);
+            secondaryRaw.push(element[fmtPropName]?.toString() || '');
+
+            try {
+              const fieldMeta = {
+                meta: {
+                  ...formatter,
+                  config: {
+                    ...formatter.config,
+                    displayMode: 'DISPLAY_ONLY',
+                    contextName: context,
+                    variant: 'inline-compact'
+                  }
+                },
+                useCustomContext: element
+              };
+              const configObj = PCore.createPConnect(fieldMeta);
+              const resolvedPConn = configObj.getPConnect();
+              const resolvedProps = resolvedPConn.resolveConfigProps(resolvedPConn.getConfigProps());
+              const Component = getComponentFromMap(formatter.type);
+              if (Component) {
+                secondaryNodes.push(<Component key={idx} {...resolvedProps} getPConnect={() => resolvedPConn} displayMode='DISPLAY_ONLY' />);
+              } else {
+                secondaryNodes.push(element[fmtPropName]?.toString() || '');
+              }
+            } catch {
+              secondaryNodes.push(element[fmtPropName]?.toString() || '');
+            }
+          }
+        });
+      } else {
+        secondaryRaw = displayColumn.secondary.map(col => element[col]?.toString()).filter(Boolean);
+        secondaryNodes = [...secondaryRaw];
+      }
+
+      const obj: IOption = {
+        key: String(element[displayColumn.key] ?? element.pyGUID ?? ''),
+        value: val,
+        ...(secondaryNodes.length > 0 && { secondary: secondaryNodes }),
+        ...(secondaryRaw.length > 0 && { secondaryRaw }),
+        ...(isGrouped && { group: element[groupKeyFields[0]]?.toString() || '' })
+      };
+      optionsData.push(obj);
+    });
+    // Sort options by group value so MUI renders groups contiguously
+    if (isGrouped) {
+      optionsData.sort((a, b) => (a.group || '').localeCompare(b.group || ''));
+    }
+    return optionsData;
+  };
+
   useEffect(() => {
     if (!displayMode && listType !== 'associated') {
-      getDataPage(datasource, parameters, context).then((results: any) => {
-        const optionsData: any[] = [];
-        const displayColumn = getDisplayFieldsMetaData(columns);
-        results?.forEach(element => {
-          const val = element[displayColumn.primary]?.toString();
-          const obj = {
-            key: element[displayColumn.key] || element.pyGUID,
-            value: val
-          };
-          optionsData.push(obj);
+      getDataPage(datasource, parameters, context)
+        .then((results: any) => {
+          setOptions(buildOptionsFromResults(results));
+        })
+        .catch(e => {
+          console.error(e);
         });
-        setOptions(optionsData);
-      });
     }
   }, []);
 
   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') {
@@ -167,18 +300,202 @@ export default function AutoComplete(props: AutoCompleteProps) {
     }
   }
 
+  useEffect(() => {
+    setInputValue(selectedValue || '');
+  }, [selectedValue]);
+
   const handleChange = (event: object, newValue) => {
     const val = newValue ? newValue.key : '';
-    handleEvent(actionsApi, 'changeNblur', propName, val);
+    if (!newValue) {
+      setInputValue('');
+    }
+    actionsApi.updateFieldValue(propName, val);
+    const changePromise = (actionsApi as any).triggerFieldChange(propName, val);
     if (onRecordChange) {
-      onRecordChange(event);
+      if (changePromise && changePromise.then) {
+        changePromise
+          .then(() => {
+            onRecordChange({ ...event, id: val });
+          })
+          .catch(e => {
+            console.error(e);
+          });
+      } else {
+        onRecordChange({ ...event, id: val });
+      }
+    }
+  };
+
+  const handleInputValue = (event, newInputValue, reason) => {
+    if (reason === 'selectOption') {
+      setInputValue(newInputValue);
+    }
+  };
+
+  // Sets values for all columns that have setProperty defined (mirrors setValuesToOtherAdditionalFields in constellation-frontend)
+  const setValuesToAdditionalFields = (record: Record<string, unknown>) => {
+    const setPropertyList = columns
+      .filter(col => col.setProperty)
+      .map(col => ({
+        source: col.value,
+        target: col.setProperty,
+        key: col.key,
+        primary: col.primary
+      }));
+
+    if (setPropertyList.length > 0) {
+      setPropertyList.forEach(prop => {
+        let valueToSet: string;
+        if (prop.key === 'true') {
+          valueToSet = record[prop.source]?.toString() || (record as any).pyGUID || '';
+        } else {
+          valueToSet = record[prop.source]?.toString() || '';
+        }
+
+        if (prop.target === 'Associated property') {
+          handleEvent(actionsApi, 'changeNblur', propName, valueToSet);
+        } else {
+          const target = typeof prop.target === 'string' ? prop.target : '';
+          const targetProp = target.startsWith('.') ? target : `.${target}`;
+          actionsApi.updateFieldValue(targetProp, valueToSet, { associatedProperty: propName });
+          actionsApi.triggerFieldChange(targetProp, valueToSet);
+        }
+      });
     }
   };
 
-  const handleInputValue = (event, newInputValue) => {
-    setInputValue(newInputValue);
+  // Re-fetches the options list (equivalent to initializeList in constellation-frontend)
+  const refreshOptionsList = () => {
+    if (!displayMode && listType !== 'associated') {
+      getDataPage(datasource, parameters, context)
+        .then((results: any) => {
+          setOptions(buildOptionsFromResults(results));
+        })
+        .catch(e => {
+          console.error(e);
+        });
+    }
   };
 
+  const createNewButtonHandler = () => {
+    if (onCreateNew) {
+      onCreateNew();
+      return;
+    }
+
+    if (!contextClass) return;
+
+    const normalizedReferenceType = typeof referenceType === 'string' ? referenceType.toLowerCase() : '';
+    const isDataReference = normalizedReferenceType === 'data';
+    const { CREATE_STAGE_DONE } = PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    const DATA_OBJECT_CREATED = (PCore.getConstants().PUB_SUB_EVENTS as any).DATA_EVENTS?.DATA_OBJECT_CREATED;
+    const eventType = isDataReference && DATA_OBJECT_CREATED ? DATA_OBJECT_CREATED : CREATE_STAGE_DONE;
+
+    const createNewCallback = isDataReference
+      ? (data: { classId?: string; data?: { responseData?: Record<string, unknown> } }) => {
+          // Clear contexted cache before re-fetching
+          PCore.getDataApi().clearContextedCache(context);
+
+          const responseData = data?.data?.responseData;
+          if (responseData) {
+            // Set all mapped property values from the newly created record
+            setValuesToAdditionalFields(responseData);
+            const displayColumn = getDisplayFieldsMetaData(columns);
+            if (onRecordChange) {
+              const newKey = responseData[displayColumn.key]?.toString() || (responseData as any).pyGUID;
+              onRecordChange({ id: newKey });
+            }
+          }
+
+          // Refresh the options list
+          refreshOptionsList();
+          PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+        }
+      : (data: { caseId?: string; caseType?: string; ID?: string }) => {
+          // Clear contexted cache before re-fetching
+          PCore.getDataApi().clearContextedCache(context);
+
+          const newCaseId = data.caseId?.split(' ').pop();
+          if (data.caseType === contextClass) {
+            const selectKey = data.ID || newCaseId;
+
+            if (selectKey && listType !== 'associated' && datasource) {
+              // Re-fetch data to find the newly created record and set all mapped properties
+              getDataPage(datasource, parameters, context)
+                .then((results: any) => {
+                  setOptions(buildOptionsFromResults(results));
+
+                  // Find the newly created record by ID or caseId and set all properties
+                  const displayColumn = getDisplayFieldsMetaData(columns);
+                  const newRecord = results?.find((el: any) => el.ID === data.ID || (el[displayColumn.key] || el.pyGUID) === selectKey);
+                  if (newRecord) {
+                    setValuesToAdditionalFields(newRecord);
+                  } else {
+                    // Fallback: just set the key value
+                    handleEvent(actionsApi, 'changeNblur', propName, selectKey);
+                  }
+                  if (onRecordChange) {
+                    onRecordChange({ id: selectKey });
+                  }
+                })
+                .catch(e => {
+                  console.error(e);
+                });
+            }
+            PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+          }
+        };
+
+    // Build the create action if createNewRecord prop is not provided
+    const triggerCreate = createNewRecord
+      ? createNewRecord()
+      : isDataReference
+        ? getPConnect().getActionsApi().showDataObjectCreateView(contextClass)
+        : thePConn.getActionsApi().createWork(contextClass, {
+            openCaseViewAfterCreate: false,
+            startingFields: {}
+          });
+
+    Promise.resolve(triggerCreate)
+      .then(() => {
+        PCore.getPubSubUtils().subscribe(eventType, createNewCallback, contextClass);
+        // Re-initialize the list (equivalent to initializeList() in constellation-frontend)
+        refreshOptionsList();
+      })
+      .catch(e => {
+        console.error(e);
+      });
+  };
+
+  const showCreateButton = props.allowCreatingRecords === true;
+
+  const CustomPaper = useCallback(
+    (paperProps: React.HTMLAttributes<HTMLElement>) => {
+      return (
+        <Paper {...paperProps}>
+          {paperProps.children}
+          {showCreateButton && (
+            <>
+              <Divider />
+              <Button
+                fullWidth
+                startIcon={<AddIcon />}
+                onMouseDown={event => {
+                  event.preventDefault();
+                }}
+                onClick={createNewButtonHandler}
+                sx={{ justifyContent: 'flex-start', textTransform: 'none', py: 1, px: 2 }}
+              >
+                {createNewLabel}
+              </Button>
+            </>
+          )}
+        </Paper>
+      );
+    },
+    [showCreateButton, createNewButtonHandler, createNewLabel]
+  );
+
   if (readOnly) {
     const theValAsString = options?.find(opt => opt.key === value)?.value;
     return <TextInput {...props} value={theValAsString} />;
@@ -187,18 +504,46 @@ export default function AutoComplete(props: AutoCompleteProps) {
   //  key/value structure to what Autocomplete expects
   return (
     <Autocomplete
+      slots={{ paper: CustomPaper }}
       options={options}
       getOptionLabel={(option: IOption) => {
         return option.value ? option.value : '';
       }}
+      {...(isGrouped && { groupBy: (option: IOption) => option.group || '' })}
       isOptionEqualToValue={(option: any) => {
         return option.value ? option.value : '';
       }}
       fullWidth
       onChange={handleChange}
       value={selectedValue}
-      inputValue={inputValue || selectedValue}
+      inputValue={inputValue}
       onInputChange={handleInputValue}
+      filterOptions={createFilterOptions<IOption>({
+        stringify: option => {
+          const parts = [option.value || ''];
+          if (option.secondaryRaw) {
+            parts.push(...option.secondaryRaw);
+          }
+          return parts.join(' ');
+        }
+      })}
+      renderOption={(renderProps, option: IOption) => (
+        <li {...renderProps} key={option.key}>
+          <div>
+            <span>{option.value}</span>
+            {option.secondary && option.secondary.length > 0 && (
+              <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
+                {option.secondary.map((sec, i) => (
+                  <span key={i} style={{ display: 'inline-flex', alignItems: 'center' }}>
+                    {sec}
+                    {i < option.secondary!.length - 1 && <span style={{ margin: '0 4px' }}>{'\u00B7'}</span>}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </li>
+      )}
       renderInput={params => (
         <TextField
           {...params}
@@ -211,6 +556,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
           error={status === 'error'}
           label={label}
           data-test-id={testId}
+          sx={getFieldSx(status)}
         />
       )}
     />

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

@@ -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 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';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -28,6 +30,11 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   showImageDescription: string;
   renderMode: string;
   image: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
 }
 
 const useStyles = makeStyles(() => ({
@@ -57,7 +64,6 @@ export default function CheckboxComponent(props: CheckboxProps) {
     testId,
     required,
     disabled,
-    status,
     helperText,
     validatemessage,
     displayMode,
@@ -78,18 +84,28 @@ export default function CheckboxComponent(props: CheckboxProps) {
     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
@@ -109,11 +125,11 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [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 => {
@@ -254,7 +270,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }
 
   return (
-    <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/create/override-sdk/field/Currency/Currency.tsx

@@ -6,6 +6,8 @@ import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConn
 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 './currency-utils';
+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.
@@ -14,6 +16,12 @@ interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
   allowDecimals: boolean;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Currency(props: CurrrencyProps) {
@@ -27,7 +35,6 @@ export default function Currency(props: CurrrencyProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     testId,
@@ -36,15 +43,25 @@ export default function Currency(props: CurrrencyProps) {
     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 status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   const testProps: any = { 'data-test-id': testId };
 
   useEffect(() => {
@@ -70,7 +87,7 @@ export default function Currency(props: CurrrencyProps) {
   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') {
@@ -106,6 +123,7 @@ export default function Currency(props: CurrrencyProps) {
       fixedDecimalScale={allowDecimals}
       slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
+      sx={getFieldSx(status)}
     />
   );
 }