Upgraded dependencies

demo/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 import registerServiceWorker from './registerServiceWorker'
@@ -9,5 +9,8 @@ import jsx from 'react-syntax-highlighter/languages/prism/jsx'
 
 registerLanguage('jsx', jsx)
 
-ReactDOM.render(<App />, document.getElementById('demo'))
+const container = document.getElementById('demo');
+const root = createRoot(container)
+root.render(<App />);
+
 registerServiceWorker()

package.json

@@ -21,7 +21,7 @@
     "test:watch": "nwb test-react --server"
   },
   "dependencies": {
-    "styled-components": "^3.1.6"
+    "styled-components": "^5.3.8"
   },
   "peerDependencies": {
     "prop-types": "^15.6.0",
@@ -35,10 +35,10 @@
     "gh-pages": "^1.1.0",
     "nwb": "0.21.x",
     "raw-loader": "^0.5.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^5.x.x",
+    "react-router-dom": "^5.x.x",
     "react-syntax-highlighter": "^7.0.0",
     "standard": "^10.0.3"
   },

src/components/Annotation.js

@@ -90,6 +90,9 @@ export default compose(
   static defaultProps = defaultProps
 
   targetRef = React.createRef();
+  containerRef = React.createRef();
+  imgRef = React.createRef();
+
   componentDidMount() {
     if (this.props.allowTouch) {
       this.addTargetTouchEventListeners();
@@ -101,18 +104,21 @@ export default compose(
     // so we need to call preventDefault ourselves to stop touch from scrolling
     // Event handlers must be set via ref to enable e.preventDefault()
     // https://github.com/facebook/react/issues/9809
-
-    this.targetRef.current.ontouchstart = this.onTouchStart;
-    this.targetRef.current.ontouchend = this.onTouchEnd;
-    this.targetRef.current.ontouchmove = this.onTargetTouchMove;
-    this.targetRef.current.ontouchcancel = this.onTargetTouchLeave;
+    if (this.targetRef.current) {
+      this.targetRef.current.ontouchstart = this.onTouchStart;
+      this.targetRef.current.ontouchend = this.onTouchEnd;
+      this.targetRef.current.ontouchmove = this.onTargetTouchMove;
+      this.targetRef.current.ontouchcancel = this.onTargetTouchLeave;
+    }
 
   }
   removeTargetTouchEventListeners = () => {
-    this.targetRef.current.ontouchstart = undefined;
-    this.targetRef.current.ontouchend = undefined;
-    this.targetRef.current.ontouchmove = undefined;
-    this.targetRef.current.ontouchcancel = undefined;
+    if (this.targetRef.current) {
+      this.targetRef.current.ontouchstart = undefined;
+      this.targetRef.current.ontouchend = undefined;
+      this.targetRef.current.ontouchmove = undefined;
+      this.targetRef.current.ontouchcancel = undefined;
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -139,14 +145,16 @@ export default compose(
     const { annotations } = this.props
     const { container, getSelectorByType } = this
 
-    if (!container) return
+    let con = container || (this.imgRef && this.imgRef.current);
+
+    if (!con) return
 
     const intersections = annotations
       .map(annotation => {
         const { geometry } = annotation
         const selector = getSelectorByType(geometry.type)
 
-        return selector.intersects({ x, y }, geometry, container)
+        return selector.intersects({ x, y }, geometry, con)
           ? annotation
           : false
       })
@@ -155,7 +163,7 @@ export default compose(
         const aSelector = getSelectorByType(a.geometry.type)
         const bSelector = getSelectorByType(b.geometry.type)
 
-        return aSelector.area(a.geometry, container) - bSelector.area(b.geometry, container)
+        return aSelector.area(a.geometry, con) - bSelector.area(b.geometry, con)
       })
 
     return intersections[0]
@@ -179,7 +187,7 @@ export default compose(
 
   onMouseUp = (e) => this.callSelectorMethod('onMouseUp', e)
   onMouseDown = (e) => this.callSelectorMethod('onMouseDown', e)
-  onMouseMove = (e) => this.callSelectorMethod('onMouseMove', e)
+  onMouseMove = (e) => this.callSelectorMethod('onMouseMove', e, this.containerRef)
   onTouchStart = (e) => this.callSelectorMethod("onTouchStart", e)
   onTouchEnd = (e) => this.callSelectorMethod("onTouchEnd", e)
   onTouchMove = (e) => this.callSelectorMethod("onTouchMove", e)
@@ -189,13 +197,13 @@ export default compose(
     this.props.onSubmit(this.props.value)
   }
 
-  callSelectorMethod = (methodName, e) => {
+  callSelectorMethod = (methodName, e, ref) => {
     if (this.props.disableAnnotation) {
       return
     }
 
     if (!!this.props[methodName]) {
-      this.props[methodName](e)
+      this.props[methodName](e, ref)
     } else {
       const selector = this.getSelectorByType(this.props.type)
       if (selector && selector.methods[methodName]) {
@@ -233,7 +241,6 @@ export default compose(
     const { props } = this
     const {
       isMouseHovering,
-
       renderHighlight,
       renderContent,
       renderSelector,
@@ -250,7 +257,7 @@ export default compose(
     return (
       <Container
         style={props.style}
-        innerRef={isMouseHovering.innerRef}
+        ref={this.containerRef}
         onMouseLeave={this.onTargetMouseLeave}
         onTouchCancel={this.onTargetTouchLeave}
         allowTouch={allowTouch}
@@ -261,6 +268,7 @@ export default compose(
           alt={props.alt}
           src={props.src}
           draggable={false}
+          ref={this.imgRef}
           innerRef={this.setInnerRef}
         />
         <Items>
@@ -282,7 +290,7 @@ export default compose(
           }
         </Items>
         <Target
-          innerRef={this.targetRef}
+          ref={this.targetRef}
           onClick={this.onClick}
           onMouseUp={this.onMouseUp}
           onMouseDown={this.onMouseDown}

src/utils/isMouseHovering.js

@@ -1,58 +1,58 @@
-import React, { PureComponent as Component } from 'react'
+import React, { PureComponent as Component } from "react";
 
 const isMouseOverElement = ({ elem, e }) => {
-  const { pageY, pageX } = e
-  const { left, right, bottom, top } = elem.getBoundingClientRect()
-
-  return pageX > left && pageX < right && pageY > top && pageY < bottom
-}
-
-const isMouseHovering = (key = 'isMouseHovering') => DecoratedComponent => {
-  class IsMouseHovering extends Component {
-    constructor() {
-      super()
+  if (!elem) {
+    return false;
+  }
 
-      this.state = {
-        isHoveringOver: false
-      }
-    }
+  const { pageY, pageX } = e;
+  const { left, right, bottom, top } = elem.getBoundingClientRect();
 
-    componentDidMount() {
-      document.addEventListener('mousemove', this.onMouseMove)
-    }
+  return pageX > left && pageX < right && pageY > top && pageY < bottom;
+};
 
-    componentWillUnmount() {
-      document.removeEventListener('mousemove', this.onMouseMove)
-    }
+const isMouseHovering =
+  (key = "isMouseHovering") =>
+  (DecoratedComponent) => {
+    class IsMouseHovering extends Component {
+      constructor() {
+        super();
 
-    onMouseMove = e => {
-      const elem = this.el
+        this.state = {
+          isHoveringOver: false,
+        };
+      }
 
-      this.setState({
-        isHoveringOver: isMouseOverElement({ elem, e })
-      })
-    }
+      componentDidMount() {
+        document.addEventListener("mousemove", this.onMouseMove);
+      }
 
-    render() {
-      const hocProps = {
-        [key]: {
-          innerRef: el => this.el = el,
-          isHoveringOver: this.state.isHoveringOver
-        }
+      componentWillUnmount() {
+        document.removeEventListener("mousemove", this.onMouseMove);
       }
 
-      return (
-        <DecoratedComponent
-          {...this.props}
-          {...hocProps}
-        />
-      )
+      onMouseMove = (e, ref) => {
+        const elem = this.el || (ref && ref.current);
+        this.setState({
+          isHoveringOver: isMouseOverElement({ elem, e }),
+        });
+      };
+
+      render() {
+        const hocProps = {
+          [key]: {
+            innerRef: (el) => (this.el = el),
+            isHoveringOver: this.state.isHoveringOver,
+          },
+        };
+
+        return <DecoratedComponent {...this.props} {...hocProps} />;
+      }
     }
-  }
 
-  IsMouseHovering.displayName = `IsMouseHovering(${DecoratedComponent.displayName})`
+    IsMouseHovering.displayName = `IsMouseHovering(${DecoratedComponent.displayName})`;
 
-  return IsMouseHovering
-}
+    return IsMouseHovering;
+  };
 
-export default isMouseHovering
+export default isMouseHovering;

src/utils/withRelativeMousePos.js

@@ -9,8 +9,9 @@ const withRelativeMousePos = (key = 'relativeMousePos') => DecoratedComponent =>
       this.container = el
     }
 
-    onMouseMove = (e) => {
-      const xystate = getOffsetCoordPercentage(e, this.container);
+    onMouseMove = (e, ref) => {
+      const elem = this.container || (ref && ref.current);
+      const xystate = getOffsetCoordPercentage(e, elem);
       this.setState(xystate);
     }
     onTouchMove = (e) => {