@react-aria/dnd 3.9.3 → 3.10.0

package/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);
     }
   }
 }

package/src/DropTargetKeyboardNavigation.ts

@@ -0,0 +1,273 @@
+import {Collection, DropTarget, Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {getChildNodes} from '@react-stately/collections';
+
+export function navigate(
+  keyboardDelegate: KeyboardDelegate,
+  collection: Collection<Node<unknown>>,
+  target: DropTarget | null | undefined,
+  direction: 'left' | 'right' | 'up' | 'down',
+  rtl = false,
+  wrap = false
+): DropTarget | null {
+  switch (direction) {
+    case 'left':
+      return rtl 
+        ? nextDropTarget(keyboardDelegate, collection, target, wrap, 'left')
+        : previousDropTarget(keyboardDelegate, collection, target, wrap, 'left');
+    case 'right':
+      return rtl 
+        ? previousDropTarget(keyboardDelegate, collection, target, wrap, 'right')
+        : nextDropTarget(keyboardDelegate, collection, target, wrap, 'right');
+    case 'up':
+      return previousDropTarget(keyboardDelegate, collection, target, wrap);
+    case 'down':
+      return nextDropTarget(keyboardDelegate, collection, target, wrap);
+  }
+}
+
+function nextDropTarget(
+  keyboardDelegate: KeyboardDelegate,
+  collection: Collection<Node<unknown>>,
+  target: DropTarget | null | undefined,
+  wrap = false,
+  horizontal: 'left' | 'right' | null = null
+): DropTarget | null {
+  if (!target) {
+    return {
+      type: 'root'
+    };
+  }
+
+  if (target.type === 'root') {
+    let nextKey = keyboardDelegate.getFirstKey?.() ?? null;
+    if (nextKey != null) {
+      return {
+        type: 'item',
+        key: nextKey,
+        dropPosition: 'before'
+      };
+    }
+
+    return null;
+  }
+
+  if (target.type === 'item') {
+    let nextKey: Key | null | undefined = null;
+    if (horizontal) {
+      nextKey = horizontal === 'right' ? keyboardDelegate.getKeyRightOf?.(target.key) : keyboardDelegate.getKeyLeftOf?.(target.key);
+    } else {
+      nextKey = keyboardDelegate.getKeyBelow?.(target.key);
+    }
+    let nextCollectionKey = collection.getKeyAfter(target.key);
+
+    // If the keyboard delegate did not move to the next key in the collection,
+    // jump to that key with the same drop position. Otherwise, try the other
+    // drop positions on the current key first.
+    if (nextKey != null && nextKey !== nextCollectionKey) {
+      return {
+        type: 'item',
+        key: nextKey,
+        dropPosition: target.dropPosition
+      };
+    }
+    
+    switch (target.dropPosition) {
+      case 'before': {
+        return {
+          type: 'item',
+          key: target.key,
+          dropPosition: 'on'
+        };
+      }
+      case 'on': {
+        // If there are nested items, traverse to them prior to the "after" position of this target.
+        // If the next key is on the same level, then its "before" position is equivalent to this item's "after" position.
+        let targetNode = collection.getItem(target.key);
+        let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+        if (targetNode && nextNode && nextNode.level >= targetNode.level) {
+          return {
+            type: 'item',
+            key: nextNode.key,
+            dropPosition: 'before'
+          };
+        }
+
+        return {
+          type: 'item',
+          key: target.key,
+          dropPosition: 'after'
+        };
+      }
+      case 'after': {
+        // If this is the last sibling in a level, traverse to the parent.
+        let targetNode = collection.getItem(target.key);        
+        if (targetNode && targetNode.nextKey == null && targetNode.parentKey != null) {
+          // If the parent item has an item after it, use the "before" position.
+          let parentNode = collection.getItem(targetNode.parentKey);
+          if (parentNode?.nextKey != null) {
+            return {
+              type: 'item',
+              key: parentNode.nextKey,
+              dropPosition: 'before'
+            };
+          }
+
+          if (parentNode) {
+            return {
+              type: 'item',
+              key: parentNode.key,
+              dropPosition: 'after'
+            };
+          }
+        }
+
+        if (targetNode?.nextKey != null) {
+          return {
+            type: 'item',
+            key: targetNode.nextKey,
+            dropPosition: 'on'
+          };
+        }
+      }
+    }
+  }
+
+  if (wrap) {
+    return {
+      type: 'root'
+    };
+  }
+
+  return null;
+}
+
+function previousDropTarget(
+  keyboardDelegate: KeyboardDelegate,
+  collection: Collection<Node<unknown>>,
+  target: DropTarget | null | undefined,
+  wrap = false,
+  horizontal: 'left' | 'right' | null = null
+): DropTarget | null {
+  // Start after the last root-level item.
+  if (!target || (wrap && target.type === 'root')) {
+    // Keyboard delegate gets the deepest item but we want the shallowest.
+    let prevKey: Key | null = null;
+    let lastKey = keyboardDelegate.getLastKey?.();
+    while (lastKey != null) {
+      prevKey = lastKey;
+      let node = collection.getItem(lastKey);
+      lastKey = node?.parentKey;
+    }
+
+    if (prevKey != null) {
+      return {
+        type: 'item',
+        key: prevKey,
+        dropPosition: 'after'
+      };
+    }
+
+    return null;
+  }
+
+  if (target.type === 'item') {
+    let prevKey: Key | null | undefined = null;
+    if (horizontal) {
+      prevKey = horizontal === 'left' ? keyboardDelegate.getKeyLeftOf?.(target.key) : keyboardDelegate.getKeyRightOf?.(target.key);
+    } else {
+      prevKey = keyboardDelegate.getKeyAbove?.(target.key);
+    }
+    let prevCollectionKey = collection.getKeyBefore(target.key);
+
+    // If the keyboard delegate did not move to the next key in the collection,
+    // jump to that key with the same drop position. Otherwise, try the other
+    // drop positions on the current key first.
+    if (prevKey != null && prevKey !== prevCollectionKey) {
+      return {
+        type: 'item',
+        key: prevKey,
+        dropPosition: target.dropPosition
+      };
+    }
+
+    switch (target.dropPosition) {
+      case 'before': {
+        // Move after the last child of the previous item.
+        let targetNode = collection.getItem(target.key);
+        if (targetNode && targetNode.prevKey != null) {
+          let lastChild = getLastChild(collection, targetNode.prevKey);
+          if (lastChild) {
+            return lastChild;
+          }
+        }
+
+        if (prevKey != null) {
+          return {
+            type: 'item',
+            key: prevKey,
+            dropPosition: 'on'
+          };
+        }
+
+        return {
+          type: 'root'
+        };
+      }
+      case 'on': {
+        return {
+          type: 'item',
+          key: target.key,
+          dropPosition: 'before'
+        };
+      }
+      case 'after': {
+        // Move after the last child of this item.
+        let lastChild = getLastChild(collection, target.key);
+        if (lastChild) {
+          return lastChild;
+        }
+
+        return {
+          type: 'item',
+          key: target.key,
+          dropPosition: 'on'
+        };
+      }
+    }
+  }
+
+  if (target.type !== 'root') {
+    return {
+      type: 'root'
+    };
+  }
+
+  return null;
+}
+
+function getLastChild(collection: Collection<Node<unknown>>, key: Key): DropTarget | null {
+  // getChildNodes still returns child tree items even when the item is collapsed.
+  // Checking if the next item has a greater level is a silly way to determine if the item is expanded.
+  let targetNode = collection.getItem(key);
+  let nextKey = collection.getKeyAfter(key);
+  let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+  if (targetNode && nextNode && nextNode.level > targetNode.level) {
+    let children = getChildNodes(targetNode, collection);
+    let lastChild: Node<unknown> | null = null;
+    for (let child of children) {
+      if (child.type === 'item') {
+        lastChild = child;
+      }
+    }
+
+    if (lastChild) {
+      return {
+        type: 'item',
+        key: lastChild.key,
+        dropPosition: 'after'
+      };
+    }
+  }
+
+  return null;
+}

package/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;

package/src/useDrop.ts

@@ -36,7 +36,6 @@ 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. */

package/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 {
@@ -69,28 +71,32 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
   } else {
     let before: Key | null | undefined;
     let after: Key | null | undefined;
-    if (collection.getFirstKey() === target.key && target.dropPosition === 'before') {
-      before = null;
+    if (target.dropPosition === 'before') {
+      let prevKey = collection.getItem(target.key)?.prevKey;
+      let prevNode = prevKey != null ? collection.getItem(prevKey) : null;
+      before = prevNode?.type === 'item' ? prevNode.key : null;
     } else {
-      before = target.dropPosition === 'before' ? collection.getKeyBefore(target.key) : target.key;
+      before = target.key;
     }
 
-    if (collection.getLastKey() === target.key && target.dropPosition === 'after') {
-      after = null;
+    if (target.dropPosition === 'after') {
+      let nextKey = collection.getItem(target.key)?.nextKey;
+      let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+      after = nextNode?.type === 'item' ? nextNode.key : null;
     } else {
-      after = target.dropPosition === 'after' ? collection.getKeyAfter(target.key) : target.key;
+      after = target.key;
     }
 
-    if (before && after) {
+    if (before != null && after != null) {
       label = stringFormatter.format('insertBetween', {
         beforeItemText: getText(before),
         afterItemText: getText(after)
       });
-    } else if (before) {
+    } else if (before != null) {
       label = stringFormatter.format('insertAfter', {
         itemText: getText(before)
       });
-    } else if (after) {
+    } else if (after != null) {
       label = stringFormatter.format('insertBefore', {
         itemText: getText(after)
       });