@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/internals/models/plugin.d.ts

@@ -6,15 +6,15 @@ import { TreeViewEventLookupElement } from './events';
 import type { TreeViewCorePluginSignatures } from '../corePlugins';
 import { TreeViewItemPlugin } from './itemPlugin';
 import { TreeViewItemId } from '../../models';
+import { TreeViewStore } from '../utils/TreeViewStore';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
     params: TreeViewUsedDefaultizedParams<TSignature>;
-    state: TreeViewUsedState<TSignature>;
     slots: TSignature['slots'];
     slotProps: TSignature['slotProps'];
     experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
     models: TreeViewUsedModels<TSignature>;
-    setState: React.Dispatch<React.SetStateAction<TreeViewUsedState<TSignature>>>;
+    store: TreeViewUsedStore<TSignature>;
     rootRef: React.RefObject<HTMLUListElement>;
     plugins: TreeViewPlugin<TreeViewAnyPluginSignature>[];
 }
@@ -35,6 +35,7 @@ export type TreeViewPluginSignature<T extends {
         [key in keyof T['events']]: TreeViewEventLookupElement;
     };
     state?: {};
+    cache?: {};
     contextValue?: {};
     slots?: {
         [key in keyof T['slots']]: React.ElementType;
@@ -65,6 +66,9 @@ export type TreeViewPluginSignature<T extends {
     state: T extends {
         state: {};
     } ? T['state'] : {};
+    cache: T extends {
+        cache: {};
+    } ? T['cache'] : {};
     contextValue: T extends {
         contextValue: {};
     } ? T['contextValue'] : {};
@@ -93,6 +97,7 @@ export type TreeViewPluginSignature<T extends {
     } ? T['optionalDependencies'] : [];
 };
 export type TreeViewAnyPluginSignature = {
+    cache: any;
     state: any;
     instance: any;
     params: any;
@@ -120,8 +125,14 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
      */
     $$signature: TSignature;
 };
-type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'state'>;
-type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependencies']]>;
+export type TreeViewUsedStore<TSignature extends TreeViewAnyPluginSignature> = TreeViewStore<[
+    TSignature,
+    ...TSignature['dependencies']
+]>;
+type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[
+    TSignature,
+    ...TSignature['dependencies']
+], TSignature['optionalDependencies']>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;
 };
@@ -131,10 +142,10 @@ export type TreeItemWrapper<TSignatures extends readonly TreeViewAnyPluginSignat
     itemId: TreeViewItemId;
     children: React.ReactNode;
     instance: TreeViewInstance<TSignatures>;
+    idAttribute: string;
 }) => React.ReactNode;
-export type TreeRootWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
+export type TreeRootWrapper = (params: {
     children: React.ReactNode;
-    instance: TreeViewInstance<TSignatures>;
 }) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
@@ -143,9 +154,10 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
         experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
     }) => TSignature['defaultizedParams'];
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
+    getInitialCache?: () => TSignature['cache'];
     models?: TreeViewModelsInitializer<TSignature>;
     params: Record<keyof TSignature['params'], true>;
-    itemPlugin?: TreeViewItemPlugin<any>;
+    itemPlugin?: TreeViewItemPlugin;
     /**
      * Render function used to add React wrappers around the TreeItem.
      * @param {{ nodeId: TreeViewItemId; children: React.ReactNode; }} params The params of the item.
@@ -157,6 +169,6 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
      * @param {{ children: React.ReactNode; }} params The params of the root.
      * @returns {React.ReactNode} The wrapped root.
      */
-    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependencies']]>;
+    wrapRoot?: TreeRootWrapper;
 };
 export {};

package/internals/models/treeView.d.ts

@@ -24,3 +24,9 @@ export interface TreeViewModel<TValue> {
 export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
 export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
 export type TreeViewExperimentalFeatures<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TSignatures, ...TOptionalSignatures], 'experimentalFeatures'>;
