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

package/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/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/internals/RichTreeViewProStore/RichTreeViewProStore.utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parametersToStateMapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _internals = require("@mui/x-tree-view/internals");
+var _lazyLoading = require("../plugins/lazyLoading");
+const DEFAULT_IS_ITEM_REORDERABLE_WHEN_ENABLED = () => true;
+const DEFAULT_IS_ITEM_REORDERABLE_WHEN_DISABLED = () => false;
+const deriveStateFromParameters = parameters => ({
+  lazyLoadedItems: parameters.dataSource ? _lazyLoading.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
+});
+const parametersToStateMapper = exports.parametersToStateMapper = {
+  getInitialState: (minimalInitialState, parameters) => (0, _extends2.default)({}, _internals.ExtendableRichTreeViewStore.rawMapper.getInitialState(minimalInitialState, parameters), deriveStateFromParameters(parameters)),
+  updateStateFromParameters: (newMinimalState, parameters, updateModel) => {
+    const newState = (0, _extends2.default)({}, _internals.ExtendableRichTreeViewStore.rawMapper.updateStateFromParameters(newMinimalState, parameters, updateModel), deriveStateFromParameters(parameters));
+    return newState;
+  },
+  shouldIgnoreItemsStateUpdate: parameters => !!parameters.dataSource
+};

package/internals/RichTreeViewProStore/index.d.ts

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

package/internals/RichTreeViewProStore/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _RichTreeViewProStore = require("./RichTreeViewProStore");
+Object.keys(_RichTreeViewProStore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RichTreeViewProStore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RichTreeViewProStore[key];
+    }
+  });
+});
+var _RichTreeViewProStore2 = require("./RichTreeViewProStore.types");
+Object.keys(_RichTreeViewProStore2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RichTreeViewProStore2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RichTreeViewProStore2[key];
+    }
+  });
+});

