@patternfly/react-docs 5.22.6 → 5.22.7

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.22.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.6...@patternfly/react-docs@5.22.7) (2021-10-05)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
 ## [5.22.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.22.5...@patternfly/react-docs@5.22.6) (2021-10-05)
 
 **Note:** Version bump only for package @patternfly/react-docs

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "5.22.6",
+  "version": "5.22.7",
   "publishConfig": {
     "access": "public",
     "tag": "prerelease-v4"
@@ -23,18 +23,18 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "4.139.2",
-    "@patternfly/react-catalog-view-extension": "^4.13.4",
+    "@patternfly/react-catalog-view-extension": "^4.13.5",
     "@patternfly/react-charts": "^6.15.26",
-    "@patternfly/react-code-editor": "^4.3.71",
-    "@patternfly/react-core": "^4.158.4",
+    "@patternfly/react-code-editor": "^4.3.72",
+    "@patternfly/react-core": "^4.159.0",
     "@patternfly/react-icons": "^4.12.1",
-    "@patternfly/react-inline-edit-extension": "^4.7.95",
-    "@patternfly/react-log-viewer": "^4.7.7",
+    "@patternfly/react-inline-edit-extension": "^4.7.96",
+    "@patternfly/react-log-viewer": "^4.7.8",
     "@patternfly/react-styles": "^4.12.1",
-    "@patternfly/react-table": "^4.30.14",
+    "@patternfly/react-table": "^4.30.15",
     "@patternfly/react-tokens": "^4.13.1",
-    "@patternfly/react-topology": "^4.9.90",
-    "@patternfly/react-virtualized-extension": "^4.9.60"
+    "@patternfly/react-topology": "^4.9.91",
+    "@patternfly/react-virtualized-extension": "^4.9.61"
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "4.2.1",
@@ -44,7 +44,7 @@
     "react-dom": "^17.0.0",
     "rimraf": "^2.6.3",
     "shx": "^0.3.2",
-    "theme-patternfly-org": "0.7.6"
+    "theme-patternfly-org": "0.7.7"
   },
   "keywords": [
     "gatsby"
@@ -53,5 +53,5 @@
     "last 2 versions",
     "not ie <= 11"
   ],
-  "gitHead": "d9a788888b436fb8a85bed6042ae4bd056b78c53"
+  "gitHead": "86e7ecb47f3d2197cb664ce7237d3a25e18f8a48"
 }

package/src/generated/components/drawer/react.js

@@ -313,7 +313,6 @@ const pageData = {
     "Inline panel on right",
     "Inline panel on left",
     "Stacked content body elements",
-    "Stacked content body elements",
     "Modified content padding",
     "Modified panel padding",
     "Additional section above drawer content",
@@ -441,7 +440,6 @@ const Component = () => (
     {React.createElement(pageData.examples["Inline panel on right"])}
     {React.createElement(pageData.examples["Inline panel on left"])}
     {React.createElement(pageData.examples["Stacked content body elements"])}
-    {React.createElement(pageData.examples["Stacked content body elements"])}
     {React.createElement(pageData.examples["Modified content padding"])}
     {React.createElement(pageData.examples["Modified panel padding"])}
     {React.createElement(pageData.examples["Additional section above drawer content"])}

package/src/generated/components/page/react-demos.js

@@ -4,15 +4,19 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
+import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import srcImportdefaultnav from './react-demos/default-nav.png';
 import srcImportexpandablenav from './react-demos/expandable-nav.png';
 import srcImportgroupednav from './react-demos/grouped-nav.png';
 import srcImporthorizontalnav from './react-demos/horizontal-nav.png';
 import srcImportlegacylightnav from './react-demos/legacylight-nav.png';
 import srcImportmanualnav from './react-demos/manual-nav.png';
+import srcImportstickysectiongroupalternatesyntaxandusingpageheader from './react-demos/sticky-section-group-alternate-syntax-and-using-pageheader.png';
 import srcImportstickysectiongroupalternatesyntax from './react-demos/sticky-section-group-alternate-syntax.png';
+import srcImportstickysectiongroupusingpageheader from './react-demos/sticky-section-group-using-pageheader.png';
 import srcImportstickysectiongroup from './react-demos/sticky-section-group.png';
 import srcImporttertiarynav from './react-demos/tertiary-nav.png';
 const pageData = {
@@ -23,7 +27,8 @@ const pageData = {
   "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Page/Page.md",
   "fullscreenExamples": [
     "Sticky section group",
-    "Sticky section group (alternate syntax)"
+    "Sticky section group (using PageHeader)",
+    "Sticky section group (alternate syntax and using PageHeader)"
   ]
 };
 pageData.liveContext = {
@@ -32,16 +37,30 @@ pageData.liveContext = {
   CogIcon,
   HelpIcon,
   imgBrand,
-  imgAvatar
+  imgAvatar,
+  BarsIcon,
+  AttentionBellIcon
 };
 pageData.examples = {
   'Sticky section group': props => 
-    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroup} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGrouped extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const PageNav = (\n      <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n        <NavList>\n          <NavItem itemId={0} isActive={activeItem === 0}>\n            System panel\n          </NavItem>\n          <NavItem itemId={1} isActive={activeItem === 1}>\n            Policy\n          </NavItem>\n          <NavItem itemId={2} isActive={activeItem === 2}>\n            Authentication\n          </NavItem>\n          <NavItem itemId={3} isActive={activeItem === 3}>\n            Network services\n          </NavItem>\n          <NavItem itemId={4} isActive={activeItem === 4}>\n            Server\n          </NavItem>\n        </NavList>\n      </Nav>\n    );\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    const PageBreadcrumb = (\n      <Breadcrumb>\n        <BreadcrumbItem>Section home</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Section landing\n        </BreadcrumbItem>\n      </Breadcrumb>\n    );\n\n    return (\n      <React.Fragment>\n        <Page\n          header={Header}\n          breadcrumb={PageBreadcrumb}\n          tertiaryNav={PageNav}\n          isManagedSidebar\n          isTertiaryNavWidthLimited\n          isBreadcrumbWidthLimited\n          skipToContent={PageSkipToContent}\n          mainContainerId={pageId}\n          isTertiaryNavGrouped\n          isBreadcrumbGrouped\n          additionalGroupedContent={\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>\n          }\n          groupProps={{\n            sticky: 'top'\n          }}\n        >\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group","lang":"js","isFullscreen":true}}>
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroup} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Masthead,\n  MastheadBrand,\n  MastheadContent,\n  MastheadMain,\n  MastheadToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  PageToggleButton,\n  SkipToContent,\n  TextContent,\n  Text,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';\nimport BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGrouped extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      isFullKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n\n    this.onFullKebabToggle = isFullKebabDropdownOpen => {\n      this.setState({\n        isFullKebabDropdownOpen\n      });\n    };\n\n    this.onFullKebabSelect = () => {\n      this.setState({\n        isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen } = this.state;\n\n    const PageNav = (\n      <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n        <NavList>\n          <NavItem href=\"#\" itemId={0} isActive={activeItem === 0}>\n            System panel\n          </NavItem>\n          <NavItem href=\"#\" itemId={1} isActive={activeItem === 1}>\n            Policy\n          </NavItem>\n          <NavItem href=\"#\" itemId={2} isActive={activeItem === 2}>\n            Authentication\n          </NavItem>\n          <NavItem href=\"#\" itemId={3} isActive={activeItem === 3}>\n            Network services\n          </NavItem>\n          <NavItem href=\"#\" itemId={4} isActive={activeItem === 4}>\n            Server\n          </NavItem>\n        </NavList>\n      </Nav>\n    );\n\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n\n    const fullKebabItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>,\n      <Divider key=\"divider\" />,\n      <DropdownItem key=\"kebab-1\">\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem key=\"kebab-2\">\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\" isFullHeight isStatic>\n        <ToolbarContent>\n          <ToolbarGroup\n            variant=\"icon-button-group\"\n            alignment={{ default: 'alignRight' }}\n            spacer={{ default: 'spacerNone', md: 'spacerMd' }}\n          >\n            <ToolbarItem>\n              <Button aria-label=\"Notifications\" variant={ButtonVariant.plain}>\n                <AttentionBellIcon />\n              </Button>\n            </ToolbarItem>\n            <ToolbarGroup variant=\"icon-button-group\" visibility={{ default: 'hidden', lg: 'visible' }}>\n              <ToolbarItem>\n                <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n                  <CogIcon />\n                </Button>\n              </ToolbarItem>\n              <ToolbarItem>\n                <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n                  <HelpIcon />\n                </Button>\n              </ToolbarItem>\n            </ToolbarGroup>\n            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n              <Dropdown\n                isPlain\n                position=\"right\"\n                onSelect={this.onKebabDropdownSelect}\n                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n                isOpen={isKebabDropdownOpen}\n                dropdownItems={kebabDropdownItems}\n              />\n            </ToolbarItem>\n            <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>\n              <Dropdown\n                isPlain\n                position=\"right\"\n                onSelect={this.onFullKebabSelect}\n                toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}\n                isOpen={isFullKebabDropdownOpen}\n                dropdownItems={fullKebabItems}\n              />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n            <Dropdown\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={\n                <DropdownToggle icon={<Avatar src={imgAvatar} alt=\"Avatar\" />} onToggle={this.onDropdownToggle}>\n                  John Smith\n                </DropdownToggle>\n              }\n              dropdownItems={userDropdownItems}\n            />\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton variant=\"plain\" aria-label=\"Global navigation\">\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand>\n            <Brand src={imgBrand} alt=\"Patternfly Logo\" />\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    const PageBreadcrumb = (\n      <Breadcrumb>\n        <BreadcrumbItem>Section home</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Section landing\n        </BreadcrumbItem>\n      </Breadcrumb>\n    );\n\n    return (\n      <React.Fragment>\n        <Page\n          header={Header}\n          breadcrumb={PageBreadcrumb}\n          tertiaryNav={PageNav}\n          isManagedSidebar\n          isTertiaryNavWidthLimited\n          isBreadcrumbWidthLimited\n          skipToContent={PageSkipToContent}\n          mainContainerId={pageId}\n          isTertiaryNavGrouped\n          isBreadcrumbGrouped\n          additionalGroupedContent={\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>\n          }\n          groupProps={{\n            sticky: 'top'\n          }}\n        >\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group","lang":"js","isFullscreen":true}}>
       
     </Example>,
-  'Sticky section group (alternate syntax)': props => 
-    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupalternatesyntax} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  PageGroup,\n  PageBreadcrumb,\n  PageNavigation,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGroupedAlt extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    return (\n      <React.Fragment>\n        <Page header={Header} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId}>\n          <PageGroup sticky=\"top\">\n            <PageNavigation isWidthLimited>\n              <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n                <NavList>\n                  <NavItem itemId={0} isActive={activeItem === 0}>\n                    System panel\n                  </NavItem>\n                  <NavItem itemId={1} isActive={activeItem === 1}>\n                    Policy\n                  </NavItem>\n                  <NavItem itemId={2} isActive={activeItem === 2}>\n                    Authentication\n                  </NavItem>\n                  <NavItem itemId={3} isActive={activeItem === 3}>\n                    Network services\n                  </NavItem>\n                  <NavItem itemId={4} isActive={activeItem === 4}>\n                    Server\n                  </NavItem>\n                </NavList>\n              </Nav>\n            </PageNavigation>\n            <PageBreadcrumb>\n              <Breadcrumb>\n                <BreadcrumbItem>Section home</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\" isActive>\n                  Section landing\n                </BreadcrumbItem>\n              </Breadcrumb>\n            </PageBreadcrumb>\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>{' '}\n          </PageGroup>\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group (alternate syntax)","lang":"js","isFullscreen":true}}>
+  'Sticky section group (using PageHeader)': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupusingpageheader} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGrouped extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const PageNav = (\n      <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n        <NavList>\n          <NavItem href=\"#\" itemId={0} isActive={activeItem === 0}>\n            System panel\n          </NavItem>\n          <NavItem href=\"#\" itemId={1} isActive={activeItem === 1}>\n            Policy\n          </NavItem>\n          <NavItem href=\"#\" itemId={2} isActive={activeItem === 2}>\n            Authentication\n          </NavItem>\n          <NavItem href=\"#\" itemId={3} isActive={activeItem === 3}>\n            Network services\n          </NavItem>\n          <NavItem href=\"#\" itemId={4} isActive={activeItem === 4}>\n            Server\n          </NavItem>\n        </NavList>\n      </Nav>\n    );\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    const PageBreadcrumb = (\n      <Breadcrumb>\n        <BreadcrumbItem>Section home</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n        <BreadcrumbItem to=\"#\" isActive>\n          Section landing\n        </BreadcrumbItem>\n      </Breadcrumb>\n    );\n\n    return (\n      <React.Fragment>\n        <Page\n          header={Header}\n          breadcrumb={PageBreadcrumb}\n          tertiaryNav={PageNav}\n          isManagedSidebar\n          isTertiaryNavWidthLimited\n          isBreadcrumbWidthLimited\n          skipToContent={PageSkipToContent}\n          mainContainerId={pageId}\n          isTertiaryNavGrouped\n          isBreadcrumbGrouped\n          additionalGroupedContent={\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>\n          }\n          groupProps={{\n            sticky: 'top'\n          }}\n        >\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group (using PageHeader)","lang":"js","isFullscreen":true}}>
       
