@patternfly/react-core 4.222.3 → 4.222.4

package/dist/umd/react-core.css

@@ -23040,6 +23040,69 @@ svg.pf-c-spinner.pf-m-xl {
   color: var(--pf-global--Color--100);
 }
 
+.pf-c-draggable {
+  --pf-c-draggable--Cursor: auto;
+  --pf-c-draggable--m-dragging--Cursor: grabbing;
+  --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
+  --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
+  cursor: var(--pf-c-draggable--Cursor);
+}
+
+.pf-c-draggable.pf-m-dragging {
+  --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
+  position: relative;
+  background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
+  box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
+}
+
+.pf-c-draggable.pf-m-dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
+}
+
+.pf-c-draggable.pf-m-drag-outside {
+  --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
+  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
+}
+
+.pf-c-droppable {
+  --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
+  --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
+}
+
+.pf-c-droppable.pf-m-dragging {
+  position: relative;
+}
+
+.pf-c-droppable.pf-m-dragging::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+}
+
+.pf-c-droppable::after {
+  background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
+  border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
+}
+
+.pf-c-droppable.pf-m-drag-outside {
+  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
+}
+
 .pf-c-text-input-group {
   --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -26688,69 +26751,6 @@ svg.pf-c-spinner.pf-m-xl {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
-.pf-c-draggable {
-  --pf-c-draggable--Cursor: auto;
-  --pf-c-draggable--m-dragging--Cursor: grabbing;
-  --pf-c-draggable--m-dragging--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-draggable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
-  --pf-c-draggable--m-drag-outside--Cursor: not-allowed;
-  --pf-c-draggable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
-  cursor: var(--pf-c-draggable--Cursor);
-}
-
-.pf-c-draggable.pf-m-dragging {
-  --pf-c-draggable--Cursor: var(--pf-c-draggable--m-dragging--Cursor);
-  position: relative;
-  background-color: var(--pf-c-draggable--m-dragging--BackgroundColor);
-  box-shadow: var(--pf-c-draggable--m-dragging--BoxShadow);
-}
-
-.pf-c-draggable.pf-m-dragging::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  border: var(--pf-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-c-draggable--m-dragging--after--BorderColor);
-}
-
-.pf-c-draggable.pf-m-drag-outside {
-  --pf-c-draggable--m-dragging--Cursor: var(--pf-c-draggable--m-drag-outside--Cursor);
-  --pf-c-draggable--m-dragging--after--BorderColor: var(--pf-c-draggable--m-drag-outside--after--BorderColor);
-}
-
-.pf-c-droppable {
-  --pf-c-droppable--m-dragging--after--BackgroundColor: rgba(255, 255, 255, 0.6);
-  --pf-c-droppable--m-dragging--after--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-global--active-color--100);
-  --pf-c-droppable--m-drag-outside--after--BorderColor: var(--pf-global--danger-color--100);
-}
-
-.pf-c-droppable.pf-m-dragging {
-  position: relative;
-}
-
-.pf-c-droppable.pf-m-dragging::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  content: "";
-}
-
-.pf-c-droppable::after {
-  background-color: var(--pf-c-droppable--m-dragging--after--BackgroundColor);
-  border: var(--pf-c-droppable--m-dragging--after--BorderWidth) solid var(--pf-c-droppable--m-dragging--after--BorderColor);
-}
-
-.pf-c-droppable.pf-m-drag-outside {
-  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
-}
-
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/dist/umd/react-core.js

