fix drop targets in virtualized tree (#8427)

Author: reidbarber

packages/@react-stately/layout/src/ListLayout.ts

@@ -587,6 +587,22 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     if (target.dropPosition === 'before') {
       rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
     } else if (target.dropPosition === 'after') {
+      // Render after last visible descendant of the drop target.
+      let targetNode = this.collection.getItem(target.key);
+      if (targetNode) {
+        let targetLevel = targetNode.level ?? 0;
+        let currentKey = this.collection.getKeyAfter(target.key);
+
+        while (currentKey != null) {
+          let node = this.collection.getItem(currentKey);
+          if (!node || node.level <= targetLevel) {
+            break;
+          }
+
+          layoutInfo = this.getLayoutInfo(currentKey) || layoutInfo;
+          currentKey = this.collection.getKeyAfter(currentKey);
+        }
+      }
       rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
     } else {
       rect = layoutInfo.rect;

packages/react-aria-components/stories/Tree.stories.tsx

@@ -876,3 +876,22 @@ export const TreeWithDragAndDrop = {
     ...TreeExampleDynamic.argTypes
   }
 };
+
+function TreeDragAndDropVirtualizedRender(args) {
+  return (
+    <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
+      <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 30}}>
+        <TreeDragAndDropExample defaultExpandedKeys={['projects', 'reports', 'project-2', 'project-5', 'report-1', 'reports-1', 'reports-1A', 'reports-1AB']} {...args} />
+      </Virtualizer>
+      <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 30}}>
+        <SecondTree {...args} />
+      </Virtualizer>
+    </div>
+  );
+}
+
+export const TreeWithDragAndDropVirtualized = {
+  ...TreeWithDragAndDrop,
+  render: TreeDragAndDropVirtualizedRender,
+  name: 'Tree with drag and drop (virtualized)'
+};