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

package/modern/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', {

package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-const updateState = ({
+const updateNodesState = ({
   items,
   isItemDisabled,
   getItemLabel,
   getItemId
 }) => {
   const nodeMap = {};
+  const itemMap = {};
   const processItem = (item, index, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
@@ -27,10 +28,11 @@ const updateState = ({
       label,
       index,
       parentId,
-      idAttribute: id,
+      idAttribute: undefined,
       expandable: !!item.children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false
     };
+    itemMap[id] = item;
     return {
       id,
       children: item.children?.map((child, childIndex) => processItem(child, childIndex, id))
@@ -39,16 +41,19 @@ const updateState = ({
   const nodeTree = items.map((item, itemIndex) => processItem(item, itemIndex, null));
   return {
     nodeMap,
-    nodeTree
+    nodeTree,
+    itemMap
   };
 };
 export const useTreeViewNodes = ({
   instance,
+  publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(nodeId => state.nodeMap[nodeId], [state.nodeMap]);
+  const getNode = React.useCallback(nodeId => state.nodes.nodeMap[nodeId], [state.nodes.nodeMap]);
+  const getItem = React.useCallback(nodeId => state.nodes.itemMap[nodeId], [state.nodes.itemMap]);
   const isNodeDisabled = React.useCallback(nodeId => {
     if (nodeId == null) {
       return false;
@@ -70,7 +75,7 @@ export const useTreeViewNodes = ({
     }
     return false;
   }, [instance]);
-  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
+  const getChildrenIds = useEventCallback(nodeId => Object.values(state.nodes.nodeMap).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
   const getNavigableChildrenIds = nodeId => {
     let childrenIds = instance.getChildrenIds(nodeId);
     if (!params.disabledItemsFocusable) {
@@ -80,20 +85,22 @@ export const useTreeViewNodes = ({
   };
   React.useEffect(() => {
     setState(prevState => {
-      const newState = updateState({
+      const newState = updateNodesState({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.nodeMap).forEach(node => {
+      Object.values(prevState.nodes.nodeMap).forEach(node => {
         if (!newState.nodeMap[node.id]) {
           publishTreeViewEvent(instance, 'removeNode', {
             id: node.id
           });
         }
       });
-      return _extends({}, prevState, newState);
+      return _extends({}, prevState, {
+        nodes: newState
+      });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
   const getNodesToRender = useEventCallback(() => {
@@ -101,7 +108,7 @@ export const useTreeViewNodes = ({
       id,
       children
     }) => {
-      const node = state.nodeMap[id];
+      const node = state.nodes.nodeMap[id];
       return {
         label: node.label,
         nodeId: node.id,
@@ -109,26 +116,32 @@ export const useTreeViewNodes = ({
         children: children?.map(getPropsFromNodeId)
       };
     };
-    return state.nodeTree.map(getPropsFromNodeId);
+    return state.nodes.nodeTree.map(getPropsFromNodeId);
   });
   populateInstance(instance, {
     getNode,
+    getItem,
     getNodesToRender,
     getChildrenIds,
     getNavigableChildrenIds,
     isNodeDisabled
   });
+  populatePublicAPI(publicAPI, {
+    getItem
+  });
   return {
     contextValue: {
       disabledItemsFocusable: params.disabledItemsFocusable
     }
   };
 };
-useTreeViewNodes.getInitialState = params => updateState({
-  items: params.items,
-  isItemDisabled: params.isItemDisabled,
-  getItemId: params.getItemId,
-  getItemLabel: params.getItemLabel
+useTreeViewNodes.getInitialState = params => ({
+  nodes: updateNodesState({
+    items: params.items,
+    isItemDisabled: params.isItemDisabled,
+    getItemId: params.getItemId,
+    getItemLabel: params.getItemLabel
+  })
 });
 useTreeViewNodes.getDefaultizedParams = params => _extends({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false

package/modern/internals/useTreeView/useTreeView.js

@@ -3,6 +3,16 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewModels } from './useTreeViewModels';
 import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
+export function useTreeViewApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
 export const useTreeView = inParams => {
   const plugins = [...TREE_VIEW_CORE_PLUGINS, ...inParams.plugins];
   const params = plugins.reduce((acc, plugin) => {
@@ -14,6 +24,7 @@ export const useTreeView = inParams => {
   const models = useTreeViewModels(plugins, params);
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
+  const publicAPI = useTreeViewApiInitialization(inParams.apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = useForkRef(innerRootRef, inParams.rootRef);
   const [state, setState] = React.useState(() => {
@@ -32,6 +43,7 @@ export const useTreeView = inParams => {
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
+      publicAPI,
       params,
       slots: params.slots,
       slotProps: params.slotProps,

package/modern/internals/useTreeView/useTreeView.utils.js

@@ -40,4 +40,7 @@ export const getLastNode = instance => {
 export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
 export const populateInstance = (instance, methods) => {
   Object.assign(instance, methods);
+};
+export const populatePublicAPI = (publicAPI, methods) => {
+  Object.assign(publicAPI, methods);
 };

package/modern/internals/utils/extractPluginParamsFromProps.js

@@ -1,10 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "apiRef"];
 export const extractPluginParamsFromProps = _ref => {
   let {
       props: {
         slots,
-        slotProps
+        slotProps,
+        apiRef
       },
       plugins,
       rootRef
@@ -18,7 +19,8 @@ export const extractPluginParamsFromProps = _ref => {
     plugins,
     rootRef,
     slots: slots ?? {},
-    slotProps: slotProps ?? {}
+    slotProps: slotProps ?? {},
+    apiRef
   };
   const otherProps = {};
   Object.keys(props).forEach(propName => {

package/modern/internals/utils/utils.js

@@ -0,0 +1,10 @@
+export const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  return activeEl;
+};

package/node/RichTreeView/RichTreeView.js

@@ -141,6 +141,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.default.shape({
+    current: _propTypes.default.shape({
+      focusNode: _propTypes.default.func.isRequired,
+      getItem: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * Override or extend the styles applied to the component.
    */

package/node/SimpleTreeView/SimpleTreeView.js

@@ -99,6 +99,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.default.shape({
+    current: _propTypes.default.shape({
+      focusNode: _propTypes.default.func.isRequired,
+      getItem: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * The content of the component.
    */

package/node/TreeItem/TreeItem.js

@@ -21,7 +21,7 @@ var _treeItemClasses = require("./treeItemClasses");
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
     label: ['label'],
-    group: ['group']
+    groupTransition: ['groupTransition']
   };
   return (0, _base.unstable_composeClasses)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
 };
@@ -124,8 +124,8 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
 }));
 const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
   name: 'MuiTreeItem',
-  slot: 'Group',
-  overridesResolver: (props, styles) => styles.group
+  slot: 'GroupTransition',
+  overridesResolver: (props, styles) => styles.groupTransition
 })({
   margin: 0,
   padding: 0,
@@ -175,16 +175,15 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       id,
       label,
       onClick,
-      onMouseDown,
-      TransitionComponent = _Collapse.default,
-      TransitionProps
+      onMouseDown
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const slots = {
     expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? _icons.TreeViewExpandIcon,
     collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? _icons.TreeViewCollapseIcon,
     endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
-    icon: inSlots?.icon
+    icon: inSlots?.icon,
+    groupTransition: inSlots?.groupTransition
   };
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
@@ -204,6 +203,19 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     disabled
   });
   const classes = useUtilityClasses(ownerState);
+  const GroupTransition = slots.groupTransition ?? undefined;
+  const groupTransitionProps = (0, _utils.useSlotProps)({
+    elementType: GroupTransition,
+    ownerState: {},
+    externalSlotProps: inSlotProps?.groupTransition,
+    additionalProps: {
+      unmountOnExit: true,
+      in: expanded,
+      component: 'ul',
+      role: 'group'
+    },
+    className: classes.groupTransition
+  });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
   const _useSlotProps = (0, _utils.useSlotProps)({
       elementType: ExpansionIcon,
@@ -293,13 +305,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       displayIcon: displayIcon,
       ownerState: ownerState
     }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
-      as: TransitionComponent,
-      unmountOnExit: true,
-      className: classes.group,
-      in: expanded,
-      component: "ul",
-      role: "group"
-    }, TransitionProps, {
+      as: GroupTransition
+    }, groupTransitionProps, {
       children: children
     }))]
   }));
@@ -359,16 +366,5 @@ TreeItem.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.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.default.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.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 };

package/node/TreeItem/treeItemClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getTreeItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
 }
-const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
+const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/node/TreeView/TreeView.js

@@ -73,6 +73,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.default.shape({
+    current: _propTypes.default.shape({
+      focusNode: _propTypes.default.func.isRequired,
+      getItem: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * The content of the component.
    */

package/node/hooks/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeViewApiRef", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewApiRef.useTreeViewApiRef;
+  }
+});
+var _useTreeViewApiRef = require("./useTreeViewApiRef");

package/node/hooks/useTreeViewApiRef.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewApiRef = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+const useTreeViewApiRef = () => React.useRef(undefined);
+exports.useTreeViewApiRef = useTreeViewApiRef;

package/node/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
@@ -91,4 +91,16 @@ Object.keys(_icons).forEach(function (key) {
       return _icons[key];
     }
   });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
 });

package/node/internals/hooks/useTimeout.js

@@ -1,18 +1,20 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Timeout = void 0;
 exports.useTimeout = useTimeout;
 var _useLazyRef = require("./useLazyRef");
 var _useOnMount = require("./useOnMount");
 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 = () => {
@@ -22,11 +24,18 @@ 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);
   }
 }
+exports.Timeout = Timeout;
 function useTimeout() {
   const timeout = (0, _useLazyRef.useLazyRef)(Timeout.create).current;
   (0, _useOnMount.useOnMount)(timeout.disposeEffect);

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -11,10 +11,12 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useTreeView = require("../../useTreeView/useTreeView.utils");
 var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
+var _utils = require("../../utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useTreeViewFocus = ({
   instance,
+  publicAPI,
   params,
   state,
   setState,
@@ -23,19 +25,45 @@ const useTreeViewFocus = ({
 }) => {
   const setFocusedNodeId = (0, _useEventCallback.default)(nodeId => {
     const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    setState(prevState => (0, _extends2.default)({}, prevState, {
-      focusedNodeId: cleanNodeId
-    }));
+    if (state.focusedNodeId !== cleanNodeId) {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        focusedNodeId: cleanNodeId
+      }));
+    }
   });
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId, [state.focusedNodeId]);
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === (0, _utils.getActiveElement)((0, _ownerDocument.default)(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 = (0, _useEventCallback.default)((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 = (0, _useEventCallback.default)(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 = (0, _useEventCallback.default)(() => {
     rootRef.current?.focus({
       preventScroll: true
@@ -44,7 +72,11 @@ const useTreeViewFocus = ({
   (0, _useTreeView.populateInstance)(instance, {
     isNodeFocused,
     focusNode,
-    focusRoot
+    focusRoot,
+    focusDefaultNode
+  });
+  (0, _useTreeView.populatePublicAPI)(publicAPI, {
+    focusNode
   });
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeNode', ({
     id
@@ -58,23 +90,9 @@ const useTreeViewFocus = ({
   });
   const createHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(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/node/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -22,22 +22,36 @@ const useTreeViewJSXNodes = ({
 }) => {
   const insertJSXNode = (0, _useEventCallback.default)(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 (0, _extends2.default)({}, prevState, {
-        nodeMap: (0, _extends2.default)({}, prevState.nodeMap, {
-          [node.id]: node
+        nodes: (0, _extends2.default)({}, prevState.nodes, {
+          nodeMap: (0, _extends2.default)({}, prevState.nodes.nodeMap, {
+            [node.id]: node
+          }),
+          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          itemMap: (0, _extends2.default)({}, prevState.nodes.itemMap, {
+            [node.id]: {
+              id: node.id,
+              label: node.label
+            }
+          })
         })
       });
     });
   });
   const removeJSXNode = (0, _useEventCallback.default)(nodeId => {
     setState(prevState => {
-      const newMap = (0, _extends2.default)({}, prevState.nodeMap);
-      delete newMap[nodeId];
+      const newNodeMap = (0, _extends2.default)({}, prevState.nodes.nodeMap);
+      const newItemMap = (0, _extends2.default)({}, prevState.nodes.itemMap);
+      delete newNodeMap[nodeId];
+      delete newItemMap[nodeId];
       return (0, _extends2.default)({}, prevState, {
-        nodeMap: newMap
+        nodes: (0, _extends2.default)({}, prevState.nodes, {
+          nodeMap: newNodeMap,
+          itemMap: newItemMap
+        })
       });
     });
     (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeNode', {