Skip to content

docs: fix RAC Tree examples #8698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: fix RAC Tree examples #8698

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7602881
docs: fix RAC Tree examples
chirokas Aug 10, 2025
41c197f
fix
chirokas Aug 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions packages/react-aria-components/docs/Tree.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
Expand Down Expand Up @@ -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 -*/
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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 />
```


Expand Down