[WIP] fix: RAC Tree DnD follow-up

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});
           }
@@ -743,7 +743,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
-        localState.props.onKeyDown?.(e as any);
       }
     });
   }, [localState, ref, onDrop, direction]);

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',

packages/react-aria-components/example/index.css

@@ -52,6 +52,11 @@ html {
     background: lightseagreen;
     color: white;
   }
+
+  &[data-drop-target] {
+    background: purple;
+    color: white;
+  }
 }
 
 .menu {

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, 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,15 +603,21 @@ 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),
           rowProps,
           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={[

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,18 +584,19 @@ 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);
           }
         }
       } catch (error) {
         console.error(error);
       }
+    },
+    onItemDrop() {
+      // TODO: Need to get this to work without needing to pass this
     }
   });