@react-aria/dnd 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/types.d.ts

@@ -1,13 +1,13 @@
 import { AriaButtonProps } from "@react-types/button";
-import { DragEndEvent, DragItem, DragMoveEvent, DragStartEvent, DropOperation, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DropItem } from "@react-types/shared";
-import { HTMLAttributes, RefObject, Key } from "react";
+import { DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DropItem } from "@react-types/shared";
+import React, { HTMLAttributes, RefObject, Key } from "react";
 import { DroppableCollectionState, DraggableCollectionState } from "@react-stately/dnd";
 interface DragOptions {
     onDragStart?: (e: DragStartEvent) => void;
     onDragMove?: (e: DragMoveEvent) => void;
     onDragEnd?: (e: DragEndEvent) => void;
     getItems: () => DragItem[];
-    renderPreview?: (items: DragItem[]) => JSX.Element;
+    preview?: RefObject<DragPreviewRenderer>;
     getAllowedDropOperations?: () => DropOperation[];
 }
 interface DragResult {
@@ -31,32 +31,32 @@ interface DropResult {
     isDropTarget: boolean;
 }
 export function useDrop(options: DropOptions): DropResult;
-interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DroppableCollectionProps {
     keyboardDelegate: KeyboardDelegate;
     getDropTargetFromPoint: (x: number, y: number) => DropTarget | null;
 }
-interface DroppableCollectionResult {
+export interface DroppableCollectionResult {
     collectionProps: HTMLAttributes<HTMLElement>;
 }
 export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult;
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
     target: DropTarget;
 }
-interface DroppableItemResult {
+export interface DroppableItemResult {
     dropProps: HTMLAttributes<HTMLElement>;
 }
 export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult;
-interface DropIndicatorProps {
+export interface DropIndicatorProps {
     target: DropTarget;
 }
-interface DropIndicatorAria {
+export interface DropIndicatorAria {
     dropIndicatorProps: HTMLAttributes<HTMLElement>;
 }
 export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria;
-interface DraggableItemProps {
+export interface DraggableItemProps {
     key: Key;
 }
-interface DraggableItemResult {
+export interface DraggableItemResult {
     dragProps: HTMLAttributes<HTMLElement>;
     dragButtonProps: AriaButtonProps;
 }
@@ -71,5 +71,9 @@ interface ClipboardResult {
     clipboardProps: HTMLAttributes<HTMLElement>;
 }
 export function useClipboard(options: ClipboardProps): ClipboardResult;
+export interface DragPreviewProps {
+    children: (items: DragItem[]) => JSX.Element;
+}
+export let DragPreview: React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer>>;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"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/useDrag.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/useAutoScroll.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/useDraggableItem.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null],"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/useDrag.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/useAutoScroll.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/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragPreview.tsx","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 * from './useDrag';\nexport * from './useDrop';\nexport * from './useDroppableCollection';\nexport * from './useDroppableItem';\nexport * from './useDropIndicator';\nexport * from './useDraggableItem';\nexport * from './useClipboard';\nexport {DragPreview} from './DragPreview';\n\nexport type {DragPreviewProps} from './DragPreview';\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.1",
+  "version": "3.0.0-alpha.10",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,23 +18,23 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.1",
-    "@react-aria/interactions": "^3.4.0",
-    "@react-aria/live-announcer": "^3.0.0",
-    "@react-aria/overlays": "^3.6.3",
-    "@react-aria/utils": "^3.8.0",
-    "@react-aria/visually-hidden": "^3.2.2",
-    "@react-stately/dnd": "3.0.0-alpha.1",
-    "@react-stately/selection": "^3.5.0",
-    "@react-types/button": "^3.2.1",
-    "@react-types/shared": "^3.6.0"
+    "@react-aria/i18n": "^3.4.1",
+    "@react-aria/interactions": "^3.9.1",
+    "@react-aria/live-announcer": "^3.1.0",
+    "@react-aria/overlays": "^3.9.1",
+    "@react-aria/utils": "^3.13.1",
+    "@react-aria/visually-hidden": "^3.3.1",
+    "@react-stately/dnd": "3.0.0-alpha.8",
+    "@react-stately/selection": "^3.10.1",
+    "@react-types/button": "^3.5.1",
+    "@react-types/shared": "^3.13.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
+  "gitHead": "715c3f563ccf8c2e0102d3e18403d9db21a05a71"
 }

package/src/DragManager.ts

@@ -101,6 +101,16 @@ function endDragging() {
   }
 }
 
+export function isValidDropTarget(element: Element): boolean {
+  for (let target of dropTargets.keys()) {
+    if (target.contains(element)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 const CANCELED_EVENTS = [
   'pointerdown',
   'pointermove',
@@ -146,6 +156,8 @@ class DragSession {
   private mutationImmediate: NodeJS.Immediate;
   private restoreAriaHidden: () => void;
   private formatMessage: (key: string) => string;
+  private isVirtualClick: boolean;
+  private initialFocused: boolean;
 
   constructor(target: DragTarget, formatMessage: (key: string) => string) {
     this.dragTarget = target;
@@ -155,7 +167,9 @@ class DragSession {
     this.onFocus = this.onFocus.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onClick = this.onClick.bind(this);
+    this.onPointerDown = this.onPointerDown.bind(this);
     this.cancelEvent = this.cancelEvent.bind(this);
+    this.initialFocused = false;
   }
 
   setup() {
@@ -163,22 +177,15 @@ class DragSession {
     window.addEventListener('focus', this.onFocus, true);
     window.addEventListener('blur', this.onBlur, true);
     document.addEventListener('click', this.onClick, true);
+    document.addEventListener('pointerdown', this.onPointerDown, true);
 
     for (let event of CANCELED_EVENTS) {
       document.addEventListener(event, this.cancelEvent, true);
     }
 
-    this.mutationObserver = new MutationObserver(() => {
-      // JSDOM has a bug where MutationObserver enters an infinite loop if mutations
-      // occur inside a MutationObserver callback. If running in Node, wait until
-      // the next tick to update valid drop targets.
-      // See https://github.com/jsdom/jsdom/issues/3096
-      if (typeof setImmediate === 'function') {
-        this.mutationImmediate = setImmediate(() => this.updateValidDropTargets());
-      } else {
-        this.updateValidDropTargets();
-      }
-    });
+    this.mutationObserver = new MutationObserver(() =>
+      this.updateValidDropTargets()
+    );
     this.updateValidDropTargets();
 
     announce(this.formatMessage(MESSAGES[getDragModality()]));
@@ -189,6 +196,7 @@ class DragSession {
     window.removeEventListener('focus', this.onFocus, true);
     window.removeEventListener('blur', this.onBlur, true);
     document.removeEventListener('click', this.onClick, true);
+    document.removeEventListener('pointerdown', this.onPointerDown, true);
 
     for (let event of CANCELED_EVENTS) {
       document.removeEventListener(event, this.cancelEvent, true);
@@ -274,25 +282,34 @@ class DragSession {
 
   onClick(e: MouseEvent) {
     this.cancelEvent(e);
+    if (e.detail === 0 || this.isVirtualClick) {
+      if (e.target === this.dragTarget.element) {
+        this.cancel();
+        return;
+      }
 
-    if (e.detail !== 0) {
-      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);
+      }
     }
+  }
 
-    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);
-    }
+  onPointerDown(e: PointerEvent) {
+    // Android Talkback double tap has e.detail = 1 for onClick. Detect the virtual click in onPointerDown before onClick fires
+    // so we can properly perform cancel and drop operations.
+    this.cancelEvent(e);
+    this.isVirtualClick = isVirtualPointerEvent(e);
   }
 
   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) {
+      return;
+    }
+
     // Allow default for events that might cancel a click event
     if (!CLICK_EVENTS.includes(e.type)) {
       e.preventDefault();
@@ -431,6 +448,13 @@ class DragSession {
 
       item?.element.focus();
       this.currentDropItem = item;
+
+      // Annouce first drop target after drag start announcement finishes.
+      // Otherwise, it will never get announced because drag start announcement is assertive.
+      if (!this.initialFocused) {
+        announce(item?.element.getAttribute('aria-label'), 'polite');
+        this.initialFocused = true;
+      }
     }
   }
 
@@ -448,6 +472,12 @@ class DragSession {
       });
     }
 
+    // Blur and re-focus the drop target so that the focus ring appears.
+    if (this.currentDropTarget) {
+      this.currentDropTarget.element.blur();
+      this.currentDropTarget.element.focus();
+    }
+
     this.setCurrentDropTarget(null);
     endDragging();
   }
@@ -525,3 +555,19 @@ function findValidDropTargets(options: DragTarget) {
     return true;
   });
 }
+
+function isVirtualPointerEvent(event: PointerEvent) {
+  // If the pointer size is zero, then we assume it's from a screen reader.
+  // Android TalkBack double tap will sometimes return a event with width and height of 1
+  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
+  return (
+    (event.width === 0 && event.height === 0) ||
+    (event.width === 1 &&
+      event.height === 1 &&
+      event.pressure === 0 &&
+      event.detail === 0
+    )
+  );
+}

package/src/DragPreview.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DragItem, DragPreviewRenderer} from '@react-types/shared';
+import {flushSync} from 'react-dom';
+import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
+
+export interface DragPreviewProps {
+  children: (items: DragItem[]) => JSX.Element
+}
+
+function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
+  let render = props.children;
+  let [children, setChildren] = useState<JSX.Element>(null);
+  let domRef = useRef(null);
+
+  useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {
+    // This will be called during the onDragStart event by useDrag. We need to render the
+    // preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
+    flushSync(() => {
+      setChildren(render(items));
+    });
+
+    // Yield back to useDrag to set the drag image.
+    callback(domRef.current);
+
+    // Remove the preview from the DOM after a frame so the browser has time to paint.
+    requestAnimationFrame(() => {
+      setChildren(null);
+    });
+  }, [render]);
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div style={{zIndex: -100, position: 'absolute', top: 0, left: -100000}} ref={domRef}>
+      {children}
+    </div>
+  );
+}
+
+let _DragPreview = React.forwardRef(DragPreview);
+export {_DragPreview as DragPreview};

package/src/constants.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {DropOperation} from '@react-types/shared';
+
 export enum DROP_OPERATION {
   none = 0,
   cancel = 0,
@@ -31,7 +33,7 @@ export const DROP_OPERATION_ALLOWED = {
 
 export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED);
 export const DROP_EFFECT = invert(DROP_OPERATION);
-export const DROP_EFFECT_TO_DROP_OPERATION = {
+export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = {
   none: 'cancel',
   link: 'link',
   copy: 'copy',

package/src/index.ts

@@ -17,3 +17,6 @@ export * from './useDroppableItem';
 export * from './useDropIndicator';
 export * from './useDraggableItem';
 export * from './useClipboard';
+export {DragPreview} from './DragPreview';
+
+export type {DragPreviewProps} from './DragPreview';

package/src/useDrag.ts

@@ -11,14 +11,13 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {DragEndEvent, DragItem, DragMoveEvent, DragStartEvent, DropOperation, PressEvent} from '@react-types/shared';
-import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
+import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent} from '@react-types/shared';
+import {DragEvent, HTMLAttributes, RefObject, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import ReactDOM from 'react-dom';
-import {useDescription} from '@react-aria/utils';
+import {useDescription, useGlobalListeners} from '@react-aria/utils';
 import {useDragModality} from './utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {writeToDataTransfer} from './utils';
@@ -28,7 +27,7 @@ interface DragOptions {
   onDragMove?: (e: DragMoveEvent) => void,
   onDragEnd?: (e: DragEndEvent) => void,
   getItems: () => DragItem[],
-  renderPreview?: (items: DragItem[]) => JSX.Element,
+  preview?: RefObject<DragPreviewRenderer>,
   getAllowedDropOperations?: () => DropOperation[]
 }
 
@@ -62,8 +61,21 @@ export function useDrag(options: DragOptions): DragResult {
   }).current;
   state.options = options;
   let [isDragging, setDragging] = useState(false);
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
   let onDragStart = (e: DragEvent) => {
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (typeof options.onDragStart === 'function') {
+      options.onDragStart({
+        type: 'dragstart',
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+
     let items = options.getItems();
     writeToDataTransfer(e.dataTransfer, items);
 
@@ -77,22 +89,10 @@ export function useDrag(options: DragOptions): DragResult {
       e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
     }
 
-    // If there is a renderPreview function, use it to render a custom preview image that will
+    // If there is a preview option, use it to render a custom preview image that will
     // appear under the pointer while dragging. If not, the element itself is dragged by the browser.
-    if (typeof options.renderPreview === 'function') {
-      let preview = options.renderPreview(items);
-      if (preview) {
-        // Create an off-screen div to render the preview into.
-        let node = document.createElement('div');
-        node.style.zIndex = '-100';
-        node.style.position = 'absolute';
-        node.style.top = '0';
-        node.style.left = '-100000px';
-        document.body.appendChild(node);
-
-        // Call renderPreview to get a JSX element, and render it into the div with React DOM.
-        ReactDOM.render(preview, node);
-
+    if (typeof options.preview?.current === 'function') {
+      options.preview.current(items, node => {
         // Compute the offset that the preview will appear under the mouse.
         // If possible, this is based on the point the user clicked on the target.
         // If the preview is much smaller, then just use the center point of the preview.
@@ -105,23 +105,23 @@ export function useDrag(options: DragOptions): DragResult {
           y = size.height / 2;
         }
 
-        e.dataTransfer.setDragImage(node, x, y);
-
-        // Remove the preview from the DOM after a frame so the browser has time to paint.
-        requestAnimationFrame(() => {
-          document.body.removeChild(node);
-        });
-      }
-    }
+        // Rounding height to an even number prevents blurry preview seen on some screens
+        let height = 2 * Math.round(rect.height / 2);
+        node.style.height = `${height}px`;
 
-    if (typeof options.onDragStart === 'function') {
-      options.onDragStart({
-        type: 'dragstart',
-        x: e.clientX,
-        y: e.clientY
+        e.dataTransfer.setDragImage(node, x, y);
       });
     }
 
+    // Enforce that drops are handled by useDrop.
+    addGlobalListener(window, 'drop', e => {
+      if (!DragManager.isValidDropTarget(e.target as Element)) {
+        e.preventDefault();
+        e.stopPropagation();
+        throw new Error('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');
+      }
+    }, {capture: true, once: true});
+
     state.x = e.clientX;
     state.y = e.clientY;
 
@@ -160,6 +160,7 @@ export function useDrag(options: DragOptions): DragResult {
     }
 
     setDragging(false);
+    removeAllGlobalListeners();
   };
 
   let onPress = (e: PressEvent) => {

package/src/useDraggableItem.ts

@@ -18,11 +18,11 @@ import intlMessages from '../intl/*.json';
 import {useDrag} from './useDrag';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-interface DraggableItemProps {
+export interface DraggableItemProps {
   key: Key
 }
 
-interface DraggableItemResult {
+export interface DraggableItemResult {
   dragProps: HTMLAttributes<HTMLElement>,
   dragButtonProps: AriaButtonProps
 }
@@ -33,9 +33,7 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
     getItems() {
       return state.getItems(props.key);
     },
-    renderPreview() {
-      return state.renderPreview(props.key);
-    },
+    preview: state.preview,
     onDragStart(e) {
       state.startDrag(props.key, e);
     },
@@ -48,11 +46,11 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
   });
 
   let item = state.collection.getItem(props.key);
-  let numSelectedKeys = state.selectionManager.selectedKeys.size;
+  let numKeysForDrag = state.getKeysForDrag(props.key).size;
   let isSelected = state.selectionManager.isSelected(props.key);
   let message: string;
-  if (isSelected && numSelectedKeys > 1) {
-    message = formatMessage('dragSelectedItems', {count: numSelectedKeys});
+  if (isSelected && numKeysForDrag > 1) {
+    message = formatMessage('dragSelectedItems', {count: numKeysForDrag});
   } else {
     message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});
   }

package/src/useDrop.ts

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {DragEvent, HTMLAttributes, RefObject, useLayoutEffect, useRef, useState} from 'react';
+import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, readFromDataTransfer} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
 import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes} from '@react-types/shared';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 interface DropOptions {
@@ -43,12 +44,13 @@ export function useDrop(options: DropOptions): DropResult {
     x: 0,
     y: 0,
     dragEnterCount: 0,
-    dropEffect: 'none',
+    dropEffect: 'none' as DataTransfer['dropEffect'],
     dropActivateTimer: null
   }).current;
 
   let onDragOver = (e: DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
 
     if (e.clientX === state.x && e.clientY === state.y) {
       e.dataTransfer.dropEffect = state.dropEffect;
@@ -92,6 +94,7 @@ export function useDrop(options: DropOptions): DropResult {
   };
 
   let onDragEnter = (e: DragEvent) => {
+    e.stopPropagation();
     state.dragEnterCount++;
     if (state.dragEnterCount > 1) {
       return;
@@ -132,6 +135,7 @@ export function useDrop(options: DropOptions): DropResult {
   };
 
   let onDragLeave = (e: DragEvent) => {
+    e.stopPropagation();
     state.dragEnterCount--;
     if (state.dragEnterCount > 0) {
       return;
@@ -152,6 +156,7 @@ export function useDrop(options: DropOptions): DropResult {
 
   let onDrop = (e: DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
 
     if (typeof options.onDrop === 'function') {
       let dropOperation = DROP_EFFECT_TO_DROP_OPERATION[state.dropEffect];

package/src/useDropIndicator.ts

@@ -21,11 +21,11 @@ import {useDroppableItem} from './useDroppableItem';
 import {useId} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-interface DropIndicatorProps {
+export interface DropIndicatorProps {
   target: DropTarget
 }
 
-interface DropIndicatorAria {
+export interface DropIndicatorAria {
   dropIndicatorProps: HTMLAttributes<HTMLElement>
 }
 

package/src/useDroppableCollection.ts

@@ -14,19 +14,19 @@ import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosi
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
-import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useLayoutEffect, useRef} from 'react';
-import {mergeProps} from '@react-aria/utils';
+import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useDroppableCollectionId} from './utils';
 
-interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DroppableCollectionProps {
   keyboardDelegate: KeyboardDelegate,
   getDropTargetFromPoint: (x: number, y: number) => DropTarget | null
 }
 
-interface DroppableCollectionResult {
+export interface DroppableCollectionResult {
   collectionProps: HTMLAttributes<HTMLElement>
 }
 
@@ -68,11 +68,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         return 'cancel';
       }
 
-      if (state.isDropTarget(target)) {
-        localState.nextTarget = target;
-        return localState.dropOperation;
-      }
-
       localState.dropOperation = state.getDropOperation(target, types, allowedOperations);
 
       // If the target doesn't accept the drop, see if the root accepts it instead.

package/src/useDroppableItem.ts

@@ -17,11 +17,11 @@ import {getTypes} from './utils';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
   target: DropTarget
 }
 
-interface DroppableItemResult {
+export interface DroppableItemResult {
   dropProps: HTMLAttributes<HTMLElement>
 }