fix: drag & drop defaultId & disabled behavior

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

@@ -21,6 +21,7 @@ import {
 } from './utils';
 import {
   Collection,
+  DOMProps,
   DropEvent,
   DropOperation,
   DroppableCollectionDropEvent,
@@ -42,7 +43,7 @@ import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useLocale} from '@react-aria/i18n';
 
-export interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DOMProps, 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. */
@@ -379,17 +380,22 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // 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 isNextDisabled = nextCollectionKey && localState.state.selectionManager.isDisabled(nextCollectionKey);
+        if (nextKey == null || nextKey === nextCollectionKey || isNextDisabled) {
           let positionIndex = dropPositions.indexOf(target.dropPosition);
           let nextDropPosition = dropPositions[positionIndex + 1];
-          if (positionIndex < dropPositions.length - 1 && !(nextDropPosition === dropPositions[2] && nextKey != null)) {
+          if (positionIndex < dropPositions.length - 1 && (!(nextDropPosition === dropPositions[2] && nextKey != null) || isNextDisabled)) {
             return {
               type: 'item',
               key: target.key,
               dropPosition: nextDropPosition
             };
           }
 
+          if (isNextDisabled) {
+            nextKey = nextCollectionKey;
+          }
+
           // If the last drop position was 'after', then 'before' on the next key is equivalent.
           // Switch to 'on' instead.
           if (target.dropPosition === dropPositions[2]) {
@@ -433,17 +439,22 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // 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 isPrevDisabled = prevCollectionKey && localState.state.selectionManager.isDisabled(prevCollectionKey);
+        if (nextKey == null || nextKey === prevCollectionKey || isPrevDisabled) {
           let positionIndex = dropPositions.indexOf(target.dropPosition);
           let nextDropPosition = dropPositions[positionIndex - 1];
-          if (positionIndex > 0 && nextDropPosition !== dropPositions[2]) {
+          if (positionIndex > 0 && (nextDropPosition !== dropPositions[2] || isPrevDisabled)) {
             return {
               type: 'item',
               key: target.key,
               dropPosition: nextDropPosition
             };
           }
 
+          if (isPrevDisabled) {
+            nextKey = prevCollectionKey;
+          }
+
           // If the last drop position was 'before', then 'after' on the previous key is equivalent.
           // Switch to 'on' instead.
           if (target.dropPosition === dropPositions[0]) {
@@ -745,7 +756,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     });
   }, [localState, ref, onDrop, direction]);
 
-  let id = useId();
+  let id = useId(props.id);
   droppableCollectionMap.set(state, {id, ref});
   return {
     collectionProps: mergeProps(dropProps, {

packages/@react-spectrum/list/src/ListView.tsx

@@ -167,6 +167,7 @@ export const ListView = React.forwardRef(function ListView<T extends object>(pro
       selectionManager
     });
     droppableCollection = dragAndDropHooks.useDroppableCollection!({
+      id: props.id,
       keyboardDelegate: new ListKeyboardDelegate({
         collection,
         disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,

packages/@react-spectrum/table/src/TableViewBase.tsx

@@ -226,6 +226,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
       selectionManager: state.selectionManager
     });
     droppableCollection = dragAndDropHooks.useDroppableCollection!({
+      id: props.id,
       keyboardDelegate: new ListKeyboardDelegate({
         collection: state.collection,
         disabledKeys: state.selectionManager.disabledKeys,

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

@@ -99,7 +99,7 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
       // Feedback was that internal root drop was weird so preventing that from happening
       let isValidRootDrop = onRootDrop && target.type === 'root' && !isInternal;
       // Automatically prevent items (i.e. folders) from being dropped on themselves.
-      let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && target.key != null && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
+      let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && target.key != null && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types)) && !selectionManager.isDisabled(target.key);
 
       if (onDrop || isValidInsert || isValidReorder || isValidRootDrop || isValidOnItemDrop) {
         if (getDropOperation) {
@@ -111,7 +111,7 @@ export function useDroppableCollectionState(props: DroppableCollectionStateOptio
     }
 
     return 'cancel';
-  }, [isDisabled, acceptedDragTypes, getDropOperation, onInsert, onRootDrop, onItemDrop, shouldAcceptItemDrop, onReorder, onDrop]);
+  }, [isDisabled, acceptedDragTypes, getDropOperation, onInsert, onRootDrop, onItemDrop, shouldAcceptItemDrop, onReorder, onDrop, selectionManager]);
 
   return {
     collection,

packages/@react-types/table/src/index.d.ts

@@ -25,7 +25,7 @@ export type ColumnDynamicSize = `${number}fr`; // match regex: /^(\d+)(?=fr$)/
 /** All possible sizes a column can be assigned. */
 export type ColumnSize = ColumnStaticSize | ColumnDynamicSize;
 
-export interface TableProps<T> extends MultipleSelection, Sortable {
+export interface TableProps<T> extends DOMProps, MultipleSelection, Sortable {
   /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
   children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
   /** A list of row keys to disable. */
@@ -35,7 +35,7 @@ export interface TableProps<T> extends MultipleSelection, Sortable {
 /**
  * @deprecated - use SpectrumTableProps from '@adobe/react-spectrum' instead.
  */
-export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionProps, DOMProps, AriaLabelingProps, StyleProps {
+export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionProps, AriaLabelingProps, StyleProps {
   /**
    * Sets the amount of vertical padding within each cell.
    * @default 'regular'

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

@@ -182,6 +182,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     });
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(collection, ref, {layout, direction});
     droppableCollection = dragAndDropHooks.useDroppableCollection!({
+      id: props.id,
       keyboardDelegate,
       dropTargetDelegate
     }, dropState, ref);

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

@@ -192,6 +192,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
 
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(collection, listBoxRef, {orientation, layout, direction});
     droppableCollection = dragAndDropHooks.useDroppableCollection!({
+      id: props.id,
       keyboardDelegate,
       dropTargetDelegate
     }, dropState, listBoxRef);

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

@@ -365,7 +365,6 @@ interface TableInnerProps {
   collection: ITableCollection<Node<object>>
 }
 
-
 function TableInner({props, forwardedRef: ref, selectionState, collection}: TableInnerProps) {
   let tableContainerContext = useContext(ResizableTableContainerContext);
   ref = useObjectRef(useMemo(() => mergeRefs(ref, tableContainerContext?.tableRef), [ref, tableContainerContext?.tableRef]));
@@ -433,6 +432,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
     });
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(collection.rows, ref);
     droppableCollection = dragAndDropHooks.useDroppableCollection!({
+      id: props.id,
       keyboardDelegate,
       dropTargetDelegate
     }, dropState, ref);