Skip to content

Commit 76832df

Browse files
flaviendelangleflaviendelangle
authored
[TreeView] Add selectItem and getItemDOMElement methods to the public API (#13485)
1 parent de1451d commit 76832df

File tree

45 files changed

+1093
-95
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1093
-95
lines changed

‎docs/data/tree-view/rich-tree-view/expansion/expansion.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,10 @@ Use the `setItemExpansion` API method to change the expansion of an item.
6262
apiRef.current.setItemExpansion(
6363
// The DOM event that triggered the change
6464
event,
65-
// The ID of the item to expand or collapse
65+
// The id of the item to expand or collapse
6666
itemId,
67-
// `true` if the item should be expanded, `false` if it should be collapsed
67+
// If `true` the item will be expanded
68+
// If `false` the item will be collapsed
6869
isExpanded,
6970
);
7071
```

‎docs/data/tree-view/rich-tree-view/focus/focus.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Use the `focusItem` API method to focus a specific item.
3434
apiRef.current.focusItem(
3535
// The DOM event that triggered the change
3636
event,
37-
// The ID of the item to focus
37+
// The id of the item to focus
3838
itemId,
3939
);
4040
```

‎docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Button from '@mui/material/Button';
5+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
6+
7+
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
8+
9+
const MUI_X_PRODUCTS = [
10+
{
11+
id: 'grid',
12+
label: 'Data Grid',
13+
children: [
14+
{ id: 'grid-community', label: '@mui/x-data-grid' },
15+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
16+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
17+
],
18+
},
19+
{
20+
id: 'pickers',
21+
label: 'Date and Time Pickers',
22+
children: [
23+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
24+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
25+
],
26+
},
27+
{
28+
id: 'charts',
29+
label: 'Charts',
30+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
31+
},
32+
{
33+
id: 'tree-view',
34+
label: 'Tree View',
35+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
36+
},
37+
];
38+
39+
export default function ApiMethodGetItemDOMElement() {
40+
const apiRef = useTreeViewApiRef();
41+
const handleScrollToChartsCommunity = (event) => {
42+
apiRef.current.focusItem(event, 'charts-community');
43+
apiRef.current
44+
.getItemDOMElement('charts-community')
45+
?.scrollIntoView({ block: 'center' });
46+
};
47+
48+
return (
49+
<Stack spacing={2}>
50+
<div>
51+
<Button onClick={handleScrollToChartsCommunity}>
52+
Focus and scroll to charts community item
53+
</Button>
54+
</div>
55+
<Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
56+
<RichTreeView
57+
items={MUI_X_PRODUCTS}
58+
apiRef={apiRef}
59+
defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
60+
/>
61+
</Box>
62+
</Stack>
63+
);
64+
}

‎docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Button from '@mui/material/Button';
5+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
6+
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
7+
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
8+
9+
const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
10+
{
11+
id: 'grid',
12+
label: 'Data Grid',
13+
children: [
14+
{ id: 'grid-community', label: '@mui/x-data-grid' },
15+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
16+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
17+
],
18+
},
19+
{
20+
id: 'pickers',
21+
label: 'Date and Time Pickers',
22+
children: [
23+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
24+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
25+
],
26+
},
27+
{
28+
id: 'charts',
29+
label: 'Charts',
30+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
31+
},
32+
{
33+
id: 'tree-view',
34+
label: 'Tree View',
35+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
36+
},
37+
];
38+
39+
export default function ApiMethodGetItemDOMElement() {
40+
const apiRef = useTreeViewApiRef();
41+
const handleScrollToChartsCommunity = (event: React.SyntheticEvent) => {
42+
apiRef.current!.focusItem(event, 'charts-community');
43+
apiRef
44+
.current!.getItemDOMElement('charts-community')
45+
?.scrollIntoView({ block: 'center' });
46+
};
47+
48+
return (
49+
<Stack spacing={2}>
50+
<div>
51+
<Button onClick={handleScrollToChartsCommunity}>
52+
Focus and scroll to charts community item
53+
</Button>
54+
</div>
55+
<Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
56+
<RichTreeView
57+
items={MUI_X_PRODUCTS}
58+
apiRef={apiRef}
59+
defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
60+
/>
61+
</Box>
62+
</Stack>
63+
);
64+
}

‎docs/data/tree-view/rich-tree-view/items/ApiMethodGetItemDOMElement.tsx.preview‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div>
2+
<Button onClick={handleScrollToChartsCommunity}>
3+
Focus and scroll to charts community item
4+
</Button>
5+
</div>
6+
<Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
7+
<RichTreeView
8+
items={MUI_X_PRODUCTS}
9+
apiRef={apiRef}
10+
defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
11+
/>
12+
</Box>

‎docs/data/tree-view/rich-tree-view/items/items.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,22 @@ Use the `getItem` API method to get an item by its ID.
151151

152152
```ts
153153
const item = apiRef.current.getItem(
154-
// The ID of the item to retrieve
154+
// The id of the item to retrieve
155155
itemId,
156156
);
157157
```
158158

159159
{{"demo": "ApiMethodGetItem.js", "defaultCodeOpen": false}}
160+
161+
### Get an item's DOM element by ID
162+
163+
Use the `getItemDOMElement` API method to get an item's DOM element by its ID.
164+
165+
```ts
166+
const itemElement = apiRef.current.getItemDOMElement(
167+
// The id of the item to get the DOM element of
168+
itemId,
169+
);
170+
```
171+
172+
{{"demo": "ApiMethodGetItemDOMElement.js", "defaultCodeOpen": false}}

