Update simplified DnD handler api and memoize useDnDHooks

packages/@react-aria/dnd/package.json

@@ -26,7 +26,6 @@
     "@react-aria/utils": "^3.13.3",
     "@react-aria/visually-hidden": "^3.4.1",
     "@react-stately/dnd": "3.0.0-alpha.10",
-    "@react-stately/selection": "^3.10.3",
     "@react-types/button": "^3.6.1",
     "@react-types/shared": "^3.14.1"
   },

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

@@ -14,7 +14,7 @@ import {announce} from '@react-aria/live-announcer';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget, FocusableElement} from '@react-types/shared';
 import {flushSync} from 'react-dom';
-import {getDragModality, getTypes, setDropCollectionRef} from './utils';
+import {getDragModality, getTypes} from './utils';
 import {getInteractionModality} from '@react-aria/interactions';
 import type {LocalizedStringFormatter} from '@internationalized/string';
 import {useEffect, useState} from 'react';
@@ -517,7 +517,6 @@ class DragSession {
   }
 
   cancel() {
-    setDropCollectionRef(undefined);
     this.end();
     if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
       this.dragTarget.element.focus();

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

@@ -21,6 +21,7 @@ export type {DropOptions, DropResult} from './useDrop';
 export type {ClipboardProps, ClipboardResult} from './useClipboard';
 export type {DropTargetDelegate} from '@react-types/shared';
 
+export {DIRECTORY_DRAG_TYPE} from './utils';
 export {useDrag} from './useDrag';
 export {useDrop} from './useDrop';
 export {useDroppableCollection} from './useDroppableCollection';

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

@@ -11,7 +11,7 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {clearGlobalDnDState, globalDndState, setDraggingKeys} from './utils';
+import {clearGlobalDnDState, isInternalDropOperation, setDraggingKeys} from './utils';
 import {DraggableCollectionState} from '@react-stately/dnd';
 import {HTMLAttributes, Key} from 'react';
 // @ts-ignore
@@ -77,9 +77,9 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
       state.moveDrag(e);
     },
     onDragEnd(e) {
-      let {draggingCollectionRef, dropCollectionRef} = globalDndState;
-      let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef.current === dropCollectionRef?.current;
-      state.endDrag({...e, keys: state.draggingKeys, isInternalDrop});
+      let {dropOperation} = e;
+      let isInternal = dropOperation === 'cancel' ? false : isInternalDropOperation();
+      state.endDrag({...e, keys: state.draggingKeys, isInternal});
       clearGlobalDnDState();
     }
   });

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

@@ -251,7 +251,7 @@ export function useDrop(options: DropOptions): DropResult {
     if (dndStateSnapshot.draggingCollectionRef == null) {
       setGlobalDropEffect(undefined);
     } else {
-      // Otherwise we need to preserve the global dnd state for onDragEnd's isInternalDrop check.
+      // Otherwise we need to preserve the global dnd state for onDragEnd's isInternal check.
       // At the moment fireDropExit may clear dropCollectionRef (i.e. useDroppableCollection's provided onDropExit, required to clear dropCollectionRef when exiting a valid drop target)
       setGlobalDnDState(dndStateSnapshot);
     }

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

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {clearGlobalDnDState, globalDndState, setDropCollectionRef, useDroppableCollectionId} from './utils';
+import {clearGlobalDnDState, globalDndState, isInternalDropOperation, setDropCollectionRef, useDroppableCollectionId} from './utils';
 import {Collection, DropEvent, DropOperation, DroppableCollectionDropEvent, DroppableCollectionProps, DropPosition, DropTarget, DropTargetDelegate, KeyboardDelegate, Node} from '@react-types/shared';
+import {DIRECTORY_DRAG_TYPE, getTypes} from './utils';
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {getTypes} from './utils';
 import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
 import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
@@ -55,24 +55,24 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onRootDrop,
       onItemDrop,
       onReorder,
-      acceptedDragTypes,
+      acceptedDragTypes = 'all',
       shouldAcceptItemDrop
     } = localState.props;
 
-    let {draggingCollectionRef, draggingKeys} = globalDndState;
-    let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === ref?.current;
+    let {draggingKeys} = globalDndState;
+    let isInternal = isInternalDropOperation(ref);
     let {
       target,
       dropOperation,
       items
     } = e;
 
     let filteredItems = items;
