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

package/dist/js/components/DualListSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DualListSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DualListSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC"}

package/dist/js/components/DualListSelector/index.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DualListSelector"), exports);
-tslib_1.__exportStar(require("./DualListSelectorContext"), exports);
 tslib_1.__exportStar(require("./DualListSelectorControl"), exports);
 tslib_1.__exportStar(require("./DualListSelectorControlsWrapper"), exports);
 tslib_1.__exportStar(require("./DualListSelectorPane"), exports);
 tslib_1.__exportStar(require("./DualListSelectorList"), exports);
 tslib_1.__exportStar(require("./DualListSelectorListItem"), exports);
 tslib_1.__exportStar(require("./DualListSelectorTree"), exports);
-tslib_1.__exportStar(require("./DualListSelectorContext"), exports);
 //# sourceMappingURL=index.js.map

package/dist/js/components/DualListSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DualListSelector/index.ts"],"names":[],"mappings":";;;AAAA,6DAAmC;AACnC,oEAA0C;AAC1C,oEAA0C;AAC1C,4EAAkD;AAClD,iEAAuC;AACvC,iEAAuC;AACvC,qEAA2C;AAC3C,iEAAuC;AACvC,oEAA0C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DualListSelector/index.ts"],"names":[],"mappings":";;;AAAA,6DAAmC;AACnC,oEAA0C;AAC1C,4EAAkD;AAClD,iEAAuC;AACvC,iEAAuC;AACvC,qEAA2C;AAC3C,iEAAuC"}

