From 9a82d23c12d7de951182b9123d3202ed2a1e65cb Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 8 Aug 2024 19:57:11 +0330
Subject: [PATCH 1/3] refactor: use vueuse useEventListener composable in order
 to remove listener easier

---
 .../radix-vue/src/DismissableLayer/utils.ts   | 26 +++++++++---------
 .../radix-vue/src/FocusScope/FocusScope.vue   | 14 +++++-----
 .../src/HoverCard/HoverCardContentImpl.vue    |  4 +--
 .../NavigationMenuContentImpl.vue             |  8 +++---
 .../ScrollArea/ScrollAreaScrollbarHover.vue   | 10 +++----
 .../ScrollArea/ScrollAreaScrollbarImpl.vue    |  9 +++----
 .../ScrollArea/ScrollAreaScrollbarScroll.vue  |  9 +++----
 .../src/ScrollArea/ScrollAreaThumb.vue        |  6 ++---
 .../src/Select/SelectContentImpl.vue          |  7 +++--
 .../src/Select/SelectScrollDownButton.vue     |  6 ++---
 .../src/Select/SelectScrollUpButton.vue       |  7 +++--
 .../composables/useWindowSplitterBehavior.ts  |  8 +++---
 .../useWindowSplitterPanelGroupBehavior.ts    | 12 +++------
 .../radix-vue/src/Toast/ToastRootImpl.vue     | 17 +++++-------
 .../radix-vue/src/Toast/ToastViewport.vue     | 27 ++++++-------------
 .../radix-vue/src/Tooltip/TooltipTrigger.vue  |  3 ++-
 .../shared/handleAndDispatchCustomEvent.ts    |  4 ++-
 .../radix-vue/src/shared/onFocusOutside.ts    | 12 +++------
 packages/radix-vue/src/shared/trap-focus.ts   |  5 +++-
 packages/radix-vue/src/shared/useGraceArea.ts | 23 ++++++----------
 20 files changed, 90 insertions(+), 127 deletions(-)

diff --git a/packages/radix-vue/src/DismissableLayer/utils.ts b/packages/radix-vue/src/DismissableLayer/utils.ts
index 3a8358a50..4d761da7b 100644
--- a/packages/radix-vue/src/DismissableLayer/utils.ts
+++ b/packages/radix-vue/src/DismissableLayer/utils.ts
@@ -1,4 +1,5 @@
 import { isClient } from '@vueuse/shared'
+import { useEventListener } from '@vueuse/core'
 import { handleAndDispatchCustomEvent } from '@/shared'
 import { type Ref, nextTick, ref, watchEffect } from 'vue'
 
@@ -30,12 +31,11 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
     (targetLayer
     && mainLayer === targetLayer)
     || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)
-  ) {
+  )
     return true
-  }
-  else {
+
+  else
     return false
-  }
 }
 
 /**
@@ -53,6 +53,9 @@ export function usePointerDownOutside(
   const isPointerInsideDOMTree = ref(false)
   const handleClickRef = ref(() => {})
 
+  let ownerDocumentClickCleanup: ReturnType<typeof useEventListener>
+  let ownerDocumentPointerdownCleanup: ReturnType<typeof useEventListener>
+
   watchEffect((cleanupFn) => {
     if (!isClient)
       return
@@ -93,7 +96,7 @@ export function usePointerDownOutside(
         if (event.pointerType === 'touch') {
           ownerDocument.removeEventListener('click', handleClickRef.value)
           handleClickRef.value = handleAndDispatchPointerDownOutsideEvent
-          ownerDocument.addEventListener('click', handleClickRef.value, {
+          ownerDocumentClickCleanup = useEventListener(ownerDocument, 'click', handleClickRef.value, {
             once: true,
           })
         }
@@ -104,7 +107,7 @@ export function usePointerDownOutside(
       else {
         // We need to remove the event listener in case the outside click has been canceled.
         // See: https://github.com/radix-ui/primitives/issues/2171
-        ownerDocument.removeEventListener('click', handleClickRef.value)
+        ownerDocumentClickCleanup()
       }
       isPointerInsideDOMTree.value = false
     }
@@ -122,13 +125,12 @@ export function usePointerDownOutside(
      * });
      */
     const timerId = window.setTimeout(() => {
-      ownerDocument.addEventListener('pointerdown', handlePointerDown)
+      ownerDocumentPointerdownCleanup = useEventListener(ownerDocument, 'pointerdown', handlePointerDown)
     }, 0)
 
     cleanupFn(() => {
       window.clearTimeout(timerId)
-      ownerDocument.removeEventListener('pointerdown', handlePointerDown)
-      ownerDocument.removeEventListener('click', handleClickRef.value)
+      ownerDocumentPointerdownCleanup()
     })
   })
 
