@react-aria/dnd 3.0.0-alpha.9 → 3.0.0-nightly-4980928d3-240906

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,2BAA2B,CAAC,uEAAe,CAAC;IAC9D,8BAA8B,CAAC,2EAAmB,CAAC;IACnD,4BAA4B,CAAC,gEAAQ,CAAC;IACtC,wBAAwB,CAAC,gFAAU,CAAC;IACpC,0BAA0B,CAAC,wFAAW,CAAC;IACvC,YAAY,CAAC,OAAS,CAAC,wBAAG,EAAE,KAAK,QAAQ,CAAC,QAAC,CAAC;IAC5C,qBAAqB,CAAC,MAAM,YAAc,CAAC,iBAAG,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,CAAC;IAC1L,wBAAwB,CAAC,MAAM,YAAc,CAAC,gDAAa,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IACxM,2BAA2B,CAAC,MAAM,YAAc,CAAC,oDAAiB,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IAC/M,yBAAyB,CAAC,MAAM,YAAc,CAAC,yCAAM,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;YAAE,OAAO,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yCAAM,CAAC;QAAA,GAAG,QAAC,CAAC;IAClM,uBAAuB,CAAC,oRAAoD,CAAC;IAC7E,oBAAoB,CAAC,gMAAwB,CAAC;IAC9C,sBAAsB,CAAC,uOAAmC,CAAC;IAC3D,gBAAgB,CAAC,gDAAM,CAAC;IACxB,gBAAgB,CAAC,gDAAM,CAAC;IACxB,2BAA2B,CAAC,+HAA6B,CAAC;IAC1D,wBAAwB,CAAC,gEAAQ,CAAC;IAClC,0BAA0B,CAAC,wEAAS,CAAC;IACrC,iBAAiB,CAAC,wCAAK,CAAC;IACxB,cAAc,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,gBAAE,CAAC;IAChD,cAAc,CAAC,wBAAG,CAAC;IACnB,mBAAmB,CAAC,uGAAmB,CAAC;IACxC,gBAAgB,CAAC,gHAAc,CAAC;IAChC,kBAAkB,CAAC,wHAAe,CAAC;IACnC,eAAe,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,wBAAG,CAAC;IAClD,gBAAgB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,QAAQ,CAAC,wBAAG,CAAC;IACnD,iBAAiB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,cAAc,CAAC,wBAAG,EAAE,KAAK,aAAa,CAAC,wBAAG,CAAC;AACpF","sources":["packages/@react-aria/dnd/intl/zh-TW.json"],"sourcesContent":["{\n  \"dragDescriptionKeyboard\": \"按 Enter 鍵以開始拖曳。\",\n  \"dragDescriptionKeyboardAlt\": \"按 Alt+Enter 鍵以開始拖曳。\",\n  \"dragDescriptionLongPress\": \"長按以開始拖曳。\",\n  \"dragDescriptionTouch\": \"輕點兩下以開始拖曳。\",\n  \"dragDescriptionVirtual\": \"按一下滑鼠以開始拖曳。\",\n  \"dragItem\": \"拖曳「{itemText}」\",\n  \"dragSelectedItems\": \"拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}\",\n  \"dragSelectedKeyboard\": \"按 Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n  \"dragSelectedKeyboardAlt\": \"按 Alt+Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n  \"dragSelectedLongPress\": \"長按以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。\",\n  \"dragStartedKeyboard\": \"已開始拖曳。按 Tab 鍵以瀏覽至放置目標，然後按 Enter 鍵以放置，或按 Escape 鍵以取消。\",\n  \"dragStartedTouch\": \"已開始拖曳。瀏覽至放置目標，然後輕點兩下以放置。\",\n  \"dragStartedVirtual\": \"已開始拖曳。瀏覽至放置目標，然後按一下滑鼠或按 Enter 鍵以放置。\",\n  \"dropCanceled\": \"放置已取消。\",\n  \"dropComplete\": \"放置已完成。\",\n  \"dropDescriptionKeyboard\": \"按 Enter 鍵以放置。按 Escape 鍵以取消拖曳。\",\n  \"dropDescriptionTouch\": \"輕點兩下以放置。\",\n  \"dropDescriptionVirtual\": \"按一下滑鼠以放置。\",\n  \"dropIndicator\": \"放置指示器\",\n  \"dropOnItem\": \"放置在「{itemText}」上\",\n  \"dropOnRoot\": \"放置在\",\n  \"endDragKeyboard\": \"拖曳中。按 Enter 鍵以取消拖曳。\",\n  \"endDragTouch\": \"拖曳中。輕點兩下以取消拖曳。\",\n  \"endDragVirtual\": \"拖曳中。按一下滑鼠以取消拖曳。\",\n  \"insertAfter\": \"插入至「{itemText}」之後\",\n  \"insertBefore\": \"插入至「{itemText}」之前\",\n  \"insertBetween\": \"插入至「{beforeItemText}」和「{afterItemText}」之間\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/dnd",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-nightly-4980928d3-240906",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -17,24 +22,23 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.4.0",
-    "@react-aria/interactions": "^3.9.0",
-    "@react-aria/live-announcer": "^3.1.0",
-    "@react-aria/overlays": "^3.9.0",
-    "@react-aria/utils": "^3.13.0",
-    "@react-aria/visually-hidden": "^3.3.0",
-    "@react-stately/dnd": "3.0.0-alpha.7",
-    "@react-stately/selection": "^3.10.0",
-    "@react-types/button": "^3.5.0",
-    "@react-types/shared": "^3.13.0"
+    "@internationalized/string": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/i18n": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/interactions": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/live-announcer": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/dnd": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/button": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "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"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
-}
+  "stableVersion": "3.7.2"
+}

package/src/DragManager.ts

@@ -12,8 +12,10 @@
 
 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} from '@react-types/shared';
+import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget, FocusableElement} from '@react-types/shared';
 import {getDragModality, getTypes} from './utils';
+import {isVirtualClick, isVirtualPointerEvent} from '@react-aria/utils';
+import type {LocalizedStringFormatter} from '@internationalized/string';
 import {useEffect, useState} from 'react';
 
 let dropTargets = new Map<Element, DropTarget>();
@@ -22,7 +24,8 @@ let dragSession: DragSession = null;
 let subscriptions = new Set<() => void>();
 
 interface DropTarget {
-  element: HTMLElement,
+  element: FocusableElement,
+  preventFocusOnDrop?: boolean,
   getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation,
   onDropEnter?: (e: DropEnterEvent, dragTarget: DragTarget) => void,
   onDropExit?: (e: DropExitEvent) => void,
@@ -42,7 +45,7 @@ export function registerDropTarget(target: DropTarget) {
 }
 
 interface DroppableItem {
-  element: HTMLElement,
+  element: FocusableElement,
   target: DroppableCollectionTarget,
   getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation
 }
@@ -55,21 +58,20 @@ export function registerDropItem(item: DroppableItem) {
 }
 
 interface DragTarget {
-  element: HTMLElement,
+  element: FocusableElement,
   items: DragItem[],
   allowedDropOperations: DropOperation[],
   onDragEnd?: (e: DragEndEvent) => void
 }
 
-export function beginDragging(target: DragTarget, formatMessage: (key: string) => string) {
+export function beginDragging(target: DragTarget, stringFormatter: LocalizedStringFormatter) {
   if (dragSession) {
     throw new Error('Cannot begin dragging while already dragging');
   }
 
-  dragSession = new DragSession(target, formatMessage);
+  dragSession = new DragSession(target, stringFormatter);
   requestAnimationFrame(() => {
     dragSession.setup();
-
     if (getDragModality() === 'keyboard') {
       dragSession.next();
     }
@@ -94,6 +96,11 @@ export function useDragSession() {
   return session;
 }
 
+/** @private */
+export function isVirtualDragging(): boolean {
+  return !!dragSession;
+}
+
 function endDragging() {
   dragSession = null;
   for (let cb of subscriptions) {
@@ -129,7 +136,6 @@ const CANCELED_EVENTS = [
   'touchstart',
   'touchmove',
   'touchend',
-  'keyup',
   'focusin',
   'focusout'
 ];
@@ -153,25 +159,28 @@ class DragSession {
   currentDropItem: DroppableItem;
   dropOperation: DropOperation;
   private mutationObserver: MutationObserver;
-  private mutationImmediate: NodeJS.Immediate;
   private restoreAriaHidden: () => void;
-  private formatMessage: (key: string) => string;
+  private stringFormatter: LocalizedStringFormatter;
   private isVirtualClick: boolean;
+  private initialFocused: boolean;
 
-  constructor(target: DragTarget, formatMessage: (key: string) => string) {
+  constructor(target: DragTarget, stringFormatter: LocalizedStringFormatter) {
     this.dragTarget = target;
-    this.formatMessage = formatMessage;
+    this.stringFormatter = stringFormatter;
 
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
     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() {
     document.addEventListener('keydown', this.onKeyDown, true);
+    document.addEventListener('keyup', this.onKeyUp, true);
     window.addEventListener('focus', this.onFocus, true);
     window.addEventListener('blur', this.onBlur, true);
     document.addEventListener('click', this.onClick, true);
@@ -186,11 +195,12 @@ class DragSession {
     );
     this.updateValidDropTargets();
 
-    announce(this.formatMessage(MESSAGES[getDragModality()]));
+    announce(this.stringFormatter.format(MESSAGES[getDragModality()]));
   }
 
   teardown() {
     document.removeEventListener('keydown', this.onKeyDown, true);
+    document.removeEventListener('keyup', this.onKeyUp, true);
     window.removeEventListener('focus', this.onFocus, true);
     window.removeEventListener('blur', this.onBlur, true);
     document.removeEventListener('click', this.onClick, true);
@@ -202,9 +212,6 @@ class DragSession {
 
     this.mutationObserver.disconnect();
     this.restoreAriaHidden();
-    if (this.mutationImmediate) {
-      clearImmediate(this.mutationImmediate);
-    }
   }
 
   onKeyDown(e: KeyboardEvent) {
@@ -215,15 +222,6 @@ class DragSession {
       return;
     }
 
-    if (e.key === 'Enter') {
-      if (e.altKey) {
-        this.activate();
-      } else {
-        this.drop();
-      }
-      return;
-    }
-
     if (e.key === 'Tab' && !(e.metaKey || e.altKey || e.ctrlKey)) {
       if (e.shiftKey) {
         this.previous();
@@ -237,6 +235,18 @@ class DragSession {
     }
   }
 
+  onKeyUp(e: KeyboardEvent) {
+    this.cancelEvent(e);
+
+    if (e.key === 'Enter') {
+      if (e.altKey) {
+        this.activate();
+      } else {
+        this.drop();
+      }
+    }
+  }
+
   onFocus(e: FocusEvent) {
     // Prevent focus events, except to the original drag target.
     if (e.target !== this.dragTarget.element) {
@@ -248,7 +258,10 @@ class DragSession {
       return;
     }
 
-    let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
+    let dropTarget =
+      this.validDropTargets.find(target => target.element === e.target as HTMLElement) ||
+      this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
+
     if (!dropTarget) {
       if (this.currentDropTarget) {
         this.currentDropTarget.element.focus();
@@ -280,7 +293,7 @@ class DragSession {
 
   onClick(e: MouseEvent) {
     this.cancelEvent(e);
-    if (e.detail === 0 || this.isVirtualClick) {
+    if (isVirtualClick(e) || this.isVirtualClick) {
       if (e.target === this.dragTarget.element) {
         this.cancel();
         return;
@@ -328,6 +341,16 @@ class DragSession {
     }
 
     this.validDropTargets = findValidDropTargets(this.dragTarget);
+
+    // Shuffle drop target order based on starting drag target.
+    if (this.validDropTargets.length > 0) {
+      let nearestIndex = this.findNearestDropTarget();
+      this.validDropTargets = [
+        ...this.validDropTargets.slice(nearestIndex),
+        ...this.validDropTargets.slice(0, nearestIndex)
+      ];
+    }
+
     if (this.currentDropTarget && !this.validDropTargets.includes(this.currentDropTarget)) {
       this.setCurrentDropTarget(this.validDropTargets[0]);
     }
@@ -409,6 +432,26 @@ class DragSession {
     }
   }
 
+  findNearestDropTarget(): number {
+    let dragTargetRect = this.dragTarget.element.getBoundingClientRect();
+
+    let minDistance = Infinity;
+    let nearest = -1;
+    for (let i = 0; i < this.validDropTargets.length; i++) {
+      let dropTarget = this.validDropTargets[i];
+      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 = i;
+      }
+    }
+
+    return nearest;
+  }
+
   setCurrentDropTarget(dropTarget: DropTarget, item?: DroppableItem) {
     if (dropTarget !== this.currentDropTarget) {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {
@@ -438,7 +481,6 @@ class DragSession {
       }
     }
 
-
     if (item !== this.currentDropItem) {
       if (item && typeof this.currentDropTarget.onDropTargetEnter === 'function') {
         this.currentDropTarget.onDropTargetEnter(item?.target);
@@ -446,11 +488,19 @@ class DragSession {
 
       item?.element.focus();
       this.currentDropItem = item;
+
+      // Announce 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;
+      }
     }
   }
 
   end() {
     this.teardown();
+    endDragging();
 
     if (typeof this.dragTarget.onDragEnd === 'function') {
       let target = this.currentDropTarget && this.dropOperation !== 'cancel' ? this.currentDropTarget : this.dragTarget;
@@ -459,27 +509,28 @@ class DragSession {
         type: 'dragend',
         x: rect.x + (rect.width / 2),
         y: rect.y + (rect.height / 2),
-        dropOperation: this.dropOperation
+        dropOperation: this.dropOperation || 'cancel'
       });
     }
 
-    // Blur and re-focus the drop target so that the focus ring appears.
-    if (this.currentDropTarget) {
-      this.currentDropTarget.element.blur();
-      this.currentDropTarget.element.focus();
+    if (this.currentDropTarget && !this.currentDropTarget.preventFocusOnDrop) {
+      // Re-trigger focus event on active element, since it will not have received it during dragging (see cancelEvent).
+      // This corrects state such as whether focus ring should appear.
+      // useDroppableCollection handles this itself, so this is only for standalone drop zones.
+      document.activeElement.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
     }
 
     this.setCurrentDropTarget(null);
-    endDragging();
   }
 
   cancel() {
+    this.setCurrentDropTarget(null);
     this.end();
     if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
       this.dragTarget.element.focus();
     }
 
-    announce(this.formatMessage('dropCanceled'));
+    announce(this.stringFormatter.format('dropCanceled'));
   }
 
   drop(item?: DroppableItem) {
@@ -517,7 +568,7 @@ class DragSession {
     }
 
     this.end();
-    announce(this.formatMessage('dropComplete'));
+    announce(this.stringFormatter.format('dropComplete'));
   }
 
   activate() {
@@ -546,19 +597,3 @@ 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

@@ -10,15 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {DragItem, DragPreviewRenderer} from '@react-types/shared';
+import {DragItem, DragPreviewRenderer, RefObject} from '@react-types/shared';
 import {flushSync} from 'react-dom';
-import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
+import React, {JSX, useImperativeHandle, useRef, useState} from 'react';
 
 export interface DragPreviewProps {
   children: (items: DragItem[]) => JSX.Element
 }
 
-function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
+function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer | null>) {
   let render = props.children;
   let [children, setChildren] = useState<JSX.Element>(null);
   let domRef = useRef(null);

package/src/ListDropTargetDelegate.ts

@@ -0,0 +1,173 @@
+import {Direction, DropTarget, DropTargetDelegate, Node, Orientation, RefObject} from '@react-types/shared';
+
+interface ListDropTargetDelegateOptions {
+  /**
+   * Whether the items are arranged in a stack or grid.
+   * @default 'stack'
+   */
+  layout?: 'stack' | 'grid',
+  /**
+   * The primary orientation of the items. Usually this is the
+   * direction that the collection scrolls.
+   * @default 'vertical'
+   */
+  orientation?: Orientation,
+  /**
+   * The horizontal layout direction.
+   * @default 'ltr'
+   */
+  direction?: Direction
+}
+
+// Terms used in the below code:
+//   * "Primary"   – The main layout direction. For stacks, this is the direction
+//                   that the stack is arranged in (e.g. horizontal or vertical).
+//                   For grids, this is the main scroll direction.
+//   * "Secondary" – The secondary layout direction. For stacks, there is no secondary
+//                   layout direction. For grids, this is the opposite of the primary direction.
+//   * "Flow"      – The flow direction of the items. For stacks, this is the the primary
+//                   direction. For grids, it is the secondary direction.
+
+export class ListDropTargetDelegate implements DropTargetDelegate {
+  private collection: Iterable<Node<unknown>>;
+  private ref: RefObject<HTMLElement | null>;
+  private layout: 'stack' | 'grid';
+  private orientation: Orientation;
+  private direction: Direction;
+
+  constructor(collection: Iterable<Node<unknown>>, ref: RefObject<HTMLElement | null>, options?: ListDropTargetDelegateOptions) {
+    this.collection = collection;
+    this.ref = ref;
+    this.layout = options?.layout || 'stack';
+    this.orientation = options?.orientation || 'vertical';
+    this.direction = options?.direction || 'ltr';
+  }
+
+  private getPrimaryStart(rect: DOMRect) {
+    return this.orientation === 'horizontal' ? rect.left : rect.top;
+  }
+
+  private getPrimaryEnd(rect: DOMRect) {
+    return this.orientation === 'horizontal' ? rect.right : rect.bottom;
+  }
+
+  private getSecondaryStart(rect: DOMRect) {
+    return this.orientation === 'horizontal' ? rect.top : rect.left;
+  }
+
+  private getSecondaryEnd(rect: DOMRect) {
+    return this.orientation === 'horizontal' ? rect.bottom : rect.right;
+  }
+
+  private getFlowStart(rect: DOMRect) {
+    return this.layout === 'stack' ? this.getPrimaryStart(rect) : this.getSecondaryStart(rect);
+  }
+
+  private getFlowEnd(rect: DOMRect) {
+    return this.layout === 'stack' ? this.getPrimaryEnd(rect) : this.getSecondaryEnd(rect);
+  }
+
+  private getFlowSize(rect: DOMRect) {
+    return this.getFlowEnd(rect) - this.getFlowStart(rect);
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    if (this.collection[Symbol.iterator]().next().done) {
+      return {type: 'root'};
+    }
+
+    let rect = this.ref.current.getBoundingClientRect();
+    let primary = this.orientation === 'horizontal' ? x : y;
+    let secondary = this.orientation === 'horizontal' ? y : x;
+    primary += this.getPrimaryStart(rect);
+    secondary += this.getSecondaryStart(rect);
+
+    let flow = this.layout === 'stack' ? primary : secondary;
+    let isPrimaryRTL = this.orientation === 'horizontal' && this.direction === 'rtl';
+    let isSecondaryRTL = this.layout === 'grid' && this.orientation === 'vertical' && this.direction === 'rtl';
+    let isFlowRTL = this.layout === 'stack' ? isPrimaryRTL : isSecondaryRTL;
+
+    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);
+      }
+    }
+
+    // TODO: assume that only item type items are valid drop targets. This is to prevent a crash when dragging over the loader
+    // row since it doesn't have a data-key set on it. Will eventually need to handle the case with drag and drop and loaders located between rows aka tree.
+    // Can see https://github.com/adobe/react-spectrum/pull/4210/files#diff-21e555e0c597a28215e36137f5be076a65a1e1456c92cd0fdd60f866929aae2a for additional logic
+    // that may need to happen then
+    let items = [...this.collection].filter(item => item.type === 'item');
+    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();
+      let update = (isGreater: boolean) => {
+        if (isGreater) {
+          low = mid + 1;
+        } else {
+          high = mid;
+        }
+      };
+
+      if (primary < this.getPrimaryStart(rect)) {
+        update(isPrimaryRTL);
+      } else if (primary > this.getPrimaryEnd(rect)) {
+        update(!isPrimaryRTL);
+      } else if (secondary < this.getSecondaryStart(rect)) {
+        update(isSecondaryRTL);
+      } else if (secondary > this.getSecondaryEnd(rect)) {
+        update(!isSecondaryRTL);
+      } 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 start or end of the item.
+          if (flow <= this.getFlowStart(rect) + 5 && isValidDropTarget({...target, dropPosition: 'before'})) {
+            target.dropPosition = isFlowRTL ? 'after' : 'before';
+          } else if (flow >= this.getFlowEnd(rect) - 5 && isValidDropTarget({...target, dropPosition: 'after'})) {
+            target.dropPosition = isFlowRTL ? 'before' : 'after';
+          }
+        } else {
+          // If dropping on the item isn't accepted, try the target before or after depending on the position.
+          let mid = this.getFlowStart(rect) + this.getFlowSize(rect) / 2;
+          if (flow <= mid && isValidDropTarget({...target, dropPosition: 'before'})) {
+            target.dropPosition = isFlowRTL ? 'after' : 'before';
+          } else if (flow >= mid && isValidDropTarget({...target, dropPosition: 'after'})) {
+            target.dropPosition = isFlowRTL ? 'before' : 'after';
+          }
+        }
+
+        return target;
+      }
+    }
+
+    let item = items[Math.min(low, items.length - 1)];
+    let element = elementMap.get(String(item.key));
+    rect = element.getBoundingClientRect();
+
+    if (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect))) {
+      return {
+        type: 'item',
+        key: item.key,
+        dropPosition: isFlowRTL ? 'after' : 'before'
+      };
+    }
+
+    return {
+      type: 'item',
+      key: item.key,
+      dropPosition: isFlowRTL ? 'before' : 'after'
+    };
+  }
+}

package/src/constants.ts

@@ -32,6 +32,8 @@ export const DROP_OPERATION_ALLOWED = {
 };
 
 export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED);
+EFFECT_ALLOWED[DROP_OPERATION.all] = 'all'; // ensure we don't map to 'uninitialized'.
+
 export const DROP_EFFECT = invert(DROP_OPERATION);
 export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = {
   none: 'cancel',

package/src/index.ts

@@ -10,13 +10,59 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useDrag';
-export * from './useDrop';
-export * from './useDroppableCollection';
-export * from './useDroppableItem';
-export * from './useDropIndicator';
-export * from './useDraggableItem';
-export * from './useClipboard';
-export {DragPreview} from './DragPreview';
-
+export type {DroppableCollectionOptions, DroppableCollectionResult} from './useDroppableCollection';
+export type {DroppableItemOptions, DroppableItemResult} from './useDroppableItem';
+export type {DropIndicatorProps, DropIndicatorAria} from './useDropIndicator';
+export type {DraggableItemProps, DraggableItemResult} from './useDraggableItem';
+export type {DraggableCollectionOptions} from './useDraggableCollection';
 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 {
+  DirectoryDropItem,
+  DragEndEvent,
+  DraggableCollectionEndEvent,
+  DraggableCollectionMoveEvent,
+  DraggableCollectionStartEvent,
+  DragItem,
+  DragMoveEvent,
+  DragPreviewRenderer,
+  DragStartEvent,
+  DragTypes,
+  DropEnterEvent,
+  DropEvent,
+  DropExitEvent,
+  DropItem,
+  DropMoveEvent,
+  DropOperation,
+  DroppableCollectionDropEvent,
+  DroppableCollectionEnterEvent,
+  DroppableCollectionExitEvent,
+  DroppableCollectionInsertDropEvent,
+  DroppableCollectionMoveEvent,
+  DroppableCollectionOnItemDropEvent,
+  DroppableCollectionReorderEvent,
+  DroppableCollectionRootDropEvent,
+  DropPosition,
+  DropTarget,
+  DropTargetDelegate,
+  FileDropItem,
+  ItemDropTarget,
+  RootDropTarget,
+  TextDropItem
+} from '@react-types/shared';
+
+export {DIRECTORY_DRAG_TYPE} from './utils';
+export {useDrag} from './useDrag';
+export {useDrop} from './useDrop';
+export {useDroppableCollection} from './useDroppableCollection';
+export {useDroppableItem} from './useDroppableItem';
+export {useDropIndicator} from './useDropIndicator';
+export {useDraggableItem} from './useDraggableItem';
+export {useDraggableCollection} from './useDraggableCollection';
+export {useClipboard} from './useClipboard';
+export {DragPreview} from './DragPreview';
+export {ListDropTargetDelegate} from './ListDropTargetDelegate';
+export {isVirtualDragging} from './DragManager';
+export {isDirectoryDropItem, isFileDropItem, isTextDropItem} from './utils';