diff --git a/packages/react-core/single-packages.config.json b/packages/react-core/single-packages.config.json
index b018731de2d..da7e08727fc 100644
--- a/packages/react-core/single-packages.config.json
+++ b/packages/react-core/single-packages.config.json
@@ -1,5 +1,5 @@
 {
   "packageName": "@patternfly/react-core",
   "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/styles/**/index.js", "/dist/esm/*/*/**/index.js"],
-  "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
+  "exclude": ["/dist/esm/helpers/Popper/thirdparty", "/dist/esm/next"]
 }
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
index 61dd0ee72be..2663f3fc74e 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
@@ -1,23 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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 { DualListSelectorPane } from './DualListSelectorPane';
 import { GenerateId, PickOptional } from '../../helpers';
-import { DualListSelectorTreeItemData } from './DualListSelectorTree';
-import {
-  flattenTree,
-  flattenTreeWithFolders,
-  filterFolders,
-  filterTreeItems,
-  filterTreeItemsWithoutFolders,
-  filterRestTreeItems
-} from './treeUtils';
-import { DualListSelectorControlsWrapper } from './DualListSelectorControlsWrapper';
-import { DualListSelectorControl } from './DualListSelectorControl';
 import { DualListSelectorContext } from './DualListSelectorContext';
 
 /** Acts as a container for all other DualListSelector sub-components when using a
@@ -27,763 +11,34 @@ import { DualListSelectorContext } from './DualListSelectorContext';
 export interface DualListSelectorProps {
   /** Additional classes applied to the dual list selector. */
   className?: string;
-  /** Id of the dual list selector. */
+  /** ID of the dual list selector. */
   id?: string;
-  /** Flag indicating if the dual list selector uses trees instead of simple lists */
+  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
   isTree?: boolean;
-  /** Flag indicating if the dual list selector is in a disabled state */
-  isDisabled?: boolean;
-  /** Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided. */
+  /** Content to be rendered in the dual list selector. */
   children?: React.ReactNode;
-  /** Title applied to the dynamically built available options pane. */
-  availableOptionsTitle?: string;
-  /** Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. */
-  availableOptions?: React.ReactNode[] | DualListSelectorTreeItemData[];
-  /** Status message to display above the dynamically built available options pane. */
-  availableOptionsStatus?: string;
-  /** Actions to be displayed above the dynamically built available options pane. */
-  availableOptionsActions?: React.ReactNode[];
-  /** Title applied to the dynamically built chosen options pane. */
-  chosenOptionsTitle?: string;
-  /** Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. */
-  chosenOptions?: React.ReactNode[] | DualListSelectorTreeItemData[];
-  /** Status message to display above the dynamically built chosen options pane.*/
-  chosenOptionsStatus?: string;
-  /** Actions to be displayed above the dynamically built chosen options pane. */
-  chosenOptionsActions?: React.ReactNode[];
-  /** Accessible label for the dynamically built controls between the two panes. */
-  controlsAriaLabel?: string;
-  /** Optional callback for the dynamically built add selected button */
-  addSelected?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
-  /** Accessible label for the dynamically built add selected button */
-  addSelectedAriaLabel?: string;
-  /** Tooltip content for the dynamically built add selected button */
-  addSelectedTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built add selected tooltip */
-  addSelectedTooltipProps?: any;
-  /** Callback fired every time dynamically built options are chosen or removed */
-  onListChange?: (
-    event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: React.ReactNode[],
-    newChosenOptions: React.ReactNode[]
-  ) => void;
-  /** Optional callback for the dynamically built add all button */
-  addAll?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
-  /** Accessible label for the dynamically built add all button */
-  addAllAriaLabel?: string;
-  /** Tooltip content for the dynamically built add all button */
-  addAllTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built add all tooltip */
-  addAllTooltipProps?: any;
-  /** Optional callback for the dynamically built remove selected button */
-  removeSelected?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
-  /** Accessible label for the dynamically built remove selected button */
-  removeSelectedAriaLabel?: string;
-  /** Tooltip content for the dynamically built remove selected button */
-  removeSelectedTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built remove selected tooltip  */
-  removeSelectedTooltipProps?: any;
-  /** Optional callback for the dynamically built remove all button */
-  removeAll?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
-  /** Accessible label for the dynamically built remove all button */
-  removeAllAriaLabel?: string;
-  /** Tooltip content for the dynamically built remove all button */
-  removeAllTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built remove all tooltip */
-  removeAllTooltipProps?: any;
-  /** Optional callback fired when a dynamically built option is selected */
-  onOptionSelect?: (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean,
-    id: string,
-    itemData: any,
-    parentData: any
-  ) => void;
-  /** Optional callback fired when a dynamically built option is checked */
-  onOptionCheck?: (
-    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
-    checked: boolean,
-    checkedId: string,
-    newCheckedItems: string[]
-  ) => void;
-  /** Flag indicating a search bar should be included above both the dynamically built available and chosen panes. */
-  isSearchable?: boolean;
-  /** Accessible label for the search input on the dynamically built available options pane. */
-  availableOptionsSearchAriaLabel?: string;
-  /** A callback for when the search input value for the dynamically built available options changes. */
-  onAvailableOptionsSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
-  /** Accessible label for the search input on the dynamically built chosen options pane. */
-  chosenOptionsSearchAriaLabel?: string;
-  /** A callback for when the search input value for the dynamically built chosen options changes. */
-  onChosenOptionsSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
-  /** Optional filter function for custom filtering based on search string. Used with a dynamically built search input. */
-  filterOption?: (option: React.ReactNode, input: string) => boolean;
 }
 
-interface DualListSelectorState {
-  availableOptions: React.ReactNode[];
-  availableOptionsSelected: number[];
-  availableFilteredOptions: React.ReactNode[];
-  chosenOptions: React.ReactNode[];
-  chosenOptionsSelected: number[];
-  chosenFilteredOptions: React.ReactNode[];
-  availableTreeFilteredOptions: string[];
-  availableTreeOptionsChecked: string[];
-  chosenTreeOptionsChecked: string[];
-  chosenTreeFilteredOptions: string[];
-}
-
-class DualListSelector extends React.Component<DualListSelectorProps, DualListSelectorState> {
+class DualListSelector extends React.Component<DualListSelectorProps> {
   static displayName = 'DualListSelector';
-  private addAllButtonRef = React.createRef<HTMLButtonElement>();
-  private addSelectedButtonRef = React.createRef<HTMLButtonElement>();
-  private removeSelectedButtonRef = React.createRef<HTMLButtonElement>();
-  private removeAllButtonRef = React.createRef<HTMLButtonElement>();
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    availableOptions: [],
-    availableOptionsTitle: 'Available options',
-    availableOptionsSearchAriaLabel: 'Available search input',
-    chosenOptions: [],
-    chosenOptionsTitle: 'Chosen options',
-    chosenOptionsSearchAriaLabel: 'Chosen search input',
-    controlsAriaLabel: 'Selector controls',
-    addAllAriaLabel: 'Add all',
-    addSelectedAriaLabel: 'Add selected',
-    removeSelectedAriaLabel: 'Remove selected',
-    removeAllAriaLabel: 'Remove all',
-    isTree: false,
-    isDisabled: false
+    isTree: false
   };
 
-  // If the DualListSelector uses trees, concat the two initial arrays and merge duplicate folder IDs
-  private createMergedCopy() {
-    const copyOfAvailable = JSON.parse(JSON.stringify(this.props.availableOptions));
-    const copyOfChosen = JSON.parse(JSON.stringify(this.props.chosenOptions));
-
-    return this.props.isTree
-      ? Object.values(
-          (copyOfAvailable as DualListSelectorTreeItemData[])
-            .concat(copyOfChosen as DualListSelectorTreeItemData[])
-            .reduce((mapObj: any, item: DualListSelectorTreeItemData) => {
-              const key = item.id;
-              if (mapObj[key]) {
-                // If map already has an item ID, add the dupe ID's children to the existing map
-                mapObj[key].children.push(...item.children);
-              } else {
-                // Else clone the item data
-                mapObj[key] = { ...item };
-              }
-              return mapObj;
-            }, {})
-        )
-      : null;
-  }
-
   constructor(props: DualListSelectorProps) {
     super(props);
-    this.state = {
-      availableOptions: [...this.props.availableOptions] as React.ReactNode[],
-      availableOptionsSelected: [],
-      availableFilteredOptions: null,
-      availableTreeFilteredOptions: null,
-      chosenOptions: [...this.props.chosenOptions] as React.ReactNode[],
-      chosenOptionsSelected: [],
-      chosenFilteredOptions: null,
-      chosenTreeFilteredOptions: null,
-      availableTreeOptionsChecked: [],
-      chosenTreeOptionsChecked: []
-    };
-  }
-
-  /** In dev environment, prevents circular structure during JSON stringification when
-   * options passed in to the dual list selector include HTML elements.
-   */
-  replacer = (key: string, value: any) => {
-    if (key[0] === '_') {
-      return undefined;
-    }
-    return value;
-  };
-
-  componentDidUpdate() {
-    if (
-      JSON.stringify(this.props.availableOptions, this.replacer) !==
-        JSON.stringify(this.state.availableOptions, this.replacer) ||
-      JSON.stringify(this.props.chosenOptions, this.replacer) !==
-        JSON.stringify(this.state.chosenOptions, this.replacer)
-    ) {
-      this.setState({
-        availableOptions: [...this.props.availableOptions] as React.ReactNode[],
-        chosenOptions: [...this.props.chosenOptions] as React.ReactNode[]
-      });
-    }
   }
 
-  onFilterUpdate = (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => {
-    const { isTree } = this.props;
-    if (paneType === 'available') {
-      if (isSearchReset) {
-        this.setState({
-          availableFilteredOptions: null,
-          availableTreeFilteredOptions: null
-        });
-        return;
-      }
-      if (isTree) {
-        this.setState({
-          availableTreeFilteredOptions: flattenTreeWithFolders(
-            newFilteredOptions as unknown as DualListSelectorTreeItemData[]
-          )
-        });
-      } else {
-        this.setState({
-          availableFilteredOptions: newFilteredOptions as React.ReactNode[]
-        });
-      }
-    } else if (paneType === 'chosen') {
-      if (isSearchReset) {
-        this.setState({
-          chosenFilteredOptions: null,
-          chosenTreeFilteredOptions: null
-        });
-        return;
-      }
-      if (isTree) {
-        this.setState({
-          chosenTreeFilteredOptions: flattenTreeWithFolders(
-            newFilteredOptions as unknown as DualListSelectorTreeItemData[]
-          )
-        });
-      } else {
-        this.setState({
-          chosenFilteredOptions: newFilteredOptions as React.ReactNode[]
-        });
-      }
-    }
-  };
-
-  addAllVisible = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      const itemsToRemove = [] as React.ReactNode[];
-      const newAvailable = [] as React.ReactNode[];
-      const movedOptions = prevState.availableFilteredOptions || prevState.availableOptions;
-      prevState.availableOptions.forEach((value) => {
-        if (movedOptions.indexOf(value) !== -1) {
-          itemsToRemove.push(value);
-        } else {
-          newAvailable.push(value);
-        }
-      });
-
-      const newChosen = [...prevState.chosenOptions, ...itemsToRemove];
-      this.props.addAll && this.props.addAll(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        chosenOptions: newChosen,
-        chosenFilteredOptions: newChosen,
-        availableOptions: newAvailable,
-        availableFilteredOptions: newAvailable,
-        chosenOptionsSelected: [],
-        availableOptionsSelected: []
-      };
-    });
-  };
-
-  addAllTreeVisible = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      const movedOptions =
-        prevState.availableTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.availableOptions as unknown as DualListSelectorTreeItemData[]);
-      const newAvailable = prevState.availableOptions
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, movedOptions)
-        ) as React.ReactNode[];
-
-      const currChosen = flattenTree(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
-      const nextChosenOptions = currChosen.concat(movedOptions);
-      const newChosen = this.createMergedCopy()
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
-        ) as React.ReactNode[];
-
-      this.props.addAll && this.props.addAll(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        chosenOptions: newChosen,
-        chosenFilteredOptions: newChosen,
-        availableOptions: newAvailable,
-        availableFilteredOptions: newAvailable,
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: []
-      };
-    });
-  };
-
-  addSelected = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      const itemsToRemove = [] as React.ReactNode[];
-      const newAvailable = [] as React.ReactNode[];
-      prevState.availableOptions.forEach((value, index) => {
-        if (prevState.availableOptionsSelected.indexOf(index) !== -1) {
-          itemsToRemove.push(value);
-        } else {
-          newAvailable.push(value);
-        }
-      });
-
-      const newChosen = [...prevState.chosenOptions, ...itemsToRemove];
-      this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        chosenOptionsSelected: [],
-        availableOptionsSelected: [],
-        chosenOptions: newChosen,
-        chosenFilteredOptions: newChosen,
-        availableOptions: newAvailable,
-        availableFilteredOptions: newAvailable
-      };
-    });
-  };
-
-  addTreeSelected = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      // Remove selected available nodes from current available nodes
-      const newAvailable = prevState.availableOptions
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
-        );
-
-      // Get next chosen options from current + new nodes and remap from base
-      const currChosen = flattenTree(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
-      const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
-      const newChosen = this.createMergedCopy()
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
-        ) as React.ReactNode[];
-
-      this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: [],
-        availableOptions: newAvailable,
-        chosenOptions: newChosen
-      };
-    });
-  };
-
-  removeAllVisible = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      const itemsToRemove = [] as React.ReactNode[];
-      const newChosen = [] as React.ReactNode[];
-      const movedOptions = prevState.chosenFilteredOptions || prevState.chosenOptions;
-      prevState.chosenOptions.forEach((value) => {
-        if (movedOptions.indexOf(value) !== -1) {
-          itemsToRemove.push(value);
-        } else {
-          newChosen.push(value);
-        }
-      });
-
-      const newAvailable = [...prevState.availableOptions, ...itemsToRemove];
-      this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        chosenOptions: newChosen,
-        chosenFilteredOptions: newChosen,
-        availableOptions: newAvailable,
-        availableFilteredOptions: newAvailable,
-        chosenOptionsSelected: [],
-        availableOptionsSelected: []
-      };
-    });
-  };
-
-  removeAllTreeVisible = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      const movedOptions =
-        prevState.chosenTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
-
-      const newChosen = prevState.chosenOptions
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) => filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, movedOptions));
-      const currAvailable = flattenTree(prevState.availableOptions as unknown as DualListSelectorTreeItemData[]);
-      const nextAvailableOptions = currAvailable.concat(movedOptions);
-      const newAvailable = this.createMergedCopy()
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
-        ) as React.ReactNode[];
-
-      this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        chosenOptions: newChosen,
-        availableOptions: newAvailable,
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: []
-      };
-    });
-  };
-
-  removeSelected = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      const itemsToRemove = [] as React.ReactNode[];
-      const newChosen = [] as React.ReactNode[];
-      prevState.chosenOptions.forEach((value, index) => {
-        if (prevState.chosenOptionsSelected.indexOf(index) !== -1) {
-          itemsToRemove.push(value);
-        } else {
-          newChosen.push(value);
-        }
-      });
-
-      const newAvailable = [...prevState.availableOptions, ...itemsToRemove];
-      this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        chosenOptionsSelected: [],
-        availableOptionsSelected: [],
-        chosenOptions: newChosen,
-        chosenFilteredOptions: newChosen,
-        availableOptions: newAvailable,
-        availableFilteredOptions: newAvailable
-      };
-    });
-  };
-
-  removeTreeSelected = (event: React.MouseEvent<HTMLElement>) => {
-    this.setState((prevState) => {
-      // Remove selected chosen nodes from current chosen nodes
-      const newChosen = prevState.chosenOptions
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked)
-        );
-
-      // Get next chosen options from current and remap from base
-      const currAvailable = flattenTree(prevState.availableOptions as unknown as DualListSelectorTreeItemData[]);
-      const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
-      const newAvailable = this.createMergedCopy()
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) =>
-          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
-        ) as React.ReactNode[];
-
-      this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
-
-      return {
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: [],
-        availableOptions: newAvailable,
-        chosenOptions: newChosen
-      };
-    });
-  };
-
-  onOptionSelect = (
-    e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean,
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    id?: string,
-    itemData?: any,
-    parentData?: any
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-  ) => {
-    this.setState((prevState) => {
-      const originalArray = isChosen ? prevState.chosenOptionsSelected : prevState.availableOptionsSelected;
-
-      let updatedArray = null;
-      if (originalArray.indexOf(index) !== -1) {
-        updatedArray = originalArray.filter((value) => value !== index);
-      } else {
-        updatedArray = [...originalArray, index];
-      }
-
-      return {
-        chosenOptionsSelected: isChosen ? updatedArray : prevState.chosenOptionsSelected,
-        availableOptionsSelected: isChosen ? prevState.availableOptionsSelected : updatedArray
-      };
-    });
-
-    this.props.onOptionSelect && this.props.onOptionSelect(e, index, isChosen, id, itemData, parentData);
-  };
-
-  isChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean) =>
-    isChosen
-      ? this.state.chosenTreeOptionsChecked.includes(treeItem.id)
-      : this.state.availableTreeOptionsChecked.includes(treeItem.id);
-  areAllDescendantsChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean): boolean =>
-    treeItem.children
-      ? treeItem.children.every((child) => this.areAllDescendantsChecked(child, isChosen))
-      : this.isChecked(treeItem, isChosen);
-  areSomeDescendantsChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean): boolean =>
-    treeItem.children
-      ? treeItem.children.some((child) => this.areSomeDescendantsChecked(child, isChosen))
-      : this.isChecked(treeItem, isChosen);
-
-  mapChecked = (item: DualListSelectorTreeItemData, isChosen: boolean): DualListSelectorTreeItemData => {
-    const hasCheck = this.areAllDescendantsChecked(item, isChosen);
-    item.isChecked = false;
-
-    if (hasCheck) {
-      item.isChecked = true;
-    } else {
-      const hasPartialCheck = this.areSomeDescendantsChecked(item, isChosen);
-      if (hasPartialCheck) {
-        item.isChecked = null;
-      }
-    }
-
-    if (item.children) {
-      return {
-        ...item,
-        children: item.children.map((child) => this.mapChecked(child, isChosen))
-      };
-    }
-    return item;
-  };
-
-  onTreeOptionCheck = (
-    evt: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
-    isChecked: boolean,
-    itemData: DualListSelectorTreeItemData,
-    isChosen: boolean
-  ) => {
-    const { availableOptions, availableTreeFilteredOptions, chosenOptions, chosenTreeFilteredOptions } = this.state;
-    let panelOptions;
-    if (isChosen) {
-      if (chosenTreeFilteredOptions) {
-        panelOptions = chosenOptions
-          .map((opt) => Object.assign({}, opt))
-          .filter((item) =>
-            filterTreeItemsWithoutFolders(item as unknown as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
-          );
-      } else {
-        panelOptions = chosenOptions;
-      }
-    } else {
-      if (availableTreeFilteredOptions) {
-        panelOptions = availableOptions
-          .map((opt) => Object.assign({}, opt))
-          .filter((item) =>
-            filterTreeItemsWithoutFolders(item as unknown as DualListSelectorTreeItemData, availableTreeFilteredOptions)
-          );
-      } else {
-        panelOptions = availableOptions;
-      }
-    }
-    const checkedOptionTree = panelOptions
-      .map((opt) => Object.assign({}, opt))
-      .filter((item) => filterTreeItems(item as unknown as DualListSelectorTreeItemData, [itemData.id]));
-    const flatTree = flattenTreeWithFolders(checkedOptionTree as unknown as DualListSelectorTreeItemData[]);
-
-    const prevChecked = isChosen ? this.state.chosenTreeOptionsChecked : this.state.availableTreeOptionsChecked;
-    let updatedChecked = [] as string[];
-    if (isChecked) {
-      updatedChecked = prevChecked.concat(flatTree.filter((id) => !prevChecked.includes(id)));
-    } else {
-      updatedChecked = prevChecked.filter((id) => !flatTree.includes(id));
-    }
-
-    this.setState(
-      (prevState) => ({
-        availableTreeOptionsChecked: isChosen ? prevState.availableTreeOptionsChecked : updatedChecked,
-        chosenTreeOptionsChecked: isChosen ? updatedChecked : prevState.chosenTreeOptionsChecked
-      }),
-      () => {
-        this.props.onOptionCheck && this.props.onOptionCheck(evt, isChecked, itemData.id, updatedChecked);
-      }
-    );
-  };
-
   render() {
-    const {
-      availableOptionsTitle,
-      availableOptionsActions,
-      availableOptionsSearchAriaLabel,
-      className,
-      children,
-      chosenOptionsTitle,
-      chosenOptionsActions,
-      chosenOptionsSearchAriaLabel,
-      filterOption,
-      isSearchable,
-      chosenOptionsStatus,
-      availableOptionsStatus,
-      controlsAriaLabel,
-      addAllAriaLabel,
-      addSelectedAriaLabel,
-      removeSelectedAriaLabel,
-      removeAllAriaLabel,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      availableOptions: consumerPassedAvailableOptions,
-      chosenOptions: consumerPassedChosenOptions,
-      removeSelected,
-      addAll,
-      removeAll,
-      addSelected,
-      onListChange,
-      onAvailableOptionsSearchInputChanged,
-      onChosenOptionsSearchInputChanged,
-      onOptionSelect,
-      onOptionCheck,
-      id,
-      isTree,
-      isDisabled,
-      addAllTooltip,
-      addAllTooltipProps,
-      addSelectedTooltip,
-      addSelectedTooltipProps,
-      removeAllTooltip,
-      removeAllTooltipProps,
-      removeSelectedTooltip,
-      removeSelectedTooltipProps,
-      ...props
-    } = this.props;
-    const {
-      availableOptions,
-      chosenOptions,
-      chosenOptionsSelected,
-      availableOptionsSelected,
-      chosenTreeOptionsChecked,
-      availableTreeOptionsChecked
-    } = this.state;
-    const availableOptionsStatusToDisplay =
-      availableOptionsStatus ||
-      (isTree
-        ? `${
-            filterFolders(availableOptions as unknown as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
-              .length
-          } of ${flattenTree(availableOptions as unknown as DualListSelectorTreeItemData[]).length} items selected`
-        : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
-    const chosenOptionsStatusToDisplay =
-      chosenOptionsStatus ||
-      (isTree
-        ? `${
-            filterFolders(chosenOptions as unknown as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length
-          } of ${flattenTree(chosenOptions as unknown as DualListSelectorTreeItemData[]).length} items selected`
-        : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
-
-    const available = (
-      isTree
-        ? availableOptions.map((item) => this.mapChecked(item as unknown as DualListSelectorTreeItemData, false))
-        : availableOptions
-    ) as React.ReactNode[];
-    const chosen = (
-      isTree
-        ? chosenOptions.map((item) => this.mapChecked(item as unknown as DualListSelectorTreeItemData, true))
-        : chosenOptions
-    ) as React.ReactNode[];
+    const { className, children, id, isTree, ...props } = this.props;
 
     return (
       <DualListSelectorContext.Provider value={{ isTree }}>
         <GenerateId>
           {(randomId) => (
             <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
-              {children === '' ? (
-                <>
-                  <DualListSelectorPane
-                    isSearchable={isSearchable}
-                    onFilterUpdate={this.onFilterUpdate}
-                    searchInputAriaLabel={availableOptionsSearchAriaLabel}
-                    filterOption={filterOption}
-                    onSearchInputChanged={onAvailableOptionsSearchInputChanged}
-                    status={availableOptionsStatusToDisplay}
-                    title={availableOptionsTitle}
-                    options={available}
-                    selectedOptions={isTree ? availableTreeOptionsChecked : availableOptionsSelected}
-                    onOptionSelect={this.onOptionSelect}
-                    onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false)}
-                    actions={availableOptionsActions}
-                    id={`${id || randomId}-available-pane`}
-                    isDisabled={isDisabled}
-                  />
-                  <DualListSelectorControlsWrapper aria-label={controlsAriaLabel}>
-                    <DualListSelectorControl
-                      isDisabled={
-                        (isTree ? availableTreeOptionsChecked.length === 0 : availableOptionsSelected.length === 0) ||
-                        isDisabled
-                      }
-                      onClick={isTree ? this.addTreeSelected : this.addSelected}
-                      ref={this.addSelectedButtonRef}
-                      aria-label={addSelectedAriaLabel}
-                      tooltipContent={addSelectedTooltip}
-                      tooltipProps={addSelectedTooltipProps}
-                    >
-                      <AngleRightIcon />
-                    </DualListSelectorControl>
-                    <DualListSelectorControl
-                      isDisabled={availableOptions.length === 0 || isDisabled}
-                      onClick={isTree ? this.addAllTreeVisible : this.addAllVisible}
-                      ref={this.addAllButtonRef}
-                      aria-label={addAllAriaLabel}
-                      tooltipContent={addAllTooltip}
-                      tooltipProps={addAllTooltipProps}
-                    >
-                      <AngleDoubleRightIcon />
-                    </DualListSelectorControl>
-                    <DualListSelectorControl
-                      isDisabled={chosenOptions.length === 0 || isDisabled}
-                      onClick={isTree ? this.removeAllTreeVisible : this.removeAllVisible}
-                      aria-label={removeAllAriaLabel}
-                      ref={this.removeAllButtonRef}
-                      tooltipContent={removeAllTooltip}
-                      tooltipProps={removeAllTooltipProps}
-                    >
-                      <AngleDoubleLeftIcon />
-                    </DualListSelectorControl>
-                    <DualListSelectorControl
-                      onClick={isTree ? this.removeTreeSelected : this.removeSelected}
-                      isDisabled={
-                        (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) ||
-                        isDisabled
-                      }
-                      ref={this.removeSelectedButtonRef}
-                      aria-label={removeSelectedAriaLabel}
-                      tooltipContent={removeSelectedTooltip}
-                      tooltipProps={removeSelectedTooltipProps}
-                    >
-                      <AngleLeftIcon />
-                    </DualListSelectorControl>
-                  </DualListSelectorControlsWrapper>
-                  <DualListSelectorPane
-                    isChosen
-                    isSearchable={isSearchable}
-                    onFilterUpdate={this.onFilterUpdate}
-                    searchInputAriaLabel={chosenOptionsSearchAriaLabel}
-                    filterOption={filterOption}
-                    onSearchInputChanged={onChosenOptionsSearchInputChanged}
-                    title={chosenOptionsTitle}
-                    status={chosenOptionsStatusToDisplay}
-                    options={chosen}
-                    selectedOptions={isTree ? chosenTreeOptionsChecked : chosenOptionsSelected}
-                    onOptionSelect={this.onOptionSelect}
-                    onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true)}
-                    actions={chosenOptionsActions}
-                    id={`${id || randomId}-chosen-pane`}
-                    isDisabled={isDisabled}
-                  />
-                </>
-              ) : (
-                children
-              )}
+              {children}
             </div>
           )}
         </GenerateId>
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorContext.ts b/packages/react-core/src/components/DualListSelector/DualListSelectorContext.ts
index 27b1ed1eff2..3eccc9a0dc6 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorContext.ts
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorContext.ts
@@ -12,7 +12,6 @@ export const DualListSelectorListContext = React.createContext<{
   displayOption?: (option: React.ReactNode) => boolean;
   selectedOptions?: string[] | number[];
   id?: string;
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
   options?: React.ReactNode[];
   isDisabled?: boolean;
 }>({});
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
index 266098bdb85..8ce13d6f23c 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorControl.tsx
@@ -29,7 +29,7 @@ export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLD
 
 export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
   innerRef,
-  children = null,
+  children,
   className,
   'aria-label': ariaLabel,
   isDisabled = true,
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
index 835879f250a..ee36d662a0c 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx
@@ -6,7 +6,7 @@ import { handleArrows } from '../../helpers';
 /** Acts as the container for the DualListSelectorControl sub-components. */
 
 export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
-  /** Anything that can be rendered inside of the wrapper. */
+  /** Content to be rendered inside of the controls wrapper. */
   children?: React.ReactNode;
   /** Additional classes added to the wrapper. */
   className?: string;
@@ -60,6 +60,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapperRef.current]);
 
   return (
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorList.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorList.tsx
index cc0224eef1f..13d00467e6b 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorList.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorList.tsx
@@ -7,7 +7,7 @@ import { DualListSelectorListContext } from './DualListSelectorContext';
 /** Acts as the container for DualListSelectorListItem sub-components. */
 
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
-  /** Content rendered inside the dual list selector list */
+  /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
 }
 
