fix: upgrade react-dom

example-demos/oveViteDemo/src/index.jsx

@@ -1,6 +1,6 @@
 import "./shimGlobal";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { Loading } from "@teselagen/ui";
 
@@ -10,14 +10,16 @@ import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <Loading />
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

example-demos/oveWebpackDemo/src/index.js → example-demos/oveWebpackDemo/src/index.jsx

@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

helperUtils/renderDemo.jsx

@@ -0,0 +1,3 @@
+import { createRoot } from "react-dom/client";
+const root = createRoot(document.querySelector("#demo"));
+export default Demo => root.render(<Demo />);

packages/ove/demo/src/index.js → packages/ove/demo/src/index.jsx

@@ -1,10 +1,6 @@
 import React, { useMemo } from "react";
 import { Provider } from "react-redux";
-
 import store from "./store";
-// import { createRoot } from "react-dom/client";
-import { render } from "react-dom";
-
 import {
   CircularView,
   RowView,
@@ -13,18 +9,17 @@ import {
   updateEditor,
   EnzymeViewer
 } from "../../src";
-
 import exampleSequenceData from "./exampleData/exampleSequenceData";
 import StandaloneDemo from "./StandaloneDemo";
 import SimpleCircularOrLinearViewDemo from "./SimpleCircularOrLinearViewDemo";
 import StandaloneAlignmentDemo from "./StandaloneAlignmentDemo";
 import AlignmentDemo from "./AlignmentDemo";
 import EditorDemo from "./EditorDemo";
 import VersionHistoryViewDemo from "./VersionHistoryViewDemo";
-
 import "./style.css";
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { DemoPage } from "@teselagen/shared-demo";
+import { createRoot } from "react-dom/client";
 
 const demos = {
   Editor: {
@@ -131,5 +126,5 @@ const WrapSimpleDemo = ({ children }) => {
   return children;
 };
 
-// createRoot(document.querySelector("#demo")).render(<Demo />);
-render(<Demo />, document.querySelector("#demo"));
+const root = createRoot(document.querySelector("#demo"));
+root.render(<Demo />);

packages/ove/src/AlignmentView/index.js

@@ -5,7 +5,7 @@ import {
   Draggable as DndDraggable
 } from "@hello-pangea/dnd";
 import Clipboard from "clipboard";
-import React from "react";
+import React, { createRef } from "react";
 import { connect } from "react-redux";
 import {
   Button,
@@ -33,7 +33,6 @@ import {
 } from "lodash-es";
 import { getSequenceDataBetweenRange } from "@teselagen/sequence-utils";
 import ReactList from "@teselagen/react-list";
-import ReactDOM from "react-dom";
 
 import { NonReduxEnhancedLinearView } from "../LinearView";
 import Minimap, { getTrimmedRangesToDisplay } from "./Minimap";
@@ -94,6 +93,7 @@ try {
 
 export class AlignmentView extends React.Component {
   bindOutsideChangeHelper = {};
+  InfiniteScroller = createRef();
   constructor(props) {
     super(props);
     window.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
@@ -389,11 +389,12 @@ export class AlignmentView extends React.Component {
   setVerticalScrollRange = throttle(() => {
     if (
       this &&
-      this.InfiniteScroller &&
-      this.InfiniteScroller.getFractionalVisibleRange &&
+      this.InfiniteScroller.current &&
+      this.InfiniteScroller.current.getFractionalVisibleRange &&
       this.easyStore
     ) {
-      let [start, end] = this.InfiniteScroller.getFractionalVisibleRange();
+      let [start, end] =
+        this.InfiniteScroller.current.getFractionalVisibleRange();
       if (this.props.hasTemplate) {
         end = end + 1;
       }
@@ -495,7 +496,7 @@ export class AlignmentView extends React.Component {
     }
   };
   scrollYToTrack = trackIndex => {
-    this.InfiniteScroller.scrollTo(trackIndex);
+    this.InfiniteScroller.current.scrollTo(trackIndex);
   };
 
   estimateRowHeight = (index, cache) => {
@@ -1328,8 +1329,8 @@ export class AlignmentView extends React.Component {
                   ) : (
                     <ReactList
                       ref={c => {
-                        this.InfiniteScroller = c;
-                        const domNode = ReactDOM.findDOMNode(c);
+                        this.InfiniteScroller(c);
+                        const domNode = this.InfiniteScroller.current;
                         if (domNode instanceof HTMLElement) {
                           drop_provided.innerRef(domNode);
                         }