@react-aria/dnd 3.0.0-alpha.8 → 3.0.0-nightly-641446f65-240905

package/src/useDroppableCollection.ts

@@ -10,23 +10,47 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate, Node} from '@react-types/shared';
+import {
+  clearGlobalDnDState,
+  DIRECTORY_DRAG_TYPE,
+  droppableCollectionMap,
+  getTypes,
+  globalDndState,
+  isInternalDropOperation,
+  setDropCollectionRef
+} from './utils';
+import {
+  Collection,
+  DropEvent,
+  DropOperation,
+  DroppableCollectionDropEvent,
+  DroppableCollectionProps,
+  DropPosition,
+  DropTarget,
+  DropTargetDelegate,
+  Key,
+  KeyboardDelegate,
+  Node,
+  RefObject
+} from '@react-types/shared';
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {getTypes} from './utils';
-import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {HTMLAttributes, useCallback, useEffect, useRef} from 'react';
+import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
-import {useDroppableCollectionId} from './utils';
+import {useLocale} from '@react-aria/i18n';
 
-interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DroppableCollectionProps {
+  /** A delegate object that implements behavior for keyboard focus movement. */
   keyboardDelegate: KeyboardDelegate,
-  getDropTargetFromPoint: (x: number, y: number) => DropTarget | null
+  /** A delegate object that provides drop targets for pointer coordinates within the collection. */
+  dropTargetDelegate: DropTargetDelegate
 }
 
