fix(RAC): Tree DnD followup + docs (#8302)

* storybook: fix drop indicator style outside of iframe

* storybook: fix children not moving in drag

* storybook: allow dragging in second tree

* update getDropTargetFromPoint to handle ambiguous drop position: 'after last child' or 'after parent'

* fix serializeItem to handle empty children

* add `position: relative` to the drop indicator row to fix scrolling it into view

* add aria-expanded to TreeDropIndicator row

* fix drop indicator missing level style

* add docs

* fix types

* remove aria-expanded from insertion indicator

* docs types fixes

* If dropping "after" an expanded item with children, change target to be "before" its first actual child item.

* init TreeDropTargetDelegate

* lint

* add comment

* handle currentItem?.nextKey != null

* add TreeDropTargetDelegate to exports and DropHooks

* fixes and cleanup

* cleanup

* fix indention in docs examples

* fix duplicate key dropping

* fix directory example

* up X_SWITCH_THRESHOLD to 10

* add recursive rendering to docs examples

* fix dup keys in DroppableTree

* Add indentation to drop indicator

* Improve docs examples

* Fix insertion indicator indentation when checkboxes and drag buttons are not present

* shorten duplicate item data in examples

* docs types

* fix dropping before first expanded parent

* add isValidDropTarget checks

* handle reorder 'after' expanded parent should not be a target

* Allow dropping after dragged key, but not after one of its children

* Reorder examples

* feat: Ensure that getKeys filters out selected child keys if parent key is selected (#8337)

* Fix tree docs example by accounting for child keys that are included in a selected parent

* update getKeys to automatically filter out child keys if parent key is also selected

* fix infinite loop and add test

* add serializeItem to other examples so children get unique ids

* docs: increase indention between levels

* default to root drop target if there are no potential targets

* allowsDragging should be false if dragging disabled

* add unit tests

* Update packages/react-aria-components/docs/Tree.mdx

Co-authored-by: Devon Govett <[email protected]>

* optimize getKeys to be linear

---------

Co-authored-by: Devon Govett <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

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;