@@ -15,24 +15,8 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
   children,
   ...props
 }: DualListSelectorListProps) => {
-  const {
-    setFocusedOption,
-    isTree,
-    ariaLabelledBy,
-    focusedOption,
-    displayOption,
-    selectedOptions,
-    id,
-    onOptionSelect,
-    options,
-    isDisabled
-  } = React.useContext(DualListSelectorListContext);
-
-  // only called when options are passed via options prop
-  const onOptionClick = (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => {
-    setFocusedOption(id);
-    onOptionSelect(e, index, id);
-  };
+  const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
+    React.useContext(DualListSelectorListContext);
 
   const hasOptions = () =>
     options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
@@ -58,7 +42,6 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
                   key={index}
                   isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
                   id={`${id}-option-${index}`}
-                  onOptionSelect={(e, id) => onOptionClick(e, index, id)}
                   orderIndex={index}
                   isDisabled={isDisabled}
                 >
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx
index e2c3e8433a6..5ed946e2a9b 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorListItem.tsx
@@ -17,7 +17,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating the list item is currently selected. */
   isSelected?: boolean;
-  /** Callback fired when an option is selected.  */
+  /** Callback fired when an option is selected. */
   onOptionSelect?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void;
   /** ID of the option. */
   id?: string;
@@ -25,11 +25,11 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   orderIndex?: number;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<HTMLLIElement>;
-  /** Flag indicating this item is draggable for reordring */
+  /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
-  /** Accessible label for the draggable button on draggable list items */
+  /** Accessible label for the draggable button on draggable list items. */
   draggableButtonAriaLabel?: string;
-  /** Flag indicating if the dual list selector is in a disabled state */
+  /** Flag indicating if the dual list selector is in a disabled state. */
   isDisabled?: boolean;
 }
 
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
index 642b53b0ed0..a284f4f02f6 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorListWrapper.tsx
@@ -8,11 +8,11 @@ import { DualListSelectorContext, DualListSelectorListContext } from './DualList
 export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes applied to the dual list selector. */
   className?: string;
-  /** Anything that can be rendered inside of the list */
+  /** Anything that can be rendered inside of the list. */
   children?: React.ReactNode;
-  /** Id of the dual list selector list */
+  /** ID of the dual list selector list. */
   id?: string;
-  /** Accessibly label for the list */
+  /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
   innerRef?: React.RefObject<HTMLDivElement>;
@@ -20,9 +20,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
   selectedOptions?: string[] | number[];
-  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
-  /** @hide Function to determine if an option should be displayed depending on a dynamically built filter value */
+  /** @hide Function to determine if an option should be displayed depending on a custom filter value. */
   displayOption?: (option: React.ReactNode) => boolean;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -35,7 +33,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   innerRef,
   options = [],
   selectedOptions = [],
-  onOptionSelect,
   displayOption,
   id = getUniqueId('dual-list-selector-list'),
   isDisabled = false,
@@ -46,8 +43,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
-  // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard
-  // handling is applied whether the pane is dynamically built or passed via the children prop.
+  // Sets up keyboard focus handling for the dual list selector menu child of the pane.
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
@@ -94,6 +90,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [menuRef.current]);
 
   return (
@@ -108,7 +105,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
           selectedOptions,
           id,
           options,
-          onOptionSelect,
           isDisabled
         }}
       >
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
index b8160db1cd9..8011cee0a5d 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorPane.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
 import { getUniqueId } from '../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
-import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
-import { DualListSelectorList } from './DualListSelectorList';
+import { DualListSelectorPaneContext } from './DualListSelectorContext';
 import { SearchInput } from '../SearchInput';
 import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
 
@@ -29,43 +27,12 @@ export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivE
   searchInput?: React.ReactNode;
   /** Actions to place above the pane. */
   actions?: React.ReactNode[];
-  /** Id of the pane. */
+  /** ID of the pane. */
   id?: string;
-  /** @hide Options to list in the pane. */
-  options?: React.ReactNode[];
-  /** @hide Options currently selected in the pane. */
-  selectedOptions?: string[] | number[];
-  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
-  onOptionSelect?: (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean,
-    id?: string,
-    itemData?: any,
-    parentData?: any
-  ) => void;
-  /** @hide Callback for when a tree option is checked. Optionally used only when options prop is provided. */
-  onOptionCheck?: (
-    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
-    isChecked: boolean,
-    itemData: DualListSelectorTreeItemData
-  ) => void;
-  /** @hide Flag indicating a dynamically built search bar should be included above the pane. */
-  isSearchable?: boolean;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
   /** Callback for search input. To be used when isSearchable is true. */
   onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** @hide A callback for when the search input value for changes.  To be used when isSearchable is true. */
-  onSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
-  /** @hide Callback for search input clear button */
-  onSearchInputClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */
-  filterOption?: (option: React.ReactNode, input: string) => boolean;
-  /** @hide Accessible label for the search input. To be used when isSearchable is true. */
-  searchInputAriaLabel?: string;
-  /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
-  onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
   /** Minimum height of the list of options rendered in the pane. **/
   listMinHeight?: string;
 }
@@ -77,169 +44,51 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   actions,
   searchInput,
   children,
-  onOptionSelect,
-  onOptionCheck,
   title = '',
-  options = [],
-  selectedOptions = [],
-  isSearchable = false,
-  searchInputAriaLabel = '',
-  onFilterUpdate,
-  onSearchInputChanged,
-  onSearchInputClear,
-  filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
   listMinHeight,
   ...props
