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 1/6] 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.
From 603a4f6caf15ce9322d59247cbd9a19346d98f89 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:21:17 -0700
Subject: [PATCH 2/6] some rearranging
---
.../tree-view/getting-started/getting-started.md | 12 +++++-------
docs/data/tree-view/overview/TreeViewOverviewDemo.js | 4 +++-
.../data/tree-view/overview/TreeViewOverviewDemo.tsx | 2 +-
docs/data/tree-view/overview/overview.md | 10 +++++-----
4 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index 7e6c9f79d25e..e5f7e1b52dc3 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/docs/data/tree-view/getting-started/getting-started.md
@@ -51,15 +51,8 @@ yarn add @mui/material @emotion/react @emotion/styled
## Render a Tree View
-:::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.
-:::
-
### Simple Tree View
-
-
The simple version of the Tree View component receives its items as JSX children.
This is the recommended version for hardcoded items.
@@ -109,3 +102,8 @@ const theme = createTheme({
},
});
```
+
+## Using this documentation
+
+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/data/tree-view/overview/TreeViewOverviewDemo.js b/docs/data/tree-view/overview/TreeViewOverviewDemo.js
index d1998b9cb5a5..55561550c529 100644
--- a/docs/data/tree-view/overview/TreeViewOverviewDemo.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 TreeViewOverview() {
+export default function TreeViewOverviewDemo() {
return (
@@ -18,9 +18,11 @@ export default function TreeViewOverview() {
+
+
diff --git a/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx b/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx
index b9f2c23db1f0..55561550c529 100644
--- a/docs/data/tree-view/overview/TreeViewOverviewDemo.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 TreeViewOverview() {
+export default function TreeViewOverviewDemo() {
return (
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index 83482ec9f1b6..ad9b2e4a482f 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -22,13 +22,13 @@ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
```
-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.
+The Simple version is recommended for hardcoded items, while the Rich version is preferred for dynamically rendered items, larger trees, and more complex use cases that require features like editing and virtualization.
The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:
{{"demo": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}}
-## Using this documentation
-
-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.
+:::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.
+:::
From 27e40e41419bcf78784b9c9dcec40f3bd8334329 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:46:27 -0700
Subject: [PATCH 3/6] move more info to getting started
---
.../getting-started/getting-started.md | 27 ++++++++++++-------
docs/data/tree-view/overview/overview.md | 13 ---------
.../pages/x/api/tree-view/rich-tree-view.json | 2 +-
.../x/api/tree-view/simple-tree-view.json | 2 +-
docs/pages/x/api/tree-view/tree-item.json | 2 +-
docs/pages/x/api/tree-view/tree-view.json | 2 +-
6 files changed, 21 insertions(+), 27 deletions(-)
diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
index e5f7e1b52dc3..f6d86abd7fdd 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/docs/data/tree-view/getting-started/getting-started.md
@@ -49,10 +49,22 @@ yarn add @mui/material @emotion/react @emotion/styled
},
```
-## Render a Tree View
+## Rendering a Tree View
+
+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.
+
+:::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.
+:::
### Simple Tree View
+```jsx
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+```
+
The simple version of the Tree View component receives its items as JSX children.
This is the recommended version for hardcoded items.
@@ -69,19 +81,14 @@ This is the recommended version for larger trees, as well as those that require
{{"demo": "BasicRichTreeView.js"}}
-## Accessibility
-
-(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
-
-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
-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.
+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
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index ad9b2e4a482f..56bda532fcdf 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -15,20 +15,7 @@ packageName: '@mui/x-tree-view'
## Overview
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 is recommended for hardcoded items, while the Rich version is preferred for dynamically rendered items, larger trees, and more complex use cases that require features like editing and virtualization.
The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:
{{"demo": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}}
-
-:::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.
-:::
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 83ada41f5bc5..543ed9849002 100644
--- a/docs/pages/x/api/tree-view/rich-tree-view.json
+++ b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -168,6 +168,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 bcf5153e9cb5..e110f56295c0 100644
--- a/docs/pages/x/api/tree-view/simple-tree-view.json
+++ b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -123,6 +123,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 be0a273ec4c0..beb6a491b13e 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
}
diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
index c9f0691c2b7b..7d0fd5e9ce92 100644
--- a/docs/pages/x/api/tree-view/tree-view.json
+++ b/docs/pages/x/api/tree-view/tree-view.json
@@ -123,7 +123,7 @@
"forwardsRefTo": "HTMLUListElement",
"filename": "/packages/x-tree-view/src/TreeView/TreeView.tsx",
"inheritance": null,
- "demos": "",
+ "demos": "",
"cssComponent": false,
"deprecated": true
}
From 3f0b6a319283f86103821568b96491aebcadcd5c Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:03:54 -0800
Subject: [PATCH 4/6] update demos
---
.../tree-view/getting-started/BasicRichTreeView.js | 10 ++++++++--
.../tree-view/getting-started/BasicRichTreeView.tsx | 10 ++++++++--
.../tree-view/getting-started/BasicSimpleTreeView.js | 2 ++
.../tree-view/getting-started/BasicSimpleTreeView.tsx | 4 +++-
docs/data/tree-view/getting-started/getting-started.md | 5 -----
docs/data/tree-view/overview/overview.md | 6 ++++++
6 files changed, 27 insertions(+), 10 deletions(-)
diff --git a/docs/data/tree-view/getting-started/BasicRichTreeView.js b/docs/data/tree-view/getting-started/BasicRichTreeView.js
index 7bb6d22d66dd..1756aba06d12 100644
--- a/docs/data/tree-view/getting-started/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/getting-started/BasicRichTreeView.tsx b/docs/data/tree-view/getting-started/BasicRichTreeView.tsx
index e18e3bfcc070..0cb55d01c05a 100644
--- a/docs/data/tree-view/getting-started/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/getting-started/BasicSimpleTreeView.js b/docs/data/tree-view/getting-started/BasicSimpleTreeView.js
index a1d3763587f3..881c0250ed3c 100644
--- a/docs/data/tree-view/getting-started/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/getting-started/BasicSimpleTreeView.tsx b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
index a1d3763587f3..661c942facb6 100644
--- a/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
@@ -17,10 +17,12 @@ 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 f6d86abd7fdd..176e2b262500 100644
--- a/docs/data/tree-view/getting-started/getting-started.md
+++ b/docs/data/tree-view/getting-started/getting-started.md
@@ -109,8 +109,3 @@ const theme = createTheme({
},
});
```
-
-## Using this documentation
-
-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/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index 56bda532fcdf..ce72a2f48263 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -19,3 +19,9 @@ The MUI X Tree View provides all of the functionality necessary to build a hiera
The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses:
{{"demo": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}}
+
+## Using this documentation
+
+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.
+
From 50b25cfd70aa8e7e98f4240c3c5e8c3edcd68ab2 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:05:44 -0800
Subject: [PATCH 5/6] remove old file
---
docs/pages/x/api/tree-view/tree-view.json | 129 ----------------------
1 file changed, 129 deletions(-)
delete mode 100644 docs/pages/x/api/tree-view/tree-view.json
diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
deleted file mode 100644
index 7d0fd5e9ce92..000000000000
--- a/docs/pages/x/api/tree-view/tree-view.json
+++ /dev/null
@@ -1,129 +0,0 @@
-{
- "props": {
- "apiRef": {
- "type": {
- "name": "shape",
- "description": "{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func } }"
- }
- },
- "checkboxSelection": { "type": { "name": "bool" }, "default": "false" },
- "children": { "type": { "name": "node" } },
- "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
- "defaultExpandedItems": {
- "type": { "name": "arrayOf", "description": "Array<string>" },
- "default": "[]"
- },
- "defaultSelectedItems": { "type": { "name": "any" }, "default": "[]" },
- "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
- "disableSelection": { "type": { "name": "bool" }, "default": "false" },
- "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } },
- "expansionTrigger": {
- "type": { "name": "enum", "description": "'content'
| 'iconContainer'" },
- "default": "'content'"
- },
- "experimentalFeatures": {
- "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
- },
- "id": { "type": { "name": "string" } },
- "itemChildrenIndentation": {
- "type": { "name": "union", "description": "number
| string" },
- "default": "12px"
- },
- "multiSelect": { "type": { "name": "bool" }, "default": "false" },
- "onExpandedItemsChange": {
- "type": { "name": "func" },
- "signature": {
- "type": "function(event: React.SyntheticEvent, itemIds: array) => void",
- "describedArgs": ["event", "itemIds"]
- }
- },
- "onItemClick": {
- "type": { "name": "func" },
- "signature": {
- "type": "function(event: React.MouseEvent, itemId: string) => void",
- "describedArgs": ["event", "itemId"]
- }
- },
- "onItemExpansionToggle": {
- "type": { "name": "func" },
- "signature": {
- "type": "function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void",
- "describedArgs": ["event", "itemId", "isExpanded"]
- }
- },
- "onItemFocus": {
- "type": { "name": "func" },
- "signature": {
- "type": "function(event: React.SyntheticEvent | null, itemId: string) => void",
- "describedArgs": ["event", "itemId"]
- }
- },
- "onItemSelectionToggle": {
- "type": { "name": "func" },
- "signature": {
- "type": "function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void",
- "describedArgs": ["event", "itemId", "isSelected"]
- }
- },
- "onSelectedItemsChange": {
- "type": { "name": "func" },
- "signature": {
- "type": "function(event: React.SyntheticEvent, itemIds: Array | string) => void",
- "describedArgs": ["event", "itemIds"]
- }
- },
- "selectedItems": { "type": { "name": "any" } },
- "selectionPropagation": {
- "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" },
- "default": "{ parents: false, descendants: false }"
- },
- "slotProps": { "type": { "name": "object" } },
- "slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } },
- "sx": {
- "type": {
- "name": "union",
- "description": "Array<func
| object
| bool>
| func
| object"
- },
- "additionalInfo": { "sx": true }
- }
- },
- "name": "TreeView",
- "imports": [
- "import { TreeView } from '@mui/x-tree-view/TreeView';",
- "import { TreeView } from '@mui/x-tree-view';",
- "import { TreeView } from '@mui/x-tree-view-pro';"
- ],
- "slots": [
- {
- "name": "root",
- "description": "Element rendered at the root.",
- "default": "SimpleTreeViewRoot",
- "class": "MuiTreeView-root"
- },
- {
- "name": "collapseIcon",
- "description": "The default icon used to collapse the item.",
- "class": null
- },
- {
- "name": "expandIcon",
- "description": "The default icon used to expand the item.",
- "class": null
- },
- {
- "name": "endIcon",
- "description": "The default icon displayed next to an end item.\nThis is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.",
- "class": null
- }
- ],
- "classes": [],
- "spread": true,
- "themeDefaultProps": true,
- "muiName": "MuiTreeView",
- "forwardsRefTo": "HTMLUListElement",
- "filename": "/packages/x-tree-view/src/TreeView/TreeView.tsx",
- "inheritance": null,
- "demos": "",
- "cssComponent": false,
- "deprecated": true
-}
From 70f40efb61b00f3f622133ad32a02a803fdc3f09 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:16:43 -0800
Subject: [PATCH 6/6] cleanup
---
docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx | 2 +-
docs/data/tree-view/overview/overview.md | 1 -
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
index 661c942facb6..881c0250ed3c 100644
--- a/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
+++ b/docs/data/tree-view/getting-started/BasicSimpleTreeView.tsx
@@ -17,7 +17,7 @@ export default function BasicSimpleTreeView() {
-
+
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
index ce72a2f48263..4f86e5e4a17f 100644
--- a/docs/data/tree-view/overview/overview.md
+++ b/docs/data/tree-view/overview/overview.md
@@ -24,4 +24,3 @@ The demo below shows how to render a Simple Tree View—try clicking on an item
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.
-