[TreeView] Automatic parents and children selection #14899

flaviendelangle · 2024-10-09T15:22:25Z

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 · 2024-10-09T15:26:03Z

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 dfe3497

flaviendelangle · 2024-10-10T11:37:36Z

...es/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.ts

+} from './useTreeViewSelection.types';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
+
+function getCheckboxStatus({


This would benefit from a selector when available

flaviendelangle · 2024-10-10T11:39:20Z

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

@@ -75,25 +75,36 @@ Use the `onItemSelectionToggle` prop if you want to react to an item selection c

 {{"demo": "TrackItemSelectionToggle.js"}}

-## Parent / children selection relationship
+## Automatic parents and children selection


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 · 2024-10-10T11:40:41Z

packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts

+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation?: TreeViewSelectionPropagation;


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

docs/data/tree-view/rich-tree-view/selection/SelectionPropagation.tsx

Kavan72 · 2024-10-15T08:55:31Z

@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 · 2024-10-15T11:49:51Z

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 · 2024-10-15T12:20:46Z

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 · 2024-10-15T13:14:12Z

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 · 2024-10-15T13:37:05Z

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 · 2024-10-16T07:52:38Z

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

github-actions · 2024-10-17T14:19:53Z

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

github-actions · 2024-10-21T10:56:47Z

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

ArmandRedgate · 2024-11-26T13:40:31Z

Hi.

I noticed that in the preview docs the bot linked, this feature works, but it does not in the live docs.

Was there a regression? Has this simply not been released yet?

(Our support key is 65425)

flaviendelangle · 2024-11-26T13:42:51Z

Hi,

This feature is part of the v8 alpha (which is deployed here).

[TreeView] Automatic parents and children selection

3e0c6fe

flaviendelangle self-assigned this Oct 9, 2024

flaviendelangle added the component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! label Oct 9, 2024

flaviendelangle added 3 commits October 9, 2024 17:32

Fix CI

099bcea

Fix

3253943

Fix

819ba22

flaviendelangle mentioned this pull request Oct 10, 2024

[data grid] Fix typo on the rowSelectionPropagation feature #14907

Merged

flaviendelangle added 8 commits October 10, 2024 09:19

Fix CI

18c6c68

Fix CI

642ab92

Fix

05164ac

Fix testsé

5695a0f

Fix

a2e2fc0

Fix

7f7d51c

Add tests

a6531c0

Merge branch 'master' into propagate-selection

b715606

flaviendelangle commented Oct 10, 2024

View reviewed changes

flaviendelangle force-pushed the propagate-selection branch from e4fa7c8 to e7d88d4 Compare October 10, 2024 11:40

flaviendelangle commented Oct 10, 2024

View reviewed changes

flaviendelangle added the v8.x label Oct 10, 2024

flaviendelangle marked this pull request as ready for review October 10, 2024 11:44

flaviendelangle requested review from LukasTy, noraleonte and joserodolfofreitas October 10, 2024 11:44

flaviendelangle force-pushed the propagate-selection branch 3 times, most recently from 48702ae to 6889bc1 Compare October 10, 2024 13:39

Improve doc wording

a0e4c41

flaviendelangle force-pushed the propagate-selection branch from 6889bc1 to a0e4c41 Compare October 10, 2024 14:15

MBilalShafi reviewed Oct 10, 2024

View reviewed changes

docs/data/tree-view/rich-tree-view/selection/SelectionPropagation.tsx Show resolved Hide resolved

flaviendelangle added 4 commits October 11, 2024 16:33

Fix

ab73fe1

Fix

f38f22f

Fix

25d4416

Fix

c12f591

flaviendelangle mentioned this pull request Oct 15, 2024

[TreeView] Clarify the behavior when clicking on a checkbox in an indeterminate state #14979

Open

1 task

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 16, 2024

Merge

3860de6

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 16, 2024

Merge branch 'master' into propagate-selection

d93da04

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 17, 2024

Merge

7ea26ab

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 18, 2024

flaviendelangle added 2 commits October 18, 2024 08:42

Fix API

7148a01

Merge branch 'master' into propagate-selection

6ab6d5b

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 21, 2024

Merge

508e7b1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 21, 2024

Merge branch 'master' into propagate-selection

dfe3497

flaviendelangle merged commit 0ffbbe8 into mui:master Oct 23, 2024
18 checks passed

flaviendelangle deleted the propagate-selection branch October 23, 2024 07:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TreeView] Automatic parents and children selection #14899

[TreeView] Automatic parents and children selection #14899

flaviendelangle commented Oct 9, 2024 •

edited

Loading

mui-bot commented Oct 9, 2024 •

edited

Loading

flaviendelangle Oct 10, 2024

flaviendelangle Oct 10, 2024

flaviendelangle Oct 10, 2024

Kavan72 commented Oct 15, 2024

flaviendelangle commented Oct 15, 2024

Kavan72 commented Oct 15, 2024

flaviendelangle commented Oct 15, 2024

MBilalShafi commented Oct 15, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 21, 2024

ArmandRedgate commented Nov 26, 2024

flaviendelangle commented Nov 26, 2024

[TreeView] Automatic parents and children selection #14899

[TreeView] Automatic parents and children selection #14899

Conversation

flaviendelangle commented Oct 9, 2024 • edited Loading

mui-bot commented Oct 9, 2024 • edited Loading

flaviendelangle Oct 10, 2024

Choose a reason for hiding this comment

flaviendelangle Oct 10, 2024

Choose a reason for hiding this comment

flaviendelangle Oct 10, 2024

Choose a reason for hiding this comment

Kavan72 commented Oct 15, 2024

flaviendelangle commented Oct 15, 2024

Kavan72 commented Oct 15, 2024

flaviendelangle commented Oct 15, 2024

MBilalShafi commented Oct 15, 2024 • edited Loading

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 21, 2024

ArmandRedgate commented Nov 26, 2024

flaviendelangle commented Nov 26, 2024

flaviendelangle commented Oct 9, 2024 •

edited

Loading

mui-bot commented Oct 9, 2024 •

edited

Loading

MBilalShafi commented Oct 15, 2024 •

edited

Loading