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

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

@@ -1,594 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useEffect, useMemo, 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 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';
-import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
-const pageData = {
-  "id": "Dual list selector",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/dual-list-selector/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md",
-  "relPath": "packages/react-core/src/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": "children",
-          "type": "React.ReactNode",
-          "description": "Content to be rendered in the dual list selector."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes applied to the dual list selector."
-        },
-        {
-          "name": "hasAnimations",
-          "type": "boolean",
-          "description": "Flag indicating whether a tree dual list selector has animations. This will always render\nnested dual list selector items rather than dynamically rendering them. This prop will be removed in\nthe next breaking change release in favor of defaulting to always-rendered items."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "ID of the dual list selector."
-        },
-        {
-          "name": "isTree",
-          "type": "boolean",
-          "description": "Flag indicating if the dual list selector uses trees instead of simple lists.",
-          "defaultValue": "false"
-        }
-      ]
-    },
-    {
-      "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": "Content to be rendered inside of the controls 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": "icon",
-          "type": "React.ReactNode",
-          "description": "Icon to be rendered in 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",
-    "Draggable",
-    "Draggable with multiple drop zones"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useEffect,
-  useMemo,
-  useState,
-  RhMicronsDoubleCaretLeftIcon,
-  AngleLeftIcon,
-  AngleDoubleRightIcon,
-  AngleRightIcon,
-  RhMicronsSortDownSmallToLargeIcon,
-  SearchIcon,
-  RhUiEllipsisVerticalFillIcon,
-  DragDropSort,
-  DragDropContainer,
-  NewDroppable
-};
-pageData.examples = {
-  'Basic': 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 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\ninterface Option {\n  text: string;\n  selected: boolean;\n  isVisible: boolean;\n}\n\nexport const DualListSelectorBasic: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<Option[]>([\n    { text: 'Option 1', selected: false, isVisible: true },\n    { text: 'Option 2', selected: false, isVisible: true },\n    { text: 'Option 3', selected: false, isVisible: true },\n    { text: 'Option 4', selected: false, isVisible: true }\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);\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  return (\n    <DualListSelector>\n      <DualListSelectorPane\n        title=\"Available options\"\n        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${\n          availableOptions.filter((option) => option.isVisible).length\n        } options selected`}\n      >\n        <DualListSelectorList>\n          {availableOptions.map((option, index) =>\n            option.isVisible ? (\n              <DualListSelectorListItem\n                key={index}\n                isSelected={option.selected}\n                id={`basic-available-option-${index}`}\n                onOptionSelect={(e) => onOptionSelect(e, index, false)}\n              >\n                {option.text}\n              </DualListSelectorListItem>\n            ) : null\n          )}\n        </DualListSelectorList>\n      </DualListSelectorPane>\n      <DualListSelectorControlsWrapper>\n        <DualListSelectorControl\n          isDisabled={!availableOptions.some((option) => option.selected)}\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.selected)}\n          aria-label=\"Remove selected\"\n          icon={<AngleLeftIcon />}\n        />\n      </DualListSelectorControlsWrapper>\n      <DualListSelectorPane\n        title=\"Chosen options\"\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        <DualListSelectorList>\n          {chosenOptions.map((option, index) =>\n            option.isVisible ? (\n              <DualListSelectorListItem\n                key={index}\n                isSelected={option.selected}\n                id={`composable-basic-chosen-option-${index}`}\n                onOptionSelect={(e) => onOptionSelect(e, index, true)}\n              >\n                {option.text}\n              </DualListSelectorListItem>\n            ) : null\n          )}\n        </DualListSelectorList>\n      </DualListSelectorPane>\n    </DualListSelector>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Basic with tooltips': 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 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\ninterface Option {\n  text: string;\n  selected: boolean;\n  isVisible: boolean;\n}\n\nexport const DualListSelectorBasic: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<Option[]>([\n    { text: 'Option 1', selected: false, isVisible: true },\n    { text: 'Option 2', selected: false, isVisible: true },\n    { text: 'Option 3', selected: false, isVisible: true },\n    { text: 'Option 4', selected: false, isVisible: true }\n  ]);\n  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);\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  return (\n    <DualListSelector>\n      <DualListSelectorPane\n        title=\"Available options\"\n        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${\n          availableOptions.filter((option) => option.isVisible).length\n        } options selected`}\n      >\n        <DualListSelectorList>\n          {availableOptions.map((option, index) =>\n            option.isVisible ? (\n              <DualListSelectorListItem\n                key={index}\n                isSelected={option.selected}\n                id={`tooltips-available-option-${index}`}\n                onOptionSelect={(e) => onOptionSelect(e, index, false)}\n              >\n                {option.text}\n              </DualListSelectorListItem>\n            ) : null\n          )}\n        </DualListSelectorList>\n      </DualListSelectorPane>\n      <DualListSelectorControlsWrapper>\n        <DualListSelectorControl\n          isDisabled={!availableOptions.some((option) => option.selected)}\n          onClick={() => moveSelected(true)}\n          aria-label=\"Add selected\"\n          tooltipContent=\"Add selected\"\n          tooltipProps={{ position: 'top', 'aria-live': 'off' }}\n          icon={<AngleRightIcon />}\n        />\n        <DualListSelectorControl\n          isDisabled={availableOptions.length === 0}\n          onClick={() => moveAll(true)}\n          aria-label=\"Add all\"\n          tooltipContent=\"Add all\"\n          tooltipProps={{ position: 'right', 'aria-live': 'off' }}\n          icon={<AngleDoubleRightIcon />}\n        />\n        <DualListSelectorControl\n          isDisabled={chosenOptions.length === 0}\n          onClick={() => moveAll(false)}\n          aria-label=\"Remove all\"\n          tooltipContent=\"Remove all\"\n          tooltipProps={{ position: 'left', 'aria-live': 'off' }}\n          icon={<RhMicronsDoubleCaretLeftIcon />}\n        />\n        <DualListSelectorControl\n          onClick={() => moveSelected(false)}\n          isDisabled={!chosenOptions.some((option) => option.selected)}\n          aria-label=\"Remove selected\"\n          tooltipContent=\"Remove selected\"\n          tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}\n          icon={<AngleLeftIcon />}\n        />\n      </DualListSelectorControlsWrapper>\n      <DualListSelectorPane\n        title=\"Chosen options\"\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        <DualListSelectorList>\n          {chosenOptions.map((option, index) =>\n            option.isVisible ? (\n              <DualListSelectorListItem\n                key={index}\n                isSelected={option.selected}\n                id={`composable-tooltips-chosen-option-${index}`}\n                onOptionSelect={(e) => onOptionSelect(e, index, true)}\n              >\n                {option.text}\n              </DualListSelectorListItem>\n            ) : null\n          )}\n        </DualListSelectorList>\n      </DualListSelectorPane>\n    </DualListSelector>\n  );\n};\n","title":"Basic with tooltips","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Basic with search': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  DualListSelector,\n  DualListSelectorPane,\n  DualListSelectorList,\n  DualListSelectorListItem,\n  DualListSelectorControlsWrapper,\n  DualListSelectorControl,\n  SearchInput,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions\n} from '@patternfly/react-core';\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 Option {\n  text: string;\n  selected: boolean;\n  isVisible: boolean;\n}\n\nexport const DualListSelectorSearch: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<Option[]>([\n    { text: 'Option 1', selected: false, isVisible: true },\n    { text: 'Option 2', selected: false, isVisible: true },\n    { text: 'Option 3', selected: false, isVisible: true },\n    { text: 'Option 4', selected: false, isVisible: true }\n  ]);\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      aria-label={isAvailable ? 'Search available options' : 'Search chosen options'}\n    />\n  );\n\n  const buildEmptyState = (isAvailable: boolean) => (\n    <EmptyState titleText=\"No results found\" variant={EmptyStateVariant.sm} headingLevel=\"h4\" icon={SearchIcon}>\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    <DualListSelector>\n      <DualListSelectorPane\n        title=\"Available options\"\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        listMinHeight=\"300px\"\n      >\n        {availableFilter !== '' &&\n          availableOptions.filter((option) => option.isVisible).length === 0 &&\n          buildEmptyState(true)}\n\n        <DualListSelectorList>\n          {availableOptions.map((option, index) =>\n            option.isVisible ? (\n              <DualListSelectorListItem\n                key={index}\n                isSelected={option.selected}\n                id={`search-available-option-${index}`}\n                onOptionSelect={(e) => onOptionSelect(e, index, false)}\n              >\n                {option.text}\n              </DualListSelectorListItem>\n            ) : null\n          )}\n        </DualListSelectorList>\n      </DualListSelectorPane>\n      <DualListSelectorControlsWrapper>\n        <DualListSelectorControl\n          isDisabled={!availableOptions.some((option) => option.selected)}\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.selected)}\n          aria-label=\"Remove selected\"\n          icon={<AngleLeftIcon />}\n        />\n      </DualListSelectorControlsWrapper>\n      <DualListSelectorPane\n        title=\"Chosen options\"\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        listMinHeight=\"300px\"\n        isChosen\n      >\n        {chosenFilter !== '' &&\n          chosenOptions.filter((option) => option.isVisible).length === 0 &&\n          buildEmptyState(false)}\n        {chosenOptions.filter((option) => option.isVisible).length > 0 && (\n          <DualListSelectorList>\n            {chosenOptions.map((option, index) =>\n              option.isVisible ? (\n                <DualListSelectorListItem\n                  key={index}\n                  isSelected={option.selected}\n                  id={`composable-search-chosen-option-${index}`}\n                  onOptionSelect={(e) => onOptionSelect(e, index, true)}\n                >\n                  {option.text}\n                </DualListSelectorListItem>\n              ) : null\n            )}\n          </DualListSelectorList>\n        )}\n      </DualListSelectorPane>\n    </DualListSelector>\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 {\n  Button,\n  ButtonVariant,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  DualListSelector,\n  DualListSelectorPane,\n  DualListSelectorList,\n  DualListSelectorListItem,\n  DualListSelectorControlsWrapper,\n  DualListSelectorControl,\n  SearchInput,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\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';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\ninterface Option {\n  text: string;\n  selected: boolean;\n  isVisible: boolean;\n}\n\nexport const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent = () => {\n  const [availableOptions, setAvailableOptions] = useState<Option[]>([\n    { text: 'Option 1', selected: false, isVisible: true },\n    { text: 'Option 2', selected: false, isVisible: true },\n    { text: 'Option 3', selected: false, isVisible: true },\n    { text: 'Option 4', selected: false, isVisible: true }\n  ]);\n\n  const [chosenOptions, setChosenOptions] = useState<Option[]>([]);\n  const [isAvailableKebabOpen, setIsAvailableKebabOpen] = useState(false);\n  const [isChosenKebabOpen, setIsChosenKebabOpen] = useState(false);\n  const [availableFilter, setAvailableFilter] = useState('');\n  const [chosenFilter, setChosenFilter] = useState('');\n  const [isDisabled, setIsDisabled] = useState(false);\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      isDisabled={isDisabled}\n      aria-label={isAvailable ? 'Search available options' : 'Search chosen options'}\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    const onToggle = (pane: string) => {\n      if (pane === 'available') {\n        setIsAvailableKebabOpen(!isAvailableKebabOpen);\n      } else {\n        setIsChosenKebabOpen(!isChosenKebabOpen);\n      }\n    };\n\n    return isAvailable\n      ? [\n          <Button\n            variant={ButtonVariant.plain}\n            onClick={onSort}\n            aria-label=\"Sort Available\"\n            key=\"availableSortButton\"\n            isDisabled={isDisabled}\n            icon={<RhMicronsSortDownSmallToLargeIcon />}\n          />,\n          <Dropdown\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                isDisabled={isDisabled}\n                isExpanded={isAvailableKebabOpen}\n                onClick={() => onToggle('available')}\n                variant=\"plain\"\n                id=\"complex-available-toggle\"\n                aria-label=\"Complex actions example available kebab toggle\"\n                icon={<RhUiEllipsisVerticalFillIcon />}\n              />\n            )}\n            isOpen={isAvailableKebabOpen}\n            onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}\n            onSelect={() => setIsAvailableKebabOpen(false)}\n            key=\"availableDropdown\"\n          >\n            <DropdownList>\n              <DropdownItem key=\"available action\">Available Action</DropdownItem>\n              <DropdownItem key=\"available link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                Available Link\n              </DropdownItem>\n            </DropdownList>\n          </Dropdown>\n        ]\n      : [\n          <Button\n            variant={ButtonVariant.plain}\n            onClick={onSort}\n            aria-label=\"Sort Chosen\"\n            key=\"chosenSortButton\"\n            isDisabled={isDisabled}\n            icon={<RhMicronsSortDownSmallToLargeIcon />}\n          />,\n          <Dropdown\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                isDisabled={isDisabled}\n                isExpanded={isChosenKebabOpen}\n                onClick={() => onToggle('chosen')}\n                variant=\"plain\"\n                id=\"complex-chosen-toggle\"\n                aria-label=\"Complex actions example chosen kebab toggle\"\n                icon={<RhUiEllipsisVerticalFillIcon />}\n              />\n            )}\n            isOpen={isChosenKebabOpen}\n            onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}\n            onSelect={() => setIsChosenKebabOpen(false)}\n            key=\"chosenDropdown\"\n          >\n            <DropdownList>\n              <DropdownItem key=\"chosen action\">Chosen Action</DropdownItem>\n              <DropdownItem key=\"chosen link\" to=\"#\" onClick={(event: any) => event.preventDefault()}>\n                Chosen Link\n              </DropdownItem>\n            </DropdownList>\n          </Dropdown>\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    <Fragment>\n      <DualListSelector>\n        <DualListSelectorPane\n          title=\"Available options\"\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          isDisabled={isDisabled}\n        >\n          {availableFilter !== '' &&\n            availableOptions.filter((option) => option.isVisible).length === 0 &&\n            buildEmptyState(true)}\n\n          <DualListSelectorList>\n            {availableOptions.map((option, index) =>\n              option.isVisible ? (\n                <DualListSelectorListItem\n                  key={index}\n                  isSelected={option.selected}\n                  id={`complex-available-option-${index}`}\n                  onOptionSelect={(e) => onOptionSelect(e, index, false)}\n                  isDisabled={isDisabled}\n                >\n                  {option.text}\n                </DualListSelectorListItem>\n              ) : null\n            )}\n          </DualListSelectorList>\n        </DualListSelectorPane>\n        <DualListSelectorControlsWrapper>\n          <DualListSelectorControl\n            isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}\n            onClick={() => moveSelected(true)}\n            aria-label=\"Add selected\"\n            icon={<AngleRightIcon />}\n          />\n          <DualListSelectorControl\n            isDisabled={availableOptions.length === 0 || isDisabled}\n            onClick={() => moveAll(true)}\n            aria-label=\"Add all\"\n            icon={<AngleDoubleRightIcon />}\n          />\n          <DualListSelectorControl\n            isDisabled={chosenOptions.length === 0 || isDisabled}\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.selected) || isDisabled}\n            aria-label=\"Remove selected\"\n            icon={<AngleLeftIcon />}\n          />\n        </DualListSelectorControlsWrapper>\n        <DualListSelectorPane\n          title=\"Chosen options\"\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          listMinHeight=\"300px\"\n          isChosen\n        >\n          {chosenFilter !== '' &&\n            chosenOptions.filter((option) => option.isVisible).length === 0 &&\n            buildEmptyState(false)}\n          {chosenOptions.filter((option) => option.isVisible).length > 0 && (\n            <DualListSelectorList>\n              {chosenOptions.map((option, index) =>\n                option.isVisible ? (\n                  <DualListSelectorListItem\n                    key={index}\n                    isSelected={option.selected}\n                    id={`composable-complex-chosen-option-${index}`}\n                    onOptionSelect={(e) => onOptionSelect(e, index, true)}\n                    isDisabled={isDisabled}\n                  >\n                    {option.text}\n                  </DualListSelectorListItem>\n                ) : null\n              )}\n            </DualListSelectorList>\n          )}\n        </DualListSelectorPane>\n      </DualListSelector>\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 { useMemo, useState } from 'react';\nimport {\n  DualListSelector,\n  DualListSelectorPane,\n  DualListSelectorList,\n  DualListSelectorControlsWrapper,\n  DualListSelectorControl,\n  DualListSelectorTree,\n  DualListSelectorTreeItemData,\n  SearchInput,\n  Button,\n  EmptyState,\n  EmptyStateVariant,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions\n} from '@patternfly/react-core';\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\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, memoizedNodeTexts } = 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      memoizedNodeTexts: nodeTexts\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data]);\n\n  const matchesFilter = (value: string, filter: string) => value.toLowerCase().includes(filter.trim().toLowerCase());\n\n  const getVisibleLeafIds = (leafIds: string[], filter: string) => {\n    const filterMatchingNodeIds = Object.keys(memoizedLeavesById).filter((nodeId) =>\n      matchesFilter(memoizedNodeTexts[nodeId], filter)\n    );\n    const filterMatchingLeafIds = filterMatchingNodeIds.map((nodeId) => memoizedLeavesById[nodeId]).flat();\n    return leafIds.filter((leafId) => filterMatchingLeafIds.includes(leafId));\n  };\n\n  const availableLeafIds = memoizedAllLeaves.filter((leafId) => !chosenLeafIds.includes(leafId));\n  const visibleChosenLeafIds = getVisibleLeafIds(chosenLeafIds, chosenFilter);\n  const visibleAvailableLeafIds = getVisibleLeafIds(availableLeafIds, availableFilter);\n\n  const moveChecked = (toChosen: boolean) => {\n    const visibleCheckedChosenLeafIds = checkedLeafIds.filter((leafId) => visibleChosenLeafIds.includes(leafId));\n    const visibleCheckedAvailableLeafIds = checkedLeafIds.filter((leafId) => visibleAvailableLeafIds.includes(leafId));\n\n    setChosenLeafIds(\n      (prevChosenIds) =>\n        toChosen\n          ? [...prevChosenIds, ...visibleCheckedAvailableLeafIds] // add visible checked ids to chosen list\n          : prevChosenIds.filter((x) => !visibleCheckedChosenLeafIds.includes(x)) // remove visible checked ids from chosen list\n    );\n\n    // uncheck checked ids that just moved\n    setCheckedLeafIds((prevChecked) =>\n      toChosen\n        ? prevChecked.filter((x) => !visibleCheckedAvailableLeafIds.includes(x))\n        : prevChecked.filter((x) => !visibleCheckedChosenLeafIds.includes(x))\n    );\n  };\n\n  const moveAll = (toChosen: boolean) => {\n    if (toChosen) {\n      setChosenLeafIds((prevChosenIds) => [...prevChosenIds, ...visibleAvailableLeafIds]);\n    } else {\n      setChosenLeafIds((prevChosenIds) => prevChosenIds.filter((id) => !visibleChosenLeafIds.includes(id)));\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: DualListSelectorTreeItemData,\n    isChosen: boolean\n  ) => {\n    const nodeIdsToCheck = memoizedLeavesById[node.id].filter((id) =>\n      isChosen ? visibleChosenLeafIds.includes(id) : visibleAvailableLeafIds.includes(id)\n    );\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        aria-label={isChosen ? 'Search chosen items' : 'Search available items'}\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  ): DualListSelectorTreeItemData[] => {\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) => matchesFilter(memoizedNodeTexts[id], filterValue));\n    const isFilterMatch = filterValue && matchesFilter(node.text, 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    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: DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false);\n    const numOptions = isChosen ? visibleChosenLeafIds.length : visibleAvailableLeafIds.length;\n    const numSelected = checkedLeafIds.filter((id) =>\n      isChosen ? visibleChosenLeafIds.includes(id) : visibleAvailableLeafIds.includes(id)\n    ).length;\n    const status = `${numSelected} of ${numOptions} options selected`;\n    const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';\n    return (\n      <DualListSelectorPane\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          <DualListSelectorList>\n            <DualListSelectorTree\n              data={options}\n              onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}\n            />\n          </DualListSelectorList>\n        )}\n      </DualListSelectorPane>\n    );\n  };\n\n  return (\n    <DualListSelector hasAnimations isTree>\n      {buildPane(false)}\n      <DualListSelectorControlsWrapper>\n        <DualListSelectorControl\n          isDisabled={!checkedLeafIds.filter((x) => visibleAvailableLeafIds.includes(x)).length}\n          onClick={() => moveChecked(true)}\n          aria-label=\"Add selected\"\n          icon={<AngleRightIcon />}\n        />\n        <DualListSelectorControl\n          isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}\n          onClick={() => moveAll(true)}\n          aria-label=\"Add all\"\n          icon={<AngleDoubleRightIcon />}\n        />\n        <DualListSelectorControl\n          isDisabled={chosenLeafIds.length === 0}\n          onClick={() => moveAll(false)}\n          aria-label=\"Remove all\"\n          icon={<RhMicronsDoubleCaretLeftIcon />}\n        />\n        <DualListSelectorControl\n          onClick={() => moveChecked(false)}\n          isDisabled={!checkedLeafIds.filter((x) => visibleChosenLeafIds.includes(x)).length}\n          aria-label=\"Remove selected\"\n          icon={<AngleLeftIcon />}\n        />\n      </DualListSelectorControlsWrapper>\n      {buildPane(true)}\n    </DualListSelector>\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":"With tree","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Draggable': 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":"Draggable","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable drag and drop, wrap the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelectorList>`}
-        </code>
-        {` component with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {`, define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property as "DualListSelectorList", and pass both the sortable items and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onDrop`}
-        </code>
-        {` callback to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {`. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropSort>`}
-        </code>
-        {` will create the component's usual children internally based on the items property, so children inside the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelectorList>`}
-        </code>
-        {` should not be passed to the wrapped component.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Full drag and drop details can be found on the `}
-        
-        <PatternflyThemeLink {...{"to":"/components/drag-and-drop","className":""}}>
-          {`drag and drop`}
-        </PatternflyThemeLink>
-        {` component page.`}
-      </p>
-    </Example>,
-  'Draggable with multiple drop zones': props => 
-    <Example {...pageData} {...props} {...{"code":"import { 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":"Draggable with multiple drop zones","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To enable multiple drop zones, wrap the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelector>`}
-        </code>
-        {` component with `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {`, and create the desired amount of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` components within `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {`. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` components should be located where `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelectorList>`}
-        </code>
-        {` usually would go for each pane to be made draggable.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Each `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Droppable>`}
-        </code>
-        {` should define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`wrapper`}
-        </code>
-        {` property as the component that acts as the drop zone, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DualListSelectorList>`}
-        </code>
-        {`, and the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`items`}
-        </code>
-        {` property of their respective draggable items as an array of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DraggableObject>`}
-        </code>
-        {` data. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {` should be passed the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onDrop`}
-        </code>
-        {`, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onContainerMove`}
-        </code>
-        {`, and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`onCancel`}
-        </code>
-        {` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<DragDropContainer>`}
-        </code>
-        {` should also be given a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`Record`}
-        </code>
-        {` representing all sortable drop zones' items. Both components should define the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property as "DualListSelectorList".`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Full drag and drop details can be found on the `}
-        
-        <PatternflyThemeLink {...{"to":"/components/drag-and-drop","className":""}}>
-          {`drag and drop`}
-        </PatternflyThemeLink>
-        {` component page.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The dual list selector is 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["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"])}
-    {React.createElement(pageData.examples["Draggable"])}
-    {React.createElement(pageData.examples["Draggable with multiple drop zones"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsDualListSelectorReactDocs';
-Component.pageData = pageData;
-
-export default Component;