From ea42d2b0d964166d74b990be0fdd82266539155e Mon Sep 17 00:00:00 2001
From: Omer Nave <omerna@monday.com>
Date: Tue, 28 May 2024 11:04:43 +0300
Subject: [PATCH] feat: Ignore classes in useClickOutside hook (#2135)

---
 .../hooks/useClickOutside/__stories__/useClickOutside.mdx  | 5 +++++
 packages/core/src/hooks/useClickOutside/index.ts           | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx b/packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx
index b41076e763..550a549fe9 100644
--- a/packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx
+++ b/packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx
@@ -39,6 +39,11 @@ This hook is used when you want to capture click events outside your component.
       description="Callback function to execute on outside clicks."
       required
     />
+    <FunctionArgument
+          name="ignoreClasses"
+          type="string[]"
+          description="A list of classes to ignore when checking if the click is outside the element."
+        />
     <FunctionArgument
       name="eventName"
       type="keyof HTMLElementEventMap | string"
diff --git a/packages/core/src/hooks/useClickOutside/index.ts b/packages/core/src/hooks/useClickOutside/index.ts
index bd57c7f464..065ee95bd5 100644
--- a/packages/core/src/hooks/useClickOutside/index.ts
+++ b/packages/core/src/hooks/useClickOutside/index.ts
@@ -5,10 +5,12 @@ import { GenericEventCallback } from "../../types/events";
 export default function useClickOutside({
   ref,
   callback,
+  ignoreClasses,
   eventName = "click"
 }: {
   ref: RefObject<HTMLElement>;
   callback: GenericEventCallback;
+  ignoreClasses?: string[];
   eventName?: keyof HTMLElementEventMap | string;
 }) {
   const onClickOutsideListener = useCallback(
@@ -17,6 +19,11 @@ export default function useClickOutside({
         return;
       }
 
+      const shouldIgnoreClasses = ignoreClasses && event.target instanceof HTMLElement;
+      if (shouldIgnoreClasses && event.target.closest(ignoreClasses.join(","))) {
+        return;
+      }
+
       callback(event);
     },