[TreeView] New API method: setItemExpansion

docs/data/tree-view/rich-tree-view/expansion/ChangeItemExpansion.js

@@ -0,0 +1,51 @@
+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';
+
+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' },
+    ],
+  },
+];
+
+export default function ChangeItemExpansion() {
+  const apiRef = useTreeViewApiRef();
+
+  const handleExpandClick = (event) => {
+    apiRef.current.setItemExpansion(event, 'grid', true);
+  };
+
+  const handleCollapseClick = (event) => {
+    apiRef.current.setItemExpansion(event, 'grid', false);
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
+      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+        <Button onClick={handleExpandClick}>Expand Data Grid</Button>
+        <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
+      </Stack>
+      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/expansion/ChangeItemExpansion.tsx

@@ -0,0 +1,51 @@
+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';
+
+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' },
+    ],
+  },
+];
+
+export default function ChangeItemExpansion() {
+  const apiRef = useTreeViewApiRef();
+
+  const handleExpandClick = (event: React.MouseEvent) => {
+    apiRef.current!.setItemExpansion(event, 'grid', true);
+  };
+
+  const handleCollapseClick = (event: React.MouseEvent) => {
+    apiRef.current!.setItemExpansion(event, 'grid', false);
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
+      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+        <Button onClick={handleExpandClick}>Expand Data Grid</Button>
+        <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
+      </Stack>
+      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/expansion/ChangeItemExpansion.tsx.preview

@@ -0,0 +1,7 @@
+<Stack sx={{ mb: 1 }} spacing={2} direction="row">
+  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
+  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
+</Stack>
+<Box sx={{ minHeight: 220, flexGrow: 1 }}>
+  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+</Box>

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

@@ -32,3 +32,9 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 Use the `onItemExpansionToggle` prop if you want to react to an item expansion change:
 
 {{"demo": "TrackItemExpansionToggle.js"}}
+
+## Change item expansion
+
+You can use the `setItemExpansion` api method to imperatively change the expansion of an item:
+
+{{"demo": "ChangeItemExpansion.js"}}

docs/data/tree-view/simple-tree-view/expansion/ChangeItemExpansion.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { useTreeViewApiRef } from '@mui/x-tree-view';
+
+export default function ChangeItemExpansion() {
+  const apiRef = useTreeViewApiRef();
+
+  const handleExpandClick = (event) => {
+    apiRef.current.setItemExpansion(event, 'grid', true);
+  };
+
+  const handleCollapseClick = (event) => {
+    apiRef.current.setItemExpansion(event, 'grid', false);
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
+      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+        <Button onClick={handleExpandClick}>Expand Data Grid</Button>
+        <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
+      </Stack>
+      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+        <SimpleTreeView apiRef={apiRef}>
+          <TreeItem itemId="grid" label="Data Grid">
+            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+          </TreeItem>
+          <TreeItem itemId="pickers" label="Date and Time Pickers">
+            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+          </TreeItem>
+        </SimpleTreeView>
+      </Box>
+    </Box>
+  );
+}

docs/data/tree-view/simple-tree-view/expansion/ChangeItemExpansion.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import { useTreeViewApiRef } from '@mui/x-tree-view';
+
+export default function ChangeItemExpansion() {
+  const apiRef = useTreeViewApiRef();
+
+  const handleExpandClick = (event: React.MouseEvent) => {
+    apiRef.current!.setItemExpansion(event, 'grid', true);
+  };
+
+  const handleCollapseClick = (event: React.MouseEvent) => {
+    apiRef.current!.setItemExpansion(event, 'grid', false);
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1, maxWidth: 400 }}>
+      <Stack sx={{ mb: 1 }} spacing={2} direction="row">
+        <Button onClick={handleExpandClick}>Expand Data Grid</Button>
+        <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
+      </Stack>
+      <Box sx={{ minHeight: 220, flexGrow: 1 }}>
+        <SimpleTreeView apiRef={apiRef}>
+          <TreeItem itemId="grid" label="Data Grid">
+            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+          </TreeItem>
+          <TreeItem itemId="pickers" label="Date and Time Pickers">
+            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+          </TreeItem>
+        </SimpleTreeView>
+      </Box>
+    </Box>
+  );
+}

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

