[tree view] Expose the methods to manually refetch the children of an item

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+
+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 ApiMethodIsItemExpanded() {
+  const apiRef = useTreeViewApiRef();
+  const [isGridExpanded, setIsGridExpanded] = React.useState(false);
+  const [isSnackbarOpen, setIsSnackbarOpen] = React.useState(false);
+
+  const checkExpansion = () => {
+    setIsGridExpanded(apiRef.current.isItemExpanded('grid'));
+    setIsSnackbarOpen(true);
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
+        <Button onClick={checkExpansion}>
+          Check if the the Data Grid is expanded
+        </Button>
+        <Snackbar
+          open={isSnackbarOpen}
+          autoHideDuration={3000}
+          onClose={() => setIsSnackbarOpen(false)}
+          message={`Data Grid is ${isGridExpanded ? 'expanded' : 'collapsed'}`}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        />
+      </Stack>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+
+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 ApiMethodIsItemExpanded() {
+  const apiRef = useTreeViewApiRef();
+  const [isGridExpanded, setIsGridExpanded] = React.useState<boolean>(false);
+  const [isSnackbarOpen, setIsSnackbarOpen] = React.useState(false);
+
+  const checkExpansion = () => {
+    setIsGridExpanded(apiRef.current!.isItemExpanded('grid'));
+    setIsSnackbarOpen(true);
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
+        <Button onClick={checkExpansion}>
+          Check if the the Data Grid is expanded
+        </Button>
+        <Snackbar
+          open={isSnackbarOpen}
+          autoHideDuration={3000}
+          onClose={() => setIsSnackbarOpen(false)}
+          message={`Data Grid is ${isGridExpanded ? 'expanded' : 'collapsed'}`}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        />
+      </Stack>
+      <Box sx={{ minHeight: 352, minWidth: 250 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,15 @@
+<Stack spacing={2} direction="row">
+  <Button onClick={checkExpansion}>
+    Check if the the Data Grid is expanded
+  </Button>
+  <Snackbar
+    open={isSnackbarOpen}
+    autoHideDuration={3000}
+    onClose={() => setIsSnackbarOpen(false)}
+    message={`Data Grid is ${isGridExpanded ? 'expanded' : 'collapsed'}`}
+    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+  />
+</Stack>
+<Box sx={{ minHeight: 352, minWidth: 250 }}>
+  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+</Box>

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

@@ -71,3 +71,16 @@ apiRef.current.setItemExpansion({
 ```
 
 {{"demo": "ApiMethodSetItemExpansion.js"}}
+
+### Check if an item is expanded
+
+Use the `isItemExpanded()` API method to check the expansion of an item.
+
+```ts
+apiRef.current.setItemExpansion(
+  // The id of the item to check
+  itemId,
+);
+```
+
+{{"demo": "ApiMethodIsItemExpanded.js"}}

docs/data/tree-view/rich-tree-view/lazy-loading/ApiMethodUpdateItemChildren.js

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import CachedIcon from '@mui/icons-material/Cached';
+import {
+  randomInt,
+  randomName,
+  randomId,
+  randomBoolean,
+} from '@mui/x-data-grid-generator';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import {
+  TreeItemContent,
+  TreeItemIconContainer,
+  TreeItemGroupTransition,
+  TreeItemLabel,
+  TreeItemRoot,
+  TreeItemCheckbox,
+} from '@mui/x-tree-view/TreeItem';
+
+import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
+import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
+import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+import { useTreeItem } from '@mui/x-tree-view/useTreeItem';
+
+const LATENCY_MS = 300;
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+
+  const {
+    getContextProviderProps,
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    getDragAndDropOverlayProps,
+    status,
+    publicAPI,
+  } = useTreeItem({
+    id,
+    itemId,
+    children,
+    label,
+    disabled,
+    rootRef: ref,
+  });
+
+  const refreshChildren = (event) => {
+    event.defaultMuiPrevented = true;
+    publicAPI.updateItemChildren(itemId);
+  };
+
+  return (
+    <TreeItemProvider {...getContextProviderProps()}>
+      <TreeItemRoot {...getRootProps(other)}>
+        <TreeItemContent {...getContentProps()}>
+          <TreeItemIconContainer {...getIconContainerProps()}>
+            <TreeItemIcon status={status} />
+          </TreeItemIconContainer>
+          <Box sx={{ flexGrow: 1, display: 'flex', gap: 1 }}>
+            <TreeItemCheckbox {...getCheckboxProps()} />
+            <TreeItemLabel {...getLabelProps()} />
+            {status.expandable && status.expanded && (
+              <IconButton
+                size="small"
+                onClick={refreshChildren}
+                title="Refetch children"
+              >
+                <CachedIcon fontSize="small" />
+              </IconButton>
+            )}
+          </Box>
+          <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
+        </TreeItemContent>
+        {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
+      </TreeItemRoot>
+    </TreeItemProvider>
+  );
+});
+
+export default function ApiMethodUpdateItemChildren() {
+  const fetchData = async () => {
+    const length = randomInt(5, 10);
+    const rows = Array.from({ length }, () => ({
+      id: randomId(),
+      label: randomName({}, {}),
+      ...(randomBoolean() ? { childrenCount: length } : {}),
+    }));
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(rows);
+      }, LATENCY_MS);
+    });
+  };
+
+  return (
+    <Box sx={{ width: '300px' }}>
+      <RichTreeViewPro
+        items={[]}
+        dataSource={{
+          getChildrenCount: (item) => item?.childrenCount,
+          getTreeItems: fetchData,
+        }}
+        slots={{ item: CustomTreeItem }}
+      />
+    </Box>
+  );
+}