fix: always map to bottom offset when dropping below tree

Author: lukasbach

packages/core/src/drag/useDraggingPosition.ts

@@ -96,7 +96,10 @@ export const useDraggingPosition = () => {
         ? 0.2
         : 0.5;
 
-      if (hoveringPosition % 1 < lineThreshold) {
+      if (hoveringPosition - 0.5 >= treeLinearItems.length - 1) {
+        // very bottom, always use offset "bottom"
+        offset = 'bottom';
+      } else if (hoveringPosition % 1 < lineThreshold) {
         offset = 'top';
       } else if (hoveringPosition % 1 > 1 - lineThreshold) {
         offset = 'bottom';

packages/core/test/dnd-basics.spec.tsx

@@ -373,6 +373,21 @@ describe('dnd basics', () => {
   });
 
   describe('special drop positions', () => {
+    it.each([0, 5, 10, 15, 20, 30, 40])(
+      'drops at very bottom +%ipx',
+      async offset => {
+        const test = await new TestUtil().renderOpenTree();
+        await test.startDrag('target');
+        await test.dragOver('cannot-rename', 'bottom', 20, offset);
+        await test.drop();
+        await test.expectVisibleItemContents('special', [
+          'cannot-move',
+          'cannot-rename',
+          'target',
+        ]);
+      }
+    );
+
     it('doesnt allow dropping into itself', async () => {
       const test = await new TestUtil().renderOpenTree();
       await test.startDrag('a');

packages/core/test/helpers/TestUtil.tsx

@@ -149,7 +149,8 @@ export class TestUtil {
   public async dragOver(
     title: string,
     position?: 'top' | 'bottom',
-    indent?: number
+    indent?: number,
+    additionalYCoord = 0
   ) {
     await act(async () => {
       const items = await this.renderProps!.findAllByTestId('title');
@@ -161,7 +162,8 @@ export class TestUtil {
           clientX: indent !== undefined ? indent * 10 : 9999,
           clientY:
             itemIndex * 10 +
-            (position === 'top' ? 1 : position === 'bottom' ? 9 : 5),
+            (position === 'top' ? 1 : position === 'bottom' ? 9 : 5) +
+            additionalYCoord,
         } as any,
         'tree-1',
         { current: this.containerRef ?? undefined }