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

package/src/useDrag.ts

@@ -11,28 +11,27 @@
  */
 
 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 {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {writeToDataTransfer} from './utils';
 
-interface DragOptions {
+export 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 {
+export interface DragResult {
   dragProps: HTMLAttributes<HTMLElement>,
   dragButtonProps: AriaButtonProps,
   isDragging: boolean
@@ -54,7 +53,7 @@ const MESSAGES = {
 };
 
 export function useDrag(options: DragOptions): DragResult {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let state = useRef({
     options,
     x: 0,
@@ -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) => {
@@ -188,14 +189,14 @@ export function useDrag(options: DragOptions): DragResult {
           state.options.onDragEnd(e);
         }
       }
-    }, formatMessage);
+    }, stringFormatter);
 
     setDragging(true);
   };
 
   let modality = useDragModality();
   let descriptionProps = useDescription(
-    formatMessage(!isDragging ? MESSAGES[modality].start : MESSAGES[modality].end)
+    stringFormatter.format(!isDragging ? MESSAGES[modality].start : MESSAGES[modality].end)
   );
 
   return {

package/src/useDraggableItem.ts

@@ -16,26 +16,24 @@ import {HTMLAttributes, Key} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDrag} from './useDrag';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
-interface DraggableItemProps {
+export interface DraggableItemProps {
   key: Key
 }
 
-interface DraggableItemResult {
+export interface DraggableItemResult {
   dragProps: HTMLAttributes<HTMLElement>,
   dragButtonProps: AriaButtonProps
 }
 
 export function useDraggableItem(props: DraggableItemProps, state: DraggableCollectionState): DraggableItemResult {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {dragProps, dragButtonProps} = useDrag({
     getItems() {
       return state.getItems(props.key);
     },
-    renderPreview() {
-      return state.renderPreview(props.key);
-    },
+    preview: state.preview,
     onDragStart(e) {
       state.startDrag(props.key, e);
     },
@@ -48,13 +46,13 @@ 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 = stringFormatter.format('dragSelectedItems', {count: numKeysForDrag});
   } else {
-    message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});
+    message = stringFormatter.format('dragItem', {itemText: item?.textValue ?? ''});
   }
 
   return {

package/src/useDrop.ts

@@ -10,14 +10,15 @@
  * 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 {
+export interface DropOptions {
   ref: RefObject<HTMLElement>,
   getDropOperation?: (types: IDragTypes, allowedOperations: DropOperation[]) => DropOperation,
   getDropOperationForPoint?: (types: IDragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation,
@@ -30,7 +31,7 @@ interface DropOptions {
   onDrop?: (e: DropEvent) => void
 }
 
-interface DropResult {
+export interface DropResult {
   dropProps: HTMLAttributes<HTMLElement>,
   isDropTarget: boolean // (??) whether the element is currently an active drop target
 }
@@ -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

@@ -19,13 +19,13 @@ import {HTMLAttributes, Key, RefObject} from 'react';
 import intlMessages from '../intl/*.json';
 import {useDroppableItem} from './useDroppableItem';
 import {useId} from '@react-aria/utils';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
-interface DropIndicatorProps {
+export interface DropIndicatorProps {
   target: DropTarget
 }
 
-interface DropIndicatorAria {
+export interface DropIndicatorAria {
   dropIndicatorProps: HTMLAttributes<HTMLElement>
 }
 
@@ -33,7 +33,7 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
   let {target} = props;
   let {collection} = state;
 
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let dragSession = DragManager.useDragSession();
   let {dropProps} = useDroppableItem(props, state, ref);
   let id = useId();
@@ -42,10 +42,10 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
   let label = '';
   let labelledBy: string;
   if (target.type === 'root') {
-    label = formatMessage('dropOnRoot');
+    label = stringFormatter.format('dropOnRoot');
     labelledBy = `${id} ${getDroppableCollectionId(state)}`;
   } else if (target.dropPosition === 'on') {
-    label = formatMessage('dropOnItem', {
+    label = stringFormatter.format('dropOnItem', {
       itemText: getText(target.key)
     });
   } else {
@@ -57,16 +57,16 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
       : target.key;
 
     if (before && after) {
-      label = formatMessage('insertBetween', {
+      label = stringFormatter.format('insertBetween', {
         beforeItemText: getText(before),
         afterItemText: getText(after)
       });
     } else if (before) {
-      label = formatMessage('insertAfter', {
+      label = stringFormatter.format('insertAfter', {
         itemText: getText(before)
       });
     } else if (after) {
-      label = formatMessage('insertBefore', {
+      label = stringFormatter.format('insertBefore', {
         itemText: getText(after)
       });
     }
@@ -76,7 +76,7 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
     dropIndicatorProps: {
       ...dropProps,
       id,
-      'aria-roledescription': formatMessage('dropIndicator'),
+      'aria-roledescription': stringFormatter.format('dropIndicator'),
       'aria-label': label,
       'aria-labelledby': labelledBy,
       'aria-hidden': !dragSession ? 'true' : dropProps['aria-hidden'],

package/src/useDroppableCollection.ts

@@ -10,25 +10,33 @@
  * governing permissions and limitations under the License.
  */
 
+import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate, Node} from '@react-types/shared';
 import * as DragManager from './DragManager';
-import {DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
-import {HTMLAttributes, RefObject, useEffect, 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>
 }
 
+interface DroppingState {
+  collection: Collection<Node<unknown>>,
+  focusedKey: Key,
+  selectedKeys: Set<Key>,
+  timeout: ReturnType<typeof setTimeout>
+}
+
 const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
 
 export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult {
@@ -60,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.
@@ -96,18 +99,103 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     },
     onDrop(e) {
       if (state.target && typeof props.onDrop === 'function') {
-        props.onDrop({
-          type: 'drop',
-          x: e.x, // todo
-          y: e.y,
-          target: state.target,
-          items: e.items,
-          dropOperation: e.dropOperation
-        });
+        onDrop(e, state.target);
       }
     }
   });
 
+  let droppingState = useRef<DroppingState>(null);
+  let onDrop = useCallback((e: DropEvent, target: DropTarget) => {
+    let {state} = localState;
+
+    // Focus the collection.
+    state.selectionManager.setFocused(true);
+
+    // Save some state of the collection/selection before the drop occurs so we can compare later.
+    let focusedKey = state.selectionManager.focusedKey;
+    droppingState.current = {
+      timeout: null,
+      focusedKey,
+      collection: state.collection,
+      selectedKeys: state.selectionManager.selectedKeys
+    };
+
+    localState.props.onDrop({
+      type: 'drop',
+      x: e.x, // todo
+      y: e.y,
+      target,
+      items: e.items,
+      dropOperation: e.dropOperation
+    });
+
+    // Wait for a short time period after the onDrop is called to allow the data to be read asynchronously
+    // and for React to re-render. If an insert occurs during this time, it will be selected/focused below.
+    // If items are not "immediately" inserted by the onDrop handler, the application will need to handle
+    // selecting and focusing those items themselves.
+    droppingState.current.timeout = setTimeout(() => {
+      // If focus didn't move already (e.g. due to an insert), and the user dropped on an item,
+      // focus that item and show the focus ring to give the user feedback that the drop occurred.
+      // Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
+      let {state} = localState;
+      if (state.selectionManager.focusedKey === focusedKey) {
+        if (target.type === 'item' && target.dropPosition === 'on' && state.collection.getItem(target.key) != null) {
+          state.selectionManager.setFocusedKey(target.key);
+          state.selectionManager.setFocused(true);
+          setInteractionModality('keyboard');
+        } else if (!state.selectionManager.isSelected(focusedKey)) {
+          setInteractionModality('keyboard');
+        }
+      }
+
+      droppingState.current = null;
+    }, 50);
+  }, [localState]);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return () => {
+      if (droppingState.current) {
+        clearTimeout(droppingState.current.timeout);
+      }
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    // If an insert occurs during a drop, we want to immediately select these items to give
+    // feedback to the user that a drop occurred. Only do this if the selection didn't change
+    // since the drop started so we don't override if the user or application did something.
+    if (
+      droppingState.current &&
+      state.selectionManager.isFocused &&
+      state.collection.size > droppingState.current.collection.size &&
+      state.selectionManager.isSelectionEqual(droppingState.current.selectedKeys)
+    ) {
+      let newKeys = new Set<Key>();
+      for (let key of state.collection.getKeys()) {
+        if (!droppingState.current.collection.getItem(key)) {
+          newKeys.add(key);
+        }
+      }
+
+      state.selectionManager.setSelectedKeys(newKeys);
+
+      // If the focused item didn't change since the drop occurred, also focus the first
+      // inserted item. If selection is disabled, then also show the focus ring so there
+      // is some indication that items were added.
+      if (state.selectionManager.focusedKey === droppingState.current.focusedKey) {
+        let first = newKeys.keys().next().value;
+        state.selectionManager.setFocusedKey(first);
+
+        if (state.selectionManager.selectionMode === 'none') {
+          setInteractionModality('keyboard');
+        }
+      }
+
+      droppingState.current = null;
+    }
+  });
+
   useEffect(() => {
     let getNextTarget = (target: DropTarget, wrap = true): DropTarget => {
       if (!target) {
@@ -120,6 +208,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       let nextKey = target.type === 'item'
         ? keyboardDelegate.getKeyBelow(target.key)
         : keyboardDelegate.getFirstKey();
+      let dropPosition: DropPosition = 'before';
 
       if (target.type === 'item') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
@@ -131,6 +220,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             dropPosition: nextDropPosition
           };
         }
+
+        // If the last drop position was 'after', then 'before' on the next key is equivalent.
+        // Switch to 'on' instead.
+        if (target.dropPosition === 'after') {
+          dropPosition = 'on';
+        }
       }
 
       if (nextKey == null) {
@@ -146,7 +241,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return {
         type: 'item',
         key: nextKey,
-        dropPosition: DROP_POSITIONS[0]
+        dropPosition
       };
     };
 
@@ -155,6 +250,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       let nextKey = target?.type === 'item'
         ? keyboardDelegate.getKeyAbove(target.key)
         : keyboardDelegate.getLastKey();
+      let dropPosition: DropPosition = !target || target.type === 'root' ? 'after' : 'on';
 
       if (target?.type === 'item') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
@@ -166,6 +262,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             dropPosition: nextDropPosition
           };
         }
+
+        // If the last drop position was 'before', then 'after' on the previous key is equivalent.
+        // Switch to 'on' instead.
+        if (target.dropPosition === 'before') {
+          dropPosition = 'on';
+        }
       }
 
       if (nextKey == null) {
@@ -181,7 +283,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return {
         type: 'item',
         key: nextKey,
-        dropPosition: !target || target.type === 'root' ? 'after' : 'on'
+        dropPosition
       };
     };
 
@@ -205,7 +307,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           seenRoot++;
         }
       } while (
-        target &&
         operation === 'cancel' &&
         !localState.state.isDropTarget(target) &&
         seenRoot < 2
@@ -232,7 +333,52 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       },
       onDropEnter(e, drag) {
         let types = getTypes(drag.items);
-        let target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
+        let selectionManager = localState.state.selectionManager;
+        let target: DropTarget;
+
+        // When entering the droppable collection for the first time, the default drop target
+        // is after the focused key.
+        let key = selectionManager.focusedKey;
+        let dropPosition: DropPosition = 'after';
+
+        // If the focused key is a cell, get the parent item instead.
+        // For now, we assume that individual cells cannot be dropped on.
+        let item = localState.state.collection.getItem(key);
+        if (item?.type === 'cell') {
+          key = item.parentKey;
+        }
+
+        // If the focused item is also selected, the default drop target is after the last selected item.
+        // But if the focused key is the first selected item, then default to before the first selected item.
+        // This is to make reordering lists slightly easier. If you select top down, we assume you want to
+        // move the items down. If you select bottom up, we assume you want to move the items up.
+        if (selectionManager.isSelected(key)) {
+          if (selectionManager.selectedKeys.size > 1 && selectionManager.firstSelectedKey === key) {
+            dropPosition = 'before';
+          } else {
+            key = selectionManager.lastSelectedKey;
+          }
+        }
+
+        if (key != null) {
+          target = {
+            type: 'item',
+            key,
+            dropPosition
+          };
+
+          // If the default target is not valid, find the next one that is.
+          if (localState.state.getDropOperation(target, types, drag.allowedDropOperations) === 'cancel') {
+            target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
+              ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
+          }
+        }
+
+        // If no focused key, then start from the root.
+        if (!target) {
+          target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
+        }
+
         localState.state.setTarget(target);
       },
       onDropExit() {
@@ -257,14 +403,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       },
       onDrop(e, target) {
         if (localState.state.target && typeof localState.props.onDrop === 'function') {
-          localState.props.onDrop({
-            type: 'drop',
-            x: e.x, // todo
-            y: e.y,
-            target: target || localState.state.target,
-            items: e.items,
-            dropOperation: e.dropOperation
-          });
+          onDrop(e, target || localState.state.target);
         }
       },
       onKeyDown(e, drag) {
@@ -382,7 +521,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         }
       }
     });
-  }, [localState, ref]);
+  }, [localState, ref, onDrop]);
 
   let id = useDroppableCollectionId(state);
   return {

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