feat(deps)!: update React dependencies to v19

.gitignore

@@ -31,4 +31,5 @@ lerna-debug.log
 .vscode
 # For vim
 *.swp
-.yarn
+.yarn/*
+!.yarn/patches

.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch

@@ -0,0 +1,65 @@
+diff --git a/scripts/webpack/prerender.js b/scripts/webpack/prerender.js
+index 37306139a11cabc0c89e2eee637ea8af88693cd9..03f0c1d909a9bc516c5006cb4f8805c250e060bf 100644
+--- a/scripts/webpack/prerender.js
++++ b/scripts/webpack/prerender.js
+@@ -1,10 +1,44 @@
+ const React = require('react');
+ const ReactDOMServer = require('react-dom/server');
+ const { ServerLocation } = require('@reach/router');
+-const ssrPrepass = require('react-ssr-prepass');
+ // react, react-dom, and @reach/router are all EXCLUDED from the ssr-bundle.js
+ // The versions imported above are used instead, which allows us to use <ServerLocation>
+-// const ssrPrepass = require('react-ssr-prepass');
++
++// Let pending dynamic imports (AsyncComponent.preload) settle before re-rendering
++const flushAsync = () => new Promise((resolve) => setImmediate(() => setImmediate(resolve)));
++
++// The loading state rendered by asyncComponentFactory while a page chunk loads
++const LOADING_MARKER = 'style="height:100vh">Loading...';
++
++// react-ssr-prepass walked the element tree to await AsyncComponent.preload(), but it
++// relies on React internals that no longer exist in React 19. AsyncComponent already
++// kicks off preload() from its loading-state render, so rendering to a fixpoint with
++// plain renderToString preloads the same chunks using only public React APIs.
++let prerenderCount = 0;
++
++async function renderToStringWithPreload(element) {
++  const maxPasses = 4;
++  const start = Date.now();
++  let passes = 1;
++  let html = ReactDOMServer.renderToString(element);
++  if (++prerenderCount % 25 === 0) {
++    console.log(`  [prerender #${prerenderCount}] heap=${Math.round(process.memoryUsage().heapUsed / 1048576)}MB`);
++  }
++
++  for (; passes < maxPasses && html.includes(LOADING_MARKER); passes++) {
++    // The first render has kicked off preload(); give the dynamic imports a chance
++    // to settle, then render again until no loading placeholder is left.
++    await (passes === 1 ? flushAsync() : new Promise((resolve) => setTimeout(resolve, 50)));
++    html = ReactDOMServer.renderToString(element);
++  }
++
++  const elapsed = Date.now() - start;
++  if (elapsed > 5000 || html.includes(LOADING_MARKER)) {
++    console.log(`  rendered in ${passes} passes, ${elapsed}ms${html.includes(LOADING_MARKER) ? ' (loading placeholder left!)' : ''}`);
++  }
++
++  return html;
++}
+
+ // This function is effectively synchronous because it mutates global.setTimeout
+ // Only allow one copy at a time to run
+@@ -44,12 +78,7 @@ async function prerender(url) {
+   const WrappedApp = React.createElement(ServerLocation, { url },
+     React.createElement(App)
+   );
+-  await ssrPrepass(WrappedApp, element => {
+-    if (element.type.name === 'AsyncComponent') {
+-      return element.type.preload();
+-    }
+-  });
+-  const string = ReactDOMServer.renderToString(WrappedApp);
++  const string = await renderToStringWithPreload(WrappedApp);
+
+   return string;
+ }

package.json

@@ -43,8 +43,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "29.5.14",
     "@types/node": "^22.16.5",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "babel-jest": "^29.7.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.32.0",
@@ -68,8 +68,8 @@
     "plop": "^4.0.5",
     "prettier": "^3.8.1",
     "publint": "^0.3.18",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rimraf": "^6.1.3",
     "rollup": "^4.57.1",
     "rollup-plugin-scss": "^4.0.1",
@@ -124,6 +124,7 @@
     ]
   },
   "resolutions": {
-    "dompurify": "3.4.13"
+    "dompurify": "3.4.13",
+    "@patternfly/documentation-framework": "patch:@patternfly/documentation-framework@npm%3A6.49.2#~/.yarn/patches/@patternfly-documentation-framework-npm-6.49.2-02e7a8d840.patch"
   }
 }

packages/react-charts/package.json

@@ -52,8 +52,8 @@
   },
   "peerDependencies": {
     "echarts": "^5.6.0 || ^6.0.0",
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
     "victory-area": "^37.3.6",
     "victory-axis": "^37.3.6",
     "victory-bar": "^37.3.6",

packages/react-code-editor/package.json

@@ -38,8 +38,8 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "monaco-editor": "^0.56.0"

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Copy code to clipboard"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -55,7 +55,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Upload code"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_3_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -85,7 +85,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
               <button
                 aria-label="Download code"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-_r_5_"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Matches snapshot 1`] = `
   >
     <button
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

packages/react-core/package.json

@@ -60,7 +60,7 @@
     "fs-extra": "^11.3.3"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -43,7 +43,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     <button
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_2_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -78,7 +78,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
   >
     <h1
       class="pf-v6-c-title pf-m-4xl"
-      data-ouia-component-id="OUIA-Generated-Title-:r0:"
+      data-ouia-component-id="OUIA-Generated-Title-_r_0_"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
       id="id"

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
-    data-ouia-component-id="OUIA-Generated-Button-link-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-link-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_2_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_3_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -78,7 +78,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_1_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -95,7 +95,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-_r_0_"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >

packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-:r36:"
+    data-ouia-component-id="OUIA-Generated-Button-primary-_r_36_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

packages/react-core/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Card-:r5:"
+    data-ouia-component-id="OUIA-Generated-Card-_r_5_"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""
@@ -16,7 +16,7 @@ exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card"
-    data-ouia-component-id="OUIA-Generated-Card-:r0:"
+    data-ouia-component-id="OUIA-Generated-Card-_r_0_"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""

packages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
     >
       <button
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_1_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2j:"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-_r_2j_"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Matches snapshot 1`] = `
     <button
       aria-label="Copyable input"
       class="pf-v6-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
+      data-ouia-component-id="OUIA-Generated-Button-control-_r_0_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       id="button-id"

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-control"
-    data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
+    data-ouia-component-id="OUIA-Generated-Button-control-_r_0_"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     id="main-id"

packages/react-core/src/components/Compass/__tests__/__snapshots__/Compass.test.tsx.snap

@@ -55,7 +55,7 @@ exports[`Matches the snapshot with drawer 1`] = `
   >
     <div
       class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
-      data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+      data-ouia-component-id="OUIA-Generated-Drawer-_r_1_"
       data-ouia-component-type="PF6/Drawer"
       data-ouia-safe="true"
     >

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
-    data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+    data-ouia-component-id="OUIA-Generated-Drawer-_r_1_"
     data-ouia-component-type="PF6/Drawer"
     data-ouia-safe="true"
   >

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Matches the snapshot 1`] = `
     <button
       aria-label="Home"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -61,7 +61,7 @@ exports[`Matches the snapshot with custom props 1`] = `
     <button
       aria-label="Custom home"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_j_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Matches the snapshot 1`] = `
     <button
       aria-label="Search"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_h_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -54,7 +54,7 @@ exports[`Matches the snapshot with custom props 1`] = `
     <button
       aria-label="Custom search"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
+      data-ouia-component-id="OUIA-Generated-Button-plain-_r_j_"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
           aria-invalid="false"
           aria-labelledby="string"
           class="pf-v6-c-check__input"
-          data-ouia-component-id="OUIA-Generated-Checkbox-:r2:"
+          data-ouia-component-id="OUIA-Generated-Checkbox-_r_2_"
           data-ouia-component-type="PF6/Checkbox"
           data-ouia-safe="true"
           id="test"

packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         aria-expanded="false"
         aria-label="'Details'"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
+        data-ouia-component-id="OUIA-Generated-Button-plain-_r_0_"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="string"