feat(deps): Allowed support for React 19

.eslintrc.json

@@ -9,6 +9,7 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/jsx-runtime",
     "prettier"
   ],
   "overrides": [
@@ -31,13 +32,7 @@
       "version": "detect"
     }
   },
-  "plugins": [
-    "react",
-    "react-hooks",
-    "@typescript-eslint",
-    "patternfly-react",
-    "prettier"
-  ],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "patternfly-react", "prettier"],
   "rules": {
     "@typescript-eslint/adjacent-overload-signatures": "error",
     "@typescript-eslint/array-type": "error",

README.md

@@ -78,7 +78,7 @@ To use Topology out of the box, follow these steps:
 ## Example
 
 ```ts
-import * as React from 'react';
+import { memo, useState, useMemo } from 'react';
 import {
   EdgeStyle,
   Model,
@@ -172,10 +172,10 @@ const EDGES = [
   }
 ];
 
-export const TopologyBaselineDemo = React.memo(() => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+export const TopologyBaselineDemo = memo(() => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const controller = React.useMemo(() => {
+  const controller = useMemo(() => {
     const model: Model = {
       nodes: NODES,
       edges: EDGES,

packages/demo-app-ts/src/App.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<App />);
+  root.unmount();
 });

packages/demo-app-ts/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import {
   Page,
@@ -81,7 +81,7 @@ class App extends React.Component<{}, AppState> {
                       style={{ zIndex: 2 }}
                       id={`/${demo.id}-nav-link/${subDemo.id}-nav-link`}
                     >
-                      {React.createElement(subDemo.componentType)}
+                      {createElement(subDemo.componentType)}
                     </PageSection>
                   )}
                   key={demo.id}
@@ -94,7 +94,7 @@ class App extends React.Component<{}, AppState> {
                 path={`/${demo.id}-nav-link`}
                 render={() => (
                   <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
-                    {React.createElement(demo.componentType)}
+                    {createElement(demo.componentType)}
                   </PageSection>
                 )}
                 key={demo.id}
@@ -108,7 +108,7 @@ class App extends React.Component<{}, AppState> {
             path="/"
             render={() => (
               <PageSection isFilled hasBodyWrapper={false} style={{ zIndex: 2 }} id={`/${defaultDemo.id}-page-section`}>
-                {React.createElement(defaultDemo.componentType)}
+                {createElement(defaultDemo.componentType)}
               </PageSection>
             )}
             key={defaultDemo.id}

packages/demo-app-ts/src/components/CustomCircleNode.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,
@@ -28,7 +28,7 @@ type CustomCircleNodeProps = {
 
 const CustomCircle: React.FunctionComponent<ShapeProps> = ({ element, className }) => {
   useAnchor(EllipseAnchor);
-  React.useEffect(() => {
+  useEffect(() => {
     // init height
     element.setDimensions(new Dimensions(40, 40));
   }, [element]);

packages/demo-app-ts/src/components/CustomPathNode.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,

packages/demo-app-ts/src/components/CustomPolygonNode.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,

packages/demo-app-ts/src/components/CustomRectNode.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   WithCreateConnectorProps,

packages/demo-app-ts/src/components/DemoDefaultEdge.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState } from 'react';
 import { observer } from 'mobx-react';
 import {
   Edge,
@@ -25,7 +25,7 @@ interface BendpointProps {
 }
 
 const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point }) => {
-  const [hover, setHover] = React.useState(false);
+  const [hover, setHover] = useState(false);
   const [, ref] = useBendpoint(point);
   return (
     <circle

packages/demo-app-ts/src/components/DemoDefaultGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
 import {
   useCombineRefs,
@@ -39,7 +39,7 @@ const DemoDefaultGroup: React.FunctionComponent<GroupProps> = ({
 }) => {
   const nodeElement = element as Node;
   useAnchor(RectAnchor);
-  const boxRef = React.useRef<Rect | null>(null);
+  const boxRef = useRef<Rect | null>(null);
   const refs = useCombineRefs<SVGRectElement>(dragNodeRef, dndDragRef, dndDropRef);
 
   if (!droppable || !boxRef.current) {

packages/demo-app-ts/src/components/DemoDefaultNode.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import {
@@ -52,7 +52,7 @@ const DemoDefaultNode: React.FunctionComponent<DemoDefaultNodeProps> = ({
   });
   const ShapeComponent = (getCustomShape && getCustomShape(nodeElement)) || getShapeComponent(nodeElement);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (hover) {
       onShowCreateConnector && onShowCreateConnector();
     } else {

packages/demo-app-ts/src/components/GroupHull.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useRef } from 'react';
 import { observer } from 'mobx-react';
 import { polygonHull } from 'd3-polygon';
 import {
@@ -45,7 +45,7 @@ const GroupHull: React.FunctionComponent<GroupHullProps> = ({
   canDrop
 }) => {
   const nodeElement = element as Node;
-  const pathRef = React.useRef<string | null>(null);
+  const pathRef = useRef<string | null>(null);
   const refs = useCombineRefs<SVGPathElement | SVGRectElement>(dragNodeRef, dndDragRef, dndDropRef);
   useAnchor(RectAnchor);
 

packages/demo-app-ts/src/components/MultiEdge.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Edge, vecSum, vecScale, unitNormal, GraphElement } from '@patternfly/react-topology';
 

packages/demo-app-ts/src/components/NodeRect.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { observer } from 'mobx-react';
 import {
   Node,

packages/demo-app-ts/src/components/actionsComponentFactory.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   GraphElement,
   ComponentFactory,

packages/demo-app-ts/src/components/shapes/Path.tsx

@@ -1,5 +1,4 @@
 import { ShapeProps, useCombineRefs, useSvgAnchor } from '@patternfly/react-topology';
-import * as React from 'react';
 
 const Path: React.FunctionComponent<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
   const anchorRef = useSvgAnchor();

packages/demo-app-ts/src/components/shapes/Polygon.tsx

@@ -1,8 +1,8 @@
 import { PointTuple, ShapeProps, usePolygonAnchor } from '@patternfly/react-topology';
-import * as React from 'react';
+import { useMemo } from 'react';
 
 const Polygon: React.FunctionComponent<ShapeProps> = ({ className, width, height, filter, dndDropRef }) => {
-  const points: PointTuple[] = React.useMemo(
+  const points: PointTuple[] = useMemo(
     () => [
       [width / 2, 0],
       [width - width / 8, height],

packages/demo-app-ts/src/demos/Basics.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import {
   DefaultNode,
   Model,
@@ -17,7 +17,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 export const SingleNode = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -43,7 +43,7 @@ export const SingleNode = withTopologySetup(() => {
 export const SingleEdge = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -89,15 +89,15 @@ export const SingleEdge = withTopologySetup(() => {
 export const MultiEdge = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.node) {
         return withDragNode()(DefaultNode);
       }
       return undefined;
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -193,7 +193,7 @@ const groupStory =
   () => {
     useComponentFactory(defaultComponentFactory);
     useModel(
-      React.useMemo(
+      useMemo(
         (): Model => ({
           graph: {
             id: 'g1',
@@ -247,7 +247,7 @@ export const GroupHull = withTopologySetup(groupStory('group-hull'));
 export const AutoSizeNode = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind, type) => {
+    useCallback<ComponentFactory>((kind, type) => {
       if (type === 'autoSize-circle') {
         return CustomCircleNode;
       }
@@ -258,7 +258,7 @@ export const AutoSizeNode = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -317,7 +317,7 @@ export const AutoSizeNode = withTopologySetup(() => {
 });
 
 export const Basics: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);

packages/demo-app-ts/src/demos/CollapsibleGroups.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { action } from 'mobx';
 import {
   TopologyView,
@@ -117,12 +117,12 @@ interface TopologyViewComponentProps {
 }
 
 const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = ({ vis }) => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>();
-  const [collapseBlue, setCollapseBlue] = React.useState<boolean>(false);
-  const [collapseLightBlue, setCollapseLightBlue] = React.useState<boolean>(false);
-  const [collapseCyan, setCollapseCyan] = React.useState<boolean>(false);
-  const [collapseOrange, setCollapseOrange] = React.useState<boolean>(false);
-  const [collapsePink, setCollapsePink] = React.useState<boolean>(false);
+  const [selectedIds, setSelectedIds] = useState<string[]>();
+  const [collapseBlue, setCollapseBlue] = useState<boolean>(false);
+  const [collapseLightBlue, setCollapseLightBlue] = useState<boolean>(false);
+  const [collapseCyan, setCollapseCyan] = useState<boolean>(false);
+  const [collapseOrange, setCollapseOrange] = useState<boolean>(false);
+  const [collapsePink, setCollapsePink] = useState<boolean>(false);
 
   useEventListener<SelectionEventListener>(SELECTION_EVENT, (ids) => {
     setSelectedIds(ids);
@@ -183,7 +183,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
     </>
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     action(() => {
       const collapsedTypes: string[] = [];
       if (collapseBlue) {

packages/demo-app-ts/src/demos/Connectors.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   Model,
   ModelKind,
@@ -38,7 +38,7 @@ import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 export const Reconnect = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.graph) {
         return withPanZoom()(GraphComponent);
       }
@@ -96,7 +96,7 @@ export const Reconnect = withTopologySetup(() => {
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -158,7 +158,7 @@ type ColorChoice = ConnectorChoice & {
 };
 
 export const CreateConnector = withTopologySetup(() => {
-  const model = React.useMemo(
+  const model = useMemo(
     (): Model => ({
       graph: {
         id: 'g1',
@@ -196,7 +196,7 @@ export const CreateConnector = withTopologySetup(() => {
   const controller = useVisualizationController();
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>(
+    useCallback<ComponentFactory>(
       (kind) => {
         if (kind === ModelKind.graph) {
           return withDndDrop({
@@ -295,15 +295,15 @@ const NodeWithPointAnchor: React.FunctionComponent<{ element: GraphElement } & W
 export const Anchors = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
-    React.useCallback<ComponentFactory>((kind) => {
+    useCallback<ComponentFactory>((kind) => {
       if (kind === ModelKind.node) {
         return withDragNode()(NodeWithPointAnchor);
       }
       return undefined;
     }, [])
   );
   useModel(
-    React.useMemo(
+    useMemo(
       (): Model => ({
         graph: {
           id: 'g1',
@@ -357,7 +357,7 @@ export const Anchors = withTopologySetup(() => {
 });
 
 export const Connectors: React.FunctionComponent = () => {
-  const [activeKey, setActiveKey] = React.useState<string | number>(0);
+  const [activeKey, setActiveKey] = useState<string | number>(0);
 
   const handleTabClick = (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
     setActiveKey(tabIndex);