@headless-tree/core 0.0.4 → 0.0.6

package/lib/esm/features/tree/types.d.ts

@@ -7,6 +7,10 @@ export type ItemMeta = {
     setSize: number;
     posInSet: number;
 };
+export type TreeItemDataRef = {
+    memoizedValues: Record<string, any>;
+    memoizedDeps: Record<string, any[] | undefined>;
+};
 export type TreeFeatureDef<T> = {
     state: {
         expandedItems: string[];
@@ -30,8 +34,7 @@ export type TreeFeatureDef<T> = {
         getFocusedItem: () => ItemInstance<any>;
         focusNextItem: () => void;
         focusPreviousItem: () => void;
-        scrollToItem: (item: ItemInstance<any>) => void;
-        updateDomFocus: (scrollIntoView?: boolean) => void;
+        updateDomFocus: () => void;
         getContainerProps: () => Record<string, any>;
     };
     itemInstance: {
@@ -52,6 +55,8 @@ export type TreeFeatureDef<T> = {
         getTree: () => TreeInstance<T>;
         getItemAbove: () => ItemInstance<T> | null;
         getItemBelow: () => ItemInstance<T> | null;
+        getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
+        scrollTo: (scrollIntoViewArg?: boolean | ScrollIntoViewOptions) => Promise<void>;
     };
     hotkeys: "focusNextItem" | "focusPreviousItem" | "expandOrDown" | "collapseOrUp" | "focusFirstItem" | "focusLastItem";
 };

package/lib/esm/index.d.ts

@@ -18,4 +18,6 @@ export * from "./features/drag-and-drop/feature";
 export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";
-export * from "./data-adapters/nested-data-adapter";
+export * from "./utilities/create-on-drop-handler";
+export * from "./utilities/insert-items-at-target";
+export * from "./utilities/remove-items-from-parents";

package/lib/esm/index.js

@@ -18,4 +18,6 @@ export * from "./features/drag-and-drop/feature";
 export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";
-export * from "./data-adapters/nested-data-adapter";
+export * from "./utilities/create-on-drop-handler";
+export * from "./utilities/insert-items-at-target";
+export * from "./utilities/remove-items-from-parents";

package/lib/esm/types/core.d.ts

@@ -52,6 +52,7 @@ export type CustomHotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Part
 export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends FeatureDef = EmptyFeatureDef> = {
     key?: string;
     dependingFeatures?: string[];
+    stateHandlerNames?: Partial<Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>>;
     getInitialState?: (initialState: Partial<MergedFeatures<F>["state"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["state"] & MergedFeatures<F>["state"]>;
     getDefaultConfig?: (defaultConfig: Partial<MergedFeatures<F>["config"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["config"] & MergedFeatures<F>["config"]>;
     createTreeInstance?: (prev: MergedFeatures<F>["treeInstance"], instance: MergedFeatures<F>["treeInstance"]) => D["treeInstance"] & MergedFeatures<F>["treeInstance"];
@@ -60,9 +61,6 @@ export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends
     onTreeUnmount?: (instance: MergedFeatures<F>["treeInstance"], treeElement: HTMLElement) => void;
     onItemMount?: (instance: MergedFeatures<F>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<F>["treeInstance"]) => void;
     onItemUnmount?: (instance: MergedFeatures<F>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<F>["treeInstance"]) => void;
-    setState?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-    onConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
-    onStateOrConfigChange?: (instance: MergedFeatures<F>["treeInstance"]) => void;
     hotkeys?: HotkeysConfig<T, D>;
 };
 export {};

package/lib/esm/utilities/create-on-drop-handler.d.ts

@@ -0,0 +1,3 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+export declare const createOnDropHandler: <T>(onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void) => (items: ItemInstance<T>[], target: DropTarget<T>) => void;

package/lib/esm/utilities/create-on-drop-handler.js

@@ -0,0 +1,7 @@
+import { removeItemsFromParents } from "./remove-items-from-parents";
+import { insertItemsAtTarget } from "./insert-items-at-target";
+export const createOnDropHandler = (onChangeChildren) => (items, target) => {
+    const itemIds = items.map((item) => item.getId());
+    removeItemsFromParents(items, onChangeChildren);
+    insertItemsAtTarget(itemIds, target, onChangeChildren);
+};

package/lib/esm/utilities/insert-items-at-target.d.ts

@@ -0,0 +1,3 @@
+import { ItemInstance } from "../types/core";
+import { DropTarget } from "../features/drag-and-drop/types";
+export declare const insertItemsAtTarget: <T>(itemIds: string[], target: DropTarget<T>, onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void) => void;

package/lib/esm/utilities/insert-items-at-target.js

@@ -0,0 +1,20 @@
+export const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
+    // add moved items to new common parent, if dropped onto parent
+    if (target.childIndex === null) {
+        onChangeChildren(target.item, [
+            ...target.item.getChildren().map((item) => item.getId()),
+            ...itemIds,
+        ]);
+        // TODO items[0].getTree().rebuildTree();
+        return;
+    }
+    // add moved items to new common parent, if dropped between siblings
+    const oldChildren = target.item.getChildren();
+    const newChildren = [
+        ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+        ...itemIds,
+        ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+    ];
+    onChangeChildren(target.item, newChildren);
+    target.item.getTree().rebuildTree();
+};

package/lib/esm/utilities/remove-items-from-parents.d.ts

@@ -0,0 +1,2 @@
+import { ItemInstance } from "../types/core";
+export declare const removeItemsFromParents: <T>(movedItems: ItemInstance<T>[], onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void) => void;

package/lib/esm/utilities/remove-items-from-parents.js

@@ -0,0 +1,13 @@
+export const removeItemsFromParents = (movedItems, onChangeChildren) => {
+    var _a;
+    // TODO bulk sibling changes together
+    for (const item of movedItems) {
+        const siblings = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getChildren();
+        if (siblings) {
+            onChangeChildren(item.getParent(), siblings
+                .filter((sibling) => sibling.getId() !== item.getId())
+                .map((i) => i.getId()));
+        }
+    }
+    movedItems[0].getTree().rebuildTree();
+};

package/lib/esm/utils.d.ts

@@ -1,9 +1,6 @@
-import { ItemInstance, TreeState, Updater } from "./types/core";
-import { DropTarget } from "./features/drag-and-drop/types";
+import { TreeState, Updater } from "./types/core";
 export type NoInfer<T> = [T][T extends any ? 0 : never];
 export declare const memo: <D extends readonly any[], R>(fn: (...args_0: D) => R, deps: () => [...D]) => () => R;
 export declare function functionalUpdate<T>(updater: Updater<T>, input: T): T;
 export declare function makeStateUpdater<K extends keyof TreeState<any>>(key: K, instance: unknown): (updater: Updater<TreeState<any>[K]>) => void;
-export declare const scrollIntoView: (element: Element | undefined | null) => void;
-export declare const performItemsMove: <T>(items: ItemInstance<T>[], target: DropTarget<T>, onChangeChildren: (item: ItemInstance<T>, newChildren: ItemInstance<T>[]) => void) => void;
 export declare const poll: (fn: () => boolean, interval?: number, timeout?: number) => Promise<void>;

package/lib/esm/utils.js

@@ -31,56 +31,6 @@ export function makeStateUpdater(key, instance) {
         });
     };
 }
-export const scrollIntoView = (element) => {
-    if (!element) {
-        return;
-    }
-    if (element.scrollIntoViewIfNeeded) {
-        element.scrollIntoViewIfNeeded();
-    }
-    else {
-        const boundingBox = element.getBoundingClientRect();
-        const isElementInViewport = boundingBox.top >= 0 &&
-            boundingBox.left >= 0 &&
-            boundingBox.bottom <=
-                (window.innerHeight || document.documentElement.clientHeight) &&
-            boundingBox.right <=
-                (window.innerWidth || document.documentElement.clientWidth);
-        if (!isElementInViewport) {
-            element.scrollIntoView();
-        }
-    }
-};
-export const performItemsMove = (items, target, onChangeChildren) => {
-    var _a;
-    const numberOfDragItemsBeforeTarget = !target.childIndex
-        ? 0
-        : target.item
-            .getChildren()
-            .slice(0, target.childIndex)
-            .filter((child) => items.some((item) => item.getId() === child.getId()))
-            .length;
-    // TODO bulk sibling changes together
-    for (const item of items) {
-        const siblings = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getChildren();
-        if (siblings) {
-            onChangeChildren(item.getParent(), siblings.filter((sibling) => sibling.getId() !== item.getId()));
-        }
-    }
-    if (target.childIndex === null) {
-        onChangeChildren(target.item, [...target.item.getChildren(), ...items]);
-        items[0].getTree().rebuildTree();
-        return;
-    }
-    const oldChildren = target.item.getChildren();
-    const newChildren = [
-        ...oldChildren.slice(0, target.childIndex - numberOfDragItemsBeforeTarget),
-        ...items,
-        ...oldChildren.slice(target.childIndex - numberOfDragItemsBeforeTarget),
-    ];
-    onChangeChildren(target.item, newChildren);
-    items[0].getTree().rebuildTree();
-};
 export const poll = (fn, interval = 100, timeout = 1000) => new Promise((resolve) => {
     let clear;
     const i = setInterval(() => {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build:cjs": "tsc",
-    "build:esm": "tsc -m es2015 --outDir lib/esm",
+    "build:cjs": "tsc -m commonjs --outDir lib/cjs",
+    "build:esm": "tsc",
     "start": "tsc -w"
   },
   "repository": {

package/src/core/create-tree.ts

@@ -38,12 +38,16 @@ export const createTree = <T>(
   const additionalFeatures = [treeFeature, ...(initialConfig.features ?? [])];
   let state = additionalFeatures.reduce(
     (acc, feature) => feature.getInitialState?.(acc, treeInstance) ?? acc,
-    initialConfig.state ?? {}
+    initialConfig.initialState ?? initialConfig.state ?? {}
   ) as TreeState<T>;
   let config = additionalFeatures.reduce(
     (acc, feature) => feature.getDefaultConfig?.(acc, treeInstance) ?? acc,
     initialConfig
   ) as TreeConfig<T>;
+  const stateHandlerNames = additionalFeatures.reduce(
+    (acc, feature) => ({ ...acc, ...feature.stateHandlerNames }),
+    {} as Record<string, string>
+  );
 
   let treeElement: HTMLElement | undefined | null;
   const treeDataRef: { current: any } = { current: {} };
@@ -109,10 +113,14 @@ export const createTree = <T>(
       ...prev,
       getState: () => state,
       setState: (updater) => {
-        state = typeof updater === "function" ? updater(state) : updater;
+        // Not necessary, since I think the subupdate below keeps the state fresh anyways?
+        // state = typeof updater === "function" ? updater(state) : updater;
         config.setState?.(state);
-        eachFeature((feature) => feature.setState?.(treeInstance));
-        eachFeature((feature) => feature.onStateOrConfigChange?.(treeInstance));
+      },
+      applySubStateUpdate: (stateName, updater) => {
+        state[stateName] =
+          typeof updater === "function" ? updater(state[stateName]) : updater;
+        config[stateHandlerNames[stateName]]!(state[stateName]);
       },
       rebuildTree: () => {
         rebuildItemMeta(mainFeature);
@@ -124,11 +132,7 @@ export const createTree = <T>(
 
         if (config.state) {
           state = { ...state, ...config.state };
-          eachFeature((feature) => feature.setState?.(treeInstance));
         }
-
-        eachFeature((feature) => feature.onConfigChange?.(treeInstance));
-        eachFeature((feature) => feature.onStateOrConfigChange?.(treeInstance));
       },
       getItemInstance: (itemId) => itemInstancesMap[itemId],
       getItems: () => itemInstances,

package/src/features/async-data-loader/feature.ts

@@ -22,6 +22,10 @@ export const asyncDataLoaderFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    loadingItems: "setLoadingItems",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
@@ -36,11 +40,14 @@ export const asyncDataLoaderFeature: FeatureImplementation<
       }
 
       if (!instance.getState().loadingItems.includes(itemId)) {
-        config.setLoadingItems?.((loadingItems) => [...loadingItems, itemId]);
+        instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+          ...loadingItems,
+          itemId,
+        ]);
         config.asyncDataLoader?.getItem(itemId).then((item) => {
           dataRef.current.itemData[itemId] = item;
           config.onLoadedItem?.(itemId, item);
-          config.setLoadingItems?.((loadingItems) =>
+          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId)
           );
         });
@@ -62,7 +69,10 @@ export const asyncDataLoaderFeature: FeatureImplementation<
         return [];
       }
 
-      config.setLoadingItems?.((loadingItems) => [...loadingItems, itemId]);
+      instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+        ...loadingItems,
+        itemId,
+      ]);
 
       if (config.asyncDataLoader?.getChildrenWithData) {
         config.asyncDataLoader?.getChildrenWithData(itemId).then((children) => {
@@ -73,7 +83,7 @@ export const asyncDataLoaderFeature: FeatureImplementation<
           const childrenIds = children.map(({ id }) => id);
           dataRef.current.childrenIds[itemId] = childrenIds;
           config.onLoadedChildren?.(itemId, childrenIds);
-          config.setLoadingItems?.((loadingItems) =>
+          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId)
           );
           instance.rebuildTree();
@@ -82,7 +92,7 @@ export const asyncDataLoaderFeature: FeatureImplementation<
         config.asyncDataLoader?.getChildren(itemId).then((childrenIds) => {
           dataRef.current.childrenIds[itemId] = childrenIds;
           config.onLoadedChildren?.(itemId, childrenIds);
-          config.setLoadingItems?.((loadingItems) =>
+          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId)
           );
           instance.rebuildTree();

package/src/features/drag-and-drop/feature.ts

@@ -13,10 +13,15 @@ export const dragAndDropFeature: FeatureImplementation<
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
+    canDropForeignDragObject: () => false,
     setDndState: makeStateUpdater("dnd", tree),
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    dnd: "setDndState",
+  },
+
   createTreeInstance: (prev, tree) => ({
     ...prev,
 
@@ -33,7 +38,7 @@ export const dragAndDropFeature: FeatureImplementation<
 
       draggable: tree.getConfig().isItemDraggable?.(item) ?? true,
 
-      onDragStart: (e) => {
+      onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
         const selectedItems = tree.getSelectedItems();
         const items = selectedItems.includes(item) ? selectedItems : [item];
         const config = tree.getConfig();
@@ -52,13 +57,13 @@ export const dragAndDropFeature: FeatureImplementation<
           e.dataTransfer?.setData(format, data);
         }
 
-        tree.getConfig().setDndState?.({
+        tree.applySubStateUpdate("dnd", {
           draggedItems: items,
           draggingOverItem: tree.getFocusedItem(),
         });
-      },
+      }),
 
-      onDragOver: (e) => {
+      onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
         const target = getDropTarget(e, item, tree);
         const dataRef = tree.getDataRef<DndDataRef>();
 
@@ -82,24 +87,35 @@ export const dragAndDropFeature: FeatureImplementation<
 
         dataRef.current.lastDragCode = nextDragCode;
 
-        tree.getConfig().setDndState?.((state) => ({
+        tree.applySubStateUpdate("dnd", (state) => ({
           ...state,
           dragTarget: target,
           draggingOverItem: item,
         }));
-      },
+      }),
 
-      onDragLeave: () => {
+      onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
         const dataRef = tree.getDataRef<DndDataRef>();
         dataRef.current.lastDragCode = "no-drag";
-        tree.getConfig().setDndState?.((state) => ({
+        tree.applySubStateUpdate("dnd", (state) => ({
           ...state,
           draggingOverItem: undefined,
           dragTarget: undefined,
         }));
-      },
+      }),
+
+      onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
+        const draggedItems = tree.getState().dnd?.draggedItems;
+        tree.applySubStateUpdate("dnd", null);
 
-      onDrop: (e) => {
+        if (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+          return;
+        }
+
+        tree.getConfig().onCompleteForeignDrop?.(draggedItems);
+      }),
+
+      onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDropTarget(e, item, tree);
 
@@ -112,7 +128,7 @@ export const dragAndDropFeature: FeatureImplementation<
         const draggedItems = tree.getState().dnd?.draggedItems;
 
         dataRef.current.lastDragCode = undefined;
-        tree.getConfig().setDndState?.(null);
+        tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
           config.onDrop?.(draggedItems, target);
@@ -120,7 +136,7 @@ export const dragAndDropFeature: FeatureImplementation<
           config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
         // TODO rebuild tree?
-      },
+      }),
     }),
 
     isDropTarget: () => {
@@ -131,19 +147,25 @@ export const dragAndDropFeature: FeatureImplementation<
     isDropTargetAbove: () => {
       const target = tree.getDropTarget();
 
-      if (!target || target.childIndex === null) return false;
-      const targetIndex = target.item.getItemMeta().index;
-
-      return targetIndex + target.childIndex + 1 === item.getItemMeta().index;
+      if (
+        !target ||
+        target.childIndex === null ||
+        target.item !== item.getParent()
+      )
+        return false;
+      return target.childIndex === item.getItemMeta().posInSet;
     },
 
     isDropTargetBelow: () => {
       const target = tree.getDropTarget();
 
-      if (!target || target.childIndex === null) return false;
-      const targetIndex = target.item.getItemMeta().index;
-
-      return targetIndex + target.childIndex === item.getItemMeta().index;
+      if (
+        !target ||
+        target.childIndex === null ||
+        target.item !== item.getParent()
+      )
+        return false;
+      return target.childIndex - 1 === item.getItemMeta().posInSet;
     },
 
     isDraggingOver: () => {

package/src/features/drag-and-drop/types.ts

@@ -5,15 +5,22 @@ export type DndDataRef = {
 };
 
 export type DndState<T> = {
-  draggedItems?: ItemInstance<T>[];
+  draggedItems?: ItemInstance<T>[]; // TODO not used anymore?
   draggingOverItem?: ItemInstance<T>;
   dragTarget?: DropTarget<T>;
 };
 
-export type DropTarget<T> = {
-  item: ItemInstance<T>;
-  childIndex: number | null;
-};
+export type DropTarget<T> =
+  | {
+      item: ItemInstance<T>;
+      childIndex: number;
+      insertionIndex: number;
+    }
+  | {
+      item: ItemInstance<T>;
+      childIndex: null;
+      insertionIndex: null;
+    };
 
 export enum DropTargetPosition {
   Top = "top",
@@ -44,12 +51,22 @@ export type DragAndDropFeatureDef<T> = {
       dataTransfer: DataTransfer,
       target: DropTarget<T>
     ) => boolean;
-
     onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
     onDropForeignDragObject?: (
       dataTransfer: DataTransfer,
       target: DropTarget<T>
     ) => void;
+
+    /** Runs in the onDragEnd event, if `ev.dataTransfer.dropEffect` is not `none`, i.e. the drop
+     * was not aborted. No target is provided as parameter since the target may be a foreign drop target.
+     * This is useful to seperate out the logic to move dragged items out of their previous parents.
+     * Use `onDrop` to handle drop-related logic.
+     *
+     * This ignores the `canDrop` handler, since the drop target is unknown in this handler.
+     */
+    // onSuccessfulDragEnd?: (items: ItemInstance<T>[]) => void;
+
+    onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
   };
   treeInstance: {
     getDropTarget: () => DropTarget<T> | null;

package/src/features/drag-and-drop/utils.ts

@@ -1,5 +1,10 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget, DropTargetPosition } from "./types";
+import {
+  DndState,
+  DragAndDropFeatureDef,
+  DropTarget,
+  DropTargetPosition,
+} from "./types";
 
 export const getDragCode = ({ item, childIndex }: DropTarget<any>) =>
   `${item.getId()}__${childIndex ?? "none"}`;
@@ -49,40 +54,64 @@ const getDropTargetPosition = (
 export const getDropTarget = (
   e: any,
   item: ItemInstance<any>,
-  tree: TreeInstance<any>
+  tree: TreeInstance<any>,
+  canDropInbetween = tree.getConfig().canDropInbetween
 ): DropTarget<any> => {
   const config = tree.getConfig();
-  const offset = getDropOffset(e, item);
+  const draggedItems = tree.getState().dnd?.draggedItems ?? [];
+  const itemTarget = { item, childIndex: null, insertionIndex: null };
+  const parentTarget = {
+    item: item.getParent(),
+    childIndex: null,
+    insertionIndex: null,
+  };
 
-  const dropOnItemTarget = { item, childIndex: null };
+  if (!canDropInbetween) {
+    if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+      return getDropTarget(e, item.getParent(), tree, false);
+    }
+    return itemTarget;
+  }
 
-  const pos = getDropTargetPosition(
-    offset,
-    config.topLinePercentage ?? 0.3,
-    config.bottomLinePercentage ?? 0.7
-  );
-  const inbetweenPos = getDropTargetPosition(offset, 0.5, 0.5);
+  const canDropInside = canDrop(e.dataTransfer, itemTarget, tree);
 
-  if (!config.canDropInbetween) {
-    return dropOnItemTarget;
-  }
+  const offset = getDropOffset(e, item);
 
-  if (!canDrop(e.dataTransfer, dropOnItemTarget, tree)) {
-    return {
-      item: item.getParent(),
-      childIndex:
-        item.getIndexInParent() +
-        (inbetweenPos === DropTargetPosition.Top ? 0 : 1),
-    };
-  }
+  const pos = canDropInside
+    ? getDropTargetPosition(
+        offset,
+        config.topLinePercentage ?? 0.3,
+        config.bottomLinePercentage ?? 0.7
+      )
+    : getDropTargetPosition(offset, 0.5, 0.5);
 
   if (pos === DropTargetPosition.Item) {
-    return dropOnItemTarget;
+    return itemTarget;
+  }
+
+  if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+    return getDropTarget(e, item.getParent(), tree, false);
   }
 
+  const childIndex =
+    item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1);
+
+  const numberOfDragItemsBeforeTarget = item
+    .getParent()
+    .getChildren()
+    .slice(0, childIndex)
+    .reduce(
+      (counter, child) =>
+        child && draggedItems?.some((i) => i.getId() === child.getId())
+          ? ++counter
+          : counter,
+      0
+    );
+
   return {
     item: item.getParent(),
-    childIndex:
-      item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1),
+    childIndex,
+    // TODO performance could be improved by computing this only when dragcode changed
+    insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
   };
 };

package/src/features/expand-all/feature.ts

@@ -25,8 +25,9 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: async () => {
-      tree.getConfig().setExpandedItems?.([]);
+    collapseAll: () => {
+      tree.applySubStateUpdate("expandedItems", []);
+      tree.rebuildTree();
     },
   }),
 
@@ -37,6 +38,9 @@ export const expandAllFeature: FeatureImplementation<
       if (cancelToken?.current) {
         return;
       }
+      if (!item.isFolder()) {
+        return;
+      }
 
       item.expand();
       await poll(() => !tree.getState().loadingItems.includes(item.getId()));
@@ -50,12 +54,10 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: async () => {
-      await Promise.all(
-        item.getChildren().map(async (child) => {
-          await child?.collapseAll();
-        })
-      );
+    collapseAll: () => {
+      for (const child of item.getChildren()) {
+        child?.collapseAll();
+      }
       item.collapse();
     },
   }),

package/src/features/expand-all/types.ts

@@ -3,11 +3,11 @@ export type ExpandAllFeatureDef = {
   config: {};
   treeInstance: {
     expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
-    collapseAll: () => Promise<void>;
+    collapseAll: () => void;
   };
   itemInstance: {
     expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
-    collapseAll: () => Promise<void>;
+    collapseAll: () => void;
   };
   hotkeys: never;
 };