@mui/x-tree-view 8.22.0 → 8.24.0

package/internals/index.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ExtendableRichTreeViewStore", {
+  enumerable: true,
+  get: function () {
+    return _RichTreeViewStore.ExtendableRichTreeViewStore;
+  }
+});
+Object.defineProperty(exports, "MinimalTreeViewStore", {
+  enumerable: true,
+  get: function () {
+    return _MinimalTreeViewStore.MinimalTreeViewStore;
+  }
+});
 Object.defineProperty(exports, "RichTreeViewItems", {
   enumerable: true,
   get: function () {
@@ -12,7 +24,13 @@ Object.defineProperty(exports, "RichTreeViewItems", {
 Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
   enumerable: true,
   get: function () {
-    return _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
+    return _items.TREE_VIEW_ROOT_PARENT_ID;
+  }
+});
+Object.defineProperty(exports, "TreeViewItemDepthContext", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewItemDepthContext.TreeViewItemDepthContext;
   }
 });
 Object.defineProperty(exports, "TreeViewProvider", {
@@ -24,13 +42,13 @@ Object.defineProperty(exports, "TreeViewProvider", {
 Object.defineProperty(exports, "buildSiblingIndexes", {
   enumerable: true,
   get: function () {
-    return _useTreeViewItems.buildSiblingIndexes;
+    return _items.buildSiblingIndexes;
   }
 });
 Object.defineProperty(exports, "expansionSelectors", {
   enumerable: true,
   get: function () {
-    return _useTreeViewExpansion.expansionSelectors;
+    return _expansion.expansionSelectors;
   }
 });
 Object.defineProperty(exports, "isTargetInDescendants", {
@@ -42,43 +60,25 @@ Object.defineProperty(exports, "isTargetInDescendants", {
 Object.defineProperty(exports, "itemsSelectors", {
   enumerable: true,
   get: function () {
-    return _useTreeViewItems.itemsSelectors;
+    return _items.itemsSelectors;
   }
 });
 Object.defineProperty(exports, "labelSelectors", {
   enumerable: true,
   get: function () {
-    return _useTreeViewLabel.labelSelectors;
+    return _labelEditing.labelSelectors;
   }
 });
 Object.defineProperty(exports, "lazyLoadingSelectors", {
   enumerable: true,
   get: function () {
-    return _useTreeViewLazyLoading.lazyLoadingSelectors;
+    return _lazyLoading.lazyLoadingSelectors;
   }
 });
 Object.defineProperty(exports, "selectionSelectors", {
   enumerable: true,
   get: function () {
-    return _useTreeViewSelection.selectionSelectors;
-  }
-});
-Object.defineProperty(exports, "unstable_resetCleanupTracking", {
-  enumerable: true,
-  get: function () {
-    return _useInstanceEventHandler.unstable_resetCleanupTracking;
-  }
-});
-Object.defineProperty(exports, "useInstanceEventHandler", {
-  enumerable: true,
-  get: function () {
-    return _useInstanceEventHandler.useInstanceEventHandler;
-  }
-});
-Object.defineProperty(exports, "useTreeView", {
-  enumerable: true,
-  get: function () {
-    return _useTreeView.useTreeView;
+    return _selection.selectionSelectors;
   }
 });
 Object.defineProperty(exports, "useTreeViewContext", {
@@ -87,58 +87,28 @@ Object.defineProperty(exports, "useTreeViewContext", {
     return _TreeViewProvider.useTreeViewContext;
   }
 });
-Object.defineProperty(exports, "useTreeViewExpansion", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewExpansion.useTreeViewExpansion;
-  }
-});
-Object.defineProperty(exports, "useTreeViewFocus", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewFocus.useTreeViewFocus;
-  }
-});
-Object.defineProperty(exports, "useTreeViewItems", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewItems.useTreeViewItems;
-  }
-});
-Object.defineProperty(exports, "useTreeViewJSXItems", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewJSXItems.useTreeViewJSXItems;
-  }
-});
-Object.defineProperty(exports, "useTreeViewKeyboardNavigation", {
-  enumerable: true,
-  get: function () {
-    return _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation;
-  }
-});
-Object.defineProperty(exports, "useTreeViewLabel", {
+Object.defineProperty(exports, "useTreeViewRootProps", {
   enumerable: true,
   get: function () {
-    return _useTreeViewLabel.useTreeViewLabel;
+    return _useTreeViewRootProps.useTreeViewRootProps;
   }
 });
-Object.defineProperty(exports, "useTreeViewSelection", {
+Object.defineProperty(exports, "useTreeViewStore", {
   enumerable: true,
   get: function () {
-    return _useTreeViewSelection.useTreeViewSelection;
+    return _useTreeViewStore.useTreeViewStore;
   }
 });
-var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
 var _RichTreeViewItems = require("./components/RichTreeViewItems");
-var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
-var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
-var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
-var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
-var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
-var _useTreeViewItems = require("./plugins/useTreeViewItems");
-var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
-var _useTreeViewLazyLoading = require("./plugins/useTreeViewLazyLoading");
-var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
-var _tree = require("./utils/tree");
+var _useTreeViewRootProps = require("./hooks/useTreeViewRootProps");
+var _useTreeViewStore = require("./hooks/useTreeViewStore");
+var _expansion = require("./plugins/expansion");
+var _selection = require("./plugins/selection");
+var _items = require("./plugins/items");
+var _labelEditing = require("./plugins/labelEditing");
+var _lazyLoading = require("./plugins/lazyLoading");
+var _tree = require("./utils/tree");
+var _MinimalTreeViewStore = require("./MinimalTreeViewStore");
+var _RichTreeViewStore = require("./RichTreeViewStore");
+var _TreeViewItemDepthContext = require("./TreeViewItemDepthContext");

package/internals/models/events.d.ts

@@ -1,5 +1,26 @@
 import { MuiEvent } from '@mui/x-internals/types';
-export interface TreeViewEventLookupElement {
-  params: object;
+import { TreeViewItemId } from "../../models/index.js";
+interface TreeViewEventLookup {
+  /**
+   * Fired before an item is expanded or collapsed.
+   */
+  beforeItemToggleExpansion: {
+    parameters: {
+      isExpansionPrevented: boolean;
+      shouldBeExpanded: boolean;
+      itemId: TreeViewItemId;
+    };
+    event: React.SyntheticEvent | null;
+  };
 }
-export type TreeViewEventListener<E extends TreeViewEventLookupElement> = (params: E['params'], event: MuiEvent<{}>) => void;
+export type TreeViewEvents = keyof TreeViewEventLookup;
+export type TreeViewEventListener<E extends TreeViewEvents> = (params: TreeViewEventParameters<E>, event: TreeViewEventLookup[E] extends {
+  event: any;
+} ? MuiEvent<TreeViewEventLookup[E]['event']> : MuiEvent<{}>) => void;
+export type TreeViewEventParameters<E extends TreeViewEvents> = TreeViewEventLookup[E] extends {
+  parameters: infer P;
+} ? P : undefined;
+export type TreeViewEventEvent<E extends TreeViewEvents> = TreeViewEventLookup[E] extends {
+  event: infer EV;
+} ? EV : undefined;
+export {};

package/internals/models/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./helpers.js";
-export * from "./plugin.js";
 export * from "./itemPlugin.js";
-export * from "./treeView.js";
+export * from "./treeView.js";
+export * from "./events.js";

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,13 +1,11 @@
-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;
   parentId: string | null;
   expandable: boolean;
   disabled: boolean;
+  selectable: boolean;
   /**
    * Only defined for `<RichTreeView />` and `<RichTreeViewPro />`.
    */
@@ -17,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;
+}