-interface DroppableCollectionResult {
+export interface DroppableCollectionResult {
+  /** Props for the collection element. */
   collectionProps: HTMLAttributes<HTMLElement>
 }
 
@@ -34,12 +58,20 @@ interface DroppingState {
   collection: Collection<Node<unknown>>,
   focusedKey: Key,
   selectedKeys: Set<Key>,
-  timeout: NodeJS.Timeout
+  target: DropTarget,
+  draggingKeys: Set<Key>,
+  isInternal: boolean,
+  timeout: ReturnType<typeof setTimeout>
 }
 
 const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
+const DROP_POSITIONS_RTL: DropPosition[] = ['after', 'on', 'before'];
 
-export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult {
+/**
+ * Handles drop interactions for a collection component, with support for traditional mouse and touch
+ * based drag and drop, in addition to full parity for keyboard and screen reader users.
+ */
+export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>): DroppableCollectionResult {
   let localState = useRef({
     props,
     state,
@@ -49,46 +81,113 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
   localState.props = props;
   localState.state = state;
 
+  let defaultOnDrop = useCallback(async (e: DroppableCollectionDropEvent) => {
+    let {
+      onInsert,
+      onRootDrop,
+      onItemDrop,
+      onReorder,
+      acceptedDragTypes = 'all',
+      shouldAcceptItemDrop
+    } = localState.props;
+
+    let {draggingKeys} = globalDndState;
+    let isInternal = isInternalDropOperation(ref);
+    let {
+      target,
+      dropOperation,
+      items
+    } = e;
+
+    let filteredItems = items;
+    if (acceptedDragTypes !== 'all' || shouldAcceptItemDrop) {
+      filteredItems = items.filter(item => {
+        let itemTypes: Set<string | symbol>;
+        if (item.kind === 'directory') {
+          itemTypes = new Set([DIRECTORY_DRAG_TYPE]);
+        } else {
+          itemTypes = item.kind === 'file' ? new Set([item.type]) : item.types;
+        }
+
+        if (acceptedDragTypes === 'all' || acceptedDragTypes.some(type => itemTypes.has(type))) {
+          // If we are performing a on item drop, check if the item in question accepts the dropped item since the item may have heavier restrictions
+          // than the droppable collection itself
+          if (target.type === 'item' && target.dropPosition === 'on' && shouldAcceptItemDrop) {
+            return shouldAcceptItemDrop(target, itemTypes);
+          }
+          return true;
+        }
+
+        return false;
+      });
+    }
+
+    if (filteredItems.length > 0) {
+      if (target.type === 'root' && onRootDrop) {
+        await onRootDrop({items: filteredItems, dropOperation});
+      }
+
+      if (target.type === 'item') {
+        if (target.dropPosition === 'on' && onItemDrop) {
+          await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
+        }
+
+        if (target.dropPosition !== 'on') {
+          if (!isInternal && onInsert) {
+            await onInsert({items: filteredItems, dropOperation, target});
+          }
+
+          if (isInternal && onReorder) {
+            await onReorder({keys: draggingKeys, dropOperation, target});
+          }
+        }
+      }
+    }
+  }, [localState, ref]);
+
   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 {draggingKeys, dropCollectionRef} = globalDndState;
+      let isInternal = isInternalDropOperation(ref);
+      let isValidDropTarget = (target) => state.getDropOperation({target, types, allowedOperations, isInternal, draggingKeys}) !== 'cancel';
+      let target = props.dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
       if (!target) {
         localState.dropOperation = 'cancel';
         localState.nextTarget = null;
         return 'cancel';
       }
 
-      if (state.isDropTarget(target)) {
-        localState.nextTarget = target;
-        return localState.dropOperation;
-      }
-
-      localState.dropOperation = state.getDropOperation(target, types, allowedOperations);
+      localState.dropOperation = state.getDropOperation({target, types, allowedOperations, isInternal, draggingKeys});
 
       // If the target doesn't accept the drop, see if the root accepts it instead.
       if (localState.dropOperation === 'cancel') {
         let rootTarget: DropTarget = {type: 'root'};
-        let dropOperation = state.getDropOperation(rootTarget, types, allowedOperations);
+        let dropOperation = state.getDropOperation({target: rootTarget, types, allowedOperations, isInternal, draggingKeys});
         if (dropOperation !== 'cancel') {
           target = rootTarget;
           localState.dropOperation = dropOperation;
         }
       }
 
+      // Only set dropCollectionRef if there is a valid drop target since we cleanup dropCollectionRef in onDropExit
+      // which only runs when leaving a valid drop target or if the dropEffect become none (mouse dnd only).
+      if (target && localState.dropOperation !== 'cancel' && ref?.current !== dropCollectionRef?.current) {
+        setDropCollectionRef(ref);
+      }
       localState.nextTarget = localState.dropOperation === 'cancel' ? null : target;
       return localState.dropOperation;
     },
     onDropExit() {
+      setDropCollectionRef(undefined);
       state.setTarget(null);
       autoScroll.stop();
     },
@@ -103,29 +202,112 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       }
     },
     onDrop(e) {
-      if (state.target && typeof props.onDrop === 'function') {
+      setDropCollectionRef(ref);
+      if (state.target) {
         onDrop(e, state.target);
       }
+
+      // If there wasn't a collection being tracked as a dragged collection, then we are in a case where a non RSP drag is dropped on a
+      // RSP collection and thus we don't need to preserve the global DnD state for onDragEnd
+      let {draggingCollectionRef} = globalDndState;
+      if (draggingCollectionRef == null) {
+        clearGlobalDnDState();
+      }
     }
   });
 
   let droppingState = useRef<DroppingState>(null);