package/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/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewItemsReorderingPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _internals = require("@mui/x-tree-view/internals");
+var _selectors = require("./selectors");
+var _utils = require("./utils");
+var _itemPlugin = require("./itemPlugin");
+class TreeViewItemsReorderingPlugin {
+  constructor(store) {
+    this.store = store;
+    store.itemPluginManager.register(_itemPlugin.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 = _selectors.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 = _internals.itemsSelectors.itemMeta(this.store.state, itemId);
+    const targetItemIndex = _internals.itemsSelectors.itemIndex(this.store.state, targetItemMeta.id);
+    const draggedItemMeta = _internals.itemsSelectors.itemMeta(this.store.state, currentReorder.draggedItemId);
+    const draggedItemIndex = _internals.itemsSelectors.itemIndex(this.store.state, draggedItemMeta.id);
+    const isTargetLastSibling = targetItemIndex === _internals.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: _internals.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 = _internals.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 = _selectors.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 = _internals.itemsSelectors.itemMeta(this.store.state, currentReorder.draggedItemId);
+    const oldPosition = {
+      parentId: draggedItemMeta.parentId,
+      index: _internals.itemsSelectors.itemIndex(this.store.state, draggedItemMeta.id)
+    };
+    const newPosition = currentReorder.newPosition;
+    this.store.update((0, _extends2.default)({
+      currentReorder: null
+    }, (0, _utils.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 || (0, _utils.isAncestor)(this.store, itemId, prevItemReorder.draggedItemId)) {
+      return;
+    }
+    const action = (0, _utils.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', (0, _extends2.default)({}, prevItemReorder, {
+      targetItemId: itemId,
+      newPosition,
+      action
+    }));
+  };
+}
+exports.TreeViewItemsReorderingPlugin = TreeViewItemsReorderingPlugin;

package/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/internals/plugins/itemsReordering/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeViewItemsReorderingPlugin = require("./TreeViewItemsReorderingPlugin");
+Object.keys(_TreeViewItemsReorderingPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeViewItemsReorderingPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeViewItemsReorderingPlugin[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});

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

@@ -8,23 +8,22 @@ exports.useTreeViewItemsReorderingItemPlugin = exports.isAndroid = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-tree-view/internals");
-var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.selectors");
+var _selectors = require("./selectors");
 const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 exports.isAndroid = isAndroid;
 const useTreeViewItemsReorderingItemPlugin = ({
   props
 }) => {
   const {
-    instance,
     store
   } = (0, _internals.useTreeViewContext)();
   const {
     itemId
   } = props;
   const validActionsRef = React.useRef(null);
-  const draggedItemProperties = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.draggedItemProperties, itemId);
-  const canItemBeReordered = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.canItemBeReordered, itemId);
-  const isDragging = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.isDragging, itemId);
+  const draggedItemProperties = (0, _store.useStore)(store, _selectors.itemsReorderingSelectors.draggedItemProperties, itemId);
+  const canItemBeReordered = (0, _store.useStore)(store, _selectors.itemsReorderingSelectors.canItemBeReordered, itemId);
+  const isDragging = (0, _store.useStore)(store, _selectors.itemsReorderingSelectors.isDragging, itemId);
   return {
     propsEnhancers: {
       root: ({
@@ -57,7 +56,7 @@ 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);
@@ -74,10 +73,10 @@ 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,
@@ -101,7 +100,7 @@ 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,
@@ -115,7 +114,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
           if (event.defaultMuiPrevented) {
             return;
           }
-          validActionsRef.current = instance.getDroppingTargetValidActions(itemId);
+          validActionsRef.current = store.itemsReordering.getDroppingTargetValidActions(itemId);
         };
         return {
           onDragEnter: handleDragEnter,

package/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/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js → itemsReordering/selectors.js}

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

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

@@ -0,0 +1,6 @@
+import { TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
+export interface TreeViewItemReorderPosition {
+  parentId: string | null;
+  index: number;
+}
+export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };

package/{esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts → internals/plugins/itemsReordering/utils.d.ts}

@@ -1,10 +1,10 @@
-import { TreeViewUsedStore, UseTreeViewItemsState } from '@mui/x-tree-view/internals';
-import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
-import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
+import { TreeViewItemId, TreeViewItemsReorderingAction, TreeViewValidItem } from '@mui/x-tree-view/models';
+import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition } from "./types.js";
+import { RichTreeViewProState, RichTreeViewProStore } from "../../RichTreeViewProStore/index.js";
 /**
  * Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
  */
-export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
+export declare const isAncestor: (store: RichTreeViewProStore<any, any>, itemIdA: string, itemIdB: string) => boolean;
 interface GetNewPositionParameters {
   itemChildrenIndentation: string | number;
   validActions: TreeViewItemItemReorderingValidActions;
@@ -23,7 +23,7 @@ export declare const chooseActionToApply: ({
   cursorY,
   contentElement
 }: GetNewPositionParameters) => TreeViewItemsReorderingAction | null;
-export declare const moveItemInTree: <R extends {}>({
+export declare const moveItemInTree: <R extends TreeViewValidItem<R>>({
   itemToMoveId,
   oldPosition,
   newPosition,
@@ -32,6 +32,6 @@ export declare const moveItemInTree: <R extends {}>({
   itemToMoveId: TreeViewItemId;
   oldPosition: TreeViewItemReorderPosition;
   newPosition: TreeViewItemReorderPosition;
-  prevState: UseTreeViewItemsState<R>["items"];
-}) => UseTreeViewItemsState<R>["items"];
+  prevState: RichTreeViewProState<R, any>;
+}) => Pick<RichTreeViewProState<R, any>, "itemOrderedChildrenIdsLookup" | "itemChildrenIndexesLookup" | "itemMetaLookup">;
 export {};

package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js → itemsReordering/utils.js}

@@ -159,10 +159,10 @@ const moveItemInTree = ({
     itemOrderedChildrenIds[itemId]?.forEach(childId => updateItemDepth(childId, depth + 1));
   };
   itemOrderedChildrenIds[itemToMoveId]?.forEach(childId => updateItemDepth(childId, itemToMoveDepth + 1));
-  return (0, _extends2.default)({}, prevState, {
+  return {
     itemOrderedChildrenIdsLookup: itemOrderedChildrenIds,
     itemChildrenIndexesLookup: itemChildrenIndexes,
     itemMetaLookup
-  });
+  };
 };
 exports.moveItemInTree = moveItemInTree;

package/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.d.ts

@@ -0,0 +1,51 @@
+import { TreeViewItemId } from '@mui/x-tree-view/models';
+import { RichTreeViewProStore } from "../../RichTreeViewProStore/RichTreeViewProStore.js";
+export declare const TREE_VIEW_LAZY_LOADED_ITEMS_INITIAL_STATE: {
+  loading: {};
+  errors: {};
+};
+export declare class TreeViewLazyLoadingPlugin {
+  private store;
+  private nestedDataManager;
+  private cache;
+  constructor(store: RichTreeViewProStore<any, any>);
+  private init;
+  private handleBeforeItemToggleExpansion;
+  private setItemLoading;
+  private setItemError;
+  buildPublicAPI: () => {
+    updateItemChildren: (itemId: TreeViewItemId | null) => Promise<void>;
+  };
+  /**
+   * Method used for fetching multiple items concurrently.
+   * Only relevant for lazy-loaded tree views.
+   *
+   * @param {TreeViewItemId[]} parentIds The ids of the items to fetch the children of.
+   * @returns {Promise<void>} The promise resolved when the items are fetched.
+   */
+  fetchItems: (parentIds: TreeViewItemId[]) => Promise<void>;
+  /**
+   * Method used for updating an item's children.
+   * Only relevant for lazy-loaded tree views.
+   *
+   * @param {TreeViewItemId | null} itemId The id of the item to update the children of. If null is passed, it will update the root's children.
+   * @returns {Promise<void>} The promise resolved when the items are fetched.
+   */
+  updateItemChildren: (itemId: TreeViewItemId | null) => Promise<void>;
+  /**
+   * Method used for fetching an item's children.
+   * Only relevant for lazy-loaded tree views.
+   *
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The The id of the item to fetch the children of.
+   * @param {boolean} [parameters.forceRefresh] Whether to force a refresh of the children when the cache already contains some data.
+   * @returns {Promise<void>} The promise resolved when the items are fetched.
+   */
+  fetchItemChildren: ({
+    itemId,
+    forceRefresh
+  }: {
+    itemId: TreeViewItemId | null;
+    forceRefresh?: boolean;
+  }) => Promise<void>;
+}