+      <p {...{"className":"ws-p"}}>
+        {`This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.`}
+      </p>
+    </Example>,
+  'Sticky section group (alternate syntax and using PageHeader)': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupalternatesyntaxandusingpageheader} {...{"code":"import React from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Dropdown,\n  DropdownGroup,\n  DropdownToggle,\n  DropdownItem,\n  DropdownSeparator,\n  Gallery,\n  GalleryItem,\n  KebabToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageHeader,\n  PageSection,\n  PageSectionVariants,\n  PageSidebar,\n  PageGroup,\n  PageBreadcrumb,\n  PageNavigation,\n  SkipToContent,\n  TextContent,\n  Text,\n  PageHeaderTools,\n  PageHeaderToolsGroup,\n  PageHeaderToolsItem\n} from '@patternfly/react-core';\nimport { css } from '@patternfly/react-styles';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport imgBrand from './imgBrand.svg';\nimport imgAvatar from './imgAvatar.svg';\n\nclass PageLayoutGroupedAlt extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isDropdownOpen: false,\n      isKebabDropdownOpen: false,\n      activeItem: 0\n    };\n    this.onDropdownToggle = isDropdownOpen => {\n      this.setState({\n        isDropdownOpen\n      });\n    };\n\n    this.onDropdownSelect = event => {\n      this.setState({\n        isDropdownOpen: !this.state.isDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownToggle = isKebabDropdownOpen => {\n      this.setState({\n        isKebabDropdownOpen\n      });\n    };\n\n    this.onKebabDropdownSelect = event => {\n      this.setState({\n        isKebabDropdownOpen: !this.state.isKebabDropdownOpen\n      });\n    };\n\n    this.onNavSelect = result => {\n      this.setState({\n        activeItem: result.itemId\n      });\n    };\n  }\n\n  render() {\n    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;\n\n    const kebabDropdownItems = [\n      <DropdownItem>\n        <CogIcon /> Settings\n      </DropdownItem>,\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    ];\n    const userDropdownItems = [\n      <DropdownGroup key=\"group 2\">\n        <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n        <DropdownItem key=\"group 2 user\" component=\"button\">\n          User management\n        </DropdownItem>\n        <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n      </DropdownGroup>\n    ];\n    const headerTools = (\n      <PageHeaderTools>\n        <PageHeaderToolsGroup\n          visibility={{\n            default: 'hidden',\n            lg: 'visible'\n          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n        >\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Settings actions\" variant={ButtonVariant.plain}>\n              <CogIcon />\n            </Button>\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem>\n            <Button aria-label=\"Help actions\" variant={ButtonVariant.plain}>\n              <HelpIcon />\n            </Button>\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <PageHeaderToolsGroup>\n          <PageHeaderToolsItem\n            visibility={{\n              lg: 'hidden'\n            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onKebabDropdownSelect}\n              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}\n              isOpen={isKebabDropdownOpen}\n              dropdownItems={kebabDropdownItems}\n            />\n          </PageHeaderToolsItem>\n          <PageHeaderToolsItem\n            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n          >\n            <Dropdown\n              isPlain\n              position=\"right\"\n              onSelect={this.onDropdownSelect}\n              isOpen={isDropdownOpen}\n              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}\n              dropdownItems={userDropdownItems}\n            />\n          </PageHeaderToolsItem>\n        </PageHeaderToolsGroup>\n        <Avatar src={imgAvatar} alt=\"Avatar image\" />\n      </PageHeaderTools>\n    );\n\n    const Header = (\n      <PageHeader logo={<Brand src={imgBrand} alt=\"Patternfly Logo\" />} headerTools={headerTools} showNavToggle />\n    );\n    const pageId = 'main-content-page-layout-tertiary-nav';\n    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;\n\n    return (\n      <React.Fragment>\n        <Page header={Header} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId}>\n          <PageGroup sticky=\"top\">\n            <PageNavigation isWidthLimited>\n              <Nav variant=\"tertiary\" onSelect={this.onNavSelect} aria-label=\"Nav\">\n                <NavList>\n                  <NavItem href=\"#\" itemId={0} isActive={activeItem === 0}>\n                    System panel\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={1} isActive={activeItem === 1}>\n                    Policy\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={2} isActive={activeItem === 2}>\n                    Authentication\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={3} isActive={activeItem === 3}>\n                    Network services\n                  </NavItem>\n                  <NavItem href=\"#\" itemId={4} isActive={activeItem === 4}>\n                    Server\n                  </NavItem>\n                </NavList>\n              </Nav>\n            </PageNavigation>\n            <PageBreadcrumb>\n              <Breadcrumb>\n                <BreadcrumbItem>Section home</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n                <BreadcrumbItem to=\"#\" isActive>\n                  Section landing\n                </BreadcrumbItem>\n              </Breadcrumb>\n            </PageBreadcrumb>\n            <PageSection variant={PageSectionVariants.light}>\n              <TextContent>\n                <Text component=\"h1\">Main title</Text>\n                <Text component=\"p\">\n                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />\n                  of its relative line height of 1.5.\n                </Text>\n              </TextContent>\n            </PageSection>{' '}\n          </PageGroup>\n          <PageSection>\n            <Gallery hasGutter>\n              {Array.apply(0, Array(20)).map((x, i) => (\n                <GalleryItem key={i}>\n                  <Card>\n                    <CardBody>This is a card</CardBody>\n                  </Card>\n                </GalleryItem>\n              ))}\n            </Gallery>\n          </PageSection>\n        </Page>\n      </React.Fragment>\n    );\n  }\n}","title":"Sticky section group (alternate syntax and using PageHeader)","lang":"js","isFullscreen":true}}>
+      
+      <p {...{"className":"ws-p"}}>
+        {`Please see `}
+                <a href="#sticky-section-group-using-pageheader">{`this`}</a>
+        {` note regarding PageHeader.`}
+      </p>
     </Example>
 };
 
@@ -88,7 +107,8 @@ const Component = () => (
       {`This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.`}
     </p>
     {React.createElement(pageData.examples["Sticky section group"])}
-    {React.createElement(pageData.examples["Sticky section group (alternate syntax)"])}
+    {React.createElement(pageData.examples["Sticky section group (using PageHeader)"])}
+    {React.createElement(pageData.examples["Sticky section group (alternate syntax and using PageHeader)"])}
   </React.Fragment>
 );
 Component.displayName = 'ComponentsPageReactDemosDocs';

package/src/generated/components/page/react.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from 'theme-patternfly-org/components';
-
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 const pageData = {
   "id": "Page",
   "section": "components",
@@ -556,37 +556,48 @@ const pageData = {
     "Main Section Padding",
     "With or without fill",
     "Uncontrolled nav",
-    "Group section"
+    "Group section",
+    "Vertical nav using PageHeader component"
   ]
 };
