@mui/x-tree-view-pro 7.12.0

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

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {
+  MuiCancellableEvent,
+  TreeViewItemPlugin,
+  useTreeViewContext,
+  UseTreeViewItemsSignature,
+  isTargetInDescendants,
+} from '@mui/x-tree-view/internals';
+import { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
+import {
+  UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering,
+  UseTreeItem2RootSlotPropsFromItemsReordering,
+  UseTreeViewItemsReorderingSignature,
+  TreeViewItemItemReorderingValidActions,
+  UseTreeItem2ContentSlotPropsFromItemsReordering,
+} from './useTreeViewItemsReordering.types';
+
+export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
+
+export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2Props> = ({
+  props,
+}) => {
+  const { itemsReordering, instance } =
+    useTreeViewContext<[UseTreeViewItemsSignature, UseTreeViewItemsReorderingSignature]>();
+  const { itemId } = props;
+
+  const validActionsRef = React.useRef<TreeViewItemItemReorderingValidActions | null>(null);
+
+  return {
+    propsEnhancers: {
+      root: ({
+        rootRefObject,
+        contentRefObject,
+        externalEventHandlers,
+      }): UseTreeItem2RootSlotPropsFromItemsReordering => {
+        const draggable = instance.canItemBeDragged(itemId);
+        if (!draggable) {
+          return {};
+        }
+
+        const handleDragStart = (event: React.DragEvent & MuiCancellableEvent) => {
+          externalEventHandlers.onDragStart?.(event);
+          if (event.defaultMuiPrevented || event.defaultPrevented) {
+            return;
+          }
+
+          // We don't use `event.currentTarget` here.
+          // This is to allow people to pass `onDragStart` to another element than the root.
+          if (isTargetInDescendants(event.target as HTMLElement, rootRefObject.current)) {
+            return;
+          }
+
+          // Comment to show the children in the drag preview
+          // TODO: Improve the customization of the drag preview
+          event.dataTransfer.effectAllowed = 'move';
+          event.dataTransfer.setDragImage(contentRefObject.current!, 0, 0);
+
+          const { types } = event.dataTransfer;
+          if (isAndroid() && !types.includes('text/plain') && !types.includes('text/uri-list')) {
+            event.dataTransfer.setData('text/plain', 'android-fallback');
+          }
+
+          // iOS requires a media type to be defined
+          event.dataTransfer.setData('application/mui-x', '');
+
+          instance.startDraggingItem(itemId);
+        };
+
+        const handleRootDragOver = (event: React.DragEvent & MuiCancellableEvent) => {
+          externalEventHandlers.onDragOver?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+
+          event.preventDefault();
+        };
+
+        const handleRootDragEnd = (event: React.DragEvent & MuiCancellableEvent) => {
+          externalEventHandlers.onDragEnd?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+
+          instance.stopDraggingItem(itemId);
+        };
+
+        return {
+          draggable: true,
+          onDragStart: handleDragStart,
+          onDragOver: handleRootDragOver,
+          onDragEnd: handleRootDragEnd,
+        };
+      },
+      content: ({
+        externalEventHandlers,
+        contentRefObject,
+      }): UseTreeItem2ContentSlotPropsFromItemsReordering => {
+        const currentDrag = itemsReordering.currentDrag;
+        if (!currentDrag || currentDrag.draggedItemId === itemId) {
+          return {};
+        }
+
+        const handleDragOver = (event: React.DragEvent & MuiCancellableEvent) => {
+          externalEventHandlers.onDragOver?.(event);
+          if (event.defaultMuiPrevented || validActionsRef.current == null) {
+            return;
+          }
+
+          const rect = (event.target as HTMLDivElement).getBoundingClientRect();
+          const y = event.clientY - rect.top;
+          const x = event.clientX - rect.left;
+          instance.setDragTargetItem({
+            itemId,
+            validActions: validActionsRef.current,
+            targetHeight: rect.height,
+            cursorY: y,
+            cursorX: x,
+            contentElement: contentRefObject.current!,
+          });
+        };
+
+        const handleDragEnter = (event: React.DragEvent & MuiCancellableEvent) => {
+          externalEventHandlers.onDragEnter?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+
+          validActionsRef.current = instance.getDroppingTargetValidActions(itemId);
+        };
+
+        return {
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+        };
+      },
+      dragAndDropOverlay: (): UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering => {
+        const currentDrag = itemsReordering.currentDrag;
+        if (!currentDrag || currentDrag.targetItemId !== itemId || currentDrag.action == null) {
+          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,
+          style: { '--TreeView-targetDepth': targetDepth } as React.CSSProperties,
+        };
+      },
+    },
+  };
+};

package/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx

@@ -0,0 +1,370 @@
+import { describeTreeView } from 'test/utils/tree-view/describeTreeView';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { fireEvent, createEvent } from '@mui/internal-test-utils';
+import { UseTreeViewItemsReorderingSignature } from '@mui/x-tree-view-pro/internals';
+import { DragEventTypes, MockedDataTransfer } from 'test/utils/dragAndDrop';
+import {
+  UseTreeViewExpansionSignature,
+  UseTreeViewItemsSignature,
+} from '@mui/x-tree-view/internals';
+import { chooseActionToApply } from './useTreeViewItemsReordering.utils';
+import { TreeViewItemItemReorderingValidActions } from './useTreeViewItemsReordering.types';
+
+interface DragEventOptions {
+  /**
+   * Coordinates of the mouse pointer relative to the target element.
+   * @default: { x: targetWidth / 2, y: targetHeight / 2 }
+   */
+  coordinates?: { x: number; y: number };
+}
+
+const buildTreeViewDragInteractions = (dataTransfer: DataTransfer) => {
+  const createFireEvent =
+    (type: DragEventTypes) =>
+    (target: HTMLElement, options: DragEventOptions = {}) => {
+      const rect = target.getBoundingClientRect();
+      const coordinates = options.coordinates ?? { x: rect.width / 2, y: rect.height / 2 };
+      const createdEvent = createEvent[type](target, {
+        clientX: rect.left + coordinates.x,
+        clientY: rect.top + coordinates.y,
+      });
+      Object.defineProperty(createdEvent, 'dataTransfer', {
+        value: dataTransfer,
+      });
+
+      return fireEvent(target, createdEvent);
+    };
+
+  const dragStart = createFireEvent('dragStart');
+  const dragEnter = createFireEvent('dragEnter');
+  const dragOver = createFireEvent('dragOver');
+  const dragEnd = createFireEvent('dragEnd');
+
+  return {
+    fullDragSequence: (
+      draggedItem: HTMLElement,
+      targetItem: HTMLElement,
+      options: DragEventOptions = {},
+    ) => {
+      dragStart(draggedItem);
+      dragEnter(targetItem);
+      dragOver(targetItem, { coordinates: options.coordinates });
+      dragEnd(draggedItem);
+    },
+  };
+};
+
+describeTreeView<
+  [UseTreeViewItemsReorderingSignature, UseTreeViewItemsSignature, UseTreeViewExpansionSignature]
+>('useTreeViewItemsReordering', ({ render, treeViewComponentName }) => {
+  if (treeViewComponentName === 'SimpleTreeView' || treeViewComponentName === 'RichTreeView') {
+    return;
+  }
+
+  let dragEvents: ReturnType<typeof buildTreeViewDragInteractions>;
+  // eslint-disable-next-line mocha/no-top-level-hooks
+  beforeEach(() => {
+    const dataTransfer = new MockedDataTransfer();
+    dragEvents = buildTreeViewDragInteractions(dataTransfer);
+  });
+
+  // eslint-disable-next-line mocha/no-top-level-hooks
+  afterEach(() => {
+    dragEvents = {} as typeof dragEvents;
+  });
+
+  describe('itemReordering prop', () => {
+    it('should allow to drag and drop items when props.itemsReordering={true}', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: true,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([
+        { id: '2', children: [{ id: '1' }] },
+        { id: '3' },
+      ]);
+    });
+
+    it('should not allow to drag and drop items when props.itemsReordering={false}', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: false,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+    });
+
+    it('should not allow to drag and drop items when props.itemsReordering is not defined', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+    });
+
+    it('should allow to expand the new parent of the dragged item when it was not expandable before', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }],
+        itemsReordering: true,
+        defaultExpandedItems: ['1'],
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1.1'), response.getItemContent('2'));
+
+      fireEvent.focus(response.getItemRoot('2'));
+      fireEvent.keyDown(response.getItemRoot('2'), { key: 'Enter' });
+
+      expect(response.getItemIdTree()).to.deep.equal([
+        { id: '1', children: [] },
+        { id: '2', children: [{ id: '1.1' }] },
+      ]);
+    });
+  });
+
+  describe('onItemPositionChange prop', () => {
+    it('should call onItemPositionChange when an item is moved', () => {
+      const onItemPositionChange = spy();
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: true,
+        onItemPositionChange,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(onItemPositionChange.callCount).to.equal(1);
+      expect(onItemPositionChange.lastCall.firstArg).to.deep.equal({
+        itemId: '1',
+        oldPosition: { parentId: null, index: 0 },
+        newPosition: { parentId: '2', index: 0 },
+      });
+    });
+  });
+
+  describe('isItemReorderable prop', () => {
+    it('should not allow to drag an item when isItemReorderable returns false', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: true,
+        canMoveItemToNewPosition: () => false,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+    });
+
+    it('should allow to drag an item when isItemReorderable returns true', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: true,
+        canMoveItemToNewPosition: () => true,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([
+        { id: '2', children: [{ id: '1' }] },
+        { id: '3' },
+      ]);
+    });
+  });
+
+  describe('canMoveItemToNewPosition prop', () => {
+    it('should not allow to drop an item when canMoveItemToNewPosition returns false', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: true,
+        canMoveItemToNewPosition: () => false,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]);
+    });
+
+    it('should allow to drop an item when canMoveItemToNewPosition returns true', () => {
+      const response = render({
+        experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true },
+        items: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        itemsReordering: true,
+        canMoveItemToNewPosition: () => true,
+      });
+
+      dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2'));
+      expect(response.getItemIdTree()).to.deep.equal([
+        { id: '2', children: [{ id: '1' }] },
+        { id: '3' },
+      ]);
+    });
+  });
+});
+
+describe('getNewPosition util', () => {
+  // The actions use the following tree when dropping "1.1" on "1.2":
+  // - 1
+  //   - 1.1
+  //   - 1.2
+  //   - 1.3
+  // - 2
+  const ALL_ACTIONS: TreeViewItemItemReorderingValidActions = {
+    'reorder-above': { parentId: '1', index: 0 },
+    'reorder-below': { parentId: '1', index: 1 },
+    'make-child': { parentId: '1.2', index: 0 },
+    'move-to-parent': { parentId: null, index: 2 },
+  };
+
+  const FAKE_CONTENT_ELEMENT = {} as HTMLDivElement;
+
+  const COMMON_PROPERTIES = {
+    itemChildrenIndentation: 12,
+    validActions: ALL_ACTIONS,
+    targetHeight: 100,
+    targetDepth: 1,
+    cursorY: 50,
+    cursorX: 100,
+    contentElement: FAKE_CONTENT_ELEMENT,
+  };
+
+  it('should choose the "reorder-above" action when the cursor is in the top quarter of the target item', () => {
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 1,
+      }),
+    ).to.equal('reorder-above');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 24,
+      }),
+    ).to.equal('reorder-above');
+  });
+
+  it('should choose the "reorder-above" action when the cursor is in the top half of the target item and the "make-child" action is not valid', () => {
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 25,
+        validActions: { ...ALL_ACTIONS, 'make-child': undefined },
+      }),
+    ).to.equal('reorder-above');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 49,
+        validActions: { ...ALL_ACTIONS, 'make-child': undefined },
+      }),
+    ).to.equal('reorder-above');
+  });
+
+  it('should choose the "reorder-below" action when the cursor is in the bottom quarter of the target item', () => {
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 99,
+      }),
+    ).to.equal('reorder-below');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 76,
+      }),
+    ).to.equal('reorder-below');
+  });
+
+  it('should choose the "reorder-below" action when the cursor is in the bottom half of the target item and the "make-child" action is not valid', () => {
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 75,
+        validActions: { ...ALL_ACTIONS, 'make-child': undefined },
+      }),
+    ).to.equal('reorder-below');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 51,
+        validActions: { ...ALL_ACTIONS, 'make-child': undefined },
+      }),
+    ).to.equal('reorder-below');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 50,
+        validActions: { ...ALL_ACTIONS, 'make-child': undefined },
+      }),
+    ).to.equal('reorder-below');
+  });
+
+  it('should choose the "make-child" action when the cursor is in the middle of the target item', () => {
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 25,
+      }),
+    ).to.equal('make-child');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 50,
+      }),
+    ).to.equal('make-child');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorY: 74,
+      }),
+    ).to.equal('make-child');
+  });
+
+  it('should choose the "move-to-parent" action when the cursor is inside the depth-offset of the target item', () => {
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorX: 1,
+        cursorY: 1,
+      }),
+    ).to.equal('move-to-parent');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorX: 11,
+        cursorY: 1,
+      }),
+    ).to.equal('move-to-parent');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorX: 1,
+        cursorY: 50,
+      }),
+    ).to.equal('move-to-parent');
+
+    expect(
+      chooseActionToApply({
+        ...COMMON_PROPERTIES,
+        cursorX: 1,
+        cursorY: 99,
+      }),
+    ).to.equal('move-to-parent');
+  });
+});