‎docs/data/tree-view/rich-tree-view/selection/ApiMethodSelectItem.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Button from '@mui/material/Button';
5+
6+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
7+
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
8+
9+
const MUI_X_PRODUCTS = [
10+
{
11+
id: 'grid',
12+
label: 'Data Grid',
13+
children: [
14+
{ id: 'grid-community', label: '@mui/x-data-grid' },
15+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
16+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
17+
],
18+
},
19+
{
20+
id: 'pickers',
21+
label: 'Date and Time Pickers',
22+
children: [
23+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
24+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
25+
],
26+
},
27+
{
28+
id: 'charts',
29+
label: 'Charts',
30+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
31+
},
32+
{
33+
id: 'tree-view',
34+
label: 'Tree View',
35+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
36+
},
37+
];
38+
39+
export default function ApiMethodSelectItem() {
40+
const apiRef = useTreeViewApiRef();
41+
const handleSelectGridPro = (event) => {
42+
apiRef.current?.selectItem({ event, itemId: 'grid-pro' });
43+
};
44+
45+
return (
46+
<Stack spacing={2}>
47+
<div>
48+
<Button onClick={handleSelectGridPro}>Select grid pro item</Button>
49+
</div>
50+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
51+
<RichTreeView
52+
items={MUI_X_PRODUCTS}
53+
apiRef={apiRef}
54+
defaultExpandedItems={['grid']}
55+
/>
56+
</Box>
57+
</Stack>
58+
);
59+
}

‎docs/data/tree-view/rich-tree-view/selection/ApiMethodSelectItem.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Button from '@mui/material/Button';
5+
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
6+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
7+
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
8+
9+
const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
10+
{
11+
id: 'grid',
12+
label: 'Data Grid',
13+
children: [
14+
{ id: 'grid-community', label: '@mui/x-data-grid' },
15+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
16+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
17+
],
18+
},
19+
{
20+
id: 'pickers',
21+
label: 'Date and Time Pickers',
22+
children: [
23+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
24+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
25+
],
26+
},
27+
{
28+
id: 'charts',
29+
label: 'Charts',
30+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
31+
},
32+
{
33+
id: 'tree-view',
34+
label: 'Tree View',
35+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
36+
},
37+
];
38+
39+
export default function ApiMethodSelectItem() {
40+
const apiRef = useTreeViewApiRef();
41+
const handleSelectGridPro = (event: React.SyntheticEvent) => {
42+
apiRef.current?.selectItem({ event, itemId: 'grid-pro' });
43+
};
44+
45+
return (
46+
<Stack spacing={2}>
47+
<div>
48+
<Button onClick={handleSelectGridPro}>Select grid pro item</Button>
49+
</div>
50+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
51+
<RichTreeView
52+
items={MUI_X_PRODUCTS}
53+
apiRef={apiRef}
54+
defaultExpandedItems={['grid']}
55+
/>
56+
</Box>
57+
</Stack>
58+
);
59+
}

‎docs/data/tree-view/rich-tree-view/selection/ApiMethodSelectItem.tsx.preview‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div>
2+
<Button onClick={handleSelectGridPro}>Select grid pro item</Button>
3+
</div>
4+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
5+
<RichTreeView
6+
items={MUI_X_PRODUCTS}
7+
apiRef={apiRef}
8+
defaultExpandedItems={['grid']}
9+
/>
10+
</Box>

‎docs/data/tree-view/rich-tree-view/selection/ApiMethodSelectItemKeepExistingSelection.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Stack from '@mui/material/Stack';
4+
import Button from '@mui/material/Button';
5+
6+
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
7+
import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
8+
9+
const MUI_X_PRODUCTS = [
10+
{
11+
id: 'grid',
12+
label: 'Data Grid',
13+
children: [
14+
{ id: 'grid-community', label: '@mui/x-data-grid' },
15+
{ id: 'grid-pro', label: '@mui/x-data-grid-pro' },
16+
{ id: 'grid-premium', label: '@mui/x-data-grid-premium' },
17+
],
18+
},
19+
{
20+
id: 'pickers',
21+
label: 'Date and Time Pickers',
22+
children: [
23+
{ id: 'pickers-community', label: '@mui/x-date-pickers' },
24+
{ id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
25+
],
26+
},
27+
{
28+
id: 'charts',
29+
label: 'Charts',
30+
children: [{ id: 'charts-community', label: '@mui/x-charts' }],
31+
},
32+
{
33+
id: 'tree-view',
34+
label: 'Tree View',
35+
children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
36+
},
37+
];
38+
39+
export default function ApiMethodSelectItemKeepExistingSelection() {
40+
const apiRef = useTreeViewApiRef();
41+
const handleSelectGridPro = (event) => {
42+
apiRef.current?.selectItem({
43+
event,
44+
itemId: 'grid-pro',
45+
keepExistingSelection: true,
46+
});
47+
};
48+
49+
return (
50+
<Stack spacing={2}>
51+
<div>
52+
<Button onClick={handleSelectGridPro}>Select grid pro item</Button>
53+
</div>
54+
<Box sx={{ minHeight: 352, minWidth: 250 }}>
55+
<RichTreeView
56+
items={MUI_X_PRODUCTS}
57+
apiRef={apiRef}
58+
defaultExpandedItems={['grid']}
59+
multiSelect
60+
defaultSelectedItems={['grid-premium']}
61+
/>
62+
</Box>
63+
</Stack>
64+
);
65+
}

0 commit comments

Comments
 (0)