@@ -148,6 +150,8 @@ export function useFocusOutside(
   const ownerDocument: Document
     = element?.value?.ownerDocument ?? globalThis?.document
 
+  let ownerDocumentFocusinCleanup: ReturnType<typeof useEventListener>
+
   const isFocusInsideDOMTree = ref(false)
   watchEffect((cleanupFn) => {
     if (!isClient)
@@ -170,9 +174,7 @@ export function useFocusOutside(
       }
     }
 
-    ownerDocument.addEventListener('focusin', handleFocus)
-
-    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))
+    ownerDocumentFocusinCleanup = useEventListener(ownerDocument, 'focusin', handleFocus)
   })
 
   return {
diff --git a/packages/radix-vue/src/FocusScope/FocusScope.vue b/packages/radix-vue/src/FocusScope/FocusScope.vue
index 38630a015..dc100db8d 100644
--- a/packages/radix-vue/src/FocusScope/FocusScope.vue
+++ b/packages/radix-vue/src/FocusScope/FocusScope.vue
@@ -35,6 +35,7 @@ export interface FocusScopeProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { nextTick, reactive, ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { isClient } from '@vueuse/shared'
 import {
   AUTOFOCUS_ON_MOUNT,
@@ -122,15 +123,14 @@ watchEffect((cleanupFn) => {
       focus(container)
   }
 
-  document.addEventListener('focusin', handleFocusIn)
-  document.addEventListener('focusout', handleFocusOut)
+  useEventListener(document, 'focusin', handleFocusIn)
+  useEventListener(document, 'focusout', handleFocusOut)
+
   const mutationObserver = new MutationObserver(handleMutations)
   if (container)
     mutationObserver.observe(container, { childList: true, subtree: true })
 
   cleanupFn(() => {
-    document.removeEventListener('focusin', handleFocusIn)
-    document.removeEventListener('focusout', handleFocusOut)
     mutationObserver.disconnect()
   })
 })
@@ -168,7 +168,9 @@ watchEffect(async (cleanupFn) => {
     const unmountEventHandler = (ev: Event) => {
       emits('unmountAutoFocus', ev)
     }
-    container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
+
+    const stop = useEventListener(container, AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
+
     container.dispatchEvent(unmountEvent)
 
     setTimeout(() => {
@@ -176,7 +178,7 @@ watchEffect(async (cleanupFn) => {
         focus(previouslyFocusedElement ?? document.body, { select: true })
 
       // we need to remove the listener after we `dispatchEvent`
-      container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
+      stop()
 
       focusScopesStack.remove(focusScope)
     }, 0)
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
index e4689190f..f79cf9beb 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
@@ -10,6 +10,7 @@ export interface HoverCardContentImplProps extends PopperContentProps {}
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { injectHoverCardRootContext } from './HoverCardRoot.vue'
 import { PopperContent } from '@/Popper'
 import { DismissableLayer } from '@/DismissableLayer'
@@ -63,7 +64,7 @@ function handlePointerUp() {
 }
 onMounted(() => {
   if (contentElement.value) {
-    document.addEventListener('pointerup', handlePointerUp)
+    useEventListener(document, 'pointerup', handlePointerUp)
 
     const tabbables = getTabbableNodes(contentElement.value)
     tabbables.forEach(tabbable => tabbable.setAttribute('tabindex', '-1'))
@@ -71,7 +72,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  document.removeEventListener('pointerup', handlePointerUp)
   rootContext.hasSelectionRef.value = false
   rootContext.isPointerDownOnContentRef.value = false
 })
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index b7733b1d7..2f451cb06 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -15,6 +15,7 @@ export interface NavigationMenuContentImplProps extends DismissableLayerProps {}
 
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   EVENT_ROOT_CONTENT_DISMISS,
@@ -107,7 +108,7 @@ function handlePointerDownOutside(ev: PointerDownOutsideEvent) {
   }
 }
 
-watchEffect((cleanupFn) => {
+watchEffect(() => {
   const content = currentElement.value
   if (menuContext.isRootMenu && content) {
     // Bubble dismiss to the root content node and focus its trigger
@@ -117,11 +118,8 @@ watchEffect((cleanupFn) => {
       if (content.contains(document.activeElement))
         itemContext.triggerRef.value?.focus()
     }
-    content.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose)
 
-    cleanupFn(() =>
-      content.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose),
-    )
+    useEventListener(document, EVENT_ROOT_CONTENT_DISMISS, handleClose)
   }
 })
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
index 6766d4048..d8a5e6fa8 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
@@ -6,6 +6,7 @@ export interface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoPr
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
 import { Presence } from '@/Presence'
@@ -38,18 +39,15 @@ onMounted(() => {
   const scrollArea = rootContext.scrollArea.value
 
   if (scrollArea) {
-    scrollArea.addEventListener('pointerenter', handlePointerEnter)
-    scrollArea.addEventListener('pointerleave', handlePointerLeave)
+    useEventListener(scrollArea, 'pointerenter', handlePointerEnter)
+    useEventListener(scrollArea, 'pointerleave', handlePointerLeave)
   }
 })
 
 onUnmounted(() => {
   const scrollArea = rootContext.scrollArea.value
-  if (scrollArea) {
+  if (scrollArea)
     window.clearTimeout(timeout)
-    scrollArea.removeEventListener('pointerenter', handlePointerEnter)
-    scrollArea.removeEventListener('pointerleave', handlePointerLeave)
-  }
 })
 </script>
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
index 81a5c39dd..0ae71e739 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
@@ -11,8 +11,8 @@ export interface ScrollAreaScrollbarImplProps {
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
@@ -83,10 +83,7 @@ function handleWheel(event: WheelEvent) {
 }
 
 onMounted(() => {
-  document.addEventListener('wheel', handleWheel, { passive: false })
-})
-onUnmounted(() => {
-  document.removeEventListener('wheel', handleWheel)
+  useEventListener(document, 'wheel', handleWheel, { passive: false })
 })
 
 function handleSizeChange() {
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
index 64502831c..ece9d0d3f 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
@@ -6,7 +6,7 @@ export interface ScrollAreaScrollbarScrollProps {
 
 <script setup lang="ts">
 import { watchEffect } from 'vue'
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
 import { useStateMachine } from '../shared/useStateMachine'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
@@ -55,7 +55,7 @@ watchEffect((onCleanup) => {
 
 const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
-watchEffect((onCleanup) => {
+watchEffect(() => {
   const viewport = rootContext.viewport.value
   const scrollDirection = scrollbarContext.isHorizontal.value
     ? 'scrollLeft'
@@ -72,11 +72,8 @@ watchEffect((onCleanup) => {
       }
       prevScrollPos = scrollPos
     }
-    viewport.addEventListener('scroll', handleScroll)
 
-    onCleanup(() => {
-      viewport.removeEventListener('scroll', handleScroll)
-    })
+    useEventListener(viewport, 'scroll', handleScroll)
   }
 })
 </script>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
index ff7468db3..81b7b9f09 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
@@ -7,7 +7,7 @@ export interface ScrollAreaThumbProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { computed, onUnmounted, ref } from 'vue'
-import { watchOnce } from '@vueuse/core'
+import { useEventListener, watchOnce } from '@vueuse/core'
 import { Primitive } from '@/Primitive'
 import { addUnlinkedScrollListener } from './utils'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
@@ -58,12 +58,12 @@ watchOnce(sizes, () => {
      * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
      */
     scrollbarContextVisible.onThumbPositionChange()
-    viewport.value.addEventListener('scroll', handleScroll)
+
+    useEventListener(viewport, 'scroll', handleScroll)
   }
 })
 
 onUnmounted(() => {
-  viewport.value!.removeEventListener('scroll', handleScroll)
   rootContext.viewport.value?.removeEventListener('scroll', handleScroll)
 })
 </script>
diff --git a/packages/radix-vue/src/Select/SelectContentImpl.vue b/packages/radix-vue/src/Select/SelectContentImpl.vue
index 99b515a3f..4b60a4277 100644
--- a/packages/radix-vue/src/Select/SelectContentImpl.vue
+++ b/packages/radix-vue/src/Select/SelectContentImpl.vue
@@ -85,7 +85,7 @@ import {
   watch,
   watchEffect,
 } from 'vue'
-import { unrefElement } from '@vueuse/core'
+import { unrefElement, useEventListener } from '@vueuse/core'
 import { injectSelectRootContext } from './SelectRoot.vue'
 import SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'
 import SelectPopperPosition from './SelectPopperPosition.vue'
@@ -160,12 +160,12 @@ watchEffect((cleanupFn) => {
       if (!content.value?.contains(event.target as HTMLElement))
         onOpenChange(false)
     }
-    document.removeEventListener('pointermove', handlePointerMove)
+    useEventListener(document, 'pointermove', handlePointerMove)
     triggerPointerDownPosRef.value = null
   }
 
   if (triggerPointerDownPosRef.value !== null) {
-    document.addEventListener('pointermove', handlePointerMove)
+    useEventListener(document, 'pointermove', handlePointerMove)
     document.addEventListener('pointerup', handlePointerUp, {
       capture: true,
       once: true,
@@ -173,7 +173,6 @@ watchEffect((cleanupFn) => {
   }
 
   cleanupFn(() => {
-    document.removeEventListener('pointermove', handlePointerMove)
     document.removeEventListener('pointerup', handlePointerUp, {
       capture: true,
     })
diff --git a/packages/radix-vue/src/Select/SelectScrollDownButton.vue b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
index 51c6192ae..093346d81 100644
--- a/packages/radix-vue/src/Select/SelectScrollDownButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
@@ -7,6 +7,7 @@ export interface SelectScrollDownButtonProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { ref, watch, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
 import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
@@ -23,7 +24,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollDown = ref(false)
 
-watchEffect((cleanupFn) => {
+watchEffect(() => {
   if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
     const viewport = contentContext.viewport.value
 
@@ -34,9 +35,8 @@ watchEffect((cleanupFn) => {
       canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll
     }
     handleScroll()
-    viewport.addEventListener('scroll', handleScroll)
 
-    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))
+    useEventListener(viewport, 'scroll', handleScroll)
   }
 })
 
diff --git a/packages/radix-vue/src/Select/SelectScrollUpButton.vue b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
index 4a9a4e5e5..542ee205b 100644
--- a/packages/radix-vue/src/Select/SelectScrollUpButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
@@ -7,6 +7,7 @@ export interface SelectScrollUpButtonProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { ref, watch, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
@@ -23,7 +24,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollUp = ref(false)
 
-watchEffect((cleanupFn) => {
+watchEffect(() => {
   if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
     const viewport = contentContext.viewport.value
 
@@ -31,9 +32,7 @@ watchEffect((cleanupFn) => {
       canScrollUp.value = viewport.scrollTop > 0
     }
     handleScroll()
-    viewport.addEventListener('scroll', handleScroll)
-
-    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))
+    useEventListener(viewport, 'scroll', handleScroll)
   }
 })
 
diff --git a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
index 81ef48439..85715c35c 100644
--- a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
+++ b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
@@ -2,6 +2,7 @@ import { type Ref, watchEffect } from 'vue'
 import type { ResizeHandler } from '../types'
 import { assert } from '../assert'
 import { getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup } from '../dom'
+import { useEventListener } from '@vueuse/core'
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
@@ -16,7 +17,7 @@ export function useWindowSplitterResizeHandlerBehavior({
   resizeHandler: Ref<ResizeHandler | null>
   panelGroupElement: Ref<ParentNode | null>
 }): void {
-  watchEffect((onCleanup) => {
+  watchEffect(() => {
     const _panelGroupElement = panelGroupElement.value
     if (disabled.value || resizeHandler.value === null || _panelGroupElement === null)
       return
@@ -75,9 +76,6 @@ export function useWindowSplitterResizeHandlerBehavior({
       }
     }
 
-    handleElement.addEventListener('keydown', onKeyDown)
-    onCleanup(() => {
-      handleElement.removeEventListener('keydown', onKeyDown)
-    })
+    useEventListener(handleElement, 'keydown', onKeyDown)
   })
 }
diff --git a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
index 1b59c683f..a76f218af 100644
--- a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
+++ b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
@@ -6,6 +6,7 @@ import { calculateAriaValues } from '../calculate'
 import { determinePivotIndices } from '../pivot'
 import { getPanelGroupElement, getResizeHandleElementsForGroup, getResizeHandlePanelIds } from '../dom'
 import { fuzzyNumbersEqual } from '../compare'
+import { useEventListener } from '@vueuse/core'
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
@@ -93,7 +94,7 @@ export function useWindowSplitterPanelGroupBehavior({
     const handles = getResizeHandleElementsForGroup(groupId, _panelGroupElement)
     assert(handles)
 
-    const cleanupFunctions = handles.map((handle) => {
+    handles.forEach((handle) => {
       const handleId = handle.getAttribute('data-panel-resize-handle-id')
       assert(handleId)
 
@@ -154,14 +155,7 @@ export function useWindowSplitterPanelGroupBehavior({
         }
       }
 
-      handle.addEventListener('keydown', onKeyDown)
-      return () => {
-        handle.removeEventListener('keydown', onKeyDown)
-      }
-    })
-
-    onCleanup(() => {
-      cleanupFunctions.forEach(cleanupFunction => cleanupFunction())
+      useEventListener(handle, 'keydown', onKeyDown)
     })
   })
 }
diff --git a/packages/radix-vue/src/Toast/ToastRootImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
index e04f4d236..37ed00310 100644
--- a/packages/radix-vue/src/Toast/ToastRootImpl.vue
+++ b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -47,7 +47,7 @@ import { Primitive } from '@/Primitive'
 import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { injectToastProviderContext } from './ToastProvider.vue'
 import { TOAST_SWIPE_CANCEL, TOAST_SWIPE_END, TOAST_SWIPE_MOVE, TOAST_SWIPE_START, VIEWPORT_PAUSE, VIEWPORT_RESUME, getAnnounceTextContent, handleAndDispatchCustomEvent, isDeltaInDirection } from './utils'
-import { onKeyStroke, useRafFn } from '@vueuse/core'
+import { onKeyStroke, useEventListener, useRafFn } from '@vueuse/core'
 import ToastAnnounce from './ToastAnnounce.vue'
 
 defineOptions({
@@ -104,7 +104,7 @@ if (props.type && !['foreground', 'background'].includes(props.type)) {
   throw new Error(error)
 }
 
-watchEffect((cleanupFn) => {
+watchEffect(() => {
   const viewport = providerContext.viewport.value
   if (viewport) {
     const handleResume = () => {
@@ -119,12 +119,9 @@ watchEffect((cleanupFn) => {
       remainingRaf.pause()
       emits('pause')
     }
-    viewport.addEventListener(VIEWPORT_PAUSE, handlePause)
-    viewport.addEventListener(VIEWPORT_RESUME, handleResume)
-    return () => {
-      viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)
-      viewport.removeEventListener(VIEWPORT_RESUME, handleResume)
-    }
+
+    useEventListener(viewport, VIEWPORT_PAUSE, handlePause)
+    useEventListener(viewport, VIEWPORT_RESUME, handleResume)
   }
 })
 
@@ -234,9 +231,9 @@ provideToastRootContext({ onClose: handleClose })
           }
           // Prevent click event from triggering on items within the toast when
           // pointer up is part of a swipe gesture
-          toast?.addEventListener('click', (event) => event.preventDefault(), {
+          useEventListener(() => toast, 'click', (event) => event.preventDefault(), {
             once: true,
-          });
+          })
         }
       }"
     >
diff --git a/packages/radix-vue/src/Toast/ToastViewport.vue b/packages/radix-vue/src/Toast/ToastViewport.vue
index f28108646..78646c607 100644
--- a/packages/radix-vue/src/Toast/ToastViewport.vue
+++ b/packages/radix-vue/src/Toast/ToastViewport.vue
@@ -22,7 +22,7 @@ export interface ToastViewportProps extends PrimitiveProps {
 import { computed, onMounted, ref, toRefs, watchEffect } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectToastProviderContext } from './ToastProvider.vue'
-import { onKeyStroke, unrefElement } from '@vueuse/core'
+import { onKeyStroke, unrefElement, useEventListener } from '@vueuse/core'
 import FocusProxy from './FocusProxy.vue'
 import { focusFirst, getTabbableCandidates } from '@/FocusScope/utils'
 import { useCollection, useForwardExpose } from '@/shared'
@@ -58,7 +58,7 @@ onMounted(() => {
   providerContext.onViewportChange(currentElement.value)
 })
 
-watchEffect((cleanupFn) => {
+watchEffect(() => {
   const viewport = currentElement.value
   if (hasToasts.value && viewport) {
     const handlePause = () => {
@@ -125,23 +125,12 @@ watchEffect((cleanupFn) => {
       }
     }
 
-    viewport.addEventListener('focusin', handlePause)
-    viewport.addEventListener('focusout', handleFocusOutResume)
-    viewport.addEventListener('pointermove', handlePause)
-    viewport.addEventListener('pointerleave', handlePointerLeaveResume)
-    viewport.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('blur', handlePause)
-    window.addEventListener('focus', handleResume)
-
-    cleanupFn(() => {
-      viewport.removeEventListener('focusin', handlePause)
-      viewport.removeEventListener('focusout', handleFocusOutResume)
-      viewport.removeEventListener('pointermove', handlePause)
-      viewport.removeEventListener('pointerleave', handlePointerLeaveResume)
-      viewport.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('blur', handlePause)
-      window.removeEventListener('focus', handleResume)
-    })
+    useEventListener(viewport, ['focusin', 'pointermove'], handlePause)
+    useEventListener(viewport, 'focusout', handleFocusOutResume)
+    useEventListener(viewport, 'pointerleave', handlePointerLeaveResume)
+    useEventListener(viewport, 'keydown', handleKeyDown)
+    useEventListener(window, 'blur', handlePause)
+    useEventListener(window, 'focus', handleResume)
   }
 })
 
diff --git a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
index 32c707d57..3dc8915fa 100644
--- a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose, useId } from '@/shared'
+import { useEventListener } from '@vueuse/core'
 
 export type TooltipTriggerDataState =
   | 'closed'
@@ -56,7 +57,7 @@ function handlePointerUp() {
 
 function handlePointerDown() {
   isPointerDown.value = true
-  document.addEventListener('pointerup', handlePointerUp, { once: true })
+  useEventListener(document, 'pointerup', handlePointerUp, { once: true })
 }
 
 function handlePointerMove(event: PointerEvent) {
diff --git a/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts b/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts
index 16c869ad1..54bd1e38f 100644
--- a/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts
+++ b/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts
@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 export function handleAndDispatchCustomEvent<
   E extends CustomEvent,
   OriginalEvent extends Event,
@@ -15,7 +17,7 @@ export function handleAndDispatchCustomEvent<
     detail,
   })
   if (handler)
-    target.addEventListener(name, handler as EventListener, { once: true })
+    useEventListener(target, handler as EventListener, { once: true })
 
   target.dispatchEvent(event)
 }
diff --git a/packages/radix-vue/src/shared/onFocusOutside.ts b/packages/radix-vue/src/shared/onFocusOutside.ts
index bc56bb111..bbd5d4c7d 100644
--- a/packages/radix-vue/src/shared/onFocusOutside.ts
+++ b/packages/radix-vue/src/shared/onFocusOutside.ts
@@ -1,5 +1,5 @@
-import { type MaybeElementRef, unrefElement } from '@vueuse/core'
-import { onMounted, onUnmounted } from 'vue'
+import { type MaybeElementRef, unrefElement, useEventListener } from '@vueuse/core'
+import { onMounted } from 'vue'
 
 export function onFocusOutside(
   element: MaybeElementRef,
@@ -17,12 +17,6 @@ export function onFocusOutside(
 
   onMounted(() => {
     const el = unrefElement(element)
-    // @ts-expect-error focusout should received FocusEvent
-    el?.addEventListener('focusout', handleFocusOut)
-  })
-  onUnmounted(() => {
-    const el = unrefElement(element)
-    // @ts-expect-error focusout should received FocusEvent
-    el?.removeEventListener('focusout', handleFocusOut)
+    useEventListener(el, 'focusout', handleFocusOut)
   })
 }
diff --git a/packages/radix-vue/src/shared/trap-focus.ts b/packages/radix-vue/src/shared/trap-focus.ts
index c3d95e6d2..3f740ce4b 100644
--- a/packages/radix-vue/src/shared/trap-focus.ts
+++ b/packages/radix-vue/src/shared/trap-focus.ts
@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 export function trapFocus(element: HTMLElement) {
   if (element) {
     const focusableEls = [
@@ -18,7 +20,7 @@ export function trapFocus(element: HTMLElement) {
     if (firstFocusableEl)
       firstFocusableEl.focus()
 
-    element.addEventListener('keydown', (e) => {
+    useEventListener(element, 'keydown', (e) => {
       const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB
 
       if (!isTabPressed)
@@ -38,6 +40,7 @@ export function trapFocus(element: HTMLElement) {
         }
       }
     })
+
     return firstFocusableEl
   }
 }
diff --git a/packages/radix-vue/src/shared/useGraceArea.ts b/packages/radix-vue/src/shared/useGraceArea.ts
index 57a96be2d..0b0275fcf 100644
--- a/packages/radix-vue/src/shared/useGraceArea.ts
+++ b/packages/radix-vue/src/shared/useGraceArea.ts
@@ -1,6 +1,7 @@
 import { type Ref, ref, watchEffect } from 'vue'
 import type { Side } from '@/Popper/utils'
 import { createEventHook, refAutoReset } from '@vueuse/shared'
+import { useEventListener } from '@vueuse/core'
 
 export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, containerElement: Ref<HTMLElement | undefined>) {
 // Reset the inTransit state if idle/scrolled.
@@ -25,22 +26,17 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
     isPointerInTransit.value = true
   }
 
-  watchEffect((cleanupFn) => {
+  watchEffect(() => {
     if (triggerElement.value && containerElement.value) {
       const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value!)
       const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value!)
 
-      triggerElement.value.addEventListener('pointerleave', handleTriggerLeave)
-      containerElement.value.addEventListener('pointerleave', handleContentLeave)
-
-      cleanupFn(() => {
-        triggerElement.value?.removeEventListener('pointerleave', handleTriggerLeave)
-        containerElement.value?.removeEventListener('pointerleave', handleContentLeave)
-      })
+      useEventListener(triggerElement, 'pointerleave', handleTriggerLeave)
+      useEventListener(containerElement, 'pointerleave', handleContentLeave)
     }
   })
 
-  watchEffect((cleanupFn) => {
+  watchEffect(() => {
     if (pointerGraceArea.value) {
       const handleTrackPointerGrace = (event: PointerEvent) => {
         if (!pointerGraceArea.value)
@@ -59,9 +55,8 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
           pointerExit.trigger()
         }
       }
-      document.addEventListener('pointermove', handleTrackPointerGrace)
 
-      cleanupFn(() => document.removeEventListener('pointermove', handleTrackPointerGrace))
+      useEventListener(document, 'pointermove', handleTrackPointerGrace)
     }
   })
 
@@ -211,11 +206,9 @@ function getHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P>
     && lowerHull.length === 1
     && upperHull[0].x === lowerHull[0].x
     && upperHull[0].y === lowerHull[0].y
-  ) {
+  )
     return upperHull
-  }
 
-  else {
+  else
     return upperHull.concat(lowerHull)
-  }
 }

From 75916b4e9e2bfd43323ba6c14ec109c6a07a7278 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 8 Aug 2024 20:02:28 +0330
Subject: [PATCH 2/3] refactor: update

---
 packages/radix-vue/src/Toast/utils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/radix-vue/src/Toast/utils.ts b/packages/radix-vue/src/Toast/utils.ts
index 6cf30bbb2..0bd3715e6 100644
--- a/packages/radix-vue/src/Toast/utils.ts
+++ b/packages/radix-vue/src/Toast/utils.ts
@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 export const TOAST_SWIPE_START = 'toast.swipeStart'
 export const TOAST_SWIPE_MOVE = 'toast.swipeMove'
 export const TOAST_SWIPE_CANCEL = 'toast.swipeCancel'
@@ -32,7 +34,7 @@ export function handleAndDispatchCustomEvent<
     detail,
   })
   if (handler)
-    currentTarget.addEventListener(name, handler as EventListener, { once: true })
+    useEventListener(currentTarget, name, handler as EventListener, { once: true })
 
   currentTarget.dispatchEvent(event)
 }

From 06f46745b2603071d5a4c9b84443ef2fdcaaede4 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Fri, 9 Aug 2024 21:21:13 +0330
Subject: [PATCH 3/3] refactor: update

---
 .../radix-vue/src/DismissableLayer/utils.ts   |  6 +++--
 .../radix-vue/src/FocusScope/FocusScope.vue   | 14 ++++++-----
 .../NavigationMenuContentImpl.vue             |  8 +++++--
 .../ScrollArea/ScrollAreaScrollbarScroll.vue  |  8 +++++--
 .../src/Select/SelectContentImpl.vue          | 12 ++++++----
 .../src/Select/SelectScrollDownButton.vue     |  8 +++++--
 .../src/Select/SelectScrollUpButton.vue       |  9 ++++++--
 .../composables/useWindowSplitterBehavior.ts  |  8 +++++--
 .../useWindowSplitterPanelGroupBehavior.ts    | 12 ++++++++--
 .../radix-vue/src/Toast/ToastRootImpl.vue     | 11 ++++++---
 .../radix-vue/src/Toast/ToastViewport.vue     | 23 +++++++++++++------
 packages/radix-vue/src/shared/useGraceArea.ts | 21 ++++++++++++-----
 12 files changed, 100 insertions(+), 40 deletions(-)

diff --git a/packages/radix-vue/src/DismissableLayer/utils.ts b/packages/radix-vue/src/DismissableLayer/utils.ts
index 4d761da7b..fd48a820c 100644
--- a/packages/radix-vue/src/DismissableLayer/utils.ts
+++ b/packages/radix-vue/src/DismissableLayer/utils.ts
@@ -107,7 +107,7 @@ export function usePointerDownOutside(
       else {
         // We need to remove the event listener in case the outside click has been canceled.
         // See: https://github.com/radix-ui/primitives/issues/2171
-        ownerDocumentClickCleanup()
+        ownerDocumentClickCleanup && ownerDocumentClickCleanup()
       }
       isPointerInsideDOMTree.value = false
     }
@@ -130,7 +130,7 @@ export function usePointerDownOutside(
 
     cleanupFn(() => {
       window.clearTimeout(timerId)
-      ownerDocumentPointerdownCleanup()
+      ownerDocumentPointerdownCleanup && ownerDocumentPointerdownCleanup()
     })
   })
 
@@ -175,6 +175,8 @@ export function useFocusOutside(
     }
 
     ownerDocumentFocusinCleanup = useEventListener(ownerDocument, 'focusin', handleFocus)
+
+    cleanupFn(() => ownerDocumentFocusinCleanup())
   })
 
   return {
diff --git a/packages/radix-vue/src/FocusScope/FocusScope.vue b/packages/radix-vue/src/FocusScope/FocusScope.vue
index dc100db8d..5c10ad91e 100644
--- a/packages/radix-vue/src/FocusScope/FocusScope.vue
+++ b/packages/radix-vue/src/FocusScope/FocusScope.vue
@@ -69,7 +69,7 @@ const focusScope = reactive({
   },
 })
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   if (!isClient)
     return
   const container = currentElement.value
@@ -123,19 +123,21 @@ watchEffect((cleanupFn) => {
       focus(container)
   }
 
-  useEventListener(document, 'focusin', handleFocusIn)
-  useEventListener(document, 'focusout', handleFocusOut)
+  const documentFocusInCleanup = useEventListener(document, 'focusin', handleFocusIn)
+  const documentFocusOutCleanup = useEventListener(document, 'focusout', handleFocusOut)
 
   const mutationObserver = new MutationObserver(handleMutations)
   if (container)
     mutationObserver.observe(container, { childList: true, subtree: true })
 
-  cleanupFn(() => {
+  onCleanup(() => {
+    documentFocusInCleanup()
+    documentFocusOutCleanup()
     mutationObserver.disconnect()
   })
 })
 
-watchEffect(async (cleanupFn) => {
+watchEffect(async (onCleanup) => {
   const container = currentElement.value
 
   await nextTick()
@@ -160,7 +162,7 @@ watchEffect(async (cleanupFn) => {
     }
   }
 
-  cleanupFn(() => {
+  onCleanup(() => {
     container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
       emits('mountAutoFocus', ev))
 
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 2f451cb06..9ab7ae5aa 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -108,7 +108,7 @@ function handlePointerDownOutside(ev: PointerDownOutsideEvent) {
   }
 }
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   const content = currentElement.value
   if (menuContext.isRootMenu && content) {
     // Bubble dismiss to the root content node and focus its trigger
@@ -119,7 +119,11 @@ watchEffect(() => {
         itemContext.triggerRef.value?.focus()
     }
 
-    useEventListener(document, EVENT_ROOT_CONTENT_DISMISS, handleClose)
+    const documentDismissCleanup = useEventListener(document, EVENT_ROOT_CONTENT_DISMISS, handleClose)
+
+    onCleanup(() => {
+      documentDismissCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
index ece9d0d3f..737b79ba2 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
@@ -55,7 +55,7 @@ watchEffect((onCleanup) => {
 
 const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   const viewport = rootContext.viewport.value
   const scrollDirection = scrollbarContext.isHorizontal.value
     ? 'scrollLeft'
@@ -73,7 +73,11 @@ watchEffect(() => {
       prevScrollPos = scrollPos
     }
 
-    useEventListener(viewport, 'scroll', handleScroll)
+    const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
+
+    onCleanup(() => {
+      viewportScrollCleanup()
+    })
   }
 })
 </script>
diff --git a/packages/radix-vue/src/Select/SelectContentImpl.vue b/packages/radix-vue/src/Select/SelectContentImpl.vue
index 4b60a4277..ffde01b90 100644
--- a/packages/radix-vue/src/Select/SelectContentImpl.vue
+++ b/packages/radix-vue/src/Select/SelectContentImpl.vue
@@ -130,7 +130,10 @@ watch(isPositioned, () => {
 // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
 // and close on `pointerup` outside.
 const { onOpenChange, triggerPointerDownPosRef } = rootContext
-watchEffect((cleanupFn) => {
+
+let documentPointermoveCleanup: ReturnType<typeof useEventListener>
+
+watchEffect((onCleanup) => {
   if (!content.value)
     return
   let pointerMoveDelta = { x: 0, y: 0 }
@@ -160,19 +163,20 @@ watchEffect((cleanupFn) => {
       if (!content.value?.contains(event.target as HTMLElement))
         onOpenChange(false)
     }
-    useEventListener(document, 'pointermove', handlePointerMove)
+    documentPointermoveCleanup = useEventListener(document, 'pointermove', handlePointerMove)
     triggerPointerDownPosRef.value = null
   }
 
   if (triggerPointerDownPosRef.value !== null) {
-    useEventListener(document, 'pointermove', handlePointerMove)
+    documentPointermoveCleanup = useEventListener(document, 'pointermove', handlePointerMove)
     document.addEventListener('pointerup', handlePointerUp, {
       capture: true,
       once: true,
     })
   }
 
-  cleanupFn(() => {
+  onCleanup(() => {
+    documentPointermoveCleanup && documentPointermoveCleanup()
     document.removeEventListener('pointerup', handlePointerUp, {
       capture: true,
     })
diff --git a/packages/radix-vue/src/Select/SelectScrollDownButton.vue b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
index 093346d81..40abb51a0 100644
--- a/packages/radix-vue/src/Select/SelectScrollDownButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
@@ -24,7 +24,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollDown = ref(false)
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
     const viewport = contentContext.viewport.value
 
@@ -36,7 +36,11 @@ watchEffect(() => {
     }
     handleScroll()
 
-    useEventListener(viewport, 'scroll', handleScroll)
+    const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
+
+    onCleanup(() => {
+      viewportScrollCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/Select/SelectScrollUpButton.vue b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
index 542ee205b..87c8c8df1 100644
--- a/packages/radix-vue/src/Select/SelectScrollUpButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
@@ -24,7 +24,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollUp = ref(false)
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
     const viewport = contentContext.viewport.value
 
@@ -32,7 +32,12 @@ watchEffect(() => {
       canScrollUp.value = viewport.scrollTop > 0
     }
     handleScroll()
-    useEventListener(viewport, 'scroll', handleScroll)
+
+    const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
+
+    onCleanup(() => {
+      viewportScrollCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
index 85715c35c..c6e44af61 100644
--- a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
+++ b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
@@ -17,7 +17,7 @@ export function useWindowSplitterResizeHandlerBehavior({
   resizeHandler: Ref<ResizeHandler | null>
   panelGroupElement: Ref<ParentNode | null>
 }): void {
-  watchEffect(() => {
+  watchEffect((onCleanup) => {
     const _panelGroupElement = panelGroupElement.value
     if (disabled.value || resizeHandler.value === null || _panelGroupElement === null)
       return
@@ -76,6 +76,10 @@ export function useWindowSplitterResizeHandlerBehavior({
       }
     }
 
-    useEventListener(handleElement, 'keydown', onKeyDown)
+    const handleElementKeydownCleanup = useEventListener(handleElement, 'keydown', onKeyDown)
+
+    onCleanup(() => {
+      handleElementKeydownCleanup()
+    })
   })
 }
diff --git a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
index a76f218af..3aa0412a9 100644
--- a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
+++ b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
@@ -94,7 +94,7 @@ export function useWindowSplitterPanelGroupBehavior({
     const handles = getResizeHandleElementsForGroup(groupId, _panelGroupElement)
     assert(handles)
 
-    handles.forEach((handle) => {
+    const cleanupFunctions = handles.map((handle) => {
       const handleId = handle.getAttribute('data-panel-resize-handle-id')
       assert(handleId)
 
@@ -155,7 +155,15 @@ export function useWindowSplitterPanelGroupBehavior({
         }
       }
 
-      useEventListener(handle, 'keydown', onKeyDown)
+      const handleKeydownCleanup = useEventListener(handle, 'keydown', onKeyDown)
+
+      return () => {
+        handleKeydownCleanup()
+      }
+    })
+
+    onCleanup(() => {
+      cleanupFunctions.forEach(cleanupFunction => cleanupFunction())
     })
   })
 }
diff --git a/packages/radix-vue/src/Toast/ToastRootImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
index 37ed00310..3d96c210a 100644
--- a/packages/radix-vue/src/Toast/ToastRootImpl.vue
+++ b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -104,7 +104,7 @@ if (props.type && !['foreground', 'background'].includes(props.type)) {
   throw new Error(error)
 }
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   const viewport = providerContext.viewport.value
   if (viewport) {
     const handleResume = () => {
@@ -120,8 +120,13 @@ watchEffect(() => {
       emits('pause')
     }
 
-    useEventListener(viewport, VIEWPORT_PAUSE, handlePause)
-    useEventListener(viewport, VIEWPORT_RESUME, handleResume)
+    const viewportPauseCleanup = useEventListener(viewport, VIEWPORT_PAUSE, handlePause)
+    const viewportResumeCleanup = useEventListener(viewport, VIEWPORT_RESUME, handleResume)
+
+    onCleanup(() => {
+      viewportPauseCleanup()
+      viewportResumeCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/Toast/ToastViewport.vue b/packages/radix-vue/src/Toast/ToastViewport.vue
index 78646c607..b421f9865 100644
--- a/packages/radix-vue/src/Toast/ToastViewport.vue
+++ b/packages/radix-vue/src/Toast/ToastViewport.vue
@@ -58,7 +58,7 @@ onMounted(() => {
   providerContext.onViewportChange(currentElement.value)
 })
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   const viewport = currentElement.value
   if (hasToasts.value && viewport) {
     const handlePause = () => {
@@ -125,12 +125,21 @@ watchEffect(() => {
       }
     }
 
-    useEventListener(viewport, ['focusin', 'pointermove'], handlePause)
-    useEventListener(viewport, 'focusout', handleFocusOutResume)
-    useEventListener(viewport, 'pointerleave', handlePointerLeaveResume)
-    useEventListener(viewport, 'keydown', handleKeyDown)
-    useEventListener(window, 'blur', handlePause)
-    useEventListener(window, 'focus', handleResume)
+    const viewportEventsCleanup = useEventListener(viewport, ['focusin', 'pointermove'], handlePause)
+    const viewportFocusoutCleanup = useEventListener(viewport, 'focusout', handleFocusOutResume)
+    const viewportPointerLeaveCleanup = useEventListener(viewport, 'pointerleave', handlePointerLeaveResume)
+    const viewportKeydownCleanup = useEventListener(viewport, 'keydown', handleKeyDown)
+    const windowBlurCleanup = useEventListener(window, 'blur', handlePause)
+    const windowFocusCleanup = useEventListener(window, 'focus', handleResume)
+
+    onCleanup(() => {
+      viewportEventsCleanup()
+      viewportFocusoutCleanup()
+      viewportPointerLeaveCleanup()
+      viewportKeydownCleanup()
+      windowBlurCleanup()
+      windowFocusCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/shared/useGraceArea.ts b/packages/radix-vue/src/shared/useGraceArea.ts
index 0b0275fcf..bcedd61aa 100644
--- a/packages/radix-vue/src/shared/useGraceArea.ts
+++ b/packages/radix-vue/src/shared/useGraceArea.ts
@@ -4,7 +4,7 @@ import { createEventHook, refAutoReset } from '@vueuse/shared'
 import { useEventListener } from '@vueuse/core'
 
 export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, containerElement: Ref<HTMLElement | undefined>) {
-// Reset the inTransit state if idle/scrolled.
+  // Reset the inTransit state if idle/scrolled.
   const isPointerInTransit = refAutoReset(false, 300)
 
   const pointerGraceArea = ref<Polygon | null>(null)
@@ -26,17 +26,22 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
     isPointerInTransit.value = true
   }
 
-  watchEffect(() => {
+  watchEffect((onCleanup) => {
     if (triggerElement.value && containerElement.value) {
       const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value!)
       const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value!)
 
-      useEventListener(triggerElement, 'pointerleave', handleTriggerLeave)
-      useEventListener(containerElement, 'pointerleave', handleContentLeave)
+      const triggerElementPointerLeaveCleanup = useEventListener(triggerElement, 'pointerleave', handleTriggerLeave)
+      const triggerElementPointerLeaveContentCleanup = useEventListener(containerElement, 'pointerleave', handleContentLeave)
+
+      onCleanup(() => {
+        triggerElementPointerLeaveCleanup()
+        triggerElementPointerLeaveContentCleanup()
+      })
     }
   })
 
-  watchEffect(() => {
+  watchEffect((onCleanup) => {
     if (pointerGraceArea.value) {
       const handleTrackPointerGrace = (event: PointerEvent) => {
         if (!pointerGraceArea.value)
@@ -56,7 +61,11 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
         }
       }
 
-      useEventListener(document, 'pointermove', handleTrackPointerGrace)
+      const documentPointermoveCleanup = useEventListener(document, 'pointermove', handleTrackPointerGrace)
+
+      onCleanup(() => {
+        documentPointermoveCleanup()
+      })
     }
   })