[TreeView] Automatic parents and children selection (mui#14899)

docs/data/tree-view/datasets/employees.ts

@@ -0,0 +1,40 @@
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+
+export const EMPLOYEES_DATASET: TreeViewBaseItem[] = [
+  {
+    id: '0',
+    label: 'Sarah',
+  },
+  {
+    id: '1',
+    label: 'Thomas',
+    children: [
+      { id: '2', label: 'Robert' },
+      { id: '3', label: 'Karen' },
+      { id: '4', label: 'Nancy' },
+      { id: '5', label: 'Daniel' },
+      { id: '6', label: 'Christopher' },
+      { id: '7', label: 'Donald' },
+    ],
+  },
+  {
+    id: '8',
+    label: 'Mary',
+    children: [
+      {
+        id: '9',
+        label: 'Jennifer',
+        children: [{ id: '10', label: 'Anna' }],
+      },
+      { id: '11', label: 'Michael' },
+      {
+        id: '12',
+        label: 'Linda',
+        children: [
+          { id: '13', label: 'Elizabeth' },
+          { id: '14', label: 'William' },
+        ],
+      },
+    ],
+  },
+];

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+import { EMPLOYEES_DATASET } from '../../datasets/employees';
+
+export default function SelectionPropagation() {
+  const [selectionPropagation, setSelectionPropagation] = React.useState({
+    parents: true,
+    descendants: true,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stack direction="row" spacing={2}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={selectionPropagation.descendants}
+              onChange={(event) =>
+                setSelectionPropagation((prev) => ({
+                  ...prev,
+                  descendants: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select descendants"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={selectionPropagation.parents}
+              onChange={(event) =>
+                setSelectionPropagation((prev) => ({
+                  ...prev,
+                  parents: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select parents"
+        />
+      </Stack>
+      <Box sx={{ height: 256, minWidth: 250, overflowY: 'auto' }}>
+        <RichTreeView
+          items={EMPLOYEES_DATASET}
+          checkboxSelection
+          multiSelect
+          selectionPropagation={selectionPropagation}
+          defaultExpandedItems={['8', '12']}
+        />
+      </Box>
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewSelectionPropagation } from '@mui/x-tree-view/models';
+import { EMPLOYEES_DATASET } from '../../datasets/employees';
+
+export default function SelectionPropagation() {
+  const [selectionPropagation, setSelectionPropagation] =
+    React.useState<TreeViewSelectionPropagation>({
+      parents: true,
+      descendants: true,
+    });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stack direction="row" spacing={2}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={selectionPropagation.descendants}
+              onChange={(event) =>
+                setSelectionPropagation((prev) => ({
+                  ...prev,
+                  descendants: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select descendants"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={selectionPropagation.parents}
+              onChange={(event) =>
+                setSelectionPropagation((prev) => ({
+                  ...prev,
+                  parents: event.target.checked,
+                }))
+              }
+            />
+          }
+          label="Auto select parents"
+        />
+      </Stack>
+      <Box sx={{ height: 256, minWidth: 250, overflowY: 'auto' }}>
+        <RichTreeView
+          items={EMPLOYEES_DATASET}
+          checkboxSelection
+          multiSelect
+          selectionPropagation={selectionPropagation}
+          defaultExpandedItems={['8', '12']}
+        />
+      </Box>
+    </div>
+  );
+}