@mui/x-tree-view 7.0.0-beta.4 → 7.0.0-beta.6

package/RichTreeView/RichTreeView.js

@@ -134,6 +134,15 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
+    })
+  }),
   /**
    * Override or extend the styles applied to the component.
    */

package/RichTreeView/RichTreeView.types.d.ts

@@ -3,9 +3,10 @@ import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { RichTreeViewClasses } from './richTreeViewClasses';
-import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots } from '../internals/plugins/defaultPlugins';
+import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, DefaultTreeViewPluginSlots, DefaultTreeViewPlugins } from '../internals/plugins/defaultPlugins';
 import { TreeItem, TreeItemProps } from '../TreeItem';
 import { TreeViewItemId } from '../models';
+import { TreeViewPublicAPI } from '../internals/models';
 interface RichTreeViewItemSlotOwnerState {
     nodeId: TreeViewItemId;
     label: string;
@@ -26,6 +27,7 @@ export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean |
     root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
     item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemSlotOwnerState>;
 }
+export type RichTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<DefaultTreeViewPlugins> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
     className?: string;
     /**
@@ -48,5 +50,9 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
      * @default {}
      */
     slotProps?: RichTreeViewSlotProps<R, Multiple>;
+    /**
+     * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+     */
+    apiRef?: RichTreeViewApiRef;
 }
 export {};

package/SimpleTreeView/SimpleTreeView.js

@@ -91,6 +91,15 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The content of the component.
    */

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -3,7 +3,8 @@ import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/base/utils';
 import { SxProps } from '@mui/system';
 import { SimpleTreeViewClasses } from './simpleTreeViewClasses';
-import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots } from './SimpleTreeView.plugins';
+import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPlugins } from './SimpleTreeView.plugins';
+import { TreeViewPublicAPI } from '../internals/models';
 export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
     /**
      * Element rendered at the root.
@@ -14,6 +15,7 @@ export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
 export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
     root?: SlotComponentProps<'ul', {}, {}>;
 }
+export type SimpleTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<SimpleTreeViewPlugins> | undefined>;
 export interface SimpleTreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewPluginParameters<Multiple>, React.HTMLAttributes<HTMLUListElement> {
     /**
      * The content of the component.
@@ -36,4 +38,8 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
+    /**
+     * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+     */
+    apiRef?: SimpleTreeViewApiRef;
 }

package/TreeItem/TreeItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"],
+const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"],
   _excluded4 = ["ownerState"];
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
     label: ['label'],
-    group: ['group']
+    groupTransition: ['groupTransition']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
@@ -116,8 +116,8 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 }));
 const TreeItemGroup = styled(Collapse, {
   name: 'MuiTreeItem',
-  slot: 'Group',
-  overridesResolver: (props, styles) => styles.group
+  slot: 'GroupTransition',
+  overridesResolver: (props, styles) => styles.groupTransition
 })({
   margin: 0,
   padding: 0,
@@ -135,7 +135,7 @@ const TreeItemGroup = styled(Collapse, {
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
-  var _ref, _inSlots$expandIcon, _ref2, _inSlots$collapseIcon, _inSlots$endIcon;
+  var _ref, _inSlots$expandIcon, _ref2, _inSlots$collapseIcon, _inSlots$endIcon, _slots$groupTransitio;
   const {
     icons: contextIcons,
     runItemPlugins,
@@ -168,16 +168,15 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       id,
       label,
       onClick,
-      onMouseDown,
-      TransitionComponent = Collapse,
-      TransitionProps
+      onMouseDown
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const slots = {
     expandIcon: (_ref = (_inSlots$expandIcon = inSlots == null ? void 0 : inSlots.expandIcon) != null ? _inSlots$expandIcon : contextIcons.slots.expandIcon) != null ? _ref : TreeViewExpandIcon,
     collapseIcon: (_ref2 = (_inSlots$collapseIcon = inSlots == null ? void 0 : inSlots.collapseIcon) != null ? _inSlots$collapseIcon : contextIcons.slots.collapseIcon) != null ? _ref2 : TreeViewCollapseIcon,
     endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
-    icon: inSlots == null ? void 0 : inSlots.icon
+    icon: inSlots == null ? void 0 : inSlots.icon,
+    groupTransition: inSlots == null ? void 0 : inSlots.groupTransition
   };
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
@@ -197,6 +196,19 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     disabled
   });
   const classes = useUtilityClasses(ownerState);
+  const GroupTransition = (_slots$groupTransitio = slots.groupTransition) != null ? _slots$groupTransitio : undefined;
+  const groupTransitionProps = useSlotProps({
+    elementType: GroupTransition,
+    ownerState: {},
+    externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.groupTransition,
+    additionalProps: {
+      unmountOnExit: true,
+      in: expanded,
+      component: 'ul',
+      role: 'group'
+    },
+    className: classes.groupTransition
+  });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = useSlotProps({
       elementType: ExpansionIcon,
@@ -286,13 +298,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       displayIcon: displayIcon,
       ownerState: ownerState
     }, ContentProps)), children && /*#__PURE__*/_jsx(TreeItemGroup, _extends({
-      as: TransitionComponent,
-      unmountOnExit: true,
-      className: classes.group,
-      in: expanded,
-      component: "ul",
-      role: "group"
-    }, TransitionProps, {
+      as: GroupTransition
+    }, groupTransitionProps, {
       children: children
     }))]
   }));
