Improve mouse tracking (#1061)

* Improve mouse tracking

* Fix lint

* Fix regression on Filters

* Fix according to review

front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx

@@ -0,0 +1,39 @@
+import { useRef } from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { useListenClickOutside } from '../useListenClickOutside';
+
+const onOutsideClick = jest.fn();
+
+function TestComponentDomMode() {
+  const buttonRef = useRef(null);
+  const buttonRef2 = useRef(null);
+  useListenClickOutside({
+    refs: [buttonRef, buttonRef2],
+    callback: onOutsideClick,
+  });
+
+  return (
+    <div>
+      <span>Outside</span>
+      <button ref={buttonRef}>Inside</button>
+      <button ref={buttonRef2}>Inside 2</button>
+    </div>
+  );
+}
+
+test('useListenClickOutside hook works in dom mode', async () => {
+  const { getByText } = render(<TestComponentDomMode />);
+  const inside = getByText('Inside');
+  const inside2 = getByText('Inside 2');
+  const outside = getByText('Outside');
+
+  fireEvent.click(inside);
+  expect(onOutsideClick).toHaveBeenCalledTimes(0);
+
+  fireEvent.click(inside2);
+  expect(onOutsideClick).toHaveBeenCalledTimes(0);
+
+  fireEvent.click(outside);
+  expect(onOutsideClick).toHaveBeenCalledTimes(1);
+});

front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+
+export enum ClickOutsideMode {
+  absolute = 'absolute',
+  dom = 'dom',
+}
+
+export function useListenClickOutside<T extends Element>({
+  refs,
+  callback,
+  mode = ClickOutsideMode.dom,
+}: {
+  refs: Array<React.RefObject<T>>;
+  callback: (event: MouseEvent | TouchEvent) => void;
+  mode?: ClickOutsideMode;
+}) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent | TouchEvent) {
+      if (mode === ClickOutsideMode.dom) {
+        const clickedOnAtLeastOneRef = refs
+          .filter((ref) => !!ref.current)
+          .some((ref) => ref.current?.contains(event.target as Node));
+
+        if (!clickedOnAtLeastOneRef) {
+          callback(event);
+        }
+      }
+
+      if (mode === ClickOutsideMode.absolute) {
+        const clickedOnAtLeastOneRef = refs
+          .filter((ref) => !!ref.current)
+          .some((ref) => {
+            if (!ref.current) {
+              return false;
+            }
+
+            const { x, y, width, height } = ref.current.getBoundingClientRect();
+
+            const clientX =
+              'clientX' in event
+                ? event.clientX
+                : event.changedTouches[0].clientX;
+            const clientY =
+              'clientY' in event
+                ? event.clientY
+                : event.changedTouches[0].clientY;
+
+            if (
+              clientX < x ||
+              clientX > x + width ||
+              clientY < y ||
+              clientY > y + height
+            ) {
+              return false;
+            }
+            return true;
+          });
+        if (!clickedOnAtLeastOneRef) {
+          callback(event);
+        }
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside, { capture: true });
+    document.addEventListener('touchend', handleClickOutside, {
+      capture: true,
+    });
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside, {
+        capture: true,
+      });
+      document.removeEventListener('touchend', handleClickOutside, {
+        capture: true,
+      });
+    };
+  }, [refs, callback, mode]);
+}

front/src/modules/ui/utilities/pointer-event/hooks/useTrackPointer.ts

@@ -0,0 +1,67 @@
+import { useCallback, useEffect } from 'react';
+
+type MouseListener = (positionX: number, positionY: number) => void;
+
+export function useTrackPointer({
+  shouldTrackPointer = true,
+  onMouseMove,
+  onMouseDown,
+  onMouseUp,
+}: {
+  shouldTrackPointer?: boolean;
+  onMouseMove?: MouseListener;
+  onMouseDown?: MouseListener;
+  onMouseUp?: MouseListener;
+}) {
+  const extractPosition = useCallback((event: MouseEvent | TouchEvent) => {
+    const clientX =
+      'clientX' in event ? event.clientX : event.changedTouches[0].clientX;
+    const clientY =
+      'clientY' in event ? event.clientY : event.changedTouches[0].clientY;
+
+    return { clientX, clientY };
+  }, []);
+
+  const onInternalMouseMove = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const { clientX, clientY } = extractPosition(event);
+      onMouseMove?.(clientX, clientY);
+    },
+    [onMouseMove, extractPosition],
+  );
+
+  const onInternalMouseDown = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const { clientX, clientY } = extractPosition(event);
+      onMouseDown?.(clientX, clientY);
+    },
+    [onMouseDown, extractPosition],
+  );
+
+  const onInternalMouseUp = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      const { clientX, clientY } = extractPosition(event);
+      onMouseUp?.(clientX, clientY);
+    },
+    [onMouseUp, extractPosition],
+  );
+
+  useEffect(() => {
+    if (shouldTrackPointer) {
+      document.addEventListener('mousemove', onInternalMouseMove);
+      document.addEventListener('mousedown', onInternalMouseDown);
+      document.addEventListener('mouseup', onInternalMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', onInternalMouseMove);
+        document.removeEventListener('mousedown', onInternalMouseDown);
+        document.removeEventListener('mouseup', onInternalMouseUp);
+      };
+    }
+  }, [
+    shouldTrackPointer,
+    onInternalMouseMove,
+    onInternalMouseDown,
+    onInternalMouseUp,
+  ]);
+}