From 48d53e9b54bb7cafd9d9161e466a7f03b76a7b5d Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Wed, 14 Jun 2023 13:57:26 +1000
Subject: [PATCH] Use floating-ui to position tooltip

---
 frontend/package.json                         |  1 +
 .../AvailabilityViewer.module.scss            |  1 -
 .../AvailabilityViewer/AvailabilityViewer.tsx | 21 ++++++++++---------
 frontend/yarn.lock                            | 19 +++++++++++++++++
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 445299b..4d82a6f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@azure/msal-browser": "^2.37.1",
+    "@floating-ui/react-dom": "^2.0.1",
     "@giraugh/tools": "^1.6.0",
     "@js-temporal/polyfill": "^0.4.4",
     "@microsoft/microsoft-graph-client": "^3.0.5",
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
index ac1acab..80606b9 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
@@ -185,7 +185,6 @@
 
 .tooltip {
   position: absolute;
-  transform: translateX(-50%);
   border: 1px solid var(--text);
   border-radius: 3px;
   padding: 4px 8px;
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index e8ec42f..530be2f 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
+import { flip, offset, shift, useFloating } from '@floating-ui/react-dom'
 import { Temporal } from '@js-temporal/polyfill'
 
 import Content from '/src/components/Content/Content'
@@ -29,14 +30,16 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
   const [tempFocus, setTempFocus] = useState<string>()
   const [focusCount, setFocusCount] = useState<number>()
 
-  const wrapperRef = useRef<HTMLDivElement>(null)
   const [tooltip, setTooltip] = useState<{
-    x: number
-    y: number
+    anchor: HTMLDivElement
     available: string
     date: string
     people: string[]
   }>()
+  const { refs, floatingStyles } = useFloating({
+    middleware: [offset(6), flip(), shift()],
+    elements: { reference: tooltip?.anchor },
+  })
 
   // Calculate availabilities
   const { availabilities, min, max } = useMemo(() =>
@@ -90,11 +93,8 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
             } as React.CSSProperties}
             aria-label={peopleHere.join(', ')}
             onMouseEnter={e => {
-              const cellBox = e.currentTarget.getBoundingClientRect()
-              const wrapperBox = wrapperRef.current?.getBoundingClientRect() ?? { x: 0, y: 0 }
               setTooltip({
-                x: Math.round(cellBox.x - wrapperBox.x + cellBox.width / 2),
-                y: Math.round(cellBox.y - wrapperBox.y + cellBox.height) + 6,
+                anchor: e.currentTarget,
                 available: `${peopleHere.length} / ${filteredPeople.length} ${t('available')}`,
                 date: cell.label,
                 people: peopleHere,
@@ -158,7 +158,7 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
       </>}
     </Content>
 
-    <div className={styles.wrapper} ref={wrapperRef}>
+    <div className={styles.wrapper}>
       <div>
         <div className={styles.heatmap}>
           {useMemo(() => <div className={styles.timeLabels}>
@@ -176,7 +176,8 @@ const AvailabilityViewer = ({ times, people, table }: AvailabilityViewerProps) =
 
         {tooltip && <div
           className={styles.tooltip}
-          style={{ top: tooltip.y, left: tooltip.x }}
+          ref={refs.setFloating}
+          style={floatingStyles}
         >
           <h3>{tooltip.available}</h3>
           <span>{tooltip.date}</span>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 388ce0b..4655d3b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -65,6 +65,25 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.42.0.tgz#484a1d638de2911e6f5a30c12f49c7e4a3270fb6"
   integrity sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==
 
+"@floating-ui/core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.0.tgz#113bc85fa102cf890ae801668f43ee265c547a09"
+  integrity sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==
+
+"@floating-ui/dom@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.3.0.tgz#69456f2164fc3d33eb40837686eaf71537235ac9"
+  integrity sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw==
+  dependencies:
+    "@floating-ui/core" "^1.3.0"
+
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
+  integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
+  dependencies:
+    "@floating-ui/dom" "^1.3.0"
+
 "@giraugh/tools@^1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@giraugh/tools/-/tools-1.6.0.tgz#6bf501161a3a848c00d3f6f960d9cfe386860941"