@@ -352,16 +359,5 @@ TreeItem.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   */
-  TransitionComponent: PropTypes.elementType,
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   */
-  TransitionProps: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };

package/TreeItem/TreeItem.types.d.ts

@@ -6,6 +6,7 @@ import { SxProps } from '@mui/system';
 import { TreeItemContentProps } from './TreeItemContent';
 import { TreeItemClasses } from './treeItemClasses';
 import { TreeViewItemId } from '../models';
+import { SlotComponentPropsFromProps } from '../internals/models';
 export interface TreeItemSlots {
     /**
      * The icon used to collapse the node.
@@ -23,12 +24,18 @@ export interface TreeItemSlots {
      * The icon to display next to the tree node's label.
      */
     icon?: React.ElementType;
+    /**
+     * The component that animates to appearance / disappearance of the item's children.
+     * @default TreeItem2Group
+     */
+    groupTransition?: React.ElementType;
 }
 export interface TreeItemSlotProps {
     collapseIcon?: SlotComponentProps<'svg', {}, {}>;
     expandIcon?: SlotComponentProps<'svg', {}, {}>;
     endIcon?: SlotComponentProps<'svg', {}, {}>;
     icon?: SlotComponentProps<'svg', {}, {}>;
+    groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
 }
 export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
     /**
@@ -77,17 +84,6 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      * The id of the node.
      */
     nodeId: TreeViewItemId;
-    /**
-     * The component used for the transition.
-     * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-     * @default Collapse
-     */
-    TransitionComponent?: React.JSXElementConstructor<TransitionProps>;
-    /**
-     * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-     */
-    TransitionProps?: TransitionProps;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/TreeItem/treeItemClasses.d.ts

