@pega/sdk 0.0.14 → 0.0.15

package/templates/react-sdk-reference/src/components/field/AutoComplete/AutoComplete.tsx

@@ -1,17 +1,23 @@
-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 '../../helpers/utils';
 import { getDataPage } from '../../helpers/data_page';
 import handleEvent from '../../helpers/event-utils';
+import { useStatus, getFieldSx } from '../../helpers/field-utils';
 import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface IOption {
   key: string;
   value: string;
+  secondary?: ReactNode[];
+  secondaryRaw?: string[];
+  group?: string;
 }
 
 const preProcessColumns = (columnList) => {
@@ -22,6 +28,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 +67,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 +99,16 @@ export default function AutoComplete(props: AutoCompleteProps) {
     displayMode,
     deferDatasource,
     datasourceMetadata,
-    status,
     helperText,
     hideLabel,
     onRecordChange,
+    showFieldMessage,
+    messageConfig = {},
+    onCreateNew,
+    createNewLabel = 'Create new',
+    createNewRecord,
+    contextClass,
+    referenceType,
   } = props;
 
   const context = getPConnect().getContextName();
@@ -79,13 +116,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);
@@ -130,6 +175,34 @@ 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',
+        });
+      }
+    });
+  }
+
+  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;
+
+  // Group fields must be requested so they come back 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(() => {
@@ -138,26 +211,88 @@ export default function AutoComplete(props: AutoCompleteProps) {
     }
   }, [theDatasource]);
 
+  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 as any).createPConnect(fieldMeta);
+              const resolvedPConn = configObj.getPConnect();
+              const resolvedProps = resolvedPConn.resolveConfigProps(resolvedPConn.getConfigProps());
+              const Component = getComponentFromRegistry(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];
+      }
+
+      optionsData.push({
+        key: String(element[displayColumn.key] ?? element.pyGUID ?? ''),
+        value: val,
+        ...(secondaryNodes.length > 0 && { secondary: secondaryNodes }),
+        ...(secondaryRaw.length > 0 && { secondaryRaw }),
+        ...(isGrouped && { group: element[groupKeyFields[0]]?.toString() || '' }),
+      });
+    });
+    // MUI only renders groups correctly when options are contiguous by group
+    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') {
@@ -173,18 +308,192 @@ 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) => {
-    setInputValue(newInputValue);
+  const handleInputValue = (event, newInputValue, reason) => {
+    if (reason === 'selectOption') {
+      setInputValue(newInputValue);
+    }
+  };
+
+  // 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,
+      }));
+
+    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 as any).updateFieldValue(targetProp, valueToSet, { associatedProperty: propName });
+        (actionsApi as any).triggerFieldChange(targetProp, valueToSet);
+      }
+    });
   };
 
+  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> } }) => {
+          PCore.getDataApi().clearContextedCache(context);
+
+          const responseData = data?.data?.responseData;
+          if (responseData) {
+            setValuesToAdditionalFields(responseData);
+            const displayColumn = getDisplayFieldsMetaData(columns);
+            if (onRecordChange) {
+              const newKey = responseData[displayColumn.key]?.toString() || (responseData as any).pyGUID;
+              onRecordChange({ id: newKey });
+            }
+          }
+
+          refreshOptionsList();
+          PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+        }
+      : (data: { caseId?: string; caseType?: string; ID?: string }) => {
+          PCore.getDataApi().clearContextedCache(context);
+
+          const newCaseId = data.caseId?.split(' ').pop();
+          if (data.caseType === contextClass) {
+            const selectKey = data.ID || newCaseId;
+
+            if (selectKey && listType !== 'associated' && datasource) {
+              getDataPage(datasource, parameters, context)
+                .then((results: any) => {
+                  setOptions(buildOptionsFromResults(results));
+
+                  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 {
+                    handleEvent(actionsApi, 'changeNblur', propName, selectKey);
+                  }
+                  if (onRecordChange) {
+                    onRecordChange({ id: selectKey });
+                  }
+                })
+                .catch((e) => {
+                  console.error(e);
+                });
+            }
+            PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+          }
+        };
+
+    const triggerCreate = createNewRecord
+      ? createNewRecord()
+      : isDataReference
+        ? getPConnect().getActionsApi().showDataObjectCreateView(contextClass)
+        : thePConn.getActionsApi().createWork(contextClass, {
+            openCaseViewAfterCreate: false,
+            startingFields: {},
+          } as any);
+
+    Promise.resolve(triggerCreate)
+      .then(() => {
+        PCore.getPubSubUtils().subscribe(eventType, createNewCallback, contextClass);
+        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} />;
@@ -193,18 +502,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}
@@ -217,6 +554,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
           error={status === 'error'}
           label={label}
           data-test-id={testId}
+          sx={getFieldSx(status)}
         />
       )}
     />

package/templates/react-sdk-reference/src/components/field/CancelAlert/CancelAlert.tsx

@@ -143,7 +143,7 @@ export default function CancelAlert(props: CancelAlertProps) {
             <p>{localizedVal(content, localeCategory)}</p>
           </div>
           <div className="action-controls">
-            <Grid container spacing={4} justifyContent="space-between">
+            <Grid container spacing={4} sx={{ justifyContent: 'space-between' }}>
               <Grid>{leftButton}</Grid>
               <Grid>{rightButton}</Grid>
             </Grid>

package/templates/react-sdk-reference/src/components/field/Checkbox/Checkbox.tsx

@@ -109,7 +109,9 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
+    return (
+      <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant={props.variant} />
+    );
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {

package/templates/react-sdk-reference/src/components/field/Currency/Currency.tsx

@@ -11,6 +11,7 @@ import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
 as per the locale.
 */
 interface CurrrencyProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Currency here
   currencyISOCode?: string;
   allowDecimals: boolean;
@@ -43,12 +44,12 @@ export default function Currency(props: CurrrencyProps) {
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
-  const [values, setValues] = useState(value.toString());
+  const [values, setValues] = useState(value?.toString() ?? '');
 
   const testProps: any = { 'data-test-id': testId };
 
   useEffect(() => {
-    setValues(value.toString());
+    setValues(value?.toString() ?? '');
   }, [value]);
 
   // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
@@ -74,7 +75,7 @@ export default function Currency(props: CurrrencyProps) {
   };
 
   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') {
@@ -92,7 +93,9 @@ export default function Currency(props: CurrrencyProps) {
   return (
     <NumericFormat
       valueIsNumericString
+      fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
+      size="small"
       label={label}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}

package/templates/react-sdk-reference/src/components/field/Date/Date.tsx

@@ -14,6 +14,7 @@ function getFormattedDate(date) {
 }
 
 interface DateProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Date here
 }
 
@@ -60,7 +61,7 @@ export default function Date(props: DateProps) {
     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') {

package/templates/react-sdk-reference/src/components/field/DateTime/DateTime.tsx

@@ -9,6 +9,7 @@ import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface DateTimeProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on DateTime here
 }
 
@@ -60,7 +61,7 @@ export default function DateTime(props: DateTimeProps) {
     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') {

package/templates/react-sdk-reference/src/components/field/Decimal/Decimal.tsx

@@ -12,6 +12,7 @@ as per the locale.
 */
 
 interface DecimalProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Decimal here
   currencyISOCode?: string;
   decimalPrecision?: number;
@@ -44,7 +45,7 @@ export default function Decimal(props: DecimalProps) {
     formatter,
   } = props;
 
-  const [values, setValues] = useState(value.toString());
+  const [values, setValues] = useState(value?.toString() ?? '');
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -59,7 +60,7 @@ export default function Decimal(props: DecimalProps) {
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
   useEffect(() => {
-    setValues(value.toString());
+    setValues(value?.toString() ?? '');
   }, [value]);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
@@ -76,7 +77,7 @@ export default function Decimal(props: DecimalProps) {
   }
 
   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') {

package/templates/react-sdk-reference/src/components/field/Dropdown/Dropdown.tsx

@@ -47,6 +47,7 @@ const getDisplayFieldsMetaData = (columnList) => {
 };
 
 interface DropdownProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Dropdown here
   datasource?: any[];
   onRecordChange?: any;
@@ -183,6 +184,7 @@ export default function Dropdown(props: DropdownProps) {
             localePath,
             thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
           )}
+          variant={props.variant}
         />
       );
     }

package/templates/react-sdk-reference/src/components/field/Email/Email.tsx

@@ -7,6 +7,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 import handleEvent from '../../helpers/event-utils';
 
 interface EmailProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Date here
 }
 
@@ -44,7 +45,7 @@ export default function Email(props: EmailProps) {
   }, [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') {