feat: (WIP) Support DnD in S2 collection components by LFDanLu · Pull Request #9791 · adobe/react-spectrum

LFDanLu · 2026-03-13T21:46:48Z

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:

RSP

rspbot · 2026-03-13T21:52:30Z

Build successful! 🎉

rspbot · 2026-03-14T00:18:13Z

Build successful! 🎉

rspbot · 2026-03-16T18:51:16Z

Build successful! 🎉

specifically when items are selected and you are trying to do a root or insertion betwen the selected items

…it doesnt look cut off also does the same for HCM for general row focus

rspbot · 2026-03-24T23:39:52Z

Build successful! 🎉

…pports drag

…x isDraggable

rspbot · 2026-04-01T00:35:13Z

Build successful! 🎉

…n centering

…iew drag button

rspbot · 2026-04-04T00:26:44Z

Build successful! 🎉

rspbot · 2026-04-06T19:53:43Z

Build successful! 🎉

rspbot · 2026-04-06T19:53:45Z

## API Changes

react-aria-components

/react-aria-components:TreeRenderProps

 TreeRenderProps {
   allowsDragging: boolean
+  isDropTarget: boolean
   isEmpty: boolean
   isFocusVisible: boolean
   isFocused: boolean
   selectionMode: SelectionMode
 }

