@pega/react-sdk-overrides 0.23.24 → 0.23.26

package/lib/designSystemExtension/Banner/Banner.css

@@ -33,3 +33,7 @@
   font-size: 1rem;
   font-weight: 400;
 }
+
+.banner-layout {
+  padding: 1rem;
+}

package/lib/designSystemExtension/Banner/Banner.tsx

@@ -3,8 +3,13 @@ import Grid from '@material-ui/core/Grid';
 import './Banner.css';
 
 export default function Banner(props) {
-  const { a, b, banner } = props;
+  const { a, b, banner, variant} = props;
   const { title, message, backgroundImage } = banner;
+  const variantMap = {
+    'two-column': [6, 6],
+    'narrow-wide': [4, 8],
+    'wide-narrow': [8, 4]
+  };
   return (
     <div style={{ marginBottom: '2rem' }}>
       <div
@@ -18,16 +23,14 @@ export default function Banner(props) {
           </div>
         </div>
       </div>
-      <div style={{ padding: '1rem' }}>
-        <Grid container item xs={12} spacing={1}>
-          <Grid item xs={8} style={{ padding: '1em' }}>
-            {a}
-          </Grid>
-          <Grid item xs={4} style={{ padding: '1em' }}>
-            {b}
-          </Grid>
+      <Grid container item xs={12} className='banner-layout' spacing={1}>
+        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+          {a}
         </Grid>
-      </div>
+        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+          {b}
+        </Grid>
+      </Grid>
     </div>
   );
 }

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,7 +1,7 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
@@ -33,4 +33,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
- }
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -7,7 +7,7 @@ export default function WssQuickCreate(props) {
 
   return (
     <div>
-      <h1>{heading}</h1>
+      <h1 className='quick-link-heading'>{heading}</h1>
       <ul className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {

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:
@@ -127,9 +134,9 @@ export default function View(props) {
 
   if (children) {
     return <>{children}</>;
-  } else {
-    return <div id='View'>View has no children.</div>;
   }
+
+  return null;
 }
 
 View.defaultProps = {

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/lib/template/WssNavBar/WssNavBar.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function WssNavBar(props) {
   const { appInfo, navLinks, operator, navDisplayOptions } = props;
-  const { alignment } = navDisplayOptions;
+  const { alignment, position } = navDisplayOptions;
   const classes = useStyles();
 
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
@@ -55,11 +55,24 @@ export default function WssNavBar(props) {
     setAnchorElUser(null);
   };
 
+  const navLinksContent = (
+    <Box
+      sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
+      style={{ justifyContent: alignment }}
+    >
+      {navLinks.map(link => (
+        <Button className='link-style' key={link.text} onClick={link.onClick}>
+          {link.text}
+        </Button>
+      ))}
+    </Box>
+  );
+
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
-          <Toolbar disableGutters>
+          <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
               <span className={classes.appName}>{appInfo.appName}</span>
@@ -98,16 +111,7 @@ export default function WssNavBar(props) {
               </Menu>
             </Box>
 
-            <Box
-              sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
-              style={{ justifyContent: alignment }}
-            >
-              {navLinks.map(link => (
-                <Button className='link-style' key={link.text} onClick={link.onClick}>
-                  {link.text}
-                </Button>
-              ))}
-            </Box>
+            {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
               <IconButton onClick={handleOpenUserMenu}>
@@ -134,6 +138,7 @@ export default function WssNavBar(props) {
               </Menu>
             </Box>
           </Toolbar>
+          {position === 'below' && <>{navLinksContent}</>}
         </Container>
       </AppBar>
     </div>

package/package.json

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