From 76028818356b8bc7ada0f36819fdbafba919e4e9 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Sun, 10 Aug 2025 13:05:35 +0000
Subject: [PATCH 1/2] docs: fix RAC Tree examples

---
 packages/react-aria-components/docs/Tree.mdx | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index ceaadb52dad..82eaaf26403 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -414,14 +414,14 @@ Now we can render a Tree using far less code.
 
 ```tsx example
 <Tree aria-label="Files" style={{height: '300px'}} defaultExpandedKeys={['documents', 'photos', 'project']}>
-  <MyTreeItem title="Documents">
-    <MyTreeItem title="Project">
-      <MyTreeItem title="Weekly Report" />
+  <MyTreeItem id="documents" title="Documents">
+    <MyTreeItem id="project" title="Project">
+      <MyTreeItem id="report" title="Weekly Report" />
     </MyTreeItem>
   </MyTreeItem>
-  <MyTreeItem title="Photos">
-    <MyTreeItem title="Image 1" />
-    <MyTreeItem title="Image 2" />
+  <MyTreeItem id="photos" title="Photos">
+    <MyTreeItem id="one" title="Image 1" />
+    <MyTreeItem id="two" title="Image 2" />
   </MyTreeItem>
 </Tree>
 ```
@@ -437,20 +437,20 @@ import type {TreeProps} from 'react-aria-components';
 import {MyCheckbox} from './Checkbox';
 
 let items = [
-  {id: '1', title: 'Documents', type: 'directory', children: [
-    {id: '2', title: 'Project', type: 'directory', children: [
-      {id: '3', title: 'Weekly Report', type: 'file', children: []},
-      {id: '4', title: 'Budget', type: 'file', children: []}
+  {id: 1, title: 'Documents', type: 'directory', children: [
+    {id: 2, title: 'Project', type: 'directory', children: [
+      {id: 3, title: 'Weekly Report', type: 'file', children: []},
+      {id: 4, title: 'Budget', type: 'file', children: []}
     ]}
   ]},
-  {id: '5', title: 'Photos', type: 'directory', children: [
-    {id: '6', title: 'Image 1', type: 'file', children: []},
-    {id: '7', title: 'Image 2', type: 'file', children: []}
+  {id: 5, title: 'Photos', type: 'directory', children: [
+    {id: 6, title: 'Image 1', type: 'file', children: []},
+    {id: 7, title: 'Image 2', type: 'file', children: []}
   ]}
 ];
 
 interface FileType {
-  id: string,
+  id: number,
   title: string,
   type: 'directory' | 'file',
   children: FileType[]

From 41c197f90a627dfbb31ba77553c60e0293258069 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Sun, 10 Aug 2025 13:49:13 +0000
Subject: [PATCH 2/2] fix

---
 packages/react-aria-components/docs/Tree.mdx | 24 ++++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index 82eaaf26403..a54579ac5bb 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -437,20 +437,20 @@ import type {TreeProps} from 'react-aria-components';
 import {MyCheckbox} from './Checkbox';
 
 let items = [
-  {id: 1, title: 'Documents', type: 'directory', children: [
-    {id: 2, title: 'Project', type: 'directory', children: [
-      {id: 3, title: 'Weekly Report', type: 'file', children: []},
-      {id: 4, title: 'Budget', type: 'file', children: []}
+  {id: '1', title: 'Documents', type: 'directory', children: [
+    {id: '2', title: 'Project', type: 'directory', children: [
+      {id: '3', title: 'Weekly Report', type: 'file', children: []},
+      {id: '4', title: 'Budget', type: 'file', children: []}
     ]}
   ]},
-  {id: 5, title: 'Photos', type: 'directory', children: [
-    {id: 6, title: 'Image 1', type: 'file', children: []},
-    {id: 7, title: 'Image 2', type: 'file', children: []}
+  {id: '5', title: 'Photos', type: 'directory', children: [
+    {id: '6', title: 'Image 1', type: 'file', children: []},
+    {id: '7', title: 'Image 2', type: 'file', children: []}
   ]}
 ];
 
 interface FileType {
-  id: number,
+  id: string,
   title: string,
   type: 'directory' | 'file',
   children: FileType[]
@@ -460,7 +460,7 @@ function FileTree(props: TreeProps<FileType>) {
   return (
     <Tree
       aria-label="Files"
-      defaultExpandedKeys={[1, 4]}
+      defaultExpandedKeys={['1', '4']}
       /*- begin highlight -*/
       items={items}
       /*- end highlight -*/
@@ -506,7 +506,7 @@ A user can click on a different item to change the selection or click on the sam
 
 ```tsx example
 // Using the example above
-<FileTree selectionMode="single" defaultSelectedKeys={[2]} defaultExpandedKeys={[1]} />
+<FileTree selectionMode="single" defaultSelectedKeys={['2']} defaultExpandedKeys={['1']} />
 ```
 
 ### Multiple selection
@@ -515,7 +515,7 @@ Multiple selection can be enabled by setting `selectionMode` to `multiple`.
 
 ```tsx example
 // Using the example above
-<FileTree selectionMode="multiple" defaultSelectedKeys={[2, 4]} defaultExpandedKeys={[1]} />
+<FileTree selectionMode="multiple" defaultSelectedKeys={['2', '4']} defaultExpandedKeys={['1']} />
 ```
 
 ### Disallow empty selection
@@ -525,7 +525,7 @@ In this mode, if a single item is selected and the user presses it, it will not
 
 ```tsx example
 // Using the example above
-<FileTree selectionMode="single" defaultSelectedKeys={[2]} defaultExpandedKeys={[1]} disallowEmptySelection />
+<FileTree selectionMode="single" defaultSelectedKeys={['2']} defaultExpandedKeys={['1']} disallowEmptySelection />
 ```