reka-ui 2.9.2 → 2.9.4

package/src/FocusScope/FocusScope.vue

@@ -117,7 +117,21 @@ watchEffect((cleanupFn) => {
   // if the element still exist inside the container,
   // if not then we focus to the container
   function handleMutations(mutations: MutationRecord[]) {
-    const isLastFocusedElementExist = container.contains(lastFocusedElementRef.value)
+    const lastFocusedElement = lastFocusedElementRef.value
+
+    // Mutation may be triggered by something unrelated to focus, e.g. class is set on an element
+    // so we first check if we even have a previously focused element.
+    if (lastFocusedElement === null) {
+      return
+    }
+
+    // Ensure mutations removed nodes from the DOM at all.
+    const anyNodesRemoved = mutations.some(m => m.removedNodes.length > 0)
+    if (!anyNodesRemoved) {
+      return
+    }
+
+    const isLastFocusedElementExist = container.contains(lastFocusedElement)
     if (!isLastFocusedElementExist)
       focus(container)
   }

package/src/HoverCard/HoverCardContentImpl.vue

@@ -9,6 +9,7 @@ export interface HoverCardContentImplProps extends PopperContentProps {}
 </script>
 
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
 import { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { DismissableLayer } from '@/DismissableLayer'
 import { PopperContent } from '@/Popper'
@@ -68,6 +69,12 @@ onMounted(() => {
     const tabbables = getTabbableNodes(contentElement.value)
     tabbables.forEach(tabbable => tabbable.setAttribute('tabindex', '-1'))
   }
+
+  useEventListener(window, 'scroll', (event: Event) => {
+    const target = event.target as HTMLElement
+    if (target?.contains(rootContext.triggerElement.value!))
+      rootContext.onDismiss()
+  }, { capture: true })
 })
 
 onUnmounted(() => {

package/src/Label/Label.vue

@@ -21,7 +21,7 @@ useForwardExpose()
 <template>
   <Primitive
     v-bind="props"
-    @mousedown="(event) => {
+    @mousedown="(event: MouseEvent) => {
       // prevent text selection when double clicking label
       if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
     }"

package/src/Listbox/ListboxContent.vue

@@ -29,7 +29,7 @@ const isClickFocus = refAutoReset(false, 10)
       :aria-multiselectable="!!rootContext.multiple.value"
       :data-orientation="rootContext.orientation.value"
       @mousedown.left="isClickFocus = true"
-      @focus="(ev) => {
+      @focus="(ev: FocusEvent) => {
         if (isClickFocus)
           return
         rootContext.onEnter(ev)

package/src/Listbox/ListboxItem.vue

@@ -92,8 +92,8 @@ provideListboxItemContext({
         if (rootContext.highlightedElement.value === currentElement)
           return
 
-        if (rootContext.highlightOnHover.value && !rootContext.focusable.value)
-          rootContext.changeHighlight(currentElement, false)
+        if (rootContext.highlightOnHover.value)
+          rootContext.changeHighlight(currentElement, false, false)
       }"
     >
       <slot />

package/src/Listbox/ListboxRoot.vue

@@ -27,7 +27,7 @@ type ListboxRootContext<T> = {
 
   onLeave: (event: Event) => void
   onEnter: (event: Event) => void
-  changeHighlight: (el: HTMLElement, scrollIntoView?: boolean) => void
+  changeHighlight: (el: HTMLElement, scrollIntoView?: boolean, focus?: boolean) => void
   onKeydownNavigation: (event: KeyboardEvent) => void
   onKeydownEnter: (event: KeyboardEvent) => void
   onKeydownTypeAhead: (event: KeyboardEvent) => void
@@ -157,12 +157,12 @@ function getCollectionItem() {
   return getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')
 }
 
-function changeHighlight(el: HTMLElement, scrollIntoView = true) {
+function changeHighlight(el: HTMLElement, scrollIntoView = true, focus?: boolean) {
   if (!el)
     return
 
   highlightedElement.value = el
-  if (focusable.value)
+  if (focus ?? focusable.value)
     highlightedElement.value.focus()
   if (scrollIntoView)
     highlightedElement.value.scrollIntoView({ block: 'nearest' })
@@ -211,7 +211,9 @@ function onKeydownTypeAhead(event: KeyboardEvent) {
       const values = collection.map(i => i.value)
       modelValue.value = [...values]
       event.preventDefault()
-      changeHighlight(collection[collection.length - 1].ref)
+      const lastItem = collection.at(-1)
+      if (lastItem)
+        changeHighlight(lastItem.ref)
     }
     else if (!isMetaKey) {
       const el = handleTypeaheadSearch(event.key, getItems())
@@ -309,9 +311,9 @@ function handleMultipleReplace(event: KeyboardEvent, targetEl: HTMLElement) {
     let lastValue = collection.find(i => i.ref === targetEl)?.value
 
     if (event.key === kbd.END)
-      lastValue = collection[collection.length - 1].value
+      lastValue = collection.at(-1)?.value
     else if (event.key === kbd.HOME)
-      lastValue = collection[0].value
+      lastValue = collection[0]?.value
 
     if (!lastValue || !firstValue.value)
       return

package/src/Listbox/ListboxVirtualizer.vue

@@ -83,7 +83,7 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
   })[0]
 
   const targetNode = defaultNode.type === Fragment && Array.isArray(defaultNode.children)
-    ? defaultNode.children[0] as VNode
+    ? defaultNode.children.find(child => typeof (child as VNode).type !== 'symbol') as VNode
     : defaultNode
 
   return {
@@ -178,7 +178,7 @@ function handleMultipleReplace(event: Event, intent: 'first' | 'last' | 'prev' |
       break
     }
     case 'last': {
-      value = findValuesBetween(props.options, rootContext.firstValue.value as T, props.options?.[props.options.length - 1])
+      value = findValuesBetween(props.options, rootContext.firstValue.value as T, props.options.at(-1)!)
       break
     }
   }
@@ -211,7 +211,7 @@ rootContext.virtualKeydownHook.on((event) => {
     virtualizer.value.scrollToIndex(index)
     requestAnimationFrame(() => {
       const items = getItems()
-      const item = intent === 'first' ? items[0] : items[items.length - 1]
+      const item = intent === 'first' ? items[0] : items.at(-1)
       if (item)
         rootContext.changeHighlight(item.ref)
     })

package/src/Menu/MenuItem.vue

@@ -57,21 +57,21 @@ async function handleSelect() {
       }
     "
     @pointerup="
-      async (event) => {
+      async (event: PointerEvent) => {
         await nextTick();
         if (event.defaultPrevented) return;
         // Pointer down can move to a different menu item which should activate it on pointer up.
         // We dispatch a click for selection to allow composition with click based triggers and to
         // prevent Firefox from getting stuck in text selection mode when the menu closes.
-        if (!isPointerDownRef) event.currentTarget?.click();
+        if (!isPointerDownRef) (event.currentTarget as HTMLElement)?.click();
       }
     "
     @keydown="
-      async (event) => {
+      async (event: KeyboardEvent) => {
         const isTypingAhead = contentContext.searchRef.value !== '';
         if (disabled || (isTypingAhead && event.key === ' ')) return;
         if (SELECTION_KEYS.includes(event.key)) {
-          event.currentTarget.click();
+          (event.currentTarget as HTMLElement)?.click();
           /**
            * We prevent default browser behaviour for selection keys as they should trigger
            * a selection only:

package/src/Menu/MenuItemImpl.vue

@@ -79,7 +79,7 @@ async function handlePointerLeave(event: PointerEvent) {
       @pointermove="handlePointerMove"
       @pointerleave="handlePointerLeave"
       @focus="
-        async (event) => {
+        async (event: FocusEvent) => {
           await nextTick();
           if (event.defaultPrevented || disabled) return;
           isFocused = true;
@@ -87,7 +87,7 @@ async function handlePointerLeave(event: PointerEvent) {
         }
       "
       @blur="
-        async (event) => {
+        async (event: FocusEvent) => {
           await nextTick();
           if (event.defaultPrevented) return;
           isFocused = false;

package/src/Menu/MenuSubTrigger.vue

@@ -133,7 +133,8 @@ async function handleKeyDown(event: KeyboardEvent) {
       v-bind="props"
       :id="subContext.triggerId"
       :ref="
-        (vnode: ComponentPublicInstance) => {
+        (vnode: Element | ComponentPublicInstance | null) => {
+          if (!vnode) return undefined
           // @ts-ignore
           subContext?.onTriggerChange(vnode?.$el);
           return undefined
@@ -144,14 +145,14 @@ async function handleKeyDown(event: KeyboardEvent) {
       :aria-controls="subContext.contentId"
       :data-state="getOpenState(menuContext.open.value)"
       @click="
-        async (event) => {
+        async (event: MouseEvent) => {
           if (props.disabled || event.defaultPrevented) return;
           /**
            * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
            * and we rely heavily on `onFocusOutside` for submenus to close when switching
            * between separate submenus.
            */
-          event.currentTarget.focus();
+          (event.currentTarget as HTMLElement)?.focus();
           if (!menuContext.open.value) menuContext.onOpenChange(true);
         }
       "

package/src/Menubar/MenubarTrigger.vue

@@ -60,7 +60,7 @@ onMounted(() => {
           :data-disabled="disabled ? '' : undefined"
           :disabled="disabled"
           :data-value="menuContext.value"
-          @pointerdown="(event) => {
+          @pointerdown="(event: PointerEvent) => {
             // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
             // but not when the control key is pressed (avoiding MacOS right click)
             if (!disabled && event.button === 0 && event.ctrlKey === false) {
@@ -77,7 +77,7 @@ onMounted(() => {
               triggerElement?.focus()
             }
           }"
-          @keydown.enter.space.arrow-down="(event) => {
+          @keydown.enter.space.arrow-down="(event: KeyboardEvent) => {
             if (disabled) return;
             if (['Enter', ' '].includes(event.key)) rootContext.onMenuToggle(menuContext.value);
             if (event.key === 'ArrowDown') rootContext.onMenuOpen(menuContext.value);

package/src/MonthPicker/MonthPickerRoot.vue

@@ -196,7 +196,7 @@ const { isInvalid, isMonthSelected } = useMonthPickerState({
 
 watch(modelValue, (_modelValue) => {
   if (Array.isArray(_modelValue) && _modelValue.length) {
-    const lastValue = _modelValue[_modelValue.length - 1]
+    const lastValue = _modelValue.at(-1)
     if (lastValue && !isSameYearMonth(placeholder.value, lastValue))
       onPlaceholderChange(lastValue)
   }

package/src/NavigationMenu/NavigationMenuTrigger.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { VNode } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
 import { useCollection } from '@/Collection'
 import { useForwardExpose } from '@/shared'
@@ -119,7 +119,9 @@ function handleKeydown(ev: KeyboardEvent) {
   }
 }
 
-function setFocusProxyRef(node: VNode) {
+function setFocusProxyRef(node: Element | ComponentPublicInstance | null) {
+  if (!node)
+    return undefined
   // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode
   itemContext.focusProxyRef.value = unrefElement(node)
   return undefined

package/src/PinInput/PinInputInput.vue

@@ -21,13 +21,16 @@ const props = withDefaults(defineProps<PinInputInputProps>(), {
 })
 
 const context = injectPinInputRootContext()
-const inputElements = computed(() => Array.from(context.inputElements!.value))
+const inputElements = computed(() => [...context.inputElements!.value])
 const currentValue = computed(() => context.currentModelValue.value[props.index])
 
 const disabled = computed(() => props.disabled || context.disabled.value)
 const isOtpMode = computed(() => context.otp.value)
 const isPasswordMode = computed(() => context.mask.value)
 
+const NUMBER_REG = /^\d*$/
+const NON_NUMBER_REG = /\D/g
+
 const { primitiveElement, currentElement } = usePrimitiveElement()
 function handleInput(event: InputEvent) {
   const target = event.target as HTMLInputElement
@@ -37,8 +40,8 @@ function handleInput(event: InputEvent) {
     return
   }
 
-  if (context.isNumericMode.value && !/^\d*$/.test(target.value)) {
-    target.value = target.value.replace(/\D/g, '')
+  if (context.isNumericMode.value && !NUMBER_REG.test(target.value)) {
+    target.value = target.value.replace(NON_NUMBER_REG, '')
     return
   }
 
@@ -127,7 +130,10 @@ function handlePaste(event: ClipboardEvent) {
   if (!clipboardData)
     return
 
-  const values = clipboardData.getData('text')
+  const rawValues = clipboardData.getData('text')
+  const values = context.isNumericMode.value
+    ? rawValues.replace(NON_NUMBER_REG, '')
+    : rawValues
   handleMultipleCharacter(values)
 }
 
@@ -138,10 +144,15 @@ function handleMultipleCharacter(values: string) {
   for (let i = initialIndex; i < lastIndex; i++) {
     const input = inputElements.value[i]
     const value = values[i - initialIndex]
-    if (context.isNumericMode.value && !/^\d*$/.test(value))
-      continue
-
-    tempModelValue[i] = value
+    if (context.isNumericMode.value) {
+      const num = Number.parseInt(value)
+      if (Number.isNaN(num))
+        continue
+      tempModelValue[i] = num
+    }
+    else {
+      tempModelValue[i] = value
+    }
     input.focus()
   }
   context.modelValue.value = tempModelValue

package/src/Popper/PopperArrow.vue

@@ -14,6 +14,7 @@ export interface PopperArrowProps extends ArrowProps, PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
 import { computed } from 'vue'
 import { useForwardExpose } from '@/shared'
 import Arrow from '@/shared/component/Arrow.vue'
@@ -36,8 +37,8 @@ const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])
 
 <template>
   <span
-    :ref="(el: HTMLElement) => {
-      contentContext.onArrowChange(el)
+    :ref="(el: Element | ComponentPublicInstance | null) => {
+      contentContext.onArrowChange((el as HTMLElement) ?? undefined)
       return undefined
     }"
     :style="{

package/src/RovingFocus/RovingFocusItem.vue

@@ -97,7 +97,7 @@ function handleKeydown(event: KeyboardEvent) {
       :as="as"
       :as-child="asChild"
       @mousedown="
-        (event) => {
+        (event: MouseEvent) => {
           // We prevent focusing non-focusable items on `mousedown`.
           // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
           if (!focusable) event.preventDefault();

package/src/ScrollArea/ScrollAreaScrollbarGlimpse.vue

@@ -65,10 +65,7 @@ const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
 watchEffect((onCleanup) => {
   if (state.value === 'glimpse') {
-    const timeId = window.setTimeout(
-      () => dispatch('HIDE'),
-      rootContext.scrollHideDelay.value,
-    )
+    const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, 'HIDE')
 
     onCleanup(() => {
       window.clearTimeout(timeId)
@@ -78,10 +75,7 @@ watchEffect((onCleanup) => {
 
 watchEffect((onCleanup) => {
   if (state.value === 'idle') {
-    const timeId = window.setTimeout(
-      () => dispatch('HIDE'),
-      rootContext.scrollHideDelay.value,
-    )
+    const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, 'HIDE')
 
     onCleanup(() => {
       window.clearTimeout(timeId)

package/src/ScrollArea/ScrollAreaScrollbarScroll.vue

@@ -44,10 +44,7 @@ const visible = computed(() => state.value !== 'hidden')
 
 watchEffect((onCleanup) => {
   if (state.value === 'idle') {
-    const timeId = window.setTimeout(
-      () => dispatch('HIDE'),
-      rootContext.scrollHideDelay.value,
-    )
+    const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, 'HIDE')
 
     onCleanup(() => {
       window.clearTimeout(timeId)

package/src/Select/SelectContentImpl.vue

@@ -301,8 +301,9 @@ provideSelectContentContext({
           v-bind="{ ...$attrs, ...forwardedProps }"
           :id="rootContext.contentId"
           :ref="
-            (vnode: ComponentPublicInstance) => {
-              const el = unrefElement(vnode) as HTMLElement | undefined
+            (vnode: Element | ComponentPublicInstance | null) => {
+              if (!vnode) return undefined
+              const el = unrefElement(vnode as ComponentPublicInstance) as HTMLElement | undefined
               // special case for PopperContent
               if (el?.hasAttribute('data-reka-popper-content-wrapper'))
                 content = el.firstElementChild as HTMLElement

package/src/Select/SelectItem.vue

@@ -169,7 +169,7 @@ provideSelectItemContext({
       @focus="isFocused = true"
       @blur="isFocused = false"
       @pointerup="handleSelectCustomEvent"
-      @pointerdown="(event) => {
+      @pointerdown="(event: PointerEvent) => {
         (event.currentTarget as HTMLElement).focus({ preventScroll: true })
       }"
       @touchend.prevent.stop

package/src/Select/SelectItemAlignedPosition.vue

@@ -145,7 +145,7 @@ function position() {
       = contentTopToItemMiddle <= topEdgeToTriggerMiddle
 
     if (willAlignWithoutTopOverflow) {
-      const isLastItem = selectedItem.value === items[items.length - 1]
+      const isLastItem = selectedItem.value === items.at(-1)
       contentWrapperElement.value.style.bottom = `${0}px`
       const viewportOffsetBottom
         = contentElement.value.clientHeight

package/src/Select/SelectRoot.vue

@@ -201,7 +201,7 @@ provideSelectRootContext({
     />
 
     <BubbleSelect
-      v-if="isFormControl"
+      v-if="isFormControl && name"
       :key="nativeSelectKey"
       aria-hidden="true"
       tabindex="-1"

package/src/Select/SelectTrigger.vue

@@ -111,7 +111,7 @@ function handlePointerOpen(event: PointerEvent) {
         }
       "
       @keydown="
-        (event) => {
+        (event: KeyboardEvent) => {
           const isTypingAhead = search !== '';
           const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
           if (!isModifierKey && event.key.length === 1)

package/src/Select/index.ts

@@ -19,6 +19,7 @@ export {
 export {
   injectSelectItemContext,
   default as SelectItem,
+  type SelectItemEmits,
   type SelectItemProps,
   type SelectEvent as SelectItemSelectEvent,
 } from './SelectItem.vue'

package/src/Slider/SliderImpl.vue

@@ -29,7 +29,7 @@ const rootContext = injectSliderRootContext()
   <Primitive
     data-slider-impl
     v-bind="props"
-    @keydown="(event) => {
+    @keydown="(event: KeyboardEvent) => {
       if (event.key === 'Home') {
         emits('homeKeyDown', event)
         // Prevent scrolling to page start
@@ -46,7 +46,7 @@ const rootContext = injectSliderRootContext()
         event.preventDefault();
       }
     }"
-    @pointerdown="(event) => {
+    @pointerdown="(event: PointerEvent) => {
       const target = event.target as HTMLElement;
       target.setPointerCapture(event.pointerId);
       // Prevent browser focus behaviour because we focus a thumb manually when values change.
@@ -60,11 +60,11 @@ const rootContext = injectSliderRootContext()
         emits('slideStart', event)
       }
     }"
-    @pointermove="(event) => {
+    @pointermove="(event: PointerEvent) => {
       const target = event.target as HTMLElement;
       if (target.hasPointerCapture(event.pointerId)) emits('slideMove', event);
     }"
-    @pointerup="(event) => {
+    @pointerup="(event: PointerEvent) => {
       const target = event.target as HTMLElement;
       if (target.hasPointerCapture(event.pointerId)) {
         target.releasePointerCapture(event.pointerId);

package/src/Tabs/TabsTrigger.vue

@@ -51,7 +51,7 @@ const isSelected = computed(() => props.value === rootContext.modelValue.value)
       :disabled="disabled"
       :data-disabled="disabled ? '' : undefined"
       :data-orientation="rootContext.orientation.value"
-      @mousedown.left="(event) => {
+      @mousedown.left="(event: MouseEvent) => {
         // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
         // but not when the control key is pressed (avoiding MacOS right click)
         if (!disabled && event.ctrlKey === false) {

package/src/TagsInput/TagsInputInput.vue

@@ -24,13 +24,22 @@ const props = withDefaults(defineProps<TagsInputInputProps>(), {
 const context = injectTagsInputRootContext()
 const { forwardRef, currentElement } = useForwardExpose()
 
-function handleBlur(event: Event) {
+function handleBlur(event: FocusEvent) {
   context.selectedElement.value = undefined
 
   if (!context.addOnBlur.value)
     return
 
   const target = event.target as HTMLInputElement
+
+  // If the blur is caused by clicking an option within the content,
+  // we don't trigger the `addOnBlur` action,
+  // because the clicked option should be added instead of the input's current value.
+  const relatedTarget = event.relatedTarget as HTMLElement | null
+  const controlledId = target.getAttribute('aria-controls')
+  if (controlledId && relatedTarget?.closest(`#${CSS.escape(controlledId)}`))
+    return
+
   if (!target.value)
     return
 

package/src/Toast/ToastRootImpl.vue

@@ -82,7 +82,7 @@ const closeTimerRef = ref(0)
 const remainingTime = ref(duration.value)
 
 const remainingRaf = useRafFn(() => {
-  const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value
+  const elapsedTime = Date.now() - closeTimerStartTimeRef.value
   remainingTime.value = Math.max(closeTimerRemainingTimeRef.value - elapsedTime, 0)
 }, { fpsLimit: 60 })
 
@@ -95,7 +95,7 @@ function startTimer(duration: number) {
   if (!isClient)
     return
   window.clearTimeout(closeTimerRef.value)
-  closeTimerStartTimeRef.value = new Date().getTime()
+  closeTimerStartTimeRef.value = Date.now()
   closeTimerRef.value = window.setTimeout(handleClose, duration)
 }
 
@@ -133,7 +133,7 @@ watchEffect((cleanupFn) => {
       emits('resume')
     }
     const handlePause = () => {
-      const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value
+      const elapsedTime = Date.now() - closeTimerStartTimeRef.value
       closeTimerRemainingTimeRef.value = closeTimerRemainingTimeRef.value - elapsedTime
       window.clearTimeout(closeTimerRef.value)
       remainingRaf.pause()

package/src/Toast/ToastViewport.vue

@@ -48,7 +48,9 @@ const hasToasts = computed(() => providerContext.toastCount.value > 0)
 const headFocusProxyRef = ref<HTMLElement>()
 const tailFocusProxyRef = ref<HTMLElement>()
 
-const hotkeyMessage = computed(() => hotkey.value.join('+').replace(/Key/g, '').replace(/Digit/g, ''))
+const KEY_RE = /Key/g
+const DIGIT_RE = /Digit/g
+const hotkeyMessage = computed(() => hotkey.value.join('+').replace(KEY_RE, '').replace(DIGIT_RE, ''))
 
 onKeyStroke(hotkey.value, () => {
   currentElement.value.focus()
@@ -172,8 +174,9 @@ function getSortedTabbableCandidates({ tabbingDirection }: { tabbingDirection: '
   >
     <FocusProxy
       v-if="hasToasts"
-      :ref="(node: ComponentPublicInstance) => {
-        headFocusProxyRef = unrefElement(node) as HTMLElement
+      :ref="(node: Element | ComponentPublicInstance | null) => {
+        if (!node) return undefined
+        headFocusProxyRef = unrefElement(node as ComponentPublicInstance) as HTMLElement
         return undefined
       }"
       @focus-from-outside-viewport="() => {
@@ -196,8 +199,9 @@ function getSortedTabbableCandidates({ tabbingDirection }: { tabbingDirection: '
     </CollectionSlot>
     <FocusProxy
       v-if="hasToasts"
-      :ref="(node: ComponentPublicInstance) => {
-        tailFocusProxyRef = unrefElement(node) as HTMLElement
+      :ref="(node: Element | ComponentPublicInstance | null) => {
+        if (!node) return undefined
+        tailFocusProxyRef = unrefElement(node as ComponentPublicInstance) as HTMLElement
         return undefined
       }"
       @focus-from-outside-viewport="() => {

package/src/Tooltip/TooltipContentImpl.vue

@@ -85,7 +85,7 @@ onMounted(() => {
     const target = event.target as HTMLElement
     if (target?.contains(rootContext.trigger.value!))
       rootContext.onClose()
-  })
+  }, { capture: true })
   // Close this tooltip if another one opens
   useEventListener(window, TOOLTIP_OPEN, rootContext.onClose)
 })

package/src/Tree/TreeItem.vue

@@ -178,9 +178,9 @@ defineExpose({
       :data-selected="isSelected ? '' : undefined"
       :data-expanded="isExpanded ? '' : undefined"
       @keydown.enter.space.self.prevent="handleSelectCustomEvent"
-      @keydown.right.prevent="(ev) => rootContext.dir.value === 'ltr' ? handleKeydownRight(ev) : handleKeydownLeft(ev)"
-      @keydown.left.prevent="(ev) => rootContext.dir.value === 'ltr' ? handleKeydownLeft(ev) : handleKeydownRight(ev)"
-      @click.stop="(ev) => {
+      @keydown.right.prevent="(ev: KeyboardEvent) => rootContext.dir.value === 'ltr' ? handleKeydownRight(ev) : handleKeydownLeft(ev)"
+      @keydown.left.prevent="(ev: KeyboardEvent) => rootContext.dir.value === 'ltr' ? handleKeydownLeft(ev) : handleKeydownRight(ev)"
+      @click.stop="(ev: PointerEvent) => {
         handleSelectCustomEvent(ev)
         handleToggleCustomEvent(ev)
       }"

package/src/Tree/TreeVirtualizer.vue

@@ -134,7 +134,7 @@ rootContext.virtualKeydownHook.on((event) => {
     virtualizer.value.scrollToIndex(index)
     requestAnimationFrame(() => {
       const items = getItems()
-      const item = intent === 'first' ? items[0] : items[items.length - 1]
+      const item = intent === 'first' ? items[0] : items.at(-1)!
       item.ref.focus()
     })
   }

package/src/YearPicker/YearPickerRoot.vue

@@ -202,7 +202,7 @@ const { isInvalid, isYearSelected } = useYearPickerState({
 
 watch(modelValue, (_modelValue) => {
   if (Array.isArray(_modelValue) && _modelValue.length) {
-    const lastValue = _modelValue[_modelValue.length - 1]
+    const lastValue = _modelValue.at(-1)
     if (lastValue && !isSameYear(placeholder.value, lastValue))
       onPlaceholderChange(lastValue)
   }