[TreeView] Add selectItem and getItemDOMElement methods to the public API

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

@@ -62,9 +62,10 @@ Use the `setItemExpansion` API method to change the expansion of an item.
 apiRef.current.setItemExpansion(
   // The DOM event that triggered the change
   event,
-  // The ID of the item to expand or collapse
+  // The id of the item to expand or collapse
   itemId,
-  // `true` if the item should be expanded, `false` if it should be collapsed
+  // If `true` the item will be expanded
+  // If `false` the item will be collapsed
   isExpanded,
 );
 ```

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

@@ -34,7 +34,7 @@ Use the `focusItem` API method to focus a specific item.
 apiRef.current.focusItem(
   // The DOM event that triggered the change
   event,
-  // The ID of the item to focus
+  // The id of the item to focus
   itemId,
 );
 ```

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+const MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function ApiMethodGetItemDOMElement() {
+  const apiRef = useTreeViewApiRef();
+  const handleScrollToChartsCommunity = (event) => {
+    apiRef.current.focusItem(event, 'charts-community');
+    apiRef.current
+      .getItemDOMElement('charts-community')
+      ?.scrollIntoView({ block: 'center' });
+  };
+
+  return (
+    <Stack spacing={2}>
+      <div>
+        <Button onClick={handleScrollToChartsCommunity}>
+          Focus and scroll to charts community item
+        </Button>
+      </div>
+      <Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          apiRef={apiRef}
+          defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
+        />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function ApiMethodGetItemDOMElement() {
+  const apiRef = useTreeViewApiRef();
+  const handleScrollToChartsCommunity = (event: React.SyntheticEvent) => {
+    apiRef.current!.focusItem(event, 'charts-community');
+    apiRef
+      .current!.getItemDOMElement('charts-community')
+      ?.scrollIntoView({ block: 'center' });
+  };
+
+  return (
+    <Stack spacing={2}>
+      <div>
+        <Button onClick={handleScrollToChartsCommunity}>
+          Focus and scroll to charts community item
+        </Button>
+      </div>
+      <Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          apiRef={apiRef}
+          defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
+        />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,12 @@
+<div>
+  <Button onClick={handleScrollToChartsCommunity}>
+    Focus and scroll to charts community item
+  </Button>
+</div>
+<Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
+  <RichTreeView
+    items={MUI_X_PRODUCTS}
+    apiRef={apiRef}
+    defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
+  />
+</Box>

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

@@ -151,9 +151,22 @@ Use the `getItem` API method to get an item by its ID.
 
 ```ts
 const item = apiRef.current.getItem(
-  // The ID of the item to retrieve
+  // The id of the item to retrieve
   itemId,
 );
 ```
 
 {{"demo": "ApiMethodGetItem.js", "defaultCodeOpen": false}}
+
+### Get an item's DOM element by ID
+
+Use the `getItemDOMElement` API method to get an item's DOM element by its ID.
+
+```ts
+const itemElement = apiRef.current.getItemDOMElement(
+  // The id of the item to get the DOM element of
+  itemId,
+);
+```
+
+{{"demo": "ApiMethodGetItemDOMElement.js", "defaultCodeOpen": false}}

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+const MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function ApiMethodSelectItem() {
+  const apiRef = useTreeViewApiRef();
+  const handleSelectGridPro = (event) => {
+    apiRef.current?.selectItem({ event, itemId: 'grid-pro' });
+  };
+
+  return (
+    <Stack spacing={2}>
+      <div>
+        <Button onClick={handleSelectGridPro}>Select grid pro item</Button>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          apiRef={apiRef}
+          defaultExpandedItems={['grid']}
+        />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function ApiMethodSelectItem() {
+  const apiRef = useTreeViewApiRef();
+  const handleSelectGridPro = (event: React.SyntheticEvent) => {
+    apiRef.current?.selectItem({ event, itemId: 'grid-pro' });
+  };
+
+  return (
+    <Stack spacing={2}>
+      <div>
+        <Button onClick={handleSelectGridPro}>Select grid pro item</Button>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          apiRef={apiRef}
+          defaultExpandedItems={['grid']}
+        />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,10 @@
+<div>
+  <Button onClick={handleSelectGridPro}>Select grid pro item</Button>
+</div>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
+  <RichTreeView
+    items={MUI_X_PRODUCTS}
+    apiRef={apiRef}
+    defaultExpandedItems={['grid']}
+  />
+</Box>

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks/useTreeViewApiRef';
+
+const MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function ApiMethodSelectItemKeepExistingSelection() {
+  const apiRef = useTreeViewApiRef();
+  const handleSelectGridPro = (event) => {
+    apiRef.current?.selectItem({
+      event,
+      itemId: 'grid-pro',
+      keepExistingSelection: true,
+    });
+  };
+
+  return (
+    <Stack spacing={2}>
+      <div>
+        <Button onClick={handleSelectGridPro}>Select grid pro item</Button>
+      </div>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          apiRef={apiRef}
+          defaultExpandedItems={['grid']}
+          multiSelect
+          defaultSelectedItems={['grid-premium']}
+        />
+      </Box>
+    </Stack>
+  );
+}