+pageData.liveContext = {
+  BarsIcon
+};
 pageData.examples = {
   'Vertical nav': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nclass VerticalPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const logoProps = {\n      href: 'https://patternfly.org',\n      onClick: () => console.log('clicked logo'),\n      target: '_blank'\n    };\n    const Header = (\n      <PageHeader\n        logo=\"Logo\"\n        logoProps={logoProps}\n        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n        showNavToggle\n        isNavOpen={isNavOpen}\n        onNavToggle={this.onNavToggle}\n      />\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n      </Page>\n    );\n  }\n}","title":"Vertical nav","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadToggle,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nclass VerticalPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>header-tools</ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton\n            variant=\"plain\"\n            aria-label=\"Global navigation\"\n            isNavOpen={isNavOpen}\n            onNavToggle={this.onNavToggle}\n          >\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n            Logo\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n      </Page>\n    );\n  }\n}","title":"Vertical nav","lang":"js"}}>
       
     </Example>,
   'Horizontal nav': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nHorizontalPage = () => {\n  const logoProps = {\n    href: 'https://patternfly.org',\n    onClick: () => console.log('clicked logo'),\n    target: '_blank'\n  };\n  const Header = (\n    <PageHeader\n      logo=\"Logo\"\n      logoProps={logoProps}\n      headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n      topNav=\"Navigation\"\n    />\n  );\n\n  return (\n    <Page header={Header}>\n      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n    </Page>\n  );\n};","title":"Horizontal nav","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSection,\n  PageSectionVariants,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nHorizontalPage = () => {\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>Navigation</ToolbarItem>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const Header = (\n    <Masthead display={{ default: 'stack' }} inset={{ default: 'insetXs' }}>\n      <MastheadMain>\n        <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n          Logo\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  return (\n    <Page header={Header}>\n      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n    </Page>\n  );\n};","title":"Horizontal nav","lang":"js"}}>
       
     </Example>,
   'Tertiary nav': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nTertiaryPage = () => {\n  const logoProps = {\n    href: 'https://patternfly.org',\n    onClick: () => console.log('clicked logo'),\n    target: '_blank'\n  };\n  const Header = (\n    <PageHeader logo=\"Logo\" logoProps={logoProps} headerTools={<PageHeaderTools>header-tools</PageHeaderTools>} />\n  );\n\n  return (\n    <Page header={Header} tertiaryNav=\"Navigation\">\n      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n    </Page>\n  );\n};","title":"Tertiary nav","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSection,\n  PageSectionVariants,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\n\nTertiaryPage = () => {\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\">\n      <ToolbarContent>\n        <ToolbarItem>header-tools</ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const Header = (\n    <Masthead display={{ default: 'stack' }} inset={{ default: 'insetXs' }}>\n      <MastheadMain>\n        <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n          Logo\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  return (\n    <Page header={Header} tertiaryNav=\"Navigation\">\n      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n    </Page>\n  );\n};","title":"Tertiary nav","lang":"js"}}>
       
     </Example>,
   'Main Section Padding': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nclass VerticalPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const logoProps = {\n      href: 'https://patternfly.org',\n      onClick: () => console.log('clicked logo'),\n      target: '_blank'\n    };\n    const Header = (\n      <PageHeader\n        logo=\"Logo\"\n        logoProps={logoProps}\n        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n        showNavToggle\n        isNavOpen={isNavOpen}\n        onNavToggle={this.onNavToggle}\n      />\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection>Section with default padding</PageSection>\n        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>\n          Section with no padding\n        </PageSection>\n        <PageSection padding={{ default: 'noPadding', md: 'padding', lg: 'padding' }}>\n          Section with padding only on medium/large\n        </PageSection>\n        <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>\n          Section with no padding on medium\n        </PageSection>\n      </Page>\n    );\n  }\n}","title":"Main Section Padding","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadToggle,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nclass VerticalPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>header-tools</ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton\n            variant=\"plain\"\n            aria-label=\"Global navigation\"\n            isNavOpen={isNavOpen}\n            onNavToggle={this.onNavToggle}\n          >\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n            Logo\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection>Section with default padding</PageSection>\n        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>\n          Section with no padding\n        </PageSection>\n        <PageSection padding={{ default: 'noPadding', md: 'padding', lg: 'padding' }}>\n          Section with padding only on medium/large\n        </PageSection>\n        <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>\n          Section with no padding on medium\n        </PageSection>\n      </Page>\n    );\n  }\n}","title":"Main Section Padding","lang":"js"}}>
       
     </Example>,
   'With or without fill': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nclass FillPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const logoProps = {\n      href: 'https://patternfly.org',\n      onClick: () => console.log('clicked logo'),\n      target: '_blank'\n    };\n    const Header = (\n      <PageHeader\n        logo=\"Logo\"\n        logoProps={logoProps}\n        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n        showNavToggle\n        isNavOpen={isNavOpen}\n        onNavToggle={this.onNavToggle}\n      />\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection style={{ height: '10em' }}>This section is set to the default fill variant</PageSection>\n        <PageSection style={{ height: '10em' }} isFilled={true}>\n          This section fills the available space.\n        </PageSection>\n        <PageSection style={{ height: '10em' }} isFilled={false}>\n          {' '}\n          This section does not fill the available space.\n        </PageSection>\n      </Page>\n    );\n  }\n}","title":"With or without fill","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadToggle,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSidebar,\n  PageSection,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nclass FillPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>header-tools</ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton\n            variant=\"plain\"\n            aria-label=\"Global navigation\"\n            isNavOpen={isNavOpen}\n            onNavToggle={this.onNavToggle}\n          >\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n            Logo\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection style={{ height: '10em' }}>This section is set to the default fill variant</PageSection>\n        <PageSection style={{ height: '10em' }} isFilled={true}>\n          This section fills the available space.\n        </PageSection>\n        <PageSection style={{ height: '10em' }} isFilled={false}>\n          {' '}\n          This section does not fill the available space.\n        </PageSection>\n      </Page>\n    );\n  }\n}","title":"With or without fill","lang":"js"}}>
       
     </Example>,
   'Uncontrolled nav': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nclass UncontrolledNavPage extends React.Component {\n  render() {\n    const logoProps = {\n      href: 'https://patternfly.org',\n      onClick: () => console.log('clicked logo'),\n      target: '_blank'\n    };\n    const Header = (\n      <PageHeader\n        logo=\"Logo\"\n        logoProps={logoProps}\n        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n        showNavToggle\n      />\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" />;\n\n    return (\n      <Page isManagedSidebar header={Header} sidebar={Sidebar}>\n        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n      </Page>\n    );\n  }\n}","title":"Uncontrolled nav","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadToggle,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants,\n  PageToggleButton,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nclass UncontrolledNavPage extends React.Component {\n  render() {\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>header-tools</ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton variant=\"plain\" aria-label=\"Global navigation\">\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n            Logo\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" />;\n\n    return (\n      <Page isManagedSidebar header={Header} sidebar={Sidebar}>\n        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n      </Page>\n    );\n  }\n}","title":"Uncontrolled nav","lang":"js"}}>
       
     </Example>,
   'Group section': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageGroup,\n  PageBreadcrumb,\n  PageNavigation,\n  PageSectionVariants,\n  Breadcrumb,\n  BreadcrumbItem,\n  Nav,\n  NavList,\n  NavItem\n} from '@patternfly/react-core';\n\nclass GroupPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const logoProps = {\n      href: 'https://patternfly.org',\n      onClick: () => console.log('clicked logo'),\n      target: '_blank'\n    };\n    const Header = (\n      <PageHeader\n        logo=\"Logo\"\n        logoProps={logoProps}\n        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n        showNavToggle\n        isNavOpen={isNavOpen}\n        onNavToggle={this.onNavToggle}\n      />\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageGroup>\n          <PageNavigation>\n            <Nav aria-label=\"Nav\" variant=\"tertiary\">\n              <NavList>\n                <NavItem itemId={0} isActive>\n                  System panel\n                </NavItem>\n                <NavItem itemId={1}>Policy</NavItem>\n                <NavItem itemId={2}>Authentication</NavItem>\n                <NavItem itemId={3}>Network services</NavItem>\n                <NavItem itemId={4}>Server</NavItem>\n              </NavList>\n            </Nav>\n          </PageNavigation>\n          <PageBreadcrumb>\n            <Breadcrumb>\n              <BreadcrumbItem>Section home</BreadcrumbItem>\n              <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n              <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n              <BreadcrumbItem to=\"#\" isActive>\n                Section landing\n              </BreadcrumbItem>\n            </Breadcrumb>\n          </PageBreadcrumb>\n          <PageSection variant={PageSectionVariants.light}>Grouped section</PageSection>\n        </PageGroup>\n        <PageSection variant={PageSectionVariants.dark}>Section 1</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section 2</PageSection>\n      </Page>\n    );\n  }\n}","title":"Group section","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  Masthead,\n  MastheadToggle,\n  MastheadMain,\n  MastheadBrand,\n  MastheadContent,\n  PageSidebar,\n  PageSection,\n  PageGroup,\n  PageBreadcrumb,\n  PageNavigation,\n  PageSectionVariants,\n  PageToggleButton,\n  Breadcrumb,\n  BreadcrumbItem,\n  Nav,\n  NavList,\n  NavItem,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nclass GroupPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const headerToolbar = (\n      <Toolbar id=\"toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>header-tools</ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    );\n\n    const Header = (\n      <Masthead>\n        <MastheadToggle>\n          <PageToggleButton\n            variant=\"plain\"\n            aria-label=\"Global navigation\"\n            isNavOpen={isNavOpen}\n            onNavToggle={this.onNavToggle}\n          >\n            <BarsIcon />\n          </PageToggleButton>\n        </MastheadToggle>\n        <MastheadMain>\n          <MastheadBrand href=\"https://patternfly.org\" onClick={() => console.log('clicked logo')} target=\"_blank\">\n            Logo\n          </MastheadBrand>\n        </MastheadMain>\n        <MastheadContent>{headerToolbar}</MastheadContent>\n      </Masthead>\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageGroup>\n          <PageNavigation>\n            <Nav aria-label=\"Nav\" variant=\"tertiary\">\n              <NavList>\n                <NavItem itemId={0} isActive>\n                  System panel\n                </NavItem>\n                <NavItem itemId={1}>Policy</NavItem>\n                <NavItem itemId={2}>Authentication</NavItem>\n                <NavItem itemId={3}>Network services</NavItem>\n                <NavItem itemId={4}>Server</NavItem>\n              </NavList>\n            </Nav>\n          </PageNavigation>\n          <PageBreadcrumb>\n            <Breadcrumb>\n              <BreadcrumbItem>Section home</BreadcrumbItem>\n              <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n              <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n              <BreadcrumbItem to=\"#\" isActive>\n                Section landing\n              </BreadcrumbItem>\n            </Breadcrumb>\n          </PageBreadcrumb>\n          <PageSection variant={PageSectionVariants.light}>Grouped section</PageSection>\n        </PageGroup>\n        <PageSection variant={PageSectionVariants.dark}>Section 1</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section 2</PageSection>\n      </Page>\n    );\n  }\n}","title":"Group section","lang":"js"}}>
+      
+    </Example>,
+  'Vertical nav using PageHeader component': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Page,\n  PageHeader,\n  PageHeaderTools,\n  PageSidebar,\n  PageSection,\n  PageSectionVariants\n} from '@patternfly/react-core';\n\nclass VerticalPage extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isNavOpen: true\n    };\n    this.onNavToggle = () => {\n      this.setState({\n        isNavOpen: !this.state.isNavOpen\n      });\n    };\n  }\n\n  render() {\n    const { isNavOpen } = this.state;\n\n    const logoProps = {\n      href: 'https://patternfly.org',\n      onClick: () => console.log('clicked logo'),\n      target: '_blank'\n    };\n    const Header = (\n      <PageHeader\n        logo=\"Logo\"\n        logoProps={logoProps}\n        headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}\n        showNavToggle\n        isNavOpen={isNavOpen}\n        onNavToggle={this.onNavToggle}\n      />\n    );\n    const Sidebar = <PageSidebar nav=\"Navigation\" isNavOpen={isNavOpen} />;\n\n    return (\n      <Page header={Header} sidebar={Sidebar}>\n        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>\n        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>\n        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>\n      </Page>\n    );\n  }\n}","title":"Vertical nav using PageHeader component","lang":"js"}}>
       
+      <p {...{"className":"ws-p"}}>
+        {`This example is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.`}
+      </p>
     </Example>
 };
 
@@ -602,6 +613,7 @@ const Component = () => (
     {React.createElement(pageData.examples["With or without fill"])}
     {React.createElement(pageData.examples["Uncontrolled nav"])}
     {React.createElement(pageData.examples["Group section"])}
+    {React.createElement(pageData.examples["Vertical nav using PageHeader component"])}
   </React.Fragment>
 );
 Component.displayName = 'ComponentsPageReactDocs';

package/src/generated/components/select/react.js

@@ -239,6 +239,12 @@ const pageData = {
           "description": "Title text of Select",
           "defaultValue": "''"
         },