-}: DualListSelectorPaneProps) => {
-  const [input, setInput] = React.useState('');
-  const { isTree } = React.useContext(DualListSelectorContext);
-
-  // only called when search input is dynamically built
-  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
-    let filtered: React.ReactNode[];
-    if (isTree) {
-      filtered = options
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue));
-    } else {
-      filtered = options.filter((option) => {
-        if (displayOption(option)) {
-          return option;
-        }
-      });
-    }
-    onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');
-
-    if (onSearchInputChanged) {
-      onSearchInputChanged(e, newValue);
-    }
-    setInput(newValue);
-  };
-
-  // only called when options are passed via options prop and isTree === true
-  const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
-    if (filterOption) {
-      return filterOption(item as unknown as React.ReactNode, input);
-    } else {
-      if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
-        return true;
-      }
-    }
-    if (item.children) {
-      return (
-        (item.children = item.children
-          .map((opt) => Object.assign({}, opt))
-          .filter((child) => filterInput(child, input))).length > 0
-      );
-    }
-  };
-
-  // only called when options are passed via options prop and isTree === false
-  const displayOption = (option: React.ReactNode) => {
-    if (filterOption) {
-      return filterOption(option, input);
-    } else {
-      return option.toString().toLowerCase().includes(input.toLowerCase());
-    }
-  };
-
-  return (
-    <div
-      className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
-      {...props}
-    >
-      {title && (
-        <div className={css(styles.dualListSelectorHeader)}>
-          <div className={`${styles.dualListSelector}__title`}>
-            <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
-          </div>
-        </div>
-      )}
-      {(actions || searchInput || isSearchable) && (
-        <div className={css(styles.dualListSelectorTools)}>
-          {(isSearchable || searchInput) && (
-            <div className={css(styles.dualListSelectorToolsFilter)}>
-              {searchInput ? (
-                searchInput
-              ) : (
-                <SearchInput
-                  onChange={isDisabled ? undefined : onChange}
-                  onClear={
-                    onSearchInputClear
-                      ? onSearchInputClear
-                      : (e) => onChange(e as React.FormEvent<HTMLInputElement>, '')
-                  }
-                  isDisabled={isDisabled}
-                  aria-label={searchInputAriaLabel}
-                />
-              )}
-            </div>
-          )}
-          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
+}: DualListSelectorPaneProps) => (
+  <div
+    className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
+    {...props}
+  >
+    {title && (
+      <div className={css(styles.dualListSelectorHeader)}>
+        <div className={`${styles.dualListSelector}__title`}>
+          <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
         </div>
-      )}
-      {status && (
-        <div className={css(styles.dualListSelectorStatus)}>
-          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
-            {status}
+      </div>
+    )}
+    {(actions || searchInput) && (
+      <div className={css(styles.dualListSelectorTools)}>
+        {searchInput && (
+          <div className={css(styles.dualListSelectorToolsFilter)}>
+            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
           </div>
-        </div>
-      )}
-      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
-        {!isTree && (
-          <DualListSelectorListWrapper
-            aria-labelledby={`${id}-status`}
-            options={options}
-            selectedOptions={selectedOptions}
-            onOptionSelect={(
-              e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-              index: number,
-              id: string
-            ) => onOptionSelect(e, index, isChosen, id)}
-            displayOption={displayOption}
-            id={`${id}-list`}
-            isDisabled={isDisabled}
-            {...(listMinHeight && {
-              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-            })}
-          >
-            {children}
-          </DualListSelectorListWrapper>
         )}
-        {isTree && (
-          <DualListSelectorListWrapper
-            aria-labelledby={`${id}-status`}
-            id={`${id}-list`}
-            {...(listMinHeight && {
-              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-            })}
-          >
-            {options.length > 0 ? (
-              <DualListSelectorList>
-                <DualListSelectorTree
-                  data={
-                    isSearchable
-                      ? (options
-                          .map((opt) => Object.assign({}, opt))
-                          .filter((item) =>
-                            filterInput(item as unknown as DualListSelectorTreeItemData, input)
-                          ) as unknown as DualListSelectorTreeItemData[])
-                      : (options as unknown as DualListSelectorTreeItemData[])
-                  }
-                  onOptionCheck={onOptionCheck}
-                  id={`${id}-tree`}
-                  isDisabled={isDisabled}
-                />
-              </DualListSelectorList>
-            ) : (
-              children
-            )}
-          </DualListSelectorListWrapper>
-        )}
-      </DualListSelectorPaneContext.Provider>
-    </div>
-  );
-};
+        {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
+      </div>
+    )}
+    {status && (
+      <div className={css(styles.dualListSelectorStatus)}>
+        <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
+          {status}
+        </div>
+      </div>
+    )}
+    <DualListSelectorPaneContext.Provider value={{ isChosen }}>
+      <DualListSelectorListWrapper
+        aria-labelledby={`${id}-status`}
+        id={`${id}-list`}
+        {...(listMinHeight && {
+          style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+        })}
+      >
+        {children}
+      </DualListSelectorListWrapper>
+    </DualListSelectorPaneContext.Provider>
+  </div>
+);
 DualListSelectorPane.displayName = 'DualListSelectorPane';
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorTree.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorTree.tsx
index a151d625050..8fb28a289b9 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorTree.tsx
@@ -10,26 +10,26 @@ export interface DualListSelectorTreeItemData {
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge */
+  /** Flag indicating this option has a badge. */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked */
+  /** Callback fired when an option is checked. */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     isChosen: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
-  /** ID of the option */
+  /** ID of the option. */
   id: string;
-  /** Text of the option */
+  /** Text of the option. */
   text: string;
-  /** Parent id of an option */
+  /** Parent ID of an option. */
   parentId?: string;
-  /** Checked state of the option */
+  /** Checked state of the option. */
   isChecked: boolean;
-  /** Additional properties to pass to the option checkbox */
+  /** Additional properties to pass to the option checkbox. */
   checkProps?: any;
-  /** Additional properties to pass to the option badge */
+  /** Additional properties to pass to the option badge. */
   badgeProps?: any;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -40,19 +40,19 @@ export interface DualListSelectorTreeItemData {
  */
 
 export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
-  /** Data of the tree view */
+  /** Data of the tree view. */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
-  /** ID of the tree view */
+  /** ID of the tree view. */
   id?: string;
-  /** @hide Flag indicating if the list is nested */
+  /** @hide Flag indicating if the list is nested. */
   isNested?: boolean;
-  /** Flag indicating if all options should have badges */
+  /** Flag indicating if all options should have badges. */
   hasBadges?: boolean;
-  /** Sets the default expanded behavior */
+  /** Sets the default expanded behavior. */
   defaultAllExpanded?: boolean;
-  /** Flag indicating if the dual list selector tree is in the disabled state */
+  /** Flag indicating if the dual list selector tree is in the disabled state. */
   isDisabled?: boolean;
-  /** Callback fired when an option is checked */
+  /** Callback fired when an option is checked. */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx b/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
index 921902decfa..bfa4c0f158d 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
@@ -14,25 +14,25 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge */
+  /** Flag indicating this option has a badge. */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked */
+  /** Callback fired when an option is checked. */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
-  /** ID of the option */
+  /** ID of the option. */
   id: string;
-  /** Text of the option */
+  /** Text of the option. */
   text: string;
   /** Flag indicating if this open is checked. */
   isChecked?: boolean;
-  /** Additional properties to pass to the option checkbox */
+  /** Additional properties to pass to the option checkbox. */
   checkProps?: any;
-  /** Additional properties to pass to the option badge */
+  /** Additional properties to pass to the option badge. */
   badgeProps?: any;
-  /** Raw data of the option */
+  /** Raw data of the option. */
   itemData?: DualListSelectorTreeItemData;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
index b5baebcb692..373aa0e993d 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
+++ b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx
@@ -1,65 +1,26 @@
 import { render } from '@testing-library/react';
-import { DualListSelector } from '../../DualListSelector';
+import { DualListSelectorPane } from '../DualListSelectorPane';
+import { SearchInput } from '../../SearchInput';
 import React from 'react';
 
 describe('DualListSelector', () => {
   test('basic', () => {
-    const { asFragment } = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="firstTest" />);
+    const { asFragment } = render(<DualListSelectorPane id="basicTest" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('with search inputs', () => {
-    const { asFragment } = render(
-      <DualListSelector availableOptions={['Option 1', 'Option 2']} id="secondTest" isSearchable />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="searchTest" searchInput={<SearchInput />} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('with custom status', () => {
-    const { asFragment } = render(
-      <DualListSelector
-        availableOptions={['Option 1', 'Option 2']}
-        availableOptionsStatus="Test status1"
-        chosenOptionsStatus="Test status2"
-        id="thirdTest"
-      />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="statusTest" status="Test status1" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic with disabled controls', () => {
-    const { asFragment } = render(
-      <DualListSelector isDisabled availableOptions={['Option 1', 'Option 2']} id="disabledTest" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('with tree', () => {
-    const { asFragment } = render(
-      <DualListSelector
-        availableOptions={[
-          { id: 'O1', text: 'Opt1', defaultExpanded: true, children: [{ id: 'O3', text: 'Opt3' }] },
-          { id: 'O2', text: 'Opt2' }
-        ]}
-        availableOptionsStatus="Test status1"
-        chosenOptionsStatus="Test status2"
-        id="tree-test"
-        isTree
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('with actions', () => {
-    const { asFragment } = render(
-      <DualListSelector
-        availableOptions={['Option 1', 'Option 2']}
-        chosenOptions={['Option 3', 'Option 4']}
-        availableOptionsActions={[<span key={1}>TestNode1</span>]}
-        chosenOptionsActions={[<span key={2}>TestNode2</span>]}
-        id="fourthTest"
-      />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="disabledTest" isDisabled />);
     expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
index 7c28575d55c..63dab5eee9e 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -3,255 +3,15 @@
 exports[`DualListSelector basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-dual-list-selector"
-    id="firstTest"
+    class="pf-v6-c-dual-list-selector__pane pf-m-available"
   >
     <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-available"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Available options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="firstTest-available-pane-status"
-        >
-          0 of 2 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-labelledby="firstTest-available-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="listbox"
-        >
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="firstTest-available-pane-list-option-0"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 1
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="firstTest-available-pane-list-option-1"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 2
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div
-      aria-label="Selector controls"
-      class="pf-v6-c-dual-list-selector__controls"
-      role="group"
+      class="pf-v6-c-dual-list-selector__menu"
       tabindex="0"
     >
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-1"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-2"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-4"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Chosen options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="firstTest-chosen-pane-status"
-        >
-          0 of 0 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          class="pf-v6-c-dual-list-selector__list"
-        />
-      </div>
+      <ul
+        class="pf-v6-c-dual-list-selector__list"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -260,591 +20,15 @@ exports[`DualListSelector basic 1`] = `
 exports[`DualListSelector basic with disabled controls 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-dual-list-selector"
-    id="disabledTest"
+    class="pf-v6-c-dual-list-selector__pane pf-m-available"
   >
     <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-available"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Available options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="disabledTest-available-pane-status"
-        >
-          0 of 2 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-disabled="true"
-          aria-labelledby="disabledTest-available-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="listbox"
-        >
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
-            id="disabledTest-available-pane-list-option-0"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 1
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
-            id="disabledTest-available-pane-list-option-1"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 2
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div
-      aria-label="Selector controls"
-      class="pf-v6-c-dual-list-selector__controls"
-      role="group"
+      class="pf-v6-c-dual-list-selector__menu"
       tabindex="0"
     >
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-13"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-14"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-15"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-16"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Chosen options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="disabledTest-chosen-pane-status"
-        >
-          0 of 0 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-disabled="true"
-          class="pf-v6-c-dual-list-selector__list"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DualListSelector with actions 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector"
-    id="fourthTest"
-  >
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-available"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Available options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__tools"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__tools-actions"
-        >
-          <span>
-            TestNode1
-          </span>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="fourthTest-available-pane-status"
-        >
-          0 of 2 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-labelledby="fourthTest-available-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="listbox"
-        >
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="fourthTest-available-pane-list-option-0"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 1
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="fourthTest-available-pane-list-option-1"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 2
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div
-      aria-label="Selector controls"
-      class="pf-v6-c-dual-list-selector__controls"
-      role="group"
-      tabindex="0"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-21"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-22"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-23"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-24"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Chosen options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__tools"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__tools-actions"
-        >
-          <span>
-            TestNode2
-          </span>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="fourthTest-chosen-pane-status"
-        >
-          0 of 2 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-labelledby="fourthTest-chosen-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="listbox"
-        >
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="fourthTest-chosen-pane-list-option-0"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 3
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="fourthTest-chosen-pane-list-option-1"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 4
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
+      <ul
+        class="pf-v6-c-dual-list-selector__list"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -853,255 +37,25 @@ exports[`DualListSelector with actions 1`] = `
 exports[`DualListSelector with custom status 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-dual-list-selector"
-    id="thirdTest"
+    class="pf-v6-c-dual-list-selector__pane pf-m-available"
   >
     <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+      class="pf-v6-c-dual-list-selector__status"
     >
       <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Available options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
+        class="pf-v6-c-dual-list-selector__status-text"
+        id="statusTest-status"
       >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="thirdTest-available-pane-status"
-        >
-          Test status1
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-labelledby="thirdTest-available-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="listbox"
-        >
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="thirdTest-available-pane-list-option-0"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 1
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="thirdTest-available-pane-list-option-1"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 2
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
+        Test status1
       </div>
     </div>
     <div
-      aria-label="Selector controls"
-      class="pf-v6-c-dual-list-selector__controls"
-      role="group"
+      class="pf-v6-c-dual-list-selector__menu"
       tabindex="0"
     >
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-9"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-10"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-11"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-12"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Chosen options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="thirdTest-chosen-pane-status"
-        >
-          Test status2
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          class="pf-v6-c-dual-list-selector__list"
-        />
-      </div>
+      <ul
+        class="pf-v6-c-dual-list-selector__list"
+      />
     </div>
   </div>
 </DocumentFragment>
@@ -1110,675 +64,58 @@ exports[`DualListSelector with custom status 1`] = `
 exports[`DualListSelector with search inputs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-dual-list-selector"
-    id="secondTest"
+    class="pf-v6-c-dual-list-selector__pane pf-m-available"
   >
     <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+      class="pf-v6-c-dual-list-selector__tools"
     >
       <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Available options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__tools"
+        class="pf-v6-c-dual-list-selector__tools-filter"
       >
         <div
-          class="pf-v6-c-dual-list-selector__tools-filter"
+          class="pf-v6-c-text-input-group"
         >
           <div
-            class="pf-v6-c-text-input-group"
+            class="pf-v6-c-text-input-group__main pf-m-icon"
           >
-            <div
-              class="pf-v6-c-text-input-group__main pf-m-icon"
+            <span
+              class="pf-v6-c-text-input-group__text"
             >
               <span
-                class="pf-v6-c-text-input-group__text"
-              >
-                <span
-                  class="pf-v6-c-text-input-group__icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                </span>
-                <input
-                  aria-label="Available search input"
-                  class="pf-v6-c-text-input-group__text-input"
-                  type="text"
-                  value=""
-                />
+                class="pf-v6-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
               </span>
-            </div>
+              <input
+                aria-label="Search input"
+                class="pf-v6-c-text-input-group__text-input"
+                type="text"
+                value=""
+              />
+            </span>
           </div>
         </div>
       </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="secondTest-available-pane-status"
-        >
-          0 of 2 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-labelledby="secondTest-available-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="listbox"
-        >
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="secondTest-available-pane-list-option-0"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 1
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="secondTest-available-pane-list-option-1"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row"
-            >
-              <span
-                class="pf-v6-c-dual-list-selector__item"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Option 2
-                  </span>
-                </span>
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
     </div>
     <div
-      aria-label="Selector controls"
-      class="pf-v6-c-dual-list-selector__controls"
-      role="group"
+      class="pf-v6-c-dual-list-selector__menu"
       tabindex="0"
     >
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-5"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-6"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-7"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-8"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Chosen options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__tools"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__tools-filter"
-        >
-          <div
-            class="pf-v6-c-text-input-group"
-          >
-            <div
-              class="pf-v6-c-text-input-group__main pf-m-icon"
-            >
-              <span
-                class="pf-v6-c-text-input-group__text"
-              >
-                <span
-                  class="pf-v6-c-text-input-group__icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                </span>
-                <input
-                  aria-label="Chosen search input"
-                  class="pf-v6-c-text-input-group__text-input"
-                  type="text"
-                  value=""
-                />
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="secondTest-chosen-pane-status"
-        >
-          0 of 0 items selected
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          class="pf-v6-c-dual-list-selector__list"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DualListSelector with tree 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector"
-    id="tree-test"
-  >
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-available"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Available options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="tree-test-available-pane-status"
-        >
-          Test status1
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          aria-activedescendant=""
-          aria-labelledby="tree-test-available-pane-status"
-          aria-multiselectable="true"
-          class="pf-v6-c-dual-list-selector__list"
-          role="tree"
-        >
-          <li
-            aria-expanded="true"
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
-            id="O1"
-            role="treeitem"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
-            >
-              <div
-                class="pf-v6-c-dual-list-selector__item"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <div
-                    class="pf-v6-c-dual-list-selector__item-toggle"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v6-c-dual-list-selector__item-toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-check"
-                  >
-                    <input
-                      tabindex="-1"
-                      type="checkbox"
-                    />
-                  </span>
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Opt1
-                  </span>
-                </span>
-              </div>
-            </div>
-            <ul
-              class="pf-v6-c-dual-list-selector__list"
-              role="group"
-            >
-              <li
-                aria-selected="false"
-                class="pf-v6-c-dual-list-selector__list-item"
-                id="O3"
-                role="treeitem"
-              >
-                <div
-                  class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
-                >
-                  <div
-                    class="pf-v6-c-dual-list-selector__item"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="pf-v6-c-dual-list-selector__item-main"
-                    >
-                      <span
-                        class="pf-v6-c-dual-list-selector__item-check"
-                      >
-                        <input
-                          tabindex="-1"
-                          type="checkbox"
-                        />
-                      </span>
-                      <span
-                        class="pf-v6-c-dual-list-selector__item-text"
-                      >
-                        Opt3
-                      </span>
-                    </span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </li>
-          <li
-            aria-selected="false"
-            class="pf-v6-c-dual-list-selector__list-item"
-            id="O2"
-            role="treeitem"
-          >
-            <div
-              class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
-            >
-              <div
-                class="pf-v6-c-dual-list-selector__item"
-                tabindex="-1"
-              >
-                <span
-                  class="pf-v6-c-dual-list-selector__item-main"
-                >
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-check"
-                  >
-                    <input
-                      tabindex="-1"
-                      type="checkbox"
-                    />
-                  </span>
-                  <span
-                    class="pf-v6-c-dual-list-selector__item-text"
-                  >
-                    Opt2
-                  </span>
-                </span>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div
-      aria-label="Selector controls"
-      class="pf-v6-c-dual-list-selector__controls"
-      role="group"
-      tabindex="0"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-17"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Add all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-18"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove all"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-19"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__controls-item"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Remove selected"
-          class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-20"
-          data-ouia-component-type="PF6/Button"
-          data-ouia-safe="true"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__header"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__title"
-        >
-          <div
-            class="pf-v6-c-dual-list-selector__title-text"
-          >
-            Chosen options
-          </div>
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__status"
-      >
-        <div
-          class="pf-v6-c-dual-list-selector__status-text"
-          id="tree-test-chosen-pane-status"
-        >
-          Test status2
-        </div>
-      </div>
-      <div
-        class="pf-v6-c-dual-list-selector__menu"
-        tabindex="0"
-      >
-        <ul
-          class="pf-v6-c-dual-list-selector__list"
-        />
-      </div>
+      <ul
+        class="pf-v6-c-dual-list-selector__list"
+      />
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
index 5dd542efcc3..d2ea380783d 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
@@ -13,6 +13,7 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData'
   ]
+beta: true
 ---
 
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
@@ -26,6 +27,28 @@ import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecate
 
 ## Examples
 
+The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```noLive
+<DualListSelector>
+  <DualListSelectorPane>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+
+  <DualListSelectorControlsWrapper>
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
+  </DualListSelectorControlsWrapper>
+
+  <DualListSelectorPane isChosen>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+</DualListSelector>
+```
+
 ### Basic
 
 ```ts file="./DualListSelectorBasic.tsx"
@@ -52,43 +75,11 @@ import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecate
 
 ### With tree
 
-```ts file="./DualListSelectorTreeExample.tsx"
-
-```
-
-## Composable structure
-
-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:
-
-```noLive
-<DualListSelector>
-  <DualListSelectorPane>
-    <DualListSelectorList>
-      <DualListSelectorListItem />
-    </DualListSelectorList>
-  </DualListSelectorPane>
-
-  <DualListSelectorControlsWrapper>
-    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
-  </DualListSelectorControlsWrapper>
-
-  <DualListSelectorPane isChosen>
-    <DualListSelectorList>
-      <DualListSelectorListItem />
-    </DualListSelectorList>
-  </DualListSelectorPane>
-</DualListSelector>
-```
-
-### Composable dual list selector
-
-```ts file="./DualListSelectorComposable.tsx"
+```ts file="DualListSelectorTree.tsx"
 
 ```
 
-### Composable with drag and drop
-
-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 [drag and drop demos](/components/drag-and-drop/react-demos).
+### Drag and drop
 
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
@@ -102,14 +93,8 @@ This example only allows reordering the contents of the "chosen" pane with drag
   - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
     event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
 
-Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
-
-```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"
-
-```
-
-### Composable with tree
+Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
-```ts file="DualListSelectorComposableTree.tsx"
+```ts file="DualListSelectorDragDrop.tsx"
 
 ```
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
index 216e34d14cc..53e287e5d1d 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
@@ -1,30 +1,157 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+import {
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl
+} from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
+
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
 
 export const DualListSelectorBasic: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
-    'Option 1',
-    'Option 2',
-    'Option 3',
-    'Option 4'
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
 
-  const onListChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: React.ReactNode[],
-    newChosenOptions: React.ReactNode[]
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
   ) => {
-    setAvailableOptions(newAvailableOptions.sort());
-    setChosenOptions(newChosenOptions.sort());
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
   };
 
   return (
-    <DualListSelector
-      availableOptions={availableOptions}
-      chosenOptions={chosenOptions}
-      onListChange={onListChange}
-      id="dual-list-selector-basic"
-    />
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`basic-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        isChosen
+      >
+        <DualListSelectorList>
+          {chosenOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-basic-chosen-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, true)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+    </DualListSelector>
   );
 };
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
index c6625a02931..3e467cd034f 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
@@ -1,31 +1,211 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
-
-export const DualListSelectorBasicSearch: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
-    'Option 1',
-    'Option 2',
-    'Option 3',
-    'Option 4'
+import {
+  Button,
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl,
+  SearchInput,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateFooter,
+  EmptyStateBody,
+  EmptyStateActions
+} from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorSearch: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
 
-  const onListChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: React.ReactNode[],
-    newChosenOptions: React.ReactNode[]
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+  const [availableFilter, setAvailableFilter] = React.useState('');
+  const [chosenFilter, setChosenFilter] = React.useState('');
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
+
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
   ) => {
-    setAvailableOptions(newAvailableOptions.sort());
-    setChosenOptions(newChosenOptions.sort());
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
   };
 
-  return (
-    <DualListSelector
-      isSearchable
-      availableOptions={availableOptions}
-      chosenOptions={chosenOptions}
-      onListChange={onListChange}
-      id="dual-list-selector-basic-search"
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach((option) => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
+  };
+
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
     />
   );
+
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState titleText="No results found" variant={EmptyStateVariant.sm} headingLevel="h4" icon={SearchIcon}>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+
+  return (
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        searchInput={buildSearchInput(true)}
+        listMinHeight="300px"
+      >
+        {availableFilter !== '' &&
+          availableOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(true)}
+
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`search-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        searchInput={buildSearchInput(false)}
+        listMinHeight="300px"
+        isChosen
+      >
+        {chosenFilter !== '' &&
+          chosenOptions.filter((option) => option.isVisible).length === 0 &&
+          buildEmptyState(false)}
+        {chosenOptions.filter((option) => option.isVisible).length > 0 && (
+          <DualListSelectorList>
+            {chosenOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`composable-search-chosen-option-${index}`}
+                  onOptionSelect={(e) => onOptionSelect(e, index, true)}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        )}
+      </DualListSelectorPane>
+    </DualListSelector>
+  );
 };
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
index ac0e267134d..717c5860bd7 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
@@ -1,38 +1,165 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+import {
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl
+} from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
 
-export const DualListSelectorBasicTooltips: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
-    'Option 1',
-    'Option 2',
-    'Option 3',
-    'Option 4'
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
 
-  const onListChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: React.ReactNode[],
-    newChosenOptions: React.ReactNode[]
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
   ) => {
-    setAvailableOptions(newAvailableOptions.sort());
-    setChosenOptions(newChosenOptions.sort());
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
   };
 
   return (
-    <DualListSelector
-      availableOptions={availableOptions}
-      chosenOptions={chosenOptions}
-      onListChange={onListChange}
-      addAllTooltip="Add all options"
-      addAllTooltipProps={{ position: 'top' }}
-      addSelectedTooltip="Add selected options"
-      addSelectedTooltipProps={{ position: 'right' }}
-      removeSelectedTooltip="Remove selected options"
-      removeSelectedTooltipProps={{ position: 'left' }}
-      removeAllTooltip="Remove all options"
-      removeAllTooltipProps={{ position: 'bottom' }}
-      id="dual-list-selector-basic-tooltips"
-    />
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`tooltips-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+          tooltipContent="Add selected"
+          tooltipProps={{ position: 'top', 'aria-live': 'off' }}
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+          tooltipContent="Add all"
+          tooltipProps={{ position: 'right', 'aria-live': 'off' }}
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+          tooltipContent="Remove all"
+          tooltipProps={{ position: 'left', 'aria-live': 'off' }}
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+          tooltipContent="Remove selected"
+          tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        isChosen
+      >
+        <DualListSelectorList>
+          {chosenOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-tooltips-chosen-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, true)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+    </DualListSelector>
   );
 };
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
index 8ef67fb8ae6..9ccc57b142f 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
@@ -3,157 +3,334 @@ import {
   Button,
   ButtonVariant,
   Checkbox,
-  DualListSelector,
   Dropdown,
   DropdownList,
   DropdownItem,
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl,
+  SearchInput,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateFooter,
+  EmptyStateBody,
+  EmptyStateActions,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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 PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
-    <span key="option1">Option 1</span>,
-    <span key="option3">Option 3</span>,
-    <span key="option4">Option 4</span>,
-    <span key="option2">Option 2</span>
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
   const [isAvailableKebabOpen, setIsAvailableKebabOpen] = React.useState(false);
   const [isChosenKebabOpen, setIsChosenKebabOpen] = React.useState(false);
+  const [availableFilter, setAvailableFilter] = React.useState('');
+  const [chosenFilter, setChosenFilter] = React.useState('');
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
-    setAvailableOptions(newAvailableOptions);
-    setChosenOptions(newChosenOptions);
-  };
-
-  const onSort = (pane: string) => {
-    const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];
-    (toSort as React.ReactElement[]).sort((a, b) => {
-      if (a.props.children > b.props.children) {
-        return 1;
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
       }
-      if (a.props.children < b.props.children) {
-        return -1;
-      }
-      return 0;
-    });
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
 
-    if (pane === 'available') {
-      setAvailableOptions(toSort);
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
     } else {
-      setChosenOptions(toSort);
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
     }
   };
 
-  const onToggle = (pane: string) => {
-    if (pane === 'available') {
-      setIsAvailableKebabOpen(!isAvailableKebabOpen);
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
     } else {
-      setIsChosenKebabOpen(!isChosenKebabOpen);
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
     }
   };
 
-  const filterOption = (option: React.ReactNode, input: string) =>
-    (option as React.ReactElement).props.children.includes(input);
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach((option) => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
+  };
 
-  const availableOptionsActions = [
-    <Button
-      variant={ButtonVariant.plain}
-      onClick={() => onSort('available')}
-      aria-label="Sort available options"
-      key="availableSortButton"
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
       isDisabled={isDisabled}
-    >
-      <PficonSortCommonAscIcon />
-    </Button>,
-    <Dropdown
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle
-          ref={toggleRef}
-          isDisabled={isDisabled}
-          isExpanded={isAvailableKebabOpen}
-          onClick={() => onToggle('available')}
-          variant="plain"
-          id="complex-available-toggle"
-          aria-label="Complex actions example available kebab toggle"
-        >
-          <EllipsisVIcon aria-hidden="true" />
-        </MenuToggle>
-      )}
-      isOpen={isAvailableKebabOpen}
-      onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
-      onSelect={() => setIsAvailableKebabOpen(false)}
-      key="availableDropdown"
-    >
-      <DropdownList>
-        <DropdownItem key="available action">Action</DropdownItem>
-        {/* Prevent default onClick functionality for example purposes */}
-        <DropdownItem key="available link" to="#" onClick={(event: any) => event.preventDefault()}>
-          Link
-        </DropdownItem>
-      </DropdownList>
-    </Dropdown>
-  ];
+    />
+  );
 
-  const chosenOptionsActions = [
-    <Button
-      variant={ButtonVariant.plain}
-      onClick={() => onSort('chosen')}
-      aria-label="Sort chosen options"
-      key="chosenSortButton"
-      isDisabled={isDisabled}
-    >
-      <PficonSortCommonAscIcon />
-    </Button>,
-    <Dropdown
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle
-          ref={toggleRef}
-          isDisabled={isDisabled}
-          isExpanded={isChosenKebabOpen}
-          variant="plain"
-          onClick={() => onToggle('chosen')}
-          id="complex-chosen-toggle"
-          aria-label="Complex actions example chosen kebab toggle"
-        >
-          <EllipsisVIcon aria-hidden="true" />
-        </MenuToggle>
-      )}
-      isOpen={isChosenKebabOpen}
-      onOpenChange={(isOpen) => setIsChosenKebabOpen(isOpen)}
-      onSelect={() => setIsChosenKebabOpen(false)}
-      key="chosenDropdown"
-    >
-      <DropdownList>
-        <DropdownItem key="chosen action">Action</DropdownItem>
-        {/* Prevent default onClick functionality for example purposes */}
-        <DropdownItem key="chosen link" to="#" onClick={(event: any) => event.preventDefault()}>
-          Link
-        </DropdownItem>
-      </DropdownList>
-    </Dropdown>
-  ];
+  // builds a sort control - passed to both dual list selector panes
+  const buildSort = (isAvailable: boolean) => {
+    const onSort = () => {
+      const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];
+      toSort.sort((a, b) => {
+        if (a.text > b.text) {
+          return 1;
+        }
+        if (a.text < b.text) {
+          return -1;
+        }
+        return 0;
+      });
+      if (isAvailable) {
+        setAvailableOptions(toSort);
+      } else {
+        setChosenOptions(toSort);
+      }
+    };
+
+    const onToggle = (pane: string) => {
+      if (pane === 'available') {
+        setIsAvailableKebabOpen(!isAvailableKebabOpen);
+      } else {
+        setIsChosenKebabOpen(!isChosenKebabOpen);
+      }
+    };
+
+    return isAvailable
+      ? [
+          <Button
+            variant={ButtonVariant.plain}
+            onClick={onSort}
+            aria-label="Sort Available"
+            key="availableSortButton"
+            isDisabled={isDisabled}
+          >
+            <PficonSortCommonAscIcon />
+          </Button>,
+          <Dropdown
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isDisabled={isDisabled}
+                isExpanded={isAvailableKebabOpen}
+                onClick={() => onToggle('available')}
+                variant="plain"
+                id="complex-available-toggle"
+                aria-label="Complex actions example available kebab toggle"
+              >
+                <EllipsisVIcon aria-hidden="true" />
+              </MenuToggle>
+            )}
+            isOpen={isAvailableKebabOpen}
+            onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
+            onSelect={() => setIsAvailableKebabOpen(false)}
+            key="availableDropdown"
+          >
+            <DropdownList>
+              <DropdownItem key="available action">Available Action</DropdownItem>
+              <DropdownItem key="available link" to="#" onClick={(event: any) => event.preventDefault()}>
+                Available Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        ]
+      : [
+          <Button
+            variant={ButtonVariant.plain}
+            onClick={onSort}
+            aria-label="Sort Chosen"
+            key="chosenSortButton"
+            isDisabled={isDisabled}
+          >
+            <PficonSortCommonAscIcon />
+          </Button>,
+          <Dropdown
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isDisabled={isDisabled}
+                isExpanded={isChosenKebabOpen}
+                onClick={() => onToggle('chosen')}
+                variant="plain"
+                id="complex-chosen-toggle"
+                aria-label="Complex actions example chosen kebab toggle"
+              >
+                <EllipsisVIcon aria-hidden="true" />
+              </MenuToggle>
+            )}
+            isOpen={isChosenKebabOpen}
+            onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}
+            onSelect={() => setIsChosenKebabOpen(false)}
+            key="chosenDropdown"
+          >
+            <DropdownList>
+              <DropdownItem key="chosen action">Chosen Action</DropdownItem>
+              <DropdownItem key="chosen link" to="#" onClick={(event: any) => event.preventDefault()}>
+                Chosen Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        ];
+  };
+
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
 
   return (
     <React.Fragment>
-      <DualListSelector
-        isSearchable
-        availableOptions={availableOptions}
-        availableOptionsActions={availableOptionsActions}
-        chosenOptions={chosenOptions}
-        chosenOptionsActions={chosenOptionsActions}
-        addAll={onListChange}
-        removeAll={onListChange}
-        addSelected={onListChange}
-        removeSelected={onListChange}
-        filterOption={filterOption}
-        isDisabled={isDisabled}
-        id="dual-list-selector-complex"
-      />
+      <DualListSelector>
+        <DualListSelectorPane
+          title="Available options"
+          status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+            availableOptions.filter((option) => option.isVisible).length
+          } options selected`}
+          searchInput={buildSearchInput(true)}
+          actions={[buildSort(true)]}
+          listMinHeight="300px"
+          isDisabled={isDisabled}
+        >
+          {availableFilter !== '' &&
+            availableOptions.filter((option) => option.isVisible).length === 0 &&
+            buildEmptyState(true)}
+
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`complex-available-option-${index}`}
+                  onOptionSelect={(e) => onOptionSelect(e, index, false)}
+                  isDisabled={isDisabled}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        </DualListSelectorPane>
+        <DualListSelectorControlsWrapper>
+          <DualListSelectorControl
+            isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}
+            onClick={() => moveSelected(true)}
+            aria-label="Add selected"
+          >
+            <AngleRightIcon />
+          </DualListSelectorControl>
+          <DualListSelectorControl
+            isDisabled={availableOptions.length === 0 || isDisabled}
+            onClick={() => moveAll(true)}
+            aria-label="Add all"
+          >
+            <AngleDoubleRightIcon />
+          </DualListSelectorControl>
+          <DualListSelectorControl
+            isDisabled={chosenOptions.length === 0 || isDisabled}
+            onClick={() => moveAll(false)}
+            aria-label="Remove all"
+          >
+            <AngleDoubleLeftIcon />
+          </DualListSelectorControl>
+          <DualListSelectorControl
+            onClick={() => moveSelected(false)}
+            isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled}
+            aria-label="Remove selected"
+          >
+            <AngleLeftIcon />
+          </DualListSelectorControl>
+        </DualListSelectorControlsWrapper>
+        <DualListSelectorPane
+          title="Chosen options"
+          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+            chosenOptions.filter((option) => option.isVisible).length
+          } options selected`}
+          searchInput={buildSearchInput(false)}
+          actions={[buildSort(false)]}
+          listMinHeight="300px"
+          isChosen
+        >
+          {chosenFilter !== '' &&
+            chosenOptions.filter((option) => option.isVisible).length === 0 &&
+            buildEmptyState(false)}
+          {chosenOptions.filter((option) => option.isVisible).length > 0 && (
+            <DualListSelectorList>
+              {chosenOptions.map((option, index) =>
+                option.isVisible ? (
+                  <DualListSelectorListItem
+                    key={index}
+                    isSelected={option.selected}
+                    id={`composable-complex-chosen-option-${index}`}
+                    onOptionSelect={(e) => onOptionSelect(e, index, true)}
+                    isDisabled={isDisabled}
+                  >
+                    {option.text}
+                  </DualListSelectorListItem>
+                ) : null
+              )}
+            </DualListSelectorList>
+          )}
+        </DualListSelectorPane>
+      </DualListSelector>
       <Checkbox
         key="isDisabled"
         id="isDisabled"
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorDragDrop.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorDragDrop.tsx
similarity index 100%
rename from packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorDragDrop.tsx
rename to packages/react-core/src/components/DualListSelector/examples/DualListSelectorDragDrop.tsx
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
similarity index 100%
rename from packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorTree.tsx
rename to packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
diff --git a/packages/react-core/src/components/DualListSelector/index.ts b/packages/react-core/src/components/DualListSelector/index.ts
index 7f66aa3a037..d2b6deb96ff 100644
--- a/packages/react-core/src/components/DualListSelector/index.ts
+++ b/packages/react-core/src/components/DualListSelector/index.ts
@@ -1,9 +1,7 @@
 export * from './DualListSelector';
-export * from './DualListSelectorContext';
 export * from './DualListSelectorControl';
 export * from './DualListSelectorControlsWrapper';
 export * from './DualListSelectorPane';
 export * from './DualListSelectorList';
 export * from './DualListSelectorListItem';
 export * from './DualListSelectorTree';
-export * from './DualListSelectorContext';
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index 19a8e564b76..bc08d3d36b0 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -275,7 +275,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
     >
       <div
         class="pf-v6-c-panel pf-m-raised"
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
new file mode 100644
index 00000000000..658dbdad701
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
@@ -0,0 +1,795 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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 { DualListSelectorPane } from './DualListSelectorPane';
+import { GenerateId, PickOptional } from '../../../helpers';
+import { DualListSelectorTreeItemData } from './DualListSelectorTree';
+import {
+  flattenTree,
+  flattenTreeWithFolders,
+  filterFolders,
+  filterTreeItems,
+  filterTreeItemsWithoutFolders,
+  filterRestTreeItems
+} from './treeUtils';
+import { DualListSelectorControlsWrapper } from './DualListSelectorControlsWrapper';
+import { DualListSelectorControl } from './DualListSelectorControl';
+import { DualListSelectorContext } from './DualListSelectorContext';
+
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+
+export interface DualListSelectorProps {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** Id of the dual list selector. */
+  id?: string;
+  /** Flag indicating if the dual list selector uses trees instead of simple lists */
+  isTree?: boolean;
+  /** Flag indicating if the dual list selector is in a disabled state */
+  isDisabled?: boolean;
+  /** Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided. */
+  children?: React.ReactNode;
+  /** Title applied to the dynamically built available options pane. */
+  availableOptionsTitle?: string;
+  /** Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. */
+  availableOptions?: React.ReactNode[] | DualListSelectorTreeItemData[];
+  /** Status message to display above the dynamically built available options pane. */
+  availableOptionsStatus?: string;
+  /** Actions to be displayed above the dynamically built available options pane. */
+  availableOptionsActions?: React.ReactNode[];
+  /** Title applied to the dynamically built chosen options pane. */
+  chosenOptionsTitle?: string;
+  /** Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. */
+  chosenOptions?: React.ReactNode[] | DualListSelectorTreeItemData[];
+  /** Status message to display above the dynamically built chosen options pane.*/
+  chosenOptionsStatus?: string;
+  /** Actions to be displayed above the dynamically built chosen options pane. */
+  chosenOptionsActions?: React.ReactNode[];
+  /** Accessible label for the dynamically built controls between the two panes. */
+  controlsAriaLabel?: string;
+  /** Optional callback for the dynamically built add selected button */
+  addSelected?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
+  /** Accessible label for the dynamically built add selected button */
+  addSelectedAriaLabel?: string;
+  /** Tooltip content for the dynamically built add selected button */
+  addSelectedTooltip?: React.ReactNode;
+  /** Additonal tooltip properties for the dynamically built add selected tooltip */
+  addSelectedTooltipProps?: any;
+  /** Callback fired every time dynamically built options are chosen or removed */
+  onListChange?: (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => void;
+  /** Optional callback for the dynamically built add all button */
+  addAll?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
+  /** Accessible label for the dynamically built add all button */
+  addAllAriaLabel?: string;
+  /** Tooltip content for the dynamically built add all button */
+  addAllTooltip?: React.ReactNode;
+  /** Additonal tooltip properties for the dynamically built add all tooltip */
+  addAllTooltipProps?: any;
+  /** Optional callback for the dynamically built remove selected button */
+  removeSelected?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
+  /** Accessible label for the dynamically built remove selected button */
+  removeSelectedAriaLabel?: string;
+  /** Tooltip content for the dynamically built remove selected button */
+  removeSelectedTooltip?: React.ReactNode;
+  /** Additonal tooltip properties for the dynamically built remove selected tooltip  */
+  removeSelectedTooltipProps?: any;
+  /** Optional callback for the dynamically built remove all button */
+  removeAll?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
+  /** Accessible label for the dynamically built remove all button */
+  removeAllAriaLabel?: string;
+  /** Tooltip content for the dynamically built remove all button */
+  removeAllTooltip?: React.ReactNode;
+  /** Additonal tooltip properties for the dynamically built remove all tooltip */
+  removeAllTooltipProps?: any;
+  /** Optional callback fired when a dynamically built option is selected */
+  onOptionSelect?: (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean,
+    id: string,
+    itemData: any,
+    parentData: any
+  ) => void;
+  /** Optional callback fired when a dynamically built option is checked */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    checked: boolean,
+    checkedId: string,
+    newCheckedItems: string[]
+  ) => void;
+  /** Flag indicating a search bar should be included above both the dynamically built available and chosen panes. */
+  isSearchable?: boolean;
+  /** Accessible label for the search input on the dynamically built available options pane. */
+  availableOptionsSearchAriaLabel?: string;
+  /** A callback for when the search input value for the dynamically built available options changes. */
+  onAvailableOptionsSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
+  /** Accessible label for the search input on the dynamically built chosen options pane. */
+  chosenOptionsSearchAriaLabel?: string;
+  /** A callback for when the search input value for the dynamically built chosen options changes. */
+  onChosenOptionsSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
+  /** Optional filter function for custom filtering based on search string. Used with a dynamically built search input. */
+  filterOption?: (option: React.ReactNode, input: string) => boolean;
+}
+
+interface DualListSelectorState {
+  availableOptions: React.ReactNode[];
+  availableOptionsSelected: number[];
+  availableFilteredOptions: React.ReactNode[];
+  chosenOptions: React.ReactNode[];
+  chosenOptionsSelected: number[];
+  chosenFilteredOptions: React.ReactNode[];
+  availableTreeFilteredOptions: string[];
+  availableTreeOptionsChecked: string[];
+  chosenTreeOptionsChecked: string[];
+  chosenTreeFilteredOptions: string[];
+}
+
+class DualListSelector extends React.Component<DualListSelectorProps, DualListSelectorState> {
+  static displayName = 'DualListSelector';
+  private addAllButtonRef = React.createRef<HTMLButtonElement>();
+  private addSelectedButtonRef = React.createRef<HTMLButtonElement>();
+  private removeSelectedButtonRef = React.createRef<HTMLButtonElement>();
+  private removeAllButtonRef = React.createRef<HTMLButtonElement>();
+  static defaultProps: PickOptional<DualListSelectorProps> = {
+    children: '',
+    availableOptions: [],
+    availableOptionsTitle: 'Available options',
+    availableOptionsSearchAriaLabel: 'Available search input',
+    chosenOptions: [],
+    chosenOptionsTitle: 'Chosen options',
+    chosenOptionsSearchAriaLabel: 'Chosen search input',
+    controlsAriaLabel: 'Selector controls',
+    addAllAriaLabel: 'Add all',
+    addSelectedAriaLabel: 'Add selected',
+    removeSelectedAriaLabel: 'Remove selected',
+    removeAllAriaLabel: 'Remove all',
+    isTree: false,
+    isDisabled: false
+  };
+
+  // If the DualListSelector uses trees, concat the two initial arrays and merge duplicate folder IDs
+  private createMergedCopy() {
+    const copyOfAvailable = JSON.parse(JSON.stringify(this.props.availableOptions));
+    const copyOfChosen = JSON.parse(JSON.stringify(this.props.chosenOptions));
+
+    return this.props.isTree
+      ? Object.values(
+          (copyOfAvailable as DualListSelectorTreeItemData[])
+            .concat(copyOfChosen as DualListSelectorTreeItemData[])
+            .reduce((mapObj: any, item: DualListSelectorTreeItemData) => {
+              const key = item.id;
+              if (mapObj[key]) {
+                // If map already has an item ID, add the dupe ID's children to the existing map
+                mapObj[key].children.push(...item.children);
+              } else {
+                // Else clone the item data
+                mapObj[key] = { ...item };
+              }
+              return mapObj;
+            }, {})
+        )
+      : null;
+  }
+
+  constructor(props: DualListSelectorProps) {
+    super(props);
+    this.state = {
+      availableOptions: [...this.props.availableOptions] as React.ReactNode[],
+      availableOptionsSelected: [],
+      availableFilteredOptions: null,
+      availableTreeFilteredOptions: null,
+      chosenOptions: [...this.props.chosenOptions] as React.ReactNode[],
+      chosenOptionsSelected: [],
+      chosenFilteredOptions: null,
+      chosenTreeFilteredOptions: null,
+      availableTreeOptionsChecked: [],
+      chosenTreeOptionsChecked: []
+    };
+  }
+
+  /** In dev environment, prevents circular structure during JSON stringification when
+   * options passed in to the dual list selector include HTML elements.
+   */
+  replacer = (key: string, value: any) => {
+    if (key[0] === '_') {
+      return undefined;
+    }
+    return value;
+  };
+
+  componentDidUpdate() {
+    if (
+      JSON.stringify(this.props.availableOptions, this.replacer) !==
+        JSON.stringify(this.state.availableOptions, this.replacer) ||
+      JSON.stringify(this.props.chosenOptions, this.replacer) !==
+        JSON.stringify(this.state.chosenOptions, this.replacer)
+    ) {
+      this.setState({
+        availableOptions: [...this.props.availableOptions] as React.ReactNode[],
+        chosenOptions: [...this.props.chosenOptions] as React.ReactNode[]
+      });
+    }
+  }
+
+  onFilterUpdate = (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => {
+    const { isTree } = this.props;
+    if (paneType === 'available') {
+      if (isSearchReset) {
+        this.setState({
+          availableFilteredOptions: null,
+          availableTreeFilteredOptions: null
+        });
+        return;
+      }
+      if (isTree) {
+        this.setState({
+          availableTreeFilteredOptions: flattenTreeWithFolders(
+            newFilteredOptions as unknown as DualListSelectorTreeItemData[]
+          )
+        });
+      } else {
+        this.setState({
+          availableFilteredOptions: newFilteredOptions as React.ReactNode[]
+        });
+      }
+    } else if (paneType === 'chosen') {
+      if (isSearchReset) {
+        this.setState({
+          chosenFilteredOptions: null,
+          chosenTreeFilteredOptions: null
+        });
+        return;
+      }
+      if (isTree) {
+        this.setState({
+          chosenTreeFilteredOptions: flattenTreeWithFolders(
+            newFilteredOptions as unknown as DualListSelectorTreeItemData[]
+          )
+        });
+      } else {
+        this.setState({
+          chosenFilteredOptions: newFilteredOptions as React.ReactNode[]
+        });
+      }
+    }
+  };
+
+  addAllVisible = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      const itemsToRemove = [] as React.ReactNode[];
+      const newAvailable = [] as React.ReactNode[];
+      const movedOptions = prevState.availableFilteredOptions || prevState.availableOptions;
+      prevState.availableOptions.forEach((value) => {
+        if (movedOptions.indexOf(value) !== -1) {
+          itemsToRemove.push(value);
+        } else {
+          newAvailable.push(value);
+        }
+      });
+
+      const newChosen = [...prevState.chosenOptions, ...itemsToRemove];
+      this.props.addAll && this.props.addAll(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        chosenOptions: newChosen,
+        chosenFilteredOptions: newChosen,
+        availableOptions: newAvailable,
+        availableFilteredOptions: newAvailable,
+        chosenOptionsSelected: [],
+        availableOptionsSelected: []
+      };
+    });
+  };
+
+  addAllTreeVisible = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      const movedOptions =
+        prevState.availableTreeFilteredOptions ||
+        flattenTreeWithFolders(prevState.availableOptions as unknown as DualListSelectorTreeItemData[]);
+      const newAvailable = prevState.availableOptions
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, movedOptions)
+        ) as React.ReactNode[];
+
+      const currChosen = flattenTree(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
+      const nextChosenOptions = currChosen.concat(movedOptions);
+      const newChosen = this.createMergedCopy()
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
+        ) as React.ReactNode[];
+
+      this.props.addAll && this.props.addAll(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        chosenOptions: newChosen,
+        chosenFilteredOptions: newChosen,
+        availableOptions: newAvailable,
+        availableFilteredOptions: newAvailable,
+        availableTreeOptionsChecked: [],
+        chosenTreeOptionsChecked: []
+      };
+    });
+  };
+
+  addSelected = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      const itemsToRemove = [] as React.ReactNode[];
+      const newAvailable = [] as React.ReactNode[];
+      prevState.availableOptions.forEach((value, index) => {
+        if (prevState.availableOptionsSelected.indexOf(index) !== -1) {
+          itemsToRemove.push(value);
+        } else {
+          newAvailable.push(value);
+        }
+      });
+
+      const newChosen = [...prevState.chosenOptions, ...itemsToRemove];
+      this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        chosenOptionsSelected: [],
+        availableOptionsSelected: [],
+        chosenOptions: newChosen,
+        chosenFilteredOptions: newChosen,
+        availableOptions: newAvailable,
+        availableFilteredOptions: newAvailable
+      };
+    });
+  };
+
+  addTreeSelected = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      // Remove selected available nodes from current available nodes
+      const newAvailable = prevState.availableOptions
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
+        );
+
+      // Get next chosen options from current + new nodes and remap from base
+      const currChosen = flattenTree(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
+      const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
+      const newChosen = this.createMergedCopy()
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
+        ) as React.ReactNode[];
+
+      this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        availableTreeOptionsChecked: [],
+        chosenTreeOptionsChecked: [],
+        availableOptions: newAvailable,
+        chosenOptions: newChosen
+      };
+    });
+  };
+
+  removeAllVisible = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      const itemsToRemove = [] as React.ReactNode[];
+      const newChosen = [] as React.ReactNode[];
+      const movedOptions = prevState.chosenFilteredOptions || prevState.chosenOptions;
+      prevState.chosenOptions.forEach((value) => {
+        if (movedOptions.indexOf(value) !== -1) {
+          itemsToRemove.push(value);
+        } else {
+          newChosen.push(value);
+        }
+      });
+
+      const newAvailable = [...prevState.availableOptions, ...itemsToRemove];
+      this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        chosenOptions: newChosen,
+        chosenFilteredOptions: newChosen,
+        availableOptions: newAvailable,
+        availableFilteredOptions: newAvailable,
+        chosenOptionsSelected: [],
+        availableOptionsSelected: []
+      };
+    });
+  };
+
+  removeAllTreeVisible = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      const movedOptions =
+        prevState.chosenTreeFilteredOptions ||
+        flattenTreeWithFolders(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
+
+      const newChosen = prevState.chosenOptions
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) => filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, movedOptions));
+      const currAvailable = flattenTree(prevState.availableOptions as unknown as DualListSelectorTreeItemData[]);
+      const nextAvailableOptions = currAvailable.concat(movedOptions);
+      const newAvailable = this.createMergedCopy()
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
+        ) as React.ReactNode[];
+
+      this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        chosenOptions: newChosen,
+        availableOptions: newAvailable,
+        availableTreeOptionsChecked: [],
+        chosenTreeOptionsChecked: []
+      };
+    });
+  };
+
+  removeSelected = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      const itemsToRemove = [] as React.ReactNode[];
+      const newChosen = [] as React.ReactNode[];
+      prevState.chosenOptions.forEach((value, index) => {
+        if (prevState.chosenOptionsSelected.indexOf(index) !== -1) {
+          itemsToRemove.push(value);
+        } else {
+          newChosen.push(value);
+        }
+      });
+
+      const newAvailable = [...prevState.availableOptions, ...itemsToRemove];
+      this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        chosenOptionsSelected: [],
+        availableOptionsSelected: [],
+        chosenOptions: newChosen,
+        chosenFilteredOptions: newChosen,
+        availableOptions: newAvailable,
+        availableFilteredOptions: newAvailable
+      };
+    });
+  };
+
+  removeTreeSelected = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
+      // Remove selected chosen nodes from current chosen nodes
+      const newChosen = prevState.chosenOptions
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterRestTreeItems(item as unknown as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked)
+        );
+
+      // Get next chosen options from current and remap from base
+      const currAvailable = flattenTree(prevState.availableOptions as unknown as DualListSelectorTreeItemData[]);
+      const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
+      const newAvailable = this.createMergedCopy()
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
+        ) as React.ReactNode[];
+
+      this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+
+      return {
+        availableTreeOptionsChecked: [],
+        chosenTreeOptionsChecked: [],
+        availableOptions: newAvailable,
+        chosenOptions: newChosen
+      };
+    });
+  };
+
+  onOptionSelect = (
+    e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean,
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    id?: string,
+    itemData?: any,
+    parentData?: any
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  ) => {
+    this.setState((prevState) => {
+      const originalArray = isChosen ? prevState.chosenOptionsSelected : prevState.availableOptionsSelected;
+
+      let updatedArray = null;
+      if (originalArray.indexOf(index) !== -1) {
+        updatedArray = originalArray.filter((value) => value !== index);
+      } else {
+        updatedArray = [...originalArray, index];
+      }
+
+      return {
+        chosenOptionsSelected: isChosen ? updatedArray : prevState.chosenOptionsSelected,
+        availableOptionsSelected: isChosen ? prevState.availableOptionsSelected : updatedArray
+      };
+    });
+
+    this.props.onOptionSelect && this.props.onOptionSelect(e, index, isChosen, id, itemData, parentData);
+  };
+
+  isChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean) =>
+    isChosen
+      ? this.state.chosenTreeOptionsChecked.includes(treeItem.id)
+      : this.state.availableTreeOptionsChecked.includes(treeItem.id);
+  areAllDescendantsChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean): boolean =>
+    treeItem.children
+      ? treeItem.children.every((child) => this.areAllDescendantsChecked(child, isChosen))
+      : this.isChecked(treeItem, isChosen);
+  areSomeDescendantsChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean): boolean =>
+    treeItem.children
+      ? treeItem.children.some((child) => this.areSomeDescendantsChecked(child, isChosen))
+      : this.isChecked(treeItem, isChosen);
+
+  mapChecked = (item: DualListSelectorTreeItemData, isChosen: boolean): DualListSelectorTreeItemData => {
+    const hasCheck = this.areAllDescendantsChecked(item, isChosen);
+    item.isChecked = false;
+
+    if (hasCheck) {
+      item.isChecked = true;
+    } else {
+      const hasPartialCheck = this.areSomeDescendantsChecked(item, isChosen);
+      if (hasPartialCheck) {
+        item.isChecked = null;
+      }
+    }
+
+    if (item.children) {
+      return {
+        ...item,
+        children: item.children.map((child) => this.mapChecked(child, isChosen))
+      };
+    }
+    return item;
+  };
+
+  onTreeOptionCheck = (
+    evt: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    itemData: DualListSelectorTreeItemData,
+    isChosen: boolean
+  ) => {
+    const { availableOptions, availableTreeFilteredOptions, chosenOptions, chosenTreeFilteredOptions } = this.state;
+    let panelOptions;
+    if (isChosen) {
+      if (chosenTreeFilteredOptions) {
+        panelOptions = chosenOptions
+          .map((opt) => Object.assign({}, opt))
+          .filter((item) =>
+            filterTreeItemsWithoutFolders(item as unknown as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
+          );
+      } else {
+        panelOptions = chosenOptions;
+      }
+    } else {
+      if (availableTreeFilteredOptions) {
+        panelOptions = availableOptions
+          .map((opt) => Object.assign({}, opt))
+          .filter((item) =>
+            filterTreeItemsWithoutFolders(item as unknown as DualListSelectorTreeItemData, availableTreeFilteredOptions)
+          );
+      } else {
+        panelOptions = availableOptions;
+      }
+    }
+    const checkedOptionTree = panelOptions
+      .map((opt) => Object.assign({}, opt))
+      .filter((item) => filterTreeItems(item as unknown as DualListSelectorTreeItemData, [itemData.id]));
+    const flatTree = flattenTreeWithFolders(checkedOptionTree as unknown as DualListSelectorTreeItemData[]);
+
+    const prevChecked = isChosen ? this.state.chosenTreeOptionsChecked : this.state.availableTreeOptionsChecked;
+    let updatedChecked = [] as string[];
+    if (isChecked) {
+      updatedChecked = prevChecked.concat(flatTree.filter((id) => !prevChecked.includes(id)));
+    } else {
+      updatedChecked = prevChecked.filter((id) => !flatTree.includes(id));
+    }
+
+    this.setState(
+      (prevState) => ({
+        availableTreeOptionsChecked: isChosen ? prevState.availableTreeOptionsChecked : updatedChecked,
+        chosenTreeOptionsChecked: isChosen ? updatedChecked : prevState.chosenTreeOptionsChecked
+      }),
+      () => {
+        this.props.onOptionCheck && this.props.onOptionCheck(evt, isChecked, itemData.id, updatedChecked);
+      }
+    );
+  };
+
+  render() {
+    const {
+      availableOptionsTitle,
+      availableOptionsActions,
+      availableOptionsSearchAriaLabel,
+      className,
+      children,
+      chosenOptionsTitle,
+      chosenOptionsActions,
+      chosenOptionsSearchAriaLabel,
+      filterOption,
+      isSearchable,
+      chosenOptionsStatus,
+      availableOptionsStatus,
+      controlsAriaLabel,
+      addAllAriaLabel,
+      addSelectedAriaLabel,
+      removeSelectedAriaLabel,
+      removeAllAriaLabel,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      availableOptions: consumerPassedAvailableOptions,
+      chosenOptions: consumerPassedChosenOptions,
+      removeSelected,
+      addAll,
+      removeAll,
+      addSelected,
+      onListChange,
+      onAvailableOptionsSearchInputChanged,
+      onChosenOptionsSearchInputChanged,
+      onOptionSelect,
+      onOptionCheck,
+      id,
+      isTree,
+      isDisabled,
+      addAllTooltip,
+      addAllTooltipProps,
+      addSelectedTooltip,
+      addSelectedTooltipProps,
+      removeAllTooltip,
+      removeAllTooltipProps,
+      removeSelectedTooltip,
+      removeSelectedTooltipProps,
+      ...props
+    } = this.props;
+    const {
+      availableOptions,
+      chosenOptions,
+      chosenOptionsSelected,
+      availableOptionsSelected,
+      chosenTreeOptionsChecked,
+      availableTreeOptionsChecked
+    } = this.state;
+    const availableOptionsStatusToDisplay =
+      availableOptionsStatus ||
+      (isTree
+        ? `${
+            filterFolders(availableOptions as unknown as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
+              .length
+          } of ${flattenTree(availableOptions as unknown as DualListSelectorTreeItemData[]).length} items selected`
+        : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
+    const chosenOptionsStatusToDisplay =
+      chosenOptionsStatus ||
+      (isTree
+        ? `${
+            filterFolders(chosenOptions as unknown as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length
+          } of ${flattenTree(chosenOptions as unknown as DualListSelectorTreeItemData[]).length} items selected`
+        : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
+
+    const available = (
+      isTree
+        ? availableOptions.map((item) => this.mapChecked(item as unknown as DualListSelectorTreeItemData, false))
+        : availableOptions
+    ) as React.ReactNode[];
+    const chosen = (
+      isTree
+        ? chosenOptions.map((item) => this.mapChecked(item as unknown as DualListSelectorTreeItemData, true))
+        : chosenOptions
+    ) as React.ReactNode[];
+
+    return (
+      <DualListSelectorContext.Provider value={{ isTree }}>
+        <GenerateId>
+          {(randomId) => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children === '' ? (
+                <>
+                  <DualListSelectorPane
+                    isSearchable={isSearchable}
+                    onFilterUpdate={this.onFilterUpdate}
+                    searchInputAriaLabel={availableOptionsSearchAriaLabel}
+                    filterOption={filterOption}
+                    onSearchInputChanged={onAvailableOptionsSearchInputChanged}
+                    status={availableOptionsStatusToDisplay}
+                    title={availableOptionsTitle}
+                    options={available}
+                    selectedOptions={isTree ? availableTreeOptionsChecked : availableOptionsSelected}
+                    onOptionSelect={this.onOptionSelect}
+                    onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, false)}
+                    actions={availableOptionsActions}
+                    id={`${id || randomId}-available-pane`}
+                    isDisabled={isDisabled}
+                  />
+                  <DualListSelectorControlsWrapper aria-label={controlsAriaLabel}>
+                    <DualListSelectorControl
+                      isDisabled={
+                        (isTree ? availableTreeOptionsChecked.length === 0 : availableOptionsSelected.length === 0) ||
+                        isDisabled
+                      }
+                      onClick={isTree ? this.addTreeSelected : this.addSelected}
+                      ref={this.addSelectedButtonRef}
+                      aria-label={addSelectedAriaLabel}
+                      tooltipContent={addSelectedTooltip}
+                      tooltipProps={addSelectedTooltipProps}
+                    >
+                      <AngleRightIcon />
+                    </DualListSelectorControl>
+                    <DualListSelectorControl
+                      isDisabled={availableOptions.length === 0 || isDisabled}
+                      onClick={isTree ? this.addAllTreeVisible : this.addAllVisible}
+                      ref={this.addAllButtonRef}
+                      aria-label={addAllAriaLabel}
+                      tooltipContent={addAllTooltip}
+                      tooltipProps={addAllTooltipProps}
+                    >
+                      <AngleDoubleRightIcon />
+                    </DualListSelectorControl>
+                    <DualListSelectorControl
+                      isDisabled={chosenOptions.length === 0 || isDisabled}
+                      onClick={isTree ? this.removeAllTreeVisible : this.removeAllVisible}
+                      aria-label={removeAllAriaLabel}
+                      ref={this.removeAllButtonRef}
+                      tooltipContent={removeAllTooltip}
+                      tooltipProps={removeAllTooltipProps}
+                    >
+                      <AngleDoubleLeftIcon />
+                    </DualListSelectorControl>
+                    <DualListSelectorControl
+                      onClick={isTree ? this.removeTreeSelected : this.removeSelected}
+                      isDisabled={
+                        (isTree ? chosenTreeOptionsChecked.length === 0 : chosenOptionsSelected.length === 0) ||
+                        isDisabled
+                      }
+                      ref={this.removeSelectedButtonRef}
+                      aria-label={removeSelectedAriaLabel}
+                      tooltipContent={removeSelectedTooltip}
+                      tooltipProps={removeSelectedTooltipProps}
+                    >
+                      <AngleLeftIcon />
+                    </DualListSelectorControl>
+                  </DualListSelectorControlsWrapper>
+                  <DualListSelectorPane
+                    isChosen
+                    isSearchable={isSearchable}
+                    onFilterUpdate={this.onFilterUpdate}
+                    searchInputAriaLabel={chosenOptionsSearchAriaLabel}
+                    filterOption={filterOption}
+                    onSearchInputChanged={onChosenOptionsSearchInputChanged}
+                    title={chosenOptionsTitle}
+                    status={chosenOptionsStatusToDisplay}
+                    options={chosen}
+                    selectedOptions={isTree ? chosenTreeOptionsChecked : chosenOptionsSelected}
+                    onOptionSelect={this.onOptionSelect}
+                    onOptionCheck={(e, isChecked, itemData) => this.onTreeOptionCheck(e, isChecked, itemData, true)}
+                    actions={chosenOptionsActions}
+                    id={`${id || randomId}-chosen-pane`}
+                    isDisabled={isDisabled}
+                  />
+                </>
+              ) : (
+                children
+              )}
+            </div>
+          )}
+        </GenerateId>
+      </DualListSelectorContext.Provider>
+    );
+  }
+}
+
+export { DualListSelector };
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorContext.ts b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorContext.ts
similarity index 83%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorContext.ts
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorContext.ts
index 3eccc9a0dc6..27b1ed1eff2 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorContext.ts
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorContext.ts
@@ -12,6 +12,7 @@ export const DualListSelectorListContext = React.createContext<{
   displayOption?: (option: React.ReactNode) => boolean;
   selectedOptions?: string[] | number[];
   id?: string;
+  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
   options?: React.ReactNode[];
   isDisabled?: boolean;
 }>({});
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorControl.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorControl.tsx
similarity index 99%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorControl.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorControl.tsx
index e874c25ad92..9a6750e458e 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorControl.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorControl.tsx
@@ -29,7 +29,7 @@ export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLD
 
 export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
   innerRef,
-  children,
+  children = null,
   className,
   'aria-label': ariaLabel,
   isDisabled = true,
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorControlsWrapper.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorControlsWrapper.tsx
similarity index 95%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorControlsWrapper.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorControlsWrapper.tsx
index 66d69b0373a..2d5c9665fd8 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorControlsWrapper.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorControlsWrapper.tsx
@@ -6,7 +6,7 @@ import { handleArrows } from '../../../helpers';
 /** Acts as the container for the DualListSelectorControl sub-components. */
 
 export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content to be rendered inside of the controls wrapper. */
+  /** Anything that can be rendered inside of the wrapper. */
   children?: React.ReactNode;
   /** Additional classes added to the wrapper. */
   className?: string;
@@ -60,7 +60,6 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapperRef.current]);
 
   return (
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorList.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorList.tsx
similarity index 74%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorList.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorList.tsx
index 13d00467e6b..cc0224eef1f 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorList.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorList.tsx
@@ -7,7 +7,7 @@ import { DualListSelectorListContext } from './DualListSelectorContext';
 /** Acts as the container for DualListSelectorListItem sub-components. */
 
 export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
-  /** Content rendered inside the dual list selector list. */
+  /** Content rendered inside the dual list selector list */
   children?: React.ReactNode;
 }
 
@@ -15,8 +15,24 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
   children,
   ...props
 }: DualListSelectorListProps) => {
-  const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
-    React.useContext(DualListSelectorListContext);
+  const {
+    setFocusedOption,
+    isTree,
+    ariaLabelledBy,
+    focusedOption,
+    displayOption,
+    selectedOptions,
+    id,
+    onOptionSelect,
+    options,
+    isDisabled
+  } = React.useContext(DualListSelectorListContext);
+
+  // only called when options are passed via options prop
+  const onOptionClick = (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => {
+    setFocusedOption(id);
+    onOptionSelect(e, index, id);
+  };
 
   const hasOptions = () =>
     options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
@@ -42,6 +58,7 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
                   key={index}
                   isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
                   id={`${id}-option-${index}`}
+                  onOptionSelect={(e, id) => onOptionClick(e, index, id)}
                   orderIndex={index}
                   isDisabled={isDisabled}
                 >
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorListItem.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx
similarity index 96%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorListItem.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx
index 8e25b149aa3..d14ec10e06f 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorListItem.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx
@@ -17,7 +17,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating the list item is currently selected. */
   isSelected?: boolean;
-  /** Callback fired when an option is selected. */
+  /** Callback fired when an option is selected.  */
   onOptionSelect?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void;
   /** ID of the option. */
   id?: string;
@@ -25,11 +25,11 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   orderIndex?: number;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<HTMLLIElement>;
-  /** Flag indicating this item is draggable for reordering. */
+  /** Flag indicating this item is draggable for reordring */
   isDraggable?: boolean;
-  /** Accessible label for the draggable button on draggable list items. */
+  /** Accessible label for the draggable button on draggable list items */
   draggableButtonAriaLabel?: string;
-  /** Flag indicating if the dual list selector is in a disabled state. */
+  /** Flag indicating if the dual list selector is in a disabled state */
   isDisabled?: boolean;
 }
 
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorListWrapper.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorListWrapper.tsx
similarity index 86%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorListWrapper.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorListWrapper.tsx
index 9f856424850..e50b504b66f 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorListWrapper.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorListWrapper.tsx
@@ -8,11 +8,11 @@ import { DualListSelectorContext, DualListSelectorListContext } from './DualList
 export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes applied to the dual list selector. */
   className?: string;
-  /** Anything that can be rendered inside of the list. */
+  /** Anything that can be rendered inside of the list */
   children?: React.ReactNode;
-  /** ID of the dual list selector list. */
+  /** Id of the dual list selector list */
   id?: string;
-  /** Accessibly label for the list. */
+  /** Accessibly label for the list */
   'aria-labelledby': string;
   /** @hide forwarded ref */
   innerRef?: React.RefObject<HTMLDivElement>;
@@ -20,7 +20,9 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
   selectedOptions?: string[] | number[];
-  /** @hide Function to determine if an option should be displayed depending on a custom filter value. */
+  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
+  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
+  /** @hide Function to determine if an option should be displayed depending on a dynamically built filter value */
   displayOption?: (option: React.ReactNode) => boolean;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -33,6 +35,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   innerRef,
   options = [],
   selectedOptions = [],
+  onOptionSelect,
   displayOption,
   id = getUniqueId('dual-list-selector-list'),
   isDisabled = false,
@@ -43,7 +46,8 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
-  // Sets up keyboard focus handling for the dual list selector menu child of the pane.
+  // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard
+  // handling is applied whether the pane is dynamically built or passed via the children prop.
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
@@ -90,7 +94,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [menuRef.current]);
 
   return (
@@ -105,6 +108,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
           selectedOptions,
           id,
           options,
+          onOptionSelect,
           isDisabled
         }}
       >
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorPane.tsx
new file mode 100644
index 00000000000..e9a0e2999e7
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorPane.tsx
@@ -0,0 +1,245 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
+import { getUniqueId } from '../../../helpers';
+import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
+import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
+import { DualListSelectorList } from './DualListSelectorList';
+import { SearchInput } from '../../../components/SearchInput';
+import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
+
+/** Acts as the container for a list of options that are either available or chosen,
+ * depending on the pane type (available or chosen). A search input and other actions,
+ * such as sorting, can also be passed into this sub-component.
+ */
+
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes applied to the dual list selector pane. */
+  className?: string;
+  /** A dual list selector list or dual list selector tree to be rendered in the pane. */
+  children?: React.ReactNode;
+  /** Flag indicating if this pane is the chosen pane. */
+  isChosen?: boolean;
+  /** Status to display above the pane. */
+  status?: string;
+  /** Title of the pane. */
+  title?: React.ReactNode;
+  /** A search input placed above the list at the top of the pane, before actions. */
+  searchInput?: React.ReactNode;
+  /** Actions to place above the pane. */
+  actions?: React.ReactNode[];
+  /** Id of the pane. */
+  id?: string;
+  /** @hide Options to list in the pane. */
+  options?: React.ReactNode[];
+  /** @hide Options currently selected in the pane. */
+  selectedOptions?: string[] | number[];
+  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
+  onOptionSelect?: (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean,
+    id?: string,
+    itemData?: any,
+    parentData?: any
+  ) => void;
+  /** @hide Callback for when a tree option is checked. Optionally used only when options prop is provided. */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    itemData: DualListSelectorTreeItemData
+  ) => void;
+  /** @hide Flag indicating a dynamically built search bar should be included above the pane. */
+  isSearchable?: boolean;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+  /** Callback for search input. To be used when isSearchable is true. */
+  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** @hide A callback for when the search input value for changes.  To be used when isSearchable is true. */
+  onSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
+  /** @hide Callback for search input clear button */
+  onSearchInputClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */
+  filterOption?: (option: React.ReactNode, input: string) => boolean;
+  /** @hide Accessible label for the search input. To be used when isSearchable is true. */
+  searchInputAriaLabel?: string;
+  /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
+  onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
+}
+
+export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
+  isChosen = false,
+  className = '',
+  status = '',
+  actions,
+  searchInput,
+  children,
+  onOptionSelect,
+  onOptionCheck,
+  title = '',
+  options = [],
+  selectedOptions = [],
+  isSearchable = false,
+  searchInputAriaLabel = '',
+  onFilterUpdate,
+  onSearchInputChanged,
+  onSearchInputClear,
+  filterOption,
+  id = getUniqueId('dual-list-selector-pane'),
+  isDisabled = false,
+  listMinHeight,
+  ...props
+}: DualListSelectorPaneProps) => {
+  const [input, setInput] = React.useState('');
+  const { isTree } = React.useContext(DualListSelectorContext);
+
+  // only called when search input is dynamically built
+  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    let filtered: React.ReactNode[];
+    if (isTree) {
+      filtered = options
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue));
+    } else {
+      filtered = options.filter((option) => {
+        if (displayOption(option)) {
+          return option;
+        }
+      });
+    }
+    onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');
+
+    if (onSearchInputChanged) {
+      onSearchInputChanged(e, newValue);
+    }
+    setInput(newValue);
+  };
+
+  // only called when options are passed via options prop and isTree === true
+  const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
+    if (filterOption) {
+      return filterOption(item as unknown as React.ReactNode, input);
+    } else {
+      if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
+        return true;
+      }
+    }
+    if (item.children) {
+      return (
+        (item.children = item.children
+          .map((opt) => Object.assign({}, opt))
+          .filter((child) => filterInput(child, input))).length > 0
+      );
+    }
+  };
+
+  // only called when options are passed via options prop and isTree === false
+  const displayOption = (option: React.ReactNode) => {
+    if (filterOption) {
+      return filterOption(option, input);
+    } else {
+      return option.toString().toLowerCase().includes(input.toLowerCase());
+    }
+  };
+
+  return (
+    <div
+      className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
+      {...props}
+    >
+      {title && (
+        <div className={css(styles.dualListSelectorHeader)}>
+          <div className={`${styles.dualListSelector}__title`}>
+            <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+          </div>
+        </div>
+      )}
+      {(actions || searchInput || isSearchable) && (
+        <div className={css(styles.dualListSelectorTools)}>
+          {(isSearchable || searchInput) && (
+            <div className={css(styles.dualListSelectorToolsFilter)}>
+              {searchInput ? (
+                searchInput
+              ) : (
+                <SearchInput
+                  onChange={isDisabled ? undefined : onChange}
+                  onClear={
+                    onSearchInputClear
+                      ? onSearchInputClear
+                      : (e) => onChange(e as React.FormEvent<HTMLInputElement>, '')
+                  }
+                  isDisabled={isDisabled}
+                  aria-label={searchInputAriaLabel}
+                />
+              )}
+            </div>
+          )}
+          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
+        </div>
+      )}
+      {status && (
+        <div className={css(styles.dualListSelectorStatus)}>
+          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
+            {status}
+          </div>
+        </div>
+      )}
+      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
+        {!isTree && (
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            options={options}
+            selectedOptions={selectedOptions}
+            onOptionSelect={(
+              e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+              index: number,
+              id: string
+            ) => onOptionSelect(e, index, isChosen, id)}
+            displayOption={displayOption}
+            id={`${id}-list`}
+            isDisabled={isDisabled}
+            {...(listMinHeight && {
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+            })}
+          >
+            {children}
+          </DualListSelectorListWrapper>
+        )}
+        {isTree && (
+          <DualListSelectorListWrapper
+            aria-labelledby={`${id}-status`}
+            id={`${id}-list`}
+            {...(listMinHeight && {
+              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+            })}
+          >
+            {options.length > 0 ? (
+              <DualListSelectorList>
+                <DualListSelectorTree
+                  data={
+                    isSearchable
+                      ? (options
+                          .map((opt) => Object.assign({}, opt))
+                          .filter((item) =>
+                            filterInput(item as unknown as DualListSelectorTreeItemData, input)
+                          ) as unknown as DualListSelectorTreeItemData[])
+                      : (options as unknown as DualListSelectorTreeItemData[])
+                  }
+                  onOptionCheck={onOptionCheck}
+                  id={`${id}-tree`}
+                  isDisabled={isDisabled}
+                />
+              </DualListSelectorList>
+            ) : (
+              children
+            )}
+          </DualListSelectorListWrapper>
+        )}
+      </DualListSelectorPaneContext.Provider>
+    </div>
+  );
+};
+DualListSelectorPane.displayName = 'DualListSelectorPane';
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorTree.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTree.tsx
similarity index 82%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorTree.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTree.tsx
index 8fb28a289b9..a151d625050 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorTree.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTree.tsx
@@ -10,26 +10,26 @@ export interface DualListSelectorTreeItemData {
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge. */
+  /** Flag indicating this option has a badge */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked. */
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     isChosen: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
-  /** ID of the option. */
+  /** ID of the option */
   id: string;
-  /** Text of the option. */
+  /** Text of the option */
   text: string;
-  /** Parent ID of an option. */
+  /** Parent id of an option */
   parentId?: string;
-  /** Checked state of the option. */
+  /** Checked state of the option */
   isChecked: boolean;
-  /** Additional properties to pass to the option checkbox. */
+  /** Additional properties to pass to the option checkbox */
   checkProps?: any;
-  /** Additional properties to pass to the option badge. */
+  /** Additional properties to pass to the option badge */
   badgeProps?: any;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -40,19 +40,19 @@ export interface DualListSelectorTreeItemData {
  */
 
 export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
-  /** Data of the tree view. */
+  /** Data of the tree view */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
-  /** ID of the tree view. */
+  /** ID of the tree view */
   id?: string;
-  /** @hide Flag indicating if the list is nested. */
+  /** @hide Flag indicating if the list is nested */
   isNested?: boolean;
-  /** Flag indicating if all options should have badges. */
+  /** Flag indicating if all options should have badges */
   hasBadges?: boolean;
-  /** Sets the default expanded behavior. */
+  /** Sets the default expanded behavior */
   defaultAllExpanded?: boolean;
-  /** Flag indicating if the dual list selector tree is in the disabled state. */
+  /** Flag indicating if the dual list selector tree is in the disabled state */
   isDisabled?: boolean;
-  /** Callback fired when an option is checked. */
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorTreeItem.tsx b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx
similarity index 95%
rename from packages/react-core/src/next/components/DualListSelector/DualListSelectorTreeItem.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx
index bfefccc81f8..7b450b1aa74 100644
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorTreeItem.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx
@@ -14,25 +14,25 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge. */
+  /** Flag indicating this option has a badge */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked. */
+  /** Callback fired when an option is checked */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
-  /** ID of the option. */
+  /** ID of the option */
   id: string;
-  /** Text of the option. */
+  /** Text of the option */
   text: string;
   /** Flag indicating if this open is checked. */
   isChecked?: boolean;
-  /** Additional properties to pass to the option checkbox. */
+  /** Additional properties to pass to the option checkbox */
   checkProps?: any;
-  /** Additional properties to pass to the option badge. */
+  /** Additional properties to pass to the option badge */
   badgeProps?: any;
-  /** Raw data of the option. */
+  /** Raw data of the option */
   itemData?: DualListSelectorTreeItemData;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/DualListSelector.test.tsx
new file mode 100644
index 00000000000..0bf84200bf7
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/DualListSelector.test.tsx
@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react';
+import { DualListSelector } from '../DualListSelector';
+import React from 'react';
+
+describe('DualListSelector', () => {
+  test('basic', () => {
+    const { asFragment } = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="firstTest" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with search inputs', () => {
+    const { asFragment } = render(
+      <DualListSelector availableOptions={['Option 1', 'Option 2']} id="secondTest" isSearchable />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with custom status', () => {
+    const { asFragment } = render(
+      <DualListSelector
+        availableOptions={['Option 1', 'Option 2']}
+        availableOptionsStatus="Test status1"
+        chosenOptionsStatus="Test status2"
+        id="thirdTest"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic with disabled controls', () => {
+    const { asFragment } = render(
+      <DualListSelector isDisabled availableOptions={['Option 1', 'Option 2']} id="disabledTest" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with tree', () => {
+    const { asFragment } = render(
+      <DualListSelector
+        availableOptions={[
+          { id: 'O1', text: 'Opt1', defaultExpanded: true, children: [{ id: 'O3', text: 'Opt3' }] },
+          { id: 'O2', text: 'Opt2' }
+        ]}
+        availableOptionsStatus="Test status1"
+        chosenOptionsStatus="Test status2"
+        id="tree-test"
+        isTree
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with actions', () => {
+    const { asFragment } = render(
+      <DualListSelector
+        availableOptions={['Option 1', 'Option 2']}
+        chosenOptions={['Option 3', 'Option 4']}
+        availableOptionsActions={[<span key={1}>TestNode1</span>]}
+        chosenOptionsActions={[<span key={2}>TestNode2</span>]}
+        id="fourthTest"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
new file mode 100644
index 00000000000..7c28575d55c
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -0,0 +1,1785 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DualListSelector basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="firstTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="firstTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="firstTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="firstTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="firstTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-3"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-4"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="firstTest-chosen-pane-status"
+        >
+          0 of 0 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector basic with disabled controls 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="disabledTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="disabledTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-disabled="true"
+          aria-labelledby="disabledTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
+            id="disabledTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
+            id="disabledTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-13"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-14"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-15"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-16"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="disabledTest-chosen-pane-status"
+        >
+          0 of 0 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-disabled="true"
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with actions 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="fourthTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-actions"
+        >
+          <span>
+            TestNode1
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="fourthTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="fourthTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-21"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-22"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-23"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-24"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-actions"
+        >
+          <span>
+            TestNode2
+          </span>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="fourthTest-chosen-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="fourthTest-chosen-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-chosen-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 3
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="fourthTest-chosen-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 4
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with custom status 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="thirdTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="thirdTest-available-pane-status"
+        >
+          Test status1
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="thirdTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="thirdTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="thirdTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-9"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-10"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-11"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-12"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="thirdTest-chosen-pane-status"
+        >
+          Test status2
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with search inputs 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="secondTest"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-filter"
+        >
+          <div
+            class="pf-v6-c-text-input-group"
+          >
+            <div
+              class="pf-v6-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-v6-c-text-input-group__text"
+              >
+                <span
+                  class="pf-v6-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Available search input"
+                  class="pf-v6-c-text-input-group__text-input"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="secondTest-available-pane-status"
+        >
+          0 of 2 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="secondTest-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="listbox"
+        >
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="secondTest-available-pane-list-option-0"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 1
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="secondTest-available-pane-list-option-1"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row"
+            >
+              <span
+                class="pf-v6-c-dual-list-selector__item"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Option 2
+                  </span>
+                </span>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-5"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-6"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-7"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-8"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__tools"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__tools-filter"
+        >
+          <div
+            class="pf-v6-c-text-input-group"
+          >
+            <div
+              class="pf-v6-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-v6-c-text-input-group__text"
+              >
+                <span
+                  class="pf-v6-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Chosen search input"
+                  class="pf-v6-c-text-input-group__text-input"
+                  type="text"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="secondTest-chosen-pane-status"
+        >
+          0 of 0 items selected
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DualListSelector with tree 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    id="tree-test"
+  >
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-available"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Available options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="tree-test-available-pane-status"
+        >
+          Test status1
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          aria-activedescendant=""
+          aria-labelledby="tree-test-available-pane-status"
+          aria-multiselectable="true"
+          class="pf-v6-c-dual-list-selector__list"
+          role="tree"
+        >
+          <li
+            aria-expanded="true"
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
+            id="O1"
+            role="treeitem"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
+            >
+              <div
+                class="pf-v6-c-dual-list-selector__item"
+                tabindex="-1"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <div
+                    class="pf-v6-c-dual-list-selector__item-toggle"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="pf-v6-c-dual-list-selector__item-toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-check"
+                  >
+                    <input
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Opt1
+                  </span>
+                </span>
+              </div>
+            </div>
+            <ul
+              class="pf-v6-c-dual-list-selector__list"
+              role="group"
+            >
+              <li
+                aria-selected="false"
+                class="pf-v6-c-dual-list-selector__list-item"
+                id="O3"
+                role="treeitem"
+              >
+                <div
+                  class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
+                >
+                  <div
+                    class="pf-v6-c-dual-list-selector__item"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="pf-v6-c-dual-list-selector__item-main"
+                    >
+                      <span
+                        class="pf-v6-c-dual-list-selector__item-check"
+                      >
+                        <input
+                          tabindex="-1"
+                          type="checkbox"
+                        />
+                      </span>
+                      <span
+                        class="pf-v6-c-dual-list-selector__item-text"
+                      >
+                        Opt3
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </li>
+          <li
+            aria-selected="false"
+            class="pf-v6-c-dual-list-selector__list-item"
+            id="O2"
+            role="treeitem"
+          >
+            <div
+              class="pf-v6-c-dual-list-selector__list-item-row pf-m-check"
+            >
+              <div
+                class="pf-v6-c-dual-list-selector__item"
+                tabindex="-1"
+              >
+                <span
+                  class="pf-v6-c-dual-list-selector__item-main"
+                >
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-check"
+                  >
+                    <input
+                      tabindex="-1"
+                      type="checkbox"
+                    />
+                  </span>
+                  <span
+                    class="pf-v6-c-dual-list-selector__item-text"
+                  >
+                    Opt2
+                  </span>
+                </span>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      aria-label="Selector controls"
+      class="pf-v6-c-dual-list-selector__controls"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-17"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Add all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-18"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove all"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-19"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__controls-item"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Remove selected"
+          class="pf-v6-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-20"
+          data-ouia-component-type="PF6/Button"
+          data-ouia-safe="true"
+          disabled=""
+          tabindex="-1"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-dual-list-selector__pane pf-m-chosen"
+    >
+      <div
+        class="pf-v6-c-dual-list-selector__header"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__title"
+        >
+          <div
+            class="pf-v6-c-dual-list-selector__title-text"
+          >
+            Chosen options
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__status"
+      >
+        <div
+          class="pf-v6-c-dual-list-selector__status-text"
+          id="tree-test-chosen-pane-status"
+        >
+          Test status2
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-dual-list-selector__menu"
+        tabindex="0"
+      >
+        <ul
+          class="pf-v6-c-dual-list-selector__list"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
similarity index 67%
rename from packages/react-core/src/next/components/DualListSelector/examples/DualListSelector.md
rename to packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
index d5f6b8e7647..9bf078d52ee 100644
--- a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelector.md
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
@@ -13,9 +13,22 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData'
   ]
-beta: true
+deprecated: true
 ---
 
+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,
+DualListSelectorTreeItemData as DLSTreeItemDataDeprecated,
+} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
@@ -23,32 +36,9 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 ## Examples
 
-The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
-
-```noLive
-<DualListSelector>
-  <DualListSelectorPane>
-    <DualListSelectorList>
-      <DualListSelectorListItem />
-    </DualListSelectorList>
-  </DualListSelectorPane>
-
-  <DualListSelectorControlsWrapper>
-    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
-  </DualListSelectorControlsWrapper>
-
-  <DualListSelectorPane isChosen>
-    <DualListSelectorList>
-      <DualListSelectorListItem />
-    </DualListSelectorList>
-  </DualListSelectorPane>
-</DualListSelector>
-```
-
 ### Basic
 
 ```ts file="./DualListSelectorBasic.tsx"
@@ -75,11 +65,43 @@ The dual list selector is built in a composable manner to make customization eas
 
 ### With tree
 
-```ts file="DualListSelectorTree.tsx"
+```ts file="./DualListSelectorTreeExample.tsx"
+
+```
+
+## Composable structure
+
+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:
+
+```noLive
+<DualListSelector>
+  <DualListSelectorPane>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+
+  <DualListSelectorControlsWrapper>
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
+  </DualListSelectorControlsWrapper>
+
+  <DualListSelectorPane isChosen>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+</DualListSelector>
+```
+
+### Composable dual list selector
+
+```ts file="./DualListSelectorComposable.tsx"
 
 ```
 
-### Drag and drop
+### Composable with drag and drop
+
+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 [drag and drop demos](/components/drag-and-drop/react-demos).
 
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
@@ -93,8 +115,14 @@ This example only allows reordering the contents of the "chosen" pane with drag
   - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
     event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
+
+```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"
+
+```
+
+### Composable with tree
 
-```ts file="DualListSelectorDragDrop.tsx"
+```ts file="DualListSelectorComposableTree.tsx"
 
 ```
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasic.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasic.tsx
new file mode 100644
index 00000000000..c253a7d0a1d
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasic.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DLSDeprecated
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-basic"
+    />
+  );
+};
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
new file mode 100644
index 00000000000..1ae0e33ef71
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+
+export const DualListSelectorBasicSearch: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DLSDeprecated
+      isSearchable
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-basic-search"
+    />
+  );
+};
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
new file mode 100644
index 00000000000..6bf32db13bf
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+
+export const DualListSelectorBasicTooltips: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DLSDeprecated
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      addAllTooltip="Add all options"
+      addAllTooltipProps={{ position: 'top' }}
+      addSelectedTooltip="Add selected options"
+      addSelectedTooltipProps={{ position: 'right' }}
+      removeSelectedTooltip="Remove selected options"
+      removeSelectedTooltipProps={{ position: 'left' }}
+      removeAllTooltip="Remove all options"
+      removeAllTooltipProps={{ position: 'bottom' }}
+      id="dual-list-selector-basic-tooltips"
+    />
+  );
+};
diff --git a/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
new file mode 100644
index 00000000000..67082c0d55d
--- /dev/null
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button, ButtonVariant, Checkbox } from '@patternfly/react-core';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+
+export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    <span key="option1">Option 1</span>,
+    <span key="option3">Option 3</span>,
+    <span key="option4">Option 4</span>,
+    <span key="option2">Option 2</span>
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+
+  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+    setAvailableOptions(newAvailableOptions);
+    setChosenOptions(newChosenOptions);
+  };
+
+  const onSort = (pane: string) => {
+    const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];
+    (toSort as React.ReactElement[]).sort((a, b) => {
+      if (a.props.children > b.props.children) {
+        return 1;
+      }
+      if (a.props.children < b.props.children) {
+        return -1;
+      }
+      return 0;
+    });
+
+    if (pane === 'available') {
+      setAvailableOptions(toSort);
+    } else {
+      setChosenOptions(toSort);
+    }
+  };
+
+  const filterOption = (option: React.ReactNode, input: string) =>
+    (option as React.ReactElement).props.children.includes(input);
+
+  const availableOptionsActions = [
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={() => onSort('available')}
+      aria-label="Sort available options"
+      key="availableSortButton"
+      isDisabled={isDisabled}
+    >
+      <PficonSortCommonAscIcon />
+    </Button>
+  ];
+
+  const chosenOptionsActions = [
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={() => onSort('chosen')}
+      aria-label="Sort chosen options"
+      key="chosenSortButton"
+      isDisabled={isDisabled}
+    >
+      <PficonSortCommonAscIcon />
+    </Button>
+  ];
+
+  return (
+    <React.Fragment>
+      <DLSDeprecated
+        isSearchable
+        availableOptions={availableOptions}
+        availableOptionsActions={availableOptionsActions}
+        chosenOptions={chosenOptions}
+        chosenOptionsActions={chosenOptionsActions}
+        addAll={onListChange}
+        removeAll={onListChange}
+        addSelected={onListChange}
+        removeSelected={onListChange}
+        filterOption={filterOption}
+        isDisabled={isDisabled}
+        id="dual-list-selector-complex"
+      />
+      <Checkbox
+        key="isDisabled"
+        id="isDisabled"
+        label="isDisabled"
+        aria-label="isDisabled"
+        isChecked={isDisabled}
+        onChange={() => setIsDisabled(!isDisabled)}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
similarity index 88%
rename from packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 53870b2bbef..87534c8db49 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -2,12 +2,6 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
   SearchInput,
   EmptyState,
   EmptyStateVariant,
@@ -15,6 +9,14 @@ import {
   EmptyStateBody,
   EmptyStateActions
 } from '@patternfly/react-core';
+import {
+  DualListSelector as DLSDeprecated,
+  DualListSelectorPane as DLSPaneDeprecated,
+  DualListSelectorList as DLSListDeprecated,
+  DualListSelectorListItem as DLSListItemDeprecated,
+  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+  DualListSelectorControl as DLSControlDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
@@ -150,8 +152,8 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   );
 
   return (
-    <DualListSelector>
-      <DualListSelectorPane
+    <DLSDeprecated>
+      <DLSPaneDeprecated
         title="Available"
         status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
           availableOptions.filter((option) => option.isVisible).length
@@ -164,57 +166,57 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           availableOptions.filter((option) => option.isVisible).length === 0 &&
           buildEmptyState(true)}
         {availableOptions.filter((option) => option.isVisible).length > 0 && (
-          <DualListSelectorList>
+          <DLSListDeprecated>
             {availableOptions.map((option, index) =>
               option.isVisible ? (
-                <DualListSelectorListItem
+                <DLSListItemDeprecated
                   key={index}
                   isSelected={option.selected}
                   id={`composable-available-option-${index}`}
                   onOptionSelect={(e) => onOptionSelect(e, index, false)}
                 >
                   {option.text}
-                </DualListSelectorListItem>
+                </DLSListItemDeprecated>
               ) : null
             )}
-          </DualListSelectorList>
+          </DLSListDeprecated>
         )}
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
+      </DLSPaneDeprecated>
+      <DLSControlsWrapperDeprecated>
+        <DLSControlDeprecated
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
           tooltipContent="Add selected"
         >
           <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
           tooltipContent="Add all"
         >
           <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
           tooltipContent="Remove all"
         >
           <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
           tooltipContent="Remove selected"
         >
           <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DualListSelectorPane
+        </DLSControlDeprecated>
+      </DLSControlsWrapperDeprecated>
+      <DLSPaneDeprecated
         title="Chosen"
         status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
           chosenOptions.filter((option) => option.isVisible).length
@@ -228,22 +230,22 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           chosenOptions.filter((option) => option.isVisible).length === 0 &&
           buildEmptyState(false)}
         {chosenOptions.filter((option) => option.isVisible).length > 0 && (
-          <DualListSelectorList>
+          <DLSListDeprecated>
             {chosenOptions.map((option, index) =>
               option.isVisible ? (
-                <DualListSelectorListItem
+                <DLSListItemDeprecated
                   key={index}
                   isSelected={option.selected}
                   id={`composable-chosen-option-${index}`}
                   onOptionSelect={(e) => onOptionSelect(e, index, true)}
                 >
                   {option.text}
-                </DualListSelectorListItem>
+                </DLSListItemDeprecated>
               ) : null
             )}
-          </DualListSelectorList>
+          </DLSListDeprecated>
         )}
-      </DualListSelectorPane>
-    </DualListSelector>
+      </DLSPaneDeprecated>
+    </DLSDeprecated>
   );
 };
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
similarity index 82%
rename from packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
index ecc0a13c9d1..b7d00dd4702 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import {
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl
-} from '@patternfly/react-core';
-import { DragDrop, Draggable, Droppable, DraggableItemPosition } from '@patternfly/react-core/deprecated';
+  DragDrop,
+  Draggable,
+  Droppable,
+  DraggableItemPosition,
+  DualListSelector as DLSDeprecated,
+  DualListSelectorPane as DLSPaneDeprecated,
+  DualListSelectorList as DLSListDeprecated,
+  DualListSelectorListItem as DLSListItemDeprecated,
+  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+  DualListSelectorControl as DLSControlDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
@@ -90,58 +93,58 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
   };
 
   return (
-    <DualListSelector>
-      <DualListSelectorPane
+    <DLSDeprecated>
+      <DLSPaneDeprecated
         title="Available"
         status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
           availableOptions.filter((option) => option.isVisible).length
         } options selected`}
       >
-        <DualListSelectorList>
+        <DLSListDeprecated>
           {availableOptions.map((option, index) =>
             option.isVisible ? (
-              <DualListSelectorListItem
+              <DLSListItemDeprecated
                 key={index}
                 isSelected={option.selected}
                 id={`composable-drag-drop-available-option-${index}`}
                 onOptionSelect={(e) => onOptionSelect(e, index, false)}
               >
                 {option.text}
-              </DualListSelectorListItem>
+              </DLSListItemDeprecated>
             ) : null
           )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
+        </DLSListDeprecated>
+      </DLSPaneDeprecated>
+      <DLSControlsWrapperDeprecated>
+        <DLSControlDeprecated
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
         >
           <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
         >
           <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
         >
           <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
         >
           <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
+        </DLSControlDeprecated>
+      </DLSControlsWrapperDeprecated>
       <DragDrop
         onDrag={() => {
           setIgnoreNextOptionSelect(true);
@@ -149,7 +152,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
         }}
         onDrop={onDrop}
       >
-        <DualListSelectorPane
+        <DLSPaneDeprecated
           title="Chosen"
           status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
             chosenOptions.filter((option) => option.isVisible).length
@@ -157,25 +160,25 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           isChosen
         >
           <Droppable hasNoWrapper>
-            <DualListSelectorList>
+            <DLSListDeprecated>
               {chosenOptions.map((option, index) =>
                 option.isVisible ? (
                   <Draggable key={index} hasNoWrapper>
-                    <DualListSelectorListItem
+                    <DLSListItemDeprecated
                       isSelected={option.selected}
                       id={`composable-drag-drop-chosen-option-${index}`}
                       onOptionSelect={(e) => onOptionSelect(e, index, true)}
                       isDraggable
                     >
                       {option.text}
-                    </DualListSelectorListItem>
+                    </DLSListItemDeprecated>
                   </Draggable>
                 ) : null
               )}
-            </DualListSelectorList>
+            </DLSListDeprecated>
           </Droppable>
-        </DualListSelectorPane>
+        </DLSPaneDeprecated>
       </DragDrop>
-    </DualListSelector>
+    </DLSDeprecated>
   );
 };
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
similarity index 91%
rename from packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index 1adeda4b975..238ce17db1d 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -1,12 +1,5 @@
 import React from 'react';
 import {
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
-  DualListSelectorTree,
-  DualListSelectorTreeItemData,
   SearchInput,
   Button,
   EmptyState,
@@ -15,6 +8,15 @@ import {
   EmptyStateBody,
   EmptyStateActions
 } from '@patternfly/react-core';
+import {
+  DualListSelector as DLSDeprecated,
+  DualListSelectorPane as DLSPaneDeprecated,
+  DualListSelectorList as DLSListDeprecated,
+  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+  DualListSelectorControl as DLSControlDeprecated,
+  DualListSelectorTree as DLSTreeDeprecated,
+  DualListSelectorTreeItemData as DLSTreeItemDataDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
@@ -144,7 +146,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   const onOptionCheck = (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
-    node: DualListSelectorTreeItemData,
+    node: DLSTreeItemDataDeprecated,
     isChosen: boolean
   ) => {
     const nodeIdsToCheck = memoizedLeavesById[node.id].filter((id) =>
@@ -181,7 +183,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     isChosen: boolean,
     [node, ...remainingNodes]: FoodNode[],
     hasParentMatch: boolean
-  ): DualListSelectorTreeItemData[] => {
+  ): DLSTreeItemDataDeprecated[] => {
     if (!node) {
       return [];
     }
@@ -240,7 +242,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   const buildPane = (isChosen: boolean): React.ReactNode => {
-    const options: DualListSelectorTreeItemData[] = buildOptions(isChosen, data, false);
+    const options: DLSTreeItemDataDeprecated[] = buildOptions(isChosen, data, false);
     const numOptions = isChosen ? chosenLeafIds.length : memoizedAllLeaves.length - chosenLeafIds.length;
     const numSelected = checkedLeafIds.filter((id) =>
       isChosen ? chosenLeafIds.includes(id) : !chosenLeafIds.includes(id)
@@ -248,7 +250,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     const status = `${numSelected} of ${numOptions} options selected`;
     const filterApplied = isChosen ? chosenFilter !== '' : availableFilter !== '';
     return (
-      <DualListSelectorPane
+      <DLSPaneDeprecated
         title={isChosen ? 'Chosen' : 'Available'}
         status={status}
         searchInput={buildSearchInput(isChosen)}
@@ -268,52 +270,52 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           </EmptyState>
         )}
         {options.length > 0 && (
-          <DualListSelectorList>
-            <DualListSelectorTree
+          <DLSListDeprecated>
+            <DLSTreeDeprecated
               data={options}
               onOptionCheck={(e, isChecked, itemData) => onOptionCheck(e, isChecked, itemData, isChosen)}
             />
-          </DualListSelectorList>
+          </DLSListDeprecated>
         )}
-      </DualListSelectorPane>
+      </DLSPaneDeprecated>
     );
   };
 
   return (
-    <DualListSelector isTree>
+    <DLSDeprecated isTree>
       {buildPane(false)}
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
+      <DLSControlsWrapperDeprecated>
+        <DLSControlDeprecated
           isDisabled={!checkedLeafIds.filter((x) => !chosenLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
         >
           <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}
           onClick={() => moveAll(true)}
           aria-label="Add all"
         >
           <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={chosenLeafIds.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
         >
           <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           onClick={() => moveChecked(false)}
           isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
         >
           <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
+        </DLSControlDeprecated>
+      </DLSControlsWrapperDeprecated>
       {buildPane(true)}
-    </DualListSelector>
+    </DLSDeprecated>
   );
 };
 
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
similarity index 87%
rename from packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
rename to packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
index 6bcb06ac573..587dcbe3a41 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
+++ b/packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import { DualListSelector, DualListSelectorTreeItemData } from '@patternfly/react-core';
+import {
+  DualListSelector as DLSDeprecated,
+  DualListSelectorTreeItemData as DLSTreeItemDataDeprecated
+} from '@patternfly/react-core/deprecated';
 
 export const DualListSelectorTreeExample: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<DualListSelectorTreeItemData[]>([
+  const [availableOptions, setAvailableOptions] = React.useState<DLSTreeItemDataDeprecated[]>([
     {
       id: 'F1',
       text: 'Folder 1',
@@ -38,7 +41,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<DualListSelectorTreeItemData[]>([
+  const [chosenOptions, setChosenOptions] = React.useState<DLSTreeItemDataDeprecated[]>([
     {
       id: 'CF1',
       text: 'Chosen Folder 1',
@@ -75,15 +78,15 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
 
   const onListChange = (
     event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: DualListSelectorTreeItemData[],
-    newChosenOptions: DualListSelectorTreeItemData[]
+    newAvailableOptions: DLSTreeItemDataDeprecated[],
+    newChosenOptions: DLSTreeItemDataDeprecated[]
   ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };
 
   return (
-    <DualListSelector
+    <DLSDeprecated
       isSearchable
       isTree
       availableOptions={availableOptions}
diff --git a/packages/react-core/src/next/components/DualListSelector/index.ts b/packages/react-core/src/deprecated/components/DualListSelector/index.ts
similarity index 87%
rename from packages/react-core/src/next/components/DualListSelector/index.ts
rename to packages/react-core/src/deprecated/components/DualListSelector/index.ts
index d2b6deb96ff..e0ec37449e3 100644
--- a/packages/react-core/src/next/components/DualListSelector/index.ts
+++ b/packages/react-core/src/deprecated/components/DualListSelector/index.ts
@@ -1,4 +1,5 @@
 export * from './DualListSelector';
+export * from './DualListSelectorContext';
 export * from './DualListSelectorControl';
 export * from './DualListSelectorControlsWrapper';
 export * from './DualListSelectorPane';
diff --git a/packages/react-core/src/next/components/DualListSelector/treeUtils.ts b/packages/react-core/src/deprecated/components/DualListSelector/treeUtils.ts
similarity index 100%
rename from packages/react-core/src/next/components/DualListSelector/treeUtils.ts
rename to packages/react-core/src/deprecated/components/DualListSelector/treeUtils.ts
diff --git a/packages/react-core/src/deprecated/components/index.ts b/packages/react-core/src/deprecated/components/index.ts
index 775bb6b3b27..9d36fef85c2 100644
--- a/packages/react-core/src/deprecated/components/index.ts
+++ b/packages/react-core/src/deprecated/components/index.ts
@@ -1,4 +1,5 @@
 export * from './Chip';
 export * from './DragDrop';
 export * from './Modal';
+export * from './DualListSelector';
 export * from './Wizard';
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/next/components/DualListSelector/DualListSelector.tsx
deleted file mode 100644
index 355766b39b2..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelector.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
-import { css } from '@patternfly/react-styles';
-import { GenerateId, PickOptional } from '../../../helpers';
-import { DualListSelectorContext } from './DualListSelectorContext';
-
-/** Acts as a container for all other DualListSelector sub-components when using a
- * composable dual list selector.
- */
-
-export interface DualListSelectorProps {
-  /** Additional classes applied to the dual list selector. */
-  className?: string;
-  /** ID of the dual list selector. */
-  id?: string;
-  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
-  isTree?: boolean;
-  /** Content to be rendered in the dual list selector. */
-  children?: React.ReactNode;
-}
-
-class DualListSelector extends React.Component<DualListSelectorProps> {
-  static displayName = 'DualListSelector';
-  static defaultProps: PickOptional<DualListSelectorProps> = {
-    children: '',
-    isTree: false
-  };
-
-  constructor(props: DualListSelectorProps) {
-    super(props);
-  }
-
-  render() {
-    const { className, children, id, isTree, ...props } = this.props;
-
-    return (
-      <DualListSelectorContext.Provider value={{ isTree }}>
-        <GenerateId>
-          {(randomId) => (
-            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
-              {children}
-            </div>
-          )}
-        </GenerateId>
-      </DualListSelectorContext.Provider>
-    );
-  }
-}
-
-export { DualListSelector };
diff --git a/packages/react-core/src/next/components/DualListSelector/DualListSelectorPane.tsx b/packages/react-core/src/next/components/DualListSelector/DualListSelectorPane.tsx
deleted file mode 100644
index 3ab0db8da61..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/DualListSelectorPane.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
-import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../../helpers';
-import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
-import { DualListSelectorPaneContext } from './DualListSelectorContext';
-import { SearchInput } from '../../../components/SearchInput';
-import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
-
-/** Acts as the container for a list of options that are either available or chosen,
- * depending on the pane type (available or chosen). A search input and other actions,
- * such as sorting, can also be passed into this sub-component.
- */
-
-export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
-  /** Additional classes applied to the dual list selector pane. */
-  className?: string;
-  /** A dual list selector list or dual list selector tree to be rendered in the pane. */
-  children?: React.ReactNode;
-  /** Flag indicating if this pane is the chosen pane. */
-  isChosen?: boolean;
-  /** Status to display above the pane. */
-  status?: string;
-  /** Title of the pane. */
-  title?: React.ReactNode;
-  /** A search input placed above the list at the top of the pane, before actions. */
-  searchInput?: React.ReactNode;
-  /** Actions to place above the pane. */
-  actions?: React.ReactNode[];
-  /** ID of the pane. */
-  id?: string;
-  /** Flag indicating whether the component is disabled. */
-  isDisabled?: boolean;
-  /** Callback for search input. To be used when isSearchable is true. */
-  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Minimum height of the list of options rendered in the pane. **/
-  listMinHeight?: string;
-}
-
-export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
-  isChosen = false,
-  className = '',
-  status = '',
-  actions,
-  searchInput,
-  children,
-  title = '',
-  id = getUniqueId('dual-list-selector-pane'),
-  isDisabled = false,
-  listMinHeight,
-  ...props
-}: DualListSelectorPaneProps) => (
-  <div
-    className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
-    {...props}
-  >
-    {title && (
-      <div className={css(styles.dualListSelectorHeader)}>
-        <div className={`${styles.dualListSelector}__title`}>
-          <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
-        </div>
-      </div>
-    )}
-    {(actions || searchInput) && (
-      <div className={css(styles.dualListSelectorTools)}>
-        {searchInput && (
-          <div className={css(styles.dualListSelectorToolsFilter)}>
-            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
-          </div>
-        )}
-        {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
-      </div>
-    )}
-    {status && (
-      <div className={css(styles.dualListSelectorStatus)}>
-        <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
-          {status}
-        </div>
-      </div>
-    )}
-    <DualListSelectorPaneContext.Provider value={{ isChosen }}>
-      <DualListSelectorListWrapper
-        aria-labelledby={`${id}-status`}
-        id={`${id}-list`}
-        {...(listMinHeight && {
-          style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-        })}
-      >
-        {children}
-      </DualListSelectorListWrapper>
-    </DualListSelectorPaneContext.Provider>
-  </div>
-);
-DualListSelectorPane.displayName = 'DualListSelectorPane';
diff --git a/packages/react-core/src/next/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/next/components/DualListSelector/__tests__/DualListSelector.test.tsx
deleted file mode 100644
index c9d3fb38e8d..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/__tests__/DualListSelector.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render } from '@testing-library/react';
-import { DualListSelectorPane } from '../../DualListSelector';
-import { SearchInput } from '../../../../components/SearchInput';
-import React from 'react';
-
-describe('DualListSelector', () => {
-  test('basic', () => {
-    const { asFragment } = render(<DualListSelectorPane id="basicTest" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('with search inputs', () => {
-    const { asFragment } = render(<DualListSelectorPane id="searchTest" searchInput={<SearchInput />} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('with custom status', () => {
-    const { asFragment } = render(<DualListSelectorPane id="statusTest" status="Test status1" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('basic with disabled controls', () => {
-    const { asFragment } = render(<DualListSelectorPane id="disabledTest" isDisabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
diff --git a/packages/react-core/src/next/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/next/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
deleted file mode 100644
index 63dab5eee9e..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ /dev/null
@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DualListSelector basic 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector__pane pf-m-available"
-  >
-    <div
-      class="pf-v6-c-dual-list-selector__menu"
-      tabindex="0"
-    >
-      <ul
-        class="pf-v6-c-dual-list-selector__list"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DualListSelector basic with disabled controls 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector__pane pf-m-available"
-  >
-    <div
-      class="pf-v6-c-dual-list-selector__menu"
-      tabindex="0"
-    >
-      <ul
-        class="pf-v6-c-dual-list-selector__list"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DualListSelector with custom status 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector__pane pf-m-available"
-  >
-    <div
-      class="pf-v6-c-dual-list-selector__status"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__status-text"
-        id="statusTest-status"
-      >
-        Test status1
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__menu"
-      tabindex="0"
-    >
-      <ul
-        class="pf-v6-c-dual-list-selector__list"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`DualListSelector with search inputs 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector__pane pf-m-available"
-  >
-    <div
-      class="pf-v6-c-dual-list-selector__tools"
-    >
-      <div
-        class="pf-v6-c-dual-list-selector__tools-filter"
-      >
-        <div
-          class="pf-v6-c-text-input-group"
-        >
-          <div
-            class="pf-v6-c-text-input-group__main pf-m-icon"
-          >
-            <span
-              class="pf-v6-c-text-input-group__text"
-            >
-              <span
-                class="pf-v6-c-text-input-group__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-              </span>
-              <input
-                aria-label="Search input"
-                class="pf-v6-c-text-input-group__text-input"
-                type="text"
-                value=""
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="pf-v6-c-dual-list-selector__menu"
-      tabindex="0"
-    >
-      <ul
-        class="pf-v6-c-dual-list-selector__list"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasic.tsx b/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasic.tsx
deleted file mode 100644
index 53e287e5d1d..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasic.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React from 'react';
-import {
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl
-} from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
-
-interface Option {
-  text: string;
-  selected: boolean;
-  isVisible: boolean;
-}
-
-export const DualListSelectorBasic: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
-    { text: 'Option 1', selected: false, isVisible: true },
-    { text: 'Option 2', selected: false, isVisible: true },
-    { text: 'Option 3', selected: false, isVisible: true },
-    { text: 'Option 4', selected: false, isVisible: true }
-  ]);
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
-
-  // callback for moving selected options between lists
-  const moveSelected = (fromAvailable: boolean) => {
-    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
-    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
-    for (let i = 0; i < sourceOptions.length; i++) {
-      const option = sourceOptions[i];
-      if (option.selected && option.isVisible) {
-        sourceOptions.splice(i, 1);
-        destinationOptions.push(option);
-        option.selected = false;
-        i--;
-      }
-    }
-    if (fromAvailable) {
-      setAvailableOptions([...sourceOptions]);
-      setChosenOptions([...destinationOptions]);
-    } else {
-      setChosenOptions([...sourceOptions]);
-      setAvailableOptions([...destinationOptions]);
-    }
-  };
-
-  // callback for moving all options between lists
-  const moveAll = (fromAvailable: boolean) => {
-    if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
-    } else {
-      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
-    }
-  };
-
-  // callback when option is selected
-  const onOptionSelect = (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean
-  ) => {
-    if (isChosen) {
-      const newChosen = [...chosenOptions];
-      newChosen[index].selected = !chosenOptions[index].selected;
-      setChosenOptions(newChosen);
-    } else {
-      const newAvailable = [...availableOptions];
-      newAvailable[index].selected = !availableOptions[index].selected;
-      setAvailableOptions(newAvailable);
-    }
-  };
-
-  return (
-    <DualListSelector>
-      <DualListSelectorPane
-        title="Available options"
-        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
-          availableOptions.filter((option) => option.isVisible).length
-        } options selected`}
-      >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`basic-available-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
-          isDisabled={!availableOptions.some((option) => option.selected)}
-          onClick={() => moveSelected(true)}
-          aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={availableOptions.length === 0}
-          onClick={() => moveAll(true)}
-          aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={chosenOptions.length === 0}
-          onClick={() => moveAll(false)}
-          aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some((option) => option.selected)}
-          aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DualListSelectorPane
-        title="Chosen options"
-        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
-          chosenOptions.filter((option) => option.isVisible).length
-        } options selected`}
-        isChosen
-      >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-basic-chosen-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-    </DualListSelector>
-  );
-};
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx b/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
deleted file mode 100644
index 3e467cd034f..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
-  SearchInput,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateFooter,
-  EmptyStateBody,
-  EmptyStateActions
-} from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
-interface Option {
-  text: string;
-  selected: boolean;
-  isVisible: boolean;
-}
-
-export const DualListSelectorSearch: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
-    { text: 'Option 1', selected: false, isVisible: true },
-    { text: 'Option 2', selected: false, isVisible: true },
-    { text: 'Option 3', selected: false, isVisible: true },
-    { text: 'Option 4', selected: false, isVisible: true }
-  ]);
-
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
-  const [availableFilter, setAvailableFilter] = React.useState('');
-  const [chosenFilter, setChosenFilter] = React.useState('');
-
-  // callback for moving selected options between lists
-  const moveSelected = (fromAvailable: boolean) => {
-    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
-    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
-    for (let i = 0; i < sourceOptions.length; i++) {
-      const option = sourceOptions[i];
-      if (option.selected && option.isVisible) {
-        sourceOptions.splice(i, 1);
-        destinationOptions.push(option);
-        option.selected = false;
-        i--;
-      }
-    }
-    if (fromAvailable) {
-      setAvailableOptions([...sourceOptions]);
-      setChosenOptions([...destinationOptions]);
-    } else {
-      setChosenOptions([...sourceOptions]);
-      setAvailableOptions([...destinationOptions]);
-    }
-  };
-
-  // callback for moving all options between lists
-  const moveAll = (fromAvailable: boolean) => {
-    if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
-    } else {
-      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
-    }
-  };
-
-  // callback when option is selected
-  const onOptionSelect = (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean
-  ) => {
-    if (isChosen) {
-      const newChosen = [...chosenOptions];
-      newChosen[index].selected = !chosenOptions[index].selected;
-      setChosenOptions(newChosen);
-    } else {
-      const newAvailable = [...availableOptions];
-      newAvailable[index].selected = !availableOptions[index].selected;
-      setAvailableOptions(newAvailable);
-    }
-  };
-
-  const onFilterChange = (value: string, isAvailable: boolean) => {
-    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-    toFilter.forEach((option) => {
-      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-    });
-  };
-
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => (
-    <SearchInput
-      value={isAvailable ? availableFilter : chosenFilter}
-      onChange={(_event, value) => onFilterChange(value, isAvailable)}
-      onClear={() => onFilterChange('', isAvailable)}
-    />
-  );
-
-  const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState titleText="No results found" variant={EmptyStateVariant.sm} headingLevel="h4" icon={SearchIcon}>
-      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-      <EmptyStateFooter>
-        <EmptyStateActions>
-          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
-            Clear all filters
-          </Button>
-        </EmptyStateActions>
-      </EmptyStateFooter>
-    </EmptyState>
-  );
-
-  return (
-    <DualListSelector>
-      <DualListSelectorPane
-        title="Available options"
-        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
-          availableOptions.filter((option) => option.isVisible).length
-        } options selected`}
-        searchInput={buildSearchInput(true)}
-        listMinHeight="300px"
-      >
-        {availableFilter !== '' &&
-          availableOptions.filter((option) => option.isVisible).length === 0 &&
-          buildEmptyState(true)}
-
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`search-available-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
-          isDisabled={!availableOptions.some((option) => option.selected)}
-          onClick={() => moveSelected(true)}
-          aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={availableOptions.length === 0}
-          onClick={() => moveAll(true)}
-          aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={chosenOptions.length === 0}
-          onClick={() => moveAll(false)}
-          aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some((option) => option.selected)}
-          aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DualListSelectorPane
-        title="Chosen options"
-        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
-          chosenOptions.filter((option) => option.isVisible).length
-        } options selected`}
-        searchInput={buildSearchInput(false)}
-        listMinHeight="300px"
-        isChosen
-      >
-        {chosenFilter !== '' &&
-          chosenOptions.filter((option) => option.isVisible).length === 0 &&
-          buildEmptyState(false)}
-        {chosenOptions.filter((option) => option.isVisible).length > 0 && (
-          <DualListSelectorList>
-            {chosenOptions.map((option, index) =>
-              option.isVisible ? (
-                <DualListSelectorListItem
-                  key={index}
-                  isSelected={option.selected}
-                  id={`composable-search-chosen-option-${index}`}
-                  onOptionSelect={(e) => onOptionSelect(e, index, true)}
-                >
-                  {option.text}
-                </DualListSelectorListItem>
-              ) : null
-            )}
-          </DualListSelectorList>
-        )}
-      </DualListSelectorPane>
-    </DualListSelector>
-  );
-};
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx b/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
deleted file mode 100644
index 717c5860bd7..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React from 'react';
-import {
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl
-} from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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';
-
-interface Option {
-  text: string;
-  selected: boolean;
-  isVisible: boolean;
-}
-
-export const DualListSelectorBasic: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
-    { text: 'Option 1', selected: false, isVisible: true },
-    { text: 'Option 2', selected: false, isVisible: true },
-    { text: 'Option 3', selected: false, isVisible: true },
-    { text: 'Option 4', selected: false, isVisible: true }
-  ]);
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
-
-  // callback for moving selected options between lists
-  const moveSelected = (fromAvailable: boolean) => {
-    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
-    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
-    for (let i = 0; i < sourceOptions.length; i++) {
-      const option = sourceOptions[i];
-      if (option.selected && option.isVisible) {
-        sourceOptions.splice(i, 1);
-        destinationOptions.push(option);
-        option.selected = false;
-        i--;
-      }
-    }
-    if (fromAvailable) {
-      setAvailableOptions([...sourceOptions]);
-      setChosenOptions([...destinationOptions]);
-    } else {
-      setChosenOptions([...sourceOptions]);
-      setAvailableOptions([...destinationOptions]);
-    }
-  };
-
-  // callback for moving all options between lists
-  const moveAll = (fromAvailable: boolean) => {
-    if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
-    } else {
-      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
-    }
-  };
-
-  // callback when option is selected
-  const onOptionSelect = (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean
-  ) => {
-    if (isChosen) {
-      const newChosen = [...chosenOptions];
-      newChosen[index].selected = !chosenOptions[index].selected;
-      setChosenOptions(newChosen);
-    } else {
-      const newAvailable = [...availableOptions];
-      newAvailable[index].selected = !availableOptions[index].selected;
-      setAvailableOptions(newAvailable);
-    }
-  };
-
-  return (
-    <DualListSelector>
-      <DualListSelectorPane
-        title="Available options"
-        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
-          availableOptions.filter((option) => option.isVisible).length
-        } options selected`}
-      >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`tooltips-available-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
-          isDisabled={!availableOptions.some((option) => option.selected)}
-          onClick={() => moveSelected(true)}
-          aria-label="Add selected"
-          tooltipContent="Add selected"
-          tooltipProps={{ position: 'top', 'aria-live': 'off' }}
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={availableOptions.length === 0}
-          onClick={() => moveAll(true)}
-          aria-label="Add all"
-          tooltipContent="Add all"
-          tooltipProps={{ position: 'right', 'aria-live': 'off' }}
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={chosenOptions.length === 0}
-          onClick={() => moveAll(false)}
-          aria-label="Remove all"
-          tooltipContent="Remove all"
-          tooltipProps={{ position: 'left', 'aria-live': 'off' }}
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some((option) => option.selected)}
-          aria-label="Remove selected"
-          tooltipContent="Remove selected"
-          tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DualListSelectorPane
-        title="Chosen options"
-        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
-          chosenOptions.filter((option) => option.isVisible).length
-        } options selected`}
-        isChosen
-      >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) =>
-            option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-tooltips-chosen-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null
-          )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-    </DualListSelector>
-  );
-};
diff --git a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
deleted file mode 100644
index 9ccc57b142f..00000000000
--- a/packages/react-core/src/next/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Checkbox,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
-  SearchInput,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateFooter,
-  EmptyStateBody,
-  EmptyStateActions,
-  MenuToggle,
-  MenuToggleElement
-} from '@patternfly/react-core';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-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 PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-interface Option {
-  text: string;
-  selected: boolean;
-  isVisible: boolean;
-}
-
-export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
-    { text: 'Option 1', selected: false, isVisible: true },
-    { text: 'Option 2', selected: false, isVisible: true },
-    { text: 'Option 3', selected: false, isVisible: true },
-    { text: 'Option 4', selected: false, isVisible: true }
-  ]);
-
-  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
-  const [isAvailableKebabOpen, setIsAvailableKebabOpen] = React.useState(false);
-  const [isChosenKebabOpen, setIsChosenKebabOpen] = React.useState(false);
-  const [availableFilter, setAvailableFilter] = React.useState('');
-  const [chosenFilter, setChosenFilter] = React.useState('');
-  const [isDisabled, setIsDisabled] = React.useState(false);
-
-  // callback for moving selected options between lists
-  const moveSelected = (fromAvailable: boolean) => {
-    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
-    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
-    for (let i = 0; i < sourceOptions.length; i++) {
-      const option = sourceOptions[i];
-      if (option.selected && option.isVisible) {
-        sourceOptions.splice(i, 1);
-        destinationOptions.push(option);
-        option.selected = false;
-        i--;
-      }
-    }
-    if (fromAvailable) {
-      setAvailableOptions([...sourceOptions]);
-      setChosenOptions([...destinationOptions]);
-    } else {
-      setChosenOptions([...sourceOptions]);
-      setAvailableOptions([...destinationOptions]);
-    }
-  };
-
-  // callback for moving all options between lists
-  const moveAll = (fromAvailable: boolean) => {
-    if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
-    } else {
-      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
-    }
-  };
-
-  // callback when option is selected
-  const onOptionSelect = (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean
-  ) => {
-    if (isChosen) {
-      const newChosen = [...chosenOptions];
-      newChosen[index].selected = !chosenOptions[index].selected;
-      setChosenOptions(newChosen);
-    } else {
-      const newAvailable = [...availableOptions];
-      newAvailable[index].selected = !availableOptions[index].selected;
-      setAvailableOptions(newAvailable);
-    }
-  };
-
-  const onFilterChange = (value: string, isAvailable: boolean) => {
-    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-    toFilter.forEach((option) => {
-      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-    });
-  };
-
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable: boolean) => (
-    <SearchInput
-      value={isAvailable ? availableFilter : chosenFilter}
-      onChange={(_event, value) => onFilterChange(value, isAvailable)}
-      onClear={() => onFilterChange('', isAvailable)}
-      isDisabled={isDisabled}
-    />
-  );
-
-  // builds a sort control - passed to both dual list selector panes
-  const buildSort = (isAvailable: boolean) => {
-    const onSort = () => {
-      const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toSort.sort((a, b) => {
-        if (a.text > b.text) {
-          return 1;
-        }
-        if (a.text < b.text) {
-          return -1;
-        }
-        return 0;
-      });
-      if (isAvailable) {
-        setAvailableOptions(toSort);
-      } else {
-        setChosenOptions(toSort);
-      }
-    };
-
-    const onToggle = (pane: string) => {
-      if (pane === 'available') {
-        setIsAvailableKebabOpen(!isAvailableKebabOpen);
-      } else {
-        setIsChosenKebabOpen(!isChosenKebabOpen);
-      }
-    };
-
-    return isAvailable
-      ? [
-          <Button
-            variant={ButtonVariant.plain}
-            onClick={onSort}
-            aria-label="Sort Available"
-            key="availableSortButton"
-            isDisabled={isDisabled}
-          >
-            <PficonSortCommonAscIcon />
-          </Button>,
-          <Dropdown
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                isDisabled={isDisabled}
-                isExpanded={isAvailableKebabOpen}
-                onClick={() => onToggle('available')}
-                variant="plain"
-                id="complex-available-toggle"
-                aria-label="Complex actions example available kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-            isOpen={isAvailableKebabOpen}
-            onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
-            onSelect={() => setIsAvailableKebabOpen(false)}
-            key="availableDropdown"
-          >
-            <DropdownList>
-              <DropdownItem key="available action">Available Action</DropdownItem>
-              <DropdownItem key="available link" to="#" onClick={(event: any) => event.preventDefault()}>
-                Available Link
-              </DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        ]
-      : [
-          <Button
-            variant={ButtonVariant.plain}
-            onClick={onSort}
-            aria-label="Sort Chosen"
-            key="chosenSortButton"
-            isDisabled={isDisabled}
-          >
-            <PficonSortCommonAscIcon />
-          </Button>,
-          <Dropdown
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                isDisabled={isDisabled}
-                isExpanded={isChosenKebabOpen}
-                onClick={() => onToggle('chosen')}
-                variant="plain"
-                id="complex-chosen-toggle"
-                aria-label="Complex actions example chosen kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-            isOpen={isChosenKebabOpen}
-            onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}
-            onSelect={() => setIsChosenKebabOpen(false)}
-            key="chosenDropdown"
-          >
-            <DropdownList>
-              <DropdownItem key="chosen action">Chosen Action</DropdownItem>
-              <DropdownItem key="chosen link" to="#" onClick={(event: any) => event.preventDefault()}>
-                Chosen Link
-              </DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        ];
-  };
-
-  const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
-      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-      <EmptyStateFooter>
-        <EmptyStateActions>
-          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
-            Clear all filters
-          </Button>
-        </EmptyStateActions>
-      </EmptyStateFooter>
-    </EmptyState>
-  );
-
-  return (
-    <React.Fragment>
-      <DualListSelector>
-        <DualListSelectorPane
-          title="Available options"
-          status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
-            availableOptions.filter((option) => option.isVisible).length
-          } options selected`}
-          searchInput={buildSearchInput(true)}
-          actions={[buildSort(true)]}
-          listMinHeight="300px"
-          isDisabled={isDisabled}
-        >
-          {availableFilter !== '' &&
-            availableOptions.filter((option) => option.isVisible).length === 0 &&
-            buildEmptyState(true)}
-
-          <DualListSelectorList>
-            {availableOptions.map((option, index) =>
-              option.isVisible ? (
-                <DualListSelectorListItem
-                  key={index}
-                  isSelected={option.selected}
-                  id={`complex-available-option-${index}`}
-                  onOptionSelect={(e) => onOptionSelect(e, index, false)}
-                  isDisabled={isDisabled}
-                >
-                  {option.text}
-                </DualListSelectorListItem>
-              ) : null
-            )}
-          </DualListSelectorList>
-        </DualListSelectorPane>
-        <DualListSelectorControlsWrapper>
-          <DualListSelectorControl
-            isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}
-            onClick={() => moveSelected(true)}
-            aria-label="Add selected"
-          >
-            <AngleRightIcon />
-          </DualListSelectorControl>
-          <DualListSelectorControl
-            isDisabled={availableOptions.length === 0 || isDisabled}
-            onClick={() => moveAll(true)}
-            aria-label="Add all"
-          >
-            <AngleDoubleRightIcon />
-          </DualListSelectorControl>
-          <DualListSelectorControl
-            isDisabled={chosenOptions.length === 0 || isDisabled}
-            onClick={() => moveAll(false)}
-            aria-label="Remove all"
-          >
-            <AngleDoubleLeftIcon />
-          </DualListSelectorControl>
-          <DualListSelectorControl
-            onClick={() => moveSelected(false)}
-            isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled}
-            aria-label="Remove selected"
-          >
-            <AngleLeftIcon />
-          </DualListSelectorControl>
-        </DualListSelectorControlsWrapper>
-        <DualListSelectorPane
-          title="Chosen options"
-          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
-            chosenOptions.filter((option) => option.isVisible).length
-          } options selected`}
-          searchInput={buildSearchInput(false)}
-          actions={[buildSort(false)]}
-          listMinHeight="300px"
-          isChosen
-        >
-          {chosenFilter !== '' &&
-            chosenOptions.filter((option) => option.isVisible).length === 0 &&
-            buildEmptyState(false)}
-          {chosenOptions.filter((option) => option.isVisible).length > 0 && (
-            <DualListSelectorList>
-              {chosenOptions.map((option, index) =>
-                option.isVisible ? (
-                  <DualListSelectorListItem
-                    key={index}
-                    isSelected={option.selected}
-                    id={`composable-complex-chosen-option-${index}`}
-                    onOptionSelect={(e) => onOptionSelect(e, index, true)}
-                    isDisabled={isDisabled}
-                  >
-                    {option.text}
-                  </DualListSelectorListItem>
-                ) : null
-              )}
-            </DualListSelectorList>
-          )}
-        </DualListSelectorPane>
-      </DualListSelector>
-      <Checkbox
-        key="isDisabled"
-        id="isDisabled"
-        label="isDisabled"
-        aria-label="isDisabled"
-        isChecked={isDisabled}
-        onChange={() => setIsDisabled(!isDisabled)}
-      />
-    </React.Fragment>
-  );
-};
diff --git a/packages/react-core/src/next/components/index.ts b/packages/react-core/src/next/components/index.ts
index 00d4164b54b..e69de29bb2d 100644
--- a/packages/react-core/src/next/components/index.ts
+++ b/packages/react-core/src/next/components/index.ts
@@ -1 +0,0 @@
-export * from './DualListSelector';
diff --git a/packages/react-core/src/next/index.ts b/packages/react-core/src/next/index.ts
index 07635cbbc8e..e69de29bb2d 100644
--- a/packages/react-core/src/next/index.ts
+++ b/packages/react-core/src/next/index.ts
@@ -1 +0,0 @@
-export * from './components';
diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx
index 7e92d6c481b..eef43cf82c3 100644
--- a/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx
+++ b/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx
@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DragButton } from './DragButton';
-import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/components/DualListSelector';
+import { DualListSelectorListContext as DLSListContextDeprecated } from '@patternfly/react-core/dist/esm/deprecated/components/DualListSelector';
 
 export interface DraggableDualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside DragDrop */
@@ -42,7 +42,7 @@ export const DraggableDualListSelectorListItem: React.FunctionComponent<Draggabl
     animateLayoutChanges: () => false
   });
 
-  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+  const { setFocusedOption } = React.useContext(DLSListContextDeprecated);
 
   const style = {
     transform: CSS.Transform.toString(transform),
diff --git a/packages/react-drag-drop/src/next/components/DragDrop/DraggableDualListSelectorListItem.tsx b/packages/react-drag-drop/src/next/components/DragDrop/DraggableDualListSelectorListItem.tsx
index 7e92d6c481b..86415f89e7b 100644
--- a/packages/react-drag-drop/src/next/components/DragDrop/DraggableDualListSelectorListItem.tsx
+++ b/packages/react-drag-drop/src/next/components/DragDrop/DraggableDualListSelectorListItem.tsx
@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import dragStyles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DragButton } from './DragButton';
-import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/components/DualListSelector';
+import { DualListSelectorListContext } from '@patternfly/react-core/dist/esm/deprecated/components/DualListSelector';
 
 export interface DraggableDualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside DragDrop */
diff --git a/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts b/packages/react-integration/cypress/integration/duallistselectordeprecatedbasic.spec.ts
similarity index 97%
rename from packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts
rename to packages/react-integration/cypress/integration/duallistselectordeprecatedbasic.spec.ts
index ed82efb243d..03e59da2fa1 100644
--- a/packages/react-integration/cypress/integration/duallistselectorbasic.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectordeprecatedbasic.spec.ts
@@ -1,6 +1,6 @@
-describe('Dual List Selector BasicDemo Test', () => {
+describe('Dual List Selector deprecated BasicDemo Test', () => {
   it('Navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dual-list-selector-basic-demo-nav-link');
+    cy.visit('http://localhost:3000/dual-list-selector-deprecated-basic-demo-nav-link');
   });
 
   it('Verify existence', () => {
diff --git a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts b/packages/react-integration/cypress/integration/duallistselectordeprecatedtree.spec.ts
similarity index 96%
rename from packages/react-integration/cypress/integration/duallistselectortree.spec.ts
rename to packages/react-integration/cypress/integration/duallistselectordeprecatedtree.spec.ts
index 2e9753cc48f..81fd0af28de 100644
--- a/packages/react-integration/cypress/integration/duallistselectortree.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectordeprecatedtree.spec.ts
@@ -1,6 +1,6 @@
-describe('Dual List Selector TreeDemo Test', () => {
+describe('Dual List Selector deprecated TreeDemo Test', () => {
   it('Navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dual-list-selector-tree-demo-nav-link');
+    cy.visit('http://localhost:3000/dual-list-selector-deprecated-tree-demo-nav-link');
   });
 
   it('Verify existence', () => {
diff --git a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts b/packages/react-integration/cypress/integration/duallistselectordeprecatedwithactions.spec.ts
similarity index 97%
rename from packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
rename to packages/react-integration/cypress/integration/duallistselectordeprecatedwithactions.spec.ts
index 7fa6dae3e33..a1a0143bfb5 100644
--- a/packages/react-integration/cypress/integration/duallistselectorwithactions.spec.ts
+++ b/packages/react-integration/cypress/integration/duallistselectordeprecatedwithactions.spec.ts
@@ -1,6 +1,6 @@
-describe('Dual List Selector With Actions Demo Test', () => {
+describe('Dual List Selector deprecated With Actions Demo Test', () => {
   it('Navigate to demo section', () => {
-    cy.visit('http://localhost:3000/dual-list-selector-with-actions-demo-nav-link');
+    cy.visit('http://localhost:3000/dual-list-selector-deprecated-with-actions-demo-nav-link');
   });
 
   it('Verify existence', () => {
diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts
index 3222738b3c3..da3c73365c1 100644
--- a/packages/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/react-integration/demo-app-ts/src/Demos.ts
@@ -143,19 +143,19 @@ export const Demos: DemoInterface[] = [
     componentType: Examples.DropdownDemo
   },
   {
-    id: 'dual-list-selector-basic-demo',
-    name: 'DualListSelector basic Demo',
-    componentType: Examples.DualListSelectorBasicDemo
+    id: 'dual-list-selector-deprecated-basic-demo',
+    name: 'DualListSelector deprecated basic Demo',
+    componentType: Examples.DualListSelectorDeprecatedBasicDemo
   },
   {
-    id: 'dual-list-selector-tree-demo',
-    name: 'DualListSelector Tree Demo',
-    componentType: Examples.DualListSelectorTreeDemo
+    id: 'dual-list-selector-deprecated-tree-demo',
+    name: 'DualListSelector deprecated Tree Demo',
+    componentType: Examples.DualListSelectorDeprecatedTreeDemo
   },
   {
-    id: 'dual-list-selector-with-actions-demo',
-    name: 'DualListSelector with actions Demo',
-    componentType: Examples.DualListSelectorWithActionsDemo
+    id: 'dual-list-selector-deprecated-with-actions-demo',
+    name: 'DualListSelector deprecated with actions Demo',
+    componentType: Examples.DualListSelectorDeprecatedWithActionsDemo
   },
   {
     id: 'expandable-section-demo',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedBasicDemo.tsx
similarity index 75%
rename from packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx
rename to packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedBasicDemo.tsx
index a3398273f5c..75d52e31a8b 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedBasicDemo.tsx
@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
-import { DualListSelector, DualListSelectorProps } from '@patternfly/react-core';
+import {
+  DualListSelector as DLSDeprecated,
+  DualListSelectorProps as DLSPropsDeprecated
+} from '@patternfly/react-core/deprecated';
 interface DualListSelectorState {
   availableOptions: React.ReactNode[];
   chosenOptions: React.ReactNode[];
 }
 
-export class DualListSelectorBasicDemo extends Component<DualListSelectorProps, DualListSelectorState> {
+class DualListSelectorDeprecatedBasicDemo extends Component<DLSPropsDeprecated, DualListSelectorState> {
   static displayName = 'DualListSelectorDemo';
   onListChange: (
     event: React.MouseEvent<HTMLElement>,
@@ -13,7 +16,7 @@ export class DualListSelectorBasicDemo extends Component<DualListSelectorProps,
     newChosenOptions: React.ReactNode[]
   ) => void;
 
-  constructor(props: DualListSelectorProps) {
+  constructor(props: DLSPropsDeprecated) {
     super(props);
     this.state = {
       availableOptions: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
@@ -30,7 +33,7 @@ export class DualListSelectorBasicDemo extends Component<DualListSelectorProps,
 
   render() {
     return (
-      <DualListSelector
+      <DLSDeprecated
         isSearchable
         availableOptions={this.state.availableOptions}
         chosenOptions={this.state.chosenOptions}
@@ -47,3 +50,7 @@ export class DualListSelectorBasicDemo extends Component<DualListSelectorProps,
     );
   }
 }
+
+DualListSelectorDeprecatedBasicDemo.displayName = 'DualListSelectorDemo';
+
+export { DualListSelectorDeprecatedBasicDemo };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedTreeDemo.tsx
similarity index 67%
rename from packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
rename to packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedTreeDemo.tsx
index 21abd3ba3ef..8e4b4dac0cc 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedTreeDemo.tsx
@@ -1,19 +1,23 @@
 import React, { Component } from 'react';
-import { DualListSelector, DualListSelectorProps, DualListSelectorTreeItemData } from '@patternfly/react-core';
+import {
+  DualListSelector as DLSDeprecated,
+  DualListSelectorProps as DLSPropsDeprecated,
+  DualListSelectorTreeItemData as DLSTreeItemDataDeprecated
+} from '@patternfly/react-core/deprecated';
 interface DualListSelectorState {
-  availableOptions: DualListSelectorTreeItemData[];
-  chosenOptions: DualListSelectorTreeItemData[];
+  availableOptions: DLSTreeItemDataDeprecated[];
+  chosenOptions: DLSTreeItemDataDeprecated[];
 }
 
-export class DualListSelectorTreeDemo extends Component<DualListSelectorProps, DualListSelectorState> {
+class DualListSelectorDeprecatedTreeDemo extends Component<DLSPropsDeprecated, DualListSelectorState> {
   static displayName = 'DualListSelectorTreeDemo';
   onListChange: (
     event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: DualListSelectorTreeItemData[],
-    newChosenOptions: DualListSelectorTreeItemData[]
+    newAvailableOptions: DLSTreeItemDataDeprecated[],
+    newChosenOptions: DLSTreeItemDataDeprecated[]
   ) => void;
 
-  constructor(props: DualListSelectorProps) {
+  constructor(props: DLSPropsDeprecated) {
     super(props);
     this.state = {
       availableOptions: [
@@ -50,7 +54,7 @@ export class DualListSelectorTreeDemo extends Component<DualListSelectorProps, D
 
   render() {
     return (
-      <DualListSelector
+      <DLSDeprecated
         isSearchable
         availableOptions={this.state.availableOptions}
         chosenOptions={this.state.chosenOptions}
@@ -60,3 +64,7 @@ export class DualListSelectorTreeDemo extends Component<DualListSelectorProps, D
     );
   }
 }
+
+DualListSelectorDeprecatedTreeDemo.displayName = 'DualListSelectorDemo';
+
+export { DualListSelectorDeprecatedTreeDemo };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
similarity index 92%
rename from packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
rename to packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
index 65b3fc1db35..95e18fb1d4e 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
@@ -1,14 +1,9 @@
 import React from 'react';
+import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
 import {
-  Button,
-  ButtonVariant,
-  DualListSelector,
-  DualListSelectorProps,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle
-} from '@patternfly/react-core';
+  DualListSelector as DLSDeprecated,
+  DualListSelectorProps as DLSPropsDeprecated
+} from '@patternfly/react-core/deprecated';
 import PficonSortCommonDescIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-desc-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -22,7 +17,7 @@ interface DualListSelectorState {
   chosenDescending: boolean;
 }
 
-class DualListSelectorWithActionsDemo extends React.Component<DualListSelectorProps, DualListSelectorState> {
+class DualListSelectorDeprecatedWithActionsDemo extends React.Component<DLSPropsDeprecated, DualListSelectorState> {
   static displayName = 'DualListSelectorDemo';
   onSort: (panel: string) => void;
   onListChange: (
@@ -34,7 +29,7 @@ class DualListSelectorWithActionsDemo extends React.Component<DualListSelectorPr
   filterOption: (option: React.ReactNode, input: string) => boolean;
   onOptionSelect: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent) => void;
 
-  constructor(props: DualListSelectorProps) {
+  constructor(props: DLSPropsDeprecated) {
     super(props);
     this.state = {
       availableOptions: [
@@ -182,7 +177,7 @@ class DualListSelectorWithActionsDemo extends React.Component<DualListSelectorPr
     ];
 
     return (
-      <DualListSelector
+      <DLSDeprecated
         className="demo"
         id="dual-list-selector-demo"
         isSearchable
@@ -220,6 +215,6 @@ class DualListSelectorWithActionsDemo extends React.Component<DualListSelectorPr
     );
   }
 }
-DualListSelectorWithActionsDemo.displayName = 'DualListSelectorDemo';
+DualListSelectorDeprecatedWithActionsDemo.displayName = 'DualListSelectorDemo';
 
-export { DualListSelectorWithActionsDemo };
+export { DualListSelectorDeprecatedWithActionsDemo };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
index 64a7f6283bd..b4927f913b3 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -24,9 +24,9 @@ export * from './DescriptionListDemo/DescriptionListBreakpointsDemo';
 export * from './DrawerDemo/DrawerDemo';
 export * from './DrawerDemo/DrawerResizeDemo';
 export * from './DropdownDemo/DropdownDemo';
-export * from './DualListSelectorDemo/DualListSelectorBasicDemo';
-export * from './DualListSelectorDemo/DualListSelectorTreeDemo';
-export * from './DualListSelectorDemo/DualListSelectorWithActionsDemo';
+export * from './DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedBasicDemo';
+export * from './DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedTreeDemo';
+export * from './DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo';
 export * from './ExpandableSectionDemo/ExpandableSectionDemo';
 export * from './ExpandableSectionDemo/ExpandableSectionTruncateDemo';
 export * from './FileUploadDemo/FileUploadDemo';