@mui/x-tree-view-pro 8.23.0 → 8.24.0

package/esm/RichTreeViewPro/useExtractRichTreeViewProParameters.js

@@ -0,0 +1,99 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "onItemLabelChange", "isItemEditable", "dataSource", "dataSourceCache", "itemsReordering", "isItemReorderable", "canMoveItemToNewPosition", "onItemPositionChange"];
+import * as React from 'react';
+export function useExtractRichTreeViewProParameters(props) {
+  const {
+      // Props for Provider
+      apiRef,
+      slots,
+      slotProps,
+      // Shared parameters
+      disabledItemsFocusable,
+      items,
+      isItemDisabled,
+      isItemSelectionDisabled,
+      getItemLabel,
+      getItemChildren,
+      getItemId,
+      onItemClick,
+      itemChildrenIndentation,
+      id,
+      expandedItems,
+      defaultExpandedItems,
+      onExpandedItemsChange,
+      onItemExpansionToggle,
+      expansionTrigger,
+      disableSelection,
+      selectedItems,
+      defaultSelectedItems,
+      multiSelect,
+      checkboxSelection,
+      selectionPropagation,
+      onSelectedItemsChange,
+      onItemSelectionToggle,
+      onItemFocus,
+      // RichTreeViewStore parameters
+      onItemLabelChange,
+      isItemEditable,
+      // RichTreeViewProStore parameters
+      dataSource,
+      dataSourceCache,
+      itemsReordering,
+      isItemReorderable,
+      canMoveItemToNewPosition,
+      onItemPositionChange
+
+      // Forwarded props
+    } = props,
+    forwardedProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const parameters = React.useMemo(() => ({
+    // Shared parameters
+    disabledItemsFocusable,
+    items,
+    isItemDisabled,
+    isItemSelectionDisabled,
+    getItemLabel,
+    getItemChildren,
+    getItemId,
+    onItemClick,
+    itemChildrenIndentation,
+    id,
+    expandedItems,
+    defaultExpandedItems,
+    onExpandedItemsChange,
+    onItemExpansionToggle,
+    expansionTrigger,
+    disableSelection,
+    selectedItems,
+    defaultSelectedItems,
+    multiSelect,
+    checkboxSelection,
+    selectionPropagation,
+    onSelectedItemsChange,
+    onItemSelectionToggle,
+    onItemFocus,
+    // RichTreeViewStore parameters
+    onItemLabelChange,
+    isItemEditable,
+    // RichTreeViewProStore parameters
+    dataSource,
+    dataSourceCache,
+    itemsReordering,
+    isItemReorderable,
+    canMoveItemToNewPosition,
+    onItemPositionChange
+  }), [
+  // Shared parameters
+  disabledItemsFocusable, items, isItemDisabled, isItemSelectionDisabled, getItemLabel, getItemChildren, getItemId, onItemClick, itemChildrenIndentation, id, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpansionToggle, expansionTrigger, disableSelection, selectedItems, defaultSelectedItems, multiSelect, checkboxSelection, selectionPropagation, onSelectedItemsChange, onItemSelectionToggle, onItemFocus,
+  // RichTreeViewStore parameters
+  onItemLabelChange, isItemEditable,
+  // RichTreeViewProStore parameters
+  dataSource, dataSourceCache, itemsReordering, isItemReorderable, canMoveItemToNewPosition, onItemPositionChange]);
+  return {
+    apiRef,
+    slots,
+    slotProps,
+    parameters,
+    forwardedProps
+  };
+}

package/esm/hooks/useRichTreeViewProApiRef.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TreeViewPublicAPI } from '@mui/x-tree-view/internals';
 import { TreeViewDefaultItemModelProperties, TreeViewValidItem } from '@mui/x-tree-view/models';
-import { RichTreeViewProPluginSignatures } from "../RichTreeViewPro/index.js";
+import { RichTreeViewProStore } from "../internals/RichTreeViewProStore/index.js";
 /**
  * Creates the ref to pass to the `apiRef` prop of the `RichTreeViewPro` component.
  */