+        {
+          "name": "position",
+          "type": "SelectPosition | 'right' | 'left'",
+          "description": "Indicates where menu will be aligned horizontally",
+          "defaultValue": "SelectPosition.left"
+        },
         {
           "name": "removeSelectionAriaLabel",
           "type": "string",

package/src/generated/components/tabs/react.js

@@ -50,6 +50,16 @@ const pageData = {
           "type": "number | string",
           "description": "The index of the default active tab. Set this for uncontrolled Tabs"
         },
+        {
+          "name": "defaultIsExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the default expanded state for uncontrolled expand/collapse of"
+        },
+        {
+          "name": "expandable",
+          "type": "{\n  default?: 'expandable' | 'nonExpandable';\n  sm?: 'expandable' | 'nonExpandable';\n  md?: 'expandable' | 'nonExpandable';\n  lg?: 'expandable' | 'nonExpandable';\n  xl?: 'expandable' | 'nonExpandable';\n  '2xl'?: 'expandable' | 'nonExpandable';\n}",
+          "description": "Enable expandable vertical tabs at various breakpoints. (isVertical should be set to true for this to work)"
+        },
         {
           "name": "id",
           "type": "string",
@@ -66,6 +76,11 @@ const pageData = {
           "description": "Enables box styling to the tab component",
           "defaultValue": "false"
         },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to indicate if the vertical tabs are expanded"
+        },
         {
           "name": "isFilled",
           "type": "boolean",
@@ -102,6 +117,12 @@ const pageData = {
           "description": "Callback to handle tab selection",
           "defaultValue": "() => undefined as any"
         },
+        {
+          "name": "onToggle",
+          "type": "(isExpanded: boolean) => void",
+          "description": "Callback function to toggle the expandable tabs.",
+          "defaultValue": "(isExpanded): void => undefined"
+        },
         {
           "name": "ouiaSafe",
           "type": "No type info",
@@ -113,6 +134,16 @@ const pageData = {
           "description": "Aria-label for the right scroll button",
           "defaultValue": "'Scroll right'"
         },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the left expandable toggle"
+        },
+        {
+          "name": "toggleText",
+          "type": "string",
+          "description": "Text that appears in the expandable toggle"
+        },
         {
           "name": "unmountOnExit",
           "type": "boolean",
@@ -293,6 +324,8 @@ const pageData = {
     "Box light variation",
     "Default overflow",
     "Vertical",
+    "Vertical expandable",
+    "Vertical expandable uncontrolled",
     "Inset",
     "Page Insets",
     "Icons and text",
@@ -335,6 +368,14 @@ pageData.examples = {
   'Vertical': props => 
     <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';\n\nclass VerticalTabs extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeTabKey: 0,\n      isBox: false\n    };\n    // Toggle currently active tab\n    this.handleTabClick = (event, tabIndex) => {\n      this.setState({\n        activeTabKey: tabIndex\n      });\n    };\n\n    this.toggleBox = checked => {\n      this.setState({\n        isBox: checked\n      });\n    };\n  }\n\n  render() {\n    const {activeTabKey, isBox} = this.state;\n    const tooltipRef = React.createRef();\n    return (\n      <div>\n        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical isBox={isBox}>\n          <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>\n            Users\n          </Tab>\n          <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n            Containers\n          </Tab>\n          <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n            Database\n          </Tab>\n          <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>\n            Disabled\n          </Tab>\n          <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>\n            ARIA Disabled\n          </Tab>\n          <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled ref={tooltipRef}>\n            ARIA Disabled (Tooltip)\n          </Tab>\n        </Tabs>\n        <Tooltip content=\"Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\" reference={tooltipRef} position=\"right\" />\n        <div style={{marginTop: \"20px\"}}>\n          <Checkbox\n                label=\"isBox\"\n                isChecked={isBox}\n                onChange={this.toggleBox}\n                aria-label=\"show box variation checkbox with vertical\"\n                id=\"toggle-box-vertical\"\n                name=\"toggle-box-vertical\"\n              />\n        </div>\n      </div>\n    );\n  }\n}","title":"Vertical","lang":"js"}}>
       
+    </Example>,
+  'Vertical expandable': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\nclass VerticalExpandableTabs extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeTabKey: 0,\n      isExpanded: false\n    };\n    // Toggle currently active tab\n    this.handleTabClick = (event, tabIndex) => {\n      this.setState({\n        activeTabKey: tabIndex\n      });\n    };\n    this.onToggle = isExpanded => {\n      this.setState({\n        isExpanded\n      });\n    };\n  }\n  render() {\n    const {activeTabKey, isExpanded} = this.state;\n    return (\n        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical expandable={{default: 'expandable', md: 'nonExpandable', lg: 'expandable'}} isExpanded={isExpanded} onToggle={this.onToggle} toggleText=\"Containers\">\n          <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>\n            Users\n          </Tab>\n          <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n            Containers\n          </Tab>\n          <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n            Database\n          </Tab>\n          <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n            Server\n          </Tab>\n          <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n            System\n          </Tab>\n          <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n            Network\n          </Tab>\n        </Tabs>\n    );\n  }\n}","title":"Vertical expandable","lang":"js"}}>
+      
+    </Example>,
+  'Vertical expandable uncontrolled': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\nclass VerticalExpandableUncontrolledTabs extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeTabKey: 0\n    };\n    // Toggle currently active tab\n    this.handleTabClick = (event, tabIndex) => {\n      this.setState({\n        activeTabKey: tabIndex\n      });\n    };\n  }\n  render() {\n    const {activeTabKey} = this.state;\n    return (\n        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} isVertical expandable={{default: 'expandable', md: 'nonExpandable', lg: 'expandable'}}  defaultIsExpanded={false} toggleText=\"Containers\">\n          <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>\n            Users\n          </Tab>\n          <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n            Containers\n          </Tab>\n          <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n            Database\n          </Tab>\n          <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n            Server\n          </Tab>\n          <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n            System\n          </Tab>\n          <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n            Network\n          </Tab>\n        </Tabs>\n    );\n  }\n}","title":"Vertical expandable uncontrolled","lang":"js"}}>
+      
     </Example>,
   'Inset': props => 
     <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\n\nclass InsetTabs extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeTabKey: 0,\n      isBox: false\n    };\n    // Toggle currently active tab\n    this.handleTabClick = (event, tabIndex) => {\n      this.setState({\n        activeTabKey: tabIndex\n      });\n    };\n\n    this.toggleBox = checked => {\n      this.setState({\n        isBox: checked\n      });\n    };\n  }\n\n  render() {\n    const {activeTabKey, isBox} = this.state;\n    return (\n      <div>\n        <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick} inset={{\n          default: 'insetNone',\n          md: 'insetSm',\n          xl: 'inset2xl',\n          '2xl': 'insetLg'\n        }}\n        isBox={isBox}>\n          <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>}>\n            Users\n          </Tab>\n          <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n            Containers\n          </Tab>\n          <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n            Database\n          </Tab>\n          <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n            Server\n          </Tab>\n          <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n            System\n          </Tab>\n          <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n            Network\n          </Tab>\n        </Tabs>\n        <div style={{marginTop: \"20px\"}}>\n          <Checkbox\n                label=\"isBox\"\n                isChecked={isBox}\n                onChange={this.toggleBox}\n                aria-label=\"show box variation checkbox with inset\"\n                id=\"toggle-box-inset\"\n                name=\"toggle-box-inset\"\n              />\n        </div>\n      </div>\n    );\n  }\n}","title":"Inset","lang":"js"}}>
@@ -401,6 +442,8 @@ Similarly the 'Tab content light variation' checkbox affects the TabContent back
     {React.createElement(pageData.examples["Box light variation"])}
     {React.createElement(pageData.examples["Default overflow"])}
     {React.createElement(pageData.examples["Vertical"])}
+    {React.createElement(pageData.examples["Vertical expandable"])}
+    {React.createElement(pageData.examples["Vertical expandable uncontrolled"])}
     {React.createElement(pageData.examples["Inset"])}
     {React.createElement(pageData.examples["Page Insets"])}
     {React.createElement(pageData.examples["Icons and text"])}

package/src/generated/demos/composable-menu/react-demos.js

@@ -30,7 +30,8 @@ const pageData = {
     "Filter tree menu",
     "Flyout",
     "Application launcher using menu components",
-    "Context selector using menu components"
+    "Context selector using menu components",
+    "Options menu using menu components"
   ]
 };
 pageData.liveContext = {
@@ -51,27 +52,27 @@ pageData.liveContext = {
 };
 pageData.examples = {
   'Basic menu with toggle': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';\n\nBasicComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu ref={menuRef} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Action</MenuItem>\n          <MenuItem itemId={1} to=\"#default-link2\" onClick={ev => ev.preventDefault()}>\n            Link\n          </MenuItem>\n          <MenuItem isDisabled>Disabled Action</MenuItem>\n          <MenuItem isDisabled to=\"#default-link4\">\n            Disabled Link\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Basic menu with toggle","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';\n\nBasicComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu ref={menuRef} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Action</MenuItem>\n          <MenuItem itemId={1} to=\"#default-link2\" onClick={ev => ev.preventDefault()}>\n            Link\n          </MenuItem>\n          <MenuItem isDisabled>Disabled Action</MenuItem>\n          <MenuItem isDisabled to=\"#default-link4\">\n            Disabled Link\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Basic menu with toggle","lang":"js"}}>
       
     </Example>,
   'Menu with actions': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  MenuItemAction,\n  Popper\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\nimport ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\n\nActionComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selectedItems, setSelectedItems] = React.useState([]);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onSelect = (event, itemId) => {\n    if (selectedItems.includes(itemId)) {\n      setSelectedItems(selectedItems.filter(id => id !== itemId));\n    } else {\n      setSelectedItems([...selectedItems, itemId]);\n    }\n  };\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu\n      ref={menuRef}\n      onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}\n      onSelect={onSelect}\n    >\n      <MenuGroup label=\"Actions\">\n        <MenuList>\n          <MenuItem\n            isSelected={selectedItems.includes(0)}\n            actions={\n              <MenuItemAction\n                icon={<CodeBranchIcon aria-hidden />}\n                actionId=\"code\"\n                onClick={() => console.log('clicked on code icon')}\n                aria-label=\"Code\"\n              />\n            }\n            description=\"This is a description\"\n            itemId={0}\n          >\n            Item 1\n          </MenuItem>\n          <MenuItem\n            isDisabled\n            isSelected={selectedItems.includes(1)}\n            actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId=\"alert\" aria-label=\"Alert\" />}\n            description=\"This is a description\"\n            itemId={1}\n          >\n            Item 2\n          </MenuItem>\n          <MenuItem\n            isSelected={selectedItems.includes(2)}\n            actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId=\"copy\" aria-label=\"Copy\" />}\n            itemId={2}\n          >\n            Item 3\n          </MenuItem>\n          <MenuItem\n            isSelected={selectedItems.includes(3)}\n            actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId=\"expand\" aria-label=\"Expand\" />}\n            description=\"This is a description\"\n            itemId={3}\n          >\n            Item 4\n          </MenuItem>\n        </MenuList>\n      </MenuGroup>\n    </Menu>\n  );\n\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Menu with actions","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  MenuItemAction,\n  Popper\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\nimport ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';\nimport BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';\n\nActionComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selectedItems, setSelectedItems] = React.useState([]);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onSelect = (event, itemId) => {\n    if (selectedItems.includes(itemId)) {\n      setSelectedItems(selectedItems.filter(id => id !== itemId));\n    } else {\n      setSelectedItems([...selectedItems, itemId]);\n    }\n  };\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu\n      ref={menuRef}\n      onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}\n      onSelect={onSelect}\n    >\n      <MenuGroup label=\"Actions\">\n        <MenuList>\n          <MenuItem\n            isSelected={selectedItems.includes(0)}\n            actions={\n              <MenuItemAction\n                icon={<CodeBranchIcon aria-hidden />}\n                actionId=\"code\"\n                onClick={() => console.log('clicked on code icon')}\n                aria-label=\"Code\"\n              />\n            }\n            description=\"This is a description\"\n            itemId={0}\n          >\n            Item 1\n          </MenuItem>\n          <MenuItem\n            isDisabled\n            isSelected={selectedItems.includes(1)}\n            actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId=\"alert\" aria-label=\"Alert\" />}\n            description=\"This is a description\"\n            itemId={1}\n          >\n            Item 2\n          </MenuItem>\n          <MenuItem\n            isSelected={selectedItems.includes(2)}\n            actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId=\"copy\" aria-label=\"Copy\" />}\n            itemId={2}\n          >\n            Item 3\n          </MenuItem>\n          <MenuItem\n            isSelected={selectedItems.includes(3)}\n            actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId=\"expand\" aria-label=\"Expand\" />}\n            description=\"This is a description\"\n            itemId={3}\n          >\n            Item 4\n          </MenuItem>\n        </MenuList>\n      </MenuGroup>\n    </Menu>\n  );\n\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Menu with actions","lang":"js"}}>
       
     </Example>,
   'Select menu': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';\nimport TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';\n\nSelectComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selected, setSelected] = React.useState('Select a value');\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {selected}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu ref={menuRef} id=\"select-menu\" onSelect={(_ev, itemId) => setSelected(itemId)} selected={selected}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"Option 1\">Option 1</MenuItem>\n          <MenuItem itemId=\"Option 2\">Option 2</MenuItem>\n          <MenuItem itemId=\"Option 3\" icon={<TableIcon aria-hidden />}>\n            Option 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Select menu","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';\nimport TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';\n\nSelectComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selected, setSelected] = React.useState('Select a value');\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {selected}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu ref={menuRef} id=\"select-menu\" onSelect={(_ev, itemId) => setSelected(itemId)} selected={selected}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"Option 1\">Option 1</MenuItem>\n          <MenuItem itemId=\"Option 2\">Option 2</MenuItem>\n          <MenuItem itemId=\"Option 3\" icon={<TableIcon aria-hidden />}>\n            Option 3\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Select menu","lang":"js"}}>
       
     </Example>,
   'Drilldown menu with toggle': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  DrilldownMenu,\n  Divider,\n  Popper\n} from '@patternfly/react-core';\nimport StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nDrilldownComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [activeMenu, setActiveMenu] = React.useState('rootMenu');\n  const [menuDrilledIn, setMenuDrilledIn] = React.useState([]);\n  const [drilldownPath, setDrilldownPath] = React.useState([]);\n  const [menuHeights, setMenuHeights] = React.useState({});\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n    setMenuDrilledIn([]);\n    setDrilldownPath([]);\n    setActiveMenu('rootMenu');\n  };\n\n  const drillIn = (fromMenuId, toMenuId, pathId) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = toMenuId => {\n    setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));\n    setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId, height) => {\n    if (!menuHeights[menuId]) {\n      setMenuHeights({\n        ...menuHeights,\n        [menuId]: height\n      });\n    }\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu\n      id=\"rootMenu\"\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n      ref={menuRef}\n    >\n      <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>\n        <MenuList>\n          <MenuItem\n            itemId=\"group:start_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldownMenuStart\">\n                <MenuItem itemId=\"group:start_rollout\" direction=\"up\">\n                  Start rollout\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuStartGrouping\">\n                      <MenuItem itemId=\"group:app_grouping\" direction=\"up\">\n                        Application Grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application Grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuStartLabels\">\n                      <MenuItem itemId=\"group:labels\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Start rollout\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:pause_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldownMenuPause\">\n                <MenuItem itemId=\"group:pause_rollout\" direction=\"up\">\n                  Pause rollouts\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuGrouping\">\n                      <MenuItem itemId=\"group:app_grouping\" direction=\"up\">\n                        Application Grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application Grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuLabels\">\n                      <MenuItem itemId=\"group:labels\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Pause rollouts\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:storage\"\n            icon={<StorageDomainIcon aria-hidden />}\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldownMenuStorage\">\n                <MenuItem itemId=\"group:storage\" icon={<StorageDomainIcon aria-hidden />} direction=\"up\">\n                  Add storage\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId=\"git\">\n                  From Git\n                </MenuItem>\n                <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId=\"container\">\n                  Container Image\n                </MenuItem>\n                <MenuItem icon={<CubeIcon aria-hidden />} itemId=\"docker\">\n                  Docker File\n                </MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Add storage\n          </MenuItem>\n          <MenuItem itemId=\"edit\">Edit</MenuItem>\n          <MenuItem itemId=\"delete_deployment\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Drilldown menu with toggle","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  DrilldownMenu,\n  Divider,\n  Popper\n} from '@patternfly/react-core';\nimport StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';\nimport CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';\nimport LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nDrilldownComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [activeMenu, setActiveMenu] = React.useState('rootMenu');\n  const [menuDrilledIn, setMenuDrilledIn] = React.useState([]);\n  const [drilldownPath, setDrilldownPath] = React.useState([]);\n  const [menuHeights, setMenuHeights] = React.useState({});\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n    setMenuDrilledIn([]);\n    setDrilldownPath([]);\n    setActiveMenu('rootMenu');\n  };\n\n  const drillIn = (fromMenuId, toMenuId, pathId) => {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = toMenuId => {\n    setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));\n    setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId, height) => {\n    if (!menuHeights[menuId]) {\n      setMenuHeights({\n        ...menuHeights,\n        [menuId]: height\n      });\n    }\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const menu = (\n    <Menu\n      id=\"rootMenu\"\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n      ref={menuRef}\n    >\n      <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>\n        <MenuList>\n          <MenuItem\n            itemId=\"group:start_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldownMenuStart\">\n                <MenuItem itemId=\"group:start_rollout\" direction=\"up\">\n                  Start rollout\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuStartGrouping\">\n                      <MenuItem itemId=\"group:app_grouping\" direction=\"up\">\n                        Application Grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application Grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuStartLabels\">\n                      <MenuItem itemId=\"group:labels\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Start rollout\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:pause_rollout\"\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldownMenuPause\">\n                <MenuItem itemId=\"group:pause_rollout\" direction=\"up\">\n                  Pause rollouts\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem\n                  itemId=\"group:app_grouping\"\n                  description=\"Groups A-C\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuGrouping\">\n                      <MenuItem itemId=\"group:app_grouping\" direction=\"up\">\n                        Application Grouping\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"group_a\">Group A</MenuItem>\n                      <MenuItem itemId=\"group_b\">Group B</MenuItem>\n                      <MenuItem itemId=\"group_c\">Group C</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Application Grouping\n                </MenuItem>\n                <MenuItem itemId=\"count\">Count</MenuItem>\n                <MenuItem\n                  itemId=\"group:labels\"\n                  direction=\"down\"\n                  drilldownMenu={\n                    <DrilldownMenu id=\"drilldownMenuLabels\">\n                      <MenuItem itemId=\"group:labels\" direction=\"up\">\n                        Labels\n                      </MenuItem>\n                      <Divider component=\"li\" />\n                      <MenuItem itemId=\"label_1\">Label 1</MenuItem>\n                      <MenuItem itemId=\"label_2\">Label 2</MenuItem>\n                      <MenuItem itemId=\"label_3\">Label 3</MenuItem>\n                    </DrilldownMenu>\n                  }\n                >\n                  Labels\n                </MenuItem>\n                <MenuItem itemId=\"annotations\">Annotations</MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Pause rollouts\n          </MenuItem>\n          <MenuItem\n            itemId=\"group:storage\"\n            icon={<StorageDomainIcon aria-hidden />}\n            direction=\"down\"\n            drilldownMenu={\n              <DrilldownMenu id=\"drilldownMenuStorage\">\n                <MenuItem itemId=\"group:storage\" icon={<StorageDomainIcon aria-hidden />} direction=\"up\">\n                  Add storage\n                </MenuItem>\n                <Divider component=\"li\" />\n                <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId=\"git\">\n                  From Git\n                </MenuItem>\n                <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId=\"container\">\n                  Container Image\n                </MenuItem>\n                <MenuItem icon={<CubeIcon aria-hidden />} itemId=\"docker\">\n                  Docker File\n                </MenuItem>\n              </DrilldownMenu>\n            }\n          >\n            Add storage\n          </MenuItem>\n          <MenuItem itemId=\"edit\">Edit</MenuItem>\n          <MenuItem itemId=\"delete_deployment\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Drilldown menu with toggle","lang":"js"}}>
       
     </Example>,
   'Filter tree menu': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuGroup, MenuList, MenuItem, Popper, TreeView } from '@patternfly/react-core';\n\nFilterTreeComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [checkedItems, setCheckedItems] = React.useState([]);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const statusOptions = [\n    {\n      name: 'Ready',\n      id: 'ready',\n      checkProps: { checked: false },\n      customBadgeContent: 1,\n      children: [\n        {\n          name: 'Updated',\n          id: 'updated',\n          checkProps: { checked: false },\n          customBadgeContent: 0\n        },\n        {\n          name: 'Waiting to update',\n          id: 'waiting',\n          checkProps: { checked: false },\n          customBadgeContent: 0\n        },\n        {\n          name: 'Conditions degraded',\n          id: 'degraded',\n          checkProps: { checked: false },\n          customBadgeContent: 1\n        },\n        {\n          name: 'Approval required',\n          id: 'approval',\n          checkProps: { checked: false },\n          customBadgeContent: 0\n        }\n      ]\n    },\n    {\n      name: 'Not ready',\n      id: 'nr',\n      checkProps: { checked: false },\n      customBadgeContent: 1,\n      children: [\n        {\n          name: 'Conditions degraded',\n          id: 'nr-degraded',\n          checkProps: { checked: false },\n          customBadgeContent: 1\n        }\n      ]\n    },\n    {\n      name: 'Updating',\n      id: 'updating',\n      checkProps: { checked: false },\n      customBadgeContent: 0\n    }\n  ];\n\n  const roleOptions = [\n    {\n      name: 'Server',\n      id: 'server',\n      checkProps: { checked: false },\n      customBadgeContent: 2\n    },\n    {\n      name: 'Worker',\n      id: 'worker',\n      checkProps: { checked: false },\n      customBadgeContent: 0\n    }\n  ];\n  // Helper functions\n  const isChecked = dataItem => checkedItems.some(item => item.id === dataItem.id);\n  const areAllDescendantsChecked = dataItem =>\n    dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);\n  const areSomeDescendantsChecked = dataItem =>\n    dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);\n  const flattenTree = tree => {\n    var result = [];\n    tree.forEach(item => {\n      result.push(item);\n      if (item.children) {\n        result = result.concat(flattenTree(item.children));\n      }\n    });\n    return result;\n  };\n\n  mapTree = item => {\n    const hasCheck = areAllDescendantsChecked(item);\n    // Reset checked properties to be updated\n    item.checkProps.checked = false;\n\n    if (hasCheck) {\n      item.checkProps.checked = true;\n    } else {\n      const hasPartialCheck = areSomeDescendantsChecked(item);\n      if (hasPartialCheck) {\n        item.checkProps.checked = null;\n      }\n    }\n\n    if (item.children) {\n      return {\n        ...item,\n        children: item.children.map(mapTree)\n      };\n    }\n    return item;\n  };\n\n  filterItems = (item, checkedItem) => {\n    if (item.id === checkedItem.id) {\n      return true;\n    }\n\n    if (item.children) {\n      return (\n        (item.children = item.children\n          .map(opt => Object.assign({}, opt))\n          .filter(child => filterItems(child, checkedItem))).length > 0\n      );\n    }\n  };\n\n  const onCheck = (evt, treeViewItem, tree) => {\n    const checked = evt.target.checked;\n\n    let options = [];\n    switch (tree) {\n      case 'status':\n        options = statusOptions;\n        break;\n      case 'role':\n        options = roleOptions;\n        break;\n      default:\n        break;\n    }\n\n    const checkedItemTree = options.map(opt => Object.assign({}, opt)).filter(item => filterItems(item, treeViewItem));\n    const flatCheckedItems = flattenTree(checkedItemTree);\n\n    setCheckedItems(\n      prevState =>\n        checked\n          ? prevState.checkedItems.concat(\n              flatCheckedItems.filter(item => !prevState.checkedItems.some(i => i.id === item.id))\n            )\n          : prevState.checkedItems.filter(item => !flatCheckedItems.some(i => i.id === item.id)),\n      () => {\n        console.log('Checked items: ', checkedItems);\n      }\n    );\n  };\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const statusMapped = statusOptions.map(mapTree);\n  const roleMapped = roleOptions.map(mapTree);\n  const menu = (\n    <Menu ref={menuRef} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuContent>\n        <MenuList>\n          <MenuGroup label=\"Status\">\n            <TreeView\n              data={statusMapped}\n              hasBadges\n              hasChecks\n              onCheck={(event, item, parentItem) => onCheck(event, item, 'status')}\n            />\n          </MenuGroup>\n          <MenuGroup label=\"Role\">\n            <TreeView\n              data={roleMapped}\n              hasBadges\n              hasChecks\n              onCheck={(event, item, parentItem) => onCheck(event, item, 'role')}\n            />\n          </MenuGroup>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Filter tree menu","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuGroup, MenuList, MenuItem, Popper, TreeView } from '@patternfly/react-core';\n\nFilterTreeComposableMenu = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [checkedItems, setCheckedItems] = React.useState([]);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const statusOptions = [\n    {\n      name: 'Ready',\n      id: 'ready',\n      checkProps: { checked: false },\n      customBadgeContent: 1,\n      children: [\n        {\n          name: 'Updated',\n          id: 'updated',\n          checkProps: { checked: false },\n          customBadgeContent: 0\n        },\n        {\n          name: 'Waiting to update',\n          id: 'waiting',\n          checkProps: { checked: false },\n          customBadgeContent: 0\n        },\n        {\n          name: 'Conditions degraded',\n          id: 'degraded',\n          checkProps: { checked: false },\n          customBadgeContent: 1\n        },\n        {\n          name: 'Approval required',\n          id: 'approval',\n          checkProps: { checked: false },\n          customBadgeContent: 0\n        }\n      ]\n    },\n    {\n      name: 'Not ready',\n      id: 'nr',\n      checkProps: { checked: false },\n      customBadgeContent: 1,\n      children: [\n        {\n          name: 'Conditions degraded',\n          id: 'nr-degraded',\n          checkProps: { checked: false },\n          customBadgeContent: 1\n        }\n      ]\n    },\n    {\n      name: 'Updating',\n      id: 'updating',\n      checkProps: { checked: false },\n      customBadgeContent: 0\n    }\n  ];\n\n  const roleOptions = [\n    {\n      name: 'Server',\n      id: 'server',\n      checkProps: { checked: false },\n      customBadgeContent: 2\n    },\n    {\n      name: 'Worker',\n      id: 'worker',\n      checkProps: { checked: false },\n      customBadgeContent: 0\n    }\n  ];\n  // Helper functions\n  const isChecked = dataItem => checkedItems.some(item => item.id === dataItem.id);\n  const areAllDescendantsChecked = dataItem =>\n    dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);\n  const areSomeDescendantsChecked = dataItem =>\n    dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);\n  const flattenTree = tree => {\n    var result = [];\n    tree.forEach(item => {\n      result.push(item);\n      if (item.children) {\n        result = result.concat(flattenTree(item.children));\n      }\n    });\n    return result;\n  };\n\n  mapTree = item => {\n    const hasCheck = areAllDescendantsChecked(item);\n    // Reset checked properties to be updated\n    item.checkProps.checked = false;\n\n    if (hasCheck) {\n      item.checkProps.checked = true;\n    } else {\n      const hasPartialCheck = areSomeDescendantsChecked(item);\n      if (hasPartialCheck) {\n        item.checkProps.checked = null;\n      }\n    }\n\n    if (item.children) {\n      return {\n        ...item,\n        children: item.children.map(mapTree)\n      };\n    }\n    return item;\n  };\n\n  filterItems = (item, checkedItem) => {\n    if (item.id === checkedItem.id) {\n      return true;\n    }\n\n    if (item.children) {\n      return (\n        (item.children = item.children\n          .map(opt => Object.assign({}, opt))\n          .filter(child => filterItems(child, checkedItem))).length > 0\n      );\n    }\n  };\n\n  const onCheck = (evt, treeViewItem, tree) => {\n    const checked = evt.target.checked;\n\n    let options = [];\n    switch (tree) {\n      case 'status':\n        options = statusOptions;\n        break;\n      case 'role':\n        options = roleOptions;\n        break;\n      default:\n        break;\n    }\n\n    const checkedItemTree = options.map(opt => Object.assign({}, opt)).filter(item => filterItems(item, treeViewItem));\n    const flatCheckedItems = flattenTree(checkedItemTree);\n\n    setCheckedItems(\n      prevState =>\n        checked\n          ? prevState.checkedItems.concat(\n              flatCheckedItems.filter(item => !prevState.checkedItems.some(i => i.id === item.id))\n            )\n          : prevState.checkedItems.filter(item => !flatCheckedItems.some(i => i.id === item.id)),\n      () => {\n        console.log('Checked items: ', checkedItems);\n      }\n    );\n  };\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n       if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n       }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n  const statusMapped = statusOptions.map(mapTree);\n  const roleMapped = roleOptions.map(mapTree);\n  const menu = (\n    <Menu ref={menuRef} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuContent>\n        <MenuList>\n          <MenuGroup label=\"Status\">\n            <TreeView\n              data={statusMapped}\n              hasBadges\n              hasChecks\n              onCheck={(event, item, parentItem) => onCheck(event, item, 'status')}\n            />\n          </MenuGroup>\n          <MenuGroup label=\"Role\">\n            <TreeView\n              data={roleMapped}\n              hasBadges\n              hasChecks\n              onCheck={(event, item, parentItem) => onCheck(event, item, 'role')}\n            />\n          </MenuGroup>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Filter tree menu","lang":"js"}}>
       
     </Example>,
   'Flyout': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuGroup, MenuList, MenuItem, Popper } from '@patternfly/react-core';\n\nMenuWithFlyout = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onSelect = itemId => console.log('selected', itemId);\n\n  const numFlyouts = 15;\n  const FlyoutMenu = ({ depth, children }) => (\n    <Menu key={depth} containsFlyout id={`menu-${depth}`} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>\n            Next menu\n          </MenuItem>\n          {[...Array(numFlyouts - depth).keys()].map(j => (\n            <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`}>\n              Menu {depth} item {j}\n            </MenuItem>\n          ))}\n          <MenuItem flyoutMenu={children} itemId={`next-menu-2-${depth}`}>\n            Next menu\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  let curFlyout = <FlyoutMenu depth={1} />;\n  for (let i = 2; i < numFlyouts - 1; i++) {\n    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;\n  }\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n\n  const menu = (\n    <Menu ref={menuRef} containsFlyout onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"start\">Start rollout</MenuItem>\n          <MenuItem itemId=\"pause\">Pause rollouts</MenuItem>\n          <MenuItem itemId=\"storage\">Add storage</MenuItem>\n          <MenuItem description=\"Description\" flyoutMenu={curFlyout} itemId=\"next-menu-root\">\n            Edit\n          </MenuItem>\n          <MenuItem itemId=\"delete\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;\n};","title":"Flyout","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { MenuToggle, Menu, MenuContent, MenuGroup, MenuList, MenuItem, Popper } from '@patternfly/react-core';\n\nMenuWithFlyout = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onSelect = itemId => console.log('selected', itemId);\n\n  const numFlyouts = 15;\n  const FlyoutMenu = ({ depth, children }) => (\n    <Menu key={depth} containsFlyout id={`menu-${depth}`} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>\n            Next menu\n          </MenuItem>\n          {[...Array(numFlyouts - depth).keys()].map(j => (\n            <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`}>\n              Menu {depth} item {j}\n            </MenuItem>\n          ))}\n          <MenuItem flyoutMenu={children} itemId={`next-menu-2-${depth}`}>\n            Next menu\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  let curFlyout = <FlyoutMenu depth={1} />;\n  for (let i = 2; i < numFlyouts - 1; i++) {\n    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;\n  }\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle onClick={onToggleClick} isExpanded={isOpen}>\n      {isOpen ? 'Expanded' : 'Collapsed'}\n    </MenuToggle>\n  );\n\n  const menu = (\n    <Menu ref={menuRef} containsFlyout onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"start\">Start rollout</MenuItem>\n          <MenuItem itemId=\"pause\">Pause rollouts</MenuItem>\n          <MenuItem itemId=\"storage\">Add storage</MenuItem>\n          <MenuItem description=\"Description\" flyoutMenu={curFlyout} itemId=\"next-menu-root\">\n            Edit\n          </MenuItem>\n          <MenuItem itemId=\"delete\">Delete deployment config</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;\n};","title":"Flyout","lang":"js"}}>
       
       <p {...{"className":"ws-p"}}>
         {`The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, `}
