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

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/file-utility/file-utility.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -74,7 +74,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -273,9 +273,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       for (let fileIndex = 0; fileIndex < arFileList.length; fileIndex++) {
         if (arFileList[fileIndex].id == itemId) {
           // remove the file from the list and redraw
-          this.ngZone.run(() => {
-            arFileList.splice(fileIndex, 1);
-          });
+          arFileList.splice(fileIndex, 1);
+          this.cdRef.markForCheck();
           break;
         }
       }
@@ -293,9 +292,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
           // remove the file from the list and redraw
           localLinksList.splice(linkIndex, 1);
 
-          this.ngZone.run(() => {
-            this.arLinksList$ = localLinksList.slice();
-          });
+          this.arLinksList$ = localLinksList.slice();
+          this.cdRef.markForCheck();
 
           break;
         }
@@ -482,24 +480,23 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
     oLink.primary.icon = 'open';
     oLink.secondary.text = url;
 
-    this.ngZone.run(() => {
-      // need to create a new array or summary list won't detect changes
-      this.arLinksList$ = localList.slice();
-      this.arLinksList$.push(oLink);
+    // need to create a new array or summary list won't detect changes
+    this.arLinksList$ = localList.slice();
+    this.arLinksList$.push(oLink);
 
-      // list for actually attachments
-      const link: any = {};
-      link.id = oLink.id;
-      link.linkTitle = this.link_title$;
-      link.type = oLink.type;
-      link.url = url;
+    // list for actually attachments
+    const link: any = {};
+    link.id = oLink.id;
+    link.linkTitle = this.link_title$;
+    link.type = oLink.type;
+    link.url = url;
 
-      this.arLinks$.push(link);
+    this.arLinks$.push(link);
 
-      // clear values
-      this.link_title$ = '';
-      this.link_url$ = '';
-    });
+    // clear values
+    this.link_title$ = '';
+    this.link_url$ = '';
+    this.cdRef.markForCheck();
   }
 
   _changeTitle(event: any) {
@@ -526,7 +523,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
           if (!/^(http|https):\/\//.test(data)) {
             data = `//${data}`;
           }
-          window.open(content.data, '_blank');
+          window.open(data, '_blank');
         }
       })
       .catch(console.error);
@@ -575,15 +572,13 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
   createModal(modalType: string) {
     switch (modalType) {
       case 'addLocalFile':
-        this.ngZone.run(() => {
-          this.bShowFileModal$ = true;
-        });
+        this.bShowFileModal$ = true;
+        this.cdRef.markForCheck();
 
         break;
       case 'addLocalLink':
-        this.ngZone.run(() => {
-          this.bShowLinkModal$ = true;
-        });
+        this.bShowLinkModal$ = true;
+        this.cdRef.markForCheck();
         break;
       default:
         break;
@@ -716,6 +711,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
         })
         .finally(() => {
           this.lu_bLoading$ = false;
+          this.cdRef.markForCheck();
         });
     }
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/quick-create/config-ext.json

