feat: S2 ListView HCM by snowystinger · Pull Request #9760 · adobe/react-spectrum

snowystinger · 2026-03-09T00:53:25Z

Closes
Adds HCM support to S2 ListView. Also fixes some other HCM bugs I found while testing.

Found in testing.
Both Chromatic runs are green.

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

snowystinger · 2026-03-09T00:58:40Z

packages/@react-spectrum/s2/style/__tests__/style-macro.test.js

    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12 -macro-dynamic-37zkvn"');
  });

+  it('inherits parent default when nested branch has no default key', () => {


How do people feel about changing the style macro to support inheriting the nearest default? I think it makes more sense and I've continually forgotten about it.

rspbot · 2026-03-09T01:04:05Z

Build successful! 🎉

rspbot · 2026-03-09T01:33:26Z

Build successful! 🎉

rspbot · 2026-03-09T03:37:03Z

Build successful! 🎉

rspbot · 2026-03-09T03:55:04Z

Build successful! 🎉

snowystinger · 2026-03-09T03:55:41Z

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

+}>({
  ...focusRing(),
-  outlineOffset: -2,
+  outlineOffset: {


do we like this "style" in HCM? or is it not clear enough?

reidbarber · 2026-03-09T14:40:47Z

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

-      default: 'disabled',
-      forcedColors: 'GrayText'
+    isDisabled: 'disabled',
+    forcedColors: {


Should the description text styles match the label text styles?

done

rspbot · 2026-03-10T14:36:45Z

Build successful! 🎉

rspbot · 2026-03-10T14:36:46Z

## API Changes

react-aria-components

/react-aria-components:Table

 Table {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: ClassNameOrFunction<TableRenderProps> = 'react-aria-Table'
-  defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
-  expandedKeys?: Iterable<Key>
-  onExpandedChange?: (Set<Key>) => any
   onRowAction?: (Key) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TableRenderProps>
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   sortDescriptor?: SortDescriptor
   style?: StyleOrFunction<TableRenderProps>
-  treeColumn?: Key
 }

/react-aria-components:Row

 Row <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
   columns?: Iterable<{}>
   dependencies?: ReadonlyArray<any>
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RowRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<RowRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:TableProps

 TableProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: ClassNameOrFunction<TableRenderProps> = 'react-aria-Table'
-  defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
-  expandedKeys?: Iterable<Key>
-  onExpandedChange?: (Set<Key>) => any
   onRowAction?: (Key) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, TableRenderProps>
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   sortDescriptor?: SortDescriptor
   style?: StyleOrFunction<TableRenderProps>
-  treeColumn?: Key
 }

/react-aria-components:RowProps

 RowProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
   columns?: Iterable<T>
   dependencies?: ReadonlyArray<any>
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   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
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RowRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<RowRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:RowRenderProps

 RowRenderProps {
   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
-  level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
 }

/react-aria-components:CellRenderProps

 CellRenderProps {
   columnIndex?: number | null
-  hasChildItems: boolean
   id?: Key
-  isDisabled: boolean
-  isExpanded: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
   isPressed: boolean
   isSelected: boolean
-  isTreeColumn: boolean
-  level: number
 }

/react-aria-components:TableState

 TableState <T> {
   collection: TableCollection<T>
   disabledKeys: Set<Key>
-  expandedKeys: Set<Key>
   isKeyboardNavigationDisabled: boolean
   selectionManager: SelectionManager
   setKeyboardNavigationDisabled: (boolean) => void
   showSelectionCheckboxes: boolean
   sort: (Key, 'ascending' | 'descending') => void
   sortDescriptor: SortDescriptor | null
-  toggleKey: (Key) => void
-  treeColumn: Key | null
 }

@react-aria/test-utils

/@react-aria/test-utils:TableTester

 TableTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
   columns: Array<HTMLElement>
   constructor: (TableTesterOpts) => void
   findCell: ({
     text: string
 }) => HTMLElement
   findRow: ({
     rowIndexOrText: number | string
 }) => HTMLElement
   rowGroups: Array<HTMLElement>
   rowHeaders: Array<HTMLElement>
   rows: Array<HTMLElement>
   selectedRows: Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   table: HTMLElement
-  toggleRowExpansion: (TableToggleExpansionOpts) => Promise<void>
   toggleRowSelection: (TableToggleRowOpts) => Promise<void>
   toggleSelectAll: ({
     interactionType?: UserOpts['interactionType']
 }) => Promise<void>
   triggerColumnHeaderAction: (TableColumnHeaderActionOpts) => Promise<void>
   triggerRowAction: (TableRowActionOpts) => Promise<void>
 }

@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
-  defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
-  expandedKeys?: Iterable<Key>
   id?: string
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
-  onExpandedChange?: (Set<Key>) => any
   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
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   sortDescriptor?: SortDescriptor
   styles?: StylesPropWithHeight
-  treeColumn?: Key
 }

/@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
-  defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
-  expandedKeys?: Iterable<Key>
   id?: string
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
-  onExpandedChange?: (Set<Key>) => any
   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
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   sortDescriptor?: SortDescriptor
   styles?: StylesPropWithHeight
-  treeColumn?: Key
 }

@react-spectrum/table

/@react-spectrum/table:TableView

 TableView <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
-  children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>]
+  children: [ReactElement<TableHeaderProps<{}>>, ReactElement<TableBodyProps<{}>>]
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   disabledBehavior?: DisabledBehavior = "selection"
   disabledKeys?: Iterable<Key>
   dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>['dragAndDropHooks']
   end?: Responsive<DimensionValue>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isHidden?: Responsive<boolean>
   isQuiet?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onAction?: (Key) => void
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   order?: Responsive<number>
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   renderEmptyState?: () => JSX.Element
   right?: Responsive<DimensionValue>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight'
   shouldSelectOnPressUp?: boolean
   sortDescriptor?: SortDescriptor
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/test-utils

