@mui/x-tree-view-pro 8.0.0-alpha.0 → 8.0.0-alpha.2

package/README.md

@@ -16,8 +16,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

package/RichTreeViewPro/RichTreeViewPro.js

@@ -59,8 +59,7 @@ const RichTreeViewPro = /*#__PURE__*/React.forwardRef(function RichTreeViewPro(i
   }
   const {
     getRootProps,
-    contextValue,
-    instance
+    contextValue
   } = useTreeView({
     plugins: RICH_TREE_VIEW_PRO_PLUGINS,
     rootRef: ref,
@@ -84,8 +83,7 @@ const RichTreeViewPro = /*#__PURE__*/React.forwardRef(function RichTreeViewPro(i
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       children: [/*#__PURE__*/_jsx(RichTreeViewItems, {
         slots: slots,
-        slotProps: slotProps,
-        itemsToRender: instance.getItemsToRender()
+        slotProps: slotProps
       }), /*#__PURE__*/_jsx(Watermark, {
         packageName: "x-tree-view-pro",
         releaseInfo: releaseInfo

package/RichTreeViewPro/RichTreeViewPro.types.d.ts

@@ -1,31 +1,19 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/utils';
-import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
-import { TreeViewItemId } from '@mui/x-tree-view/models';
-import { TreeViewPublicAPI, TreeViewExperimentalFeatures } from '@mui/x-tree-view/internals';
+import { SxProps } from '@mui/system/styleFunctionSx';
+import { SlotComponentProps } from '@mui/utils/types';
+import { TreeViewPublicAPI, TreeViewExperimentalFeatures, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from '@mui/x-tree-view/internals';
 import { RichTreeViewProClasses } from './richTreeViewProClasses';
 import { RichTreeViewProPluginParameters, RichTreeViewProPluginSlotProps, RichTreeViewProPluginSlots, RichTreeViewProPluginSignatures } from './RichTreeViewPro.plugins';
-interface RichTreeViewItemProSlotOwnerState {
-    itemId: TreeViewItemId;
-    label: string;
-}
-export interface RichTreeViewProSlots extends RichTreeViewProPluginSlots {
+export interface RichTreeViewProSlots extends RichTreeViewProPluginSlots, RichTreeViewItemsSlots {
     /**
      * Element rendered at the root.
      * @default RichTreeViewProRoot
      */
     root?: React.ElementType;
-    /**
-     * Custom component for the item.
-     * @default TreeItem.
-     */
-    item?: React.JSXElementConstructor<TreeItemProps>;
 }
-export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewProPluginSlotProps {
+export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewProPluginSlotProps, RichTreeViewItemsSlotProps {
     root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
-    item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemProSlotOwnerState>;
 }
 export type RichTreeViewProApiRef = React.MutableRefObject<TreeViewPublicAPI<RichTreeViewProPluginSignatures> | undefined>;
 export interface RichTreeViewProPropsBase extends React.HTMLAttributes<HTMLUListElement> {
@@ -61,4 +49,3 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
      */
     experimentalFeatures?: TreeViewExperimentalFeatures<RichTreeViewProPluginSignatures>;
 }
-export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.0.0-alpha.0
+ * @mui/x-tree-view-pro v8.0.0-alpha.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js

@@ -1,17 +1,21 @@
 import * as React from 'react';
-import { useTreeViewContext, isTargetInDescendants } from '@mui/x-tree-view/internals';
+import { useTreeViewContext, isTargetInDescendants, useSelector } from '@mui/x-tree-view/internals';
+import { selectorItemsReorderingDraggedItemProperties, selectorItemsReorderingIsValidTarget } from "./useTreeViewItemsReordering.selectors.js";
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 export const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
-    itemsReordering,
-    instance
+    instance,
+    store,
+    itemsReordering
   } = useTreeViewContext();
   const {
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
+  const draggedItemProperties = useSelector(store, selectorItemsReorderingDraggedItemProperties, itemId);
+  const isValidTarget = useSelector(store, selectorItemsReorderingIsValidTarget, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -19,8 +23,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         contentRefObject,
         externalEventHandlers
       }) => {
-        const draggable = instance.canItemBeDragged(itemId);
-        if (!draggable) {
+        if (!itemsReordering.enabled || itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId)) {
           return {};
         }
         const handleDragStart = event => {
@@ -75,8 +78,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         externalEventHandlers,
         contentRefObject
       }) => {
-        const currentDrag = itemsReordering.currentDrag;
-        if (!currentDrag || currentDrag.draggedItemId === itemId) {
+        if (!isValidTarget) {
           return {};
         }
         const handleDragOver = event => {
@@ -109,17 +111,13 @@ export const useTreeViewItemsReorderingItemPlugin = ({
         };
       },
       dragAndDropOverlay: () => {
-        const currentDrag = itemsReordering.currentDrag;
-        if (!currentDrag || currentDrag.targetItemId !== itemId || currentDrag.action == null) {
+        if (!draggedItemProperties) {
           return {};
         }
-        const targetDepth = currentDrag.newPosition?.parentId == null ? 0 :
-        // The depth is always defined because drag&drop is only usable with Rich Tree View components.
-        instance.getItemMeta(currentDrag.newPosition.parentId).depth + 1;
         return {
-          action: currentDrag.action,
+          action: draggedItemProperties.action,
           style: {
-            '--TreeView-targetDepth': targetDepth
+            '--TreeView-targetDepth': draggedItemProperties.targetDepth
           }
         };
       }

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds } from '@mui/x-tree-view/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
 import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
+import { selectorItemsReordering } from "./useTreeViewItemsReordering.selectors.js";
 export const useTreeViewItemsReordering = ({
   params,
-  instance,
-  state,
-  setState
+  store
 }) => {
   const canItemBeDragged = React.useCallback(itemId => {
     if (!params.itemsReordering) {
@@ -20,7 +20,7 @@ export const useTreeViewItemsReordering = ({
     return true;
   }, [params.itemsReordering, params.isItemReorderable]);
   const getDroppingTargetValidActions = React.useCallback(itemId => {
-    const itemsReordering = state.itemsReordering;
+    const itemsReordering = selectorItemsReordering(store.value);
     if (!itemsReordering) {
       throw new Error('There is no ongoing reordering.');
     }
@@ -28,10 +28,10 @@ export const useTreeViewItemsReordering = ({
       return {};
     }
     const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
-    const targetItemMeta = instance.getItemMeta(itemId);
-    const targetItemIndex = instance.getItemIndex(targetItemMeta.id);
-    const draggedItemMeta = instance.getItemMeta(itemsReordering.draggedItemId);
-    const draggedItemIndex = instance.getItemIndex(draggedItemMeta.id);
+    const targetItemMeta = selectorItemMeta(store.value, itemId);
+    const targetItemIndex = selectorItemIndex(store.value, targetItemMeta.id);
+    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
+    const draggedItemIndex = selectorItemIndex(store.value, draggedItemMeta.id);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
       index: draggedItemIndex
@@ -67,7 +67,7 @@ export const useTreeViewItemsReordering = ({
       },
       'move-to-parent': targetItemMeta.parentId == null ? null : {
         parentId: targetItemMeta.parentId,
-        index: instance.getItemOrderedChildrenIds(targetItemMeta.parentId).length
+        index: selectorItemOrderedChildrenIds(store.value, targetItemMeta.parentId).length
       }
     };
     const validActions = {};
@@ -78,9 +78,9 @@ export const useTreeViewItemsReordering = ({
       }
     });
     return validActions;
-  }, [instance, state.itemsReordering, params.canMoveItemToNewPosition]);
+  }, [store, params.canMoveItemToNewPosition]);
   const startDraggingItem = React.useCallback(itemId => {
-    setState(prevState => _extends({}, prevState, {
+    store.update(prevState => _extends({}, prevState, {
       itemsReordering: {
         targetItemId: itemId,
         draggedItemId: itemId,
@@ -88,24 +88,25 @@ export const useTreeViewItemsReordering = ({
         newPosition: null
       }
     }));
-  }, [setState]);
+  }, [store]);
   const stopDraggingItem = React.useCallback(itemId => {
-    if (state.itemsReordering == null || state.itemsReordering.draggedItemId !== itemId) {
+    const itemsReordering = selectorItemsReordering(store.value);
+    if (itemsReordering == null || itemsReordering.draggedItemId !== itemId) {
       return;
     }
-    if (state.itemsReordering.draggedItemId === state.itemsReordering.targetItemId || state.itemsReordering.action == null || state.itemsReordering.newPosition == null) {
-      setState(prevState => _extends({}, prevState, {
+    if (itemsReordering.draggedItemId === itemsReordering.targetItemId || itemsReordering.action == null || itemsReordering.newPosition == null) {
+      store.update(prevState => _extends({}, prevState, {
         itemsReordering: null
       }));
       return;
     }
-    const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
+    const draggedItemMeta = selectorItemMeta(store.value, itemsReordering.draggedItemId);
     const oldPosition = {
       parentId: draggedItemMeta.parentId,
-      index: instance.getItemIndex(draggedItemMeta.id)
+      index: selectorItemIndex(store.value, draggedItemMeta.id)
     };
-    const newPosition = state.itemsReordering.newPosition;
-    setState(prevState => _extends({}, prevState, {
+    const newPosition = itemsReordering.newPosition;
+    store.update(prevState => _extends({}, prevState, {
       itemsReordering: null,
       items: moveItemInTree({
         itemToMoveId: itemId,
@@ -120,7 +121,7 @@ export const useTreeViewItemsReordering = ({
       newPosition,
       oldPosition
     });
-  }, [setState, state.itemsReordering, instance, params.onItemPositionChange]);
+  }, [store, params.onItemPositionChange]);
   const setDragTargetItem = React.useCallback(({
     itemId,
     validActions,
@@ -129,16 +130,16 @@ export const useTreeViewItemsReordering = ({
     cursorX,
     contentElement
   }) => {
-    setState(prevState => {
+    store.update(prevState => {
       const prevSubState = prevState.itemsReordering;
-      if (prevSubState == null || isAncestor(instance, itemId, prevSubState.draggedItemId)) {
+      if (prevSubState == null || isAncestor(store, itemId, prevSubState.draggedItemId)) {
         return prevState;
       }
       const action = chooseActionToApply({
         itemChildrenIndentation: params.itemChildrenIndentation,
         validActions,
         targetHeight,
-        targetDepth: prevState.items.itemMetaMap[itemId].depth,
+        targetDepth: prevState.items.itemMetaLookup[itemId].depth,
         cursorY,
         cursorX,
         contentElement
@@ -155,7 +156,13 @@ export const useTreeViewItemsReordering = ({
         })
       });
     });
-  }, [instance, setState, params.itemChildrenIndentation]);
+  }, [store, params.itemChildrenIndentation]);
+  const pluginContextValue = React.useMemo(() => ({
+    itemsReordering: {
+      enabled: params.itemsReordering,
+      isItemReorderable: params.isItemReorderable
+    }
+  }), [params.itemsReordering, params.isItemReorderable]);
   return {
     instance: {
       canItemBeDragged,
@@ -164,12 +171,7 @@ export const useTreeViewItemsReordering = ({
       stopDraggingItem,
       setDragTargetItem
     },
-    contextValue: {
-      itemsReordering: {
-        enabled: params.itemsReordering,
-        currentDrag: state.itemsReordering
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;

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

@@ -0,0 +1,159 @@
+import { TreeViewState } from '@mui/x-tree-view/internals';
+import { UseTreeViewItemsReorderingSignature } from './useTreeViewItemsReordering.types';
+/**
+ * Get the items reordering state.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemsReorderingState | null} The items reordering state.
+ */
+export declare const selectorItemsReordering: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
+    draggedItemId: string;
+    targetItemId: string;
+    newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+    action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+} | null;
+/**
+ * Get the properties of the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
+ */
+export declare const selectorItemsReorderingDraggedItemProperties: ((state: any, itemId: string) => {
+    newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+    action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
+    targetDepth: number;
+} | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+    } | null, resultFuncArgs_1: import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup, resultFuncArgs_2: string) => {
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
+        targetDepth: number;
+    } | null;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+    } | null, resultFuncArgs_1: import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup, resultFuncArgs_2: string) => {
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
+        targetDepth: number;
+    } | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
+        targetDepth: number;
+    } | null;
+    dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+    } | null, ((state: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("@mui/x-tree-view/internals").UseTreeViewItemsState<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties> & Partial<{}> & {
+        cacheKey: import("@mui/x-tree-view/internals/models").TreeViewStateCacheKey;
+    }) => import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: {
+            disabledItemsFocusable: boolean;
+            itemModelLookup: import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemModelLookup<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties>;
+            itemMetaLookup: import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+            itemOrderedChildrenIdsLookup: {
+                [parentItemId: string]: string[];
+            };
+            itemChildrenIndexesLookup: {
+                [parentItemId: string]: {
+                    [itemId: string]: number;
+                };
+            };
+        }) => import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            disabledItemsFocusable: boolean;
+            itemModelLookup: import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemModelLookup<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties>;
+            itemMetaLookup: import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+            itemOrderedChildrenIdsLookup: {
+                [parentItemId: string]: string[];
+            };
+            itemChildrenIndexesLookup: {
+                [parentItemId: string]: {
+                    [itemId: string]: number;
+                };
+            };
+        }) => import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => import("@mui/x-tree-view/internals/plugins/useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+        dependencies: [import("@mui/x-tree-view/internals/utils/selectors").TreeViewRootSelector<import("@mui/x-tree-view/internals").UseTreeViewItemsSignature>];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if the current item is a valid target for the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
+ */
+export declare const selectorItemsReorderingIsValidTarget: ((state: any, itemId: string) => boolean | null) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+    } | null, resultFuncArgs_1: string) => boolean | null;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+    } | null, resultFuncArgs_1: string) => boolean | null) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => boolean | null;
+    dependencies: [(state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
+        draggedItemId: string;
+        targetItemId: string;
+        newPosition: import("./useTreeViewItemsReordering.types").TreeViewItemReorderPosition | null;
+        action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+    } | null, (_: any, itemId: string) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js

@@ -0,0 +1,35 @@
+import { createSelector, selectorItemMetaLookup } from '@mui/x-tree-view/internals';
+/**
+ * Get the items reordering state.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @returns {TreeViewItemsReorderingState | null} The items reordering state.
+ */
+export const selectorItemsReordering = state => state.itemsReordering;
+
+/**
+ * Get the properties of the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {TreeViewItemDraggedItemProperties | null} The properties of the dragged item if the current item is being dragged, `null` otherwise.
+ */
+export const selectorItemsReorderingDraggedItemProperties = createSelector([selectorItemsReordering, selectorItemMetaLookup, (_, itemId) => itemId], (itemsReordering, itemMetaLookup, itemId) => {
+  if (!itemsReordering || itemsReordering.targetItemId !== itemId || itemsReordering.action == null) {
+    return null;
+  }
+  const targetDepth = itemsReordering.newPosition?.parentId == null ? 0 :
+  // The depth is always defined because drag&drop is only usable with Rich Tree View components.
+  itemMetaLookup[itemId].depth + 1;
+  return {
+    newPosition: itemsReordering.newPosition,
+    action: itemsReordering.action,
+    targetDepth
+  };
+});
+
+/**
+ * Check if the current item is a valid target for the dragged item.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @param {string} itemId The id of the item.
+ * @returns {boolean} `true` if the current item is a valid target for the dragged item, `false` otherwise.
+ */
+export const selectorItemsReorderingIsValidTarget = createSelector([selectorItemsReordering, (_, itemId) => itemId], (itemsReordering, itemId) => itemsReordering && itemsReordering.draggedItemId !== itemId);

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

@@ -106,7 +106,7 @@ export interface UseTreeViewItemsReorderingState {
 interface UseTreeViewItemsReorderingContextValue {
     itemsReordering: {
         enabled: boolean;
-        currentDrag: UseTreeViewItemsReorderingState['itemsReordering'];
+        isItemReorderable: ((itemId: string) => boolean) | undefined;
     };
 }
 export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{

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

@@ -1,10 +1,10 @@
-import { TreeViewInstance, UseTreeViewItemsSignature, UseTreeViewItemsState } from '@mui/x-tree-view/internals';
+import { TreeViewUsedStore, UseTreeViewItemsState } from '@mui/x-tree-view/internals';
 import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
-import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition } from './useTreeViewItemsReordering.types';
+import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, UseTreeViewItemsReorderingSignature } from './useTreeViewItemsReordering.types';
 /**
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
-export declare const isAncestor: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, itemIdA: string, itemIdB: string) => boolean;
+export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
 interface GetNewPositionParams {
     itemChildrenIndentation: string | number;
     validActions: TreeViewItemItemReorderingValidActions;
@@ -15,9 +15,7 @@ interface GetNewPositionParams {
     contentElement: HTMLDivElement;
 }
 export declare const chooseActionToApply: ({ itemChildrenIndentation, validActions, targetHeight, targetDepth, cursorX, cursorY, contentElement, }: GetNewPositionParams) => TreeViewItemsReorderingAction | null;
-export declare const moveItemInTree: <R extends {
-    children?: R[];
-}>({ itemToMoveId, oldPosition, newPosition, prevState, }: {
+export declare const moveItemInTree: <R extends {}>({ itemToMoveId, oldPosition, newPosition, prevState, }: {
     itemToMoveId: TreeViewItemId;
     oldPosition: TreeViewItemReorderPosition;
     newPosition: TreeViewItemReorderPosition;

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '@mui/x-tree-view/internals';
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID, selectorItemMeta } from '@mui/x-tree-view/internals';
 /**
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
-export const isAncestor = (instance, itemIdA, itemIdB) => {
-  const itemMetaA = instance.getItemMeta(itemIdA);
+export const isAncestor = (store, itemIdA, itemIdB) => {
+  const itemMetaA = selectorItemMeta(store.value, itemIdA);
   if (itemMetaA.parentId === itemIdB) {
     return true;
   }
   if (itemMetaA.parentId == null) {
     return false;
   }
-  return isAncestor(instance, itemMetaA.parentId, itemIdB);
+  return isAncestor(store, itemMetaA.parentId, itemIdB);
 };
 
 /**
@@ -88,12 +88,12 @@ export const moveItemInTree = ({
   newPosition,
   prevState
 }) => {
-  const itemToMoveMeta = prevState.itemMetaMap[itemToMoveId];
+  const itemToMoveMeta = prevState.itemMetaLookup[itemToMoveId];
   const oldParentId = oldPosition.parentId ?? TREE_VIEW_ROOT_PARENT_ID;
   const newParentId = newPosition.parentId ?? TREE_VIEW_ROOT_PARENT_ID;
 
   // 1. Update the `itemOrderedChildrenIds`.
-  const itemOrderedChildrenIds = _extends({}, prevState.itemOrderedChildrenIds);
+  const itemOrderedChildrenIds = _extends({}, prevState.itemOrderedChildrenIdsLookup);
   if (oldParentId === newParentId) {
     const updatedChildren = [...itemOrderedChildrenIds[oldParentId]];
     updatedChildren.splice(oldPosition.index, 1);
@@ -109,42 +109,50 @@ export const moveItemInTree = ({
   }
 
   // 2. Update the `itemChildrenIndexes`
-  const itemChildrenIndexes = _extends({}, prevState.itemChildrenIndexes);
+  const itemChildrenIndexes = _extends({}, prevState.itemChildrenIndexesLookup);
   itemChildrenIndexes[oldParentId] = buildSiblingIndexes(itemOrderedChildrenIds[oldParentId]);
   if (newParentId !== oldParentId) {
     itemChildrenIndexes[newParentId] = buildSiblingIndexes(itemOrderedChildrenIds[newParentId]);
   }
 
-  // 3. Update the `itemMetaMap`
-  const itemMetaMap = _extends({}, prevState.itemMetaMap);
+  // 3. Update the `itemMetaLookup`
+  const itemMetaLookup = _extends({}, prevState.itemMetaLookup);
 
   // 3.1 Update the `expandable` property of the old and the new parent
+  function updateExpandable(itemId) {
+    const isExpandable = itemOrderedChildrenIds[itemId].length > 0;
+    if (itemMetaLookup[itemId].expandable !== isExpandable) {
+      itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
+        expandable: isExpandable
+      });
+    }
+  }
   if (oldParentId !== TREE_VIEW_ROOT_PARENT_ID && oldParentId !== newParentId) {
-    itemMetaMap[oldParentId].expandable = itemOrderedChildrenIds[oldParentId].length > 0;
+    updateExpandable(oldParentId);
   }
   if (newParentId !== TREE_VIEW_ROOT_PARENT_ID && newParentId !== oldParentId) {
-    itemMetaMap[newParentId].expandable = itemOrderedChildrenIds[newParentId].length > 0;
+    updateExpandable(newParentId);
   }
 
   // 3.2 Update the `parentId` and `depth` properties of the item to move
   // The depth is always defined because drag&drop is only usable with Rich Tree View components.
-  const itemToMoveDepth = newPosition.parentId == null ? 0 : itemMetaMap[newParentId].depth + 1;
-  itemMetaMap[itemToMoveId] = _extends({}, itemToMoveMeta, {
+  const itemToMoveDepth = newPosition.parentId == null ? 0 : itemMetaLookup[newParentId].depth + 1;
+  itemMetaLookup[itemToMoveId] = _extends({}, itemToMoveMeta, {
     parentId: newPosition.parentId,
     depth: itemToMoveDepth
   });
 
   // 3.3 Update the depth of all the children of the item to move
   const updateItemDepth = (itemId, depth) => {
-    itemMetaMap[itemId] = _extends({}, itemMetaMap[itemId], {
+    itemMetaLookup[itemId] = _extends({}, itemMetaLookup[itemId], {
       depth
     });
     itemOrderedChildrenIds[itemId]?.forEach(childId => updateItemDepth(childId, depth + 1));
   };
   itemOrderedChildrenIds[itemToMoveId]?.forEach(childId => updateItemDepth(childId, itemToMoveDepth + 1));
   return _extends({}, prevState, {
-    itemOrderedChildrenIds,
-    itemChildrenIndexes,
-    itemMetaMap
+    itemOrderedChildrenIdsLookup: itemOrderedChildrenIds,
+    itemChildrenIndexesLookup: itemChildrenIndexes,
+    itemMetaLookup
   });
 };

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
-import { ponyfillGlobal } from '@mui/utils';
+import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat