fix: Tree Dnd updates (#8229)

* Add onMove event and fix drop indicator a11y

* use expand button as activate button

* lint

* fix onClick to check if event is within activateButton

* add contains check to onKeyUp

* Fix android talkback expand row when dragging

* fix lint

* fix item check in onClick to use contains

* readd missing logic

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: 3 people

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 {useEffect, useState} from 'react';
+import {RefObject, useEffect, useState} from 'react';
 
 let dropTargets = new Map<Element, DropTarget>();
 let dropItems = new Map<Element, DroppableItem>();
@@ -32,7 +32,8 @@ 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
+  onKeyDown?: (e: KeyboardEvent, dragTarget: DragTarget) => void,
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export function registerDropTarget(target: DropTarget) {
@@ -47,7 +48,8 @@ export function registerDropTarget(target: DropTarget) {
 interface DroppableItem {
   element: FocusableElement,
   target: DroppableCollectionTarget,
-  getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation
+  getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation,
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export function registerDropItem(item: DroppableItem) {
@@ -241,15 +243,26 @@ class DragSession {
     this.cancelEvent(e);
 
     if (e.key === 'Enter') {
-      if (e.altKey) {
-        this.activate();
+      if (e.altKey || this.getCurrentActivateButton()?.contains(e.target as Node)) {
+        this.activate(this.currentDropTarget, this.currentDropItem);
       } 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);
@@ -265,6 +278,9 @@ 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 {
@@ -274,10 +290,18 @@ class DragSession {
     }
 
     let item = dropItems.get(e.target as HTMLElement);
-    this.setCurrentDropTarget(dropTarget, item);
+    if (dropTarget) {
+      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);
     }
@@ -296,14 +320,21 @@ 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);
       }
@@ -319,7 +350,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) {
+    if ((e.type === 'focusin' || e.type === 'focusout') && (e.target === this.dragTarget?.element || e.target === this.getCurrentActivateButton())) {
       return;
     }
 
@@ -375,14 +406,23 @@ class DragSession {
 
     this.restoreAriaHidden = ariaHideOutside([
       this.dragTarget.element,
-      ...validDropItems.map(item => item.element),
-      ...visibleDropTargets.map(target => target.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])
     ]);
 
     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;
@@ -409,6 +449,15 @@ 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;
@@ -487,7 +536,6 @@ class DragSession {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropTargetEnter === 'function') {
         this.currentDropTarget.onDropTargetEnter(item.target);
       }
-
       item.element.focus();
       this.currentDropItem = item;
 
@@ -576,14 +624,15 @@ class DragSession {
     announce(this.stringFormatter.format('dropComplete'));
   }
 
-  activate() {
-    if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate === 'function') {
-      let rect = this.currentDropTarget.element.getBoundingClientRect();
-      this.currentDropTarget.onDropActivate({
+  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({
         type: 'dropactivate',
         x: rect.left + (rect.width / 2),
         y: rect.top + (rect.height / 2)
-      }, null);
+      }, 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, Key, RefObject} from '@react-types/shared';
+import {DropTarget, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {getDroppableCollectionId} from './utils';
 import {HTMLAttributes} from 'react';
 // @ts-ignore
@@ -23,7 +23,9 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DropIndicatorProps {
   /** The drop target that the drop indicator represents. */
-  target: DropTarget
+  target: DropTarget,
+  /** The ref to the activate button. */
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export interface DropIndicatorAria {

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

@@ -30,7 +30,6 @@ import {
   DropTargetDelegate,
   Key,
   KeyboardDelegate,
-  KeyboardEvents,
   Node,
   RefObject
 } from '@react-types/shared';
@@ -48,7 +47,8 @@ export interface DroppableCollectionOptions extends DroppableCollectionProps {
   keyboardDelegate: KeyboardDelegate,
   /** A delegate object that provides drop targets for pointer coordinates within the collection. */
   dropTargetDelegate: DropTargetDelegate,
-  onKeyDown?: KeyboardEvents['onKeyDown']
+  /** A custom keyboard event handler for drop targets. */
+  onKeyDown?: (e: KeyboardEvent) => void
 }
 
 export interface DroppableCollectionResult {
@@ -94,6 +94,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onRootDrop,
       onItemDrop,
       onReorder,
+      onMove,
       acceptedDragTypes = 'all',
       shouldAcceptItemDrop
     } = localState.props;
@@ -139,6 +140,10 @@ 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});
@@ -590,17 +595,17 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onDropTargetEnter(target) {
         localState.state.setTarget(target);
       },
-      onDropActivate(e) {
+      onDropActivate(e, target) {
         if (
-          localState.state.target?.type === 'item' &&
-          localState.state.target?.dropPosition === 'on' &&
+          target?.type === 'item' &&
+          target?.dropPosition === 'on' &&
           typeof localState.props.onDropActivate === 'function'
         ) {
           localState.props.onDropActivate({
             type: 'dropactivate',
             x: e.x, // todo
             y: e.y,
-            target: localState.state.target
+            target
           });
         }
       },
@@ -750,7 +755,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
-        localState.props.onKeyDown?.(e as any);
+        localState.props.onKeyDown?.(e);
       }
     });
   }, [localState, ref, onDrop, direction]);

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

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

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

@@ -59,6 +59,7 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
     onRootDrop,
     onItemDrop,
     onReorder,
+    onMove,
     shouldAcceptItemDrop,
     collection,
     selectionManager,
@@ -95,13 +96,32 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
 
     if (acceptedDragTypes === 'all' || acceptedDragTypes.some(type => types.has(type))) {
       let isValidInsert = onInsert && target.type === 'item' && !isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
-      let isValidReorder = onReorder && target.type === 'item' && isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
+      let isValidReorder = onReorder
+        && target.type === 'item'
+        && isInternal
+        && (target.dropPosition === 'before' || target.dropPosition === 'after')
+        && isDraggingWithinParent(collection, target, draggingKeys);
+
+      let isItemDropAllowed = target.type !== 'item'
+        || target.dropPosition !== 'on'
+        || (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
+
+      let isValidMove = onMove
+        && target.type === 'item'
+        && isInternal
+        && isItemDropAllowed;
+
       // Feedback was that internal root drop was weird so preventing that from happening
       let isValidRootDrop = onRootDrop && target.type === 'root' && !isInternal;
+      
       // Automatically prevent items (i.e. folders) from being dropped on themselves.
-      let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && target.key != null && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
+      let isValidOnItemDrop = onItemDrop 
+        && target.type === 'item' 
+        && target.dropPosition === 'on' 
+        && !(isInternal && target.key != null && draggingKeys.has(target.key)) 
+        && isItemDropAllowed;
 
-      if (onDrop || isValidInsert || isValidReorder || isValidRootDrop || isValidOnItemDrop) {
+      if (onDrop || isValidInsert || isValidReorder || isValidMove || isValidRootDrop || isValidOnItemDrop) {
         if (getDropOperation) {
           return getDropOperation(target, types, allowedOperations);
         } else {
@@ -111,7 +131,7 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
     }
 
     return 'cancel';
-  }, [isDisabled, acceptedDragTypes, getDropOperation, onInsert, onRootDrop, onItemDrop, shouldAcceptItemDrop, onReorder, onDrop]);
+  }, [isDisabled, collection, acceptedDragTypes, getDropOperation, onInsert, onRootDrop, onItemDrop, shouldAcceptItemDrop, onReorder, onMove, onDrop]);
 
   return {
     collection,
@@ -187,3 +207,16 @@ function isEqualDropTarget(a?: DropTarget | null, b?: DropTarget | null) {
       return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition;
   }
 }
+
+function isDraggingWithinParent(collection: Collection<Node<unknown>>, target: ItemDropTarget, draggingKeys: Set<Key>) {
+  let targetNode = collection.getItem(target.key);
+
+  for (let key of draggingKeys) {
+    let node = collection.getItem(key);
+    if (node?.parentKey !== targetNode?.parentKey) {
+      return false;
+    }
+  }
+
+  return true;
+}