Skip to content

Commit e629b52

Browse files
authored
docs: fix RAC Tree examples (#8698)
* docs: fix RAC Tree examples * fix
1 parent afcf1e9 commit e629b52

File tree

1 file changed

+10
-10
lines changed
  • packages/react-aria-components/docs

1 file changed

+10
-10
lines changed

packages/react-aria-components/docs/Tree.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -414,14 +414,14 @@ Now we can render a Tree using far less code.
414414

415415
```tsx example
416416
<Tree aria-label="Files" style={{height: '300px'}} defaultExpandedKeys={['documents', 'photos', 'project']}>
417-
<MyTreeItem title="Documents">
418-
<MyTreeItem title="Project">
419-
<MyTreeItem title="Weekly Report" />
417+
<MyTreeItem id="documents" title="Documents">
418+
<MyTreeItem id="project" title="Project">
419+
<MyTreeItem id="report" title="Weekly Report" />
420420
</MyTreeItem>
421421
</MyTreeItem>
422-
<MyTreeItem title="Photos">
423-
<MyTreeItem title="Image 1" />
424-
<MyTreeItem title="Image 2" />
422+
<MyTreeItem id="photos" title="Photos">
423+
<MyTreeItem id="one" title="Image 1" />
424+
<MyTreeItem id="two" title="Image 2" />
425425
</MyTreeItem>
426426
</Tree>
427427
```
@@ -460,7 +460,7 @@ function FileTree(props: TreeProps<FileType>) {
460460
return (
461461
<Tree
462462
aria-label="Files"
463-
defaultExpandedKeys={[1, 4]}
463+
defaultExpandedKeys={['1', '4']}
464464
/*- begin highlight -*/
465465
items={items}
466466
/*- end highlight -*/
@@ -506,7 +506,7 @@ A user can click on a different item to change the selection or click on the sam
506506

507507
```tsx example
508508
// Using the example above
509-
<FileTree selectionMode="single" defaultSelectedKeys={[2]} defaultExpandedKeys={[1]} />
509+
<FileTree selectionMode="single" defaultSelectedKeys={['2']} defaultExpandedKeys={['1']} />
510510
```
511511

512512
### Multiple selection
@@ -515,7 +515,7 @@ Multiple selection can be enabled by setting `selectionMode` to `multiple`.
515515

516516
```tsx example
517517
// Using the example above
518-
<FileTree selectionMode="multiple" defaultSelectedKeys={[2, 4]} defaultExpandedKeys={[1]} />
518+
<FileTree selectionMode="multiple" defaultSelectedKeys={['2', '4']} defaultExpandedKeys={['1']} />
519519
```
520520

521521
### Disallow empty selection
@@ -525,7 +525,7 @@ In this mode, if a single item is selected and the user presses it, it will not
525525

526526
```tsx example
527527
// Using the example above
528-
<FileTree selectionMode="single" defaultSelectedKeys={[2]} defaultExpandedKeys={[1]} disallowEmptySelection />
528+
<FileTree selectionMode="single" defaultSelectedKeys={['2']} defaultExpandedKeys={['1']} disallowEmptySelection />
529529
```
530530

531531

0 commit comments

Comments
 (0)