From d57b2126f1d90c89afa37c3bbff7d9d239d57c51 Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Thu, 11 Aug 2022 14:17:58 +0200
Subject: [PATCH] Correct types for examples

---
 .../examples/ContextSelectorBasic.tsx         |  8 +++---
 .../examples/ContextSelectorPlainText.tsx     |  6 ++---
 .../examples/ContextSelectorWithFooter.tsx    |  8 +++---
 .../examples/DualListSelectorComposable.tsx   | 10 ++++++--
 .../DualListSelectorComposableDragDrop.tsx    | 12 +++------
 .../DualListSelectorComposableTree.tsx        |  6 ++---
 .../examples/DualListSelectorTreeExample.tsx  | 13 ++++++----
 .../src/components/MenuToggle/MenuToggle.tsx  |  4 +--
 .../examples/ComposableActionsMenu.tsx        | 20 +++++++++------
 .../ComposableApplicationLauncher.tsx         | 23 +++++++++--------
 .../examples/ComposableContextSelector.tsx    | 22 ++++++++--------
 .../examples/ComposableDrilldownMenu.tsx      | 14 +++++------
 .../examples/ComposableFlyout.tsx             | 16 ++++++------
 .../ComposableSimpleCheckboxSelect.tsx        | 19 ++++++++------
 .../examples/ComposableSimpleDropdown.tsx     | 14 +++++------
 .../examples/ComposableSimpleSelect.tsx       | 25 +++++++++++++------
 .../examples/ComposableTreeViewMenu.tsx       | 21 ++++++++--------
 .../examples/ComposableTypeaheadSelect.tsx    |  4 +--
 .../src/components/Table/RowWrapper.tsx       |  1 +
 .../src/components/layers/LayerContainer.tsx  |  2 +-
 .../pipelines/components/nodes/TaskNode.tsx   |  1 +
 21 files changed, 135 insertions(+), 114 deletions(-)

diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx
index 8f5cc91db24..a3d94276d0e 100644
--- a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx
+++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorBasic.tsx
@@ -48,7 +48,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -71,11 +71,11 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
       screenReaderLabel="Selected Project:"
     >
       {filteredItems.map((item, index) => {
-        const [text = null, href = null, isDisabled] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text = null, href = undefined, isDisabled] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text || item}
+            {text}
           </ContextSelectorItem>
         );
       })}
diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx
index 2a626280d19..47fe21b6c41 100644
--- a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx
+++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx
@@ -47,7 +47,7 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -72,8 +72,8 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
       isText
     >
       {filteredItems.map((item, index) => {
-        const [text, href = null, isDisabled = false] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text, href = undefined, isDisabled = false] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
             {text}
diff --git a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx
index 422f97d893d..926ec5f4c71 100644
--- a/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx
+++ b/packages/react-core/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx
@@ -47,7 +47,7 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -78,11 +78,11 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
       }
     >
       {filteredItems.map((item, index) => {
-        const [text = null, href = null, isDisabled] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text = null, href = undefined, isDisabled] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text || item}
+            {text}
           </ContextSelectorItem>
         );
       })}
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
index 858fef07f64..2afbf31970c 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -16,8 +16,14 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
 export const DualListSelectorComposable: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState([
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
     { text: 'Apple', selected: false, isVisible: true },
     { text: 'Banana', selected: false, isVisible: true },
     { text: 'Pineapple', selected: false, isVisible: true },
@@ -26,7 +32,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     { text: 'Peach', selected: false, isVisible: true },
     { text: 'Strawberry', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState([]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
   const [availableFilter, setAvailableFilter] = React.useState('');
   const [chosenFilter, setChosenFilter] = React.useState('');
 
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
index 0d5a0dadb5b..b3a4d8242b6 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
@@ -8,20 +8,14 @@ import {
   DualListSelectorList,
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
-  DualListSelectorControl
+  DualListSelectorControl,
+  DraggableItemPosition
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
-interface SourceType {
-  droppableId: string;
-  index: number;
-}
-
-interface DestinationType extends SourceType {}
-
 export const DualListSelectorComposableDragDrop: React.FunctionComponent = () => {
   const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
   const [availableOptions, setAvailableOptions] = React.useState([
@@ -87,7 +81,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
     }
   };
 
-  const onDrop = (source: SourceType, dest: DestinationType) => {
+  const onDrop = (source: DraggableItemPosition, dest?: DraggableItemPosition) => {
     if (dest) {
       const newList = [...chosenOptions];
       const [removed] = newList.splice(source.index, 1);
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index 39ab922fc9d..c88ae3a46ee 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -52,7 +52,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     if (!node.children || !node.children.length) {
       return [node.id];
     } else {
-      let childrenIds = [];
+      let childrenIds: string[] = [];
       node.children.forEach(child => {
         childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];
       });
@@ -77,7 +77,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.
   const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = React.useMemo(() => {
     let leavesById = {};
-    let allLeaves = [];
+    let allLeaves: string[] = [];
     let nodeTexts = {};
     data.forEach(foodNode => {
       nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };
@@ -129,7 +129,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       return true;
     }
     if (areSomeDescendantsSelected(node, isChosen)) {
-      return null;
+      return false;
     }
     return false;
   };
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
index e3a217df7c1..b798256a689 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+import { DualListSelector, DualListSelectorTreeItemData } from '@patternfly/react-core';
 
 export const DualListSelectorTreeExample: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+  const [availableOptions, setAvailableOptions] = React.useState<DualListSelectorTreeItemData[]>([
     {
       id: 'F1',
       text: 'Folder 1',
@@ -38,7 +38,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([
+  const [chosenOptions, setChosenOptions] = React.useState<DualListSelectorTreeItemData[]>([
     {
       id: 'CF1',
       text: 'Chosen Folder 1',
@@ -73,7 +73,10 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+  const onListChange = (
+    newAvailableOptions: DualListSelectorTreeItemData[],
+    newChosenOptions: DualListSelectorTreeItemData[]
+  ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };
@@ -84,7 +87,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
       isTree
       availableOptions={availableOptions}
       chosenOptions={chosenOptions}
-      onListChange={onListChange}
+      onListChange={onListChange as any}
       id="dual-list-selector-tree"
     />
   );
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index 8f7f01b7f55..d0a3d248147 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -87,7 +87,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
-        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (
           <button
             type="button"
@@ -166,7 +166,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
   }
 }
 
-export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
+export const MenuToggle = React.forwardRef<MenuToggleElement, MenuToggleProps>((props, ref) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx
index 9cd0431e926..be204b4ec4b 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx
@@ -8,21 +8,21 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 export const ComposableActionsMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -36,7 +36,11 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     };
   }, [isOpen, menuRef]);
 
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: number) => {
+  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
+      return;
+    }
+
     if (selectedItems.includes(itemId)) {
       setSelectedItems(selectedItems.filter(id => id !== itemId));
     } else {
@@ -125,7 +129,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
         trigger={toggle}
         popper={menu}
         isVisible={isOpen}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         popperMatchesTriggerWidth={false}
       />
     </div>
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx
index f672b4abf9a..995a6f0bec1 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx
@@ -21,24 +21,24 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -132,7 +132,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   ];
 
   const createFavorites = (favIds: string[]) => {
-    const favorites = [];
+    const favorites: unknown[] = [];
 
     menuItems.forEach(item => {
       if (item.type === MenuList) {
@@ -219,9 +219,10 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       return;
     }
 
-    const filteredIds = refFullOptions
-      .filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
-      .map(item => item.id);
+    const filteredIds =
+      refFullOptions
+        ?.filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
+        .map(item => item.id) || [];
     setFilteredIds(filteredIds);
   };
 
@@ -275,7 +276,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
         popper={menu}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
       />
     </div>
   );
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
index 7c987dfdf4e..43f8c5651d9 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx
@@ -54,39 +54,37 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     'Azure 2'
   ];
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<ItemData | string>(
-    typeof items[0] === 'string' ? items[0] : items[0].text
-  );
+  const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text);
   const [filteredItems, setFilteredItems] = React.useState<ItemArrayType>(items);
   const [searchInputValue, setSearchInputValue] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuFooterBtnRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuFooterBtnRef.current.contains(event.target as Node)) {
+    if (menuFooterBtnRef.current?.contains(event.target as Node)) {
       if (event.key === 'Tab') {
         if (event.shiftKey) {
           return;
         }
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
-    if (menuRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx
index d2a248710fd..f6f6ea150b5 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx
@@ -24,21 +24,21 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -248,7 +248,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       <Popper
         trigger={toggle}
         popper={menu}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
       />
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx
index 90603c40696..39bcb0381ad 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 // eslint-disable-next-line no-console
-const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string) => console.log('selected', itemId);
+const onSelect = (event?: React.MouseEvent, itemId?: string | number) => console.log('selected', itemId);
 
 interface FlyoutMenuProps {
   children?: React.ReactElement;
@@ -31,24 +31,24 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
 
 export const ComposableFlyout: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -105,7 +105,7 @@ export const ComposableFlyout: React.FunctionComponent = () => {
       <Popper
         trigger={toggle}
         popper={menu}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
       />
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx
index 14b335a9bd8..fbff5395984 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx
@@ -4,8 +4,8 @@ import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Badge } from
 export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = React.useCallback(
     event => {
@@ -50,12 +50,15 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: number | string) => {
-    const item = itemId as number;
-    if (selectedItems.includes(item)) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
+      return;
+    }
+
+    if (selectedItems.includes(itemId)) {
+      setSelectedItems(selectedItems.filter(id => id !== itemId));
     } else {
-      setSelectedItems([...selectedItems, item]);
+      setSelectedItems([...selectedItems, itemId]);
     }
   };
 
@@ -94,5 +97,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper appendTo={toggleRef.current} trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper appendTo={toggleRef.current || undefined} trigger={toggle} popper={menu} isVisible={isOpen} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx
index 28af8656983..dc7b1a804f7 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx
@@ -3,24 +3,24 @@ import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patt
 
 export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -69,7 +69,7 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   );
   return (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
     </div>
   );
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx
index 4424ebe3a2a..0ab1a2d4388 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx
@@ -5,21 +5,21 @@ import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 export const ComposableSimpleSelect: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -58,8 +58,17 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
       {selected}
     </MenuToggle>
   );
+
+  function onSelect(event?: React.MouseEvent, itemId?: string | number) {
+    if (typeof itemId === 'undefined') {
+      return;
+    }
+
+    setSelected(itemId.toString());
+  }
+
   const menu = (
-    <Menu ref={menuRef} id="select-menu" onSelect={(_ev, itemId) => setSelected(itemId.toString())} selected={selected}>
+    <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selected}>
       <MenuContent>
         <MenuList>
           <MenuItem itemId="Option 1">Option 1</MenuItem>
@@ -73,7 +82,7 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
   );
   return (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
     </div>
   );
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx
index a1492b84015..4fb972d6e38 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx
@@ -13,8 +13,8 @@ import {
 export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const menuRef = React.useRef<HTMLDivElement>();
 
   const statusOptions: TreeViewDataItem[] = [
@@ -93,7 +93,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const areSomeDescendantsChecked = (dataItem: TreeViewDataItem) =>
     dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);
   const flattenTree = (tree: TreeViewDataItem[]) => {
-    let result = [];
+    let result: TreeViewDataItem[] = [];
     tree.forEach(item => {
       result.push(item);
       if (item.children) {
@@ -105,6 +105,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
 
   const mapTree = (item: TreeViewDataItem) => {
     const hasCheck = areAllDescendantsChecked(item);
+    item.checkProps = item.checkProps || {};
     // Reset checked properties to be updated
     item.checkProps.checked = false;
 
@@ -143,7 +144,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const onCheck = (evt: React.ChangeEvent, treeViewItem: TreeViewDataItem, treeType: string) => {
     const checked = (evt.target as HTMLInputElement).checked;
 
-    let options = [];
+    let options: TreeViewDataItem[] = [];
     switch (treeType) {
       case 'status':
         options = statusOptions;
@@ -169,21 +170,21 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       // The escape key when pressed while inside the menu should close the menu and refocus the toggle
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
 
       // The tab key when pressed while inside the menu and on the contained last tree view should close the menu and refocus the toggle
       // Shift tab should keep the default behavior to return to a previous tree view
       if (event.key === 'Tab' && !event.shiftKey) {
-        const treeList = menuRef.current.querySelectorAll('.pf-c-tree-view');
+        const treeList = menuRef.current?.querySelectorAll('.pf-c-tree-view') || [];
         if (treeList[treeList.length - 1].contains(event.target as Node)) {
           event.preventDefault();
           setIsOpen(!isOpen);
-          toggleRef.current.focus();
+          toggleRef.current?.focus();
         }
       }
     }
@@ -191,7 +192,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
 
   // Controls that a click outside the menu while the menu is open should close the menu
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -266,7 +267,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
         trigger={toggle}
         popper={menu}
         isVisible={isOpen}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         popperMatchesTriggerWidth={false}
       />
     </div>
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx
index cb143a1b531..858860c527c 100644
--- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx
+++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx
@@ -55,7 +55,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
 
   const focusOnInput = () => menuToggleRef.current?.querySelector('input')?.focus();
 
-  const onMenuSelect = (_event: React.MouseEvent<Element, MouseEvent>, itemId: string | number) => {
+  const onMenuSelect = (event?: React.MouseEvent, itemId?: string | number) => {
     if (itemId) {
       setInputValue(itemId.toString());
       setIsSelected(true);
@@ -124,7 +124,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   };
 
   // Close the menu when a click occurs outside of the menu toggle content
-  const onDocumentClick = (event: MouseEvent) => {
+  const onDocumentClick = (event?: MouseEvent) => {
     if (!menuToggleRef.current?.contains(event?.target as HTMLElement)) {
       setIsMenuOpen(false);
     }
diff --git a/packages/react-table/src/components/Table/RowWrapper.tsx b/packages/react-table/src/components/Table/RowWrapper.tsx
index 4f214051fc3..427e0fe049c 100644
--- a/packages/react-table/src/components/Table/RowWrapper.tsx
+++ b/packages/react-table/src/components/Table/RowWrapper.tsx
@@ -12,6 +12,7 @@ export interface RowWrapperRow {
 }
 
 export interface RowWrapperProps extends OUIAProps {
+  children?: React.ReactNode;
   trRef?: React.Ref<any> | Function;
   className?: string;
   onScroll?: React.UIEventHandler;
diff --git a/packages/react-topology/src/components/layers/LayerContainer.tsx b/packages/react-topology/src/components/layers/LayerContainer.tsx
index 494d60f0b34..19399e4959d 100644
--- a/packages/react-topology/src/components/layers/LayerContainer.tsx
+++ b/packages/react-topology/src/components/layers/LayerContainer.tsx
@@ -8,7 +8,7 @@ interface LayerContainerProps {
   children: React.ReactNode;
 }
 
-const LayerContainer: React.RefForwardingComponent<SVGGElement, LayerContainerProps> = ({ children }, ref) => {
+const LayerContainer: React.ForwardRefRenderFunction<SVGGElement, LayerContainerProps> = ({ children }, ref) => {
   // accumulate parent positions
   const element = React.useContext(ElementContext);
   let p = element;
diff --git a/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx b/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx
index 570f2e18079..31026a53676 100644
--- a/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx
+++ b/packages/react-topology/src/pipelines/components/nodes/TaskNode.tsx
@@ -25,6 +25,7 @@ import LabelIcon from '../../../components/nodes/labels/LabelIcon';
 const STATUS_ICON_SIZE = 16;
 
 export type TaskNodeProps = {
+  children?: React.ReactNode;
   element: Node;
   className?: string;
   paddingX?: number;