fix(RAC): Tree DnD followup + docs

packages/@react-aria/dnd/src/ListDropTargetDelegate.ts

@@ -33,7 +33,7 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
   private ref: RefObject<HTMLElement | null>;
   private layout: 'stack' | 'grid';
   private orientation: Orientation;
-  private direction: Direction;
+  protected direction: Direction;
 
   constructor(collection: Iterable<Node<unknown>>, ref: RefObject<HTMLElement | null>, options?: ListDropTargetDelegateOptions) {
     this.collection = collection;

packages/@react-stately/dnd/src/useDraggableCollectionState.ts

@@ -72,15 +72,35 @@ export function useDraggableCollectionState(props: DraggableCollectionStateOptio
   let draggedKey = useRef<Key | null>(null);
   let getKeys = (key: Key) => {
     // The clicked item is always added to the drag. If it is selected, then all of the
-    // other selected items are also dragged. If it is not selected, the only the clicked
+    // other selected items are also dragged. If it is not selected, then only the clicked
     // item is dragged. This matches native macOS behavior.
-    let keys = new Set(
-      selectionManager.isSelected(key)
-        ? new Set([...selectionManager.selectedKeys].filter(key => !!collection.getItem(key)))
-        : []
-    );
+    // Additionally, we filter out any keys that are children of any of the other selected keys
+    let keys = new Set<Key>();
+    if (selectionManager.isSelected(key)) {
+      for (let currentKey of selectionManager.selectedKeys) {
+        let node = collection.getItem(currentKey);
+        if (node) {
+          let isChild = false;
+          let parentKey = node.parentKey;
+          while (parentKey != null) {
+            // eslint-disable-next-line max-depth
+            if (selectionManager.selectedKeys.has(parentKey)) {
+              isChild = true;
+              break;
+            }
+            let parentNode = collection.getItem(parentKey);
+            parentKey = parentNode ? parentNode.parentKey : null;
+          }
+
+          if (!isChild) {
+            keys.add(currentKey);
+          }
+        }
+      }
+    } else {
+      keys.add(key);
+    }
 
-    keys.add(key);
     return keys;
   };
 

packages/@react-stately/dnd/src/useDroppableCollectionState.ts

@@ -72,14 +72,14 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
 
   let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget | null => {
     if (target.dropPosition === 'before') {
-      let key = collection.getKeyBefore(target.key);
-      return key != null && collection.getItem(key)?.level === collection.getItem(target.key)?.level 
-        ? {type: 'item', key, dropPosition: 'after'} 
+      let node = collection.getItem(target.key);
+      return node && node.prevKey != null
+        ? {type: 'item', key: node.prevKey, dropPosition: 'after'} 
         : null;
     } else if (target.dropPosition === 'after') {
-      let key = collection.getKeyAfter(target.key);
-      return key != null && collection.getItem(key)?.level === collection.getItem(target.key)?.level
-        ? {type: 'item', key, dropPosition: 'before'} 
+      let node = collection.getItem(target.key);
+      return node && node.nextKey != null
+        ? {type: 'item', key: node.nextKey, dropPosition: 'before'} 
         : null;
     }
     return null;