feat(RAC): Tree drag and drop

packages/@react-aria/dnd/src/useDrop.ts

@@ -36,7 +36,6 @@ export interface DropOptions {
   /**
    * Handler that is called after a valid drag is held over the drop target for a period of time.
    * This typically opens the item so that the user can drop within it.
-   * @private
    */
   onDropActivate?: (e: DropActivateEvent) => void,
   /** Handler that is called when a valid drag exits the drop target. */

packages/@react-aria/dnd/src/useDroppableCollection.ts

@@ -30,6 +30,7 @@ import {
   DropTargetDelegate,
   Key,
   KeyboardDelegate,
+  KeyboardEvents,
   Node,
   RefObject
 } from '@react-types/shared';
@@ -46,7 +47,8 @@ export interface DroppableCollectionOptions extends DroppableCollectionProps {
   /** A delegate object that implements behavior for keyboard focus movement. */
   keyboardDelegate: KeyboardDelegate,
   /** A delegate object that provides drop targets for pointer coordinates within the collection. */
-  dropTargetDelegate: DropTargetDelegate
+  dropTargetDelegate: DropTargetDelegate,
+  onKeyDown?: KeyboardEvents['onKeyDown']
 }
 
 export interface DroppableCollectionResult {
@@ -201,7 +203,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       autoScroll.stop();
     },
     onDropActivate(e) {
-      if (state.target?.type === 'item' && state.target?.dropPosition === 'on' && typeof props.onDropActivate === 'function') {
+      if (state.target?.type === 'item' && typeof props.onDropActivate === 'function') {
         props.onDropActivate({
           type: 'dropactivate',
           x: e.x, // todo
@@ -741,6 +743,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
+        localState.props.onKeyDown?.(e as any);
       }
     });
   }, [localState, ref, onDrop, direction]);

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -69,7 +69,8 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
 
   // let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/gridlist');
   let {direction} = useLocale();
-  let {onAction, linkBehavior, keyboardNavigationBehavior} = listMap.get(state)!;
+  let listMapData = listMap.get(state);
+  let {onAction, linkBehavior = 'action', keyboardNavigationBehavior = 'arrow'} = listMapData || {};
   let descriptionId = useSlotId();
 
   // We need to track the key of the item at the time it was last focused so that we force

packages/@react-stately/data/src/useTreeData.ts

@@ -51,6 +51,7 @@ export interface TreeData<T extends object> {
    */
   getItem(key: Key): TreeNode<T> | undefined,
 
+  getDescendantKeys(node?: TreeNode<T>): Key[],
   /**
    * Inserts an item into a parent node as a child.
    * @param parentKey - The key of the parent item to insert into. `null` for the root.
@@ -234,10 +235,29 @@ export function useTreeData<T extends object>(options: TreeOptions<T>): TreeData
     }
   }
 
+  function getDescendantKeys(node: TreeNode<T>): Key[] {
+    let descendantKeys: Key[] = [];
+    if (!node) {
+      return descendantKeys;
+    }
+    function recurse(currentNode: TreeNode<T>) {
+      if (currentNode.children) {
+        for (let child of currentNode.children) {
+          descendantKeys.push(child.key);
+          recurse(child);
+        }
+      }
+    }
+
+    recurse(node);
+    return descendantKeys;
+  }
+
   return {
     items,
     selectedKeys,
     setSelectedKeys,
+    getDescendantKeys,
     getItem(key: Key) {
       return nodeMap.get(key);
     },

packages/@react-stately/data/test/useTreeData.test.js

@@ -11,7 +11,6 @@
  */
 
 import {actHook as act, renderHook} from '@react-spectrum/test-utils-internal';
-import React from 'react';
 import {useTreeData} from '../src/useTreeData';
 
 const initial = [
@@ -745,4 +744,60 @@ describe('useTreeData', function () {
     expect(result.current.items[1].key).toEqual('Emily');
     expect(result.current.items.length).toEqual(2);
   });
+
+  it('gets the descendants of a node', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants;
+    const top = result.current.getItem('David');
+    descendants = result.current.getDescendantKeys(top);
+    expect(descendants).toEqual([
+      'John',
+      'Suzie',
+      'Sam',
+      'Stacy',
+      'Brad',
+      'Jane'
+    ]);
+  });
+
+  it('gets the descendants of a child node', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants;
+    act(() => {
+      const top = result.current.getItem('Sam');
+      descendants = result.current.getDescendantKeys(top);
+    });
+    expect(descendants).toEqual(['Stacy', 'Brad']);
+  });
+
+  it('returns an empty array when getting the descendant keys for a leaf node', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants;
+    act(() => {
+      const top = result.current.getItem('Eli');
+      descendants = result.current.getDescendantKeys(top);
+    });
+    expect(descendants).toEqual([]);
+  });
+
+  it('returns an empty array when an undefined key is supplied', function () {
+    const initialItems = [...initial, {name: 'Emily'}, {name: 'Eli'}];
+    let {result} = renderHook(() =>
+      useTreeData({initialItems, getChildren, getKey})
+    );
+    let descendants;
+    act(() => {
+      descendants = result.current.getDescendantKeys(undefined);
+    });
+    expect(descendants).toEqual([]);
+  });
 });