/@react-spectrum/test-utils:TableTester

 TableTester {
   cells: ({
     element?: HTMLElement
 }) => Array<HTMLElement>
   columns: Array<HTMLElement>
   constructor: (TableTesterOpts) => void
   findCell: ({
     text: string
 }) => HTMLElement
   findRow: ({
     rowIndexOrText: number | string
 }) => HTMLElement
   rowGroups: Array<HTMLElement>
   rowHeaders: Array<HTMLElement>
   rows: Array<HTMLElement>
   selectedRows: Array<HTMLElement>
   setInteractionType: (UserOpts['interactionType']) => void
   table: HTMLElement
-  toggleRowExpansion: (TableToggleExpansionOpts) => Promise<void>
   toggleRowSelection: (TableToggleRowOpts) => Promise<void>
   toggleSelectAll: ({
     interactionType?: UserOpts['interactionType']
 }) => Promise<void>
   triggerColumnHeaderAction: (TableColumnHeaderActionOpts) => Promise<void>
   triggerRowAction: (TableRowActionOpts) => Promise<void>
 }

@react-stately/table

/@react-stately/table:TableState

 TableState <T> {
   collection: TableCollection<T>
   disabledKeys: Set<Key>
-  expandedKeys: Set<Key>
   isKeyboardNavigationDisabled: boolean
   selectionManager: SelectionManager
   setKeyboardNavigationDisabled: (boolean) => void
   showSelectionCheckboxes: boolean
   sort: (Key, 'ascending' | 'descending') => void
   sortDescriptor: SortDescriptor | null
-  toggleKey: (Key) => void
-  treeColumn: Key | null
 }

/@react-stately/table:TableStateProps

 TableStateProps <T> {
   allowDuplicateSelectionEvents?: boolean
   children?: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>]
   collection?: TableCollection<T>
-  defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  expandedKeys?: Iterable<Key>
-  onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   showSelectionCheckboxes?: boolean
   sortDescriptor?: SortDescriptor
-  treeColumn?: Key
 }

/@react-stately/table:TreeGridState

 TreeGridState <T> {
   collection: TableCollection<T>
   disabledKeys: Set<Key>
   expandedKeys: 'all' | Set<Key>
   isKeyboardNavigationDisabled: boolean
   keyMap: Map<Key, GridNode<T>>
   selectionManager: SelectionManager
   setKeyboardNavigationDisabled: (boolean) => void
   showSelectionCheckboxes: boolean
   sort: (Key, 'ascending' | 'descending') => void
   sortDescriptor: SortDescriptor | null
   toggleKey: (Key) => void
-  treeColumn: Key | null
   userColumnCount: number
 }

/@react-stately/table:TreeGridStateProps

 TreeGridStateProps <T> {
   UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>
   UNSTABLE_expandedKeys?: 'all' | Iterable<Key>
   UNSTABLE_onExpandedChange?: (Set<Key>) => any
   allowDuplicateSelectionEvents?: boolean
   children?: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>]
-  defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  expandedKeys?: Iterable<Key>
-  onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   showSelectionCheckboxes?: boolean
   sortDescriptor?: SortDescriptor
-  treeColumn?: Key
 }

feat: S2 ListView HCM

866c574

github-actions bot added the S2 label Mar 9, 2026

fix lint

242dfbf

snowystinger commented Mar 9, 2026

View reviewed changes

snowystinger added 2 commits March 9, 2026 12:18

Fix pre-existing issue in Menu

134701d

Fix typescript

8415194

snowystinger added 2 commits March 9, 2026 14:06

fix Section headers

9c97841

fix bad description color

4bdb3ad

snowystinger added 2 commits March 9, 2026 14:40

more intuitive control for font color of description

a98458f

dont' forget menu

0d42e3b

snowystinger added the ready for review label Mar 9, 2026

snowystinger commented Mar 9, 2026

View reviewed changes

reidbarber previously requested changes Mar 9, 2026

View reviewed changes

fix description in ListView HCM

08bd38a

reidbarber approved these changes Mar 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: S2 ListView HCM#9760

feat: S2 ListView HCM#9760
snowystinger wants to merge 9 commits intomainfrom
s2-listview-hcm

snowystinger commented Mar 9, 2026 •

edited

Loading

Uh oh!

snowystinger Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

snowystinger Mar 9, 2026

Uh oh!

reidbarber Mar 9, 2026

Uh oh!

rspbot commented Mar 10, 2026

Uh oh!

rspbot commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

snowystinger commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

snowystinger Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

rspbot commented Mar 9, 2026

Uh oh!

snowystinger Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

reidbarber Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

rspbot commented Mar 10, 2026

Uh oh!

rspbot commented Mar 10, 2026

react-aria-components

/react-aria-components:Table

/react-aria-components:Row

/react-aria-components:TableProps

/react-aria-components:RowProps

/react-aria-components:RowRenderProps

/react-aria-components:CellRenderProps

/react-aria-components:TableState

@react-aria/test-utils

/@react-aria/test-utils:TableTester

@react-spectrum/s2

/@react-spectrum/s2:TableView

/@react-spectrum/s2:TableViewProps

@react-spectrum/table

/@react-spectrum/table:TableView

@react-spectrum/test-utils

/@react-spectrum/test-utils:TableTester

@react-stately/table

/@react-stately/table:TableState

/@react-stately/table:TableStateProps

/@react-stately/table:TreeGridState

/@react-stately/table:TreeGridStateProps

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

snowystinger commented Mar 9, 2026 •

edited

Loading