docs: RAC Tree docs #7730

snowystinger · 2025-02-06T05:34:43Z

Closes

Modelled on Table docs

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-02-06T05:44:31Z

Build successful! 🎉

rspbot · 2025-02-12T20:26:52Z

Build successful! 🎉

rspbot · 2025-02-13T06:58:23Z

Build successful! 🎉

rspbot · 2025-02-13T07:25:54Z

Build successful! 🎉

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

reidbarber · 2025-02-13T16:29:32Z

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

+
+## Examples
+
+<ExampleList tag="tree" />


Chevron does not pass contrast in light mode. Maybe the background and text color is what should be changed in light mode.

can you provide a screenshot? I'm not noticing anything and axe dev tools isn't showing me anything

the selection highlight color also fails contrast vs the background since there is no checkbox (it's 2.35:1).

Thanks, I believe I've met the contrast requirements now, selection is 3.74:1 and text on selection is now 4.77:1

packages/react-aria-components/docs/examples/file-system.mdx

rspbot · 2025-02-13T20:51:41Z

Build successful! 🎉

rspbot · 2025-02-14T01:19:39Z

Build successful! 🎉

rspbot · 2025-02-14T01:44:31Z

Build successful! 🎉

devongovett

we need to add the card to react-aria/components.mdx and react-spectrum/index.mdx as well

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

devongovett · 2025-02-14T21:39:15Z

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

+
+## Examples
+
+<ExampleList tag="tree" />


the selection highlight color also fails contrast vs the background since there is no checkbox (it's 2.35:1).

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

devongovett · 2025-02-14T22:09:43Z

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

+
+### Hooks
+
+If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useTree](useTree.html) for more details.


Looks like useTree docs don't exist. Should also be useTreeGridList also?

Yeah, this is when I messaged you about how we don't have those docs yet, so I'll work on creating them next. For now I'll just comment this section out

yihuiliao · 2025-02-14T22:32:02Z

packages/@react-spectrum/s2/src/TreeView.tsx

@@ -18,11 +18,11 @@ import {
  Provider,
  TreeItemProps as RACTreeItemProps,
  TreeProps as RACTreeProps,
+  Tree,
+  TreeItem,
+  TreeItemContent,


noticed a couple things in the stories while testing:

~~1. the focus ring doesn't sit on top of the selected item very well when isDetached is true~~ (nvm, seems like it's fixed in virtualizer docs so it all just needs to get merged)

Screen.Recording.2025-02-14.at.2.09.55.PM.mov

the focus ring appears on selection when i use my mouse to click. maybe usePress related and not anything in this PR in particular. also happens in RAC Tree but not in V3 TreeView

Screen.Recording.2025-02-14.at.2.08.16.PM.mov

packages/@react-spectrum/tree/docs/TreeView.mdx

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

rspbot · 2025-02-16T23:20:32Z

Build successful! 🎉

rspbot · 2025-02-17T04:44:18Z

Build successful! 🎉

rspbot · 2025-02-17T07:02:24Z

Build successful! 🎉

rspbot · 2025-02-17T07:22:59Z

Build successful! 🎉

rspbot · 2025-02-19T00:38:54Z

Build successful! 🎉

This reverts commit e6bd506.

rspbot · 2025-02-19T06:54:50Z

Build successful! 🎉

rspbot · 2025-02-19T19:27:12Z

Build successful! 🎉

rspbot · 2025-02-19T20:54:12Z

Build successful! 🎉

This reverts commit 2bbff1e.

snowystinger · 2025-02-19T22:44:25Z

Starters in verdaccio build, see 0da9de6#comments

rspbot · 2025-02-19T22:55:16Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/react-aria-components/stories/Tree.stories.tsx # packages/react-aria-components/test/Tree.test.tsx

rspbot · 2025-02-20T02:39:35Z

Build successful! 🎉

rspbot · 2025-02-20T02:39:37Z

## API Changes

react-aria-components

/react-aria-components:UNSTABLE_TreeLoadingIndicator

-UNSTABLE_TreeLoadingIndicator <T extends {}> {
-  children?: ReactNode | ((TreeLoadingIndicatorRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: string | ((TreeLoadingIndicatorRenderProps & {
-    defaultClassName: string | undefined
-})) => string
-  style?: CSSProperties | ((TreeLoadingIndicatorRenderProps & {
-    defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}

/react-aria-components:UNSTABLE_Tree

-UNSTABLE_Tree <T extends {}> {
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
-  autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | ({}) => ReactNode
-  className?: string | ((TreeRenderProps & {
-    defaultClassName: string | undefined
-})) => string
-  defaultExpandedKeys?: Iterable<Key>
-  defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
-  disabledBehavior?: DisabledBehavior = 'all'
-  disabledKeys?: Iterable<Key>
-  disallowEmptySelection?: boolean
-  expandedKeys?: Iterable<Key>
-  id?: string
-  items?: Iterable<T>
-  onAction?: (Key) => void
-  onExpandedChange?: (Set<Key>) => any
-  onScroll?: (UIEvent<Element>) => void
-  onSelectionChange?: (Selection) => void
-  renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionBehavior?: SelectionBehavior
-  selectionMode?: SelectionMode
-  slot?: string | null
-  style?: CSSProperties | ((TreeRenderProps & {
-    defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-}

/react-aria-components:UNSTABLE_TreeItem

-UNSTABLE_TreeItem <T extends {}> {
-  aria-label?: string
-  children: ReactNode
-  className?: string | ((TreeItemRenderProps & {
-    defaultClassName: string | undefined
-})) => string
-  download?: boolean | string
-  hasChildItems?: boolean
-  href?: Href
-  hrefLang?: string
-  id?: Key
-  onHoverChange?: (boolean) => void
-  onHoverEnd?: (HoverEvent) => void
-  onHoverStart?: (HoverEvent) => void
-  ping?: string
-  referrerPolicy?: HTMLAttributeReferrerPolicy
-  rel?: string
-  routerOptions?: RouterOptions
-  style?: CSSProperties | ((TreeItemRenderProps & {
-    defaultStyle: CSSProperties
-})) => CSSProperties | undefined
-  target?: HTMLAttributeAnchorTarget
-  textValue: string
-  value?: {}
-}

/react-aria-components:UNSTABLE_TreeContext

-UNSTABLE_TreeContext {
-  UNTYPED
-}

/react-aria-components:UNSTABLE_TreeItemContent

-UNSTABLE_TreeItemContent {
-  children?: ReactNode | ((T & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-}

/react-aria-components:UNSTABLE_TreeStateContext

-UNSTABLE_TreeStateContext {
-  UNTYPED
-}

/react-aria-components:TreeItemProps

 TreeItemProps <T = {}> {
   aria-label?: string
   children: ReactNode
   className?: string | ((TreeItemRenderProps & {
     defaultClassName: string | undefined
 })) => string
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((TreeItemRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue: string
   value?: T
 }

/react-aria-components:TreeItemRenderProps

 TreeItemRenderProps {
+  hasChildItems: boolean
+  id: Key
   isDisabled: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isHovered: boolean
   isPressed: boolean
   isSelected: boolean
+  level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
+  state: TreeState<unknown>
 }

/react-aria-components:TreeItemContentRenderProps

 TreeItemContentRenderProps {
-  allowsDragging?: boolean
   hasChildItems: boolean
   id: Key
   isDisabled: boolean
-  isDragging?: boolean
-  isDropTarget?: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isPressed: boolean
   isSelected: boolean
   level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   state: TreeState<unknown>
 }

/react-aria-components:TreeLoadingIndicator

+TreeLoadingIndicator <T extends {}> {
+  children?: ReactNode | ((TreeLoadingIndicatorRenderProps & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+  className?: string | ((TreeLoadingIndicatorRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  style?: CSSProperties | ((TreeLoadingIndicatorRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:Tree

+Tree <T extends {}> {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children?: ReactNode | ({}) => ReactNode
+  className?: string | ((TreeRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  defaultExpandedKeys?: Iterable<Key>
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior = 'all'
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  expandedKeys?: Iterable<Key>
+  id?: string
+  items?: Iterable<T>
+  onAction?: (Key) => void
+  onExpandedChange?: (Set<Key>) => any
+  onScroll?: (UIEvent<Element>) => void
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionBehavior?: SelectionBehavior
+  selectionMode?: SelectionMode
+  slot?: string | null
+  style?: CSSProperties | ((TreeRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+}

/react-aria-components:TreeItem

+TreeItem <T extends {}> {
+  aria-label?: string
+  children: ReactNode
+  className?: string | ((TreeItemRenderProps & {
+    defaultClassName: string | undefined
+})) => string
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  style?: CSSProperties | ((TreeItemRenderProps & {
+    defaultStyle: CSSProperties
+})) => CSSProperties | undefined
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+  value?: {}
+}

/react-aria-components:TreeContext

+TreeContext {
+  UNTYPED
+}

/react-aria-components:TreeItemContent

+TreeItemContent {
+  children?: ReactNode | ((T & {
+    defaultChildren: ReactNode | undefined
+})) => ReactNode
+}

/react-aria-components:TreeStateContext

+TreeStateContext {
+  UNTYPED
+}

@react-spectrum/s2

/@react-spectrum/s2:TreeViewItem

 TreeViewItem <T extends {}> {
   aria-label?: string
   childItems?: Iterable<{}>
   children: ReactNode
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   rel?: string
   routerOptions?: RouterOptions
   target?: HTMLAttributeAnchorTarget
   textValue: string
   value?: T
 }

/@react-spectrum/s2:TreeItemContent

-TreeItemContent {
-
-}

/@react-spectrum/s2:TreeViewItemProps

 TreeViewItemProps <T extends {} = {}> {
   aria-label?: string
   childItems?: Iterable<{}>
   children: ReactNode
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   rel?: string
   routerOptions?: RouterOptions
   target?: HTMLAttributeAnchorTarget
   textValue: string
   value?: T
 }

/@react-spectrum/s2:TreeViewItemContent

+TreeViewItemContent {
+
+}

@react-spectrum/tree

/@react-spectrum/tree:TreeViewItem

 TreeViewItem <T extends {}> {
   aria-label?: string
   childItems?: Iterable<{}>
   children: ReactNode
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   textValue: string
 }

/@react-spectrum/tree:TreeItemContent

-TreeItemContent {
-
-}

/@react-spectrum/tree:SpectrumTreeViewItemProps

 SpectrumTreeViewItemProps <T extends {} = {}> {
   aria-label?: string
   childItems?: Iterable<{}>
   children: ReactNode
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   textValue: string
 }

/@react-spectrum/tree:TreeViewItemContent

+TreeViewItemContent {
+
+}

docs: RAC Tree docs

e97bce1

Merge branch 'main' into rac-tree-docs

bdb952a

Finish docs page for RAC Tree

33b284a

fix all the types

bda733d

make some styles nicer

3c05b29

snowystinger changed the title ~~[WIP]: docs: RAC Tree docs~~ docs: RAC Tree docs Feb 13, 2025

snowystinger marked this pull request as ready for review February 13, 2025 07:30

snowystinger added the in sprint label Feb 13, 2025

reidbarber requested changes Feb 13, 2025

View reviewed changes

devongovett added the release label Feb 13, 2025

remove unstable, add anatomy

604efb8

Add little svg

5883d9c

devongovett reviewed Feb 14, 2025

View reviewed changes

yihuiliao reviewed Feb 14, 2025

View reviewed changes

remove beta tag and add example card

6fe5ca8

fix example contrast problems

76bf5f4

review updates

0e5d825

formatting and reusing code

ef4f530

Merge branch 'main' into rac-tree-docs

6c3a2d2

snowystinger and others added 4 commits February 19, 2025 15:38

turn on verdaccio

e6bd506

turn on starterkits

d181779

Merge branch 'main' into rac-tree-docs

028cebc

Revert "turn on verdaccio"

04d50d3

This reverts commit e6bd506.

devongovett added 2 commits February 19, 2025 11:12

Make arrow in anatomy diagram closer to checkbox

88303ff

formatting

f2a8f3e

Add Tree to vanilla starters

f5aa5f6

snowystinger added 3 commits February 20, 2025 08:01

Turn on verdaccio again

2bbff1e

fix types

0da9de6

Revert "Turn on verdaccio again"

fa29995

This reverts commit 2bbff1e.

devongovett previously approved these changes Feb 20, 2025

View reviewed changes

reidbarber previously approved these changes Feb 20, 2025

View reviewed changes

Merge branch 'main' into rac-tree-docs

e6e088e

# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/react-aria-components/stories/Tree.stories.tsx # packages/react-aria-components/test/Tree.test.tsx

snowystinger dismissed stale reviews from reidbarber and devongovett via e6e088e February 20, 2025 02:11

fix lint

cae78f4

devongovett approved these changes Feb 20, 2025

View reviewed changes

reidbarber approved these changes Feb 20, 2025

View reviewed changes

snowystinger added this pull request to the merge queue Feb 20, 2025

Merged via the queue into main with commit 90bc6c0 Feb 20, 2025
30 checks passed

snowystinger deleted the rac-tree-docs branch February 20, 2025 03:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: RAC Tree docs #7730

docs: RAC Tree docs #7730

snowystinger commented Feb 6, 2025

rspbot commented Feb 6, 2025

rspbot commented Feb 12, 2025

rspbot commented Feb 13, 2025

rspbot commented Feb 13, 2025

reidbarber Feb 13, 2025

snowystinger Feb 14, 2025

reidbarber Feb 14, 2025

devongovett Feb 14, 2025

snowystinger Feb 17, 2025

rspbot commented Feb 13, 2025

rspbot commented Feb 14, 2025

rspbot commented Feb 14, 2025

devongovett left a comment

devongovett Feb 14, 2025

devongovett Feb 14, 2025

snowystinger Feb 17, 2025

yihuiliao Feb 14, 2025 •

edited

Loading

rspbot commented Feb 16, 2025

rspbot commented Feb 17, 2025

rspbot commented Feb 17, 2025

rspbot commented Feb 17, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 19, 2025

snowystinger commented Feb 19, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 20, 2025

rspbot commented Feb 20, 2025


		### Hooks

		If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useTree](useTree.html) for more details.

docs: RAC Tree docs #7730

docs: RAC Tree docs #7730

Conversation

snowystinger commented Feb 6, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Feb 6, 2025

rspbot commented Feb 12, 2025

rspbot commented Feb 13, 2025

rspbot commented Feb 13, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Feb 13, 2025

rspbot commented Feb 14, 2025

rspbot commented Feb 14, 2025

devongovett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yihuiliao Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

rspbot commented Feb 16, 2025

rspbot commented Feb 17, 2025

rspbot commented Feb 17, 2025

rspbot commented Feb 17, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 19, 2025

snowystinger commented Feb 19, 2025

rspbot commented Feb 19, 2025

rspbot commented Feb 20, 2025

rspbot commented Feb 20, 2025

react-aria-components

/react-aria-components:UNSTABLE_TreeLoadingIndicator

/react-aria-components:UNSTABLE_Tree

/react-aria-components:UNSTABLE_TreeItem

/react-aria-components:UNSTABLE_TreeContext

/react-aria-components:UNSTABLE_TreeItemContent

/react-aria-components:UNSTABLE_TreeStateContext

/react-aria-components:TreeItemProps

/react-aria-components:TreeItemRenderProps

/react-aria-components:TreeItemContentRenderProps

/react-aria-components:TreeLoadingIndicator

/react-aria-components:Tree

/react-aria-components:TreeItem

/react-aria-components:TreeContext

/react-aria-components:TreeItemContent

/react-aria-components:TreeStateContext

@react-spectrum/s2

/@react-spectrum/s2:TreeViewItem

/@react-spectrum/s2:TreeItemContent

/@react-spectrum/s2:TreeViewItemProps

/@react-spectrum/s2:TreeViewItemContent

@react-spectrum/tree

/@react-spectrum/tree:TreeViewItem

/@react-spectrum/tree:TreeItemContent

/@react-spectrum/tree:SpectrumTreeViewItemProps

/@react-spectrum/tree:TreeViewItemContent

yihuiliao Feb 14, 2025 •

edited

Loading