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

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.15","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.17","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.15","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.17","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.15","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.17","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.16",
+  "version": "6.2.0-prerelease.18",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "fe3fa3883554e1e1ceb0618e9c4e0b6072d29d75"
+  "gitHead": "e2c34186b346a3b2c5d5621227e475a7ff3e4076"
 }

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import { AlertIcon } from './AlertIcon';
@@ -124,7 +124,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const titleRef = React.useRef(null);
   const TitleComponent = component as any;
 
-  const divRef = React.useRef<HTMLDivElement>();
+  const divRef = React.useRef<HTMLDivElement>(undefined);
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   React.useEffect(() => {
     if (!titleRef.current || !truncateTitle) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 
 import { Alert, AlertVariant } from '../Alert';
 import { AlertContext } from '../AlertContext';

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

@@ -76,7 +76,7 @@ test('Renders with passed aria-label', () => {
 });
 
 test('BackToTop can be accessed via passed innerRef', () => {
-  const testRef: RefObject<HTMLElement> = React.createRef();
+  const testRef: RefObject<HTMLElement | null> = React.createRef();
   render(<BackToTop innerRef={testRef} isAlwaysVisible />);
   global.scrollTo = jest.fn();
   testRef.current?.click();

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -48,7 +48,7 @@ const dropdownItems = [
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const badgeToggleRef = React.useRef<HTMLButtonElement>();
+  const badgeToggleRef = React.useRef<HTMLButtonElement>(undefined);
 
   const onToggle = () => setIsOpen(!isOpen);
 

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, type JSX } from 'react';
 import { TextInput } from '../TextInput';
 import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
@@ -169,7 +169,7 @@ export const CalendarMonth = ({
   const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
 
   const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
-  const focusRef = React.useRef<HTMLButtonElement>();
+  const focusRef = React.useRef<HTMLButtonElement>(undefined);
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
 

package/src/components/Card/Card.tsx

@@ -3,6 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
+import type { JSX } from 'react';
+
 export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** Content rendered inside the Card */
   children?: React.ReactNode;

package/src/components/Card/CardBody.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
+import type { JSX } from 'react';
+
 export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Body */
   children?: React.ReactNode;

package/src/components/Card/CardFooter.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { css } from '@patternfly/react-styles';
 
+import type { JSX } from 'react';
+
 export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Footer */
   children?: React.ReactNode;

package/src/components/Card/CardTitle.tsx

@@ -3,6 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
 
+import type { JSX } from 'react';
+
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
   children?: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardBody } from '../CardBody';
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardFooter } from '../CardFooter';
 

package/src/components/Checkbox/Checkbox.tsx

@@ -125,7 +125,9 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         aria-label={ariaLabel}
         disabled={isDisabled}
         required={isRequired}
-        ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+        ref={(elem) => {
+          elem && (elem.indeterminate = isChecked === null);
+        }}
         {...checkedProps}
         {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
       />

package/src/components/DataList/DataList.tsx

@@ -38,7 +38,7 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
   /** @hide custom ref of the DataList */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
 interface DataListContextProps {

package/src/components/DatePicker/DatePicker.tsx

@@ -133,9 +133,9 @@ const DatePickerBase = (
   const [textInputFocused, setTextInputFocused] = React.useState(false);
   const widthChars = React.useMemo(() => Math.max(dateFormat(new Date()).length, placeholder.length), [dateFormat]);
   const style = { [cssFormControlWidthChars.name]: widthChars, ...styleProps };
-  const buttonRef = React.useRef<HTMLButtonElement>();
-  const datePickerWrapperRef = React.useRef<HTMLDivElement>();
-  const triggerRef = React.useRef<HTMLDivElement>();
+  const buttonRef = React.useRef<HTMLButtonElement>(undefined);
+  const datePickerWrapperRef = React.useRef<HTMLDivElement>(undefined);
+  const triggerRef = React.useRef<HTMLDivElement>(undefined);
   const dateIsRequired = requiredDateOptions?.isRequired || false;
   const emptyDateText = requiredDateOptions?.emptyDateText || 'Date cannot be blank';
 

package/src/components/Drawer/Drawer.tsx

@@ -30,8 +30,8 @@ export interface DrawerContextProps {
   isStatic: boolean;
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   position?: string;
-  drawerRef?: React.RefObject<HTMLDivElement>;
-  drawerContentRef?: React.RefObject<HTMLDivElement>;
+  drawerRef?: React.RefObject<HTMLDivElement | null>;
+  drawerContentRef?: React.RefObject<HTMLDivElement | null>;
   isInline: boolean;
 }
 
@@ -55,8 +55,8 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   onExpand = () => {},
   ...props
 }: DrawerProps) => {
-  const drawerRef = React.useRef<HTMLDivElement>();
-  const drawerContentRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
+  const drawerContentRef = React.useRef<HTMLDivElement>(undefined);
 
   return (
     <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -79,8 +79,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   focusTrap,
   ...props
 }: DrawerPanelContentProps) => {
-  const panel = React.useRef<HTMLDivElement>();
-  const splitterRef = React.useRef<HTMLDivElement>();
+  const panel = React.useRef<HTMLDivElement>(undefined);
+  const splitterRef = React.useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = React.useState(0);
   const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } =
     React.useContext(DrawerContext);

package/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx

@@ -13,7 +13,7 @@ import {
 
 export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasic.tsx

@@ -14,7 +14,7 @@ import {
 
 export const DrawerBasic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasicInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBreakpoint.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBreakpoint: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -14,7 +14,7 @@ import {
 
 export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Dropdown/Dropdown.tsx

@@ -27,7 +27,7 @@ export interface DropdownToggleProps {
   /**  Dropdown toggle node. */
   toggleNode: React.ReactNode;
   /** Reference to the toggle. */
-  toggleRef?: React.RefObject<HTMLButtonElement>;
+  toggleRef?: React.RefObject<HTMLButtonElement | null>;
 }
 
 /**
@@ -103,15 +103,15 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: DropdownProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const localToggleRef = React.useRef<HTMLButtonElement>();
+  const localMenuRef = React.useRef<HTMLDivElement>(undefined);
+  const localToggleRef = React.useRef<HTMLButtonElement>(undefined);
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
-  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/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -11,7 +11,7 @@ export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HT
   /** Additional classes added to the wrapper. */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** Accessible label for the dual list selector controls wrapper. */
   'aria-label'?: string;
 }

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -10,7 +10,7 @@ export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElem
   /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
 export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps> = ({

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -24,7 +24,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLLIElement>;
+  innerRef?: React.RefObject<HTMLLIElement | null>;
   /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
   /** Accessible label for the draggable button on draggable list items. */

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -15,7 +15,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -138,7 +138,9 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => {
+                  elem && (elem.indeterminate = isChecked === null);
+                }}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}
@@ -148,7 +150,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             <span className={css(styles.dualListSelectorItemText)}>{text}</span>
             {hasBadge && children && (
               <span className={css(styles.dualListSelectorItemCount)}>
-                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement<any>).props.data).length}</Badge>
               </span>
             )}
           </span>

package/src/components/Form/FormGroup.tsx

@@ -14,7 +14,7 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   /** Additional label information displayed after the label. */
   labelInfo?: React.ReactNode;
   /** A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component. */
-  labelHelp?: React.ReactElement;
+  labelHelp?: React.ReactElement<any>;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
   /** Sets the FormGroup isInline. */

package/src/components/JumpLinks/JumpLinks.tsx

@@ -21,7 +21,7 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
   /** Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying. */
-  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement>;
+  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement | null>;
   /** Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying. */
   scrollableSelector?: string;
   /** The index of the child Jump link to make active. */
@@ -102,7 +102,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   const [isExpanded, setIsExpanded] = React.useState(isExpandedProp);
   // Boolean to disable scroll listener from overriding active state of clicked jumplink
   const isLinkClicked = React.useRef(false);
-  const navRef = React.useRef<HTMLElement>();
+  const navRef = React.useRef<HTMLElement>(undefined);
 
   let scrollableElement: HTMLElement;
 
@@ -113,7 +113,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       } else if (typeof scrollableRef === 'function') {
         return scrollableRef();
       }
-      return (scrollableRef as React.RefObject<HTMLElement>).current;
+      return (scrollableRef as React.RefObject<HTMLElement | null>).current;
     } else if (scrollableSelector) {
       return document.querySelector(scrollableSelector) as HTMLElement;
     }

package/src/components/Label/Label.tsx

@@ -127,8 +127,8 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 }: LabelProps) => {
   const [isEditableActive, setIsEditableActive] = useState<boolean>(false);
   const [currValue, setCurrValue] = useState(children);
-  const editableButtonRef = React.useRef<HTMLButtonElement>();
-  const editableInputRef = React.useRef<HTMLInputElement>();
+  const editableButtonRef = React.useRef<HTMLButtonElement>(undefined);
+  const editableInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const isOverflowLabel = variant === 'overflow';
   const isAddLabel = variant === 'add';
@@ -245,7 +245,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const closeButton = <span className={css(styles.labelActions)}>{closeBtn || defaultCloseButton}</span>;
   const textRef = React.createRef<any>();
   // ref to apply tooltip when rendered is used
-  const componentRef = React.useRef();
+  const componentRef = React.useRef(undefined);
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   useIsomorphicLayoutEffect(() => {
     const currTextRef = isEditable ? editableButtonRef : textRef;

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
-  const toggleRef = React.useRef<HTMLDivElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const containerRef = React.useRef<HTMLDivElement>(undefined);
 
   const [idIndex, setIdIndex] = React.useState<number>(3);
   const [isOpen, setIsOpen] = React.useState<boolean>(false);

package/src/components/List/List.tsx

@@ -54,7 +54,7 @@ export const List: React.FunctionComponent<ListProps> = ({
 }: ListProps) =>
   component === ListComponent.ol ? (
     <ol
-      ref={ref as React.LegacyRef<HTMLOListElement>}
+      ref={ref as React.Ref<HTMLOListElement>}
       type={type}
       {...(isPlain && { role: 'list' })}
       {...props}
@@ -71,7 +71,7 @@ export const List: React.FunctionComponent<ListProps> = ({
     </ol>
   ) : (
     <ul
-      ref={ref as React.LegacyRef<HTMLUListElement>}
+      ref={ref as React.Ref<HTMLUListElement>}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(

package/src/components/Menu/Menu.tsx

@@ -90,7 +90,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
   constructor(props: MenuProps) {
     super(props);
     if (props.innerRef) {
-      this.menuRef = props.innerRef as React.RefObject<HTMLDivElement>;
+      this.menuRef = props.innerRef as React.RefObject<HTMLDivElement | null>;
     }
   }
 
@@ -290,7 +290,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       >
         {isRootMenu && (
           <KeyboardHandler
-            containerRef={(this.menuRef as React.RefObject<HTMLDivElement>) || null}
+            containerRef={(this.menuRef as React.RefObject<HTMLDivElement | null>) || null}
             additionalKeyHandler={this.handleExtraKeys}
             createNavigableElements={this.createNavigableElements}
             isActiveElement={(element: Element) =>

package/src/components/Menu/MenuContent.tsx

@@ -57,7 +57,9 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
         <div
           {...rest}
           className={css(styles.menuContent, props.className)}
-          ref={(el) => refCallback(el, menuId, onGetMenuHeight)}
+          ref={(el) => {
+            refCallback(el, menuId, onGetMenuHeight);
+          }}
           style={
             {
               ...(menuHeight && { [cssHeight.name]: menuHeight }),