@mui/x-tree-view 7.0.0-beta.3 → 7.0.0-beta.5

package/internals/TreeViewProvider/DescendantProvider.js

@@ -8,17 +8,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 /** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
  *  Modified slightly to suit our purposes.
  */
-
-// To replace with .findIndex() once we stop IE11 support.
 import { jsx as _jsx } from "react/jsx-runtime";
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-  return -1;
-}
 function binaryFindElement(array, element) {
   let start = 0;
   let end = array.length - 1;
@@ -84,7 +74,7 @@ export function useDescendant(descendant) {
   // index on the following render, and we will re-register descendants
   // so that everything is up-to-date before the user interacts with a
   // collection.
-  const index = findIndex(descendants, item => item.element === descendant.element);
+  const index = descendants.findIndex(item => item.element === descendant.element);
   const previousDescendants = usePrevious(descendants);
 
   // We also need to re-register descendants any time ANY of the other

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

@@ -7,6 +7,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,12 @@ 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 {
+    focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
+}
 export interface UseTreeViewFocusParameters {
     /**
      * Callback fired when tree items are focused.
@@ -26,6 +30,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
     params: UseTreeViewFocusParameters;
     defaultizedParams: UseTreeViewFocusDefaultizedParameters;
     instance: UseTreeViewFocusInstance;
+    publicAPI: UseTreeViewFocusPublicAPI;
     state: UseTreeViewFocusState;
     dependantPlugins: [
         UseTreeViewIdSignature,

package/internals/useTreeView/useTreeView.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
 import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures } from '../models';
 import { UseTreeViewParameters, UseTreeViewReturnValue } from './useTreeView.types';
+export declare function useTreeViewApiInitialization<T>(inputApiRef: React.MutableRefObject<T> | undefined): T;
 export declare const useTreeView: <Plugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]>(inParams: UseTreeViewParameters<Plugins>) => UseTreeViewReturnValue<ConvertPluginsIntoSignatures<Plugins>>;

package/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/internals/useTreeView/useTreeView.types.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/base/utils';
 import type { TreeViewContextValue } from '../TreeViewProvider';
-import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewInstance } from '../models';
+import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewInstance, TreeViewPublicAPI } from '../models';
 export type UseTreeViewParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'params'>;
 export interface UseTreeViewBaseParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> {
+    apiRef: React.MutableRefObject<TreeViewPublicAPI<ConvertPluginsIntoSignatures<TPlugins>>> | undefined;
     rootRef?: React.Ref<HTMLUListElement> | undefined;
     plugins: TPlugins;
     slots: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'slots'>;

package/internals/useTreeView/useTreeView.utils.d.ts

@@ -1,4 +1,4 @@
-import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewUsedInstance } from '../models';
+import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewUsedInstance, TreeViewUsedPublicAPI } from '../models';
 import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
 import type { UseTreeViewNodesSignature } from '../plugins/useTreeViewNodes';
 export declare const getPreviousNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, nodeId: string) => string | null;
@@ -6,3 +6,4 @@ export declare const getNextNode: (instance: TreeViewInstance<[UseTreeViewExpans
 export declare const getLastNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>) => string;
 export declare const getFirstNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) => string;
 export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;
+export declare const populatePublicAPI: <T extends TreeViewAnyPluginSignature>(publicAPI: TreeViewUsedPublicAPI<T>, methods: T["publicAPI"]) => void;

package/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/internals/utils/extractPluginParamsFromProps.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewPlugin } from '../models';
+import { ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewPlugin, TreeViewPublicAPI } from '../models';
 import { UseTreeViewBaseParameters } from '../useTreeView/useTreeView.types';
 export declare const extractPluginParamsFromProps: <TPlugins extends readonly TreeViewPlugin<any>[], TSlots extends MergePluginsProperty<TPlugins, "slots">, TSlotProps extends MergePluginsProperty<TPlugins, "slotProps">, TProps extends {
     slots?: TSlots | undefined;
     slotProps?: TSlotProps | undefined;
-}>({ props: { slots, slotProps, ...props }, plugins, rootRef, }: {
+    apiRef?: React.MutableRefObject<TreeViewPublicAPI<ConvertPluginsIntoSignatures<TPlugins>> | undefined> | undefined;
+}>({ props: { slots, slotProps, apiRef, ...props }, plugins, rootRef, }: {
     props: TProps;
     plugins: TPlugins;
     rootRef?: React.Ref<HTMLUListElement> | undefined;

package/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 != null ? slots : {},
-    slotProps: slotProps != null ? slotProps : {}
+    slotProps: slotProps != null ? slotProps : {},
+    apiRef
   };
   const otherProps = {};
   Object.keys(props).forEach(propName => {

package/internals/utils/utils.d.ts

@@ -0,0 +1 @@
+export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;

package/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/modern/RichTreeView/RichTreeView.js

@@ -132,6 +132,14 @@ 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
+    })
+  }),
   /**
    * Override or extend the styles applied to the component.
    */

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -90,6 +90,14 @@ 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
+    })
+  }),
   /**
    * The content of the component.
    */

package/modern/TreeItem/TreeItem.js

@@ -360,7 +360,7 @@ TreeItem.propTypes = {
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps: PropTypes.object
 };

package/modern/TreeView/TreeView.js

@@ -64,6 +64,14 @@ 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
+    })
+  }),
   /**
    * The content of the component.
    */

package/modern/hooks/index.js

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

package/modern/hooks/useTreeViewApiRef.js

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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.0.0-beta.3
+ * @mui/x-tree-view v7.0.0-beta.5
  *
  * @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/modern/internals/TreeViewProvider/DescendantProvider.js

@@ -8,17 +8,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 /** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
  *  Modified slightly to suit our purposes.
  */
-
-// To replace with .findIndex() once we stop IE11 support.
 import { jsx as _jsx } from "react/jsx-runtime";
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-  return -1;
-}
 function binaryFindElement(array, element) {
   let start = 0;
   let end = array.length - 1;
@@ -84,7 +74,7 @@ export function useDescendant(descendant) {
   // index on the following render, and we will re-register descendants
   // so that everything is up-to-date before the user interacts with a
   // collection.
-  const index = findIndex(descendants, item => item.element === descendant.element);
+  const index = descendants.findIndex(item => item.element === descendant.element);
   const previousDescendants = usePrevious(descendants);
 
   // We also need to re-register descendants any time ANY of the other

package/modern/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/modern/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(() => {
     rootRef.current?.focus({
       preventScroll: true
@@ -35,7 +63,11 @@ export const useTreeViewFocus = ({
   populateInstance(instance, {
     isNodeFocused,
     focusNode,
-    focusRoot
+    focusRoot,
+    focusDefaultNode
+  });
+  populatePublicAPI(publicAPI, {
+    focusNode
   });
   useInstanceEventHandler(instance, 'removeNode', ({
     id
@@ -49,23 +81,9 @@ export 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 => {