From 1a278f3444a4c12b31b28a837cef9b87f79d8a17 Mon Sep 17 00:00:00 2001
From: Lauro Figueiredo <lauro.figueiredo@avenuecode.com>
Date: Wed, 1 Nov 2023 21:51:12 -0300
Subject: [PATCH 1/3] Generate the list keys with the hierarchy reference

---
 .../src/components/default-container.tsx         |  2 +-
 .../react-arborist/src/interfaces/node-api.ts    | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/react-arborist/src/components/default-container.tsx b/packages/react-arborist/src/components/default-container.tsx
index 9296cac4..c8633d2c 100644
--- a/packages/react-arborist/src/components/default-container.tsx
+++ b/packages/react-arborist/src/components/default-container.tsx
@@ -223,7 +223,7 @@ export function DefaultContainer() {
         width={tree.width}
         itemSize={tree.rowHeight}
         overscanCount={tree.overscanCount}
-        itemKey={(index) => tree.visibleNodes[index]?.id || index}
+        itemKey={(index) => tree.visibleNodes[index]?.key() || index}
         outerElementType={ListOuterElement}
         innerElementType={ListInnerElement}
         onScroll={tree.props.onScroll}
diff --git a/packages/react-arborist/src/interfaces/node-api.ts b/packages/react-arborist/src/interfaces/node-api.ts
index cd4da42f..a8e4f1e1 100644
--- a/packages/react-arborist/src/interfaces/node-api.ts
+++ b/packages/react-arborist/src/interfaces/node-api.ts
@@ -196,4 +196,20 @@ export class NodeApi<T = any> {
       this.activate();
     }
   };
+
+  path() {
+    const path = [this.id];
+    let parent = this.parent;
+
+    while (parent) {
+      path.push(parent.id);
+      parent = parent.parent;
+    }
+
+    return path.reverse();
+  }
+
+  key() {
+    return this.path().join(',');
+  }
 }

From c22431405cc90547dea0e7c2c39ee889182fed80 Mon Sep 17 00:00:00 2001
From: Lauro Figueiredo <lauro.figueiredo@avenuecode.com>
Date: Wed, 1 Nov 2023 21:55:11 -0300
Subject: [PATCH 2/3] Validate if the id exists

---
 packages/react-arborist/src/interfaces/node-api.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-arborist/src/interfaces/node-api.ts b/packages/react-arborist/src/interfaces/node-api.ts
index a8e4f1e1..6bbf0139 100644
--- a/packages/react-arborist/src/interfaces/node-api.ts
+++ b/packages/react-arborist/src/interfaces/node-api.ts
@@ -210,6 +210,10 @@ export class NodeApi<T = any> {
   }
 
   key() {
-    return this.path().join(',');
+    if (this.id) {
+      return this.path().join(',');
+    }
+
+    return null;
   }
 }

From 5a29520138562f9e428e23860cb08bbd642dd1ec Mon Sep 17 00:00:00 2001
From: Lauro Figueiredo <lauro.figueiredo@avenuecode.com>
Date: Wed, 1 Nov 2023 22:06:31 -0300
Subject: [PATCH 3/3] Docs and transform into getter

---
 README.md                                     |  8 ++++
 .../src/components/default-container.tsx      |  2 +-
 .../react-arborist/src/interfaces/node-api.ts | 40 +++++++++----------
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index bf80cb0a..78bfc2b8 100644
--- a/README.md
+++ b/README.md
@@ -466,6 +466,14 @@ _node_.**childIndex**
 
 Returns the node's index in relation to its siblings.
 
+_node_.**path**
+
+Returns an array that represents the ancestry of the node, starting from the root node and ending with the current node. Each element in the array corresponds to an ID in the node's hierarchy.
+
+_node_.**key**
+
+Returns the unique React key associated with the node.
+
 _node_.**next**
 
 Returns the next visible node. The node directly under this node in the tree component. Returns null if none exist.
diff --git a/packages/react-arborist/src/components/default-container.tsx b/packages/react-arborist/src/components/default-container.tsx
index c8633d2c..6eb19845 100644
--- a/packages/react-arborist/src/components/default-container.tsx
+++ b/packages/react-arborist/src/components/default-container.tsx
@@ -223,7 +223,7 @@ export function DefaultContainer() {
         width={tree.width}
         itemSize={tree.rowHeight}
         overscanCount={tree.overscanCount}
-        itemKey={(index) => tree.visibleNodes[index]?.key() || index}
+        itemKey={(index) => tree.visibleNodes[index]?.key || index}
         outerElementType={ListOuterElement}
         innerElementType={ListInnerElement}
         onScroll={tree.props.onScroll}
diff --git a/packages/react-arborist/src/interfaces/node-api.ts b/packages/react-arborist/src/interfaces/node-api.ts
index 6bbf0139..352cf813 100644
--- a/packages/react-arborist/src/interfaces/node-api.ts
+++ b/packages/react-arborist/src/interfaces/node-api.ts
@@ -115,6 +115,26 @@ export class NodeApi<T = any> {
     }
   }
 
+  get path() {
+    const path = [this.id];
+    let parent = this.parent;
+
+    while (parent) {
+      path.push(parent.id);
+      parent = parent.parent;
+    }
+
+    return path.reverse();
+  }
+
+  get key() {
+    if (this.id) {
+      return this.path.join(',');
+    }
+
+    return null;
+  }
+
   get next(): NodeApi<T> | null {
     if (this.rowIndex === null) return null;
     return this.tree.at(this.rowIndex + 1);
@@ -196,24 +216,4 @@ export class NodeApi<T = any> {
       this.activate();
     }
   };
-
-  path() {
-    const path = [this.id];
-    let parent = this.parent;
-
-    while (parent) {
-      path.push(parent.id);
-      parent = parent.parent;
-    }
-
-    return path.reverse();
-  }
-
-  key() {
-    if (this.id) {
-      return this.path().join(',');
-    }
-
-    return null;
-  }
 }