@headless-tree/core 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @headless-tree/core
 
+## 0.0.7
+
+### Patch Changes
+
+- 6ec53b3: dev release
+
+## 0.0.6
+
+### Patch Changes
+
+- bc9c446: dev release
+
 ## 0.0.5
 
 ### Patch Changes

package/lib/cjs/core/create-tree.js

@@ -10,12 +10,35 @@ const buildItemInstance = (features, tree, itemId) => {
     }
     return itemInstance;
 };
+const verifyFeatures = (features) => {
+    var _a;
+    const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
+    for (const feature of features !== null && features !== void 0 ? features : []) {
+        const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
+        if (missingDependency) {
+            throw new Error(`${feature.key} needs ${missingDependency}`);
+        }
+    }
+};
+const compareFeatures = (feature1, feature2) => {
+    var _a;
+    if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
+        return 1;
+    }
+    return -1;
+};
+const sortFeatures = (features = []) => features.sort(compareFeatures);
 const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const treeInstance = {};
-    const additionalFeatures = [feature_1.treeFeature, ...((_a = initialConfig.features) !== null && _a !== void 0 ? _a : [])];
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
+    const additionalFeatures = [
+        feature_1.treeFeature,
+        ...sortFeatures(initialConfig.features),
+    ];
+    verifyFeatures(additionalFeatures);
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = (_a = initialConfig.initialState) !== null && _a !== void 0 ? _a : initialConfig.state) !== null && _b !== void 0 ? _b : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
+    const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
     const treeDataRef = { current: {} };
     const itemInstancesMap = {};
