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

package/patternfly-docs/generated/components/tree-view/react.js

@@ -0,0 +1,429 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useState } from 'react';
+import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons';
+const pageData = {
+  "id": "Tree view",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/tree-view/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TreeView/examples/TreeView.md",
+  "relPath": "packages/react-core/src/components/TreeView/examples/TreeView.md",
+  "propComponents": [
+    {
+      "name": "TreeView",
+      "description": "The main tree view component.",
+      "props": [
+        {
+          "name": "activeItems",
+          "type": "TreeViewDataItem[]",
+          "description": "Active items of tree view."
+        },
+        {
+          "name": "allExpanded",
+          "type": "boolean",
+          "description": "Sets the expanded state on all tree nodes, overriding default behavior and current\ninternal state."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "A text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must\nbe passed in."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "A space separated list of element id's that sets the accessible name of the tree view list. Either\nthis or the aria-label property must be passed in."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add if not passed a parentItem property."
+        },
+        {
+          "name": "compareItems",
+          "type": "(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean",
+          "description": "Comparison function for determining active items.",
+          "defaultValue": "(item, itemToCheck) => item.id === itemToCheck.id"
+        },
+        {
+          "name": "data",
+          "type": "TreeViewDataItem[]",
+          "description": "Data of the tree view.",
+          "required": true
+        },
+        {
+          "name": "defaultAllExpanded",
+          "type": "boolean",
+          "description": "Sets the default expanded behavior.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "expandedIcon",
+          "type": "React.ReactNode",
+          "description": "Icon for all expanded node items."
+        },
+        {
+          "name": "hasAnimations",
+          "type": "boolean",
+          "description": "Flag indicating whether a tree view has animations. This will always render\nnested tree view items rather than dynamically rendering them. This prop will be removed in\nthe next breaking change release in favor of defaulting to always-rendered items."
+        },
+        {
+          "name": "hasBadges",
+          "type": "boolean",
+          "description": "Flag indicating if all nodes in the tree view should have badges.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasCheckboxes",
+          "type": "boolean",
+          "description": "Flag indicating if all nodes in the tree view should have checkboxes.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasGuides",
+          "type": "boolean",
+          "description": "Flag indicating if the tree view has guide lines.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasSelectableNodes",
+          "type": "boolean",
+          "description": "Flag indicating that tree nodes should be independently selectable, even when having\nchildren.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon for all leaf or unexpanded node items."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the tree view."
+        },
+        {
+          "name": "isMultiSelectable",
+          "type": "boolean",
+          "description": "Flag indicating whether multiple nodes can be selected in the tree view. This will also set the\naria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.\nCan only be applied to the root tree view list.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isNested",
+          "type": "boolean",
+          "description": "Flag indicating if the tree view is nested.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onCheck",
+          "type": "(event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void",
+          "description": "Callback for item checkbox selection."
+        },
+        {
+          "name": "onCollapse",
+          "type": "(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void",
+          "description": "Callback for collapsing a node with children."
+        },
+        {
+          "name": "onExpand",
+          "type": "(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void",
+          "description": "Callback for expanding a node with children."
+        },
+        {
+          "name": "onSelect",
+          "type": "(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void",
+          "description": "Callback for item selection."
+        },
+        {
+          "name": "parentItem",
+          "type": "TreeViewDataItem",
+          "description": "Internal. Parent item of a tree view list item."
+        },
+        {
+          "name": "toolbar",
+          "type": "React.ReactNode",
+          "description": "Toolbar to display above the tree view."
+        },
+        {
+          "name": "useMemo",
+          "type": "boolean",
+          "description": "Flag indicating the tree view should utilize memoization to help render large data sets.\nSetting this property requires that the activeItems property is passed an array containing\nevery node in the selected item's path."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'compact' | 'compactNoBackground'",
+          "description": "Variant presentation styles for the tree view.",
+          "defaultValue": "'default'"
+        }
+      ]
+    },
+    {
+      "name": "TreeViewDataItem",
+      "description": "Properties that make up a tree view data item. These properties should be passed in as an\nobject to one of the various tree view component properties which accept TreeViewDataItem as\na type.",
+      "props": [
+        {
+          "name": "action",
+          "type": "React.ReactNode",
+          "description": "Action of a tree view item, which can be either a button or dropdown component."
+        },
+        {
+          "name": "badgeProps",
+          "type": "any",
+          "description": "Additional properties of the tree view item badge."
+        },
+        {
+          "name": "checkProps",
+          "type": "TreeViewCheckProps",
+          "description": "Additional properties of the tree view item checkbox."
+        },
+        {
+          "name": "children",
+          "type": "TreeViewDataItem[]",
+          "description": "Child nodes of a tree view item."
+        },
+        {
+          "name": "customBadgeContent",
+          "type": "React.ReactNode",
+          "description": "Optional prop for a custom badge."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if node is expanded by default."
+        },
+        {
+          "name": "expandedIcon",
+          "type": "React.ReactNode",
+          "description": "Expanded icon of a tree view item."
+        },
+        {
+          "name": "hasBadge",
+          "type": "boolean",
+          "description": "Flag indicating if a tree view item has a badge."
+        },
+        {
+          "name": "hasCheckbox",
+          "type": "boolean",
+          "description": "Flag indicating if a tree view item has a checkbox."
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Default icon of a tree view item."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of a tree view item."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the tree view item is disabled."
+        },
+        {
+          "name": "isToggleDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the tree view item toggle is disabled."
+        },
+        {
+          "name": "name",
+          "type": "React.ReactNode",
+          "description": "Internal content of a tree view item.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Title of a tree view item. Only used in compact presentations."
+        }
+      ]
+    },
+    {
+      "name": "TreeViewSearch",
+      "description": "Renders a search input for the tree view. This sub-component should be passed into the\ntree view component's toolbar property.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the search input."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to the wrapper for the search input."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id for the search input."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Name for the search input."
+        },
+        {
+          "name": "onSearch",
+          "type": "(event: React.ChangeEvent<HTMLInputElement>) => void",
+          "description": "Callback for search input."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-tree-view"
+  ],
+  "examples": [
+    "Single selectable",
+    "Multiselectable",
+    "With separate selection and expansion",
+    "With search",
+    "With checkboxes",
+    "With icons",
+    "With unique icon per item",
+    "With badges",
+    "With custom badges",
+    "With action items",
+    "Guides",
+    "Compact",
+    "Compact, no background",
+    "With memoization"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useState,
+  FolderIcon,
+  FolderOpenIcon,
+  RhUiEllipsisVerticalFillIcon,
+  HamburgerIcon,
+  GitlabIcon,
+  GithubIcon,
+  GoogleIcon,
+  RhUiClipboardFillIcon,
+  RhUiStorageFillIcon
+};
+pageData.examples = {
+  'Single selectable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewSingleSelectable: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n  const [allExpanded, setAllExpanded] = useState<boolean>();\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n\n  const onToggle = (_event: React.MouseEvent) => {\n    setAllExpanded((prevAllExpanded) => !prevAllExpanded);\n  };\n\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example1-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example1-App1',\n          children: [\n            { name: 'Settings', id: 'example1-App1Settings' },\n            { name: 'Current', id: 'example1-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example1-App2',\n          children: [\n            { name: 'Settings', id: 'example1-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example1-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'example1-LoadApp1' },\n                { name: 'Loading App 2', id: 'example1-LoadApp2' },\n                { name: 'Loading App 3', id: 'example1-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example1-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example1-App3',\n          children: [\n            { name: 'Settings', id: 'example1-App3Settings' },\n            { name: 'Current', id: 'example1-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example1-Sources',\n      children: [\n        { name: 'Application 4', id: 'example1-App4', children: [{ name: 'Settings', id: 'example1-App4Settings' }] }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example1-Long',\n      children: [{ name: 'Application 5', id: 'example1-App5' }]\n    }\n  ];\n  return (\n    <Fragment>\n      <Button variant=\"link\" onClick={onToggle}>\n        {allExpanded && 'Collapse all'}\n        {!allExpanded && 'Expand all'}\n      </Button>\n      <TreeView\n        hasAnimations\n        aria-label=\"Tree View single selectable example\"\n        data={options}\n        activeItems={activeItems}\n        onSelect={onSelect}\n        allExpanded={allExpanded}\n      />\n    </Fragment>\n  );\n};\n","title":"Single selectable","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Multiselectable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewMultiselectable: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>([]);\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems((prevActiveItems) => [...prevActiveItems, treeViewItem]);\n    }\n  };\n\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'multiselectExample-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'multiselectExample-App1',\n          children: [\n            { name: 'Settings', id: 'multiselectExample-App1Settings' },\n            { name: 'Current', id: 'multiselectExample-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'multiselectExample-App2',\n          children: [\n            { name: 'Settings', id: 'multiselectExample-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'multiselectExample-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'multiselectExample-LoadApp1' },\n                { name: 'Loading App 2', id: 'multiselectExample-LoadApp2' },\n                { name: 'Loading App 3', id: 'multiselectExample-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'multiselectExample-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'multiselectExample-App3',\n          children: [\n            { name: 'Settings', id: 'multiselectExample-App3Settings' },\n            { name: 'Current', id: 'multiselectExample-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'multiselectExample-Sources',\n      children: [\n        {\n          name: 'Application 4',\n          id: 'multiselectExample-App4',\n          children: [{ name: 'Settings', id: 'multiselectExample-App4Settings' }]\n        }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'multiselectExample-Long',\n      children: [{ name: 'Application 5', id: 'multiselectExample-App5' }]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View multiselectable example\"\n      isMultiSelectable\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n    />\n  );\n};\n","title":"Multiselectable","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isMultiSelectable`}
+        </code>
+        {` property must be passed.`}
+      </p>
+    </Example>,
+  'With separate selection and expansion': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewSelectableNodes: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    setActiveItems([treeViewItem]);\n  };\n\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'SelNodesTreeView-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'SelNodesTreeView-App1',\n          children: [\n            { name: 'Settings', id: 'SelNodesTreeView-App1Settings' },\n            { name: 'Current', id: 'SelNodesTreeView-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'SelNodesTreeView-App2',\n          children: [\n            { name: 'Settings', id: 'SelNodesTreeView-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'SelNodesTreeView-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'SelNodesTreeView-LoadApp1' },\n                { name: 'Loading App 2', id: 'SelNodesTreeView-LoadApp2' },\n                { name: 'Loading App 3', id: 'SelNodesTreeView-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'SelNodesTreeView-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'SelNodesTreeView-App3',\n          children: [\n            { name: 'Settings', id: 'SelNodesTreeView-App3Settings' },\n            { name: 'Current', id: 'SelNodesTreeView-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'SelNodesTreeView-Sources',\n      children: [\n        {\n          name: 'Application 4',\n          id: 'SelNodesTreeView-App4',\n          children: [{ name: 'Settings', id: 'SelNodesTreeView-App4Settings' }]\n        }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'SelNodesTreeView-Long',\n      children: [{ name: 'Application 5', id: 'SelNodesTreeView-App5' }]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View separate selection and expansion example\"\n      hasSelectableNodes\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n    />\n  );\n};\n","title":"With separate selection and expansion","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hasSelectableNodes`}
+        </code>
+        {` modifier will separate the expansion and selection behaviors, allowing a parent node to be selected or deselected without toggling its expansion.`}
+      </p>
+    </Example>,
+  'With search': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem,\n  TreeView,\n  TreeViewDataItem,\n  TreeViewSearch\n} from '@patternfly/react-core';\nexport const TreeViewWithSearch: React.FunctionComponent = () => {\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example2-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example2-App1',\n          children: [\n            { name: 'Settings', id: 'example2-App1Settings' },\n            { name: 'Current', id: 'example2-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example2-App2',\n          children: [\n            { name: 'Settings', id: 'example2-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example2-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'example2-LoadApp1' },\n                { name: 'Loading App 2', id: 'example2-LoadApp2' },\n                { name: 'Loading App 3', id: 'example2-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example2-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example2-App3',\n          children: [\n            { name: 'Settings', id: 'example2-App3Settings' },\n            { name: 'Current', id: 'example2-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example2-Sources',\n      children: [\n        {\n          name: 'Application 4',\n          id: 'example2-App4',\n          children: [{ name: 'Settingexample2-s', id: 'example2-App4Settings' }]\n        }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example2-Long',\n      children: [{ name: 'Application 5', id: 'example2-App5' }]\n    }\n  ];\n\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n  const [filteredItems, setFilteredItems] = useState(options);\n  const [isFiltered, setIsFiltered] = useState(false);\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n\n  const onSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const input = event.target.value;\n    if (input === '') {\n      setFilteredItems(options);\n      setIsFiltered(false);\n    } else {\n      const filtered = options.map((opt) => Object.assign({}, opt)).filter((item) => filterItems(item, input));\n      setFilteredItems(filtered);\n      setIsFiltered(true);\n    }\n  };\n  const filterItems = (item, input) => {\n    if (item.name.toLowerCase().includes(input.toLowerCase())) {\n      return true;\n    }\n    if (item.children) {\n      return (\n        (item.children = item.children\n          .map((opt) => Object.assign({}, opt))\n          .filter((child) => filterItems(child, input))).length > 0\n      );\n    }\n  };\n  const toolbar = (\n    <Toolbar style={{ padding: 0 }}>\n      <ToolbarContent style={{ padding: 0 }}>\n        <ToolbarItem>\n          <TreeViewSearch onSearch={onSearch} id=\"input-search\" name=\"search-input\" aria-label=\"Search input example\" />\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with search example\"\n      data={filteredItems}\n      activeItems={activeItems}\n      onSelect={onSelect}\n      allExpanded={isFiltered}\n      toolbar={toolbar}\n    />\n  );\n};\n","title":"With search","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.`}
+      </p>
+    </Example>,
+  'With checkboxes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewWithCheckboxes: React.FunctionComponent = () => {\n  const [checkedItems, setCheckedItems] = useState<TreeViewDataItem[]>([]);\n\n  useEffect(() => {\n    // eslint-disable-next-line no-console\n    console.log('Checked items: ', checkedItems);\n  }, [checkedItems]);\n\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example3-AppLaunch',\n      checkProps: { 'aria-label': 'app-launcher-check', checked: false },\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example3-App1',\n          checkProps: { checked: false },\n          children: [\n            {\n              name: 'Settings',\n              id: 'example3-App1Settings',\n              checkProps: { checked: false }\n            },\n            {\n              name: 'Current',\n              id: 'example3-App1Current',\n              checkProps: { checked: false }\n            }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example3-App2',\n          checkProps: { checked: false },\n          children: [\n            {\n              name: 'Settings',\n              id: 'example3-App2Settings',\n              checkProps: { checked: false }\n            },\n            {\n              name: 'Loader',\n              id: 'example3-App2Loader',\n              checkProps: { checked: false },\n              children: [\n                {\n                  name: 'Loading App 1',\n                  id: 'example3-LoadApp1',\n                  checkProps: { checked: false }\n                },\n                {\n                  name: 'Loading App 2',\n                  id: 'example3-LoadApp2',\n                  checkProps: { checked: false }\n                },\n                {\n                  name: 'Loading App 3',\n                  id: 'example3-LoadApp3',\n                  checkProps: { checked: false }\n                }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example3-Cost',\n      checkProps: { 'aria-label': 'cost-check', checked: false },\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example3-App3',\n          checkProps: { 'aria-label': 'app-3-check', checked: false },\n          children: [\n            {\n              name: 'Settings',\n              id: 'example3-App3Settings',\n              checkProps: { 'aria-label': 'app-3-settings-check', checked: false }\n            },\n            {\n              name: 'Current',\n              id: 'example3-App3Current',\n              checkProps: { 'aria-label': 'app-3-current-check', checked: false }\n            }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example3-Sources',\n      checkProps: { 'aria-label': 'sources-check', checked: false },\n      children: [\n        {\n          name: 'Application 4',\n          id: 'example3-App4',\n          checkProps: { 'aria-label': 'app-4-check', checked: false },\n          children: [\n            {\n              name: 'Settings',\n              id: 'example3-App4Settings',\n              checkProps: { 'aria-label': 'app-4-settings-check', checked: false }\n            }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example3-Long',\n      checkProps: { 'aria-label': 'long-check', checked: false },\n      children: [\n        { name: 'Application 5', id: 'example3-App5', checkProps: { 'aria-label': 'app-5-check', checked: false } }\n      ]\n    }\n  ];\n\n  const onCheck = (event: React.ChangeEvent, treeViewItem: TreeViewDataItem) => {\n    const checked = (event.target as HTMLInputElement).checked;\n\n    const checkedItemTree = options\n      .map((opt) => Object.assign({}, opt))\n      .filter((item) => filterItems(item, treeViewItem));\n    const flatCheckedItems = flattenTree(checkedItemTree);\n\n    setCheckedItems((prevCheckedItems) =>\n      checked\n        ? prevCheckedItems.concat(flatCheckedItems.filter((item) => !checkedItems.some((i) => i.id === item.id)))\n        : prevCheckedItems.filter((item) => !flatCheckedItems.some((i) => i.id === item.id))\n    );\n  };\n\n  // Helper functions\n  const isChecked = (dataItem: TreeViewDataItem) => checkedItems.some((item) => item.id === dataItem.id);\n  const areAllDescendantsChecked = (dataItem: TreeViewDataItem) =>\n    dataItem.children ? dataItem.children.every((child) => areAllDescendantsChecked(child)) : isChecked(dataItem);\n  const areSomeDescendantsChecked = (dataItem: TreeViewDataItem) =>\n    dataItem.children ? dataItem.children.some((child) => areSomeDescendantsChecked(child)) : isChecked(dataItem);\n\n  const flattenTree = (tree: TreeViewDataItem[]) => {\n    let result: TreeViewDataItem[] = [];\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  const mapTree = (item: TreeViewDataItem) => {\n    const hasCheck = areAllDescendantsChecked(item);\n    // Reset checked properties to be updated\n    if (item.checkProps) {\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((child) => mapTree(child))\n        };\n      }\n    }\n    return item;\n  };\n\n  const filterItems = (item: TreeViewDataItem, checkedItem: TreeViewDataItem) => {\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  const mapped = options.map((item) => mapTree(item));\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with checkboxes example\"\n      data={mapped}\n      onCheck={onCheck}\n      hasCheckboxes\n    />\n  );\n};\n","title":"With checkboxes","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\nimport FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';\nimport FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';\n\nexport const TreeViewWithIcons: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example4-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example4-App1',\n          children: [\n            { name: 'Settings', id: 'example4-App1Settings' },\n            { name: 'Current', id: 'example4-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example4-App2',\n          children: [\n            { name: 'Settings', id: 'example4-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example4-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'example4-LoadApp1' },\n                { name: 'Loading App 2', id: 'example4-LoadApp2' },\n                { name: 'Loading App 3', id: 'example4-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example4-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example4-App3',\n          children: [\n            { name: 'Settings', id: 'example4-App3Settings' },\n            { name: 'Current', id: 'example4-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example4-Sources',\n      children: [\n        { name: 'Application 4', id: 'example4-App4', children: [{ name: 'Settings', id: 'example4-App4Settings' }] }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example4-Long',\n      children: [{ name: 'Application 5', id: 'example4-App5' }]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with icons example\"\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n      icon={<FolderIcon />}\n      expandedIcon={<FolderOpenIcon />}\n    />\n  );\n};\n","title":"With icons","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With unique icon per item': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\nimport GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';\nimport GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';\nimport GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';\n\nexport const TreeViewWithIconPerItem: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n  const options: TreeViewDataItem[] = [\n    {\n      name: 'Github accounts',\n      id: 'iconPerItem-Github',\n      icon: <GithubIcon />,\n      children: [\n        {\n          name: 'Account 1',\n          id: 'iconPerItem-Acc1'\n        },\n        {\n          name: 'Account 2',\n          id: 'iconPerItem-Acc2'\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Gitlab accounts',\n      id: 'iconPerItem-Gitlab',\n      icon: <GitlabIcon />,\n      children: [\n        {\n          name: 'Account 3',\n          id: 'iconPerItem-Acc3'\n        }\n      ]\n    },\n    {\n      name: 'Google accounts',\n      id: 'iconPerItem-Google',\n      icon: <GoogleIcon />,\n      children: [\n        {\n          name: 'Account 4',\n          id: 'iconPerItem-Acc4'\n        }\n      ]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with unique icon per item example\"\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n    />\n  );\n};\n","title":"With unique icon per item","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With badges': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewBadges: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example5-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example5-App1',\n          children: [\n            { name: 'Settings', id: 'example5-App1Settings' },\n            { name: 'Current', id: 'example5-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example5-App2',\n          children: [\n            { name: 'Settings', id: 'example5-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example5-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'example5-LoadApp1' },\n                { name: 'Loading App 2', id: 'example5-LoadApp2' },\n                { name: 'Loading App 3', id: 'example5-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example5-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example5-App3',\n          children: [\n            { name: 'Settings', id: 'example5-App3Settings' },\n            { name: 'Current', id: 'example5-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example5-Sources',\n      children: [\n        {\n          name: 'Application 4',\n          id: 'example5-App4',\n          children: [{ name: 'Settings', id: 'example5-App4Settings' }]\n        }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example5-Long',\n      children: [{ name: 'Application 5', id: 'example5-App5' }]\n    }\n  ];\n\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with badges example\"\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n      hasBadges\n    />\n  );\n};\n","title":"With badges","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With custom badges': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewCustomBadges: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example6-AppLaunch',\n      customBadgeContent: '2 applications',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example6-App1',\n          customBadgeContent: '2 children',\n          children: [\n            { name: 'Settings', id: 'example6-App1Settings' },\n            { name: 'Current', id: 'example6-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example6-App2',\n          customBadgeContent: '2 children',\n          children: [\n            { name: 'Settings', id: 'example6-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example6-App2Loader',\n              customBadgeContent: '3 loading apps',\n              children: [\n                { name: 'Loading app 1', id: 'example6-LoadApp1' },\n                { name: 'Loading app 2', id: 'example6-LoadApp2' },\n                { name: 'Loading app 3', id: 'example6-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example6-Cost',\n      customBadgeContent: '1 applications',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example6-App3',\n          customBadgeContent: '2 children',\n          children: [\n            { name: 'Settings', id: 'example6-App3Settings' },\n            { name: 'Current', id: 'example6-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example6-Sources',\n      customBadgeContent: '1 source',\n      children: [\n        {\n          name: 'Application 4',\n          id: 'example6-App4',\n          customBadgeContent: '1 child',\n          children: [{ name: 'Settings', id: 'example6-App4Settings' }]\n        }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example6-Long',\n      customBadgeContent: '1 application',\n      children: [{ name: 'Application 5', id: 'example6-App5' }]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with custom badges example\"\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n      hasBadges\n    />\n  );\n};\n","title":"With custom badges","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With action items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  TreeView,\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  TreeViewDataItem\n} from '@patternfly/react-core';\nimport RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';\nimport RhUiStorageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const TreeViewWithActionItems: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    // Ignore folders for selection\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems([treeViewItem]);\n    }\n  };\n\n  const onToggle = () => {\n    setIsOpen((prevIsOpen) => !prevIsOpen);\n  };\n\n  const onAppLaunchSelect = () => {\n    setIsOpen((prevIsOpen) => !prevIsOpen);\n  };\n\n  const options = [\n    {\n      name: 'Application launcher',\n      id: 'example7-AppLaunch',\n      action: (\n        <Dropdown\n          onSelect={onAppLaunchSelect}\n          isOpen={isOpen}\n          onOpenChange={(isOpen) => setIsOpen(isOpen)}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              isExpanded={isOpen}\n              onClick={onToggle}\n              variant=\"plain\"\n              aria-label=\"Tree view with actions example kebab toggle\"\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>\n            <DropdownItem>Action</DropdownItem>\n            <DropdownItem\n              to=\"#default-link2\"\n              // Prevent the default onClick functionality for example purposes\n              onClick={(ev) => ev.preventDefault()}\n            >\n              Link\n            </DropdownItem>\n            <DropdownItem isDisabled>Disabled Action</DropdownItem>\n            <DropdownItem isDisabled to=\"#default-link4\">\n              Disabled Link\n            </DropdownItem>\n          </DropdownList>\n        </Dropdown>\n      ),\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example7-App1',\n          action: <Button variant=\"plain\" aria-label=\"Launch app 1\" icon={<RhUiClipboardFillIcon />} />,\n          actionProps: {\n            'aria-label': 'Launch app 1'\n          },\n          children: [\n            { name: 'Settings', id: 'example7-App1Settings' },\n            { name: 'Current', id: 'example7-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example7-App2',\n          action: <Button variant=\"plain\" aria-label=\"Launch app 2\" icon={<RhUiStorageFillIcon />} />,\n          children: [\n            { name: 'Settings', id: 'example7-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example7-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'example7-LoadApp1' },\n                { name: 'Loading App 2', id: 'example7-LoadApp2' },\n                { name: 'Loading App 3', id: 'example7-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example7-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example7-App3',\n          children: [\n            { name: 'Settings', id: 'example7-App3Settings' },\n            { name: 'Current', id: 'example7-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example7-Sources',\n      children: [\n        { name: 'Application 4', id: 'example7-App4', children: [{ name: 'Settings', id: 'example7-App4Settings' }] }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example7-Long',\n      children: [{ name: 'Application 5', id: 'example7-App5' }]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with actions example\"\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n    />\n  );\n};\n","title":"With action items","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Guides': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const GuidesTreeView: React.FunctionComponent = () => {\n  const options: TreeViewDataItem[] = [\n    {\n      name: 'Application launcher',\n      id: 'example8-AppLaunch',\n      children: [\n        {\n          name: 'Application 1',\n          id: 'example8-App1',\n          children: [\n            { name: 'Settings', id: 'example8-App1Settings' },\n            { name: 'Current', id: 'example8-App1Current' }\n          ]\n        },\n        {\n          name: 'Application 2',\n          id: 'example8-App2',\n          children: [\n            { name: 'Settings', id: 'example8-App2Settings' },\n            {\n              name: 'Loader',\n              id: 'example8-App2Loader',\n              children: [\n                { name: 'Loading App 1', id: 'example8-LoadApp1' },\n                { name: 'Loading App 2', id: 'example8-LoadApp2' },\n                { name: 'Loading App 3', id: 'example8-LoadApp3' }\n              ]\n            }\n          ]\n        }\n      ],\n      defaultExpanded: true\n    },\n    {\n      name: 'Cost management',\n      id: 'example8-Cost',\n      children: [\n        {\n          name: 'Application 3',\n          id: 'example8-App3',\n          children: [\n            { name: 'Settings', id: 'example8-App3Settings' },\n            { name: 'Current', id: 'example8-App3Current' }\n          ]\n        }\n      ]\n    },\n    {\n      name: 'Sources',\n      id: 'example8-Sources',\n      children: [\n        { name: 'Application 4', id: 'example8-App4', children: [{ name: 'Settings', id: 'example8-App4Settings' }] }\n      ]\n    },\n    {\n      name: 'Really really really long folder name that overflows the container it is in',\n      id: 'example8-Long',\n      children: [{ name: 'Application 5', id: 'example8-App5' }]\n    }\n  ];\n  return <TreeView hasAnimations aria-label=\"Tree View guides example\" data={options} hasGuides={true} />;\n};\n","title":"Guides","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Compact': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewCompact: React.FunctionComponent = () => {\n  const options: TreeViewDataItem[] = [\n    {\n      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',\n      title: 'apiVersion',\n      id: 'example9-apiVersion'\n    },\n    {\n      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',\n      title: 'kind',\n      id: 'example9-kind'\n    },\n    {\n      name: 'Standard metadata object',\n      title: 'metadata',\n      id: 'example9-metadata'\n    },\n    {\n      name: 'Standard metadata object',\n      title: 'spec',\n      id: 'example9-spec',\n      children: [\n        {\n          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',\n          title: 'minReadySeconds',\n          id: 'example9-minReadySeconds'\n        },\n        {\n          name: 'Indicates that the deployment is paused',\n          title: 'paused',\n          id: 'example9-paused'\n        },\n        {\n          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',\n          title: 'progressDeadlineSeconds',\n          id: 'example9-progressDeadlineSeconds',\n          children: [\n            {\n              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',\n              title: 'revisionHistoryLimit',\n              id: 'example9-revisionHistoryLimit',\n              children: [\n                {\n                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is \"key\", the operator is \"In\" and the values array contains only \"value\". The requirements are ANDed.',\n                  title: 'matchLabels',\n                  id: 'example9-matchLabels'\n                }\n              ]\n            }\n          ]\n        }\n      ]\n    }\n  ];\n  return <TreeView hasAnimations aria-label=\"Tree View compact example\" data={options} variant=\"compact\" />;\n};\n","title":"Compact","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Compact, no background': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TreeView, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewCompactNoBackground: React.FunctionComponent = () => {\n  const options: TreeViewDataItem[] = [\n    {\n      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',\n      title: 'apiVersion',\n      id: 'example10-apiVersion'\n    },\n    {\n      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',\n      title: 'kind',\n      id: 'example10-kind'\n    },\n    {\n      name: 'Standard metadata object',\n      title: 'metadata',\n      id: 'example10-metadata'\n    },\n    {\n      name: 'Standard metadata object',\n      title: 'spec',\n      id: 'example10-spec',\n      children: [\n        {\n          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',\n          title: 'minReadySeconds',\n          id: 'example10-minReadySeconds'\n        },\n        {\n          name: 'Indicates that the deployment is paused',\n          title: 'paused',\n          id: 'example10-paused'\n        },\n        {\n          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',\n          title: 'progressDeadlineSeconds',\n          id: 'example10-progressDeadlineSeconds',\n          children: [\n            {\n              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',\n              title: 'revisionHistoryLimit',\n              id: 'example10-revisionHistoryLimit',\n              children: [\n                {\n                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is \"key\", the operator is \"In\" and the values array contains only \"value\". The requirements are ANDed.',\n                  title: 'matchLabels',\n                  id: 'example10-matchLabels'\n                }\n              ]\n            }\n          ]\n        }\n      ]\n    }\n  ];\n  return (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View compact no background example\"\n      data={options}\n      variant=\"compactNoBackground\"\n    />\n  );\n};\n","title":"Compact, no background","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With memoization': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';\n\nexport const TreeViewWithMemoization: React.FunctionComponent = () => {\n  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();\n  const [allExpanded, setAllExpanded] = useState(false);\n\n  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {\n    const filtered: TreeViewDataItem[] = [];\n    options.forEach((item) => filterItems(item, treeViewItem.id, filtered));\n    if (treeViewItem && !treeViewItem.children) {\n      setActiveItems(filtered);\n    }\n  };\n\n  const onToggle = (_event: React.MouseEvent) => {\n    setAllExpanded((prevAllExpanded) => !prevAllExpanded);\n  };\n\n  const filterItems = (item: TreeViewDataItem, input: string | undefined, list: TreeViewDataItem[]) => {\n    if (item.children) {\n      let childContained = false;\n      item.children.forEach((child) => {\n        if (childContained) {\n          filterItems(child, input, list);\n        } else {\n          childContained = filterItems(child, input, list);\n        }\n      });\n      if (childContained) {\n        list.push(item);\n      }\n    }\n\n    if (item.id === input) {\n      list.push(item);\n      return true;\n    } else {\n      return false;\n    }\n  };\n\n  const options: TreeViewDataItem[] = [];\n  for (let i = 1; i <= 20; i++) {\n    const childNum = 5;\n    const childOptions: TreeViewDataItem[] = [];\n    for (let j = 1; j <= childNum; j++) {\n      childOptions.push({ name: 'Child ' + j, id: `Option${i} - Child${j}` });\n    }\n    options.push({ name: 'Option ' + i, id: i.toString(), children: childOptions });\n  }\n  const tree = (\n    <TreeView\n      hasAnimations\n      aria-label=\"Tree View with memoization example\"\n      data={options}\n      activeItems={activeItems}\n      onSelect={onSelect}\n      allExpanded={allExpanded}\n      useMemo\n    />\n  );\n\n  return (\n    <Fragment>\n      <Button variant=\"link\" onClick={onToggle}>\n        {allExpanded && 'Collapse all'}\n        {!allExpanded && 'Expand all'}\n      </Button>\n      {tree}\n    </Fragment>\n  );\n};\n","title":"With memoization","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Turning on memoization with the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`useMemo`}
+        </code>
+        {` property helps prevent unnecessary re-renders for large data sets. With this flag active, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`activeItems`}
+        </code>
+        {` must pass in an array of nodes along the selected item's path to update properly.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Single selectable"])}
+    {React.createElement(pageData.examples["Multiselectable"])}
+    {React.createElement(pageData.examples["With separate selection and expansion"])}
+    {React.createElement(pageData.examples["With search"])}
+    {React.createElement(pageData.examples["With checkboxes"])}
+    {React.createElement(pageData.examples["With icons"])}
+    {React.createElement(pageData.examples["With unique icon per item"])}
+    {React.createElement(pageData.examples["With badges"])}
+    {React.createElement(pageData.examples["With custom badges"])}
+    {React.createElement(pageData.examples["With action items"])}
+    {React.createElement(pageData.examples["Guides"])}
+    {React.createElement(pageData.examples["Compact"])}
+    {React.createElement(pageData.examples["Compact, no background"])}
+    {React.createElement(pageData.examples["With memoization"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTreeViewReactDocs';
+Component.pageData = pageData;
+
+export default Component;