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

package/RichTreeViewPro/RichTreeViewPro.types.d.ts

@@ -2,31 +2,18 @@ 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 { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
-import { TreeViewItemId } from '@mui/x-tree-view/models';
-import { TreeViewPublicAPI, TreeViewExperimentalFeatures } from '@mui/x-tree-view/internals';
+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> | React.JSXElementConstructor<TreeItem2Props>;
 }
-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> {
@@ -62,4 +49,3 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
      */
     experimentalFeatures?: TreeViewExperimentalFeatures<RichTreeViewProPluginSignatures>;
 }
-export {};

package/index.d.ts

@@ -1,13 +1,11 @@
-export * from '@mui/x-tree-view/TreeView';
 export * from '@mui/x-tree-view/SimpleTreeView';
 export * from './RichTreeViewPro';
 export * from '@mui/x-tree-view/TreeItem';
-export * from '@mui/x-tree-view/TreeItem2';
-export * from '@mui/x-tree-view/useTreeItem2';
-export * from '@mui/x-tree-view/TreeItem2Icon';
-export * from '@mui/x-tree-view/TreeItem2Provider';
-export * from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
-export * from '@mui/x-tree-view/TreeItem2LabelInput';
+export * from '@mui/x-tree-view/useTreeItem';
+export * from '@mui/x-tree-view/TreeItemIcon';
+export * from '@mui/x-tree-view/TreeItemProvider';
+export * from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+export * from '@mui/x-tree-view/TreeItemLabelInput';
 export { unstable_resetCleanupTracking } from '@mui/x-tree-view/internals';
 export * from '@mui/x-tree-view/models';
 export * from '@mui/x-tree-view/icons';

package/index.js

@@ -1,23 +1,21 @@
 /**
- * @mui/x-tree-view-pro v7.22.1
+ * @mui/x-tree-view-pro v8.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Tree View
-export * from '@mui/x-tree-view/TreeView';
 export * from '@mui/x-tree-view/SimpleTreeView';
 export * from "./RichTreeViewPro/index.js";
 
 // Tree Item
 export * from '@mui/x-tree-view/TreeItem';
-export * from '@mui/x-tree-view/TreeItem2';
-export * from '@mui/x-tree-view/useTreeItem2';
-export * from '@mui/x-tree-view/TreeItem2Icon';
-export * from '@mui/x-tree-view/TreeItem2Provider';
-export * from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
-export * from '@mui/x-tree-view/TreeItem2LabelInput';
+export * from '@mui/x-tree-view/useTreeItem';
+export * from '@mui/x-tree-view/TreeItemIcon';
+export * from '@mui/x-tree-view/TreeItemProvider';
+export * from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
+export * from '@mui/x-tree-view/TreeItemLabelInput';
 export { unstable_resetCleanupTracking } from '@mui/x-tree-view/internals';
 export * from '@mui/x-tree-view/models';
 export * from '@mui/x-tree-view/icons';

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

@@ -1,4 +1,3 @@
 import { TreeViewItemPlugin } from '@mui/x-tree-view/internals';
-import { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
 export declare const isAndroid: () => boolean;
-export declare const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2Props>;
+export declare const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin;

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;
@@ -177,10 +179,10 @@ useTreeViewItemsReordering.getDefaultizedParams = ({
   params,
   experimentalFeatures
 }) => {
-  const canUseFeature = experimentalFeatures?.indentationAtItemLevel && experimentalFeatures?.itemsReordering;
+  const canUseFeature = experimentalFeatures?.itemsReordering;
   if (process.env.NODE_ENV !== 'production') {
     if (params.itemsReordering && !canUseFeature) {
-      warnOnce(['MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.', 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
+      warnOnce(['MUI X: The items reordering feature requires the `itemsReordering` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ itemsReordering: true }}` to the `<RichTreeViewPro />`component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/']);
     }
   }
   return _extends({}, params, {

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { DefaultizedProps, TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
 import { TreeViewItemId, TreeViewItemsReorderingAction, TreeViewCancellableEventHandler } from '@mui/x-tree-view/models';
-import { TreeItem2DragAndDropOverlayProps } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
 export interface UseTreeViewItemsReorderingInstance {
     /**
      * Check if a given item can be dragged.
@@ -105,7 +106,7 @@ export interface UseTreeViewItemsReorderingState {
 interface UseTreeViewItemsReorderingContextValue {
     itemsReordering: {
         enabled: boolean;
-        currentDrag: UseTreeViewItemsReorderingState['itemsReordering'];
+        isItemReorderable: ((itemId: string) => boolean) | undefined;
     };
 }
 export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
@@ -117,24 +118,24 @@ export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
     experimentalFeatures: 'itemsReordering';
     dependencies: [UseTreeViewItemsSignature];
 }>;
-export interface UseTreeItem2RootSlotPropsFromItemsReordering {
+export interface UseTreeItemRootSlotPropsFromItemsReordering {
     draggable?: true;
     onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
     onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
     onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
 }
-export interface UseTreeItem2ContentSlotPropsFromItemsReordering {
+export interface UseTreeItemContentSlotPropsFromItemsReordering {
     onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
     onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
 }
-export interface UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering extends TreeItem2DragAndDropOverlayProps {
+export interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {
 }
-declare module '@mui/x-tree-view/useTreeItem2' {
-    interface UseTreeItem2RootSlotOwnProps extends UseTreeItem2RootSlotPropsFromItemsReordering {
+declare module '@mui/x-tree-view/useTreeItem' {
+    interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {
     }
-    interface UseTreeItem2ContentSlotOwnProps extends UseTreeItem2ContentSlotPropsFromItemsReordering {
+    interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {
     }
-    interface UseTreeItem2DragAndDropOverlaySlotOwnProps extends UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering {
+    interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {
     }
 }
 export {};

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;