@@ -31,3 +31,9 @@ Learn more about the _Controlled and uncontrolled_ pattern in the [React documen
 Use the `onItemExpansionToggle` prop to trigger an action upon an item being expanded.
 
 {{"demo": "TrackItemExpansionToggle.js"}}
+
+## Change item expansion
+
+You can use the `setItemExpansion` api method to imperatively change the expansion of an item:
+
+{{"demo": "ChangeItemExpansion.js"}}

packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts

@@ -1,50 +1,56 @@
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TreeViewPlugin } from '../../models';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
+import { TreeViewItemId } from '../../../models';
 
 export const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature> = ({
   instance,
+  publicAPI,
   params,
   models,
 }) => {
+  const expandedItemsMap = React.useMemo(() => {
+    const temp = new Map<TreeViewItemId, boolean>();
+    models.expandedItems.value.forEach((id) => {
+      temp.set(id, true);
+    });
+
+    return temp;
+  }, [models.expandedItems.value]);
+
   const setExpandedItems = (event: React.SyntheticEvent, value: string[]) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
 
   const isItemExpanded = React.useCallback(
-    (itemId: string) => {
-      return Array.isArray(models.expandedItems.value)
-        ? models.expandedItems.value.indexOf(itemId) !== -1
-        : false;
-    },
-    [models.expandedItems.value],
+    (itemId: string) => expandedItemsMap.has(itemId),
+    [expandedItemsMap],
   );
 
   const isItemExpandable = React.useCallback(
     (itemId: string) => !!instance.getNode(itemId)?.expandable,
     [instance],
   );
 
-  const toggleItemExpansion = useEventCallback(
-    (event: React.SyntheticEvent, itemId: string | null) => {
-      if (itemId == null) {
-        return;
-      }
-
-      const isExpandedBefore = models.expandedItems.value.indexOf(itemId!) !== -1;
+  const toggleItemExpansion = useEventCallback((event: React.SyntheticEvent, itemId: string) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    instance.setItemExpansion(event, itemId, !isExpandedBefore);
+  });
 
+  const setItemExpansion = useEventCallback(
+    (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => {
       let newExpanded: string[];
-      if (isExpandedBefore) {
-        newExpanded = models.expandedItems.value.filter((id) => id !== itemId);
-      } else {
+      if (isExpanded) {
         newExpanded = [itemId].concat(models.expandedItems.value);
+      } else {
+        newExpanded = models.expandedItems.value.filter((id) => id !== itemId);
       }
 
       if (params.onItemExpansionToggle) {
-        params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
+        params.onItemExpansionToggle(event, itemId, isExpanded);
       }
 
       setExpandedItems(event, newExpanded);
@@ -75,9 +81,12 @@ export const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature>
   populateInstance<UseTreeViewExpansionSignature>(instance, {
     isItemExpanded,
     isItemExpandable,
+    setItemExpansion,
     toggleItemExpansion,
     expandAllSiblings,
   });
+
+  populatePublicAPI<UseTreeViewExpansionSignature>(publicAPI, { setItemExpansion });
 };
 
 useTreeViewExpansion.models = {

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

@@ -2,10 +2,20 @@ import * as React from 'react';
 import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 
-export interface UseTreeViewExpansionInstance {
+export interface UseTreeViewExpansionPublicAPI {
+  /**
+   * Change the expansion status of a given item.
+   * @param {React.SyntheticEvent} event The UI event that triggered the change.
+   * @param {string} itemId The id of the item to modify.
+   * @param {boolean} isExpanded The new expansion status of the given item.
+   */
+  setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
+}
+
+export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
   isItemExpanded: (itemId: string) => boolean;
   isItemExpandable: (itemId: string) => boolean;
-  toggleItemExpansion: (event: React.SyntheticEvent, value: string) => void;
+  toggleItemExpansion: (event: React.SyntheticEvent, itemId: string) => void;
   expandAllSiblings: (event: React.KeyboardEvent, itemId: string) => void;
 }
 
@@ -49,6 +59,7 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
   params: UseTreeViewExpansionParameters;
   defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
   instance: UseTreeViewExpansionInstance;
+  publicAPI: UseTreeViewExpansionPublicAPI;
   modelNames: 'expandedItems';
   dependantPlugins: [UseTreeViewItemsSignature];
 }>;