@pega/react-sdk-overrides 0.23.24 → 0.23.25

package/lib/infra/View/View.tsx

@@ -30,7 +30,7 @@ const NO_HEADER_TEMPLATES = [
 ];
 
 export default function View(props) {
-  const { children, template, getPConnect, mode } = props;
+  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
   let { label, showLabel = false } = props;
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
@@ -45,6 +45,13 @@ export default function View(props) {
     showLabel = true;
   }
 
+  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  if (visibility === false) {
+    return '';
+  }
+
   // As long as the template is defined in the dependencies of the view
   // it will be loaded, otherwise fall back to single column
   //  JA - React SDK not using LazyComponentMap yet
@@ -88,7 +95,7 @@ export default function View(props) {
     // console.log(`View rendering template: ${template}`);
 
     // spreading because all props should go to the template
-    let RenderedTemplate = <ViewTemplate {...props}>{children}</ViewTemplate>;
+    let RenderedTemplate = <ViewTemplate key={key} {...props}>{children}</ViewTemplate>;
 
     if (FORMTEMPLATES.includes(template) && showLabel) {
       // Original:

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -79,14 +79,17 @@ export default function FieldGroupTemplate(props) {
 
   pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
   const memoisedReadOnlyList = useMemo(() => {
-    return referenceList.map((item, index) => (
-      <FieldGroup
-        key={item[heading]}
-        name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
-      >
-        {buildView(pConn, index, lookForChildInConfig)}
-      </FieldGroup>
-    ));
+    return referenceList.map((item, index) => {
+      const key = item[heading] || `field-group-row-${index}`;
+      return (
+        <FieldGroup
+          key={key}
+          name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
+        >
+          {buildView(pConn, index, lookForChildInConfig)}
+        </FieldGroup>
+      );
+    });
   }, []);
 
   return <div>{memoisedReadOnlyList}</div>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.24",
+  "version": "0.23.25",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [