@patternfly/react-core 5.0.0-alpha.44 → 5.0.0-alpha.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.44",
+  "version": "5.0.0-alpha.45",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ef868c4616df0389439d42b9f573f724c172e076"
+  "gitHead": "b4d34f7a9978200a95142d099115f91bf4170497"
 }

package/src/components/DualListSelector/DualListSelector.tsx

@@ -62,7 +62,11 @@ export interface DualListSelectorProps {
   /** Additonal tooltip properties for the dynamically built add selected tooltip */
   addSelectedTooltipProps?: any;
   /** Callback fired every time dynamically built options are chosen or removed */
-  onListChange?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
+  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 */
@@ -89,7 +93,7 @@ export interface DualListSelectorProps {
   removeAllTooltipProps?: any;
   /** Optional callback fired when a dynamically built option is selected */
   onOptionSelect?: (
-    e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
     index: number,
     isChosen: boolean,
     id: string,
@@ -98,7 +102,7 @@ export interface DualListSelectorProps {
   ) => void;
   /** Optional callback fired when a dynamically built option is checked */
   onOptionCheck?: (
-    e: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     checked: boolean,
     checkedId: string,
     newCheckedItems: string[]
@@ -108,11 +112,11 @@ export interface DualListSelectorProps {
   /** 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?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  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?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  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;
 }
@@ -230,7 +234,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       if (isTree) {
         this.setState({
           availableTreeFilteredOptions: flattenTreeWithFolders(
-            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+            newFilteredOptions as unknown as DualListSelectorTreeItemData[]
           )
         });
       } else {
@@ -249,7 +253,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       if (isTree) {
         this.setState({
           chosenTreeFilteredOptions: flattenTreeWithFolders(
-            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+            newFilteredOptions as unknown as DualListSelectorTreeItemData[]
           )
         });
       } else {
@@ -260,12 +264,12 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     }
   };
 
-  addAllVisible = () => {
-    this.setState(prevState => {
+  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 => {
+      prevState.availableOptions.forEach((value) => {
         if (movedOptions.indexOf(value) !== -1) {
           itemsToRemove.push(value);
         } else {
@@ -275,7 +279,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
 
       const newChosen = [...prevState.chosenOptions, ...itemsToRemove];
       this.props.addAll && this.props.addAll(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         chosenOptions: newChosen,
@@ -288,27 +292,27 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  addAllTreeVisible = () => {
-    this.setState(prevState => {
+  addAllTreeVisible = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
       const movedOptions =
         prevState.availableTreeFilteredOptions ||
-        flattenTreeWithFolders((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
+        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)
+        .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 currChosen = flattenTree(prevState.chosenOptions as unknown as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(movedOptions);
       const newChosen = this.createMergedCopy()
-        .map(opt => Object.assign({}, opt))
-        .filter(item =>
+        .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(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         chosenOptions: newChosen,
@@ -321,8 +325,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  addSelected = () => {
-    this.setState(prevState => {
+  addSelected = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
       const itemsToRemove = [] as React.ReactNode[];
       const newAvailable = [] as React.ReactNode[];
       prevState.availableOptions.forEach((value, index) => {
@@ -335,7 +339,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
 
       const newChosen = [...prevState.chosenOptions, ...itemsToRemove];
       this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         chosenOptionsSelected: [],
@@ -348,26 +352,26 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  addTreeSelected = () => {
-    this.setState(prevState => {
+  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)
+        .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 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 =>
+        .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(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         availableTreeOptionsChecked: [],
@@ -378,12 +382,12 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  removeAllVisible = () => {
-    this.setState(prevState => {
+  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 => {
+      prevState.chosenOptions.forEach((value) => {
         if (movedOptions.indexOf(value) !== -1) {
           itemsToRemove.push(value);
         } else {
@@ -393,7 +397,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
 
       const newAvailable = [...prevState.availableOptions, ...itemsToRemove];
       this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         chosenOptions: newChosen,
@@ -406,25 +410,25 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  removeAllTreeVisible = () => {
-    this.setState(prevState => {
+  removeAllTreeVisible = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
       const movedOptions =
         prevState.chosenTreeFilteredOptions ||
-        flattenTreeWithFolders((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
+        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[]);
+        .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 =>
+        .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(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         chosenOptions: newChosen,
@@ -435,8 +439,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  removeSelected = () => {
-    this.setState(prevState => {
+  removeSelected = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState((prevState) => {
       const itemsToRemove = [] as React.ReactNode[];
       const newChosen = [] as React.ReactNode[];
       prevState.chosenOptions.forEach((value, index) => {
@@ -449,7 +453,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
 
       const newAvailable = [...prevState.availableOptions, ...itemsToRemove];
       this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
-      this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         chosenOptionsSelected: [],
@@ -462,26 +466,26 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     });
   };
 
-  removeTreeSelected = () => {
-    this.setState(prevState => {
+  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)
+        .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 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 =>
+        .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(newAvailable, newChosen);
+      this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
         availableTreeOptionsChecked: [],
@@ -502,12 +506,12 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     parentData?: any
     /* eslint-enable @typescript-eslint/no-unused-vars */
   ) => {
-    this.setState(prevState => {
+    this.setState((prevState) => {
       const originalArray = isChosen ? prevState.chosenOptionsSelected : prevState.availableOptionsSelected;
 
       let updatedArray = null;
       if (originalArray.indexOf(index) !== -1) {
-        updatedArray = originalArray.filter(value => value !== index);
+        updatedArray = originalArray.filter((value) => value !== index);
       } else {
         updatedArray = [...originalArray, index];
       }
@@ -527,11 +531,11 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       : this.state.availableTreeOptionsChecked.includes(treeItem.id);
   areAllDescendantsChecked = (treeItem: DualListSelectorTreeItemData, isChosen: boolean): boolean =>
     treeItem.children
-      ? treeItem.children.every(child => this.areAllDescendantsChecked(child, isChosen))
+      ? 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))
+      ? treeItem.children.some((child) => this.areSomeDescendantsChecked(child, isChosen))
       : this.isChecked(treeItem, isChosen);
 
   mapChecked = (item: DualListSelectorTreeItemData, isChosen: boolean): DualListSelectorTreeItemData => {
@@ -550,7 +554,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     if (item.children) {
       return {
         ...item,
-        children: item.children.map(child => this.mapChecked(child, isChosen))
+        children: item.children.map((child) => this.mapChecked(child, isChosen))
       };
     }
     return item;
@@ -567,9 +571,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     if (isChosen) {
       if (chosenTreeFilteredOptions) {
         panelOptions = chosenOptions
-          .map(opt => Object.assign({}, opt))
-          .filter(item =>
-            filterTreeItemsWithoutFolders((item as unknown) as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
+          .map((opt) => Object.assign({}, opt))
+          .filter((item) =>
+            filterTreeItemsWithoutFolders(item as unknown as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
           );
       } else {
         panelOptions = chosenOptions;
@@ -577,32 +581,29 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     } else {
       if (availableTreeFilteredOptions) {
         panelOptions = availableOptions
-          .map(opt => Object.assign({}, opt))
-          .filter(item =>
-            filterTreeItemsWithoutFolders(
-              (item as unknown) as DualListSelectorTreeItemData,
-              availableTreeFilteredOptions
-            )
+          .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[]);
+      .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)));
+      updatedChecked = prevChecked.concat(flatTree.filter((id) => !prevChecked.includes(id)));
     } else {
-      updatedChecked = prevChecked.filter(id => !flatTree.includes(id));
+      updatedChecked = prevChecked.filter((id) => !flatTree.includes(id));
     }
 
     this.setState(
-      prevState => ({
+      (prevState) => ({
         availableTreeOptionsChecked: isChosen ? prevState.availableTreeOptionsChecked : updatedChecked,
         chosenTreeOptionsChecked: isChosen ? updatedChecked : prevState.chosenTreeOptionsChecked
       }),
@@ -668,29 +669,33 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       availableOptionsStatus ||
       (isTree
         ? `${
-            filterFolders((availableOptions as unknown) as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
+            filterFolders(availableOptions as unknown as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
               .length
-          } of ${flattenTree((availableOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
+          } 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`
+            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 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 => (
+          {(randomId) => (
             <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
               {children === '' ? (
                 <>

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -36,7 +36,7 @@ export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivE
   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,
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
     index: number,
     isChosen: boolean,
     id?: string,
@@ -45,7 +45,7 @@ export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivE
   ) => void;
   /** @hide Callback for when a tree option is checked. Optionally used only when options prop is provided. */
   onOptionCheck?: (
-    evt: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,
     itemData: DualListSelectorTreeItemData
   ) => void;
@@ -56,7 +56,7 @@ export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivE
   /** 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?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  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. */
@@ -100,10 +100,10 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
-        .map(opt => Object.assign({}, opt))
-        .filter(item => filterInput((item as unknown) as DualListSelectorTreeItemData, newValue));
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue));
     } else {
-      filtered = options.filter(option => {
+      filtered = options.filter((option) => {
         if (displayOption(option)) {
           return option;
         }
@@ -112,7 +112,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');
 
     if (onSearchInputChanged) {
-      onSearchInputChanged(newValue, e);
+      onSearchInputChanged(e, newValue);
     }
     setInput(newValue);
   };
@@ -120,7 +120,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   // 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);
+      return filterOption(item as unknown as React.ReactNode, input);
     } else {
       if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
         return true;
@@ -128,8 +128,9 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     }
     if (item.children) {
       return (
-        (item.children = item.children.map(opt => Object.assign({}, opt)).filter(child => filterInput(child, input)))
-          .length > 0
+        (item.children = item.children
+          .map((opt) => Object.assign({}, opt))
+          .filter((child) => filterInput(child, input))).length > 0
       );
     }
   };
@@ -139,10 +140,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     if (filterOption) {
       return filterOption(option, input);
     } else {
-      return option
-        .toString()
-        .toLowerCase()
-        .includes(input.toLowerCase());
+      return option.toString().toLowerCase().includes(input.toLowerCase());
     }
   };
 
@@ -168,7 +166,9 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <SearchInput
                   onChange={isDisabled ? undefined : onChange}
                   onClear={
-                    onSearchInputClear ? onSearchInputClear : e => onChange(e as React.FormEvent<HTMLInputElement>, '')
+                    onSearchInputClear
+                      ? onSearchInputClear
+                      : (e) => onChange(e as React.FormEvent<HTMLInputElement>, '')
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}
@@ -221,12 +221,12 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <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[])
+                      ? (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`}

package/src/components/DualListSelector/examples/DualListSelectorBasic.tsx

@@ -10,7 +10,11 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
   ]);
   const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };

package/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -10,7 +10,11 @@ export const DualListSelectorBasicSearch: React.FunctionComponent = () => {
   ]);
   const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };

package/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx

@@ -10,7 +10,11 @@ export const DualListSelectorBasicTooltips: React.FunctionComponent = () => {
   ]);
   const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };

package/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx

@@ -74,6 +74,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
   ]);
 
   const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
     newAvailableOptions: DualListSelectorTreeItemData[],
     newChosenOptions: DualListSelectorTreeItemData[]
   ) => {