From e60b7f82828133140ef669d6accf2a287f17328c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Tue, 29 Oct 2024 09:46:33 -0700
Subject: [PATCH] first incomplete pass
---
.../BasicRichTreeView.js | 0
.../BasicRichTreeView.tsx | 0
.../BasicRichTreeView.tsx.preview | 0
.../BasicSimpleTreeView.js | 0
.../BasicSimpleTreeView.tsx | 0
.../getting-started/getting-started.md | 51 ++++++++++---------
.../TreeViewOverviewDemo.js} | 2 +-
.../TreeViewOverviewDemo.tsx} | 4 +-
docs/data/tree-view/overview/overview.md | 31 ++++-------
9 files changed, 42 insertions(+), 46 deletions(-)
rename docs/data/tree-view/{overview => getting-started}/BasicRichTreeView.js (100%)
rename docs/data/tree-view/{overview => getting-started}/BasicRichTreeView.tsx (100%)
rename docs/data/tree-view/{overview => getting-started}/BasicRichTreeView.tsx.preview (100%)
rename docs/data/tree-view/{overview => getting-started}/BasicSimpleTreeView.js (100%)
rename docs/data/tree-view/{overview => getting-started}/BasicSimpleTreeView.tsx (100%)
rename docs/data/tree-view/{getting-started/FirstComponent.js => overview/TreeViewOverviewDemo.js} (96%)
rename docs/data/tree-view/{getting-started/FirstComponent.tsx => overview/TreeViewOverviewDemo.tsx} (85%)
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/getting-started/BasicRichTreeView.js
similarity index 100%
rename from docs/data/tree-view/overview/BasicRichTreeView.js
rename to docs/data/tree-view/getting-started/BasicRichTreeView.js
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/getting-started/BasicRichTreeView.tsx
similarity index 100%
rename from docs/data/tree-view/overview/BasicRichTreeView.tsx
rename to docs/data/tree-view/getting-started/BasicRichTreeView.tsx
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 100%
rename from docs/data/tree-view/overview/BasicSimpleTreeView.js
rename to docs/data/tree-view/getting-started/BasicSimpleTreeView.js
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
similarity index 100%
rename from docs/data/tree-view/overview/BasicSimpleTreeView.tsx
rename to docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index 6acc9e5382c1..7e6c9f79d25e 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,32 +49,32 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
},
```
-### Style engine
+## Render 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:
+:::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 are more likely to land on the Rich Tree View.
+:::
-
-```bash npm
-npm install @mui/styled-engine-sc styled-components
-```
+### Simple Tree View
-```bash pnpm
-pnpm add @mui/styled-engine-sc styled-components
-```
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
-
+The simple version of the Tree View component receives its items as JSX children.
+This is the recommended version for hardcoded items.
-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.
+{{"demo": "BasicSimpleTreeView.js"}}
-## Render your first component
+### Rich Tree View
+
+```jsx
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+```
-To make sure that everything is set up correctly, try rendering a Simple Tree View component:
+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": "FirstComponent.js"}}
+{{"demo": "BasicRichTreeView.js"}}
## Accessibility
@@ -88,11 +88,14 @@ otherwise, screen readers will announce it as "tree", making it hard to understa
## 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 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 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 96%
rename from docs/data/tree-view/getting-started/FirstComponent.js
rename to docs/data/tree-view/overview/TreeViewOverviewDemo.js
index 1daadc188de2..d1998b9cb5a5 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 TreeViewOverview() {
return (
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 1daadc188de2..b9f2c23db1f0 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 TreeViewOverview() {
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 e1c49a7e2bd6..83482ec9f1b6 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -8,36 +8,27 @@ 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:
-
-### Simple Tree View
+The MUI X Tree View provides all of the functionality necessary to build a hierarchical list of expandable and collapsible items.
+The package exposes two different versions of this component: `` and ``.
```jsx
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
```
-The simple version of the Tree View component receives its items as JSX children.
-This is the recommended version for hardcoded items.
-
-{{"demo": "BasicSimpleTreeView.js"}}
-
-### Rich Tree View
+The Simple version is recommended for hardcoded items, while the Rich version is preferred for dynamically rendered items, larger trees, and more advanced features like editing and virtualization.
-```jsx
-import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-```
+The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:
-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": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}}
-{{"demo": "BasicRichTreeView.js"}}
+## Using this documentation
-:::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 Common features section of the navigation bar.