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

package/patternfly-docs/generated/components/dual-list-selector/react-deprecated.js

@@ -0,0 +1,772 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useMemo, useState } from 'react';
+import {
+DragDrop,
+Draggable,
+Droppable,
+DualListSelector as DLSDeprecated,
+DualListSelectorPane as DLSPaneDeprecated,
+DualListSelectorList as DLSListDeprecated,
+DualListSelectorListItem as DLSListItemDeprecated,
+DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+DualListSelectorControl as DLSControlDeprecated,
+DualListSelectorTree as DLSTreeDeprecated,
+} from '@patternfly/react-core/deprecated';
+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 RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+const pageData = {
+  "id": "Dual list selector",
+  "section": "components",
+  "subsection": "",
+  "deprecated": true,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-deprecated",
+  "tabName": null,
+  "slug": "/components/dual-list-selector/react-deprecated",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md",
+  "relPath": "packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md",
+  "propComponents": [
+    {
+      "name": "DualListSelector",
+      "description": "Acts as a container for all other DualListSelector sub-components when using a\ncomposable dual list selector.",
+      "props": [
+        {
+          "name": "addAll",
+          "type": "(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void",
+          "description": "Optional callback for the dynamically built add all button"
+        },
+        {
+          "name": "addAllAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the dynamically built add all button",
+          "defaultValue": "'Add all'"
+        },
+        {
+          "name": "addAllTooltip",
+          "type": "React.ReactNode",
+          "description": "Tooltip content for the dynamically built add all button"
+        },
+        {
+          "name": "addAllTooltipProps",
+          "type": "any",
+          "description": "Additional tooltip properties for the dynamically built add all tooltip"
+        },
+        {
+          "name": "addSelected",
+          "type": "(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void",
+          "description": "Optional callback for the dynamically built add selected button"
+        },
+        {
+          "name": "addSelectedAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the dynamically built add selected button",
+          "defaultValue": "'Add selected'"
+        },
+        {
+          "name": "addSelectedTooltip",
+          "type": "React.ReactNode",
+          "description": "Tooltip content for the dynamically built add selected button"
+        },
+        {
+          "name": "addSelectedTooltipProps",
+          "type": "any",
+          "description": "Additional tooltip properties for the dynamically built add selected tooltip"
+        },
+        {
+          "name": "availableOptions",
+          "type": "React.ReactNode[] | DualListSelectorTreeItemData[]",
+          "description": "Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.",
+          "defaultValue": "[]"
+        },
+        {
+          "name": "availableOptionsActions",
+          "type": "React.ReactNode[]",
+          "description": "Actions to be displayed above the dynamically built available options pane."
+        },
+        {
+          "name": "availableOptionsSearchAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the search input on the dynamically built available options pane.",
+          "defaultValue": "'Available search input'"
+        },
+        {
+          "name": "availableOptionsStatus",
+          "type": "string",
+          "description": "Status message to display above the dynamically built available options pane."
+        },
+        {
+          "name": "availableOptionsTitle",
+          "type": "string",
+          "description": "Title applied to the dynamically built available options pane.",
+          "defaultValue": "'Available options'"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "chosenOptions",
+          "type": "React.ReactNode[] | DualListSelectorTreeItemData[]",
+          "description": "Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.",
+          "defaultValue": "[]"
+        },
+        {
+          "name": "chosenOptionsActions",
+          "type": "React.ReactNode[]",
+          "description": "Actions to be displayed above the dynamically built chosen options pane."
+        },
+        {
+          "name": "chosenOptionsSearchAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the search input on the dynamically built chosen options pane.",
+          "defaultValue": "'Chosen search input'"
+        },
+        {
+          "name": "chosenOptionsStatus",
+          "type": "string",
+          "description": "Status message to display above the dynamically built chosen options pane."
+        },
+        {
+          "name": "chosenOptionsTitle",
+          "type": "string",
+          "description": "Title applied to the dynamically built chosen options pane.",
+          "defaultValue": "'Chosen options'"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the dual list selector."
+        },
+        {
+          "name": "controlsAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the dynamically built controls between the two panes.",
+          "defaultValue": "'Selector controls'"
+        },
+        {
+          "name": "filterOption",
+          "type": "(option: React.ReactNode, input: string) => boolean",
+          "description": "Optional filter function for custom filtering based on search string. Used with a dynamically built search input."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the dual list selector."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the dual list selector is in a disabled state",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isSearchable",
+          "type": "boolean",
+          "description": "Flag indicating a search bar should be included above both the dynamically built available and chosen panes."
+        },
+        {
+          "name": "isTree",
+          "type": "boolean",
+          "description": "Flag indicating if the dual list selector uses trees instead of simple lists",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onAvailableOptionsSearchInputChanged",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "A callback for when the search input value for the dynamically built available options changes."
+        },
+        {
+          "name": "onChosenOptionsSearchInputChanged",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "A callback for when the search input value for the dynamically built chosen options changes."
+        },
+        {
+          "name": "onListChange",
+          "type": "(\n  event: React.MouseEvent<HTMLElement>,\n  newAvailableOptions: React.ReactNode[],\n  newChosenOptions: React.ReactNode[]\n) => void",
+          "description": "Callback fired every time dynamically built options are chosen or removed"
+        },
+        {
+          "name": "onOptionCheck",
+          "type": "(\n  event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,\n  checked: boolean,\n  checkedId: string,\n  newCheckedItems: string[]\n) => void",
+          "description": "Optional callback fired when a dynamically built option is checked"
+        },
+        {
+          "name": "onOptionSelect",
+          "type": "(\n  event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,\n  index: number,\n  isChosen: boolean,\n  id: string,\n  itemData: any,\n  parentData: any\n) => void",
+          "description": "Optional callback fired when a dynamically built option is selected"
+        },
+        {
+          "name": "removeAll",
+          "type": "(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void",
+          "description": "Optional callback for the dynamically built remove all button"
+        },
+        {
+          "name": "removeAllAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the dynamically built remove all button",
+          "defaultValue": "'Remove all'"
+        },
+        {
+          "name": "removeAllTooltip",
+          "type": "React.ReactNode",
+          "description": "Tooltip content for the dynamically built remove all button"
+        },
+        {
+          "name": "removeAllTooltipProps",
+          "type": "any",
+          "description": "Additional tooltip properties for the dynamically built remove all tooltip"
+        },
+        {
+          "name": "removeSelected",
+          "type": "(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void",
+          "description": "Optional callback for the dynamically built remove selected button"
+        },
+        {
+          "name": "removeSelectedAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the dynamically built remove selected button",
+          "defaultValue": "'Remove selected'"
+        },
+        {
+          "name": "removeSelectedTooltip",
+          "type": "React.ReactNode",
+          "description": "Tooltip content for the dynamically built remove selected button"
+        },
+        {
+          "name": "removeSelectedTooltipProps",
+          "type": "any",
+          "description": "Additional tooltip properties for the dynamically built remove selected tooltip"
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorPane",
+      "description": "Acts as the container for a list of options that are either available or chosen,\ndepending on the pane type (available or chosen). A search input and other actions,\nsuch as sorting, can also be passed into this sub-component.",
+      "props": [
+        {
+          "name": "actions",
+          "type": "React.ReactNode[]",
+          "description": "Actions to place above the pane."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "A dual list selector list or dual list selector tree to be rendered in the pane."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the dual list selector pane.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the pane."
+        },
+        {
+          "name": "isChosen",
+          "type": "boolean",
+          "description": "Flag indicating if this pane is the chosen pane.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating whether the component is disabled.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "listMinHeight",
+          "type": "string",
+          "description": "Minimum height of the list of options rendered in the pane. *"
+        },
+        {
+          "name": "onSearch",
+          "type": "(event: React.ChangeEvent<HTMLInputElement>) => void",
+          "description": "Callback for search input. To be used when isSearchable is true."
+        },
+        {
+          "name": "searchInput",
+          "type": "React.ReactNode",
+          "description": "A search input placed above the list at the top of the pane, before actions."
+        },
+        {
+          "name": "status",
+          "type": "string",
+          "description": "Status to display above the pane.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Title of the pane.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorList",
+      "description": "Acts as the container for DualListSelectorListItem sub-components.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the dual list selector list"
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorListItem",
+      "description": "Creates an individual option that can be selected and moved between the\ndual list selector panes. This is contained within the DualListSelectorList sub-component.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the dual list selector."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the dual list selector."
+        },
+        {
+          "name": "draggableButtonAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the draggable button on draggable list items"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the option."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the dual list selector is in a disabled state"
+        },
+        {
+          "name": "isDraggable",
+          "type": "boolean",
+          "description": "Flag indicating this item is draggable for reordering"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "description": "Flag indicating the list item is currently selected."
+        },
+        {
+          "name": "onOptionSelect",
+          "type": "(event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void",
+          "description": "Callback fired when an option is selected."
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorControlsWrapper",
+      "description": "Acts as the container for the DualListSelectorControl sub-components.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the dual list selector controls wrapper."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of the wrapper."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the wrapper."
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorControl",
+      "description": "Renders an individual control button for moving selected options between each\ndual list selector pane.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the dual list selector control."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the dual list selector control."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the dual list selector control."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the control is disabled."
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void",
+          "description": "Callback fired when dual list selector control is selected."
+        },
+        {
+          "name": "tooltipContent",
+          "type": "React.ReactNode",
+          "description": "Content to be displayed in a tooltip on hover of control."
+        },
+        {
+          "name": "tooltipProps",
+          "type": "any",
+          "description": "Additional tooltip properties passed to the tooltip."
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorTree",
+      "description": "Used in place of the DualListSelectorListItem sub-component when building a\ncomposable dual list selector with a tree.",
+      "props": [
+        {
+          "name": "data",
+          "type": "DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[])",
+          "description": "Data of the tree view",
+          "required": true
+        },
+        {
+          "name": "defaultAllExpanded",
+          "type": "boolean",
+          "description": "Sets the default expanded behavior",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasBadges",
+          "type": "boolean",
+          "description": "Flag indicating if all options should have badges",
+          "defaultValue": "false"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the tree view"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the dual list selector tree is in the disabled state",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onOptionCheck",
+          "type": "(\n  event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,\n  isChecked: boolean,\n  itemData: DualListSelectorTreeItemData\n) => void",
+          "description": "Callback fired when an option is checked"
+        }
+      ]
+    },
+    {
+      "name": "DualListSelectorTreeItemData",
+      "description": "",
+      "props": [
+        {
+          "name": "badgeProps",
+          "type": "any",
+          "description": "Additional properties to pass to the option badge"
+        },
+        {
+          "name": "checkProps",
+          "type": "any",
+          "description": "Additional properties to pass to the option checkbox"
+        },
+        {
+          "name": "children",
+          "type": "DualListSelectorTreeItemData[]",
+          "description": "Content rendered inside the dual list selector."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the dual list selector."
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean",
+          "description": "Flag indicating this option is expanded by default."
+        },
+        {
+          "name": "hasBadge",
+          "type": "boolean",
+          "description": "Flag indicating this option has a badge"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the option",
+          "required": true
+        },
+        {
+          "name": "isChecked",
+          "type": "boolean",
+          "description": "Checked state of the option",
+          "required": true
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating whether the component is disabled."
+        },
+        {
+          "name": "onOptionCheck",
+          "type": "(\n    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,\n    isChecked: boolean,\n    isChosen: boolean,\n    itemData: DualListSelectorTreeItemData\n  ) => void",
+          "description": "Callback fired when an option is checked"
+        },
+        {
+          "name": "parentId",
+          "type": "string",
+          "description": "Parent id of an option"
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "description": "Text of the option",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-dual-list-selector"
+  ],
+  "examples": [
+    "Basic",
+    "Basic with tooltips",
+    "Basic with search",
+    "Using more complex options with actions",
+    "With tree",
+    "Composable dual list selector",
+    "Composable with drag and drop",
+    "Composable with tree"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useMemo,
+  useState,
+  DragDrop,
+  Draggable,
+  Droppable,
+  DLSDeprecated,
+  DLSPaneDeprecated,
+  DLSListDeprecated,
+  DLSListItemDeprecated,
+  DLSControlsWrapperDeprecated,
+  DLSControlDeprecated,
+  DLSTreeDeprecated,
+  RhMicronsDoubleCaretLeftIcon,
+  AngleLeftIcon,
+  AngleDoubleRightIcon,
+  AngleRightIcon,
+  RhMicronsSortDownSmallToLargeIcon,
+  SearchIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const DualListSelectorBasic: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<React.ReactNode[]>([\n    'Option 1',\n    'Option 2',\n    'Option 3',\n    'Option 4'\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<React.ReactNode[]>([]);\n\n  const onListChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAvailableOptions: React.ReactNode[],\n    newChosenOptions: React.ReactNode[]\n  ) => {\n    setAvailableOptions(newAvailableOptions.sort());\n    setChosenOptions(newChosenOptions.sort());\n  };\n\n  return (\n    <DLSDeprecated\n      availableOptions={availableOptions}\n      chosenOptions={chosenOptions}\n      onListChange={onListChange}\n      id=\"dual-list-selector-basic\"\n    />\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Basic with tooltips': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const DualListSelectorBasicTooltips: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<React.ReactNode[]>([\n    'Option 1',\n    'Option 2',\n    'Option 3',\n    'Option 4'\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<React.ReactNode[]>([]);\n\n  const onListChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAvailableOptions: React.ReactNode[],\n    newChosenOptions: React.ReactNode[]\n  ) => {\n    setAvailableOptions(newAvailableOptions.sort());\n    setChosenOptions(newChosenOptions.sort());\n  };\n\n  return (\n    <DLSDeprecated\n      availableOptions={availableOptions}\n      chosenOptions={chosenOptions}\n      onListChange={onListChange}\n      addAllTooltip=\"Add all options\"\n      addAllTooltipProps={{ position: 'top' }}\n      addSelectedTooltip=\"Add selected options\"\n      addSelectedTooltipProps={{ position: 'right' }}\n      removeSelectedTooltip=\"Remove selected options\"\n      removeSelectedTooltipProps={{ position: 'left' }}\n      removeAllTooltip=\"Remove all options\"\n      removeAllTooltipProps={{ position: 'bottom' }}\n      id=\"dual-list-selector-basic-tooltips\"\n    />\n  );\n};\n","title":"Basic with tooltips","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Basic with search': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const DualListSelectorBasicSearch: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<React.ReactNode[]>([\n    'Option 1',\n    'Option 2',\n    'Option 3',\n    'Option 4'\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<React.ReactNode[]>([]);\n\n  const onListChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAvailableOptions: React.ReactNode[],\n    newChosenOptions: React.ReactNode[]\n  ) => {\n    setAvailableOptions(newAvailableOptions.sort());\n    setChosenOptions(newChosenOptions.sort());\n  };\n\n  return (\n    <DLSDeprecated\n      isSearchable\n      availableOptions={availableOptions}\n      chosenOptions={chosenOptions}\n      onListChange={onListChange}\n      id=\"dual-list-selector-basic-search\"\n    />\n  );\n};\n","title":"Basic with search","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Using more complex options with actions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, ButtonVariant, Checkbox } from '@patternfly/react-core';\nimport { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';\nimport RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';\n\nexport const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<React.ReactNode[]>([\n    <span key=\"option1\">Option 1</span>,\n    <span key=\"option3\">Option 3</span>,\n    <span key=\"option4\">Option 4</span>,\n    <span key=\"option2\">Option 2</span>\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<React.ReactNode[]>([]);\n  const [isDisabled, setIsDisabled] = useState(false);\n\n  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {\n    setAvailableOptions(newAvailableOptions);\n    setChosenOptions(newChosenOptions);\n  };\n\n  const onSort = (pane: string) => {\n    const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];\n    (toSort as React.ReactElement<any>[]).sort((a, b) => {\n      if (a.props.children > b.props.children) {\n        return 1;\n      }\n      if (a.props.children < b.props.children) {\n        return -1;\n      }\n      return 0;\n    });\n\n    if (pane === 'available') {\n      setAvailableOptions(toSort);\n    } else {\n      setChosenOptions(toSort);\n    }\n  };\n\n  const filterOption = (option: React.ReactNode, input: string) =>\n    (option as React.ReactElement<any>).props.children.includes(input);\n\n  const availableOptionsActions = [\n    <Button\n      variant={ButtonVariant.plain}\n      onClick={() => onSort('available')}\n      aria-label=\"Sort available options\"\n      key=\"availableSortButton\"\n      isDisabled={isDisabled}\n      icon={<RhMicronsSortDownSmallToLargeIcon />}\n    />\n  ];\n\n  const chosenOptionsActions = [\n    <Button\n      variant={ButtonVariant.plain}\n      onClick={() => onSort('chosen')}\n      aria-label=\"Sort chosen options\"\n      key=\"chosenSortButton\"\n      isDisabled={isDisabled}\n      icon={<RhMicronsSortDownSmallToLargeIcon />}\n    />\n  ];\n\n  return (\n    <Fragment>\n      <DLSDeprecated\n        isSearchable\n        availableOptions={availableOptions}\n        availableOptionsActions={availableOptionsActions}\n        chosenOptions={chosenOptions}\n        chosenOptionsActions={chosenOptionsActions}\n        addAll={onListChange}\n        removeAll={onListChange}\n        addSelected={onListChange}\n        removeSelected={onListChange}\n        filterOption={filterOption}\n        isDisabled={isDisabled}\n        id=\"dual-list-selector-complex\"\n      />\n      <Checkbox\n        key=\"isDisabled\"\n        id=\"isDisabled\"\n        label=\"isDisabled\"\n        aria-label=\"isDisabled\"\n        isChecked={isDisabled}\n        onChange={() => setIsDisabled(!isDisabled)}\n      />\n    </Fragment>\n  );\n};\n","title":"Using more complex options with actions","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With tree': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  DualListSelector as DLSDeprecated,\n  DualListSelectorTreeItemData as DLSTreeItemDataDeprecated\n} from '@patternfly/react-core/deprecated';\n\nexport const DualListSelectorTreeExample: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<DLSTreeItemDataDeprecated[]>([\n    {\n      id: 'F1',\n      text: 'Folder 1',\n      isChecked: false,\n      checkProps: { 'aria-label': 'Folder 1' },\n      hasBadge: true,\n      badgeProps: { isRead: true },\n      children: [\n        { id: 'O1', text: 'Option 1', isChecked: false, checkProps: { 'aria-label': 'Option 1' } },\n        {\n          id: 'F1A',\n          text: 'Folder 1A',\n          isChecked: false,\n          checkProps: { 'aria-label': 'Folder 1A' },\n          children: [\n            { id: 'O2', text: 'Option 2', isChecked: false, checkProps: { 'aria-label': 'Option 2' } },\n            { id: 'O3', text: 'Option 3', isChecked: false, checkProps: { 'aria-label': 'Option 3' } }\n          ]\n        },\n        { id: 'O4', text: 'Option 4', isChecked: false, checkProps: { 'aria-label': 'Option 4' } }\n      ]\n    },\n    { id: 'O5', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5' } },\n    {\n      id: 'F2',\n      text: 'Folder 2',\n      isChecked: false,\n      checkProps: { 'aria-label': 'Folder 2' },\n      children: [\n        { id: 'O6', text: 'Option 6', isChecked: false, checkProps: { 'aria-label': 'Option 6' } },\n        { id: 'O7', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5 duplicate' } }\n      ]\n    }\n  ]);\n\n  const [chosenOptions, setChosenOptions] = useState<DLSTreeItemDataDeprecated[]>([\n    {\n      id: 'CF1',\n      text: 'Chosen Folder 1',\n      isChecked: false,\n      checkProps: { 'aria-label': 'Chosen Folder 1' },\n      hasBadge: true,\n      badgeProps: { isRead: true },\n      children: [\n        { id: 'CO1', text: 'Chosen Option 1', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 1' } },\n        {\n          id: 'CF1A',\n          text: 'Chosen Folder 1A',\n          isChecked: false,\n          checkProps: { 'aria-label': 'Chosen Folder 1A' },\n          children: [\n            {\n              id: 'CO2',\n              text: 'Chosen Option 2',\n              isChecked: false,\n              checkProps: { 'aria-label': 'Chosen Option 2' }\n            },\n            {\n              id: 'CO3',\n              text: 'Chosen Option 3',\n              isChecked: false,\n              checkProps: { 'aria-label': 'Chosen Option 3' }\n            }\n          ]\n        },\n        { id: 'CO4', text: 'Chosen Option 4', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 4' } }\n      ]\n    }\n  ]);\n\n  const onListChange = (\n    event: React.MouseEvent<HTMLElement>,\n    newAvailableOptions: DLSTreeItemDataDeprecated[],\n    newChosenOptions: DLSTreeItemDataDeprecated[]\n  ) => {\n    setAvailableOptions(newAvailableOptions.sort());\n    setChosenOptions(newChosenOptions.sort());\n  };\n\n  return (\n    <DLSDeprecated\n      isSearchable\n      isTree\n      availableOptions={availableOptions}\n      chosenOptions={chosenOptions}\n      onListChange={onListChange as any}\n      id=\"dual-list-selector-tree\"\n    />\n  );\n};\n","title":"With tree","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Composable dual list selector': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  SearchInput,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions\n} from '@patternfly/react-core';\nimport {\n  DualListSelector as DLSDeprecated,\n  DualListSelectorPane as DLSPaneDeprecated,\n  DualListSelectorList as DLSListDeprecated,\n  DualListSelectorListItem as DLSListItemDeprecated,\n  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,\n  DualListSelectorControl as DLSControlDeprecated\n} from '@patternfly/react-core/deprecated';\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';\nimport RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\ninterface Option {\n  text: string;\n  selected: boolean;\n  isVisible: boolean;\n}\n\nexport const DualListSelectorComposable: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<Option[]>([\n    { text: 'Apple', selected: false, isVisible: true },\n    { text: 'Banana', selected: false, isVisible: true },\n    { text: 'Pineapple', selected: false, isVisible: true },\n    { text: 'Orange', selected: false, isVisible: true },\n    { text: 'Grape', selected: false, isVisible: true },\n    { text: 'Peach', selected: false, isVisible: true },\n    { text: 'Strawberry', selected: false, isVisible: true }\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);\n  const [availableFilter, setAvailableFilter] = useState('');\n  const [chosenFilter, setChosenFilter] = useState('');\n\n  // callback for moving selected options between lists\n  const moveSelected = (fromAvailable: boolean) => {\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.selected && option.isVisible) {\n        sourceOptions.splice(i, 1);\n        destinationOptions.push(option);\n        option.selected = 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  // callback for moving all options between lists\n  const moveAll = (fromAvailable: boolean) => {\n    if (fromAvailable) {\n      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);\n      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);\n    } else {\n      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);\n      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);\n    }\n  };\n\n  // callback when option is selected\n  const onOptionSelect = (\n    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,\n    index: number,\n    isChosen: boolean\n  ) => {\n    if (isChosen) {\n      const newChosen = [...chosenOptions];\n      newChosen[index].selected = !chosenOptions[index].selected;\n      setChosenOptions(newChosen);\n    } else {\n      const newAvailable = [...availableOptions];\n      newAvailable[index].selected = !availableOptions[index].selected;\n      setAvailableOptions(newAvailable);\n    }\n  };\n\n  const onFilterChange = (value: string, isAvailable: boolean) => {\n    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);\n    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];\n    toFilter.forEach((option) => {\n      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());\n    });\n  };\n\n  // builds a search input - used in each dual list selector pane\n  const buildSearchInput = (isAvailable: boolean) => (\n    <SearchInput\n      value={isAvailable ? availableFilter : chosenFilter}\n      onChange={(_event, value) => onFilterChange(value, isAvailable)}\n      onClear={() => onFilterChange('', isAvailable)}\n    />\n  );\n\n  // builds a sort control - passed to both dual list selector panes\n  const buildSort = (isAvailable: boolean) => {\n    const onSort = () => {\n      const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];\n      toSort.sort((a, b) => {\n        if (a.text > b.text) {\n          return 1;\n        }\n        if (a.text < b.text) {\n          return -1;\n        }\n        return 0;\n      });\n      if (isAvailable) {\n        setAvailableOptions(toSort);\n      } else {\n        setChosenOptions(toSort);\n      }\n    };\n\n    return (\n      <Button\n        variant={ButtonVariant.plain}\n        onClick={onSort}\n        aria-label=\"Sort\"\n        key=\"sortButton\"\n        icon={<RhMicronsSortDownSmallToLargeIcon />}\n      />\n    );\n  };\n\n  const buildEmptyState = (isAvailable: boolean) => (\n    <EmptyState headingLevel=\"h4\" titleText=\"No results found\" icon={SearchIcon} variant={EmptyStateVariant.sm}>\n      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>\n      <EmptyStateFooter>\n        <EmptyStateActions>\n          <Button variant=\"link\" onClick={() => onFilterChange('', isAvailable)}>\n            Clear all filters\n          </Button>\n        </EmptyStateActions>\n      </EmptyStateFooter>\n    </EmptyState>\n  );\n\n  return (\n    <DLSDeprecated>\n      <DLSPaneDeprecated\n        title=\"Available\"\n        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${\n          availableOptions.filter((option) => option.isVisible).length\n        } options selected`}\n        searchInput={buildSearchInput(true)}\n        actions={[buildSort(true)]}\n        listMinHeight=\"300px\"\n      >\n        {availableFilter !== '' &&\n          availableOptions.filter((option) => option.isVisible).length === 0 &&\n          buildEmptyState(true)}\n        {availableOptions.filter((option) => option.isVisible).length > 0 && (\n          <DLSListDeprecated>\n            {availableOptions.map((option, index) =>\n              option.isVisible ? (\n                <DLSListItemDeprecated\n                  key={index}\n                  isSelected={option.selected}\n                  id={`composable-available-option-${index}`}\n                  onOptionSelect={(e) => onOptionSelect(e, index, false)}\n                >\n                  {option.text}\n                </DLSListItemDeprecated>\n              ) : null\n            )}\n          </DLSListDeprecated>\n        )}\n      </DLSPaneDeprecated>\n      <DLSControlsWrapperDeprecated>\n        <DLSControlDeprecated\n          isDisabled={!availableOptions.some((option) => option.selected)}\n          onClick={() => moveSelected(true)}\n          aria-label=\"Add selected\"\n          tooltipContent=\"Add selected\"\n        >\n          <AngleRightIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          isDisabled={availableOptions.length === 0}\n          onClick={() => moveAll(true)}\n          aria-label=\"Add all\"\n          tooltipContent=\"Add all\"\n        >\n          <AngleDoubleRightIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          isDisabled={chosenOptions.length === 0}\n          onClick={() => moveAll(false)}\n          aria-label=\"Remove all\"\n          tooltipContent=\"Remove all\"\n        >\n          <RhMicronsDoubleCaretLeftIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          onClick={() => moveSelected(false)}\n          isDisabled={!chosenOptions.some((option) => option.selected)}\n          aria-label=\"Remove selected\"\n          tooltipContent=\"Remove selected\"\n        >\n          <AngleLeftIcon />\n        </DLSControlDeprecated>\n      </DLSControlsWrapperDeprecated>\n      <DLSPaneDeprecated\n        title=\"Chosen\"\n        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${\n          chosenOptions.filter((option) => option.isVisible).length\n        } options selected`}\n        searchInput={buildSearchInput(false)}\n        actions={[buildSort(false)]}\n        isChosen\n        listMinHeight=\"300px\"\n      >\n        {chosenFilter !== '' &&\n          chosenOptions.filter((option) => option.isVisible).length === 0 &&\n          buildEmptyState(false)}\n        {chosenOptions.filter((option) => option.isVisible).length > 0 && (\n          <DLSListDeprecated>\n            {chosenOptions.map((option, index) =>\n              option.isVisible ? (\n                <DLSListItemDeprecated\n                  key={index}\n                  isSelected={option.selected}\n                  id={`composable-chosen-option-${index}`}\n                  onOptionSelect={(e) => onOptionSelect(e, index, true)}\n                >\n                  {option.text}\n                </DLSListItemDeprecated>\n              ) : null\n            )}\n          </DLSListDeprecated>\n        )}\n      </DLSPaneDeprecated>\n    </DLSDeprecated>\n  );\n};\n","title":"Composable dual list selector","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Composable with drag and drop': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  DragDrop,\n  Draggable,\n  Droppable,\n  DraggableItemPosition,\n  DualListSelector as DLSDeprecated,\n  DualListSelectorPane as DLSPaneDeprecated,\n  DualListSelectorList as DLSListDeprecated,\n  DualListSelectorListItem as DLSListItemDeprecated,\n  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,\n  DualListSelectorControl as DLSControlDeprecated\n} from '@patternfly/react-core/deprecated';\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 DualListSelectorComposableDragDrop: React.FunctionComponent = () => {\n  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = useState(false);\n  const [availableOptions, setAvailableOptions] = useState([\n    { text: 'Apple', selected: false, isVisible: true },\n    { text: 'Banana', selected: false, isVisible: true },\n    { text: 'Pineapple', selected: false, isVisible: true }\n  ]);\n  const [chosenOptions, setChosenOptions] = useState([\n    { text: 'Orange', selected: false, isVisible: true },\n    { text: 'Grape', selected: false, isVisible: true },\n    { text: 'Peach', selected: false, isVisible: true },\n    { text: 'Strawberry', selected: false, isVisible: true }\n  ]);\n\n  const moveSelected = (fromAvailable: boolean) => {\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.selected && option.isVisible) {\n        sourceOptions.splice(i, 1);\n        destinationOptions.push(option);\n        option.selected = 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: boolean) => {\n    if (fromAvailable) {\n      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);\n      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);\n    } else {\n      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);\n      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);\n    }\n  };\n\n  const onOptionSelect = (\n    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,\n    index: number,\n    isChosen: boolean\n  ) => {\n    if (ignoreNextOptionSelect) {\n      setIgnoreNextOptionSelect(false);\n      return;\n    }\n    if (isChosen) {\n      const newChosen = [...chosenOptions];\n      newChosen[index].selected = !chosenOptions[index].selected;\n      setChosenOptions(newChosen);\n    } else {\n      const newAvailable = [...availableOptions];\n      newAvailable[index].selected = !availableOptions[index].selected;\n      setAvailableOptions(newAvailable);\n    }\n  };\n\n  const onDrop = (source: DraggableItemPosition, dest: DraggableItemPosition | undefined) => {\n    if (dest) {\n      const newList = [...chosenOptions];\n      const [removed] = newList.splice(source.index, 1);\n      newList.splice(dest.index, 0, removed);\n      setChosenOptions(newList);\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <DLSDeprecated>\n      <DLSPaneDeprecated\n        title=\"Available\"\n        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${\n          availableOptions.filter((option) => option.isVisible).length\n        } options selected`}\n      >\n        <DLSListDeprecated>\n          {availableOptions.map((option, index) =>\n            option.isVisible ? (\n              <DLSListItemDeprecated\n                key={index}\n                isSelected={option.selected}\n                id={`composable-drag-drop-available-option-${index}`}\n                onOptionSelect={(e) => onOptionSelect(e, index, false)}\n              >\n                {option.text}\n              </DLSListItemDeprecated>\n            ) : null\n          )}\n        </DLSListDeprecated>\n      </DLSPaneDeprecated>\n      <DLSControlsWrapperDeprecated>\n        <DLSControlDeprecated\n          isDisabled={!availableOptions.some((option) => option.selected)}\n          onClick={() => moveSelected(true)}\n          aria-label=\"Add selected\"\n        >\n          <AngleRightIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          isDisabled={availableOptions.length === 0}\n          onClick={() => moveAll(true)}\n          aria-label=\"Add all\"\n        >\n          <AngleDoubleRightIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          isDisabled={chosenOptions.length === 0}\n          onClick={() => moveAll(false)}\n          aria-label=\"Remove all\"\n        >\n          <RhMicronsDoubleCaretLeftIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          onClick={() => moveSelected(false)}\n          isDisabled={!chosenOptions.some((option) => option.selected)}\n          aria-label=\"Remove selected\"\n        >\n          <AngleLeftIcon />\n        </DLSControlDeprecated>\n      </DLSControlsWrapperDeprecated>\n      <DragDrop\n        onDrag={() => {\n          setIgnoreNextOptionSelect(true);\n          return true;\n        }}\n        onDrop={onDrop}\n      >\n        <DLSPaneDeprecated\n          title=\"Chosen\"\n          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${\n            chosenOptions.filter((option) => option.isVisible).length\n          } options selected`}\n          isChosen\n        >\n          <Droppable hasNoWrapper>\n            <DLSListDeprecated>\n              {chosenOptions.map((option, index) =>\n                option.isVisible ? (\n                  <Draggable key={index} hasNoWrapper>\n                    <DLSListItemDeprecated\n                      isSelected={option.selected}\n                      id={`composable-drag-drop-chosen-option-${index}`}\n                      onOptionSelect={(e) => onOptionSelect(e, index, true)}\n                      isDraggable\n                    >\n                      {option.text}\n                    </DLSListItemDeprecated>\n                  </Draggable>\n                ) : null\n              )}\n            </DLSListDeprecated>\n          </Droppable>\n        </DLSPaneDeprecated>\n      </DragDrop>\n    </DLSDeprecated>\n  );\n};\n","title":"Composable with drag and drop","lang":"ts","isDeprecated":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/drag-and-drop/react-demos","className":""}}>
+          {`drag and drop demos`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`wrap the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`DualListSelectorPane`}
+          </code>
+          {` in a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`DragDrop`}
+          </code>
+          {` component`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`wrap the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`DualListSelectorList`}
+          </code>
+          {` in a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`Droppable`}
+          </code>
+          {` component`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`wrap the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`DualListSelectorListItem`}
+          </code>
+          {` components in a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`Draggable`}
+          </code>
+          {` component`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`define an `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onDrop`}
+          </code>
+          {` callback which reorders the sortable options.`}
+          
+
+          
+          <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+            
+
+            
+            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+              {`The `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`onDrop`}
+              </code>
+              {` function provides the starting location and destination location for a dragged item. It should return
+true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's
+old position.`}
+            </li>
+            
+
+            
+            <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+              {`define an `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`onDrag`}
+              </code>
+              {` callback which ensures that the drag event will not cross hairs with the `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`onOptionSelect`}
+              </code>
+              {` click
+event set on the option. Note: the `}
+              
+              <code {...{"className":"ws-code "}}>
+                {`ignoreNextOptionSelect`}
+              </code>
+              {` state value is used to prevent selection while dragging.`}
+            </li>
+            
+
+          </ul>
+          
+
+        </li>
+        
+
+      </ul>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Keyboard and screen reader accessibility for the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DragDrop>`}
+        </code>
+        {` component is still in development.`}
+      </p>
+    </Example>,
+  'Composable with tree': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useMemo, useState } from 'react';\nimport {\n  SearchInput,\n  Button,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions\n} from '@patternfly/react-core';\nimport {\n  DualListSelector as DLSDeprecated,\n  DualListSelectorPane as DLSPaneDeprecated,\n  DualListSelectorList as DLSListDeprecated,\n  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,\n  DualListSelectorControl as DLSControlDeprecated,\n  DualListSelectorTree as DLSTreeDeprecated,\n  DualListSelectorTreeItemData as DLSTreeItemDataDeprecated\n} from '@patternfly/react-core/deprecated';\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';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\ninterface FoodNode {\n  id: string;\n  text: string;\n  children?: FoodNode[];\n}\n\ninterface ExampleProps {\n  data: FoodNode[];\n}\n\nexport const DualListSelectorComposableTree: React.FunctionComponent<ExampleProps> = ({ data }: ExampleProps) => {\n  const [checkedLeafIds, setCheckedLeafIds] = useState<string[]>([]);\n  const [chosenLeafIds, setChosenLeafIds] = useState<string[]>(['beans', 'beef', 'chicken', 'tofu']);\n  const [chosenFilter, setChosenFilter] = useState<string>('');\n  const [availableFilter, setAvailableFilter] = useState<string>('');\n  let hiddenChosen: string[] = [];\n  let hiddenAvailable: string[] = [];\n\n  // helper function to build memoized lists\n  const buildTextById = (node: FoodNode): { [key: string]: string } => {\n    let textById = {};\n    if (!node) {\n      return textById;\n    }\n    textById[node.id] = node.text;\n    if (node.children) {\n      node.children.forEach((child) => {\n        textById = { ...textById, ...buildTextById(child) };\n      });\n    }\n    return textById;\n  };\n\n  // helper function to build memoized lists\n  const getDescendantLeafIds = (node: FoodNode): string[] => {\n    if (!node.children || !node.children.length) {\n      return [node.id];\n    } else {\n      let childrenIds: string[] = [];\n      node.children.forEach((child) => {\n        childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];\n      });\n      return childrenIds;\n    }\n  };\n\n  // helper function to build memoized lists\n  const getLeavesById = (node: FoodNode): { [key: string]: string[] } => {\n    let leavesById = {};\n    if (!node.children || !node.children.length) {\n      leavesById[node.id] = [node.id];\n    } else {\n      node.children.forEach((child) => {\n        leavesById[node.id] = getDescendantLeafIds(node);\n        leavesById = { ...leavesById, ...getLeavesById(child) };\n      });\n    }\n    return leavesById;\n  };\n\n  // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.\n  const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = useMemo(() => {\n    let leavesById = {};\n    let allLeaves: string[] = [];\n    let nodeTexts = {};\n    data.forEach((foodNode) => {\n      nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };\n      leavesById = { ...leavesById, ...getLeavesById(foodNode) };\n      allLeaves = [...allLeaves, ...getDescendantLeafIds(foodNode)];\n    });\n    return {\n      memoizedLeavesById: leavesById,\n      memoizedAllLeaves: allLeaves,\n      memoizedNodeText: nodeTexts\n    };\n  }, [data]);\n\n  const moveChecked = (toChosen: boolean) => {\n    setChosenLeafIds(\n      (prevChosenIds) =>\n        toChosen\n          ? [...prevChosenIds, ...checkedLeafIds] // add checked ids to chosen list\n          : [...prevChosenIds.filter((x) => !checkedLeafIds.includes(x))] // remove checked ids from chosen list\n    );\n\n    // uncheck checked ids that just moved\n    setCheckedLeafIds((prevChecked) =>\n      toChosen\n        ? [...prevChecked.filter((x) => chosenLeafIds.includes(x))]\n        : [...prevChecked.filter((x) => !chosenLeafIds.includes(x))]\n    );\n  };\n\n  const moveAll = (toChosen: boolean) => {\n    if (toChosen) {\n      setChosenLeafIds(memoizedAllLeaves);\n    } else {\n      setChosenLeafIds([]);\n    }\n  };\n\n  const areAllDescendantsSelected = (node: FoodNode, isChosen: boolean) =>\n    memoizedLeavesById[node.id].every(\n      (id) => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))\n    );\n  const areSomeDescendantsSelected = (node: FoodNode, isChosen: boolean) =>\n    memoizedLeavesById[node.id].some(\n      (id) => checkedLeafIds.includes(id) && (isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id))\n    );\n\n  const isNodeChecked = (node: FoodNode, isChosen: boolean) => {\n    if (areAllDescendantsSelected(node, isChosen)) {\n      return true;\n    }\n    if (areSomeDescendantsSelected(node, isChosen)) {\n      return false;\n    }\n    return false;\n  };\n\n  const onOptionCheck = (\n    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,\n    isChecked: boolean,\n    node: DLSTreeItemDataDeprecated,\n    isChosen: boolean\n  ) => {\n    const nodeIdsToCheck = memoizedLeavesById[node.id].filter((id) =>\n      isChosen\n        ? chosenLeafIds.includes(id) && !hiddenChosen.includes(id)\n        : !chosenLeafIds.includes(id) && !hiddenAvailable.includes(id)\n    );\n    if (isChosen) {\n      hiddenChosen = [];\n    } else {\n      hiddenAvailable = [];\n    }\n    setCheckedLeafIds((prevChecked) => {\n      const otherCheckedNodeNames = prevChecked.filter((id) => !nodeIdsToCheck.includes(id));\n      return !isChecked ? otherCheckedNodeNames : [...otherCheckedNodeNames, ...nodeIdsToCheck];\n    });\n  };\n\n  // builds a search input - used in each dual list selector pane\n  const buildSearchInput = (isChosen: boolean) => {\n    const onChange = (value) => (isChosen ? setChosenFilter(value) : setAvailableFilter(value));\n\n    return (\n      <SearchInput\n        value={isChosen ? chosenFilter : availableFilter}\n        onChange={(_event, value) => onChange(value)}\n        onClear={() => onChange('')}\n      />\n    );\n  };\n\n  // Builds the DualListSelectorTreeItems from the FoodNodes\n  const buildOptions = (\n    isChosen: boolean,\n    [node, ...remainingNodes]: FoodNode[],\n    hasParentMatch: boolean\n  ): DLSTreeItemDataDeprecated[] => {\n    if (!node) {\n      return [];\n    }\n\n    const isChecked = isNodeChecked(node, isChosen);\n\n    const filterValue = isChosen ? chosenFilter : availableFilter;\n    const descendentLeafIds = memoizedLeavesById[node.id];\n    const descendentsOnThisPane = isChosen\n      ? descendentLeafIds.filter((id) => chosenLeafIds.includes(id))\n      : descendentLeafIds.filter((id) => !chosenLeafIds.includes(id));\n\n    const hasMatchingChildren =\n      filterValue && descendentsOnThisPane.some((id) => memoizedNodeText[id].includes(filterValue));\n    const isFilterMatch = filterValue && node.text.includes(filterValue) && descendentsOnThisPane.length > 0;\n\n    // A node is displayed if either of the following is true:\n    //   - There is no filter value and this node or its descendents belong on this pane\n    //   - There is a filter value and this node or one of this node's descendents or ancestors match on this pane\n    const isDisplayed =\n      (!filterValue && descendentsOnThisPane.length > 0) ||\n      hasMatchingChildren ||\n      (hasParentMatch && descendentsOnThisPane.length > 0) ||\n      isFilterMatch;\n\n    if (!isDisplayed) {\n      if (isChosen) {\n        hiddenChosen.push(node.id);\n      } else {\n        hiddenAvailable.push(node.id);\n      }\n    }\n\n    return [\n      ...(isDisplayed\n        ? [\n            {\n              id: node.id,\n              text: node.text,\n              isChecked,\n              checkProps: { 'aria-label': `Select ${node.text}` },\n              hasBadge: node.children && node.children.length > 0,\n              badgeProps: { isRead: true },\n              defaultExpanded: isChosen ? !!chosenFilter : !!availableFilter,\n              children: node.children\n                ? buildOptions(isChosen, node.children, isFilterMatch || hasParentMatch)\n                : undefined\n            }\n          ]\n        : []),\n      ...(!isDisplayed && node.children && node.children.length\n        ? buildOptions(isChosen, node.children, hasParentMatch)\n        : []),\n      ...(remainingNodes ? buildOptions(isChosen, remainingNodes, hasParentMatch) : [])\n    ];\n  };\n\n  const buildPane = (isChosen: boolean): React.ReactNode => {\n    const options: DLSTreeItemDataDeprecated[] = buildOptions(isChosen, data, false);\n    const numOptions = isChosen ? chosenLeafIds.length : memoizedAllLeaves.length - chosenLeafIds.length;\n    const numSelected = checkedLeafIds.filter((id) =>\n      isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)\n    ).length;\n    const status = `${numSelected} of ${numOptions} options selected`;\n    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';\n    return (\n      <DLSPaneDeprecated\n        title={isChosen ? 'Chosen' : 'Available'}\n        status={status}\n        searchInput={buildSearchInput(isChosen)}\n        isChosen={isChosen}\n        listMinHeight=\"300px\"\n      >\n        {filterApplied && options.length === 0 && (\n          <EmptyState headingLevel=\"h4\" titleText=\"No results found\" icon={SearchIcon} variant={EmptyStateVariant.sm}>\n            <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>\n            <EmptyStateFooter>\n              <EmptyStateActions>\n                <Button variant=\"link\" onClick={() => (isChosen ? setChosenFilter('') : setAvailableFilter(''))}>\n                  Clear all filters\n                </Button>\n              </EmptyStateActions>\n            </EmptyStateFooter>\n          </EmptyState>\n        )}\n        {options.length > 0 && (\n          <DLSListDeprecated>\n            <DLSTreeDeprecated\n              data={options}\n              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}\n            />\n          </DLSListDeprecated>\n        )}\n      </DLSPaneDeprecated>\n    );\n  };\n\n  return (\n    <DLSDeprecated isTree>\n      {buildPane(false)}\n      <DLSControlsWrapperDeprecated>\n        <DLSControlDeprecated\n          isDisabled={!checkedLeafIds.filter((x) => !chosenLeafIds.includes(x)).length}\n          onClick={() => moveChecked(true)}\n          aria-label=\"Add selected\"\n        >\n          <AngleRightIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}\n          onClick={() => moveAll(true)}\n          aria-label=\"Add all\"\n        >\n          <AngleDoubleRightIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          isDisabled={chosenLeafIds.length === 0}\n          onClick={() => moveAll(false)}\n          aria-label=\"Remove all\"\n        >\n          <RhMicronsDoubleCaretLeftIcon />\n        </DLSControlDeprecated>\n        <DLSControlDeprecated\n          onClick={() => moveChecked(false)}\n          isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}\n          aria-label=\"Remove selected\"\n        >\n          <AngleLeftIcon />\n        </DLSControlDeprecated>\n      </DLSControlsWrapperDeprecated>\n      {buildPane(true)}\n    </DLSDeprecated>\n  );\n};\n\nexport const DualListSelectorComposableTreeExample: React.FunctionComponent = () => (\n  <DualListSelectorComposableTree\n    data={[\n      {\n        id: 'fruits',\n        text: 'Fruits',\n        children: [\n          { id: 'apple', text: 'Apple' },\n          {\n            id: 'berries',\n            text: 'Berries',\n            children: [\n              { id: 'blueberry', text: 'Blueberry' },\n              { id: 'strawberry', text: 'Strawberry' }\n            ]\n          },\n          { id: 'banana', text: 'Banana' }\n        ]\n      },\n      { id: 'bread', text: 'Bread' },\n      {\n        id: 'vegetables',\n        text: 'Vegetables',\n        children: [\n          { id: 'broccoli', text: 'Broccoli' },\n          { id: 'cauliflower', text: 'Cauliflower' }\n        ]\n      },\n      {\n        id: 'proteins',\n        text: 'Proteins',\n        children: [\n          { id: 'beans', text: 'Beans' },\n          {\n            id: 'meats',\n            text: 'Meats',\n            children: [\n              {\n                id: 'beef',\n                text: 'Beef'\n              },\n              {\n                id: 'chicken',\n                text: 'Chicken'\n              }\n            ]\n          },\n          { id: 'tofu', text: 'Tofu' }\n        ]\n      }\n    ]}\n  />\n);\n","title":"Composable with tree","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["Basic with tooltips"])}
+    {React.createElement(pageData.examples["Basic with search"])}
+    {React.createElement(pageData.examples["Using more complex options with actions"])}
+    {React.createElement(pageData.examples["With tree"])}
+    <AutoLinkHeader {...{"id":"composable-structure","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Composable structure`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The dual list selector can also be built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:`}
+    </p>
+    <Example {...{"code":"<DualListSelector>\n  <DualListSelectorPane>\n    <DualListSelectorList>\n      <DualListSelectorListItem />\n    </DualListSelectorList>\n  </DualListSelectorPane>\n\n  <DualListSelectorControlsWrapper>\n    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */\n  </DualListSelectorControlsWrapper>\n\n  <DualListSelectorPane isChosen>\n    <DualListSelectorList>\n      <DualListSelectorListItem />\n    </DualListSelectorList>\n  </DualListSelectorPane>\n</DualListSelector>","lang":"noLive","className":""}}>
+    </Example>
+    {React.createElement(pageData.examples["Composable dual list selector"])}
+    {React.createElement(pageData.examples["Composable with drag and drop"])}
+    {React.createElement(pageData.examples["Composable with tree"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDualListSelectorReactDeprecatedDocs';
+Component.pageData = pageData;
+
+export default Component;