@patternfly/react-core 6.2.0-prerelease.16 → 6.2.0-prerelease.18

package/src/components/Menu/MenuItem.tsx

@@ -68,7 +68,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   /** Flag indicating the item is in danger state */
   isDanger?: boolean;
   /** Flyout menu. Should not be used if the to prop is defined. */
-  flyoutMenu?: React.ReactElement;
+  flyoutMenu?: React.ReactElement<any>;
   /** Callback function when mouse leaves trigger */
   onShowFlyout?: (event?: any) => void;
   /** Drilldown menu of the item. Should be a Menu or DrilldownMenu type. */
@@ -146,7 +146,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const flyoutContext = React.useContext(FlyoutContext);
   const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
-  const ref = React.useRef<HTMLLIElement>();
+  const ref = React.useRef<HTMLLIElement>(undefined);
   const flyoutVisible = ref === flyoutRef;
 
   const hasFlyout = flyoutMenu !== undefined;
@@ -259,7 +259,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           menuId,
           typeof drilldownMenu === 'function'
             ? (drilldownMenu() as any).props.id
-            : (drilldownMenu as React.ReactElement).props.id,
+            : (drilldownMenu as React.ReactElement<any>).props.id,
           itemId
         );
     } else {

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import {
   Badge,
   Breadcrumb,

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -90,7 +90,9 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
           name={id}
           type="checkbox"
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+          ref={(elem) => {
+            elem && (elem.indeterminate = isChecked === null);
+          }}
           aria-invalid={!isValid}
           disabled={isDisabled}
           {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}

package/src/components/Modal/Modal.tsx

@@ -183,7 +183,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         {...props}
       />,
       this.getElement(appendTo)
-    ) as React.ReactElement;
+    ) as React.ReactElement<any>;
   }
 }
 

package/src/components/Nav/Nav.tsx

@@ -57,7 +57,7 @@ export interface NavContextProps {
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
-  navRef?: React.RefObject<HTMLElement>;
+  navRef?: React.RefObject<HTMLElement | null>;
 }
 export const navContextDefaults = {};
 export const NavContext = React.createContext<NavContextProps>(navContextDefaults);

package/src/components/Nav/NavItem.tsx

@@ -31,7 +31,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   /** Component used to render NavItems if  React.isValidElement(children) is false */
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
-  flyout?: React.ReactElement;
+  flyout?: React.ReactElement<any>;
   /** Callback when flyout is opened or closed */
   onShowFlyout?: () => void;
   /** z-index of the flyout nav item */
@@ -67,9 +67,9 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   const { isSidebarOpen } = React.useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
-  const ref = React.useRef<HTMLLIElement>();
+  const ref = React.useRef<HTMLLIElement>(undefined);
   const flyoutVisible = ref === flyoutRef;
-  const popperRef = React.useRef<HTMLDivElement>();
+  const popperRef = React.useRef<HTMLDivElement>(undefined);
   const hasFlyout = flyout !== undefined;
   const Component = hasFlyout ? 'button' : (component as any);
 
@@ -200,7 +200,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     );
   };
 
