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

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

@@ -1,709 +0,0 @@
-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 { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
-const pageData = {
-  "id": "Data list",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/data-list/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DataList/examples/DataList.md",
-  "relPath": "packages/react-core/src/components/DataList/examples/DataList.md",
-  "propComponents": [
-    {
-      "name": "DataList",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the data list list",
-          "required": true
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the data list list"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the data list list"
-        },
-        {
-          "name": "gridBreakpoint",
-          "type": "'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'",
-          "description": "Specifies the grid breakpoints"
-        },
-        {
-          "name": "isCompact",
-          "type": "boolean",
-          "description": "Flag indicating if data list should have compact styling"
-        },
-        {
-          "name": "isNoPlainOnGlass",
-          "type": "boolean",
-          "description": "Flag to prevent the data list from automatically applying plain styling when glass theme is enabled.",
-          "beta": true
-        },
-        {
-          "name": "isPlain",
-          "type": "boolean",
-          "description": "Flag indicating if data list should have plain styling with a transparent background",
-          "beta": true
-        },
-        {
-          "name": "onSelectableRowChange",
-          "type": "(event: React.FormEvent<HTMLInputElement>, id: string) => void",
-          "description": "Object that causes the data list to render hidden inputs which improve selectable item a11y"
-        },
-        {
-          "name": "onSelectDataListItem",
-          "type": "(event: React.MouseEvent | React.KeyboardEvent, id: string) => void",
-          "description": "Optional callback to make data list selectable, fired when data list item selected"
-        },
-        {
-          "name": "selectedDataListItemId",
-          "type": "string",
-          "description": "Id of data list item currently selected"
-        },
-        {
-          "name": "wrapModifier",
-          "type": "DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'",
-          "description": "Determines which wrapping modifier to apply to the data list"
-        }
-      ]
-    },
-    {
-      "name": "DataListAction",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the data list action",
-          "required": true
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Adds accessible text to the data list action",
-          "required": true
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered as data list action  (e.g <Button> or <Dropdown>)",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the data list action"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Identify the data list toggle number",
-          "required": true
-        },
-        {
-          "name": "visibility",
-          "type": "{\n  default?: 'hidden' | 'visible';\n  sm?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
-          "description": "What breakpoints to hide/show the data list action"
-        }
-      ]
-    },
-    {
-      "name": "DataListCell",
-      "description": "",
-      "props": [
-        {
-          "name": "alignRight",
-          "type": "boolean",
-          "description": "Aligns the cell content to the right of its parent.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the data list cell",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the data list cell",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isFilled",
-          "type": "boolean",
-          "description": "Enables the body content to fill the height of the card",
-          "defaultValue": "true"
-        },
-        {
-          "name": "isIcon",
-          "type": "boolean",
-          "description": "Set to true if the cell content is an icon",
-          "defaultValue": "false"
-        },
-        {
-          "name": "width",
-          "type": "1 | 2 | 3 | 4 | 5",
-          "description": "Width (from 1-5) to the data list cell",
-          "defaultValue": "1"
-        },
-        {
-          "name": "wrapModifier",
-          "type": "DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'",
-          "description": "Determines which wrapping modifier to apply to the data list cell",
-          "defaultValue": "null"
-        }
-      ]
-    },
-    {
-      "name": "DataListCheck",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Aria-labelledby of the DataList checkbox",
-          "required": true
-        },
-        {
-          "name": "checked",
-          "type": "boolean",
-          "description": "Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid,\nbut only use one.\nTo make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the DataList item checkbox"
-        },
-        {
-          "name": "defaultChecked",
-          "type": "boolean",
-          "description": "Flag to set default value of DataList checkbox when it is uncontrolled by React state.\nTo make the DataList checkbox controlled, instead use the isChecked prop, but do not use both."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Id of the DataList checkbox."
-        },
-        {
-          "name": "isChecked",
-          "type": "boolean",
-          "description": "Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid,\nbut only use one.\nTo make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both."
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Flag to show if the DataList checkbox is disabled",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isValid",
-          "type": "boolean",
-          "description": "Flag to show if the DataList checkbox selection is valid or invalid",
-          "defaultValue": "true"
-        },
-        {
-          "name": "onChange",
-          "type": "(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void",
-          "description": "A callback for when the DataList checkbox selection changes"
-        },
-        {
-          "name": "otherControls",
-          "type": "boolean",
-          "description": "Flag to indicate if other controls are used in the DataListItem",
-          "defaultValue": "false"
-        }
-      ]
-    },
-    {
-      "name": "DataListItem",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Adds an accessible name to the selectable input if one is rendered",
-          "defaultValue": "''"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the DataList item",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent>",
-          "defaultValue": "''"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Unique id for the DataList item",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Flag to show if the expanded content of the DataList item is visible",
-          "defaultValue": "false"
-        },
-        {
-          "name": "selectableInputAriaLabel",
-          "type": "string",
-          "description": "Aria label to apply to the selectable input if one is rendered"
-        }
-      ]
-    },
-    {
-      "name": "DataListItemCells",
-      "description": "",
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the data list item content wrapper.  Children should be one or more <DataListCell> nodes",
-          "defaultValue": "''"
-        },
-        {
-          "name": "dataListCells",
-          "type": "React.ReactNode",
-          "description": "Array of <DataListCell> nodes that are rendered one after the other."
-        },
-        {
-          "name": "rowid",
-          "type": "string",
-          "description": "Id for the row",
-          "defaultValue": "''"
-        }
-      ]
-    },
-    {
-      "name": "DataListItemRow",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the DataListItemRow",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the DataListItemRow",
-          "defaultValue": "''"
-        },
-        {
-          "name": "rowid",
-          "type": "string",
-          "description": "Id for the row item",
-          "defaultValue": "''"
-        },
-        {
-          "name": "wrapModifier",
-          "type": "DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'",
-          "description": "Determines which wrapping modifier to apply to the DataListItemRow",
-          "defaultValue": "null"
-        }
-      ]
-    },
-    {
-      "name": "DataListToggle",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-controls",
-          "type": "string",
-          "description": "Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the data list toggle",
-          "defaultValue": "'Details'"
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Adds accessible text to the data list toggle"
-        },
-        {
-          "name": "buttonProps",
-          "type": "ButtonProps",
-          "description": "Additional properties spread to the toggle button"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the data list cell",
-          "defaultValue": "''"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Identify the data list toggle number",
-          "required": true
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Flag to show if the expanded content of the data list item is visible",
-          "defaultValue": "false"
-        },
-        {
-          "name": "rowid",
-          "type": "string",
-          "description": "Id for the row",
-          "defaultValue": "''"
-        }
-      ]
-    },
-    {
-      "name": "DataListContent",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the DataList toggle",
-          "required": true
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the DataList item",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the DataList cell",
-          "defaultValue": "''"
-        },
-        {
-          "name": "hasNoPadding",
-          "type": "boolean",
-          "description": "Flag to remove padding from the expandable content",
-          "defaultValue": "false"
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "Identify the DataListContent item",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isHidden",
-          "type": "boolean",
-          "description": "Flag to show if the expanded content of the DataList item is visible",
-          "defaultValue": "false"
-        },
-        {
-          "name": "rowid",
-          "type": "string",
-          "description": "Id for the row",
-          "defaultValue": "''"
-        }
-      ]
-    },
-    {
-      "name": "DataListDragButton",
-      "description": "",
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the drag button",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Flag indicating if drag is disabled for the item",
-          "defaultValue": "false"
-        },
-        {
-          "name": "type",
-          "type": "'button' | 'submit' | 'reset'",
-          "description": "Sets button type"
-        }
-      ]
-    },
-    {
-      "name": "DataListControl",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Children of the data list control"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the DataList item control",
-          "defaultValue": "''"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-data-list"
-  ],
-  "examples": [
-    "Basic",
-    "Compact",
-    "Plain",
-    "Checkboxes, actions and additional cells",
-    "Actions: single and multiple",
-    "Expandable",
-    "Mixed expandable",
-    "Width modifiers",
-    "Clickable rows",
-    "Controlling text",
-    "Draggable",
-    "Draggable with multiple drop zones",
-    "Small grid breakpoint"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useState,
-  RhUiBranchFillIcon,
-  RhMicronsCaretDownIcon,
-  RhMicronsCaretRightIcon,
-  RhUiEllipsisVerticalFillIcon,
-  css,
-  DragDropSort,
-  DragDropContainer,
-  NewDroppable
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';\n\nexport const DataListBasic: React.FunctionComponent = () => (\n  <DataList aria-label=\"Simple data list example\">\n    <DataListItem aria-labelledby=\"simple-item1\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key=\"primary content\">\n              <span id=\"simple-item1\">Primary content</span>\n            </DataListCell>,\n            <DataListCell key=\"secondary content\">Secondary content</DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n    <DataListItem aria-labelledby=\"simple-item2\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell isFilled={false} key=\"secondary content fill\">\n              <span id=\"simple-item2\">Secondary content (pf-m-no-fill)</span>\n            </DataListCell>,\n            <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n              Secondary content (pf-m-align-right pf-m-no-fill)\n            </DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n  </DataList>\n);\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Compact': props => 
-    <Example {...pageData} {...props} {...{"code":"import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';\n\nexport const DataListCompact: React.FunctionComponent = () => (\n  <DataList aria-label=\"Compact data list example\" isCompact>\n    <DataListItem aria-labelledby=\"compact-item1\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key=\"primary content\">\n              <span id=\"compact-item1\">Primary content</span>\n            </DataListCell>,\n            <DataListCell key=\"secondary content\">Secondary content</DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n    <DataListItem aria-labelledby=\"compact-item2\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell isFilled={false} key=\"secondary content fill\">\n              <span id=\"compact-item2\">Secondary content (pf-m-no-fill)</span>\n            </DataListCell>,\n            <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n              Secondary content (pf-m-align-right pf-m-no-fill)\n            </DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n  </DataList>\n);\n","title":"Compact","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Plain': props => 
-    <Example {...pageData} {...props} {...{"code":"import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';\n\nexport const DataListPlain: React.FunctionComponent = () => (\n  <DataList aria-label=\"Plain data list example\" isPlain>\n    <DataListItem aria-labelledby=\"plain-item1\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key=\"primary content\">\n              <span id=\"plain-item1\">Primary content</span>\n            </DataListCell>,\n            <DataListCell key=\"secondary content\">Secondary content</DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n    <DataListItem aria-labelledby=\"plain-item2\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell isFilled={false} key=\"secondary content fill\">\n              <span id=\"plain-item2\">Secondary content (pf-m-no-fill)</span>\n            </DataListCell>,\n            <DataListCell isFilled={false} alignRight key=\"secondary content align\">\n              Secondary content (pf-m-align-right pf-m-no-fill)\n            </DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n  </DataList>\n);\n","title":"Plain","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Checkboxes, actions and additional cells': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  DataList,\n  DataListItem,\n  DataListItemCells,\n  DataListItemRow,\n  DataListCell,\n  DataListCheck,\n  DataListAction,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const DataListCheckboxes: React.FunctionComponent = () => {\n  const [isOpen1, setIsOpen1] = useState(false);\n  const [isOpen2, setIsOpen2] = useState(false);\n  const [isOpen3, setIsOpen3] = useState(false);\n\n  const onToggle1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onSelect1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onToggle2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onSelect2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n  const onToggle3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  const onSelect3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  return (\n    <DataList aria-label=\"Checkbox and action data list example\">\n      <DataListItem aria-labelledby=\"check-action-item1\">\n        <DataListItemRow>\n          <DataListCheck id=\"check-item1\" aria-labelledby=\"check-action-item1\" name=\"check-action-check1\" />\n          <DataListItemCells\n            dataListCells={[\n              <DataListCell key=\"primary content\">\n                <span id=\"check-action-item1\">Primary content</span> Dolor sit amet, consectetur adipisicing elit, sed\n                do eiusmod.\n              </DataListCell>,\n              <DataListCell key=\"secondary content 1\">\n                Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n              </DataListCell>,\n              <DataListCell key=\"secondary content 2\">\n                <span>Tertiary content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n              </DataListCell>,\n              <DataListCell key=\"more content 1\">\n                <span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n              </DataListCell>,\n              <DataListCell key=\"more content 2\">\n                <span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n              </DataListCell>\n            ]}\n          />\n          <DataListAction\n            aria-labelledby=\"check-action-item1 check-action-action1\"\n            id=\"check-action-action1\"\n            aria-label=\"Actions\"\n          >\n            <Dropdown\n              popperProps={{ position: 'right' }}\n              onSelect={onSelect1}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  isExpanded={isOpen1}\n                  onClick={onToggle1}\n                  variant=\"plain\"\n                  aria-label=\"Data list with checkboxes, actions and additional cells example kebab toggle 1\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n              isOpen={isOpen1}\n              onOpenChange={(isOpen: boolean) => setIsOpen1(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 key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                  Disabled Link\n                </DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          </DataListAction>\n        </DataListItemRow>\n      </DataListItem>\n      <DataListItem aria-labelledby=\"check-action-item2\">\n        <DataListItemRow>\n          <DataListCheck id=\"check-item2\" aria-labelledby=\"check-action-item2\" name=\"check-action-check2\" />\n          <DataListItemCells\n            dataListCells={[\n              <DataListCell key=\"primary content\">\n                <span id=\"check-action-item2\">Primary content - Lorem ipsum</span> dolor sit amet, consectetur\n                adipisicing elit, sed do eiusmod.\n              </DataListCell>,\n              <DataListCell key=\"secondary content\">\n                Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n              </DataListCell>\n            ]}\n          />\n          <DataListAction\n            visibility={{ lg: 'hidden' }}\n            aria-labelledby=\"check-action-item2 check-action-action2\"\n            id=\"check-action-action2\"\n            aria-label=\"Actions\"\n          >\n            <Dropdown\n              popperProps={{ position: 'right' }}\n              onSelect={onSelect2}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  isExpanded={isOpen2}\n                  onClick={onToggle2}\n                  variant=\"plain\"\n                  aria-label=\"Data list with checkboxes, actions and additional cells example kebab toggle 2\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n              isOpen={isOpen2}\n              onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}\n            >\n              <DropdownList>\n                <DropdownItem key=\"action2\">Action</DropdownItem>\n                {/* Prevent default onClick functionality for example\n                  purposes */}\n                <DropdownItem key=\"link2\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                  Link\n                </DropdownItem>\n                <DropdownItem key=\"disabled action2\" isDisabled>\n                  Disabled Action\n                </DropdownItem>\n                <DropdownItem key=\"disabled link2\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                  Disabled Link\n                </DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          </DataListAction>\n          <DataListAction\n            visibility={{ default: 'hidden', lg: 'visible' }}\n            aria-labelledby=\"check-action-item2 check-action-action2a\"\n            id=\"check-action-action2a\"\n            aria-label=\"Actions\"\n          >\n            <Button variant=\"primary\">Primary</Button>\n            <Button variant=\"secondary\">Secondary</Button>\n          </DataListAction>\n        </DataListItemRow>\n      </DataListItem>\n      <DataListItem aria-labelledby=\"check-action-item3\">\n        <DataListItemRow>\n          <DataListCheck id=\"check-item3\" aria-labelledby=\"check-action-item3\" name=\"check-action-check3\" />\n          <DataListItemCells\n            dataListCells={[\n              <DataListCell key=\"primary content\">\n                <span id=\"check-action-item3\">Primary content - Lorem ipsum</span> dolor sit amet, consectetur\n                adipisicing elit, sed do eiusmod.\n              </DataListCell>,\n              <DataListCell key=\"secondary content\">\n                Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n              </DataListCell>\n            ]}\n          />\n          <DataListAction\n            visibility={{ xl: 'hidden' }}\n            aria-labelledby=\"check-action-item3 check-action-action3\"\n            id=\"check-action-action3\"\n            aria-label=\"Actions\"\n          >\n            <Dropdown\n              popperProps={{ position: 'right' }}\n              onSelect={onSelect3}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  isExpanded={isOpen3}\n                  onClick={onToggle3}\n                  variant=\"plain\"\n                  aria-label=\"Data list with checkboxes, actions and additional cells example kebab toggle 3\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n              isOpen={isOpen3}\n              onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}\n            >\n              <DropdownList>\n                <DropdownItem key=\"action3\">Action</DropdownItem>\n                {/* Prevent default onClick functionality for example\n                  purposes */}\n                <DropdownItem key=\"link3\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                  Link\n                </DropdownItem>\n                <DropdownItem key=\"disabled action3\" isDisabled>\n                  Disabled Action\n                </DropdownItem>\n                <DropdownItem key=\"disabled link3\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                  Disabled Link\n                </DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          </DataListAction>\n          <DataListAction\n            visibility={{ default: 'hidden', xl: 'visible' }}\n            aria-labelledby=\"check-action-item3 check-action-action3a\"\n            id=\"check-action-action3a\"\n            aria-label=\"Actions\"\n          >\n            <Button variant=\"primary\">Primary</Button>\n            <Button variant=\"secondary\">Secondary</Button>\n            <Button variant=\"secondary\">Secondary</Button>\n            <Button variant=\"secondary\">Secondary</Button>\n          </DataListAction>\n        </DataListItemRow>\n      </DataListItem>\n    </DataList>\n  );\n};\n","title":"Checkboxes, actions and additional cells","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Actions: single and multiple': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  DataList,\n  DataListItem,\n  DataListCell,\n  DataListItemRow,\n  DataListItemCells,\n  DataListAction,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const DataListActions: 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    <Fragment>\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                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\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 key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n};\n","title":"Actions: single and multiple","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Expandable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  DataList,\n  DataListItem,\n  DataListItemRow,\n  DataListCell,\n  DataListAction,\n  DataListToggle,\n  DataListContent,\n  DataListItemCells,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\n\nexport const DataListExpandable: React.FunctionComponent = () => {\n  const [isOpen1, setIsOpen1] = useState(false);\n  const [isOpen2, setIsOpen2] = useState(false);\n  const [isOpen3, setIsOpen3] = useState(false);\n  const [expanded, setExpanded] = useState(['ex-toggle1', 'ex-toggle3']);\n\n  const onToggle1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onSelect1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onToggle2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onSelect2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n  const onToggle3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  const onSelect3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  const toggle = (id) => {\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  };\n  return (\n    <Fragment>\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                popperProps={{ position: 'right' }}\n                onSelect={onSelect1}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen1}\n                    onClick={onToggle1}\n                    variant=\"plain\"\n                    aria-label=\"Data list exapndable example kebaby toggle 1\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen1}\n                onOpenChange={(isOpen: boolean) => setIsOpen1(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 key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n          <DataListContent\n            aria-label=\"First expandable 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 et\n              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                popperProps={{ position: 'right' }}\n                onSelect={onSelect2}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen2}\n                    onClick={onToggle2}\n                    variant=\"plain\"\n                    aria-label=\"Data list exapndable example kebaby toggle 2\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen2}\n                onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}\n              >\n                <DropdownList>\n                  <DropdownItem key=\"action2\">Action</DropdownItem>\n                  {/* Prevent default onClick functionality for example\n                  purposes */}\n                  <DropdownItem key=\"link2\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Link\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled action2\" isDisabled>\n                    Disabled Action\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled link2\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n          <DataListContent\n            aria-label=\"Second expandable 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 et\n              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                popperProps={{ position: 'right' }}\n                onSelect={onSelect3}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen3}\n                    onClick={onToggle3}\n                    variant=\"plain\"\n                    aria-label=\"Data list exapndable example kebaby toggle 3\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen3}\n                onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}\n              >\n                <DropdownList>\n                  <DropdownItem key=\"action3\">Action</DropdownItem>\n                  {/* Prevent default onClick functionality for example\n                  purposes */}\n                  <DropdownItem key=\"link3\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Link\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled action3\" isDisabled>\n                    Disabled Action\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled link3\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n          <DataListContent\n            aria-label=\"Third expandable 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    </Fragment>\n  );\n};\n","title":"Expandable","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Mixed expandable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  DataList,\n  DataListItem,\n  DataListItemRow,\n  DataListCell,\n  DataListAction,\n  DataListToggle,\n  DataListContent,\n  DataListItemCells,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\n\nexport const DataListMixedExpandable: React.FunctionComponent = () => {\n  const [isOpen1, setIsOpen1] = useState(false);\n  const [isOpen2, setIsOpen2] = useState(false);\n  const [isOpen3, setIsOpen3] = useState(false);\n  const [expanded, setExpanded] = useState(['m-ex-toggle1', 'm-ex-toggle3']);\n\n  const onToggle1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onSelect1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onToggle2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onSelect2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onToggle3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  const onSelect3 = () => {\n    setIsOpen3(!isOpen3);\n  };\n\n  const toggle = (id) => {\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  };\n\n  return (\n    <Fragment>\n      <DataList aria-label=\"Mixed expandable data list example\">\n        <DataListItem aria-labelledby=\"m-ex-item1\" isExpanded={expanded.includes('m-ex-toggle1')}>\n          <DataListItemRow>\n            <DataListToggle\n              onClick={() => toggle('m-ex-toggle1')}\n              isExpanded={expanded.includes('m-ex-toggle1')}\n              id=\"m-ex-toggle1\"\n              aria-controls=\"m-ex-expand1\"\n            />\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell isIcon key=\"icon\">\n                  <RhUiBranchFillIcon />\n                </DataListCell>,\n                <DataListCell key=\"primary content\">\n                  <div id=\"m-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=\"m-ex-item1 m-ex-action1\" id=\"m-ex-action1\" aria-label=\"Actions\">\n              <Dropdown\n                popperProps={{ position: 'right' }}\n                onSelect={onSelect1}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen1}\n                    onClick={onToggle1}\n                    variant=\"plain\"\n                    aria-label=\"Data list mixed expandable example kebab toggle 1\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen1}\n                onOpenChange={(isOpen: boolean) => setIsOpen1(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 key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n          <DataListContent\n            aria-label=\"First mixed expandable content details\"\n            id=\"m-ex-expand1\"\n            isHidden={!expanded.includes('m-ex-toggle1')}\n          >\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n              dolore magna aliqua.\n            </p>\n          </DataListContent>\n        </DataListItem>\n        <DataListItem aria-labelledby=\"m-ex-item2\">\n          <DataListItemRow>\n            <DataListToggle\n              id=\"m-ex-toggle2\"\n              buttonProps={{\n                disabled: true,\n                'aria-hidden': 'true',\n                style: { visibility: 'hidden' }\n              }}\n            />\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell isIcon key=\"icon\">\n                  <RhUiBranchFillIcon />\n                </DataListCell>,\n                <DataListCell key=\"secondary content\">\n                  <div id=\"m-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=\"m-ex-item2 m-ex-action2\" id=\"m-ex-action2\" aria-label=\"Actions\">\n              <Dropdown\n                popperProps={{ position: 'right' }}\n                onSelect={onSelect2}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen2}\n                    onClick={onToggle2}\n                    variant=\"plain\"\n                    aria-label=\"Data list mixed expandable example kebab toggle 2\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen2}\n                onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}\n              >\n                <DropdownList>\n                  <DropdownItem key=\"action2\">Action</DropdownItem>\n                  {/* Prevent default onClick functionality for example\n                  purposes */}\n                  <DropdownItem key=\"link2\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Link\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled action2\" isDisabled>\n                    Disabled Action\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled link2\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem aria-labelledby=\"m-ex-item3\" isExpanded={expanded.includes('m-ex-toggle3')}>\n          <DataListItemRow>\n            <DataListToggle\n              onClick={() => toggle('m-ex-toggle3')}\n              isExpanded={expanded.includes('m-ex-toggle3')}\n              id=\"m-ex-toggle3\"\n              aria-controls=\"m-ex-expand3\"\n            />\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell isIcon key=\"icon\">\n                  <RhUiBranchFillIcon />\n                </DataListCell>,\n                <DataListCell key=\"tertiary content\">\n                  <div id=\"m-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=\"m-ex-item3 m-ex-action3\" id=\"m-ex-action3\" aria-label=\"Actions\">\n              <Dropdown\n                popperProps={{ position: 'right' }}\n                onSelect={onSelect3}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen3}\n                    onClick={onToggle3}\n                    variant=\"plain\"\n                    aria-label=\"Data list mixed expandable example kebab toggle 3\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen3}\n                onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}\n              >\n                <DropdownList>\n                  <DropdownItem key=\"action3\">Action</DropdownItem>\n                  {/* Prevent default onClick functionality for example\n                  purposes */}\n                  <DropdownItem key=\"link3\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Link\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled action3\" isDisabled>\n                    Disabled Action\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled link3\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n          <DataListContent\n            aria-label=\"Third mixed expandable content details\"\n            id=\"m-ex-expand3\"\n            isHidden={!expanded.includes('m-ex-toggle3')}\n          >\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n              dolore magna aliqua.\n            </p>\n          </DataListContent>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n};\n","title":"Mixed expandable","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Width modifiers': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Content,\n  DataList,\n  DataListItem,\n  DataListCell,\n  DataListCheck,\n  DataListAction,\n  DataListToggle,\n  DataListContent,\n  DataListItemCells,\n  DataListItemRow,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const DataListWidthModifiers: React.FunctionComponent = () => {\n  const [show, setShow] = useState(true);\n  const [isOpen1, setIsOpen1] = useState(false);\n  const [isOpen2, setIsOpen2] = useState(false);\n\n  const onToggle1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onSelect1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onToggle2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onSelect2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  return (\n    <>\n      <div key=\"example-1\">\n        <Content>\n          <h4>Default fitting - example 1</h4>\n        </Content>\n        <DataList aria-label=\"Width modifier data list example 1\">\n          <DataListItem aria-labelledby=\"width-ex1-item1\">\n            <DataListItemRow>\n              <DataListCheck id=\"check-width-ex1-item1\" aria-labelledby=\"width-ex1-item1\" name=\"width-ex1-item1\" />\n              <DataListItemCells\n                dataListCells={[\n                  <DataListCell key=\"default\">\n                    <b id=\"width-ex1-item1\">default</b>\n                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\n                  </DataListCell>,\n                  <DataListCell key=\"default2\">\n                    <b>default</b>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut\n                      labore et dolore magna aliqua.\n                    </p>\n                  </DataListCell>\n                ]}\n              />\n            </DataListItemRow>\n          </DataListItem>\n        </DataList>\n      </div>\n      <div key=\"example-2\">\n        <Content>\n          <h4>Flex modifiers - example 2</h4>\n        </Content>\n        <DataList aria-label=\"Width modifier data list example 2\">\n          <DataListItem aria-labelledby=\"width-ex2-item1\">\n            <DataListItemRow>\n              <DataListCheck id=\"check-width-ex2-item1\" aria-labelledby=\"width-ex2-item1\" name=\"width-ex2-item1\" />\n              <DataListItemCells\n                dataListCells={[\n                  <DataListCell width={2} key=\"width 2\">\n                    <b id=\"width-ex2-item1\">width 2</b>\n                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>\n                  </DataListCell>,\n                  <DataListCell width={4} key=\"width 4\">\n                    <b>width 4</b>\n                    <p>Lorem ipsum dolor sit amet.</p>\n                  </DataListCell>\n                ]}\n              />\n              <DataListAction\n                aria-labelledby=\"width-ex2-item1 width-ex2-action1\"\n                id=\"width-ex2-action1\"\n                aria-label=\"Actions\"\n              >\n                <Dropdown\n                  popperProps={{ position: 'right' }}\n                  onSelect={onSelect1}\n                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      isExpanded={isOpen1}\n                      onClick={onToggle1}\n                      variant=\"plain\"\n                      aria-label=\"Data list width modifiers example kebab toggle 1\"\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                  isOpen={isOpen1}\n                  onOpenChange={(isOpen: boolean) => setIsOpen1(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      </div>\n      <div key=\"example-3\">\n        <Content>\n          <h4>Flex modifiers - example 3</h4>\n        </Content>\n        <DataList aria-label=\"Width modifier data list example 3\">\n          <DataListItem aria-labelledby=\"width-ex3-item1\" isExpanded={show}>\n            <DataListItemRow>\n              <DataListToggle\n                isExpanded={show}\n                id=\"width-ex3-toggle1\"\n                aria-controls=\"width-ex3-expand1\"\n                onClick={() => setShow(!show)}\n              />\n              <DataListCheck id=\"check-width-ex3-item1\" aria-labelledby=\"width-ex3-item1\" name=\"width-ex3-item1\" />\n              <DataListItemCells\n                dataListCells={[\n                  <DataListCell width={5} key=\"width 5\">\n                    <b id=\"width-ex3-item1\">width 5</b>\n                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\n                  </DataListCell>,\n                  <DataListCell width={2} key=\"width 2\">\n                    <b>width 2</b>\n                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>\n                  </DataListCell>,\n                  <DataListCell key=\"default\">default</DataListCell>\n                ]}\n              />\n              <DataListAction\n                aria-labelledby=\"width-ex3-item1 width-ex3-action1\"\n                id=\"width-ex3-action1\"\n                aria-label=\"Actions\"\n              >\n                <Dropdown\n                  popperProps={{ position: 'right' }}\n                  onSelect={onSelect2}\n                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      isExpanded={isOpen2}\n                      onClick={onToggle2}\n                      variant=\"plain\"\n                      aria-label=\"Data list width modifiers example kebab toggle 2\"\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                  isOpen={isOpen2}\n                  onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}\n                >\n                  <DropdownList>\n                    <DropdownItem key=\"action2\">Action</DropdownItem>\n                    {/* Prevent default onClick functionality for example\n                  purposes */}\n                    <DropdownItem key=\"link2\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                      Link\n                    </DropdownItem>\n                    <DropdownItem key=\"disabled action2\" isDisabled>\n                      Disabled Action\n                    </DropdownItem>\n                    <DropdownItem\n                      key=\"disabled link2\"\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            <DataListContent aria-label=\"Primary Content Details\" id=\"width-ex3-expand1\" isHidden={!show}>\n              <p>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n                dolore magna aliqua.\n              </p>\n            </DataListContent>\n          </DataListItem>\n        </DataList>\n      </div>\n    </>\n  );\n};\n","title":"Width modifiers","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Clickable rows': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  DataList,\n  DataListItem,\n  DataListCell,\n  DataListItemRow,\n  DataListItemCells,\n  DataListAction,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const DataListClickableRows: React.FunctionComponent = () => {\n  const [isOpen1, setIsOpen1] = useState(false);\n  const [isOpen2, setIsOpen2] = useState(false);\n  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');\n\n  const onToggle1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onSelect1 = () => {\n    setIsOpen1(!isOpen1);\n  };\n\n  const onToggle2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onSelect2 = () => {\n    setIsOpen2(!isOpen2);\n  };\n\n  const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => {\n    setSelectedDataListItemId(id);\n  };\n\n  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, id: string) => {\n    setSelectedDataListItemId(id);\n  };\n\n  return (\n    <Fragment>\n      <DataList\n        aria-label=\"clickable data list example\"\n        selectedDataListItemId={selectedDataListItemId}\n        onSelectDataListItem={onSelectDataListItem}\n        onSelectableRowChange={handleInputChange}\n      >\n        <DataListItem aria-labelledby=\"clickable-action-item1\" id=\"item1\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary content\">\n                  <span id=\"clickable-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=\"clickable-action-item1 clickable-action-action1\"\n              id=\"clickable-action-action1\"\n              aria-label=\"Actions\"\n            >\n              <Dropdown\n                popperProps={{ position: 'right' }}\n                onSelect={onSelect1}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen1}\n                    onClick={onToggle1}\n                    variant=\"plain\"\n                    aria-label=\"Data list clickable rows example kebab toggle 1\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen1}\n                onOpenChange={(isOpen: boolean) => setIsOpen1(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 key=\"disabled link\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem aria-labelledby=\"clickable-actions-item2\" id=\"item2\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary content\">\n                  <span id=\"clickable-actions-item2\">clickable actions Primary content</span>\n                </DataListCell>,\n                <DataListCell key=\"secondary content\">clickable actions Secondary content</DataListCell>\n              ]}\n            />\n            <DataListAction\n              aria-labelledby=\"clickable-actions-item2 clickable-actions-action2\"\n              id=\"clickable-actions-action2\"\n              aria-label=\"Actions\"\n            >\n              <Dropdown\n                popperProps={{ position: 'right' }}\n                onSelect={onSelect2}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen2}\n                    onClick={onToggle2}\n                    variant=\"plain\"\n                    aria-label=\"Data list clickable rows example kebab toggle 2\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen2}\n                onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}\n              >\n                <DropdownList>\n                  <DropdownItem key=\"action2\">Action</DropdownItem>\n                  {/* Prevent default onClick functionality for example\n                  purposes */}\n                  <DropdownItem key=\"link2\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Link\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled action2\" isDisabled>\n                    Disabled Action\n                  </DropdownItem>\n                  <DropdownItem key=\"disabled link2\" isDisabled to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                    Disabled Link\n                  </DropdownItem>\n                </DropdownList>\n              </Dropdown>\n            </DataListAction>\n          </DataListItemRow>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n};\n","title":"Clickable rows","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Controlling text': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  DataList,\n  DataListItem,\n  DataListItemRow,\n  DataListItemCells,\n  DataListCell,\n  DataListWrapModifier\n} from '@patternfly/react-core';\n\nexport const DataListControllingText: React.FunctionComponent = () => (\n  <DataList aria-label=\"Controlling text data list example\">\n    <DataListItem aria-labelledby=\"controlling-text-item1\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key=\"primary content\" wrapModifier={DataListWrapModifier.breakWord}>\n              <span id=\"controlling-text-item1\">Primary content</span>\n            </DataListCell>,\n            <DataListCell key=\"secondary content\" wrapModifier={DataListWrapModifier.truncate}>\n              Really really really really really really really really really really really really really really long\n              description that should be truncated before it ends\n            </DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n  </DataList>\n);\n","title":"Controlling text","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Draggable': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { DataList, DataListCell, DataListCheck, DataListControl, DataListItemCells } from '@patternfly/react-core';\nimport { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';\n\nconst getItems = (count: number): DraggableObject[] =>\n  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({\n    id: `data-list-item-${idx}`,\n    content: (\n      <>\n        <DataListControl>\n          <DataListCheck id={`check-drag-${idx}`} aria-labelledby={`item-${idx}`} name={`item-${idx}`} otherControls />\n        </DataListControl>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key={`item-${idx}`}>\n              <span id={`item-${idx}`}>{`item-${idx}`}</span>\n            </DataListCell>\n          ]}\n        />\n      </>\n    )\n  }));\n\nexport const DataListDraggable: React.FunctionComponent = (props) => {\n  const [items, setItems] = useState<DraggableObject[]>(getItems(10));\n\n  return (\n    <DragDropSort\n      items={items}\n      onDrop={(_, newItems) => {\n        setItems(newItems);\n      }}\n      variant=\"DataList\"\n      overlayProps={{ isCompact: true }}\n    >\n      <DataList aria-label=\"draggable data list example\" isCompact {...props} />\n    </DragDropSort>\n  );\n};\n","title":"Draggable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable drag and drop, wrap the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DataList>`}
-        </code>
-        {` component with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {`, define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property as "DataList", and pass both the sortable items and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onDrop`}
-        </code>
-        {` callback to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {`. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {` will create the component's usual children internally based on the items property, so children should not be passed to the wrapped component.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Full drag and drop details can be found on the `}
-        
-        <PatternflyThemeLink {...{"to":"/components/drag-and-drop","className":""}}>
-          {`drag and drop`}
-        </PatternflyThemeLink>
-        {` component page.`}
-      </p>
-    </Example>,
-  'Draggable with multiple drop zones': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  DataList,\n  DataListCell,\n  DataListCheck,\n  DataListControl,\n  DataListItemCells,\n  Grid,\n  GridItem\n} from '@patternfly/react-core';\nimport { DragDropContainer, DraggableObject, Droppable as NewDroppable } from '@patternfly/react-drag-drop';\n\nconst getItems = (from: number, count: number): DraggableObject[] =>\n  Array.from({ length: count }, (_, idx) => from + idx).map((idx) => ({\n    id: `data-list-item-${idx}`,\n    content: (\n      <>\n        <DataListControl>\n          <DataListCheck\n            id={`check-dragdrop=${idx}`}\n            aria-labelledby={`item-${idx}`}\n            name={`item-${idx}`}\n            otherControls\n          />\n        </DataListControl>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key={`item-${idx}`}>\n              <span id={`item-${idx}`}>{`item-${idx}`}</span>\n            </DataListCell>\n          ]}\n        />\n      </>\n    )\n  }));\n\nexport const DataListDraggable: React.FunctionComponent = (props) => {\n  const [items, setItems] = useState<Record<string, DraggableObject[]>>({\n    group1: getItems(0, 5),\n    group2: getItems(5, 5)\n  });\n\n  return (\n    <DragDropContainer\n      items={items}\n      onDrop={(_, newItems) => {\n        setItems(newItems);\n      }}\n      onContainerMove={(_, newItems) => {\n        setItems(newItems);\n      }}\n      onCancel={(_, prevItems) => {\n        setItems(prevItems);\n      }}\n      variant=\"DataList\"\n      overlayProps={{ isCompact: true }}\n    >\n      <Grid hasGutter>\n        <GridItem span={6}>\n          <h1>group 1</h1>\n          <NewDroppable\n            id=\"group1\"\n            items={items.group1}\n            variant=\"DataList\"\n            wrapper={<DataList aria-label=\"draggable data list example\" isCompact {...props} />}\n          />\n        </GridItem>\n        <GridItem span={6}>\n          <h1>group 2</h1>\n          <NewDroppable\n            id=\"group2\"\n            items={items.group2}\n            variant=\"DataList\"\n            wrapper={<DataList aria-label=\"draggable data list example\" isCompact {...props} />}\n          />\n        </GridItem>\n      </Grid>\n    </DragDropContainer>\n  );\n};\n","title":"Draggable with multiple drop zones","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable multiple drop zones, and create the desired amount of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` components within a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {`.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Each `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` should define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`wrapper`}
-        </code>
-        {` property as the component that acts as the drop zone, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DataList>`}
-        </code>
-        {`, and the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`items`}
-        </code>
-        {` property of their respective draggable items as an array of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DraggableObject>`}
-        </code>
-        {` data. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {` should be passed the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onDrop`}
-        </code>
-        {`, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onContainerMove`}
-        </code>
-        {`, and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onCancel`}
-        </code>
-        {` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {` should also be given a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Record`}
-        </code>
-        {` representing all sortable drop zones' items. Both components should define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property as "DataList".`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Full drag and drop details can be found on the `}
-        
-        <PatternflyThemeLink {...{"to":"/components/drag-and-drop","className":""}}>
-          {`drag and drop`}
-        </PatternflyThemeLink>
-        {` component page.`}
-      </p>
-    </Example>,
-  'Small grid breakpoint': props => 
-    <Example {...pageData} {...props} {...{"code":"import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';\n\nexport const DataListSmGridBreakpoint: React.FunctionComponent = () => (\n  <DataList aria-label=\"Small grid breakpoint list example\" gridBreakpoint=\"sm\">\n    <DataListItem aria-labelledby=\"sm-grid-item1\">\n      <DataListItemRow>\n        <DataListItemCells\n          dataListCells={[\n            <DataListCell key=\"primary content\">\n              <span id=\"sm-grid-item1\">Primary content</span>\n            </DataListCell>,\n            <DataListCell key=\"secondary content\">\n              Really really really really really really really really really really really really really really long\n              description that should be truncated before it ends\n            </DataListCell>\n          ]}\n        />\n      </DataListItemRow>\n    </DataListItem>\n  </DataList>\n);\n","title":"Small grid breakpoint","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Basic"])}
-    {React.createElement(pageData.examples["Compact"])}
-    {React.createElement(pageData.examples["Plain"])}
-    {React.createElement(pageData.examples["Checkboxes, actions and additional cells"])}
-    {React.createElement(pageData.examples["Actions: single and multiple"])}
-    {React.createElement(pageData.examples["Expandable"])}
-    {React.createElement(pageData.examples["Mixed expandable"])}
-    {React.createElement(pageData.examples["Width modifiers"])}
-    {React.createElement(pageData.examples["Clickable rows"])}
-    {React.createElement(pageData.examples["Controlling text"])}
-    {React.createElement(pageData.examples["Draggable"])}
-    {React.createElement(pageData.examples["Draggable with multiple drop zones"])}
-    {React.createElement(pageData.examples["Small grid breakpoint"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsDataListReactDocs';
-Component.pageData = pageData;
-
-export default Component;