fix: Revert "feat(RAC): Tree drag and drop (#7692)" (#8243)

* Revert "feat(RAC): Tree drag and drop (#7692)"

This reverts commit e4ec6b4.

* Revert "fix: Tree Dnd updates (#8229)"

This reverts commit 206ebd5.

* lint

* restore useTreeData tests

Author: reidbarber

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

@@ -16,7 +16,7 @@ import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, Dr
 import {getDragModality, getTypes} from './utils';
 import {isVirtualClick, isVirtualPointerEvent} from '@react-aria/utils';
 import type {LocalizedStringFormatter} from '@internationalized/string';
-import {RefObject, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 
 let dropTargets = new Map<Element, DropTarget>();
 let dropItems = new Map<Element, DroppableItem>();
@@ -32,8 +32,7 @@ interface DropTarget {
   onDropTargetEnter?: (target: DroppableCollectionTarget | null) => void,
   onDropActivate?: (e: DropActivateEvent, target: DroppableCollectionTarget | null) => void,
   onDrop?: (e: DropEvent, target: DroppableCollectionTarget | null) => void,
-  onKeyDown?: (e: KeyboardEvent, dragTarget: DragTarget) => void,
-  activateButtonRef?: RefObject<FocusableElement | null>
+  onKeyDown?: (e: KeyboardEvent, dragTarget: DragTarget) => void
 }
 
 export function registerDropTarget(target: DropTarget) {
@@ -48,8 +47,7 @@ export function registerDropTarget(target: DropTarget) {
 interface DroppableItem {
   element: FocusableElement,
   target: DroppableCollectionTarget,
-  getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation,
-  activateButtonRef?: RefObject<FocusableElement | null>
+  getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation
 }
 
 export function registerDropItem(item: DroppableItem) {
@@ -243,26 +241,15 @@ class DragSession {
     this.cancelEvent(e);
 
     if (e.key === 'Enter') {
-      if (e.altKey || this.getCurrentActivateButton()?.contains(e.target as Node)) {
-        this.activate(this.currentDropTarget, this.currentDropItem);
+      if (e.altKey) {
+        this.activate();
       } else {
         this.drop();
       }
     }
   }
 
-  getCurrentActivateButton(): FocusableElement | null {
-    return this.currentDropItem?.activateButtonRef?.current ?? this.currentDropTarget?.activateButtonRef?.current ?? null;
-  }
-
   onFocus(e: FocusEvent) {
-    let activateButton = this.getCurrentActivateButton();
-    if (e.target === activateButton) {
-      // TODO: canceling this breaks the focus ring. Revisit when we support tabbing.
-      this.cancelEvent(e);
-      return;
-    }
-
     // Prevent focus events, except to the original drag target.
     if (e.target !== this.dragTarget.element) {
       this.cancelEvent(e);
@@ -278,9 +265,6 @@ class DragSession {
       this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
 
     if (!dropTarget) {
-      // if (e.target === activateButton) {
-      //   activateButton.focus();
-      // }
       if (this.currentDropTarget) {
         this.currentDropTarget.element.focus();
       } else {
@@ -290,18 +274,10 @@ class DragSession {
     }
 
     let item = dropItems.get(e.target as HTMLElement);
-    if (dropTarget) {
-      this.setCurrentDropTarget(dropTarget, item);
-    }
+    this.setCurrentDropTarget(dropTarget, item);
   }
 
   onBlur(e: FocusEvent) {
-    let activateButton = this.getCurrentActivateButton();
-    if (e.relatedTarget === activateButton) {
-      this.cancelEvent(e);
-      return;
-    }
-
     if (e.target !== this.dragTarget.element) {
       this.cancelEvent(e);
     }
@@ -320,21 +296,14 @@ class DragSession {
   onClick(e: MouseEvent) {
     this.cancelEvent(e);
     if (isVirtualClick(e) || this.isVirtualClick) {
-      let dropElements = dropItems.values();
-      let item = [...dropElements].find(item => item.element === e.target as HTMLElement || item.activateButtonRef?.current?.contains(e.target as HTMLElement));
-      let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
-      let activateButton = item?.activateButtonRef?.current ?? dropTarget?.activateButtonRef?.current;
-      if (activateButton?.contains(e.target as HTMLElement) && dropTarget) {
-        this.activate(dropTarget, item);
-        return;
-      }
-
       if (e.target === this.dragTarget.element) {
         this.cancel();
         return;
       }
 
+      let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
       if (dropTarget) {
+        let item = dropItems.get(e.target as HTMLElement);
         this.setCurrentDropTarget(dropTarget, item);
         this.drop(item);
       }
@@ -350,7 +319,7 @@ class DragSession {
 
   cancelEvent(e: Event) {
     // Allow focusin and focusout on the drag target so focus ring works properly.
-    if ((e.type === 'focusin' || e.type === 'focusout') && (e.target === this.dragTarget?.element || e.target === this.getCurrentActivateButton())) {
+    if ((e.type === 'focusin' || e.type === 'focusout') && e.target === this.dragTarget?.element) {
       return;
     }
 
@@ -406,23 +375,14 @@ class DragSession {
 
     this.restoreAriaHidden = ariaHideOutside([
       this.dragTarget.element,
-      ...validDropItems.flatMap(item => item.activateButtonRef?.current ? [item.element, item.activateButtonRef?.current] : [item.element]),
-      ...visibleDropTargets.flatMap(target => target.activateButtonRef?.current ? [target.element, target.activateButtonRef?.current] : [target.element])
+      ...validDropItems.map(item => item.element),
+      ...visibleDropTargets.map(target => target.element)
     ]);
 
     this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden']});
   }
 
   next() {
-    // TODO: Allow tabbing to the activate button. Revisit once we fix the focus ring.
-    // For now, the activate button is reachable by screen readers and ArrowLeft/ArrowRight
-    // is usable specifically by Tree. Will need tabbing for other components.
-    // let activateButton = this.getCurrentActivateButton();
-    // if (activateButton && document.activeElement !== activateButton) {
-    //   activateButton.focus();
-    //   return;
-    // }
-
     if (!this.currentDropTarget) {
       this.setCurrentDropTarget(this.validDropTargets[0]);
       return;
@@ -449,15 +409,6 @@ class DragSession {
   }
 
   previous() {
-    // let activateButton = this.getCurrentActivateButton();
-    // if (activateButton && document.activeElement === activateButton) {
-    //   let target = this.currentDropItem ?? this.currentDropTarget;
-    //   if (target) {
-    //     target.element.focus();
-    //     return;
-    //   }
-    // }
-
     if (!this.currentDropTarget) {
       this.setCurrentDropTarget(this.validDropTargets[this.validDropTargets.length - 1]);
       return;
@@ -536,6 +487,7 @@ class DragSession {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropTargetEnter === 'function') {
         this.currentDropTarget.onDropTargetEnter(item.target);
       }
+
       item.element.focus();
       this.currentDropItem = item;
 
@@ -624,15 +576,14 @@ class DragSession {
     announce(this.stringFormatter.format('dropComplete'));
   }
 
-  activate(dropTarget: DropTarget | null, dropItem: DroppableItem | null | undefined) {
-    if (dropTarget && typeof dropTarget.onDropActivate === 'function') {
-      let target = dropItem?.target ?? null;
-      let rect = dropTarget.element.getBoundingClientRect();
-      dropTarget.onDropActivate({
+  activate() {
+    if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate === 'function') {
+      let rect = this.currentDropTarget.element.getBoundingClientRect();
+      this.currentDropTarget.onDropActivate({
         type: 'dropactivate',
         x: rect.left + (rect.width / 2),
         y: rect.top + (rect.height / 2)
-      }, target);
+      }, null);
     }
   }
 }

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

@@ -36,6 +36,7 @@ export interface DropOptions {
   /**
    * Handler that is called after a valid drag is held over the drop target for a period of time.
    * This typically opens the item so that the user can drop within it.
+   * @private
    */
   onDropActivate?: (e: DropActivateEvent) => void,
   /** Handler that is called when a valid drag exits the drop target. */

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

@@ -12,7 +12,7 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget, FocusableElement, Key, RefObject} from '@react-types/shared';
+import {DropTarget, Key, RefObject} from '@react-types/shared';
 import {getDroppableCollectionId} from './utils';
 import {HTMLAttributes} from 'react';
 // @ts-ignore
@@ -23,9 +23,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DropIndicatorProps {
   /** The drop target that the drop indicator represents. */
-  target: DropTarget,
-  /** The ref to the activate button. */
-  activateButtonRef?: RefObject<FocusableElement | null>
+  target: DropTarget
 }
 
 export interface DropIndicatorAria {

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

@@ -46,9 +46,7 @@ export interface DroppableCollectionOptions extends DroppableCollectionProps {
   /** A delegate object that implements behavior for keyboard focus movement. */
   keyboardDelegate: KeyboardDelegate,
   /** A delegate object that provides drop targets for pointer coordinates within the collection. */
-  dropTargetDelegate: DropTargetDelegate,
-  /** A custom keyboard event handler for drop targets. */
-  onKeyDown?: (e: KeyboardEvent) => void
+  dropTargetDelegate: DropTargetDelegate
 }
 
 export interface DroppableCollectionResult {
@@ -94,7 +92,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onRootDrop,
       onItemDrop,
       onReorder,
-      onMove,
       acceptedDragTypes = 'all',
       shouldAcceptItemDrop
     } = localState.props;
@@ -140,10 +137,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (onMove && isInternal) {
-          await onMove({keys: draggingKeys, dropOperation, target});
-        }
-
         if (target.dropPosition !== 'on') {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
@@ -208,7 +201,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       autoScroll.stop();
     },
     onDropActivate(e) {
-      if (state.target?.type === 'item' && typeof props.onDropActivate === 'function') {
+      if (state.target?.type === 'item' && state.target?.dropPosition === 'on' && typeof props.onDropActivate === 'function') {
         props.onDropActivate({
           type: 'dropactivate',
           x: e.x, // todo
@@ -595,17 +588,17 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onDropTargetEnter(target) {
         localState.state.setTarget(target);
       },
-      onDropActivate(e, target) {
+      onDropActivate(e) {
         if (
-          target?.type === 'item' &&
-          target?.dropPosition === 'on' &&
+          localState.state.target?.type === 'item' &&
+          localState.state.target?.dropPosition === 'on' &&
           typeof localState.props.onDropActivate === 'function'
         ) {
           localState.props.onDropActivate({
             type: 'dropactivate',
             x: e.x, // todo
             y: e.y,
-            target
+            target: localState.state.target
           });
         }
       },
@@ -755,7 +748,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
-        localState.props.onKeyDown?.(e);
       }
     });
   }, [localState, ref, onDrop, direction]);

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

@@ -12,16 +12,14 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget, FocusableElement, RefObject} from '@react-types/shared';
+import {DropTarget, RefObject} from '@react-types/shared';
 import {getDroppableCollectionRef, getTypes, globalDndState, isInternalDropOperation} from './utils';
 import {HTMLAttributes, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DroppableItemOptions {
   /** The drop target represented by the item. */
-  target: DropTarget,
-  /** The ref to the activate button. */
-  activateButtonRef?: RefObject<FocusableElement | null>
+  target: DropTarget
 }
 
 export interface DroppableItemResult {
@@ -52,11 +50,10 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
             isInternal,
             draggingKeys
           });
-        },
-        activateButtonRef: options.activateButtonRef
+        }
       });
     }
-  }, [ref, options.target, state, droppableCollectionRef, options.activateButtonRef]);
+  }, [ref, options.target, state, droppableCollectionRef]);
 
   let dragSession = DragManager.useDragSession();
   let {draggingKeys} = globalDndState;

packages/@react-stately/data/test/useTreeData.test.js

@@ -920,6 +920,24 @@ describe('useTreeData', function () {
     expect(result.current.items.length).toEqual(2);
   });
 
+  it('should move an item to a different level after the target', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+
+    act(() => {
+      result.current.move('Eli', 'David', 2);
+    });
+    expect(result.current.items[0].key).toEqual('David');
+
+    expect(result.current.items[0].children[0].key).toEqual('John');
+    expect(result.current.items[0].children[1].key).toEqual('Sam');
+    expect(result.current.items[0].children[2].key).toEqual('Eli');
+    expect(result.current.items[1].key).toEqual('Emily');
+    expect(result.current.items.length).toEqual(2);
+  });
+
   it('can move an item multiple times', function () {
     const initialItems = [...initial, {name: 'Eli'}];
 
@@ -1079,24 +1097,6 @@ describe('useTreeData', function () {
     expect(result.current.items[0].children[1].children[2].key).toEqual('project-2B');
   });
 
-  it('should move an item to a different level after the target', function () {
-    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
-    let {result} = renderHook(() =>
-      useTreeData({initialItems, getChildren, getKey})
-    );
-
-    act(() => {
-      result.current.move('Eli', 'David', 2);
-    });
-    expect(result.current.items[0].key).toEqual('David');
-
-    expect(result.current.items[0].children[0].key).toEqual('John');
-    expect(result.current.items[0].children[1].key).toEqual('Sam');
-    expect(result.current.items[0].children[2].key).toEqual('Eli');
-    expect(result.current.items[1].key).toEqual('Emily');
-    expect(result.current.items.length).toEqual(2);
-  });
-
   it('should move an item to a different level at the end when the index is greater than the node list length', function () {
     const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
     let {result} = renderHook(() =>