feat: Add scroll listener to the nearest scrollable container and allow consumer to disable it (#3408)

* fix: Add scroll listener to the nearest scrollable container

* fix

* use loop instead of recursion

* fix

* return document

* calculate nearest scrollable container in settimeout to unblock main thread

* Add prop detectNearestScroll and clear timeout on unmount

* disable scroll listener on excal app

* update prop name to detectScroll

* update docs

* remove settimeout

* tweak docs

Co-authored-by: David Luzar <luzar.david@gmail.com>

* tweak changelog

Co-authored-by: David Luzar <luzar.david@gmail.com>

* lint

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/utils.ts

@@ -406,3 +406,24 @@ export const supportsEmoji = () => {
   ctx.fillText("😀", 0, 0);
   return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
 };
+
+export const getNearestScrollableContainer = (
+  element: HTMLElement,
+): HTMLElement | Document => {
+  let parent = element.parentElement;
+  while (parent) {
+    if (parent === document.body) {
+      return document;
+    }
+    const { overflowY } = window.getComputedStyle(parent);
+    const hasScrollableContent = parent.scrollHeight > parent.clientHeight;
+    if (
+      hasScrollableContent &&
+      (overflowY === "auto" || overflowY === "scroll")
+    ) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document;
+};