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

package/patternfly-docs/generated/components/toggle-group/react.js

@@ -0,0 +1,299 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import '../../../../../react-core/src/components/ToggleGroup/examples/./toggleGroup.css';
+import { useRef, useState } from 'react';
+import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+const pageData = {
+  "id": "Toggle group",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/toggle-group/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md",
+  "relPath": "packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md",
+  "propComponents": [
+    {
+      "name": "ToggleGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "areAllGroupsDisabled",
+          "type": "boolean",
+          "description": "Disable all toggle group items under this component.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the toggle group"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the toggle group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the toggle group"
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Modifies the toggle group to include compact styling.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isFill",
+          "type": "boolean",
+          "description": "Modifies the toggle group items to fill the available space.",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "ToggleGroupItem",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "required when icon is used with no supporting text"
+        },
+        {
+          "name": "buttonId",
+          "type": "string",
+          "description": "Optional id for the button within the toggle group item"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the toggle group item"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon rendered inside the toggle group item"
+        },
+        {
+          "name": "iconPosition",
+          "type": "'start' | 'end'",
+          "description": "Sets position of the icon when text is also passed in",
+          "defaultValue": "'start'"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the toggle group item is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "description": "Flag indicating if the toggle group item is selected",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, selected: boolean) => void",
+          "description": "A callback for when the toggle group item selection changes.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "text",
+          "type": "React.ReactNode",
+          "description": "Text rendered inside the toggle group item"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-toggle-group"
+  ],
+  "examples": [
+    "Single select toggle group",
+    "Multi select toggle group",
+    "With icons",
+    "With text and icons",
+    "Compact toggle group",
+    "Full-width toggle group"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  ToggleGroup,
+  ToggleGroupItem,
+  Button,
+  Stack,
+  StackItem,
+  UndoIcon,
+  RhUiCopyFillIcon,
+  ShareSquareIcon
+};
+pageData.relativeImports = "import 'react-core/src/components/ToggleGroup/examples/./toggleGroup.css';,import { useRef, useState } from 'react';"
+pageData.examples = {
+  'Single select toggle group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';\n\nexport const ToggleGroupDefaultSingle: React.FunctionComponent = () => {\n  const [isSelected, setIsSelected] = useState('');\n  const handleItemClick = (event, _isSelected: boolean) => {\n    const id = event.currentTarget.id;\n    // Allow toggling off if clicking the already selected item\n    setIsSelected(isSelected === id ? '' : id);\n  };\n  return (\n    <ToggleGroup aria-label=\"Default with single selectable\">\n      <ToggleGroupItem\n        text=\"Option 1\"\n        buttonId=\"toggle-group-single-1\"\n        isSelected={isSelected === 'toggle-group-single-1'}\n        onChange={handleItemClick}\n      />\n      <ToggleGroupItem\n        text=\"Option 2\"\n        buttonId=\"toggle-group-single-2\"\n        isSelected={isSelected === 'toggle-group-single-2'}\n        onChange={handleItemClick}\n      />\n      <ToggleGroupItem\n        text=\"Option 3\"\n        buttonId=\"toggle-group-single-3\"\n        isSelected={isSelected === 'toggle-group-single-3'}\n        onChange={handleItemClick}\n      />\n    </ToggleGroup>\n  );\n};\n","title":"Single select toggle group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A single select toggle group allows users to toggle between multiple items.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To indicate whether a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToggleGroupItem>`}
+        </code>
+        {` is selected or not, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSelected`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Multi select toggle group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';\n\nexport const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {\n  const [isSelected, setIsSelected] = useState({\n    'toggle-group-multiple-1': false,\n    'toggle-group-multiple-2': false\n  });\n  const [disableAll, setDisableAll] = useState(false);\n  const handleItemClick = (event, isSelected: boolean) => {\n    const id = event.currentTarget.id;\n    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));\n  };\n  const disableAllClick = () => {\n    setDisableAll(!disableAll);\n  };\n  return (\n    <Stack hasGutter>\n      <StackItem>\n        <ToggleGroup areAllGroupsDisabled={disableAll} aria-label=\"Default with multiple selectable\">\n          <ToggleGroupItem\n            text=\"Option 1\"\n            key={0}\n            buttonId=\"toggle-group-multiple-1\"\n            isSelected={isSelected['toggle-group-multiple-1']}\n            onChange={handleItemClick}\n          />\n          <ToggleGroupItem\n            text=\"Option 2\"\n            key={1}\n            buttonId=\"toggle-group-multiple-2\"\n            isSelected={isSelected['toggle-group-multiple-2']}\n            onChange={handleItemClick}\n          />\n          <ToggleGroupItem text=\"Option 3\" key={2} isDisabled />\n        </ToggleGroup>\n      </StackItem>\n      <StackItem>\n        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"Multi select toggle group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A multi select toggle group allows users to select multiple items at once.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.`}
+      </p>
+    </Example>,
+  'With icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';\nimport UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';\nimport RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';\nimport ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';\n\nexport const ToggleGroupIcon: React.FunctionComponent = () => {\n  const [isSelected, setIsSelected] = useState({\n    'toggle-group-icons-1': false,\n    'toggle-group-icons-2': false,\n    'toggle-group-icons-3': true\n  });\n  const handleItemClick = (event, isSelected: boolean) => {\n    const id = event.currentTarget.id;\n    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));\n  };\n  return (\n    <ToggleGroup aria-label=\"Icon variant toggle group\">\n      <ToggleGroupItem\n        icon={<RhUiCopyFillIcon />}\n        aria-label=\"copy\"\n        buttonId=\"toggle-group-icons-1\"\n        isSelected={isSelected['toggle-group-icons-1']}\n        onChange={handleItemClick}\n      />\n      <ToggleGroupItem\n        icon={<UndoIcon />}\n        aria-label=\"undo\"\n        buttonId=\"toggle-group-icons-2\"\n        isSelected={isSelected['toggle-group-icons-2']}\n        onChange={handleItemClick}\n      />\n      <ToggleGroupItem\n        icon={<ShareSquareIcon />}\n        aria-label=\"share square\"\n        buttonId=\"toggle-group-icons-3\"\n        isSelected={isSelected['toggle-group-icons-3']}\n        onChange={handleItemClick}\n      />\n    </ToggleGroup>\n  );\n};\n","title":"With icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can use a recognizable icon as a toggle item label.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To do this, pass an imported icon to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property of a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToggleGroupItem>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'With text and icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';\nimport UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';\nimport RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';\nimport ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';\n\nexport const ToggleGroupIcon: React.FunctionComponent = () => {\n  const [isSelected, setIsSelected] = useState({\n    'text-icons-1': false,\n    'text-icons-2': false,\n    'text-icons-3': true\n  });\n  const handleItemClick = (event, isSelected: boolean) => {\n    const id = event.currentTarget.id;\n    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));\n  };\n  return (\n    <>\n      <ToggleGroup aria-label=\"Text and icon toggle group with icons at start\">\n        <ToggleGroupItem\n          icon={<RhUiCopyFillIcon />}\n          text=\"Copy\"\n          buttonId=\"toggle-group-text-icons-1\"\n          isSelected={isSelected['toggle-group-text-icons-1']}\n          onChange={handleItemClick}\n        />\n        <ToggleGroupItem\n          icon={<UndoIcon />}\n          text=\"Undo\"\n          buttonId=\"toggle-group-text-icons-2\"\n          isSelected={isSelected['toggle-group-text-icons-2']}\n          onChange={handleItemClick}\n        />\n        <ToggleGroupItem\n          icon={<ShareSquareIcon />}\n          text=\"Share\"\n          buttonId=\"toggle-group-text-icons-3\"\n          isSelected={isSelected['toggle-group-text-icons-3']}\n          onChange={handleItemClick}\n        />\n      </ToggleGroup>\n      <br />\n      <ToggleGroup aria-label=\"Text and icon toggle group with icons at end\">\n        <ToggleGroupItem\n          icon={<RhUiCopyFillIcon />}\n          iconPosition=\"end\"\n          text=\"Copy\"\n          buttonId=\"toggle-group-text-icons-4\"\n          isSelected={isSelected['toggle-group-text-icons-4']}\n          onChange={handleItemClick}\n        />\n        <ToggleGroupItem\n          icon={<UndoIcon />}\n          iconPosition=\"end\"\n          text=\"Undo\"\n          buttonId=\"toggle-group-text-icons-5\"\n          isSelected={isSelected['toggle-group-text-icons-5']}\n          onChange={handleItemClick}\n        />\n        <ToggleGroupItem\n          icon={<ShareSquareIcon />}\n          iconPosition=\"end\"\n          text=\"Share\"\n          buttonId=\"toggle-group-text-icons-6\"\n          isSelected={isSelected['toggle-group-text-icons-6']}\n          onChange={handleItemClick}\n        />\n      </ToggleGroup>\n    </>\n  );\n};\n","title":"With text and icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Adding text to a toggle item with an icon helps clarify the button's function.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To do this, pass a descriptive label to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`text`}
+        </code>
+        {` property of a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToggleGroupItem>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When passing both `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`text`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` properties to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToggleGroupItem>`}
+        </code>
+        {`, you can also pass in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`iconPosition`}
+        </code>
+        {` to determine whether the icon is rendered at the start or end of the item.`}
+      </p>
+    </Example>,
+  'Compact toggle group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';\n\nexport const ToggleGroupCompact: React.FunctionComponent = () => {\n  const [isSelected, setIsSelected] = useState({\n    'toggle-group-compact-1': false,\n    'toggle-group-compact-2': false\n  });\n  const handleItemClick = (event, isSelected: boolean) => {\n    const id = event.currentTarget.id;\n    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));\n  };\n  return (\n    <ToggleGroup isCompact aria-label=\"Compact variant toggle group\">\n      <ToggleGroupItem\n        text=\"Option 1\"\n        buttonId=\"toggle-group-compact-1\"\n        isSelected={isSelected['toggle-group-compact-1']}\n        onChange={handleItemClick}\n      />\n      <ToggleGroupItem\n        text=\"Option 2\"\n        buttonId=\"toggle-group-compact-2\"\n        isSelected={isSelected['toggle-group-compact-2']}\n        onChange={handleItemClick}\n      />\n      <ToggleGroupItem text=\"Option 3\" isDisabled />\n    </ToggleGroup>\n  );\n};\n","title":"Compact toggle group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When space in a UI is limited, you can use a compact toggle group.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To apply compact styling to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToggleGroup>`}
+        </code>
+        {`, use `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isCompact`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Full-width toggle group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';\n\nexport const ToggleGroupFill: React.FunctionComponent = () => {\n  const [isSelectedBasic, setIsSelectedBasic] = useState('toggle-group-fill-1');\n  const [isSelectedMulti, setIsSelectedMulti] = useState({\n    'toggle-group-fill-multi-1': false,\n    'toggle-group-fill-multi-2': false,\n    'toggle-group-fill-multi-3': false\n  });\n  const [isSelectedDisabled, setIsSelectedDisabled] = useState('toggle-group-fill-disabled-1');\n\n  const handleItemClickBasic = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {\n    const id = event.currentTarget.id;\n    setIsSelectedBasic(id);\n  };\n\n  const handleItemClickMulti = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    isSelected: boolean\n  ) => {\n    const id = event.currentTarget.id;\n    setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));\n  };\n\n  const handleItemClickDisabled = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {\n    const id = event.currentTarget.id;\n    setIsSelectedDisabled(id);\n  };\n\n  return (\n    <>\n      <ToggleGroup isFill aria-label=\"Full width toggle group\">\n        <ToggleGroupItem\n          text=\"Option 1\"\n          buttonId=\"toggle-group-fill-1\"\n          isSelected={isSelectedBasic === 'toggle-group-fill-1'}\n          onChange={handleItemClickBasic}\n        />\n        <ToggleGroupItem\n          text=\"Option 2\"\n          buttonId=\"toggle-group-fill-2\"\n          isSelected={isSelectedBasic === 'toggle-group-fill-2'}\n          onChange={handleItemClickBasic}\n        />\n        <ToggleGroupItem\n          text=\"Option 3\"\n          buttonId=\"toggle-group-fill-3\"\n          isSelected={isSelectedBasic === 'toggle-group-fill-3'}\n          onChange={handleItemClickBasic}\n        />\n      </ToggleGroup>\n      <br />\n      <ToggleGroup isFill aria-label=\"Full width multi-select toggle group\">\n        <ToggleGroupItem\n          text=\"Option 1\"\n          buttonId=\"toggle-group-fill-multi-1\"\n          isSelected={isSelectedMulti['toggle-group-fill-multi-1']}\n          onChange={handleItemClickMulti}\n        />\n        <ToggleGroupItem\n          text=\"Option 2\"\n          buttonId=\"toggle-group-fill-multi-2\"\n          isSelected={isSelectedMulti['toggle-group-fill-multi-2']}\n          onChange={handleItemClickMulti}\n        />\n        <ToggleGroupItem\n          text=\"Option 3\"\n          buttonId=\"toggle-group-fill-multi-3\"\n          isSelected={isSelectedMulti['toggle-group-fill-multi-3']}\n          onChange={handleItemClickMulti}\n        />\n      </ToggleGroup>\n      <br />\n      <ToggleGroup isFill aria-label=\"Full width toggle group with disabled item\">\n        <ToggleGroupItem\n          text=\"Option 1\"\n          buttonId=\"toggle-group-fill-disabled-1\"\n          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-1'}\n          onChange={handleItemClickDisabled}\n        />\n        <ToggleGroupItem\n          text=\"Option 2\"\n          buttonId=\"toggle-group-fill-disabled-2\"\n          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-2'}\n          onChange={handleItemClickDisabled}\n        />\n        <ToggleGroupItem text=\"Option 3\" isDisabled />\n      </ToggleGroup>\n    </>\n  );\n};\n","title":"Full-width toggle group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To make toggle group items fill the available horizontal space, use `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isFill`}
+        </code>
+        {` on a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToggleGroup>`}
+        </code>
+        {`. The following example shows full-width toggle groups for a single-select, multi-select, and single-select with disabled item.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Single select toggle group"])}
+    {React.createElement(pageData.examples["Multi select toggle group"])}
+    {React.createElement(pageData.examples["With icons"])}
+    {React.createElement(pageData.examples["With text and icons"])}
+    {React.createElement(pageData.examples["Compact toggle group"])}
+    {React.createElement(pageData.examples["Full-width toggle group"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsToggleGroupReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/toolbar/react-demos.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportconsolelogviewertoolbardemo from './react-demos/console-log-viewer-toolbar-demo.png';
+const pageData = {
+  "id": "Toolbar",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/toolbar/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Toolbar.md",
+  "relPath": "packages/react-core/src/demos/Toolbar.md",
+  "fullscreenExamples": [
+    "Console log viewer toolbar demo"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  PauseIcon,
+  PlayIcon,
+  ExpandIcon,
+  RhMicronsExternalLinkIcon,
+  DownloadIcon,
+  RhUiSettingsFillIcon,
+  SearchIcon,
+  RhMicronsCloseIcon,
+  DashboardWrapper
+};
+pageData.examples = {
+  'Console log viewer toolbar demo': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportconsolelogviewertoolbardemo} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  MenuToggle,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption,\n  PageSection,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem,\n  ToolbarToggleGroup,\n  Tooltip,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  MenuFooter\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\nimport ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';\nimport RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';\nimport DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\nexport const ConsoleLogViewerToolbar: React.FC = () => {\n  const firstOptions = {\n    'container-sample-1': { type: 'C' },\n    'container-sample-2': { type: 'D' },\n    'container-sample-3': { type: 'E' }\n  };\n\n  const [containerExpanded, setContainerExpanded] = useState(false);\n  const [containerExpandedMobile, setContainerExpandedMobile] = useState(false);\n  const [containerSelected, setContainerSelected] = useState(Object.keys(firstOptions)[0]);\n  const [optionExpanded, setOptionExpanded] = useState(false);\n  const [optionExpandedMobile, setOptionExpandedMobile] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const [firstSwitchChecked, setFirstSwitchChecked] = useState(true);\n  const [secondSwitchChecked, setSecondSwitchChecked] = useState(false);\n  const [searchValue, setSearchValue] = useState('');\n  const [searchResultsCount, setSearchResultsCount] = useState(3);\n  const [currentSearchResult, setCurrentSearchResult] = useState(1);\n  const [externalExpanded, setExternalExpanded] = useState(false);\n  const [externalExpandedMobile, setExternalExpandedMobile] = useState(false);\n  const [downloadExpanded, setDownloadExpanded] = useState(false);\n  const [downloadExpandedMobile, setDownloadExpandedMobile] = useState(false);\n  const [mobileView, setMobileView] = useState(window.innerWidth >= 1450 ? false : true);\n\n  const onContainerToggle = () => {\n    setContainerExpanded((prevState) => !prevState);\n  };\n\n  const onContainerToggleMobile = () => {\n    setContainerExpandedMobile((prevState) => !prevState);\n  };\n\n  const onContainerSelect = (_event: React.MouseEvent | undefined, selection: string | number | undefined) => {\n    setContainerSelected(selection as string);\n    setContainerExpanded(false);\n  };\n\n  const onContainerSelectMobile = (_event: React.MouseEvent | undefined, selection: string | number | undefined) => {\n    setContainerSelected(selection as string);\n    setContainerExpandedMobile(false);\n  };\n\n  const onOptionSelect = (_event: React.MouseEvent | undefined) => {};\n\n  const onOptionSelectMobile = (_event: React.MouseEvent | undefined) => {};\n\n  const onOptionToggle = () => {\n    setOptionExpanded((prevState) => !prevState);\n  };\n\n  const onOptionToggleMobile = () => {\n    setOptionExpandedMobile((prevState) => !prevState);\n  };\n\n  const onExternalToggle = () => {\n    setExternalExpanded((prevState) => !prevState);\n  };\n\n  const onExternalToggleMobile = () => {\n    setExternalExpandedMobile((prevState) => !prevState);\n  };\n\n  const onExternalSelect = () => {\n    setExternalExpanded(false);\n  };\n\n  const onExternalSelectMobile = () => {\n    setExternalExpandedMobile(false);\n  };\n\n  const onDownloadToggle = () => {\n    setDownloadExpanded((prevState) => !prevState);\n  };\n\n  const onDownloadToggleMobile = () => {\n    setDownloadExpandedMobile((prevState) => !prevState);\n  };\n\n  const onDownloadSelect = () => {\n    setDownloadExpanded(false);\n  };\n\n  const onDownloadSelectMobile = () => {\n    setDownloadExpandedMobile(false);\n  };\n\n  const onExternalClick = (_event: React.MouseEvent<HTMLButtonElement>) => {\n    // eslint-disable-next-line no-console\n    console.log('External logs opened!');\n  };\n\n  const onDownloadClick = (_event: React.MouseEvent<HTMLButtonElement>) => {\n    // eslint-disable-next-line no-console\n    console.log('Download action clicked!');\n  };\n\n  const pauseOrStart = (_event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsPaused((prevState) => !prevState);\n  };\n\n  const handleFirstSwitchChange = () => {\n    setFirstSwitchChecked((prevState) => !prevState);\n  };\n\n  const handleSecondSwitchChange = () => {\n    setSecondSwitchChecked((prevState) => !prevState);\n  };\n\n  const onClearLogs = () => {\n    setOptionExpanded(false);\n    // eslint-disable-next-line no-console\n    console.log('Logs cleared!');\n  };\n\n  const onClearLogsMobile = () => {\n    setOptionExpandedMobile(false);\n    // eslint-disable-next-line no-console\n    console.log('Logs cleared!');\n  };\n\n  const onSearchChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setSearchValue(value);\n    setSearchResultsCount(3);\n  };\n\n  const onSearchClear = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {\n    setSearchValue('');\n    setSearchResultsCount(0);\n    setCurrentSearchResult(1);\n  };\n\n  const onSearchNext = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {\n    setCurrentSearchResult((prevState) => {\n      const newCurrentResult = prevState + 1;\n\n      return newCurrentResult <= searchResultsCount ? newCurrentResult : searchResultsCount;\n    });\n  };\n\n  const onSearchPrevious = (_event: React.SyntheticEvent<HTMLButtonElement, Event>) => {\n    setCurrentSearchResult((prevState) => {\n      const newCurrentResult = prevState - 1;\n      return newCurrentResult > 0 ? newCurrentResult : 1;\n    });\n  };\n\n  const onPageResize = (\n    _event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>,\n    { windowSize }: { windowSize: number }\n  ) => {\n    if (windowSize >= 1450) {\n      setMobileView(false);\n    } else {\n      setMobileView(true);\n    }\n  };\n\n  const externalDropdownItems = (\n    <>\n      <DropdownItem key=\"action-1\" onClick={onExternalClick}>\n        External logs 1\n      </DropdownItem>\n      <DropdownItem key=\"action-2\" onClick={onExternalClick}>\n        External logs 2\n      </DropdownItem>\n      <DropdownItem key=\"action-3\" onClick={onExternalClick}>\n        External logs 3\n      </DropdownItem>\n    </>\n  );\n\n  const downloadDropdownItems = (\n    <>\n      <DropdownItem key=\"action-4\" onClick={onDownloadClick}>\n        Current container logs\n      </DropdownItem>\n      <DropdownItem key=\"action-5\" onClick={onDownloadClick}>\n        All container logs\n      </DropdownItem>\n    </>\n  );\n\n  const optionSelectItems = (\n    <>\n      <SelectOption key=\"switch-1\" hasCheckbox isSelected={firstSwitchChecked} onClick={handleFirstSwitchChange}>\n        Display timestamp\n      </SelectOption>\n      <SelectOption key=\"switch-2\" hasCheckbox isSelected={secondSwitchChecked} onClick={handleSecondSwitchChange}>\n        Wrap lines\n      </SelectOption>\n    </>\n  );\n\n  const selectDropdownContent = (\n    <>\n      <SelectList>\n        {Object.entries(firstOptions).map(([value, { type }]) => (\n          <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>\n            <Badge key={value}>{type}</Badge>\n            {` ${value}`}\n          </SelectOption>\n        ))}\n      </SelectList>\n    </>\n  );\n\n  const clearLogsFooter = (type: string) => (\n    <MenuFooter key=\"clear-log\" onClick={type === 'mobile' ? onClearLogsMobile : onClearLogs}>\n      <Button variant=\"link\" isInline>\n        Clear logs\n      </Button>\n    </MenuFooter>\n  );\n\n  const selectToggleContent = ({ showText }: { showText: boolean }) => {\n    if (!containerSelected) {\n      return 'Select';\n    }\n    return (\n      <Fragment>\n        <Badge>{firstOptions[containerSelected].type}</Badge>\n        {showText && ` ${containerSelected}`}\n      </Fragment>\n    );\n  };\n\n  const LogsSearchInput = (\n    <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint=\"lg\">\n      <ToolbarItem>\n        <SearchInput\n          placeholder=\"Search logs\"\n          value={searchValue}\n          onChange={onSearchChange}\n          onClear={onSearchClear}\n          resultsCount={`${currentSearchResult} / ${searchResultsCount}`}\n          onNextClick={onSearchNext}\n          onPreviousClick={onSearchPrevious}\n        />\n      </ToolbarItem>\n    </ToolbarToggleGroup>\n  );\n\n  const leftAlignedItemsDesktop = (\n    <Fragment>\n      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n        <Select\n          role=\"menu\"\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              onClick={onContainerToggle}\n              isExpanded={containerExpanded}\n              style={{ width: '250px' }}\n            >\n              {selectToggleContent({ showText: true })}\n            </MenuToggle>\n          )}\n          onSelect={onContainerSelect}\n          onOpenChange={(isOpen) => setContainerExpanded(isOpen)}\n          selected={containerSelected}\n          isOpen={containerExpanded}\n        >\n          {selectDropdownContent}\n        </Select>\n      </ToolbarItem>\n      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n        <Select\n          isOpen={optionExpanded}\n          role=\"menu\"\n          onOpenChange={(isOpen) => setOptionExpanded(isOpen)}\n          onOpenChangeKeys={['Escape']}\n          onSelect={onOptionSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} isSettings>\n              Options\n            </MenuToggle>\n          )}\n        >\n          <SelectList>{optionSelectItems}</SelectList>\n          {clearLogsFooter('desktop')}\n        </Select>\n      </ToolbarItem>\n      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n        <Button\n          variant={isPaused ? 'plain' : 'link'}\n          onClick={pauseOrStart}\n          icon={isPaused ? <PlayIcon /> : <PauseIcon />}\n        >\n          {isPaused ? ` Resume Log` : ` Pause Log`}\n        </Button>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const leftAlignedItemsMobile = (\n    <Fragment>\n      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n        <Tooltip position=\"top\" content={<div>Select container</div>}>\n          <Select\n            role=\"menu\"\n            toggle={(toggleRef) => (\n              <MenuToggle ref={toggleRef} onClick={onContainerToggleMobile} isExpanded={containerExpandedMobile}>\n                {selectToggleContent({ showText: false })}\n              </MenuToggle>\n            )}\n            onSelect={onContainerSelectMobile}\n            onOpenChange={(isOpen) => setContainerExpandedMobile(isOpen)}\n            selected={containerSelected}\n            isOpen={containerExpandedMobile}\n          >\n            {selectDropdownContent}\n          </Select>\n        </Tooltip>\n      </ToolbarItem>\n      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n        <Tooltip position=\"top\" content={<div>Options</div>}>\n          <Select\n            role=\"menu\"\n            isOpen={optionExpandedMobile}\n            onOpenChange={(isOpen) => setOptionExpandedMobile(isOpen)}\n            onOpenChangeKeys={['Escape']}\n            onSelect={onOptionSelectMobile}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                isExpanded={optionExpandedMobile}\n                onClick={onOptionToggleMobile}\n                isSettings\n                aria-label=\"Options\"\n              />\n            )}\n          >\n            <SelectList>{optionSelectItems}</SelectList>\n            {clearLogsFooter('mobile')}\n          </Select>\n        </Tooltip>\n      </ToolbarItem>\n      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n        <Tooltip position=\"top\" content={<div>{isPaused ? 'Resume log' : 'Pause log'}</div>}>\n          <Button\n            variant=\"plain\"\n            onClick={pauseOrStart}\n            aria-label={isPaused ? 'Play' : 'Paused'}\n            icon={isPaused ? <PlayIcon /> : <PauseIcon />}\n          />\n        </Tooltip>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const leftAlignedItems = (\n    <Fragment>\n      {leftAlignedItemsDesktop}\n      {leftAlignedItemsMobile}\n    </Fragment>\n  );\n\n  const rightAlignedItemsDesktop = (\n    <Fragment>\n      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n        <Dropdown\n          isOpen={externalExpanded}\n          onOpenChange={(isOpen) => setExternalExpanded(isOpen)}\n          onSelect={onExternalSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={onExternalToggle}>\n              External logs\n            </MenuToggle>\n          )}\n        >\n          <DropdownList>{externalDropdownItems}</DropdownList>\n        </Dropdown>\n      </ToolbarItem>\n      <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n        <Dropdown\n          isOpen={downloadExpanded}\n          onOpenChange={(isOpen) => setDownloadExpanded(isOpen)}\n          onSelect={onDownloadSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={onDownloadToggle}>\n              Download\n            </MenuToggle>\n          )}\n        >\n          <DropdownList>{downloadDropdownItems}</DropdownList>\n        </Dropdown>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const rightAlignedItemsMobile = (\n    <Fragment>\n      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n        <Tooltip position=\"top\" content={<div>External logs</div>}>\n          <Dropdown\n            isOpen={externalExpandedMobile}\n            onOpenChange={(isOpen) => setExternalExpandedMobile(isOpen)}\n            onSelect={onExternalSelectMobile}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                isExpanded={externalExpandedMobile}\n                onClick={onExternalToggleMobile}\n                icon={<RhMicronsExternalLinkIcon />}\n                aria-label=\"External logs\"\n              />\n            )}\n          >\n            <DropdownList>{externalDropdownItems}</DropdownList>\n          </Dropdown>\n        </Tooltip>\n      </ToolbarItem>\n      <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n        <Tooltip position=\"top\" content={<div>Download</div>}>\n          <Dropdown\n            isOpen={downloadExpandedMobile}\n            onOpenChange={(isOpen) => setDownloadExpandedMobile(isOpen)}\n            onSelect={onDownloadSelectMobile}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                isExpanded={downloadExpandedMobile}\n                onClick={onDownloadToggleMobile}\n                icon={<DownloadIcon />}\n                aria-label=\"Download\"\n              />\n            )}\n          >\n            <DropdownList>{downloadDropdownItems}</DropdownList>\n          </Dropdown>\n        </Tooltip>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const rightAlignedItems = (\n    <Fragment>\n      <ToolbarItem>{LogsSearchInput}</ToolbarItem>\n      {rightAlignedItemsDesktop}\n      {rightAlignedItemsMobile}\n      <ToolbarItem>\n        <Tooltip position=\"top\" content={<div>Expand</div>}>\n          <Button variant=\"plain\" aria-label=\"expand\" icon={<ExpandIcon />} />\n        </Tooltip>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const items = (\n    <Fragment>\n      <ToolbarGroup align={{ default: 'alignStart' }}>{leftAlignedItems}</ToolbarGroup>\n      <ToolbarGroup align={{ default: 'alignEnd' }}>{rightAlignedItems}</ToolbarGroup>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>\n      <PageSection aria-label=\"Log viewer controls\">\n        <Toolbar id=\"log-viewer-toolbar\" inset={{ default: 'insetNone' }}>\n          <ToolbarContent>{items}</ToolbarContent>\n        </Toolbar>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Console log viewer toolbar demo","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This is an example of toolbar usage in log viewer.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Console log viewer toolbar demo"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsToolbarReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;