-  const renderClonedChild = (context: any, child: React.ReactElement): React.ReactNode =>
+  const renderClonedChild = (context: any, child: React.ReactElement<any>): React.ReactNode =>
     React.cloneElement(child, {
       onClick: (e: MouseEvent) => context.onSelect(e, groupId, itemId, to, preventDefault, onClick),
       'aria-current': isActive ? 'page' : null,
@@ -256,7 +256,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         <NavContext.Consumer>
           {(context) =>
             React.isValidElement(children)
-              ? renderClonedChild(context, children as React.ReactElement)
+              ? renderClonedChild(context, children as React.ReactElement<any>)
               : renderDefaultLink(context)
           }
         </NavContext.Consumer>

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { Nav, MenuContent, MenuItem, MenuList, DrilldownMenu, Menu } from '@patternfly/react-core';
 

package/src/components/Page/Page.tsx

@@ -11,6 +11,8 @@ import { getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
 import { PageContextProvider } from './PageContext';
 import { PageBody } from './PageBody';
 
+import type { JSX } from 'react';
+
 export enum PageLayouts {
   vertical = 'vertical',
   horizontal = 'horizontal'
@@ -39,7 +41,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback when notification drawer panel is finished expanding. */
   onNotificationDrawerExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   /** Skip to content component for the page */
-  skipToContent?: React.ReactElement;
+  skipToContent?: React.ReactElement<any>;
   /** Sets the value for role on the <main> element */
   role?: string;
   /** an id to use for the [role="main"] element */

package/src/components/Page/PageSection.tsx

@@ -5,6 +5,8 @@ import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 import { PageBody } from './PageBody';
 
+import type { JSX } from 'react';
+
 export enum PageSectionVariants {
   default = 'default',
   secondary = 'secondary'

package/src/components/Pagination/Pagination.tsx

@@ -160,7 +160,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
    * itemCount, itemsTitle, and/or ofWord props.
    */
-  toggleTemplate?: ((props: PaginationToggleTemplateProps) => React.ReactElement) | string;
+  toggleTemplate?: ((props: PaginationToggleTemplateProps) => React.ReactElement<any>) | string;
   /** Position where pagination is rendered. */
   variant?: 'top' | 'bottom' | PaginationVariant;
   /** Id to ideintify widget on page. */
@@ -304,7 +304,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
             fillTemplate(toggleTemplate, PaginationToggleTemplateProps)}
           {toggleTemplate &&
             typeof toggleTemplate !== 'string' &&
-            (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement)(
+            (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement<any>)(
               PaginationToggleTemplateProps
             )}
           {!toggleTemplate && (

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -48,13 +48,13 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
    * itemCount, and/or itemsTitle props.
    */
-  toggleTemplate: ((props: PaginationToggleTemplateProps) => React.ReactElement) | string;
+  toggleTemplate: ((props: PaginationToggleTemplateProps) => React.ReactElement<any>) | string;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
   /** React ref for the container to append the options menu to. This is a static ref provided by the main pagination component. */
-  containerRef?: React.RefObject<HTMLDivElement>;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
   /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** Flag indicating if scroll on focus of the first menu item should occur. */
@@ -193,7 +193,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
           fillTemplate(toggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })}
         {toggleTemplate &&
           typeof toggleTemplate !== 'string' &&
-          (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement)({
+          (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement<any>)({
             firstIndex,
             lastIndex,
             ofWord,

package/src/components/Panel/__tests__/Panel.test.tsx

@@ -58,7 +58,7 @@ test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable i
 
 test('Renders with ref', async () => {
   const user = userEvent.setup();
-  const panelRef: React.RefObject<HTMLDivElement> = React.createRef();
+  const panelRef: React.RefObject<HTMLDivElement | null> = React.createRef();
 
   const BasicPanel = () => {
     const [lastClickWasInPanel, setLastClickWasInPanel] = React.useState(false);

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -70,7 +70,7 @@ export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
   const Component = popoverRender !== undefined ? 'button' : 'div';
-  const stepRef = React.useRef();
+  const stepRef = React.useRef(undefined);
 
   if (props.id === undefined || titleId === undefined) {
     /* eslint-disable no-console */

package/src/components/SearchInput/SearchInput.tsx

@@ -140,7 +140,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onSearch,
   onClear,
   onToggleAdvancedSearch,
-  isAdvancedSearchOpen,
+  isAdvancedSearchOpen = false,
   resultsCount,
   onNextClick,
   onPreviousClick,

package/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -105,6 +105,8 @@ describe('SearchInput', () => {
         onClear={props.onClear}
       />
     );
+    const expandButton = screen.getByRole('button', { name: 'Open advanced search' });
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
 
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
@@ -139,7 +141,12 @@ describe('SearchInput', () => {
 
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
-    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    const expandButton = screen.getByRole('button', { name: 'Open advanced search' });
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(expandButton);
+    expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+
     expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'));
 
     expect(props.onSearch).toHaveBeenCalled();
@@ -149,7 +156,14 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo="inline', async () => {
     const user = userEvent.setup();
 
-    render(<SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />);
+    render(
+      <SearchInput
+        data-testid="test-id"
+        attributes={[{ attr: 'test', display: 'test' }]}
+        advancedSearchDelimiter=":"
+        appendTo="inline"
+      />
+    );
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
 
@@ -160,7 +174,12 @@ describe('SearchInput', () => {
     const user = userEvent.setup();
 
     render(
-      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
+      <SearchInput
+        data-testid="test-id"
+        attributes={[{ attr: 'test', display: 'test' }]}
+        advancedSearchDelimiter=":"
+        appendTo={document.body}
+      />
     );
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -138,13 +138,6 @@ exports[`SearchInput advanced search 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class=""
-      data-popper-escaped="true"
-      data-popper-placement="bottom-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -293,7 +286,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
       <div
         class="pf-v6-c-panel pf-m-raised"
@@ -621,13 +614,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class=""
-      data-popper-escaped="true"
-      data-popper-placement="bottom-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-    />
   </div>
 </DocumentFragment>
 `;

package/src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ export interface SelectToggleProps {
   /**  Select toggle node. */
   toggleNode: React.ReactNode;
   /** Reference to the toggle. */
-  toggleRef?: React.RefObject<HTMLButtonElement>;
+  toggleRef?: React.RefObject<HTMLButtonElement | null>;
 }
 
 /**
@@ -113,14 +113,14 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: SelectProps & OUIAProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const localToggleRef = React.useRef<HTMLButtonElement>();
+  const localMenuRef = React.useRef<HTMLDivElement>(undefined);
+  const localToggleRef = React.useRef<HTMLButtonElement>(undefined);
 
-  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
     typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
       ? localToggleRef
-      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement | null>);
 
   const prevIsOpen = React.useRef<boolean>(isOpen);
   React.useEffect(() => {

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -31,7 +31,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -30,7 +30,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const [placeholder, setPlaceholder] = React.useState('0 items selected');
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -32,7 +32,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const CREATE_NEW = 'create';
 

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -30,7 +30,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -30,7 +30,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const CREATE_NEW = 'create';
 

package/src/components/SimpleList/SimpleList.tsx

@@ -11,7 +11,7 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   className?: string;
   /** Callback when an item is selected */
   onSelect?: (
-    ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    ref: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     props: SimpleListItemProps
   ) => void;
   /** Indicates whether component is controlled by its internal state */
@@ -22,13 +22,13 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
 
 export interface SimpleListState {
   /** Ref of the current SimpleListItem */
-  currentRef: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>;
+  currentRef: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>;
 }
 
 interface SimpleListContextProps {
-  currentRef: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>;
+  currentRef: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>;
   updateCurrentRef: (
-    id: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    id: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     props: SimpleListItemProps
   ) => void;
   isControlled: boolean;
@@ -39,7 +39,7 @@ export const SimpleListContext = React.createContext<Partial<SimpleListContextPr
 class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
   static displayName = 'SimpleList';
   state = {
-    currentRef: null as React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>
+    currentRef: null as React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>
   };
 
   static defaultProps: SimpleListProps = {
@@ -49,7 +49,7 @@ class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
   };
 
   handleCurrentUpdate = (
-    newCurrentRef: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    newCurrentRef: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     itemProps: SimpleListItemProps
   ) => {
     this.setState({ currentRef: newCurrentRef });
@@ -63,7 +63,7 @@ class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
 
     let isGrouped = false;
     if (children) {
-      isGrouped = (React.Children.toArray(children)[0] as React.ReactElement).type === SimpleListGroup;
+      isGrouped = (React.Children.toArray(children)[0] as React.ReactElement<any>).type === SimpleListGroup;
     }
 
     return (

package/src/components/SimpleList/examples/SimpleListUncontrolled.tsx

@@ -5,7 +5,7 @@ export const SimpleListUncontrolled: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
   const onSelect = (
-    selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    selectedItem: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     selectedItemProps: SimpleListItemProps
   ) => {
     setActiveItem(selectedItemProps.itemId as number);

package/src/components/Slider/Slider.tsx

@@ -117,8 +117,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   'aria-labelledby': ariaLabelledby,
   ...props
 }: SliderProps) => {
-  const sliderRailRef = React.useRef<HTMLDivElement>();
-  const thumbRef = React.useRef<HTMLDivElement>();
+  const sliderRailRef = React.useRef<HTMLDivElement>(undefined);
+  const thumbRef = React.useRef<HTMLDivElement>(undefined);
 
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);

package/src/components/Tabs/OverflowTab.tsx

@@ -38,9 +38,9 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: OverflowTabProps) => {
-  const menuRef = React.useRef<HTMLDivElement>();
-  const overflowTabRef = React.useRef<HTMLButtonElement>();
-  const overflowLIRef = React.useRef<HTMLLIElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const overflowTabRef = React.useRef<HTMLButtonElement>(undefined);
+  const overflowLIRef = React.useRef<HTMLLIElement>(undefined);
 
   const [isExpanded, setIsExpanded] = React.useState(false);
 

package/src/components/Tabs/examples/TabsDynamic.tsx

@@ -5,7 +5,7 @@ export const TabsDynamic: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
   const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
   const [newTabNumber, setNewTabNumber] = React.useState<number>(4);
-  const tabComponentRef = React.useRef<any>();
+  const tabComponentRef = React.useRef<any>(undefined);
   const firstMount = React.useRef(true);
 
   const onClose = (event: any, tabIndex: string | number) => {

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -6,7 +6,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 export const TabsHelpAndClose: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
   const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
-  const tabComponentRef = React.useRef<any>();
+  const tabComponentRef = React.useRef<any>(undefined);
   const firstMount = React.useRef(true);
 
   const onClose = (event: any, tabIndex: string | number) => {

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -149,7 +149,7 @@ test('Does not throw console error when aria-label is given but no id', () => {
 });
 
 test('TextArea can be accessed via passed ref', () => {
-  const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
+  const testRef: React.RefObject<HTMLTextAreaElement | null> = React.createRef();
   render(<TextArea ref={testRef} />);
   global.scrollTo = jest.fn();
   testRef.current?.focus();

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -15,7 +15,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   /** Flag indicating the expandable content is expanded */
   isExpanded?: boolean;
   /** Expandable content reference for passing to data toolbar children */
-  expandableContentRef?: RefObject<HTMLDivElement>;
+  expandableContentRef?: RefObject<HTMLDivElement | null>;
   /** Label container reference for passing to data toolbar children */
   labelContainerRef?: RefObject<any>;
   /** optional callback for clearing all filters in the toolbar */

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -39,7 +39,7 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   /** Flag to show the toolbar item */
   showToolbarItem?: boolean;
   /** Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
-  expandableLabelContainerRef?: React.RefObject<HTMLDivElement>;
+  expandableLabelContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 interface ToolbarFilterState {

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -8,7 +8,7 @@ import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_brea
 export interface ToolbarContextProps {
   isExpanded: boolean;
   toggleIsExpanded: () => void;
-  labelGroupContentRef: RefObject<HTMLDivElement>;
+  labelGroupContentRef: RefObject<HTMLDivElement | null>;
   updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
   numberOfFilters: number;
   clearAllFilters?: () => void;
@@ -28,7 +28,7 @@ export const ToolbarContext = React.createContext<ToolbarContextProps>({
 });
 
 interface ToolbarContentContextProps {
-  expandableContentRef: RefObject<HTMLDivElement>;
+  expandableContentRef: RefObject<HTMLDivElement | null>;
   expandableContentId: string;
   labelContainerRef: RefObject<any>;
   isExpanded?: boolean;

package/src/components/TreeView/TreeViewListItem.tsx

@@ -151,7 +151,9 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         type="checkbox"
         onChange={(evt) => onCheck && onCheck(evt, itemData, parentItem)}
         onClick={(evt) => evt.stopPropagation()}
-        ref={(elem) => elem && (elem.indeterminate = checkProps.checked === null)}
+        ref={(elem) => {
+          elem && (elem.indeterminate = checkProps.checked === null);
+        }}
         {...checkProps}
         checked={isCheckboxChecked}
         id={randomId}
@@ -185,7 +187,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       {hasBadge && children && (
         <span className={css(styles.treeViewNodeCount)}>
           <Badge {...badgeProps}>
-            {customBadgeContent ? customBadgeContent : (children as React.ReactElement).props.data.length}
+            {customBadgeContent ? customBadgeContent : (children as React.ReactElement<any>).props.data.length}
           </Badge>
         </span>
       )}

package/src/components/Wizard/WizardContext.tsx

@@ -9,7 +9,7 @@ export interface WizardContextProps {
   /** Current step */
   activeStep: WizardStepType;
   /** Footer element */
-  footer: React.ReactElement;
+  footer: React.ReactElement<any>;
   /** Close the wizard */
   close: () => void;
   /** Navigate to the next step */
@@ -23,7 +23,7 @@ export interface WizardContextProps {
   /** Navigate to step by index */
   goToStepByIndex: (index: number) => void;
   /** Update the footer with any react element */
-  setFooter: (footer: React.ReactElement | Partial<WizardFooterProps>) => void;
+  setFooter: (footer: React.ReactElement<any> | Partial<WizardFooterProps>) => void;
   /** Get step by ID */
   getStep: (stepId: number | string) => WizardStepType;
   /** Set step by ID */
@@ -33,7 +33,7 @@ export interface WizardContextProps {
    */
   shouldFocusContent: boolean;
   /** Ref for main wizard content element. */
-  mainWrapperRef: React.RefObject<HTMLElement>;
+  mainWrapperRef: React.RefObject<HTMLElement | null>;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -42,7 +42,7 @@ export interface WizardContextProviderProps {
   steps: WizardStepType[];
   activeStepIndex: number;
   footer: WizardFooterType;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   onNext(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
   onBack(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
   onClose?(event: React.MouseEvent<HTMLButtonElement>): void;
@@ -54,7 +54,7 @@ export interface WizardContextProviderProps {
     index: number
   ): void;
   shouldFocusContent: boolean;
-  mainWrapperRef: React.RefObject<HTMLElement>;
+  mainWrapperRef: React.RefObject<HTMLElement | null>;
 }
 
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({

package/src/components/Wizard/WizardStep.tsx

@@ -27,7 +27,7 @@ export interface WizardStepProps {
   /** Replaces the step's navigation item or its properties. */
   navItem?: WizardNavItemType;
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
-  footer?: React.ReactElement | Partial<WizardFooterProps>;
+  footer?: React.ReactElement<any> | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
   status?: 'default' | 'error' | 'success';
   /** Flag to determine whether parent steps can expand or not. Defaults to false. */

package/src/components/Wizard/WizardToggle.tsx

@@ -23,7 +23,7 @@ export interface WizardToggleProps {
   /** The current step */
   activeStep: WizardStepType;
   /** Wizard footer */
-  footer: React.ReactElement;
+  footer: React.ReactElement<any>;
   /** Wizard navigation */
   nav: React.ReactElement<WizardNavProps>;
   /** The expandable dropdown button's aria-label */