+export type TreeViewStateCacheKey = {
+    id: number;
+};
+export type TreeViewState<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'state'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'state'>> & {
+    cacheKey: TreeViewStateCacheKey;
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,30 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
+import { createExpandedItemsMap } from "./useTreeViewExpansion.utils.js";
+import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewExpansion = ({
   instance,
+  store,
   params,
-  models
+  models,
+  experimentalFeatures
 }) => {
-  const expandedItemsMap = React.useMemo(() => {
-    const temp = new Map();
-    models.expandedItems.value.forEach(id => {
-      temp.set(id, true);
-    });
-    return temp;
-  }, [models.expandedItems.value]);
+  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
+  useEnhancedEffect(() => {
+    store.update(prevState => _extends({}, prevState, {
+      expansion: {
+        expandedItemsMap: createExpandedItemsMap(models.expandedItems.value)
+      }
+    }));
+  }, [store, models.expandedItems.value]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = useEventCallback((event, itemId) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
     instance.setItemExpansion(event, itemId, !isExpandedBefore);
   });
   const setItemExpansion = useEventCallback((event, itemId, isExpanded) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = selectorIsItemExpanded(store.value, itemId);
     if (isExpandedBefore === isExpanded) {
       return;
     }
@@ -40,9 +45,12 @@ export const useTreeViewExpansion = ({
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    if (itemMeta == null) {
+      return;
+    }
+    const siblings = selectorItemOrderedChildrenIds(store.value, itemMeta.parentId);
+    const diff = siblings.filter(child => selectorIsItemExpandable(store.value, child) && !selectorIsItemExpanded(store.value, child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
@@ -57,27 +65,26 @@ export const useTreeViewExpansion = ({
     if (params.expansionTrigger) {
       return params.expansionTrigger;
     }
-    if (instance.isTreeViewEditable) {
+    if (isTreeViewEditable) {
       return 'iconContainer';
     }
     return 'content';
-  }, [params.expansionTrigger, instance.isTreeViewEditable]);
+  }, [params.expansionTrigger, isTreeViewEditable]);
+  const pluginContextValue = React.useMemo(() => ({
+    expansion: {
+      expansionTrigger
+    }
+  }), [expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
     },
     instance: {
-      isItemExpanded,
-      isItemExpandable,
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
     },
-    contextValue: {
-      expansion: {
-        expansionTrigger
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 useTreeViewExpansion.models = {
@@ -91,6 +98,11 @@ useTreeViewExpansion.getDefaultizedParams = ({
 }) => _extends({}, params, {
   defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
+useTreeViewExpansion.getInitialState = params => ({
+  expansion: {
+    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems)
+  }
+});
 useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts

@@ -0,0 +1,124 @@
+import { TreeViewRootSelector } from '../../utils/selectors';
+import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+export declare const selectorIsItemExpanded: ((state: any, itemId: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+    }, resultFuncArgs_1: string) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+    }, resultFuncArgs_1: string) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is expandable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expandable, `false` otherwise.
+ */
+export declare const selectorIsItemExpandable: ((state: any, itemId: string | null) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: import("../..").TreeViewItemMeta | null) => boolean;
+    memoizedResultFunc: ((resultFuncArgs_0: import("../..").TreeViewItemMeta | null) => boolean) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean;
+    dependencies: [((state: any, itemId: string | null) => import("../..").TreeViewItemMeta | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null;
+        memoizedResultFunc: ((resultFuncArgs_0: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => import("../..").TreeViewItemMeta | null;
+        dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("../useTreeViewItems").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+            cacheKey: import("../../models").TreeViewStateCacheKey;
+        }) => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        } & {
+            resultFunc: (resultFuncArgs_0: {
+                disabledItemsFocusable: boolean;
+                itemModelLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemModelLookup<import("../../..").TreeViewDefaultItemModelProperties>;
+                itemMetaLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+                itemOrderedChildrenIdsLookup: {
+                    [parentItemId: string]: string[];
+                };
+                itemChildrenIndexesLookup: {
+                    [parentItemId: string]: {
+                        [itemId: string]: number;
+                    };
+                };
+            }) => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+            memoizedResultFunc: ((resultFuncArgs_0: {
+                disabledItemsFocusable: boolean;
+                itemModelLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemModelLookup<import("../../..").TreeViewDefaultItemModelProperties>;
+                itemMetaLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+                itemOrderedChildrenIdsLookup: {
+                    [parentItemId: string]: string[];
+                };
+                itemChildrenIndexesLookup: {
+                    [parentItemId: string]: {
+                        [itemId: string]: number;
+                    };
+                };
+            }) => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup) & {
+                clearCache: () => void;
+                resultsCount: () => number;
+                resetResultsCount: () => void;
+            };
+            lastResult: () => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+            dependencies: [TreeViewRootSelector<import("../useTreeViewItems").UseTreeViewItemsSignature>];
+            recomputations: () => number;
+            resetRecomputations: () => void;
+            dependencyRecomputations: () => number;
+            resetDependencyRecomputations: () => void;
+        } & {
+            argsMemoize: typeof import("reselect").weakMapMemoize;
+            memoize: typeof import("reselect").weakMapMemoize;
+        }, (_: any, itemId: string | null) => string | null];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -0,0 +1,17 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+const selectorExpansion = state => state.expansion;
+
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+export const selectorIsItemExpanded = createSelector([selectorExpansion, (_, itemId) => itemId], (expansionState, itemId) => expansionState.expandedItemsMap.has(itemId));
+
+/**
+ * Check if an item is expandable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expandable, `false` otherwise.
+ */
+export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { TreeViewItemId } from '../../../models';
 import { UseTreeViewLabelSignature } from '../useTreeViewLabel';
@@ -13,20 +14,6 @@ export interface UseTreeViewExpansionPublicAPI {
     setItemExpansion: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
 }
 export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
-    /**
-     * Check if an item is expanded.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item is expanded, `false` otherwise.
-     */
-    isItemExpanded: (itemId: TreeViewItemId) => boolean;
-    /**
-     * Check if an item is expandable.
-     * Currently, an item is expandable if it has children.
-     * In the future, the user should be able to flag an item as expandable even if it has no loaded children to support children lazy loading.
-     * @param {TreeViewItemId} itemId The id of the item to check.
-     * @returns {boolean} `true` if the item can be expanded, `false` otherwise.
-     */
-    isItemExpandable: (itemId: TreeViewItemId) => boolean;
     /**
      * Toggle the current expansion of an item.
      * If it is expanded, it will be collapsed, and vice versa.
@@ -73,6 +60,11 @@ export interface UseTreeViewExpansionParameters {
     expansionTrigger?: 'content' | 'iconContainer';
 }
 export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
+export interface UseTreeViewExpansionState {
+    expansion: {
+        expandedItemsMap: Map<string, true>;
+    };
+}
 interface UseTreeViewExpansionContextValue {
     expansion: Pick<UseTreeViewExpansionParameters, 'expansionTrigger'>;
 }
@@ -82,6 +74,7 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     instance: UseTreeViewExpansionInstance;
     publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
+    state: UseTreeViewExpansionState;
     contextValue: UseTreeViewExpansionContextValue;
     dependencies: [UseTreeViewItemsSignature];
     optionalDependencies: [UseTreeViewLabelSignature];

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.d.ts

@@ -0,0 +1 @@
+export declare const createExpandedItemsMap: (expandedItems: string[]) => Map<string, true>;

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -0,0 +1,7 @@
+export const createExpandedItemsMap = expandedItems => {
+  const expandedItemsMap = new Map();
+  expandedItems.forEach(id => {
+    expandedItemsMap.set(id, true);
+  });
+  return expandedItemsMap;
+};

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,46 +1,56 @@
 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 { useInstanceEventHandler } from "../../hooks/useInstanceEventHandler.js";
-import { getActiveElement } from "../../utils/utils.js";
 import { getFirstNavigableItem } from "../../utils/tree.js";
 import { convertSelectedItemsToArray } from "../useTreeViewSelection/useTreeViewSelection.utils.js";
-const useDefaultFocusableItemId = (instance, selectedItems) => {
-  let tabbableItemId = convertSelectedItemsToArray(selectedItems).find(itemId => {
-    if (!instance.isItemNavigable(itemId)) {
-      return false;
-    }
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
-  });
-  if (tabbableItemId == null) {
-    tabbableItemId = getFirstNavigableItem(instance);
-  }
-  return tabbableItemId;
-};
+import { selectorDefaultFocusableItemId, selectorFocusedItemId } from "./useTreeViewFocus.selectors.js";
+import { selectorIsItemExpanded } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorCanItemBeFocused, selectorItemMeta } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewFocus = ({
   instance,
   params,
-  state,
-  setState,
-  models,
-  rootRef
+  store,
+  models
 }) => {
-  const defaultFocusableItemId = useDefaultFocusableItemId(instance, models.selectedItems.value);
-  const setFocusedItemId = useEventCallback(itemId => {
-    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
-    if (state.focusedItemId !== cleanItemId) {
-      setState(prevState => _extends({}, prevState, {
-        focusedItemId: cleanItemId
-      }));
+  React.useEffect(() => {
+    let defaultFocusableItemId = convertSelectedItemsToArray(models.selectedItems.value).find(itemId => {
+      if (!selectorCanItemBeFocused(store.value, itemId)) {
+        return false;
+      }
+      const itemMeta = selectorItemMeta(store.value, itemId);
+      return itemMeta && (itemMeta.parentId == null || selectorIsItemExpanded(store.value, itemMeta.parentId));
+    });
+    if (defaultFocusableItemId == null) {
+      defaultFocusableItemId = getFirstNavigableItem(store.value) ?? null;
     }
+    store.update(prevState => {
+      if (defaultFocusableItemId === prevState.focus.defaultFocusableItemId) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        focus: _extends({}, prevState.focus, {
+          defaultFocusableItemId
+        })
+      });
+    });
+  }, [store, models.selectedItems.value]);
+  const setFocusedItemId = useEventCallback(itemId => {
+    store.update(prevState => {
+      const focusedItemId = selectorFocusedItemId(prevState);
+      if (focusedItemId === itemId) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        focus: _extends({}, prevState.focus, {
+          focusedItemId: itemId
+        })
+      });
+    });
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains(getActiveElement(ownerDocument(rootRef.current))), [rootRef]);
-  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
   const isItemVisible = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
+    const itemMeta = selectorItemMeta(store.value, itemId);
+    return itemMeta && (itemMeta.parentId == null || selectorIsItemExpanded(store.value, itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const itemElement = instance.getItemDOMElement(itemId);
@@ -59,23 +69,25 @@ export const useTreeViewFocus = ({
     }
   });
   const removeFocusedItem = useEventCallback(() => {
-    if (state.focusedItemId == null) {
+    const focusedItemId = selectorFocusedItemId(store.value);
+    if (focusedItemId == null) {
       return;
     }
-    const itemMeta = instance.getItemMeta(state.focusedItemId);
+    const itemMeta = selectorItemMeta(store.value, focusedItemId);
     if (itemMeta) {
-      const itemElement = instance.getItemDOMElement(state.focusedItemId);
+      const itemElement = instance.getItemDOMElement(focusedItemId);
       if (itemElement) {
         itemElement.blur();
       }
     }
     setFocusedItemId(null);
   });
-  const canItemBeTabbed = itemId => itemId === defaultFocusableItemId;
   useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
-    if (state.focusedItemId === id) {
+    const focusedItemId = selectorFocusedItemId(store.value);
+    const defaultFocusableItemId = selectorDefaultFocusableItemId(store.value);
+    if (focusedItemId === id && defaultFocusableItemId != null) {
       innerFocusItem(null, defaultFocusableItemId);
     }
   });
@@ -86,27 +98,37 @@ export const useTreeViewFocus = ({
     }
 
     // if the event bubbled (which is React specific) we don't want to steal focus
-    if (event.target === event.currentTarget) {
+    const defaultFocusableItemId = selectorDefaultFocusableItemId(store.value);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
       innerFocusItem(event, defaultFocusableItemId);
     }
   };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    setFocusedItemId(null);
+  };
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createRootHandleFocus(otherHandlers)
+      onFocus: createRootHandleFocus(otherHandlers),
+      onBlur: createRootHandleBlur(otherHandlers)
     }),
     publicAPI: {
       focusItem
     },
     instance: {
-      isItemFocused,
-      canItemBeTabbed,
       focusItem,
       removeFocusedItem
     }
   };
 };
 useTreeViewFocus.getInitialState = () => ({
-  focusedItemId: null
+  focus: {
+    focusedItemId: null,
+    defaultFocusableItemId: null
+  }
 });
 useTreeViewFocus.params = {
   onItemFocus: true