@patternfly/react-core 6.0.0-alpha.7 → 6.0.0-alpha.70

package/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 };