chore(Collections): use stable ids based on parentKey

Author: chirokas

packages/react-aria/src/collections/CollectionBuilder.tsx

@@ -162,7 +162,7 @@ function useSSRCollectionNode<T extends Element>(CollectionNodeClass: Collection
   }
 
   // @ts-ignore
-  return <CollectionNodeClass.type ref={itemRef}>{children}</CollectionNodeClass.type>;
+  return <CollectionNodeClass.type data-key={props.id} ref={itemRef}>{children}</CollectionNodeClass.type>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/react-aria/src/collections/Document.ts

@@ -260,6 +260,7 @@ export class ElementNode<T> extends BaseNode<T> {
   node: CollectionNode<T> | null;
   isMutated = true;
   private _index: number = 0;
+  private _attributesByNameMap = new Map<string, string>();
   isHidden = false;
 
   constructor(type: string, ownerDocument: Document<T, any>) {
@@ -333,7 +334,7 @@ export class ElementNode<T> extends BaseNode<T> {
     let node;
     let {value, textValue, id, ...props} = obj;
     if (this.node == null) {
-      node = new CollectionNodeClass(id ?? `react-aria-${++this.ownerDocument.nodeId}`);
+      node = new CollectionNodeClass(id ?? makeId(this));
       this.node = node;
     } else {
       node = this.getMutableNode();
@@ -398,9 +399,20 @@ export class ElementNode<T> extends BaseNode<T> {
   }
 
   hasAttribute(): void {}
-  setAttribute(): void {}
+
+  setAttribute(qualifiedName: string, value: string): void {
+    this._attributesByNameMap.set(qualifiedName, '' + value);
+  }
+
+  getAttribute(qualifiedName: string): string | null {
+    return this._attributesByNameMap.get(qualifiedName) ?? null;
+  }
+
   setAttributeNS(): void {}
-  removeAttribute(): void {}
+
+  removeAttribute(qualifiedName: string): void {
+    this._attributesByNameMap.delete(qualifiedName);
+  }
 }
 
 /**
@@ -567,3 +579,17 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
     }
   }
 }
+
+function makeId(node: ElementNode<unknown>) {
+  const identifierPrefix = 'react-aria';
+  if (node.parentNode instanceof ElementNode) {
+    // We only use this for id generation on the client
+    const parentKey = node.parentNode.getAttribute('data-key');
+    if (parentKey != null) {
+      // If parentNode specifies a key, generate a stable id based on parentKey
+      // so that useDroppableCollection can keep track of each child even if it is recreated
+      return identifierPrefix + '-' + parentKey + '-' + node.index.toString(32);
+    }
+  }
+  return identifierPrefix + '-' + (++node.ownerDocument.nodeId).toString(32);
+}

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

@@ -245,8 +245,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         draggingKeys
       } = droppingState.current;
 
-      let prevFocusedItem = prevFocusedKey != null ? (state.collection.getItem(prevFocusedKey) ?? prevCollection.getItem(prevFocusedKey)) : null;
-
       // If an insert occurs during a drop, we want to immediately select these items to give
       // feedback to the user that a drop occurred. Only do this if the selection didn't change
       // since the drop started so we don't override if the user or application did something.
@@ -298,15 +296,15 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           }
         }
       } else if (
-        prevFocusedItem != null &&
+        prevFocusedKey != null &&
         state.selectionManager.focusedKey === prevFocusedKey &&
         isInternal &&
         target.type === 'item' &&
         target.dropPosition !== 'on' &&
-        draggingKeys.has(prevFocusedItem.parentKey)
+        draggingKeys.has(state.collection.getItem(prevFocusedKey)?.parentKey)
       ) {
         // Focus row instead of cell when reordering.
-        state.selectionManager.setFocusedKey(prevFocusedItem.parentKey ?? null);
+        state.selectionManager.setFocusedKey(state.collection.getItem(prevFocusedKey)?.parentKey ?? null);
         setInteractionModality('keyboard');
       } else if (
         state.selectionManager.focusedKey === prevFocusedKey &&