feat(version): testing react 19 (#11754)

kmcfaul · web-flow · commit b9815886da3a · 2025-04-21T10:50:47.000-04:00
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -19,6 +19,7 @@ export default [
       'packages/react-docs/coverage',
       '.history/*',
       'packages/react-docs/static',
+      'packages/react-docs/public',
       '**/.cache'
     ]
   },
diff --git a/package.json b/package.json
@@ -41,8 +41,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "29.5.14",
     "@types/node": "^22.13.10",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
     "babel-jest": "^29.7.0",
     "concurrently": "^9.1.2",
     "eslint": "^9.22.0",
diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
@@ -52,8 +52,8 @@
   },
   "peerDependencies": {
     "echarts": "^5.6.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "victory-area": "^37.3.6",
     "victory-axis": "^37.3.6",
     "victory-bar": "^37.3.6",
diff --git a/packages/react-charts/src/echarts/components/Charts/Charts.tsx b/packages/react-charts/src/echarts/components/Charts/Charts.tsx
@@ -143,8 +143,8 @@ export const Charts: FunctionComponent<ChartsProps> = ({
   width,
   ...rest
 }: ChartsProps) => {
-  const containerRef = useRef<HTMLDivElement>();
-  const echart = useRef<echarts.ECharts>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const echart = useRef<echarts.ECharts>(null);
   const [update, forceUpdate] = useReducer((x) => x + 1, 0);
 
   const getSize = () => ({
diff --git a/packages/react-charts/src/victory/components/Chart/Chart.tsx b/packages/react-charts/src/victory/components/Chart/Chart.tsx
@@ -609,7 +609,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   const renderChildren = () =>
     Children.toArray(children).map((child, index) => {
       if (isValidElement(child)) {
-        const { ...childProps } = child.props;
+        const { ...childProps } = child.props as any;
         return cloneElement(child, {
           colorScale,
           ...(defaultPatternScale && { patternScale: defaultPatternScale }),
diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutThreshold.tsx
@@ -502,7 +502,7 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   const renderChildren = () =>
     Children.toArray(children).map((child, index) => {
       if (isValidElement(child)) {
-        const { data: childData, ...childProps } = child.props;
+        const { data: childData, ...childProps } = child.props as any;
         const datum = Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
         const dynamicTheme = childProps.theme || getDonutThresholdDynamicTheme(childProps.themeColor || themeColor);
         return cloneElement(child, {
diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx
@@ -374,7 +374,7 @@ export const useDefaultPatternProps = ({
 export const renderChildrenWithPatterns = ({ children, patternScale, themeColor }: PatternPropsInterface) =>
   Children.toArray(children).map((child, index) => {
     if (isValidElement(child)) {
-      const { ...childProps } = child.props;
+      const { ...childProps } = child.props as any;
       const style = childProps.style ? { ...childProps.style } : {};
 
       // Merge pattern IDs with `style.data.fill` property
diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json
@@ -38,8 +38,8 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "monaco-editor": "^0.52.2"
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -60,7 +60,7 @@
     "fs-extra": "^11.3.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   }
 }
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -15,7 +15,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
@@ -7,7 +7,7 @@ import { Button } from '../Button';
  * property passed in. Allows for more custom control over the expandable section's toggle.
  */
 
-export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivElement> {
+export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable toggle. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable toggle. */
diff --git a/packages/react-core/src/components/Form/FormFieldGroup.tsx b/packages/react-core/src/components/Form/FormFieldGroup.tsx
@@ -1,6 +1,6 @@
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
diff --git a/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx b/packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
 
-export interface FormFieldGroupExpandableProps extends React.HTMLProps<HTMLDivElement> {
+export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
diff --git a/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx b/packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
 
-export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
diff --git a/packages/react-core/src/components/Nav/Nav.tsx b/packages/react-core/src/components/Nav/Nav.tsx
@@ -10,7 +10,7 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;
diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx
@@ -31,7 +31,9 @@ export interface HorizontalOverflowObject {
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
 type TabsChild = TabElement | boolean | null | undefined;
 
-export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
+export interface TabsProps
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
+    OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */
diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -12,7 +12,7 @@ export enum ToolbarGroupVariant {
   'label-group' = 'label-group'
 }
 
-export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
+export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onToggle'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
diff --git a/packages/react-core/src/components/Wizard/WizardNavInternal.tsx b/packages/react-core/src/components/Wizard/WizardNavInternal.tsx
@@ -96,7 +96,7 @@ export const WizardNavInternal = ({
             }
           });
           const hasEnabledChildren = Children.toArray(subNavItems).some(
-            (child) => isValidElement(child) && !child.props.isDisabled
+            (child) => isValidElement(child) && !(child.props as any).isDisabled
           );
 
           if (!isProgressive || (isProgressive && step.index <= activeStep.index)) {
diff --git a/packages/react-drag-drop/package.json b/packages/react-drag-drop/package.json
@@ -38,7 +38,7 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   }
 }
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -38,7 +38,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   }
 }
diff --git a/packages/react-table/package.json b/packages/react-table/package.json
@@ -48,7 +48,7 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   }
 }
diff --git a/packages/react-table/src/components/Table/EditableSelectInputCell.tsx b/packages/react-table/src/components/Table/EditableSelectInputCell.tsx
@@ -6,7 +6,8 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
 
-export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'> {
+export interface IEditableSelectInputCell
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'> {
   /** Row index of this select input cell */
   rowIndex: number;
   /** Cell index of this select input cell */
diff --git a/packages/react-templates/src/components/Dropdown/SimpleDropdown.tsx b/packages/react-templates/src/components/Dropdown/SimpleDropdown.tsx
@@ -25,7 +25,7 @@ export interface SimpleDropdownItem extends Omit<DropdownItemProps, 'content'> {
   isDivider?: boolean;
 }
 
-export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle'>, OUIAProps {
+export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle' | 'onToggle'>, OUIAProps {
   /** Initial items of the dropdown. */
   initialItems?: SimpleDropdownItem[];
   /** @hide Forwarded ref */
diff --git a/packages/react-templates/src/components/Select/CheckboxSelect.tsx b/packages/react-templates/src/components/Select/CheckboxSelect.tsx
@@ -16,7 +16,7 @@ export interface CheckboxSelectOption extends Omit<SelectOptionProps, 'content'>
   value: string | number;
 }
 
-export interface CheckboxSelectProps extends Omit<SelectProps, 'toggle'> {
+export interface CheckboxSelectProps extends Omit<SelectProps, 'toggle' | 'onToggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
diff --git a/packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx b/packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx
@@ -23,7 +23,7 @@ export interface MultiTypeaheadSelectOption extends Omit<SelectOptionProps, 'con
   value: string | number;
 }
 
-export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
+export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect' | 'onToggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
diff --git a/packages/react-templates/src/components/Select/SimpleSelect.tsx b/packages/react-templates/src/components/Select/SimpleSelect.tsx
@@ -15,7 +15,7 @@ export interface SimpleSelectOption extends Omit<SelectOptionProps, 'content'> {
   value: string | number;
 }
 
-export interface SimpleSelectProps extends Omit<SelectProps, 'toggle'> {
+export interface SimpleSelectProps extends Omit<SelectProps, 'toggle' | 'onToggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
@@ -22,7 +22,7 @@ export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'
   value: string | number;
 }
 
-export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
+export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect' | 'onToggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export default [`
`19`	`19`	`'packages/react-docs/coverage',`
`20`	`20`	`'.history/*',`
`21`	`21`	`'packages/react-docs/static',`
	`22`	`+ 'packages/react-docs/public',`
`22`	`23`	`'**/.cache'`
`23`	`24`	`]`
`24`	`25`	`},`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@`
`60`	`60`	`"fs-extra": "^11.3.0"`
`61`	`61`	`},`
`62`	`62`	`"peerDependencies": {`
`63`		`- "react": "^17 \|\| ^18",`
`64`		`- "react-dom": "^17 \|\| ^18"`
	`63`	`+ "react": "^17 \|\| ^18 \|\| ^19",`
	`64`	`+ "react-dom": "^17 \|\| ^18 \|\| ^19"`
`65`	`65`	`}`
`66`	`66`	`}`