@@ -2,7 +2,7 @@ export interface TreeItemClasses {
     /** Styles applied to the root element. */
     root: string;
     /** Styles applied to the transition component. */
-    group: string;
+    groupTransition: string;
     /** Styles applied to the content element. */
     content: string;
     /** State class applied to the content element when expanded. */

package/TreeItem/treeItemClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getTreeItemUtilityClass(slot) {
   return generateUtilityClass('MuiTreeItem', slot);
 }
-export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/TreeView/TreeView.js

@@ -64,6 +64,15 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
+   */
+  apiRef: PropTypes.shape({
+    current: PropTypes.shape({
+      focusNode: PropTypes.func.isRequired,
+      getItem: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The content of the component.
    */

package/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useTreeViewApiRef } from './useTreeViewApiRef';

package/hooks/index.js

@@ -0,0 +1 @@
+export { useTreeViewApiRef } from './useTreeViewApiRef';

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/useTreeViewApiRef.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+export declare const useTreeViewApiRef: <TPlugins extends readonly TreeViewAnyPluginSignature[] = [import("../internals").UseTreeViewIdSignature, import("../internals").UseTreeViewNodesSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TPlugins> | undefined>;

package/hooks/useTreeViewApiRef.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+export const useTreeViewApiRef = () => React.useRef(undefined);

package/index.d.ts

@@ -5,3 +5,4 @@ export * from './RichTreeView';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';
+export * from './hooks';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.4
+ * @mui/x-tree-view v7.0.0-beta.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,4 +11,5 @@ export * from './SimpleTreeView';
 export * from './RichTreeView';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
-export * from './icons';
+export * from './icons';
+export * from './hooks';

package/internals/hooks/useTimeout.d.ts

@@ -1,9 +1,11 @@
-declare class Timeout {
+export declare class Timeout {
     static create(): Timeout;
-    currentId: number;
+    currentId: ReturnType<typeof setTimeout> | null;
+    /**
+     * Executes `fn` after `delay`, clearing any previously scheduled call.
+     */
     start(delay: number, fn: Function): void;
     clear: () => void;
     disposeEffect: () => () => void;
 }
 export declare function useTimeout(): Timeout;
-export {};

package/internals/hooks/useTimeout.js

@@ -1,12 +1,14 @@
+'use client';
+
 import { useLazyRef } from './useLazyRef';
 import { useOnMount } from './useOnMount';
-class Timeout {
+export class Timeout {
   constructor() {
-    this.currentId = 0;
+    this.currentId = null;
     this.clear = () => {
-      if (this.currentId !== 0) {
+      if (this.currentId !== null) {
         clearTimeout(this.currentId);
-        this.currentId = 0;
+        this.currentId = null;
       }
     };
     this.disposeEffect = () => {
@@ -16,9 +18,15 @@ class Timeout {
   static create() {
     return new Timeout();
   }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
   start(delay, fn) {
     this.clear();
-    this.currentId = setTimeout(fn, delay);
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
   }
 }
 export function useTimeout() {

package/internals/models/helpers.d.ts

@@ -1,5 +1,6 @@
 import type { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
 export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;
+export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);
 type IsAny<T> = 0 extends 1 & T ? true : false;
 export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
 export type MergePluginsProperty<TPlugins extends readonly any[], TProperty extends keyof TreeViewAnyPluginSignature> = TPlugins extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewAnyPluginSignature ? P[TProperty] & MergePluginsProperty<R, TProperty> : {} : {};
@@ -7,6 +8,7 @@ export type ConvertPluginsIntoSignatures<TPlugins extends readonly any[]> = TPlu
 export interface MergePlugins<TPlugins extends readonly any[]> {
     state: MergePluginsProperty<TPlugins, 'state'>;
     instance: MergePluginsProperty<TPlugins, 'instance'>;
+    publicAPI: MergePluginsProperty<TPlugins, 'publicAPI'>;
     params: MergePluginsProperty<TPlugins, 'params'>;
     defaultizedParams: MergePluginsProperty<TPlugins, 'defaultizedParams'>;
     dependantPlugins: MergePluginsProperty<TPlugins, 'dependantPlugins'>;

package/internals/models/plugin.d.ts

@@ -7,6 +7,7 @@ import type { TreeViewCorePluginsSignature } from '../corePlugins';
 import type { TreeItemProps } from '../../TreeItem';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
+    publicAPI: TreeViewUsedPublicAPI<TSignature>;
     params: TreeViewUsedDefaultizedParams<TSignature>;
     state: TreeViewUsedState<TSignature>;
     slots: TSignature['slots'];
@@ -27,6 +28,7 @@ export type TreeViewPluginSignature<T extends {
     params?: {};
     defaultizedParams?: {};
     instance?: {};
+    publicAPI?: {};
     events?: {
         [key in keyof T['events']]: TreeViewEventLookupElement;
     };
@@ -50,6 +52,9 @@ export type TreeViewPluginSignature<T extends {
     instance: T extends {
         instance: {};
     } ? T['instance'] : {};
+    publicAPI: T extends {
+        publicAPI: {};
+    } ? T['publicAPI'] : {};
     events: T extends {
         events: {};
     } ? T['events'] : {};
@@ -86,6 +91,7 @@ export type TreeViewAnyPluginSignature = {
     slots: any;
     slotProps: any;
     models: any;
+    publicAPI: any;
 };
 type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
     TreeViewCorePluginsSignature,
@@ -99,6 +105,12 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
      */
     $$signature: TSignature;
 };
+export type TreeViewUsedPublicAPI<TSignature extends TreeViewAnyPluginSignature> = TSignature['publicAPI'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'publicAPI'> & {
+    /**
+     * Private property only defined in TypeScript to be able to access the plugin signature from the publicAPI object.
+     */
+    $$signature: TSignature;
+};
 type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;

package/internals/models/treeView.d.ts

@@ -24,3 +24,4 @@ export interface TreeViewModel<TValue> {
     setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
 }
 export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TSignatures, 'instance'>;
+export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TSignatures, 'publicAPI'>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -2,10 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
+import { getActiveElement } from '../../utils/utils';
 export const useTreeViewFocus = ({
   instance,
+  publicAPI,
   params,
   state,
   setState,
@@ -14,19 +16,45 @@ export const useTreeViewFocus = ({
 }) => {
   const setFocusedNodeId = useEventCallback(nodeId => {
     const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    setState(prevState => _extends({}, prevState, {
-      focusedNodeId: cleanNodeId
-    }));
+    if (state.focusedNodeId !== cleanNodeId) {
+      setState(prevState => _extends({}, prevState, {
+        focusedNodeId: cleanNodeId
+      }));
+    }
   });
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId, [state.focusedNodeId]);
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === getActiveElement(ownerDocument(rootRef.current)), [rootRef]);
+  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
+  const isNodeVisible = nodeId => {
+    const node = instance.getNode(nodeId);
+    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+  };
   const focusNode = useEventCallback((event, nodeId) => {
-    if (nodeId) {
+    // if we receive a nodeId, and it is visible, the focus will be set to it
+    if (nodeId && isNodeVisible(nodeId)) {
+      if (!isTreeViewFocused()) {
+        instance.focusRoot();
+      }
       setFocusedNodeId(nodeId);
       if (params.onNodeFocus) {
         params.onNodeFocus(event, nodeId);
       }
     }
   });
+  const focusDefaultNode = useEventCallback(event => {
+    let nodeToFocusId;
+    if (Array.isArray(models.selectedNodes.value)) {
+      nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
+    } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
+      nodeToFocusId = models.selectedNodes.value;
+    }
+    if (nodeToFocusId == null) {
+      nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+    }
+    setFocusedNodeId(nodeToFocusId);
+    if (params.onNodeFocus) {
+      params.onNodeFocus(event, nodeToFocusId);
+    }
+  });
   const focusRoot = useEventCallback(() => {
     var _rootRef$current;
     (_rootRef$current = rootRef.current) == null || _rootRef$current.focus({
@@ -36,7 +64,11 @@ export const useTreeViewFocus = ({
   populateInstance(instance, {
     isNodeFocused,
     focusNode,
-    focusRoot
+    focusRoot,
+    focusDefaultNode
+  });
+  populatePublicAPI(publicAPI, {
+    focusNode
   });
   useInstanceEventHandler(instance, 'removeNode', ({
     id
@@ -51,23 +83,9 @@ export const useTreeViewFocus = ({
   const createHandleFocus = otherHandlers => event => {
     var _otherHandlers$onFocu;
     (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
-
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      const isNodeVisible = nodeId => {
-        const node = instance.getNode(nodeId);
-        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
-      };
-      let nodeToFocusId;
-      if (Array.isArray(models.selectedNodes.value)) {
-        nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
-      } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
-        nodeToFocusId = models.selectedNodes.value;
-      }
-      if (nodeToFocusId == null) {
-        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
-      }
-      instance.focusNode(event, nodeToFocusId);
+      instance.focusDefaultNode(event);
     }
   };
   const createHandleBlur = otherHandlers => event => {

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -7,8 +7,11 @@ import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewFocusInstance {
     isNodeFocused: (nodeId: string) => boolean;
     focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
+    focusDefaultNode: (event: React.SyntheticEvent) => void;
     focusRoot: () => void;
 }
+export interface UseTreeViewFocusPublicAPI extends Pick<UseTreeViewFocusInstance, 'focusNode'> {
+}
 export interface UseTreeViewFocusParameters {
     /**
      * Callback fired when tree items are focused.
@@ -26,6 +29,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;
     defaultizedParams: UseTreeViewFocusDefaultizedParameters;
     instance: UseTreeViewFocusInstance;
+    publicAPI: UseTreeViewFocusPublicAPI;
     state: UseTreeViewFocusState;
     dependantPlugins: [
         UseTreeViewIdSignature,

package/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -13,22 +13,36 @@ export const useTreeViewJSXNodes = ({
 }) => {
   const insertJSXNode = useEventCallback(node => {
     setState(prevState => {
-      if (prevState.nodeMap[node.id] != null) {
+      if (prevState.nodes.nodeMap[node.id] != null) {
         throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Tow items were provided with the same id in the \`items\` prop: "${node.id}"`].join('\n'));
       }
       return _extends({}, prevState, {
-        nodeMap: _extends({}, prevState.nodeMap, {
-          [node.id]: node
+        nodes: _extends({}, prevState.nodes, {
+          nodeMap: _extends({}, prevState.nodes.nodeMap, {
+            [node.id]: node
+          }),
+          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          itemMap: _extends({}, prevState.nodes.itemMap, {
+            [node.id]: {
+              id: node.id,
+              label: node.label
+            }
+          })
         })
       });
     });
   });
   const removeJSXNode = useEventCallback(nodeId => {
     setState(prevState => {
-      const newMap = _extends({}, prevState.nodeMap);
-      delete newMap[nodeId];
+      const newNodeMap = _extends({}, prevState.nodes.nodeMap);
+      const newItemMap = _extends({}, prevState.nodes.itemMap);
+      delete newNodeMap[nodeId];
+      delete newItemMap[nodeId];
       return _extends({}, prevState, {
-        nodeMap: newMap
+        nodes: _extends({}, prevState.nodes, {
+          nodeMap: newNodeMap,
+          itemMap: newItemMap
+        })
       });
     });
     publishTreeViewEvent(instance, 'removeNode', {