feat: responsive popovers & menus (#1323)

packages/web/src/javascripts/Hooks/useDocumentRect.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+
+const DebounceTimeInMs = 100
+
+export const useDocumentRect = (): DOMRect => {
+  const [documentRect, setDocumentRect] = useState<DOMRect>(document.documentElement.getBoundingClientRect())
+
+  useEffect(() => {
+    let debounceTimeout: number
+
+    const handleWindowResize = () => {
+      window.clearTimeout(debounceTimeout)
+
+      window.setTimeout(() => {
+        setDocumentRect(document.documentElement.getBoundingClientRect())
+      }, DebounceTimeInMs)
+    }
+
+    window.addEventListener('resize', handleWindowResize)
+
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
+
+  return documentRect
+}

packages/web/src/javascripts/Hooks/useElementRect.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+
+const DebounceTimeInMs = 100
+
+type Options = {
+  updateOnWindowResize: boolean
+}
+
+/**
+ * Returns the bounding rect of an element, auto-updated when the element resizes.
+ * Can optionally be auto-update on window resize.
+ */
+export const useAutoElementRect = (
+  element: HTMLElement | null | undefined,
+  { updateOnWindowResize }: Options = { updateOnWindowResize: false },
+) => {
+  const [rect, setRect] = useState<DOMRect>()
+
+  useEffect(() => {
+    let windowResizeDebounceTimeout: number
+    let windowResizeHandler: () => void
+
+    if (element) {
+      const resizeObserver = new ResizeObserver(() => {
+        setRect(element.getBoundingClientRect())
+      })
+      resizeObserver.observe(element)
+
+      if (updateOnWindowResize) {
+        windowResizeHandler = () => {
+          window.clearTimeout(windowResizeDebounceTimeout)
+
+          window.setTimeout(() => {
+            setRect(element.getBoundingClientRect())
+          }, DebounceTimeInMs)
+        }
+        window.addEventListener('resize', windowResizeHandler)
+      }
+
+      return () => {
+        resizeObserver.unobserve(element)
+        if (windowResizeHandler) {
+          window.removeEventListener('resize', windowResizeHandler)
+        }
+      }
+    } else {
+      setRect(undefined)
+      return
+    }
+  }, [element, updateOnWindowResize])
+
+  return rect
+}