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

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

@@ -0,0 +1,248 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+
+const pageData = {
+  "id": "Content",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/content/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Content/examples/Content.md",
+  "relPath": "packages/react-core/src/components/Content/examples/Content.md",
+  "propComponents": [
+    {
+      "name": "Content",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Children rendered within the Content."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Content.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "| 'h1'\n| 'h2'\n| 'h3'\n| 'h4'\n| 'h5'\n| 'h6'\n| 'p'\n| 'a'\n| 'small'\n| 'blockquote'\n| 'pre'\n| 'hr'\n| 'ul'\n| 'ol'\n| 'dl'\n| 'li'\n| 'dt'\n| 'dd'",
+          "description": "The content component. If none provided, it will be a 'div' and styling will be applied to all its child components."
+        },
+        {
+          "name": "isEditorial",
+          "type": "boolean",
+          "description": "Flag to indicate the content has editorial styling. This styling increases the font size of body text and small text by one tier, increasing body text to large and small text to the previous body text size.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isPlainList",
+          "type": "boolean",
+          "description": "Modifies the list (ul, ol and dl components) to have plain styling.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isVisitedLink",
+          "type": "boolean",
+          "description": "Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
+          "defaultValue": "true"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-content"
+  ],
+  "examples": [
+    "Content as a wrapper",
+    "Headings",
+    "Body",
+    "Unordered list",
+    "Ordered list",
+    "Plain list",
+    "Description list",
+    "Link and visited link",
+    "Editorial content"
+  ]
+};
+pageData.examples = {
+  'Content as a wrapper': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentWrapper: React.FunctionComponent = () => (\n  <Content>\n    <Content component={ContentVariants.p}>\n      Content with a component of type \"p\" still renders the same when wrapped with a Content.\n    </Content>\n    <p>If located within a wrapping Content, html elements are styled as well!</p>\n  </Content>\n);\n","title":"Content as a wrapper","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Headings': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentHeadings: React.FunctionComponent = () => (\n  <>\n    <Content component={ContentVariants.h1}>Hello World</Content>\n    <Content component={ContentVariants.h2}>Second level</Content>\n    <Content component={ContentVariants.h3}>Third level</Content>\n    <Content component={ContentVariants.h4}>Fourth level</Content>\n    <Content component={ContentVariants.h5}>Fifth level</Content>\n    <Content component={ContentVariants.h6}>Sixth level</Content>\n  </>\n);\n","title":"Headings","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Body': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentBody: React.FunctionComponent = () => (\n  <>\n    <Content component={ContentVariants.p}>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla\n      nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel\n      erat vel, interdum mattis neque. Sub works as well!\n    </Content>\n    <Content component={ContentVariants.p}>\n      Quisque ante lacus, malesuada ac auctor vitae, congue{' '}\n      <Content component={ContentVariants.a} href=\"#\">\n        non ante\n      </Content>\n      . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.\n    </Content>\n    <Content component={ContentVariants.blockquote}>\n      Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet\n      turpis.\n    </Content>\n    <Content component={ContentVariants.small}>\n      Sometimes you need small text to display things like date created\n    </Content>\n  </>\n);\n","title":"Body","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Unordered list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentUnorderedList: React.FunctionComponent = () => (\n  <Content component={ContentVariants.ul}>\n    <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>\n    <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>\n    <Content component={ContentVariants.li}>\n      Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.\n      <Content component={ContentVariants.ul}>\n        <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>\n        <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>\n      </Content>\n    </Content>\n    <Content component={ContentVariants.li}>Ut non enim metus.</Content>\n  </Content>\n);\n","title":"Unordered list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Ordered list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentOrderedList: React.FunctionComponent = () => (\n  <Content component={ContentVariants.ol}>\n    <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content>\n    <Content component={ContentVariants.li}>Cras gravida arcu at diam gravida gravida.</Content>\n    <Content component={ContentVariants.li}>Integer in volutpat libero.</Content>\n    <Content component={ContentVariants.li}>Donec a diam tellus.</Content>\n    <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content>\n    <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>\n    <Content component={ContentVariants.li}>Vivamus maximus ultricies pulvinar.</Content>\n  </Content>\n);\n","title":"Ordered list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Plain list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentPlainList: React.FunctionComponent = () => (\n  <>\n    <Content component={ContentVariants.h3}>Plain unordered list</Content>\n    <Content component={ContentVariants.ul} isPlainList>\n      <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>\n      <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>\n      <Content component={ContentVariants.li}>\n        Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.\n      </Content>\n      <Content component={ContentVariants.li}>Ut non enim metus.</Content>\n    </Content>\n    <Content component={ContentVariants.h3}>Plain ordered list</Content>\n    <Content component={ContentVariants.ol} isPlainList>\n      <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content>\n      <Content component={ContentVariants.li}>\n        {' '}\n        component={ContentVariants.li}Cras gravida arcu at diam gravida gravida.\n      </Content>\n      <Content component={ContentVariants.li}>Integer in volutpat libero.</Content>\n      <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content>\n      <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>\n      <Content component={ContentVariants.li}>Vivamus maximus ultricies pulvinar.</Content>\n    </Content>\n  </>\n);\n","title":"Plain list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Description list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentDescriptionList: React.FunctionComponent = () => (\n  <Content component={ContentVariants.dl}>\n    <Content component={ContentVariants.dt}>Web</Content>\n    <Content component={ContentVariants.dd}>The part of the Internet that contains websites and web pages</Content>\n    <Content component={ContentVariants.dt}>HTML</Content>\n    <Content component={ContentVariants.dd}>A markup language for creating web pages</Content>\n    <Content component={ContentVariants.dt}>CSS</Content>\n    <Content component={ContentVariants.dd}>A technology to make HTML look better</Content>\n  </Content>\n);\n","title":"Description list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Link and visited link': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentVisited: React.FunctionComponent = () => (\n  <>\n    <Content>\n      <Content component={ContentVariants.h3}>Link example</Content>\n      <Content component={ContentVariants.p}>\n        <Content component={ContentVariants.a} isVisitedLink href=\"#\">\n          Click to visit link\n        </Content>\n      </Content>\n    </Content>\n    <br />\n    <Content isVisitedLink>\n      <Content component={ContentVariants.h3}>Link content example</Content>\n      <Content component={ContentVariants.p}>\n        <Content component={ContentVariants.a} href=\"#\">\n          content link 1\n        </Content>\n      </Content>\n      <Content component={ContentVariants.p}>\n        <Content component={ContentVariants.a} href=\"#\">\n          content link 2\n        </Content>\n      </Content>\n      <Content component={ContentVariants.p}>\n        <Content component={ContentVariants.a} href=\"#\">\n          content link 3\n        </Content>\n      </Content>\n    </Content>\n  </>\n);\n","title":"Link and visited link","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Editorial content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Content, ContentVariants } from '@patternfly/react-core';\n\nexport const ContentEditorial: React.FunctionComponent = () => (\n  <>\n    <Content component={ContentVariants.h1} isEditorial>\n      Example of editorial content via components\n    </Content>\n    <Content component={ContentVariants.p} isEditorial>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla\n      nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel\n      erat vel, interdum mattis neque. Sub works as well!\n    </Content>\n    <br />\n    <Content isEditorial>\n      <h1>Example of editorial content via wrapper</h1>\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla\n        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel\n        erat vel, interdum mattis neque. Sub works as well!\n      </p>\n    </Content>\n  </>\n);\n","title":"Editorial content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Editorial styling increases the font size of body text and small text by 1 tier, where body text becomes "lg" and small text becomes "md". To applying editorial styling, use `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isEditorial`}
+        </code>
+        {`.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {` component allows you to establish a block of HTML content and apply simple, built-in styling. `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {` can be used for any element supported by the `}
+      <code {...{"className":"ws-code "}}>
+        {`component`}
+      </code>
+      {` property (including `}
+      <code {...{"className":"ws-code "}}>
+        {`h1`}
+      </code>
+      {` through `}
+      <code {...{"className":"ws-code "}}>
+        {`h6`}
+      </code>
+      {`, `}
+      <code {...{"className":"ws-code "}}>
+        {`hr`}
+      </code>
+      {`, `}
+      <code {...{"className":"ws-code "}}>
+        {`p`}
+      </code>
+      {`, `}
+      <code {...{"className":"ws-code "}}>
+        {`a`}
+      </code>
+      {`, `}
+      <code {...{"className":"ws-code "}}>
+        {`small`}
+      </code>
+      {`, `}
+      <code {...{"className":"ws-code "}}>
+        {`blockquote`}
+      </code>
+      {`, and `}
+      <code {...{"className":"ws-code "}}>
+        {`pre`}
+      </code>
+      {`).`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`You cannot nest other components within `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {` component's properties to achieve the same results.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`For example, to create a level 1 heading, you should pass `}
+      <code {...{"className":"ws-code "}}>
+        {`component="h1"`}
+      </code>
+      {` to `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {`, instead of nesting a `}
+      <code {...{"className":"ws-code "}}>
+        {`<Title>`}
+      </code>
+      {` component within `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {`. Similarly, when you need to add a divider to a page, you should utilize the `}
+      <code {...{"className":"ws-code "}}>
+        {`hr`}
+      </code>
+      {` property of `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {` (which is styled as a divider), rather than using a separate `}
+      <code {...{"className":"ws-code "}}>
+        {`<Divider>`}
+      </code>
+      {` component.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`HTML elements wrapped by `}
+      <code {...{"className":"ws-code "}}>
+        {`<Content>`}
+      </code>
+      {` are styled by the content component.`}
+    </p>
+    {React.createElement(pageData.examples["Content as a wrapper"])}
+    {React.createElement(pageData.examples["Headings"])}
+    {React.createElement(pageData.examples["Body"])}
+    {React.createElement(pageData.examples["Unordered list"])}
+    {React.createElement(pageData.examples["Ordered list"])}
+    {React.createElement(pageData.examples["Plain list"])}
+    {React.createElement(pageData.examples["Description list"])}
+    {React.createElement(pageData.examples["Link and visited link"])}
+    {React.createElement(pageData.examples["Editorial content"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsContentReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/data-list/react-demos.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import { css } from '@patternfly/react-styles';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
+import srcImportactionable from './react-demos/actionable.png';
+import srcImportbasic from './react-demos/basic.png';
+import srcImportexpandablecontrolintoolbar from './react-demos/expandable-control-in-toolbar.png';
+import srcImportstaticbottompagination from './react-demos/static-bottom-pagination.png';
+const pageData = {
+  "id": "Data list",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/data-list/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/DataListDemo.md",
+  "relPath": "packages/react-core/src/demos/DataListDemo.md",
+  "fullscreenExamples": [
+    "Basic",
+    "Expandable control in toolbar",
+    "Actionable",
+    "Static bottom pagination"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  RhUiBranchFillIcon,
+  RhMicronsCaretDownIcon,
+  RhMicronsCaretRightIcon,
+  RhUiEllipsisVerticalFillIcon,
+  css,
+  RhUiCodeIcon,
+  CubeIcon,
+  RhUiWarningFillIcon,
+  RhUiCheckCircleFillIcon,
+  RhUiErrorFillIcon,
+  DashboardWrapper,
+  rows
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { Fragment } from 'react';\nimport {\n  Button,\n  Content,\n  DataList,\n  DataListItem,\n  DataListCell,\n  DataListItemRow,\n  DataListItemCells,\n  Flex,\n  FlexItem,\n  Icon,\n  MenuToggle,\n  MenuToggleCheckbox,\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuItem,\n  PageSection,\n  Pagination,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nexport const DataListBasic: React.FunctionComponent = () => {\n  const renderPagination = () => <Pagination itemCount={5} page={1} variant=\"top\" isCompact />;\n\n  const toolbarItems = (\n    <Fragment>\n      <ToolbarItem variant=\"bulk-select\">\n        <MenuToggle\n          aria-label=\"Select cards\"\n          splitButtonItems={[\n            <MenuToggleCheckbox\n              id=\"split-dropdown-checkbox\"\n              key=\"split-dropdown-checkbox\"\n              aria-label={'Select all cards'}\n            />\n          ]}\n        ></MenuToggle>\n      </ToolbarItem>\n      <ToolbarItem>\n        <MenuToggle>Filter by creator name</MenuToggle>\n      </ToolbarItem>\n      <ToolbarItem variant=\"overflow-menu\">\n        <OverflowMenu breakpoint=\"md\">\n          <OverflowMenuItem>\n            <Button variant=\"primary\">Create instance</Button>\n          </OverflowMenuItem>\n          <OverflowMenuControl hasAdditionalOptions>\n            <MenuToggle\n              aria-label=\"Toolbar kebab overflow menu\"\n              variant=\"plain\"\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          </OverflowMenuControl>\n        </OverflowMenu>\n      </ToolbarItem>\n      <ToolbarItem variant=\"pagination\" align={{ default: 'alignEnd' }}>\n        {renderPagination()}\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  return (\n    <Fragment>\n      <DashboardWrapper mainContainerId=\"main-content-datalist-view-default-nav\" breadcrumb={null}>\n        <PageSection aria-labelledby=\"projects\">\n          <Content>\n            <h1 id=\"projects\">Projects</h1>\n            <p>This is a demo that showcases PatternFly data list</p>\n          </Content>\n        </PageSection>\n        <PageSection isFilled>\n          <Toolbar id=\"toolbar-group-types\">\n            <ToolbarContent>{toolbarItems}</ToolbarContent>\n          </Toolbar>\n          <DataList aria-label=\"Demo data list\">\n            <DataListItem aria-labelledby=\"Demo-item1\">\n              <DataListItemRow>\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isFilled={false} key=\"buttons1\">\n                      <Flex direction={{ default: 'column' }}>\n                        <FlexItem>\n                          <Content component=\"p\">patternfly</Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Content component=\"small\">\n                            Working repo for\n                            <a href=\"http://www.patternfly.org/\">PatternFly</a>\n                          </Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiBranchFillIcon />\n                              </Icon>\n                              10 <span className=\"pf-v6-screen-reader\">Branches</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiCodeIcon />\n                              </Icon>\n                              4 <span className=\"pf-v6-screen-reader\">Code blocks</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <CubeIcon />\n                              </Icon>\n                              5 <span className=\"pf-v6-screen-reader\">Workspaces</span>\n                            </FlexItem>\n                            <FlexItem> Updated 2 days ago</FlexItem>\n                          </Flex>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>,\n                    <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n                      <Flex>\n                        <FlexItem>\n                          <Button variant=\"secondary\">Action</Button>\n                        </FlexItem>\n                        <FlexItem>\n                          <a href=\"#\">Link</a>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>\n                  ]}\n                />\n              </DataListItemRow>\n            </DataListItem>\n            <DataListItem aria-labelledby=\"Demo-item2\">\n              <DataListItemRow>\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isFilled={false} key=\"buttons2\">\n                      <Flex direction={{ default: 'column' }}>\n                        <FlexItem>\n                          <Content component=\"small\">patternfly-elements</Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Content component=\"small\">PatternFly elements</Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiBranchFillIcon />\n                              </Icon>\n                              5 <span className=\"pf-v6-screen-reader\">Branches</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiCodeIcon />\n                              </Icon>\n                              9 <span className=\"pf-v6-screen-reader\">Code blocks</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <CubeIcon />\n                              </Icon>\n                              2 <span className=\"pf-v6-screen-reader\">Workspaces</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon status=\"success\">\n                                <RhUiCheckCircleFillIcon />\n                              </Icon>\n                              11\n                              <span className=\"pf-v6-screen-reader\">Completed</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon status=\"warning\">\n                                <RhUiWarningFillIcon />\n                              </Icon>\n                              4 <span className=\"pf-v6-screen-reader\">Warnings</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon status=\"danger\">\n                                <RhUiErrorFillIcon />\n                              </Icon>\n                              1 <span className=\"pf-v6-screen-reader\">Error</span>\n                            </FlexItem>\n                            <FlexItem> Updated 2 days ago</FlexItem>\n                          </Flex>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>,\n                    <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n                      <Flex>\n                        <FlexItem>\n                          <Button variant=\"secondary\">Action</Button>\n                        </FlexItem>\n                        <FlexItem>\n                          <a href=\"#\">Link</a>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>\n                  ]}\n                />\n              </DataListItemRow>\n            </DataListItem>\n            <DataListItem>\n              <DataListItemRow>\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isFilled={false} key=\"Demo-item3\">\n                      <Flex direction={{ default: 'column' }}>\n                        <FlexItem>\n                          <Content component=\"small\">patternfly-unified-design-kit</Content>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>,\n                    <DataListCell isFilled={false} alignRight key=\"buttons3\">\n                      <Flex>\n                        <FlexItem>\n                          <Button variant=\"secondary\">Action</Button>\n                        </FlexItem>\n                        <FlexItem>\n                          <a href=\"#\">Link</a>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>\n                  ]}\n                />\n              </DataListItemRow>\n            </DataListItem>\n            <DataListItem aria-labelledby=\"Demo-item4\">\n              <DataListItemRow>\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isFilled={false} key=\"buttons4\">\n                      <Flex direction={{ default: 'column' }}>\n                        <FlexItem>\n                          <Content component=\"small\">patternfly</Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Content component=\"small\">\n                            Working repo for\n                            <a href=\"http://www.patternfly.org/\">PatternFly</a>\n                          </Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiBranchFillIcon />\n                              </Icon>\n                              10\n                              <span className=\"pf-v6-screen-reader\">Branches</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiCodeIcon />\n                              </Icon>\n                              4 <span className=\"pf-v6-screen-reader\">Code blocks</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <CubeIcon />\n                              </Icon>\n                              5 <span className=\"pf-v6-screen-reader\">Workspaces</span>\n                            </FlexItem>\n                            <FlexItem> Updated 2 days ago</FlexItem>\n                          </Flex>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>,\n                    <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n                      <Flex>\n                        <FlexItem>\n                          <Button variant=\"secondary\">Action</Button>\n                        </FlexItem>\n                        <FlexItem>\n                          <a href=\"#\">Link</a>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>\n                  ]}\n                />\n              </DataListItemRow>\n            </DataListItem>\n            <DataListItem aria-labelledby=\"Demo-item5\">\n              <DataListItemRow>\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isFilled={false} key=\"buttons5\">\n                      <Flex direction={{ default: 'column' }}>\n                        <FlexItem>\n                          <Content component=\"small\">patternfly-elements</Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Content component=\"small\">PatternFly elements</Content>\n                        </FlexItem>\n                        <FlexItem>\n                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiBranchFillIcon />\n                              </Icon>\n                              5 <span className=\"pf-v6-screen-reader\">Branches</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <RhUiCodeIcon />\n                              </Icon>\n                              9 <span className=\"pf-v6-screen-reader\">Code blocks</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon>\n                                <CubeIcon />\n                              </Icon>\n                              2 <span className=\"pf-v6-screen-reader\">Workspaces</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon status=\"success\">\n                                <RhUiCheckCircleFillIcon />\n                              </Icon>\n                              11 <span className=\"pf-v6-screen-reader\">Completed</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon status=\"warning\">\n                                <RhUiWarningFillIcon />\n                              </Icon>\n                              4 <span className=\"pf-v6-screen-reader\">Warnings</span>\n                            </FlexItem>\n                            <FlexItem>\n                              <Icon status=\"danger\">\n                                <RhUiErrorFillIcon />\n                              </Icon>\n                              1 <span className=\"pf-v6-screen-reader\">Error</span>\n                            </FlexItem>\n                            <FlexItem> Updated 2 days ago</FlexItem>\n                          </Flex>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>,\n                    <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n                      <Flex>\n                        <FlexItem>\n                          <Button variant=\"secondary\">Action</Button>\n                        </FlexItem>\n                        <FlexItem>\n                          <a href=\"#\">Link</a>\n                        </FlexItem>\n                      </Flex>\n                    </DataListCell>\n                  ]}\n                />\n              </DataListItemRow>\n            </DataListItem>\n          </DataList>\n        </PageSection>\n      </DashboardWrapper>\n    </Fragment>\n  );\n};\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Expandable control in toolbar': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportexpandablecontrolintoolbar} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  Content,\n  DataList,\n  DataListItem,\n  DataListItemRow,\n  DataListCell,\n  DataListAction,\n  DataListToggle,\n  DataListContent,\n  DataListItemCells,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Icon,\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarGroup,\n  ToolbarItem,\n  ToolbarExpandIconWrapper,\n  ToolbarContent,\n  SearchInput,\n  Tooltip,\n  PageSection\n} from '@patternfly/react-core';\n\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const DataListExpandableControlInToolbar: React.FunctionComponent = () => {\n  const [expanded, setExpanded] = useState(['ex-toggle1', 'ex-toggle3']);\n  const [isOpen1, setIsOpen1] = useState(false);\n  const [isOpen2, setIsOpen2] = useState(false);\n  const [isOpen3, setIsOpen3] = useState(false);\n  const [allExpanded, setAllExpanded] = useState(false);\n  const [searchValue, setSearchValue] = useState('');\n\n  const onToggleAll = () => {\n    setAllExpanded((prevAllExpanded) => !prevAllExpanded);\n\n    if (!allExpanded) {\n      setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);\n    } else {\n      setExpanded([]);\n    }\n  };\n\n  const onToggle1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onToggle2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onToggle3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  const onSelect1 = () => {\n    setIsOpen1(false);\n  };\n\n  const onSelect2 = () => {\n    setIsOpen2(false);\n  };\n\n  const onSelect3 = () => {\n    setIsOpen3(false);\n  };\n\n  const renderToolbar = () => (\n    <Fragment>\n      <Toolbar>\n        <ToolbarContent>\n          <ToolbarGroup>\n            <ToolbarItem variant=\"expand-all\" isAllExpanded={allExpanded}>\n              <Tooltip\n                position=\"right\"\n                content={\n                  <div>\n                    {allExpanded && 'Collapse all rows'}\n                    {!allExpanded && 'Expand all rows'}\n                  </div>\n                }\n              >\n                <Button\n                  onClick={onToggleAll}\n                  variant=\"plain\"\n                  aria-label={allExpanded ? 'Collapse all rows' : 'Expand all rows'}\n                  icon={\n                    <Icon shouldMirrorRTL>\n                      <ToolbarExpandIconWrapper>\n                        <RhMicronsCaretDownIcon />\n                      </ToolbarExpandIconWrapper>\n                    </Icon>\n                  }\n                />\n              </Tooltip>\n            </ToolbarItem>\n            <ToolbarItem>\n              <SearchInput\n                aria-label=\"search input example\"\n                value={searchValue}\n                onChange={(_event, value) => setSearchValue(value)}\n                onClear={() => setSearchValue('')}\n              />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button variant=\"secondary\">Action</Button>\n            </ToolbarItem>\n            <ToolbarItem variant=\"separator\" />\n            <ToolbarItem>\n              <Button variant=\"primary\">Action</Button>\n            </ToolbarItem>\n          </ToolbarGroup>\n        </ToolbarContent>\n      </Toolbar>\n    </Fragment>\n  );\n\n  const toggle = (id: string) => {\n    const index = expanded.indexOf(id);\n    const newExpanded =\n      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];\n    setExpanded(newExpanded);\n    if (newExpanded.length === 3) {\n      setAllExpanded(true);\n    } else if (newExpanded.length === 0) {\n      setAllExpanded(false);\n    }\n  };\n\n  return (\n    <Fragment>\n      <DashboardWrapper mainContainerId=\"main-content-datalist-view-default-nav\" breadcrumb={null}>\n        <PageSection aria-labelledby=\"projects\">\n          <Content>\n            <h1 id=\"projects\">Projects</h1>\n            <p>This is a demo that showcases PatternFly data list</p>\n          </Content>\n        </PageSection>\n        <PageSection isFilled>\n          {renderToolbar()}\n\n          <DataList aria-label=\"Expandable data list example\">\n            <DataListItem aria-labelledby=\"ex-item1\" isExpanded={expanded.includes('ex-toggle1')}>\n              <DataListItemRow>\n                <DataListToggle\n                  onClick={() => toggle('ex-toggle1')}\n                  isExpanded={expanded.includes('ex-toggle1')}\n                  id=\"ex-toggle1\"\n                  aria-controls=\"ex-expand1\"\n                />\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isIcon key=\"icon\">\n                      <RhUiBranchFillIcon />\n                    </DataListCell>,\n                    <DataListCell key=\"primary content\">\n                      <div id=\"ex-item1\">Primary content</div>\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>\n                      <a href=\"#\">Link</a>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content\">\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content 2\">\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\n                    </DataListCell>\n                  ]}\n                />\n                <DataListAction aria-labelledby=\"ex-item1 ex-action1\" id=\"ex-action1\" aria-label=\"Actions\">\n                  <Dropdown\n                    isOpen={isOpen1}\n                    onSelect={onSelect1}\n                    popperProps={{ position: 'right' }}\n                    onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        onClick={onToggle1}\n                        isExpanded={isOpen1}\n                        variant=\"plain\"\n                        aria-label=\"Primary content kebab toggle\"\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>\n                      <DropdownItem value={0} key=\"action1\">\n                        Action\n                      </DropdownItem>\n                      <DropdownItem\n                        value={1}\n                        key=\"link1\"\n                        to=\"#default-link2\"\n                        // Prevent the default onClick functionality for example purposes\n                        onClick={(ev: React.MouseEvent) => ev.preventDefault()}\n                      >\n                        Link\n                      </DropdownItem>\n                      <DropdownItem value={2} isDisabled key=\"disabled action1\">\n                        Disabled Action\n                      </DropdownItem>\n                      <DropdownItem value={3} isDisabled key=\"disabled link1\" to=\"#default-link4\">\n                        Disabled Link\n                      </DropdownItem>\n                    </DropdownList>\n                  </Dropdown>\n                </DataListAction>\n              </DataListItemRow>\n              <DataListContent\n                aria-label=\"Primary Content Details\"\n                id=\"ex-expand1\"\n                isHidden={!expanded.includes('ex-toggle1')}\n              >\n                <p>\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore\n                  et dolore magna aliqua.\n                </p>\n              </DataListContent>\n            </DataListItem>\n            <DataListItem aria-labelledby=\"ex-item2\" isExpanded={expanded.includes('ex-toggle2')}>\n              <DataListItemRow>\n                <DataListToggle\n                  onClick={() => toggle('ex-toggle2')}\n                  isExpanded={expanded.includes('ex-toggle2')}\n                  id=\"ex-toggle2\"\n                  aria-controls=\"ex-expand2\"\n                />\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isIcon key=\"icon\">\n                      <RhUiBranchFillIcon />\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content\">\n                      <div id=\"ex-item2\">Secondary content</div>\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content 2\">\n                      <span>Lorem ipsum dolor sit amet.</span>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content3\">\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\n                    </DataListCell>\n                  ]}\n                />\n                <DataListAction aria-labelledby=\"ex-item2 ex-action2\" id=\"ex-action2\" aria-label=\"Actions\">\n                  <Dropdown\n                    isOpen={isOpen2}\n                    onSelect={onSelect2}\n                    popperProps={{ position: 'right' }}\n                    onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        onClick={onToggle2}\n                        isExpanded={isOpen2}\n                        variant=\"plain\"\n                        aria-label=\"Secondary content kebab toggle\"\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>\n                      <DropdownItem value={0} key=\"action2\">\n                        Action\n                      </DropdownItem>\n                      <DropdownItem\n                        value={1}\n                        key=\"link2\"\n                        to=\"#default-link2\"\n                        // Prevent the default onClick functionality for example purposes\n                        onClick={(ev: React.MouseEvent) => ev.preventDefault()}\n                      >\n                        Link\n                      </DropdownItem>\n                      <DropdownItem value={2} isDisabled key=\"disabled action2\">\n                        Disabled Action\n                      </DropdownItem>\n                      <DropdownItem value={3} isDisabled key=\"disabled link2\" to=\"#default-link4\">\n                        Disabled Link\n                      </DropdownItem>\n                    </DropdownList>\n                  </Dropdown>\n                </DataListAction>\n              </DataListItemRow>\n              <DataListContent\n                aria-label=\"Primary Content Details\"\n                id=\"ex-expand2\"\n                isHidden={!expanded.includes('ex-toggle2')}\n              >\n                <p>\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore\n                  et dolore magna aliqua.\n                </p>\n              </DataListContent>\n            </DataListItem>\n            <DataListItem aria-labelledby=\"ex-item3\" isExpanded={expanded.includes('ex-toggle3')}>\n              <DataListItemRow>\n                <DataListToggle\n                  onClick={() => toggle('ex-toggle3')}\n                  isExpanded={expanded.includes('ex-toggle3')}\n                  id=\"ex-toggle3\"\n                  aria-controls=\"ex-expand3\"\n                />\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell isIcon key=\"icon\">\n                      <RhUiBranchFillIcon />\n                    </DataListCell>,\n                    <DataListCell key=\"tertiary content\">\n                      <div id=\"ex-item3\">Tertiary content</div>\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content\">\n                      <span>Lorem ipsum dolor sit amet.</span>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content 2\">\n                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\n                    </DataListCell>\n                  ]}\n                />\n                <DataListAction aria-labelledby=\"ex-item3 ex-action3\" id=\"ex-action3\" aria-label=\"Actions\">\n                  <Dropdown\n                    isOpen={isOpen3}\n                    onSelect={onSelect3}\n                    popperProps={{ position: 'right' }}\n                    onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        onClick={onToggle3}\n                        isExpanded={isOpen3}\n                        variant=\"plain\"\n                        aria-label=\"Tertiary content kebab toggle\"\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>\n                      <DropdownItem value={0} key=\"action3\">\n                        Action\n                      </DropdownItem>\n                      <DropdownItem\n                        value={1}\n                        key=\"link3\"\n                        to=\"#default-link2\"\n                        // Prevent the default onClick functionality for example purposes\n                        onClick={(ev: React.MouseEvent) => ev.preventDefault()}\n                      >\n                        Link\n                      </DropdownItem>\n                      <DropdownItem value={2} isDisabled key=\"disabled action3\">\n                        Disabled Action\n                      </DropdownItem>\n                      <DropdownItem value={3} isDisabled key=\"disabled link3\" to=\"#default-link4\">\n                        Disabled Link\n                      </DropdownItem>\n                    </DropdownList>\n                  </Dropdown>\n                </DataListAction>\n              </DataListItemRow>\n              <DataListContent\n                aria-label=\"Primary Content Details\"\n                id=\"ex-expand3\"\n                isHidden={!expanded.includes('ex-toggle3')}\n                hasNoPadding\n              >\n                This expanded section has no padding.\n              </DataListContent>\n            </DataListItem>\n          </DataList>\n        </PageSection>\n      </DashboardWrapper>\n    </Fragment>\n  );\n};\n","title":"Expandable control in toolbar","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Actionable': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportactionable} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  Content,\n  DataList,\n  DataListItem,\n  DataListCell,\n  DataListItemRow,\n  DataListItemCells,\n  DataListAction,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  PageSection,\n  Title\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nexport const DataListActionable: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [isDeleted, setIsDeleted] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <DashboardWrapper mainContainerId=\"main-content-datalist-view-actions\" breadcrumb={null}>\n      <PageSection aria-labelledby=\"projects\">\n        <Content>\n          <Title headingLevel=\"h1\" id=\"projects\">\n            Projects\n          </Title>\n          <Content component=\"p\">This is a demo that showcases PatternFly Data List</Content>\n        </Content>\n      </PageSection>\n      <PageSection aria-label=\"Data list of projects\">\n        <DataList aria-label=\"single action data list example \">\n          {!isDeleted && (\n            <DataListItem aria-labelledby=\"single-action-item1\">\n              <DataListItemRow>\n                <DataListItemCells\n                  dataListCells={[\n                    <DataListCell key=\"primary content\">\n                      <span id=\"single-action-item1\">Single actionable Primary content</span>\n                    </DataListCell>,\n                    <DataListCell key=\"secondary content\">Single actionable Secondary content</DataListCell>\n                  ]}\n                />\n                <DataListAction\n                  aria-labelledby=\"single-action-item1 single-action-action1\"\n                  id=\"single-action-action1\"\n                  aria-label=\"Actions\"\n                >\n                  <Button\n                    onClick={() => {\n                      if (confirm('Are you sure?')) {\n                        setIsDeleted(true);\n                      }\n                    }}\n                    variant=\"primary\"\n                    key=\"delete-action\"\n                  >\n                    Delete\n                  </Button>\n                </DataListAction>\n              </DataListItemRow>\n            </DataListItem>\n          )}\n          <DataListItem aria-labelledby=\"multi-actions-item1\">\n            <DataListItemRow>\n              <DataListItemCells\n                dataListCells={[\n                  <DataListCell key=\"primary content\">\n                    <span id=\"multi-actions-item1\">Multi actions Primary content</span>\n                  </DataListCell>,\n                  <DataListCell key=\"secondary content\">Multi actions Secondary content</DataListCell>\n                ]}\n              />\n              <DataListAction\n                aria-labelledby=\"multi-actions-item1 multi-actions-action1\"\n                id=\"multi-actions-action1\"\n                aria-label=\"Actions\"\n              >\n                <Dropdown\n                  popperProps={{ position: 'right' }}\n                  onSelect={onSelect}\n                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      isExpanded={isOpen}\n                      onClick={onToggle}\n                      variant=\"plain\"\n                      aria-label=\"Data list with actions example kebab toggle\"\n                    >\n                      <RhUiEllipsisVerticalFillIcon aria-hidden=\"true\" />\n                    </MenuToggle>\n                  )}\n                  isOpen={isOpen}\n                  onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n                >\n                  <DropdownList>\n                    <DropdownItem key=\"action\">Action</DropdownItem>\n                    {/* Prevent default onClick functionality for example\n                  purposes */}\n                    <DropdownItem key=\"link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                      Link\n                    </DropdownItem>\n                    <DropdownItem key=\"disabled action\" isDisabled>\n                      Disabled Action\n                    </DropdownItem>\n                    <DropdownItem\n                      key=\"disabled link\"\n                      isDisabled\n                      to=\"#\"\n                      onClick={(event: any) => event.preventDefault()}\n                    >\n                      Disabled Link\n                    </DropdownItem>\n                  </DropdownList>\n                </Dropdown>\n              </DataListAction>\n            </DataListItemRow>\n          </DataListItem>\n        </DataList>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Actionable","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Static bottom pagination': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstaticbottompagination} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  Content,\n  ContentVariants,\n  DataList,\n  DataListItem,\n  DataListCell,\n  DataListItemRow,\n  DataListItemCells,\n  Flex,\n  FlexItem,\n  Icon,\n  MenuToggle,\n  MenuToggleCheckbox,\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuItem,\n  PageSection,\n  Pagination,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  PaginationVariant\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';\n\nexport const DataListStaticBottomPagination: React.FunctionComponent = () => {\n  const [page, setPage] = useState<number | undefined>(1);\n  const [perPage, setPerPage] = useState<number>(10);\n  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));\n\n  const handleSetPage = (\n    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPage: number,\n    _perPage: number | undefined,\n    startIdx: number | undefined,\n    endIdx: number | undefined\n  ) => {\n    setPaginatedRows(rows?.slice(startIdx, endIdx));\n    setPage(newPage);\n  };\n\n  const handlePerPageSelect = (\n    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number | undefined,\n    startIdx: number | undefined,\n    endIdx: number | undefined\n  ) => {\n    setPaginatedRows(rows.slice(startIdx, endIdx));\n    setPage(newPage);\n    setPerPage(newPerPage);\n  };\n\n  const renderPagination = (variant: PaginationVariant, isCompact: boolean, isSticky: boolean, isStatic: boolean) => (\n    <Pagination\n      id={`datalist-${variant}-pagination`}\n      variant={variant}\n      itemCount={rows.length}\n      page={page}\n      perPage={perPage}\n      isCompact={isCompact}\n      isSticky={isSticky}\n      isStatic={isStatic}\n      onSetPage={handleSetPage}\n      onPerPageSelect={handlePerPageSelect}\n      titles={{\n        paginationAriaLabel: `${variant} pagination`\n      }}\n    />\n  );\n\n  const toolbarItems = (\n    <Fragment>\n      <ToolbarItem>\n        <MenuToggle\n          aria-label=\"Select data list items\"\n          splitButtonItems={[\n            <MenuToggleCheckbox\n              id=\"split-dropdown-checkbox\"\n              key=\"split-dropdown-checkbox\"\n              aria-label={'Select all data list items'}\n            />\n          ]}\n        ></MenuToggle>\n      </ToolbarItem>\n      <ToolbarItem>\n        <MenuToggle>Filter by creator name</MenuToggle>\n      </ToolbarItem>\n      <ToolbarItem>\n        <OverflowMenu breakpoint=\"md\">\n          <OverflowMenuItem>\n            <Button variant=\"primary\">Create instance</Button>\n          </OverflowMenuItem>\n          <OverflowMenuControl hasAdditionalOptions>\n            <MenuToggle aria-label=\"Toolbar kebab overflow menu\" variant=\"plain\">\n              <RhUiEllipsisVerticalFillIcon />\n            </MenuToggle>\n          </OverflowMenuControl>\n        </OverflowMenu>\n      </ToolbarItem>\n      <ToolbarItem variant=\"pagination\" align={{ default: 'alignEnd' }}>\n        {renderPagination(PaginationVariant.top, true, false, false)}\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper mainContainerId=\"main-content-datalist-view-pagination\" breadcrumb={null}>\n      <PageSection aria-labelledby=\"projects\">\n        <Content>\n          <Content component=\"h1\" id=\"projects\">\n            Projects\n          </Content>\n          <Content component=\"p\">This is a demo that showcases PatternFly Data List</Content>\n        </Content>\n      </PageSection>\n      <PageSection isFilled>\n        <Toolbar id=\"toolbar-group-types\">\n          <ToolbarContent>{toolbarItems}</ToolbarContent>\n        </Toolbar>\n        <DataList aria-label=\"Demo data list\">\n          {paginatedRows.map((row, rowIndex) => {\n            const { name, threads, applications, workspaces, lastModified } = row;\n            return (\n              <DataListItem aria-labelledby={`Demo-item-${rowIndex}`} key={rowIndex}>\n                <DataListItemRow>\n                  <DataListItemCells\n                    dataListCells={[\n                      <DataListCell isFilled={false} key=\"buttons1\">\n                        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>\n                          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>\n                            <FlexItem>\n                              <Content id={`Demo-item-${rowIndex}`} component={ContentVariants.p}>\n                                {name}\n                              </Content>\n                            </FlexItem>\n                            <FlexItem>\n                              <Content component={ContentVariants.small}>\n                                Working repo for\n                                <a href=\"http://www.patternfly.org/\">PatternFly</a>\n                              </Content>\n                            </FlexItem>\n                          </Flex>\n                          <Flex flexWrap={{ default: 'wrap' }}>\n                            <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                              <FlexItem>\n                                <Icon>\n                                  <RhUiBranchFillIcon />\n                                </Icon>{' '}\n                                {threads}\n                                <span className=\"pf-v6-screen-reader\">Branches</span>\n                              </FlexItem>\n                            </Flex>\n                            <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                              <FlexItem>\n                                <Icon>\n                                  <RhUiCodeIcon />\n                                </Icon>{' '}\n                                {applications}\n                                <span className=\"pf-v6-screen-reader\">Code blocks</span>\n                              </FlexItem>\n                            </Flex>\n                            <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n                              <FlexItem>\n                                <Icon>\n                                  <CubeIcon />\n                                </Icon>{' '}\n                                {workspaces}\n                                <span className=\"pf-v6-screen-reader\">Workspaces</span>\n                              </FlexItem>\n                            </Flex>\n                            <FlexItem> Updated {lastModified}</FlexItem>\n                          </Flex>\n                        </Flex>\n                      </DataListCell>,\n                      <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n                        <Flex>\n                          <FlexItem>\n                            <Button variant=\"secondary\">Action</Button>\n                          </FlexItem>\n                          <FlexItem>\n                            <a href=\"#\">Link</a>\n                          </FlexItem>\n                        </Flex>\n                      </DataListCell>\n                    ]}\n                  />\n                </DataListItemRow>\n              </DataListItem>\n            );\n          })}\n        </DataList>\n        {renderPagination(PaginationVariant.bottom, false, false, true)}\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Static bottom pagination","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Expandable control in toolbar"])}
+    {React.createElement(pageData.examples["Actionable"])}
+    {React.createElement(pageData.examples["Static bottom pagination"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDataListReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;