@react-aria/dnd 3.9.2 → 3.10.0

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

package/src/useDroppableCollection.ts

@@ -37,6 +37,7 @@ import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {HTMLAttributes, useCallback, useEffect, useRef} from 'react';
 import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
+import {navigate} from './DropTargetKeyboardNavigation';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
@@ -46,7 +47,9 @@ 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
+  dropTargetDelegate: DropTargetDelegate,
+  /** A custom keyboard event handler for drop targets. */
+  onKeyDown?: (e: KeyboardEvent) => void
 }
 
 export interface DroppableCollectionResult {
@@ -64,9 +67,6 @@ interface DroppingState {
   timeout: ReturnType<typeof setTimeout> | undefined
 }
 
-const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
-const DROP_POSITIONS_RTL: DropPosition[] = ['after', 'on', 'before'];
-
 /**
  * Handles drop interactions for a collection component, with support for traditional mouse and touch
  * based drag and drop, in addition to full parity for keyboard and screen reader users.
@@ -92,6 +92,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onRootDrop,
       onItemDrop,
       onReorder,
+      onMove,
       acceptedDragTypes = 'all',
       shouldAcceptItemDrop
     } = localState.props;
@@ -137,6 +138,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});
@@ -201,7 +206,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       autoScroll.stop();
     },
     onDropActivate(e) {
-      if (state.target?.type === 'item' && state.target?.dropPosition === 'on' && typeof props.onDropActivate === 'function') {
+      if (state.target?.type === 'item' && typeof props.onDropActivate === 'function') {
         props.onDropActivate({
           type: 'dropactivate',
           x: e.x, // todo
@@ -258,18 +263,25 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // inserted item. If selection is disabled, then also show the focus ring so there
         // is some indication that items were added.
         if (state.selectionManager.focusedKey === prevFocusedKey) {
-          let first = newKeys.keys().next().value;
-          let item = state.collection.getItem(first);
-
-          // If this is a cell, focus the parent row.
-          if (item?.type === 'cell') {
-            first = item.parentKey;
-          }
+          let first: Key | null | undefined = newKeys.keys().next().value;
+          if (first != null) {
+            let item = state.collection.getItem(first);
+
+            // If this is a cell, focus the parent row.
+            // eslint-disable-next-line max-depth
+            if (item?.type === 'cell') {
+              first = item.parentKey;
+            }
 
-          state.selectionManager.setFocusedKey(first);
+            // eslint-disable-next-line max-depth
+            if (first != null) {
+              state.selectionManager.setFocusedKey(first);
+            }
 
-          if (state.selectionManager.selectionMode === 'none') {
-            setInteractionModality('keyboard');
+            // eslint-disable-next-line max-depth
+            if (state.selectionManager.selectionMode === 'none') {
+              setInteractionModality('keyboard');
+            }
           }
         }
       } else if (
@@ -335,7 +347,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     }, 50);
   }, [localState, defaultOnDrop, ref, updateFocusAfterDrop]);
 
-   
+
   useEffect(() => {
     return () => {
       if (droppingState.current) {
@@ -357,118 +369,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return;
     }
 
-    let getNextTarget = (target: DropTarget | null | undefined, wrap = true, horizontal = false): DropTarget | null => {
-      if (!target) {
-        return {
-          type: 'root'
-        };
-      }
-
-      let {keyboardDelegate} = localState.props;
-      let nextKey: Key | null | undefined;
-      if (target?.type === 'item') {
-        nextKey = horizontal ? keyboardDelegate.getKeyRightOf?.(target.key) : keyboardDelegate.getKeyBelow?.(target.key);
-      } else {
-        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getLastKey?.() : keyboardDelegate.getFirstKey?.();
-      }
-      let dropPositions = horizontal && direction === 'rtl' ? DROP_POSITIONS_RTL : DROP_POSITIONS;
-      let dropPosition: DropPosition = dropPositions[0];
-
-      if (target.type === 'item') {
-        // If the the keyboard delegate returned the next key in the collection,
-        // first try the other positions in the current key. Otherwise (e.g. in a grid layout),
-        // jump to the same drop position in the new key.
-        let nextCollectionKey = horizontal && direction === 'rtl' ? localState.state.collection.getKeyBefore(target.key) : localState.state.collection.getKeyAfter(target.key);
-        if (nextKey == null || nextKey === nextCollectionKey) {
-          let positionIndex = dropPositions.indexOf(target.dropPosition);
-          let nextDropPosition = dropPositions[positionIndex + 1];
-          if (positionIndex < dropPositions.length - 1 && !(nextDropPosition === dropPositions[2] && nextKey != null)) {
-            return {
-              type: 'item',
-              key: target.key,
-              dropPosition: nextDropPosition
-            };
-          }
-
-          // If the last drop position was 'after', then 'before' on the next key is equivalent.
-          // Switch to 'on' instead.
-          if (target.dropPosition === dropPositions[2]) {
-            dropPosition = 'on';
-          }
-        } else {
-          dropPosition = target.dropPosition;
-        }
-      }
-
-      if (nextKey == null) {
-        if (wrap) {
-          return {
-            type: 'root'
-          };
-        }
-
-        return null;
-      }
-
-      return {
-        type: 'item',
-        key: nextKey,
-        dropPosition
-      };
+    let getNextTarget = (target: DropTarget | null | undefined, wrap = true, key: 'left' | 'right' | 'up' | 'down' = 'down') => {
+      return navigate(localState.props.keyboardDelegate, localState.state.collection, target, key, direction === 'rtl', wrap);
     };
 
-    let getPreviousTarget = (target: DropTarget | null | undefined, wrap = true, horizontal = false): DropTarget | null => {
-      let {keyboardDelegate} = localState.props;
-      let nextKey: Key | null | undefined;
-      if (target?.type === 'item') {
-        nextKey = horizontal ? keyboardDelegate.getKeyLeftOf?.(target.key) : keyboardDelegate.getKeyAbove?.(target.key);
-      } else {
-        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getFirstKey?.() : keyboardDelegate.getLastKey?.();
-      }
-      let dropPositions = horizontal && direction === 'rtl' ? DROP_POSITIONS_RTL : DROP_POSITIONS;
-      let dropPosition: DropPosition = !target || target.type === 'root' ? dropPositions[2] : 'on';
-
-      if (target?.type === 'item') {
-        // If the the keyboard delegate returned the previous key in the collection,
-        // first try the other positions in the current key. Otherwise (e.g. in a grid layout),
-        // jump to the same drop position in the new key.
-        let prevCollectionKey = horizontal && direction === 'rtl' ? localState.state.collection.getKeyAfter(target.key) : localState.state.collection.getKeyBefore(target.key);
-        if (nextKey == null || nextKey === prevCollectionKey) {
-          let positionIndex = dropPositions.indexOf(target.dropPosition);
-          let nextDropPosition = dropPositions[positionIndex - 1];
-          if (positionIndex > 0 && nextDropPosition !== dropPositions[2]) {
-            return {
-              type: 'item',
-              key: target.key,
-              dropPosition: nextDropPosition
-            };
-          }
-
-          // If the last drop position was 'before', then 'after' on the previous key is equivalent.
-          // Switch to 'on' instead.
-          if (target.dropPosition === dropPositions[0]) {
-            dropPosition = 'on';
-          }
-        } else {
-          dropPosition = target.dropPosition;
-        }
-      }
-
-      if (nextKey == null) {
-        if (wrap) {
-          return {
-            type: 'root'
-          };
-        }
-
-        return null;
-      }
-
-      return {
-        type: 'item',
-        key: nextKey,
-        dropPosition
-      };
+    let getPreviousTarget = (target: DropTarget | null | undefined, wrap = true) => {
+      return getNextTarget(target, wrap, 'up');
     };
 
     let nextValidTarget = (
@@ -581,17 +487,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
           });
         }
       },
@@ -607,28 +513,28 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         switch (e.key) {
           case 'ArrowDown': {
             if (keyboardDelegate.getKeyBelow) {
-              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, getNextTarget);
+              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getNextTarget(target, wrap, 'down'));
               localState.state.setTarget(target);
             }
             break;
           }
           case 'ArrowUp': {
             if (keyboardDelegate.getKeyAbove) {
-              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, getPreviousTarget);
+              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getNextTarget(target, wrap, 'up'));
               localState.state.setTarget(target);
             }
             break;
           }
           case 'ArrowLeft': {
             if (keyboardDelegate.getKeyLeftOf) {
-              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getPreviousTarget(target, wrap, true));
+              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getNextTarget(target, wrap, 'left'));
               localState.state.setTarget(target);
             }
             break;
           }
           case 'ArrowRight': {
             if (keyboardDelegate.getKeyRightOf) {
-              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getNextTarget(target, wrap, true));
+              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getNextTarget(target, wrap, 'right'));
               localState.state.setTarget(target);
             }
             break;
@@ -741,6 +647,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
+        localState.props.onKeyDown?.(e);
       }
     });
   }, [localState, ref, onDrop, direction]);

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