@patternfly/react-core 6.0.0-alpha.61 → 6.0.0-alpha.62

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.60","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.61","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.60","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.61","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.60","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.61","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.61",
+  "version": "6.0.0-alpha.62",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "7b22ff230948cf8b4142e0f8d7a3d4b76835026f"
+  "gitHead": "c2840cf2e9e7f864392097450cc2ee11d163ed69"
 }

package/src/components/Page/Page.tsx

@@ -19,8 +19,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <Masthead />) */
-  header?: React.ReactNode;
+  /** Masthead component (e.g. <Masthead />) */
+  masthead?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
@@ -220,7 +220,7 @@ class Page extends React.Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
-      header,
+      masthead,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -341,7 +341,7 @@ class Page extends React.Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {header}
+          {masthead}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

package/src/components/Page/PageSidebar.tsx

@@ -10,7 +10,7 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /**
    * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
-   * the sidebar component or add a callback onSidebarToggle function into the PageHeader component
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */

package/src/components/Page/__tests__/Page.test.tsx

@@ -22,7 +22,7 @@ const props = {
 
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -30,7 +30,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -39,7 +39,7 @@ describe('Page', () => {
   });
 
   test('Check dark page against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -47,7 +47,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -56,11 +56,11 @@ describe('Page', () => {
   });
 
   test('Check page horizontal layout example against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -69,7 +69,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -83,7 +83,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -93,7 +93,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -109,7 +109,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={<PageBreadcrumb />}
         breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
@@ -123,7 +123,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -139,7 +139,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={<PageBreadcrumb />}
         breadcrumbProps={{
@@ -155,11 +155,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -179,11 +179,11 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -203,11 +203,11 @@ describe('Page', () => {
   });
 
   test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb
           stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
         >
@@ -229,11 +229,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageNavigation>
           <Nav aria-label="Nav" variant="horizontal-subnav">
             <NavList>
@@ -256,11 +256,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
           <PageBreadcrumb>
             <Breadcrumb>
@@ -295,7 +295,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
@@ -326,7 +326,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={crumb}
         horizontalSubnav={nav}
@@ -349,7 +349,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify skip to content points to main content region', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>
@@ -367,7 +367,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={PageBreadcrumb}
         skipToContent={PageSkipToContent}

package/src/components/Page/examples/Page.md

@@ -24,7 +24,7 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
 
 A page will typically contain the following components:
 
-- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
   - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -35,7 +35,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -64,7 +64,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection isWidthLimited isCenterAligned>
         <Card>
           <CardBody>

package/src/components/Page/examples/PageGroupSection.tsx

@@ -39,7 +39,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -68,7 +68,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageGroup>
         <PageNavigation>
           <Nav aria-label="Group section navigation" variant="horizontal-subnav">

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -21,7 +21,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead inset={{ default: 'insetXs' }}>
       <MastheadMain>
         <MastheadBrand href="https://patternfly.org" target="_blank">
@@ -33,7 +33,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header}>
+    <Page masthead={masthead}>
       <PageSection>Section 1</PageSection>
       <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -31,7 +31,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section with default padding</PageSection>
       <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
       <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -31,7 +31,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -64,7 +64,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection>Section 2</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -25,7 +25,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
@@ -48,7 +48,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page isManagedSidebar header={header} sidebar={sidebar}>
+    <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection>Section 2</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -31,7 +31,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -31,7 +31,7 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>A default page section</PageSection>
       <PageSection isFilled={true}>This section fills the available space.</PageSection>
       <PageSection isFilled={false}>

package/src/demos/DashboardWrapper.tsx

@@ -49,7 +49,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
   children,
   mainContainerId,
   breadcrumb,
-  header,
+  masthead,
   sidebar,
   sidebarNavOpen,
   onPageResize,
@@ -106,7 +106,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
 
   return (
     <Page
-      header={header ?? <DashboardHeader />}
+      masthead={masthead ?? <DashboardHeader />}
       sidebar={sidebar ?? _sidebar}
       isManagedSidebar
       skipToContent={PageSkipToContent}

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -262,7 +262,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -521,7 +521,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         notificationDrawer={notificationDrawer}

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -312,7 +312,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -760,7 +760,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         notificationDrawer={notificationDrawer}

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -436,7 +436,7 @@ export const PaginatedTableAction = () => {
 
   return (
     <React.Fragment>
-      <Page sidebar={sidebar} header={masthead} isManagedSidebar>
+      <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
             {Object.keys(breadcrumbItems).map((key, idx, arr) => (

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -462,7 +462,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Page sidebar={sidebar} header={masthead} isManagedSidebar>
+      <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
             {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => (

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -310,7 +310,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
 
   return (
     <DashboardWrapper
-      header={<DashboardHeader notificationBadge={notificationBadge} />}
+      masthead={<DashboardHeader notificationBadge={notificationBadge} />}
       mainContainerId="main-content-page-layout-default-nav"
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}

package/src/demos/examples/DashboardWrapper.js

@@ -55,7 +55,7 @@ export default class DashboardWrapper extends React.Component {
       children,
       mainContainerId,
       breadcrumb,
-      header,
+      masthead,
       sidebar,
       sidebarNavOpen,
       onPageResize = () => {},
@@ -106,7 +106,7 @@ export default class DashboardWrapper extends React.Component {
 
     return (
       <Page
-        header={header !== undefined ? header : <DashboardHeader />}
+        masthead={masthead !== undefined ? masthead : <DashboardHeader />}
         sidebar={sidebar !== undefined ? sidebar : _sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -521,7 +521,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       sidebar={sidebar}
       isManagedSidebar
       skipToContent={pageSkipToContent}

package/src/demos/examples/Nav/NavDefault.tsx

@@ -64,7 +64,7 @@ export const NavDefault: React.FunctionComponent = () => {
   return (
     <>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -128,7 +128,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={<DashboardHeader />} sidebar={sidebar}>
+    <Page masthead={<DashboardHeader />} sidebar={sidebar}>
       <PageSection>
         <strong>Nav Layer: </strong>
         {navLayer}

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -90,7 +90,7 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -215,7 +215,7 @@ export const NavFlyout: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -263,7 +263,7 @@ export const NavFlyout: React.FunctionComponent = () => {
 
   return (
     <Page
-      header={Header}
+      masthead={masthead}
       sidebar={Sidebar}
       onPageResize={onPageResize}
       skipToContent={PageSkipToContent}

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -73,7 +73,7 @@ export const NavGrouped: React.FunctionComponent = () => {
   return (
     <>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -193,7 +193,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
       </ToolbarContent>
     </Toolbar>
   );
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadMain>
         <MastheadBrand>
@@ -209,7 +209,12 @@ export const NavHorizontal: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Page header={Header} skipToContent={PageSkipToContent} breadcrumb={DashboardBreadcrumb} mainContainerId={pageId}>
+      <Page
+        masthead={masthead}
+        skipToContent={PageSkipToContent}
+        breadcrumb={DashboardBreadcrumb}
+        mainContainerId={pageId}
+      >
         <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -242,7 +242,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
       </ToolbarContent>
     </Toolbar>
   );
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -263,7 +263,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Page header={Header} skipToContent={PageSkipToContent} mainContainerId={pageId}>
+      <Page masthead={masthead} skipToContent={PageSkipToContent} mainContainerId={pageId}>
         <PageSection type={PageSectionTypes.subNav} isWidthLimited>
           {SubNav}
         </PageSection>