-export declare function useRichTreeViewProApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewProPluginSignatures> | undefined>;
+export declare function useRichTreeViewProApiRef<R extends TreeViewValidItem<R> = TreeViewDefaultItemModelProperties>(): React.RefObject<TreeViewPublicAPI<RichTreeViewProStore<R, boolean>> | undefined>;

package/esm/index.d.ts

@@ -6,7 +6,6 @@ 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';
 export * from '@mui/x-tree-view/hooks';

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.23.0
+ * @mui/x-tree-view-pro v8.24.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -16,7 +16,6 @@ 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';
 export * from '@mui/x-tree-view/hooks';

package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.d.ts

@@ -0,0 +1,49 @@
+import { ExtendableRichTreeViewStore } from '@mui/x-tree-view/internals';
+import { TreeViewValidItem } from '@mui/x-tree-view/models';
+import { RichTreeViewProStoreParameters, RichTreeViewProState } from "./RichTreeViewProStore.types.js";
+import { TreeViewLazyLoadingPlugin } from "../plugins/lazyLoading/index.js";
+import { TreeViewItemsReorderingPlugin } from "../plugins/itemsReordering/index.js";
+export declare class RichTreeViewProStore<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends ExtendableRichTreeViewStore<R, Multiple, RichTreeViewProState<R, Multiple>, RichTreeViewProStoreParameters<R, Multiple>> {
+  lazyLoading: TreeViewLazyLoadingPlugin;
+  itemsReordering: TreeViewItemsReorderingPlugin;
+  constructor(parameters: RichTreeViewProStoreParameters<R, Multiple>);
+  buildPublicAPI(): {
+    updateItemChildren: (itemId: import("@mui/x-tree-view").TreeViewItemId | null) => Promise<void>;
+    setEditedItem: (itemId: import("@mui/x-tree-view").TreeViewItemId | null) => void;
+    updateItemLabel: (itemId: import("@mui/x-tree-view").TreeViewItemId, label: string) => void;
+    setItemSelection: ({
+      itemId,
+      event,
+      keepExistingSelection,
+      shouldBeSelected
+    }: {
+      itemId: string;
+      event?: React.SyntheticEvent | null;
+      shouldBeSelected?: boolean;
+      keepExistingSelection?: boolean;
+    }) => void;
+    isItemExpanded: (itemId: import("@mui/x-tree-view").TreeViewItemId) => boolean;
+    setItemExpansion: ({
+      itemId,
+      event,
+      shouldBeExpanded
+    }: {
+      itemId: import("@mui/x-tree-view").TreeViewItemId;
+      event?: React.SyntheticEvent | null;
+      shouldBeExpanded?: boolean;
+    }) => void;
+    focusItem: (event: React.SyntheticEvent | null, itemId: import("@mui/x-tree-view").TreeViewItemId) => void;
+    getItem: (itemId: import("@mui/x-tree-view").TreeViewItemId) => R;
+    getItemDOMElement: (itemId: import("@mui/x-tree-view").TreeViewItemId) => HTMLElement | null;
+    getItemOrderedChildrenIds: (itemId: import("@mui/x-tree-view").TreeViewItemId | null) => import("@mui/x-tree-view").TreeViewItemId[];
+    getItemTree: () => R[];
+    getParentId: (itemId: import("@mui/x-tree-view").TreeViewItemId) => import("@mui/x-tree-view").TreeViewItemId | null;
+    setIsItemDisabled: ({
+      itemId,
+      shouldBeDisabled
+    }: {
+      itemId: import("@mui/x-tree-view").TreeViewItemId;
+      shouldBeDisabled?: boolean;
+    }) => void;
+  };
+}

