fix: Virtualized Tree DnD fixes

[reidbarber]

Fixes:

• Before-first-item drop indicator had -1px top positioning, making it hidden. Now we clamp to 0.
• Incorrect 'before' nextKey was being persisted for dnd. We now persist the 'before' the next key that isn't inside the target item.

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

In Tree with drag and drop (virtualized) story, scroll the tree all the way down, then back up. Tab to the first item's drag button and press 'Enter'. The correct drop target should be visible and scrolled to. Previously the collection itself would be showed as focused, and the drop target wouldn't show until manually scrolled into view.

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

## API Changes

react-aria-components

/react-aria-components:GridListLoadMoreItem

-GridListLoadMoreItem <T extends {}> {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:ListBoxLoadMoreItem

-ListBoxLoadMoreItem <T extends {}> {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TableLoadMoreItem

-TableLoadMoreItem <T extends {}> {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TreeLoadMoreItem

-TreeLoadMoreItem <T extends {}> {
-  children?: ReactNode | ((TreeLoadMoreItemRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: StyleOrFunction<TreeLoadMoreItemRenderProps>
-}

/react-aria-components:GridListLoadMoreItemProps

-GridListLoadMoreItemProps {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:ListBoxLoadMoreItemProps

-ListBoxLoadMoreItemProps {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TableLoadMoreItemProps

-TableLoadMoreItemProps {
-  children?: ReactNode
-  className?: string
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: CSSProperties
-}

/react-aria-components:TreeLoadMoreItemProps

-TreeLoadMoreItemProps {
-  children?: ReactNode | ((TreeLoadMoreItemRenderProps & {
-    defaultChildren: ReactNode | undefined
-})) => ReactNode
-  className?: ClassNameOrFunction<TreeLoadMoreItemRenderProps>
-  isLoading?: boolean
-  onLoadMore?: () => any
-  scrollOffset?: number = 1
-  style?: StyleOrFunction<TreeLoadMoreItemRenderProps>
-}

/react-aria-components:TreeLoadMoreItemRenderProps

-TreeLoadMoreItemRenderProps {
-  level: number
-}

/react-aria-components:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate?: DropTargetDelegate
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   isDisabled?: boolean
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
   onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
-  renderDragPreview?: (Array<DragItem>) => JSX.Element | {
-    element: JSX.Element
-  x: number
-  y: number
-}
+  renderDragPreview?: (Array<DragItem>) => JSX.Element
   renderDropIndicator?: (DropTarget, Set<Key>, Key) => JSX.Element
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
 }

/react-aria-components:UNSTABLE_GridListLoadingSentinel

+UNSTABLE_GridListLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

+UNSTABLE_ListBoxLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_TableLoadingSentinel

+UNSTABLE_TableLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_TreeLoadingIndicator

+UNSTABLE_TreeLoadingIndicator <T extends {}> {
+  children?: ChildrenOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
+  className?: ClassNameOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
+  style?: StyleOrFunction<UNSTABLE_TreeLoadingIndicatorRenderProps>
+}

---

@react-aria/dnd

/@react-aria/dnd:DragPreviewProps

 DragPreviewProps {
-  children: (Array<DragItem>) => JSX.Element | {
-    element: JSX.Element
-  x: number
-  y: number
-} | null
+  children: (Array<DragItem>) => JSX.Element | null
 }

/@react-aria/dnd:DragPreview

 DragPreview {
-  children: (Array<DragItem>) => JSX.Element | {
-    element: JSX.Element
-  x: number
-  y: number
-} | null
+  children: (Array<DragItem>) => JSX.Element | null
 }

---

@react-aria/utils

/@react-aria/utils:useLoadMoreSentinel

-useLoadMoreSentinel {
-  props: LoadMoreSentinelProps
-  ref: RefObject<HTMLElement | null>
-  returnVal: undefined
-}

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

+UNSTABLE_useLoadMoreSentinel {
+  props: LoadMoreSentinelProps
+  ref: RefObject<HTMLElement | null>
+  returnVal: undefined
+}

---

@react-spectrum/s2

/@react-spectrum/s2:ComboBoxSection

 ComboBoxSection <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:PickerSection

 PickerSection <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:ComboBoxSectionProps

 ComboBoxSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:MenuSectionProps

 MenuSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

/@react-spectrum/s2:PickerSectionProps

 PickerSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | (T) => ReactElement
+  children?: ReactNode | ({}) => ReactElement
   className?: string
   dependencies?: ReadonlyArray<any>
   id?: Key
-  items?: Iterable<T>
+  items?: Iterable<{}>
   style?: CSSProperties
-  value?: T
+  value?: {}
 }

---