@@ -1,10 +1,10 @@
 {
-    "componentKey": "QuickCreate",
-    "name": "QuickCreate",
-    "label": "Quick create",
-    "description": "Quick create widget",
-    "type": "Widget",
-    "subtype": "PAGE",
-    "properties": [],
-    "defaultConfig": {}
-}
+  "componentKey": "QuickCreate",
+  "name": "QuickCreate",
+  "label": "Quick create",
+  "description": "Quick create widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": [],
+  "defaultConfig": {}
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Todo",
-    "name": "Todo",
-    "label": "Todo",
-    "description": "My worklist widget",
-    "type": "Widget",
-    "subtype": "PAGE",
-    "properties": []
-}
+  "componentKey": "Todo",
+  "name": "Todo",
+  "label": "Todo",
+  "description": "My worklist widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
@@ -97,7 +97,8 @@ export class TodoComponent implements OnInit, OnDestroy {
   constructor(
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private utils: Utils
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -167,6 +168,7 @@ export class TodoComponent implements OnInit, OnDestroy {
   deferLoadWorklistItems(responseData) {
     this.count = responseData.totalCount;
     this.arAssignments$ = responseData.data;
+    this.cdRef.markForCheck();
   }
 
   getID(assignment: any) {
@@ -221,6 +223,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, this.count, false, this.context$).then(
         response => {
           this.arAssignments$ = response.data;
+          this.cdRef.markForCheck();
         }
       );
     } else {
@@ -268,6 +271,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       .openAssignment(id, classname, options)
       .then(() => {
         this.psService.sendMessage(false);
+        this.cdRef.markForCheck();
         if (this.bLogging) {
           console.log(`openAssignment completed`);
         }
@@ -275,6 +279,7 @@ export class TodoComponent implements OnInit, OnDestroy {
       .catch(() => {
         this.psService.sendMessage(false);
         this.erService.sendMessage('show', 'Failed to open');
+        this.cdRef.markForCheck();
       });
   }
 }

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx

@@ -4,12 +4,20 @@ 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 { 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 StyledPegaDxilMyTestTextWrapper from './styles';
 
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,7 +34,6 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur */
     readOnly,
     testId,
@@ -34,14 +41,23 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
   const maxLength = fieldMetadata?.maxLength;
@@ -53,22 +69,14 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -94,7 +102,10 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        slotProps={{
+          input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyTestTextWrapper>
   );

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/AlertBanner/AlertBanner.css

@@ -0,0 +1,46 @@
+.alert-banner-title {
+  font-weight: 700;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.alert-banner-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.alert-banner-badge--urgent {
+  background: var(--app-error-dark-color);
+  color: #fff;
+}
+
+.alert-banner-badge--warning {
+  background: var(--app-warning-color-dark);
+  color: #fff;
+}
+
+.alert-banner-badge--success {
+  background: var(--stepper-completed-bg-color);
+  color: #fff;
+}
+
+.alert-banner-badge--info {
+  background: var(--link-button-color);
+  color: #fff;
+}
+
+.alert-banner-list {
+  margin: 0;
+  padding-left: 1.25rem;
+}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -1,39 +1,56 @@
-import { Alert } from '@mui/material';
+import { Alert, AlertTitle } from '@mui/material';
+import './AlertBanner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
 interface AlertBannerProps {
-  // If any, enter additional props that only exist on Date here
   id: string;
   variant: string;
   messages: string[];
   onDismiss?: any;
 }
 
-const SEVERITY_MAP = {
-  urgent: 'error',
-  warning: 'warning',
-  success: 'success',
-  info: 'info'
+const VARIANT_MAP: Record<string, { severity: string; label: string }> = {
+  urgent: { severity: 'error', label: 'Error' },
+  warning: { severity: 'warning', label: 'Warning' },
+  success: { severity: 'success', label: 'Success' },
+  info: { severity: 'info', label: 'Info' }
 };
 
-export default function AlertBanner(props: AlertBannerProps) {
-  const { id, variant, messages, onDismiss } = props;
-  let additionalProps = {};
+function renderMessage(message: string) {
+  const colonIndex = message.indexOf(':');
+  if (colonIndex === -1) return message;
+  return (
+    <>
+      <strong>{message.slice(0, colonIndex + 1)}</strong>
+      {message.slice(colonIndex + 1)}
+    </>
+  );
+}
 
-  if (onDismiss) {
-    additionalProps = {
-      onClose: onDismiss
-    };
-  }
+export default function AlertBanner({ id, variant, messages, onDismiss }: AlertBannerProps) {
+  const { severity, label } = VARIANT_MAP[variant] ?? VARIANT_MAP.info;
+  const isMultiple = messages.length > 1;
 
   return (
     <div id={id}>
-      {messages.map(message => (
-        <Alert key={message} variant='outlined' severity={SEVERITY_MAP[variant]} {...additionalProps}>
-          {message}
-        </Alert>
-      ))}
+      <Alert variant='outlined' severity={severity as any} {...(onDismiss && { onClose: onDismiss })}>
+        {isMultiple && (
+          <AlertTitle className='alert-banner-title'>
+            {label}
+            <span className={`alert-banner-badge alert-banner-badge--${variant}`}>{messages.length}</span>
+          </AlertTitle>
+        )}
+        {isMultiple ? (
+          <ul className='alert-banner-list'>
+            {messages.map(message => (
+              <li key={message}>{renderMessage(message)}</li>
+            ))}
+          </ul>
+        ) : (
+          renderMessage(messages[0])
+        )}
+      </Alert>
     </div>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -14,3 +14,17 @@
   padding: calc(2 * 0.5rem);
   grid-row-gap: calc(2 * 0.5rem);
 }
+
+.psdk-case-summary-fields .label {
+  font-size: 0.8rem;
+  color: #c0c0c0;
+}
+
+.psdk-case-summary-object-ref {
+  text-align: left;
+}
+
+.psdk-case-summary-object-ref-value * {
+  justify-content: flex-start;
+  text-align: left;
+}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -18,13 +18,16 @@ interface CaseSummaryFieldsProps {
   status?: string;
   showStatus?: boolean;
   theFields: any[] | any | never;
+  variant?: 'primary' | 'secondary';
 }
 
 export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const Operator = getComponentFromMap('Operator');
-
-  const { status, showStatus, theFields } = props;
+  const ObjectReference = getComponentFromMap('ObjectReference');
+  const Reference = getComponentFromMap('reference');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const { status, showStatus, theFields, variant = 'primary' } = props;
 
   const [theFieldsToRender, setFieldsToRender] = useState([]);
   const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<any[]>([]);
@@ -212,6 +215,19 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'caseoperator':
         return <Operator {...field.config} />;
 
+      case 'objectreference':
+        return (
+          <div className='psdk-case-summary-object-ref'>
+            <label className='label'>{field.config.displayLabel}</label>
+            <div className='psdk-case-summary-object-ref-value'>
+              <ObjectReference {...field.config} getPConnect={field.getPConnect} />
+            </div>
+          </div>
+        );
+
+      case 'reference':
+        return <Reference {...field.config} getPConnect={field.getPConnect} displayMode='DISPLAY_ONLY' />;
+
       default:
         return (
           <span>
@@ -221,14 +237,50 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
     }
   }
 
+  function renderSecondaryField(field: any) {
+    const fieldTypeLower = field.type.toLowerCase();
+
+    if (fieldTypeLower === 'caseoperator') {
+      return <Operator {...field.config} displayMode='DISPLAY_ONLY' />;
+    }
+
+    // ObjectReference: render label from CaseSummaryFields, value from component
+    if (fieldTypeLower === 'objectreference') {
+      const name = field.config.label || field.config.displayLabel || '';
+      const value = field.getPConnect ? (
+        <ObjectReference {...field.config} getPConnect={field.getPConnect} displayMode='DISPLAY_ONLY' hideLabel />
+      ) : (
+        (field.config.value ?? '---')
+      );
+
+      return <FieldValueList name={name} value={value} variant='inline' />;
+    }
+
+    if (!field.getPConnect) {
+      // Fallback if no getPConnect — render using FieldValueList directly
+      const name = field.config.label || field.config.displayLabel || '';
+      const value = field.config.value ?? '---';
+      return <FieldValueList name={name} value={value} variant='inline' />;
+    }
+
+    const pConnect = field.getPConnect();
+    return pConnect.createComponent({
+      type: field.type,
+      config: {
+        ...field.config,
+        displayMode: 'DISPLAY_ONLY'
+      }
+    });
+  }
+
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
     const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (
-          <Grid2 size={{ xs: 6 }} key={field.config.label}>
-            {getFieldValue(field)}
+          <Grid2 size={{ xs: variant === 'secondary' ? 12 : 6 }} key={field.config.label}>
+            {variant === 'secondary' ? renderSecondaryField(field) : getFieldValue(field)}
           </Grid2>
         );
       }
@@ -236,7 +288,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       return null;
     });
     setFieldsAsGridItems(arGridItems);
-  }, [theFieldsToRender]);
+  }, [theFieldsToRender, variant]);
 
   const theFieldsModifiable = theFields;
 

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren } from 'react';
 import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -9,8 +9,11 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 interface FieldGroupProps {
   // If any, enter additional props that only exist on this component
   name?: string;
-  collapsible?: boolean;
   instructions?: string;
+  defaultCollapsed?: any;
+  collapsed?: any;
+  onToggleCollapsed?: () => void;
+  isCollapsibleMode?: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -32,7 +35,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     gap: '5px',
-    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+    cursor: isCollapsibleMode => (isCollapsibleMode ? 'pointer' : 'auto')
   },
   instructionText: {
     padding: '5px 0'
@@ -40,9 +43,8 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
-  const { children, name, collapsible = false, instructions } = props;
-  const classes = useStyles(collapsible);
-  const [collapsed, setCollapsed] = useState(false);
+  const { children, name, instructions, collapsed, isCollapsibleMode, onToggleCollapsed } = props;
+  const classes = useStyles(isCollapsibleMode);
 
   const descAndChildren = (
     <Grid2 container>
@@ -51,7 +53,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   );
 
   const headerClickHandler = () => {
-    setCollapsed(current => !current);
+    onToggleCollapsed?.();
   };
 
   return (
@@ -59,7 +61,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
       <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
-            {collapsible ? (
+            {isCollapsibleMode ? (
               <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
                 {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
                 <b>{name}</b>
@@ -69,10 +71,15 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
             )}
           </div>
         )}
-        {instructions && instructions !== 'none' && (
-          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+
+        {!collapsed && (
+          <>
+            {instructions && instructions !== 'none' && (
+              <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+            )}
+            {descAndChildren}
+          </>
         )}
-        {!collapsed && descAndChildren}
       </Grid2>
     </Grid2>
   );

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -24,7 +24,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
       <Grid2 style={{ width: '100%' }}>
         <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid2 style={{ width: '100%' }}>
+            <Grid2 key={item.name} style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -31,6 +31,16 @@ const useStyles = makeStyles(theme => ({
   },
   noPaddingBottom: {
     paddingBottom: '0 !important'
+  },
+  htmlContent: {
+    '& ul': {
+      paddingLeft: '30px',
+      listStyleType: 'disc'
+    },
+    '& ol': {
+      paddingLeft: '30px',
+      listStyleType: 'decimal'
+    }
   }
 }));
 
@@ -48,12 +58,14 @@ function formatItemValue(value) {
 export default function FieldValueList(props: FieldValueListProps) {
   const { name, value, variant = 'inline', isHtml = false } = props;
   const classes = useStyles();
+  const isCompact = variant === 'inline-compact';
 
   function getGridItemLabel() {
     return (
-      <Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' ? 12 : isCompact ? 'auto' : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
+          {isCompact ? ':' : ''}
         </Typography>
       </Grid2>
     );
@@ -63,9 +75,12 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid2
+        size={{ xs: variant === 'stacked' || !name ? 12 : isCompact ? 'grow' : 8 }}
+        className={variant === 'stacked' ? classes.noPaddingTop : ''}
+      >
         {isHtml ? (
-          <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
+          <div className={classes.htmlContent} dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
           <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
             {formattedValue}
@@ -76,7 +91,7 @@ export default function FieldValueList(props: FieldValueListProps) {
   }
 
   return (
-    <Grid2 container spacing={4} justifyContent='space-between'>
+    <Grid2 container spacing={isCompact ? 1 : 4} justifyContent={isCompact ? undefined : 'space-between'}>
       {name ? getGridItemLabel() : null}
       {getGridItemValue()}
     </Grid2>