-  let onDrop = useCallback((e: DropEvent, target: DropTarget) => {
+  let updateFocusAfterDrop = useCallback(() => {
     let {state} = localState;
+    if (droppingState.current) {
+      let {
+        target,
+        collection: prevCollection,
+        selectedKeys: prevSelectedKeys,
+        focusedKey: prevFocusedKey,
+        isInternal,
+        draggingKeys
+      } = droppingState.current;
+      
+      // 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 (
+        state.collection.size > prevCollection.size &&
+        state.selectionManager.isSelectionEqual(prevSelectedKeys)
+      ) {
+        let newKeys = new Set<Key>();
+        for (let key of state.collection.getKeys()) {
+          if (!prevCollection.getItem(key)) {
+            newKeys.add(key);
+          }
+        }
+
+        state.selectionManager.setSelectedKeys(newKeys);
 
-    // Focus the collection.
-    state.selectionManager.setFocused(true);
+        // 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 === prevFocusedKey) {
+          let first = newKeys.keys().next().value;
+          let item = state.collection.getItem(first);
+
+          // If this is a cell, focus the parent row.
+          if (item?.type === 'cell') {
+            first = item.parentKey;
+          }
+
+          state.selectionManager.setFocusedKey(first);
+
+          if (state.selectionManager.selectionMode === 'none') {
+            setInteractionModality('keyboard');
+          }
+        }
+      } else if (
+        state.selectionManager.focusedKey === prevFocusedKey &&
+        isInternal &&
+        target.type === 'item' &&
+        target.dropPosition !== 'on' &&
+        draggingKeys.has(state.collection.getItem(prevFocusedKey)?.parentKey)
+      ) {
+        // Focus row instead of cell when reordering.
+        state.selectionManager.setFocusedKey(state.collection.getItem(prevFocusedKey).parentKey);
+        setInteractionModality('keyboard');
+      } else if (
+        state.selectionManager.focusedKey === prevFocusedKey &&
+        target.type === 'item' && 
+        target.dropPosition === 'on' && 
+        state.collection.getItem(target.key) != null
+      ) {
+        // 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.
+        state.selectionManager.setFocusedKey(target.key);
+        setInteractionModality('keyboard');
+      } else if (!state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
+        setInteractionModality('keyboard');
+      }
+
+      state.selectionManager.setFocused(true);
+    }
+  }, [localState]);
 
+  let onDrop = useCallback((e: DropEvent, target: DropTarget) => {
+    let {state} = localState;
+    
     // 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,
+      focusedKey: state.selectionManager.focusedKey,
       collection: state.collection,
-      selectedKeys: state.selectionManager.selectedKeys
+      selectedKeys: state.selectionManager.selectedKeys,
+      draggingKeys: globalDndState.draggingKeys,
+      isInternal: isInternalDropOperation(ref),
+      target
     };
 
-    localState.props.onDrop({
+    let onDropFn = localState.props.onDrop || defaultOnDrop;
+    onDropFn({
       type: 'drop',
       x: e.x, // todo
       y: e.y,
@@ -135,27 +317,13 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     });
 
     // 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.
+    // and for React to re-render. If the collection didn't already change during this time (handled below),
+    // update the focused key here.
     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');
-        }
-      }
-
+      updateFocusAfterDrop();
       droppingState.current = null;
     }, 50);
-  }, [localState]);
+  }, [localState, defaultOnDrop, ref, updateFocusAfterDrop]);
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
@@ -167,42 +335,15 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
   }, []);
 
   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;
+    // If the collection changed after a drop, update the focused key.
+    if (droppingState.current && state.collection !== droppingState.current.collection) {
+      updateFocusAfterDrop();
     }
   });
 