@@ -60,10 +83,13 @@ const createTree = (initialConfig) => {
         key: "main",
         createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
                 var _a;
-                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;
                 (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-                eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
-                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+            }, applySubStateUpdate: (stateName, updater) => {
+                state[stateName] =
+                    typeof updater === "function" ? updater(state[stateName]) : updater;
+                config[stateHandlerNames[stateName]](state[stateName]);
             }, rebuildTree: () => {
                 var _a;
                 rebuildItemMeta(mainFeature);
@@ -72,10 +98,7 @@ const createTree = (initialConfig) => {
                 config = typeof updater === "function" ? updater(config) : updater;
                 if (config.state) {
                     state = Object.assign(Object.assign({}, state), config.state);
-                    eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
                 }
-                eachFeature((feature) => { var _a; return (_a = feature.onConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
-                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
             }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
                 if (treeElement === element) {
                     return;
@@ -104,11 +127,10 @@ const createTree = (initialConfig) => {
             // eslint-disable-next-line no-return-assign
             getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
     };
-    // todo sort features
     const features = [mainFeature, ...additionalFeatures];
     for (const feature of features) {
-        Object.assign(treeInstance, (_e = (_d = feature.createTreeInstance) === null || _d === void 0 ? void 0 : _d.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _e !== void 0 ? _e : {});
-        Object.assign(hotkeyPresets, (_f = feature.hotkeys) !== null && _f !== void 0 ? _f : {});
+        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
+        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
     }
     rebuildItemMeta(mainFeature);
     return treeInstance;

package/lib/cjs/features/async-data-loader/feature.js

@@ -4,46 +4,54 @@ exports.asyncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
 exports.asyncDataLoaderFeature = {
     key: "async-data-loader",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: (0, utils_1.makeStateUpdater)("loadingItems", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        loadingItems: "setLoadingItems",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => {
-            var _a, _b, _c, _d, _e, _f;
-            var _g, _h;
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
             const config = instance.getConfig();
             const dataRef = instance.getDataRef();
-            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
-            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
+            (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
             if (!instance.getState().loadingItems.includes(itemId)) {
-                (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
-                (_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getItem(itemId).then((item) => {
-                    var _a, _b;
+                instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+                    ...loadingItems,
+                    itemId,
+                ]);
+                (_c = config.asyncDataLoader) === null || _c === void 0 ? void 0 : _c.getItem(itemId).then((item) => {
+                    var _a;
                     dataRef.current.itemData[itemId] = item;
                     (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
-                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                 });
             }
-            return (_f = (_e = config.createLoadingItemData) === null || _e === void 0 ? void 0 : _e.call(config)) !== null && _f !== void 0 ? _f : null;
+            return (_e = (_d = config.createLoadingItemData) === null || _d === void 0 ? void 0 : _d.call(config)) !== null && _e !== void 0 ? _e : null;
         }, retrieveChildrenIds: (itemId) => {
-            var _a, _b, _c, _d, _e, _f;
-            var _g, _h;
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
             const config = instance.getConfig();
             const dataRef = instance.getDataRef();
-            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
-            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
+            (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
             if (instance.getState().loadingItems.includes(itemId)) {
                 return [];
             }
-            (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
-            if ((_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getChildrenWithData) {
-                (_e = config.asyncDataLoader) === null || _e === void 0 ? void 0 : _e.getChildrenWithData(itemId).then((children) => {
-                    var _a, _b, _c;
+            instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+                ...loadingItems,
+                itemId,
+            ]);
+            if ((_c = config.asyncDataLoader) === null || _c === void 0 ? void 0 : _c.getChildrenWithData) {
+                (_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getChildrenWithData(itemId).then((children) => {
+                    var _a, _b;
                     for (const { id, data } of children) {
                         dataRef.current.itemData[id] = data;
                         (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, id, data);
@@ -51,16 +59,16 @@ exports.asyncDataLoaderFeature = {
                     const childrenIds = children.map(({ id }) => id);
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_b = config.onLoadedChildren) === null || _b === void 0 ? void 0 : _b.call(config, itemId, childrenIds);
-                    (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                     instance.rebuildTree();
                 });
             }
             else {
-                (_f = config.asyncDataLoader) === null || _f === void 0 ? void 0 : _f.getChildren(itemId).then((childrenIds) => {
-                    var _a, _b;
+                (_e = config.asyncDataLoader) === null || _e === void 0 ? void 0 : _e.getChildren(itemId).then((childrenIds) => {
+                    var _a;
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
-                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                     instance.rebuildTree();
                 });
             }

package/lib/cjs/features/drag-and-drop/feature.js

@@ -5,16 +5,47 @@ const utils_1 = require("./utils");
 const utils_2 = require("../../utils");
 exports.dragAndDropFeature = {
     key: "dragAndDrop",
-    dependingFeatures: ["main", "tree", "selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), setDndState: (0, utils_2.makeStateUpdater)("dnd", tree) }, defaultConfig)),
+    deps: ["selection"],
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: (0, utils_2.makeStateUpdater)("dnd", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        dnd: "setDndState",
+    },
     createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { getDropTarget: () => {
             var _a, _b;
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
+        }, getDragLineData: () => {
+            var _a, _b, _c, _d, _e;
+            const target = tree.getDropTarget();
+            const intend = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
+            if (!target || target.childIndex === null)
+                return null;
+            const children = target.item.getChildren();
+            if (target.childIndex === children.length) {
+                const bb = (_c = (_b = children[target.childIndex - 1]) === null || _b === void 0 ? void 0 : _b.getElement()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                if (bb) {
+                    return {
+                        intend,
+                        top: bb.bottom,
+                        left: bb.left,
+                        right: bb.right,
+                    };
+                }
+            }
+            const bb = (_e = (_d = children[target.childIndex]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            if (bb) {
+                return {
+                    intend,
+                    top: bb.top,
+                    left: bb.left,
+                    right: bb.right,
+                };
+            }
+            return null;
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
             var _a, _b, _c;
             return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
-                    var _a, _b, _c, _d, _e;
+                    var _a, _b, _c;
                     const selectedItems = tree.getSelectedItems();
                     const items = selectedItems.includes(item) ? selectedItems : [item];
                     const config = tree.getConfig();
@@ -29,12 +60,12 @@ exports.dragAndDropFeature = {
                         const { format, data } = config.createForeignDragObject(items);
                         (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData(format, data);
                     }
-                    (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, {
+                    tree.applySubStateUpdate("dnd", {
                         draggedItems: items,
                         draggingOverItem: tree.getFocusedItem(),
                     });
                 }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
-                    var _a, _b, _c, _d, _e;
+                    var _a, _b, _c;
                     const target = (0, utils_1.getDropTarget)(e, item, tree);
                     const dataRef = tree.getDataRef();
                     if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
@@ -50,14 +81,21 @@ exports.dragAndDropFeature = {
                         return;
                     }
                     dataRef.current.lastDragCode = nextDragCode;
-                    (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
+                    tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
                 }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
-                    var _a, _b;
                     const dataRef = tree.getDataRef();
                     dataRef.current.lastDragCode = "no-drag";
-                    (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
+                    tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
+                }), onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
+                    var _a, _b, _c;
+                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+                    tree.applySubStateUpdate("dnd", null);
+                    if (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+                        return;
+                    }
+                    (_c = (_b = tree.getConfig()).onCompleteForeignDrop) === null || _c === void 0 ? void 0 : _c.call(_b, draggedItems);
                 }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
-                    var _a, _b, _c, _d, _e;
+                    var _a, _b, _c;
                     const dataRef = tree.getDataRef();
                     const target = (0, utils_1.getDropTarget)(e, item, tree);
                     if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
@@ -67,12 +105,12 @@ exports.dragAndDropFeature = {
                     const config = tree.getConfig();
                     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                     dataRef.current.lastDragCode = undefined;
-                    (_c = (_b = tree.getConfig()).setDndState) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+                    tree.applySubStateUpdate("dnd", null);
                     if (draggedItems) {
-                        (_d = config.onDrop) === null || _d === void 0 ? void 0 : _d.call(config, draggedItems, target);
+                        (_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target);
                     }
                     else {
-                        (_e = config.onDropForeignDragObject) === null || _e === void 0 ? void 0 : _e.call(config, e.dataTransfer, target);
+                        (_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target);
                     }
                     // TODO rebuild tree?
                 }) }));
@@ -81,16 +119,18 @@ exports.dragAndDropFeature = {
             return target ? target.item.getId() === item.getId() : false;
         }, isDropTargetAbove: () => {
             const target = tree.getDropTarget();
-            if (!target || target.childIndex === null)
+            if (!target ||
+                target.childIndex === null ||
+                target.item !== item.getParent())
                 return false;
-            const targetIndex = target.item.getItemMeta().index;
-            return targetIndex + target.childIndex + 1 === item.getItemMeta().index;
+            return target.childIndex === item.getItemMeta().posInSet;
         }, isDropTargetBelow: () => {
             const target = tree.getDropTarget();
-            if (!target || target.childIndex === null)
+            if (!target ||
+                target.childIndex === null ||
+                target.item !== item.getParent())
                 return false;
-            const targetIndex = target.item.getItemMeta().index;
-            return targetIndex + target.childIndex === item.getItemMeta().index;
+            return target.childIndex - 1 === item.getItemMeta().posInSet;
         }, isDraggingOver: () => {
             var _a, _b;
             return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();

package/lib/cjs/features/drag-and-drop/types.d.ts

@@ -7,9 +7,20 @@ export type DndState<T> = {
     draggingOverItem?: ItemInstance<T>;
     dragTarget?: DropTarget<T>;
 };
+export type DragLineData = {
+    intend: number;
+    top: number;
+    left: number;
+    right: number;
+};
 export type DropTarget<T> = {
     item: ItemInstance<T>;
-    childIndex: number | null;
+    childIndex: number;
+    insertionIndex: number;
+} | {
+    item: ItemInstance<T>;
+    childIndex: null;
+    insertionIndex: null;
 };
 export declare enum DropTargetPosition {
     Top = "top",
@@ -35,9 +46,18 @@ export type DragAndDropFeatureDef<T> = {
         canDropForeignDragObject?: (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.
+         */
+        onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
     };
     treeInstance: {
         getDropTarget: () => DropTarget<T> | null;
+        getDragLineData: () => DragLineData | null;
     };
     itemInstance: {
         isDropTarget: () => boolean;

package/lib/cjs/features/drag-and-drop/utils.d.ts

@@ -3,4 +3,4 @@ import { DropTarget } from "./types";
 export declare const getDragCode: ({ item, childIndex }: DropTarget<any>) => string;
 export declare const getDropOffset: (e: any, item: ItemInstance<any>) => number;
 export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
-export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => DropTarget<any>;
+export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canDropInbetween?: boolean | undefined) => DropTarget<any>;

package/lib/cjs/features/drag-and-drop/utils.js

@@ -34,29 +34,46 @@ const getDropTargetPosition = (offset, topLinePercentage, bottomLinePercentage)
     }
     return types_1.DropTargetPosition.Item;
 };
-const getDropTarget = (e, item, tree) => {
-    var _a, _b;
+const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
+    var _a, _b, _c, _d;
     const config = tree.getConfig();
-    const offset = (0, exports.getDropOffset)(e, item);
-    const dropOnItemTarget = { item, childIndex: null };
-    const pos = getDropTargetPosition(offset, (_a = config.topLinePercentage) !== null && _a !== void 0 ? _a : 0.3, (_b = config.bottomLinePercentage) !== null && _b !== void 0 ? _b : 0.7);
-    const inbetweenPos = getDropTargetPosition(offset, 0.5, 0.5);
-    if (!config.canDropInbetween) {
-        return dropOnItemTarget;
-    }
-    if (!(0, exports.canDrop)(e.dataTransfer, dropOnItemTarget, tree)) {
-        return {
-            item: item.getParent(),
-            childIndex: item.getIndexInParent() +
-                (inbetweenPos === types_1.DropTargetPosition.Top ? 0 : 1),
-        };
+    const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
+    const itemTarget = { item, childIndex: null, insertionIndex: null };
+    const parentTarget = {
+        item: item.getParent(),
+        childIndex: null,
+        insertionIndex: null,
+    };
+    if (!canDropInbetween) {
+        if (!(0, exports.canDrop)(e.dataTransfer, parentTarget, tree)) {
+            return (0, exports.getDropTarget)(e, item.getParent(), tree, false);
+        }
+        return itemTarget;
     }
+    const canDropInside = (0, exports.canDrop)(e.dataTransfer, itemTarget, tree);
+    const offset = (0, exports.getDropOffset)(e, item);
+    const pos = canDropInside
+        ? getDropTargetPosition(offset, (_c = config.topLinePercentage) !== null && _c !== void 0 ? _c : 0.3, (_d = config.bottomLinePercentage) !== null && _d !== void 0 ? _d : 0.7)
+        : getDropTargetPosition(offset, 0.5, 0.5);
     if (pos === types_1.DropTargetPosition.Item) {
-        return dropOnItemTarget;
+        return itemTarget;
+    }
+    if (!(0, exports.canDrop)(e.dataTransfer, parentTarget, tree)) {
+        return (0, exports.getDropTarget)(e, item.getParent(), tree, false);
     }
+    const childIndex = item.getIndexInParent() + (pos === types_1.DropTargetPosition.Top ? 0 : 1);
+    const numberOfDragItemsBeforeTarget = item
+        .getParent()
+        .getChildren()
+        .slice(0, childIndex)
+        .reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
+        ? ++counter
+        : counter, 0);
     return {
         item: item.getParent(),
-        childIndex: item.getIndexInParent() + (pos === types_1.DropTargetPosition.Top ? 0 : 1),
+        childIndex,
+        // TODO performance could be improved by computing this only when dragcode changed
+        insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
     };
 };
 exports.getDropTarget = getDropTarget;

package/lib/cjs/features/expand-all/feature.js

@@ -13,27 +13,29 @@ exports.expandAllFeature = void 0;
 const utils_1 = require("../../utils");
 exports.expandAllFeature = {
     key: "expand-all",
-    dependingFeatures: ["main", "tree"],
     createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
             yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
-        }), collapseAll: () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b;
-            (_b = (_a = tree.getConfig()).setExpandedItems) === null || _b === void 0 ? void 0 : _b.call(_a, []);
-        }) })),
+        }), collapseAll: () => {
+            tree.applySubStateUpdate("expandedItems", []);
+            tree.rebuildTree();
+        } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
             if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
                 return;
             }
+            if (!item.isFolder()) {
+                return;
+            }
             item.expand();
             yield (0, utils_1.poll)(() => !tree.getState().loadingItems.includes(item.getId()));
             yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
                 yield (0, utils_1.poll)(() => !tree.getState().loadingItems.includes(child.getId()));
                 yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
             })));
-        }), collapseAll: () => __awaiter(void 0, void 0, void 0, function* () {
-            yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
-                yield (child === null || child === void 0 ? void 0 : child.collapseAll());
-            })));
+        }), collapseAll: () => {
+            for (const child of item.getChildren()) {
+                child === null || child === void 0 ? void 0 : child.collapseAll();
+            }
             item.collapse();
-        }) })),
+        } })),
 };

