mui · flaviendelangle · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/docs/data/tree-view/rich-tree-view/editing/ApiMethodSetEditedItem.js b/docs/data/tree-view/rich-tree-view/editing/ApiMethodSetEditedItem.js
@@ -3,13 +3,13 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodSetEditedItem() {
   const [items, setItems] = React.useState([
     { id: '1', label: 'Jane Doe', editable: true },
   ]);
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
 
   const handleAddFolder = () => {
     const newId = String(items.length + 1);

diff --git a/docs/data/tree-view/rich-tree-view/editing/ApiMethodSetEditedItem.tsx b/docs/data/tree-view/rich-tree-view/editing/ApiMethodSetEditedItem.tsx
@@ -3,13 +3,13 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 export default function ApiMethodSetEditedItem() {
   const [items, setItems] = React.useState([
     { id: '1', label: 'Jane Doe', editable: true },
   ]);
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
 
   const handleAddFolder = () => {
     const newId = String(items.length + 1);

diff --git a/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.js b/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.js
@@ -3,12 +3,12 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 import { MUI_X_PRODUCTS } from './products';
 
 export default function ApiMethodUpdateItemLabel() {
   const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
 
   const handleUpdateLabel = () => {
     if (isLabelUpdated) {

diff --git a/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.tsx b/docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.tsx
@@ -3,12 +3,12 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 import { MUI_X_PRODUCTS } from './products';
 
 export default function ApiMethodUpdateItemLabel() {
   const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
 
   const handleUpdateLabel = () => {
     if (isLabelUpdated) {

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditLeaves.js b/docs/data/tree-view/rich-tree-view/editing/EditLeaves.js
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -36,7 +36,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function EditLeaves() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   return (
     <Box sx={{ minHeight: 352, minWidth: 260 }}>
       <RichTreeView

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditLeaves.tsx b/docs/data/tree-view/rich-tree-view/editing/EditLeaves.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
 type ExtendedTreeItemProps = {
@@ -43,7 +43,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
 ];
 
 export default function EditLeaves() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   return (
     <Box sx={{ minHeight: 352, minWidth: 260 }}>
       <RichTreeView

diff --git a/docs/data/tree-view/rich-tree-view/editing/editing.md b/docs/data/tree-view/rich-tree-view/editing/editing.md
@@ -71,15 +71,21 @@
 ## Imperative API
 
 :::success
-To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows:
+To use the `apiRef` object, you need to initialize it using the `useRichTreeViewApiRef` or `useRichTreeViewProApiRef` hook as follows:
 
 ```tsx
-const apiRef = useTreeViewApiRef();
+// Community package
+const apiRef = useRichTreeViewApiRef();
 
-return <RichTreeView apiRef={apiRef} items={ITEMS}>;
+return <RichTreeView apiRef={apiRef} items={ITEMS} />;
+
+// Pro package
+const apiRef = useRichTreeViewProApiRef();
+
+return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;
 ```
 
-When your component first renders, `apiRef` will be `undefined`.
+When your component first renders, `apiRef.current` will be `undefined`.
 After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
 :::
 

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodIsItemExpanded.js b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodIsItemExpanded.js
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -38,7 +38,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function ApiMethodIsItemExpanded() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const [isGridExpanded, setIsGridExpanded] = React.useState(false);
   const [isSnackbarOpen, setIsSnackbarOpen] = React.useState(false);
 

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodIsItemExpanded.tsx b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodIsItemExpanded.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
 import Snackbar from '@mui/material/Snackbar';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -38,7 +38,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 export default function ApiMethodIsItemExpanded() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const [isGridExpanded, setIsGridExpanded] = React.useState<boolean>(false);
   const [isSnackbarOpen, setIsSnackbarOpen] = React.useState(false);
 

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.js b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.js
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function ApiMethodSetItemExpansion() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
 
   const handleExpandClick = (event) => {
     apiRef.current.setItemExpansion({

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx b/docs/data/tree-view/rich-tree-view/expansion/ApiMethodSetItemExpansion.tsx
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 export default function ApiMethodSetItemExpansion() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
 
   const handleExpandClick = (event: React.MouseEvent) => {
     apiRef.current!.setItemExpansion({

diff --git a/docs/data/tree-view/rich-tree-view/expansion/expansion.md b/docs/data/tree-view/rich-tree-view/expansion/expansion.md
@@ -41,15 +41,21 @@
 ## Imperative API
 
 :::success
-To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows:
+To use the `apiRef` object, you need to initialize it using the `useRichTreeViewApiRef` or `useRichTreeViewProApiRef` hook as follows:
 
 ```tsx
-const apiRef = useTreeViewApiRef();
+// Community package
+const apiRef = useRichTreeViewApiRef();
 
-return <RichTreeView apiRef={apiRef} items={ITEMS}>;
+return <RichTreeView apiRef={apiRef} items={ITEMS} />;
+
+// Pro package
+const apiRef = useRichTreeViewProApiRef();
+
+return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;
 ```
 
-When your component first renders, `apiRef` will be `undefined`.
+When your component first renders, `apiRef.current` will be `undefined`.
 After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
 :::
 

diff --git a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.js
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function ApiMethodFocusItem() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const handleButtonClick = (event) => {
     apiRef.current?.focusItem(event, 'pickers');
   };

diff --git a/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx b/docs/data/tree-view/rich-tree-view/focus/ApiMethodFocusItem.tsx
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 export default function ApiMethodFocusItem() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const handleButtonClick = (event: React.SyntheticEvent) => {
     apiRef.current?.focusItem(event, 'pickers');
   };

diff --git a/docs/data/tree-view/rich-tree-view/focus/focus.md b/docs/data/tree-view/rich-tree-view/focus/focus.md
@@ -13,15 +13,21 @@
 ## Imperative API
 
 :::success
-To use the `apiRef` object, you need to initialize it using the `useTreeViewApiRef` hook as follows:
+To use the `apiRef` object, you need to initialize it using the `useRichTreeViewApiRef` or `useRichTreeViewProApiRef` hook as follows:
 
 ```tsx
-const apiRef = useTreeViewApiRef();
+// Community package
+const apiRef = useRichTreeViewApiRef();
 
-return <RichTreeView apiRef={apiRef} items={ITEMS}>;
+return <RichTreeView apiRef={apiRef} items={ITEMS} />;
+
+// Pro package
+const apiRef = useRichTreeViewProApiRef();
+
+return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;
 ```
 
-When your component first renders, `apiRef` will be `undefined`.
+When your component first renders, `apiRef.current` will be `undefined`.
 After this initial render, `apiRef` holds methods to interact imperatively with the Tree View.
 :::
 

diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.js b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.js
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function ApiMethodGetItem() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const [selectedItem, setSelectedItem] = React.useState(null);
 
   const handleSelectedItemsChange = (event, itemId) => {

diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItem.tsx
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 export default function ApiMethodGetItem() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const [selectedItem, setSelectedItem] = React.useState<TreeViewBaseItem | null>(
     null,
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.js b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.js
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function ApiMethodGetItemDOMElement() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const handleScrollToChartsCommunity = (event) => {
     apiRef.current.focusItem(event, 'charts-community');
     apiRef.current

diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.tsx b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.tsx
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 export default function ApiMethodGetItemDOMElement() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const handleScrollToChartsCommunity = (event: React.SyntheticEvent) => {
     apiRef.current!.focusItem(event, 'charts-community');
     apiRef

diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemOrderedChildrenIds.js b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemOrderedChildrenIds.js
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS = [
 ];
 
 export default function ApiMethodGetItemOrderedChildrenIds() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const [isSelectedItemLeaf, setIsSelectedItemLeaf] = React.useState(null);
 
   const handleSelectedItemsChange = (event, itemId) => {

diff --git a/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemOrderedChildrenIds.tsx b/docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemOrderedChildrenIds.tsx
@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
@@ -37,7 +37,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 ];
 
 export default function ApiMethodGetItemOrderedChildrenIds() {
-  const apiRef = useTreeViewApiRef();
+  const apiRef = useRichTreeViewApiRef();
   const [isSelectedItemLeaf, setIsSelectedItemLeaf] = React.useState<boolean | null>(
     null,
   );