@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/infra/Stages/Stages.tsx

@@ -1,22 +1,16 @@
-import React from "react";
-import { Breadcrumbs, Card, Typography } from "@material-ui/core";
+import { Breadcrumbs, Card, Typography } from '@material-ui/core';
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
 import DoneIcon from '@material-ui/icons/Done';
 import { makeStyles } from '@material-ui/core/styles';
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface StagesProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  stages: Array<any>
+  stages: any[];
 }
 
-
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
-declare const PCore: any;
-
-
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     paddingRight: theme.spacing(1),
     paddingLeft: theme.spacing(1),
@@ -25,25 +19,23 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
+    marginBottom: theme.spacing(1)
   },
   completedStage: {
-    color: theme.palette.text.primary,
+    color: theme.palette.text.primary
   },
   currentStage: {
     color: theme.palette.info.dark,
-    fontWeight: 600,
+    fontWeight: 600
   },
   futureStage: {
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.secondary
   },
   separatorIcon: {
-    color: theme.palette.text.disabled,
+    color: theme.palette.text.disabled
   }
-
 }));
 
-
 /**
  * API to filter out the alternate stages which are not in active and return all other stages
  * @param {Array} stages - Stages of a case type
@@ -55,11 +47,7 @@ function getFilteredStages(stages) {
     return [];
   }
 
-  return stages.filter(
-    (stage) =>
-      stage.type !== "Alternate" ||
-      (stage.type === "Alternate" && stage.visited_status === "active")
-  );
+  return stages.filter(stage => stage.type !== 'Alternate' || (stage.type === 'Alternate' && stage.visited_status === 'active'));
 }
 
 /* TODO - this component should be refactored and not exposed as top level DX Component -
@@ -71,17 +59,16 @@ export default function Stages(props: StagesProps) {
   const pConn = getPConnect();
   const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
 
-
   const filteredStages = getFilteredStages(stages);
-  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, '');  // 2nd arg empty string until typedef allows optional
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: PCore.getLocaleUtils().getLocaleValue(stage.name, null, key),
+      name: PCore.getLocaleUtils().getLocaleValue(stage.name, undefined, key),
       id: theID,
-      complete: stage.visited_status === "completed",
-      current: (theID === currentStageID),
-      last: (index === arr.length - 1),
+      complete: stage.visited_status === 'completed',
+      current: theID === currentStageID,
+      last: index === arr.length - 1
     };
   });
 
@@ -100,26 +87,32 @@ export default function Stages(props: StagesProps) {
       theClass = classes.futureStage;
     }
 
-    return <span key={index}>
-        {stage.complete ? <DoneIcon color="disabled" fontSize="small" /> : null}
-        <Typography variant="h5" component="span" display="inline" className={theClass}>{stage.name}</Typography>
-      </span>;
+    return (
+      <span key={index}>
+        {stage.complete ? <DoneIcon color='disabled' fontSize='small' /> : null}
+        <Typography variant='h5' component='span' display='inline' className={theClass}>
+          {stage.name}
+        </Typography>
+      </span>
+    );
   }
 
   function getStages(inStages) {
-    return <Breadcrumbs aria-label="stages" separator={<DoubleArrowIcon className={classes.separatorIcon} />}>
-      {inStages.map((stage, index) => {
-        return getStage(stage, index);
-      })}
-    </Breadcrumbs>
+    return (
+      <Breadcrumbs aria-label='stages' separator={<DoubleArrowIcon className={classes.separatorIcon} />}>
+        {inStages.map((stage, index) => {
+          return getStage(stage, index);
+        })}
+      </Breadcrumbs>
+    );
   }
 
   return (
-    <Card id="Stages" className={classes.root}>
+    <Card id='Stages' className={classes.root}>
       {/* Stages<br />
       currentStageID: {currentStageID}<br />
       {JSON.stringify(stagesObj)}<br /><br /> */}
       {getStages(stagesObj)}
     </Card>
-  )
+  );
 }

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -1,9 +1,5 @@
-import React from "react";
-import { withStyles } from '@material-ui/core/styles'
-import {
-  Tab,
-  Divider,
-} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import { Tab, Divider } from '@material-ui/core';
 
 // LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -11,7 +7,6 @@ interface LeftAlignVerticalTabsProps {
   // If any, enter additional props that only exist on this component
 }
 