package/lib/cjs/features/expand-all/types.d.ts

@@ -5,13 +5,13 @@ export type ExpandAllFeatureDef = {
         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;
 };

package/lib/cjs/features/hotkeys-core/feature.js

@@ -20,7 +20,6 @@ const findHotkeyMatch = (pressedKeys, tree, config1, config2) => {
 };
 exports.hotkeysCoreFeature = {
     key: "hotkeys-core",
-    dependingFeatures: ["main", "tree"],
     onTreeMount: (tree, element) => {
         const data = tree.getDataRef();
         const keydown = (e) => {

package/lib/cjs/features/main/types.d.ts

@@ -1,4 +1,4 @@
-import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState } from "../../types/core";
+import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState, Updater } from "../../types/core";
 import { ItemMeta } from "../tree/types";
 export type MainFeatureDef<T = any> = {
     state: {};
@@ -9,6 +9,8 @@ export type MainFeatureDef<T = any> = {
         setState?: SetStateFn<TreeState<T>>;
     };
     treeInstance: {
+        /** @internal */
+        applySubStateUpdate: <K extends keyof TreeState<any>>(stateName: K, updater: Updater<TreeState<T>[K]>) => void;
         setState: SetStateFn<TreeState<T>>;
         getState: () => TreeState<T>;
         setConfig: SetStateFn<TreeConfig<T>>;

package/lib/cjs/features/renaming/feature.js

@@ -4,38 +4,37 @@ exports.renamingFeature = void 0;
 const utils_1 = require("../../utils");
 exports.renamingFeature = {
     key: "renaming",
-    dependingFeatures: ["main", "tree"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: (0, utils_1.makeStateUpdater)("renamingItem", tree), setRenamingValue: (0, utils_1.makeStateUpdater)("renamingValue", tree), canRename: () => true }, defaultConfig)),
+    stateHandlerNames: {
+        renamingItem: "setRenamingItem",
+        renamingValue: "setRenamingValue",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { startRenamingItem: (itemId) => {
-            var _a, _b;
-            const config = instance.getConfig();
             const item = instance.getItemInstance(itemId);
             if (!item.canRename()) {
                 return;
             }
-            (_a = config.setRenamingItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId);
-            (_b = config.setRenamingValue) === null || _b === void 0 ? void 0 : _b.call(config, item.getItemName());
+            instance.applySubStateUpdate("renamingItem", itemId);
+            instance.applySubStateUpdate("renamingValue", item.getItemName());
         }, getRenamingItem: () => {
             const itemId = instance.getState().renamingItem;
             return itemId ? instance.getItemInstance(itemId) : null;
         }, getRenamingValue: () => instance.getState().renamingValue || "", abortRenaming: () => {
-            var _a, _b;
-            (_b = (_a = instance.getConfig()).setRenamingItem) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+            instance.applySubStateUpdate("renamingItem", null);
         }, completeRenaming: () => {
-            var _a, _b, _c;
+            var _a;
             const config = instance.getConfig();
             const item = instance.getRenamingItem();
             if (item) {
                 (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, instance.getState().renamingValue || "");
             }
-            (_c = (_b = instance.getConfig()).setRenamingItem) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+            instance.applySubStateUpdate("renamingItem", null);
         }, isRenamingItem: () => !!instance.getState().renamingItem })),
     createItemInstance: (prev, instance, tree) => (Object.assign(Object.assign({}, prev), { getRenameInputProps: () => ({
             onBlur: () => tree.abortRenaming(),
             value: tree.getRenamingValue(),
             onChange: (e) => {
-                var _a, _b;
-                (_b = (_a = tree.getConfig()).setRenamingValue) === null || _b === void 0 ? void 0 : _b.call(_a, e.target.value);
+                tree.applySubStateUpdate("renamingValue", e.target.value);
             },
         }), canRename: () => { var _a, _b, _c; return (_c = (_b = (_a = tree.getConfig()).canRename) === null || _b === void 0 ? void 0 : _b.call(_a, instance)) !== null && _c !== void 0 ? _c : true; }, isRenaming: () => instance.getId() === tree.getState().renamingItem })),
     hotkeys: {