feat: create useElementIsVisible (#1152)

packages/fuselage-hooks/src/index.ts

@@ -27,3 +27,4 @@ export * from './useStorage';
 export * from './useToggle';
 export * from './useUniqueId';
 export * from './useOutsideClick';
+export * from './useElementIsVisible';

packages/fuselage-hooks/src/useElementIsVisible.ts

@@ -0,0 +1,51 @@
+import { useDebouncedState, useSafely } from '@rocket.chat/fuselage-hooks';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+declare global {
+  interface Window {
+    DISABLE_ANIMATION: boolean;
+  }
+}
+
+export const useElementIsVisible = <T extends Element>(): [
+  ref: RefObject<T>,
+  isVisible: boolean
+] => {
+  const innerRef = useRef<T>();
+
+  const [menuVisibility, setMenuVisibility] = useSafely(
+    useDebouncedState(false, 100)
+  );
+
+  const [observer] = useState(
+    () =>
+      new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          setMenuVisibility(entry.isIntersecting);
+        });
+      })
+  );
+
+  useEffect(
+    () => () => {
+      observer.disconnect();
+    },
+    [observer]
+  );
+
+  const ref = useCallback(
+    (node: T | null) => {
+      if (node === null) {
+        setMenuVisibility(false);
+        return;
+      }
+      innerRef.current = node;
+
+      observer.observe(innerRef.current);
+    },
+    [observer, setMenuVisibility]
+  ) as unknown as RefObject<T>;
+
+  return [ref, menuVisibility];
+};