@@ -88,11 +89,15 @@ pageData.examples = {
       </p>
     </Example>,
   'Application launcher using menu components': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  MenuInput,\n  Popper,\n  Tooltip,\n  Divider,\n  TextInput\n} from '@patternfly/react-core';\nimport { Link } from '@reach/router';\nimport ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';\nimport pfIcon from './examples/pf-logo-small.svg';\n\nMenuAppLauncher = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [refFullOptions, setRefFullOptions] = React.useState();\n  const [favorites, setFavorites] = React.useState([]);\n  const [filteredIds, setFilteredIds] = React.useState(['*']);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n  const containerRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');\n      firstElement && firstElement.focus();\n      setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])')));\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const toggle = (\n    <MenuToggle\n      aria-label=\"Toggle\"\n      ref={toggleRef}\n      variant=\"plain\"\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={{ width: 'auto' }}\n    >\n      <ThIcon />\n    </MenuToggle>\n  );\n\n  const menuItems = [\n    <MenuGroup key=\"group1\" label=\"Group 1\">\n      <MenuList>\n        <MenuItem itemId=\"0\" id=\"0\" isFavorited={favorites.includes('0')}>\n          Application 1\n        </MenuItem>\n        <MenuItem\n          itemId=\"1\"\n          id=\"1\"\n          isFavorited={favorites.includes('1')}\n          to=\"#default-link2\"\n          onClick={ev => ev.preventDefault()}\n        >\n          Application 2\n        </MenuItem>\n      </MenuList>\n    </MenuGroup>,\n    <Divider key=\"group1-divider\" />,\n    <MenuGroup key=\"group2\" label=\"Group 2\">\n      <MenuList>\n        <MenuItem\n          itemId=\"2\"\n          id=\"2\"\n          isFavorited={favorites.includes('2')}\n          component={props => <Link {...props} to=\"#router-link\" />}\n        >\n          @reach/router Link\n        </MenuItem>\n        <MenuItem\n          itemId=\"3\"\n          id=\"3\"\n          isFavorited={favorites.includes('3')}\n          isExternalLink\n          icon={<img src={pfIcon} />}\n          component={props => <Link {...props} to=\"#router-link2\" />}\n        >\n          @reach/router Link with icon\n        </MenuItem>\n      </MenuList>\n    </MenuGroup>,\n    <Divider key=\"group2-divider\" />,\n    <MenuList key=\"other-items\">\n      <MenuItem key=\"tooltip-app\" isFavorited={favorites.includes('4')} itemId=\"4\" id=\"4\">\n        <Tooltip content={<div>Launch Application 3</div>} position=\"right\">\n          <span>Application 3 with tooltip</span>\n        </Tooltip>\n      </MenuItem>\n      <MenuItem key=\"disabled-app\" itemId=\"5\" id=\"5\" isDisabled>\n        Unavailable Application\n      </MenuItem>\n    </MenuList>\n  ];\n\n  const createFavorites = favIds => {\n    let favorites = [];\n\n    menuItems.forEach(item => {\n      if (item.type === MenuList) {\n        item.props.children.filter(child => {\n          if (favIds.includes(child.props.itemId)) {\n            favorites.push(child);\n          }\n        });\n      } else if (item.type === MenuGroup) {\n        item.props.children.props.children.filter(child => {\n          if (favIds.includes(child.props.itemId)) {\n            favorites.push(child);\n          }\n        });\n      } else {\n        if (favIds.includes(item.props.itemId)) {\n          favorites.push(item);\n        }\n      }\n    });\n\n    return favorites;\n  };\n\n  const filterItems = (items, filteredIds) => {\n    if (filteredIds.length === 1 && filteredIds[0] === '*') {\n      return items;\n    }\n    let keepDivider = false;\n    let filteredCopy = items\n      .map(group => {\n        if (group.type === MenuGroup) {\n          let filteredGroup = React.cloneElement(group, {\n            children: React.cloneElement(group.props.children, {\n              children: group.props.children.props.children.filter(child => {\n                if (filteredIds.includes(child.props.itemId)) {\n                  return child;\n                }\n              })\n            })\n          });\n          const filteredList = filteredGroup.props.children;\n          if (filteredList.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else if (group.type === MenuList) {\n          let filteredGroup = React.cloneElement(group, {\n            children: group.props.children.filter(child => {\n              if (filteredIds.includes(child.props.itemId)) {\n                return child;\n              }\n            })\n          });\n          if (filteredGroup.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else {\n          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.itemId)) {\n            return group;\n          }\n        }\n      })\n      .filter(newGroup => newGroup);\n\n    if (filteredCopy.length > 0) {\n      let lastGroup = filteredCopy.pop();\n      if (lastGroup.type !== Divider) {\n        filteredCopy.push(lastGroup);\n      }\n    }\n\n    return filteredCopy;\n  };\n\n  const onTextChange = textValue => {\n    if (textValue === '') {\n      setFilteredIds(['*']);\n      return;\n    }\n\n    const filteredIds = refFullOptions\n      .filter(item => item.innerText.toLowerCase().includes(textValue.toString().toLowerCase()))\n      .map(item => item.id);\n    setFilteredIds(filteredIds);\n  };\n\n  const onFavorite = (event, itemId, actionId) => {\n    event.stopPropagation();\n    if (actionId === 'fav') {\n      const isFavorite = favorites.includes(itemId);\n      if (isFavorite) {\n        setFavorites(favorites.filter(fav => fav !== itemId));\n      } else {\n        setFavorites([...favorites, itemId]);\n      }\n    }\n  };\n\n  const filteredFavorites = filterItems(createFavorites(favorites), filteredIds);\n  const filteredItems = filterItems(menuItems, filteredIds);\n  if (filteredItems.length === 0) {\n    filteredItems.push(<MenuItem key=\"no-items\">No results found</MenuItem>);\n  }\n\n  const menu = (\n    <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuInput>\n        <TextInput\n          aria-label=\"Filter menu items\"\n          iconVariant=\"search\"\n          type=\"search\"\n          onChange={value => onTextChange(value)}\n        />\n      </MenuInput>\n      <Divider />\n      <MenuContent>\n        {filteredFavorites.length > 0 && (\n          <React.Fragment>\n            <MenuGroup key=\"favorites-group\" label=\"Favorites\">\n              <MenuList>{filteredFavorites}</MenuList>\n            </MenuGroup>\n            <Divider key=\"favorites-divider\" />\n          </React.Fragment>\n        )}\n        {filteredItems}\n      </MenuContent>\n    </Menu>\n  );\n  return (\n    <div ref={containerRef}>\n      <Popper\n        trigger={toggle}\n        popper={menu}\n        isVisible={isOpen}\n        popperMatchesTriggerWidth={false}\n        appendTo={containerRef.current}\n      />\n    </div>\n  );\n};","title":"Application launcher using menu components","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  MenuInput,\n  Popper,\n  Tooltip,\n  Divider,\n  TextInput\n} from '@patternfly/react-core';\nimport { Link } from '@reach/router';\nimport ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';\nimport pfIcon from './examples/pf-logo-small.svg';\n\nMenuAppLauncher = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [refFullOptions, setRefFullOptions] = React.useState();\n  const [favorites, setFavorites] = React.useState([]);\n  const [filteredIds, setFilteredIds] = React.useState(['*']);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n  const containerRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuRef.current.contains(event.target) || toggleRef.current.contains(event.target)) {\n      if (event.key === 'Escape') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n       if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');\n        firstElement && firstElement.focus();\n        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])')));\n       }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const toggle = (\n    <MenuToggle\n      aria-label=\"Toggle\"\n      ref={toggleRef}\n      variant=\"plain\"\n      onClick={onToggleClick}\n      isExpanded={isOpen}\n      style={{ width: 'auto' }}\n    >\n      <ThIcon />\n    </MenuToggle>\n  );\n\n  const menuItems = [\n    <MenuGroup key=\"group1\" label=\"Group 1\">\n      <MenuList>\n        <MenuItem itemId=\"0\" id=\"0\" isFavorited={favorites.includes('0')}>\n          Application 1\n        </MenuItem>\n        <MenuItem\n          itemId=\"1\"\n          id=\"1\"\n          isFavorited={favorites.includes('1')}\n          to=\"#default-link2\"\n          onClick={ev => ev.preventDefault()}\n        >\n          Application 2\n        </MenuItem>\n      </MenuList>\n    </MenuGroup>,\n    <Divider key=\"group1-divider\" />,\n    <MenuGroup key=\"group2\" label=\"Group 2\">\n      <MenuList>\n        <MenuItem\n          itemId=\"2\"\n          id=\"2\"\n          isFavorited={favorites.includes('2')}\n          component={props => <Link {...props} to=\"#router-link\" />}\n        >\n          @reach/router Link\n        </MenuItem>\n        <MenuItem\n          itemId=\"3\"\n          id=\"3\"\n          isFavorited={favorites.includes('3')}\n          isExternalLink\n          icon={<img src={pfIcon} />}\n          component={props => <Link {...props} to=\"#router-link2\" />}\n        >\n          @reach/router Link with icon\n        </MenuItem>\n      </MenuList>\n    </MenuGroup>,\n    <Divider key=\"group2-divider\" />,\n    <MenuList key=\"other-items\">\n      <MenuItem key=\"tooltip-app\" isFavorited={favorites.includes('4')} itemId=\"4\" id=\"4\">\n        <Tooltip content={<div>Launch Application 3</div>} position=\"right\">\n          <span>Application 3 with tooltip</span>\n        </Tooltip>\n      </MenuItem>\n      <MenuItem key=\"disabled-app\" itemId=\"5\" id=\"5\" isDisabled>\n        Unavailable Application\n      </MenuItem>\n    </MenuList>\n  ];\n\n  const createFavorites = favIds => {\n    let favorites = [];\n\n    menuItems.forEach(item => {\n      if (item.type === MenuList) {\n        item.props.children.filter(child => {\n          if (favIds.includes(child.props.itemId)) {\n            favorites.push(child);\n          }\n        });\n      } else if (item.type === MenuGroup) {\n        item.props.children.props.children.filter(child => {\n          if (favIds.includes(child.props.itemId)) {\n            favorites.push(child);\n          }\n        });\n      } else {\n        if (favIds.includes(item.props.itemId)) {\n          favorites.push(item);\n        }\n      }\n    });\n\n    return favorites;\n  };\n\n  const filterItems = (items, filteredIds) => {\n    if (filteredIds.length === 1 && filteredIds[0] === '*') {\n      return items;\n    }\n    let keepDivider = false;\n    let filteredCopy = items\n      .map(group => {\n        if (group.type === MenuGroup) {\n          let filteredGroup = React.cloneElement(group, {\n            children: React.cloneElement(group.props.children, {\n              children: group.props.children.props.children.filter(child => {\n                if (filteredIds.includes(child.props.itemId)) {\n                  return child;\n                }\n              })\n            })\n          });\n          const filteredList = filteredGroup.props.children;\n          if (filteredList.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else if (group.type === MenuList) {\n          let filteredGroup = React.cloneElement(group, {\n            children: group.props.children.filter(child => {\n              if (filteredIds.includes(child.props.itemId)) {\n                return child;\n              }\n            })\n          });\n          if (filteredGroup.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else {\n          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.itemId)) {\n            return group;\n          }\n        }\n      })\n      .filter(newGroup => newGroup);\n\n    if (filteredCopy.length > 0) {\n      let lastGroup = filteredCopy.pop();\n      if (lastGroup.type !== Divider) {\n        filteredCopy.push(lastGroup);\n      }\n    }\n\n    return filteredCopy;\n  };\n\n  const onTextChange = textValue => {\n    if (textValue === '') {\n      setFilteredIds(['*']);\n      return;\n    }\n\n    const filteredIds = refFullOptions\n      .filter(item => item.innerText.toLowerCase().includes(textValue.toString().toLowerCase()))\n      .map(item => item.id);\n    setFilteredIds(filteredIds);\n  };\n\n  const onFavorite = (event, itemId, actionId) => {\n    event.stopPropagation();\n    if (actionId === 'fav') {\n      const isFavorite = favorites.includes(itemId);\n      if (isFavorite) {\n        setFavorites(favorites.filter(fav => fav !== itemId));\n      } else {\n        setFavorites([...favorites, itemId]);\n      }\n    }\n  };\n\n  const filteredFavorites = filterItems(createFavorites(favorites), filteredIds);\n  const filteredItems = filterItems(menuItems, filteredIds);\n  if (filteredItems.length === 0) {\n    filteredItems.push(<MenuItem key=\"no-items\">No results found</MenuItem>);\n  }\n\n  const menu = (\n    <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>\n      <MenuInput>\n        <TextInput\n          aria-label=\"Filter menu items\"\n          iconVariant=\"search\"\n          type=\"search\"\n          onChange={value => onTextChange(value)}\n        />\n      </MenuInput>\n      <Divider />\n      <MenuContent>\n        {filteredFavorites.length > 0 && (\n          <React.Fragment>\n            <MenuGroup key=\"favorites-group\" label=\"Favorites\">\n              <MenuList>{filteredFavorites}</MenuList>\n            </MenuGroup>\n            <Divider key=\"favorites-divider\" />\n          </React.Fragment>\n        )}\n        {filteredItems}\n      </MenuContent>\n    </Menu>\n  );\n  return (\n    <div ref={containerRef}>\n      <Popper\n        trigger={toggle}\n        popper={menu}\n        isVisible={isOpen}\n        popperMatchesTriggerWidth={false}\n        appendTo={containerRef.current}\n      />\n    </div>\n  );\n};","title":"Application launcher using menu components","lang":"js"}}>
       
     </Example>,
   'Context selector using menu components': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuFooter,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  MenuInput,\n  Popper,\n  Tooltip,\n  Divider,\n  TextInput,\n  InputGroup,\n  Button\n} from '@patternfly/react-core';\nimport { Link } from '@reach/router';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport pfIcon from './examples/pf-logo-small.svg';\n\nMenuContextSelector = () => {\n  const items = [\n    'My project',\n    'OpenShift cluster',\n    'Production Ansible',\n    'AWS',\n    'Azure',\n    'My project 2',\n    'OpenShift cluster ',\n    'Production Ansible 2 ',\n    'AWS 2',\n    'Azure 2'\n  ];\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selected, setSelected] = React.useState(items[0]);\n  const [filteredItems, setFilteredItems] = React.useState(items);\n  const [searchInputValue, setSearchInputValue] = React.useState('');\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n  const menuFooterBtnRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuFooterBtnRef.current.contains(event.target)) {\n      if (event.key === 'Tab') {\n        if (event.shiftKey) {\n          return;\n        }\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n    if (menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');\n      firstElement && firstElement.focus();\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {selected}\n    </MenuToggle>\n  );\n\n  const onSelect = (event, itemId) => {\n    setSelected(itemId);\n    setIsOpen(!isOpen);\n  };\n\n  const onSearchInputChange = value => {\n    setSearchInputValue(value);\n  };\n\n  const onSearchButtonClick = event => {\n    const filtered =\n      searchInputValue === ''\n        ? items\n        : items.filter(str => str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1);\n\n    setFilteredItems(filtered || []);\n    setIsOpen(true); // Keep menu open after search executed\n  };\n\n  const onEnterPressed = event => {\n    if (event.key === 'Enter') {\n      onSearchButtonClick(event);\n    }\n  };\n\n  const menu = (\n    <Menu ref={menuRef} id=\"context-selector\" onSelect={onSelect}>\n      <MenuInput>\n        <InputGroup>\n          <TextInput\n            value={searchInputValue}\n            type=\"search\"\n            placeholder=\"Search\"\n            onChange={onSearchInputChange}\n            onKeyPress={onEnterPressed}\n            aria-labelledby=\"pf-context-selector-search-button-id-1\"\n          />\n          <Button\n            variant={ButtonVariant.control}\n            aria-label=\"Search menu items\"\n            id=\"pf-context-selector-search-button-id-1\"\n            onClick={onSearchButtonClick}\n          >\n            <SearchIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroup>\n      </MenuInput>\n      <Divider />\n      <MenuContent maxMenuHeight=\"200px\">\n        <MenuList>\n          {filteredItems.map((item, index) => (\n            <MenuItem itemId={item} key={index}>\n              {item}\n            </MenuItem>\n          ))}\n        </MenuList>\n      </MenuContent>\n      <MenuFooter>\n        <Button ref={menuFooterBtnRef} variant=\"link\" isInline>\n          Action\n        </Button>\n      </MenuFooter>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Context selector using menu components","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuFooter,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  MenuInput,\n  Popper,\n  Tooltip,\n  Divider,\n  TextInput,\n  InputGroup,\n  Button\n} from '@patternfly/react-core';\nimport { Link } from '@reach/router';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport pfIcon from './examples/pf-logo-small.svg';\n\nMenuContextSelector = () => {\n  const items = [\n    'My project',\n    'OpenShift cluster',\n    'Production Ansible',\n    'AWS',\n    'Azure',\n    'My project 2',\n    'OpenShift cluster ',\n    'Production Ansible 2 ',\n    'AWS 2',\n    'Azure 2'\n  ];\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selected, setSelected] = React.useState(items[0]);\n  const [filteredItems, setFilteredItems] = React.useState(items);\n  const [searchInputValue, setSearchInputValue] = React.useState('');\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n  const menuFooterBtnRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (!isOpen) {\n      return;\n    }\n    if (menuFooterBtnRef.current.contains(event.target)) {\n      if (event.key === 'Tab') {\n        if (event.shiftKey) {\n          return;\n        }\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n    if (menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      {selected}\n    </MenuToggle>\n  );\n\n  const onSelect = (event, itemId) => {\n    setSelected(itemId);\n    setIsOpen(!isOpen);\n  };\n\n  const onSearchInputChange = value => {\n    setSearchInputValue(value);\n  };\n\n  const onSearchButtonClick = event => {\n    const filtered =\n      searchInputValue === ''\n        ? items\n        : items.filter(str => str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1);\n\n    setFilteredItems(filtered || []);\n    setIsOpen(true); // Keep menu open after search executed\n  };\n\n  const onEnterPressed = event => {\n    if (event.key === 'Enter') {\n      onSearchButtonClick(event);\n    }\n  };\n\n  const menu = (\n    <Menu ref={menuRef} id=\"context-selector\" onSelect={onSelect}>\n      <MenuInput>\n        <InputGroup>\n          <TextInput\n            value={searchInputValue}\n            type=\"search\"\n            placeholder=\"Search\"\n            onChange={onSearchInputChange}\n            onKeyPress={onEnterPressed}\n            aria-labelledby=\"pf-context-selector-search-button-id-1\"\n          />\n          <Button\n            variant={ButtonVariant.control}\n            aria-label=\"Search menu items\"\n            id=\"pf-context-selector-search-button-id-1\"\n            onClick={onSearchButtonClick}\n          >\n            <SearchIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroup>\n      </MenuInput>\n      <Divider />\n      <MenuContent maxMenuHeight=\"200px\">\n        <MenuList>\n          {filteredItems.map((item, index) => (\n            <MenuItem itemId={item} key={index}>\n              {item}\n            </MenuItem>\n          ))}\n        </MenuList>\n      </MenuContent>\n      <MenuFooter>\n        <Button ref={menuFooterBtnRef} variant=\"link\" isInline>\n          Action\n        </Button>\n      </MenuFooter>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Context selector using menu components","lang":"js"}}>
+      
+    </Example>,
+  'Options menu using menu components': props => 
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  MenuToggle,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuGroup,\n  Popper,\n  Divider\n} from '@patternfly/react-core';\n\nMenuOptionsMenu = () => {\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selected, setSelected] = React.useState(undefined);\n  const toggleRef = React.useRef();\n  const menuRef = React.useRef();\n\n  const handleMenuKeys = event => {\n    if (isOpen && menuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = event => {\n    if (isOpen && !menuRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  React.useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = ev => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const toggle = (\n    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n      Options menu\n    </MenuToggle>\n  );\n\n  const menu = (\n    <Menu ref={menuRef} id=\"options-menu\"  selected={selected} onSelect={(_ev, itemId) => setSelected(itemId)}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId={0}>Option 1</MenuItem>\n          <MenuItem itemId={1} isDisabled>Disabled Option</MenuItem>\n          <Divider key=\"group1-divider\" />\n          <MenuGroup label=\"Group 1\">\n            <MenuList>\n              <MenuItem itemId={2}>Option 1</MenuItem>\n              <MenuItem itemId={3}>Option 2</MenuItem>\n            </MenuList>\n          </MenuGroup>\n          <Divider key=\"group2-divider\" />\n          <MenuGroup label=\"Group 2\">\n            <MenuList>\n              <MenuItem itemId={4}>Option 1</MenuItem>\n              <MenuItem itemId={5}>Option 2</MenuItem>\n            </MenuList>\n          </MenuGroup>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;\n};","title":"Options menu using menu components","lang":"js"}}>
       
     </Example>
 };
@@ -121,6 +126,7 @@ const Component = () => (
     {React.createElement(pageData.examples["Flyout"])}
     {React.createElement(pageData.examples["Application launcher using menu components"])}
     {React.createElement(pageData.examples["Context selector using menu components"])}
+    {React.createElement(pageData.examples["Options menu using menu components"])}
   </React.Fragment>
 );
 Component.displayName = 'DemosComposableMenuReactDemosDocs';

package/src/generated/index.js

@@ -253,8 +253,8 @@ module.exports = {
   '/components/drawer/react': {
     id: "Drawer",
     title: "Drawer",
-    toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Panel on right"},{"text":"Panel on left"},{"text":"Panel on bottom"},{"text":"Basic inline"},{"text":"Inline panel on right"},{"text":"Inline panel on left"},{"text":"Stacked content body elements"},{"text":"Stacked content body elements"},{"text":"Modified content padding"},{"text":"Modified panel padding"},{"text":"Additional section above drawer content"},{"text":"Static drawer"},{"text":"Breakpoint"},{"text":"Resizable on right"},{"text":"Resizable on left"},{"text":"Resizable on bottom"},{"text":"Resizable on inline"},{"text":"Panel with light-200 background"}]],
-    examples: ["Basic","Panel on right","Panel on left","Panel on bottom","Basic inline","Inline panel on right","Inline panel on left","Stacked content body elements","Stacked content body elements","Modified content padding","Modified panel padding","Additional section above drawer content","Static drawer","Breakpoint","Resizable on right","Resizable on left","Resizable on bottom","Resizable on inline","Panel with light-200 background"],
+    toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Panel on right"},{"text":"Panel on left"},{"text":"Panel on bottom"},{"text":"Basic inline"},{"text":"Inline panel on right"},{"text":"Inline panel on left"},{"text":"Stacked content body elements"},{"text":"Modified content padding"},{"text":"Modified panel padding"},{"text":"Additional section above drawer content"},{"text":"Static drawer"},{"text":"Breakpoint"},{"text":"Resizable on right"},{"text":"Resizable on left"},{"text":"Resizable on bottom"},{"text":"Resizable on inline"},{"text":"Panel with light-200 background"}]],
+    examples: ["Basic","Panel on right","Panel on left","Panel on bottom","Basic inline","Inline panel on right","Inline panel on left","Stacked content body elements","Modified content padding","Modified panel padding","Additional section above drawer content","Static drawer","Breakpoint","Resizable on right","Resizable on left","Resizable on bottom","Resizable on inline","Panel with light-200 background"],
     section: "components",
     source: "react",
     Component: () => import(/* webpackChunkName: "components/drawer/react/index" */ './components/drawer/react')
@@ -487,8 +487,8 @@ module.exports = {
   '/components/page/react': {
     id: "Page",
     title: "Page",
-    toc: [{"text":"Examples"},[{"text":"Vertical nav"},{"text":"Horizontal nav"},{"text":"Tertiary nav"},{"text":"Main Section Padding"},{"text":"With or without fill"},{"text":"Uncontrolled nav"},{"text":"Group section"}]],
-    examples: ["Vertical nav","Horizontal nav","Tertiary nav","Main Section Padding","With or without fill","Uncontrolled nav","Group section"],
+    toc: [{"text":"Examples"},[{"text":"Vertical nav"},{"text":"Horizontal nav"},{"text":"Tertiary nav"},{"text":"Main Section Padding"},{"text":"With or without fill"},{"text":"Uncontrolled nav"},{"text":"Group section"},{"text":"Vertical nav using PageHeader component"}]],
+    examples: ["Vertical nav","Horizontal nav","Tertiary nav","Main Section Padding","With or without fill","Uncontrolled nav","Group section","Vertical nav using PageHeader component"],
     section: "components",
     source: "react",
     Component: () => import(/* webpackChunkName: "components/page/react/index" */ './components/page/react')
@@ -614,8 +614,8 @@ module.exports = {
   '/components/tabs/react': {
     id: "Tabs",
     title: "Tabs",
-    toc: [{"text":"Examples"},[{"text":"Default"},{"text":"Uncontrolled"},{"text":"Box light variation"},{"text":"Default overflow"},{"text":"Vertical"},{"text":"Inset"},{"text":"Page Insets"},{"text":"Icons and text"},{"text":"Tabs with sub tabs"},{"text":"Filled"},{"text":"Filled with icons"},{"text":"Using the nav element"},{"text":"Sub nav using the nav element"},{"text":"Separate content"},{"text":"Children mounting on click"},{"text":"Unmounting invisible children"},{"text":"Toggled separate content"}]],
-    examples: ["Default","Uncontrolled","Box light variation","Default overflow","Vertical","Inset","Page Insets","Icons and text","Tabs with sub tabs","Filled","Filled with icons","Using the nav element","Sub nav using the nav element","Separate content","Children mounting on click","Unmounting invisible children","Toggled separate content"],
+    toc: [{"text":"Examples"},[{"text":"Default"},{"text":"Uncontrolled"},{"text":"Box light variation"},{"text":"Default overflow"},{"text":"Vertical"},{"text":"Vertical expandable"},{"text":"Vertical expandable uncontrolled"},{"text":"Inset"},{"text":"Page Insets"},{"text":"Icons and text"},{"text":"Tabs with sub tabs"},{"text":"Filled"},{"text":"Filled with icons"},{"text":"Using the nav element"},{"text":"Sub nav using the nav element"},{"text":"Separate content"},{"text":"Children mounting on click"},{"text":"Unmounting invisible children"},{"text":"Toggled separate content"}]],
+    examples: ["Default","Uncontrolled","Box light variation","Default overflow","Vertical","Vertical expandable","Vertical expandable uncontrolled","Inset","Page Insets","Icons and text","Tabs with sub tabs","Filled","Filled with icons","Using the nav element","Sub nav using the nav element","Separate content","Children mounting on click","Unmounting invisible children","Toggled separate content"],
     section: "components",
     source: "react",
     Component: () => import(/* webpackChunkName: "components/tabs/react/index" */ './components/tabs/react')
@@ -821,8 +821,8 @@ module.exports = {
   '/demos/composable-menu/react-demos': {
     id: "Composable menu",
     title: "Composable menu",
-    toc: [{"text":"Demos"},[{"text":"Basic menu with toggle"},{"text":"Menu with actions"},{"text":"Select menu"},{"text":"Drilldown menu with toggle"},{"text":"Filter tree menu"},{"text":"Flyout"},{"text":"Application launcher using menu components"},{"text":"Context selector using menu components"}]],
-    examples: ["Basic menu with toggle","Menu with actions","Select menu","Drilldown menu with toggle","Filter tree menu","Flyout","Application launcher using menu components","Context selector using menu components"],
+    toc: [{"text":"Demos"},[{"text":"Basic menu with toggle"},{"text":"Menu with actions"},{"text":"Select menu"},{"text":"Drilldown menu with toggle"},{"text":"Filter tree menu"},{"text":"Flyout"},{"text":"Application launcher using menu components"},{"text":"Context selector using menu components"},{"text":"Options menu using menu components"}]],
+    examples: ["Basic menu with toggle","Menu with actions","Select menu","Drilldown menu with toggle","Filter tree menu","Flyout","Application launcher using menu components","Context selector using menu components","Options menu using menu components"],
     section: "demos",
     source: "react-demos",
     Component: () => import(/* webpackChunkName: "demos/composable-menu/react-demos/index" */ './demos/composable-menu/react-demos')
@@ -884,8 +884,8 @@ module.exports = {
   '/components/page/react-demos': {
     id: "Page",
     title: "Page",
-    toc: [{"text":"Layouts"},[{"text":"Sticky section group"},{"text":"Sticky section group (alternate syntax)"}]],
-    fullscreenExamples: ["Sticky section group","Sticky section group (alternate syntax)"],
+    toc: [{"text":"Layouts"},[{"text":"Sticky section group"},{"text":"Sticky section group (using PageHeader)"},{"text":"Sticky section group (alternate syntax and using PageHeader)"}]],
+    fullscreenExamples: ["Sticky section group","Sticky section group (using PageHeader)","Sticky section group (alternate syntax and using PageHeader)"],
     section: "components",
     source: "react-demos",
     Component: () => import(/* webpackChunkName: "components/page/react-demos/index" */ './components/page/react-demos')