package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { ExtendableRichTreeViewStore } from '@mui/x-tree-view/internals';
+import { TreeViewLazyLoadingPlugin } from "../plugins/lazyLoading/index.js";
+import { TreeViewItemsReorderingPlugin } from "../plugins/itemsReordering/index.js";
+import { parametersToStateMapper } from "./RichTreeViewProStore.utils.js";
+export class RichTreeViewProStore extends ExtendableRichTreeViewStore {
+  itemsReordering = (() => new TreeViewItemsReorderingPlugin(this))();
+  constructor(parameters) {
+    super(parameters, 'RichTreeViewPro', parametersToStateMapper);
+    this.lazyLoading = new TreeViewLazyLoadingPlugin(this);
+  }
+  buildPublicAPI() {
+    return _extends({}, super.buildPublicAPI(), this.lazyLoading.buildPublicAPI());
+  }
+}

package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.types.d.ts

@@ -0,0 +1,69 @@
+import { RichTreeViewStoreParameters, RichTreeViewState } from '@mui/x-tree-view/internals';
+import { TreeViewItemId, TreeViewItemsReorderingAction, TreeViewValidItem } from '@mui/x-tree-view/models';
+import { DataSourceCache } from '@mui/x-tree-view/utils';
+import { TreeViewItemReorderPosition } from "../plugins/itemsReordering/index.js";
+import { DataSource } from "../plugins/lazyLoading/index.js";
+export interface RichTreeViewProState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends RichTreeViewState<R, Multiple> {
+  /**
+   * Determine if a given item can be reordered.
+   * @param {TreeViewItemId} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item can be reordered.
+   */
+  isItemReorderable: (itemId: TreeViewItemId) => boolean;
+  /**
+   * The current ongoing reordering operation.
+   */
+  currentReorder: {
+    draggedItemId: TreeViewItemId;
+    targetItemId: TreeViewItemId;
+    newPosition: TreeViewItemReorderPosition | null;
+    action: TreeViewItemsReorderingAction | null;
+  } | null;
+}
+export interface RichTreeViewProStoreParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends RichTreeViewStoreParameters<R, Multiple> {
+  /**
+   * The data source object.
+   */
+  dataSource?: DataSource<R>;
+  /**
+   * The data source cache object.
+   */
+  dataSourceCache?: DataSourceCache;
+  /**
+   * If `true`, the reordering of items is enabled.
+   * @default false
+   */
+  itemsReordering?: boolean;
+  /**
+   * Determine if a given item can be reordered.
+   * @param {TreeViewItemId} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item can be reordered.
+   * @default () => true
+   */
+  isItemReorderable?: (itemId: TreeViewItemId) => boolean;
+  /**
+   * Used to determine if a given item can move to some new position.
+   * @param {object} parameters The params describing the item re-ordering.
+   * @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
+   * @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
+   * @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
+   * @returns {boolean} `true` if the item can move to the new position.
+   */
+  canMoveItemToNewPosition?: (parameters: {
+    itemId: TreeViewItemId;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+  }) => boolean;
+  /**
+   * Callback fired when a Tree Item is moved in the tree.
+   * @param {object} parameters The params describing the item re-ordering.
+   * @param {TreeViewItemId} parameters.itemId The id of the item moved.
+   * @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
+   * @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
+   */
+  onItemPositionChange?: (parameters: {
+    itemId: TreeViewItemId;
+    oldPosition: TreeViewItemReorderPosition;
+    newPosition: TreeViewItemReorderPosition;
+  }) => void;
+}

package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.utils.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewParametersToStateMapper } from '@mui/x-tree-view/internals';
+import { RichTreeViewProStoreParameters, RichTreeViewProState } from "./RichTreeViewProStore.types.js";
+export declare const parametersToStateMapper: TreeViewParametersToStateMapper<any, any, RichTreeViewProState<any, any>, RichTreeViewProStoreParameters<any, any>>;

