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

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -4,7 +4,6 @@ import Popover from '@mui/material/Popover';
 import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
-import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -12,12 +11,6 @@ import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare module "@mui/private-theming" {
-  interface DefaultTheme extends MuiTheme {
-    spacing: (spacing: number) => string;
-  }
-}
-
 interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -28,6 +21,7 @@ interface PegaDxilMyPageCaseWidgetProps extends PConnProps {
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
   displayLabel?: any;
+  displayMode?: string;
 }
 
 const useStyles = makeStyles(myTheme => ({
@@ -38,6 +32,13 @@ const useStyles = makeStyles(myTheme => ({
   popover: {
     padding: myTheme.spacing(1),
     margin: myTheme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: myTheme.palette.text.secondary
+  },
+  fieldValue: {
+    color: myTheme.palette.text.primary
   }
 }));
 
@@ -85,7 +86,8 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
     const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const localeCategory = 'Operator';
 
-    operatorPreviewPromise.then((res: any) => {
+    operatorPreviewPromise
+      .then((res: any) => {
       const fillerString = '---';
       let fields: any = [];
       if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
@@ -158,7 +160,10 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
       }
       // Whatever the fields are, update the component's popoverFields
       setPopoverFields(fields);
-    });
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     setPopoverAnchorEl(event.currentTarget);
   }
@@ -182,7 +187,7 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
           return (
             <React.Fragment key={field.id}>
               <Grid2 container size={{ xs: 12 }} spacing={1}>
-                <Grid2 size={{ xs: 12 }}>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='caption'>{field.name}</Typography>
                 </Grid2>
                 <Grid2 size={{ xs: 6 }}>
@@ -198,17 +203,61 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
 
   // End of popover-related
 
+  const { displayMode } = props;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return (
+      <StyledPegaDxilMyPageCaseWidgetWrapper>
+        <>
+          <Grid2 container spacing={4} justifyContent='space-between'>
+            <Grid2 size={{ xs: 4 }}>
+              <Typography variant='body2' component='span' className={classes.fieldLabel}>
+                {caseOpLabel}
+              </Typography>
+            </Grid2>
+            <Grid2 size={{ xs: 8 }}>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'baseline' }}>
+                <Typography variant='body2' component='span' className={classes.fieldValue} onClick={showOperatorDetails} sx={{ cursor: 'pointer' }}>
+                  {caseOpName}
+                </Typography>
+                <Typography variant='caption' component='span' sx={{ color: 'text.secondary' }}>
+                  {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+                </Typography>
+              </div>
+            </Grid2>
+          </Grid2>
+          <Popover
+            id={popoverId}
+            open={popoverOpen}
+            anchorEl={popoverAnchorEl}
+            onClose={handlePopoverClose}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+            slotProps={{
+              paper: { style: { maxWidth: '45ch' } }
+            }}
+          >
+            {getPopoverGrid()}
+          </Popover>
+        </>
+      </StyledPegaDxilMyPageCaseWidgetWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyPageCaseWidgetWrapper>
       <>
         <TextField
+          variant='standard'
           defaultValue={caseOpName}
           label={caseOpLabel}
           onClick={showOperatorDetails}
-          InputProps={{
-            readOnly: true,
-            disableUnderline: true,
-            inputProps: { style: { cursor: 'pointer' } }
+          slotProps={{
+            input: {
+              readOnly: true,
+              disableUnderline: true,
+              inputProps: { style: { cursor: 'pointer' } }
+            }
           }}
         />
         <br />
@@ -220,7 +269,9 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
           onClose={handlePopoverClose}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-          PaperProps={{ style: { maxWidth: '45ch' } }}
+          slotProps={{
+            paper: { style: { maxWidth: '45ch' } }
+          }}
         >
           {getPopoverGrid()}
         </Popover>

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -4,29 +4,12 @@ import {
   CardHeader,
   Typography,
   CardActions,
-  Button,
-  TableContainer,
-  Table,
-  TableBody,
-  TableHead,
-  TableCell,
-  TableRow
+  Button
 } from '@mui/material';
-import { withStyles, createStyles } from '@mui/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import StyledPegaDxilMyPageWidgetWrapper from './styles';
-import isDeepEqual from 'fast-deep-equal/react';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { useRef, useEffect, useState } from 'react';
-import { Theme as MuiTheme } from "@mui/material/styles";
-
-declare module "@mui/private-theming" {
-  interface DefaultTheme extends MuiTheme {
-    spacing: (spacing: number) => string;
-  }
-}
 
 interface PegaDxilMyPageWidgetProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -45,29 +28,11 @@ const useStyles = makeStyles(myTheme => ({
   }
 }));
 
-const StyledTableCell = withStyles((myTheme) =>
-  createStyles({
-    head: {
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'silver',
-      backgroundColor: myTheme.palette.text.disabled,
-      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
-    },
-    body: {
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'silver'
-      // fontSize: 14,
-    }
-  })
-)(TableCell);
-
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
-  const { header = '', description = '', datasource = [], whatsnewlink = '', getPConnect } = props;
+  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
   if (datasource && datasource.source) {
     details = datasource.source.map(item => {
@@ -75,136 +40,12 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
     });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [waitingForData, setWaitingForData] = useState<boolean>(true);
-  const thePConn = getPConnect();
-  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
-  const dataViewName = 'D_pyMyWorkList';
-  const context = thePConn.getContextName();
-
-  const rowData: any = useRef([]);
-
   const classes = useStyles();
 
-  const displayedColumns = [
-    {
-      label: thePConn.getLocalizedValue('Case type', '', ''),
-      type: 'TextInput',
-      fieldName: 'pxProcessName'
-    }, // 2nd and 3rd args empty string until typedef marked correctly
-    {
-      label: thePConn.getLocalizedValue('Key', '', ''),
-      type: 'TextInput',
-      fieldName: 'pxRefObjectInsName'
-    }, // 2nd and 3rd args empty string until typedef marked correctly
-    {
-      label: thePConn.getLocalizedValue('Status', '', ''),
-      type: 'TextInput',
-      fieldName: 'pyAssignmentStatus'
-    }, // 2nd and 3rd args empty string until typedef marked correctly
-    {
-      label: thePConn.getLocalizedValue('Stage', '', ''),
-      type: 'TextInput',
-      fieldName: 'pxTaskLabel'
-    } // 2nd and 3rd args empty string until typedef marked correctly
-  ];
-
-  function computeRowData(rows: object[]): void {
-    const theRowData: object[] = [];
-
-    rows?.forEach((row: any, rowIndex: number) => {
-      // Now, for each property in the index of row properties (displayedColumns), add an object
-      //  to a new array of values
-      const rowDisplayValues: any = [];
-
-      displayedColumns.forEach((column: any, rowValIndex) => {
-        const theType = column.type;
-        const theFieldName = column.fieldName;
-        const theValue =
-          theType === 'Date' || theType === 'DateTime' ? Utils.generateDateTime(row[theFieldName], 'DateTime-Short') : row[theFieldName];
-        rowDisplayValues[rowValIndex] = theValue;
-      });
-
-      theRowData[rowIndex] = rowDisplayValues;
-    });
-
-    if (!isDeepEqual(theRowData, rowData.current)) {
-      // Only update rowData.current when it actually changes (to prevent infinite loop)
-      rowData.current = theRowData;
-    }
-  }
-
   const handleClick = () => {
     window.open(whatsnewlink);
   };
 
-  // Get the case history data when component mounted/initialized
-  useEffect(() => {
-    let bCallSetWaitingForData = true;
-
-    const worklistData = PCore.getDataApiUtils().getData(
-      dataViewName,
-      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
-      context
-    ) as Promise<any>;
-
-    worklistData.then((worklistJSON: any) => {
-      const tableDataResults = worklistJSON.data.data;
-
-      // compute the rowData using the tableDataResults
-      computeRowData(tableDataResults);
-
-      // At this point, if we have data ready to render and haven't been asked
-      //  to NOT call setWaitingForData, we can stop progress indicator
-      if (bCallSetWaitingForData) {
-        setWaitingForData(false);
-      }
-    });
-
-    return () => {
-      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
-      // The useEffect closure lets us have access to the bCallSetWaitingForData
-      //  variable inside the useEffect and inside the "then" clause of the
-      //  historyData promise
-      //  So, if this cleanup code gets run before the promise .then is called,
-      //  we can avoid calling the useState setter which would otherwise show a warning
-      bCallSetWaitingForData = false;
-    };
-  }, []);
-
-  function getTableHeader() {
-    const theRowKey = 'CaseHistory.TableHeader';
-
-    const theHeaderCells: any[] = displayedColumns.map((headerCol, index) => {
-      const theCellKey = `${theRowKey}.${index}`;
-      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>;
-    });
-
-    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
-  }
-
-  function getTableData() {
-    const theDataRows: any[] = [];
-
-    // Note: using rowData.current since we're using useRef as a mutatable
-    //  value that's only updated when it changes.
-    if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: object[], index) => {
-        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
-        const theKey = `CaseHistory-${index}`;
-        theDataRows.push(
-          <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[3] ? (dataRow[3]) : '---' as any}</StyledTableCell>
-          </TableRow>
-        );
-      });
-    }
-    return theDataRows;
-  }
-
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
       <Card title='AppAnnouncement' className={classes.root}>
@@ -228,12 +69,6 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
           </Button>
         </CardActions>
       </Card>
-      <TableContainer>
-        <Table>
-          <TableHead>{getTableHeader()}</TableHead>
-          <TableBody>{getTableData()}</TableBody>
-        </Table>
-      </TableContainer>
     </StyledPegaDxilMyPageWidgetWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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/createAll/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