feat: mouseLeaveDelayInSeconds option for desktop

apps/web/docs/settings/desktop.mdx

@@ -10,14 +10,16 @@ title: desktop
 
 - **triggerOnIdle** - if true, the handlers will be triggered when the user is idle
 - **triggerOnMouseLeave** - if true, the handlers will be triggered when the user is about to leave your website
-- **delayInSecondsToTrigger** - delay in seconds to trigger the exit intent handlers. **triggerOnIdle** **must be true**!
+- **delayInSecondsToTrigger** - delay in seconds to trigger the exit intent handlers on idle. **triggerOnIdle** **must be true**!
+- **mouseLeaveDelayInSeconds** - delay in seconds to trigger the exit intent handlers on mouse leave. **triggerOnMouseLeave** **must be true**!
 - **useBeforeUnload** - if true, the handlers will be triggered when the user is about to leave your website. **UI will be blocked until the user cancels the action**.
 
 <br/>
 
 ## Default
 ```tsx
 delayInSecondsToTrigger: 10
+mouseLeaveDelayInSeconds: 5
 triggerOnMouseLeave: true
 triggerOnIdle: false
 useBeforeUnload: false
@@ -30,6 +32,7 @@ useBeforeUnload: false
 useExitIntent({
   desktop: {
     delayInSecondsToTrigger: 10,
+    mouseLeaveDelayInSeconds: 5,
     triggerOnMouseLeave: true,
     triggerOnIdle: false
     useBeforeUnload: false

apps/web/src/shared/constants/codes.ts

@@ -35,7 +35,8 @@ export const codes = {
           "triggerOnIdle": false,
           "useBeforeUnload": false,
           "triggerOnMouseLeave": true,
-          "delayInSecondsToTrigger": 10
+          "delayInSecondsToTrigger": 10,
+          "mouseLeaveDelayInSeconds": 5
         },
 
         "mobile": {

apps/web/src/templates/Home/Playground/index.tsx

@@ -157,6 +157,21 @@ export function PlaygroundSection() {
               />
             </Label>
 
+            <Label>
+              mouseLeaveDelayInSeconds:
+              <input
+                defaultValue={settings?.desktop?.mouseLeaveDelayInSeconds}
+                type="number"
+                onChange={({ target }) => {
+                  updateSettings({
+                    desktop: {
+                      mouseLeaveDelayInSeconds: target.valueAsNumber,
+                    },
+                  })
+                }}
+              />
+            </Label>
+
             <Label>
               useBeforeUnload:
               <input

packages/use-exit-intent/src/index.ts

@@ -164,7 +164,6 @@ export function useExitIntent(props: ExitIntentSettings | void = {}) {
       }
 
       if (isMobile() && mobile?.triggerOnIdle) {
-        removeIdleEvents(execute)
         createIdleEvents(execute)
       }
 
@@ -180,12 +179,21 @@ export function useExitIntent(props: ExitIntentSettings | void = {}) {
         secondsToMiliseconds(desktop?.delayInSecondsToTrigger!)
       )
 
+      let mouseLeaveTimer: ReturnType<typeof setTimeout>
+
+      const handleMouseLeave = () => {
+        if (shouldNotTrigger.current) return
+        handleExitIntent()
+      }
+
       if (desktop?.triggerOnIdle) {
         createIdleEvents(execute)
       }
 
       if (desktop?.triggerOnMouseLeave) {
-        document.body.addEventListener('mouseleave', handleExitIntent)
+        mouseLeaveTimer = setTimeout(() => {
+          document.body.addEventListener('mouseleave', handleMouseLeave)
+        }, secondsToMiliseconds(desktop.mouseLeaveDelayInSeconds!))
       }
 
       if (desktop?.useBeforeUnload) {
@@ -200,8 +208,10 @@ export function useExitIntent(props: ExitIntentSettings | void = {}) {
 
       return () => {
         abort()
-        removeIdleEvents(execute)
-        document.body.removeEventListener('mouseleave', handleExitIntent)
+        clearTimeout(mouseLeaveTimer)
+        document.body.removeEventListener('mouseleave', handleMouseLeave),
+          removeIdleEvents(execute),
+          (window.onbeforeunload = null)
       }
     }
   })

packages/use-exit-intent/src/types/index.ts

@@ -12,6 +12,7 @@ export interface DesktopOptions {
   triggerOnMouseLeave?: boolean
   delayInSecondsToTrigger?: number
   useBeforeUnload?: boolean
+  mouseLeaveDelayInSeconds?: number
 }
 
 export interface MobileOptions {

packages/use-exit-intent/src/utils/constants.ts

@@ -12,12 +12,12 @@ export const defaultSettings: InternalExitIntentSettings = {
     daysToExpire: 30,
     key: 'exit-intent',
   },
-
   desktop: {
     triggerOnIdle: false,
     useBeforeUnload: false,
     triggerOnMouseLeave: true,
     delayInSecondsToTrigger: 10,
+    mouseLeaveDelayInSeconds: 5,
   },
 
   mobile: {