From 16ab6bfba14227f343858e112e5ad8928161b18e Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 25 Apr 2025 18:10:56 -0500
Subject: [PATCH 1/5] support dropping on items

---
 .../dnd/src/useDroppableCollection.ts         |  2 +-
 .../react-aria-components/example/index.css   |  5 +++
 packages/react-aria-components/src/Tree.tsx   | 34 +++++++++++++------
 .../stories/Tree.stories.tsx                  | 13 +++----
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index 234793a78e6..fa17d25b8ac 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on') {
+        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }
diff --git a/packages/react-aria-components/example/index.css b/packages/react-aria-components/example/index.css
index 3a56707c261..43a01fb013b 100644
--- a/packages/react-aria-components/example/index.css
+++ b/packages/react-aria-components/example/index.css
@@ -52,6 +52,11 @@ html {
     background: lightseagreen;
     color: white;
   }
+
+  &[data-drop-target] {
+    background: purple;
+    color: white;
+  }
 }
 
 .menu {
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 290a8bb317a..aac53d9fa66 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem} from 'react-aria';
+import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
@@ -260,6 +260,10 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
       {
         keyboardDelegate,
         dropTargetDelegate,
+        shouldAcceptItemDrop: (target) => {
+          let item = state.collection.getItem(target.key);
+          return item?.hasChildNodes ?? false;
+        },
         onDropActivate: (e) => {
           // Expand collapsed item when dragging over
           if (e.target.type === 'item') {
@@ -514,13 +518,17 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
   }
 
-  let droppableItem: DroppableItemResult | null = null;
+  let dropIndicator: DropIndicatorAria | undefined = undefined;
+  let dropIndicatorRef = useRef<HTMLDivElement>(null);
+  let {visuallyHiddenProps} = useVisuallyHidden();
   if (dropState && dragAndDropHooks) {
-    droppableItem = dragAndDropHooks.useDroppableItem!({target: {type: 'item', key: item.key, dropPosition: 'on'}}, dropState, ref);
+    dropIndicator = dragAndDropHooks.useDropIndicator!({
+      target: {type: 'item', key: item.key, dropPosition: 'on'}
+    }, dropState, dropIndicatorRef);
   }
 
+
   let isDragging = dragState && dragState.isDragging(item.key);
-  let isDropTarget = droppableItem?.isDropTarget;
 
   let selectionMode = state.selectionManager.selectionMode;
   let selectionBehavior = state.selectionManager.selectionBehavior;
@@ -538,8 +546,8 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     id: item.key,
     allowsDragging: !!dragState,
     isDragging,
-    isDropTarget
-  }), [states, isHovered, isFocusVisible, state.selectionManager, isExpanded, hasChildItems, level, isFocusVisibleWithin, state, item.key, dragState, isDragging, isDropTarget, selectionBehavior, selectionMode]);
+    isDropTarget: dropIndicator?.isDropTarget
+  }), [states, isHovered, isFocusVisible, isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isFocusVisibleWithin, state, item.key, dragState, isDragging, dropIndicator?.isDropTarget]);
 
   let renderProps = useRenderProps({
     ...props,
@@ -570,7 +578,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   let dragButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (dragState && !dragButtonRef.current && process.env.NODE_ENV !== 'production') {
-      console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
+      console.warn('Draggable items in a Tree must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
     }
   // eslint-disable-next-line
   }, []);
@@ -595,6 +603,13 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
 
   return (
     <>
+      {dropIndicator && !dropIndicator.isHidden && (
+        <div role="row" style={{height: 0}}>
+          <div role="gridcell" style={{padding: 0}}>
+            <div role="button" {...visuallyHiddenProps} {...dropIndicator.dropIndicatorProps} ref={dropIndicatorRef} />
+          </div>
+        </div>
+      )}
       <div
         {...mergeProps(
           filterDOMProps(props as any),
@@ -602,8 +617,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
           focusProps,
           hoverProps,
           focusWithinProps,
-          draggableItem?.dragProps,
-          droppableItem?.dropProps
+          draggableItem?.dragProps
         )}
         {...renderProps}
         ref={ref}
@@ -620,7 +634,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
         data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}
         data-allows-dragging={!!dragState || undefined}
         data-dragging={isDragging || undefined}
-        data-drop-target={isDropTarget || undefined}>
+        data-drop-target={dropIndicator?.isDropTarget || undefined}>
         <div {...gridCellProps} style={{display: 'contents'}}>
           <Provider
             values={[
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index c2483864628..f7ab44b81ba 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -573,7 +573,7 @@ function TreeDragAndDropExample(args) {
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems,
-    getAllowedDropOperations: () => ['move'],
+    getAllowedDropOperations: () => ['move', 'cancel'],
     onReorder(e) {
       console.log(`moving [${[...e.keys].join(',')}] ${e.target.dropPosition} ${e.target.key}`);
       try {
@@ -584,11 +584,9 @@ function TreeDragAndDropExample(args) {
         } else if (e.target.dropPosition === 'on') {
           let targetNode = treeData.getItem(e.target.key);
           if (targetNode) {
-            let targetIndex = targetNode.children ? targetNode.children.length : 0;
-            let keyArray = Array.from(e.keys);
-            for (let i = 0; i < keyArray.length; i++) {
-              treeData.move(keyArray[i], e.target.key, targetIndex + i);
-            }
+            e.keys.forEach(key => {
+              treeData.move(key, e.target.key, targetNode.children ? targetNode.children.length : 0);
+            });
           } else {
             console.error('Target node not found for drop on:', e.target.key);
           }
@@ -596,6 +594,9 @@ function TreeDragAndDropExample(args) {
       } catch (error) {
         console.error(error);
       }
+    },
+    onItemDrop() {
+      // TODO: Need to get this to work without needing to pass this
     }
   });
 

From 145a58f7a055f7a996391e8bceebafaa4f342553 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 10:18:25 -0500
Subject: [PATCH 2/5] remove extraneous onKeyDown

---
 packages/@react-aria/dnd/src/useDroppableCollection.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index fa17d25b8ac..e43a1d3495e 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -743,7 +743,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
-        localState.props.onKeyDown?.(e as any);
       }
     });
   }, [localState, ref, onDrop, direction]);

