chore(React19): ran upgrade eslint and codemods

packages/react-charts/src/victory/components/Chart/Chart.tsx

@@ -71,7 +71,7 @@ export interface ChartProps extends VictoryChartProps {
    * will be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width.
    * All of these props on Background should take prececence over what VictoryChart is trying to set.
    */
-  backgroundComponent?: React.ReactElement;
+  backgroundComponent?: React.ReactElement<any>;
   /**
    * The children to render with the chart
    */

packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx

@@ -254,7 +254,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * supplied component, or modified or ignored within the custom component itself. If a maxComponent is not provided,
    * ChartBoxPlot will use its default Whisker component.
    */
-  maxComponent?: React.ReactElement;
+  maxComponent?: React.ReactElement<any>;
   /**
    * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum
    * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain
@@ -278,7 +278,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * custom component itself. If maxLabelComponent is omitted, a new ChartLabel will be created with props described
    * above.
    */
-  maxLabelComponent?: React.ReactElement;
+  maxLabelComponent?: React.ReactElement<any>;
   /**
    * The maxLabels prop defines the labels that will appear above each point. This prop should be given as a boolean,
    * an array or as a function of the props corresponding to that label. When given as a boolean value, the max value
@@ -314,7 +314,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * props may be overridden by passing in props to the supplied component, or modified or ignored within the custom
    * component itself. If a medianComponent is not provided, ChartBoxPlot will use its default Line component.
    */
-  medianComponent?: React.ReactElement;
+  medianComponent?: React.ReactElement<any>;
   /**
    * The medianLabelComponent prop takes a component instance which will be used to render the label corresponding to
    * the median value for each box. The new element created from the passed medianLabelComponent will be supplied with
@@ -323,7 +323,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * custom component itself. If medianLabelComponent is omitted, a new ChartLabel will be created with props
    * described above.
    */
-  medianLabelComponent?: React.ReactElement;
+  medianLabelComponent?: React.ReactElement<any>;
   /**
    * The medianLabels prop defines the labels that will appear above each point. This prop should be given as a boolean,
    * an array or as a function of the props corresponding to that label. When given as a boolean value, the median value
@@ -362,7 +362,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * supplied component, or modified or ignored within the custom component itself. If a minComponent is not provided,
    * ChartBoxPlot will use its default Whisker component.
    */
-  minComponent?: React.ReactElement;
+  minComponent?: React.ReactElement<any>;
   /**
    * The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum
    * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain
@@ -386,7 +386,7 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * custom component itself. If minLabelComponent is omitted, a new ChartLabel will be created with props described
    * above.
    */
-  minLabelComponent?: React.ReactElement;
+  minLabelComponent?: React.ReactElement<any>;
   /**
    * The minLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, an
    * array or as a function of the props corresponding to that label. When given as a boolean value, the min value of
@@ -453,15 +453,15 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * may be overridden by passing in props to the supplied component, or modified or ignored within the custom component
    * itself. If a q1Component is not provided, ChartBoxPlot will use its default Box component.
    */
-  q1Component?: React.ReactElement;
+  q1Component?: React.ReactElement<any>;
   /**
    * The q1LabelComponent prop takes a component instance which will be used to render the label corresponding to the q1
    * value for each box. The new element created from the passed q1LabelComponent will be supplied with the following
    * props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any of these
    * props may be overridden by passing in props to the supplied component, or modified or ignored within the custom
    * component itself. If q1LabelComponent is omitted, a new ChartLabel will be created with props described above.
    */
-  q1LabelComponent?: React.ReactElement;
+  q1LabelComponent?: React.ReactElement<any>;
   /**
    * The q1Labels prop defines the labels that will appear above each point. This prop should be given as a boolean, an
    * array or as a function of the props corresponding to that label. When given as a boolean value, the q1 value of
@@ -498,15 +498,15 @@ export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
    * may be overridden by passing in props to the supplied component, or modified or ignored within the custom component
    * itself. If a q3Component is not provided, ChartBoxPlot will use its default Box component.
    */
-  q3Component?: React.ReactElement;
+  q3Component?: React.ReactElement<any>;
   /**
    * The q3LabelComponent prop takes a component instance which will be used to render the label corresponding to the q3
    * value for each box. The new element created from the passed q3LabelComponent will be supplied with the following
    * props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any of these
    * props may be overridden by passing in props to the supplied component, or modified or ignored within the custom
    * component itself. If q3LabelComponent is omitted, a new ChartLabel will be created with props described above.
    */
-  q3LabelComponent?: React.ReactElement;
+  q3LabelComponent?: React.ReactElement<any>;
   /**
    * The q3Labels prop defines the labels that will appear above each point. This prop should be given as a boolean, an
    * array or as a function of the props corresponding to that label. When given as a boolean value, the q3 value of

packages/react-charts/src/victory/components/ChartContainer/ChartContainer.tsx

@@ -16,7 +16,7 @@ export interface ChartContainerProps extends VictoryContainerProps {
    * The children prop specifies the child or children that will be rendered within the container. It will be set by
    * whatever Victory component is rendering the container.
    */
-  children?: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement<any> | React.ReactElement<any>[];
   /**
    * The className prop specifies a className that will be applied to the outermost div rendered by ChartContainer
    */
@@ -31,7 +31,7 @@ export interface ChartContainerProps extends VictoryContainerProps {
    *
    * @example containerRef={(ref) => { this.chartRef = ref; }}
    */
-  containerRef?: React.RefObject<HTMLElement>;
+  containerRef?: React.RefObject<HTMLElement | null>;
   /**
    * The desc prop specifies the description of the chart/SVG to assist with
    * accessibility for screen readers. The more info about the chart provided in
@@ -86,7 +86,7 @@ export interface ChartContainerProps extends VictoryContainerProps {
    * render in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered
    * elements from SVG to another type of element e.g., react-native-svg elements.
    */
-  portalComponent?: React.ReactElement;
+  portalComponent?: React.ReactElement<any>;
   /**
    * The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is
    * not set, the z-index of the enclosing div will be set to 99.

packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx

@@ -31,7 +31,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    * @private
    * @hide
    */
-  children?: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement<any> | React.ReactElement<any>[];
   /**
    * The className prop specifies a className that will be applied to the outermost div rendered by the container
    */
@@ -66,7 +66,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    * new element created from the passed cursorLabelComponent will be supplied with the following props: x, y, active,
    * text. If cursorLabelComponent is omitted, a new ChartLabel will be created with the props described above.
    */
-  cursorLabelComponent?: React.ReactElement;
+  cursorLabelComponent?: React.ReactElement<any>;
   /**
    * The cursorLabelOffset prop determines the pixel offset of the cursor label from the cursor point. This prop should
    * be an Object with x and y properties, or a number to be used for both dimensions.
@@ -150,7 +150,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
    * render in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered
    * elements from SVG to another type of element e.g., react-native-svg elements.
    */
-  portalComponent?: React.ReactElement;
+  portalComponent?: React.ReactElement<any>;
   /**
    * The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is
    * not set, the z-index of the enclosing div will be set to 99.

packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorFlyout.tsx

@@ -102,7 +102,7 @@ interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps {
   dy?: number;
   height?: number;
   orientation?: OrientationTypes;
-  pathComponent?: React.ReactElement;
+  pathComponent?: React.ReactElement<any>;
   pointerLength?: number;
   pointerWidth?: number;
   width?: number;

packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx

@@ -41,7 +41,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps
    * @private
    * @hide
    */
-  children?: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement<any> | React.ReactElement<any>[];
   /**
    * The className prop specifies a className that will be applied to the outermost div rendered by the container
    */
@@ -150,7 +150,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps
    * render in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered
    * elements from SVG to another type of element e.g., react-native-svg elements.
    */
-  portalComponent?: React.ReactElement;
+  portalComponent?: React.ReactElement<any>;
   /**
    * The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is
    * not set, the z-index of the enclosing div will be set to 99.

packages/react-core/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) {

packages/react-core/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';

packages/react-core/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();

packages/react-core/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);
 

packages/react-core/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);
 

packages/react-core/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;

packages/react-core/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;

packages/react-core/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;

packages/react-core/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;

packages/react-core/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';

packages/react-core/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';
 

packages/react-core/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';
 

packages/react-core/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)}
       />

packages/react-core/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 {

packages/react-core/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';
 

packages/react-core/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 }}>

packages/react-core/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);

packages/react-core/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();

packages/react-core/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();

packages/react-core/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();