[TreeView] Automatic parents and children selection

[flaviendelangle]

No rush to review this PR since it's not for v7, breaking change preparations on the pickers are more pressing 🙏

Apply #13757 for the Tree View
Closes #12883
Doc preview

Thanks to @MBilalShafi for all the work on the Data Grid feature, porting it to the Tree View is a piece of cake now 🙏

There is a super small BC on the legacy TreeItem, I propose to keep the feature for the alpha, it will be the main new feature for the Tree View in the stablefor people without big datasets.

• Build feature
• Add doc
• Add tests
• Move the checkbox logic from useTreeItem2 to useTreeViewSelection.itemPlugin (it's becoming quite large with the indeterminate support)
• Support indeterminate checkbox state (same behavior as the grid)

[mui-bot]

Deploy preview: https://deploy-preview-14899--material-ui-x.netlify.app/

Updated pages:

• docs/data/tree-view/rich-tree-view/selection/selection.md

Generated by 🚫 dangerJS against 3860de6

[flaviendelangle]

This would benefit from a selector when available

[flaviendelangle]

Basically a copy paste of the grid doc
If we modify this one, I'd be in favor of having Sam check the changes and apply the same to the grid one.

[flaviendelangle]

Same as the doc, it's a copy paste of the grid JSDoc

[noraleonte]

Amazing addition 🎉 That was super fast 🤭

[Kavan72]

@flaviendelangle Thank you for the amazing work. I have one question: If the parent checkbox is in an indeterminate state and the user checks it, shouldn’t the first click select all the children, and the second click uncheck all of them along with the parent?

[flaviendelangle]

Hey @Kavan72, thanks for the feedback

The action when clicking on an indeterminate parent was the source of a lot of debate over on the Data Grid.
The current behavior their is to unselect all by default but have it configurable using the indeterminateCheckboxAction prop which has the following type:

  /**
   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
   * will select all the rows under it.
   * If `deselect`, it will deselect all the rows under it.
   * Works only if `checkboxSelection` is enabled.
   * @default "deselect"
   */
indeterminateCheckboxAction?: 'select' | 'deselect'

On the Tree View, I followed the default behavior of the grid.
We can introduce the same indeterminateCheckboxAction prop in a follow up, it should be almost trivial to do it 👍

[Kavan72]

Hey @Kavan72, thanks for the feedback

The action when clicking on an indeterminate parent was the source of a lot of debate over on the Data Grid. The current behavior their is to unselect all by default but have it configurable using the indeterminateCheckboxAction prop which has the following type:

  /**
   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
   * will select all the rows under it.
   * If `deselect`, it will deselect all the rows under it.
   * Works only if `checkboxSelection` is enabled.
   * @default "deselect"
   */
indeterminateCheckboxAction?: 'select' | 'deselect'

On the Tree View, I followed the default behavior of the grid. We can introduce the same indeterminateCheckboxAction prop in a follow up, it should be almost trivial to do it 👍

That would be great feature 🙂

[flaviendelangle]

Issue created: #14979

Given the low complexity of the topic, I suspect that we should be able to ship that a few weeks after the main PR (depending on the bandwidth we have)

[MBilalShafi]

For v8, on the Data Grid side, it is also one of the considerations to make select the default behavior and remove indeterminateCheckboxAction prop, mainly aiming simplicity. I'd love to decide on it together with the Tree View for consistency.

Context: 1, 2

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.