[Feature Request] [TreeView] Dynamic TreeView width

[spfennell]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I would like an option for the width of the TreeView to rely on the current expansion of the tree. Currently the TreeView width is based on the fully expanded tree.

Motivation 🔦

My app can have really deep trees that won't necessarily ever be expanded fully. I would like the collapsed tree to take up less space in my UI and expand dynamically as needed.

[oliviertassinari]

@spfennell Interesting, the following would implement the expected outcome (I believe). It would also help with performance:

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index f89049246..64c79c18a 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -252,7 +252,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
         <Typography className={classes.label}>{label}</Typography>
       </div>
       {children && (
-        <TransitionComponent className={classes.group} in={expanded} component="ul" role="group">
+        <TransitionComponent unmountOnExit className={classes.group} in={expanded} component="ul" role="group">
           {children}
         </TransitionComponent>
       )}

On the benchmarking side, we have the following that render lazy.

• https://vuetifyjs.com/en/components/treeview#treeview
• https://ant.design/components/tree/#header
• http://storybookjs.github.io/react-treebeard/
• https://atlaskit.atlassian.com/packages/core/tree
• https://www.telerik.com/kendo-react-ui/components/treeview/selection/update-selected-items/

Not all of the solutions I could benchmark do, but most. I would propose that we make it the default behavior. cc @joshwooding.

[joshwooding]

@oliviertassinari Sounds like a great idea! @spfennell Do you want to give this a go?

[Shubhamchinda]

Can I take this?

[joshwooding]

@Shubhamchinda Sure :)

[mbrookes]

This should hopefully also solve the problem of screen readers reading the children when an item is selected.