From 532ec4c368df51c4817c9bf3019a56dba5b876f8 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 11:58:34 -0500
Subject: [PATCH 3/5] fix imports

---
 packages/react-aria-components/src/Tree.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index aac53d9fa66..01cef2ef2b4 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
+import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';

From f87e28b1321df9e6de90f65309bf8255ec762d33 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 12:23:03 -0500
Subject: [PATCH 4/5] fix onInsert call

---
 packages/@react-aria/dnd/src/useDroppableCollection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index e43a1d3495e..33c09cacfd9 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
+        if (target.dropPosition !== 'on') {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }

From c7c55cc2611ad97cf05db11007668d03a1c053b1 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 12:54:10 -0500
Subject: [PATCH 5/5] add back condition and fix tests

---
 .../@react-aria/dnd/src/useDroppableCollection.ts    |  2 +-
 packages/@react-spectrum/table/test/TableDnd.test.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index 33c09cacfd9..e43a1d3495e 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on') {
+        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }
diff --git a/packages/@react-spectrum/table/test/TableDnd.test.js b/packages/@react-spectrum/table/test/TableDnd.test.js
index a97231f92a7..c07936e6ec8 100644
--- a/packages/@react-spectrum/table/test/TableDnd.test.js
+++ b/packages/@react-spectrum/table/test/TableDnd.test.js
@@ -949,7 +949,7 @@ describe('TableView', function () {
           expect(onReorder).toHaveBeenCalledTimes(0);
           expect(onItemDrop).toHaveBeenCalledTimes(1);
           expect(onRootDrop).toHaveBeenCalledTimes(0);
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
               key: '5',
@@ -1060,7 +1060,7 @@ describe('TableView', function () {
           expect(onReorder).toHaveBeenCalledTimes(0);
           expect(onItemDrop).toHaveBeenCalledTimes(1);
           expect(onRootDrop).toHaveBeenCalledTimes(0);
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
               key: '4',
@@ -1664,7 +1664,7 @@ describe('TableView', function () {
             dropOperation: 'move',
             isInternal: false
           });
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           // Only has the file in onItemDrop, the folder item should have been filtered out
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
@@ -2120,7 +2120,7 @@ describe('TableView', function () {
             dropOperation: 'move',
             isInternal: false
           });
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
               key: '7',
@@ -2172,7 +2172,7 @@ describe('TableView', function () {
           expect(document.activeElement).toHaveAttribute('aria-label', 'Drop on Documents');
           await user.keyboard('{Enter}');
 
-          expect(onReorder).toHaveBeenCalledTimes(0);
+          expect(onReorder).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledTimes(2);
           expect(onRootDrop).toHaveBeenCalledTimes(0);
           expect(onDragEnd).toHaveBeenCalledTimes(2);
@@ -2184,7 +2184,7 @@ describe('TableView', function () {
             dropOperation: 'move',
             isInternal: true
           });
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenLastCalledWith({
             target: {
               key: '3',