@@ -7632,7 +7632,8 @@
                         typeaheadFilteredChildren =
                             typeaheadInputValue.toString() !== ''
                                 ? React__namespace.Children.map(children, group => {
-                                    if (React__namespace.isValidElement(group) && group.type === SelectGroup) {
+                                    if (React__namespace.isValidElement(group) &&
+                                        group.type === SelectGroup) {
                                         const filteredGroupChildren = React__namespace.Children.toArray(group.props.children).filter(childFilter);
                                         if (filteredGroupChildren.length > 0) {
                                             return React__namespace.cloneElement(group, {
@@ -11654,18 +11655,19 @@
             const { availableOptions, chosenOptions, chosenOptionsSelected, availableOptionsSelected, chosenTreeOptionsChecked, availableTreeOptionsChecked } = this.state;
             const availableOptionsStatusToDisplay = availableOptionsStatus ||
                 (isTree
-                    ? `${filterFolders(availableOptions, availableTreeOptionsChecked).length} of ${flattenTree(availableOptions).length} items selected`
+                    ? `${filterFolders(availableOptions, availableTreeOptionsChecked)
+                    .length} of ${flattenTree(availableOptions).length} items selected`
                     : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
             const chosenOptionsStatusToDisplay = chosenOptionsStatus ||
                 (isTree
                     ? `${filterFolders(chosenOptions, chosenTreeOptionsChecked).length} of ${flattenTree(chosenOptions).length} items selected`
                     : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
-            const available = isTree
+            const available = (isTree
                 ? availableOptions.map(item => this.mapChecked(item, false))
-                : availableOptions;
-            const chosen = isTree
+                : availableOptions);
+            const chosen = (isTree
                 ? chosenOptions.map(item => this.mapChecked(item, true))
-                : chosenOptions;
+                : chosenOptions);
             return (React__namespace.createElement(DualListSelectorContext.Provider, { value: { isTree } },
                 React__namespace.createElement("div", Object.assign({ className: css(styles$L.dualListSelector, className), id: id }, props), children === '' ? (React__namespace.createElement(React__namespace.Fragment, null,
                     React__namespace.createElement(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}-available-pane`, isDisabled: isDisabled }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.3",
+  "version": "4.222.4",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.3",
-    "@patternfly/react-styles": "^4.72.3",
-    "@patternfly/react-tokens": "^4.74.3",
+    "@patternfly/react-icons": "^4.73.4",
+    "@patternfly/react-styles": "^4.72.4",
+    "@patternfly/react-tokens": "^4.74.4",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "302f7d03810ce43c87e50939e21e46e6f7029ca9"
+  "gitHead": "308f2c66a19104f4a1b0f56da3b4df95d7a2d919"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -144,6 +144,6 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
         {...props}
       />,
       container
-    );
+    ) as React.ReactElement;
   }
 }

package/src/components/DualListSelector/DualListSelector.tsx

@@ -134,10 +134,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
   private removeAllButtonRef = React.createRef<HTMLButtonElement>();
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    availableOptions: [] as React.ReactNode[],
+    availableOptions: [],
     availableOptionsTitle: 'Available options',
     availableOptionsSearchAriaLabel: 'Available search input',
-    chosenOptions: [] as React.ReactNode[],
+    chosenOptions: [],
     chosenOptionsTitle: 'Chosen options',
     chosenOptionsSearchAriaLabel: 'Chosen search input',
     id: getUniqueId('dual-list-selector'),
@@ -177,11 +177,11 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
   constructor(props: DualListSelectorProps) {
     super(props);
     this.state = {
-      availableOptions: [...this.props.availableOptions],
+      availableOptions: [...this.props.availableOptions] as React.ReactNode[],
       availableOptionsSelected: [],
       availableFilteredOptions: null,
       availableTreeFilteredOptions: null,
-      chosenOptions: [...this.props.chosenOptions],
+      chosenOptions: [...this.props.chosenOptions] as React.ReactNode[],
       chosenOptionsSelected: [],
       chosenFilteredOptions: null,
       chosenTreeFilteredOptions: null,
@@ -208,8 +208,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         JSON.stringify(this.state.chosenOptions, this.replacer)
     ) {
       this.setState({
-        availableOptions: [...this.props.availableOptions],
-        chosenOptions: [...this.props.chosenOptions]
+        availableOptions: [...this.props.availableOptions] as React.ReactNode[],
+        chosenOptions: [...this.props.chosenOptions] as React.ReactNode[]
       });
     }
   }
@@ -226,7 +226,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       }
       if (isTree) {
         this.setState({
-          availableTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
+          availableTreeFilteredOptions: flattenTreeWithFolders(
+            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+          )
         });
       } else {
         this.setState({
@@ -243,7 +245,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       }
       if (isTree) {
         this.setState({
-          chosenTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
+          chosenTreeFilteredOptions: flattenTreeWithFolders(
+            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+          )
         });
       } else {
         this.setState({
@@ -283,16 +287,20 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     this.setState(prevState => {
       const movedOptions =
         prevState.availableTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.availableOptions as DualListSelectorTreeItemData[]);
+        flattenTreeWithFolders((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const newAvailable = prevState.availableOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
+        .filter(item =>
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions)
+        ) as React.ReactNode[];
 
-      const currChosen = flattenTree(prevState.chosenOptions 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 => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
+        .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);
@@ -339,15 +347,17 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       const newAvailable = prevState.availableOptions
         .map(opt => Object.assign({}, opt))
         .filter(item =>
-          filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
+          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 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 => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
+        .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);
@@ -391,16 +401,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     this.setState(prevState => {
       const movedOptions =
         prevState.chosenTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+        flattenTreeWithFolders((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
 
       const newChosen = prevState.chosenOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
-      const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
+        .filter(item => filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions));
+      const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(movedOptions);
       const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
+        .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);
@@ -444,14 +456,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       // Remove selected chosen nodes from current chosen nodes
       const newChosen = prevState.chosenOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked));
+        .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 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 => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
+        .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);
@@ -542,7 +558,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         panelOptions = chosenOptions
           .map(opt => Object.assign({}, opt))
           .filter(item =>
-            filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
+            filterTreeItemsWithoutFolders((item as unknown) as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
           );
       } else {
         panelOptions = chosenOptions;
@@ -552,7 +568,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         panelOptions = availableOptions
           .map(opt => Object.assign({}, opt))
           .filter(item =>
-            filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, availableTreeFilteredOptions)
+            filterTreeItemsWithoutFolders(
+              (item as unknown) as DualListSelectorTreeItemData,
+              availableTreeFilteredOptions
+            )
           );
       } else {
         panelOptions = availableOptions;
@@ -560,8 +579,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     }
     const checkedOptionTree = panelOptions
       .map(opt => Object.assign({}, opt))
-      .filter(item => filterTreeItems(item as DualListSelectorTreeItemData, [itemData.id]));
-    const flatTree = flattenTreeWithFolders(checkedOptionTree as DualListSelectorTreeItemData[]);
+      .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[];
@@ -638,23 +657,24 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       availableOptionsStatus ||
       (isTree
         ? `${
-            filterFolders(availableOptions as DualListSelectorTreeItemData[], availableTreeOptionsChecked).length
-          } of ${flattenTree(availableOptions as DualListSelectorTreeItemData[]).length} items selected`
+            filterFolders((availableOptions as unknown) as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
+              .length
+          } of ${flattenTree((availableOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
         : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
     const chosenOptionsStatusToDisplay =
       chosenOptionsStatus ||
       (isTree
-        ? `${filterFolders(chosenOptions as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length} of ${
-            flattenTree(chosenOptions 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 DualListSelectorTreeItemData, false))
-      : availableOptions;
-    const chosen = isTree
-      ? chosenOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, true))
-      : chosenOptions;
+    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 }}>

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -70,7 +70,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   onOptionSelect,
   onOptionCheck,
   title = '',
-  options = [] as React.ReactNode[],
+  options = [],
   selectedOptions = [],
   isSearchable = false,
   searchInputAriaLabel = '',
@@ -87,11 +87,11 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   // only called when search input is dynamically built
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    let filtered;
+    let filtered: React.ReactNode[];
     if (isTree) {
-      filtered = (options as DualListSelectorTreeItemData[])
+      filtered = options
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterInput(item as DualListSelectorTreeItemData, newValue));
+        .filter(item => filterInput((item as unknown) as DualListSelectorTreeItemData, newValue));
     } else {
       filtered = options.filter(option => {
         if (displayOption(option)) {
@@ -110,7 +110,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, input);
+      return filterOption((item as unknown) as React.ReactNode, input);
     } else {
       if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
         return true;
@@ -200,10 +200,12 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <DualListSelectorTree
                   data={
                     isSearchable
-                      ? (options as DualListSelectorTreeItemData[])
+                      ? ((options
                           .map(opt => Object.assign({}, opt))
-                          .filter(item => filterInput(item as DualListSelectorTreeItemData, input))
-                      : (options as DualListSelectorTreeItemData[])
+                          .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/Menu/MenuItem.tsx

@@ -224,7 +224,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         onDrillIn(
           menuId,
           typeof drilldownMenu === 'function'
-            ? drilldownMenu().props.id
+            ? (drilldownMenu() as any).props.id
             : (drilldownMenu as React.ReactElement).props.id,
           itemId
         );

package/src/components/MenuToggle/MenuToggle.tsx

@@ -61,7 +61,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       <React.Fragment>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         <span className="pf-c-menu-toggle__text">{children}</span>
-        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {badge && <span className={css(styles.menuToggleCount)}>{badge as React.ReactNode}</span>}
         <span className={css(styles.menuToggleControls)}>
           <span className={css(styles.menuToggleToggleIcon)}>
             <CaretDownIcon aria-hidden />

package/src/components/Modal/Modal.tsx

@@ -243,6 +243,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         ouiaSafe={ouiaSafe}
       />,
       container
-    );
+    ) as React.ReactElement;
   }
 }

package/src/components/Select/Select.tsx

@@ -447,7 +447,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
             ? React.Children.map(children, group => {
-                if (React.isValidElement(group) && group.type === SelectGroup) {
+                if (
+                  React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
+                  group.type === SelectGroup
+                ) {
                   const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
                     SelectGroupProps
                   >[]).filter(childFilter);
@@ -635,8 +638,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [optionRef as HTMLElement, favoriteRef as HTMLElement];
-    this.optionContainerRefCollection[index] = optionContainerRef as HTMLElement;
+    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
+    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -144,7 +144,10 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         </Button>
                       </div>
                       {isExpanded
-                        ? ReactDOM.createPortal(children, expandableContentRef.current.firstElementChild)
+                        ? (ReactDOM.createPortal(
+                            children,
+                            expandableContentRef.current.firstElementChild
+                          ) as React.ReactElement)
                         : children}
                     </div>
                   );