feat(dnd): pass draggedKey into getItems

packages/@react-aria/dnd/stories/DraggableCollection.tsx

@@ -100,7 +100,8 @@ function DraggableCollection(props) {
     preview,
     onDragStart: props.onDragStart,
     onDragMove: props.onDragMove,
-    onDragEnd: props.onDragEnd
+    onDragEnd: props.onDragEnd,
+    ...props.draggableCollectionStateProps
   });
   useDraggableCollection({}, dragState, ref);
 

packages/@react-aria/dnd/stories/dnd.stories.tsx

@@ -20,6 +20,7 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import dndStyles from './dnd.css';
+import {DraggableCollectionExample as DraggableGridExampleStandalone} from './DraggableCollection';
 import {DraggableListBox} from './DraggableListBox';
 import {DragPreview} from '../src/DragPreview';
 import {DroppableGridExample} from './DroppableGrid';
@@ -575,3 +576,21 @@ export const DroppableEnabledDisabledControl: DnDStoryObj = {
     }
   }
 };
+
+export const DraggedItemOnly: DnDStoryObj = {
+  render: () => (
+    <Flex direction="row" gap="size-200" alignItems="center" wrap>
+      <DraggableGridExampleStandalone
+        draggableCollectionStateProps={{
+          getItems: (_, draggedKey) => {
+            action('getItems')(draggedKey);
+            return [{
+              'text/plain': `Dragged item: ${draggedKey}`
+            }];
+          }
+        }} />
+      <Droppable />
+    </Flex>
+  ),
+  name: 'Drag only dragged item'
+};

packages/@react-aria/dnd/test/useDraggableCollection.test.js

@@ -313,6 +313,35 @@ describe('useDraggableCollection', () => {
       expect(cells).toHaveLength(2);
       expect(cells.map(c => c.textContent)).toEqual(['Foo', 'Baz']);
     });
+
+    it('should pass the dragged key as second argument to getItems', async () => {
+      let getItems = jest.fn().mockImplementation((keys) => {
+        return [...keys].map(key => ({'text/plain': key}));
+      });
+
+      let tree = render(
+        <Provider theme={theme}>
+          <DraggableCollectionExample draggableCollectionStateProps={{getItems}} />
+        </Provider>
+      );
+
+      let grid = tree.getByRole('grid');
+      let cells = within(grid).getAllByRole('gridcell');
+      expect(cells).toHaveLength(3);
+
+      // Select 'foo' and 'bar'
+      await user.click(cells[0]);
+      await user.click(cells[1]);
+
+      let dataTransfer = new DataTransfer();
+      // Start dragging 'bar'
+      fireEvent(cells[1], new DragEvent('dragstart', {dataTransfer, clientX: 0, clientY: 0}));
+
+      expect(getItems).toHaveBeenCalledTimes(1);
+      let [keysArg, draggedKeyArg] = getItems.mock.calls[0];
+      expect(keysArg).toEqual(new Set(['foo', 'bar']));
+      expect(draggedKeyArg).toBe('bar');
+    });
   });
 
   describe('keyboard', () => {

packages/@react-spectrum/dnd/src/useDragAndDrop.ts

@@ -65,7 +65,12 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
    * A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.
    * @default () => []
    */
-  getItems?: (keys: Set<Key>) => DragItem[],
+  getItems?: (
+    /** The set of keys that can be affected by the drag (e.g. the current selection). */
+    keys: Set<Key>,
+    /** The key of the item the user actually dragged. */
+    draggedKey: Key
+  ) => DragItem[],
   /** Provide a custom drag preview. `draggedKey` represents the key of the item the user actually dragged. */
   renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element
 }

packages/@react-stately/dnd/src/useDraggableCollectionState.ts

@@ -118,7 +118,7 @@ export function useDraggableCollectionState(props: DraggableCollectionStateOptio
     },
     getKeysForDrag: getKeys,
     getItems(key) {
-      return getItems(getKeys(key));
+      return getItems(getKeys(key), key);
     },
     isDisabled,
     preview,

packages/@react-types/shared/src/dnd.d.ts

@@ -285,7 +285,12 @@ export interface DraggableCollectionProps {
   /** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */
   onDragEnd?: (e: DraggableCollectionEndEvent) => void,
   /** A function that returns the items being dragged. */
-  getItems: (keys: Set<Key>) => DragItem[],
+  getItems: (
+    /** The set of keys that can be affected by the drag (e.g. the current selection). */
+    keys: Set<Key>,
+    /** The key of the item the user actually dragged. */
+    draggedKey: Key
+  ) => DragItem[],
   /** The ref of the element that will be rendered as the drag preview while dragging. */
   preview?: RefObject<DragPreviewRenderer | null>,
   /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */

packages/react-aria-components/src/useDragAndDrop.tsx

@@ -76,7 +76,12 @@ export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'prev
    * A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.
    * @default () => []
    */
-  getItems?: (keys: Set<Key>) => DragItem[],
+  getItems?: (
+    /** The set of keys that can be affected by the drag (e.g. the current selection). */
+    keys: Set<Key>,
+    /** The key of the item the user actually dragged. */
+    draggedKey: Key
+  ) => DragItem[],
   /**
    * A function that renders a drag preview, which is shown under the user's cursor while dragging.
    * By default, a copy of the dragged element is rendered.