+  let {direction} = useLocale();
   useEffect(() => {
-    let getNextTarget = (target: DropTarget, wrap = true): DropTarget => {
+    let getNextTarget = (target: DropTarget, wrap = true, horizontal = false): DropTarget => {
       if (!target) {
         return {
           type: 'root'
@@ -210,26 +351,38 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       }
 
       let {keyboardDelegate} = localState.props;
-      let nextKey = target.type === 'item'
-        ? keyboardDelegate.getKeyBelow(target.key)
-        : keyboardDelegate.getFirstKey();
-      let dropPosition: DropPosition = 'before';
+      let nextKey: Key;
+      if (target?.type === 'item') {
+        nextKey = horizontal ? keyboardDelegate.getKeyRightOf(target.key) : keyboardDelegate.getKeyBelow(target.key);
+      } else {
+        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getLastKey() : keyboardDelegate.getFirstKey();
+      }
+      let dropPositions = horizontal && direction === 'rtl' ? DROP_POSITIONS_RTL : DROP_POSITIONS;
+      let dropPosition: DropPosition = dropPositions[0];
 
       if (target.type === 'item') {
-        let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
-        let nextDropPosition = DROP_POSITIONS[positionIndex + 1];
-        if (positionIndex < DROP_POSITIONS.length - 1 && !(nextDropPosition === 'after' && nextKey != null)) {
-          return {
-            type: 'item',
-            key: target.key,
-            dropPosition: nextDropPosition
-          };
-        }
+        // If the the keyboard delegate returned the next key in the collection,
+        // first try the other positions in the current key. Otherwise (e.g. in a grid layout),
+        // jump to the same drop position in the new key.
+        let nextCollectionKey = horizontal && direction === 'rtl' ? localState.state.collection.getKeyBefore(target.key) : localState.state.collection.getKeyAfter(target.key);
+        if (nextKey == null || nextKey === nextCollectionKey) {
+          let positionIndex = dropPositions.indexOf(target.dropPosition);
+          let nextDropPosition = dropPositions[positionIndex + 1];
+          if (positionIndex < dropPositions.length - 1 && !(nextDropPosition === dropPositions[2] && nextKey != null)) {
+            return {
+              type: 'item',
+              key: target.key,
+              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 the last drop position was 'after', then 'before' on the next key is equivalent.
+          // Switch to 'on' instead.
+          if (target.dropPosition === dropPositions[2]) {
+            dropPosition = 'on';
+          }
+        } else {
+          dropPosition = target.dropPosition;
         }
       }
 
@@ -250,28 +403,40 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       };
     };
 
-    let getPreviousTarget = (target: DropTarget, wrap = true): DropTarget => {
+    let getPreviousTarget = (target: DropTarget, wrap = true, horizontal = false): DropTarget => {
       let {keyboardDelegate} = localState.props;
-      let nextKey = target?.type === 'item'
-        ? keyboardDelegate.getKeyAbove(target.key)
-        : keyboardDelegate.getLastKey();
-      let dropPosition: DropPosition = !target || target.type === 'root' ? 'after' : 'on';
+      let nextKey: Key;
+      if (target?.type === 'item') {
+        nextKey = horizontal ? keyboardDelegate.getKeyLeftOf(target.key) : keyboardDelegate.getKeyAbove(target.key);
+      } else {
+        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getFirstKey() : keyboardDelegate.getLastKey();
+      }
+      let dropPositions = horizontal && direction === 'rtl' ? DROP_POSITIONS_RTL : DROP_POSITIONS;
+      let dropPosition: DropPosition = !target || target.type === 'root' ? dropPositions[2] : 'on';
 
       if (target?.type === 'item') {
-        let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
-        let nextDropPosition = DROP_POSITIONS[positionIndex - 1];
-        if (positionIndex > 0 && nextDropPosition !== 'after') {
-          return {
-            type: 'item',
-            key: target.key,
-            dropPosition: nextDropPosition
-          };
-        }
+        // If the the keyboard delegate returned the previous key in the collection,
+        // first try the other positions in the current key. Otherwise (e.g. in a grid layout),
+        // jump to the same drop position in the new key.
+        let prevCollectionKey = horizontal && direction === 'rtl' ? localState.state.collection.getKeyAfter(target.key) : localState.state.collection.getKeyBefore(target.key);
+        if (nextKey == null || nextKey === prevCollectionKey) {
+          let positionIndex = dropPositions.indexOf(target.dropPosition);
+          let nextDropPosition = dropPositions[positionIndex - 1];
+          if (positionIndex > 0 && nextDropPosition !== dropPositions[2]) {
+            return {
+              type: 'item',
+              key: target.key,
+              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 the last drop position was 'before', then 'after' on the previous key is equivalent.
+          // Switch to 'on' instead.
+          if (target.dropPosition === dropPositions[0]) {
+            dropPosition = 'on';
+          }
+        } else {
+          dropPosition = target.dropPosition;
         }
       }
 
@@ -301,13 +466,15 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     ): DropTarget => {
       let seenRoot = 0;
       let operation: DropOperation;
+      let {draggingKeys} = globalDndState;
+      let isInternal = isInternalDropOperation(ref);
       do {
         let nextTarget = getNextTarget(target, wrap);
         if (!nextTarget) {
           return null;
         }
         target = nextTarget;
-        operation = localState.state.getDropOperation(nextTarget, types, allowedDropOperations);
+        operation = localState.state.getDropOperation({target: nextTarget, types, allowedOperations: allowedDropOperations, isInternal, draggingKeys});
         if (target.type === 'root') {
           seenRoot++;
         }
@@ -326,9 +493,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
     return DragManager.registerDropTarget({
       element: ref.current,
+      preventFocusOnDrop: true,
       getDropOperation(types, allowedOperations) {
         if (localState.state.target) {
-          return localState.state.getDropOperation(localState.state.target, types, allowedOperations);
+          let {draggingKeys} = globalDndState;
+          let isInternal = isInternalDropOperation(ref);
+          return localState.state.getDropOperation({target: localState.state.target, types, allowedOperations, isInternal, draggingKeys});
         }
 
         // Check if any of the targets accept the drop.
@@ -340,6 +510,8 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         let types = getTypes(drag.items);
         let selectionManager = localState.state.selectionManager;
         let target: DropTarget;
+        // Update the drop collection ref tracker for useDroppableItem's getDropOperation isInternal check
+        setDropCollectionRef(ref);
 
         // When entering the droppable collection for the first time, the default drop target
         // is after the focused key.
@@ -372,8 +544,10 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             dropPosition
           };
 
+          let {draggingKeys} = globalDndState;
+          let isInternal = isInternalDropOperation(ref);
           // If the default target is not valid, find the next one that is.
-          if (localState.state.getDropOperation(target, types, drag.allowedDropOperations) === 'cancel') {
+          if (localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternal, draggingKeys}) === 'cancel') {
             target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
               ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
           }
@@ -387,6 +561,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         localState.state.setTarget(target);
       },
       onDropExit() {
+        setDropCollectionRef(undefined);
         localState.state.setTarget(null);
       },
       onDropTargetEnter(target) {
@@ -407,7 +582,8 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         }
       },
       onDrop(e, target) {
-        if (localState.state.target && typeof localState.props.onDrop === 'function') {
+        setDropCollectionRef(ref);
+        if (localState.state.target) {
           onDrop(e, target || localState.state.target);
         }
       },
@@ -429,6 +605,20 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             }
             break;
           }
+          case 'ArrowLeft': {
+            if (keyboardDelegate.getKeyLeftOf) {
+              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getPreviousTarget(target, wrap, true));
+              localState.state.setTarget(target);
+            }
+            break;
+          }
+          case 'ArrowRight': {
+            if (keyboardDelegate.getKeyRightOf) {
+              let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap) => getNextTarget(target, wrap, true));
+              localState.state.setTarget(target);
+            }
+            break;
+          }
           case 'Home': {
             if (keyboardDelegate.getFirstKey) {
               let target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
@@ -471,7 +661,9 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
                 // If the target does not accept the drop, find the next valid target.
                 // If no next valid target, find the previous valid target.
-                let operation = localState.state.getDropOperation(target, types, drag.allowedDropOperations);
+                let {draggingCollectionRef, draggingKeys} = globalDndState;
+                let isInternal = draggingCollectionRef?.current === ref?.current;
+                let operation = localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternal, draggingKeys});
                 if (operation === 'cancel') {
                   target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
                     ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
@@ -513,7 +705,9 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
               // If the target does not accept the drop, find the previous valid target.
               // If no next valid target, find the next valid target.
-              let operation = localState.state.getDropOperation(target, types, drag.allowedDropOperations);
+              let {draggingKeys} = globalDndState;
+              let isInternal = isInternalDropOperation(ref);
+              let operation = localState.state.getDropOperation({target, types, allowedOperations: drag.allowedDropOperations, isInternal, draggingKeys});
               if (operation === 'cancel') {
                 target = nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false)
                   ?? nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false);
@@ -526,9 +720,10 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         }
       }
     });
-  }, [localState, ref, onDrop]);
+  }, [localState, ref, onDrop, direction]);
 
-  let id = useDroppableCollectionId(state);
+  let id = useId();
+  droppableCollectionMap.set(state, {id, ref});
   return {
     collectionProps: mergeProps(dropProps, {
       id,