package/dist/js/deprecated/components/DualListSelector/DualListSelector.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { PickOptional } from '../../../helpers';
+import { DualListSelectorTreeItemData } from './DualListSelectorTree';
+/** 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[];
+}
+declare class DualListSelector extends React.Component<DualListSelectorProps, DualListSelectorState> {
+    static displayName: string;
+    private addAllButtonRef;
+    private addSelectedButtonRef;
+    private removeSelectedButtonRef;
+    private removeAllButtonRef;
+    static defaultProps: PickOptional<DualListSelectorProps>;
+    private createMergedCopy;
+    constructor(props: DualListSelectorProps);
+    /** 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) => any;
+    componentDidUpdate(): void;
+    onFilterUpdate: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
+    addAllVisible: (event: React.MouseEvent<HTMLElement>) => void;
+    addAllTreeVisible: (event: React.MouseEvent<HTMLElement>) => void;
+    addSelected: (event: React.MouseEvent<HTMLElement>) => void;
+    addTreeSelected: (event: React.MouseEvent<HTMLElement>) => void;
+    removeAllVisible: (event: React.MouseEvent<HTMLElement>) => void;
+    removeAllTreeVisible: (event: React.MouseEvent<HTMLElement>) => void;
+    removeSelected: (event: React.MouseEvent<HTMLElement>) => void;
+    removeTreeSelected: (event: React.MouseEvent<HTMLElement>) => void;
+    onOptionSelect: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, isChosen: boolean, id?: string, itemData?: any, parentData?: any) => void;
+    isChecked: (treeItem: DualListSelectorTreeItemData, isChosen: boolean) => boolean;
+    areAllDescendantsChecked: (treeItem: DualListSelectorTreeItemData, isChosen: boolean) => boolean;
+    areSomeDescendantsChecked: (treeItem: DualListSelectorTreeItemData, isChosen: boolean) => boolean;
+    mapChecked: (item: DualListSelectorTreeItemData, isChosen: boolean) => DualListSelectorTreeItemData;
+    onTreeOptionCheck: (evt: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, isChecked: boolean, itemData: DualListSelectorTreeItemData, isChosen: boolean) => void;
+    render(): React.JSX.Element;
+}
+export { DualListSelector };
+//# sourceMappingURL=DualListSelector.d.ts.map

package/dist/js/deprecated/components/DualListSelector/DualListSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DualListSelector.d.ts","sourceRoot":"","sources":["../../../../../src/deprecated/components/DualListSelector/DualListSelector.tsx"],"names":[],"mappings":"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"}

package/dist/js/deprecated/components/DualListSelector/DualListSelector.js

@@ -0,0 +1,456 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DualListSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const dual_list_selector_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/DualListSelector/dual-list-selector"));
+const react_styles_1 = require("@patternfly/react-styles");
+const angle_double_left_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/angle-double-left-icon'));
+const angle_left_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/angle-left-icon'));
+const angle_double_right_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/angle-double-right-icon'));
+const angle_right_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/angle-right-icon'));
+const DualListSelectorPane_1 = require("./DualListSelectorPane");
+const helpers_1 = require("../../../helpers");
+const treeUtils_1 = require("./treeUtils");
+const DualListSelectorControlsWrapper_1 = require("./DualListSelectorControlsWrapper");
+const DualListSelectorControl_1 = require("./DualListSelectorControl");
+const DualListSelectorContext_1 = require("./DualListSelectorContext");
+class DualListSelector extends React.Component {
+    // If the DualListSelector uses trees, concat the two initial arrays and merge duplicate folder IDs
+    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
+                .concat(copyOfChosen)
+                .reduce((mapObj, item) => {
+                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] = Object.assign({}, item);
+                }
+                return mapObj;
+            }, {}))
+            : null;
+    }
+    constructor(props) {
+        super(props);
+        this.addAllButtonRef = React.createRef();
+        this.addSelectedButtonRef = React.createRef();
+        this.removeSelectedButtonRef = React.createRef();
+        this.removeAllButtonRef = React.createRef();
+        /** In dev environment, prevents circular structure during JSON stringification when
+         * options passed in to the dual list selector include HTML elements.
+         */
+        this.replacer = (key, value) => {
+            if (key[0] === '_') {
+                return undefined;
+            }
+            return value;
+        };
+        this.onFilterUpdate = (newFilteredOptions, paneType, isSearchReset) => {
+            const { isTree } = this.props;
+            if (paneType === 'available') {
+                if (isSearchReset) {
+                    this.setState({
+                        availableFilteredOptions: null,
+                        availableTreeFilteredOptions: null
+                    });
+                    return;
+                }
+                if (isTree) {
+                    this.setState({
+                        availableTreeFilteredOptions: (0, treeUtils_1.flattenTreeWithFolders)(newFilteredOptions)
+                    });
+                }
+                else {
+                    this.setState({
+                        availableFilteredOptions: newFilteredOptions
+                    });
+                }
+            }
+            else if (paneType === 'chosen') {
+                if (isSearchReset) {
+                    this.setState({
+                        chosenFilteredOptions: null,
+                        chosenTreeFilteredOptions: null
+                    });
+                    return;
+                }
+                if (isTree) {
+                    this.setState({
+                        chosenTreeFilteredOptions: (0, treeUtils_1.flattenTreeWithFolders)(newFilteredOptions)
+                    });
+                }
+                else {
+                    this.setState({
+                        chosenFilteredOptions: newFilteredOptions
+                    });
+                }
+            }
+        };
+        this.addAllVisible = (event) => {
+            this.setState((prevState) => {
+                const itemsToRemove = [];
+                const newAvailable = [];
+                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: []
+                };
+            });
+        };
+        this.addAllTreeVisible = (event) => {
+            this.setState((prevState) => {
+                const movedOptions = prevState.availableTreeFilteredOptions ||
+                    (0, treeUtils_1.flattenTreeWithFolders)(prevState.availableOptions);
+                const newAvailable = prevState.availableOptions
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterRestTreeItems)(item, movedOptions));
+                const currChosen = (0, treeUtils_1.flattenTree)(prevState.chosenOptions);
+                const nextChosenOptions = currChosen.concat(movedOptions);
+                const newChosen = this.createMergedCopy()
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterTreeItemsWithoutFolders)(item, nextChosenOptions));
+                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: []
+                };
+            });
+        };
+        this.addSelected = (event) => {
+            this.setState((prevState) => {
+                const itemsToRemove = [];
+                const newAvailable = [];
+                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
+                };
+            });
+        };
+        this.addTreeSelected = (event) => {
+            this.setState((prevState) => {
+                // Remove selected available nodes from current available nodes
+                const newAvailable = prevState.availableOptions
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterRestTreeItems)(item, prevState.availableTreeOptionsChecked));
+                // Get next chosen options from current + new nodes and remap from base
+                const currChosen = (0, treeUtils_1.flattenTree)(prevState.chosenOptions);
+                const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
+                const newChosen = this.createMergedCopy()
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterTreeItemsWithoutFolders)(item, nextChosenOptions));
+                this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
+                this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+                return {
+                    availableTreeOptionsChecked: [],
+                    chosenTreeOptionsChecked: [],
+                    availableOptions: newAvailable,
+                    chosenOptions: newChosen
+                };
+            });
+        };
+        this.removeAllVisible = (event) => {
+            this.setState((prevState) => {
+                const itemsToRemove = [];
+                const newChosen = [];
+                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: []
+                };
+            });
+        };
+        this.removeAllTreeVisible = (event) => {
+            this.setState((prevState) => {
+                const movedOptions = prevState.chosenTreeFilteredOptions ||
+                    (0, treeUtils_1.flattenTreeWithFolders)(prevState.chosenOptions);
+                const newChosen = prevState.chosenOptions
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterRestTreeItems)(item, movedOptions));
+                const currAvailable = (0, treeUtils_1.flattenTree)(prevState.availableOptions);
+                const nextAvailableOptions = currAvailable.concat(movedOptions);
+                const newAvailable = this.createMergedCopy()
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterTreeItemsWithoutFolders)(item, nextAvailableOptions));
+                this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
+                this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+                return {
+                    chosenOptions: newChosen,
+                    availableOptions: newAvailable,
+                    availableTreeOptionsChecked: [],
+                    chosenTreeOptionsChecked: []
+                };
+            });
+        };
+        this.removeSelected = (event) => {
+            this.setState((prevState) => {
+                const itemsToRemove = [];
+                const newChosen = [];
+                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
+                };
+            });
+        };
+        this.removeTreeSelected = (event) => {
+            this.setState((prevState) => {
+                // Remove selected chosen nodes from current chosen nodes
+                const newChosen = prevState.chosenOptions
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterRestTreeItems)(item, prevState.chosenTreeOptionsChecked));
+                // Get next chosen options from current and remap from base
+                const currAvailable = (0, treeUtils_1.flattenTree)(prevState.availableOptions);
+                const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
+                const newAvailable = this.createMergedCopy()
+                    .map((opt) => Object.assign({}, opt))
+                    .filter((item) => (0, treeUtils_1.filterTreeItemsWithoutFolders)(item, nextAvailableOptions));
+                this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
+                this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
+                return {
+                    availableTreeOptionsChecked: [],
+                    chosenTreeOptionsChecked: [],
+                    availableOptions: newAvailable,
+                    chosenOptions: newChosen
+                };
+            });
+        };
+        this.onOptionSelect = (e, index, isChosen, 
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        id, itemData, parentData
+        /* 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);
+        };
+        this.isChecked = (treeItem, isChosen) => isChosen
+            ? this.state.chosenTreeOptionsChecked.includes(treeItem.id)
+            : this.state.availableTreeOptionsChecked.includes(treeItem.id);
+        this.areAllDescendantsChecked = (treeItem, isChosen) => treeItem.children
+            ? treeItem.children.every((child) => this.areAllDescendantsChecked(child, isChosen))
+            : this.isChecked(treeItem, isChosen);
+        this.areSomeDescendantsChecked = (treeItem, isChosen) => treeItem.children
+            ? treeItem.children.some((child) => this.areSomeDescendantsChecked(child, isChosen))
+            : this.isChecked(treeItem, isChosen);
+        this.mapChecked = (item, isChosen) => {
+            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 Object.assign(Object.assign({}, item), { children: item.children.map((child) => this.mapChecked(child, isChosen)) });
+            }
+            return item;
+        };
+        this.onTreeOptionCheck = (evt, isChecked, itemData, isChosen) => {
+            const { availableOptions, availableTreeFilteredOptions, chosenOptions, chosenTreeFilteredOptions } = this.state;
+            let panelOptions;
+            if (isChosen) {
+                if (chosenTreeFilteredOptions) {
+                    panelOptions = chosenOptions
+                        .map((opt) => Object.assign({}, opt))
+                        .filter((item) => (0, treeUtils_1.filterTreeItemsWithoutFolders)(item, chosenTreeFilteredOptions));
+                }
+                else {
+                    panelOptions = chosenOptions;
+                }
+            }
+            else {
+                if (availableTreeFilteredOptions) {
+                    panelOptions = availableOptions
+                        .map((opt) => Object.assign({}, opt))
+                        .filter((item) => (0, treeUtils_1.filterTreeItemsWithoutFolders)(item, availableTreeFilteredOptions));
+                }
+                else {
+                    panelOptions = availableOptions;
+                }
+            }
+            const checkedOptionTree = panelOptions
+                .map((opt) => Object.assign({}, opt))
+                .filter((item) => (0, treeUtils_1.filterTreeItems)(item, [itemData.id]));
+            const flatTree = (0, treeUtils_1.flattenTreeWithFolders)(checkedOptionTree);
+            const prevChecked = isChosen ? this.state.chosenTreeOptionsChecked : this.state.availableTreeOptionsChecked;
+            let updatedChecked = [];
+            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);
+            });
+        };
+        this.state = {
+            availableOptions: [...this.props.availableOptions],
+            availableOptionsSelected: [],
+            availableFilteredOptions: null,
+            availableTreeFilteredOptions: null,
+            chosenOptions: [...this.props.chosenOptions],
+            chosenOptionsSelected: [],
+            chosenFilteredOptions: null,
+            chosenTreeFilteredOptions: null,
+            availableTreeOptionsChecked: [],
+            chosenTreeOptionsChecked: []
+        };
+    }
+    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],
+                chosenOptions: [...this.props.chosenOptions]
+            });
+        }
+    }
+    render() {
+        const _a = this.props, { 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 } = _a, props = tslib_1.__rest(_a, ["availableOptionsTitle", "availableOptionsActions", "availableOptionsSearchAriaLabel", "className", "children", "chosenOptionsTitle", "chosenOptionsActions", "chosenOptionsSearchAriaLabel", "filterOption", "isSearchable", "chosenOptionsStatus", "availableOptionsStatus", "controlsAriaLabel", "addAllAriaLabel", "addSelectedAriaLabel", "removeSelectedAriaLabel", "removeAllAriaLabel", "availableOptions", "chosenOptions", "removeSelected", "addAll", "removeAll", "addSelected", "onListChange", "onAvailableOptionsSearchInputChanged", "onChosenOptionsSearchInputChanged", "onOptionSelect", "onOptionCheck", "id", "isTree", "isDisabled", "addAllTooltip", "addAllTooltipProps", "addSelectedTooltip", "addSelectedTooltipProps", "removeAllTooltip", "removeAllTooltipProps", "removeSelectedTooltip", "removeSelectedTooltipProps"]);
+        const { availableOptions, chosenOptions, chosenOptionsSelected, availableOptionsSelected, chosenTreeOptionsChecked, availableTreeOptionsChecked } = this.state;
+        const availableOptionsStatusToDisplay = availableOptionsStatus ||
+            (isTree
+                ? `${(0, treeUtils_1.filterFolders)(availableOptions, availableTreeOptionsChecked)
+                    .length} of ${(0, treeUtils_1.flattenTree)(availableOptions).length} items selected`
+                : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
+        const chosenOptionsStatusToDisplay = chosenOptionsStatus ||
+            (isTree
+                ? `${(0, treeUtils_1.filterFolders)(chosenOptions, chosenTreeOptionsChecked).length} of ${(0, treeUtils_1.flattenTree)(chosenOptions).length} items selected`
+                : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
+        const available = (isTree
+            ? availableOptions.map((item) => this.mapChecked(item, false))
+            : availableOptions);
+        const chosen = (isTree
+            ? chosenOptions.map((item) => this.mapChecked(item, true))
+            : chosenOptions);
+        return (React.createElement(DualListSelectorContext_1.DualListSelectorContext.Provider, { value: { isTree } },
+            React.createElement(helpers_1.GenerateId, null, (randomId) => (React.createElement("div", Object.assign({ className: (0, react_styles_1.css)(dual_list_selector_1.default.dualListSelector, className), id: id || randomId }, props), children === '' ? (React.createElement(React.Fragment, null,
+                React.createElement(DualListSelectorPane_1.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 }),
+                React.createElement(DualListSelectorControlsWrapper_1.DualListSelectorControlsWrapper, { "aria-label": controlsAriaLabel },
+                    React.createElement(DualListSelectorControl_1.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 },
+                        React.createElement(angle_right_icon_1.default, null)),
+                    React.createElement(DualListSelectorControl_1.DualListSelectorControl, { isDisabled: availableOptions.length === 0 || isDisabled, onClick: isTree ? this.addAllTreeVisible : this.addAllVisible, ref: this.addAllButtonRef, "aria-label": addAllAriaLabel, tooltipContent: addAllTooltip, tooltipProps: addAllTooltipProps },
+                        React.createElement(angle_double_right_icon_1.default, null)),
+                    React.createElement(DualListSelectorControl_1.DualListSelectorControl, { isDisabled: chosenOptions.length === 0 || isDisabled, onClick: isTree ? this.removeAllTreeVisible : this.removeAllVisible, "aria-label": removeAllAriaLabel, ref: this.removeAllButtonRef, tooltipContent: removeAllTooltip, tooltipProps: removeAllTooltipProps },
+                        React.createElement(angle_double_left_icon_1.default, null)),
+                    React.createElement(DualListSelectorControl_1.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 },
+                        React.createElement(angle_left_icon_1.default, null))),
+                React.createElement(DualListSelectorPane_1.DualListSelectorPane, { isChosen: true, 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))))));
+    }
+}
+exports.DualListSelector = DualListSelector;
+DualListSelector.displayName = 'DualListSelector';
+DualListSelector.defaultProps = {
+    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
+};
+//# sourceMappingURL=DualListSelector.js.map