fix eslint warning and errors

Author: Vidit-Kushwaha

src/components/Popup.tsx

@@ -1,7 +1,10 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable react-hooks/rules-of-hooks */
 'use client'
 
 import React, {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -15,7 +18,7 @@ import Transition from './Transition'
 import { DefaultConfig } from '../utils/constant'
 
 type PopupPropsExtended = PopupProps & {
-  onClickClose?: (isClose: Boolean) => void
+  onClickClose?: (isClose: boolean) => void
 }
 
 const Popup = forwardRef<PopupHandle, PopupPropsExtended>(
@@ -44,11 +47,11 @@ const Popup = forwardRef<PopupHandle, PopupPropsExtended>(
       close: () => setIsOpen(false),
     }))
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
       onClickClose && onClickClose(false)
       onClose && onClose()
       setIsOpen(false)
-    }
+    }, [onClose, onClickClose])
 
     useEffect(() => {
       setIsOpen(open)
@@ -62,7 +65,7 @@ const Popup = forwardRef<PopupHandle, PopupPropsExtended>(
           clearTimeout(timer)
         }
       }
-    }, [open])
+    }, [open, autoClose, onClose, onClickClose, handleClose])
 
     closeOnOutsideClick && useOutsideClick(rootRef, handleClose)
     closeOnEscape && useEscapeKey(handleClose)
@@ -97,4 +100,6 @@ const Popup = forwardRef<PopupHandle, PopupPropsExtended>(
   }
 )
 
+Popup.displayName = 'Popup'
+
 export default Popup

src/components/PopupContainer.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import React from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 import Popup from './Popup'
 import { PopupContainerProps, PopupHandle, defualtProps } from '../type'
 import '../styles/index.scss'
-import { forwardRef, useEffect, useRef, useState } from 'react'
+
 import { DefaultConfig } from '../utils/constant'
 
 const defaultProps: defualtProps = {
@@ -60,4 +60,6 @@ const PopupContainer = forwardRef<HTMLDivElement, PopupContainerProps>(
   }
 )
 
+PopupContainer.displayName = 'PopupContainer'
+
 export default PopupContainer

src/components/Transition.tsx

@@ -34,7 +34,7 @@ const Transition: React.FC<TransitionProps> = ({
     if (inProp) {
       startEnterAnimation()
     }
-  }, [inProp])
+  }, [inProp, onEntered, duration, enterClassName])
 
   useEffect(() => {
     const node = nodeRef.current!
@@ -56,7 +56,7 @@ const Transition: React.FC<TransitionProps> = ({
     if (!inProp) {
       startLeaveAnimation()
     }
-  }, [inProp])
+  }, [inProp, onExited, duration, leaveClassName])
 
   return <div ref={nodeRef}>{children}</div>
 }

src/hooks/useOutsideClick.ts

@@ -20,7 +20,7 @@ function useOutsideClick(
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [ref])
+  }, [ref, handleClickOutsideCallback])
 }
 
 export default useOutsideClick