package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.utils.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { ExtendableRichTreeViewStore } from '@mui/x-tree-view/internals';
+import { TREE_VIEW_LAZY_LOADED_ITEMS_INITIAL_STATE } from "../plugins/lazyLoading/index.js";
+const DEFAULT_IS_ITEM_REORDERABLE_WHEN_ENABLED = () => true;
+const DEFAULT_IS_ITEM_REORDERABLE_WHEN_DISABLED = () => false;
+const deriveStateFromParameters = parameters => ({
+  lazyLoadedItems: parameters.dataSource ? TREE_VIEW_LAZY_LOADED_ITEMS_INITIAL_STATE : null,
+  currentReorder: null,
+  isItemReorderable: parameters.itemsReordering ? parameters.isItemReorderable ?? DEFAULT_IS_ITEM_REORDERABLE_WHEN_ENABLED : DEFAULT_IS_ITEM_REORDERABLE_WHEN_DISABLED
+});
+export const parametersToStateMapper = {
+  getInitialState: (minimalInitialState, parameters) => _extends({}, ExtendableRichTreeViewStore.rawMapper.getInitialState(minimalInitialState, parameters), deriveStateFromParameters(parameters)),
+  updateStateFromParameters: (newMinimalState, parameters, updateModel) => {
+    const newState = _extends({}, ExtendableRichTreeViewStore.rawMapper.updateStateFromParameters(newMinimalState, parameters, updateModel), deriveStateFromParameters(parameters));
+    return newState;
+  },
+  shouldIgnoreItemsStateUpdate: parameters => !!parameters.dataSource
+};

package/esm/internals/RichTreeViewProStore/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RichTreeViewProStore.js";
+export * from "./RichTreeViewProStore.types.js";

package/esm/internals/RichTreeViewProStore/index.js

@@ -0,0 +1,2 @@
+export * from "./RichTreeViewProStore.js";
+export * from "./RichTreeViewProStore.types.js";

package/esm/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.d.ts

@@ -0,0 +1,53 @@
+import { TreeViewItemId } from '@mui/x-tree-view/models';
+import { TreeViewItemItemReorderingValidActions } from "./types.js";
+import { RichTreeViewProStore } from "../../RichTreeViewProStore/RichTreeViewProStore.js";
+export declare class TreeViewItemsReorderingPlugin {
+  private store;
+  constructor(store: RichTreeViewProStore<any, any>);
+  /**
+   * Get the valid reordering action if a given item is the target of the ongoing reordering.
+   * @param {TreeViewItemId} itemId The id of the item to get the action of.
+   * @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
+   */
+  getDroppingTargetValidActions: (itemId: string) => TreeViewItemItemReorderingValidActions;
+  /**
+   * Start a reordering for the given item.
+   * @param {TreeViewItemId} itemId The id of the item to start the reordering for.
+   */
+  startDraggingItem: (itemId: string) => void;
+  /**
+   * Cancel the current reordering operation and reset the state.
+   */
+  cancelDraggingItem: () => void;
+  /**
+   * Complete the reordering of a given item.
+   * @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
+   */
+  completeDraggingItem: (itemId: string) => void;
+  /**
+   * Set the new target item for the ongoing reordering.
+   * The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
+   * @param {object} params The params describing the new target item.
+   * @param {TreeViewItemId} params.itemId The id of the new target item.
+   * @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
+   * @param {number} params.targetHeight The height of the target item.
+   * @param {number} params.cursorY The Y coordinate of the mouse cursor.
+   * @param {number} params.cursorX The X coordinate of the mouse cursor.
+   * @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
+   */
+  setDragTargetItem: ({
+    itemId,
+    validActions,
+    targetHeight,
+    cursorY,
+    cursorX,
+    contentElement
+  }: {
+    itemId: TreeViewItemId;
+    validActions: TreeViewItemItemReorderingValidActions;
+    targetHeight: number;
+    cursorY: number;
+    cursorX: number;
+    contentElement: HTMLDivElement;
+  }) => void;
+}

package/esm/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.js

