From 7a4c6d7c2bdd095fa5ed5f511b07e1ca3e56576e Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 5 Sep 2024 16:09:10 +0200
Subject: [PATCH] [docs] Add missing callout on Imperative API tree view
 sections

---
 docs/data/tree-view/rich-tree-view/items/items.md   | 13 +++++++++++++
 .../tree-view/rich-tree-view/selection/selection.md |  2 +-
 docs/data/tree-view/simple-tree-view/items/items.md | 13 +++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md
index 322e8c3dba80..fbf179e3685e 100644
--- a/docs/data/tree-view/rich-tree-view/items/items.md
+++ b/docs/data/tree-view/rich-tree-view/items/items.md
@@ -151,6 +151,19 @@ Use the `onItemClick` prop to track the clicked item:
 
 ## Imperative API
 
+:::success
+To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows:
+
+```tsx
+const apiRef = useTreeViewApiRef();
+
+return <RichTreeView apiRef={apiRef} items={ITEMS}>;
+```
+
+When your component first renders, `apiRef` will be `undefined`.
+After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
+:::
+
 ### Get an item by ID
 
 Use the `getItem` API method to get an item by its ID.
diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md
index 2c45bd280411..2175d7ad3978 100644
--- a/docs/data/tree-view/rich-tree-view/selection/selection.md
+++ b/docs/data/tree-view/rich-tree-view/selection/selection.md
@@ -103,7 +103,7 @@ To use the `apiRef` object, you need to initialize it using the `useTreeViewApiR
 ```tsx
 const apiRef = useTreeViewApiRef();
 
-return <SimpleTreeView apiRef={apiRef}>{children}</SimpleTreeView>;
+return <RichTreeView apiRef={apiRef} items={ITEMS}>;
 ```
 
 When your component first renders, `apiRef` will be `undefined`.
diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md
index 755b162c915d..c177b4769e2f 100644
--- a/docs/data/tree-view/simple-tree-view/items/items.md
+++ b/docs/data/tree-view/simple-tree-view/items/items.md
@@ -82,6 +82,19 @@ Use the `onItemClick` prop to track the clicked item:
 
 ## Imperative API
 
+:::success
+To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows:
+
+```tsx
+const apiRef = useTreeViewApiRef();
+
+return <SimpleTreeView apiRef={apiRef}>{children}</SimpleTreeView>;
+```
+
+When your component first renders, `apiRef` will be `undefined`.
+After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
+:::
+
 ### Get an item's DOM element by ID
 
 Use the `getItemDOMElement` API method to get an item's DOM element by its ID.