-    if (acceptedDragTypes) {
+    if (acceptedDragTypes !== 'all' || shouldAcceptItemDrop) {
       filteredItems = items.filter(item => {
-        let itemTypes: Set<string>;
+        let itemTypes: Set<string | symbol>;
         if (item.kind === 'directory') {
-          itemTypes = new Set(['directory']);
+          itemTypes = new Set([DIRECTORY_DRAG_TYPE]);
         } else {
           itemTypes = item.kind === 'file' ? new Set([item.type]) : item.types;
         }
@@ -90,22 +90,24 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       });
     }
 
-    if (target.type === 'root' && onRootDrop) {
-      await onRootDrop({items: filteredItems, dropOperation});
-    }
-
-    if (target.type === 'item') {
-      if (target.dropPosition === 'on' && onItemDrop) {
-        await onItemDrop({items: filteredItems, dropOperation, isInternalDrop, target: {key: target.key, dropPosition: 'on'}});
+    if (filteredItems.length > 0) {
+      if (target.type === 'root' && onRootDrop) {
+        await onRootDrop({items: filteredItems, dropOperation});
       }
 
-      if (target.dropPosition !== 'on') {
-        if (!isInternalDrop && onInsert) {
-          await onInsert({items: filteredItems, dropOperation, target: {key: target.key, dropPosition: target.dropPosition}});
+      if (target.type === 'item') {
+        if (target.dropPosition === 'on' && onItemDrop) {
+          await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (isInternalDrop && onReorder) {
-          await onReorder({keys: draggingKeys, dropOperation, target: {key: target.key, dropPosition: target.dropPosition}});
+        if (target.dropPosition !== 'on') {
+          if (!isInternal && onInsert) {
+            await onInsert({items: filteredItems, dropOperation, target});
+          }
+
+          if (isInternal && onReorder) {
+            await onReorder({keys: draggingKeys, dropOperation, target});
+          }
         }
       }
     }
@@ -122,22 +124,22 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       autoScroll.move(e.x, e.y);
     },
     getDropOperationForPoint(types, allowedOperations, x, y) {
-      let {draggingCollectionRef, draggingKeys, dropCollectionRef} = globalDndState;
-      let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === ref?.current;
-      let isValidDropTarget = (target) => state.getDropOperation({target, types, allowedOperations, isInternalDrop, draggingKeys}) !== 'cancel';
+      let {draggingKeys, dropCollectionRef} = globalDndState;
+      let isInternal = isInternalDropOperation(ref);
+      let isValidDropTarget = (target) => state.getDropOperation({target, types, allowedOperations, isInternal, draggingKeys}) !== 'cancel';
       let target = props.dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
       if (!target) {
         localState.dropOperation = 'cancel';
         localState.nextTarget = null;
         return 'cancel';
       }
 
-      localState.dropOperation = state.getDropOperation({target, types, allowedOperations, isInternalDrop, draggingKeys});
+      localState.dropOperation = state.getDropOperation({target, types, allowedOperations, isInternal, draggingKeys});
 
       // If the target doesn't accept the drop, see if the root accepts it instead.
       if (localState.dropOperation === 'cancel') {
         let rootTarget: DropTarget = {type: 'root'};
-        let dropOperation = state.getDropOperation({target: rootTarget, types, allowedOperations, isInternalDrop, draggingKeys});
+        let dropOperation = state.getDropOperation({target: rootTarget, types, allowedOperations, isInternal, draggingKeys});
         if (dropOperation !== 'cancel') {
           target = rootTarget;
           localState.dropOperation = dropOperation;
@@ -375,15 +377,15 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     ): DropTarget => {
       let seenRoot = 0;
       let operation: DropOperation;
-      let {draggingCollectionRef, draggingKeys} = globalDndState;
-      let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === ref?.current;
+      let {draggingKeys} = globalDndState;
+      let isInternal = isInternalDropOperation(ref);
       do {
         let nextTarget = getNextTarget(target, wrap);
         if (!nextTarget) {
           return null;
         }
         target = nextTarget;
-        operation = localState.state.getDropOperation({target: nextTarget, types, allowedOperations: allowedDropOperations, isInternalDrop, draggingKeys});
+        operation = localState.state.getDropOperation({target: nextTarget, types, allowedOperations: allowedDropOperations, isInternal, draggingKeys});
         if (target.type === 'root') {
           seenRoot++;
         }
@@ -404,9 +406,9 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       element: ref.current,
       getDropOperation(types, allowedOperations) {
         if (localState.state.target) {
-          let {draggingCollectionRef, draggingKeys} = globalDndState;
-          let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === ref?.current;
-          return localState.state.getDropOperation({target: localState.state.target, types, allowedOperations, isInternalDrop, draggingKeys});
+          let {draggingKeys} = globalDndState;
+          let isInternal = isInternalDropOperation(ref);
+          return localState.state.getDropOperation({target: localState.state.target, types, allowedOperations, isInternal, draggingKeys});
         }
 
         // Check if any of the targets accept the drop.
@@ -418,7 +420,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         let types = getTypes(drag.items);
         let selectionManager = localState.state.selectionManager;
         let target: DropTarget;
-        // Update the drop collection ref tracker for useDroppableItem's getDropOperation isInternalDrop check
+        // Update the drop collection ref tracker for useDroppableItem's getDropOperation isInternal check
         setDropCollectionRef(ref);
 
         // When entering the droppable collection for the first time, the default drop target
@@ -452,10 +454,10 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             dropPosition
           };
 
-          let {draggingCollectionRef, draggingKeys} = globalDndState;
-          let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === ref?.current;
+          let {draggingKeys} = globalDndState;
+          let isInternal = isInternalDropOperation(ref);
           // If the default target is not valid, find the next one that is.
-          if (localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternalDrop, draggingKeys}) === 'cancel') {
+          if (localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternal, draggingKeys}) === 'cancel') {
             target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
               ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
           }
@@ -556,8 +558,8 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
                 // If the target does not accept the drop, find the next valid target.
                 // If no next valid target, find the previous valid target.
                 let {draggingCollectionRef, draggingKeys} = globalDndState;
-                let isInternalDrop = draggingCollectionRef?.current === ref?.current;
-                let operation = localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternalDrop, draggingKeys});
+                let isInternal = draggingCollectionRef?.current === ref?.current;
+                let operation = localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternal, draggingKeys});
                 if (operation === 'cancel') {
                   target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
                     ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
@@ -599,9 +601,9 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
               // If the target does not accept the drop, find the previous valid target.
               // If no next valid target, find the next valid target.
-              let {draggingCollectionRef, draggingKeys} = globalDndState;
-              let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === ref?.current;
-              let operation = localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternalDrop, draggingKeys});
+              let {draggingKeys} = globalDndState;
+              let isInternal = isInternalDropOperation(ref);
+              let operation = localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternal, draggingKeys});
               if (operation === 'cancel') {
                 target = nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false)
                   ?? nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false);

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

@@ -13,7 +13,7 @@
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {DropTarget} from '@react-types/shared';
-import {getTypes, globalDndState} from './utils';
+import {getTypes, globalDndState, isInternalDropOperation} from './utils';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
@@ -35,13 +35,13 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
         element: ref.current,
         target: options.target,
         getDropOperation(types, allowedOperations) {
-          let {draggingCollectionRef, draggingKeys, dropCollectionRef} = globalDndState;
-          let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === dropCollectionRef?.current;
+          let {draggingKeys} = globalDndState;
+          let isInternal = isInternalDropOperation();
           return state.getDropOperation({
             target: options.target,
             types,
             allowedOperations,
-            isInternalDrop,
+            isInternal,
             draggingKeys
           });
         }
@@ -50,13 +50,13 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
   }, [ref, options.target, state]);
 
   let dragSession = DragManager.useDragSession();
-  let {draggingCollectionRef, draggingKeys, dropCollectionRef} = globalDndState;
-  let isInternalDrop = draggingCollectionRef?.current != null && draggingCollectionRef?.current === dropCollectionRef?.current;
+  let {draggingKeys} = globalDndState;
+  let isInternal = isInternalDropOperation();
   let isValidDropTarget = dragSession && state.getDropOperation({
     target: options.target,
     types: getTypes(dragSession.dragTarget.items),
     allowedOperations: dragSession.dragTarget.allowedDropOperations,
-    isInternalDrop,
+    isInternal,
     draggingKeys
   }) !== 'cancel';
 

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

@@ -18,6 +18,7 @@ import {Key, RefObject} from 'react';
 import {useId} from '@react-aria/utils';
 
 const droppableCollectionIds = new WeakMap<DroppableCollectionState, string>();
+export const DIRECTORY_DRAG_TYPE = Symbol();
 
 export function useDroppableCollectionId(state: DroppableCollectionState) {
   let id = useId();
@@ -159,12 +160,12 @@ export class DragTypes implements IDragTypes {
     this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes('Files');
   }
 
-  has(type: string) {
-    if (this.includesUnknownTypes || (type === 'directory' && this.types.has(GENERIC_TYPE))) {
+  has(type: string | symbol) {
+    if (this.includesUnknownTypes || (type === DIRECTORY_DRAG_TYPE && this.types.has(GENERIC_TYPE))) {
       return true;
     }
 
-    return this.types.has(type);
+    return typeof type === 'string' && this.types.has(type);
   }
 }
 
@@ -336,6 +337,13 @@ export function setGlobalDnDState(state: DnDState) {
   globalDndState = state;
 }
 
+// Util function to check if the current dragging collection ref is the same as the current targeted droppable collection ref.
+// Allows a droppable ref arg in case the global drop collection ref hasn't been set
+export function isInternalDropOperation(ref?: RefObject<HTMLElement>) {
+  let {draggingCollectionRef, dropCollectionRef} = globalDndState;
+  return draggingCollectionRef?.current != null && draggingCollectionRef.current === (ref?.current || dropCollectionRef?.current);
+}
+
 type DropEffect = 'none' | 'copy' | 'link' | 'move';
 export let globalDropEffect: DropEffect;
 export function setGlobalDropEffect(dropEffect: DropEffect) {

packages/@react-aria/dnd/stories/DroppableGrid.tsx

@@ -165,7 +165,8 @@ const DroppableGrid = React.forwardRef(function (props: any, ref) {
     selectionManager: gridState.selectionManager,
     getDropOperation: props.getDropOperation || defaultGetDropOperation,
     onDropEnter: props.onDropEnter,
-    onDropExit: props.onDropExit
+    onDropExit: props.onDropExit,
+    onDrop: props.onDrop
   });
 
   let {collectionProps} = useDroppableCollection({