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

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))
 };

package/esm/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/{internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts → esm/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/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js → itemsReordering/utils.js}

@@ -150,9 +150,9 @@ export const moveItemInTree = ({
     itemOrderedChildrenIds[itemId]?.forEach(childId => updateItemDepth(childId, depth + 1));
   };
   itemOrderedChildrenIds[itemToMoveId]?.forEach(childId => updateItemDepth(childId, itemToMoveDepth + 1));
-  return _extends({}, prevState, {
+  return {
     itemOrderedChildrenIdsLookup: itemOrderedChildrenIds,
     itemChildrenIndexesLookup: itemChildrenIndexes,
     itemMetaLookup
-  });
+  };
 };

package/esm/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>;
+}