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

package/tests/assets/sdk-r/components/create/override-sdk/template/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,5 +1,6 @@
+import { useLayoutEffect } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
+import { getFieldMeta } from '@pega/react-sdk-components/lib/components/template/DataReference/utils';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SimpleTableSelectProps extends PConnProps {
@@ -13,100 +14,96 @@ interface SimpleTableSelectProps extends PConnProps {
   parameters: any;
   readonlyContextList: object[] | string;
   dataRelationshipContext: string;
+  defaultRowHeight: string | number;
+  showPromotedFilters: boolean;
+  displayAs: string;
+  contextPage: object;
+  toggleFieldVisibility: boolean;
 }
 
-const isSelfReferencedProperty = (param, referenceProp) => {
-  const [, parentPropName] = param.split('.');
-  return parentPropName === referenceProp;
-};
-
-/**
- * SimpleTable react component
- * @param {*} props - props
- */
-export default function SimpleTableSelect(props: SimpleTableSelectProps) {
+function SelectableTable(props: SimpleTableSelectProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const ListView = getComponentFromMap('ListView');
-  const SimpleTable = getComponentFromMap('SimpleTable');
   const PromotedFilters = getComponentFromMap('PromotedFilters');
 
-  const { label, getPConnect, renderMode = '', showLabel = true, viewName = '', parameters, dataRelationshipContext = null } = props;
+  const {
+    label,
+    getPConnect,
+    showLabel = true,
+    viewName = '',
+    parameters,
+    dataRelationshipContext = null,
+    referenceList,
+    showPromotedFilters,
+    displayAs,
+    readonlyContextList,
+    contextPage,
+    toggleFieldVisibility
+  } = props;
+
+  const pConn = getPConnect();
 
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
   if (propsToUse.showLabel === false) {
     propsToUse.label = '';
   }
 
-  const pConn = getPConnect();
+  const { compositeKeys, fieldMetadata } = getFieldMeta(getPConnect, dataRelationshipContext);
+  const { pageClass } = fieldMetadata;
+
   const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
   const { selectionMode, selectionList } = pConn.getConfigProps() as any;
   const isMultiSelectMode = selectionMode === MULTI;
 
-  if (isMultiSelectMode && renderMode === 'ReadOnly') {
-    return <SimpleTable {...props} showLabel={propsToUse.showLabel} />;
-  }
-
-  const pageReference = pConn.getPageReference();
-  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
-  // Replace here to use the context name instead
-  let contextPageReference: string | null = null;
-  if (props.dataRelationshipContext !== null && selectionMode === 'single') {
-    referenceProp = dataRelationshipContext;
-    contextPageReference = pageReference.concat('.').concat(referenceProp);
-  }
-
-  // Need to get this written so typedefs work
-  const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = isMultiSelectMode
-    ? pConn.getFieldMetadata(`@P .${referenceProp}`)
-    : pConn.getCurrentPageFieldMetadata(contextPageReference);
-
-  const compositeKeys: any[] = [];
-  Object.values(fieldParameters).forEach((param: any) => {
-    if (isSelfReferencedProperty(param, referenceProp)) {
-      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  useLayoutEffect(() => {
+    if (isMultiSelectMode) {
+      // register selectionList in c11nEnv stateProps for client side validation
+      pConn.setStateProps({ selectionList });
+      pConn.getListActions().initDefaultPageInstructions(selectionList, compositeKeys);
     }
-  });
-
-  // setting default row height for select table
-  const defaultRowHeight = '2';
+  }, []);
 
-  const additionalTableConfig = {
-    rowDensity: false,
-    enableFreezeColumns: false,
-    autoSizeColumns: false,
-    resetColumnWidths: false,
+  const additionalTableConfig: any = {
+    rowDensity: displayAs === 'table' || displayAs === 'advancedSearch',
+    enableFreezeColumns: displayAs === 'table' || displayAs === 'advancedSearch',
+    autoSizeColumns: displayAs === 'table' || displayAs === 'advancedSearch',
+    resetColumnWidths: displayAs === 'table' || displayAs === 'advancedSearch',
     defaultFieldDef: {
-      showMenu: false,
-      noContextMenu: true,
-      grouping: false
+      aggregation: false
     },
-    itemKey: '$key',
-    defaultRowHeight
+    itemKey: '$key'
   };
 
+  const searchFields = (pConn as any).getRawConfigProps?.()?.searchFields ?? [];
+  let selectedValues: any = isMultiSelectMode ? readonlyContextList : contextPage;
+
+  if (displayAs === 'advancedSearch') {
+    selectedValues = null;
+  }
+
   const listViewProps = {
     ...props,
     title: propsToUse.label,
     personalization: false,
     grouping: false,
     expandGroups: false,
-    reorderFields: false,
     showHeaderIcons: false,
     editing: false,
     globalSearch: true,
-    toggleFieldVisibility: false,
+    toggleFieldVisibility: (displayAs === 'table' || displayAs === 'advancedSearch') && toggleFieldVisibility,
     basicMode: true,
     additionalTableConfig,
     compositeKeys,
     viewName,
-    parameters
+    parameters,
+    searchFields,
+    selectedValues,
+    isAdvancedSearchAndSelect: displayAs === 'advancedSearch'
   };
 
   const filters = (getPConnect().getRawMetadata() as any).config.promotedFilters ?? [];
 
-  const isSearchable = filters.length > 0;
-
-  if (isSearchable) {
+  if (showPromotedFilters && filters.length > 0) {
     return (
       <PromotedFilters
         getPConnect={getPConnect}
@@ -115,8 +112,26 @@ export default function SimpleTableSelect(props: SimpleTableSelectProps) {
         listViewProps={listViewProps}
         pageClass={pageClass}
         parameters={parameters}
+        referenceList={referenceList}
       />
     );
   }
   return <ListView {...listViewProps} />;
 }
+
+export default function SimpleTableSelect(props: SimpleTableSelectProps) {
+  const SimpleTableManual = getComponentFromMap('SimpleTableManual');
+
+  const { getPConnect, renderMode = '' } = props;
+
+  const pConn = getPConnect();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+  const { selectionMode } = pConn.getConfigProps() as any;
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  if (isMultiSelectMode && renderMode === 'ReadOnly') {
+    return <SimpleTableManual {...props} />;
+  }
+
+  return <SelectableTable {...props} />;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,4 +1,5 @@
-import { FormControl, FormLabel } from '@mui/material';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SingleReferenceReadOnlyProps extends PConnProps {
@@ -61,11 +62,15 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
   return (
-    <>
-      <FormControl variant='standard' sx={{ display: 'flex', flexDirection: 'row' }}>
-        <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
-        {component}
-      </FormControl>
-    </>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      {!hideLabel && (
+        <Grid2 size={{ xs: 4 }}>
+          <Typography variant='body2' component='span' sx={{ fontWeight: 400, color: 'text.secondary' }}>
+            {label}
+          </Typography>
+        </Grid2>
+      )}
+      <Grid2 size={{ xs: hideLabel ? 12 : 8 }}>{component}</Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -66,15 +66,16 @@ export default function Attachment(props: AttachmentProps) {
   const deleteIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
   const srcImg = Utils.getImageSrc('document-doc', Utils.getSDKStaticConentUrl());
 
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const [menuOpenIndex, setMenuOpenIndex] = useState<number | null>(null);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
 
   const deleteFile = useCallback(
     (file, fileIndex) => {
-      setAnchorEl(null);
+      setMenuAnchorEl(null);
+      setMenuOpenIndex(null);
 
       // reset the file input so that it will allow re-uploading the same file after deletion
       if (fileInputRef.current) {
@@ -327,9 +328,14 @@ export default function Attachment(props: AttachmentProps) {
 
   useEffect(() => {
     if (toggleUploadBegin && files.length > 0) {
-      actionSequencer.registerBlockingAction(contextName).then(() => {
-        uploadFiles();
-      });
+      actionSequencer
+        .registerBlockingAction(contextName)
+        .then(() => {
+          uploadFiles();
+        })
+        .catch(e => {
+          console.error(e);
+        });
     }
   }, [toggleUploadBegin]);
 
@@ -343,22 +349,26 @@ export default function Attachment(props: AttachmentProps) {
     return attachments;
   }, [attachments]);
 
-  // Prepares new structure as per Cosmos component
+  // Prepares new structure as per Cosmos component (immutable - does not mutate source)
   const transformAttachments = () => {
-    const transformedFiles = [...attachments];
     let deleteIndex = -1;
-    transformedFiles.forEach(attachment => {
-      attachment.props.id = attachment.responseProps.ID;
-      attachment.props.format = attachment.props.name.split('.').pop();
-      if (attachment.props.error) {
-        attachment.responseProps.deleteIndex = deleteIndex;
+    const transformedFiles = attachments.map(attachment => {
+      const newProps = {
+        ...attachment.props,
+        id: attachment.responseProps.ID,
+        format: attachment.props.name.split('.').pop()
+      };
+      const newResponseProps = { ...attachment.responseProps };
+      if (newProps.error) {
+        newResponseProps.deleteIndex = deleteIndex;
       } else {
         deleteIndex += 1;
-        attachment.responseProps.deleteIndex = deleteIndex;
+        newResponseProps.deleteIndex = deleteIndex;
       }
-      if (attachment.props.thumbnail) {
-        thumbnailURLs.current.push(attachment.props.thumbnail);
+      if (newProps.thumbnail) {
+        thumbnailURLs.current.push(newProps.thumbnail);
       }
+      return { ...attachment, props: newProps, responseProps: newResponseProps };
     });
 
     return transformedFiles;
@@ -426,16 +436,27 @@ export default function Attachment(props: AttachmentProps) {
           isArrayDeepMerge: false,
           removePropertyFromChangedList: true
         });
+      } else if (filesWithError.current.length === 0) {
+        // Sync local state from server when attachments genuinely changed (e.g., table remount after modal submit)
+        const hasActiveUpload = files.some(f => f.inProgress);
+        if (!hasActiveUpload) {
+          const serverFiles = transformAttachments();
+          attachmentCount.current = attachments.length;
+          filesWithError.current = [];
+          setFiles(serverFiles);
+        }
       }
     }
   }, [memoizedAttachments]);
 
-  const handleClick = event => {
-    setAnchorEl(event.currentTarget);
+  const handleClick = (event, index) => {
+    setMenuAnchorEl(event.currentTarget);
+    setMenuOpenIndex(index);
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setMenuAnchorEl(null);
+    setMenuOpenIndex(null);
   };
 
   const content = (
@@ -489,29 +510,37 @@ export default function Attachment(props: AttachmentProps) {
                 {item.props.meta && <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>}
               </div>
               <div className='psdk-utility-action'>
-                {item.ID && (
+                {(item.ID || item.responseProps?.localAttachment) && (
                   <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={() => deleteFile(item, index)}>
                     <img className='psdk-utility-card-action-svg-icon' src={deleteIcon} />
                   </button>
                 )}
-                {!item.ID && (
+                {!item.ID && !item.responseProps?.localAttachment && (
                   <div>
                     <IconButton
                       id='setting-button'
-                      aria-controls={open ? 'file-menu' : undefined}
-                      aria-expanded={open ? 'true' : undefined}
+                      aria-controls={menuOpenIndex === index ? 'file-menu' : undefined}
+                      aria-expanded={menuOpenIndex === index ? 'true' : undefined}
                       aria-haspopup='true'
-                      onClick={handleClick}
+                      onClick={event => handleClick(event, index)}
                       size='large'
                     >
                       <MoreVertIcon />
                     </IconButton>
-                    <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+                    <Menu
+                      id='file-menu'
+                      anchorEl={menuAnchorEl}
+                      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+                      keepMounted
+                      open={menuOpenIndex === index}
+                      onClose={handleClose}
+                    >
                       <MenuItem
                         style={{ fontSize: '14px' }}
                         key='download'
                         onClick={() => {
-                          setAnchorEl(null);
+                          handleClose();
                           onFileDownload(item.responseProps ? item.responseProps : {});
                         }}
                       >
@@ -530,6 +559,70 @@ export default function Attachment(props: AttachmentProps) {
     </div>
   );
 
+  const displayOnlyFileDisplay = (
+    <div>
+      {files &&
+        files.length > 0 &&
+        files.map((item, index) => {
+          return (
+            <div key={index} className='psdk-utility-card'>
+              <div className='psdk-utility-card-icon'>
+                <img className='psdk-utility-card-svg-icon' src={srcImg} />
+              </div>
+              <div className='psdk-utility-card-main'>
+                <div className='psdk-utility-card-main-primary-label'>{item.props.name}</div>
+                {item.props.meta && <div style={{ color: item.props.error ? 'red' : undefined }}>{item.props.meta}</div>}
+              </div>
+              <div className='psdk-utility-action'>
+                <div>
+                  <IconButton
+                    id='setting-button'
+                    aria-controls={menuOpenIndex === index ? 'file-menu' : undefined}
+                    aria-expanded={menuOpenIndex === index ? 'true' : undefined}
+                    aria-haspopup='true'
+                    onClick={event => handleClick(event, index)}
+                    size='large'
+                  >
+                    <MoreVertIcon />
+                  </IconButton>
+                  <Menu
+                    id='file-menu'
+                    anchorEl={menuAnchorEl}
+                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+                    keepMounted
+                    open={menuOpenIndex === index}
+                    onClose={handleClose}
+                  >
+                    <MenuItem
+                      style={{ fontSize: '14px' }}
+                      key='download'
+                      onClick={() => {
+                        handleClose();
+                        onFileDownload(item.responseProps ? item.responseProps : {});
+                      }}
+                    >
+                      Download
+                    </MenuItem>
+                  </Menu>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return (
+      <div className='file-upload-container'>
+        <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
+        {validatemessage !== '' ? <span className='file-error'>{validatemessage}</span> : <span style={{ fontSize: '14px' }}>{helperText}</span>}
+        {files && files.length > 0 ? <section>{displayOnlyFileDisplay}</section> : <span>---</span>}
+      </div>
+    );
+  }
+
   return (
     <div className='file-upload-container'>
       <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/AttachmentUtils.ts

@@ -308,7 +308,7 @@ export const useFileDownload = (context: string) => {
 };
 
 export const useDeepMemo = (memoFn, key) => {
-  const ref: any = useRef();
+  const ref: any = useRef(null);
   if (!ref.current || !equal(key, ref.current.key)) {
     ref.current = { key, value: memoFn() };
   }

package/tests/assets/sdk-r/components/create/override-sdk/widget/CaseHistory/CaseHistory.tsx

@@ -101,18 +101,22 @@ export default function CaseHistory(props: CaseHistoryProps) {
       context
     ) as Promise<any>;
 
-    historyData.then((historyJSON: any) => {
-      const tableDataResults = historyJSON.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);
-      }
-    });
+    historyData
+      .then((historyJSON: any) => {
+        const tableDataResults = historyJSON.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);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     return () => {
       // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription

package/tests/assets/sdk-r/components/create/override-sdk/widget/FileUtility/FileUtility.tsx

@@ -195,7 +195,9 @@ export default function FileUtility(props: FileUtilityProps) {
           window.open(content.data, '_blank');
         }
       })
-      .catch();
+      .catch(e => {
+        console.error(e);
+      });
   }
 
   function deleteAttachedFile(att: any) {
@@ -208,7 +210,9 @@ export default function FileUtility(props: FileUtilityProps) {
       .then(() => {
         getAttachments();
       })
-      .catch();
+      .catch(e => {
+        console.error(e);
+      });
   }
 
   const getAttachments = () => {
@@ -217,33 +221,37 @@ export default function FileUtility(props: FileUtilityProps) {
     if (caseID && caseID !== '') {
       const attPromise = attachmentUtils.getCaseAttachments(caseID, thePConn.getContextName());
 
-      attPromise.then((resp: any) => {
-        const arFullListAttachments = addAttachments(resp);
-        const attachmentsCount = arFullListAttachments.length;
-        const arItems: any = arFullListAttachments.slice(0, 3).map(att => {
-          return getListUtilityItemProps({
-            att,
-            downloadFile: !att.progress ? () => downloadAttachedFile(att) : null,
-            cancelFile: null,
-            deleteFile: !att.progress ? () => deleteAttachedFile(att) : null,
-            removeFile: null
+      attPromise
+        .then((resp: any) => {
+          const arFullListAttachments = addAttachments(resp);
+          const attachmentsCount = arFullListAttachments.length;
+          const arItems: any = arFullListAttachments.slice(0, 3).map(att => {
+            return getListUtilityItemProps({
+              att,
+              downloadFile: !att.progress ? () => downloadAttachedFile(att) : null,
+              cancelFile: null,
+              deleteFile: !att.progress ? () => deleteAttachedFile(att) : null,
+              removeFile: null
+            });
           });
-        });
-        const viewAllarItems: any = arFullListAttachments.map(att => {
-          return getListUtilityItemProps({
-            att,
-            downloadFile: !att.progress ? () => downloadAttachedFile(att) : null,
-            cancelFile: null,
-            deleteFile: !att.progress ? () => deleteAttachedFile(att) : null,
-            removeFile: null
+          const viewAllarItems: any = arFullListAttachments.map(att => {
+            return getListUtilityItemProps({
+              att,
+              downloadFile: !att.progress ? () => downloadAttachedFile(att) : null,
+              cancelFile: null,
+              deleteFile: !att.progress ? () => deleteAttachedFile(att) : null,
+              removeFile: null
+            });
           });
+          setProgress(false);
+          setList(current => {
+            return { ...current, count: attachmentsCount, data: arItems };
+          });
+          setFullAttachments(viewAllarItems);
+        })
+        .catch(e => {
+          console.error(e);
         });
-        setProgress(false);
-        setList(current => {
-          return { ...current, count: attachmentsCount, data: arItems };
-        });
-        setFullAttachments(viewAllarItems);
-      });
     }
   };
 
@@ -373,10 +381,14 @@ export default function FileUtility(props: FileUtilityProps) {
               });
               getAttachments();
             })
-            .catch();
+            .catch(e => {
+              console.error(e);
+            });
         }
       })
-      .catch();
+      .catch(e => {
+        console.error(e);
+      });
   }
 
   function onAddLinksClick() {

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/ToDo.tsx

@@ -165,9 +165,13 @@ export default function ToDo(props: ToDoProps) {
 
   useEffect(() => {
     if (Object.keys(myWorkList).length && myWorkList.datapage) {
-      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, 3, true, context).then(responseData => {
-        deferLoadWorklistItems(responseData);
-      });
+      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, 3, true, context)
+        .then(responseData => {
+          deferLoadWorklistItems(responseData);
+        })
+        .catch(e => {
+          console.error(e);
+        });
     }
   }, []);
 
@@ -203,9 +207,13 @@ export default function ToDo(props: ToDoProps) {
   function _showMore() {
     setBShowMore(false);
     if (type === CONSTS.WORKLIST && count && count > assignments.length && !assignmentsSource) {
-      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, count, false, context).then(response => {
-        setAssignments(response.data);
-      });
+      fetchMyWorkList(myWorkList.datapage, getPConnect().getComponentConfig()?.myWorkList.fields, count, false, context)
+        .then(response => {
+          setAssignments(response.data);
+        })
+        .catch(e => {
+          console.error(e);
+        });
     } else {
       setAssignments(assignmentsSource);
     }

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MySearchbox/utils.ts

@@ -115,7 +115,7 @@ export function usePaginate() {
 }
 
 export function useDeepMemo(memoFn: any, key: any) {
-  const ref = useRef();
+  const ref = useRef<{ key: any; value: any } | undefined>(undefined);
   // @ts-ignore
   if (!ref.current || !equal(key, ref.current.key)) {
     // @ts-ignore

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyDetails/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyForm/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnForm/DetailsRender.tsx

@@ -3,7 +3,7 @@ import { FieldValueList } from '@pega/cosmos-react-core';
 
 interface DetailsRenderProps {
   children?: never;
-  child: NonNullable<ReactElement>;
+  child: NonNullable<ReactElement<any>>;
 }
 
 const DetailsRender = (props: DetailsRenderProps) => {