Deprecate useListenClickOutsideByClassNameListener (#8242)

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx

@@ -6,6 +6,7 @@ import { Key } from 'ts-key-enum';
 
 import { RecordBoardHeader } from '@/object-record/record-board/components/RecordBoardHeader';
 import { RecordBoardStickyHeaderEffect } from '@/object-record/record-board/components/RecordBoardStickyHeaderEffect';
+import { RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-board/constants/RecordBoardClickOutsideListenerId';
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
 import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
 import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
@@ -16,7 +17,7 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useScrollRestoration } from '~/hooks/useScrollRestoration';
@@ -69,9 +70,15 @@ export const RecordBoard = () => {
   const { resetRecordSelection, setRecordAsSelected } =
     useRecordBoardSelection(recordBoardId);
 
-  useListenClickOutsideByClassName({
-    classNames: ['record-board-card'],
-    excludeClassNames: ['bottom-bar', 'action-menu-dropdown', 'command-menu'],
+  useListenClickOutsideV2({
+    excludeClassNames: [
+      'bottom-bar',
+      'action-menu-dropdown',
+      'command-menu',
+      'modal-backdrop',
+    ],
+    listenerId: RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID,
+    refs: [boardRef],
     callback: resetRecordSelection,
   });
 

packages/twenty-front/src/modules/object-record/record-board/constants/RecordBoardClickOutsideListenerId.ts

@@ -0,0 +1 @@
+export const RECORD_BOARD_CLICK_OUTSIDE_LISTENER_ID = 'record-board';

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx

@@ -33,6 +33,12 @@ export const RecordTableInternalEffect = ({
   );
 
   useListenClickOutsideV2({
+    excludeClassNames: [
+      'bottom-bar',
+      'action-menu-dropdown',
+      'command-menu',
+      'modal-backdrop',
+    ],
     listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
     refs: [tableBodyRef],
     callback: () => {

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

@@ -1,13 +1,12 @@
+import { fireEvent, renderHook } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { fireEvent, render, renderHook } from '@testing-library/react';
 
 import { isDefined } from '~/utils/isDefined';
 
 import {
   ClickOutsideMode,
   useListenClickOutside,
-  useListenClickOutsideByClassName,
 } from '../useListenClickOutside';
 
 const containerRef = React.createRef<HTMLDivElement>();
@@ -77,59 +76,3 @@ describe('useListenClickOutside', () => {
     expect(callback).toHaveBeenCalled();
   });
 });
-
-describe('useListenClickOutsideByClassName', () => {
-  it('should trigger the callback when clicking outside the specified class names', () => {
-    const callback = jest.fn();
-    const { container } = render(
-      <div>
-        <div className="wont-trigger other-class">Inside</div>
-        <div className="will-trigger">Outside</div>
-      </div>,
-    );
-
-    renderHook(() =>
-      useListenClickOutsideByClassName({
-        classNames: ['wont-trigger'],
-        callback,
-      }),
-    );
-
-    act(() => {
-      const notClickableElement = container.querySelector('.will-trigger');
-      if (isDefined(notClickableElement)) {
-        fireEvent.mouseDown(notClickableElement);
-        fireEvent.click(notClickableElement);
-      }
-    });
-
-    expect(callback).toHaveBeenCalled();
-  });
-
-  it('should not trigger the callback when clicking inside the specified class names', () => {
-    const callback = jest.fn();
-    const { container } = render(
-      <div>
-        <div className="wont-trigger other-class">Inside</div>
-        <div className="will-trigger">Outside</div>
-      </div>,
-    );
-
-    renderHook(() =>
-      useListenClickOutsideByClassName({
-        classNames: ['wont-trigger'],
-        callback,
-      }),
-    );
-
-    act(() => {
-      const notClickableElement = container.querySelector('.wont-trigger');
-      if (isDefined(notClickableElement)) {
-        fireEvent.mouseDown(notClickableElement);
-        fireEvent.click(notClickableElement);
-      }
-    });
-
-    expect(callback).not.toHaveBeenCalled();
-  });
-});

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

@@ -138,58 +138,3 @@ export const useListenClickOutside = <T extends Element>({
     }
   }, [refs, callback, mode, enabled, isMouseDownInside]);
 };
-
-export const useListenClickOutsideByClassName = ({
-  classNames,
-  excludeClassNames,
-  callback,
-}: {
-  classNames: string[];
-  excludeClassNames?: string[];
-  callback: () => void;
-}) => {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (!(event.target instanceof Node)) return;
-
-      const clickedElement = event.target as HTMLElement;
-      let isClickedInside = false;
-      let isClickedOnExcluded = false;
-      let currentElement: HTMLElement | null = clickedElement;
-
-      while (currentElement) {
-        const currentClassList = currentElement.classList;
-
-        isClickedInside = classNames.some((className) =>
-          currentClassList.contains(className),
-        );
-        isClickedOnExcluded =
-          excludeClassNames?.some((className) =>
-            currentClassList.contains(className),
-          ) ?? false;
-
-        if (isClickedInside || isClickedOnExcluded) {
-          break;
-        }
-
-        currentElement = currentElement.parentElement;
-      }
-
-      if (!isClickedInside && !isClickedOnExcluded) {
-        callback();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchend', handleClickOutside, {
-      capture: true,
-    });
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchend', handleClickOutside, {
-        capture: true,
-      });
-    };
-  }, [callback, classNames, excludeClassNames]);
-};

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts

@@ -10,6 +10,7 @@ export enum ClickOutsideMode {
 
 export type ClickOutsideListenerProps<T extends Element> = {
   refs: Array<React.RefObject<T>>;
+  excludeClassNames?: string[];
   callback: (event: MouseEvent | TouchEvent) => void;
   mode?: ClickOutsideMode;
   listenerId: string;
@@ -18,6 +19,7 @@ export type ClickOutsideListenerProps<T extends Element> = {
 
 export const useListenClickOutsideV2 = <T extends Element>({
   refs,
+  excludeClassNames,
   callback,
   mode = ClickOutsideMode.compareHTMLRef,
   listenerId,
@@ -106,11 +108,34 @@ export const useListenClickOutsideV2 = <T extends Element>({
           .getValue();
 
         if (mode === ClickOutsideMode.compareHTMLRef) {
+          const clickedElement = event.target as HTMLElement;
+          let isClickedOnExcluded = false;
+          let currentElement: HTMLElement | null = clickedElement;
+
+          while (currentElement) {
+            const currentClassList = currentElement.classList;
+
+            isClickedOnExcluded =
+              excludeClassNames?.some((className) =>
+                currentClassList.contains(className),
+              ) ?? false;
+
+            if (isClickedOnExcluded) {
+              break;
+            }
+
+            currentElement = currentElement.parentElement;
+          }
+
           const clickedOnAtLeastOneRef = refs
             .filter((ref) => !!ref.current)
             .some((ref) => ref.current?.contains(event.target as Node));
 
-          if (!clickedOnAtLeastOneRef && !isMouseDownInside) {
+          if (
+            !clickedOnAtLeastOneRef &&
+            !isMouseDownInside &&
+            !isClickedOnExcluded
+          ) {
             callback(event);
           }
         }
@@ -151,7 +176,13 @@ export const useListenClickOutsideV2 = <T extends Element>({
           }
         }
       },
-    [mode, refs, callback, getClickOutsideListenerIsMouseDownInsideState],
+    [
+      getClickOutsideListenerIsMouseDownInsideState,
+      mode,
+      refs,
+      excludeClassNames,
+      callback,
+    ],
   );
 
   useEffect(() => {