@hina-ui/vue 1.7.5 → 1.7.6

package/src/lib/collapse.ts

@@ -5,36 +5,13 @@ import {
   shallowRef,
   type ComponentPublicInstance,
 } from 'vue'
+import {
+  collapseHooks,
+  writeCollapseGap,
+  type CollapseAxis,
+} from '../../../shared/src/lib/collapse'
 
-export type CollapseAxis = 'y' | 'x'
-
-export function collapseGapOf(parent: Element | null, axis: CollapseAxis = 'y') {
-  if (!parent) return '0px'
-  const style = getComputedStyle(parent)
-  const stacked = style.display.includes('flex') || style.display.includes('grid')
-  const gap = axis === 'y' ? style.rowGap : style.columnGap
-  return stacked && gap !== 'normal' ? gap : '0px'
-}
-
-export function writeCollapseGap(el: Element, parent: Element | null, axis: CollapseAxis = 'y') {
-  ;(el as HTMLElement).style.setProperty('--hn-collapse-gap', collapseGapOf(parent, axis))
-}
-
-export function collapseHooks(axis: CollapseAxis = 'y', parentOf?: () => Element | null) {
-  function beforeEnter(el: Element) {
-    writeCollapseGap(el, el.parentElement ?? parentOf?.() ?? null, axis)
-  }
-
-  function beforeLeave(el: Element) {
-    writeCollapseGap(el, el.parentElement, axis)
-  }
-
-  function afterEnter(el: Element) {
-    ;(el as HTMLElement).style.removeProperty('--hn-collapse-gap')
-  }
-
-  return { beforeEnter, afterEnter, beforeLeave }
-}
+export * from '../../../shared/src/lib/collapse'
 
 export function useCollapseHooks(axis: CollapseAxis = 'y') {
   const instance = getCurrentInstance()

package/src/lib/date.ts

@@ -1,111 +1 @@
-import {
-  CalendarDate,
-  CalendarDateTime,
-  Time,
-  parseDate,
-  parseDateTime,
-  parseTime,
-  type DateValue,
-} from '@internationalized/date'
-
-export type DateGranularity = 'day' | 'hour' | 'minute' | 'second'
-export type TimeGranularity = 'hour' | 'minute' | 'second'
-
-const TIME_LENGTH: Record<TimeGranularity, number> = {
-  hour: 'HH:mm'.length,
-  minute: 'HH:mm'.length,
-  second: 'HH:mm:ss'.length,
-}
-
-export function parseTimeValue(value: string | null | undefined): Time | undefined {
-  if (!value) return undefined
-  try {
-    return parseTime(value)
-  } catch {
-    return undefined
-  }
-}
-
-export function formatTimeValue(
-  value: { hour: number; minute: number; second: number },
-  granularity: TimeGranularity = 'minute',
-): string {
-  return new Time(value.hour, value.minute, value.second)
-    .toString()
-    .slice(0, TIME_LENGTH[granularity])
-}
-
-export function splitDateTime(value: string | null | undefined) {
-  if (!value) return { date: null, time: null }
-  const [date, time] = value.split('T')
-  return { date: date || null, time: time || null }
-}
-
-export function joinDateTime(date: string | null, time: string | null) {
-  return date && time ? `${date}T${time}` : null
-}
-
-export interface DateRangeValue {
-  start: string | null
-  end: string | null
-}
-
-interface DateRangeParts {
-  start: DateValue | undefined
-  end: DateValue | undefined
-}
-
-const LENGTH: Record<DateGranularity, number> = {
-  day: 'YYYY-MM-DD'.length,
-  hour: 'YYYY-MM-DDTHH:mm'.length,
-  minute: 'YYYY-MM-DDTHH:mm'.length,
-  second: 'YYYY-MM-DDTHH:mm:ss'.length,
-}
-
-export function parseDateValue(
-  value: string | null | undefined,
-  granularity: DateGranularity = 'day',
-): DateValue | undefined {
-  if (!value) return undefined
-  try {
-    if (granularity === 'day') return parseDate(value.slice(0, LENGTH.day))
-    return value.includes('T')
-      ? parseDateTime(value)
-      : parseDate(value).toDate('UTC')
-        ? toDateTime(parseDate(value))
-        : undefined
-  } catch {
-    return undefined
-  }
-}
-
-export function formatDateValue(value: DateValue, granularity: DateGranularity = 'day'): string {
-  if (granularity === 'day') return new CalendarDate(value.year, value.month, value.day).toString()
-  const time = value instanceof CalendarDateTime ? value : toDateTime(value)
-  return time.toString().slice(0, LENGTH[granularity])
-}
-
-export function parseDateRange(
-  value: DateRangeValue | null | undefined,
-  granularity: DateGranularity = 'day',
-): DateRangeParts {
-  return {
-    start: parseDateValue(value?.start, granularity),
-    end: parseDateValue(value?.end, granularity),
-  }
-}
-
-export function formatDateRange(
-  value: DateRangeParts,
-  granularity: DateGranularity = 'day',
-): DateRangeValue | null {
-  if (!value.start && !value.end) return null
-  return {
-    start: value.start ? formatDateValue(value.start, granularity) : null,
-    end: value.end ? formatDateValue(value.end, granularity) : null,
-  }
-}
-
-function toDateTime(value: DateValue) {
-  return new CalendarDateTime(value.year, value.month, value.day)
-}
+export * from '../../../shared/src/lib/date'

package/src/lib/field-focus.ts

@@ -1,36 +1 @@
-const INTERACTIVE = 'button, a, input, textarea, select, [contenteditable], [role="button"]'
-const CONTROL = 'input:not([type="hidden"]), textarea'
-
-function controlOf(node: Element) {
-  const control = node.matches(CONTROL) ? node : node.querySelector(CONTROL)
-  return control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement
-    ? control
-    : null
-}
-
-export function focusFieldFrom(root: HTMLElement, target: HTMLElement) {
-  if (target.closest(INTERACTIVE)) return null
-  const segments = Array.from(root.children)
-  const from = segments.findIndex(segment => segment.contains(target))
-  const own = from >= 0 ? controlOf(segments[from]!) : null
-  if (own && !own.disabled) {
-    own.focus()
-    return own
-  }
-  const after = segments.slice(from + 1)
-  const before = segments.slice(0, Math.max(from, 0)).reverse()
-  for (const [list, caret] of [
-    [after, 'start'],
-    [before, 'end'],
-  ] as const) {
-    for (const segment of list) {
-      const control = controlOf(segment)
-      if (!control || control.disabled) continue
-      control.focus()
-      const at = caret === 'start' ? 0 : control.value.length
-      control.setSelectionRange(at, at)
-      return control
-    }
-  }
-  return null
-}
+export * from '../../../shared/src/lib/field-focus'

package/src/lib/overlay-anchor.ts

@@ -1,26 +1,12 @@
 import { shallowRef, watch, type Ref } from 'vue'
+import {
+  createOverlayReference,
+  type OverlayAnchor,
+  type OverlayPositionStrategy,
+  type OverlayReference,
+} from '../../../shared/src/lib/overlay-anchor'
 
-export type OverlayAnchor =
-  | HTMLElement
-  | {
-      getBoundingClientRect: () => Pick<
-        DOMRect,
-        'x' | 'y' | 'width' | 'height' | 'top' | 'right' | 'bottom' | 'left'
-      >
-      contextElement?: Element
-    }
-export type OverlayPositionStrategy = 'optimized' | 'always'
-
-export function overlayAnchorElement(anchor?: OverlayAnchor | null): HTMLElement | undefined {
-  return anchor && 'nodeType' in anchor ? anchor : undefined
-}
-
-export function overlayAnchorContext(anchor?: OverlayAnchor | null): Element | undefined {
-  return (
-    overlayAnchorElement(anchor) ??
-    (anchor && 'contextElement' in anchor ? anchor.contextElement : undefined)
-  )
-}
+export * from '../../../shared/src/lib/overlay-anchor'
 
 export function useOverlayAnchor(
   source: () => OverlayAnchor | null | undefined,
@@ -29,7 +15,7 @@ export function useOverlayAnchor(
   strategy: () => OverlayPositionStrategy,
   direction: () => 'ltr' | 'rtl' | undefined = () => undefined,
 ) {
-  const reference = shallowRef<Exclude<OverlayAnchor, HTMLElement>>()
+  const reference = shallowRef<OverlayReference>()
 
   let current: OverlayAnchor | undefined
 
@@ -42,22 +28,10 @@ export function useOverlayAnchor(
         return
       }
       if (!anchor || (!active && reference.value && anchor !== current)) return
-      const contextElement = overlayAnchorContext(anchor)
-      if (contextElement && !contextElement.isConnected) return
+      const next = createOverlayReference(anchor, () => source() === anchor)
+      if (!next) return
       current = anchor
-      const measure = () => {
-        const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect()
-        return { x, y, width, height, top, right, bottom, left }
-      }
-      let rect = measure()
-      reference.value = {
-        contextElement,
-        getBoundingClientRect: () => {
-          if (source() === anchor && (!contextElement || contextElement.isConnected))
-            rect = measure()
-          return rect
-        },
-      }
+      reference.value = next
     },
     { immediate: true, flush: 'post' },
   )

package/src/lib/pointer-corridor.ts

@@ -1,26 +1 @@
-type Point = { x: number; y: number }
-const cross = (a: Point, b: Point, c: Point) =>
-  (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x)
-
-export function inPointerCorridor(point: Point, first: DOMRect, second: DOMRect) {
-  const points = [first, second]
-    .flatMap(rect => [
-      { x: rect.left - 6, y: rect.top - 6 },
-      { x: rect.right + 6, y: rect.top - 6 },
-      { x: rect.left - 6, y: rect.bottom + 6 },
-      { x: rect.right + 6, y: rect.bottom + 6 },
-    ])
-    .sort((a, b) => a.x - b.x || a.y - b.y)
-  const half = (values: Point[]) => {
-    const hull: Point[] = []
-    for (const value of values) {
-      while (hull.length > 1 && cross(hull[hull.length - 2]!, hull[hull.length - 1]!, value) <= 0)
-        hull.pop()
-      hull.push(value)
-    }
-    hull.pop()
-    return hull
-  }
-  const hull = [...half(points), ...half([...points].reverse())]
-  return hull.every((a, i) => cross(a, hull[(i + 1) % hull.length]!, point) >= 0)
-}
+export * from '../../../shared/src/lib/pointer-corridor'

package/src/lib/reka/useVirtualChoices.ts

@@ -7,18 +7,23 @@ import {
   useFilter,
 } from 'reka-ui'
 import type ScrollArea from '../../components/scroll-area/ScrollArea.vue'
-import { isOptionGroup, type SelectItems, type SelectOption } from '../../components/select/types'
+import type { SelectItems, SelectOption } from '../../components/select/types'
 import { useVirtualCollection } from '../virtual/useVirtualCollection'
-import { nextEnabled, typeaheadMatch } from '../virtual/navigation'
+import { nextEnabled } from '../virtual/navigation'
 import type { VirtualizeOptions } from '../virtual/types'
-
-interface ChoiceRow<T> {
-  key: string
-  label: string
-  option?: T
-  group?: number
-  position: number
-}
+import {
+  choiceAttrs,
+  choiceDisabled,
+  choiceEstimate,
+  choiceGroups,
+  choiceKeyAction,
+  choiceRangeValues,
+  choiceRows,
+  choiceSize,
+  createChoiceTypeahead,
+  enabledChoiceValues,
+  selectedChoice,
+} from '../../../../shared/src/lib/virtual/choices'
 
 export function useVirtualChoices<T extends SelectOption>(props: {
   options: SelectItems<T>
@@ -35,43 +40,19 @@ export function useVirtualChoices<T extends SelectOption>(props: {
   const activeKey = shallowRef<string>()
   const id = useId()
   const { contains } = useFilter({ sensitivity: 'base' })
-  const rows = computed(() => {
-    const result: ChoiceRow<T>[] = []
-    const query = combobox && !combobox.ignoreFilter.value ? combobox.filterSearch.value : ''
-    let position = 0
-    props.options.forEach((item, groupIndex) => {
-      if (isOptionGroup(item)) {
-        const options = item.options.filter(option => !query || contains(option.label, query))
-        if (!options.length) return
-        const group = result.length
-        result.push({ key: `group:${groupIndex}`, label: item.label, position: 0 })
-        for (const option of options)
-          result.push({
-            key: `option:${typeof option.value}:${option.value}`,
-            label: option.label,
-            option,
-            group,
-            position: ++position,
-          })
-      } else if (!query || contains(item.label, query))
-        result.push({
-          key: `option:${typeof item.value}:${item.value}`,
-          label: item.label,
-          option: item,
-          position: ++position,
-        })
-    })
-    return result
-  })
-  const size = computed(() => rows.value.filter(row => row.option).length)
-  const disabled = (index: number) =>
-    !rows.value[index]?.option || !!rows.value[index]?.option?.disabled
+  const rows = computed(() =>
+    choiceRows(
+      props.options,
+      combobox && !combobox.ignoreFilter.value ? combobox.filterSearch.value : '',
+      contains,
+    ),
+  )
+  const size = computed(() => choiceSize(rows.value))
+  const disabled = (index: number) => choiceDisabled(rows.value, index)
   const first = () => nextEnabled(rows.value.length, 0, 1, disabled)
-  const selectedIndex = computed(() => {
-    const model = select?.modelValue.value ?? listbox?.modelValue.value
-    const value = Array.isArray(model) ? model[0] : model
-    return rows.value.findIndex(row => row.option?.value === value && !!row.option)
-  })
+  const selectedIndex = computed(() =>
+    selectedChoice(rows.value, select?.modelValue.value ?? listbox?.modelValue.value),
+  )
   const activeIndex = computed(() => rows.value.findIndex(row => row.key === activeKey.value))
   const collection = useVirtualCollection({
     items: () => rows.value,
@@ -81,11 +62,8 @@ export function useVirtualChoices<T extends SelectOption>(props: {
     config: () => props.virtualize,
     initialIndex: props.kind === 'listbox' ? undefined : () => selectedIndex.value,
     retain: () => [activeIndex.value, selectedIndex.value],
-    include: indexes =>
-      indexes.flatMap(index =>
-        rows.value[index]?.group === undefined ? [] : [rows.value[index]!.group!],
-      ),
-    estimate: row => (row.option ? (row.option.description ? 54 : 36) : 30),
+    include: indexes => choiceGroups(rows.value, indexes),
+    estimate: choiceEstimate,
   })
   let generation = 0
   let disposed = false
@@ -115,8 +93,7 @@ export function useVirtualChoices<T extends SelectOption>(props: {
     if (wrapper && body.value?.contains(wrapper))
       activeKey.value = rows.value[Number(wrapper.dataset.index)]?.key
   }
-  let search = ''
-  let searchedAt = 0
+  const typeahead = createChoiceTypeahead()
   function keydown(event: KeyboardEvent) {
     if (
       event.isComposing ||
@@ -125,90 +102,43 @@ export function useVirtualChoices<T extends SelectOption>(props: {
       listbox?.disabled.value
     )
       return
-    const input =
-      event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement
-    const meta = event.ctrlKey || event.metaKey || event.altKey
-    const current = activeIndex.value
-    if (Date.now() - searchedAt > 1000) search = ''
-    let target = -1
-    if (
-      (event.ctrlKey || event.metaKey) &&
-      !event.altKey &&
-      event.key.toLowerCase() === 'a' &&
-      !input &&
-      listbox?.multiple.value
-    ) {
-      event.preventDefault()
-      event.stopImmediatePropagation()
-      listbox.modelValue.value = rows.value.flatMap(row =>
-        row.option && !row.option.disabled ? [row.option.value] : [],
-      )
+    const action = choiceKeyAction(event, {
+      labels: () => rows.value.map(row => row.label),
+      count: rows.value.length,
+      current: activeIndex.value,
+      input:
+        event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement,
+      multiple: !!listbox?.multiple.value,
+      page: viewport.value?.clientHeight ?? 320,
+      disabled,
+      typeahead,
+    })
+    if (action.type === 'none') return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    if (action.type === 'select-all') {
+      listbox!.modelValue.value = enabledChoiceValues(rows.value)
       return
     }
-    if (meta) return
-    if (event.key === 'ArrowDown') target = nextEnabled(rows.value.length, current + 1, 1, disabled)
-    else if (event.key === 'ArrowUp')
-      target = nextEnabled(
-        rows.value.length,
-        current < 0 ? rows.value.length - 1 : current - 1,
-        -1,
-        disabled,
-      )
-    else if (event.key === 'Home') target = first()
-    else if (event.key === 'End')
-      target = nextEnabled(rows.value.length, rows.value.length - 1, -1, disabled)
-    else if (event.key === 'PageDown' || event.key === 'PageUp') {
-      const step = event.key === 'PageDown' ? 1 : -1
-      target = nextEnabled(
-        rows.value.length,
-        Math.max(
-          0,
-          Math.min(
-            rows.value.length - 1,
-            Math.max(0, current) +
-              step * Math.max(1, Math.floor((viewport.value?.clientHeight ?? 320) / 36)),
-          ),
-        ),
-        step,
-        disabled,
-      )
-    } else if (event.key === 'Enter' || (event.key === ' ' && !input && !search)) {
-      if (current < 0 || disabled(current)) return
-      event.preventDefault()
-      event.stopImmediatePropagation()
+    if (action.type === 'commit') {
       if (select) {
-        select.onValueChange(rows.value[current]!.option!.value)
+        select.onValueChange(rows.value[action.index]!.option!.value)
         if (!select.multiple.value) select.onOpenChange(false)
       } else {
-        void highlight(current, false, false).then(element => element?.click())
+        void highlight(action.index, false, false).then(element => element?.click())
       }
       return
-    } else if (!input && event.key.length === 1) {
-      const now = Date.now()
-      search = (now - searchedAt > 1000 ? '' : search) + event.key
-      searchedAt = now
-      target = typeaheadMatch(
-        rows.value.map(row => row.label),
-        search,
-        current,
-        disabled,
-      )
-    } else return
-    event.preventDefault()
-    event.stopImmediatePropagation()
-    if (target < 0) return
+    }
+    if (action.target < 0) return
     if (
       event.shiftKey &&
       listbox?.multiple.value &&
       listbox.selectionBehavior?.value === 'replace'
     ) {
-      const start = rows.value.findIndex(row => row.option?.value === listbox.firstValue?.value)
-      if (start >= 0)
-        listbox.modelValue.value = rows.value
-          .slice(Math.min(start, target), Math.max(start, target) + 1)
-          .flatMap(row => (row.option && !row.option.disabled ? [row.option.value] : []))
+      const values = choiceRangeValues(rows.value, listbox.firstValue?.value, action.target)
+      if (values) listbox.modelValue.value = values
     }
-    void highlight(target)
+    void highlight(action.target)
   }
   useEventListener(body, 'keydown', keydown, { capture: true })
   useEventListener(() => combobox?.inputElement.value ?? props.input, 'keydown', keydown, {
@@ -283,21 +213,13 @@ export function useVirtualChoices<T extends SelectOption>(props: {
     generation++
     stops.forEach(stop => stop())
   })
-  function itemAttrs(index: number) {
-    const row = rows.value[index]!
-    return {
-      'aria-posinset': row.position,
-      'aria-setsize': size.value,
-      'aria-describedby': row.group === undefined ? undefined : `${id}-${row.group}`,
-    }
-  }
   return {
     area,
     body,
     viewport,
     rows,
     ...collection,
-    itemAttrs,
+    itemAttrs: (index: number) => choiceAttrs(rows.value, index, size.value, id),
     labelId: (index: number) => `${id}-${index}`,
   }
 }

package/src/lib/reka/useVirtualTree.ts

@@ -2,8 +2,14 @@ import { computed, nextTick, onScopeDispose, shallowRef, watch, type Ref } from
 import { useEventListener } from '@vueuse/core'
 import { injectTreeRootContext, type FlattenedItem } from 'reka-ui'
 import { useVirtualCollection } from '../virtual/useVirtualCollection'
-import { nextEnabled, typeaheadMatch } from '../virtual/navigation'
+import { nextEnabled } from '../virtual/navigation'
 import type { VirtualizeOptions } from '../virtual/types'
+import { createChoiceTypeahead } from '../../../../shared/src/lib/virtual/choices'
+import {
+  survivingTreeAncestor,
+  virtualTreeDisabled,
+  virtualTreeKeyTarget,
+} from '../../../../shared/src/lib/virtual/tree'
 
 export function useVirtualTree<T extends { label: string; disabled?: boolean }>(
   props: {
@@ -19,9 +25,7 @@ export function useVirtualTree<T extends { label: string; disabled?: boolean }>(
   const active = shallowRef<string>()
   const index = computed(() => props.items.findIndex(item => item._id === active.value))
   const disabled = (i: number) =>
-    !props.items[i] ||
-    root.disabled.value ||
-    (props.disabled?.(props.items[i]!.value) ?? !!props.items[i]!.value.disabled)
+    virtualTreeDisabled(props.items, i, root.disabled.value, props.disabled)
   const selected = computed(() =>
     props.items.findIndex(item => root.selectedKeys.value.includes(item._id)),
   )
@@ -53,61 +57,20 @@ export function useVirtualTree<T extends { label: string; disabled?: boolean }>(
   }
   const first = () => nextEnabled(props.items.length, 0, 1, disabled)
   const last = () => nextEnabled(props.items.length, props.items.length - 1, -1, disabled)
-  let search = ''
-  let searchedAt = 0
+  const typeahead = createChoiceTypeahead()
   function keydown(event: KeyboardEvent) {
-    if (
-      event.defaultPrevented ||
-      event.isComposing ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.altKey ||
-      root.disabled.value
-    )
-      return
-    const current = index.value
-    const item = props.items[current]
-    let target = -1
-    if (event.key === 'ArrowDown')
-      target = nextEnabled(props.items.length, current + 1, 1, disabled)
-    else if (event.key === 'ArrowUp')
-      target = nextEnabled(props.items.length, current - 1, -1, disabled)
-    else if (event.key === 'Home') target = first()
-    else if (event.key === 'End') target = last()
-    else if (event.key === 'PageDown' || event.key === 'PageUp') {
-      const step = event.key === 'PageDown' ? 1 : -1
-      target = nextEnabled(
-        props.items.length,
-        Math.max(
-          0,
-          Math.min(
-            props.items.length - 1,
-            current + step * Math.max(1, Math.floor((viewport.value?.clientHeight ?? 320) / 36)),
-          ),
-        ),
-        step,
-        disabled,
-      )
-    } else if (event.key === (root.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight')) {
-      if (!item?.hasChildren) return
-      if (!root.expanded.value.includes(item._id)) return
-      const child = nextEnabled(props.items.length, current + 1, 1, disabled)
-      if (props.items[child]?.level === item.level + 1) target = child
-    } else if (event.key === (root.dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft')) {
-      if (!item || root.expanded.value.includes(item._id)) return
-      if (item.parentItem)
-        target = props.items.findIndex(row => row._id === root.getKey(item.parentItem))
-    } else if (event.key.length === 1 && event.key !== ' ') {
-      const now = Date.now()
-      search = (now - searchedAt > 1000 ? '' : search) + event.key
-      searchedAt = now
-      target = typeaheadMatch(
-        props.items.map(row => row.value.label),
-        search,
-        current,
-        disabled,
-      )
-    } else return
+    if (event.defaultPrevented || event.isComposing || root.disabled.value) return
+    const target = virtualTreeKeyTarget(event, {
+      rows: props.items,
+      current: index.value,
+      expanded: root.expanded.value,
+      dir: root.dir.value,
+      page: viewport.value?.clientHeight ?? 320,
+      getKey: root.getKey,
+      disabled,
+      typeahead,
+    })
+    if (target === undefined) return
     event.preventDefault()
     event.stopImmediatePropagation()
     void focus(target)
@@ -122,13 +85,7 @@ export function useVirtualTree<T extends { label: string; disabled?: boolean }>(
     () => props.items,
     (items, old) => {
       if (index.value >= 0 || !active.value) return
-      let removed = old?.find(item => item._id === active.value)
-      let target = -1
-      while (removed?.parentItem && target < 0) {
-        const parent = root.getKey(removed.parentItem)
-        target = items.findIndex(item => item._id === parent)
-        removed = old?.find(item => item._id === parent)
-      }
+      const target = survivingTreeAncestor(items, old, active.value, root.getKey)
       void focus(target >= 0 ? target : first(), body.value?.contains(document.activeElement))
     },
     { flush: 'pre' },