@@ -0,0 +1,180 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { itemsSelectors, labelSelectors } from '@mui/x-tree-view/internals';
+import { itemsReorderingSelectors } from "./selectors.js";
+import { chooseActionToApply, isAncestor, moveItemInTree } from "./utils.js";
+import { useTreeViewItemsReorderingItemPlugin } from "./itemPlugin.js";
+export class TreeViewItemsReorderingPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(useTreeViewItemsReorderingItemPlugin, null);
+  }
+
+  /**
+   * Get the valid reordering action if a given item is the target of the ongoing reordering.
+   * @param {TreeViewItemId} itemId The id of the item to get the action of.
+   * @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
+   */
+  getDroppingTargetValidActions = itemId => {
+    const currentReorder = itemsReorderingSelectors.currentReorder(this.store.state);
+    if (!currentReorder) {
+      throw new Error('There is no ongoing reordering.');
+    }
+    if (itemId === currentReorder.draggedItemId) {
+      return {};
+    }
+    const canMoveItemToNewPosition = this.store.parameters.canMoveItemToNewPosition;
+    const targetItemMeta = itemsSelectors.itemMeta(this.store.state, itemId);
+    const targetItemIndex = itemsSelectors.itemIndex(this.store.state, targetItemMeta.id);
+    const draggedItemMeta = itemsSelectors.itemMeta(this.store.state, currentReorder.draggedItemId);
+    const draggedItemIndex = itemsSelectors.itemIndex(this.store.state, draggedItemMeta.id);
+    const isTargetLastSibling = targetItemIndex === itemsSelectors.itemOrderedChildrenIds(this.store.state, targetItemMeta.parentId).length - 1;
+    const oldPosition = {
+      parentId: draggedItemMeta.parentId,
+      index: draggedItemIndex
+    };
+    const checkIfPositionIsValid = positionAfterAction => {
+      let isValid;
+      // If the new position is equal to the old one, we don't want to show any dropping UI.
+      if (positionAfterAction.parentId === oldPosition.parentId && positionAfterAction.index === oldPosition.index) {
+        isValid = false;
+      } else if (canMoveItemToNewPosition) {
+        isValid = canMoveItemToNewPosition({
+          itemId: currentReorder.draggedItemId,
+          oldPosition,
+          newPosition: positionAfterAction
+        });
+      } else {
+        isValid = true;
+      }
+      return isValid;
+    };
+    const positionsAfterAction = {
+      'make-child': {
+        parentId: targetItemMeta.id,
+        index: 0
+      },
+      'reorder-above': {
+        parentId: targetItemMeta.parentId,
+        index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
+      },
+      'reorder-below': !targetItemMeta.expandable || isTargetLastSibling ? {
+        parentId: targetItemMeta.parentId,
+        index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
+      } : null,
+      'move-to-parent': targetItemMeta.parentId == null ? null : {
+        parentId: targetItemMeta.parentId,
+        index: itemsSelectors.itemOrderedChildrenIds(this.store.state, targetItemMeta.parentId).length
+      }
+    };
+    const validActions = {};
+    Object.keys(positionsAfterAction).forEach(action => {
+      const positionAfterAction = positionsAfterAction[action];
+      if (positionAfterAction != null && checkIfPositionIsValid(positionAfterAction)) {
+        validActions[action] = positionAfterAction;
+      }
+    });
+    return validActions;
+  };
+
+  /**
+   * Start a reordering for the given item.
+   * @param {TreeViewItemId} itemId The id of the item to start the reordering for.
+   */
+  startDraggingItem = itemId => {
+    const isItemBeingEdited = labelSelectors.isItemBeingEdited(this.store.state, itemId);
+    if (isItemBeingEdited) {
+      return;
+    }
+    this.store.set('currentReorder', {
+      targetItemId: itemId,
+      draggedItemId: itemId,
+      action: null,
+      newPosition: null
+    });
+  };
+
+  /**
+   * Cancel the current reordering operation and reset the state.
+   */
+  cancelDraggingItem = () => {
+    this.store.set('currentReorder', null);
+  };
+
+  /**
+   * Complete the reordering of a given item.
+   * @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
+   */
+  completeDraggingItem = itemId => {
+    const currentReorder = itemsReorderingSelectors.currentReorder(this.store.state);
+    if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
+      return;
+    }
+    if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
+      this.cancelDraggingItem();
+      return;
+    }
+    const draggedItemMeta = itemsSelectors.itemMeta(this.store.state, currentReorder.draggedItemId);
+    const oldPosition = {
+      parentId: draggedItemMeta.parentId,
+      index: itemsSelectors.itemIndex(this.store.state, draggedItemMeta.id)
+    };
+    const newPosition = currentReorder.newPosition;
+    this.store.update(_extends({
+      currentReorder: null
+    }, moveItemInTree({
+      itemToMoveId: itemId,
+      newPosition,
+      oldPosition,
+      prevState: this.store.state
+    })));
+    const onItemPositionChange = this.store.parameters.onItemPositionChange;
+    onItemPositionChange?.({
+      itemId,
+      newPosition,
+      oldPosition
+    });
+  };
+
+  /**
+   * Set the new target item for the ongoing reordering.
+   * The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
+   * @param {object} params The params describing the new target item.
+   * @param {TreeViewItemId} params.itemId The id of the new target item.
+   * @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
+   * @param {number} params.targetHeight The height of the target item.
+   * @param {number} params.cursorY The Y coordinate of the mouse cursor.
+   * @param {number} params.cursorX The X coordinate of the mouse cursor.
+   * @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
+   */
+  setDragTargetItem = ({
+    itemId,
+    validActions,
+    targetHeight,
+    cursorY,
+    cursorX,
+    contentElement
+  }) => {
+    const prevItemReorder = this.store.state.currentReorder;
+    if (prevItemReorder == null || isAncestor(this.store, itemId, prevItemReorder.draggedItemId)) {
+      return;
+    }
+    const action = chooseActionToApply({
+      itemChildrenIndentation: this.store.state.itemChildrenIndentation,
+      validActions,
+      targetHeight,
+      targetDepth: this.store.state.itemMetaLookup[itemId].depth,
+      cursorY,
+      cursorX,
+      contentElement
+    });
+    const newPosition = action == null ? null : validActions[action];
+    if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
+      return;
+    }
+    this.store.set('currentReorder', _extends({}, prevItemReorder, {
+      targetItemId: itemId,
+      newPosition,
+      action
+    }));
+  };
+}