/react-aria-components:TreeEmptyStateRenderProps

 TreeEmptyStateRenderProps {
   allowsDragging: boolean
+  isDropTarget: boolean
   isFocusVisible: boolean
   isFocused: boolean
   selectionMode: SelectionMode
   state: TreeState<unknown>

@react-aria/grid

/@react-aria/grid:GridKeyboardDelegate

 GridKeyboardDelegate <C extends IGridCollection<T>, T> {
   collection: IGridCollection<T>
   constructor: (GridKeyboardDelegateOptions<IGridCollection<T>>) => void
   getFirstKey: (Key, boolean) => Key | null
-  getKeyAbove: (Key) => Key | null
-  getKeyBelow: (Key) => Key | null
+  getKeyAbove: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
+  getKeyBelow: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
   getKeyForSearch: (string, Key) => Key | null
   getKeyLeftOf: (Key) => Key | null
   getKeyPageAbove: (Key) => Key | null
   getKeyPageBelow: (Key) => Key | null
   getLastKey: (Key, boolean) => Key | null
 }

@react-aria/selection

/@react-aria/selection:ListKeyboardDelegate

 ListKeyboardDelegate <T> {
   constructor: (Array<any>) => void
   getFirstKey: () => Key | null
-  getKeyAbove: (Key) => Key | null
-  getKeyBelow: (Key) => Key | null
+  getKeyAbove: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
+  getKeyBelow: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
   getKeyForSearch: (string, Key) => Key | null
-  getKeyLeftOf: (Key) => Key | null
+  getKeyLeftOf: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
   getKeyPageAbove: (Key) => Key | null
   getKeyPageBelow: (Key) => Key | null
-  getKeyRightOf: (Key) => Key | null
+  getKeyRightOf: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
   getLastKey: () => Key | null
-  getNextKey: (Key) => Key | null
-  getPreviousKey: (Key) => Key | null
+  getNextKey: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
+  getPreviousKey: (Key, {
+    includeDisabled?: boolean
+}) => Key | null
 }

/@react-aria/selection:SelectableItemOptions

 SelectableItemOptions {
   allowsDifferentPressOrigin?: boolean
   focus?: () => void
   id?: string
   isDisabled?: boolean
+  isDraggable?: boolean
   isVirtualized?: boolean
   key: Key
   linkBehavior?: 'action' | 'selection' | 'override' | 'none' = 'action'
   onAction?: () => void
   selectionManager: MultipleSelectionManager
   shouldSelectOnPressUp?: boolean
   shouldUseVirtualFocus?: boolean
 }

@react-spectrum/s2

/@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 | FocusStrategy
   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'
   hideLinkOutIcon?: boolean
   id?: string
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@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
+  dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isQuiet?: boolean
   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: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
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@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 | FocusStrategy
   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'
   hideLinkOutIcon?: boolean
   id?: string
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onSelectionChange?: (Selection) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'highlight' | 'checkbox' = '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
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledBehavior?: DisabledBehavior = "all"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
+  dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isQuiet?: boolean
   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: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
+  dragAndDropHooks?: DragAndDropHooks<NoInfer<T>>
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'highlight' | 'checkbox' = 'checkbox'
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ListViewDragPreview

+ListViewDragPreview {
+  children?: ReactNode
+  items: Array<DragItem>
+  overflowMode: ListViewStylesProps['overflowMode']
+}

/@react-spectrum/s2:TableViewDragPreview

+TableViewDragPreview {
+  children?: ReactNode
+  items: Array<DragItem>
+  overflowMode: S2TableProps['overflowMode']
+}

/@react-spectrum/s2:ListViewDragPreviewProps

+ListViewDragPreviewProps {
+  children?: ReactNode
+  items: Array<DragItem>
+  overflowMode: ListViewStylesProps['overflowMode']
+}

/@react-spectrum/s2:TableDragPreviewProps

+TableDragPreviewProps {
+  children?: ReactNode
+  items: Array<DragItem>
+  overflowMode: S2TableProps['overflowMode']
+}

when we had the tree dimensions dictated by the wrapper, there was weird broken behavior when draging over items further down the list. This doesnt happen when the height and what not are applied on the tree itself

LFDanLu · 2026-04-06T23:26:26Z

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

+      <TreeView
+        {...props}
+        styles={style({width: 300, height: 300})}


One thing to look into as a followup is that the mouse drop positioning becomes quite inaccurate when the Tree's height is determined by a wrapping div rather than being set directly on the Tree. That kind of setup is being used by the other tree stories so resizing can be tested, but I could see that also being the case in the wild

LFDanLu added 4 commits March 12, 2026 16:56

add dnd stories, drag preview, drag handle to S2 ListView

39de835

add insertion indicator and debug the on drop styles

0c644da

fix drop target focus styles to avoid shifting and in HCM

c209c73

cleanup, HCM fixes, chromatic tests

f8ce4cd

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

LFDanLu added 2 commits March 13, 2026 14:53

Merge branch 'main' of github.com:adobe/react-spectrum into s2_dnd

95db4a6

fix lint

0766a26

Merge branch 'main' into s2_dnd

873357d

stopping point for table

75e9e2e

github-actions bot added the needs translations label Mar 19, 2026

LFDanLu added 8 commits March 23, 2026 11:57

Merge branch 'main' of github.com:adobe/react-spectrum into s2_dnd

624f941

fix lint, listview drop indicator styling for root and insertion

375ac93

specifically when items are selected and you are trying to do a root or insertion betwen the selected items

export ListViewDragPreview so people can customize it

6573384

table drag preview and zindex update on indicator

6835682

fix drag cell styles but stuck on the visually hidden

9f12eb7

fix visually hidden for drag handle and begin root drop styles

fe479d3

add root drop styling

1b8f434

extend row drop target outline style conditionall in sticky cells so …

a6a22f2

…it doesnt look cut off also does the same for HCM for general row focus

github-actions bot added the RAC label Mar 24, 2026

LFDanLu added 2 commits March 24, 2026 16:07

fix various disabledBehavior cases and add translations

8383fb0

lint

083f4e5

LFDanLu added 4 commits March 31, 2026 11:31

partial fix for first/last drop indicator positioning for S2 ListView

a4f436e

support hover state when item doesnt support selection/actions but su…

c37bcf4

…pports drag

dont skip drop positions before/after a disabled items and fix listbo…

85092ad

…x isDraggable

fix lint

a0e6280

LFDanLu added 5 commits April 2, 2026 16:22

switch over to box shadows for drop target outline and fix drag butto…

b73f7ef

…n centering

update to match latest designs, make Table more consistent with listv…

11c74fc

…iew drag button

Merge branch 'main' of github.com:adobe/react-spectrum into s2_dnd

09daddc

tree view dnd initial progress

464f00c

lint

9bd191d

add proper drop indicator indenting and reorder story

a09386a

LFDanLu added 2 commits April 6, 2026 16:01

add drag between trees and fix issue with drop positions when scrolling

98022f5

when we had the tree dimensions dictated by the wrapper, there was weird broken behavior when draging over items further down the list. This doesnt happen when the height and what not are applied on the tree itself

make story so you can drag in both directions

a1cd427

LFDanLu commented Apr 6, 2026

View reviewed changes

LFDanLu added 2 commits April 6, 2026 16:43

remove some todos after testing

f9eec0f

fix mobile insertion drop indicator heights

cb18f22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: (WIP) Support DnD in S2 collection components#9791

feat: (WIP) Support DnD in S2 collection components#9791
LFDanLu wants to merge 32 commits intomainfrom
s2_dnd

LFDanLu commented Mar 13, 2026

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

rspbot commented Mar 14, 2026

Uh oh!

rspbot commented Mar 16, 2026

Uh oh!

rspbot commented Mar 24, 2026

Uh oh!

rspbot commented Apr 1, 2026

Uh oh!

rspbot commented Apr 4, 2026

Uh oh!

rspbot commented Apr 6, 2026

Uh oh!

rspbot commented Apr 6, 2026

Uh oh!

LFDanLu Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

LFDanLu commented Mar 13, 2026

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Mar 13, 2026

Uh oh!

rspbot commented Mar 14, 2026

Uh oh!

rspbot commented Mar 16, 2026

Uh oh!

rspbot commented Mar 24, 2026

Uh oh!

rspbot commented Apr 1, 2026

Uh oh!

rspbot commented Apr 4, 2026

Uh oh!

rspbot commented Apr 6, 2026

Uh oh!

rspbot commented Apr 6, 2026

react-aria-components

/react-aria-components:TreeRenderProps

/react-aria-components:TreeEmptyStateRenderProps

@react-aria/grid

/@react-aria/grid:GridKeyboardDelegate

@react-aria/selection

/@react-aria/selection:ListKeyboardDelegate

/@react-aria/selection:SelectableItemOptions

@react-spectrum/s2

/@react-spectrum/s2:ListView

/@react-spectrum/s2:TableView

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:ListViewProps

/@react-spectrum/s2:TableViewProps

/@react-spectrum/s2:TreeViewProps

/@react-spectrum/s2:ListViewDragPreview

/@react-spectrum/s2:TableViewDragPreview

/@react-spectrum/s2:ListViewDragPreviewProps

/@react-spectrum/s2:TableDragPreviewProps

Uh oh!

LFDanLu Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants