@react-aria/dnd 3.0.0-alpha.11 → 3.0.0-alpha.12

package/dist/types.d.ts

@@ -1,15 +1,27 @@
 import React, { HTMLAttributes, RefObject, Key } from "react";
-import { DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DOMAttributes, DropItem } from "@react-types/shared";
+import { DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes, DroppableCollectionProps, DropTargetDelegate, KeyboardDelegate, DropTarget, DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DOMAttributes, DropItem, Collection, Node } from "@react-types/shared";
 import { DroppableCollectionState, DraggableCollectionState } from "@react-stately/dnd";
 import { AriaButtonProps } from "@react-types/button";
 export interface DropOptions {
     ref: RefObject<HTMLElement>;
+    /**
+     * A function returning the drop operation to be performed when items matching the given types are dropped
+     * on the drop target.
+     */
     getDropOperation?: (types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
     getDropOperationForPoint?: (types: DragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation;
+    /** Handler that is called when a valid drag enters the drop target. */
     onDropEnter?: (e: DropEnterEvent) => void;
+    /** Handler that is called when a valid drag is moved within the drop target. */
     onDropMove?: (e: DropMoveEvent) => void;
+    /**
+     * 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.
+     */
     onDropActivate?: (e: DropActivateEvent) => void;
+    /** Handler that is called when a valid drag exits the drop target. */
     onDropExit?: (e: DropExitEvent) => void;
+    /** Handler that is called when a valid drag is dropped on the drop target. */
     onDrop?: (e: DropEvent) => void;
 }
 export interface DropResult {
@@ -19,7 +31,7 @@ export interface DropResult {
 export function useDrop(options: DropOptions): DropResult;
 export interface DroppableCollectionOptions extends DroppableCollectionProps {
     keyboardDelegate: KeyboardDelegate;
-    getDropTargetFromPoint: (x: number, y: number) => DropTarget | null;
+    dropTargetDelegate: DropTargetDelegate;
 }
 export interface DroppableCollectionResult {
     collectionProps: HTMLAttributes<HTMLElement>;
@@ -30,6 +42,7 @@ export interface DroppableItemOptions {
 }
 export interface DroppableItemResult {
     dropProps: HTMLAttributes<HTMLElement>;
+    isDropTarget: boolean;
 }
 export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult;
 export interface DropIndicatorProps {
@@ -37,6 +50,8 @@ export interface DropIndicatorProps {
 }
 export interface DropIndicatorAria {
     dropIndicatorProps: HTMLAttributes<HTMLElement>;
+    isDropTarget: boolean;
+    isHidden: boolean;
 }
 export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria;
 export interface DragOptions {
@@ -75,5 +90,10 @@ export interface ClipboardResult {
     clipboardProps: DOMAttributes;
 }
 export function useClipboard(options: ClipboardProps): ClipboardResult;
+export class ListDropTargetDelegate implements DropTargetDelegate {
+    constructor(collection: Collection<Node<unknown>>, ref: RefObject<HTMLElement>);
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+}
+export type { DropTargetDelegate } from '@react-types/shared';
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;AKoBA;IACE,GAAG,EAAE,UAAU,WAAW,CAAC,CAAC;IAC5B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,KAAK,aAAa,CAAC;IAC5F,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,CAAC;IAC1H,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAGxC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;CAChC;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,YAAY,EAAE,OAAO,CAAA;CACtB;AAID,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,CAsMxD;ACvND,2CAA4C,SAAQ,wBAAwB;IAC1E,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,sBAAsB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,UAAU,GAAG,IAAI,CAAA;CACpE;AAED;IACE,eAAe,EAAE,eAAe,WAAW,CAAC,CAAA;CAC7C;AAWD,uCAAuC,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,yBAAyB,CA6ejK;ACngBD;IACE,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAA;CACvC;AAED,iCAAiC,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,mBAAmB,CAuCjJ;AC3CD;IACE,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;IACE,kBAAkB,EAAE,eAAe,WAAW,CAAC,CAAA;CAChD;AAED,iCAAiC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,iBAAiB,CAsD3I;AC7DD;IACE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,UAAU,mBAAmB,CAAC,CAAC;IACzC,wBAAwB,CAAC,EAAE,MAAM,aAAa,EAAE,CAAA;CACjD;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,OAAO,CAAA;CACpB;AAiBD,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,CAgKxD;AClMD;IACE,GAAG,EAAE,GAAG,CAAA;CACT;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAA;CACjC;AAED,iCAAiC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,wBAAwB,GAAG,mBAAmB,CAmChH;AChDD;IACE,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,OAAO,CAAA;CAC7C;AAkCD,OAAA,IAAI,yGAA4C,CAAC;AClCjD;IACE,QAAQ,CAAC,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;CACtC;AAED;IACE,cAAc,EAAE,aAAa,CAAA;CAC9B;AA6BD,6BAA6B,OAAO,EAAE,cAAc,GAAG,eAAe,CAkFrE","sources":["packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/constants.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/utils.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragManager.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useVirtualDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableCollection.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDropIndicator.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrag.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragPreview.tsx","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {DroppableCollectionOptions, DroppableCollectionResult} from './useDroppableCollection';\nexport type {DroppableItemOptions, DroppableItemResult} from './useDroppableItem';\nexport type {DropIndicatorProps, DropIndicatorAria} from './useDropIndicator';\nexport type {DraggableItemProps, DraggableItemResult} from './useDraggableItem';\nexport type {DragPreviewProps} from './DragPreview';\nexport type {DragOptions, DragResult} from './useDrag';\nexport type {DropOptions, DropResult} from './useDrop';\nexport type {ClipboardProps, ClipboardResult} from './useClipboard';\n\nexport {useDrag} from './useDrag';\nexport {useDrop} from './useDrop';\nexport {useDroppableCollection} from './useDroppableCollection';\nexport {useDroppableItem} from './useDroppableItem';\nexport {useDropIndicator} from './useDropIndicator';\nexport {useDraggableItem} from './useDraggableItem';\nexport {useClipboard} from './useClipboard';\nexport {DragPreview} from './DragPreview';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/constants.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/utils.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragManager.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useVirtualDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableCollection.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDropIndicator.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrag.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragPreview.tsx","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/ListDropTargetDelegate.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {DroppableCollectionOptions, DroppableCollectionResult} from './useDroppableCollection';\nexport type {DroppableItemOptions, DroppableItemResult} from './useDroppableItem';\nexport type {DropIndicatorProps, DropIndicatorAria} from './useDropIndicator';\nexport type {DraggableItemProps, DraggableItemResult} from './useDraggableItem';\nexport type {DragPreviewProps} from './DragPreview';\nexport type {DragOptions, DragResult} from './useDrag';\nexport type {DropOptions, DropResult} from './useDrop';\nexport type {ClipboardProps, ClipboardResult} from './useClipboard';\nexport type {DropTargetDelegate} from '@react-types/shared';\n\nexport {useDrag} from './useDrag';\nexport {useDrop} from './useDrop';\nexport {useDroppableCollection} from './useDroppableCollection';\nexport {useDroppableItem} from './useDroppableItem';\nexport {useDropIndicator} from './useDropIndicator';\nexport {useDraggableItem} from './useDraggableItem';\nexport {useClipboard} from './useClipboard';\nexport {DragPreview} from './DragPreview';\nexport {ListDropTargetDelegate} from './ListDropTargetDelegate';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/dnd",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.12",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -19,16 +19,16 @@
   "dependencies": {
     "@babel/runtime": "^7.6.2",
     "@internationalized/string": "^3.0.0",
-    "@react-aria/i18n": "^3.5.0",
-    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/i18n": "^3.6.0",
+    "@react-aria/interactions": "^3.11.0",
     "@react-aria/live-announcer": "^3.1.1",
-    "@react-aria/overlays": "^3.10.0",
-    "@react-aria/utils": "^3.13.2",
-    "@react-aria/visually-hidden": "^3.4.0",
-    "@react-stately/dnd": "3.0.0-alpha.9",
-    "@react-stately/selection": "^3.10.2",
-    "@react-types/button": "^3.6.0",
-    "@react-types/shared": "^3.14.0"
+    "@react-aria/overlays": "^3.10.1",
+    "@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"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
+  "gitHead": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
 }

package/src/DragManager.ts

@@ -75,7 +75,8 @@ export function beginDragging(target: DragTarget, stringFormatter: LocalizedStri
       getDragModality() === 'keyboard' ||
       (getDragModality() === 'touch' && getInteractionModality() === 'virtual')
     ) {
-      dragSession.next();
+      let target = dragSession.findNearestDropTarget();
+      dragSession.setCurrentDropTarget(target);
     }
   });
 
@@ -411,6 +412,25 @@ class DragSession {
     }
   }
 
+  findNearestDropTarget(): DropTarget {
+    let dragTargetRect = this.dragTarget.element.getBoundingClientRect();
+
+    let minDistance = Infinity;
+    let nearest = null;
+    for (let dropTarget of this.validDropTargets) {
+      let rect = dropTarget.element.getBoundingClientRect();
+      let dx = rect.left - dragTargetRect.left;
+      let dy = rect.top - dragTargetRect.top;
+      let dist = (dx * dx) + (dy * dy);
+      if (dist < minDistance) {
+        minDistance = dist;
+        nearest = dropTarget;
+      }
+    }
+
+    return nearest;
+  }
+
   setCurrentDropTarget(dropTarget: DropTarget, item?: DroppableItem) {
     if (dropTarget !== this.currentDropTarget) {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {

package/src/ListDropTargetDelegate.ts

@@ -0,0 +1,90 @@
+import {Collection, DropTarget, DropTargetDelegate, Node} from '@react-types/shared';
+import {RefObject} from 'react';
+
+export class ListDropTargetDelegate implements DropTargetDelegate {
+  private collection: Collection<Node<unknown>>;
+  private ref: RefObject<HTMLElement>;
+
+  constructor(collection: Collection<Node<unknown>>, ref: RefObject<HTMLElement>) {
+    this.collection = collection;
+    this.ref = ref;
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    if (this.collection.size === 0) {
+      return;
+    }
+
+    let rect = this.ref.current.getBoundingClientRect();
+    x += rect.x;
+    y += rect.y;
+
+    let elements = this.ref.current.querySelectorAll('[data-key]');
+    let elementMap = new Map<string, HTMLElement>();
+    for (let item of elements) {
+      if (item instanceof HTMLElement) {
+        elementMap.set(item.dataset.key, item);
+      }
+    }
+
+    let items = [...this.collection];
+    let low = 0;
+    let high = items.length;
+    while (low < high) {
+      let mid = Math.floor((low + high) / 2);
+      let item = items[mid];
+      let element = elementMap.get(String(item.key));
+      let rect = element.getBoundingClientRect();
+
+      if (y < rect.top) {
+        high = mid;
+      } else if (y > rect.bottom) {
+        low = mid + 1;
+      } else {
+        let target: DropTarget = {
+          type: 'item',
+          key: item.key,
+          dropPosition: 'on'
+        };
+
+        if (isValidDropTarget(target)) {
+          // Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px
+          // of the top or bottom of the item.
+          if (y <= rect.top + 5 && isValidDropTarget({...target, dropPosition: 'before'})) {
+            target.dropPosition = 'before';
+          } else if (y >= rect.bottom - 5 && isValidDropTarget({...target, dropPosition: 'after'})) {
+            target.dropPosition = 'after';
+          }
+        } else {
+          // If dropping on the item isn't accepted, try the target before or after depending on the y position.
+          let midY = rect.top + rect.height / 2;
+          if (y <= midY && isValidDropTarget({...target, dropPosition: 'before'})) {
+            target.dropPosition = 'before';
+          } else if (y >= midY && isValidDropTarget({...target, dropPosition: 'after'})) {
+            target.dropPosition = 'after';
+          }
+        }
+
+        return target;
+      }
+    }
+
+    let item = items[Math.min(low, items.length - 1)];
+    let element = elementMap.get(String(item.key));
+    rect = element.getBoundingClientRect();
+
+    if (Math.abs(y - rect.top) < Math.abs(y - rect.bottom)) {
+      return {
+        type: 'item',
+        key: item.key,
+        dropPosition: 'before'
+      };
+    }
+
+    return {
+      type: 'item',
+      key: item.key,
+      dropPosition: 'after'
+    };
+  }
+}

package/src/index.ts

@@ -18,6 +18,7 @@ export type {DragPreviewProps} from './DragPreview';
 export type {DragOptions, DragResult} from './useDrag';
 export type {DropOptions, DropResult} from './useDrop';
 export type {ClipboardProps, ClipboardResult} from './useClipboard';
+export type {DropTargetDelegate} from '@react-types/shared';
 
 export {useDrag} from './useDrag';
 export {useDrop} from './useDrop';
@@ -27,3 +28,4 @@ export {useDropIndicator} from './useDropIndicator';
 export {useDraggableItem} from './useDraggableItem';
 export {useClipboard} from './useClipboard';
 export {DragPreview} from './DragPreview';
+export {ListDropTargetDelegate} from './ListDropTargetDelegate';

package/src/useDraggableItem.ts

@@ -34,6 +34,7 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
       return state.getItems(props.key);
     },
     preview: state.preview,
+    getAllowedDropOperations: state.getAllowedDropOperations,
     onDragStart(e) {
       state.startDrag(props.key, e);
     },

package/src/useDrop.ts

@@ -20,14 +20,24 @@ import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DropOptions {
   ref: RefObject<HTMLElement>,
+  /**
+   * A function returning the drop operation to be performed when items matching the given types are dropped
+   * on the drop target.
+   */
   getDropOperation?: (types: IDragTypes, allowedOperations: DropOperation[]) => DropOperation,
   getDropOperationForPoint?: (types: IDragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation,
+  /** Handler that is called when a valid drag enters the drop target. */
   onDropEnter?: (e: DropEnterEvent) => void,
+  /** Handler that is called when a valid drag is moved within the drop target. */
   onDropMove?: (e: DropMoveEvent) => void,
-  // When the user hovers over the drop target for a period of time.
-  // typically opens that item. macOS/iOS call this "spring loading".
+  /**
+   * 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.
+   */
   onDropActivate?: (e: DropActivateEvent) => void,
+  /** Handler that is called when a valid drag exits the drop target. */
   onDropExit?: (e: DropExitEvent) => void,
+  /** Handler that is called when a valid drag is dropped on the drop target. */
   onDrop?: (e: DropEvent) => void
 }
 
@@ -43,16 +53,43 @@ export function useDrop(options: DropOptions): DropResult {
   let state = useRef({
     x: 0,
     y: 0,
-    dragEnterCount: 0,
+    dragOverElements: new Set<Element>(),
     dropEffect: 'none' as DataTransfer['dropEffect'],
+    effectAllowed: 'none' as DataTransfer['effectAllowed'],
     dropActivateTimer: null
   }).current;
 
+  let fireDropEnter = (e: DragEvent) => {
+    setDropTarget(true);
+
+    if (typeof options.onDropEnter === 'function') {
+      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      options.onDropEnter({
+        type: 'dropenter',
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      });
+    }
+  };
+
+  let fireDropExit = (e: DragEvent) => {
+    setDropTarget(false);
+
+    if (typeof options.onDropExit === 'function') {
+      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      options.onDropExit({
+        type: 'dropexit',
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      });
+    }
+  };
+
   let onDragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (e.clientX === state.x && e.clientY === state.y) {
+    if (e.clientX === state.x && e.clientY === state.y && e.dataTransfer.effectAllowed === state.effectAllowed) {
       e.dataTransfer.dropEffect = state.dropEffect;
       return;
     }
@@ -60,17 +97,42 @@ export function useDrop(options: DropOptions): DropResult {
     state.x = e.clientX;
     state.y = e.clientY;
 
+    let prevDropEffect = state.dropEffect;
+
+    // Update drop effect if allowed drop operations changed (e.g. user pressed modifier key).
+    if (e.dataTransfer.effectAllowed !== state.effectAllowed) {
+      let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
+      let dropOperation = allowedOperations[0];
+      if (typeof options.getDropOperation === 'function') {
+        let types = new DragTypes(e.dataTransfer);
+        dropOperation = getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
+      }
+
+      state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
+    }
+
     if (typeof options.getDropOperationForPoint === 'function') {
       let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      let dropOperation = options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y);
+      let dropOperation = getDropOperation(
+        e.dataTransfer.effectAllowed,
+        options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y)
+      );
       state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     }
 
+    state.effectAllowed = e.dataTransfer.effectAllowed;
     e.dataTransfer.dropEffect = state.dropEffect;
 
-    if (typeof options.onDropMove === 'function') {
+    // If the drop operation changes, update state and fire events appropriately.
+    if (state.dropEffect === 'none' && prevDropEffect !== 'none') {
+      fireDropExit(e);
+    } else if (state.dropEffect !== 'none' && prevDropEffect === 'none') {
+      fireDropEnter(e);
+    }
+
+    if (typeof options.onDropMove === 'function' && state.dropEffect !== 'none') {
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       options.onDropMove({
         type: 'dropmove',
@@ -95,8 +157,8 @@ export function useDrop(options: DropOptions): DropResult {
 
   let onDragEnter = (e: DragEvent) => {
     e.stopPropagation();
-    state.dragEnterCount++;
-    if (state.dragEnterCount > 1) {
+    state.dragOverElements.add(e.target as Element);
+    if (state.dragOverElements.size > 1) {
       return;
     }
 
@@ -105,52 +167,55 @@ export function useDrop(options: DropOptions): DropResult {
 
     if (typeof options.getDropOperation === 'function') {
       let types = new DragTypes(e.dataTransfer);
-      dropOperation = options.getDropOperation(types, allowedOperations);
-    }
-
-    if (dropOperation !== 'cancel') {
-      setDropTarget(true);
+      dropOperation = getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
     }
 
     if (typeof options.getDropOperationForPoint === 'function') {
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      dropOperation = options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y);
+      dropOperation = getDropOperation(
+        e.dataTransfer.effectAllowed,
+        options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y)
+      );
     }
 
+    state.x = e.clientX;
+    state.y = e.clientY;
+    state.effectAllowed = e.dataTransfer.effectAllowed;
     state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     e.dataTransfer.dropEffect = state.dropEffect;
 
-    if (typeof options.onDropEnter === 'function' && dropOperation !== 'cancel') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropEnter({
-        type: 'dropenter',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+    if (dropOperation !== 'cancel') {
+      fireDropEnter(e);
     }
-
-    state.x = e.clientX;
-    state.y = e.clientY;
   };
 
   let onDragLeave = (e: DragEvent) => {
     e.stopPropagation();
-    state.dragEnterCount--;
-    if (state.dragEnterCount > 0) {
+
+    // We would use e.relatedTarget to detect if the drag is still inside the drop target,
+    // but it is always null in WebKit. https://bugs.webkit.org/show_bug.cgi?id=66547
+    // Instead, we track all of the targets of dragenter events in a set, and remove them
+    // in dragleave. When the set becomes empty, we've left the drop target completely.
+    // We must also remove any elements that are no longer in the DOM, because dragleave
+    // events will never be fired for these. This can happen, for example, with drop
+    // indicators between items, which disappear when the drop target changes.
+
+    state.dragOverElements.delete(e.target as Element);
+    for (let element of state.dragOverElements) {
+      if (!e.currentTarget.contains(element)) {
+        state.dragOverElements.delete(element);
+      }
+    }
+
+    if (state.dragOverElements.size > 0) {
       return;
     }
 
-    if (typeof options.onDropExit === 'function' && state.dropEffect !== 'none') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropExit({
-        type: 'dropexit',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+    if (state.dropEffect !== 'none') {
+      fireDropExit(e);
     }
 
-    setDropTarget(false);
     clearTimeout(state.dropActivateTimer);
   };
 
@@ -180,17 +245,8 @@ export function useDrop(options: DropOptions): DropResult {
       }, 0);
     }
 
-    if (typeof options.onDropExit === 'function') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropExit({
-        type: 'dropexit',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
-    }
-
-    state.dragEnterCount = 0;
-    setDropTarget(false);
+    state.dragOverElements.clear();
+    fireDropExit(e);
     clearTimeout(state.dropActivateTimer);
   };
 
@@ -255,3 +311,9 @@ function effectAllowedToOperations(effectAllowed: string) {
 
   return allowedOperations;
 }
+
+function getDropOperation(effectAllowed: string, operation: DropOperation) {
+  let allowedOperationsBits = DROP_OPERATION_ALLOWED[effectAllowed];
+  let op = DROP_OPERATION[operation];
+  return allowedOperationsBits & op ? operation : 'cancel';
+}

package/src/useDropIndicator.ts

@@ -26,7 +26,9 @@ export interface DropIndicatorProps {
 }
 
 export interface DropIndicatorAria {
-  dropIndicatorProps: HTMLAttributes<HTMLElement>
+  dropIndicatorProps: HTMLAttributes<HTMLElement>,
+  isDropTarget: boolean,
+  isHidden: boolean
 }
 
 export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria {
@@ -72,6 +74,8 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
     }
   }
 
+  let isDropTarget = state.isDropTarget(target);
+  let ariaHidden = !dragSession ? 'true' : dropProps['aria-hidden'];
   return {
     dropIndicatorProps: {
       ...dropProps,
@@ -79,8 +83,13 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
       'aria-roledescription': stringFormatter.format('dropIndicator'),
       'aria-label': label,
       'aria-labelledby': labelledBy,
-      'aria-hidden': !dragSession ? 'true' : dropProps['aria-hidden'],
+      'aria-hidden': ariaHidden,
       tabIndex: -1
-    }
+    },
+    isDropTarget,
+    // If aria-hidden, we are either not in a drag session or the drop target is invalid.
+    // In that case, there's no need to render anything at all unless we need to show the indicator visually.
+    // This can happen when dragging using the native DnD API as opposed to keyboard dragging.
+    isHidden: !isDropTarget && !!ariaHidden
   };
 }

package/src/useDroppableCollection.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate, Node} from '@react-types/shared';
+import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, DropTargetDelegate, KeyboardDelegate, Node} from '@react-types/shared';
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
@@ -23,7 +23,7 @@ import {useDroppableCollectionId} from './utils';
 
 export interface DroppableCollectionOptions extends DroppableCollectionProps {
   keyboardDelegate: KeyboardDelegate,
-  getDropTargetFromPoint: (x: number, y: number) => DropTarget | null
+  dropTargetDelegate: DropTargetDelegate
 }
 
 export interface DroppableCollectionResult {
@@ -52,16 +52,16 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
   let autoScroll = useAutoScroll(ref);
   let {dropProps} = useDrop({
     ref,
-    onDropEnter(e) {
-      let target = props.getDropTargetFromPoint(e.x, e.y);
-      state.setTarget(target);
+    onDropEnter() {
+      state.setTarget(localState.nextTarget);
     },
     onDropMove(e) {
       state.setTarget(localState.nextTarget);
       autoScroll.move(e.x, e.y);
     },
     getDropOperationForPoint(types, allowedOperations, x, y) {
-      let target = props.getDropTargetFromPoint(x, y);
+      let isValidDropTarget = (target) => state.getDropOperation(target, types, allowedOperations) !== 'cancel';
+      let target = props.dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
       if (!target) {
         localState.dropOperation = 'cancel';
         localState.nextTarget = null;

package/src/useDroppableItem.ts

@@ -22,7 +22,8 @@ export interface DroppableItemOptions {
 }
 
 export interface DroppableItemResult {
-  dropProps: HTMLAttributes<HTMLElement>
+  dropProps: HTMLAttributes<HTMLElement>,
+  isDropTarget: boolean
 }
 
 export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult {
@@ -62,6 +63,7 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
     dropProps: {
       ...dropProps,
       'aria-hidden': !dragSession || isValidDropTarget ? undefined : 'true'
-    }
+    },
+    isDropTarget
   };
 }