@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/navigation/react.js

@@ -1,409 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useState } from 'react';
-import '../../../../../react-core/src/components/Nav/examples/./nav.css';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
-import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
-const pageData = {
-  "id": "Navigation",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/navigation/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Nav/examples/Nav.md",
-  "relPath": "packages/react-core/src/components/Nav/examples/Nav.md",
-  "propComponents": [
-    {
-      "name": "Nav",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Accessible label for the nav when there are multiple navs on the page"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Anything that can be rendered inside of the nav"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the container"
-        },
-        {
-          "name": "isTextExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the docked nav should display text. Only applies when variant is docked.",
-          "beta": true
-        },
-        {
-          "name": "onSelect",
-          "type": "(\n  event: React.FormEvent<HTMLInputElement>,\n  selectedItem: {\n    groupId: number | string;\n    itemId: number | string;\n    to: string;\n  }\n) => void",
-          "description": "Callback for updating when item selection changes",
-          "defaultValue": "() => undefined"
-        },
-        {
-          "name": "onToggle",
-          "type": "(\n  event: React.MouseEvent<HTMLButtonElement>,\n  toggledItem: {\n    groupId: number | string;\n    isExpanded: boolean;\n  }\n) => void",
-          "description": "Callback for when a list is expanded or collapsed",
-          "defaultValue": "() => undefined"
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
-          "defaultValue": "true"
-        },
-        {
-          "name": "variant",
-          "type": "'default' | 'horizontal' | 'horizontal-subnav' | 'docked'",
-          "description": "The nav variant to use. Docked is in beta."
-        }
-      ]
-    },
-    {
-      "name": "NavList",
-      "description": "",
-      "props": [
-        {
-          "name": "backScrollAriaLabel",
-          "type": "string",
-          "description": "Aria-label for the back scroll button",
-          "defaultValue": "'Scroll back'"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Children nodes"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the list"
-        },
-        {
-          "name": "forwardScrollAriaLabel",
-          "type": "string",
-          "description": "Aria-label for the forward scroll button",
-          "defaultValue": "'Scroll foward'"
-        }
-      ]
-    },
-    {
-      "name": "NavGroup",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Anything that can be rendered inside of the group",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the container",
-          "defaultValue": "''"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Identifier to use for the section aria label"
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "description": "Title shown for the group"
-        }
-      ]
-    },
-    {
-      "name": "NavItem",
-      "description": "",
-      "props": []
-    },
-    {
-      "name": "NavItemSeparator",
-      "description": "",
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the divider"
-        },
-        {
-          "name": "component",
-          "type": "'hr' | 'li' | 'div'",
-          "description": "The component type to use",
-          "defaultValue": "'li'"
-        },
-        {
-          "name": "inset",
-          "type": "{\n  default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n}",
-          "description": "Insets at various breakpoints."
-        },
-        {
-          "name": "orientation",
-          "type": "{\n  default?: 'vertical' | 'horizontal';\n  sm?: 'vertical' | 'horizontal';\n  md?: 'vertical' | 'horizontal';\n  lg?: 'vertical' | 'horizontal';\n  xl?: 'vertical' | 'horizontal';\n  '2xl'?: 'vertical' | 'horizontal';\n}",
-          "description": "Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout."
-        },
-        {
-          "name": "role",
-          "type": "'separator' | 'presentation'",
-          "description": "The ARIA role of the divider when the component property has a value other than \"hr\".",
-          "defaultValue": "'presentation'"
-        }
-      ]
-    },
-    {
-      "name": "NavExpandable",
-      "description": "",
-      "props": [
-        {
-          "name": "buttonProps",
-          "type": "any",
-          "description": "Additional props added to the NavExpandable <button>"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Anything that can be rendered inside of the expandable list",
-          "defaultValue": "''"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the container",
-          "defaultValue": "''"
-        },
-        {
-          "name": "groupId",
-          "type": "string | number",
-          "description": "Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component",
-          "defaultValue": "null"
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode",
-          "description": "Icon added before the nav item children."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Identifier to use for the section aria label",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isActive",
-          "type": "boolean",
-          "description": "If true makes the expandable list title active",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Boolean to pragmatically expand or collapse section",
-          "defaultValue": "false"
-        },
-        {
-          "name": "onExpand",
-          "type": "(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void",
-          "description": "allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle."
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": ""
-        },
-        {
-          "name": "srText",
-          "type": "string",
-          "description": "If defined, screen readers will read this text instead of the list title",
-          "defaultValue": "''"
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode",
-          "description": "Title content shown for the expandable list",
-          "required": true
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-nav"
-  ],
-  "examples": [
-    "Default",
-    "Grouped",
-    "Expandable",
-    "Expandable third level",
-    "Mixed",
-    "Horizontal navigation",
-    "Horizontal subnav",
-    "Flyout",
-    "Drilldown",
-    "With icons"
-  ]
-};
-pageData.liveContext = {
-  useState,
-  RhMicronsCaretRightIcon,
-  CubeIcon,
-  FolderIcon,
-  FolderOpenIcon,
-  CloudIcon,
-  RhUiLinkIcon
-};
-pageData.relativeImports = "import 'react-core/src/components/Nav/examples/./nav.css';"
-pageData.examples = {
-  'Default': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavItem, NavList } from '@patternfly/react-core';\n\nexport const NavDefault: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as number);\n  };\n\n  return (\n    <Nav onSelect={onSelect} aria-label=\"Default global\" ouiaId=\"DefaultNav\">\n      <NavList>\n        <NavItem preventDefault id=\"nav-default-link1\" to=\"#nav-default-link1\" itemId={0} isActive={activeItem === 0}>\n          Default Link 1\n        </NavItem>\n        <NavItem preventDefault id=\"nav-default-link2\" to=\"#nav-default-link2\" itemId={1} isActive={activeItem === 1}>\n          Default Link 2\n        </NavItem>\n        <NavItem preventDefault id=\"nav-default-link3\" to=\"#nav-default-link3\" itemId={2} isActive={activeItem === 2}>\n          Default Link 3\n        </NavItem>\n        <NavItem preventDefault id=\"nav-default-link4\" to=\"#nav-default-link4\" itemId={3} isActive={activeItem === 3}>\n          Default Link 4\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Default","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Grouped': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavItem, NavGroup } from '@patternfly/react-core';\n\nexport const NavGrouped: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState('group-1_item-1');\n\n  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as string);\n  };\n\n  return (\n    <Nav onSelect={onSelect} aria-label=\"Grouped global\">\n      <NavGroup title=\"Section title 1\">\n        <NavItem\n          preventDefault\n          to=\"#nav-group1-item1\"\n          itemId=\"group-1_item-1\"\n          isActive={activeItem === 'group-1_item-1'}\n        >\n          Group 1 Link 1\n        </NavItem>\n        <NavItem\n          preventDefault\n          to=\"#nav-group1-item2\"\n          itemId=\"group-1_item-2\"\n          isActive={activeItem === 'group-1_item-2'}\n        >\n          Group 1 Link 2\n        </NavItem>\n        <NavItem\n          preventDefault\n          to=\"#nav-group1-item3\"\n          itemId=\"group-1_item-3\"\n          isActive={activeItem === 'group-1_item-3'}\n        >\n          Group 1 Link 3\n        </NavItem>\n      </NavGroup>\n      <NavGroup title=\"Section title 2\">\n        <NavItem\n          preventDefault\n          to=\"#nav-group2-item1\"\n          itemId=\"group-2_item-1\"\n          isActive={activeItem === 'group-2_item-1'}\n        >\n          Group 2 Link 1\n        </NavItem>\n        <NavItem\n          preventDefault\n          to=\"#nav-group2-item2\"\n          itemId=\"group-2_item-2\"\n          isActive={activeItem === 'group-2_item-2'}\n        >\n          Group 2 Link 2\n        </NavItem>\n        <NavItem\n          preventDefault\n          to=\"#nav-group2-item3\"\n          itemId=\"group-2_item-3\"\n          isActive={activeItem === 'group-2_item-3'}\n        >\n          Group 2 Link 3\n        </NavItem>\n      </NavGroup>\n    </Nav>\n  );\n};\n","title":"Grouped","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`The following example shows two navigation groups, each with a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`title`}
-        </code>
-        {` prop passed into the nav group component. To keep nav groups accessible an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`aria-label`}
-        </code>
-        {` must be passed in if the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`title`}
-        </code>
-        {` prop is not passed in.`}
-      </p>
-    </Example>,
-  'Expandable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';\n\nexport const NavExpandableExample: React.FunctionComponent = () => {\n  const [activeGroup, setActiveGroup] = useState('nav-expandable-group-1');\n  const [activeItem, setActiveItem] = useState('nav-expandable-group-1_item-1');\n\n  const onSelect = (\n    _event: React.FormEvent<HTMLInputElement>,\n    result: { itemId: number | string; groupId: number | string }\n  ) => {\n    setActiveGroup(result.groupId as string);\n    setActiveItem(result.itemId as string);\n  };\n\n  const onToggle = (\n    _event: React.MouseEvent<HTMLButtonElement>,\n    result: { groupId: number | string; isExpanded: boolean }\n  ) => {\n    // eslint-disable-next-line no-console\n    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);\n  };\n\n  const onItemClick = (\n    _event: React.FormEvent<HTMLInputElement>,\n    itemId: number | string,\n    _groupId: number | string\n  ) => {\n    // eslint-disable-next-line no-console\n    console.log(`Custom click handler on ${itemId}`);\n  };\n\n  return (\n    <Nav onSelect={onSelect} onToggle={onToggle} aria-label=\"Expandable global\">\n      <NavList>\n        <NavExpandable\n          title=\"Expandable Group 1\"\n          groupId=\"nav-expandable-group-1\"\n          isActive={activeGroup === 'nav-expandable-group-1'}\n          isExpanded\n        >\n          <NavItem\n            preventDefault\n            id=\"expandable-1\"\n            to=\"#expandable-1\"\n            groupId=\"nav-expandable-group-1\"\n            itemId=\"nav-expandable-group-1_item-1\"\n            isActive={activeItem === 'nav-expandable-group-1_item-1'}\n          >\n            Subnav 1 Link 1\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable-2\"\n            to=\"#expandable-2\"\n            groupId=\"nav-expandable-group-1\"\n            itemId=\"nav-expandable-group-1_item-2\"\n            isActive={activeItem === 'nav-expandable-group-1_item-2'}\n          >\n            Subnav 1 Link 2\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable-3\"\n            to=\"#expandable-3\"\n            groupId=\"nav-expandable-group-1\"\n            itemId=\"nav-expandable-group-1_item-3\"\n            isActive={activeItem === 'nav-expandable-group-1_item-3'}\n          >\n            Subnav 1 Link 3\n          </NavItem>\n        </NavExpandable>\n        <NavExpandable\n          title=\"Expandable Group 2\"\n          groupId=\"nav-expandable-group-2\"\n          isActive={activeGroup === 'nav-expandable-group-2'}\n          isExpanded\n        >\n          <NavItem\n            preventDefault\n            onClick={onItemClick}\n            id=\"expandable-custom-click\"\n            to=\"#expandable-custom-click\"\n            groupId=\"nav-expandable-group-2\"\n            itemId=\"nav-expandable-group-2_custom-click\"\n            isActive={activeItem === 'nav-expandable-group-2_custom-click'}\n          >\n            Custom onClick Link\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable-4\"\n            to=\"#expandable-4\"\n            groupId=\"nav-expandable-group-2\"\n            itemId=\"nav-expandable-group-2_item-1\"\n            isActive={activeItem === 'nav-expandable-group-2_item-1'}\n          >\n            Subnav 2 Link 1\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable-5\"\n            to=\"#expandable-5\"\n            groupId=\"nav-expandable-group-2\"\n            itemId=\"nav-expandable-group-2_item-2\"\n            isActive={activeItem === 'nav-expandable-group-2_item-2'}\n          >\n            Subnav 2 Link 2\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable-6\"\n            to=\"#expandable-6\"\n            groupId=\"nav-expandable-group-2\"\n            itemId=\"nav-expandable-group-2_item-3\"\n            isActive={activeItem === 'nav-expandable-group-2_item-3'}\n          >\n            Subnav 2 Link 3\n          </NavItem>\n        </NavExpandable>\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Expandable","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Expandable third level': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';\n\nexport const NavExpandableThirdLevel: React.FunctionComponent = () => {\n  const [activeGroup, setActiveGroup] = useState('nav-expand3rd-group-1');\n  const [activeItem, setActiveItem] = useState('nav-expand3rd-group-1_item-1');\n\n  const onSelect = (\n    _event: React.FormEvent<HTMLInputElement>,\n    result: { itemId: number | string; groupId: number | string }\n  ) => {\n    setActiveGroup(result.groupId as string);\n    setActiveItem(result.itemId as string);\n  };\n\n  const onToggle = (\n    _event: React.MouseEvent<HTMLButtonElement>,\n    result: { groupId: number | string; isExpanded: boolean }\n  ) => {\n    // eslint-disable-next-line no-console\n    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);\n  };\n\n  return (\n    <Nav onSelect={onSelect} onToggle={onToggle} aria-label=\"Expandable third level global\">\n      <NavList>\n        <NavExpandable\n          title=\"Expandable section title 1\"\n          groupId=\"nav-expand3rd-group-1\"\n          isActive={activeGroup === 'nav-expand3rd-group-1'}\n          isExpanded\n        >\n          <NavItem\n            preventDefault\n            id=\"expandable3rd-1\"\n            to=\"#expandable3rd-1\"\n            groupId=\"nav-expand3rd-group-1\"\n            itemId=\"nav-expand3rd-group-1_item-1\"\n            isActive={activeItem === 'nav-expand3rd-group-1_item-1'}\n          >\n            With 3rd 1 Link 1\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable3rd-2\"\n            to=\"#expandable3rd-2\"\n            groupId=\"nav-expand3rd-group-1\"\n            itemId=\"nav-expand3rd-group-1_item-2\"\n            isActive={activeItem === 'nav-expand3rd-group-1_item-2'}\n          >\n            With 3rd 1 Link 2\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"expandable3rd-3\"\n            to=\"#expandable3rd-3\"\n            groupId=\"nav-expand3rd-group-1\"\n            itemId=\"nav-expand3rd-group-1_item-3\"\n            isActive={activeItem === 'nav-expand3rd-group-1_item-3'}\n          >\n            With 3rd 1 Link 3\n          </NavItem>\n        </NavExpandable>\n        <NavExpandable\n          title={'Expandable section title 2'}\n          groupId=\"nav-expand3rd-group-2\"\n          isActive={activeGroup === 'nav-expand3rd-group-2'}\n          isExpanded\n        >\n          <NavItem\n            preventDefault\n            id=\"expandable3rd-4\"\n            to=\"#expandable3rd-4\"\n            groupId=\"nav-expand3rd-group-2\"\n            itemId=\"nav-expand3rd-group-2_item-1\"\n            isActive={activeItem === 'nav-expand3rd-group-2_item-1'}\n          >\n            With 3rd 2 Link 1\n          </NavItem>\n          <NavExpandable\n            title=\"Expandable third level\"\n            groupId=\"nav-expand3rd-group-3\"\n            isActive={activeGroup === 'nav-expand3rd-group-3'}\n            isExpanded\n          >\n            <NavItem\n              preventDefault\n              id=\"expandable3rd-5\"\n              to=\"#expandable3rd-5\"\n              groupId=\"nav-expand3rd-group-3\"\n              itemId=\"nav-expand3rd-group-3_item-1\"\n              isActive={activeItem === 'nav-expand3rd-group-3_item-1'}\n            >\n              Third Level Link 1\n            </NavItem>\n            <NavItem\n              preventDefault\n              id=\"expandable3rd-6\"\n              to=\"#expandable3rd-6\"\n              groupId=\"nav-expand3rd-group-3\"\n              itemId=\"nav-expand3rd-group-3_item-3\"\n              isActive={activeItem === 'nav-expand3rd-group-3_item-2'}\n            >\n              Third Level Link 2\n            </NavItem>\n          </NavExpandable>\n          <NavItem\n            preventDefault\n            id=\"expandable3rd-7\"\n            to=\"#expandable3rd-7\"\n            groupId=\"nav-expand3rd-group-2\"\n            itemId=\"nav-expand3rd-group-2_item-2\"\n            isActive={activeItem === 'nav-expand3rd-group-2_item-2'}\n          >\n            With 3rd 2 Link 2\n          </NavItem>\n        </NavExpandable>\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Expandable third level","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Mixed': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';\n\nexport const NavMixed: React.FunctionComponent = () => {\n  const [activeGroup, setActiveGroup] = useState('');\n  const [activeItem, setActiveItem] = useState('ungrouped_item-1');\n\n  const onSelect = (\n    _event: React.FormEvent<HTMLInputElement>,\n    result: { itemId: number | string; groupId: number | string | null }\n  ) => {\n    setActiveGroup(result.groupId as string);\n    setActiveItem(result.itemId as string);\n  };\n\n  return (\n    <Nav onSelect={onSelect} aria-label=\"Mixed global\">\n      <NavList>\n        <NavItem\n          preventDefault\n          id=\"mixed-1\"\n          to=\"#mixed-1\"\n          itemId=\"ungrouped_item-1\"\n          isActive={activeItem === 'ungrouped_item-1'}\n        >\n          Link 1 (not expandable)\n        </NavItem>\n        <NavExpandable\n          title=\"Expandable section title 1\"\n          groupId=\"nav-mixed-group-1\"\n          isActive={activeGroup === 'nav-mixed-group-1'}\n        >\n          <NavItem\n            preventDefault\n            id=\"mixed-2\"\n            to=\"#mixed-2\"\n            groupId=\"nav-mixed-group-1\"\n            itemId=\"nav-mixed-group-1_item-1\"\n            isActive={activeItem === 'nav-mixed-group-1_item-1'}\n          >\n            Mixed Link 1\n          </NavItem>\n          <NavItemSeparator />\n          <NavItem\n            preventDefault\n            id=\"mixed-3\"\n            to=\"#mixed-3\"\n            groupId=\"nav-mixed-group-1\"\n            itemId=\"nav-mixed-group-1_item-2\"\n            isActive={activeItem === 'nav-mixed-group-1_item-2'}\n          >\n            Mixed Link 2\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"mixed-4\"\n            to=\"#mixed-4\"\n            groupId=\"nav-mixed-group-1\"\n            itemId=\"nav-mixed-group-1_item-3\"\n            isActive={activeItem === 'nav-mixed-group-1_item-3'}\n          >\n            Mixed Link 3\n          </NavItem>\n        </NavExpandable>\n        <NavExpandable\n          title=\"Expandable section title 2\"\n          groupId=\"nav-mixed-group-2\"\n          isActive={activeGroup === 'nav-mixed-group-2'}\n        >\n          <NavItem\n            preventDefault\n            id=\"mixed-5\"\n            to=\"#mixed-5\"\n            groupId=\"nav-mixed-group-2\"\n            itemId=\"nav-mixed-group-2_item-1\"\n            isActive={activeItem === 'nav-mixed-group-2_item-1'}\n          >\n            Mixed 2 Link 1\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"mixed-6\"\n            to=\"#mixed-6\"\n            groupId=\"nav-mixed-group-2\"\n            itemId=\"nav-mixed-group-2_item-2\"\n            isActive={activeItem === 'nav-mixed-group-2_item-2'}\n          >\n            Mixed 2 Link 2\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"mixed-7\"\n            to=\"#mixed-7\"\n            groupId=\"nav-mixed-group-2\"\n            itemId=\"nav-mixed-group-2_item-3\"\n            isActive={activeItem === 'nav-mixed-group-2_item-3'}\n          >\n            Mixed 2 Link 3\n          </NavItem>\n        </NavExpandable>\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Mixed","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Horizontal navigation': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavItem, NavList } from '@patternfly/react-core';\n\nexport const NavHorizontalNav: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as number);\n  };\n\n  return (\n    <Nav onSelect={onSelect} variant=\"horizontal\" aria-label=\"Horizontal nav local\">\n      <NavList>\n        {Array.from({ length: 10 }).map((_value, index) => {\n          const num = index + 1;\n          return (\n            <NavItem\n              preventDefault\n              key={num}\n              itemId={num}\n              isActive={activeItem === num}\n              id={`horizontal-nav-${num}`}\n              to={`#horizontal-nav-${num}`}\n            >\n              Horizontal navigation item {num}\n            </NavItem>\n          );\n        })}\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Horizontal navigation","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Horizontal subnav': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavItem, NavList } from '@patternfly/react-core';\n\nexport const NavHorizontalSubNav: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as number);\n  };\n\n  return (\n    <Nav onSelect={onSelect} variant=\"horizontal-subnav\" aria-label=\"Horizontal subnav local\">\n      <NavList>\n        {Array.from({ length: 10 }).map((_value, index) => {\n          const num = index + 1;\n          return (\n            <NavItem\n              preventDefault\n              key={num}\n              itemId={num}\n              isActive={activeItem === num}\n              id={`horizontal-subnav-${num}`}\n              to={`#horizontal-subnav-${num}`}\n            >\n              Horizontal subnav item {num}\n            </NavItem>\n          );\n        })}\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Horizontal subnav","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Flyout': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';\n\nexport const NavFlyout: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState('nav-flyout-default-link-1');\n\n  const onSelect = (event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as string);\n  };\n\n  const onMenuSelect = (_event: any, itemId: string | number | undefined) => setActiveItem(itemId as string);\n\n  const onMenuItemClick = (event: any) => {\n    event.preventDefault();\n  };\n\n  const numFlyouts = 5;\n  const FlyoutMenu = ({ depth, children }) => (\n    <Menu key={depth} containsFlyout isNavFlyout id={`nav-flyout-menu-${depth}`} onSelect={onMenuSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>\n            Next menu\n          </MenuItem>\n          {Array.from({ length: numFlyouts - depth }).map((_value, index) => (\n            <MenuItem\n              onClick={onMenuItemClick}\n              key={`${depth}-${index}`}\n              itemId={`nav-flyout-${depth}-${index}`}\n              to={`#menu-link-${depth}-${index}`}\n              isActive={activeItem === `nav-flyout-${depth}-${index}`}\n            >\n              Menu {depth} item {index}\n            </MenuItem>\n          ))}\n          <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-2-${depth}`}>\n            Next menu\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  let curFlyout = <FlyoutMenu depth={1}>{null}</FlyoutMenu>;\n  for (let i = 2; i < numFlyouts - 1; i++) {\n    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;\n  }\n\n  return (\n    <Nav onSelect={onSelect} aria-label=\"Flyout global\">\n      <NavList>\n        <NavItem\n          preventDefault\n          id=\"nav-flyout-default-link-1\"\n          to=\"#nav-flyout-default-link-1\"\n          itemId=\"nav-flyout-default-link-1\"\n          isActive={activeItem === 'nav-flyout-default-link-1'}\n        >\n          Flyout Link 1\n        </NavItem>\n        <NavItem\n          preventDefault\n          id=\"nav-flyout-default-link-2\"\n          to=\"#nav-flyout-default-link-2\"\n          itemId=\"nav-flyout-default-link-2\"\n          isActive={activeItem === 'nav-flyout-default-link-2'}\n        >\n          Flyout Link 2\n        </NavItem>\n        <NavItem\n          preventDefault\n          flyout={curFlyout}\n          id=\"nav-flyout-default-link-3\"\n          itemId=\"nav-flyout-default-link-3\"\n          isActive={activeItem === 'nav-flyout-default-link-3'}\n        >\n          Flyout Link 3\n        </NavItem>\n        <NavItem\n          preventDefault\n          id=\"nav-flyout-default-link4\"\n          to=\"#nav-flyout-default-link4\"\n          itemId=\"nav-flyout-default-link-4\"\n          isActive={activeItem === 'nav-flyout-default-link-4'}\n        >\n          Flyout Link 4\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n};\n","title":"Flyout","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A flyout should be a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Menu`}
-        </code>
-        {` component. Press `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`space`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`right arrow`}
-        </code>
-        {` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`escape`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`left arrow`}
-        </code>
-        {` to close a flyout.`}
-      </p>
-    </Example>,
-  'Drilldown': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Nav, MenuContent, MenuItem, MenuList, DrilldownMenu, Menu } from '@patternfly/react-core';\n\ninterface MenuHeights {\n  [menuId: string]: number;\n}\n\nconst subMenuTwo: React.JSX.Element = (\n  <DrilldownMenu id=\"nav-drilldown-subMenu-2\">\n    <MenuItem itemId=\"nav-drilldown-subMenu-2-breadcrumb\" direction=\"up\">\n      SubMenu 1 - Item 1\n    </MenuItem>\n    <MenuItem itemId=\"nav-drilldown-subMenu-2_item-1\" to=\"#subMenu-2_item-1\">\n      SubMenu 2 - Item 1\n    </MenuItem>\n    <MenuItem itemId=\"nav-drilldown-subMenu-2_item-2\" to=\"#subMenu-2_item-2\">\n      SubMenu 2 - Item 2\n    </MenuItem>\n    <MenuItem itemId=\"nav-drilldown-subMenu-2_item-3\" to=\"#subMenu-2_item-3\">\n      SubMenu 2 - Item 3\n    </MenuItem>\n  </DrilldownMenu>\n);\n\nconst subMenuOne: React.JSX.Element = (\n  <DrilldownMenu id=\"nav-drilldown-subMenu-1\">\n    <MenuItem itemId=\"nav-drilldown-subMenu-1-breadcrumb\" direction=\"up\">\n      Item 1\n    </MenuItem>\n    <MenuItem\n      itemId=\"nav-drilldown-subMenu-1_item-1\"\n      description=\"SubMenu 2\"\n      direction=\"down\"\n      drilldownMenu={subMenuTwo}\n    >\n      SubMenu 1 - Item 1\n    </MenuItem>\n    <MenuItem itemId=\"nav-drilldown-subMenu-1_item-2\" to=\"#subMenu-1_item-2\">\n      SubMenu 1 - Item 2\n    </MenuItem>\n    <MenuItem itemId=\"nav-drilldown-subMenu-1_item-3\" to=\"#subMenu-1_item-3\">\n      SubMenu 1 - Item 3\n    </MenuItem>\n  </DrilldownMenu>\n);\n\nexport const NavigationDrilldown: React.FunctionComponent = () => {\n  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);\n  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);\n  const [menuHeights, setMenuHeights] = useState<MenuHeights>({});\n  const [activeMenu, setActiveMenu] = useState('nav-drilldown-rootMenu');\n\n  const onDrillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromItemId: string,\n    toItemId: string,\n    itemId: string\n  ) => {\n    setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]);\n    setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]);\n    setActiveMenu(toItemId);\n  };\n\n  const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {\n    setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));\n    setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));\n    setActiveMenu(toItemId);\n  };\n\n  const onGetMenuHeight = (menuId: string, height: number) => {\n    if (\n      (menuHeights[menuId] !== height && menuId !== 'nav-drilldown-rootMenu') ||\n      (!menuHeights[menuId] && menuId === 'nav-drilldown-rootMenu')\n    ) {\n      setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height }));\n    }\n  };\n\n  return (\n    <Nav aria-label=\"Drilldown global\">\n      <Menu\n        id=\"nav-drilldown-rootMenu\"\n        containsDrilldown\n        drilldownItemPath={drilldownPath}\n        drilledInMenus={menuDrilledIn}\n        activeMenu={activeMenu}\n        onDrillIn={onDrillIn}\n        onDrillOut={onDrillOut}\n        onGetMenuHeight={onGetMenuHeight}\n      >\n        <MenuContent menuHeight={menuHeights[activeMenu] ? `${menuHeights[activeMenu]}px` : undefined}>\n          <MenuList>\n            <MenuItem itemId=\"nav-drilldown-item-1\" direction=\"down\" description=\"SubMenu 1\" drilldownMenu={subMenuOne}>\n              Item 1\n            </MenuItem>\n            <MenuItem itemId=\"nav-drilldown-item-2\" to=\"#item-2\">\n              Item 2\n            </MenuItem>\n            <MenuItem itemId=\"nav-drilldown-item-3\" to=\"#item-3\">\n              Item 3\n            </MenuItem>\n          </MenuList>\n        </MenuContent>\n      </Menu>\n    </Nav>\n  );\n};\n","title":"Drilldown","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With icons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';\nimport CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';\nimport FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';\nimport RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';\n\nexport const NavIcons: React.FunctionComponent = () => {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {\n    setActiveItem(result.itemId as number);\n  };\n\n  return (\n    <Nav onSelect={onSelect} aria-label=\"Icon global\" ouiaId=\"IconNav\">\n      <NavList>\n        <NavItem\n          preventDefault\n          id=\"nav-icon-link1\"\n          to=\"#nav-icon-link1\"\n          itemId={0}\n          isActive={activeItem === 0}\n          icon={<CubeIcon />}\n        >\n          Link 1\n        </NavItem>\n        <NavItem\n          preventDefault\n          id=\"nav-icon-link2\"\n          to=\"#nav-icon-link2\"\n          itemId={1}\n          isActive={activeItem === 1}\n          icon={<FolderIcon />}\n        >\n          Link 2\n        </NavItem>\n        <NavItem\n          preventDefault\n          id=\"nav-icon-link3\"\n          to=\"#nav-icon-link3\"\n          itemId={2}\n          isActive={activeItem === 2}\n          icon={<CloudIcon />}\n        >\n          Link 3\n        </NavItem>\n        <NavItem\n          preventDefault\n          id=\"nav-icon-link4\"\n          to=\"#nav-icon-link4\"\n          itemId={3}\n          isActive={activeItem === 3}\n          icon={<RhUiLinkIcon />}\n        >\n          Link 4\n        </NavItem>\n        <NavExpandable title=\"Expandable\" icon={<FolderOpenIcon />} groupId=\"nav-icon-expandable\">\n          <NavItem\n            preventDefault\n            id=\"nav-icon-expandable-link1\"\n            to=\"#nav-icon-expandable-link1\"\n            itemId={4}\n            isActive={activeItem === 4}\n          >\n            Subnav link 1\n          </NavItem>\n          <NavItem\n            preventDefault\n            id=\"nav-icon-expandable-link2\"\n            to=\"#nav-icon-expandable-link2\"\n            itemId={5}\n            isActive={activeItem === 5}\n          >\n            Subnav link 2\n          </NavItem>\n        </NavExpandable>\n      </NavList>\n    </Nav>\n  );\n};\n","title":"With icons","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Default"])}
-    {React.createElement(pageData.examples["Grouped"])}
-    {React.createElement(pageData.examples["Expandable"])}
-    {React.createElement(pageData.examples["Expandable third level"])}
-    {React.createElement(pageData.examples["Mixed"])}
-    {React.createElement(pageData.examples["Horizontal navigation"])}
-    {React.createElement(pageData.examples["Horizontal subnav"])}
-    {React.createElement(pageData.examples["Flyout"])}
-    {React.createElement(pageData.examples["Drilldown"])}
-    {React.createElement(pageData.examples["With icons"])}
-    <AutoLinkHeader {...{"id":"types","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Types`}
-    </AutoLinkHeader>
-    <AutoLinkHeader {...{"id":"navselectclickhandler","headingLevel":"h3","className":"ws-title ws-h3"}}>
-      {`NavSelectClickHandler`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The NavItem `}
-      <code {...{"className":"ws-code "}}>
-        {`onClick`}
-      </code>
-      {` prop accepts the `}
-      <code {...{"className":"ws-code "}}>
-        {`NavSelectClickHandler`}
-      </code>
-      {` type, which is made up of the following argument and return types:`}
-    </p>
-    <Example {...{"code":"(\n  event: React.FormEvent<HTMLInputElement>,\n  itemId: number | string,\n  groupId: number | string,\n  to: string\n) => void;","lang":"noLive","className":""}}>
-    </Example>
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsNavigationReactDocs';
-Component.pageData = pageData;
-
-export default Component;