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

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

@@ -1,126 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-
-const pageData = {
-  "id": "Divider",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/divider/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Divider/examples/Divider.md",
-  "relPath": "packages/react-core/src/components/Divider/examples/Divider.md",
-  "propComponents": [
-    {
-      "name": "Divider",
-      "description": "",
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the divider"
-        },
-        {
-          "name": "component",
-          "type": "'hr' | 'li' | 'div'",
-          "description": "The component type to use",
-          "defaultValue": "DividerVariant.hr"
-        },
-        {
-          "name": "inset",
-          "type": "{\n  default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n}",
-          "description": "Insets at various breakpoints."
-        },
-        {
-          "name": "orientation",
-          "type": "{\n  default?: 'vertical' | 'horizontal';\n  sm?: 'vertical' | 'horizontal';\n  md?: 'vertical' | 'horizontal';\n  lg?: 'vertical' | 'horizontal';\n  xl?: 'vertical' | 'horizontal';\n  '2xl'?: 'vertical' | 'horizontal';\n}",
-          "description": "Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout."
-        },
-        {
-          "name": "role",
-          "type": "'separator' | 'presentation'",
-          "description": "The ARIA role of the divider when the component property has a value other than \"hr\".",
-          "defaultValue": "'separator'"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-divider"
-  ],
-  "examples": [
-    "Using hr",
-    "Using li",
-    "Using div",
-    "Inset medium",
-    "Inset at various breakpoints",
-    "Vertical in flex layout",
-    "Vertical in flex layout, inset small",
-    "Vertical in flex layout, inset at various breakpoints",
-    "Switch orientation at various breakpoints"
-  ]
-};
-pageData.examples = {
-  'Using hr': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider } from '@patternfly/react-core';\n\nexport const DividerUsingHr: React.FunctionComponent = () => <Divider />;\n","title":"Using hr","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Using li': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider } from '@patternfly/react-core';\n\nexport const DividerUsingLi: React.FunctionComponent = () => (\n  <ul role=\"list\">\n    <li>List item one</li>\n    <Divider component=\"li\" role=\"none\" />\n    <li>List item two</li>\n  </ul>\n);\n","title":"Using li","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Using div': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider } from '@patternfly/react-core';\n\nexport const DividerUsingDiv: React.FunctionComponent = () => <Divider component=\"div\" />;\n","title":"Using div","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Inset medium': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider } from '@patternfly/react-core';\n\nexport const DividerInsetMedium: React.FunctionComponent = () => <Divider inset={{ default: 'insetMd' }} />;\n","title":"Inset medium","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Inset at various breakpoints': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider } from '@patternfly/react-core';\n\nexport const DividerInsetVariousBreakpoints: React.FunctionComponent = () => (\n  <Divider\n    inset={{\n      default: 'insetMd',\n      md: 'insetNone',\n      lg: 'inset3xl',\n      xl: 'insetLg'\n    }}\n  />\n);\n","title":"Inset at various breakpoints","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Vertical in flex layout': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider, Flex, FlexItem } from '@patternfly/react-core';\n\nexport const DividerVerticalFlex: React.FunctionComponent = () => (\n  <Flex>\n    <FlexItem>first item</FlexItem>\n    <Divider\n      orientation={{\n        default: 'vertical'\n      }}\n    />\n    <FlexItem>second item</FlexItem>\n  </Flex>\n);\n","title":"Vertical in flex layout","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Vertical in flex layout, inset small': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider, Flex, FlexItem } from '@patternfly/react-core';\n\nexport const DividerVerticalFlexInsetSmall: React.FunctionComponent = () => (\n  <Flex>\n    <FlexItem>first item</FlexItem>\n    <Divider\n      orientation={{\n        default: 'vertical'\n      }}\n      inset={{ default: 'insetSm' }}\n    />\n    <FlexItem>second item</FlexItem>\n  </Flex>\n);\n","title":"Vertical in flex layout, inset small","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Vertical in flex layout, inset at various breakpoints': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider, Flex, FlexItem } from '@patternfly/react-core';\n\nexport const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent = () => (\n  <Flex>\n    <FlexItem>first item</FlexItem>\n    <Divider\n      orientation={{\n        default: 'vertical'\n      }}\n      inset={{\n        default: 'insetMd',\n        md: 'insetNone',\n        lg: 'insetSm',\n        xl: 'insetXs'\n      }}\n    />\n    <FlexItem>second item</FlexItem>\n  </Flex>\n);\n","title":"Vertical in flex layout, inset at various breakpoints","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Switch orientation at various breakpoints': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Divider, Flex, FlexItem } from '@patternfly/react-core';\n\nexport const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => (\n  <Flex>\n    <FlexItem>first item</FlexItem>\n    <Divider\n      orientation={{\n        default: 'vertical',\n        sm: 'horizontal',\n        md: 'vertical',\n        lg: 'horizontal',\n        xl: 'vertical',\n        '2xl': 'horizontal'\n      }}\n    />\n    <FlexItem>second item</FlexItem>\n  </Flex>\n);\n","title":"Switch orientation at various breakpoints","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Using hr"])}
-    {React.createElement(pageData.examples["Using li"])}
-    {React.createElement(pageData.examples["Using div"])}
-    {React.createElement(pageData.examples["Inset medium"])}
-    {React.createElement(pageData.examples["Inset at various breakpoints"])}
-    {React.createElement(pageData.examples["Vertical in flex layout"])}
-    {React.createElement(pageData.examples["Vertical in flex layout, inset small"])}
-    {React.createElement(pageData.examples["Vertical in flex layout, inset at various breakpoints"])}
-    {React.createElement(pageData.examples["Switch orientation at various breakpoints"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsDividerReactDocs';
-Component.pageData = pageData;
-
-export default Component;

package/patternfly-docs/generated/components/drag-and-drop/react-demos.js

@@ -1,351 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useEffect, useState } from 'react';
-import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
-const pageData = {
-  "id": "Drag and drop",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-demos",
-  "tabName": null,
-  "slug": "/components/drag-and-drop/react-demos",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md",
-  "relPath": "packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md",
-  "propComponents": [
-    {
-      "name": "DragDropSort",
-      "description": "DragDropSortProps extends dnd-kit's props which may be viewed at https://docs.dndkit.com/api-documentation/context-provider#props.",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactElement<any>",
-          "description": "Custom defined content wrapper for draggable items. By default, draggable items are wrapped in a styled div.\nIntended to be a 'DataList' or 'DualListSelectorList' without children."
-        },
-        {
-          "name": "items",
-          "type": "DraggableObject[]",
-          "description": "Sorted array of draggable objects",
-          "required": true
-        },
-        {
-          "name": "onDrag",
-          "type": "(event: DragDropSortDragStartEvent, oldIndex: number) => void",
-          "description": "Callback when use begins dragging a draggable object",
-          "defaultValue": "() => {}"
-        },
-        {
-          "name": "onDrop",
-          "type": "(event: DragDropSortDragEndEvent, items: DraggableObject[], oldIndex?: number, newIndex?: number) => void",
-          "description": "Callback when user drops a draggable object",
-          "defaultValue": "() => {}"
-        },
-        {
-          "name": "overlayProps",
-          "type": "any",
-          "description": "Additional classes to apply to the drag overlay"
-        },
-        {
-          "name": "variant",
-          "type": "'default' | 'DataList' | 'DualListSelectorList'",
-          "description": "The variant determines which component wraps the draggable object.\nDefault variant wraps the draggable object in a div.\nDataList variant wraps the draggable object in a DataListItem\nDualListSelectorList variant wraps the draggable objects in a DualListSelectorListItem and a div.pf-c-dual-list-selector__item-text element",
-          "defaultValue": "'default'"
-        }
-      ]
-    },
-    {
-      "name": "DraggableObject",
-      "description": "",
-      "props": [
-        {
-          "name": "content",
-          "type": "React.ReactNode",
-          "description": "Content rendered in the draggable object",
-          "required": true
-        },
-        {
-          "name": "id",
-          "type": "string | number",
-          "description": "Unique id of the draggable object",
-          "required": true
-        },
-        {
-          "name": "props",
-          "type": "any",
-          "description": "Props spread to the rendered wrapper of the draggable object"
-        }
-      ]
-    }
-  ],
-  "examples": [
-    "Drag and drop sortable data list",
-    "Drag and drop sortable dual list selector",
-    "Data list",
-    "Dual list selector"
-  ]
-};
-pageData.liveContext = {
-  useEffect,
-  useState,
-  RhMicronsDoubleCaretLeftIcon,
-  AngleLeftIcon,
-  AngleDoubleRightIcon,
-  AngleRightIcon,
-  DragDropSort,
-  DragDropContainer,
-  NewDroppable
-};
-pageData.examples = {
-  'Drag and drop sortable data list': 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":"Drag and drop sortable data list","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable reordering in a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DataList>`}
-        </code>
-        {`, wrap the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DataList>`}
-        </code>
-        {` component with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {` and define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` as "DataList".`}
-      </p>
-    </Example>,
-  'Drag and drop sortable dual list selector': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  DualListSelector,\n  DualListSelectorPane,\n  DualListSelectorList,\n  DualListSelectorListItem,\n  DualListSelectorControlsWrapper,\n  DualListSelectorControl\n} from '@patternfly/react-core';\nimport { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';\n\nimport RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';\nimport AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';\nimport AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';\nimport AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';\n\nexport const ComposableDualListSelector: React.FunctionComponent = () => {\n  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = useState(false);\n  const [availableOptions, setAvailableOptions] = useState<DraggableObject[]>([\n    { id: 'Apple', content: 'Apple', props: { key: 'Apple', isSelected: false } },\n    { id: 'Banana', content: 'Banana', props: { key: 'Banana', isSelected: false } },\n    { id: 'Pineapple', content: 'Pineapple', props: { key: 'Pineapple', isSelected: false } }\n  ]);\n\n  const [chosenOptions, setChosenOptions] = useState<DraggableObject[]>([\n    { id: 'Orange', content: 'Orange', props: { key: 'Orange', isSelected: false } },\n    { id: 'Grape', content: 'Grape', props: { key: 'Grape', isSelected: false } },\n    { id: 'Peach', content: 'Peach', props: { key: 'Peach', isSelected: false } },\n    { id: 'Strawberry', content: 'Strawberry', props: { key: 'Strawberry', isSelected: false } }\n  ]);\n\n  const moveSelected = (fromAvailable) => {\n    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;\n    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;\n    for (let i = 0; i < sourceOptions.length; i++) {\n      const option = sourceOptions[i];\n      if (option.props.isSelected) {\n        sourceOptions.splice(i, 1);\n        destinationOptions.push(option);\n        option.props.isSelected = false;\n        i--;\n      }\n    }\n    if (fromAvailable) {\n      setAvailableOptions([...sourceOptions]);\n      setChosenOptions([...destinationOptions]);\n    } else {\n      setChosenOptions([...sourceOptions]);\n      setAvailableOptions([...destinationOptions]);\n    }\n  };\n\n  const moveAll = (fromAvailable) => {\n    if (fromAvailable) {\n      setChosenOptions([...availableOptions, ...chosenOptions]);\n      setAvailableOptions([]);\n    } else {\n      setAvailableOptions([...chosenOptions, ...availableOptions]);\n      setChosenOptions([]);\n    }\n  };\n\n  const onOptionSelect = (event, index, isChosen) => {\n    if (ignoreNextOptionSelect) {\n      setIgnoreNextOptionSelect(false);\n      return;\n    }\n    if (isChosen) {\n      const newChosen = [...chosenOptions];\n      newChosen[index].props.isSelected = !chosenOptions[index].props.isSelected;\n      setChosenOptions(newChosen);\n    } else {\n      const newAvailable = [...availableOptions];\n      newAvailable[index].props.isSelected = !availableOptions[index].props.isSelected;\n      setAvailableOptions(newAvailable);\n    }\n  };\n\n  return (\n    <DualListSelector>\n      <DualListSelectorPane\n        title=\"Available\"\n        status={`${availableOptions.filter((x) => x.props.isSelected).length} of ${\n          availableOptions.length\n        } options selected`}\n      >\n        <DualListSelectorList>\n          {availableOptions.map((option, index) => (\n            <DualListSelectorListItem\n              key={index}\n              isSelected={option.props.isSelected}\n              id={`composable-available-option-${option.content}`}\n              onOptionSelect={(e) => onOptionSelect(e, index, false)}\n            >\n              {option.content}\n            </DualListSelectorListItem>\n          ))}\n        </DualListSelectorList>\n      </DualListSelectorPane>\n      <DualListSelectorControlsWrapper aria-label=\"Selector controls\">\n        <DualListSelectorControl\n          isDisabled={!availableOptions.some((option) => option.props.isSelected)}\n          onClick={() => moveSelected(true)}\n          aria-label=\"Add selected\"\n          icon={<AngleRightIcon />}\n        />\n        <DualListSelectorControl\n          isDisabled={availableOptions.length === 0}\n          onClick={() => moveAll(true)}\n          aria-label=\"Add all\"\n          icon={<AngleDoubleRightIcon />}\n        />\n        <DualListSelectorControl\n          isDisabled={chosenOptions.length === 0}\n          onClick={() => moveAll(false)}\n          aria-label=\"Remove all\"\n          icon={<RhMicronsDoubleCaretLeftIcon />}\n        />\n        <DualListSelectorControl\n          onClick={() => moveSelected(false)}\n          isDisabled={!chosenOptions.some((option) => option.props.isSelected)}\n          aria-label=\"Remove selected\"\n          icon={<AngleLeftIcon />}\n        />\n      </DualListSelectorControlsWrapper>\n      <DualListSelectorPane\n        title=\"Chosen\"\n        status={`${chosenOptions.filter((x) => x.props.isSelected).length} of ${chosenOptions.length} options selected`}\n        isChosen\n      >\n        <DragDropSort\n          items={chosenOptions.map((option, index) => ({\n            ...option,\n            props: {\n              key: option.props.key,\n              isSelected: option.props.isSelected,\n              onOptionSelect: (e) => onOptionSelect(e, index, true)\n            }\n          }))}\n          onDrop={(_, newItems) => {\n            setChosenOptions(newItems);\n          }}\n          variant=\"DualListSelectorList\"\n        >\n          <DualListSelectorList />\n        </DragDropSort>\n      </DualListSelectorPane>\n    </DualListSelector>\n  );\n};\n","title":"Drag and drop sortable dual list selector","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable reordering in a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelector>`}
-        </code>
-        {` pane wrap the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelectorList>`}
-        </code>
-        {` component with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {` and define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` as "DualListSelectorList".`}
-      </p>
-    </Example>,
-  'Data list': 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":"Data list","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable multiple drop zones with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DataList>`}
-        </code>
-        {` components, place one or more `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` within `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {` and define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` on all components as "DataList".`}
-      </p>
-    </Example>,
-  'Dual list selector': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport {\n  DualListSelector,\n  DualListSelectorPane,\n  DualListSelectorList,\n  DualListSelectorControlsWrapper,\n  DualListSelectorControl\n} from '@patternfly/react-core';\nimport { DragDropContainer, DraggableObject, Droppable as NewDroppable } from '@patternfly/react-drag-drop';\n\nimport RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';\nimport AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';\nimport AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';\nimport AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';\n\nexport const DragDropContainerDualListSelector: React.FunctionComponent = () => {\n  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = useState(false);\n  const [availableOptions, setAvailableOptions] = useState<DraggableObject[]>([\n    { id: 'Apple', content: 'Apple', props: { key: 'Apple', isSelected: false } },\n    { id: 'Banana', content: 'Banana', props: { key: 'Banana', isSelected: false } },\n    { id: 'Pineapple', content: 'Pineapple', props: { key: 'Pineapple', isSelected: false } }\n  ]);\n\n  const [chosenOptions, setChosenOptions] = useState<DraggableObject[]>([\n    { id: 'Orange', content: 'Orange', props: { key: 'Orange', isSelected: false } },\n    { id: 'Grape', content: 'Grape', props: { key: 'Grape', isSelected: false } },\n    { id: 'Peach', content: 'Peach', props: { key: 'Peach', isSelected: false } },\n    { id: 'Strawberry', content: 'Strawberry', props: { key: 'Strawberry', isSelected: false } }\n  ]);\n\n  const [allDraggableItems, setAllItems] = useState<Record<string, DraggableObject[]>>({\n    available: availableOptions.map((option, index) => ({\n      ...option,\n      props: {\n        key: option.props.key,\n        isSelected: option.props.isSelected,\n        onOptionSelect: (e) => onOptionSelect(e, index, false)\n      }\n    })),\n    chosen: chosenOptions.map((option, index) => ({\n      ...option,\n      props: {\n        key: option.props.key,\n        isSelected: option.props.isSelected,\n        onOptionSelect: (e) => onOptionSelect(e, index, true)\n      }\n    }))\n  });\n\n  const handleDragOperation = (_event: any, items: Record<string, DraggableObject[]>) => {\n    setAvailableOptions(items.available);\n    setChosenOptions(items.chosen);\n    setAllItems(items);\n  };\n\n  useEffect(() => {\n    setAllItems({\n      available: availableOptions.map((option, index) => ({\n        ...option,\n        props: {\n          key: option.props.key,\n          isSelected: option.props.isSelected,\n          onOptionSelect: (e) => onOptionSelect(e, index, false)\n        }\n      })),\n      chosen: chosenOptions.map((option, index) => ({\n        ...option,\n        props: {\n          key: option.props.key,\n          isSelected: option.props.isSelected,\n          onOptionSelect: (e) => onOptionSelect(e, index, true)\n        }\n      }))\n    });\n  }, [availableOptions, chosenOptions]);\n\n  const moveSelected = (fromAvailable) => {\n    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;\n    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;\n    for (let i = 0; i < sourceOptions.length; i++) {\n      const option = sourceOptions[i];\n      if (option.props.isSelected) {\n        sourceOptions.splice(i, 1);\n        destinationOptions.push(option);\n        option.props.isSelected = false;\n        i--;\n      }\n    }\n    if (fromAvailable) {\n      setAvailableOptions([...sourceOptions]);\n      setChosenOptions([...destinationOptions]);\n    } else {\n      setChosenOptions([...sourceOptions]);\n      setAvailableOptions([...destinationOptions]);\n    }\n  };\n\n  const moveAll = (fromAvailable) => {\n    if (fromAvailable) {\n      setChosenOptions([...availableOptions, ...chosenOptions]);\n      setAvailableOptions([]);\n    } else {\n      setAvailableOptions([...chosenOptions, ...availableOptions]);\n      setChosenOptions([]);\n    }\n  };\n\n  const onOptionSelect = (event, index, isChosen) => {\n    if (ignoreNextOptionSelect) {\n      setIgnoreNextOptionSelect(false);\n      return;\n    }\n    if (isChosen) {\n      const newChosen = [...chosenOptions];\n      newChosen[index].props.isSelected = !chosenOptions[index].props.isSelected;\n      setChosenOptions(newChosen);\n    } else {\n      const newAvailable = [...availableOptions];\n      newAvailable[index].props.isSelected = !availableOptions[index].props.isSelected;\n      setAvailableOptions(newAvailable);\n    }\n  };\n\n  return (\n    <DragDropContainer\n      items={allDraggableItems}\n      onDrop={handleDragOperation}\n      onContainerMove={handleDragOperation}\n      onCancel={handleDragOperation}\n      variant=\"DualListSelectorList\"\n    >\n      <DualListSelector>\n        <DualListSelectorPane\n          title=\"Available\"\n          status={`${availableOptions.filter((x) => x.props.isSelected).length} of ${\n            availableOptions.length\n          } options selected`}\n        >\n          <NewDroppable\n            id=\"available\"\n            items={allDraggableItems.available}\n            variant=\"DualListSelectorList\"\n            wrapper={<DualListSelectorList />}\n          />\n        </DualListSelectorPane>\n        <DualListSelectorControlsWrapper aria-label=\"Selector controls\">\n          <DualListSelectorControl\n            isDisabled={!availableOptions.some((option) => option.props.isSelected)}\n            onClick={() => moveSelected(true)}\n            aria-label=\"Add selected\"\n          >\n            <AngleRightIcon />\n          </DualListSelectorControl>\n          <DualListSelectorControl\n            isDisabled={availableOptions.length === 0}\n            onClick={() => moveAll(true)}\n            aria-label=\"Add all\"\n          >\n            <AngleDoubleRightIcon />\n          </DualListSelectorControl>\n          <DualListSelectorControl\n            isDisabled={chosenOptions.length === 0}\n            onClick={() => moveAll(false)}\n            aria-label=\"Remove all\"\n          >\n            <RhMicronsDoubleCaretLeftIcon />\n          </DualListSelectorControl>\n          <DualListSelectorControl\n            onClick={() => moveSelected(false)}\n            isDisabled={!chosenOptions.some((option) => option.props.isSelected)}\n            aria-label=\"Remove selected\"\n          >\n            <AngleLeftIcon />\n          </DualListSelectorControl>\n        </DualListSelectorControlsWrapper>\n        <DualListSelectorPane\n          title=\"Chosen\"\n          status={`${chosenOptions.filter((x) => x.props.isSelected).length} of ${chosenOptions.length} options selected`}\n          isChosen\n        >\n          <NewDroppable\n            id=\"chosen\"\n            items={allDraggableItems.chosen}\n            variant=\"DualListSelectorList\"\n            wrapper={<DualListSelectorList />}\n          />\n        </DualListSelectorPane>\n      </DualListSelector>\n    </DragDropContainer>\n  );\n};\n","title":"Dual list selector","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable multiple drop zones in a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelector>`}
-        </code>
-        {`, wrap the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelector>`}
-        </code>
-        {` component with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {`, and then include a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` component within each pane. Both `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` should define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property as "DualListSelectorList".`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Note: This drag and drop implementation lives in its own package at `}
-      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-drag-drop","className":""}}>
-        {`@patternfly/react-drag-drop`}
-      </PatternflyThemeLink>
-      {`!`}
-    </p>
-    <AutoLinkHeader {...{"id":"sorting-demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Sorting demos`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`To enable drag and drop for compatible components, wrap the component with `}
-      <code {...{"className":"ws-code "}}>
-        {`<DragDropSort>`}
-      </code>
-      {`, define the `}
-      <code {...{"className":"ws-code "}}>
-        {`variant`}
-      </code>
-      {` property, and pass both the sortable `}
-      <code {...{"className":"ws-code "}}>
-        {`items`}
-      </code>
-      {` 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 `}
-      <code {...{"className":"ws-code "}}>
-        {`children`}
-      </code>
-      {` internally based on the `}
-      <code {...{"className":"ws-code "}}>
-        {`items`}
-      </code>
-      {` property, so `}
-      <code {...{"className":"ws-code "}}>
-        {`children`}
-      </code>
-      {` should not be passed to the wrapped component.`}
-    </p>
-    {React.createElement(pageData.examples["Drag and drop sortable data list"])}
-    {React.createElement(pageData.examples["Drag and drop sortable dual list selector"])}
-    <AutoLinkHeader {...{"id":"multiple-drop-zone-demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Multiple drop zone demos`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`To enable multiple drop zones, wrap the component with `}
-      <code {...{"className":"ws-code "}}>
-        {`<DragDropContainer>`}
-      </code>
-      {`, place one or more `}
-      <code {...{"className":"ws-code "}}>
-        {`<Droppable>`}
-      </code>
-      {` components within the container, and define the `}
-      <code {...{"className":"ws-code "}}>
-        {`variant`}
-      </code>
-      {` property on all components. A collection of all draggable items should be passed to `}
-      <code {...{"className":"ws-code "}}>
-        {`<DragDropContainer>`}
-      </code>
-      {`, and each `}
-      <code {...{"className":"ws-code "}}>
-        {`<Droppable>`}
-      </code>
-      {` should be passed their respective draggable items.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      <code {...{"className":"ws-code "}}>
-        {`<Droppable>`}
-      </code>
-      {` will create the component's usual `}
-      <code {...{"className":"ws-code "}}>
-        {`children`}
-      </code>
-      {` internally based on the `}
-      <code {...{"className":"ws-code "}}>
-        {`items`}
-      </code>
-      {` property, so `}
-      <code {...{"className":"ws-code "}}>
-        {`children`}
-      </code>
-      {` should not be passed where the `}
-      <code {...{"className":"ws-code "}}>
-        {`<Droppable>`}
-      </code>
-      {` is defined.`}
-    </p>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`To avoid a wrapping div inserted by `}
-      <code {...{"className":"ws-code "}}>
-        {`<Droppable>`}
-      </code>
-      {`, pass the desired container element to the `}
-      <code {...{"className":"ws-code "}}>
-        {`wrapper`}
-      </code>
-      {` property.`}
-    </p>
-    {React.createElement(pageData.examples["Data list"])}
-    {React.createElement(pageData.examples["Dual list selector"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsDragAndDropReactDemosDocs';
-Component.pageData = pageData;
-
-export default Component;