@mui/x-tree-view 8.23.0 → 8.24.0

package/internals/models/index.js

@@ -3,28 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _helpers = require("./helpers");
-Object.keys(_helpers).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _helpers[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _helpers[key];
-    }
-  });
-});
-var _plugin = require("./plugin");
-Object.keys(_plugin).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _plugin[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _plugin[key];
-    }
-  });
-});
 var _itemPlugin = require("./itemPlugin");
 Object.keys(_itemPlugin).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -46,4 +24,15 @@ Object.keys(_treeView).forEach(function (key) {
       return _treeView[key];
     }
   });
+});
+var _events = require("./events");
+Object.keys(_events).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _events[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _events[key];
+    }
+  });
 });

package/internals/models/itemPlugin.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
+import { TreeViewItemId } from "../../models/index.js";
 import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemLabelSlotOwnProps } from "../../useTreeItem/index.js";
 import type { UseTreeItemInteractions } from "../../hooks/useTreeItemUtils/useTreeItemUtils.js";
 import type { TreeItemProps } from "../../TreeItem/TreeItem.types.js";
+import { TreeViewAnyStore } from "./treeView.js";
+import { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
   rootRefObject: React.RefObject<HTMLLIElement | null>;
   contentRefObject: React.RefObject<HTMLDivElement | null>;
@@ -40,4 +43,10 @@ export interface TreeViewItemPluginOptions extends Omit<TreeViewItemPluginRespon
   props: TreeItemProps;
 }
 export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions) => void | TreeViewItemPluginResponse;
+export type TreeItemWrapper<TStore extends TreeViewAnyStore> = (params: {
+  itemId: TreeViewItemId;
+  children: React.ReactNode;
+  store: TreeViewStoreInContext<TStore>;
+  idAttribute: string;
+}) => React.ReactNode;
 export {};

package/internals/models/treeView.d.ts

