From ea7b8b5036096af3d38741cd37dd84610c63908d Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidcralph.co.uk>
Date: Fri, 5 Jan 2024 12:13:20 +0000
Subject: [PATCH] fix: tooltips apart from notes due to floating-ui upgrade

---
 src/components/helpers/tooltip/Tooltip.jsx     | 11 ++++++++---
 src/components/helpers/tooltip/infoTooltip.jsx | 10 +++++++---
 src/components/widgets/navbar/Notes.jsx        | 14 ++++++++++----
 src/components/widgets/navbar/Todo.jsx         | 11 ++++++++---
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/components/helpers/tooltip/Tooltip.jsx b/src/components/helpers/tooltip/Tooltip.jsx
index 64b3a21c..57fe1709 100644
--- a/src/components/helpers/tooltip/Tooltip.jsx
+++ b/src/components/helpers/tooltip/Tooltip.jsx
@@ -5,9 +5,14 @@ import './tooltip.scss';
 
 function Tooltip({ children, title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
-  const { x, y, reference, floating, strategy } = useFloating({
+  const [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
     placement: placement || 'bottom',
     middleware: [flip(), offset(15), shift()],
+    elements: {
+      reference,
+    },
   });
 
   return (
@@ -19,13 +24,13 @@ function Tooltip({ children, title, style, placement, subtitle }) {
         onMouseLeave={() => setShowTooltip(false)}
         onFocus={() => setShowTooltip(true)}
         onBlur={() => setShowTooltip(false)}
-        ref={reference}
+        ref={setReference}
       >
         {children}
       </div>
       {showTooltip && (
         <span
-          ref={floating}
+          ref={refs.setFloating}
           style={{
             position: strategy,
             top: y ?? '',
diff --git a/src/components/helpers/tooltip/infoTooltip.jsx b/src/components/helpers/tooltip/infoTooltip.jsx
index d6e33ecc..cfbd0f86 100644
--- a/src/components/helpers/tooltip/infoTooltip.jsx
+++ b/src/components/helpers/tooltip/infoTooltip.jsx
@@ -9,17 +9,21 @@ import './tooltip.scss';
 
 function InfoTooltip({ title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
-  const { x, y, reference, floating, strategy } = useFloating({
+  const [reference, setReference] = useState(null);
+  const { x, y, refs, strategy } = useFloating({
     placement: placement || 'top-start',
     middleware: [flip(), offset(10), shift()],
+    elements: {
+      reference,
+    },
   });
 
   return (
-    <div className="infoTooltip" style={style} ref={reference}>
+    <div className="infoTooltip" style={style} ref={setReference}>
       <MdInfo onClick={() => setShowTooltip(true)} />
       {showTooltip && (
         <div
-          ref={floating}
+          ref={refs.setFloating}
           style={{
             position: strategy,
             top: y ?? '',
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index dfe6cdd3..20595fc9 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent, memo } from 'react';
+import { PureComponent, memo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
@@ -149,15 +149,21 @@ class Notes extends PureComponent {
 }
 
 function NotesWrapper() {
-  const { x, y, reference, floating, strategy } = useFloating({
+  const [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
     placement: 'bottom',
     middleware: [shift()],
+    elements: {
+      reference,
+    },
   });
 
   return (
     <Notes
-      notesRef={reference}
-      floatRef={floating}
+      notes
+      ref={setReference}
+      floatRef={refs.setFloating}
       position={strategy}
       xPosition={x}
       yPosition={y}
diff --git a/src/components/widgets/navbar/Todo.jsx b/src/components/widgets/navbar/Todo.jsx
index f0961839..a98d8eb8 100644
--- a/src/components/widgets/navbar/Todo.jsx
+++ b/src/components/widgets/navbar/Todo.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent, memo } from 'react';
+import { PureComponent, memo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -233,13 +233,18 @@ class Todo extends PureComponent {
 }
 
 function TodoWrapper() {
-  const { x, y, reference, floating, strategy } = useFloating({
+  const [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
     placement: 'bottom',
     middleware: [shift()],
+    elements: {
+      reference,
+    },
   });
 
   return (
-    <Todo todoRef={reference} floatRef={floating} position={strategy} xPosition={x} yPosition={y} />
+    <Todo todoRef={setReference} floatRef={refs.setFloating} position={strategy} xPosition={x} yPosition={y} />
   );
 }