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

package/helpers/index.d.ts

@@ -1,14 +1,14 @@
-export * from './constants';
-export * from './FocusTrap/FocusTrap';
-export * from './GenerateId/GenerateId';
-export * from './htmlConstants';
-export * from './typeUtils';
-export * from './OUIA/ouia';
-export * from './util';
-export * from './Popper/Popper';
-export * from './useIsomorphicLayout';
-export * from './KeyboardHandler';
-export * from './resizeObserver';
-export * from './useInterval';
-export * from './datetimeUtils';
+export * from '../dist/esm/helpers/constants';
+export * from '../dist/esm/helpers/FocusTrap/FocusTrap';
+export * from '../dist/esm/helpers/GenerateId/GenerateId';
+export * from '../dist/esm/helpers/htmlConstants';
+export * from '../dist/esm/helpers/typeUtils';
+export * from '../dist/esm/helpers/OUIA/ouia';
+export * from '../dist/esm/helpers/util';
+export * from '../dist/esm/helpers/Popper/Popper';
+export * from '../dist/esm/helpers/useIsomorphicLayout';
+export * from '../dist/esm/helpers/KeyboardHandler';
+export * from '../dist/esm/helpers/resizeObserver';
+export * from '../dist/esm/helpers/useInterval';
+export * from '../dist/esm/helpers/datetimeUtils';
 //# sourceMappingURL=index.d.ts.map

package/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/helpers/index.js

@@ -1,14 +1,14 @@
-export * from './constants';
-export * from './FocusTrap/FocusTrap';
-export * from './GenerateId/GenerateId';
-export * from './htmlConstants';
-export * from './typeUtils';
-export * from './OUIA/ouia';
-export * from './util';
-export * from './Popper/Popper';
-export * from './useIsomorphicLayout';
-export * from './KeyboardHandler';
-export * from './resizeObserver';
-export * from './useInterval';
-export * from './datetimeUtils';
+export * from '../dist/esm/helpers/constants';
+export * from '../dist/esm/helpers/FocusTrap/FocusTrap';
+export * from '../dist/esm/helpers/GenerateId/GenerateId';
+export * from '../dist/esm/helpers/htmlConstants';
+export * from '../dist/esm/helpers/typeUtils';
+export * from '../dist/esm/helpers/OUIA/ouia';
+export * from '../dist/esm/helpers/util';
+export * from '../dist/esm/helpers/Popper/Popper';
+export * from '../dist/esm/helpers/useIsomorphicLayout';
+export * from '../dist/esm/helpers/KeyboardHandler';
+export * from '../dist/esm/helpers/resizeObserver';
+export * from '../dist/esm/helpers/useInterval';
+export * from '../dist/esm/helpers/datetimeUtils';
 //# sourceMappingURL=index.js.map

package/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/layouts/index.d.ts

@@ -1,8 +1,8 @@
-export * from './Bullseye';
-export * from './Flex';
-export * from './Gallery';
-export * from './Grid';
-export * from './Level';
-export * from './Split';
-export * from './Stack';
+export * from '../dist/esm/layouts/Bullseye';
+export * from '../dist/esm/layouts/Flex';
+export * from '../dist/esm/layouts/Gallery';
+export * from '../dist/esm/layouts/Grid';
+export * from '../dist/esm/layouts/Level';
+export * from '../dist/esm/layouts/Split';
+export * from '../dist/esm/layouts/Stack';
 //# sourceMappingURL=index.d.ts.map

package/layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/layouts/index.js

@@ -1,8 +1,8 @@
-export * from './Bullseye';
-export * from './Flex';
-export * from './Gallery';
-export * from './Grid';
-export * from './Level';
-export * from './Split';
-export * from './Stack';
+export * from '../dist/esm/layouts/Bullseye';
+export * from '../dist/esm/layouts/Flex';
+export * from '../dist/esm/layouts/Gallery';
+export * from '../dist/esm/layouts/Grid';
+export * from '../dist/esm/layouts/Level';
+export * from '../dist/esm/layouts/Split';
+export * from '../dist/esm/layouts/Stack';
 //# sourceMappingURL=index.js.map

package/layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/next/index.d.ts

@@ -1,2 +1,2 @@
-export * from './components';
+export * from '../dist/esm/next/components';
 //# sourceMappingURL=index.d.ts.map

package/next/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/next/index.js

@@ -1,2 +1,2 @@
-export * from './components';
+export * from '../dist/esm/next/components';
 //# sourceMappingURL=index.js.map

package/next/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.44",
+  "version": "5.0.0-alpha.46",
   "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",
@@ -42,7 +42,7 @@
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "clean": "rimraf dist",
     "generate": "node scripts/copyStyles.js",
-    "subpaths": "node scripts/copySubpaths.js"
+    "subpaths": "node scripts/createSubpaths.js"
   },
   "dependencies": {
     "@patternfly/react-icons": "^5.0.0-alpha.6",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ef868c4616df0389439d42b9f573f724c172e076"
+  "gitHead": "7ec2df690981fddd6f8be3ff7d5f21aa497e82b8"
 }

package/scripts/createSubpaths.js

@@ -0,0 +1,32 @@
+/**
+ * Re-export subpath modules into the package root directory for ease of access.
+ */
+const { readdirSync, readFileSync, writeFileSync, mkdirSync } = require('fs');
+const { resolve, join } = require('path');
+
+const isIndex = (fileName) => fileName.match(/^index\./);
+
+const updatePaths = (filePath, subPathName) => {
+  const contents = readFileSync(filePath, { encoding: 'utf8' });
+  if (filePath.includes('.map')) {
+    return contents.replaceAll('../../../', `../`);
+  } else {
+    return contents.replaceAll('./', `../dist/esm/${subPathName}/`);
+  }
+};
+
+['next', 'deprecated', 'components', 'layouts', 'helpers'].forEach((subPathName) => {
+  const distPath = resolve(__dirname, `../dist/esm/${subPathName}`);
+  const distFileNames = readdirSync(distPath);
+  const distIndexFileNames = distFileNames.filter((fileName) => isIndex(fileName));
+
+  const destinationDir = resolve(__dirname, `../${subPathName}`);
+  mkdirSync(destinationDir, { recursive: true });
+
+  distIndexFileNames.forEach((fileName) => {
+    const filePath = join(__dirname, '../dist/esm', subPathName, fileName);
+    const newFileContent = updatePaths(filePath, subPathName);
+    const fileDestination = join(destinationDir, fileName);
+    writeFileSync(fileDestination, newFileContent);
+  });
+});

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 === '' ? (
                 <>