@mui/x-tree-view-pro 7.12.0 → 7.12.1

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

@@ -1,370 +0,0 @@
-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');
-  });
-});

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

@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { warnOnce, TreeViewPlugin } from '@mui/x-tree-view/internals';
-import { TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
-import {
-  TreeViewItemItemReorderingValidActions,
-  TreeViewItemReorderPosition,
-  UseTreeViewItemsReorderingInstance,
-  UseTreeViewItemsReorderingSignature,
-} from './useTreeViewItemsReordering.types';
-import {
-  chooseActionToApply,
-  isAncestor,
-  moveItemInTree,
-} from './useTreeViewItemsReordering.utils';
-import { useTreeViewItemsReorderingItemPlugin } from './useTreeViewItemsReordering.itemPlugin';
-
-export const useTreeViewItemsReordering: TreeViewPlugin<UseTreeViewItemsReorderingSignature> = ({
-  params,
-  instance,
-  state,
-  setState,
-  experimentalFeatures,
-}) => {
-  const isItemsReorderingEnabled =
-    params.itemsReordering && !!experimentalFeatures?.itemsReordering;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (
-      params.itemsReordering &&
-      (!experimentalFeatures?.indentationAtItemLevel || !experimentalFeatures?.itemsReordering)
-    ) {
-      warnOnce([
-        'MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.',
-        'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the `RichTreeViewPro` component.',
-        'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/',
-      ]);
-    }
-  }
-
-  const canItemBeDragged = React.useCallback(
-    (itemId: string) => {
-      if (!isItemsReorderingEnabled) {
-        return false;
-      }
-
-      const isItemReorderable = params.isItemReorderable;
-      if (isItemReorderable) {
-        return isItemReorderable(itemId);
-      }
-
-      return true;
-    },
-    [isItemsReorderingEnabled, params.isItemReorderable],
-  );
-
-  const getDroppingTargetValidActions = React.useCallback(
-    (itemId: string) => {
-      if (!state.itemsReordering) {
-        throw new Error('There is no ongoing reordering.');
-      }
-
-      if (itemId === state.itemsReordering.draggedItemId) {
-        return {};
-      }
-
-      const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
-      const targetItemMeta = instance.getItemMeta(itemId);
-      const targetItemIndex = instance.getItemIndex(targetItemMeta.id);
-      const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
-      const draggedItemIndex = instance.getItemIndex(draggedItemMeta.id);
-
-      const oldPosition: TreeViewItemReorderPosition = {
-        parentId: draggedItemMeta.parentId,
-        index: draggedItemIndex,
-      };
-
-      const checkIfPositionIsValid = (positionAfterAction: TreeViewItemReorderPosition) => {
-        let isValid: boolean;
-        // 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,
-            oldPosition,
-            newPosition: positionAfterAction,
-          });
-        } else {
-          isValid = true;
-        }
-
-        return isValid;
-      };
-
-      const positionsAfterAction: Record<
-        TreeViewItemsReorderingAction,
-        TreeViewItemReorderPosition | null
-      > = {
-        '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
-          ? null
-          : {
-              parentId: targetItemMeta.parentId,
-              index:
-                targetItemMeta.parentId === draggedItemMeta.parentId &&
-                targetItemIndex > draggedItemIndex
-                  ? targetItemIndex
-                  : targetItemIndex + 1,
-            },
-        'move-to-parent':
-          targetItemMeta.parentId == null
-            ? null
-            : {
-                parentId: targetItemMeta.parentId,
-                index: instance.getItemOrderedChildrenIds(targetItemMeta.parentId).length,
-              },
-      };
-
-      const validActions: TreeViewItemItemReorderingValidActions = {};
-      Object.keys(positionsAfterAction).forEach((action) => {
-        const positionAfterAction = positionsAfterAction[action as TreeViewItemsReorderingAction];
-        if (positionAfterAction != null && checkIfPositionIsValid(positionAfterAction)) {
-          validActions[action as TreeViewItemsReorderingAction] = positionAfterAction;
-        }
-      });
-
-      return validActions;
-    },
-    [instance, state.itemsReordering, params.canMoveItemToNewPosition],
-  );
-
-  const startDraggingItem = React.useCallback(
-    (itemId: string) => {
-      setState((prevState) => ({
-        ...prevState,
-        itemsReordering: {
-          targetItemId: itemId,
-          draggedItemId: itemId,
-          action: null,
-          newPosition: null,
-        },
-      }));
-    },
-    [setState],
-  );
-
-  const stopDraggingItem = React.useCallback(
-    (itemId: string) => {
-      if (state.itemsReordering == null || state.itemsReordering.draggedItemId !== itemId) {
-        return;
-      }
-
-      if (
-        state.itemsReordering.draggedItemId === state.itemsReordering.targetItemId ||
-        state.itemsReordering.action == null ||
-        state.itemsReordering.newPosition == null
-      ) {
-        setState((prevState) => ({ ...prevState, itemsReordering: null }));
-        return;
-      }
-
-      const draggedItemMeta = instance.getItemMeta(state.itemsReordering.draggedItemId);
-
-      const oldPosition: TreeViewItemReorderPosition = {
-        parentId: draggedItemMeta.parentId,
-        index: instance.getItemIndex(draggedItemMeta.id),
-      };
-
-      const newPosition = state.itemsReordering.newPosition;
-
-      setState((prevState) => ({
-        ...prevState,
-        itemsReordering: null,
-        items: moveItemInTree({
-          itemToMoveId: itemId,
-          newPosition,
-          oldPosition,
-          prevState: prevState.items,
-        }),
-      }));
-
-      const onItemPositionChange = params.onItemPositionChange;
-      onItemPositionChange?.({
-        itemId,
-        newPosition,
-        oldPosition,
-      });
-    },
-    [setState, state.itemsReordering, instance, params.onItemPositionChange],
-  );
-
-  const setDragTargetItem = React.useCallback<
-    UseTreeViewItemsReorderingInstance['setDragTargetItem']
-  >(
-    ({ itemId, validActions, targetHeight, cursorY, cursorX, contentElement }) => {
-      setState((prevState) => {
-        const prevSubState = prevState.itemsReordering;
-        if (prevSubState == null || isAncestor(instance, itemId, prevSubState.draggedItemId)) {
-          return prevState;
-        }
-        const action = chooseActionToApply({
-          itemChildrenIndentation: params.itemChildrenIndentation,
-          validActions,
-          targetHeight,
-          targetDepth: prevState.items.itemMetaMap[itemId].depth!,
-          cursorY,
-          cursorX,
-          contentElement,
-        });
-
-        const newPosition = action == null ? null : validActions[action]!;
-
-        if (
-          prevSubState.targetItemId === itemId &&
-          prevSubState.action === action &&
-          prevSubState.newPosition?.parentId === newPosition?.parentId &&
-          prevSubState.newPosition?.index === newPosition?.index
-        ) {
-          return prevState;
-        }
-
-        return {
-          ...prevState,
-          itemsReordering: {
-            ...prevSubState,
-            targetItemId: itemId,
-            newPosition,
-            action,
-          },
-        };
-      });
-    },
-    [instance, setState, params.itemChildrenIndentation],
-  );
-
-  return {
-    instance: {
-      canItemBeDragged,
-      getDroppingTargetValidActions,
-      startDraggingItem,
-      stopDraggingItem,
-      setDragTargetItem,
-    },
-    contextValue: {
-      itemsReordering: {
-        enabled: isItemsReorderingEnabled,
-        currentDrag: state.itemsReordering,
-      },
-    },
-  };
-};
-
-useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
-
-useTreeViewItemsReordering.getDefaultizedParams = (params) => ({
-  ...params,
-  itemsReordering: params.itemsReordering ?? false,
-});
-
-useTreeViewItemsReordering.getInitialState = () => ({ itemsReordering: null });
-
-useTreeViewItemsReordering.params = {
-  itemsReordering: true,
-  isItemReorderable: true,
-  canMoveItemToNewPosition: true,
-  onItemPositionChange: true,
-};