@@ -1,7 +1,4 @@
-import { ReadonlyStore, Store } from '@mui/x-internals/store';
-import type { TreeViewAnyPluginSignature } from "./plugin.js";
-import type { MergeSignaturesProperty } from "./helpers.js";
-import type { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
 export interface TreeViewItemMeta {
   id: string;
   idAttribute: string | undefined;
@@ -18,8 +15,7 @@ export interface TreeViewItemMeta {
    */
   label?: string;
 }
-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 TreeViewState<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'state'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'state'>>;
-export type TreeViewStore<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = Store<TreeViewState<TSignatures, TOptionalSignatures>>;
-export type TreeViewReadonlyStore<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = ReadonlyStore<TreeViewState<TSignatures, TOptionalSignatures>>;
+export interface TreeViewAnyStore extends MinimalTreeViewStore<any, any, any, any> {
+  itemPluginManager: any;
+}
+export type TreeViewPublicAPI<TStore extends TreeViewAnyStore> = ReturnType<TStore['buildPublicAPI']>;

package/internals/plugins/expansion/TreeViewExpansionPlugin.d.ts

@@ -0,0 +1,69 @@
+import { TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewExpansionPlugin {
+  private store;
+  constructor(store: any);
+  private setExpandedItems;
+  /**
+   * 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.
+   */
+  private isItemExpanded;
+  buildPublicAPI: () => {
+    isItemExpanded: (itemId: TreeViewItemId) => boolean;
+    setItemExpansion: ({
+      itemId,
+      event,
+      shouldBeExpanded
+    }: {
+      itemId: TreeViewItemId;
+      event?: React.SyntheticEvent | null;
+      shouldBeExpanded?: boolean;
+    }) => void;
+  };
+  /**
+   * Change the expansion status of a given item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
+   */
+  setItemExpansion: ({
+    itemId,
+    event,
+    shouldBeExpanded
+  }: {
+    itemId: TreeViewItemId;
+    event?: React.SyntheticEvent | null;
+    shouldBeExpanded?: boolean;
+  }) => void;
+  /**
+   * Apply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion: ({
+    itemId,
+    event,
+    shouldBeExpanded
+  }: {
+    itemId: TreeViewItemId;
+    event: React.SyntheticEvent | null;
+    shouldBeExpanded: boolean;
+  }) => void;
+  /**
+   * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
+   */
+  expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
+  /**
+   * Mark a list of items as expandable.
+   * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
+   */
+  addExpandableItems: (items: TreeViewItemId[]) => void;
+}

package/internals/plugins/expansion/TreeViewExpansionPlugin.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewExpansionPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _selectors = require("./selectors");
+var _selectors2 = require("../items/selectors");
+class TreeViewExpansionPlugin {
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'expansion' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+  }
+  setExpandedItems = (event, value) => {
+    if (this.store.parameters.expandedItems === undefined) {
+      this.store.set('expandedItems', value);
+    }
+    this.store.parameters.onExpandedItemsChange?.(event, value);
+  };
+
+  /**
+   * 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 => _selectors.expansionSelectors.isItemExpanded(this.store.state, itemId);
+  buildPublicAPI = () => {
+    return {
+      isItemExpanded: this.isItemExpanded,
+      setItemExpansion: this.setItemExpansion
+    };
+  };
+
+  /**
+   * Change the expansion status of a given item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
+   */
+  setItemExpansion = ({
+    itemId,
+    event = null,
+    shouldBeExpanded
+  }) => {
+    const isExpandedBefore = _selectors.expansionSelectors.isItemExpanded(this.store.state, itemId);
+    const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
+    if (isExpandedBefore === cleanShouldBeExpanded) {
+      return;
+    }
+    const eventParameters = {
+      isExpansionPrevented: false,
+      shouldBeExpanded: cleanShouldBeExpanded,
+      itemId
+    };
+    this.store.publishEvent('beforeItemToggleExpansion', eventParameters, event);
+    if (eventParameters.isExpansionPrevented) {
+      return;
+    }
+    this.applyItemExpansion({
+      itemId,
+      event,
+      shouldBeExpanded: cleanShouldBeExpanded
+    });
+  };
+
+  /**
+   * Apply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion = ({
+    itemId,
+    event,
+    shouldBeExpanded
+  }) => {
+    const oldExpanded = _selectors.expansionSelectors.expandedItemsRaw(this.store.state);
+    let newExpanded;
+    if (shouldBeExpanded) {
+      newExpanded = [itemId].concat(oldExpanded);
+    } else {
+      newExpanded = oldExpanded.filter(id => id !== itemId);
+    }
+    this.store.parameters.onItemExpansionToggle?.(event, itemId, shouldBeExpanded);
+    this.setExpandedItems(event, newExpanded);
+  };
+
+  /**
+   * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
+   */
+  expandAllSiblings = (event, itemId) => {
+    const itemMeta = _selectors2.itemsSelectors.itemMeta(this.store.state, itemId);
+    if (itemMeta == null) {
+      return;
+    }
+    const siblings = _selectors2.itemsSelectors.itemOrderedChildrenIds(this.store.state, itemMeta.parentId);
+    const diff = siblings.filter(child => _selectors.expansionSelectors.isItemExpandable(this.store.state, child) && !_selectors.expansionSelectors.isItemExpanded(this.store.state, child));
+    const newExpanded = _selectors.expansionSelectors.expandedItemsRaw(this.store.state).concat(diff);
+    if (diff.length > 0) {
+      if (this.store.parameters.onItemExpansionToggle) {
+        diff.forEach(newlyExpandedItemId => {
+          this.store.parameters.onItemExpansionToggle(event, newlyExpandedItemId, true);
+        });
+      }
+      this.setExpandedItems(event, newExpanded);
+    }
+  };
+
+  /**
+   * Mark a list of items as expandable.
+   * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
+   */
+  addExpandableItems = items => {
+    const newItemMetaLookup = (0, _extends2.default)({}, this.store.state.itemMetaLookup);
+    for (const itemId of items) {
+      newItemMetaLookup[itemId] = (0, _extends2.default)({}, newItemMetaLookup[itemId], {
+        expandable: true
+      });
+    }
+    this.store.set('itemMetaLookup', newItemMetaLookup);
+  };
+}
+exports.TreeViewExpansionPlugin = TreeViewExpansionPlugin;

package/internals/plugins/expansion/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeViewExpansionPlugin.js";
+export * from "./selectors.js";

package/internals/plugins/expansion/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewExpansionPlugin = require("./TreeViewExpansionPlugin");
+Object.keys(_TreeViewExpansionPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewExpansionPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewExpansionPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

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

@@ -0,0 +1,27 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const expansionSelectors: {
+  /**
+   * Gets the expanded items as provided to the component.
+   */
+  expandedItemsRaw: (state: MinimalTreeViewState<any, any>) => readonly string[];
+  /**
+   * Gets the expanded items as a Map.
+   */
+  expandedItemsMap: (args_0: MinimalTreeViewState<any, any>) => Map<string, true>;
+  /**
+   * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
+   */
+  flatList: (args_0: MinimalTreeViewState<any, any>) => string[];
+  /**
+   * Gets the slot that triggers the item's expansion when clicked.
+   */
+  triggerSlot: (state: MinimalTreeViewState<any, any>) => "content" | "iconContainer";
+  /**
+   * Checks whether an item is expanded.
+   */
+  isItemExpanded: (args_0: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * Checks whether an item is expandable.
+   */
+  isItemExpandable: (args_0: MinimalTreeViewState<any, any>, _itemId: string) => boolean;
+};

package/internals/plugins/{useTreeViewExpansion/useTreeViewExpansion.selectors.js → expansion/selectors.js}

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.expansionSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewItems2 = require("../useTreeViewItems");
-const expandedItemMapSelector = (0, _store.createSelectorMemoized)(state => state.expansion.expandedItems, expandedItems => {
+var _selectors = require("../items/selectors");
+var _items = require("../items");
+const expandedItemMapSelector = (0, _store.createSelectorMemoized)(state => state.expandedItems, expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
     expandedItemsMap.set(id, true);
@@ -18,7 +18,7 @@ const expansionSelectors = exports.expansionSelectors = {
   /**
    * Gets the expanded items as provided to the component.
    */
-  expandedItemsRaw: (0, _store.createSelector)(state => state.expansion.expandedItems),
+  expandedItemsRaw: (0, _store.createSelector)(state => state.expandedItems),
   /**
    * Gets the expanded items as a Map.
    */
@@ -26,7 +26,7 @@ const expansionSelectors = exports.expansionSelectors = {
   /**
    * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
    */
-  flatList: (0, _store.createSelectorMemoized)(_useTreeViewItems.itemsSelectors.itemOrderedChildrenIdsLookup, expandedItemMapSelector, (itemOrderedChildrenIds, expandedItemsMap) => {
+  flatList: (0, _store.createSelectorMemoized)(_selectors.itemsSelectors.itemOrderedChildrenIdsLookup, expandedItemMapSelector, (itemOrderedChildrenIds, expandedItemsMap) => {
     function appendChildren(itemId) {
       if (!expandedItemsMap.has(itemId)) {
         return [itemId];
@@ -38,12 +38,12 @@ const expansionSelectors = exports.expansionSelectors = {
       }
       return itemsWithDescendants;
     }
-    return (itemOrderedChildrenIds[_useTreeViewItems2.TREE_VIEW_ROOT_PARENT_ID] ?? []).flatMap(appendChildren);
+    return (itemOrderedChildrenIds[_items.TREE_VIEW_ROOT_PARENT_ID] ?? []).flatMap(appendChildren);
   }),
   /**
    * Gets the slot that triggers the item's expansion when clicked.
    */
-  triggerSlot: (0, _store.createSelector)(state => state.expansion.expansionTrigger),
+  triggerSlot: (0, _store.createSelector)(state => state.expansionTrigger),
   /**
    * Checks whether an item is expanded.
    */
@@ -51,5 +51,5 @@ const expansionSelectors = exports.expansionSelectors = {
   /**
    * Checks whether an item is expandable.
    */
-  isItemExpandable: (0, _store.createSelector)(_useTreeViewItems.itemsSelectors.itemMeta, (itemMeta, _itemId) => itemMeta?.expandable ?? false)
+  isItemExpandable: (0, _store.createSelector)(_selectors.itemsSelectors.itemMeta, (itemMeta, _itemId) => itemMeta?.expandable ?? false)
 };

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

@@ -0,0 +1,5 @@
+import { RichTreeViewStoreParameters } from "../../RichTreeViewStore/index.js";
+export declare const getExpansionTrigger: ({
+  isItemEditable,
+  expansionTrigger
+}: Pick<RichTreeViewStoreParameters<any, any>, "isItemEditable" | "expansionTrigger">) => "content" | "iconContainer";

package/internals/plugins/focus/TreeViewFocusPlugin.d.ts

@@ -0,0 +1,33 @@
+import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewFocusPlugin {
+  private store;
+  constructor(store: any);
+  private setFocusedItemId;
+  private applyItemFocus;
+  buildPublicAPI: () => {
+    focusItem: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+  };
+  /**
+   * Focus the item with the given id.
+   *
+   * If the item is the child of a collapsed item, then this method will do nothing.
+   * Make sure to expand the ancestors of the item before calling this method if needed.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to focus.
+   */
+  focusItem: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+  /**
+   * Remove the focus from the currently focused item (both from the internal state and the DOM).
+   */
+  removeFocusedItem: () => void;
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is focused.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootFocus: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is blurred.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootBlur: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
+}

package/internals/plugins/focus/TreeViewFocusPlugin.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewFocusPlugin = void 0;
+var _expansion = require("../expansion");
+var _selectors = require("./selectors");
+var _items = require("../items");
+class TreeViewFocusPlugin {
+  // We can't type `store`, otherwise we get the following TS error:
+  // 'focus' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+  constructor(store) {
+    this.store = store;
+
+    // Whenever the items change, we need to ensure the focused item is still present.
+    this.store.registerStoreEffect(_items.itemsSelectors.itemMetaLookup, () => {
+      const focusedItemId = _selectors.focusSelectors.focusedItemId(store.state);
+      if (focusedItemId == null) {
+        return;
+      }
+      const hasItemBeenRemoved = !_items.itemsSelectors.itemMeta(store.state, focusedItemId);
+      if (!hasItemBeenRemoved) {
+        return;
+      }
+      const defaultFocusableItemId = _selectors.focusSelectors.defaultFocusableItemId(store.state);
+      if (defaultFocusableItemId == null) {
+        this.setFocusedItemId(null);
+        return;
+      }
+      this.applyItemFocus(null, defaultFocusableItemId);
+    });
+  }
+  setFocusedItemId = itemId => {
+    const focusedItemId = _selectors.focusSelectors.focusedItemId(this.store.state);
+    if (focusedItemId === itemId) {
+      return;
+    }
+    this.store.set('focusedItemId', itemId);
+  };
+  applyItemFocus = (event, itemId) => {
+    this.store.items.getItemDOMElement(itemId)?.focus();
+    this.setFocusedItemId(itemId);
+    this.store.parameters.onItemFocus?.(event, itemId);
+  };
+  buildPublicAPI = () => {
+    return {
+      focusItem: this.focusItem
+    };
+  };
+
+  /**
+   * Focus the item with the given id.
+   *
+   * If the item is the child of a collapsed item, then this method will do nothing.
+   * Make sure to expand the ancestors of the item before calling this method if needed.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to focus.
+   */
+  focusItem = (event, itemId) => {
+    // If we receive an itemId, and it is visible, the focus will be set to it
+    const itemMeta = _items.itemsSelectors.itemMeta(this.store.state, itemId);
+    const isItemVisible = itemMeta && (itemMeta.parentId == null || _expansion.expansionSelectors.isItemExpanded(this.store.state, itemMeta.parentId));
+    if (isItemVisible) {
+      this.applyItemFocus(event, itemId);
+    }
+  };
+
+  /**
+   * Remove the focus from the currently focused item (both from the internal state and the DOM).
+   */
+  removeFocusedItem = () => {
+    const focusedItemId = _selectors.focusSelectors.focusedItemId(this.store.state);
+    if (focusedItemId == null) {
+      return;
+    }
+    const itemMeta = _items.itemsSelectors.itemMeta(this.store.state, focusedItemId);
+    if (itemMeta) {
+      const itemElement = this.store.items.getItemDOMElement(focusedItemId);
+      if (itemElement) {
+        itemElement.blur();
+      }
+    }
+    this.setFocusedItemId(null);
+  };
+
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is focused.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootFocus = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
+    // if the event bubbled (which is React specific) we don't want to steal focus
+    const defaultFocusableItemId = _selectors.focusSelectors.defaultFocusableItemId(this.store.state);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
+      this.applyItemFocus(event, defaultFocusableItemId);
+    }
+  };
+
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is blurred.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootBlur = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    this.setFocusedItemId(null);
+  };
+}
+exports.TreeViewFocusPlugin = TreeViewFocusPlugin;

package/internals/plugins/focus/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeViewFocusPlugin.js";
+export * from "./selectors.js";

package/internals/plugins/focus/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewFocusPlugin = require("./TreeViewFocusPlugin");
+Object.keys(_TreeViewFocusPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewFocusPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewFocusPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

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

@@ -0,0 +1,21 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const focusSelectors: {
+  /**
+   * Gets the item that should be sequentially focusable (usually with the Tab key).
+   * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+   * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+   */
+  defaultFocusableItemId: (args_0: MinimalTreeViewState<any, any>) => any;
+  /**
+   * Checks whether an item is the default focusable item.
+   */
+  isItemTheDefaultFocusableItem: (args_0: MinimalTreeViewState<any, any>, itemId: any) => boolean;
+  /**
+   * Gets the id of the item that is currently focused.
+   */
+  focusedItemId: (state: MinimalTreeViewState<any, any>) => string | null;
+  /**
+   * Checks whether an item is focused.
+   */
+  isItemFocused: (state: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+};

package/internals/plugins/{useTreeViewFocus/useTreeViewFocus.selectors.js → focus/selectors.js}

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.focusSelectors = void 0;
 var _store = require("@mui/x-internals/store");
-var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.selectors");
-var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewItems2 = require("../useTreeViewItems/useTreeViewItems.utils");
-var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
-const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_useTreeViewSelection.selectionSelectors.selectedItems, _useTreeViewExpansion.expansionSelectors.expandedItemsMap, _useTreeViewItems.itemsSelectors.itemMetaLookup, _useTreeViewItems.itemsSelectors.disabledItemFocusable, state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
+var _selectors = require("../selection/selectors");
+var _selectors2 = require("../items/selectors");
+var _utils = require("../items/utils");
+var _selectors3 = require("../expansion/selectors");
+const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_selectors.selectionSelectors.selectedItems, _selectors3.expansionSelectors.expandedItemsMap, _selectors2.itemsSelectors.itemMetaLookup, _selectors2.itemsSelectors.disabledItemFocusable, state => _selectors2.itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
   const firstSelectedItem = selectedItems.find(itemId => {
-    if (!disabledItemsFocusable && (0, _useTreeViewItems2.isItemDisabled)(itemMetaLookup, itemId)) {
+    if (!disabledItemsFocusable && (0, _utils.isItemDisabled)(itemMetaLookup, itemId)) {
       return false;
     }
     const itemMeta = itemMetaLookup[itemId];
@@ -20,7 +20,7 @@ const defaultFocusableItemIdSelector = (0, _store.createSelectorMemoized)(_useTr
   if (firstSelectedItem != null) {
     return firstSelectedItem;
   }
-  const firstNavigableItem = orderedRootItemIds.find(itemId => disabledItemsFocusable || !(0, _useTreeViewItems2.isItemDisabled)(itemMetaLookup, itemId));
+  const firstNavigableItem = orderedRootItemIds.find(itemId => disabledItemsFocusable || !(0, _utils.isItemDisabled)(itemMetaLookup, itemId));
   if (firstNavigableItem != null) {
     return firstNavigableItem;
   }
@@ -40,9 +40,9 @@ const focusSelectors = exports.focusSelectors = {
   /**
    * Gets the id of the item that is currently focused.
    */
-  focusedItemId: (0, _store.createSelector)(state => state.focus.focusedItemId),
+  focusedItemId: (0, _store.createSelector)(state => state.focusedItemId),
   /**
    * Checks whether an item is focused.
    */
-  isItemFocused: (0, _store.createSelector)((state, itemId) => state.focus.focusedItemId === itemId)
+  isItemFocused: (0, _store.createSelector)((state, itemId) => state.focusedItemId === itemId)
 };

package/internals/plugins/id/index.d.ts

@@ -0,0 +1 @@
+export * from "./selectors.js";