Merge pull request #813 from cherepanov/master

Closes #812

Author: wellyshen

src/__tests__/useOnclickoutside.tsx

@@ -127,6 +127,22 @@ describe("useOnclickOutside", () => {
     }
   );
 
+  it.each(["default", ["class1", "class2"]])(
+    "should not trigger callback when clicking an element with some of %s ignore classes",
+    (type) => {
+      const cb = renderHelper({
+        ignoreClass: type === "default" ? undefined : type,
+      });
+      const out2 = screen.getByTestId("out-2");
+      const out3 = screen.getByTestId("out-3");
+
+      fireEvent.mouseDown(out2);
+      fireEvent.mouseDown(out3);
+
+      expect(cb).not.toHaveBeenCalled();
+    }
+  );
+
   it("should not trigger callback when clicking/touching inside of the dynamic ref", () => {
     const cb = renderHelper({ refOpt: true });
 

src/index.ts

@@ -14,18 +14,27 @@ export interface Options {
   disabled?: boolean;
   eventTypes?: string[];
   excludeScrollbar?: boolean;
-  ignoreClass?: string;
+  ignoreClass?: string | string[];
   detectIFrame?: boolean;
 }
 interface Return {
   (element: El | null): void;
 }
 
-const hasIgnoreClass = (e: any, ignoreClass: string): boolean => {
+const checkClass = (el: HTMLElement, cl: string): boolean =>
+  el.classList?.contains(cl);
+
+const hasIgnoreClass = (e: any, ignoreClass: string | string[]): boolean => {
   let el = e.target || e;
 
   while (el) {
-    if (el.classList?.contains(ignoreClass)) return true;
+    if (Array.isArray(ignoreClass)) {
+      // eslint-disable-next-line no-loop-func
+      if (ignoreClass.some((c) => checkClass(el, c))) return true;
+    } else if (checkClass(el, ignoreClass)) {
+      return true;
+    }
+
     el = el.parentElement;
   }
 

src/react-cool-onclickoutside.d.ts

@@ -10,7 +10,7 @@ declare module "react-cool-onclickoutside" {
     disabled?: boolean;
     eventTypes?: string[];
     excludeScrollbar?: boolean;
-    ignoreClass?: string;
+    ignoreClass?: string | string[];
     detectIFrame?: boolean;
   }