diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/getting-started/BasicRichTreeView.js
similarity index 76%
rename from docs/data/tree-view/overview/BasicRichTreeView.js
rename to docs/data/tree-view/getting-started/BasicRichTreeView.js
index 7bb6d22d66dd2..1756aba06d123 100644
--- a/docs/data/tree-view/overview/BasicRichTreeView.js
+++ b/docs/data/tree-view/getting-started/BasicRichTreeView.js
@@ -24,12 +24,18 @@ const MUI_X_PRODUCTS = [
{
id: 'charts',
label: 'Charts',
- children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+ children: [
+ { id: 'charts-community', label: '@mui/x-charts' },
+ { id: 'charts-pro', label: '@mui/charts-pro' },
+ ],
},
{
id: 'tree-view',
label: 'Tree View',
- children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+ children: [
+ { id: 'tree-view-community', label: '@mui/x-tree-view' },
+ { id: 'tree-view-pro', label: '@mui/x-tree-view-pro' },
+ ],
},
];
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/getting-started/BasicRichTreeView.tsx
similarity index 77%
rename from docs/data/tree-view/overview/BasicRichTreeView.tsx
rename to docs/data/tree-view/getting-started/BasicRichTreeView.tsx
index e18e3bfcc0701..0cb55d01c05a1 100644
--- a/docs/data/tree-view/overview/BasicRichTreeView.tsx
+++ b/docs/data/tree-view/getting-started/BasicRichTreeView.tsx
@@ -24,12 +24,18 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
{
id: 'charts',
label: 'Charts',
- children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+ children: [
+ { id: 'charts-community', label: '@mui/x-charts' },
+ { id: 'charts-pro', label: '@mui/charts-pro' },
+ ],
},
{
id: 'tree-view',
label: 'Tree View',
- children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+ children: [
+ { id: 'tree-view-community', label: '@mui/x-tree-view' },
+ { id: 'tree-view-pro', label: '@mui/x-tree-view-pro' },
+ ],
},
];
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx.preview b/docs/data/tree-view/getting-started/BasicRichTreeView.tsx.preview
similarity index 100%
rename from docs/data/tree-view/overview/BasicRichTreeView.tsx.preview
rename to docs/data/tree-view/getting-started/BasicRichTreeView.tsx.preview
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/getting-started/BasicSimpleTreeView.js
similarity index 89%
rename from docs/data/tree-view/overview/BasicSimpleTreeView.js
rename to docs/data/tree-view/getting-started/BasicSimpleTreeView.js
index a1d3763587f3c..881c0250ed3c6 100644
--- a/docs/data/tree-view/overview/BasicSimpleTreeView.js
+++ b/docs/data/tree-view/getting-started/BasicSimpleTreeView.js
@@ -18,9 +18,11 @@ export default function BasicSimpleTreeView() {
+
+
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
similarity index 89%
rename from docs/data/tree-view/overview/BasicSimpleTreeView.tsx
rename to docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
index a1d3763587f3c..881c0250ed3c6 100644
--- a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
@@ -18,9 +18,11 @@ export default function BasicSimpleTreeView() {
+
+
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index 6acc9e5382c17..176e2b2625009 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/docs/data/tree-view/getting-started/getting-started.md
@@ -7,20 +7,20 @@ githubLabel: 'component: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---
-# Tree View - Getting Started
+# Tree View - Getting started
Get started with the Tree View. Install the package, configure your application and start using the components.
## Installation
-Using your favorite package manager, install `@mui/x-tree-view-pro` for the commercial version, or `@mui/x-tree-view` for the free community version.
+Run one of the following commands to install the free Community version or the paid Pro version of the MUI X Tree View:
{{"component": "modules/components/TreeViewInstallationInstructions.js"}}
-The Tree View package has a peer dependency on `@mui/material`.
-If you are not already using it in your project, you can install it with:
+The Tree View packages have a peer dependency on `@mui/material`.
+If you're not already using it, install it with the following command:
@@ -40,7 +40,7 @@ yarn add @mui/material @emotion/react @emotion/styled
-Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too:
+[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:
```json
"peerDependencies": {
@@ -49,50 +49,53 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
},
```
-### Style engine
+## Rendering a Tree View
-Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run:
+The package exposes two different versions of this component: `` and ``.
+The [Simple version](#simple-tree-view) is recommended for hardcoded items, while the [Rich version](#rich-tree-view) is preferred for dynamically rendered items, larger trees, and more complex use cases that require features like editing and virtualization.
-
-```bash npm
-npm install @mui/styled-engine-sc styled-components
-```
+:::info
+Currently, the Simple and Rich Tree View components share many of the same features.
+As this package continues to mature, more advanced features and functionality will be prioritized for the Rich Tree View.
+:::
-```bash pnpm
-pnpm add @mui/styled-engine-sc styled-components
-```
+### Simple Tree View
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
+```jsx
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
```
-
-
-Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine.
+The simple version of the Tree View component receives its items as JSX children.
+This is the recommended version for hardcoded items.
-## Render your first component
+{{"demo": "BasicSimpleTreeView.js"}}
-To make sure that everything is set up correctly, try rendering a Simple Tree View component:
+### Rich Tree View
-{{"demo": "FirstComponent.js"}}
+```jsx
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+```
-## Accessibility
+The rich version of the Tree View component receives its items dynamically from an external data source.
+This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization.
-(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
+{{"demo": "BasicRichTreeView.js"}}
-The component follows the WAI-ARIA authoring practices.
+### Accessibility
-To have an accessible Tree View you must use `aria-labelledby`
-or `aria-label` to reference or provide a label on the TreeView,
-otherwise, screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.
+The MUI X Tree View follows the [WAI-ARIA authoring practices for a tree view](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+The component includes many built-in [accessibility features](/x/react-tree-view/accessibility/), but it's the developer's responsibilty to provide the component with a descriptive `aria-labelledby`or `aria-label` tag—otherwise, screen readers will announce it as "tree," making it difficult for the end user to understand the purpose of the tree items.
## TypeScript
-In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
-Internally, it uses module augmentation to extend the default theme structure.
+To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types.
+These types use module augmentation to extend the default theme structure.
```tsx
+// only one import is necessary,
+// from the version you're currently using.
import type {} from '@mui/x-tree-view/themeAugmentation';
+import type {} from '@mui/x-tree-view-pro/themeAugmentation';
const theme = createTheme({
components: {
diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/overview/TreeViewOverviewDemo.js
similarity index 85%
rename from docs/data/tree-view/getting-started/FirstComponent.js
rename to docs/data/tree-view/overview/TreeViewOverviewDemo.js
index 1daadc188de20..55561550c5293 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.js
+++ b/docs/data/tree-view/overview/TreeViewOverviewDemo.js
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
-export default function FirstComponent() {
+export default function TreeViewOverviewDemo() {
return (
@@ -18,9 +18,11 @@ export default function FirstComponent() {
+
+
diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx
similarity index 85%
rename from docs/data/tree-view/getting-started/FirstComponent.tsx
rename to docs/data/tree-view/overview/TreeViewOverviewDemo.tsx
index 1daadc188de20..55561550c5293 100644
--- a/docs/data/tree-view/getting-started/FirstComponent.tsx
+++ b/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
-export default function FirstComponent() {
+export default function TreeViewOverviewDemo() {
return (
@@ -18,9 +18,11 @@ export default function FirstComponent() {
+
+
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index e1c49a7e2bd69..4f86e5e4a17f3 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -8,36 +8,19 @@ packageName: '@mui/x-tree-view'
# MUI X Tree View
-The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.
+The Tree View lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.
{{"component": "@mui/docs/ComponentLinkHeader"}}
-## Available components
+## Overview
-The MUI X Tree View package exposes two different versions of the component:
+The MUI X Tree View provides all of the functionality necessary to build a hierarchical list of expandable and collapsible items.
-### Simple Tree View
+The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:
-```jsx
-import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
-```
+{{"demo": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}}
-The simple version of the Tree View component receives its items as JSX children.
-This is the recommended version for hardcoded items.
+## Using this documentation
-{{"demo": "BasicSimpleTreeView.js"}}
-
-### Rich Tree View
-
-```jsx
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-```
-
-The rich version of the Tree View component receives its items dynamically from an external data source.
-This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization.
-
-{{"demo": "BasicRichTreeView.js"}}
-
-:::info
-At the moment, the Simple and Rich Tree Views are similar in terms of feature support. But as the component grows, you can expect to see the more advanced ones appear primarily on the Rich Tree View.
-:::
+Although the Simple and Rich Tree View share many of the same features, each version's implementation of those features differs enough that they warrant their own separate docs in most cases.
+Other features, such as accessibility, work the same in both versions and are documented in the main features section of the navigation bar.
diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json
index 7b014b540d84f..39664c4c9a740 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view.json
+++ b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -165,6 +165,6 @@
"forwardsRefTo": "HTMLUListElement",
"filename": "/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx",
"inheritance": null,
- "demos": "",
+ "demos": "",
"cssComponent": false
}
diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json
index da75d42ee0b8f..f02f4a8a7c646 100644
--- a/docs/pages/x/api/tree-view/simple-tree-view.json
+++ b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -121,6 +121,6 @@
"forwardsRefTo": "HTMLUListElement",
"filename": "/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx",
"inheritance": null,
- "demos": "",
+ "demos": "",
"cssComponent": false
}
diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json
index f1383007b5fe1..e248e1eca6549 100644
--- a/docs/pages/x/api/tree-view/tree-item.json
+++ b/docs/pages/x/api/tree-view/tree-item.json
@@ -124,6 +124,6 @@
"forwardsRefTo": "HTMLLIElement",
"filename": "/packages/x-tree-view/src/TreeItem/TreeItem.tsx",
"inheritance": null,
- "demos": "",
+ "demos": "",
"cssComponent": false
}