@hina-ui/vue 1.7.5 → 1.7.7

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

package/src/lib/useDirection.ts

@@ -1,5 +1,6 @@
 import { computed, shallowRef, watchEffect } from 'vue'
-import { injectConfigProviderContext, type Direction } from 'reka-ui'
+import { injectConfigProviderContext } from '../primitives/utils/config'
+import type { Direction } from '../primitives/utils/useDirection'
 
 export function useDirection(dir: () => Direction | undefined) {
   const root = shallowRef<HTMLElement>()

package/src/lib/virtual/navigation.ts

@@ -1,26 +1 @@
-export function nextEnabled(
-  length: number,
-  from: number,
-  step: number,
-  disabled: (index: number) => boolean,
-) {
-  for (let index = from; index >= 0 && index < length; index += step)
-    if (!disabled(index)) return index
-  return -1
-}
-
-export function typeaheadMatch(
-  labels: readonly string[],
-  query: string,
-  current: number,
-  disabled: (index: number) => boolean,
-) {
-  const normalized = query.toLocaleLowerCase()
-  const repeated = [...normalized].every(char => char === normalized[0])
-  const search = repeated ? normalized[0]! : normalized
-  for (let offset = repeated ? 1 : 0; offset <= labels.length; offset++) {
-    const index = (Math.max(0, current) + offset) % labels.length
-    if (!disabled(index) && labels[index]?.toLocaleLowerCase().startsWith(search)) return index
-  }
-  return -1
-}
+export * from '../../../../shared/src/lib/virtual/navigation'

package/src/lib/virtual/useVirtualCollection.ts

@@ -2,6 +2,17 @@ import { computed, nextTick, onScopeDispose, shallowRef, watch, type Ref } from
 import { useResizeObserver } from '@vueuse/core'
 import { defaultRangeExtractor, observeElementRect } from '@tanstack/vue-virtual'
 import { useVirtualWindow, virtualFlow } from './useVirtualWindow'
+import {
+  VIRTUAL_RECT,
+  centeredOffset,
+  collectionEstimator,
+  collectionOverscan,
+  fallbackRect,
+  mergeRange,
+  overscrolledOffset,
+  scrollMargin,
+  virtualConfig,
+} from '../../../../shared/src/lib/virtual/collection'
 import type { VirtualizeOptions } from './types'
 
 export function useVirtualCollection<T>(options: {
@@ -16,44 +27,26 @@ export function useVirtualCollection<T>(options: {
   estimate?: (item: T) => number
 }) {
   const margin = shallowRef(0)
-  const finite = (value: number | undefined, fallback: number) =>
-    value !== undefined && Number.isFinite(value) ? value : fallback
-  const config = computed(() =>
-    typeof options.config() === 'object'
-      ? (options.config() as Exclude<VirtualizeOptions, boolean>)
-      : {},
-  )
+  const config = computed(() => virtualConfig(options.config()))
   const virtualizer = useVirtualWindow(
     computed(() => {
       const items = options.items()
       const retained = options.retain?.() ?? []
       const initialIndex = options.initialIndex?.() ?? -1
-      const estimateSize = (index: number) =>
-        Math.max(1, finite(config.value.estimateSize, options.estimate?.(items[index]!) ?? 36))
+      const estimateSize = collectionEstimator(items, config.value, options.estimate)
       return {
         count: items.length,
         getScrollElement: () => options.viewport.value ?? null,
-        getItemKey: index => options.key(items[index]!),
+        getItemKey: (index: number) => options.key(items[index]!),
         estimateSize,
-        overscan: Math.max(0, Math.floor(finite(config.value.overscan, 6))),
-        initialRect: { width: 320, height: 320 },
-        initialOffset: () => {
-          if (initialIndex < 0 || initialIndex >= items.length) return 0
-          let offset = (estimateSize(initialIndex) - 320) / 2
-          for (let index = 0; index < initialIndex; index++) offset += estimateSize(index)
-          return Math.max(0, offset)
-        },
+        overscan: collectionOverscan(config.value),
+        initialRect: VIRTUAL_RECT,
+        initialOffset: () => centeredOffset(initialIndex, items.length, estimateSize),
         scrollMargin: margin.value,
         observeElementRect: (instance, callback) =>
-          observeElementRect(instance, rect =>
-            callback({ width: rect.width || 320, height: rect.height || 320 }),
-          ),
-        rangeExtractor: range => {
-          const indexes = [...defaultRangeExtractor(range), ...retained]
-          return [...new Set([...indexes, ...(options.include?.(indexes) ?? [])])]
-            .filter(index => index >= 0 && index < items.length)
-            .sort((a, b) => a - b)
-        },
+          observeElementRect(instance, rect => callback(fallbackRect(rect))),
+        rangeExtractor: range =>
+          mergeRange(defaultRangeExtractor(range), retained, items.length, options.include),
       }
     }),
   )
@@ -73,21 +66,10 @@ export function useVirtualCollection<T>(options: {
     else if (options.viewport.value && element instanceof HTMLElement && element.isConnected)
       virtualizer.value.measureElement(element)
   }
-  function layoutTop(element: HTMLElement) {
-    let top = 0
-    for (
-      let node: HTMLElement | null = element;
-      node;
-      node = node.offsetParent as HTMLElement | null
-    )
-      top += node.offsetTop
-    return top
-  }
   async function refresh() {
     const viewport = options.viewport.value
     const body = options.body.value
-    if (viewport && body?.isConnected)
-      margin.value = Math.max(0, layoutTop(body) - layoutTop(viewport))
+    if (viewport && body?.isConnected) margin.value = scrollMargin(body, viewport)
     virtualizer.value.measure()
     await nextTick()
     for (const child of options.body.value?.children ?? []) measure(child)
@@ -112,14 +94,13 @@ export function useVirtualCollection<T>(options: {
     async () => {
       await nextTick()
       const viewport = options.viewport.value
-      if (
-        viewport &&
-        viewport.scrollTop > Math.max(0, virtualizer.value.getTotalSize() - viewport.clientHeight)
-      ) {
-        virtualizer.value.scrollToOffset(
-          Math.max(0, virtualizer.value.getTotalSize() - viewport.clientHeight),
-        )
-      }
+      if (!viewport) return
+      const offset = overscrolledOffset(
+        viewport.scrollTop,
+        virtualizer.value.getTotalSize(),
+        viewport.clientHeight,
+      )
+      if (offset !== undefined) virtualizer.value.scrollToOffset(offset)
     },
   )
   onScopeDispose(() => {

package/src/lib/virtual/useVirtualWindow.ts

@@ -1,10 +1,8 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
-import {
-  measureElement,
-  useVirtualizer,
-  type VirtualizerOptions,
-  type VirtualItem,
-} from '@tanstack/vue-virtual'
+import { measureElement, useVirtualizer, type VirtualizerOptions } from '@tanstack/vue-virtual'
+import { measuredSize, scrollPosition } from '../../../../shared/src/lib/virtual/flow'
+
+export { virtualFlow } from '../../../../shared/src/lib/virtual/flow'
 
 type Options = Omit<
   VirtualizerOptions<HTMLElement, HTMLElement>,
@@ -22,18 +20,21 @@ export function useVirtualWindow(options: MaybeRefOrGetter<Options>) {
     computed(() => ({
       useAnimationFrameWithResizeObserver: true,
       measureElement: (element, entry, instance) => {
-        const size = measureElement(element, entry, instance)
         const index = instance.indexFromElement(element)
-        return size > 0
-          ? size
-          : (instance.itemSizeCache.get(instance.options.getItemKey(index)) ??
-              instance.options.estimateSize(index))
+        return measuredSize(
+          measureElement(element, entry, instance),
+          instance.itemSizeCache.get(instance.options.getItemKey(index)),
+          () => instance.options.estimateSize(index),
+        )
       },
       scrollToFn: (offset, { adjustments = 0, behavior }, instance) => {
         instance.scrollElement?.scrollTo({
-          [instance.options.horizontal ? 'left' : 'top']:
-            (offset + adjustments) *
-            (instance.options.horizontal && instance.options.isRtl ? -1 : 1),
+          ...scrollPosition(
+            offset,
+            adjustments,
+            instance.options.horizontal,
+            instance.options.isRtl,
+          ),
           behavior,
         })
       },
@@ -41,14 +42,3 @@ export function useVirtualWindow(options: MaybeRefOrGetter<Options>) {
     })),
   )
 }
-
-export function virtualFlow(items: VirtualItem[], total: number, margin = 0) {
-  return {
-    entries: items.map((item, index) => ({
-      ...item,
-      gapBefore: index ? Math.max(0, item.start - items[index - 1]!.end) : 0,
-    })),
-    before: Math.max(0, (items[0]?.start ?? margin) - margin),
-    after: Math.max(0, total - ((items.at(-1)?.end ?? margin) - margin)),
-  }
-}