From 560562e5edf6deeaab638c8cc888b49be3db8dd4 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 1 May 2024 19:23:46 +0800
Subject: [PATCH 01/27] chore: wip

---
 packages/radix-vue/src/Tree/TreeGroup.vue     | 43 +++++++++
 packages/radix-vue/src/Tree/TreeGroupList.vue | 28 ++++++
 packages/radix-vue/src/Tree/TreeItem.vue      | 36 ++++++++
 packages/radix-vue/src/Tree/TreeRoot.vue      | 57 ++++++++++++
 packages/radix-vue/src/Tree/index.ts          |  4 +
 .../src/Tree/story/TreeBasic.story.vue        | 87 +++++++++++++++++++
 6 files changed, 255 insertions(+)
 create mode 100644 packages/radix-vue/src/Tree/TreeGroup.vue
 create mode 100644 packages/radix-vue/src/Tree/TreeGroupList.vue
 create mode 100644 packages/radix-vue/src/Tree/TreeItem.vue
 create mode 100644 packages/radix-vue/src/Tree/TreeRoot.vue
 create mode 100644 packages/radix-vue/src/Tree/index.ts
 create mode 100644 packages/radix-vue/src/Tree/story/TreeBasic.story.vue

diff --git a/packages/radix-vue/src/Tree/TreeGroup.vue b/packages/radix-vue/src/Tree/TreeGroup.vue
new file mode 100644
index 000000000..18cc55ca0
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeGroup.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { createContext } from '@/shared'
+import { type Ref, ref } from 'vue'
+
+export interface TreeGroupProps<T extends AcceptableValue> extends TreeItemProps<T> {
+
+}
+
+interface TreeGroupContext {
+  isExpanded: Ref<boolean>
+}
+
+export const [injectTreeGroupContext, provideTreeGroupContext] = createContext<TreeGroupContext>('TreeGroup')
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from '@/shared/types'
+import TreeItem, { type TreeItemProps } from './TreeItem.vue'
+
+const props = defineProps<TreeGroupProps<T>>()
+
+const isExpanded = ref(false)
+function toggleExpand(val?: boolean) {
+  isExpanded.value = val ?? !isExpanded.value
+}
+
+provideTreeGroupContext({
+  isExpanded,
+})
+</script>
+
+<template>
+  <TreeItem
+    :value="props.value"
+    :as="as"
+    :as-child="asChild"
+    @click="toggleExpand"
+    @keydown.right="toggleExpand(true)"
+    @keydown.left.stop="toggleExpand(false)"
+  >
+    <slot />
+  </TreeItem>
+</template>
diff --git a/packages/radix-vue/src/Tree/TreeGroupList.vue b/packages/radix-vue/src/Tree/TreeGroupList.vue
new file mode 100644
index 000000000..fbcb63eaa
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeGroupList.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+export interface TreeGroupListProps<T extends AcceptableValue> extends PrimitiveProps {
+  value?: T
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { Primitive, type PrimitiveProps } from '@/Primitive'
+import type { AcceptableValue } from '@/shared/types'
+import { injectTreeGroupContext } from './TreeGroup.vue'
+
+const props = withDefaults(defineProps<TreeGroupListProps<T>>(), {
+  as: 'ul',
+})
+
+const groupContext = injectTreeGroupContext()
+</script>
+
+<template>
+  <Primitive
+    v-if="groupContext.isExpanded.value"
+    role="group"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
new file mode 100644
index 000000000..72e0261ec
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -0,0 +1,36 @@
+<script lang="ts">
+export interface TreeItemProps<T extends AcceptableValue> extends PrimitiveProps {
+  value: T
+}
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { Primitive, type PrimitiveProps } from '@/Primitive'
+import { RovingFocusItem } from '@/RovingFocus'
+import type { AcceptableValue } from '@/shared/types'
+import { injectTreeRootContext } from './TreeRoot.vue'
+import isEqual from 'fast-deep-equal'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<TreeItemProps<T>>(), {
+  as: 'li',
+})
+
+const rootContext = injectTreeRootContext()
+
+const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.value))
+</script>
+
+<template>
+  <RovingFocusItem as-child>
+    <Primitive
+      role="treeitem"
+      :as="as"
+      :as-child="asChild"
+      :aria-selected="isSelected"
+      @click.stop="rootContext.onSelect(value)"
+    >
+      <slot />
+    </Primitive>
+  </RovingFocusItem>
+</template>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
new file mode 100644
index 000000000..8bd402404
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { createContext } from '@/shared'
+
+export interface TreeRootProps<T> extends PrimitiveProps {
+  items?: T[]
+  expanded?: string[]
+  defaultExpanded?: string[]
+}
+
+export type TreeRootEmits = {
+  'update:expanded': [val: string[]]
+}
+
+interface TreeRootContext {
+  modelValue: Ref<any>
+  onSelect: (val: any) => void
+}
+
+export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext>('TreeRoot')
+</script>
+
+<script setup lang="ts" generic="T">
+import { Primitive, type PrimitiveProps } from '@/Primitive'
+import { useVModel } from '@vueuse/core'
+import { RovingFocusGroup } from '@/RovingFocus'
+import { type Ref, ref } from 'vue'
+
+const props = defineProps<TreeRootProps<T>>()
+const emits = defineEmits<TreeRootEmits>()
+
+const modelValue = ref()
+
+const expanded = useVModel(props, 'expanded', emits, {
+  defaultValue: props.defaultExpanded ?? [],
+  passive: (props.expanded === undefined) as false,
+  deep: true,
+})
+
+provideTreeRootContext({
+  modelValue,
+  onSelect: (val) => {
+    modelValue.value = val
+  },
+})
+</script>
+
+<template>
+  <RovingFocusGroup as-child>
+    <Primitive
+      role="tree"
+      :as="as"
+      :as-child="asChild"
+    >
+      <slot />
+    </Primitive>
+  </RovingFocusGroup>
+</template>
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
new file mode 100644
index 000000000..d58ee1434
--- /dev/null
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -0,0 +1,4 @@
+export { default as TreeRoot } from './TreeRoot.vue'
+export { default as TreeGroup } from './TreeGroup.vue'
+export { default as TreeGroupList } from './TreeGroupList.vue'
+export { default as TreeItem } from './TreeItem.vue'
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
new file mode 100644
index 000000000..d1d20fbbb
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { TreeGroup, TreeGroupList, TreeItem, TreeRoot } from '../'
+
+const children = [
+  { title: 'JS.vue', icon: 'vue' },
+  { title: 'vue.vue', icon: 'vue' },
+]
+
+const items = [
+  { title: 'index.vue', icon: 'vue' },
+  {
+    title: 'lib',
+    icon: 'folder',
+    children: [
+      {
+        title: 'tree',
+        icon: 'folder',
+        children: [
+          {
+            title: 'Tree.vue',
+            icon: 'vue',
+          },
+          {
+            title: 'TreeView.vue',
+            icon: 'vue',
+          },
+        ],
+      },
+      {
+        title: 'icons',
+        icon: 'folder',
+        children: [
+          { title: 'JS.vue', icon: 'vue' },
+          { title: 'vue.vue', icon: 'vue' },
+        ],
+      },
+      {
+        title: 'index.js',
+        icon: 'js',
+      },
+    ],
+  },
+  {
+    title: 'routes',
+    icon: 'folder',
+    children: [
+      {
+        title: 'contents',
+        icon: 'folder',
+        children: [
+          {
+            title: '+layout.vue',
+            icon: 'vue',
+          },
+          {
+            title: '+page.vue',
+            icon: 'vue',
+          },
+        ],
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <Story title="Tree/Basic" :layout="{ type: 'single', iframe: false }">
+    <Variant title="default">
+      <TreeRoot :items class="list-none select-none">
+        <TreeItem value="Item1">
+          Item1
+        </TreeItem>
+        <TreeItem value="Item2">
+          Item2
+        </TreeItem>
+        <TreeGroup value="Framework">
+          <span>Framework</span>
+          <TreeGroupList>
+            <TreeItem v-for="item in children" :key="item.title" :value="item">
+              {{ item.title }}
+            </TreeItem>
+          </TreeGroupList>
+        </TreeGroup>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>

From 674d00277817d320f240f4c224c54c888c56af82 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 28 May 2024 23:53:45 +0800
Subject: [PATCH 02/27] chore: wip (very crude impl)

---
 packages/radix-vue/src/Tree/TreeGroup.vue     | 43 ----------
 packages/radix-vue/src/Tree/TreeGroupList.vue | 28 ------
 packages/radix-vue/src/Tree/TreeItem.vue      |  4 +-
 packages/radix-vue/src/Tree/TreeRoot.vue      | 85 +++++++++++++++++--
 packages/radix-vue/src/Tree/index.ts          |  2 -
 .../src/Tree/story/TreeBasic.story.vue        | 31 +++----
 6 files changed, 92 insertions(+), 101 deletions(-)
 delete mode 100644 packages/radix-vue/src/Tree/TreeGroup.vue
 delete mode 100644 packages/radix-vue/src/Tree/TreeGroupList.vue

diff --git a/packages/radix-vue/src/Tree/TreeGroup.vue b/packages/radix-vue/src/Tree/TreeGroup.vue
deleted file mode 100644
index 18cc55ca0..000000000
--- a/packages/radix-vue/src/Tree/TreeGroup.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-import { createContext } from '@/shared'
-import { type Ref, ref } from 'vue'
-
-export interface TreeGroupProps<T extends AcceptableValue> extends TreeItemProps<T> {
-
-}
-
-interface TreeGroupContext {
-  isExpanded: Ref<boolean>
-}
-
-export const [injectTreeGroupContext, provideTreeGroupContext] = createContext<TreeGroupContext>('TreeGroup')
-</script>
-
-<script setup lang="ts" generic="T extends AcceptableValue">
-import type { AcceptableValue } from '@/shared/types'
-import TreeItem, { type TreeItemProps } from './TreeItem.vue'
-
-const props = defineProps<TreeGroupProps<T>>()
-
-const isExpanded = ref(false)
-function toggleExpand(val?: boolean) {
-  isExpanded.value = val ?? !isExpanded.value
-}
-
-provideTreeGroupContext({
-  isExpanded,
-})
-</script>
-
-<template>
-  <TreeItem
-    :value="props.value"
-    :as="as"
-    :as-child="asChild"
-    @click="toggleExpand"
-    @keydown.right="toggleExpand(true)"
-    @keydown.left.stop="toggleExpand(false)"
-  >
-    <slot />
-  </TreeItem>
-</template>
diff --git a/packages/radix-vue/src/Tree/TreeGroupList.vue b/packages/radix-vue/src/Tree/TreeGroupList.vue
deleted file mode 100644
index fbcb63eaa..000000000
--- a/packages/radix-vue/src/Tree/TreeGroupList.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-export interface TreeGroupListProps<T extends AcceptableValue> extends PrimitiveProps {
-  value?: T
-}
-</script>
-
-<script setup lang="ts" generic="T extends AcceptableValue">
-import { Primitive, type PrimitiveProps } from '@/Primitive'
-import type { AcceptableValue } from '@/shared/types'
-import { injectTreeGroupContext } from './TreeGroup.vue'
-
-const props = withDefaults(defineProps<TreeGroupListProps<T>>(), {
-  as: 'ul',
-})
-
-const groupContext = injectTreeGroupContext()
-</script>
-
-<template>
-  <Primitive
-    v-if="groupContext.isExpanded.value"
-    role="group"
-    :as="as"
-    :as-child="asChild"
-  >
-    <slot />
-  </Primitive>
-</template>
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 72e0261ec..ab9489baa 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 export interface TreeItemProps<T extends AcceptableValue> extends PrimitiveProps {
-  value: T
+  value?: T
 }
 </script>
 
@@ -28,7 +28,7 @@ const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.va
       :as="as"
       :as-child="asChild"
       :aria-selected="isSelected"
-      @click.stop="rootContext.onSelect(value)"
+      @click.stop="rootContext.onToggle(value)"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 8bd402404..56f85981d 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -5,53 +5,126 @@ export interface TreeRootProps<T> extends PrimitiveProps {
   items?: T[]
   expanded?: string[]
   defaultExpanded?: string[]
+  getKey?: (val: T) => string
 }
 
 export type TreeRootEmits = {
   'update:expanded': [val: string[]]
 }
 
-interface TreeRootContext {
+interface TreeRootContext<T> {
   modelValue: Ref<any>
   onSelect: (val: any) => void
+  expanded: Ref<string[]>
+  onToggle: (val: T) => void
+  getKey?: (val: T) => string
 }
 
-export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext>('TreeRoot')
+interface TreeItem<T> {
+  children?: T[]
+}
+type FlattenedItem<T> = Omit<T, 'children'> & {
+  hasChildren: boolean
+  level: number
+}
+
+export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext<any>>('TreeRoot')
 </script>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T extends TreeItem<T>">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
-import { type Ref, ref } from 'vue'
+import { type Ref, cloneVNode, computed, ref, toRefs, useSlots, watch } from 'vue'
 
 const props = defineProps<TreeRootProps<T>>()
 const emits = defineEmits<TreeRootEmits>()
 
+defineSlots<{
+  default: (props: {
+    node: FlattenedItem<T>
+  }) => any
+}>()
+
 const modelValue = ref()
 
 const expanded = useVModel(props, 'expanded', emits, {
   defaultValue: props.defaultExpanded ?? [],
   passive: (props.expanded === undefined) as false,
   deep: true,
+}) as Ref<string[]>
+
+const slots = useSlots()
+
+function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
+  return items.reduce((acc: FlattenedItem<T>[], item: T) => {
+    const key = props.getKey?.(item) ?? `${item}`
+    const isExpanded = expanded.value.includes(key)
+    const flattenedItem: FlattenedItem<T> = { ...item, level, hasChildren: !!item.children }
+    acc.push(flattenedItem)
+
+    if (item.children && isExpanded)
+      acc.push(...flattenItems(item.children, level + 1))
+
+    return acc
+  }, [])
+}
+
+const expandedItems = computed(() => {
+  const items = props.items
+  const expandedKeys = expanded.value.map(i => i)
+  return flattenItems(items ?? [])
 })
 
+const virtualizedItems = computed(
+  () => expandedItems.value?.map((item) => {
+    const key = props.getKey?.(item as unknown as T) ?? `${item}`
+    return {
+      item,
+      key,
+      is: cloneVNode(slots.default!({
+        node: item,
+      })![0], {
+        'key': key,
+        'data-indent': item.level,
+        'value': item,
+      }),
+    }
+  }),
+)
+
 provideTreeRootContext({
   modelValue,
   onSelect: (val) => {
     modelValue.value = val
   },
+  expanded,
+  onToggle(val) {
+    if (!val?.hasChildren)
+      return
+
+    const key = props.getKey?.(val) ?? val
+    if (expanded.value.includes(key))
+      expanded.value = expanded.value.filter(val => val !== key)
+    else
+      expanded.value.push(key)
+  },
+  getKey: props.getKey,
 })
 </script>
 
 <template>
-  <RovingFocusGroup as-child>
+  <RovingFocusGroup as-child orientation="vertical">
     <Primitive
       role="tree"
       :as="as"
       :as-child="asChild"
     >
-      <slot />
+      <component
+        :is="is"
+        v-for="{ is, key } in virtualizedItems"
+        :key="key"
+      />
     </Primitive>
   </RovingFocusGroup>
 </template>
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
index d58ee1434..f7c5fa5ff 100644
--- a/packages/radix-vue/src/Tree/index.ts
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -1,4 +1,2 @@
 export { default as TreeRoot } from './TreeRoot.vue'
-export { default as TreeGroup } from './TreeGroup.vue'
-export { default as TreeGroupList } from './TreeGroupList.vue'
 export { default as TreeItem } from './TreeItem.vue'
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index d1d20fbbb..1f4b53b57 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import { TreeGroup, TreeGroupList, TreeItem, TreeRoot } from '../'
-
-const children = [
-  { title: 'JS.vue', icon: 'vue' },
-  { title: 'vue.vue', icon: 'vue' },
-]
+import { TreeItem, TreeRoot } from '../'
 
 const items = [
   { title: 'index.vue', icon: 'vue' },
@@ -66,21 +61,17 @@ const items = [
 <template>
   <Story title="Tree/Basic" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
-      <TreeRoot :items class="list-none select-none">
-        <TreeItem value="Item1">
-          Item1
-        </TreeItem>
-        <TreeItem value="Item2">
-          Item2
+      <TreeRoot
+        v-slot="{ node }"
+        :items="items"
+        :get-key="(item) => item.title"
+        class="list-none select-none"
+      >
+        <TreeItem
+          :style="{ 'padding-left': `${node.level}rem` }"
+        >
+          {{ node.title }}
         </TreeItem>
-        <TreeGroup value="Framework">
-          <span>Framework</span>
-          <TreeGroupList>
-            <TreeItem v-for="item in children" :key="item.title" :value="item">
-              {{ item.title }}
-            </TreeItem>
-          </TreeGroupList>
-        </TreeGroup>
       </TreeRoot>
     </Variant>
   </Story>

From a8fce9c9ca461abdc8b73becf9241507aac0a4df Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 29 May 2024 17:05:14 +0800
Subject: [PATCH 03/27] chore: another crude wip

---
 .../src/RovingFocus/RovingFocusGroup.vue      |  4 ++
 packages/radix-vue/src/Tree/TreeItem.vue      | 63 +++++++++++++++++--
 packages/radix-vue/src/Tree/TreeRoot.vue      | 31 ++++++---
 .../src/Tree/story/TreeBasic.story.vue        | 10 ++-
 4 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
index 58719e8fe..9454710de 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -71,6 +71,10 @@ const { forwardRef, currentElement } = useForwardExpose()
 const { createCollection } = useCollection('rovingFocus')
 const collections = createCollection(currentElement)
 
+defineExpose({
+  collections,
+})
+
 function handleFocus(event: FocusEvent) {
   // We normally wouldn't need this check, because we already check
   // that the focus is on the current target and not bubbling to it.
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index ab9489baa..d8e4f099a 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -1,24 +1,70 @@
 <script lang="ts">
-export interface TreeItemProps<T extends AcceptableValue> extends PrimitiveProps {
-  value?: T
+import type { TreeItem } from './TreeRoot.vue'
+
+export interface TreeItemProps<T extends TreeItem<T>> extends PrimitiveProps {
+  value: T
 }
 </script>
 
-<script setup lang="ts" generic="T extends AcceptableValue">
+<script setup lang="ts" generic="T extends TreeItem<T>">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { RovingFocusItem } from '@/RovingFocus'
-import type { AcceptableValue } from '@/shared/types'
 import { injectTreeRootContext } from './TreeRoot.vue'
 import isEqual from 'fast-deep-equal'
 import { computed } from 'vue'
+import { useCollection } from '@/shared'
 
 const props = withDefaults(defineProps<TreeItemProps<T>>(), {
   as: 'li',
 })
 
 const rootContext = injectTreeRootContext()
+const { injectCollection } = useCollection('rovingFocus')
+const collection = injectCollection()
 
 const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.value))
+const isExpanded = computed(() => {
+  const key = rootContext.getKey?.(props.value) ?? `${props.value}`
+  return rootContext.expanded.value.includes(key)
+})
+
+function handleKeydownRight() {
+  if (!props.value.children?.length)
+    return
+
+  if (isExpanded.value) {
+    // go to first child
+    const currentElement = document.activeElement as HTMLElement
+    const currentIndex = collection.value.indexOf(currentElement)
+    const list = [...collection.value].slice(currentIndex)
+    const currentLevel = Number(currentElement.getAttribute('data-indent'))
+    const nextElement = list.find(el => Number(el.getAttribute('data-indent')) === (currentLevel + 1))
+
+    if (nextElement)
+      nextElement.focus()
+  }
+  else {
+    rootContext.onToggle(props.value)
+  }
+}
+
+function handleKeydownLeft() {
+  if (isExpanded.value) {
+    //  close expanded
+    rootContext.onToggle(props.value)
+  }
+  else {
+    // go back to parent
+    const currentElement = document.activeElement as HTMLElement
+    const currentIndex = collection.value.indexOf(currentElement)
+    const list = [...collection.value].slice(0, currentIndex).reverse()
+    const currentLevel = Number(currentElement.getAttribute('data-indent'))
+    const parentElement = list.find(el => Number(el.getAttribute('data-indent')) === (currentLevel - 1))
+
+    if (parentElement)
+      parentElement.focus()
+  }
+}
 </script>
 
 <template>
@@ -28,7 +74,14 @@ const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.va
       :as="as"
       :as-child="asChild"
       :aria-selected="isSelected"
-      @click.stop="rootContext.onToggle(value)"
+      :aria-expanded="isExpanded"
+      @keydown.enter.space.prevent="rootContext.onSelect(value)"
+      @keydown.right.prevent="handleKeydownRight"
+      @keydown.left.prevent="handleKeydownLeft"
+      @click.stop="() => {
+        rootContext.onSelect(value)
+        rootContext.onToggle(value)
+      }"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 56f85981d..789a7b63b 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -2,6 +2,8 @@
 import { createContext } from '@/shared'
 
 export interface TreeRootProps<T> extends PrimitiveProps {
+  modelValue?: T
+  defaultValue?: T
   items?: T[]
   expanded?: string[]
   defaultExpanded?: string[]
@@ -13,17 +15,20 @@ export type TreeRootEmits = {
 }
 
 interface TreeRootContext<T> {
-  modelValue: Ref<any>
-  onSelect: (val: any) => void
+  modelValue: Ref<T>
+  onSelect: (val: T) => void
   expanded: Ref<string[]>
   onToggle: (val: T) => void
   getKey?: (val: T) => string
 }
 
-interface TreeItem<T> {
+export interface TreeItem<T> {
   children?: T[]
 }
-type FlattenedItem<T> = Omit<T, 'children'> & {
+
+type FlattenedItem<T> = T & {
+  isSelected?: boolean
+  isExpanded?: boolean
   hasChildren: boolean
   level: number
 }
@@ -46,9 +51,14 @@ defineSlots<{
   }) => any
 }>()
 
-const modelValue = ref()
+const modelValue = useVModel(props, 'modelValue', emits, {
+  // @ts-expect-error idk
+  defaultValue: props.defaultValue ?? [],
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<T>
 
 const expanded = useVModel(props, 'expanded', emits, {
+  // @ts-expect-error idk
   defaultValue: props.defaultExpanded ?? [],
   passive: (props.expanded === undefined) as false,
   deep: true,
@@ -58,9 +68,13 @@ const slots = useSlots()
 
 function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
   return items.reduce((acc: FlattenedItem<T>[], item: T) => {
+    // TODO: Improve the getKey logic and selected
     const key = props.getKey?.(item) ?? `${item}`
+    const modelValueKey = props.getKey?.(modelValue.value ?? {}) ?? `${modelValue.value}`
     const isExpanded = expanded.value.includes(key)
-    const flattenedItem: FlattenedItem<T> = { ...item, level, hasChildren: !!item.children }
+    const isSelected = modelValueKey === key
+
+    const flattenedItem: FlattenedItem<T> = { ...item, level, hasChildren: !!item.children, isExpanded, isSelected }
     acc.push(flattenedItem)
 
     if (item.children && isExpanded)
@@ -76,7 +90,7 @@ const expandedItems = computed(() => {
   return flattenItems(items ?? [])
 })
 
-const virtualizedItems = computed(
+const recursiveItems = computed(
   () => expandedItems.value?.map((item) => {
     const key = props.getKey?.(item as unknown as T) ?? `${item}`
     return {
@@ -86,6 +100,7 @@ const virtualizedItems = computed(
         node: item,
       })![0], {
         'key': key,
+        'aria-level': item.level,
         'data-indent': item.level,
         'value': item,
       }),
@@ -122,7 +137,7 @@ provideTreeRootContext({
     >
       <component
         :is="is"
-        v-for="{ is, key } in virtualizedItems"
+        v-for="{ is, key } in recursiveItems"
         :key="key"
       />
     </Primitive>
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index 1f4b53b57..12daa0bdf 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { TreeItem, TreeRoot } from '../'
+import { Icon } from '@iconify/vue'
 
 const items = [
   { title: 'index.vue', icon: 'vue' },
@@ -68,9 +69,16 @@ const items = [
         class="list-none select-none"
       >
         <TreeItem
+          class="flex items-center"
           :style="{ 'padding-left': `${node.level}rem` }"
+          :class="{ 'bg-grass11': node.isSelected }"
+          :value="node"
         >
-          {{ node.title }}
+          <Icon v-if="node.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+          <span>
+
+            {{ node.title }}
+          </span>
         </TreeItem>
       </TreeRoot>
     </Variant>

From a8383fd0048bf9767d38a402b0227316df3f5979 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 29 May 2024 23:34:55 +0800
Subject: [PATCH 04/27] fix: improve typing

---
 .../src/RovingFocus/RovingFocusGroup.vue      |  4 ---
 packages/radix-vue/src/Tree/TreeRoot.vue      | 34 +++++++++++--------
 .../src/Tree/story/TreeBasic.story.vue        | 14 +++++---
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
index 9454710de..58719e8fe 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -71,10 +71,6 @@ const { forwardRef, currentElement } = useForwardExpose()
 const { createCollection } = useCollection('rovingFocus')
 const collections = createCollection(currentElement)
 
-defineExpose({
-  collections,
-})
-
 function handleFocus(event: FocusEvent) {
   // We normally wouldn't need this check, because we already check
   // that the focus is on the current target and not bubbling to it.
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 789a7b63b..30c660743 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -1,16 +1,17 @@
 <script lang="ts">
 import { createContext } from '@/shared'
 
-export interface TreeRootProps<T> extends PrimitiveProps {
-  modelValue?: T
-  defaultValue?: T
+export interface TreeRootProps<T, U> extends PrimitiveProps {
+  modelValue?: U
+  defaultValue?: U
   items?: T[]
   expanded?: string[]
   defaultExpanded?: string[]
   getKey?: (val: T) => string
 }
 
-export type TreeRootEmits = {
+export type TreeRootEmits<T> = {
+  'update:modelValue': [val: T]
   'update:expanded': [val: string[]]
 }
 
@@ -26,7 +27,8 @@ export interface TreeItem<T> {
   children?: T[]
 }
 
-type FlattenedItem<T> = T & {
+type FlattenedItem<T> = {
+  value: T
   isSelected?: boolean
   isExpanded?: boolean
   hasChildren: boolean
@@ -36,18 +38,19 @@ type FlattenedItem<T> = T & {
 export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext<any>>('TreeRoot')
 </script>
 
-<script setup lang="ts" generic="T extends TreeItem<T>">
+<script setup lang="ts" generic="T extends TreeItem<T>, U">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
 import { type Ref, cloneVNode, computed, ref, toRefs, useSlots, watch } from 'vue'
 
-const props = defineProps<TreeRootProps<T>>()
-const emits = defineEmits<TreeRootEmits>()
+const props = defineProps<TreeRootProps<T, U>>()
+const emits = defineEmits<TreeRootEmits<U>>()
 
 defineSlots<{
   default: (props: {
     node: FlattenedItem<T>
+    value: T
   }) => any
 }>()
 
@@ -55,7 +58,8 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   // @ts-expect-error idk
   defaultValue: props.defaultValue ?? [],
   passive: (props.modelValue === undefined) as false,
-}) as Ref<T>
+  deep: true,
+}) as Ref<U>
 
 const expanded = useVModel(props, 'expanded', emits, {
   // @ts-expect-error idk
@@ -70,11 +74,11 @@ function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
   return items.reduce((acc: FlattenedItem<T>[], item: T) => {
     // TODO: Improve the getKey logic and selected
     const key = props.getKey?.(item) ?? `${item}`
-    const modelValueKey = props.getKey?.(modelValue.value ?? {}) ?? `${modelValue.value}`
+    const modelValueKey = props.getKey?.((modelValue.value ?? {}) as T) ?? `${modelValue.value}`
     const isExpanded = expanded.value.includes(key)
     const isSelected = modelValueKey === key
 
-    const flattenedItem: FlattenedItem<T> = { ...item, level, hasChildren: !!item.children, isExpanded, isSelected }
+    const flattenedItem: FlattenedItem<T> = { value: item, level, hasChildren: !!item.children, isExpanded, isSelected }
     acc.push(flattenedItem)
 
     if (item.children && isExpanded)
@@ -92,17 +96,17 @@ const expandedItems = computed(() => {
 
 const recursiveItems = computed(
   () => expandedItems.value?.map((item) => {
-    const key = props.getKey?.(item as unknown as T) ?? `${item}`
+    const key = props.getKey?.(item.value) ?? `${item}`
     return {
       item,
       key,
       is: cloneVNode(slots.default!({
         node: item,
+        value: item.value,
       })![0], {
         'key': key,
         'aria-level': item.level,
         'data-indent': item.level,
-        'value': item,
       }),
     }
   }),
@@ -111,11 +115,11 @@ const recursiveItems = computed(
 provideTreeRootContext({
   modelValue,
   onSelect: (val) => {
-    modelValue.value = val
+    modelValue.value = { ...val }
   },
   expanded,
   onToggle(val) {
-    if (!val?.hasChildren)
+    if (!val?.children?.length)
       return
 
     const key = props.getKey?.(val) ?? val
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index 12daa0bdf..964045069 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { TreeItem, TreeRoot } from '../'
 import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
 
 const items = [
   { title: 'index.vue', icon: 'vue' },
@@ -57,13 +58,19 @@ const items = [
     ],
   },
 ]
+
+const modelValue = ref<{ title: string, icon: string }>({
+  title: '+page.vue',
+  icon: 'vue',
+})
 </script>
 
 <template>
   <Story title="Tree/Basic" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
       <TreeRoot
-        v-slot="{ node }"
+        v-slot="{ node, value }"
+        v-model="modelValue"
         :items="items"
         :get-key="(item) => item.title"
         class="list-none select-none"
@@ -72,12 +79,11 @@ const items = [
           class="flex items-center"
           :style="{ 'padding-left': `${node.level}rem` }"
           :class="{ 'bg-grass11': node.isSelected }"
-          :value="node"
+          :value="node.value"
         >
           <Icon v-if="node.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
           <span>
-
-            {{ node.title }}
+            {{ value.title }}
           </span>
         </TreeItem>
       </TreeRoot>

From 8948aa1368686d02f3e6a82a5066c5ebbfbe73c4 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 3 Jun 2024 21:35:42 +0800
Subject: [PATCH 05/27] chore: move constants to shared

---
 packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue | 2 +-
 packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue      | 2 +-
 packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue    | 2 +-
 packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue   | 2 +-
 packages/radix-vue/src/Listbox/story/_Listbox.vue               | 2 +-
 .../story/constants.ts => shared/constant/countryList.ts}       | 0
 packages/radix-vue/src/shared/constant/index.ts                 | 1 +
 7 files changed, 6 insertions(+), 5 deletions(-)
 rename packages/radix-vue/src/{Listbox/story/constants.ts => shared/constant/countryList.ts} (100%)
 create mode 100644 packages/radix-vue/src/shared/constant/index.ts

diff --git a/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue b/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
index 37faf2188..3a2382792 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const options = computed(() => countryList.slice(0, 20))
 const singleControl = ref()
diff --git a/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue b/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue
index 44b75bc0e..885b2a6c4 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const filterText = ref('')
 const filteredOptions = computed(() => {
diff --git a/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue b/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue
index e25fdbb74..00b7df23d 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxFilter, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const searchTerm = ref('')
 const options = computed(() => searchTerm.value.trim() ? countryList.slice(0, 20).filter(i => i.toLowerCase().includes(searchTerm.value.toLowerCase().trim())) : countryList.slice(0, 20))
diff --git a/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue b/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue
index ec15b4aac..7d36dbb99 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxFilter, ListboxItem, ListboxRoot, ListboxVirtualizer } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const filterText = ref('')
 const filteredOptions = computed(() => {
diff --git a/packages/radix-vue/src/Listbox/story/_Listbox.vue b/packages/radix-vue/src/Listbox/story/_Listbox.vue
index 967afef79..8e64af6c3 100644
--- a/packages/radix-vue/src/Listbox/story/_Listbox.vue
+++ b/packages/radix-vue/src/Listbox/story/_Listbox.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import type { ListboxRootEmits, ListboxRootProps } from '../'
 import { ListboxContent, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 import { useForwardPropsEmits } from '@/shared'
 
 const props = defineProps<ListboxRootProps>()
diff --git a/packages/radix-vue/src/Listbox/story/constants.ts b/packages/radix-vue/src/shared/constant/countryList.ts
similarity index 100%
rename from packages/radix-vue/src/Listbox/story/constants.ts
rename to packages/radix-vue/src/shared/constant/countryList.ts
diff --git a/packages/radix-vue/src/shared/constant/index.ts b/packages/radix-vue/src/shared/constant/index.ts
new file mode 100644
index 000000000..39c9505b5
--- /dev/null
+++ b/packages/radix-vue/src/shared/constant/index.ts
@@ -0,0 +1 @@
+export * from './countryList'

From 9ea531f81e08c14f5eb5508e2073662e118530bb Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 3 Jun 2024 22:31:00 +0800
Subject: [PATCH 06/27] refactor: tree item, add virtualizer

---
 packages/radix-vue/src/Tree/TreeItem.vue      | 11 ++-
 packages/radix-vue/src/Tree/TreeRoot.vue      | 73 +++++++-------
 .../radix-vue/src/Tree/TreeVirtualizer.vue    | 95 +++++++++++++++++++
 packages/radix-vue/src/Tree/index.ts          |  1 +
 .../src/Tree/story/TreeBasic.story.vue        | 23 +++--
 .../src/Tree/story/TreeVirtual.story.vue      | 48 ++++++++++
 6 files changed, 197 insertions(+), 54 deletions(-)
 create mode 100644 packages/radix-vue/src/Tree/TreeVirtualizer.vue
 create mode 100644 packages/radix-vue/src/Tree/story/TreeVirtual.story.vue

diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index d8e4f099a..6c8103a72 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -1,12 +1,11 @@
 <script lang="ts">
-import type { TreeItem } from './TreeRoot.vue'
-
-export interface TreeItemProps<T extends TreeItem<T>> extends PrimitiveProps {
+export interface TreeItemProps<T> extends PrimitiveProps {
   value: T
+  level: number
 }
 </script>
 
-<script setup lang="ts" generic="T extends TreeItem<T>">
+<script setup lang="ts" generic="T extends Record<string, any>">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
@@ -24,7 +23,7 @@ const collection = injectCollection()
 
 const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.value))
 const isExpanded = computed(() => {
-  const key = rootContext.getKey?.(props.value) ?? `${props.value}`
+  const key = rootContext.getKey(props.value)
   return rootContext.expanded.value.includes(key)
 })
 
@@ -75,6 +74,8 @@ function handleKeydownLeft() {
       :as-child="asChild"
       :aria-selected="isSelected"
       :aria-expanded="isExpanded"
+      :aria-level="level"
+      :data-indent="level"
       @keydown.enter.space.prevent="rootContext.onSelect(value)"
       @keydown.right.prevent="handleKeydownRight"
       @keydown.left.prevent="handleKeydownLeft"
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 30c660743..3a5b670eb 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -7,7 +7,7 @@ export interface TreeRootProps<T, U> extends PrimitiveProps {
   items?: T[]
   expanded?: string[]
   defaultExpanded?: string[]
-  getKey?: (val: T) => string
+  getKey: (val: T) => string
 }
 
 export type TreeRootEmits<T> = {
@@ -20,14 +20,12 @@ interface TreeRootContext<T> {
   onSelect: (val: T) => void
   expanded: Ref<string[]>
   onToggle: (val: T) => void
-  getKey?: (val: T) => string
+  items?: Ref<T[]>
+  getKey: (val: T) => string
 }
 
-export interface TreeItem<T> {
-  children?: T[]
-}
-
-type FlattenedItem<T> = {
+export type FlattenedItem<T> = {
+  _id: string
   value: T
   isSelected?: boolean
   isExpanded?: boolean
@@ -38,7 +36,7 @@ type FlattenedItem<T> = {
 export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext<any>>('TreeRoot')
 </script>
 
-<script setup lang="ts" generic="T extends TreeItem<T>, U">
+<script setup lang="ts" generic="T extends Record<string, any>, U">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
@@ -49,8 +47,9 @@ const emits = defineEmits<TreeRootEmits<U>>()
 
 defineSlots<{
   default: (props: {
-    node: FlattenedItem<T>
-    value: T
+    // node: FlattenedItem<T>
+    // value: T
+    flattenItems: FlattenedItem<T>[]
   }) => any
 }>()
 
@@ -68,17 +67,14 @@ const expanded = useVModel(props, 'expanded', emits, {
   deep: true,
 }) as Ref<string[]>
 
-const slots = useSlots()
-
 function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
   return items.reduce((acc: FlattenedItem<T>[], item: T) => {
-    // TODO: Improve the getKey logic and selected
-    const key = props.getKey?.(item) ?? `${item}`
-    const modelValueKey = props.getKey?.((modelValue.value ?? {}) as T) ?? `${modelValue.value}`
+    const key = props.getKey(item)
+    const modelValueKey = props.getKey((modelValue.value ?? {}) as T) ?? `${modelValue.value}`
     const isExpanded = expanded.value.includes(key)
     const isSelected = modelValueKey === key
 
-    const flattenedItem: FlattenedItem<T> = { value: item, level, hasChildren: !!item.children, isExpanded, isSelected }
+    const flattenedItem: FlattenedItem<T> = { _id: key, value: item, level, hasChildren: !!item.children, isExpanded, isSelected }
     acc.push(flattenedItem)
 
     if (item.children && isExpanded)
@@ -94,23 +90,25 @@ const expandedItems = computed(() => {
   return flattenItems(items ?? [])
 })
 
-const recursiveItems = computed(
-  () => expandedItems.value?.map((item) => {
-    const key = props.getKey?.(item.value) ?? `${item}`
-    return {
-      item,
-      key,
-      is: cloneVNode(slots.default!({
-        node: item,
-        value: item.value,
-      })![0], {
-        'key': key,
-        'aria-level': item.level,
-        'data-indent': item.level,
-      }),
-    }
-  }),
-)
+// const recursiveItems = computed(
+//   () => expandedItems.value?.map((item) => {
+//     const key = props.getKey(item.value)
+//     return {
+//       item,
+//       key,
+//       is: cloneVNode(slots.default!({
+//         node: item,
+//         value: item.value,
+//       })![0], {
+//         'key': key,
+//         'aria-level': item.level,
+//         'data-indent': item.level,
+//       }),
+//     }
+//   }),
+// )
+
+// Virtualizer
 
 provideTreeRootContext({
   modelValue,
@@ -122,13 +120,14 @@ provideTreeRootContext({
     if (!val?.children?.length)
       return
 
-    const key = props.getKey?.(val) ?? val
+    const key = props.getKey(val) ?? val
     if (expanded.value.includes(key))
       expanded.value = expanded.value.filter(val => val !== key)
     else
       expanded.value.push(key)
   },
   getKey: props.getKey,
+  items: expandedItems,
 })
 </script>
 
@@ -139,11 +138,7 @@ provideTreeRootContext({
       :as="as"
       :as-child="asChild"
     >
-      <component
-        :is="is"
-        v-for="{ is, key } in recursiveItems"
-        :key="key"
-      />
+      <slot :flatten-items="expandedItems" />
     </Primitive>
   </RovingFocusGroup>
 </template>
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
new file mode 100644
index 000000000..a61063997
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -0,0 +1,95 @@
+<script lang="ts">
+export interface TreeVirtualizerProps {
+  /** Estimated size (in px) of each item */
+  estimateSize?: number
+}
+</script>
+
+<script setup lang="ts">
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { type Ref, cloneVNode, computed, useSlots } from 'vue'
+import { type FlattenedItem, injectTreeRootContext } from './TreeRoot.vue'
+import { useParentElement } from '@vueuse/core'
+import type { AcceptableValue } from '@/shared/types'
+
+const props = defineProps<TreeVirtualizerProps>()
+
+defineSlots<{
+  default: (props: {
+    item: FlattenedItem<any>
+  }) => any
+}>()
+
+const slots = useSlots()
+const rootContext = injectTreeRootContext()
+const parentEl = useParentElement() as Ref<HTMLElement>
+
+// set virtual true when this component mounted
+// rootContext.isVirtual.value = true
+
+const padding = computed(() => {
+  const el = parentEl.value
+  if (!el) {
+    return { start: 0, end: 0 }
+  }
+  else {
+    const styles = window.getComputedStyle(el)
+    return {
+      start: Number.parseFloat(styles.paddingBlockStart || styles.paddingTop),
+      end: Number.parseFloat(styles.paddingBlockEnd || styles.paddingBottom),
+    }
+  }
+})
+
+const virtualizer = useVirtualizer(
+  {
+    get scrollPaddingStart() { return padding.value.start },
+    get scrollPaddingEnd() { return padding.value.end },
+    get count() { return rootContext.items?.value.length ?? 0 },
+    get horizontal() { return false },
+    estimateSize() {
+      return props.estimateSize ?? 28
+    },
+    getScrollElement() { return parentEl.value },
+    overscan: 12,
+  },
+)
+
+const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map((item) => {
+  return {
+    item,
+    is: cloneVNode(slots.default!({
+      item: rootContext.items?.value[item.index],
+    })![0], {
+      'key': `${item.index}`,
+      'data-index': item.index,
+      'aria-setsize': rootContext.items?.value.length,
+      'aria-posinset': item.index + 1,
+      'style': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        transform: `translateY(${item.start}px)`,
+        overflowAnchor: 'none',
+      },
+    }),
+  }
+}))
+</script>
+
+<template>
+  <div
+    data-radix-vue-virtualizer
+    :style="{
+      position: 'relative',
+      width: '100%',
+      height: `${virtualizer.getTotalSize()}px`,
+    }"
+  >
+    <component
+      :is="is"
+      v-for="{ is, item } in virtualizedItems"
+      :key="item.index"
+    />
+  </div>
+</template>
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
index f7c5fa5ff..9ab736f4b 100644
--- a/packages/radix-vue/src/Tree/index.ts
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -1,2 +1,3 @@
 export { default as TreeRoot } from './TreeRoot.vue'
 export { default as TreeItem } from './TreeItem.vue'
+export { default as TreeVirtualizer } from './TreeVirtualizer.vue'
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index 964045069..4372033e0 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -69,22 +69,25 @@ const modelValue = ref<{ title: string, icon: string }>({
   <Story title="Tree/Basic" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
       <TreeRoot
-        v-slot="{ node, value }"
+        v-slot="{ flattenItems }"
         v-model="modelValue"
         :items="items"
         :get-key="(item) => item.title"
-        class="list-none select-none"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
       >
         <TreeItem
-          class="flex items-center"
-          :style="{ 'padding-left': `${node.level}rem` }"
-          :class="{ 'bg-grass11': node.isSelected }"
-          :value="node.value"
+          v-for="item in flattenItems"
+          :key="item._id"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2"
+          :style="{ 'margin-left': `${item.level}rem` }"
+          :class="{ 'bg-grass4': item.isSelected }"
+          :value="item.value"
+          :level="item.level"
         >
-          <Icon v-if="node.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
-          <span>
-            {{ value.title }}
-          </span>
+          <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+          <div class="pl-2">
+            {{ item.value.title }}
+          </div>
         </TreeItem>
       </TreeRoot>
     </Variant>
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
new file mode 100644
index 000000000..df96171b8
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot, TreeVirtualizer } from '..'
+import { Icon } from '@iconify/vue'
+import { countryList } from '@/shared/constant'
+
+function groupCountriesByFirstLetter(countries: string[]) {
+  const grouped = countries.reduce((acc, country) => {
+    const firstLetter = country[0].toUpperCase()
+    if (!acc[firstLetter])
+      acc[firstLetter] = { title: firstLetter, children: [] }
+
+    acc[firstLetter].children.push({ title: country })
+    return acc
+  }, {} as { [key: string]: { title: string, children: { title: string }[] } })
+
+  return Object.values(grouped)
+}
+
+const items = groupCountriesByFirstLetter(countryList)
+</script>
+
+<template>
+  <Story title="Tree/Virtual" :layout="{ type: 'single', iframe: false }">
+    <Variant title="default">
+      <TreeRoot
+        :items="items"
+        :get-key="(item) => item.title"
+        class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+      >
+        <TreeVirtualizer v-slot="{ item }">
+          <TreeItem
+
+            class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2"
+            :style="{ 'margin-left': `${item.level}rem` }"
+            :class="{ 'bg-grass4': item.isSelected }"
+            :value="item.value"
+            :level="item.level"
+          >
+            <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+            <div class="pl-2">
+              {{ item.value.title }}
+            </div>
+          </TreeItem>
+        </TreeVirtualizer>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>

From 3a0b7bd8c3c8aacbd92b32a3689a15eb020ba3c0 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 4 Jun 2024 12:34:41 +0800
Subject: [PATCH 07/27] refactor: roving focus to use new collection

---
 .../src/RadioGroup/RadioGroup.test.ts         |  2 +-
 .../src/RovingFocus/RovingFocusGroup.vue      | 43 ++++++++-------
 .../src/RovingFocus/RovingFocusItem.vue       | 53 ++++++++++---------
 3 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts b/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts
index 80f781423..06e377068 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts
+++ b/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts
@@ -83,7 +83,7 @@ describe('given disabled RadioGroup', () => {
 
   it.each([[0], [1], [2]])('should have disabled attribute on item', async (input) => {
     expect(radios[input].attributes('disabled')).toBe('')
-    expect(radios[input].attributes('data-disabled')).toBe('true')
+    expect(radios[input].attributes('data-disabled')).toBe('')
   })
 })
 
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
index 58719e8fe..c55c26d1f 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -49,14 +49,16 @@ export const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { Primitive } from '@/Primitive'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils'
+import { CollectionSlot, createCollection } from '@/Collection'
 
 const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
   loop: false,
   orientation: undefined,
 })
 const emits = defineEmits<RovingFocusGroupEmits>()
+
 const { loop, orientation, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
 const currentTabStopId = useVModel(props, 'currentTabStopId', emits, {
@@ -67,9 +69,7 @@ const isTabbingBackOut = ref(false)
 const isClickFocus = ref(false)
 const focusableItemsCount = ref(0)
 
-const { forwardRef, currentElement } = useForwardExpose()
-const { createCollection } = useCollection('rovingFocus')
-const collections = createCollection(currentElement)
+const { getItems } = createCollection()
 
 function handleFocus(event: FocusEvent) {
   // We normally wouldn't need this check, because we already check
@@ -89,7 +89,7 @@ function handleFocus(event: FocusEvent) {
     emits('entryFocus', entryFocusEvent)
 
     if (!entryFocusEvent.defaultPrevented) {
-      const items = collections.value
+      const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')
       const activeItem = items.find(item => item.getAttribute('data-active') === 'true')
       const currentItem = items.find(
         item => item.id === currentTabStopId.value,
@@ -104,6 +104,10 @@ function handleFocus(event: FocusEvent) {
   isClickFocus.value = false
 }
 
+defineExpose({
+  getItems,
+})
+
 provideRovingFocusGroupContext({
   loop,
   dir,
@@ -125,18 +129,19 @@ provideRovingFocusGroupContext({
 </script>
 
 <template>
-  <Primitive
-    :ref="forwardRef"
-    :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
-    :data-orientation="orientation"
-    :as="as"
-    :as-child="asChild"
-    :dir="dir"
-    style="outline: none"
-    @mousedown="isClickFocus = true"
-    @focus="handleFocus"
-    @blur="isTabbingBackOut = false"
-  >
-    <slot />
-  </Primitive>
+  <CollectionSlot>
+    <Primitive
+      :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
+      :data-orientation="orientation"
+      :as="as"
+      :as-child="asChild"
+      :dir="dir"
+      style="outline: none"
+      @mousedown="isClickFocus = true"
+      @focus="handleFocus"
+      @blur="isTabbingBackOut = false"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
 </template>
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index 3162cf820..fc17b3135 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -13,7 +13,8 @@ import { computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
 import { Primitive } from '@/Primitive'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
-import { useCollection, useId } from '@/shared'
+import { useId } from '@/shared'
+import { CollectionItem, useCollection } from '@/Collection'
 
 const props = withDefaults(defineProps<RovingFocusItemProps>(), {
   focusable: true,
@@ -27,8 +28,7 @@ const isCurrentTabStop = computed(
   () => context.currentTabStopId.value === id.value,
 )
 
-const { injectCollection } = useCollection('rovingFocus')
-const collections = injectCollection()
+const { getItems } = useCollection()
 
 onMounted(() => {
   if (props.focusable)
@@ -58,7 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
     if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
       return
     event.preventDefault()
-    let candidateNodes = [...collections.value]
+    let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]
 
     if (focusIntent === 'last') {
       candidateNodes.reverse()
@@ -81,26 +81,27 @@ function handleKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <Primitive
-    data-radix-vue-collection-item
-    :tabindex="isCurrentTabStop ? 0 : -1"
-    :data-orientation="context.orientation.value"
-    :data-active="active"
-    :data-disabled="!focusable || undefined"
-    :as="as"
-    :as-child="asChild"
-    @mousedown="
-      (event) => {
-        // 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();
-        // Safari doesn't focus a button when clicked so we run our logic on mousedown also
-        else context.onItemFocus(id);
-      }
-    "
-    @focus="context.onItemFocus(id)"
-    @keydown="handleKeydown"
-  >
-    <slot />
-  </Primitive>
+  <CollectionItem>
+    <Primitive
+      :tabindex="isCurrentTabStop ? 0 : -1"
+      :data-orientation="context.orientation.value"
+      :data-active="active"
+      :data-disabled="!focusable ? '' : undefined"
+      :as="as"
+      :as-child="asChild"
+      @mousedown="
+        (event) => {
+          // 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();
+          // Safari doesn't focus a button when clicked so we run our logic on mousedown also
+          else context.onItemFocus(id);
+        }
+      "
+      @focus="context.onItemFocus(id)"
+      @keydown="handleKeydown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
 </template>

From 77ad770bfd9d6d52cdfb9b7c51d8bb72b36671c7 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 4 Jun 2024 14:58:50 +0800
Subject: [PATCH 08/27] feat: virtualizer

---
 packages/radix-vue/src/Tree/TreeItem.vue      | 19 +++--
 packages/radix-vue/src/Tree/TreeRoot.vue      | 49 ++++++-----
 .../radix-vue/src/Tree/TreeVirtualizer.vue    | 84 +++++++++++++++++--
 .../src/Tree/story/TreeVirtual.story.vue      |  2 +-
 4 files changed, 118 insertions(+), 36 deletions(-)

diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 6c8103a72..f2f853d53 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -11,15 +11,14 @@ import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
 import isEqual from 'fast-deep-equal'
 import { computed } from 'vue'
-import { useCollection } from '@/shared'
+import { useCollection } from '@/Collection'
 
 const props = withDefaults(defineProps<TreeItemProps<T>>(), {
   as: 'li',
 })
 
 const rootContext = injectTreeRootContext()
-const { injectCollection } = useCollection('rovingFocus')
-const collection = injectCollection()
+const { getItems } = useCollection()
 
 const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.value))
 const isExpanded = computed(() => {
@@ -33,9 +32,10 @@ function handleKeydownRight() {
 
   if (isExpanded.value) {
     // go to first child
+    const collection = getItems().map(i => i.ref)
     const currentElement = document.activeElement as HTMLElement
-    const currentIndex = collection.value.indexOf(currentElement)
-    const list = [...collection.value].slice(currentIndex)
+    const currentIndex = collection.indexOf(currentElement)
+    const list = [...collection].slice(currentIndex)
     const currentLevel = Number(currentElement.getAttribute('data-indent'))
     const nextElement = list.find(el => Number(el.getAttribute('data-indent')) === (currentLevel + 1))
 
@@ -48,15 +48,20 @@ function handleKeydownRight() {
 }
 
 function handleKeydownLeft() {
+  // Virtualized item might not be in DOM
+  // if (rootContext.isVirtual.value)
+  //   return
+
   if (isExpanded.value) {
     //  close expanded
     rootContext.onToggle(props.value)
   }
   else {
     // go back to parent
+    const collection = getItems().map(i => i.ref)
     const currentElement = document.activeElement as HTMLElement
-    const currentIndex = collection.value.indexOf(currentElement)
-    const list = [...collection.value].slice(0, currentIndex).reverse()
+    const currentIndex = collection.indexOf(currentElement)
+    const list = [...collection].slice(0, currentIndex).reverse()
     const currentLevel = Number(currentElement.getAttribute('data-indent'))
     const parentElement = list.find(el => Number(el.getAttribute('data-indent')) === (currentLevel - 1))
 
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 3a5b670eb..093bd80ca 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { createContext } from '@/shared'
+import { createContext, useTypeahead } from '@/shared'
 
 export interface TreeRootProps<T, U> extends PrimitiveProps {
   modelValue?: U
@@ -8,6 +8,7 @@ export interface TreeRootProps<T, U> extends PrimitiveProps {
   expanded?: string[]
   defaultExpanded?: string[]
   getKey: (val: T) => string
+  multiple?: boolean
 }
 
 export type TreeRootEmits<T> = {
@@ -20,8 +21,10 @@ interface TreeRootContext<T> {
   onSelect: (val: T) => void
   expanded: Ref<string[]>
   onToggle: (val: T) => void
-  items?: Ref<T[]>
+  items: Ref<T[]>
   getKey: (val: T) => string
+  isVirtual: Ref<boolean>
+  virtualKeydownHook: EventHook<KeyboardEvent>
 }
 
 export type FlattenedItem<T> = {
@@ -38,9 +41,9 @@ export const [injectTreeRootContext, provideTreeRootContext] = createContext<Tre
 
 <script setup lang="ts" generic="T extends Record<string, any>, U">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useVModel } from '@vueuse/core'
+import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
-import { type Ref, cloneVNode, computed, ref, toRefs, useSlots, watch } from 'vue'
+import { type Ref, computed, ref, toRefs } from 'vue'
 
 const props = defineProps<TreeRootProps<T, U>>()
 const emits = defineEmits<TreeRootEmits<U>>()
@@ -53,6 +56,10 @@ defineSlots<{
   }) => any
 }>()
 
+// const { multiple } = toRefs(props)
+const { handleTypeaheadSearch } = useTypeahead()
+const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
+
 const modelValue = useVModel(props, 'modelValue', emits, {
   // @ts-expect-error idk
   defaultValue: props.defaultValue ?? [],
@@ -90,25 +97,19 @@ const expandedItems = computed(() => {
   return flattenItems(items ?? [])
 })
 
-// const recursiveItems = computed(
-//   () => expandedItems.value?.map((item) => {
-//     const key = props.getKey(item.value)
-//     return {
-//       item,
-//       key,
-//       is: cloneVNode(slots.default!({
-//         node: item,
-//         value: item.value,
-//       })![0], {
-//         'key': key,
-//         'aria-level': item.level,
-//         'data-indent': item.level,
-//       }),
-//     }
-//   }),
-// )
+function handleKeydown(event: KeyboardEvent) {
+  if (isVirtual.value) {
+    virtualKeydownHook.trigger(event)
+  }
+  else {
+    const collections = rovingFocusGroupRef.value?.getItems().map(i => i.ref)
+    handleTypeaheadSearch(event.key, collections)
+  }
+}
 
 // Virtualizer
+const isVirtual = ref(false)
+const virtualKeydownHook = createEventHook<KeyboardEvent>()
 
 provideTreeRootContext({
   modelValue,
@@ -128,15 +129,19 @@ provideTreeRootContext({
   },
   getKey: props.getKey,
   items: expandedItems,
+
+  isVirtual,
+  virtualKeydownHook,
 })
 </script>
 
 <template>
-  <RovingFocusGroup as-child orientation="vertical">
+  <RovingFocusGroup ref="rovingFocusGroupRef" as-child orientation="vertical">
     <Primitive
       role="tree"
       :as="as"
       :as-child="asChild"
+      @keydown="handleKeydown"
     >
       <slot :flatten-items="expandedItems" />
     </Primitive>
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
index a61063997..53774ac5e 100644
--- a/packages/radix-vue/src/Tree/TreeVirtualizer.vue
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -2,6 +2,8 @@
 export interface TreeVirtualizerProps {
   /** Estimated size (in px) of each item */
   estimateSize?: number
+  /** text content for each item to achieve type-ahead feature */
+  textContent?: (item: any) => string
 }
 </script>
 
@@ -9,8 +11,10 @@ export interface TreeVirtualizerProps {
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { type Ref, cloneVNode, computed, useSlots } from 'vue'
 import { type FlattenedItem, injectTreeRootContext } from './TreeRoot.vue'
-import { useParentElement } from '@vueuse/core'
-import type { AcceptableValue } from '@/shared/types'
+import { refAutoReset, useParentElement } from '@vueuse/core'
+import { getNextMatch } from '@/shared/useTypeahead'
+import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
+import { useCollection } from '@/Collection'
 
 const props = defineProps<TreeVirtualizerProps>()
 
@@ -23,9 +27,26 @@ defineSlots<{
 const slots = useSlots()
 const rootContext = injectTreeRootContext()
 const parentEl = useParentElement() as Ref<HTMLElement>
+const { getItems } = useCollection()
+
+// Reset `search` 1 second after it was last updated
+const search = refAutoReset('', 1000)
+const optionsWithMetadata = computed(() => {
+  const parseTextContent = (option: any) => {
+    if (props.textContent)
+      return props.textContent(option)
+    else
+      return option.toString().toLowerCase()
+  }
+
+  return rootContext.items.value.map((option, index) => ({
+    index,
+    textContent: parseTextContent(option.value),
+  }))
+})
 
 // set virtual true when this component mounted
-// rootContext.isVirtual.value = true
+rootContext.isVirtual.value = true
 
 const padding = computed(() => {
   const el = parentEl.value
@@ -45,7 +66,7 @@ const virtualizer = useVirtualizer(
   {
     get scrollPaddingStart() { return padding.value.start },
     get scrollPaddingEnd() { return padding.value.end },
-    get count() { return rootContext.items?.value.length ?? 0 },
+    get count() { return rootContext.items.value.length ?? 0 },
     get horizontal() { return false },
     estimateSize() {
       return props.estimateSize ?? 28
@@ -59,11 +80,11 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
   return {
     item,
     is: cloneVNode(slots.default!({
-      item: rootContext.items?.value[item.index],
+      item: rootContext.items.value[item.index],
     })![0], {
       'key': `${item.index}`,
       'data-index': item.index,
-      'aria-setsize': rootContext.items?.value.length,
+      'aria-setsize': rootContext.items.value.length,
       'aria-posinset': item.index + 1,
       'style': {
         position: 'absolute',
@@ -75,6 +96,57 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
     }),
   }
 }))
+
+function scrollToIndexAndFocus(index: number) {
+  virtualizer.value.scrollToIndex(index, { align: 'start' })
+  requestAnimationFrame(() => {
+    const item = parentEl.value.querySelector(`[data-index="${index}"]`) as HTMLElement
+    if (item instanceof HTMLElement)
+      item.focus()
+  })
+}
+
+rootContext.virtualKeydownHook.on((event) => {
+  const isMetaKey = event.altKey || event.ctrlKey || event.metaKey
+  const isTabKey = event.key === 'Tab' && !isMetaKey
+  if (isTabKey)
+    return
+
+  const intent = MAP_KEY_TO_FOCUS_INTENT[event.key]
+
+  if (['first', 'last'].includes(intent)) {
+    event.preventDefault()
+
+    const index = intent === 'first' ? 0 : rootContext.items.value.length - 1
+    virtualizer.value.scrollToIndex(index)
+    requestAnimationFrame(() => {
+      const items = getItems()
+      const item = intent === 'first' ? items[0] : items[items.length - 1]
+      item.ref.focus()
+    })
+  }
+  else if (intent === 'prev' && event.key !== 'ArrowUp') {
+    const currentElement = document.activeElement as HTMLElement
+    const currentIndex = Number(currentElement.getAttribute('data-index'))
+    const currentLevel = Number(currentElement.getAttribute('data-indent'))
+    const list = rootContext.items.value.slice(0, currentIndex).map((item, index) => ({ ...item, index })).reverse()
+
+    const parentItem = list.find(item => item.level === (currentLevel - 1))
+    if (parentItem)
+      scrollToIndexAndFocus(parentItem.index)
+  }
+  else if (!intent && !isMetaKey) {
+    search.value += event.key
+    const currentIndex = Number(document.activeElement?.getAttribute('data-index'))
+    const currentMatch = optionsWithMetadata.value[currentIndex].textContent
+    const filteredOptions = optionsWithMetadata.value.map(i => i.textContent)
+    const next = getNextMatch(filteredOptions, search.value, currentMatch)
+
+    const nextMatch = optionsWithMetadata.value.find(option => option.textContent === next)
+    if (nextMatch)
+      scrollToIndexAndFocus(nextMatch.index)
+  }
+})
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
index df96171b8..f4faa05f4 100644
--- a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -27,7 +27,7 @@ const items = groupCountriesByFirstLetter(countryList)
         :get-key="(item) => item.title"
         class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
       >
-        <TreeVirtualizer v-slot="{ item }">
+        <TreeVirtualizer v-slot="{ item }" :text-content="(item) => item.title">
           <TreeItem
 
             class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2"

From f95dbf6114dab738b19013489d6763210288fd6b Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 5 Jun 2024 14:08:43 +0800
Subject: [PATCH 09/27] refactor: improve tree

---
 .../radix-vue/src/Collection/Collection.ts    |  10 +-
 .../radix-vue/src/Listbox/ListboxItem.vue     |   2 +-
 .../radix-vue/src/Listbox/ListboxRoot.vue     |   4 +-
 .../src/Listbox/ListboxVirtualizer.vue        |   5 +-
 packages/radix-vue/src/Listbox/utils.ts       |  11 --
 .../src/RovingFocus/RovingFocusItem.vue       |   3 +-
 packages/radix-vue/src/Tree/TreeItem.vue      |  45 +++++---
 packages/radix-vue/src/Tree/TreeRoot.vue      | 104 ++++++++++++++----
 .../radix-vue/src/Tree/TreeVirtualizer.vue    |  13 ++-
 .../src/Tree/story/TreeBasic.story.vue        |  19 ++--
 .../src/Tree/story/TreeVirtual.story.vue      |   9 +-
 packages/radix-vue/src/shared/arrays.ts       |  27 +++++
 packages/radix-vue/src/shared/index.ts        |   1 +
 .../src/shared/useSelectionBehavior.ts        |  75 +++++++++++++
 14 files changed, 251 insertions(+), 77 deletions(-)
 create mode 100644 packages/radix-vue/src/shared/useSelectionBehavior.ts

diff --git a/packages/radix-vue/src/Collection/Collection.ts b/packages/radix-vue/src/Collection/Collection.ts
index faba925b1..9f2daa052 100644
--- a/packages/radix-vue/src/Collection/Collection.ts
+++ b/packages/radix-vue/src/Collection/Collection.ts
@@ -5,7 +5,7 @@ import { Slot, usePrimitiveElement } from '@/Primitive'
 
 interface CollectionContext<ItemData = {}> {
   collectionRef: Ref<HTMLElement | undefined>
-  itemMap: Ref<Map<HTMLElement, { ref: HTMLElement } & ItemData>>
+  itemMap: Ref<Map<HTMLElement, { ref: HTMLElement, value?: any } & ItemData>>
   attrName: string
 }
 
@@ -19,7 +19,6 @@ export function createCollection<ItemData = {}>(attrName = ITEM_DATA_ATTR) {
   const itemMap = ref<Map<HTMLElement, { ref: HTMLElement } & ItemData>>(new Map())
   const collectionRef = ref<HTMLElement>()
 
-  // @ts-expect-error Type instantiation is excessively deep and possibly infinite.
   const context = provideCollectionContext({
     collectionRef,
     itemMap,
@@ -46,20 +45,21 @@ export const CollectionSlot = defineComponent({
 
 export const CollectionItem = defineComponent({
   name: 'CollectionItem',
+  inheritAttrs: false,
   setup(_, { slots, attrs }) {
     const context = injectCollectionContext()
     const { primitiveElement, currentElement } = usePrimitiveElement()
-    const vm = getCurrentInstance()
+    const { value, ...restAttrs } = attrs
 
     watchEffect((cleanupFn) => {
       if (currentElement.value) {
         const key = markRaw(currentElement.value)
-        context.itemMap.value.set(key, { ref: currentElement.value!, ...(markRaw(vm?.parent?.props ?? {})) })
+        context.itemMap.value.set(key, { ref: currentElement.value!, value })
         cleanupFn(() => context.itemMap.value.delete(key))
       }
     })
 
-    return () => h(Slot, { ...attrs, [context.attrName]: '', ref: primitiveElement }, slots)
+    return () => h(Slot, { ...restAttrs, [context.attrName]: '', ref: primitiveElement }, slots)
   },
 })
 
diff --git a/packages/radix-vue/src/Listbox/ListboxItem.vue b/packages/radix-vue/src/Listbox/ListboxItem.vue
index 923cdda7e..b5719a5d8 100644
--- a/packages/radix-vue/src/Listbox/ListboxItem.vue
+++ b/packages/radix-vue/src/Listbox/ListboxItem.vue
@@ -68,7 +68,7 @@ provideListboxItemContext({
 </script>
 
 <template>
-  <CollectionItem>
+  <CollectionItem :value="value">
     <Primitive
       :id="id"
       :ref="forwardRef"
diff --git a/packages/radix-vue/src/Listbox/ListboxRoot.vue b/packages/radix-vue/src/Listbox/ListboxRoot.vue
index 0ea421446..0231d271b 100644
--- a/packages/radix-vue/src/Listbox/ListboxRoot.vue
+++ b/packages/radix-vue/src/Listbox/ListboxRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { createContext, useDirection, useFormControl, useKbd, useTypeahead } from '@/shared'
+import { createContext, findValuesBetween, useDirection, useFormControl, useKbd, useTypeahead } from '@/shared'
 import { Primitive } from '..'
 import { type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 import type { AcceptableValue, DataOrientation, Direction } from '@/shared/types'
@@ -75,7 +75,7 @@ export type ListboxRootEmits<T = AcceptableValue> = {
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
 import { type Ref, nextTick, ref, toRefs, watch } from 'vue'
-import { compare, findValuesBetween } from './utils'
+import { compare } from './utils'
 import { createCollection } from '@/Collection'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 
diff --git a/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue b/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
index be36799ad..a454b7b23 100644
--- a/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
+++ b/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
@@ -13,9 +13,10 @@ export interface ListboxVirtualizerProps<T extends AcceptableValue = AcceptableV
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { type Ref, cloneVNode, computed, useSlots } from 'vue'
 import { injectListboxRootContext } from './ListboxRoot.vue'
-import { compare, findValuesBetween, queryCheckedElement } from './utils'
+import { compare, queryCheckedElement } from './utils'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 import { refAutoReset } from '@vueuse/shared'
+import { findValuesBetween } from '@/shared'
 import { getNextMatch } from '@/shared/useTypeahead'
 import { useParentElement } from '@vueuse/core'
 import { useCollection } from '@/Collection'
@@ -71,7 +72,7 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
     is: cloneVNode(slots.default!({
       option: props.options[item.index],
     })![0], {
-      'key': `${item.index}`,
+      'key': `${item.key}`,
       'data-index': item.index,
       'aria-setsize': props.options.length,
       'aria-posinset': item.index + 1,
diff --git a/packages/radix-vue/src/Listbox/utils.ts b/packages/radix-vue/src/Listbox/utils.ts
index fe9277c9f..8f1489d73 100644
--- a/packages/radix-vue/src/Listbox/utils.ts
+++ b/packages/radix-vue/src/Listbox/utils.ts
@@ -28,14 +28,3 @@ export function compare<T>(value?: T, currentValue?: T, comparator?: string | ((
 
   return isEqual(value, currentValue)
 }
-
-export function findValuesBetween<T>(array: T[], start: T, end: T) {
-  const startIndex = array.findIndex(i => isEqual(i, start))
-  const endIndex = array.findIndex(i => isEqual(i, end))
-  if (startIndex === -1 || endIndex === -1)
-    return []
-
-  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b)
-
-  return array.slice(minIndex, maxIndex + 1)
-}
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index fc17b3135..76a3dfe59 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -5,6 +5,7 @@ export interface RovingFocusItemProps extends PrimitiveProps {
   tabStopId?: string
   focusable?: boolean
   active?: boolean
+  allowShiftKey?: boolean
 }
 </script>
 
@@ -55,7 +56,7 @@ function handleKeydown(event: KeyboardEvent) {
   )
 
   if (focusIntent !== undefined) {
-    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+    if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))
       return
     event.preventDefault()
     let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index f2f853d53..ea0c59d8a 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -9,7 +9,6 @@ export interface TreeItemProps<T> extends PrimitiveProps {
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
-import isEqual from 'fast-deep-equal'
 import { computed } from 'vue'
 import { useCollection } from '@/Collection'
 
@@ -17,15 +16,25 @@ const props = withDefaults(defineProps<TreeItemProps<T>>(), {
   as: 'li',
 })
 
+defineSlots<{
+  default: (props: {
+    isExpanded: boolean
+    isSelected: boolean
+  }) => any
+}>()
 const rootContext = injectTreeRootContext()
 const { getItems } = useCollection()
 
-const isSelected = computed(() => isEqual(rootContext.modelValue.value, props.value))
 const isExpanded = computed(() => {
   const key = rootContext.getKey(props.value)
   return rootContext.expanded.value.includes(key)
 })
 
+const isSelected = computed(() => {
+  const key = rootContext.getKey(props.value)
+  return rootContext.selectedKeys.value.includes(key)
+})
+
 function handleKeydownRight() {
   if (!props.value.children?.length)
     return
@@ -36,8 +45,7 @@ function handleKeydownRight() {
     const currentElement = document.activeElement as HTMLElement
     const currentIndex = collection.indexOf(currentElement)
     const list = [...collection].slice(currentIndex)
-    const currentLevel = Number(currentElement.getAttribute('data-indent'))
-    const nextElement = list.find(el => Number(el.getAttribute('data-indent')) === (currentLevel + 1))
+    const nextElement = list.find(el => Number(el.getAttribute('data-indent')) === (props.level + 1))
 
     if (nextElement)
       nextElement.focus()
@@ -48,10 +56,6 @@ function handleKeydownRight() {
 }
 
 function handleKeydownLeft() {
-  // Virtualized item might not be in DOM
-  // if (rootContext.isVirtual.value)
-  //   return
-
   if (isExpanded.value) {
     //  close expanded
     rootContext.onToggle(props.value)
@@ -62,17 +66,21 @@ function handleKeydownLeft() {
     const currentElement = document.activeElement as HTMLElement
     const currentIndex = collection.indexOf(currentElement)
     const list = [...collection].slice(0, currentIndex).reverse()
-    const currentLevel = Number(currentElement.getAttribute('data-indent'))
-    const parentElement = list.find(el => Number(el.getAttribute('data-indent')) === (currentLevel - 1))
+    const parentElement = list.find(el => Number(el.getAttribute('data-indent')) === (props.level - 1))
 
     if (parentElement)
       parentElement.focus()
   }
 }
+
+defineExpose({
+  isExpanded,
+  isSelected,
+})
 </script>
 
 <template>
-  <RovingFocusItem as-child>
+  <RovingFocusItem as-child :value="value" allow-shift-key>
     <Primitive
       role="treeitem"
       :as="as"
@@ -81,15 +89,26 @@ function handleKeydownLeft() {
       :aria-expanded="isExpanded"
       :aria-level="level"
       :data-indent="level"
+      :data-selected="isSelected ? '' : undefined"
+      :data-expanded="isExpanded ? '' : undefined"
       @keydown.enter.space.prevent="rootContext.onSelect(value)"
       @keydown.right.prevent="handleKeydownRight"
       @keydown.left.prevent="handleKeydownLeft"
       @click.stop="() => {
-        rootContext.onSelect(value)
+        if (rootContext.preventSelectBeforeExpand.value && !!props.value.children?.length) {
+          if (isExpanded)
+            rootContext.onSelect(value)
+        }
+        else {
+          rootContext.onSelect(value)
+        }
         rootContext.onToggle(value)
       }"
     >
-      <slot />
+      <slot
+        :is-expanded="isExpanded"
+        :is-selected="isSelected"
+      />
     </Primitive>
   </RovingFocusItem>
 </template>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 093bd80ca..47ad76363 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -1,14 +1,24 @@
 <script lang="ts">
-import { createContext, useTypeahead } from '@/shared'
+import { createContext, findValuesBetween, useDirection, useKbd, useSelectionBehavior, useTypeahead } from '@/shared'
+import type { Direction } from '@/shared/types'
 
 export interface TreeRootProps<T, U> extends PrimitiveProps {
-  modelValue?: U
-  defaultValue?: U
+  modelValue?: U | U[]
+  defaultValue?: U | U[]
   items?: T[]
   expanded?: string[]
   defaultExpanded?: string[]
   getKey: (val: T) => string
+  /** How multiple selection should behave in the collection. */
+  selectionBehavior?: 'toggle' | 'replace'
+  /** Whether multiple options can be selected or not.  */
   multiple?: boolean
+  /** The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode. */
+  dir?: Direction
+  /** When `true`, prevents the user from interacting with tree  */
+  disabled?: boolean
+  /** By default clicking on item will select the item, setting to `true` will open the item (if possible) then select the item */
+  preventSelectBeforeExpand?: boolean
 }
 
 export type TreeRootEmits<T> = {
@@ -17,23 +27,33 @@ export type TreeRootEmits<T> = {
 }
 
 interface TreeRootContext<T> {
-  modelValue: Ref<T>
+  modelValue: Ref<T | T[]>
+  selectedKeys: Ref<string[]>
   onSelect: (val: T) => void
   expanded: Ref<string[]>
   onToggle: (val: T) => void
   items: Ref<T[]>
   getKey: (val: T) => string
+  multiple: Ref<boolean>
+  disabled: Ref<boolean>
+  dir: Ref<Direction>
+  preventSelectBeforeExpand: Ref<boolean>
   isVirtual: Ref<boolean>
   virtualKeydownHook: EventHook<KeyboardEvent>
+
+  handleMultipleReplace: ReturnType<typeof useSelectionBehavior>['handleMultipleReplace']
 }
 
 export type FlattenedItem<T> = {
   _id: string
   value: T
-  isSelected?: boolean
-  isExpanded?: boolean
-  hasChildren: boolean
   level: number
+  hasChildren: boolean
+  bind: {
+    value: T
+    level: number
+    [key: string]: any
+  }
 }
 
 export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext<any>>('TreeRoot')
@@ -44,28 +64,34 @@ import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
 import { type Ref, computed, ref, toRefs } from 'vue'
+import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 
-const props = defineProps<TreeRootProps<T, U>>()
+const props = withDefaults(defineProps<TreeRootProps<T, U>>(), {
+  selectionBehavior: 'toggle',
+})
 const emits = defineEmits<TreeRootEmits<U>>()
 
 defineSlots<{
   default: (props: {
-    // node: FlattenedItem<T>
-    // value: T
     flattenItems: FlattenedItem<T>[]
   }) => any
 }>()
 
-// const { multiple } = toRefs(props)
+const { multiple, disabled, preventSelectBeforeExpand, dir: propDir } = toRefs(props)
 const { handleTypeaheadSearch } = useTypeahead()
+const dir = useDirection(propDir)
 const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
 
+// Virtualizer
+const isVirtual = ref(false)
+const virtualKeydownHook = createEventHook<KeyboardEvent>()
+
 const modelValue = useVModel(props, 'modelValue', emits, {
   // @ts-expect-error idk
-  defaultValue: props.defaultValue ?? [],
+  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
   passive: (props.modelValue === undefined) as false,
   deep: true,
-}) as Ref<U>
+}) as Ref<U | U[]>
 
 const expanded = useVModel(props, 'expanded', emits, {
   // @ts-expect-error idk
@@ -74,14 +100,32 @@ const expanded = useVModel(props, 'expanded', emits, {
   deep: true,
 }) as Ref<string[]>
 
+const { onSelectItem, handleMultipleReplace } = useSelectionBehavior(modelValue, props)
+
+const selectedKeys = computed(() => {
+  if (multiple.value && Array.isArray(modelValue.value))
+    return modelValue.value.map(i => props.getKey(i as any))
+  else
+    return [props.getKey(modelValue.value as any ?? {})]
+})
+
 function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
-  return items.reduce((acc: FlattenedItem<T>[], item: T) => {
+  return items.reduce((acc: FlattenedItem<T>[], item: T, index: number) => {
     const key = props.getKey(item)
-    const modelValueKey = props.getKey((modelValue.value ?? {}) as T) ?? `${modelValue.value}`
     const isExpanded = expanded.value.includes(key)
-    const isSelected = modelValueKey === key
 
-    const flattenedItem: FlattenedItem<T> = { _id: key, value: item, level, hasChildren: !!item.children, isExpanded, isSelected }
+    const flattenedItem: FlattenedItem<T> = {
+      _id: key,
+      value: item,
+      level,
+      hasChildren: !!item.children,
+      bind: {
+        'value': item,
+        level,
+        'aria-setsize': items.length,
+        'aria-posinset': index + 1,
+      },
+    }
     acc.push(flattenedItem)
 
     if (item.children && isExpanded)
@@ -107,14 +151,19 @@ function handleKeydown(event: KeyboardEvent) {
   }
 }
 
-// Virtualizer
-const isVirtual = ref(false)
-const virtualKeydownHook = createEventHook<KeyboardEvent>()
+function handleKeydownNavigation(event: KeyboardEvent) {
+  if (isVirtual.value)
+    return
+
+  const intent = MAP_KEY_TO_FOCUS_INTENT[event.key]
+  handleMultipleReplace(intent, document.activeElement, rovingFocusGroupRef.value?.getItems!, expandedItems.value.map(i => i.value))
+}
 
 provideTreeRootContext({
   modelValue,
+  selectedKeys,
   onSelect: (val) => {
-    modelValue.value = { ...val }
+    onSelectItem(val, v => props.getKey(v as any) === props.getKey(val as any))
   },
   expanded,
   onToggle(val) {
@@ -129,19 +178,30 @@ provideTreeRootContext({
   },
   getKey: props.getKey,
   items: expandedItems,
+  disabled,
+  multiple,
+  dir,
+  preventSelectBeforeExpand,
 
   isVirtual,
   virtualKeydownHook,
+  handleMultipleReplace,
 })
 </script>
 
 <template>
-  <RovingFocusGroup ref="rovingFocusGroupRef" as-child orientation="vertical">
+  <RovingFocusGroup
+    ref="rovingFocusGroupRef"
+    as-child
+    orientation="vertical"
+    :dir="dir"
+  >
     <Primitive
       role="tree"
       :as="as"
       :as-child="asChild"
       @keydown="handleKeydown"
+      @keydown.up.down.shift="handleKeydownNavigation"
     >
       <slot :flatten-items="expandedItems" />
     </Primitive>
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
index 53774ac5e..6980c93c2 100644
--- a/packages/radix-vue/src/Tree/TreeVirtualizer.vue
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -9,7 +9,7 @@ export interface TreeVirtualizerProps {
 
 <script setup lang="ts">
 import { useVirtualizer } from '@tanstack/vue-virtual'
-import { type Ref, cloneVNode, computed, useSlots } from 'vue'
+import { type Ref, cloneVNode, computed, nextTick, useSlots } from 'vue'
 import { type FlattenedItem, injectTreeRootContext } from './TreeRoot.vue'
 import { refAutoReset, useParentElement } from '@vueuse/core'
 import { getNextMatch } from '@/shared/useTypeahead'
@@ -68,6 +68,9 @@ const virtualizer = useVirtualizer(
     get scrollPaddingEnd() { return padding.value.end },
     get count() { return rootContext.items.value.length ?? 0 },
     get horizontal() { return false },
+    getItemKey(index) {
+      return index + rootContext.getKey(rootContext.items.value[index].value)
+    },
     estimateSize() {
       return props.estimateSize ?? 28
     },
@@ -82,10 +85,7 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
     is: cloneVNode(slots.default!({
       item: rootContext.items.value[item.index],
     })![0], {
-      'key': `${item.index}`,
       'data-index': item.index,
-      'aria-setsize': rootContext.items.value.length,
-      'aria-posinset': item.index + 1,
       'style': {
         position: 'absolute',
         top: 0,
@@ -146,6 +146,9 @@ rootContext.virtualKeydownHook.on((event) => {
     if (nextMatch)
       scrollToIndexAndFocus(nextMatch.index)
   }
+
+  if (event.shiftKey && intent)
+    rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.items.value.map(i => i.value))
 })
 </script>
 
@@ -161,7 +164,7 @@ rootContext.virtualKeydownHook.on((event) => {
     <component
       :is="is"
       v-for="{ is, item } in virtualizedItems"
-      :key="item.index"
+      :key="item.key"
     />
   </div>
 </template>
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index 4372033e0..1dee5890d 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -59,10 +59,10 @@ const items = [
   },
 ]
 
-const modelValue = ref<{ title: string, icon: string }>({
-  title: '+page.vue',
-  icon: 'vue',
-})
+// const modelValue = ref<{ title: string, icon: string }>({
+//   title: '+page.vue',
+//   icon: 'vue',
+// })
 </script>
 
 <template>
@@ -70,19 +70,18 @@ const modelValue = ref<{ title: string, icon: string }>({
     <Variant title="default">
       <TreeRoot
         v-slot="{ flattenItems }"
-        v-model="modelValue"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
         :items="items"
         :get-key="(item) => item.title"
-        class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+        multiple
+        selection-behavior="replace"
       >
         <TreeItem
           v-for="item in flattenItems"
           :key="item._id"
-          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
           :style="{ 'margin-left': `${item.level}rem` }"
-          :class="{ 'bg-grass4': item.isSelected }"
-          :value="item.value"
-          :level="item.level"
+          v-bind="item.bind"
         >
           <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
           <div class="pl-2">
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
index f4faa05f4..2471edbe4 100644
--- a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -25,16 +25,15 @@ const items = groupCountriesByFirstLetter(countryList)
       <TreeRoot
         :items="items"
         :get-key="(item) => item.title"
+        multiple
+        selection-behavior="replace"
         class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
       >
         <TreeVirtualizer v-slot="{ item }" :text-content="(item) => item.title">
           <TreeItem
-
-            class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2"
+            class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
             :style="{ 'margin-left': `${item.level}rem` }"
-            :class="{ 'bg-grass4': item.isSelected }"
-            :value="item.value"
-            :level="item.level"
+            v-bind="item.bind"
           >
             <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
             <div class="pl-2">
diff --git a/packages/radix-vue/src/shared/arrays.ts b/packages/radix-vue/src/shared/arrays.ts
index 72de00372..48109d5d1 100644
--- a/packages/radix-vue/src/shared/arrays.ts
+++ b/packages/radix-vue/src/shared/arrays.ts
@@ -1,3 +1,5 @@
+import isEqual from 'fast-deep-equal'
+
 /**
  * The function `areEqual` compares two arrays and returns true if they are equal in length and have
  * the same elements at corresponding indexes.
@@ -37,3 +39,28 @@ export function chunk<T>(arr: T[], size: number): T[][] {
 
   return result
 }
+
+/**
+ * The function `findValuesBetween` takes an array and two values, then returns a subarray containing
+ * elements between the first occurrence of the start value and the first occurrence of the end value
+ * in the array.
+ * @param {T[]} array - The `array` parameter is an array of values of type `T`.
+ * @param {T} start - The `start` parameter is the value that marks the beginning of the range you want
+ * to find in the array.
+ * @param {T} end - The `end` parameter in the `findValuesBetween` function represents the end value
+ * that you want to find in the array. This function will return a subarray of values that are between
+ * the `start` and `end` values in the original array.
+ * @returns The `findValuesBetween` function returns an array of values from the input array that are
+ * between the `start` and `end` values (inclusive). If either the `start` or `end` values are not
+ * found in the input array, an empty array is returned.
+ */
+export function findValuesBetween<T>(array: T[], start: T, end: T) {
+  const startIndex = array.findIndex(i => isEqual(i, start))
+  const endIndex = array.findIndex(i => isEqual(i, end))
+  if (startIndex === -1 || endIndex === -1)
+    return []
+
+  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b)
+
+  return array.slice(minIndex, maxIndex + 1)
+}
diff --git a/packages/radix-vue/src/shared/index.ts b/packages/radix-vue/src/shared/index.ts
index c17f37df9..a7dc5936e 100644
--- a/packages/radix-vue/src/shared/index.ts
+++ b/packages/radix-vue/src/shared/index.ts
@@ -25,6 +25,7 @@ export { useForwardRef } from './useForwardRef'
 export { useGraceArea } from './useGraceArea'
 export { useHideOthers } from './useHideOthers'
 export { useId } from './useId'
+export { useSelectionBehavior } from './useSelectionBehavior'
 export { useSize } from './useSize'
 export { useStateMachine } from './useStateMachine'
 export { useTypeahead } from './useTypeahead'
diff --git a/packages/radix-vue/src/shared/useSelectionBehavior.ts b/packages/radix-vue/src/shared/useSelectionBehavior.ts
new file mode 100644
index 000000000..292d72726
--- /dev/null
+++ b/packages/radix-vue/src/shared/useSelectionBehavior.ts
@@ -0,0 +1,75 @@
+import { type Ref, ref } from 'vue'
+import { findValuesBetween } from './arrays'
+
+export function useSelectionBehavior<T>(
+  modelValue: Ref<T | T[]>,
+  props: { multiple?: boolean, selectionBehavior?: 'toggle' | 'replace', isVirtual?: boolean },
+) {
+  const { multiple = false, selectionBehavior = 'toggle' } = props
+
+  const firstValue = ref()
+
+  const onSelectItem = (val: T, condition: (existingValue: T) => boolean) => {
+    // multiple select
+    if (multiple && Array.isArray(modelValue.value)) {
+      if (selectionBehavior === 'replace') {
+        modelValue.value = [val]
+        firstValue.value = val
+      }
+      else {
+        const index = modelValue.value.findIndex(v => condition(v))
+        if (index !== -1)
+          modelValue.value.splice(index, 1)
+        else
+          modelValue.value.push(val)
+      }
+    }
+    // single select
+    else {
+      if (selectionBehavior === 'replace') {
+        modelValue.value = { ...val }
+      }
+      else {
+        if (!Array.isArray(modelValue.value) && condition(modelValue.value))
+          modelValue.value = undefined as any
+        else
+          modelValue.value = { ...val }
+      }
+    }
+  }
+
+  function handleMultipleReplace(intent: 'first' | 'last' | 'prev' | 'next', currentElement: HTMLElement | Element | null, getItems: () => { ref: HTMLElement, value?: any }[], options: any[]) {
+    if (!firstValue?.value || !multiple || !Array.isArray(modelValue.value))
+      return
+
+    const collection = getItems().filter(i => i.ref.dataset.disabled !== '')
+    const lastValue = collection.find(i => i.ref === currentElement)?.value
+    if (!lastValue)
+      return
+
+    let value: T[] | null = null
+    switch (intent) {
+      case 'prev':
+      case 'next': {
+        value = findValuesBetween(options, firstValue.value, lastValue)
+        break
+      }
+      case 'first': {
+        value = findValuesBetween(options, firstValue.value, options?.[0])
+        break
+      }
+      case 'last': {
+        value = findValuesBetween(options, firstValue.value, options?.[options.length - 1])
+        break
+      }
+    }
+
+    modelValue.value = value
+  }
+
+  return {
+    firstValue,
+    onSelectItem,
+    handleMultipleReplace,
+  }
+}

From 3cf222faeab8d360f69ad582642afb4b858d7853 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 5 Jun 2024 14:12:27 +0800
Subject: [PATCH 10/27] fix: build

---
 packages/radix-vue/src/Collection/Collection.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/radix-vue/src/Collection/Collection.ts b/packages/radix-vue/src/Collection/Collection.ts
index 9f2daa052..8f4255bdc 100644
--- a/packages/radix-vue/src/Collection/Collection.ts
+++ b/packages/radix-vue/src/Collection/Collection.ts
@@ -19,6 +19,7 @@ export function createCollection<ItemData = {}>(attrName = ITEM_DATA_ATTR) {
   const itemMap = ref<Map<HTMLElement, { ref: HTMLElement } & ItemData>>(new Map())
   const collectionRef = ref<HTMLElement>()
 
+  // @ts-expect-error Type instantiation is excessively deep and possibly infinite.
   const context = provideCollectionContext({
     collectionRef,
     itemMap,

From cbe69fda3d449637b83cd9a614437d6703f4a386 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 5 Jun 2024 14:26:13 +0800
Subject: [PATCH 11/27] fix: missing value for comboboxitem

---
 packages/radix-vue/src/Combobox/ComboboxItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/radix-vue/src/Combobox/ComboboxItem.vue b/packages/radix-vue/src/Combobox/ComboboxItem.vue
index 2afd65ad4..c9daf559d 100644
--- a/packages/radix-vue/src/Combobox/ComboboxItem.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxItem.vue
@@ -102,7 +102,7 @@ provideComboboxItemContext({
 </script>
 
 <template>
-  <CollectionItem>
+  <CollectionItem :value="value">
     <Primitive
       v-show="isInOption"
       :ref="forwardRef"

From f44da941935b4d87fdde5c8b030afe24ce3442df Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 5 Jun 2024 15:14:09 +0800
Subject: [PATCH 12/27] feat: export component, run docsgen

---
 docs/content/meta/TreeItem.md                 |  42 +++++++
 docs/content/meta/TreeRoot.md                 | 105 ++++++++++++++++++
 docs/content/meta/TreeVirtualizer.md          |  24 ++++
 packages/plugins/src/namespaced/index.ts      |  12 +-
 packages/radix-vue/constant/components.ts     |   6 +
 packages/radix-vue/src/Tree/TreeItem.vue      |   2 +
 packages/radix-vue/src/Tree/TreeRoot.vue      |   8 +-
 packages/radix-vue/src/Tree/index.ts          |  16 ++-
 .../src/Tree/story/TreeBasic.story.vue        |   2 -
 packages/radix-vue/src/index.ts               |   1 +
 10 files changed, 211 insertions(+), 7 deletions(-)
 create mode 100644 docs/content/meta/TreeItem.md
 create mode 100644 docs/content/meta/TreeRoot.md
 create mode 100644 docs/content/meta/TreeVirtualizer.md

diff --git a/docs/content/meta/TreeItem.md b/docs/content/meta/TreeItem.md
new file mode 100644
index 000000000..6ddf28d74
--- /dev/null
+++ b/docs/content/meta/TreeItem.md
@@ -0,0 +1,42 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'li\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'level',
+    'description': '<p>Level of depth</p>\n',
+    'type': 'number',
+    'required': true
+  },
+  {
+    'name': 'value',
+    'description': '<p>Value given to this item</p>\n',
+    'type': 'Record<string, any>',
+    'required': true
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'isExpanded',
+    'description': '',
+    'type': 'boolean'
+  },
+  {
+    'name': 'isSelected',
+    'description': '',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
new file mode 100644
index 000000000..e01c8ec6e
--- /dev/null
+++ b/docs/content/meta/TreeRoot.md
@@ -0,0 +1,105 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultExpanded',
+    'description': '<p>The value of the expanded tree when initially rendered. Use when you do not need to control the state of the expanded tree</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the tree when initially rendered. Use when you do not need to control the state of the tree</p>\n',
+    'type': 'unknown',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the listbox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with tree</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'expanded',
+    'description': '<p>The controlled value of the expanded item. Can be binded-with with <code>v-model</code>.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'getKey',
+    'description': '<p>This function is passed the index of each item and should return a unique key for that item</p>\n',
+    'type': '(val: Record<string, any>) => string',
+    'required': true
+  },
+  {
+    'name': 'items',
+    'description': '<p>List of items</p>\n',
+    'type': 'Record<string, any>[]',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the tree. Can be binded-with with <code>v-model</code>.</p>\n',
+    'type': 'unknown',
+    'required': false
+  },
+  {
+    'name': 'multiple',
+    'description': '<p>Whether multiple options can be selected or not.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'preventSelectBeforeExpand',
+    'description': '<p>By default clicking on item will select the item, setting to <code>true</code> will open the item (if possible) then select the item</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'selectionBehavior',
+    'description': '<p>How multiple selection should behave in the collection.</p>\n',
+    'type': '\'toggle\' | \'replace\'',
+    'required': false,
+    'default': '\'toggle\''
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:expanded',
+    'description': '',
+    'type': '[val: string[]]'
+  },
+  {
+    'name': 'update:modelValue',
+    'description': '<p>Event handler called when the value changes.</p>\n',
+    'type': '[val: unknown]'
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'flattenItems',
+    'description': '',
+    'type': 'FlattenedItem<Record<string, any>>[]'
+  }
+]" />
diff --git a/docs/content/meta/TreeVirtualizer.md b/docs/content/meta/TreeVirtualizer.md
new file mode 100644
index 000000000..507987f38
--- /dev/null
+++ b/docs/content/meta/TreeVirtualizer.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'estimateSize',
+    'description': '<p>Estimated size (in px) of each item</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'textContent',
+    'description': '<p>text content for each item to achieve type-ahead feature</p>\n',
+    'type': '((item: any) => string)',
+    'required': false
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'item',
+    'description': '',
+    'type': 'FlattenedItem<any>'
+  }
+]" />
diff --git a/packages/plugins/src/namespaced/index.ts b/packages/plugins/src/namespaced/index.ts
index 67cbeb3c6..439698d70 100644
--- a/packages/plugins/src/namespaced/index.ts
+++ b/packages/plugins/src/namespaced/index.ts
@@ -1,4 +1,4 @@
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, AvatarFallback, AvatarImage, AvatarRoot, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, CheckboxIndicator, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, ConfigProvider, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DatePickerAnchor, DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerClose, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger, DateRangeFieldInput, DateRangeFieldRoot, DateRangePickerAnchor, DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerClose, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger, HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, Label, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, ListboxVirtualizer, MenubarArrow, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, SelectArrow, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Separator, SliderRange, SliderRoot, SliderThumb, SliderTrack, Slot, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, SwitchThumb, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, Viewport, VisuallyHidden } from 'radix-vue'
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, AvatarFallback, AvatarImage, AvatarRoot, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, CheckboxIndicator, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, ConfigProvider, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DatePickerAnchor, DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerClose, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger, DateRangeFieldInput, DateRangeFieldRoot, DateRangePickerAnchor, DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerClose, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger, HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, Label, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, ListboxVirtualizer, MenubarArrow, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, SelectArrow, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Separator, SliderRange, SliderRoot, SliderThumb, SliderTrack, Slot, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, SwitchThumb, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, TreeVirtualizer, Viewport, VisuallyHidden } from 'radix-vue'
 
 export const Accordion = {
   Content: AccordionContent,
@@ -714,4 +714,14 @@ export const Tooltip = {
   Provider: typeof TooltipProvider
 }
 
+export const Tree = {
+  Root: TreeRoot,
+  Item: TreeItem,
+  Virtualizer: TreeVirtualizer,
+} as {
+  Root: typeof TreeRoot
+  Item: typeof TreeItem
+  Virtualizer: typeof TreeVirtualizer
+}
+
 export { Viewport }
diff --git a/packages/radix-vue/constant/components.ts b/packages/radix-vue/constant/components.ts
index 446b5f64d..d5766cacd 100644
--- a/packages/radix-vue/constant/components.ts
+++ b/packages/radix-vue/constant/components.ts
@@ -408,6 +408,12 @@ export const components = {
     'TooltipProvider',
   ],
 
+  tree: [
+    'TreeRoot',
+    'TreeItem',
+    'TreeVirtualizer',
+  ],
+
   viewport: [
     'Viewport',
   ],
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index ea0c59d8a..586dc0951 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
 export interface TreeItemProps<T> extends PrimitiveProps {
+  /** Value given to this item */
   value: T
+  /** Level of depth */
   level: number
 }
 </script>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 47ad76363..6b6460528 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -3,11 +3,17 @@ import { createContext, findValuesBetween, useDirection, useKbd, useSelectionBeh
 import type { Direction } from '@/shared/types'
 
 export interface TreeRootProps<T, U> extends PrimitiveProps {
+  /** The controlled value of the tree. Can be binded-with with `v-model`. */
   modelValue?: U | U[]
+  /** The value of the tree when initially rendered. Use when you do not need to control the state of the tree */
   defaultValue?: U | U[]
+  /** List of items */
   items?: T[]
+  /** The controlled value of the expanded item. Can be binded-with with `v-model`. */
   expanded?: string[]
+  /** The value of the expanded tree when initially rendered. Use when you do not need to control the state of the expanded tree */
   defaultExpanded?: string[]
+  /** This function is passed the index of each item and should return a unique key for that item */
   getKey: (val: T) => string
   /** How multiple selection should behave in the collection. */
   selectionBehavior?: 'toggle' | 'replace'
@@ -163,7 +169,7 @@ provideTreeRootContext({
   modelValue,
   selectedKeys,
   onSelect: (val) => {
-    onSelectItem(val, v => props.getKey(v as any) === props.getKey(val as any))
+    onSelectItem(val, v => props.getKey(v as any ?? {}) === props.getKey(val as any))
   },
   expanded,
   onToggle(val) {
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
index 9ab736f4b..e1590670d 100644
--- a/packages/radix-vue/src/Tree/index.ts
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -1,3 +1,13 @@
-export { default as TreeRoot } from './TreeRoot.vue'
-export { default as TreeItem } from './TreeItem.vue'
-export { default as TreeVirtualizer } from './TreeVirtualizer.vue'
+export {
+  default as TreeRoot,
+  type TreeRootProps,
+  type TreeRootEmits,
+} from './TreeRoot.vue'
+export {
+  default as TreeItem,
+  type TreeItemProps,
+} from './TreeItem.vue'
+export {
+  default as TreeVirtualizer,
+  type TreeVirtualizerProps,
+} from './TreeVirtualizer.vue'
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index 1dee5890d..e56cc2fff 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -73,8 +73,6 @@ const items = [
         class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
         :items="items"
         :get-key="(item) => item.title"
-        multiple
-        selection-behavior="replace"
       >
         <TreeItem
           v-for="item in flattenItems"
diff --git a/packages/radix-vue/src/index.ts b/packages/radix-vue/src/index.ts
index fa409f1d0..c9c33e6c2 100644
--- a/packages/radix-vue/src/index.ts
+++ b/packages/radix-vue/src/index.ts
@@ -40,6 +40,7 @@ export * from './Toggle'
 export * from './ToggleGroup'
 export * from './Toolbar'
 export * from './Tooltip'
+export * from './Tree'
 export * from './Viewport'
 
 // utilities

From 02ee9c54a4526dba2be2ed9ce40b010c9c793235 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 5 Jun 2024 23:41:42 +0800
Subject: [PATCH 13/27] docs: tree, demo

---
 docs/.vitepress/config.ts                     |   1 +
 docs/components/Demos.vue                     |   4 +
 docs/components/demo/Tree/css/index.vue       |  61 ++++++
 docs/components/demo/Tree/tailwind/index.vue  |  62 ++++++
 .../demo/Tree/tailwind/tailwind.config.js     |  15 ++
 docs/content/components/number-field.md       |   2 +
 docs/content/components/tree.md               | 181 ++++++++++++++++++
 docs/content/meta/TreeRoot.md                 |   6 +-
 docs/content/meta/TreeVirtualizer.md          |   4 +-
 packages/radix-vue/src/Tree/TreeRoot.vue      |   4 +-
 .../radix-vue/src/Tree/TreeVirtualizer.vue    |   8 +-
 11 files changed, 337 insertions(+), 11 deletions(-)
 create mode 100644 docs/components/demo/Tree/css/index.vue
 create mode 100644 docs/components/demo/Tree/tailwind/index.vue
 create mode 100644 docs/components/demo/Tree/tailwind/tailwind.config.js
 create mode 100644 docs/content/components/tree.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 063585f2b..fdc3b1308 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -151,6 +151,7 @@ export default defineConfig({
           { text: 'Toggle Group', link: '/components/toggle-group' },
           { text: 'Toolbar', link: '/components/toolbar' },
           { text: 'Tooltip', link: '/components/tooltip' },
+          { text: `Tree ${BadgeHTML('Alpha')}`, link: '/components/tree' },
         ],
       },
       {
diff --git a/docs/components/Demos.vue b/docs/components/Demos.vue
index aa0eaa75a..df690e5fb 100644
--- a/docs/components/Demos.vue
+++ b/docs/components/Demos.vue
@@ -39,6 +39,7 @@ import ToggleDemo from './demo/Toggle/tailwind/index.vue'
 import ToggleGroupDemo from './demo/ToggleGroup/tailwind/index.vue'
 import ToolbarDemo from './demo/Toolbar/tailwind/index.vue'
 import TooltipDemo from './demo/Tooltip/tailwind/index.vue'
+import TreeDemo from './demo/Tree/tailwind/index.vue'
 
 import DemoContainer from './DemoContainer.vue'
 </script>
@@ -165,5 +166,8 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="tooltip">
       <TooltipDemo />
     </DemoContainer>
+    <DemoContainer title="tree">
+      <TooltipDemo />
+    </DemoContainer>
   </div>
 </template>
diff --git a/docs/components/demo/Tree/css/index.vue b/docs/components/demo/Tree/css/index.vue
new file mode 100644
index 000000000..f1e314efb
--- /dev/null
+++ b/docs/components/demo/Tree/css/index.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from 'radix-vue'
+import { Icon } from '@iconify/vue'
+
+const items = [
+  {
+    title: 'composables',
+    icon: 'lucide:folder',
+    children: [
+      { title: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+      { title: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' },
+    ],
+  },
+  {
+    title: 'components',
+    icon: 'lucide:folder',
+    children: [
+      {
+        title: 'Home',
+        icon: 'lucide:folder',
+        children: [
+          { title: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+          { title: 'Button.vue', icon: 'vscode-icons:file-type-vue' },
+        ],
+      },
+    ],
+  },
+  { title: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+  { title: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' },
+]
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium" :items="items"
+    :get-key="(item) => item.title"
+    :default-expanded="['components']"
+  >
+    <h2 class="font-semibold !text-base text-blackA11 px-2 pt-1">
+      Directory Structure
+    </h2>
+    <TreeItem
+      v-for="item in flattenItems"
+      v-slot="{ isExpanded }"
+      :key="item._id"
+      :style="{ 'padding-left': `${item.level + 0.5}rem` }"
+      v-bind="item.bind"
+      class="flex items-center py-1 px-2 my-0.5 rounded outline-none focus:ring-grass8 focus:ring-2 data-[selected]:bg-grass4"
+    >
+      <template v-if="item.hasChildren">
+        <Icon v-if="!isExpanded" icon="lucide:folder" class="h-4 w-4" />
+        <Icon v-else icon="lucide:folder-open" class="h-4 w-4" />
+      </template>
+      <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-4 w-4" />
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
diff --git a/docs/components/demo/Tree/tailwind/index.vue b/docs/components/demo/Tree/tailwind/index.vue
new file mode 100644
index 000000000..9941f211a
--- /dev/null
+++ b/docs/components/demo/Tree/tailwind/index.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from 'radix-vue'
+import { Icon } from '@iconify/vue'
+
+const items = [
+  {
+    title: 'composables',
+    icon: 'lucide:folder',
+    children: [
+      { title: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+      { title: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' },
+    ],
+  },
+  {
+    title: 'components',
+    icon: 'lucide:folder',
+    children: [
+      {
+        title: 'Home',
+        icon: 'lucide:folder',
+        children: [
+          { title: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+          { title: 'Button.vue', icon: 'vscode-icons:file-type-vue' },
+        ],
+      },
+    ],
+  },
+  { title: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+  { title: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' },
+]
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium" :items="items"
+    :get-key="(item) => item.title"
+    :default-expanded="['components']"
+  >
+    <h2 class="font-semibold !text-base text-blackA11 px-2 pt-1">
+      Directory Structure
+    </h2>
+    <TreeItem
+      v-for="item in flattenItems"
+      v-slot="{ isExpanded }"
+      :key="item._id"
+      :style="{ 'padding-left': `${item.level + 0.5}rem` }"
+
+      v-bind="item.bind"
+      class="flex items-center py-1 px-2 my-0.5 rounded outline-none focus:ring-grass8 focus:ring-2 data-[selected]:bg-grass4"
+    >
+      <template v-if="item.hasChildren">
+        <Icon v-if="!isExpanded" icon="lucide:folder" class="h-4 w-4" />
+        <Icon v-else icon="lucide:folder-open" class="h-4 w-4" />
+      </template>
+      <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-4 w-4" />
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
diff --git a/docs/components/demo/Tree/tailwind/tailwind.config.js b/docs/components/demo/Tree/tailwind/tailwind.config.js
new file mode 100644
index 000000000..b84aff59e
--- /dev/null
+++ b/docs/components/demo/Tree/tailwind/tailwind.config.js
@@ -0,0 +1,15 @@
+const { green, grass } = require('@radix-ui/colors')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.vue'],
+  theme: {
+    extend: {
+      colors: {
+        ...green,
+        ...grass,
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/docs/content/components/number-field.md b/docs/content/components/number-field.md
index c5002c5d6..c272d9d18 100644
--- a/docs/content/components/number-field.md
+++ b/docs/content/components/number-field.md
@@ -8,6 +8,8 @@ aria: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton
 
 # Number Field
 
+<Badge>Alpha</Badge>
+
 <Description>
 A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
 </Description>
diff --git a/docs/content/components/tree.md b/docs/content/components/tree.md
new file mode 100644
index 000000000..574c1db5c
--- /dev/null
+++ b/docs/content/components/tree.md
@@ -0,0 +1,181 @@
+---
+
+title: Tree
+description: A tree view widget presents a hierarchical list
+name: tree
+aria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+---
+
+# Tree
+
+<Badge>Alpha</Badge>
+
+<Description>
+A tree view widget presents a hierarchical list
+</Description>
+
+<ComponentPreview name="Tree" />
+
+## Features
+
+<Highlights
+  :features="[
+    'Can be controlled or uncontrolled.',
+    'Focus is fully managed.',
+    'Full keyboard navigation.',
+    'Supports Right to Left direction.',
+    'Different selection behavior.',
+  ]"
+/>
+
+## Installation
+
+Install the component from your command line.
+
+<InstallationTabs value="radix-vue" />
+
+## Anatomy
+
+Import all parts and piece them together.
+
+```vue
+<script setup>
+import { TreeItem, TreeRoot, TreeVirtualizer } from 'radix-vue'
+</script>
+
+<template>
+  <TreeRoot>
+    <TreeItem />
+
+    <!-- or with virtual -->
+    <TreeVirtualizer>
+      <TreeItem />
+    </TreeVirtualizer>
+  </TreeRoot>
+</template>
+```
+
+## API Reference
+
+### Root
+
+Contains all the parts of a tree.
+
+<!-- @include: @/meta/TreeRoot.md -->
+
+### Item
+
+The item component.
+
+<!-- @include: @/meta/TreeItem.md -->
+
+<DataAttributesTable
+  :data="[
+    {
+      attribute: '[data-indent]',
+      values: 'Number',
+    },
+    {
+      attribute: '[data-expanded]',
+      values: 'Present when expanded',
+    },
+    {
+      attribute: '[data-selected]',
+      values: 'Present when selected',
+    },
+  ]"
+/>
+
+### Virtualizer
+
+Virtual container to achieve list virtualization.
+
+<!-- @include: @/meta/TreeVirtualizer.md -->
+
+## Examples
+
+### Selecting multiple items
+
+The `Tree` component allows you to select multiple items. You can enable this by providing an array of values instead of a single value.
+
+```vue line=12,16
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeRoot } from 'radix-vue'
+
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+const selectedPeople = ref([people[0], people[1]])
+</script>
+
+<template>
+  <TreeRoot v-model="selectedPeople" multiple>
+    ...
+  </TreeRoot>
+</template>
+```
+
+### Virtual List
+
+Rendering a long list of item can slow down the app, thus using virtualization would significantly improve the performance.
+
+```vue line=9-16
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeItem, TreeRoot, TreeVirtualizer } from 'radix-vue'
+</script>
+
+<template>
+  <TreeRoot :items>
+    <!-- checkout https://radix-vue.com/components/tree.html#virtualizer -->
+    <TreeVirtualizer
+      v-slot="{ item }"
+      :text-content="(opt) => opt.name"
+    >
+      <TreeItem v-bind="item.bind">
+        {{ person.name }}
+      </TreeItem>
+    </TreeVirtualizer>
+  </TreeRoot>
+</template>
+```
+
+## Accessibility
+
+Adheres to the [Tree WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+
+### Keyboard Interactions
+
+<KeyboardTable
+  :data="[
+    {
+      keys: ['Enter'],
+      description: '<span>When highlight on <code>TreeItem</code>, selects the focused item. </span>',
+    },
+    {
+      keys: ['ArrowDown'],
+      description: 'When focus is on <code>TreeItem</code>, moves focus to the next item. </span>',
+    },
+    {
+      keys: ['ArrowUp'],
+      description: 'When focus is on <code>TreeItem</code>, moves focus to the previous item. </span>',
+    },
+    {
+      keys: ['Home'],
+      description: '<span>Moves focus and highlight to the first item.</span>',
+    },
+    {
+      keys: ['End'],
+      description: '<span>Moves focus and highlight to the last item.</span>',
+    },
+    {
+      keys: ['Ctrl/Cmd + A'],
+      description: '<span>Select all the items.</span>',
+    }
+  ]"
+/>
diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
index e01c8ec6e..42cb86185 100644
--- a/docs/content/meta/TreeRoot.md
+++ b/docs/content/meta/TreeRoot.md
@@ -23,7 +23,7 @@
   {
     'name': 'defaultValue',
     'description': '<p>The value of the tree when initially rendered. Use when you do not need to control the state of the tree</p>\n',
-    'type': 'unknown',
+    'type': 'Record<string, any> | Record<string, any>[]',
     'required': false
   },
   {
@@ -59,7 +59,7 @@
   {
     'name': 'modelValue',
     'description': '<p>The controlled value of the tree. Can be binded-with with <code>v-model</code>.</p>\n',
-    'type': 'unknown',
+    'type': 'Record<string, any> | Record<string, any>[]',
     'required': false
   },
   {
@@ -92,7 +92,7 @@
   {
     'name': 'update:modelValue',
     'description': '<p>Event handler called when the value changes.</p>\n',
-    'type': '[val: unknown]'
+    'type': '[val: Record<string, any>]'
   }
 ]" />
 
diff --git a/docs/content/meta/TreeVirtualizer.md b/docs/content/meta/TreeVirtualizer.md
index 507987f38..9f479e4e0 100644
--- a/docs/content/meta/TreeVirtualizer.md
+++ b/docs/content/meta/TreeVirtualizer.md
@@ -10,7 +10,7 @@
   {
     'name': 'textContent',
     'description': '<p>text content for each item to achieve type-ahead feature</p>\n',
-    'type': '((item: any) => string)',
+    'type': '((item: Record<string, any>) => string)',
     'required': false
   }
 ]" />
@@ -19,6 +19,6 @@
   {
     'name': 'item',
     'description': '',
-    'type': 'FlattenedItem<any>'
+    'type': 'FlattenedItem<Record<string, any>>'
   }
 ]" />
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 6b6460528..5b11038b7 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -2,7 +2,7 @@
 import { createContext, findValuesBetween, useDirection, useKbd, useSelectionBehavior, useTypeahead } from '@/shared'
 import type { Direction } from '@/shared/types'
 
-export interface TreeRootProps<T, U> extends PrimitiveProps {
+export interface TreeRootProps<T, U extends Record<string, any>> extends PrimitiveProps {
   /** The controlled value of the tree. Can be binded-with with `v-model`. */
   modelValue?: U | U[]
   /** The value of the tree when initially rendered. Use when you do not need to control the state of the tree */
@@ -65,7 +65,7 @@ export type FlattenedItem<T> = {
 export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext<any>>('TreeRoot')
 </script>
 
-<script setup lang="ts" generic="T extends Record<string, any>, U">
+<script setup lang="ts" generic="T extends Record<string, any>, U extends Record<string, any>">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
index 6980c93c2..bfbfa7647 100644
--- a/packages/radix-vue/src/Tree/TreeVirtualizer.vue
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -3,13 +3,13 @@ export interface TreeVirtualizerProps {
   /** Estimated size (in px) of each item */
   estimateSize?: number
   /** text content for each item to achieve type-ahead feature */
-  textContent?: (item: any) => string
+  textContent?: (item: Record<string, any>) => string
 }
 </script>
 
 <script setup lang="ts">
 import { useVirtualizer } from '@tanstack/vue-virtual'
-import { type Ref, cloneVNode, computed, nextTick, useSlots } from 'vue'
+import { type Ref, cloneVNode, computed, useSlots } from 'vue'
 import { type FlattenedItem, injectTreeRootContext } from './TreeRoot.vue'
 import { refAutoReset, useParentElement } from '@vueuse/core'
 import { getNextMatch } from '@/shared/useTypeahead'
@@ -20,7 +20,7 @@ const props = defineProps<TreeVirtualizerProps>()
 
 defineSlots<{
   default: (props: {
-    item: FlattenedItem<any>
+    item: FlattenedItem<Record<string, any>>
   }) => any
 }>()
 
@@ -32,7 +32,7 @@ const { getItems } = useCollection()
 // Reset `search` 1 second after it was last updated
 const search = refAutoReset('', 1000)
 const optionsWithMetadata = computed(() => {
-  const parseTextContent = (option: any) => {
+  const parseTextContent = (option: Record<string, any>) => {
     if (props.textContent)
       return props.textContent(option)
     else

From 28bd410ef8e7665e75ec1ec80f9fca73855f8a02 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 5 Jun 2024 23:47:16 +0800
Subject: [PATCH 14/27] docs: fix wrong demo

---
 docs/components/Demos.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/Demos.vue b/docs/components/Demos.vue
index df690e5fb..3426a163a 100644
--- a/docs/components/Demos.vue
+++ b/docs/components/Demos.vue
@@ -167,7 +167,7 @@ import DemoContainer from './DemoContainer.vue'
       <TooltipDemo />
     </DemoContainer>
     <DemoContainer title="tree">
-      <TooltipDemo />
+      <TreeDemo />
     </DemoContainer>
   </div>
 </template>

From 5d155f4e85238c28918c0a3cdb8cd385905b366e Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 6 Jun 2024 13:23:36 +0800
Subject: [PATCH 15/27] chore: expose more internal slot

---
 docs/content/meta/TreeRoot.md            | 10 ++++++++++
 packages/radix-vue/src/Tree/TreeItem.vue |  3 ++-
 packages/radix-vue/src/Tree/TreeRoot.vue |  9 +++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
index 42cb86185..24723b1b2 100644
--- a/docs/content/meta/TreeRoot.md
+++ b/docs/content/meta/TreeRoot.md
@@ -101,5 +101,15 @@
     'name': 'flattenItems',
     'description': '',
     'type': 'FlattenedItem<Record<string, any>>[]'
+  },
+  {
+    'name': 'modelValue',
+    'description': '',
+    'type': 'Record<string, any> | Record<string, any>[]'
+  },
+  {
+    'name': 'expanded',
+    'description': '',
+    'type': 'string[]'
   }
 ]" />
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 586dc0951..fa7b17e43 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -78,6 +78,7 @@ function handleKeydownLeft() {
 defineExpose({
   isExpanded,
   isSelected,
+  onToggle: () => rootContext.onToggle(props.value),
 })
 </script>
 
@@ -93,7 +94,7 @@ defineExpose({
       :data-indent="level"
       :data-selected="isSelected ? '' : undefined"
       :data-expanded="isExpanded ? '' : undefined"
-      @keydown.enter.space.prevent="rootContext.onSelect(value)"
+      @keydown.enter.space.self.prevent="rootContext.onSelect(value)"
       @keydown.right.prevent="handleKeydownRight"
       @keydown.left.prevent="handleKeydownLeft"
       @click.stop="() => {
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 5b11038b7..c1e3a1c3b 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -80,6 +80,8 @@ const emits = defineEmits<TreeRootEmits<U>>()
 defineSlots<{
   default: (props: {
     flattenItems: FlattenedItem<T>[]
+    modelValue: typeof modelValue.value
+    expanded: typeof expanded.value
   }) => any
 }>()
 
@@ -140,7 +142,6 @@ function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
     return acc
   }, [])
 }
-
 const expandedItems = computed(() => {
   const items = props.items
   const expandedKeys = expanded.value.map(i => i)
@@ -209,7 +210,11 @@ provideTreeRootContext({
       @keydown="handleKeydown"
       @keydown.up.down.shift="handleKeydownNavigation"
     >
-      <slot :flatten-items="expandedItems" />
+      <slot
+        :flatten-items="expandedItems"
+        :model-value="modelValue"
+        :expanded="expanded"
+      />
     </Primitive>
   </RovingFocusGroup>
 </template>

From a9f4ec64e109cdad5a3cdac386600f480889b538 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 6 Jun 2024 16:33:05 +0800
Subject: [PATCH 16/27] test: add test for tree componetn

---
 packages/radix-vue/src/Tree/Tree.test.ts      | 190 ++++++++++++++++++
 packages/radix-vue/src/Tree/TreeRoot.vue      |  12 +-
 .../radix-vue/src/Tree/TreeVirtualizer.vue    |   8 +-
 .../src/Tree/__snapshots__/Tree.test.ts.snap  |  16 ++
 packages/radix-vue/src/Tree/story/_Tree.vue   |  90 +++++++++
 .../src/shared/useSelectionBehavior.ts        |  14 +-
 6 files changed, 314 insertions(+), 16 deletions(-)
 create mode 100644 packages/radix-vue/src/Tree/Tree.test.ts
 create mode 100644 packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
 create mode 100644 packages/radix-vue/src/Tree/story/_Tree.vue

diff --git a/packages/radix-vue/src/Tree/Tree.test.ts b/packages/radix-vue/src/Tree/Tree.test.ts
new file mode 100644
index 000000000..785ed23f7
--- /dev/null
+++ b/packages/radix-vue/src/Tree/Tree.test.ts
@@ -0,0 +1,190 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { axe } from 'vitest-axe'
+import Tree from './story/_Tree.vue'
+import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { useKbd } from '@/shared'
+import { nextTick } from 'vue'
+import { sleep } from '@/test'
+
+const kbd = useKbd()
+
+describe('given default Tree', () => {
+  // const kbd = useKbd()
+  let wrapper: VueWrapper<InstanceType<typeof Tree>>
+  let content: DOMWrapper<Element>
+  let items: DOMWrapper<Element>[]
+
+  const updateItems = () => {
+    items = wrapper.findAll('[role=treeitem]')
+  }
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(Tree, { attachTo: document.body, props: { selectionBehavior: 'toggle' } })
+    content = wrapper.find('[role=tree]')
+    updateItems()
+  })
+
+  it('should pass axe accessibility tests', async () => {
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
+  it('should render snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should select and deselect item', async () => {
+    const item = items[0]
+    await item.trigger('click')
+    expect(item.attributes('aria-selected')).toBe('true')
+    await item.trigger('click')
+    expect(item.attributes('aria-selected')).toBe('false')
+  })
+
+  describe('when expand item by press ArrowRight', async () => {
+    beforeEach(async () => {
+      await items[1].trigger('keydown', { key: kbd.ARROW_RIGHT });
+      (items[1].element as HTMLElement).focus()
+      updateItems()
+    })
+
+    it('should pass axe accessibility tests', async () => {
+      expect(await axe(wrapper.element)).toHaveNoViolations()
+    })
+
+    it('should expand the item, revealing it\'s item', () => {
+      expect(items[2].text()).toBe('tree')
+    })
+
+    it('should close when press ArrowLeft', async () => {
+      await items[1].trigger('keydown', { key: kbd.ARROW_LEFT })
+      updateItems()
+      expect(items[2].text()).toBe('routes')
+      expect(items[2].text()).not.toBe('tree')
+    })
+
+    it('should focus on parent when press ArrowLeft on child item', async () => {
+      await items[2].trigger('keydown', { key: kbd.ARROW_DOWN })
+      await items[3].trigger('keydown', { key: kbd.ARROW_LEFT })
+      expect(document.activeElement).toBe(items[1].element)
+    })
+
+    it('should focus on child item when press ArriwRight', async () => {
+      await items[1].trigger('keydown', { key: kbd.ARROW_RIGHT })
+      expect(document.activeElement).toBe(items[2].element)
+    })
+
+    describe('when expand nested item', async () => {
+      beforeEach(async () => {
+        await items[2].trigger('keydown', { key: kbd.ARROW_RIGHT })
+        updateItems()
+      })
+
+      it('should pass axe accessibility tests', async () => {
+        expect(await axe(wrapper.element)).toHaveNoViolations()
+      })
+
+      it('should expand the nested item, revealing it\'s item ', () => {
+        expect(items[3].text()).toBe('Tree.vue')
+      })
+    })
+  })
+
+  // Test: useTypeAhead
+  describe('when typing letter', async () => {
+    it('should highlight text starting with l', async () => {
+      await content.trigger('keydown', { key: 'l' })
+      const item = items.find(i => i.text().startsWith('l'))
+      expect(document.activeElement).toBe(item?.element)
+    })
+  })
+
+  describe('when selection behavior `replace`', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ selectionBehavior: 'replace' })
+      await nextTick()
+    })
+
+    it('should not toggle off the selected value', async () => {
+      const item = items[0]
+      await item.trigger('click')
+      await item.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('true')
+    })
+
+    it('should select and replace another item', async () => {
+      const item = items[0]
+      const newItem = items[1]
+      await item.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('true')
+      await newItem.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('false')
+      expect(newItem.attributes('aria-selected')).toBe('true')
+    })
+  })
+})
+
+describe('given multiple `true` Tree', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Tree>>
+  // let content: DOMWrapper<Element>
+  let items: DOMWrapper<Element>[]
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+    wrapper = mount(Tree, { props: { multiple: true, selectionBehavior: 'toggle' }, attachTo: document.body })
+    await nextTick()
+    // content = wrapper.find('[role=tree]')
+    items = wrapper.findAll('[role=treeitem]')
+  })
+
+  it('should select multiple items', async () => {
+    await items[0].trigger('keydown', { key: kbd.ENTER })
+    await items[0].trigger('keydown', { key: kbd.ARROW_DOWN })
+    await items[1].trigger('keydown', { key: kbd.ARROW_DOWN })
+    await items[2].trigger('keydown', { key: kbd.ENTER })
+
+    expect(items[0].attributes('aria-selected')).toBe('true')
+    expect(items[1].attributes('aria-selected')).toBe('false')
+    expect(items[2].attributes('aria-selected')).toBe('true')
+  })
+
+  describe('when selection behavior `replace`', () => {
+    beforeEach(async () => {
+      wrapper.setProps({ selectionBehavior: 'replace' })
+      await nextTick()
+      await items[0].trigger('click');
+      (items[0].element as HTMLElement).focus()
+    })
+
+    it('should not toggle off the selected value', async () => {
+      const item = items[0]
+      await item.trigger('click')
+      await item.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('true')
+    })
+
+    it('should select and replace another item', async () => {
+      const item = items[0]
+      const newItem = items[1]
+      expect(item.attributes('aria-selected')).toBe('true')
+      await newItem.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('false')
+      expect(newItem.attributes('aria-selected')).toBe('true')
+    })
+
+    describe('when keypress Shift + ArrowDown', () => {
+      it('should select the next item', async () => {
+        await items[0].trigger('keydown.shift', { key: kbd.ARROW_DOWN })
+        expect(items[0].attributes('aria-selected')).toBe('true')
+        expect(items[1].attributes('aria-selected')).toBe('true')
+        expect(items[2].attributes('aria-selected')).toBe('false')
+
+        await items[1].trigger('keydown.shift', { key: kbd.ARROW_DOWN })
+        expect(items[0].attributes('aria-selected')).toBe('true')
+        expect(items[1].attributes('aria-selected')).toBe('true')
+        expect(items[2].attributes('aria-selected')).toBe('true')
+      })
+    })
+  })
+})
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index c1e3a1c3b..897400553 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -2,7 +2,7 @@
 import { createContext, findValuesBetween, useDirection, useKbd, useSelectionBehavior, useTypeahead } from '@/shared'
 import type { Direction } from '@/shared/types'
 
-export interface TreeRootProps<T, U extends Record<string, any>> extends PrimitiveProps {
+export interface TreeRootProps<T = Record<string, any>, U extends Record<string, any> = Record<string, any>> extends PrimitiveProps {
   /** The controlled value of the tree. Can be binded-with with `v-model`. */
   modelValue?: U | U[]
   /** The value of the tree when initially rendered. Use when you do not need to control the state of the tree */
@@ -27,7 +27,7 @@ export interface TreeRootProps<T, U extends Record<string, any>> extends Primiti
   preventSelectBeforeExpand?: boolean
 }
 
-export type TreeRootEmits<T> = {
+export type TreeRootEmits<T = Record<string, any>> = {
   'update:modelValue': [val: T]
   'update:expanded': [val: string[]]
 }
@@ -69,7 +69,7 @@ export const [injectTreeRootContext, provideTreeRootContext] = createContext<Tre
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
 import { RovingFocusGroup } from '@/RovingFocus'
-import { type Ref, computed, ref, toRefs } from 'vue'
+import { type Ref, computed, nextTick, ref, toRefs } from 'vue'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 
 const props = withDefaults(defineProps<TreeRootProps<T, U>>(), {
@@ -117,7 +117,7 @@ const selectedKeys = computed(() => {
     return [props.getKey(modelValue.value as any ?? {})]
 })
 
-function flattenItems(items: T[], level: number = 0): FlattenedItem<T>[] {
+function flattenItems(items: T[], level: number = 1): FlattenedItem<T>[] {
   return items.reduce((acc: FlattenedItem<T>[], item: T, index: number) => {
     const key = props.getKey(item)
     const isExpanded = expanded.value.includes(key)
@@ -163,7 +163,9 @@ function handleKeydownNavigation(event: KeyboardEvent) {
     return
 
   const intent = MAP_KEY_TO_FOCUS_INTENT[event.key]
-  handleMultipleReplace(intent, document.activeElement, rovingFocusGroupRef.value?.getItems!, expandedItems.value.map(i => i.value))
+  nextTick(() => {
+    handleMultipleReplace(intent, document.activeElement, rovingFocusGroupRef.value?.getItems!, expandedItems.value.map(i => i.value))
+  })
 }
 
 provideTreeRootContext({
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
index bfbfa7647..1a1e56788 100644
--- a/packages/radix-vue/src/Tree/TreeVirtualizer.vue
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -9,7 +9,7 @@ export interface TreeVirtualizerProps {
 
 <script setup lang="ts">
 import { useVirtualizer } from '@tanstack/vue-virtual'
-import { type Ref, cloneVNode, computed, useSlots } from 'vue'
+import { type Ref, cloneVNode, computed, nextTick, useSlots } from 'vue'
 import { type FlattenedItem, injectTreeRootContext } from './TreeRoot.vue'
 import { refAutoReset, useParentElement } from '@vueuse/core'
 import { getNextMatch } from '@/shared/useTypeahead'
@@ -147,8 +147,10 @@ rootContext.virtualKeydownHook.on((event) => {
       scrollToIndexAndFocus(nextMatch.index)
   }
 
-  if (event.shiftKey && intent)
-    rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.items.value.map(i => i.value))
+  nextTick(() => {
+    if (event.shiftKey && intent)
+      rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.items.value.map(i => i.value))
+  })
 })
 </script>
 
diff --git a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
new file mode 100644
index 000000000..73f8d7c8b
--- /dev/null
+++ b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`given default Tree > should render snapshot 1`] = `
+"<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
+  <li role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" data-radix-vue-collection-item="">
+    <!--v-if-->
+    <div class="pl-2">index.vue</div>
+  </li>
+  <li role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="2" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="pl-2">lib</div>
+  </li>
+  <li role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="pl-2">routes</div>
+  </li>
+</div>"
+`;
diff --git a/packages/radix-vue/src/Tree/story/_Tree.vue b/packages/radix-vue/src/Tree/story/_Tree.vue
new file mode 100644
index 000000000..9e41eba58
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/_Tree.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from '@/shared'
+import { TreeItem, TreeRoot, type TreeRootEmits, type TreeRootProps } from '..'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+
+const props = defineProps<Omit<TreeRootProps, 'items' | 'getKey'>>()
+const emits = defineEmits<TreeRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+const items = [
+  { title: 'index.vue', icon: 'vue' },
+  {
+    title: 'lib',
+    icon: 'folder',
+    children: [
+      {
+        title: 'tree',
+        icon: 'folder',
+        children: [
+          {
+            title: 'Tree.vue',
+            icon: 'vue',
+          },
+          {
+            title: 'TreeView.vue',
+            icon: 'vue',
+          },
+        ],
+      },
+      {
+        title: 'icons',
+        icon: 'folder',
+        children: [
+          { title: 'JS.vue', icon: 'vue' },
+          { title: 'vue.vue', icon: 'vue' },
+        ],
+      },
+      {
+        title: 'index.js',
+        icon: 'js',
+      },
+    ],
+  },
+  {
+    title: 'routes',
+    icon: 'folder',
+    children: [
+      {
+        title: 'contents',
+        icon: 'folder',
+        children: [
+          {
+            title: '+layout.vue',
+            icon: 'vue',
+          },
+          {
+            title: '+page.vue',
+            icon: 'vue',
+          },
+        ],
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    v-bind="forwarded"
+    class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+    :items="items"
+    :get-key="(item) => item.title"
+  >
+    <TreeItem
+      v-for="item in flattenItems"
+      :key="item._id"
+      class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+      :style="{ 'margin-left': `${item.level}rem` }"
+      v-bind="item.bind"
+    >
+      <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
diff --git a/packages/radix-vue/src/shared/useSelectionBehavior.ts b/packages/radix-vue/src/shared/useSelectionBehavior.ts
index 292d72726..e2b919945 100644
--- a/packages/radix-vue/src/shared/useSelectionBehavior.ts
+++ b/packages/radix-vue/src/shared/useSelectionBehavior.ts
@@ -1,18 +1,16 @@
-import { type Ref, ref } from 'vue'
+import { type Ref, type UnwrapNestedRefs, ref } from 'vue'
 import { findValuesBetween } from './arrays'
 
 export function useSelectionBehavior<T>(
   modelValue: Ref<T | T[]>,
-  props: { multiple?: boolean, selectionBehavior?: 'toggle' | 'replace', isVirtual?: boolean },
+  props: UnwrapNestedRefs<{ multiple?: boolean, selectionBehavior?: 'toggle' | 'replace' }>,
 ) {
-  const { multiple = false, selectionBehavior = 'toggle' } = props
-
   const firstValue = ref()
 
   const onSelectItem = (val: T, condition: (existingValue: T) => boolean) => {
     // multiple select
-    if (multiple && Array.isArray(modelValue.value)) {
-      if (selectionBehavior === 'replace') {
+    if (props.multiple && Array.isArray(modelValue.value)) {
+      if (props.selectionBehavior === 'replace') {
         modelValue.value = [val]
         firstValue.value = val
       }
@@ -26,7 +24,7 @@ export function useSelectionBehavior<T>(
     }
     // single select
     else {
-      if (selectionBehavior === 'replace') {
+      if (props.selectionBehavior === 'replace') {
         modelValue.value = { ...val }
       }
       else {
@@ -39,7 +37,7 @@ export function useSelectionBehavior<T>(
   }
 
   function handleMultipleReplace(intent: 'first' | 'last' | 'prev' | 'next', currentElement: HTMLElement | Element | null, getItems: () => { ref: HTMLElement, value?: any }[], options: any[]) {
-    if (!firstValue?.value || !multiple || !Array.isArray(modelValue.value))
+    if (!firstValue?.value || !props.multiple || !Array.isArray(modelValue.value))
       return
 
     const collection = getItems().filter(i => i.ref.dataset.disabled !== '')

From 65c6ba0d93672d49b7491e5713f5c1e7b31457e1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 6 Jun 2024 20:16:25 +0800
Subject: [PATCH 17/27] fix: missing aria condition

---
 packages/radix-vue/src/Tree/TreeRoot.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 897400553..615c83903 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -209,6 +209,7 @@ provideTreeRootContext({
       role="tree"
       :as="as"
       :as-child="asChild"
+      :aria-multiselectable="multiple ? true : undefined"
       @keydown="handleKeydown"
       @keydown.up.down.shift="handleKeydownNavigation"
     >

From d612e110528797fd0851e28b4cc73f6c4c6047dc Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 11 Jun 2024 19:19:40 +0800
Subject: [PATCH 18/27] refactor: expose more function, cater for checkbox

---
 docs/content/meta/TreeItem.md                 | 28 +++++++
 docs/content/meta/TreeRoot.md                 |  4 +-
 packages/radix-vue/src/Tree/TreeItem.vue      | 79 +++++++++++++++----
 packages/radix-vue/src/Tree/TreeRoot.vue      | 44 ++++++++---
 .../src/Tree/__snapshots__/Tree.test.ts.snap  |  2 +-
 .../src/Tree/story/TreeBasic.story.vue        | 16 +++-
 packages/radix-vue/src/Tree/utils.ts          | 10 +++
 .../src/shared/useSelectionBehavior.ts        |  1 +
 8 files changed, 155 insertions(+), 29 deletions(-)
 create mode 100644 packages/radix-vue/src/Tree/utils.ts

diff --git a/docs/content/meta/TreeItem.md b/docs/content/meta/TreeItem.md
index 6ddf28d74..323ef97b7 100644
--- a/docs/content/meta/TreeItem.md
+++ b/docs/content/meta/TreeItem.md
@@ -28,6 +28,19 @@
   }
 ]" />
 
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '<p>Event handler called when the selecting item. &lt;br&gt; It can be prevented by calling <code>event.preventDefault</code>.</p>\n',
+    'type': '[event: SelectEvent<Record<string, any>>]'
+  },
+  {
+    'name': 'toggle',
+    'description': '<p>Event handler called when the selecting item. &lt;br&gt; It can be prevented by calling <code>event.preventDefault</code>.</p>\n',
+    'type': '[event: ToggleEvent<Record<string, any>>]'
+  }
+]" />
+
 <SlotsTable :data="[
   {
     'name': 'isExpanded',
@@ -38,5 +51,20 @@
     'name': 'isSelected',
     'description': '',
     'type': 'boolean'
+  },
+  {
+    'name': 'isIndeterminate',
+    'description': '',
+    'type': 'boolean | undefined'
+  },
+  {
+    'name': 'handleToggle',
+    'description': '',
+    'type': ''
+  },
+  {
+    'name': 'handleSelect',
+    'description': '',
+    'type': ''
   }
 ]" />
diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
index 24723b1b2..ebb662f8f 100644
--- a/docs/content/meta/TreeRoot.md
+++ b/docs/content/meta/TreeRoot.md
@@ -69,8 +69,8 @@
     'required': false
   },
   {
-    'name': 'preventSelectBeforeExpand',
-    'description': '<p>By default clicking on item will select the item, setting to <code>true</code> will open the item (if possible) then select the item</p>\n',
+    'name': 'propagateSelect',
+    'description': '<p>When <code>true</code>, selecting parent will select it's descendants.</p>\n',
     'type': 'boolean',
     'required': false
   },
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index fa7b17e43..0fe7e4f50 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -5,6 +5,18 @@ export interface TreeItemProps<T> extends PrimitiveProps {
   /** Level of depth */
   level: number
 }
+
+export type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
+export type ToggleEvent<T> = CustomEvent<{ originalEvent: PointerEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
+
+export type TreeItemEmits<T> = {
+  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */
+  select: [event: SelectEvent<T>]
+  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */
+  toggle: [event: ToggleEvent<T>]
+}
+
+const TREE_SELECT = 'tree.select'
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
@@ -13,20 +25,29 @@ import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
 import { computed } from 'vue'
 import { useCollection } from '@/Collection'
+import { handleAndDispatchCustomEvent } from '@/shared'
+import { flatten } from './utils'
 
 const props = withDefaults(defineProps<TreeItemProps<T>>(), {
   as: 'li',
 })
 
+const emits = defineEmits<TreeItemEmits<T>>()
+
 defineSlots<{
   default: (props: {
     isExpanded: boolean
     isSelected: boolean
+    isIndeterminate: boolean | undefined
+    handleToggle: () => void
+    handleSelect: () => void
   }) => any
 }>()
 const rootContext = injectTreeRootContext()
 const { getItems } = useCollection()
 
+const hasChildren = computed(() => !!props.value.children?.length)
+
 const isExpanded = computed(() => {
   const key = rootContext.getKey(props.value)
   return rootContext.expanded.value.includes(key)
@@ -37,8 +58,19 @@ const isSelected = computed(() => {
   return rootContext.selectedKeys.value.includes(key)
 })
 
+const isIndeterminate = computed(() => {
+  if (rootContext.propagateSelect.value && isSelected.value && hasChildren.value && Array.isArray(rootContext.modelValue.value)) {
+    const children = flatten<T, any>(props.value.children)
+
+    return !children.every(child => rootContext.modelValue.value.find((v: any) => rootContext.getKey(v) === rootContext.getKey(child)))
+  }
+  else {
+    return undefined
+  }
+})
+
 function handleKeydownRight() {
-  if (!props.value.children?.length)
+  if (!hasChildren.value)
     return
 
   if (isExpanded.value) {
@@ -75,10 +107,35 @@ function handleKeydownLeft() {
   }
 }
 
+async function handleSelect(ev: SelectEvent<T>) {
+  emits('select', ev)
+  if (ev?.defaultPrevented)
+    return
+
+  rootContext.onSelect(props.value)
+}
+async function handleToggle(ev: ToggleEvent<T>) {
+  emits('toggle', ev)
+  if (ev?.defaultPrevented)
+    return
+
+  rootContext.onToggle(props.value)
+}
+
+function handleSelectCustomEvent(ev?: PointerEvent) {
+  if (!ev)
+    return
+  const eventDetail = { originalEvent: ev, value: props.value, isExpanded: isExpanded.value, isSelected: isSelected.value }
+  handleAndDispatchCustomEvent(TREE_SELECT, handleSelect, eventDetail)
+  handleAndDispatchCustomEvent(TREE_SELECT, handleToggle, eventDetail)
+}
+
 defineExpose({
   isExpanded,
   isSelected,
-  onToggle: () => rootContext.onToggle(props.value),
+  isIndeterminate,
+  handleToggle: () => rootContext.onToggle(props.value),
+  handleSelect: () => rootContext.onSelect(props.value),
 })
 </script>
 
@@ -89,28 +146,22 @@ defineExpose({
       :as="as"
       :as-child="asChild"
       :aria-selected="isSelected"
-      :aria-expanded="isExpanded"
+      :aria-expanded="hasChildren ? isExpanded : undefined"
       :aria-level="level"
       :data-indent="level"
       :data-selected="isSelected ? '' : undefined"
       :data-expanded="isExpanded ? '' : undefined"
-      @keydown.enter.space.self.prevent="rootContext.onSelect(value)"
+      @keydown.enter.space.self="handleSelectCustomEvent"
       @keydown.right.prevent="handleKeydownRight"
       @keydown.left.prevent="handleKeydownLeft"
-      @click.stop="() => {
-        if (rootContext.preventSelectBeforeExpand.value && !!props.value.children?.length) {
-          if (isExpanded)
-            rootContext.onSelect(value)
-        }
-        else {
-          rootContext.onSelect(value)
-        }
-        rootContext.onToggle(value)
-      }"
+      @click.stop="handleSelectCustomEvent"
     >
       <slot
         :is-expanded="isExpanded"
         :is-selected="isSelected"
+        :is-indeterminate="isIndeterminate"
+        :handle-select="() => rootContext.onSelect(value)"
+        :handle-toggle="() => rootContext.onToggle(value)"
       />
     </Primitive>
   </RovingFocusItem>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 615c83903..e21120e33 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-import { createContext, findValuesBetween, useDirection, useKbd, useSelectionBehavior, useTypeahead } from '@/shared'
+import { createContext, useDirection, useSelectionBehavior, useTypeahead } from '@/shared'
 import type { Direction } from '@/shared/types'
+import { flatten } from './utils'
 
 export interface TreeRootProps<T = Record<string, any>, U extends Record<string, any> = Record<string, any>> extends PrimitiveProps {
   /** The controlled value of the tree. Can be binded-with with `v-model`. */
@@ -23,8 +24,8 @@ export interface TreeRootProps<T = Record<string, any>, U extends Record<string,
   dir?: Direction
   /** When `true`, prevents the user from interacting with tree  */
   disabled?: boolean
-  /** By default clicking on item will select the item, setting to `true` will open the item (if possible) then select the item */
-  preventSelectBeforeExpand?: boolean
+  /** When `true`, selecting parent will select it's descendants. */
+  propagateSelect?: boolean
 }
 
 export type TreeRootEmits<T = Record<string, any>> = {
@@ -32,18 +33,19 @@ export type TreeRootEmits<T = Record<string, any>> = {
   'update:expanded': [val: string[]]
 }
 
-interface TreeRootContext<T> {
+interface TreeRootContext<T = Record<string, any>> {
   modelValue: Ref<T | T[]>
   selectedKeys: Ref<string[]>
   onSelect: (val: T) => void
   expanded: Ref<string[]>
   onToggle: (val: T) => void
   items: Ref<T[]>
+  expandedItems: Ref<T[]>
   getKey: (val: T) => string
   multiple: Ref<boolean>
   disabled: Ref<boolean>
   dir: Ref<Direction>
-  preventSelectBeforeExpand: Ref<boolean>
+  propagateSelect: Ref<boolean>
   isVirtual: Ref<boolean>
   virtualKeydownHook: EventHook<KeyboardEvent>
 
@@ -85,7 +87,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { multiple, disabled, preventSelectBeforeExpand, dir: propDir } = toRefs(props)
+const { items, multiple, disabled, propagateSelect, dir: propDir } = toRefs(props)
 const { handleTypeaheadSearch } = useTypeahead()
 const dir = useDirection(propDir)
 const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
@@ -142,6 +144,7 @@ function flattenItems(items: T[], level: number = 1): FlattenedItem<T>[] {
     return acc
   }, [])
 }
+
 const expandedItems = computed(() => {
   const items = props.items
   const expandedKeys = expanded.value.map(i => i)
@@ -164,7 +167,12 @@ function handleKeydownNavigation(event: KeyboardEvent) {
 
   const intent = MAP_KEY_TO_FOCUS_INTENT[event.key]
   nextTick(() => {
-    handleMultipleReplace(intent, document.activeElement, rovingFocusGroupRef.value?.getItems!, expandedItems.value.map(i => i.value))
+    handleMultipleReplace(
+      intent,
+      document.activeElement,
+      rovingFocusGroupRef.value?.getItems!,
+      expandedItems.value.map(i => i.value),
+    )
   })
 }
 
@@ -172,7 +180,22 @@ provideTreeRootContext({
   modelValue,
   selectedKeys,
   onSelect: (val) => {
-    onSelectItem(val, v => props.getKey(v as any ?? {}) === props.getKey(val as any))
+    const condition = (baseValue: U) => props.getKey(baseValue as any ?? {}) === props.getKey(val)
+    const exist = props.multiple && Array.isArray(modelValue.value) ? modelValue.value?.findIndex(condition) !== -1 : undefined
+    onSelectItem(val, condition)
+
+    if (props.propagateSelect && props.multiple && Array.isArray(modelValue.value)) {
+      const children = flatten<U, any>(val.children ?? [])
+      if (exist) {
+        // remove all child
+        modelValue.value = [...modelValue.value]
+          .filter(i => !children.some(child => props.getKey(i as any ?? {}) === props.getKey(child as any)))
+      }
+      else {
+        // select all child
+        modelValue.value = [...modelValue.value, ...children]
+      }
+    }
   },
   expanded,
   onToggle(val) {
@@ -186,11 +209,12 @@ provideTreeRootContext({
       expanded.value.push(key)
   },
   getKey: props.getKey,
-  items: expandedItems,
+  items,
+  expandedItems,
   disabled,
   multiple,
   dir,
-  preventSelectBeforeExpand,
+  propagateSelect,
 
   isVirtual,
   virtualKeydownHook,
diff --git a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
index 73f8d7c8b..c0fd1364e 100644
--- a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
+++ b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`given default Tree > should render snapshot 1`] = `
 "<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
-  <li role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" data-radix-vue-collection-item="">
+  <li role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" data-radix-vue-collection-item="">
     <!--v-if-->
     <div class="pl-2">index.vue</div>
   </li>
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index e56cc2fff..e4c65cead 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -73,15 +73,27 @@ const items = [
         class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
         :items="items"
         :get-key="(item) => item.title"
+        multiple
+        propagate-select
       >
         <TreeItem
           v-for="item in flattenItems"
           :key="item._id"
-          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
-          :style="{ 'margin-left': `${item.level}rem` }"
+          v-slot="{ onSelect, isSelected }"
           v-bind="item.bind"
+          :style="{ 'margin-left': `${item.level}rem` }"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+          @select="(event) => {
+            if (event.detail.originalEvent.type === 'click')
+              event.preventDefault()
+          }"
+          @toggle="(event) => {
+            if (event.detail.originalEvent.type === 'keydown')
+              event.preventDefault()
+          }"
         >
           <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+          <input :checked="isSelected" type="checkbox" @click.stop @change="onSelect">
           <div class="pl-2">
             {{ item.value.title }}
           </div>
diff --git a/packages/radix-vue/src/Tree/utils.ts b/packages/radix-vue/src/Tree/utils.ts
new file mode 100644
index 000000000..6ba72b4fc
--- /dev/null
+++ b/packages/radix-vue/src/Tree/utils.ts
@@ -0,0 +1,10 @@
+export function flatten<U, T extends { children: any[] } >(items: T[]): U[] {
+  return items.reduce((acc: any[], item: T) => {
+    acc.push(item)
+
+    if (item.children)
+      acc.push(...flatten(item.children))
+
+    return acc
+  }, [])
+}
diff --git a/packages/radix-vue/src/shared/useSelectionBehavior.ts b/packages/radix-vue/src/shared/useSelectionBehavior.ts
index e2b919945..0c064296a 100644
--- a/packages/radix-vue/src/shared/useSelectionBehavior.ts
+++ b/packages/radix-vue/src/shared/useSelectionBehavior.ts
@@ -34,6 +34,7 @@ export function useSelectionBehavior<T>(
           modelValue.value = { ...val }
       }
     }
+    return modelValue.value
   }
 
   function handleMultipleReplace(intent: 'first' | 'last' | 'prev' | 'next', currentElement: HTMLElement | Element | null, getItems: () => { ref: HTMLElement, value?: any }[], options: any[]) {

From 6e72d0c97a513ffaf70efe6177bbb10d2feadd44 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 12 Jun 2024 12:57:08 +0800
Subject: [PATCH 19/27] chore: add dnd example

---
 docs/content/components/tree.md               |  53 ++++
 docs/content/meta/TreeRoot.md                 |   2 +-
 packages/radix-vue/package.json               |   2 +
 packages/radix-vue/src/Tree/TreeItem.vue      |   7 +-
 packages/radix-vue/src/Tree/TreeRoot.vue      |  12 +-
 .../radix-vue/src/Tree/TreeVirtualizer.vue    |  14 +-
 packages/radix-vue/src/Tree/index.ts          |   1 +
 .../src/Tree/story/TreeBasic.story.vue        |  79 +-----
 .../src/Tree/story/TreeCheckbox.story.vue     |  43 +++
 .../src/Tree/story/TreeDND.story.vue          |  73 ++++++
 .../src/Tree/story/TreeVirtual.story.vue      |   1 +
 .../radix-vue/src/Tree/story/_TreeItemDND.vue | 166 ++++++++++++
 .../radix-vue/src/Tree/story/constants.ts     |  26 ++
 packages/radix-vue/src/Tree/story/utils.ts    | 244 ++++++++++++++++++
 packages/radix-vue/src/Tree/utils.ts          |   2 +
 pnpm-lock.yaml                                |  31 ++-
 16 files changed, 665 insertions(+), 91 deletions(-)
 create mode 100644 packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
 create mode 100644 packages/radix-vue/src/Tree/story/TreeDND.story.vue
 create mode 100644 packages/radix-vue/src/Tree/story/_TreeItemDND.vue
 create mode 100644 packages/radix-vue/src/Tree/story/constants.ts
 create mode 100644 packages/radix-vue/src/Tree/story/utils.ts

diff --git a/docs/content/components/tree.md b/docs/content/components/tree.md
index 574c1db5c..5b158ae8c 100644
--- a/docs/content/components/tree.md
+++ b/docs/content/components/tree.md
@@ -145,6 +145,59 @@ import { TreeItem, TreeRoot, TreeVirtualizer } from 'radix-vue'
 </template>
 ```
 
+### With Checkbox
+
+Some `Tree` component might want to show `toggled/indeterminate` checkbox. We can change the behavior of the `Tree` component by using a few props and `preventDefault` event.
+
+We set `propagateSelect` to `true` because we want the parent checkbox to select/deselect it's descendants. Then, we add a checkbox that triggers `select` event.
+
+```vue line=10-11,17-25,29-33
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeItem, TreeRoot } from 'radix-vue'
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    :items
+    multiple
+    propagate-select
+  >
+    <TreeItem
+      v-for="item in flattenItems"
+      :key="item._id"
+      v-bind="item.bind"
+      v-slot="{ handleSelect, isSelected, isIndeterminate }"
+      @select="(event) => {
+        if (event.detail.originalEvent.type === 'click')
+          event.preventDefault()
+      }"
+      @toggle="(event) => {
+        if (event.detail.originalEvent.type === 'keydown')
+          event.preventDefault()
+      }"
+    >
+      <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" />
+
+      <button tabindex="-1" @click.stop @change="handleSelect">
+        <Icon v-if="isSelected" icon="radix-icons:check" />
+        <Icon v-else-if="isIndeterminate" icon="radix-icons:dash" />
+        <Icon v-else icon="radix-icons:box" />
+      </button>
+
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
+```
+
+### Draggable/Sortable Tree
+
+For more complex draggable `Tree` component, in this example we will be using [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop), as the core package for handling dnd.
+
 ## Accessibility
 
 Adheres to the [Tree WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
index ebb662f8f..f024d8cc7 100644
--- a/docs/content/meta/TreeRoot.md
+++ b/docs/content/meta/TreeRoot.md
@@ -70,7 +70,7 @@
   },
   {
     'name': 'propagateSelect',
-    'description': '<p>When <code>true</code>, selecting parent will select it's descendants.</p>\n',
+    'description': '<p>When <code>true</code>, selecting parent will select the descendants.</p>\n',
     'type': 'boolean',
     'required': false
   },
diff --git a/packages/radix-vue/package.json b/packages/radix-vue/package.json
index e7c80408f..490893338 100644
--- a/packages/radix-vue/package.json
+++ b/packages/radix-vue/package.json
@@ -93,6 +93,8 @@
     "vue": ">= 3.2.0"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.11",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@floating-ui/dom": "^1.6.5",
     "@floating-ui/vue": "^1.0.6",
     "@internationalized/date": "^3.5.4",
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 0fe7e4f50..529be9ba4 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -25,9 +25,13 @@ import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
 import { computed } from 'vue'
 import { useCollection } from '@/Collection'
-import { handleAndDispatchCustomEvent } from '@/shared'
+import { handleAndDispatchCustomEvent, useForwardRef } from '@/shared'
 import { flatten } from './utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<TreeItemProps<T>>(), {
   as: 'li',
 })
@@ -142,6 +146,7 @@ defineExpose({
 <template>
   <RovingFocusItem as-child :value="value" allow-shift-key>
     <Primitive
+      v-bind="$attrs"
       role="treeitem"
       :as="as"
       :as-child="asChild"
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index e21120e33..1f92dfdcc 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -24,7 +24,7 @@ export interface TreeRootProps<T = Record<string, any>, U extends Record<string,
   dir?: Direction
   /** When `true`, prevents the user from interacting with tree  */
   disabled?: boolean
-  /** When `true`, selecting parent will select it's descendants. */
+  /** When `true`, selecting parent will select the descendants. */
   propagateSelect?: boolean
 }
 
@@ -54,9 +54,11 @@ interface TreeRootContext<T = Record<string, any>> {
 
 export type FlattenedItem<T> = {
   _id: string
+  index: number
   value: T
   level: number
   hasChildren: boolean
+  parentItem?: T
   bind: {
     value: T
     level: number
@@ -119,7 +121,7 @@ const selectedKeys = computed(() => {
     return [props.getKey(modelValue.value as any ?? {})]
 })
 
-function flattenItems(items: T[], level: number = 1): FlattenedItem<T>[] {
+function flattenItems(items: T[], level: number = 1, parentItem?: T): FlattenedItem<T>[] {
   return items.reduce((acc: FlattenedItem<T>[], item: T, index: number) => {
     const key = props.getKey(item)
     const isExpanded = expanded.value.includes(key)
@@ -127,8 +129,10 @@ function flattenItems(items: T[], level: number = 1): FlattenedItem<T>[] {
     const flattenedItem: FlattenedItem<T> = {
       _id: key,
       value: item,
+      index,
       level,
-      hasChildren: !!item.children,
+      parentItem,
+      hasChildren: !!item.children?.length,
       bind: {
         'value': item,
         level,
@@ -139,7 +143,7 @@ function flattenItems(items: T[], level: number = 1): FlattenedItem<T>[] {
     acc.push(flattenedItem)
 
     if (item.children && isExpanded)
-      acc.push(...flattenItems(item.children, level + 1))
+      acc.push(...flattenItems(item.children, level + 1, item))
 
     return acc
   }, [])
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
index 1a1e56788..bd54d0fce 100644
--- a/packages/radix-vue/src/Tree/TreeVirtualizer.vue
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -39,7 +39,7 @@ const optionsWithMetadata = computed(() => {
       return option.toString().toLowerCase()
   }
 
-  return rootContext.items.value.map((option, index) => ({
+  return rootContext.expandedItems.value.map((option, index) => ({
     index,
     textContent: parseTextContent(option.value),
   }))
@@ -66,10 +66,10 @@ const virtualizer = useVirtualizer(
   {
     get scrollPaddingStart() { return padding.value.start },
     get scrollPaddingEnd() { return padding.value.end },
-    get count() { return rootContext.items.value.length ?? 0 },
+    get count() { return rootContext.expandedItems.value.length ?? 0 },
     get horizontal() { return false },
     getItemKey(index) {
-      return index + rootContext.getKey(rootContext.items.value[index].value)
+      return index + rootContext.getKey(rootContext.expandedItems.value[index].value)
     },
     estimateSize() {
       return props.estimateSize ?? 28
@@ -83,7 +83,7 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
   return {
     item,
     is: cloneVNode(slots.default!({
-      item: rootContext.items.value[item.index],
+      item: rootContext.expandedItems.value[item.index],
     })![0], {
       'data-index': item.index,
       'style': {
@@ -117,7 +117,7 @@ rootContext.virtualKeydownHook.on((event) => {
   if (['first', 'last'].includes(intent)) {
     event.preventDefault()
 
-    const index = intent === 'first' ? 0 : rootContext.items.value.length - 1
+    const index = intent === 'first' ? 0 : rootContext.expandedItems.value.length - 1
     virtualizer.value.scrollToIndex(index)
     requestAnimationFrame(() => {
       const items = getItems()
@@ -129,7 +129,7 @@ rootContext.virtualKeydownHook.on((event) => {
     const currentElement = document.activeElement as HTMLElement
     const currentIndex = Number(currentElement.getAttribute('data-index'))
     const currentLevel = Number(currentElement.getAttribute('data-indent'))
-    const list = rootContext.items.value.slice(0, currentIndex).map((item, index) => ({ ...item, index })).reverse()
+    const list = rootContext.expandedItems.value.slice(0, currentIndex).map((item, index) => ({ ...item, index })).reverse()
 
     const parentItem = list.find(item => item.level === (currentLevel - 1))
     if (parentItem)
@@ -149,7 +149,7 @@ rootContext.virtualKeydownHook.on((event) => {
 
   nextTick(() => {
     if (event.shiftKey && intent)
-      rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.items.value.map(i => i.value))
+      rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.expandedItems.value.map(i => i.value))
   })
 })
 </script>
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
index e1590670d..5f090b700 100644
--- a/packages/radix-vue/src/Tree/index.ts
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -2,6 +2,7 @@ export {
   default as TreeRoot,
   type TreeRootProps,
   type TreeRootEmits,
+  type FlattenedItem,
 } from './TreeRoot.vue'
 export {
   default as TreeItem,
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index e4c65cead..fdfc90e57 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -1,68 +1,7 @@
 <script setup lang="ts">
 import { TreeItem, TreeRoot } from '../'
 import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-
-const items = [
-  { title: 'index.vue', icon: 'vue' },
-  {
-    title: 'lib',
-    icon: 'folder',
-    children: [
-      {
-        title: 'tree',
-        icon: 'folder',
-        children: [
-          {
-            title: 'Tree.vue',
-            icon: 'vue',
-          },
-          {
-            title: 'TreeView.vue',
-            icon: 'vue',
-          },
-        ],
-      },
-      {
-        title: 'icons',
-        icon: 'folder',
-        children: [
-          { title: 'JS.vue', icon: 'vue' },
-          { title: 'vue.vue', icon: 'vue' },
-        ],
-      },
-      {
-        title: 'index.js',
-        icon: 'js',
-      },
-    ],
-  },
-  {
-    title: 'routes',
-    icon: 'folder',
-    children: [
-      {
-        title: 'contents',
-        icon: 'folder',
-        children: [
-          {
-            title: '+layout.vue',
-            icon: 'vue',
-          },
-          {
-            title: '+page.vue',
-            icon: 'vue',
-          },
-        ],
-      },
-    ],
-  },
-]
-
-// const modelValue = ref<{ title: string, icon: string }>({
-//   title: '+page.vue',
-//   icon: 'vue',
-// })
+import { items } from './constants'
 </script>
 
 <template>
@@ -73,28 +12,16 @@ const items = [
         class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
         :items="items"
         :get-key="(item) => item.title"
-        multiple
-        propagate-select
       >
         <TreeItem
           v-for="item in flattenItems"
           :key="item._id"
-          v-slot="{ onSelect, isSelected }"
           v-bind="item.bind"
           :style="{ 'margin-left': `${item.level}rem` }"
           class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
-          @select="(event) => {
-            if (event.detail.originalEvent.type === 'click')
-              event.preventDefault()
-          }"
-          @toggle="(event) => {
-            if (event.detail.originalEvent.type === 'keydown')
-              event.preventDefault()
-          }"
         >
-          <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
-          <input :checked="isSelected" type="checkbox" @click.stop @change="onSelect">
-          <div class="pl-2">
+          <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4 mr-2" />
+          <div>
             {{ item.value.title }}
           </div>
         </TreeItem>
diff --git a/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
new file mode 100644
index 000000000..40b10d969
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from '..'
+import { Icon } from '@iconify/vue'
+import { items } from './constants'
+</script>
+
+<template>
+  <Story title="Tree/Checkbox" :layout="{ type: 'single', iframe: false }">
+    <Variant title="default">
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+        :items="items"
+        :get-key="(item) => item.title"
+        multiple
+        propagate-select
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-slot="{ handleSelect, isSelected }"
+          v-bind="item.bind"
+          :style="{ 'margin-left': `${item.level}rem` }"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+          @select="(event) => {
+            if (event.detail.originalEvent.type === 'click')
+              event.preventDefault()
+          }"
+          @toggle="(event) => {
+            if (event.detail.originalEvent.type === 'keydown')
+              event.preventDefault()
+          }"
+        >
+          <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+          <input :checked="isSelected" type="checkbox" @click.stop @change="handleSelect">
+          <div class="pl-2">
+            {{ item.value.title }}
+          </div>
+        </TreeItem>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/TreeDND.story.vue b/packages/radix-vue/src/Tree/story/TreeDND.story.vue
new file mode 100644
index 000000000..c7386114b
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeDND.story.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { TreeRoot } from '..'
+import { items as ITEMS } from './constants'
+import TreeItem from './_TreeItemDND.vue'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { shallowRef, watchEffect } from 'vue'
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { updateTree } from './utils'
+
+const items = shallowRef(ITEMS)
+
+watchEffect((onCleanup) => {
+  const dndFunction = combine(
+    monitorForElements({
+      onDrop(args) {
+        const { location, source } = args
+        // didn't drop on anything
+        if (!location.current.dropTargets.length)
+          return
+
+        const itemId = source.data.id as string
+        const target = location.current.dropTargets[0]
+        const targetId = target.data.id as string
+
+        const instruction: Instruction | null = extractInstruction(
+          target.data,
+        )
+
+        if (instruction !== null) {
+          items.value = updateTree(items.value, {
+            type: 'instruction',
+            instruction,
+            itemId,
+            targetId,
+          }) ?? []
+        }
+      },
+    }),
+  )
+
+  onCleanup(() => {
+    dndFunction()
+  })
+})
+</script>
+
+<template>
+  <Story title="Tree/DND" :layout="{ type: 'single', iframe: false }">
+    <Variant title="default">
+      <div class="flex justify-center w-full">
+        <TreeRoot
+          v-slot="{ flattenItems }"
+          class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+          :items="items"
+          :get-key="(item) => item.title"
+          multiple
+          propagate-select
+        >
+          <TreeItem
+            v-for="item in flattenItems"
+            :key="item._id + item.index"
+            :item="item"
+            v-bind="item.bind"
+            :style="{ 'padding-left': `${item.level}rem` }"
+            class="flex items-center py-1.5 px-2 rounded outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+            @select.prevent
+          />
+        </TreeRoot>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
index 2471edbe4..99097f43e 100644
--- a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -27,6 +27,7 @@ const items = groupCountriesByFirstLetter(countryList)
         :get-key="(item) => item.title"
         multiple
         selection-behavior="replace"
+        propagate-select
         class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
       >
         <TreeVirtualizer v-slot="{ item }" :text-content="(item) => item.title">
diff --git a/packages/radix-vue/src/Tree/story/_TreeItemDND.vue b/packages/radix-vue/src/Tree/story/_TreeItemDND.vue
new file mode 100644
index 000000000..6153c5a61
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/_TreeItemDND.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, h, nextTick, ref, render, watchEffect } from 'vue'
+import { type FlattenedItem, TreeItem } from '..'
+import { usePrimitiveElement } from '@/Primitive'
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { type Instruction, type ItemMode, attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview'
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  item: FlattenedItem<any>
+}>()
+
+const { primitiveElement, currentElement } = usePrimitiveElement()
+const isDragging = ref(false)
+const isDraggedOver = ref(false)
+const isInitialExpanded = ref(false)
+const instruction = ref<Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null>(null)
+
+const mode = computed(() => {
+  if (props.item.hasChildren)
+    return 'expanded'
+  if (props.item.index + 1 === props.item.parentItem?.children?.length)
+    return 'last-in-group'
+  return 'standard'
+})
+
+watchEffect((onCleanup) => {
+  if (!currentElement.value)
+    return
+
+  const item = { ...props.item.value, level: props.item.level, id: props.item._id }
+
+  const expandItem = () => {
+    // @ts-expect-error can't infer generic components instance's type
+    // https://github.com/vuejs/language-tools/issues/3206
+    if (!primitiveElement.value?.isExpanded) {
+      // @ts-expect-error can't infer generic components instance's type
+      primitiveElement.value?.handleToggle()
+    }
+  }
+
+  const closeItem = () => {
+    // @ts-expect-error can't infer generic components instance's type
+    // https://github.com/vuejs/language-tools/issues/3206
+    if (primitiveElement.value?.isExpanded) {
+      // @ts-expect-error can't infer generic components instance's type
+      primitiveElement.value?.handleToggle()
+    }
+  }
+
+  const dndFunction = combine(
+    draggable({
+      element: currentElement.value,
+      getInitialData: () => item,
+      onDragStart: () => {
+        isDragging.value = true
+        // @ts-expect-error can't infer generic components instance's type
+        isInitialExpanded.value = primitiveElement.value?.isExpanded
+        closeItem()
+      },
+      onDrop: () => {
+        isDragging.value = false
+        if (isInitialExpanded.value)
+          expandItem()
+      },
+      onGenerateDragPreview({ nativeSetDragImage }) {
+        setCustomNativeDragPreview({
+          getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
+          render: ({ container }) => {
+            return render(h(
+              'div',
+              { class: 'bg-white text-blackA11 rounded-md text-sm font-medium px-3 py-1.5' },
+              item.id,
+            ), container)
+          },
+          nativeSetDragImage,
+        })
+      },
+    }),
+
+    dropTargetForElements({
+      element: currentElement.value,
+      getData: ({ input, element }) => {
+        const data = { id: item.id }
+
+        return attachInstruction(data, {
+          input,
+          element,
+          indentPerLevel: 16,
+          currentLevel: props.item.level,
+          mode: mode.value,
+          block: [],
+        })
+      },
+      canDrop: ({ source }) => {
+        return source.data.id !== item.id
+      },
+      onDrag: ({ self }) => {
+        instruction.value = extractInstruction(self.data) as typeof instruction.value
+      },
+      onDragEnter: ({ source }) => {
+        if (source.data.id !== item.id) {
+          isDraggedOver.value = true
+          expandItem()
+        }
+      },
+      onDragLeave: () => {
+        isDraggedOver.value = false
+        instruction.value = null
+      },
+      onDrop: ({ location }) => {
+        isDraggedOver.value = false
+        instruction.value = null
+        if (location.current.dropTargets[0].data.id === item.id) {
+          nextTick(() => {
+            expandItem()
+          })
+        }
+      },
+      getIsSticky: () => true,
+    }),
+
+    monitorForElements({
+      canMonitor: ({ source }) => {
+        return source.data.id !== item.id
+      },
+    }),
+  )
+
+  // Cleanup dnd function
+  onCleanup(() => dndFunction())
+})
+</script>
+
+<template>
+  <TreeItem
+    ref="primitiveElement"
+    v-slot="{ isExpanded }"
+    :value="item.value"
+    :level="item.level"
+    class="relative w-full border-none"
+    :class="{ 'opacity-50': isDragging }"
+  >
+    <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4 transition" :class="{ '-rotate-90': isExpanded }" />
+    <div class="pl-2">
+      {{ item.value.title }}
+    </div>
+
+    <div
+      v-if="instruction"
+      class="absolute h-full w-full top-0 border-blue-500 "
+      :style="{
+        left: `${instruction?.currentLevel * instruction?.indentPerLevel}px`,
+        width: `calc(100% - ${instruction?.currentLevel * instruction?.indentPerLevel}px)`,
+      }"
+      :class="{
+        '!border-b-2': instruction?.type === 'reorder-below',
+        '!border-t-2': instruction?.type === 'reorder-above',
+        '!border-2 rounded': instruction?.type === 'make-child',
+      }"
+    />
+  </TreeItem>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/constants.ts b/packages/radix-vue/src/Tree/story/constants.ts
new file mode 100644
index 000000000..30a95a7ce
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/constants.ts
@@ -0,0 +1,26 @@
+export const items = [
+  {
+    title: 'composables',
+    icon: 'lucide:folder',
+    children: [
+      { title: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+      { title: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' },
+    ],
+  },
+  {
+    title: 'components',
+    icon: 'lucide:folder',
+    children: [
+      {
+        title: 'Home',
+        icon: 'lucide:folder',
+        children: [
+          { title: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+          { title: 'Button.vue', icon: 'vscode-icons:file-type-vue' },
+        ],
+      },
+    ],
+  },
+  { title: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+  { title: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' },
+]
diff --git a/packages/radix-vue/src/Tree/story/utils.ts b/packages/radix-vue/src/Tree/story/utils.ts
new file mode 100644
index 000000000..3b288b3bf
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/utils.ts
@@ -0,0 +1,244 @@
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+
+export type TreeItem = {
+  title: string
+  icon: string
+  children?: TreeItem[]
+}
+
+export type TreeAction =
+  | {
+    type: 'instruction'
+    instruction: Instruction
+    itemId: string
+    targetId: string
+  }
+  | {
+    type: 'toggle'
+    itemId: string
+  }
+  | {
+    type: 'expand'
+    itemId: string
+  }
+  | {
+    type: 'collapse'
+    itemId: string
+  }
+  | { type: 'modal-move', itemId: string, targetId: string, index: number }
+
+export const tree = {
+  remove(data: TreeItem[], id: string): TreeItem[] {
+    return data
+      .filter(item => item.title !== id)
+      .map((item) => {
+        if (tree.hasChildren(item)) {
+          return {
+            ...item,
+            children: tree.remove(item.children ?? [], id),
+          }
+        }
+        return item
+      })
+  },
+  insertBefore(data: TreeItem[], targetId: string, newItem: TreeItem): TreeItem[] {
+    return data.flatMap((item) => {
+      if (item.title === targetId)
+        return [newItem, item]
+
+      if (tree.hasChildren(item)) {
+        return {
+          ...item,
+          children: tree.insertBefore(item.children ?? [], targetId, newItem),
+        }
+      }
+      return item
+    })
+  },
+  insertAfter(data: TreeItem[], targetId: string, newItem: TreeItem): TreeItem[] {
+    return data.flatMap((item) => {
+      if (item.title === targetId)
+        return [item, newItem]
+
+      if (tree.hasChildren(item)) {
+        return {
+          ...item,
+          children: tree.insertAfter(item.children ?? [], targetId, newItem),
+        }
+      }
+
+      return item
+    })
+  },
+  insertChild(data: TreeItem[], targetId: string, newItem: TreeItem): TreeItem[] {
+    return data.flatMap((item) => {
+      if (item.title === targetId) {
+        // already a parent: add as first child
+        return {
+          ...item,
+          // opening item so you can see where item landed
+          isOpen: true,
+          children: [newItem, ...item.children ?? []],
+        }
+      }
+
+      if (!tree.hasChildren(item))
+        return item
+
+      return {
+        ...item,
+        children: tree.insertChild(item.children ?? [], targetId, newItem),
+      }
+    })
+  },
+  find(data: TreeItem[], itemId: string): TreeItem | undefined {
+    for (const item of data) {
+      if (item.title === itemId)
+        return item
+
+      if (tree.hasChildren(item)) {
+        const result = tree.find(item.children ?? [], itemId)
+        if (result)
+          return result
+      }
+    }
+  },
+  getPathToItem({
+    current,
+    targetId,
+    parentIds = [],
+  }: {
+    current: TreeItem[]
+    targetId: string
+    parentIds?: string[]
+  }): string[] | undefined {
+    for (const item of current) {
+      if (item.title === targetId)
+        return parentIds
+
+      const nested = tree.getPathToItem({
+        current: (item.children ?? []),
+        targetId,
+        parentIds: [...parentIds, item.title],
+      })
+      if (nested)
+        return nested
+    }
+  },
+  hasChildren(item: TreeItem): boolean {
+    return (item.children ?? []).length > 0
+  },
+}
+
+export function updateTree(data: TreeItem[], action: TreeAction) {
+  // eslint-disable-next-line no-console
+  console.log('action', action)
+
+  const item = tree.find(data, action.itemId)
+  if (!item)
+    return data
+
+  if (action.type === 'instruction') {
+    const instruction = action.instruction
+
+    if (instruction.type === 'reparent') {
+      const path = tree.getPathToItem({
+        current: data,
+        targetId: action.targetId,
+      })
+      if (!path) {
+        console.error(`missing ${path}`)
+        return
+      }
+
+      const desiredId = path[instruction.desiredLevel]
+      let result = tree.remove(data, action.itemId)
+      result = tree.insertAfter(result, desiredId, item)
+      return result
+    }
+
+    // the rest of the actions require you to drop on something else
+    if (action.itemId === action.targetId)
+      return data
+
+    if (instruction.type === 'reorder-above') {
+      let result = tree.remove(data, action.itemId)
+      result = tree.insertBefore(result, action.targetId, item)
+      return result
+    }
+
+    if (instruction.type === 'reorder-below') {
+      let result = tree.remove(data, action.itemId)
+      result = tree.insertAfter(result, action.targetId, item)
+      return result
+    }
+
+    if (instruction.type === 'make-child') {
+      let result = tree.remove(data, action.itemId)
+      result = tree.insertChild(result, action.targetId, item)
+      return result
+    }
+
+    console.warn('TODO: action not implemented', instruction)
+
+    return data
+  }
+
+  if (action.type === 'modal-move') {
+    let result = tree.remove(data, item.title)
+
+    const siblingItems = getChildItems(result, action.targetId) ?? []
+
+    if (siblingItems.length === 0) {
+      if (action.targetId === '') {
+        /**
+         * If the target is the root level, and there are no siblings, then
+         * the item is the only thing in the root level.
+         */
+        result = [item]
+      }
+      else {
+        /**
+         * Otherwise for deeper levels that have no children, we need to
+         * use `insertChild` instead of inserting relative to a sibling.
+         */
+        result = tree.insertChild(result, action.targetId, item)
+      }
+    }
+    else if (action.index === siblingItems.length) {
+      const relativeTo = siblingItems[siblingItems.length - 1]
+      /**
+       * If the position selected is the end, we insert after the last item.
+       */
+      result = tree.insertAfter(result, relativeTo.title, item)
+    }
+    else {
+      const relativeTo = siblingItems[action.index]
+      /**
+       * Otherwise we insert before the existing item in the given position.
+       * This results in the new item being in that position.
+       */
+      result = tree.insertBefore(result, relativeTo.title, item)
+    }
+
+    return result
+  }
+
+  return data
+}
+
+function getChildItems(data: TreeItem[], targetId: string) {
+  /**
+   * An empty string is representing the root
+   */
+  if (targetId === '')
+    return data
+
+  const targetItem = tree.find(data, targetId)
+  if (!targetItem) {
+    console.error(`missing ${targetItem}`)
+    return
+  }
+
+  return targetItem.children
+}
diff --git a/packages/radix-vue/src/Tree/utils.ts b/packages/radix-vue/src/Tree/utils.ts
index 6ba72b4fc..bf1a7ba14 100644
--- a/packages/radix-vue/src/Tree/utils.ts
+++ b/packages/radix-vue/src/Tree/utils.ts
@@ -8,3 +8,5 @@ export function flatten<U, T extends { children: any[] } >(items: T[]): U[] {
     return acc
   }, [])
 }
+
+// TODO: expose more utility function to handle flattened item
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3fa63ffca..2a39f5807 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -198,6 +198,12 @@ importers:
 
   packages/radix-vue:
     dependencies:
+      '@atlaskit/pragmatic-drag-and-drop':
+        specifier: ^1.1.11
+        version: 1.1.11
+      '@atlaskit/pragmatic-drag-and-drop-hitbox':
+        specifier: ^1.0.3
+        version: 1.0.3
       '@floating-ui/dom':
         specifier: ^1.6.5
         version: 1.6.5
@@ -666,6 +672,21 @@ packages:
       is-potential-custom-element-name: 1.0.1
     dev: true
 
+  /@atlaskit/pragmatic-drag-and-drop-hitbox@1.0.3:
+    resolution: {integrity: sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==}
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop': 1.1.11
+      '@babel/runtime': 7.24.0
+    dev: false
+
+  /@atlaskit/pragmatic-drag-and-drop@1.1.11:
+    resolution: {integrity: sha512-oAwMGM68d7PrAHvcgwzJbOtZJKW6BJsc2eDWfVWb7W+lGo8tWDIFdMSmR2K+EczV03lXgdnQbRWDMcOrZ/98mQ==}
+    dependencies:
+      '@babel/runtime': 7.24.0
+      bind-event-listener: 3.0.0
+      raf-schd: 4.0.3
+    dev: false
+
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
@@ -904,7 +925,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
-    dev: true
 
   /@babel/standalone@7.24.0:
     resolution: {integrity: sha512-yIZ/X3EAASgX/MW1Bn8iZKxCwixgYJAUaIScoZ9C6Gapw5l3eKIbtVSgO/IGldQed9QXm22yurKVWyWj5/j+SQ==}
@@ -3950,6 +3970,10 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /bind-event-listener@3.0.0:
+    resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
+    dev: false
+
   /birpc@0.1.1:
     resolution: {integrity: sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==}
     dev: true
@@ -9500,6 +9524,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+    dev: false
+
   /rc9@2.1.1:
     resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
     dependencies:
@@ -9594,7 +9622,6 @@ packages:
 
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: true
 
   /regexp-ast-analysis@0.7.1:
     resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}

From 8419dcd342c90a3dd042ab65ad97bd873458fa8e Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 12 Jun 2024 13:56:47 +0800
Subject: [PATCH 20/27] chore: cleanup dnd, add stackblitz docs

---
 docs/content/components/tree.md               |   2 +
 packages/radix-vue/package.json               |   2 -
 .../src/Tree/__snapshots__/Tree.test.ts.snap  |   6 +-
 .../src/Tree/story/TreeDND.story.vue          |  73 ------
 .../radix-vue/src/Tree/story/_TreeItemDND.vue | 166 ------------
 packages/radix-vue/src/Tree/story/utils.ts    | 244 ------------------
 pnpm-lock.yaml                                |  31 +--
 7 files changed, 7 insertions(+), 517 deletions(-)
 delete mode 100644 packages/radix-vue/src/Tree/story/TreeDND.story.vue
 delete mode 100644 packages/radix-vue/src/Tree/story/_TreeItemDND.vue
 delete mode 100644 packages/radix-vue/src/Tree/story/utils.ts

diff --git a/docs/content/components/tree.md b/docs/content/components/tree.md
index 5b158ae8c..3f47478c2 100644
--- a/docs/content/components/tree.md
+++ b/docs/content/components/tree.md
@@ -198,6 +198,8 @@ import { TreeItem, TreeRoot } from 'radix-vue'
 
 For more complex draggable `Tree` component, in this example we will be using [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop), as the core package for handling dnd.
 
+[Stackblitz Demo](https://stackblitz.com/~/github.com/zernonia/radix-vue-tree)
+
 ## Accessibility
 
 Adheres to the [Tree WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
diff --git a/packages/radix-vue/package.json b/packages/radix-vue/package.json
index 490893338..e7c80408f 100644
--- a/packages/radix-vue/package.json
+++ b/packages/radix-vue/package.json
@@ -93,8 +93,6 @@
     "vue": ">= 3.2.0"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.1.11",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@floating-ui/dom": "^1.6.5",
     "@floating-ui/vue": "^1.0.6",
     "@internationalized/date": "^3.5.4",
diff --git a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
index c0fd1364e..ffb96dc78 100644
--- a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
+++ b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -2,14 +2,14 @@
 
 exports[`given default Tree > should render snapshot 1`] = `
 "<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
-  <li role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" data-radix-vue-collection-item="">
+  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item="">
     <!--v-if-->
     <div class="pl-2">index.vue</div>
   </li>
-  <li role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="2" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="2" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
     <div class="pl-2">lib</div>
   </li>
-  <li role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
     <div class="pl-2">routes</div>
   </li>
 </div>"
diff --git a/packages/radix-vue/src/Tree/story/TreeDND.story.vue b/packages/radix-vue/src/Tree/story/TreeDND.story.vue
deleted file mode 100644
index c7386114b..000000000
--- a/packages/radix-vue/src/Tree/story/TreeDND.story.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { TreeRoot } from '..'
-import { items as ITEMS } from './constants'
-import TreeItem from './_TreeItemDND.vue'
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
-import { shallowRef, watchEffect } from 'vue'
-import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
-import { updateTree } from './utils'
-
-const items = shallowRef(ITEMS)
-
-watchEffect((onCleanup) => {
-  const dndFunction = combine(
-    monitorForElements({
-      onDrop(args) {
-        const { location, source } = args
-        // didn't drop on anything
-        if (!location.current.dropTargets.length)
-          return
-
-        const itemId = source.data.id as string
-        const target = location.current.dropTargets[0]
-        const targetId = target.data.id as string
-
-        const instruction: Instruction | null = extractInstruction(
-          target.data,
-        )
-
-        if (instruction !== null) {
-          items.value = updateTree(items.value, {
-            type: 'instruction',
-            instruction,
-            itemId,
-            targetId,
-          }) ?? []
-        }
-      },
-    }),
-  )
-
-  onCleanup(() => {
-    dndFunction()
-  })
-})
-</script>
-
-<template>
-  <Story title="Tree/DND" :layout="{ type: 'single', iframe: false }">
-    <Variant title="default">
-      <div class="flex justify-center w-full">
-        <TreeRoot
-          v-slot="{ flattenItems }"
-          class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
-          :items="items"
-          :get-key="(item) => item.title"
-          multiple
-          propagate-select
-        >
-          <TreeItem
-            v-for="item in flattenItems"
-            :key="item._id + item.index"
-            :item="item"
-            v-bind="item.bind"
-            :style="{ 'padding-left': `${item.level}rem` }"
-            class="flex items-center py-1.5 px-2 rounded outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
-            @select.prevent
-          />
-        </TreeRoot>
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/packages/radix-vue/src/Tree/story/_TreeItemDND.vue b/packages/radix-vue/src/Tree/story/_TreeItemDND.vue
deleted file mode 100644
index 6153c5a61..000000000
--- a/packages/radix-vue/src/Tree/story/_TreeItemDND.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<script setup lang="ts">
-import { computed, h, nextTick, ref, render, watchEffect } from 'vue'
-import { type FlattenedItem, TreeItem } from '..'
-import { usePrimitiveElement } from '@/Primitive'
-import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
-import { type Instruction, type ItemMode, attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
-import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview'
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
-import { Icon } from '@iconify/vue'
-
-const props = defineProps<{
-  item: FlattenedItem<any>
-}>()
-
-const { primitiveElement, currentElement } = usePrimitiveElement()
-const isDragging = ref(false)
-const isDraggedOver = ref(false)
-const isInitialExpanded = ref(false)
-const instruction = ref<Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null>(null)
-
-const mode = computed(() => {
-  if (props.item.hasChildren)
-    return 'expanded'
-  if (props.item.index + 1 === props.item.parentItem?.children?.length)
-    return 'last-in-group'
-  return 'standard'
-})
-
-watchEffect((onCleanup) => {
-  if (!currentElement.value)
-    return
-
-  const item = { ...props.item.value, level: props.item.level, id: props.item._id }
-
-  const expandItem = () => {
-    // @ts-expect-error can't infer generic components instance's type
-    // https://github.com/vuejs/language-tools/issues/3206
-    if (!primitiveElement.value?.isExpanded) {
-      // @ts-expect-error can't infer generic components instance's type
-      primitiveElement.value?.handleToggle()
-    }
-  }
-
-  const closeItem = () => {
-    // @ts-expect-error can't infer generic components instance's type
-    // https://github.com/vuejs/language-tools/issues/3206
-    if (primitiveElement.value?.isExpanded) {
-      // @ts-expect-error can't infer generic components instance's type
-      primitiveElement.value?.handleToggle()
-    }
-  }
-
-  const dndFunction = combine(
-    draggable({
-      element: currentElement.value,
-      getInitialData: () => item,
-      onDragStart: () => {
-        isDragging.value = true
-        // @ts-expect-error can't infer generic components instance's type
-        isInitialExpanded.value = primitiveElement.value?.isExpanded
-        closeItem()
-      },
-      onDrop: () => {
-        isDragging.value = false
-        if (isInitialExpanded.value)
-          expandItem()
-      },
-      onGenerateDragPreview({ nativeSetDragImage }) {
-        setCustomNativeDragPreview({
-          getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
-          render: ({ container }) => {
-            return render(h(
-              'div',
-              { class: 'bg-white text-blackA11 rounded-md text-sm font-medium px-3 py-1.5' },
-              item.id,
-            ), container)
-          },
-          nativeSetDragImage,
-        })
-      },
-    }),
-
-    dropTargetForElements({
-      element: currentElement.value,
-      getData: ({ input, element }) => {
-        const data = { id: item.id }
-
-        return attachInstruction(data, {
-          input,
-          element,
-          indentPerLevel: 16,
-          currentLevel: props.item.level,
-          mode: mode.value,
-          block: [],
-        })
-      },
-      canDrop: ({ source }) => {
-        return source.data.id !== item.id
-      },
-      onDrag: ({ self }) => {
-        instruction.value = extractInstruction(self.data) as typeof instruction.value
-      },
-      onDragEnter: ({ source }) => {
-        if (source.data.id !== item.id) {
-          isDraggedOver.value = true
-          expandItem()
-        }
-      },
-      onDragLeave: () => {
-        isDraggedOver.value = false
-        instruction.value = null
-      },
-      onDrop: ({ location }) => {
-        isDraggedOver.value = false
-        instruction.value = null
-        if (location.current.dropTargets[0].data.id === item.id) {
-          nextTick(() => {
-            expandItem()
-          })
-        }
-      },
-      getIsSticky: () => true,
-    }),
-
-    monitorForElements({
-      canMonitor: ({ source }) => {
-        return source.data.id !== item.id
-      },
-    }),
-  )
-
-  // Cleanup dnd function
-  onCleanup(() => dndFunction())
-})
-</script>
-
-<template>
-  <TreeItem
-    ref="primitiveElement"
-    v-slot="{ isExpanded }"
-    :value="item.value"
-    :level="item.level"
-    class="relative w-full border-none"
-    :class="{ 'opacity-50': isDragging }"
-  >
-    <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4 transition" :class="{ '-rotate-90': isExpanded }" />
-    <div class="pl-2">
-      {{ item.value.title }}
-    </div>
-
-    <div
-      v-if="instruction"
-      class="absolute h-full w-full top-0 border-blue-500 "
-      :style="{
-        left: `${instruction?.currentLevel * instruction?.indentPerLevel}px`,
-        width: `calc(100% - ${instruction?.currentLevel * instruction?.indentPerLevel}px)`,
-      }"
-      :class="{
-        '!border-b-2': instruction?.type === 'reorder-below',
-        '!border-t-2': instruction?.type === 'reorder-above',
-        '!border-2 rounded': instruction?.type === 'make-child',
-      }"
-    />
-  </TreeItem>
-</template>
diff --git a/packages/radix-vue/src/Tree/story/utils.ts b/packages/radix-vue/src/Tree/story/utils.ts
deleted file mode 100644
index 3b288b3bf..000000000
--- a/packages/radix-vue/src/Tree/story/utils.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
-
-export type TreeItem = {
-  title: string
-  icon: string
-  children?: TreeItem[]
-}
-
-export type TreeAction =
-  | {
-    type: 'instruction'
-    instruction: Instruction
-    itemId: string
-    targetId: string
-  }
-  | {
-    type: 'toggle'
-    itemId: string
-  }
-  | {
-    type: 'expand'
-    itemId: string
-  }
-  | {
-    type: 'collapse'
-    itemId: string
-  }
-  | { type: 'modal-move', itemId: string, targetId: string, index: number }
-
-export const tree = {
-  remove(data: TreeItem[], id: string): TreeItem[] {
-    return data
-      .filter(item => item.title !== id)
-      .map((item) => {
-        if (tree.hasChildren(item)) {
-          return {
-            ...item,
-            children: tree.remove(item.children ?? [], id),
-          }
-        }
-        return item
-      })
-  },
-  insertBefore(data: TreeItem[], targetId: string, newItem: TreeItem): TreeItem[] {
-    return data.flatMap((item) => {
-      if (item.title === targetId)
-        return [newItem, item]
-
-      if (tree.hasChildren(item)) {
-        return {
-          ...item,
-          children: tree.insertBefore(item.children ?? [], targetId, newItem),
-        }
-      }
-      return item
-    })
-  },
-  insertAfter(data: TreeItem[], targetId: string, newItem: TreeItem): TreeItem[] {
-    return data.flatMap((item) => {
-      if (item.title === targetId)
-        return [item, newItem]
-
-      if (tree.hasChildren(item)) {
-        return {
-          ...item,
-          children: tree.insertAfter(item.children ?? [], targetId, newItem),
-        }
-      }
-
-      return item
-    })
-  },
-  insertChild(data: TreeItem[], targetId: string, newItem: TreeItem): TreeItem[] {
-    return data.flatMap((item) => {
-      if (item.title === targetId) {
-        // already a parent: add as first child
-        return {
-          ...item,
-          // opening item so you can see where item landed
-          isOpen: true,
-          children: [newItem, ...item.children ?? []],
-        }
-      }
-
-      if (!tree.hasChildren(item))
-        return item
-
-      return {
-        ...item,
-        children: tree.insertChild(item.children ?? [], targetId, newItem),
-      }
-    })
-  },
-  find(data: TreeItem[], itemId: string): TreeItem | undefined {
-    for (const item of data) {
-      if (item.title === itemId)
-        return item
-
-      if (tree.hasChildren(item)) {
-        const result = tree.find(item.children ?? [], itemId)
-        if (result)
-          return result
-      }
-    }
-  },
-  getPathToItem({
-    current,
-    targetId,
-    parentIds = [],
-  }: {
-    current: TreeItem[]
-    targetId: string
-    parentIds?: string[]
-  }): string[] | undefined {
-    for (const item of current) {
-      if (item.title === targetId)
-        return parentIds
-
-      const nested = tree.getPathToItem({
-        current: (item.children ?? []),
-        targetId,
-        parentIds: [...parentIds, item.title],
-      })
-      if (nested)
-        return nested
-    }
-  },
-  hasChildren(item: TreeItem): boolean {
-    return (item.children ?? []).length > 0
-  },
-}
-
-export function updateTree(data: TreeItem[], action: TreeAction) {
-  // eslint-disable-next-line no-console
-  console.log('action', action)
-
-  const item = tree.find(data, action.itemId)
-  if (!item)
-    return data
-
-  if (action.type === 'instruction') {
-    const instruction = action.instruction
-
-    if (instruction.type === 'reparent') {
-      const path = tree.getPathToItem({
-        current: data,
-        targetId: action.targetId,
-      })
-      if (!path) {
-        console.error(`missing ${path}`)
-        return
-      }
-
-      const desiredId = path[instruction.desiredLevel]
-      let result = tree.remove(data, action.itemId)
-      result = tree.insertAfter(result, desiredId, item)
-      return result
-    }
-
-    // the rest of the actions require you to drop on something else
-    if (action.itemId === action.targetId)
-      return data
-
-    if (instruction.type === 'reorder-above') {
-      let result = tree.remove(data, action.itemId)
-      result = tree.insertBefore(result, action.targetId, item)
-      return result
-    }
-
-    if (instruction.type === 'reorder-below') {
-      let result = tree.remove(data, action.itemId)
-      result = tree.insertAfter(result, action.targetId, item)
-      return result
-    }
-
-    if (instruction.type === 'make-child') {
-      let result = tree.remove(data, action.itemId)
-      result = tree.insertChild(result, action.targetId, item)
-      return result
-    }
-
-    console.warn('TODO: action not implemented', instruction)
-
-    return data
-  }
-
-  if (action.type === 'modal-move') {
-    let result = tree.remove(data, item.title)
-
-    const siblingItems = getChildItems(result, action.targetId) ?? []
-
-    if (siblingItems.length === 0) {
-      if (action.targetId === '') {
-        /**
-         * If the target is the root level, and there are no siblings, then
-         * the item is the only thing in the root level.
-         */
-        result = [item]
-      }
-      else {
-        /**
-         * Otherwise for deeper levels that have no children, we need to
-         * use `insertChild` instead of inserting relative to a sibling.
-         */
-        result = tree.insertChild(result, action.targetId, item)
-      }
-    }
-    else if (action.index === siblingItems.length) {
-      const relativeTo = siblingItems[siblingItems.length - 1]
-      /**
-       * If the position selected is the end, we insert after the last item.
-       */
-      result = tree.insertAfter(result, relativeTo.title, item)
-    }
-    else {
-      const relativeTo = siblingItems[action.index]
-      /**
-       * Otherwise we insert before the existing item in the given position.
-       * This results in the new item being in that position.
-       */
-      result = tree.insertBefore(result, relativeTo.title, item)
-    }
-
-    return result
-  }
-
-  return data
-}
-
-function getChildItems(data: TreeItem[], targetId: string) {
-  /**
-   * An empty string is representing the root
-   */
-  if (targetId === '')
-    return data
-
-  const targetItem = tree.find(data, targetId)
-  if (!targetItem) {
-    console.error(`missing ${targetItem}`)
-    return
-  }
-
-  return targetItem.children
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a39f5807..3fa63ffca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -198,12 +198,6 @@ importers:
 
   packages/radix-vue:
     dependencies:
-      '@atlaskit/pragmatic-drag-and-drop':
-        specifier: ^1.1.11
-        version: 1.1.11
-      '@atlaskit/pragmatic-drag-and-drop-hitbox':
-        specifier: ^1.0.3
-        version: 1.0.3
       '@floating-ui/dom':
         specifier: ^1.6.5
         version: 1.6.5
@@ -672,21 +666,6 @@ packages:
       is-potential-custom-element-name: 1.0.1
     dev: true
 
-  /@atlaskit/pragmatic-drag-and-drop-hitbox@1.0.3:
-    resolution: {integrity: sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==}
-    dependencies:
-      '@atlaskit/pragmatic-drag-and-drop': 1.1.11
-      '@babel/runtime': 7.24.0
-    dev: false
-
-  /@atlaskit/pragmatic-drag-and-drop@1.1.11:
-    resolution: {integrity: sha512-oAwMGM68d7PrAHvcgwzJbOtZJKW6BJsc2eDWfVWb7W+lGo8tWDIFdMSmR2K+EczV03lXgdnQbRWDMcOrZ/98mQ==}
-    dependencies:
-      '@babel/runtime': 7.24.0
-      bind-event-listener: 3.0.0
-      raf-schd: 4.0.3
-    dev: false
-
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
@@ -925,6 +904,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
+    dev: true
 
   /@babel/standalone@7.24.0:
     resolution: {integrity: sha512-yIZ/X3EAASgX/MW1Bn8iZKxCwixgYJAUaIScoZ9C6Gapw5l3eKIbtVSgO/IGldQed9QXm22yurKVWyWj5/j+SQ==}
@@ -3970,10 +3950,6 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
-  /bind-event-listener@3.0.0:
-    resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
-    dev: false
-
   /birpc@0.1.1:
     resolution: {integrity: sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==}
     dev: true
@@ -9524,10 +9500,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /raf-schd@4.0.3:
-    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
-    dev: false
-
   /rc9@2.1.1:
     resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
     dependencies:
@@ -9622,6 +9594,7 @@ packages:
 
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: true
 
   /regexp-ast-analysis@0.7.1:
     resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}

From 48f38b09828a7a4c3654767b2e6f285a468a8508 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 12 Jun 2024 14:38:50 +0800
Subject: [PATCH 21/27] docs: update sb link

---
 docs/content/components/tree.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/components/tree.md b/docs/content/components/tree.md
index 3f47478c2..743bd3f99 100644
--- a/docs/content/components/tree.md
+++ b/docs/content/components/tree.md
@@ -198,7 +198,7 @@ import { TreeItem, TreeRoot } from 'radix-vue'
 
 For more complex draggable `Tree` component, in this example we will be using [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop), as the core package for handling dnd.
 
-[Stackblitz Demo](https://stackblitz.com/~/github.com/zernonia/radix-vue-tree)
+[Stackblitz Demo](https://stackblitz.com/edit/github-8f3fzs?file=src%2FTreeDND.vue)
 
 ## Accessibility
 

From 30b8b844ee52623aeace18c4af32fca0cbb769a3 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 29 Jun 2024 15:31:58 +0800
Subject: [PATCH 22/27] chore: lint

---
 packages/radix-vue/src/Tree/TreeItem.vue       |  6 +++++-
 packages/radix-vue/src/Tree/TreeRoot.vue       |  1 +
 .../src/Tree/__snapshots__/Tree.test.ts.snap   |  4 ++--
 .../src/Tree/story/TreeBasic.story.vue         | 11 +++++++++--
 .../src/Tree/story/TreeCheckbox.story.vue      | 18 +++++++++++++++---
 .../src/Tree/story/TreeVirtual.story.vue       | 16 +++++++++++++---
 packages/radix-vue/src/Tree/story/_Tree.vue    |  6 +++++-
 7 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 529be9ba4..2f984a5ee 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -144,7 +144,11 @@ defineExpose({
 </script>
 
 <template>
-  <RovingFocusItem as-child :value="value" allow-shift-key>
+  <RovingFocusItem
+    as-child
+    :value="value"
+    allow-shift-key
+  >
     <Primitive
       v-bind="$attrs"
       role="treeitem"
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 1f92dfdcc..51a66de79 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -77,6 +77,7 @@ import { type Ref, computed, nextTick, ref, toRefs } from 'vue'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 
 const props = withDefaults(defineProps<TreeRootProps<T, U>>(), {
+  as: 'ul',
   selectionBehavior: 'toggle',
 })
 const emits = defineEmits<TreeRootEmits<U>>()
diff --git a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
index ffb96dc78..b3373f8b8 100644
--- a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
+++ b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`given default Tree > should render snapshot 1`] = `
-"<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
   <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item="">
     <!--v-if-->
     <div class="pl-2">index.vue</div>
@@ -12,5 +12,5 @@ exports[`given default Tree > should render snapshot 1`] = `
   <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
     <div class="pl-2">routes</div>
   </li>
-</div>"
+</ul>"
 `;
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index fdfc90e57..f37657711 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -5,7 +5,10 @@ import { items } from './constants'
 </script>
 
 <template>
-  <Story title="Tree/Basic" :layout="{ type: 'single', iframe: false }">
+  <Story
+    title="Tree/Basic"
+    :layout="{ type: 'single', iframe: false }"
+  >
     <Variant title="default">
       <TreeRoot
         v-slot="{ flattenItems }"
@@ -20,7 +23,11 @@ import { items } from './constants'
           :style="{ 'margin-left': `${item.level}rem` }"
           class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
         >
-          <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4 mr-2" />
+          <Icon
+            v-if="item.hasChildren"
+            icon="radix-icons:chevron-down"
+            class="h-4 w-4 mr-2"
+          />
           <div>
             {{ item.value.title }}
           </div>
diff --git a/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
index 40b10d969..6d114dcc6 100644
--- a/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
@@ -5,7 +5,10 @@ import { items } from './constants'
 </script>
 
 <template>
-  <Story title="Tree/Checkbox" :layout="{ type: 'single', iframe: false }">
+  <Story
+    title="Tree/Checkbox"
+    :layout="{ type: 'single', iframe: false }"
+  >
     <Variant title="default">
       <TreeRoot
         v-slot="{ flattenItems }"
@@ -31,8 +34,17 @@ import { items } from './constants'
               event.preventDefault()
           }"
         >
-          <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
-          <input :checked="isSelected" type="checkbox" @click.stop @change="handleSelect">
+          <Icon
+            v-if="item.hasChildren"
+            icon="radix-icons:chevron-down"
+            class="h-4 w-4"
+          />
+          <input
+            :checked="isSelected"
+            type="checkbox"
+            @click.stop
+            @change="handleSelect"
+          >
           <div class="pl-2">
             {{ item.value.title }}
           </div>
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
index 99097f43e..6fe372bea 100644
--- a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -20,7 +20,10 @@ const items = groupCountriesByFirstLetter(countryList)
 </script>
 
 <template>
-  <Story title="Tree/Virtual" :layout="{ type: 'single', iframe: false }">
+  <Story
+    title="Tree/Virtual"
+    :layout="{ type: 'single', iframe: false }"
+  >
     <Variant title="default">
       <TreeRoot
         :items="items"
@@ -30,13 +33,20 @@ const items = groupCountriesByFirstLetter(countryList)
         propagate-select
         class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
       >
-        <TreeVirtualizer v-slot="{ item }" :text-content="(item) => item.title">
+        <TreeVirtualizer
+          v-slot="{ item }"
+          :text-content="(item) => item.title"
+        >
           <TreeItem
             class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
             :style="{ 'margin-left': `${item.level}rem` }"
             v-bind="item.bind"
           >
-            <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+            <Icon
+              v-if="item.hasChildren"
+              icon="radix-icons:chevron-down"
+              class="h-4 w-4"
+            />
             <div class="pl-2">
               {{ item.value.title }}
             </div>
diff --git a/packages/radix-vue/src/Tree/story/_Tree.vue b/packages/radix-vue/src/Tree/story/_Tree.vue
index 9e41eba58..c26f0f780 100644
--- a/packages/radix-vue/src/Tree/story/_Tree.vue
+++ b/packages/radix-vue/src/Tree/story/_Tree.vue
@@ -81,7 +81,11 @@ const items = [
       :style="{ 'margin-left': `${item.level}rem` }"
       v-bind="item.bind"
     >
-      <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" class="h-4 w-4" />
+      <Icon
+        v-if="item.hasChildren"
+        icon="radix-icons:chevron-down"
+        class="h-4 w-4"
+      />
       <div class="pl-2">
         {{ item.value.title }}
       </div>

From 2a56e89071017c4186a363ab436c53838f41d367 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 29 Jun 2024 22:27:00 +0800
Subject: [PATCH 23/27] chore: improve story styling

---
 packages/radix-vue/src/Tree/story/TreeBasic.story.vue    | 4 ++--
 packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue | 9 +++------
 packages/radix-vue/src/Tree/story/TreeVirtual.story.vue  | 4 ++--
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
index f37657711..ffbb7e089 100644
--- a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -12,7 +12,7 @@ import { items } from './constants'
     <Variant title="default">
       <TreeRoot
         v-slot="{ flattenItems }"
-        class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
         :items="items"
         :get-key="(item) => item.title"
       >
@@ -20,7 +20,7 @@ import { items } from './constants'
           v-for="item in flattenItems"
           :key="item._id"
           v-bind="item.bind"
-          :style="{ 'margin-left': `${item.level}rem` }"
+          :style="{ 'margin-left': `${item.level - 1}rem` }"
           class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
         >
           <Icon
diff --git a/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
index 6d114dcc6..8c1d0640e 100644
--- a/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
@@ -12,7 +12,7 @@ import { items } from './constants'
     <Variant title="default">
       <TreeRoot
         v-slot="{ flattenItems }"
-        class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
         :items="items"
         :get-key="(item) => item.title"
         multiple
@@ -23,16 +23,12 @@ import { items } from './constants'
           :key="item._id"
           v-slot="{ handleSelect, isSelected }"
           v-bind="item.bind"
-          :style="{ 'margin-left': `${item.level}rem` }"
+          :style="{ 'margin-left': `${item.level - 1}rem` }"
           class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
           @select="(event) => {
             if (event.detail.originalEvent.type === 'click')
               event.preventDefault()
           }"
-          @toggle="(event) => {
-            if (event.detail.originalEvent.type === 'keydown')
-              event.preventDefault()
-          }"
         >
           <Icon
             v-if="item.hasChildren"
@@ -42,6 +38,7 @@ import { items } from './constants'
           <input
             :checked="isSelected"
             type="checkbox"
+            tabindex="-1"
             @click.stop
             @change="handleSelect"
           >
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
index 6fe372bea..bab13e49b 100644
--- a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -31,7 +31,7 @@ const items = groupCountriesByFirstLetter(countryList)
         multiple
         selection-behavior="replace"
         propagate-select
-        class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+        class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
       >
         <TreeVirtualizer
           v-slot="{ item }"
@@ -39,7 +39,7 @@ const items = groupCountriesByFirstLetter(countryList)
         >
           <TreeItem
             class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
-            :style="{ 'margin-left': `${item.level}rem` }"
+            :style="{ 'margin-left': `${item.level - 1}rem` }"
             v-bind="item.bind"
           >
             <Icon

From fdab11651dc4903fc52e6d4c182d43581f7b1867 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 29 Jun 2024 22:28:46 +0800
Subject: [PATCH 24/27] feat: cater for async mode

---
 packages/radix-vue/src/Tree/TreeItem.vue      |  35 ++++--
 packages/radix-vue/src/Tree/TreeRoot.vue      |   4 +-
 packages/radix-vue/src/Tree/index.ts          |   2 +
 .../src/Tree/story/TreeAsync.story.vue        | 104 ++++++++++++++++++
 4 files changed, 132 insertions(+), 13 deletions(-)
 create mode 100644 packages/radix-vue/src/Tree/story/TreeAsync.story.vue

diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 2f984a5ee..7749e0d6f 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -6,8 +6,8 @@ export interface TreeItemProps<T> extends PrimitiveProps {
   level: number
 }
 
-export type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
-export type ToggleEvent<T> = CustomEvent<{ originalEvent: PointerEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
+export type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
+export type ToggleEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
 
 export type TreeItemEmits<T> = {
   /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */
@@ -17,13 +17,14 @@ export type TreeItemEmits<T> = {
 }
 
 const TREE_SELECT = 'tree.select'
+const TREE_TOGGLE = 'tree.toggle'
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { RovingFocusItem } from '@/RovingFocus'
 import { injectTreeRootContext } from './TreeRoot.vue'
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import { useCollection } from '@/Collection'
 import { handleAndDispatchCustomEvent, useForwardRef } from '@/shared'
 import { flatten } from './utils'
@@ -50,7 +51,7 @@ defineSlots<{
 const rootContext = injectTreeRootContext()
 const { getItems } = useCollection()
 
-const hasChildren = computed(() => !!props.value.children?.length)
+const hasChildren = computed(() => !!props.value.children)
 
 const isExpanded = computed(() => {
   const key = rootContext.getKey(props.value)
@@ -73,7 +74,7 @@ const isIndeterminate = computed(() => {
   }
 })
 
-function handleKeydownRight() {
+function handleKeydownRight(ev: KeyboardEvent) {
   if (!hasChildren.value)
     return
 
@@ -89,14 +90,15 @@ function handleKeydownRight() {
       nextElement.focus()
   }
   else {
-    rootContext.onToggle(props.value)
+    //  open expanded
+    handleToggleCustomEvent(ev)
   }
 }
 
-function handleKeydownLeft() {
+function handleKeydownLeft(ev: KeyboardEvent) {
   if (isExpanded.value) {
     //  close expanded
-    rootContext.onToggle(props.value)
+    handleToggleCustomEvent(ev)
   }
   else {
     // go back to parent
@@ -126,12 +128,20 @@ async function handleToggle(ev: ToggleEvent<T>) {
   rootContext.onToggle(props.value)
 }
 
-function handleSelectCustomEvent(ev?: PointerEvent) {
+async function handleSelectCustomEvent(ev?: PointerEvent | KeyboardEvent) {
   if (!ev)
     return
+
   const eventDetail = { originalEvent: ev, value: props.value, isExpanded: isExpanded.value, isSelected: isSelected.value }
   handleAndDispatchCustomEvent(TREE_SELECT, handleSelect, eventDetail)
-  handleAndDispatchCustomEvent(TREE_SELECT, handleToggle, eventDetail)
+}
+
+async function handleToggleCustomEvent(ev?: PointerEvent | KeyboardEvent) {
+  if (!ev)
+    return
+
+  const eventDetail = { originalEvent: ev, value: props.value, isExpanded: isExpanded.value, isSelected: isSelected.value }
+  handleAndDispatchCustomEvent(TREE_TOGGLE, handleToggle, eventDetail)
 }
 
 defineExpose({
@@ -163,7 +173,10 @@ defineExpose({
       @keydown.enter.space.self="handleSelectCustomEvent"
       @keydown.right.prevent="handleKeydownRight"
       @keydown.left.prevent="handleKeydownLeft"
-      @click.stop="handleSelectCustomEvent"
+      @click.stop="(ev) => {
+        handleSelectCustomEvent(ev)
+        handleToggleCustomEvent(ev)
+      }"
     >
       <slot
         :is-expanded="isExpanded"
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
index 51a66de79..16539a619 100644
--- a/packages/radix-vue/src/Tree/TreeRoot.vue
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -133,7 +133,7 @@ function flattenItems(items: T[], level: number = 1, parentItem?: T): FlattenedI
       index,
       level,
       parentItem,
-      hasChildren: !!item.children?.length,
+      hasChildren: !!item.children,
       bind: {
         'value': item,
         level,
@@ -204,7 +204,7 @@ provideTreeRootContext({
   },
   expanded,
   onToggle(val) {
-    if (!val?.children?.length)
+    if (!val?.children)
       return
 
     const key = props.getKey(val) ?? val
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
index 5f090b700..c9be0db51 100644
--- a/packages/radix-vue/src/Tree/index.ts
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -7,6 +7,8 @@ export {
 export {
   default as TreeItem,
   type TreeItemProps,
+  type SelectEvent as TreeItemSelectEvent,
+  type ToggleEvent as TreeItemToggleEvent,
 } from './TreeItem.vue'
 export {
   default as TreeVirtualizer,
diff --git a/packages/radix-vue/src/Tree/story/TreeAsync.story.vue b/packages/radix-vue/src/Tree/story/TreeAsync.story.vue
new file mode 100644
index 000000000..6f0c232d1
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeAsync.story.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { TreeItemToggleEvent } from '..'
+import { TreeItem, TreeRoot } from '..'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+
+interface TreeNode {
+  id: string
+  name: string
+  children?: TreeNode[]
+}
+
+const initialData = [
+  { id: '1', name: 'Node 1', children: [] },
+  { id: '2', name: 'Node 2', children: [
+    { id: '5', name: 'Child Node 5' },
+  ] },
+  { id: '3', name: 'Node 3', children: [] },
+  { id: '4', name: 'Plain Node' },
+]
+
+const treeData = ref(initialData)
+const loadingIds = ref<Set<string>>(new Set())
+
+function addChildrenToNode(tree: TreeNode[], targetId: string, newChildren: TreeNode[]): boolean {
+  for (const node of tree) {
+    if (node.id === targetId) {
+      node.children = node.children ? [...node.children, ...newChildren] : newChildren
+      return true
+    }
+    if (node.children && node.children.length > 0) {
+      const found = addChildrenToNode(node.children, targetId, newChildren)
+      if (found)
+        return true
+    }
+  }
+  return false
+}
+
+function fetchData(value: TreeNode) {
+  return new Promise<void>((resolve) => {
+    if ((value.children?.length ?? 0) > 0) {
+      return resolve()
+    }
+
+    setTimeout(() => {
+      addChildrenToNode(treeData.value, value.id, [
+        { id: `${value.id}-0`, name: `Child Node ${`${value.id}-0`}`, children: [] },
+        { id: `${value.id}-1`, name: 'Plain Node' },
+      ])
+      return resolve()
+    }, 1000)
+  })
+}
+
+async function fetchChildren(ev: TreeItemToggleEvent<TreeNode>) {
+  const value = ev.detail.value
+  if (!value?.children)
+    return
+
+  loadingIds.value.add(value.id)
+  await fetchData(value)
+  loadingIds.value.delete(value.id)
+}
+</script>
+
+<template>
+  <Story
+    title="Tree/Async"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+        :items="treeData"
+        :get-key="(item) => `${item.id}`"
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-slot="{ isExpanded }"
+          :style="{ 'margin-left': `${item.level - 1}rem` }"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4 transition rotate-0"
+          v-bind="item.bind"
+          @toggle="fetchChildren"
+        >
+          <Icon
+            v-if="loadingIds.has(item.value.id)"
+            icon="radix-icons:reload"
+            class="h-4 w-4 mr-2 animate-spin"
+          />
+          <Icon
+            v-else-if="item.hasChildren"
+            icon="radix-icons:chevron-down"
+            class="h-4 w-4 mr-2"
+            :class="{ '-rotate-90': isExpanded }"
+          />
+          <div> {{ item.value.name }} </div>
+        </TreeItem>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>

From 7ab96399105cab3a5cb0a3199cd98ba3abb43ac6 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 1 Jul 2024 10:55:18 +0800
Subject: [PATCH 25/27] chore: add story for nested dom case

---
 .../src/Tree/story/TreeNested.story.vue       | 23 ++++++++
 .../radix-vue/src/Tree/story/_TreeNested.vue  | 54 +++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 packages/radix-vue/src/Tree/story/TreeNested.story.vue
 create mode 100644 packages/radix-vue/src/Tree/story/_TreeNested.vue

diff --git a/packages/radix-vue/src/Tree/story/TreeNested.story.vue b/packages/radix-vue/src/Tree/story/TreeNested.story.vue
new file mode 100644
index 000000000..99fdb9f8d
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeNested.story.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from '..'
+import { Icon } from '@iconify/vue'
+import { items } from './constants'
+import Tree from './_TreeNested.vue'
+</script>
+
+<template>
+  <Story
+    title="Tree/Nested"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+        :items="items"
+        :get-key="(item) => item.title"
+      >
+        <Tree :tree-items="items" />
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/_TreeNested.vue b/packages/radix-vue/src/Tree/story/_TreeNested.vue
new file mode 100644
index 000000000..30b902078
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/_TreeNested.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { TreeItem } from '../'
+// eslint-disable-next-line import/no-self-import
+import Tree from './_TreeNested.vue'
+
+interface TreeNode {
+  title: string
+  icon: string
+  children?: TreeNode[]
+}
+
+withDefaults(defineProps<{
+  treeItems: TreeNode[]
+  level?: number
+}>(), {
+  level: 0,
+})
+</script>
+
+<template>
+  <li
+    v-for=" tree in treeItems"
+    :key="tree.title"
+  >
+    <TreeItem
+      v-slot="{ isExpanded }"
+      as-child
+      :level="level"
+      :value="tree"
+      :style="{ 'margin-left': `${level}rem` }"
+    >
+      <button class="flex items-center outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4 rounded py-1 px-2 my-0.5 w-max">
+        <Icon
+          v-if="tree.children"
+          icon="radix-icons:chevron-down"
+          class="h-4 w-4 mr-2"
+        />
+        <span>
+          {{ tree.title }}
+        </span>
+      </button>
+
+      <ul v-if="isExpanded">
+        <template v-if="tree.children">
+          <Tree
+            :tree-items="tree.children"
+            :level="level + 1"
+          />
+        </template>
+      </ul>
+    </TreeItem>
+  </li>
+</template>

From 43ef88728206aaf311ad501aeb7b9a0a4335ced1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 1 Jul 2024 22:23:18 +0800
Subject: [PATCH 26/27] chore: update docs

---
 docs/components/demo/Tree/tailwind/index.vue |  24 +++-
 docs/content/components/tree.md              | 121 ++++++++++++++++---
 docs/content/meta/ComboboxRoot.md            |  11 ++
 docs/content/meta/ListboxRoot.md             |   2 +-
 docs/content/meta/ToggleGroupRoot.md         |   2 +-
 docs/content/meta/ToolbarToggleGroup.md      |   2 +-
 docs/content/meta/TreeRoot.md                |   4 +-
 7 files changed, 136 insertions(+), 30 deletions(-)

diff --git a/docs/components/demo/Tree/tailwind/index.vue b/docs/components/demo/Tree/tailwind/index.vue
index 9941f211a..0adb0d0ea 100644
--- a/docs/components/demo/Tree/tailwind/index.vue
+++ b/docs/components/demo/Tree/tailwind/index.vue
@@ -33,7 +33,8 @@ const items = [
 <template>
   <TreeRoot
     v-slot="{ flattenItems }"
-    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium" :items="items"
+    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+    :items="items"
     :get-key="(item) => item.title"
     :default-expanded="['components']"
   >
@@ -44,16 +45,27 @@ const items = [
       v-for="item in flattenItems"
       v-slot="{ isExpanded }"
       :key="item._id"
-      :style="{ 'padding-left': `${item.level + 0.5}rem` }"
-
+      :style="{ 'padding-left': `${item.level - 0.5}rem` }"
       v-bind="item.bind"
       class="flex items-center py-1 px-2 my-0.5 rounded outline-none focus:ring-grass8 focus:ring-2 data-[selected]:bg-grass4"
     >
       <template v-if="item.hasChildren">
-        <Icon v-if="!isExpanded" icon="lucide:folder" class="h-4 w-4" />
-        <Icon v-else icon="lucide:folder-open" class="h-4 w-4" />
+        <Icon
+          v-if="!isExpanded"
+          icon="lucide:folder"
+          class="h-4 w-4"
+        />
+        <Icon
+          v-else
+          icon="lucide:folder-open"
+          class="h-4 w-4"
+        />
       </template>
-      <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-4 w-4" />
+      <Icon
+        v-else
+        :icon="item.value.icon || 'lucide:file'"
+        class="h-4 w-4"
+      />
       <div class="pl-2">
         {{ item.value.title }}
       </div>
diff --git a/docs/content/components/tree.md b/docs/content/components/tree.md
index 743bd3f99..d27220b58 100644
--- a/docs/content/components/tree.md
+++ b/docs/content/components/tree.md
@@ -1,7 +1,7 @@
 ---
 
 title: Tree
-description: A tree view widget presents a hierarchical list
+description: A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
 name: tree
 aria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 ---
@@ -11,7 +11,7 @@ aria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 <Badge>Alpha</Badge>
 
 <Description>
-A tree view widget presents a hierarchical list
+A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
 </Description>
 
 <ComponentPreview name="Tree" />
@@ -24,6 +24,7 @@ A tree view widget presents a hierarchical list
     'Focus is fully managed.',
     'Full keyboard navigation.',
     'Supports Right to Left direction.',
+    'Supports multiple selection.',
     'Different selection behavior.',
   ]"
 />
@@ -114,7 +115,10 @@ const selectedPeople = ref([people[0], people[1]])
 </script>
 
 <template>
-  <TreeRoot v-model="selectedPeople" multiple>
+  <TreeRoot
+    v-model="selectedPeople"
+    multiple
+  >
     ...
   </TreeRoot>
 </template>
@@ -178,12 +182,28 @@ import { TreeItem, TreeRoot } from 'radix-vue'
           event.preventDefault()
       }"
     >
-      <Icon v-if="item.hasChildren" icon="radix-icons:chevron-down" />
-
-      <button tabindex="-1" @click.stop @change="handleSelect">
-        <Icon v-if="isSelected" icon="radix-icons:check" />
-        <Icon v-else-if="isIndeterminate" icon="radix-icons:dash" />
-        <Icon v-else icon="radix-icons:box" />
+      <Icon
+        v-if="item.hasChildren"
+        icon="radix-icons:chevron-down"
+      />
+
+      <button
+        tabindex="-1"
+        @click.stop
+        @change="handleSelect"
+      >
+        <Icon
+          v-if="isSelected"
+          icon="radix-icons:check"
+        />
+        <Icon
+          v-else-if="isIndeterminate"
+          icon="radix-icons:dash"
+        />
+        <Icon
+          v-else
+          icon="radix-icons:box"
+        />
       </button>
 
       <div class="pl-2">
@@ -194,6 +214,65 @@ import { TreeItem, TreeRoot } from 'radix-vue'
 </template>
 ```
 
+### Nested Tree Node
+
+The default example shows flatten tree items and nodes, this enables [Virtualization](/components/tree.html#virtual-list) and custom feature such as Drag & Drop easier. However, you can also build it to have nested DOM node.
+
+In `Tree.vue`,
+
+```vue
+<script setup lang="ts">
+import { TreeItem } from 'radix-vue'
+
+interface TreeNode {
+  title: string
+  icon: string
+  children?: TreeNode[]
+}
+
+withDefaults(defineProps<{
+  treeItems: TreeNode[]
+  level?: number
+}>(), { level: 0 })
+</script>
+
+<template>
+  <li
+    v-for=" tree in treeItems"
+    :key="tree.title"
+  >
+    <TreeItem
+      v-slot="{ isExpanded }"
+      as-child
+      :level="level"
+      :value="tree"
+    >
+      <button>…</button>
+
+      <ul v-if="isExpanded && tree.children">
+        <Tree
+          :tree-items="tree.children"
+          :level="level + 1"
+        />
+      </ul>
+    </TreeItem>
+  </li>
+</template>
+```
+
+In `CustomTree.vue`
+
+```vue
+<template>
+  <TreeRoot
+    :items="items"
+    :get-key="(item) => item.title"
+  >
+    <Tree :tree-items="items" />
+  </TreeRoot>
+</template>
+```
+
 ### Draggable/Sortable Tree
 
 For more complex draggable `Tree` component, in this example we will be using [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop), as the core package for handling dnd.
@@ -210,27 +289,31 @@ Adheres to the [Tree WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/pa
   :data="[
     {
       keys: ['Enter'],
-      description: '<span>When highlight on <code>TreeItem</code>, selects the focused item. </span>',
+      description: 'When highlight on <code>TreeItem</code>, selects the focused item.',
     },
     {
       keys: ['ArrowDown'],
-      description: 'When focus is on <code>TreeItem</code>, moves focus to the next item. </span>',
+      description: 'When focus is on <code>TreeItem</code>, moves focus to the next item.',
     },
     {
       keys: ['ArrowUp'],
-      description: 'When focus is on <code>TreeItem</code>, moves focus to the previous item. </span>',
+      description: 'When focus is on <code>TreeItem</code>, moves focus to the previous item.',
     },
     {
-      keys: ['Home'],
-      description: '<span>Moves focus and highlight to the first item.</span>',
+      keys: ['ArrowRight'],
+      description: 'When focus is on a closed <code>TreeItem</code> (node), it opens the node without moving focus. When on an open node, it moves focus to the first child node. When on an end node, it does nothing.',
     },
     {
-      keys: ['End'],
-      description: '<span>Moves focus and highlight to the last item.</span>',
+      keys: ['ArrowLeft'],
+      description: 'When focus is on an open <code>TreeItem</code> (node), closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing.',
     },
     {
-      keys: ['Ctrl/Cmd + A'],
-      description: '<span>Select all the items.</span>',
-    }
+      keys: ['Home', 'PageUp'],
+      description: '<span>Moves focus first <code>TreeItem</code></span>',
+    },
+    {
+      keys: ['End', 'PageDown'],
+      description: '<span>Moves focus last <code>TreeItem</code></span>',
+    },
   ]"
 />
diff --git a/docs/content/meta/ComboboxRoot.md b/docs/content/meta/ComboboxRoot.md
index b25e8c2eb..ed10617b8 100644
--- a/docs/content/meta/ComboboxRoot.md
+++ b/docs/content/meta/ComboboxRoot.md
@@ -86,6 +86,12 @@
     'description': '<p>The controlled search term of the Combobox. Can be binded-with with v-model:searchTerm.</p>\n',
     'type': 'string',
     'required': false
+  },
+  {
+    'name': 'selectedValue',
+    'description': '<p>The current highlighted value of the COmbobox. Can be binded-with <code>v-model:selectedValue</code>.</p>\n',
+    'type': 'AcceptableValue',
+    'required': false
   }
 ]" />
 
@@ -104,6 +110,11 @@
     'name': 'update:searchTerm',
     'description': '<p>Event handler called when the searchTerm of the combobox changes.</p>\n',
     'type': '[value: string]'
+  },
+  {
+    'name': 'update:selectedValue',
+    'description': '<p>Event handler called when the highlighted value of the combobox changes</p>\n',
+    'type': '[value: AcceptableValue]'
   }
 ]" />
 
diff --git a/docs/content/meta/ListboxRoot.md b/docs/content/meta/ListboxRoot.md
index 46ca8f927..69149737f 100644
--- a/docs/content/meta/ListboxRoot.md
+++ b/docs/content/meta/ListboxRoot.md
@@ -72,7 +72,7 @@
   {
     'name': 'selectionBehavior',
     'description': '<p>How multiple selection should behave in the collection.</p>\n',
-    'type': '\'toggle\' | \'replace\'',
+    'type': '\'replace\' | \'toggle\'',
     'required': false,
     'default': '\'toggle\''
   }
diff --git a/docs/content/meta/ToggleGroupRoot.md b/docs/content/meta/ToggleGroupRoot.md
index 6cde41ee6..f96c34159 100644
--- a/docs/content/meta/ToggleGroupRoot.md
+++ b/docs/content/meta/ToggleGroupRoot.md
@@ -71,7 +71,7 @@
   {
     'name': 'update:modelValue',
     'description': '<p>Event handler called when the value changes.</p>\n',
-    'type': '[payload: string]'
+    'type': '[payload: string | string[]]'
   }
 ]" />
 
diff --git a/docs/content/meta/ToolbarToggleGroup.md b/docs/content/meta/ToolbarToggleGroup.md
index 62ebc8b2c..589daa2fe 100644
--- a/docs/content/meta/ToolbarToggleGroup.md
+++ b/docs/content/meta/ToolbarToggleGroup.md
@@ -68,6 +68,6 @@
   {
     'name': 'update:modelValue',
     'description': '<p>Event handler called when the value changes.</p>\n',
-    'type': '[payload: string]'
+    'type': '[payload: string | string[]]'
   }
 ]" />
diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
index f024d8cc7..729d102c3 100644
--- a/docs/content/meta/TreeRoot.md
+++ b/docs/content/meta/TreeRoot.md
@@ -6,7 +6,7 @@
     'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
     'type': 'AsTag | Component',
     'required': false,
-    'default': '\'div\''
+    'default': '\'ul\''
   },
   {
     'name': 'asChild',
@@ -77,7 +77,7 @@
   {
     'name': 'selectionBehavior',
     'description': '<p>How multiple selection should behave in the collection.</p>\n',
-    'type': '\'toggle\' | \'replace\'',
+    'type': '\'replace\' | \'toggle\'',
     'required': false,
     'default': '\'toggle\''
   }

From 50a7766dc6100bfb14035a4dfe9e96bb903c1257 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 1 Jul 2024 22:23:27 +0800
Subject: [PATCH 27/27] fix: direction

---
 packages/radix-vue/src/Tree/TreeItem.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
index 7749e0d6f..b8181ca37 100644
--- a/packages/radix-vue/src/Tree/TreeItem.vue
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -170,9 +170,9 @@ defineExpose({
       :data-indent="level"
       :data-selected="isSelected ? '' : undefined"
       :data-expanded="isExpanded ? '' : undefined"
-      @keydown.enter.space.self="handleSelectCustomEvent"
-      @keydown.right.prevent="handleKeydownRight"
-      @keydown.left.prevent="handleKeydownLeft"
+      @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) => {
         handleSelectCustomEvent(ev)
         handleToggleCustomEvent(ev)