@mui/x-tree-view 8.23.0 → 8.24.0

package/esm/models/items.d.ts

@@ -4,10 +4,13 @@ export type TreeViewDefaultItemModelProperties = {
   label: string;
   children?: TreeViewDefaultItemModelProperties[];
 };
-export type TreeViewBaseItem<R extends object = TreeViewDefaultItemModelProperties> = R & {
+/**
+ * @deprecated Use `TreeViewDefaultItemModelProperties` instead, or define your own item model interface.
+ */
+export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];
 };
-export type TreeViewValidItem<R extends object> = {
+export type TreeViewValidItem<R extends {}> = {
   children?: R[];
 };
 export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';

package/esm/useTreeItem/useTreeItem.d.ts

@@ -1,2 +1,18 @@
-import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from "./useTreeItem.types.js";
-export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = UseTreeItemOptionalPlugins>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;
+import { TreeViewItemId } from "../models/index.js";
+import { UseTreeItemParameters, UseTreeItemReturnValue } from "./useTreeItem.types.js";
+import { TreeViewAnyStore, TreeViewPublicAPI } from "../internals/models/index.js";
+import { RichTreeViewStore } from "../internals/RichTreeViewStore/index.js";
+interface DefaultStore extends RichTreeViewStore<any, any> {
+  buildPublicAPI: () => TreeViewPublicAPI<RichTreeViewStore<any, any>> & {
+    /**
+     * Method used for updating an item's children.
+     * Only relevant for lazy-loaded tree views.
+     *
+     * @param {TreeViewItemId} itemId The The id of the item to update the children of.
+     * @returns {Promise<void>} The promise resolved when the items are fetched.
+     */
+    updateItemChildren: (itemId: TreeViewItemId) => Promise<void>;
+  };
+}
+export declare const useTreeItem: <TStore extends TreeViewAnyStore = DefaultStore>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TStore>;
+export {};

package/esm/useTreeItem/useTreeItem.js

@@ -9,12 +9,14 @@ import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
-import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
-import { focusSelectors } from "../internals/plugins/useTreeViewFocus/index.js";
-import { itemsSelectors } from "../internals/plugins/useTreeViewItems/index.js";
-import { idSelectors } from "../internals/corePlugins/useTreeViewId/index.js";
-import { expansionSelectors } from "../internals/plugins/useTreeViewExpansion/index.js";
-import { selectionSelectors } from "../internals/plugins/useTreeViewSelection/index.js";
+import { focusSelectors } from "../internals/plugins/focus/index.js";
+import { itemsSelectors } from "../internals/plugins/items/index.js";
+import { idSelectors } from "../internals/plugins/id/index.js";
+import { expansionSelectors } from "../internals/plugins/expansion/index.js";
+import { selectionSelectors } from "../internals/plugins/selection/index.js";
+
+// TODO v8: Remove the lazy loading plugin from the typing on the community useTreeItem and ask users to pass the TStore generic.
+
 const depthSelector = (state, itemId, depthContext) => {
   if (typeof depthContext === 'function') {
     return depthContext(state, itemId);
@@ -24,7 +26,6 @@ const depthSelector = (state, itemId, depthContext) => {
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
-    instance,
     publicAPI,
     store
   } = useTreeViewContext();
@@ -54,13 +55,8 @@ export const useTreeItem = parameters => {
   const handleRootRef = useMergedRefs(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useMergedRefs(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
-  const treeId = useStore(store, idSelectors.treeId);
   const isCheckboxSelectionEnabled = useStore(store, selectionSelectors.isCheckboxSelectionEnabled);
-  const idAttribute = generateTreeItemIdAttribute({
-    itemId,
-    treeId,
-    id
-  });
+  const idAttribute = useStore(store, idSelectors.treeItemIdAttribute, itemId, id);
   const shouldBeAccessibleWithTab = useStore(store, focusSelectors.isItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
@@ -73,7 +69,7 @@ export const useTreeItem = parameters => {
       return;
     }
     if (!status.focused && itemsSelectors.canItemBeFocused(store.state, itemId) && event.currentTarget === event.target) {
-      instance.focusItem(event, itemId);
+      store.focus.focusItem(event, itemId);
     }
   };
   const createRootHandleBlur = otherHandlers => event => {
@@ -81,7 +77,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    const rootElement = instance.getItemDOMElement(itemId);
+    const rootElement = store.items.getItemDOMElement(itemId);
 
     // Don't blur the root when switching to editing mode
     // the input that triggers the root blur can be either the relatedTarget (when entering editing state) or the target (when exiting editing state)
@@ -92,14 +88,14 @@ export const useTreeItem = parameters => {
     event.relatedTarget && isTargetInDescendants(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
     }
-    instance.removeFocusedItem();
+    store.focus.removeFocusedItem();
   };
   const createRootHandleKeyDown = otherHandlers => event => {
     otherHandlers.onKeyDown?.(event);
     if (event.defaultMuiPrevented || event.target?.dataset?.element === 'labelInput') {
       return;
     }
-    instance.handleItemKeyDown(event, itemId);
+    store.keyboardNavigation.handleItemKeyDown(event, itemId);
   };
   const createLabelHandleDoubleClick = otherHandlers => event => {
     otherHandlers.onDoubleClick?.(event);
@@ -110,7 +106,7 @@ export const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    instance.handleItemClick(event, itemId);
+    store.items.handleItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -1,13 +1,6 @@
 import * as React from 'react';
 import { TreeViewItemId, TreeViewCancellableEventHandler } from "../models/index.js";
-import { TreeViewPublicAPI } from "../internals/models/index.js";
-import { UseTreeViewSelectionSignature } from "../internals/plugins/useTreeViewSelection/index.js";
-import { UseTreeViewItemsSignature } from "../internals/plugins/useTreeViewItems/index.js";
-import { UseTreeViewFocusSignature } from "../internals/plugins/useTreeViewFocus/index.js";
-import { UseTreeViewKeyboardNavigationSignature } from "../internals/plugins/useTreeViewKeyboardNavigation/index.js";
-import { UseTreeViewLabelSignature } from "../internals/plugins/useTreeViewLabel/index.js";
-import { UseTreeViewExpansionSignature } from "../internals/plugins/useTreeViewExpansion/index.js";
-import { UseTreeViewLazyLoadingSignature } from "../internals/plugins/useTreeViewLazyLoading/index.js";
+import { TreeViewPublicAPI, TreeViewAnyStore } from "../internals/models/index.js";
 export interface UseTreeItemParameters {
   /**
    * The id attribute of the item. If not provided, it will be generated.
@@ -115,7 +108,7 @@ export interface UseTreeItemStatus {
   loading: boolean;
   error: boolean;
 }
-export interface UseTreeItemReturnValue<TSignatures extends UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins> {
+export interface UseTreeItemReturnValue<TStore extends TreeViewAnyStore> {
   /**
    * Resolver for the context provider's props.
    * @returns {UseTreeItemContextProviderProps} Props that should be spread on the context provider slot.
@@ -195,13 +188,5 @@ export interface UseTreeItemReturnValue<TSignatures extends UseTreeItemMinimalPl
   /**
    * The object the allows Tree View manipulation.
    */
-  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
-}
-/**
- * Plugins that need to be present in the Tree View in order for `UseTreeItem` to work correctly.
- */
-export type UseTreeItemMinimalPlugins = readonly [UseTreeViewSelectionSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature, UseTreeViewFocusSignature, UseTreeViewKeyboardNavigationSignature, UseTreeViewLabelSignature];
-/**
- * Plugins that `UseTreeItem` can use if they are present, but are not required.
- */
-export type UseTreeItemOptionalPlugins = readonly [UseTreeViewLazyLoadingSignature];
+  publicAPI: TreeViewPublicAPI<TStore>;
+}

package/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useApplyPropagationToSelectedItemsOnMount = useApplyPropagationToSelectedItemsOnMount;
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
-var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils");
+var _TreeViewSelectionPlugin = require("../internals/plugins/selection/TreeViewSelectionPlugin");
 const defaultGetItemId = item => item.id;
 const defaultGetItemChildren = item => item.children;
 
@@ -59,7 +59,7 @@ function useApplyPropagationToSelectedItemsOnMount(parameters) {
     selectionPropagation
   } = parameters;
   return (0, _useRefWithInit.useRefWithInit)(() => {
-    const lookup = (0, _useTreeViewSelection.getLookupFromArray)(selectedItems);
+    const lookup = (0, _TreeViewSelectionPlugin.getLookupFromArray)(selectedItems);
     function walk(items, isParentSelected) {
       for (const item of items) {
         const itemId = getItemId(item);

package/hooks/useRichTreeViewApiRef.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
 import { TreeViewPublicAPI } from "../internals/models/index.js";
-import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
+import { RichTreeViewStore } from "../internals/RichTreeViewStore/index.js";
 /**
  * Creates the ref to pass to the `apiRef` prop of the `RichTreeView` component.
  */
-export declare function useRichTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;
+export declare function useRichTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewStore<R, boolean>> | undefined>;

package/hooks/useSimpleTreeViewApiRef.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from "../models/index.js";
 import { TreeViewPublicAPI } from "../internals/models/index.js";
-import { SimpleTreeViewPluginSignatures } from "../SimpleTreeView/SimpleTreeView.plugins.js";
+import { SimpleTreeViewStore } from "../internals/SimpleTreeViewStore/index.js";
 /**
  * Creates the ref to pass to the `apiRef` prop of the `SimpleTreeView` component.
  */
-export declare function useSimpleTreeViewApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;
+export declare function useSimpleTreeViewApiRef(): React.RefObject<TreeViewPublicAPI<SimpleTreeViewStore<boolean>> | undefined>;

package/hooks/useTreeItemModel.d.ts

@@ -1,2 +1,2 @@
-import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../models/index.js";
-export declare const useTreeItemModel: <R extends {} = TreeViewDefaultItemModelProperties>(itemId: TreeViewItemId) => TreeViewBaseItem<R> | null;
+import { TreeViewDefaultItemModelProperties, TreeViewItemId } from "../models/index.js";
+export declare const useTreeItemModel: <R extends {} = TreeViewDefaultItemModelProperties>(itemId: TreeViewItemId) => R | null;

package/hooks/useTreeItemModel.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeItemModel = void 0;
 var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
+var _items = require("../internals/plugins/items");
 const useTreeItemModel = itemId => {
   const {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
-  return (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemModel, itemId);
+  return (0, _store.useStore)(store, _items.itemsSelectors.itemModel, itemId);
 };
 exports.useTreeItemModel = useTreeItemModel;

package/hooks/useTreeItemUtils/useTreeItemUtils.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import type { UseTreeViewLazyLoadingSignature } from "../../internals/plugins/useTreeViewLazyLoading/index.js";
-import type { UseTreeViewSelectionSignature } from "../../internals/plugins/useTreeViewSelection/index.js";
-import type { UseTreeViewExpansionSignature } from "../../internals/plugins/useTreeViewExpansion/index.js";
-import type { UseTreeViewItemsSignature } from "../../internals/plugins/useTreeViewItems/index.js";
-import type { UseTreeViewFocusSignature } from "../../internals/plugins/useTreeViewFocus/index.js";
-import { UseTreeViewLabelSignature } from "../../internals/plugins/useTreeViewLabel/index.js";
 import type { UseTreeItemStatus } from "../../useTreeItem/index.js";
-import { TreeViewPublicAPI } from "../../internals/models/index.js";
+import { TreeViewPublicAPI, TreeViewAnyStore } from "../../internals/models/index.js";
+import { TreeViewLabelEditingPlugin } from "../../internals/plugins/labelEditing/index.js";
 export interface UseTreeItemInteractions {
   handleExpansion: (event: React.MouseEvent) => void;
   handleSelection: (event: React.MouseEvent) => void;
@@ -15,28 +10,23 @@ export interface UseTreeItemInteractions {
   handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
   handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 }
-/**
- * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
- */
-type UseTreeItemUtilsMinimalPlugins = readonly [UseTreeViewSelectionSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature, UseTreeViewFocusSignature];
-/**
- * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
- */
-export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
-interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins> {
+interface UseTreeItemUtilsReturnValue<TStore extends TreeViewAnyStore> {
   interactions: UseTreeItemInteractions;
   status: UseTreeItemStatus;
   /**
    * The object the allows Tree View manipulation.
    */
-  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
+  publicAPI: TreeViewPublicAPI<TStore>;
 }
+type TreeViewStoreWithLabelEditing = TreeViewAnyStore & {
+  labelEditing?: TreeViewLabelEditingPlugin;
+};
 export declare const itemHasChildren: (reactChildren: React.ReactNode) => boolean;
-export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({
+export declare const useTreeItemUtils: <TStore extends TreeViewStoreWithLabelEditing = TreeViewStoreWithLabelEditing>({
   itemId,
   children
 }: {
   itemId: string;
   children?: React.ReactNode;
-}) => UseTreeItemUtilsReturnValue<TSignatures, TOptionalSignatures>;
+}) => UseTreeItemUtilsReturnValue<TStore>;
 export {};

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -7,22 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeItemUtils = exports.itemHasChildren = void 0;
 var _store = require("@mui/x-internals/store");
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
-var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
-var _plugins = require("../../internals/utils/plugins");
-var _useTreeViewExpansion = require("../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
-var _useTreeViewFocus = require("../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
-var _useTreeViewItems = require("../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewSelection = require("../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
-var _useTreeViewLazyLoading = require("../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");
-var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors");
-/**
- * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
- */
-
-/**
- * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
- */
-
+var _selectors = require("../../internals/plugins/expansion/selectors");
+var _selectors2 = require("../../internals/plugins/focus/selectors");
+var _selectors3 = require("../../internals/plugins/items/selectors");
+var _selectors4 = require("../../internals/plugins/selection/selectors");
+var _selectors5 = require("../../internals/plugins/lazyLoading/selectors");
+var _selectors6 = require("../../internals/plugins/labelEditing/selectors");
 const itemHasChildren = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(itemHasChildren);
@@ -35,20 +25,19 @@ const useTreeItemUtils = ({
   children
 }) => {
   const {
-    instance,
     store,
     publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
-  const isItemExpandable = (0, _store.useStore)(store, _useTreeViewExpansion.expansionSelectors.isItemExpandable, itemId);
-  const isLoading = (0, _store.useStore)(store, _useTreeViewLazyLoading.lazyLoadingSelectors.isItemLoading, itemId);
-  const hasError = (0, _store.useStore)(store, _useTreeViewLazyLoading.lazyLoadingSelectors.itemHasError, itemId);
+  const isItemExpandable = (0, _store.useStore)(store, _selectors.expansionSelectors.isItemExpandable, itemId);
+  const isLoading = (0, _store.useStore)(store, _selectors5.lazyLoadingSelectors.isItemLoading, itemId);
+  const hasError = (0, _store.useStore)(store, _selectors5.lazyLoadingSelectors.itemHasError, itemId);
   const isExpandable = itemHasChildren(children) || isItemExpandable;
-  const isExpanded = (0, _store.useStore)(store, _useTreeViewExpansion.expansionSelectors.isItemExpanded, itemId);
-  const isFocused = (0, _store.useStore)(store, _useTreeViewFocus.focusSelectors.isItemFocused, itemId);
-  const isSelected = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isItemSelected, itemId);
-  const isDisabled = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.isItemDisabled, itemId);
-  const isEditing = (0, _store.useStore)(store, _useTreeViewLabel2.labelSelectors.isItemBeingEdited, itemId);
-  const isEditable = (0, _store.useStore)(store, _useTreeViewLabel2.labelSelectors.isItemEditable, itemId);
+  const isExpanded = (0, _store.useStore)(store, _selectors.expansionSelectors.isItemExpanded, itemId);
+  const isFocused = (0, _store.useStore)(store, _selectors2.focusSelectors.isItemFocused, itemId);
+  const isSelected = (0, _store.useStore)(store, _selectors4.selectionSelectors.isItemSelected, itemId);
+  const isDisabled = (0, _store.useStore)(store, _selectors3.itemsSelectors.isItemDisabled, itemId);
+  const isEditing = (0, _store.useStore)(store, _selectors6.labelSelectors.isItemBeingEdited, itemId);
+  const isEditable = (0, _store.useStore)(store, _selectors6.labelSelectors.isItemEditable, itemId);
   const status = {
     expandable: isExpandable,
     expanded: isExpanded,
@@ -65,39 +54,39 @@ const useTreeItemUtils = ({
       return;
     }
     if (!status.focused) {
-      instance.focusItem(event, itemId);
+      store.focus.focusItem(event, itemId);
     }
-    const multiple = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = _selectors4.selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId))) {
+    if (status.expandable && !(multiple && _selectors.expansionSelectors.isItemExpanded(store.state, itemId))) {
       // make sure the children selection is propagated again
-      instance.setItemExpansion({
+      store.expansion.setItemExpansion({
         event,
         itemId
       });
     }
   };
   const handleSelection = event => {
-    if (!_useTreeViewSelection.selectionSelectors.canItemBeSelected(store.state, itemId)) {
+    if (!_selectors4.selectionSelectors.canItemBeSelected(store.state, itemId)) {
       return;
     }
     if (!status.focused && !status.editing) {
-      instance.focusItem(event, itemId);
+      store.focus.focusItem(event, itemId);
     }
-    const multiple = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = _selectors4.selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
-        instance.expandSelectionRange(event, itemId);
+        store.selection.expandSelectionRange(event, itemId);
       } else {
-        instance.setItemSelection({
+        store.selection.setItemSelection({
           event,
           itemId,
           keepExistingSelection: true
         });
       }
     } else {
-      instance.setItemSelection({
+      store.selection.setItemSelection({
         event,
         itemId,
         shouldBeSelected: true
@@ -106,11 +95,11 @@ const useTreeItemUtils = ({
   };
   const handleCheckboxSelection = event => {
     const hasShift = event.nativeEvent.shiftKey;
-    const isMultiSelectEnabled = _useTreeViewSelection.selectionSelectors.isMultiSelectEnabled(store.state);
+    const isMultiSelectEnabled = _selectors4.selectionSelectors.isMultiSelectEnabled(store.state);
     if (isMultiSelectEnabled && hasShift) {
-      instance.expandSelectionRange(event, itemId);
+      store.selection.expandSelectionRange(event, itemId);
     } else {
-      instance.setItemSelection({
+      store.selection.setItemSelection({
         event,
         itemId,
         keepExistingSelection: isMultiSelectEnabled,
@@ -119,36 +108,39 @@ const useTreeItemUtils = ({
     }
   };
   const toggleItemEditing = () => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+    // If the store doesn't support label editing, do nothing
+    if (!store.labelEditing) {
       return;
     }
     if (isEditing) {
-      instance.setEditedItem(null);
+      store.labelEditing.setEditedItem(null);
     } else {
-      instance.setEditedItem(itemId);
+      store.labelEditing.setEditedItem(itemId);
     }
   };
   const handleSaveItemLabel = (event, newLabel) => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+    // If the store doesn't support label editing, do nothing
+    if (!store.labelEditing) {
       return;
     }
 
     // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
     // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
     // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
-    if (_useTreeViewLabel2.labelSelectors.isItemBeingEdited(store.state, itemId)) {
-      instance.updateItemLabel(itemId, newLabel);
+    if (_selectors6.labelSelectors.isItemBeingEdited(store.state, itemId)) {
+      store.labelEditing.updateItemLabel(itemId, newLabel);
       toggleItemEditing();
-      instance.focusItem(event, itemId);
+      store.focus.focusItem(event, itemId);
     }
   };
   const handleCancelItemLabelEditing = event => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+    // If the store doesn't support label editing, do nothing
+    if (!store.labelEditing) {
       return;
     }
-    if (_useTreeViewLabel2.labelSelectors.isItemBeingEdited(store.state, itemId)) {
+    if (_selectors6.labelSelectors.isItemBeingEdited(store.state, itemId)) {
       toggleItemEditing();
-      instance.focusItem(event, itemId);
+      store.focus.focusItem(event, itemId);
     }
   };
   const interactions = {

package/hooks/useTreeViewApiRef.d.ts

@@ -1,8 +1,6 @@
-import * as React from 'react';
-import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from "../internals/models/index.js";
-import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
+import { useRichTreeViewApiRef } from "./useRichTreeViewApiRef.js";
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  * @deprecated Use `useRichTreeViewApiRef()`, `useRichTreeViewProApiRef()` or `useSimpleTreeViewApiRef()` instead.
  */
-export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;
+export declare const useTreeViewApiRef: typeof useRichTreeViewApiRef;

package/hooks/useTreeViewApiRef.js

@@ -1,15 +1,13 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewApiRef = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _useRichTreeViewApiRef = require("./useRichTreeViewApiRef");
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  * @deprecated Use `useRichTreeViewApiRef()`, `useRichTreeViewProApiRef()` or `useSimpleTreeViewApiRef()` instead.
  */
-const useTreeViewApiRef = () => React.useRef(undefined);
-exports.useTreeViewApiRef = useTreeViewApiRef;
+const useTreeViewApiRef = exports.useTreeViewApiRef = _useRichTreeViewApiRef.useRichTreeViewApiRef;

package/index.d.ts

@@ -6,7 +6,6 @@ export * from "./TreeItemIcon/index.js";
 export * from "./TreeItemProvider/index.js";
 export * from "./TreeItemDragAndDropOverlay/index.js";
 export * from "./TreeItemLabelInput/index.js";
-export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";
 export * from "./hooks/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.23.0
+ * @mui/x-tree-view v8.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -10,19 +10,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  unstable_resetCleanupTracking: true
-};
-Object.defineProperty(exports, "unstable_resetCleanupTracking", {
-  enumerable: true,
-  get: function () {
-    return _useInstanceEventHandler.unstable_resetCleanupTracking;
-  }
-});
 var _SimpleTreeView = require("./SimpleTreeView");
 Object.keys(_SimpleTreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SimpleTreeView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -34,7 +24,6 @@ Object.keys(_SimpleTreeView).forEach(function (key) {
 var _RichTreeView = require("./RichTreeView");
 Object.keys(_RichTreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RichTreeView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -46,7 +35,6 @@ Object.keys(_RichTreeView).forEach(function (key) {
 var _TreeItem = require("./TreeItem");
 Object.keys(_TreeItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -58,7 +46,6 @@ Object.keys(_TreeItem).forEach(function (key) {
 var _useTreeItem = require("./useTreeItem");
 Object.keys(_useTreeItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useTreeItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -70,7 +57,6 @@ Object.keys(_useTreeItem).forEach(function (key) {
 var _TreeItemIcon = require("./TreeItemIcon");
 Object.keys(_TreeItemIcon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemIcon[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -82,7 +68,6 @@ Object.keys(_TreeItemIcon).forEach(function (key) {
 var _TreeItemProvider = require("./TreeItemProvider");
 Object.keys(_TreeItemProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -94,7 +79,6 @@ Object.keys(_TreeItemProvider).forEach(function (key) {
 var _TreeItemDragAndDropOverlay = require("./TreeItemDragAndDropOverlay");
 Object.keys(_TreeItemDragAndDropOverlay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemDragAndDropOverlay[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -106,7 +90,6 @@ Object.keys(_TreeItemDragAndDropOverlay).forEach(function (key) {
 var _TreeItemLabelInput = require("./TreeItemLabelInput");
 Object.keys(_TreeItemLabelInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemLabelInput[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -115,11 +98,9 @@ Object.keys(_TreeItemLabelInput).forEach(function (key) {
     }
   });
 });
-var _useInstanceEventHandler = require("./internals/hooks/useInstanceEventHandler");
 var _models = require("./models");
 Object.keys(_models).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _models[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -131,7 +112,6 @@ Object.keys(_models).forEach(function (key) {
 var _icons = require("./icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _icons[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -143,7 +123,6 @@ Object.keys(_icons).forEach(function (key) {
 var _hooks = require("./hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,