[docs] Revise the Tree View Getting Started sequence

docs/data/tree-view/overview/BasicRichTreeView.js → 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' },
+    ],
   },
 ];
 

docs/data/tree-view/overview/BasicRichTreeView.tsx → 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' },
+    ],
   },
 ];
 

docs/data/tree-view/overview/BasicSimpleTreeView.js → docs/data/tree-view/getting-started/BasicSimpleTreeView.js

@@ -18,9 +18,11 @@ export default function BasicSimpleTreeView() {
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
           <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
         </TreeItem>
         <TreeItem itemId="tree-view" label="Tree View">
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
         </TreeItem>
       </SimpleTreeView>
     </Box>

docs/data/tree-view/overview/BasicSimpleTreeView.tsx → docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx

@@ -18,9 +18,11 @@ export default function BasicSimpleTreeView() {
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
           <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
         </TreeItem>
         <TreeItem itemId="tree-view" label="Tree View">
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
         </TreeItem>
       </SimpleTreeView>
     </Box>

docs/data/tree-view/getting-started/getting-started.md

@@ -7,20 +7,20 @@
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 ---
 
-# Tree View - Getting Started
+# Tree View - Getting started
 
 <p class="description">Get started with the Tree View. Install the package, configure your application and start using the components.</p>
 
 ## 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:
 
 <!-- #default-branch-switch -->
 
 {{"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:
 
 <codeblock storageKey="package-manager">
 
@@ -40,7 +40,7 @@
 
 <!-- #react-peer-version -->
 
-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 @@
 },
 ```
 
-### 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: `<SimpleTreeView />` and `<RichTreeView />`.
+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.
 
-<codeblock storageKey="package-manager">
-```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';
 ```
 
-</codeblock>
-
-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: {

docs/data/tree-view/getting-started/FirstComponent.js → 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 (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
@@ -18,9 +18,11 @@ export default function FirstComponent() {
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
           <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
         </TreeItem>
         <TreeItem itemId="tree-view" label="Tree View">
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
         </TreeItem>
       </SimpleTreeView>
     </Box>

docs/data/tree-view/getting-started/FirstComponent.tsx → 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 (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
@@ -18,9 +18,11 @@ export default function FirstComponent() {
         </TreeItem>
         <TreeItem itemId="charts" label="Charts">
           <TreeItem itemId="charts-community" label="@mui/x-charts" />
+          <TreeItem itemId="charts-pro" label="@mui/x-charts-pro" />
         </TreeItem>
         <TreeItem itemId="tree-view" label="Tree View">
           <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+          <TreeItem itemId="tree-view-pro" label="@mui/x-tree-view-pro" />
         </TreeItem>
       </SimpleTreeView>
     </Box>

docs/data/tree-view/overview/overview.md

@@ -8,36 +8,19 @@
 
 # MUI X Tree View
 
-<p class="description">The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.</p>
+<p class="description">The Tree View lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.</p>
 
 {{"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.

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": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/editing/\">Rich Tree View - Label editing</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/expansion/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/focus/\">Rich Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/selection/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting started</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/editing/\">Rich Tree View - Label editing</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/expansion/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/focus/\">Rich Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/selection/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
   "cssComponent": false
 }

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": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/expansion/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/focus/\">Simple Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/items/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/selection/\">Simple Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting started</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/expansion/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/focus/\">Simple Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/items/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/selection/\">Simple Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
   "cssComponent": false
 }

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": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/editing/\">Rich Tree View - Label editing</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/expansion/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/focus/\">Rich Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/ordering/\">Rich Tree View - Ordering <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/selection/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/expansion/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/focus/\">Simple Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/items/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/selection/\">Simple Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting started</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/customization/\">Rich Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/editing/\">Rich Tree View - Label editing</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/expansion/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/focus/\">Rich Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/items/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/ordering/\">Rich Tree View - Ordering <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/selection/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/customization/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/expansion/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/focus/\">Simple Tree View - Focus</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/items/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/selection/\">Simple Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/tree-item-customization/\">Tree Item Customization</a></li></ul>",
   "cssComponent": false
 }