Add {ignoreRef} to useClickOutside & Dialog

components/core/dialog.tsx

@@ -124,9 +124,10 @@ type DialogContent = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  ignoreRef?: React.RefObject<HTMLElement>;
 };
 
-function DialogContent({ children, className, style }: DialogContent) {
+function DialogContent({ children, className, style, ignoreRef }: DialogContent) {
   const { setIsOpen, isOpen, uniqueId, triggerRef } = useDialog();
   const containerRef = useRef<HTMLDivElement>(null);
   const [firstFocusableElement, setFirstFocusableElement] =
@@ -182,11 +183,15 @@ function DialogContent({ children, className, style }: DialogContent) {
     }
   }, [isOpen, triggerRef]);
 
-  useClickOutside(containerRef, () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
-  });
+   useClickOutside(
+      containerRef,
+      () => {
+         if (isOpen) {
+            setIsOpen(false)
+         }
+      },
+      ignoreRef,
+   ) 
 
   return (
     <motion.div

hooks/useClickOutside.tsx

@@ -1,26 +1,33 @@
-import { RefObject, useEffect } from 'react';
+import { RefObject, useEffect } from "react"
 
 function useClickOutside<T extends HTMLElement>(
-  ref: RefObject<T>,
-  handler: (event: MouseEvent | TouchEvent) => void
+   ref: RefObject<T>,
+   handler: (event: MouseEvent | TouchEvent) => void,
+   ignoreRef?: RefObject<T>,
 ): void {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (!ref || !ref.current || ref.current.contains(event.target as Node)) {
-        return;
-      }
+   useEffect(() => {
+      const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+         // Check if the event target is within the main ref or the ignoreRef
+         if (
+            !ref ||
+            !ref.current ||
+            ref.current.contains(event.target as Node) ||
+            (ignoreRef && ignoreRef.current && ignoreRef.current.contains(event.target as Node))
+         ) {
+            return
+         }
 
-      handler(event);
-    };
+         handler(event)
+      }
 
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside)
+      document.addEventListener("touchstart", handleClickOutside)
 
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [ref, handler]);
+      return () => {
+         document.removeEventListener("mousedown", handleClickOutside)
+         document.removeEventListener("touchstart", handleClickOutside)
+      }
+   }, [ref, ignoreRef, handler])
 }
 
-export default useClickOutside;
+export default useClickOutside