package/esm/internals/plugins/itemsReordering/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./TreeViewItemsReorderingPlugin.js";
+export * from "./selectors.js";
+export type { TreeViewItemReorderPosition } from "./types.js";

package/esm/internals/plugins/itemsReordering/index.js

@@ -0,0 +1,3 @@
+export * from "./TreeViewItemsReorderingPlugin.js";
+export * from "./selectors.js";
+export {};

package/esm/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { useTreeViewContext, isTargetInDescendants } from '@mui/x-tree-view/internals';
-import { itemsReorderingSelectors } from "./useTreeViewItemsReordering.selectors.js";
+import { itemsReorderingSelectors } from "./selectors.js";
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 export const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
-    instance,
     store
   } = useTreeViewContext();
   const {
@@ -49,7 +48,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
 
           // iOS requires a media type to be defined
           event.dataTransfer.setData('application/mui-x', '');
-          instance.startDraggingItem(itemId);
+          store.itemsReordering.startDraggingItem(itemId);
         };
         const handleRootDragOver = event => {
           externalEventHandlers.onDragOver?.(event);
@@ -66,10 +65,10 @@ export const useTreeViewItemsReorderingItemPlugin = ({
 
           // Check if the drag-and-drop was cancelled, possibly by pressing Escape
           if (event.dataTransfer.dropEffect === 'none') {
-            instance.cancelDraggingItem();
+            store.itemsReordering.cancelDraggingItem();
             return;
           }
-          instance.completeDraggingItem(itemId);
+          store.itemsReordering.completeDraggingItem(itemId);
         };
         return {
           draggable: canItemBeReordered ? true : undefined,
@@ -93,7 +92,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
           const rect = contentRefObject.current.getBoundingClientRect();
           const y = event.clientY - rect.top;
           const x = event.clientX - rect.left;
-          instance.setDragTargetItem({
+          store.itemsReordering.setDragTargetItem({
             itemId,
             validActions: validActionsRef.current,
             targetHeight: rect.height,
@@ -107,7 +106,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
           if (event.defaultMuiPrevented) {
             return;
           }
-          validActionsRef.current = instance.getDroppingTargetValidActions(itemId);
+          validActionsRef.current = store.itemsReordering.getDroppingTargetValidActions(itemId);
         };
         return {
           onDragEnter: handleDragEnter,

package/esm/internals/plugins/itemsReordering/selectors.d.ts

@@ -0,0 +1,29 @@
+import { TreeViewItemId } from '@mui/x-tree-view/models';
+import { RichTreeViewProState } from "../../RichTreeViewProStore/index.js";
+export declare const itemsReorderingSelectors: {
+  /**
+   * Gets the properties of the current reordering.
+   */
+  currentReorder: (state: RichTreeViewProState<any, any>) => {
+    draggedItemId: TreeViewItemId;
+    targetItemId: TreeViewItemId;
+    newPosition: import("./types.js").TreeViewItemReorderPosition | null;
+    action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
+  } | null;
+  /**
+   * Gets the properties of the dragged item.
+   */
+  draggedItemProperties: (args_0: RichTreeViewProState<any, any>, itemId: string) => {
+    newPosition: import("./types.js").TreeViewItemReorderPosition | null;
+    action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
+    targetDepth: number;
+  } | null;
+  /**
+   * Checks whether an item is being dragged.
+   */
+  isDragging: (state: RichTreeViewProState<any, any>) => boolean;
+  /**
+   * Checks whether an item can be reordered.
+   */
+  canItemBeReordered: (args_0: RichTreeViewProState<any, any>, itemId: string) => boolean;
+};

package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js → itemsReordering/selectors.js}

@@ -4,11 +4,11 @@ export const itemsReorderingSelectors = {
   /**
    * Gets the properties of the current reordering.
    */
-  currentReorder: createSelector(state => state.itemsReordering.currentReorder),
+  currentReorder: createSelector(state => state.currentReorder),
   /**
    * Gets the properties of the dragged item.
    */
-  draggedItemProperties: createSelectorMemoized(state => state.itemsReordering.currentReorder, itemsSelectors.itemMetaLookup, (currentReorder, itemMetaLookup, itemId) => {
+  draggedItemProperties: createSelectorMemoized(state => state.currentReorder, itemsSelectors.itemMetaLookup, (currentReorder, itemMetaLookup, itemId) => {
     if (!currentReorder || currentReorder.targetItemId !== itemId || currentReorder.action == null) {
       return null;
     }
@@ -24,9 +24,9 @@ export const itemsReorderingSelectors = {
   /**
    * Checks whether an item is being dragged.
    */
-  isDragging: createSelector(state => !!state.itemsReordering.currentReorder?.draggedItemId),
+  isDragging: createSelector(state => !!state.currentReorder?.draggedItemId),
   /**
    * Checks whether an item can be reordered.
    */
-  canItemBeReordered: createSelector(state => state.itemsReordering.isItemReorderable, labelSelectors.isAnyItemBeingEdited, (isItemReorderable, isEditing, itemId) => !isEditing && isItemReorderable(itemId))
+  canItemBeReordered: createSelector(state => state.isItemReorderable, labelSelectors.isAnyItemBeingEdited, (isItemReorderable, isEditing, itemId) => !isEditing && isItemReorderable(itemId))
 };