refactor: update

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 {

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))
 

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()
+ })
  }
 })
 

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>

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,
  })

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()
+ })
  }
 })
 

packages/radix-vue/src/Select/SelectScrollUpButton.vue

@@ -24,15 +24,20 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollUp = ref(false)
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
  const viewport = contentContext.viewport.value
 
  function handleScroll() {
  canScrollUp.value = viewport.scrollTop > 0
  }
  handleScroll()
- useEventListener(viewport, 'scroll', handleScroll)
+
+ const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
+
+ onCleanup(() => {
+ viewportScrollCleanup()
+ })
  }
 })
 

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()
+ })
  })
 }

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())
  })
  })
 }

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()
+ })
  }
 })
 

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()
+ })
  }
 })
 

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()
+ })
  }
  })