[TreeView] Expand control at TreeItem level

[OoDeLally]

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

Summary 💡

Currently there is no way to:

1. Expand all TreeItem by default without knowing the TreeItem's ids in advance.
2. Expand a TreeItem from it's own props.

Both of these features can be solved by adding defaultExpanded and expanded props to TreeItem itself, that would override whatever dictated by the root TreeView.

If this is not technically possible, it would be geat to at least have a defaultExpandAll={true} prop to TreeView.

Examples 🌈

// Here only `foo` and `bar` would be expanded.
<TreeView defaultExpanded={['foo', 'baz']}>
  <TreeItem nodeId="foo" label="foo" />
  <TreeItem nodeId="bar" label="bar" defaultExpanded={true} />
  <TreeItem nodeId="baz" label="baz" defaultExpanded={false} />
</TreeView>

Motivation 🔦

I am trying to display a dynamic tree, where nodes can be added and removed.

Because of the dynamic nature, I cannot use defaultExpanded, since this props is only read at the first mount, and never re-read (even if I manage to add subsequent ids to the array).
Neither can I use expanded (which does work dynamically), since it forces the tree to be "controlled", which I do not want.

[trombipeti]

Hi all, after days of searching I came across this issue. I need kind of the same thing, though in my situation I don't mind if the TreeView is controlled or not.

I tried to make it work with handleExpansion from the useTreeItem() hook.
It is not a perfect solution since it expects me to pass a React.SyntheticEvent which I don't really have since the content is assembled dynamically but without user interaction (data comes from the server).

Looking at the source code, this event is only used when it is passed to onNodeToggle, which is at the and user code again. Could this event parameter be made optional?

I still feel it'd be some sort of a half-solution, because it'd be using a callback instead of a simple prop, but at least it would work.
Something like what @OoDeLally suggested would be a nicer solution.

[flaviendelangle]

We decided not to implement the defaultExpanded at the Tree Item level, because it would create two sources of truth (the defaultExpanded at the Tree View level and the `defaultExpanded at the Tree Item level).
We believe that this would lead to confusion for people (what happens if you use both at the same time?)

However, we will add a new method to our apiRef object to allow people to imperatively expand an item.

Here is how it could look like on the SimpleTreeView (the new name of the TreeView component you were using):

export default function Example() {
  const isLoggedIn = useIsUserLoggedIn();
  const apiRef = useTreeViewApiRef()

  React.useEffect(() => {
    apiRef.current!.setItemExpansion('settings', true);
  }, [isLoggedIn]);

  return (
    <SimpleTreeView apiRef={apiRef}>
      <TreeItem itemId="public" label="Public information" />
      {isLoggedIn && (
        <TreeItem itemId="settings" label="Settings">
          <TreeItem itemId="account" label="My account" />
          <TreeItem itemId="other-settings" label="Other settings" />
        </TreeItem>
      )}
    </SimpleTreeView>
  );
}