-
 // LeftAlignVerticalTab is a specialized Tab that has styles to make it
 //  left aligned and full width of the container Tabs
 
@@ -23,12 +18,17 @@ interface LeftAlignVerticalTabsProps {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%',
+    maxWidth: '100%'
   },
   wrapper: {
     display: 'block',
-    textAlign: 'left',
-  },
-}))((props: LeftAlignVerticalTabsProps) => <div><Tab {...props} /><Divider /></div>);
+    textAlign: 'left'
+  }
+}))((props: LeftAlignVerticalTabsProps) => (
+  <div>
+    <Tab {...props} />
+    <Divider />
+  </div>
+));
 
 export default LeftAlignVerticalTabs;

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -1,31 +1,29 @@
-import React, { useState, useEffect } from "react";
-import { makeStyles } from '@material-ui/core/styles'
-
+import React, { useState, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
+
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
 interface VerticalTabsProps {
   // If any, enter additional props that only exist on this component
-  tabconfig: Array<any>
+  tabconfig: any[];
 }
 
-
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
 //  So, we're going to make the selected vertical tab indicator use a color from our theme.
-const useStyles = makeStyles((theme) => (
-    {
-    tabs: {
-      '& div > span': {
-        backgroundColor: theme.palette.info.dark,
-        width: "3px"
-      },
-    },
+const useStyles = makeStyles(theme => ({
+  tabs: {
+    '& div > span': {
+      backgroundColor: theme.palette.info.dark,
+      width: '3px'
+    }
+  }
 }));
 
 // Implementation of custom event inspired by:
 //  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad
-const createCustomEvent = (eventName: string, additionalData: {[key: string]: string}): CustomEvent | null => {
+const createCustomEvent = (eventName: string, additionalData: { [key: string]: string }): CustomEvent | null => {
   if (window) {
     return new CustomEvent(eventName, {
       detail: { additionalData }
@@ -35,10 +33,9 @@ const createCustomEvent = (eventName: string, additionalData: {[key: string]: st
   return null;
 };
 
-
 export default function VerticalTabs(props: VerticalTabsProps) {
   // Get emitted components from map (so we can get any override that may exist)
-  const LeftAlignVerticalTab = getComponentFromMap("LeftAlignVerticalTabs");
+  const LeftAlignVerticalTab = getComponentFromMap('LeftAlignVerticalTabs');
 
   // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
   const { tabconfig = [] } = props;
@@ -46,14 +43,12 @@ export default function VerticalTabs(props: VerticalTabsProps) {
   const [value, setValue] = useState(0);
 
   useEffect(() => {
-
-    const eventData = {"itemClicked": value.toString()};
+    const eventData = { itemClicked: value.toString() };
     const myEvent = createCustomEvent('VerticalTabClick', eventData);
 
     if (myEvent !== null) {
-      document.dispatchEvent( myEvent );
+      document.dispatchEvent(myEvent);
     }
-
   }, [value]);
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
@@ -61,15 +56,13 @@ export default function VerticalTabs(props: VerticalTabsProps) {
   };
 
   return (
-    <div id="VerticalTabs">
+    <div id='VerticalTabs'>
       {/* VerticalTabs: {JSON.stringify(tabconfig)} */}
-      <Tabs
-        className={classes.tabs}
-        orientation="vertical"
-        value={value}
-        onChange={handleChange}>
-        {tabconfig.map((tab) => <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />)}
+      <Tabs className={classes.tabs} orientation='vertical' value={value} onChange={handleChange}>
+        {tabconfig.map(tab => (
+          <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />
+        ))}
       </Tabs>
     </div>
-  )
+  );
 }

package/lib/infra/View/View.tsx

@@ -1,32 +1,25 @@
-import React from 'react';
-// import { FieldGroup } from "@pega/cosmos-react-core";
-// import { LazyMap as LazyComponentMap } from "../../components_map";
+import { PropsWithChildren } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Need to import any templates that we might render
 
 import './View.css';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-
-
 interface ViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  template?: string,
-  label?: string,
-  showLabel: boolean,
-  mode?: string,
-  title?: string,
-  visibility?: boolean,
-  name?: string,
-  bInForm?: boolean
+  template?: string;
+  label?: string;
+  showLabel: boolean;
+  mode?: string;
+  title?: string;
+  visibility?: boolean;
+  name?: string;
+  bInForm?: boolean;
 }
 
-
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
 // Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -46,14 +39,14 @@ const NO_HEADER_TEMPLATES = [
   'DynamicTabs'
 ];
 
-export default function View(props: ViewProps) {
+export default function View(props: PropsWithChildren<ViewProps>) {
   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
   // Putting this logic here instead of copy/paste in every Form template index.js
 
-  const inheritedProps: any = getPConnect().getInheritedProps();  // try to remove any when getInheritedProps typedefs are fixed
+  const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
 
@@ -86,7 +79,11 @@ export default function View(props: ViewProps) {
     // console.log(`View rendering template: ${template}`);
 
     // spreading because all props should go to the template
-    let RenderedTemplate = <ViewTemplate key={key} {...props}>{children}</ViewTemplate>;
+    let RenderedTemplate = (
+      <ViewTemplate key={key} {...props}>
+        {children}
+      </ViewTemplate>
+    );
 
     if (FORMTEMPLATES.includes(template) && showLabel) {
       // Original:
@@ -130,7 +127,6 @@ export default function View(props: ViewProps) {
   return null;
 }
 
-
 // Adapted from Constellation DX Component to add in additional props for some templates
 View.additionalProps = (state, getPConnect) => {
   const thePConn = getPConnect();

package/lib/template/AppShell/AppShell.css

@@ -1,40 +1,39 @@
 .appshell-top {
-    display: flex;
-    background-color: var(--app-background-color);
+  display: flex;
+  background-color: var(--app-background-color);
 }
 
-
 .appshell-main {
-    position: relative;
-    min-height: 100vh;
-    display: block;
-    width: 100%;
+  position: relative;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
 }
 
 .psdk-icon {
-    padding: 0rem 0.125rem;
-    min-width: unset;
+  padding: 0rem 0.125rem;
+  min-width: unset;
 }
 
 .progress-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    background-color: whitesmoke;
-    position: fixed;
-    z-index: 999;
-    top: 0rem;
-    left: 0rem;
-    opacity: 0.5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
 }
 
 .progress-spinner {
-    text-align: center;
+  text-align: center;
 }
 
 ::ng-deep snack-bar-container.snackbar-newline {
-    white-space: pre-line;
+  white-space: pre-line;
 }

package/lib/template/AppShell/AppShell.tsx

@@ -1,33 +1,31 @@
-import React, { useEffect, useState } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Avatar from '@material-ui/core/Avatar';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
-import './AppShell.css';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './AppShell.css';
 
 interface AppShellProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  showAppName: boolean,
-  pages: Array<{
-    pxPageViewIcon: string,
-    pyClassName: string,
-    pyLabel: string,
-    pyRuleName: string,
-    pyURLContent: string,
-
-  }>,
-  caseTypes?:Array<object>,
-  children?: Array<any>,
-  portalTemplate: string,
-  portalName: string,
-  portalLogo : string,
-  navDisplayOptions: { alignment: string, position: string }
+  showAppName: boolean;
+  pages: {
+    pxPageViewIcon: string;
+    pyClassName: string;
+    pyLabel: string;
+    pyRuleName: string;
+    pyURLContent: string;
+  }[];
+  caseTypes?: object[];
+  portalTemplate: string;
+  portalName: string;
+  portalLogo: string;
+  navDisplayOptions: { alignment: string; position: string };
 }
 
-
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex'
@@ -47,29 +45,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
-declare const PCore: any;
-
-
-export default function AppShell(props:AppShellProps) {
+export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // Get emitted components from map (so we can get any override that may exist)
-  const NavBar = getComponentFromMap("NavBar");
-  const WssNavBar = getComponentFromMap("WssNavBar");
-
-  const {
-    pages = [],
-    caseTypes = [],
-    showAppName,
-    children = [],
-    getPConnect,
-    portalTemplate,
-    portalName,
-    portalLogo,
-    navDisplayOptions
-  } = props;
+  const NavBar = getComponentFromMap('NavBar');
+  const WssNavBar = getComponentFromMap('WssNavBar');
+
+  const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
 
   const [open, setOpen] = useState(true);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
   const pConn = getPConnect();
   const envInfo = PCore.getEnvironmentInfo();
@@ -77,25 +61,25 @@ export default function AppShell(props:AppShellProps) {
   const userName = envInfo.getOperatorName();
   const currentUserInitials = Utils.getInitials(userName);
   const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
-  const portalClass = pConn.getValue('.classID', '');  // 2nd arg empty string until typedef marked correctly
+  const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
   const envPortalName = envInfo.getPortalName();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   const classes = useStyles();
   const actionsAPI = pConn.getActionsApi();
-  const localeReference = pConn.getValue('.pyLocaleReference', '');  // 2nd arg empty string until typedef marked correctly
-  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [appName, setAppName] = useState('');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [mapChildren, setMapChildren] = useState([]);
 
   // Initial setting of appName and mapChildren
   useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
 
-    const tempMap: any = pConn.getChildren()?.["map"]((child: any, index) => {
+    const tempMap: any = (pConn.getChildren() as any)?.map((child: any, index) => {
       const theChildComp = child.getPConnect().getComponentName();
       const theKey = `.${index}`;
       return (
@@ -118,9 +102,7 @@ export default function AppShell(props:AppShellProps) {
       portalLogo.toLowerCase().includes('py-logo') ||
       portalLogo.toLowerCase().includes('py-full-logo')
     ) {
-      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat(
-        'pzpega-logo-mark.svg'
-      );
+      const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat('pzpega-logo-mark.svg');
       setIconURL(portalLogoImage);
       setFullIconURL(`${Utils.getSDKStaticConentUrl()}static/py-full-logo.svg`);
     }
@@ -134,10 +116,8 @@ export default function AppShell(props:AppShellProps) {
           setFullIconURL(data);
         })
         .catch(() => {
-           // eslint-disable-next-line no-console
-          console.error(
-            `${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`
-          );
+          // eslint-disable-next-line no-console
+          console.error(`${localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
   }, [portalLogo]);
@@ -176,10 +156,7 @@ export default function AppShell(props:AppShellProps) {
           name,
           icon: page.pxPageViewIcon.replace('pi pi-', ''),
           active: page.pyRuleName === activeTab,
-          onClick: () =>
-            !page.pyURLContent || page.pyURLContent === ''
-              ? showPage(page.pyRuleName, page.pyClassName)
-              : openURL(page.pyURLContent)
+          onClick: () => (!page.pyURLContent || page.pyURLContent === '' ? showPage(page.pyRuleName, page.pyClassName) : openURL(page.pyURLContent))
         };
       });
 
@@ -198,18 +175,10 @@ export default function AppShell(props:AppShellProps) {
           portalName={portalName}
           imageSrc={iconURL}
           fullImageSrc={fullIconURL}
-          appName={localizedVal(
-            appNameToDisplay,
-            '',
-            `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-          )}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           appInfo={{
             imageSrc: iconURL,
-            appName: localizedVal(
-              appNameToDisplay,
-              '',
-              `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-            ),
+            appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
             onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
           }}
           navLinks={links.filter((link, index) => {
@@ -220,24 +189,20 @@ export default function AppShell(props:AppShellProps) {
         />
         <div className={classes.wsscontent}>{children}</div>
       </div>
-
     );
   }
 
   return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
     <NavContext.Provider value={{ open, setOpen }}>
       <div id='AppShell' className={classes.root}>
         <NavBar
           getPConnect={getPConnect}
           pConn={getPConnect()}
-          appName={localizedVal(
-            appNameToDisplay,
-            '',
-            `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
-          )}
+          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           pages={pages}
           caseTypes={caseTypes}
-        ></NavBar>
+        />
         <div className={classes.content}>{children}</div>
       </div>
     </NavContext.Provider>

package/lib/template/BannerPage/BannerPage.tsx

@@ -1,25 +1,23 @@
-import { useMemo, Children } from 'react';
-import React from 'react';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { Children, PropsWithChildren, useMemo } from 'react';
 
-// BannerPage does NOT have getPConnect. So, no need to extend from PConnProps
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-interface BannerPageProps {
+interface BannerPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  children: Array<any>,
-  layout?: string,
-  heading?: string,
-  message?: string,
-  imageTheme?: string,
-  backgroundImage?: string,
-  backgroundColor?: string,
-  tintImage?: boolean
+  layout?: string;
+  heading?: string;
+  message?: string;
+  imageTheme?: string;
+  backgroundImage?: string;
+  backgroundColor?: string;
+  tintImage?: boolean;
 }
 
 /*
  * BannerPage template.
  */
-export default function BannerPage(props: BannerPageProps) {
+export default function BannerPage(props: PropsWithChildren<BannerPageProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const Banner = getComponentFromMap('Banner');