feat: S2 treeview

[snowystinger]

Closes

This only implements two of the combinations of isDetached/isEmphasized/Checkbox Selection.

• isDetached + checkbox selection or no selection -> seemed mostly clear cut
• isEmphasized + checkbox selection or no selection -> matches table
  The others aren't well defined enough yet to implement.

Virtualization coming soon.

✅ 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]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

## API Changes

react-aria-components

/react-aria-components:TreeItemContentRenderProps

 TreeItemContentRenderProps {
   allowsDragging?: boolean
   hasChildRows: boolean
+  id: Key
   isDisabled: boolean
   isDragging?: boolean
   isDropTarget?: 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-spectrum/s2

/@react-spectrum/s2:TreeView

+TreeView {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | (T) => ReactNode
+  defaultExpandedKeys?: Iterable<Key>
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: Array<any>
+  disabledBehavior?: DisabledBehavior = 'selection'
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  expandedKeys?: Iterable<Key>
+  id?: string
+  isDetached?: boolean
+  isEmphasized?: boolean
+  items?: Iterable<T>
+  onAction?: (Key) => void
+  onExpandedChange?: (Set<Key>) => any
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@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
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+  value?: T
+}

/@react-spectrum/s2:TreeViewProps

+TreeViewProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  children?: ReactNode | (T) => ReactNode
+  defaultExpandedKeys?: Iterable<Key>
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: Array<any>
+  disabledBehavior?: DisabledBehavior = 'selection'
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  expandedKeys?: Iterable<Key>
+  id?: string
+  isDetached?: boolean
+  isEmphasized?: boolean
+  items?: Iterable<T>
+  onAction?: (Key) => void
+  onExpandedChange?: (Set<Key>) => any
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@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
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+  value?: T
+}

---