chore(deps): Allowed support for React19 (#93)

* chore(deps): Allowed support for React19

* Updated build failures

Author: thatblindgeye

.eslintrc.json

@@ -9,6 +9,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "overrides": [

packages/module/package.json

@@ -45,8 +45,8 @@
     "xterm-addon-fit": "^0.8.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "6.0.0-alpha.108",

packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md

@@ -10,6 +10,7 @@ sourceLink: https://github.com/patternfly/react-console
 ### Note
 React console lives in its own package at [`@patternfly/react-console`](https://www.npmjs.com/package/@patternfly/react-console)
 
+import { useState, useRef, useEffect, useCallback, createRef } from 'react';
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
@@ -19,20 +20,20 @@ import '@patternfly/react-console/dist/css/xterm.css';
 
 ### Basic Usage
 ```js isFullscreen
-import React from 'react';
+import { useState, useRef, useCallback, createRef } from 'react';
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
 
 AccessConsolesVariants = () => {
-  const [status, setStatus] = React.useState('disconnected');
-  const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
-  const onConnect = React.useCallback(() => {
+  const [status, setStatus] = useState('disconnected');
+  const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;
+  const onConnect = useCallback(() => {
     setStatus('loading');
     setConnected();
   }, [setConnected])
-  const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])
-  const ref = React.createRef();
+  const onDisconnect = useCallback(() => setStatus('disconnected'), [])
+  const ref = createRef();
 
   return (
     <AccessConsoles preselectedType="SerialConsole">

packages/module/patternfly-docs/content/extensions/react-console/examples/SerialConsoleCustom.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useState, useRef, createRef } from 'react';
 import { debounce } from '@patternfly/react-core';
 import { SerialConsole } from '@patternfly/react-console';
 
 export const SerialConsoleCustom = () => {
-  const [status, setStatus] = React.useState('disconnected');
-  const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
-  const ref2 = React.createRef();
+  const [status, setStatus] = useState('disconnected');
+  const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;
+  const ref2 = createRef();
 
   return (
     <SerialConsole

packages/module/patternfly-docs/generated/extensions/react-console/react.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState, useRef, useEffect, useCallback, createRef } from 'react';
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
@@ -352,6 +353,11 @@ const pageData = {
   ]
 };
 pageData.liveContext = {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  createRef,
   AccessConsoles,
   SerialConsole,
   VncConsole,
@@ -362,7 +368,7 @@ pageData.liveContext = {
 pageData.relativeImports = "import { SerialConsoleCustom } from 'content/extensions/react-console/examples/./SerialConsoleCustom.jsx';"
 pageData.examples = {
   'Basic Usage': props => 
-    <Example {...pageData} {...props} thumbnail={srcImportbasicusage} {...{"code":"import React from 'react';\nimport { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';\nimport { SerialConsoleCustom } from './SerialConsoleCustom.jsx';\nimport { debounce } from '@patternfly/react-core';\n\nAccessConsolesVariants = () => {\n  const [status, setStatus] = React.useState('disconnected');\n  const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;\n  const onConnect = React.useCallback(() => {\n    setStatus('loading');\n    setConnected();\n  }, [setConnected])\n  const onDisconnect = React.useCallback(() => setStatus('disconnected'), [])\n  const ref = React.createRef();\n\n  return (\n    <AccessConsoles preselectedType=\"SerialConsole\">\n      <VncConsole host=\"localhost\" port=\"9090\" encrypt shared />\n      <SerialConsole\n        onConnect={onConnect}\n        status={status}\n        onDisconnect={onDisconnect}\n        onData={data => {\n          ref.current.onDataReceived(data);\n        }}\n        ref={ref}\n      />\n      <SerialConsoleCustom type='Serial Console pty2' />\n      <DesktopViewer spice={{ address: '127.0.0.1', port: '5900' }} vnc={{ address: '127.0.0.1', port: '5901' }} />\n    </AccessConsoles>\n  );\n};","title":"Basic Usage","lang":"js","isFullscreen":true,"className":""}}>
+    <Example {...pageData} {...props} thumbnail={srcImportbasicusage} {...{"code":"import { useState, useRef, useCallback, createRef } from 'react';\nimport { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';\nimport { SerialConsoleCustom } from './SerialConsoleCustom.jsx';\nimport { debounce } from '@patternfly/react-core';\n\nAccessConsolesVariants = () => {\n  const [status, setStatus] = useState('disconnected');\n  const setConnected = useRef(debounce(() => setStatus('connected'), 3000)).current;\n  const onConnect = useCallback(() => {\n    setStatus('loading');\n    setConnected();\n  }, [setConnected])\n  const onDisconnect = useCallback(() => setStatus('disconnected'), [])\n  const ref = createRef();\n\n  return (\n    <AccessConsoles preselectedType=\"SerialConsole\">\n      <VncConsole host=\"localhost\" port=\"9090\" encrypt shared />\n      <SerialConsole\n        onConnect={onConnect}\n        status={status}\n        onDisconnect={onDisconnect}\n        onData={data => {\n          ref.current.onDataReceived(data);\n        }}\n        ref={ref}\n      />\n      <SerialConsoleCustom type='Serial Console pty2' />\n      <DesktopViewer spice={{ address: '127.0.0.1', port: '5900' }} vnc={{ address: '127.0.0.1', port: '5901' }} />\n    </AccessConsoles>\n  );\n};","title":"Basic Usage","lang":"js","isFullscreen":true,"className":""}}>
 
     </Example>
 };
@@ -372,7 +378,7 @@ const Component = () => (
     <AutoLinkHeader {...{"id":"note","headingLevel":"h3","className":"ws-title ws-h3"}}>
       {`Note`}
     </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p ws-p "}}>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
       {`React console lives in its own package at `}
       <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-console","className":""}}>
         <code {...{"className":"ws-code "}}>

packages/module/patternfly-docs/pages/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Title, PageSection } from '@patternfly/react-core';
 

packages/module/src/components/AccessConsoles/AccessConsoles.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

packages/module/src/components/AccessConsoles/AccessConsoles.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import {useState, Children, Fragment } from 'react';
 import {
 	MenuToggle,
 	MenuToggleElement,
@@ -72,15 +72,15 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
     [VNC_CONSOLE_TYPE]: textVncConsole,
     [DESKTOP_VIEWER_CONSOLE_TYPE]: textDesktopViewerConsole
   };
-  const [type, setType] = React.useState(
+  const [type, setType] = useState(
     preselectedType !== NONE_TYPE ? { value: preselectedType, toString: () => typeMap[preselectedType] } : null
   );
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const getConsoleForType = (type: any) =>
-    React.Children.map(children as React.ReactElement[], (child: any) => {
+    Children.map(children as React.ReactElement[], (child: any) => {
       if (getChildTypeName(child) === type.value) {
-        return <React.Fragment key={getChildTypeName(child)}>{child}</React.Fragment>;
+        return <Fragment key={getChildTypeName(child)}>{child}</Fragment>;
       } else {
         return null;
       }
@@ -113,7 +113,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
   };
   const selectOptions: any[] = [];
 
-  React.Children.toArray(children as React.ReactElement[]).forEach((child: any) => {
+  Children.toArray(children as React.ReactElement[]).forEach((child: any) => {
     if (isChildOfType(child, VNC_CONSOLE_TYPE)) {
       selectOptions.push(
         <SelectOption
@@ -155,7 +155,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
   });
   return (
     <div className={styles.console}>
-      {React.Children.toArray(children).length > 1 && (
+      {Children.toArray(children).length > 1 && (
         <div className={styles.consoleActions}>
           <Select
             aria-label={textSelectConsoleType}

packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap

@@ -87,7 +87,6 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
       class="consoleActionsSerial-0-2-4"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-1"
         data-ouia-component-type="PF6/Button"
@@ -101,7 +100,6 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
         </span>
       </button>
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-2"
         data-ouia-component-type="PF6/Button"

packages/module/src/components/DesktopViewer/ConnectWithRemoteViewer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Button, ExpandableSection } from '@patternfly/react-core';
 
 import { constants } from '../common/constants';
@@ -76,8 +76,8 @@ export const ConnectWithRemoteViewer: React.FunctionComponent<ConnectWithRemoteV
   textMoreRDPInfo = 'Remote Desktop Details',
   textMoreRDPInfoContent = ''
 }: ConnectWithRemoteViewerProps) => {
-  const [isExpandedDefault, setIsExpandedDefault] = React.useState(false);
-  const [isExpandedRDP, setIsExpandedRDP] = React.useState(false);
+  const [isExpandedDefault, setIsExpandedDefault] = useState(false);
+  const [isExpandedRDP, setIsExpandedRDP] = useState(false);
 
   const _console = spice || vnc; // strictly prefer spice over vnc