[WIP] - S2 listview and highlight selection #8878

snowystinger · 2025-09-17T05:53:23Z

Closes

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

# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/@react-spectrum/s2/src/index.ts

rspbot · 2025-09-17T06:05:21Z

Build successful! 🎉

rspbot · 2025-09-18T06:47:42Z

Build successful! 🎉

rspbot · 2025-09-18T07:41:04Z

Build successful! 🎉

rspbot · 2025-09-18T07:57:58Z

Build successful! 🎉

rspbot · 2025-09-19T05:42:18Z

Build successful! 🎉

rspbot · 2025-10-02T00:14:25Z

Build successful! 🎉

rspbot · 2025-10-02T23:04:26Z

Build successful! 🎉

rspbot · 2025-10-21T06:16:19Z

Build successful! 🎉

rspbot · 2025-10-21T06:20:54Z

Build successful! 🎉

rspbot · 2025-10-22T02:14:30Z

Build successful! 🎉

rspbot · 2025-10-22T04:04:09Z

Build successful! 🎉

rspbot · 2025-10-23T05:09:13Z

Build successful! 🎉

rspbot · 2025-10-23T20:14:52Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/s2/src/Picker.tsx # packages/@react-spectrum/s2/src/TableView.tsx

rspbot · 2025-11-05T04:04:48Z

Build successful! 🎉

rspbot · 2025-11-05T04:04:49Z

## API Changes

react-aria-components

/react-aria-components:GridListItemRenderProps

 GridListItemRenderProps {
   allowsDragging?: boolean
   isDisabled: boolean
   isDragging?: boolean
   isDropTarget?: boolean
+  isFirstItem: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
+  isLastItem: boolean
+  isNextSelected: boolean
   isPressed: boolean
+  isPrevSelected: boolean
   isSelected: boolean
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
 }

/react-aria-components:RowRenderProps

 RowRenderProps {
   allowsDragging?: boolean
   id?: Key
   isDisabled: boolean
   isDragging?: boolean
   isDropTarget?: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isHovered: boolean
+  isNextSelected: boolean
   isPressed: boolean
+  isPreviousSelected: boolean
   isSelected: boolean
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
 }

/react-aria-components:TreeItemRenderProps

 TreeItemRenderProps {
   allowsDragging?: boolean
   hasChildItems: boolean
   id: Key
   isDisabled: boolean
   isDragging?: boolean
   isDropTarget?: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isHovered: boolean
   isPressed: boolean
   isSelected: boolean
+  isSelectionDisabled: 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
   isHovered: boolean
   isPressed: boolean
   isSelected: boolean
+  isSelectionDisabled: boolean
   level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   state: TreeState<unknown>

@react-spectrum/s2

/@react-spectrum/s2:TableView

 TableView {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  isEmphasized?: boolean
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   sortDescriptor?: SortDescriptor
   styles?: StylesPropWithHeight

/@react-spectrum/s2:TreeView

 TreeView <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   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>
+  selectionCornerStyle?: 'square' | 'round'
   selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:TableViewProps

 TableViewProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  isEmphasized?: boolean
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   sortDescriptor?: SortDescriptor
   styles?: StylesPropWithHeight

/@react-spectrum/s2:TreeViewProps

 TreeViewProps <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   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>
+  selectionCornerStyle?: 'square' | 'round'
   selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ListView

+ListView <T extends {}> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children: ReactNode | ({}) => ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior = "all"
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  disallowTypeAhead?: boolean = false
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+  escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  highlightMode?: 'normal' | 'inverse'
+  id?: string
+  isEmphasized?: boolean
+  isQuiet?: boolean
+  items?: Iterable<T>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
+  layout?: 'stack' | 'grid' = 'stack'
+  onAction?: (Key) => void
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionBehavior?: SelectionBehavior = "toggle"
+  selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox'
+  shouldSelectOnPressUp?: boolean
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ListViewItem

+ListViewItem {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onClick?: (MouseEvent<FocusableElement>) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+}

/@react-spectrum/s2:TreeViewContext

+TreeViewContext {
+  UNTYPED
+}

/@react-spectrum/s2:ListViewProps

+ListViewProps <T> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children: ReactNode | (T) => ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior = "all"
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  disallowTypeAhead?: boolean = false
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
+  escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  highlightMode?: 'normal' | 'inverse'
+  id?: string
+  isEmphasized?: boolean
+  isQuiet?: boolean
+  items?: Iterable<T>
+  keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
+  layout?: 'stack' | 'grid' = 'stack'
+  onAction?: (Key) => void
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: (GridListRenderProps) => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionBehavior?: SelectionBehavior = "toggle"
+  selectionMode?: SelectionMode
+  selectionStyle?: 'highlight' | 'checkbox'
+  shouldSelectOnPressUp?: boolean
+  slot?: string | null
+  styles?: StylesPropWithHeight
+}

/@react-spectrum/s2:ListViewItemProps

+ListViewItemProps {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  children: ReactNode
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onClick?: (MouseEvent<FocusableElement>) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+}

snowystinger added 4 commits July 3, 2025 18:43

feat: s2 ListView

ecf9415

Merge branch 'main' into s2-listview

a5b53c0

# Conflicts: # packages/@react-spectrum/s2/src/TreeView.tsx # packages/@react-spectrum/s2/src/index.ts

Explore highlight selection

379dac3

fix docs type check

5ee48f9

Add highlight selection option b to table

1dc83e0

Add highlight selection option b to ListView

1d8e8a1

change selection behaviour of table for highlight mode

e62eb1d

add option D as highlightMode

020541a

change font weight to bold for highlight selection

22545f2

update background color

49beedf

snowystinger added 2 commits October 21, 2025 17:07

Start new highlight selection prototypes, ListView and part of TreeView

c07d593

fix lint

e5fc83d

update styles for listview and treeview

f75c75a

tableview

3fb6b67

design updates

637f244

snowystinger added 2 commits October 24, 2025 06:54

fix colors and add disabled items

ccc682e

fix lint

d0ae356

Merge branch 'main' into s2-listview

725dcd6

# Conflicts: # packages/@react-spectrum/s2/src/Picker.tsx # packages/@react-spectrum/s2/src/TableView.tsx

Merge branch 'main' into s2-listview

8014718

[WIP] - S2 listview and highlight selection #8878

Are you sure you want to change the base?

[WIP] - S2 listview and highlight selection #8878

Conversation

snowystinger commented Sep 17, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Sep 17, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 19, 2025

Uh oh!

rspbot commented Oct 2, 2025

Uh oh!

rspbot commented Oct 2, 2025

Uh oh!

rspbot commented Oct 21, 2025

Uh oh!

rspbot commented Oct 21, 2025

Uh oh!

rspbot commented Oct 22, 2025

Uh oh!

rspbot commented Oct 22, 2025

Uh oh!

rspbot commented Oct 23, 2025

Uh oh!

rspbot commented Oct 23, 2025

Uh oh!

rspbot commented Nov 5, 2025

Uh oh!

rspbot commented Nov 5, 2025

react-aria-components

/react-aria-components:GridListItemRenderProps

/react-aria-components:RowRenderProps

/react-aria-components:TreeItemRenderProps

/react-aria-components:TreeItemContentRenderProps

@react-spectrum/s2

/@react-spectrum/s2:TableView

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:TableViewProps

/@react-spectrum/s2:TreeViewProps

/@react-spectrum/s2:ListView

/@react-spectrum/s2:ListViewItem

/@react-spectrum/s2:TreeViewContext

/@react-spectrum/s2:ListViewProps

/@react-spectrum/s2:ListViewItemProps

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants