@react-aria/dnd 3.11.3 → 3.11.5

package/src/DragPreview.tsx

@@ -74,7 +74,7 @@ React.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef
   }
 
   return (
-    <div style={{zIndex: -100, position: 'absolute', top: 0, left: -100000}} ref={domRef}>
+    <div style={{zIndex: -100, position: 'fixed', top: 0, left: -100000}} ref={domRef}>
       {children}
     </div>
   );

package/src/DropTargetKeyboardNavigation.ts

@@ -100,19 +100,25 @@ function nextDropTarget(
       }
       case 'after': {
         // If this is the last sibling in a level, traverse to the parent.
-        let targetNode = collection.getItem(target.key);        
-        if (targetNode && targetNode.nextKey == null && targetNode.parentKey != null) {
+        let targetNode = collection.getItem(target.key);
+        let nextItemInSameLevel = targetNode?.nextKey != null ? collection.getItem(targetNode.nextKey) : null;
+        while (nextItemInSameLevel != null && nextItemInSameLevel.type !== 'item') {
+          nextItemInSameLevel = nextItemInSameLevel.nextKey != null ? collection.getItem(nextItemInSameLevel.nextKey) : null;
+        }
+        
+        if (targetNode && nextItemInSameLevel == null && targetNode.parentKey != null) {
           // If the parent item has an item after it, use the "before" position.
           let parentNode = collection.getItem(targetNode.parentKey);
-          if (parentNode?.nextKey != null) {
+          const nextNode = parentNode?.nextKey != null ? collection.getItem(parentNode.nextKey) : null;
+          if (nextNode?.type === 'item') {
             return {
               type: 'item',
-              key: parentNode.nextKey,
+              key: nextNode.key,
               dropPosition: 'before'
             };
           }
 
-          if (parentNode) {
+          if (parentNode?.type === 'item') {
             return {
               type: 'item',
               key: parentNode.key,
@@ -121,10 +127,10 @@ function nextDropTarget(
           }
         }
 
-        if (targetNode?.nextKey != null) {
+        if (nextItemInSameLevel) {
           return {
             type: 'item',
-            key: targetNode.nextKey,
+            key: nextItemInSameLevel.key,
             dropPosition: 'on'
           };
         }
@@ -154,8 +160,11 @@ function previousDropTarget(
     let prevKey: Key | null = null;
     let lastKey = keyboardDelegate.getLastKey?.();
     while (lastKey != null) {
-      prevKey = lastKey;
       let node = collection.getItem(lastKey);
+      if (node?.type !== 'item') {
+        break;
+      }
+      prevKey = lastKey;
       lastKey = node?.parentKey;
     }
 

package/src/ListDropTargetDelegate.ts

@@ -101,6 +101,11 @@ export class ListDropTargetDelegate implements DropTargetDelegate {
     // 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');
+
+    if (items.length < 1) {
+      return {type: 'root'};
+    }
+
     let low = 0;
     let high = items.length;
     while (low < high) {

package/src/useClipboard.ts

@@ -143,7 +143,7 @@ export function useClipboard(options: ClipboardProps): ClipboardResult {
       addGlobalEventListener('beforepaste', onBeforePaste),
       addGlobalEventListener('paste', onPaste)
     );
-  }, [isDisabled, onBeforeCopy, onCopy, onBeforeCut, onCut, onBeforePaste, onPaste]);
+  }, [isDisabled]);
 
   return {
     clipboardProps: focusProps

package/src/useDrop.ts

@@ -16,7 +16,7 @@ import {DragEvent, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, globalAllowedDropOperations, globalDndState, readFromDataTransfer, setGlobalDnDState, setGlobalDropEffect} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
-import {isIPad, isMac, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
+import {isIPad, isMac, nodeContains, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DropOptions {
@@ -234,7 +234,7 @@ export function useDrop(options: DropOptions): DropResult {
 
     state.dragOverElements.delete(e.target as Element);
     for (let element of state.dragOverElements) {
-      if (!e.currentTarget.contains(element)) {
+      if (!nodeContains(e.currentTarget, element)) {
         state.dragOverElements.delete(element);
       }
     }
@@ -339,7 +339,7 @@ export function useDrop(options: DropOptions): DropResult {
       onDrop: onKeyboardDrop,
       onDropActivate
     });
-  }, [isDisabled, ref, getDropOperationKeyboard, onDropEnter, onDropExit, onKeyboardDrop, onDropActivate]);
+  }, [isDisabled, ref]);
 
   let {dropProps} = useVirtualDrop();
   if (isDisabled) {