@headless-tree/core 0.0.0-20250224204705 → 0.0.0-20250322153940

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

@@ -1,7 +1,16 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeItemsFromParents = void 0;
-const removeItemsFromParents = (movedItems, onChangeChildren) => {
+const removeItemsFromParents = (movedItems, onChangeChildren) => __awaiter(void 0, void 0, void 0, function* () {
     const movedItemsIds = movedItems.map((item) => item.getId());
     const uniqueParents = [
         ...new Set(movedItems.map((item) => item.getParent())),
@@ -12,12 +21,12 @@ const removeItemsFromParents = (movedItems, onChangeChildren) => {
             const newChildren = siblings
                 .filter((sibling) => !movedItemsIds.includes(sibling.getId()))
                 .map((i) => i.getId());
-            onChangeChildren(parent, newChildren);
+            yield onChangeChildren(parent, newChildren);
             if (parent && "updateCachedChildrenIds" in parent) {
                 parent === null || parent === void 0 ? void 0 : parent.updateCachedChildrenIds(newChildren);
             }
         }
     }
     movedItems[0].getTree().rebuildTree();
-};
+});
 exports.removeItemsFromParents = removeItemsFromParents;

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

@@ -89,6 +89,7 @@ export const createTree = (initialConfig) => {
                 // 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); // TODO this cant be right... This doesnt allow external state updates
+                // TODO this is never used, remove
             },
             applySubStateUpdate: ({}, stateName, updater) => {
                 state[stateName] =
@@ -104,9 +105,18 @@ export const createTree = (initialConfig) => {
             },
             getConfig: () => config,
             setConfig: (_, updater) => {
-                config = typeof updater === "function" ? updater(config) : updater;
-                if (config.state) {
-                    state = Object.assign(Object.assign({}, state), config.state);
+                var _a, _b, _c;
+                const newConfig = typeof updater === "function" ? updater(config) : updater;
+                const hasChangedExpandedItems = ((_a = newConfig.state) === null || _a === void 0 ? void 0 : _a.expandedItems) &&
+                    ((_b = newConfig.state) === null || _b === void 0 ? void 0 : _b.expandedItems) !== state.expandedItems;
+                config = newConfig;
+                if (newConfig.state) {
+                    state = Object.assign(Object.assign({}, state), newConfig.state);
+                }
+                if (hasChangedExpandedItems) {
+                    // if expanded items where changed from the outside
+                    rebuildItemMeta();
+                    (_c = config.setState) === null || _c === void 0 ? void 0 : _c.call(config, state);
                 }
             },
             getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
@@ -128,7 +138,6 @@ export const createTree = (initialConfig) => {
             getHotkeyPresets: () => hotkeyPresets,
         },
         itemInstance: {
-            // TODO just change to a getRef method that memoizes, maybe as part of getProps
             registerElement: ({ itemId, item }, element) => {
                 if (itemElementsMap[itemId] === element) {
                     return;

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

@@ -1,81 +1,106 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { makeStateUpdater } from "../../utils";
 export const asyncDataLoaderFeature = {
     key: "async-data-loader",
-    getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: makeStateUpdater("loadingItems", tree) }, defaultConfig)),
+    getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItemData: makeStateUpdater("loadingItemData", tree), setLoadingItemChildrens: makeStateUpdater("loadingItemChildrens", tree) }, defaultConfig)),
     stateHandlerNames: {
-        loadingItems: "setLoadingItems",
+        loadingItemData: "setLoadingItemData",
+        loadingItemChildrens: "setLoadingItemChildrens",
     },
     treeInstance: {
+        waitForItemDataLoaded: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
+            tree.retrieveItemData(itemId);
+            if (!tree.getState().loadingItemData.includes(itemId)) {
+                return;
+            }
+            yield new Promise((resolve) => {
+                var _a, _b;
+                var _c, _d;
+                const dataRef = tree.getDataRef();
+                (_a = (_c = dataRef.current).awaitingItemDataLoading) !== null && _a !== void 0 ? _a : (_c.awaitingItemDataLoading = {});
+                (_b = (_d = dataRef.current.awaitingItemDataLoading)[itemId]) !== null && _b !== void 0 ? _b : (_d[itemId] = []);
+                dataRef.current.awaitingItemDataLoading[itemId].push(resolve);
+            });
+        }),
+        waitForItemChildrenLoaded: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
+            tree.retrieveChildrenIds(itemId);
+            if (!tree.getState().loadingItemChildrens.includes(itemId)) {
+                return;
+            }
+            yield new Promise((resolve) => {
+                var _a, _b;
+                var _c, _d;
+                const dataRef = tree.getDataRef();
+                (_a = (_c = dataRef.current).awaitingItemChildrensLoading) !== null && _a !== void 0 ? _a : (_c.awaitingItemChildrensLoading = {});
+                (_b = (_d = dataRef.current.awaitingItemChildrensLoading)[itemId]) !== null && _b !== void 0 ? _b : (_d[itemId] = []);
+                dataRef.current.awaitingItemChildrensLoading[itemId].push(resolve);
+            });
+        }),
         retrieveItemData: ({ tree }, itemId) => {
-            var _a, _b, _c, _d, _e;
-            var _f, _g;
+            var _a, _b, _c, _d;
+            var _e, _f;
             const config = tree.getConfig();
             const dataRef = tree.getDataRef();
-            (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
-            (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
+            (_a = (_e = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_e.itemData = {});
+            (_b = (_f = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_f.childrenIds = {});
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
-            if (!tree.getState().loadingItems.includes(itemId)) {
-                tree.applySubStateUpdate("loadingItems", (loadingItems) => [
-                    ...loadingItems,
+            if (!tree.getState().loadingItemData.includes(itemId)) {
+                tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+                    ...loadingItemData,
                     itemId,
                 ]);
-                (_c = config.asyncDataLoader) === null || _c === void 0 ? void 0 : _c.getItem(itemId).then((item) => {
-                    var _a;
+                (() => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a, _b, _c;
+                    const item = yield config.dataLoader.getItem(itemId);
                     dataRef.current.itemData[itemId] = item;
                     (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
-                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                });
+                    tree.applySubStateUpdate("loadingItemData", (loadingItemData) => loadingItemData.filter((id) => id !== itemId));
+                    (_b = dataRef.current.awaitingItemDataLoading) === null || _b === void 0 ? void 0 : _b[itemId].forEach((cb) => cb());
+                    (_c = dataRef.current.awaitingItemDataLoading) === null || _c === void 0 ? true : delete _c[itemId];
+                }))();
             }
-            return (_e = (_d = config.createLoadingItemData) === null || _d === void 0 ? void 0 : _d.call(config)) !== null && _e !== void 0 ? _e : null;
+            return (_d = (_c = config.createLoadingItemData) === null || _c === void 0 ? void 0 : _c.call(config)) !== null && _d !== void 0 ? _d : null;
         },
         retrieveChildrenIds: ({ tree }, itemId) => {
-            var _a, _b, _c, _d, _e;
-            var _f, _g;
+            var _a;
+            var _b;
             const config = tree.getConfig();
             const dataRef = tree.getDataRef();
-            (_a = (_f = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_f.itemData = {});
-            (_b = (_g = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_g.childrenIds = {});
+            (_a = (_b = dataRef.current).childrenIds) !== null && _a !== void 0 ? _a : (_b.childrenIds = {});
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
-            if (tree.getState().loadingItems.includes(itemId)) {
+            if (tree.getState().loadingItemChildrens.includes(itemId)) {
                 return [];
             }
-            tree.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);
-                    }
-                    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);
-                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                    tree.rebuildTree();
-                });
-            }
-            else {
-                (_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);
-                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                    tree.rebuildTree();
-                });
-            }
+            tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [...loadingItemChildrens, itemId]);
+            (() => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b, _c, _d;
+                const childrenIds = yield config.dataLoader.getChildren(itemId);
+                dataRef.current.childrenIds[itemId] = childrenIds;
+                (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
+                tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => loadingItemChildrens.filter((id) => id !== itemId));
+                tree.rebuildTree();
+                (_c = (_b = dataRef.current.awaitingItemChildrensLoading) === null || _b === void 0 ? void 0 : _b[itemId]) === null || _c === void 0 ? void 0 : _c.forEach((cb) => cb());
+                (_d = dataRef.current.awaitingItemChildrensLoading) === null || _d === void 0 ? true : delete _d[itemId];
+            }))();
             return [];
         },
     },
     itemInstance: {
-        isLoading: ({ tree, item }) => tree.getState().loadingItems.includes(item.getItemMeta().itemId),
+        isLoading: ({ tree, item }) => tree.getState().loadingItemData.includes(item.getItemMeta().itemId) ||
+            tree.getState().loadingItemChildrens.includes(item.getItemMeta().itemId),
         invalidateItemData: ({ tree, itemId }) => {
             var _a;
             const dataRef = tree.getDataRef();

package/lib/esm/features/async-data-loader/types.d.ts

@@ -1,33 +1,35 @@
 import { SetStateFn } from "../../types/core";
 import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-export type AsyncTreeDataLoader<T> = {
-    getItem: (itemId: string) => Promise<T>;
-    getChildren: (itemId: string) => Promise<string[]>;
-    getChildrenWithData?: (itemId: string) => Promise<{
-        id: string;
-        data: T;
-    }[]>;
-};
-export type AsyncDataLoaderRef<T = any> = {
+type AwaitingLoaderCallbacks = Record<string, (() => void)[]>;
+export interface AsyncDataLoaderDataRef<T = any> {
     itemData: Record<string, T>;
     childrenIds: Record<string, string[]>;
-};
+    awaitingItemDataLoading: AwaitingLoaderCallbacks;
+    awaitingItemChildrensLoading: AwaitingLoaderCallbacks;
+}
 /**
  * @category Async Data Loader/General
  * */
 export type AsyncDataLoaderFeatureDef<T> = {
     state: {
-        loadingItems: string[];
+        loadingItemData: string[];
+        loadingItemChildrens: string[];
     };
     config: {
         rootItemId: string;
+        /** Will be called when HT retrieves item data for an item whose item data is asynchronously being loaded.
+         * Can be used to create placeholder data to use for rendering the tree item while it is loaded. If not defined,
+         * the tree item data will be null. */
         createLoadingItemData?: () => T;
-        setLoadingItems?: SetStateFn<string[]>;
+        setLoadingItemData?: SetStateFn<string[]>;
+        setLoadingItemChildrens?: SetStateFn<string[]>;
         onLoadedItem?: (itemId: string, item: T) => void;
         onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
-        asyncDataLoader?: AsyncTreeDataLoader<T>;
     };
-    treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"];
+    treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
+        waitForItemDataLoaded: (itemId: string) => Promise<void>;
+        waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
+    };
     itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
         /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
         invalidateItemData: () => void;
@@ -37,3 +39,4 @@ export type AsyncDataLoaderFeatureDef<T> = {
     };
     hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
 };
+export {};

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

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
@@ -17,7 +26,7 @@ export const dragAndDropFeature = {
             const target = tree.getDropTarget();
             const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
             const treeBb = (_b = tree.getElement()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            if (!target || !treeBb || target.childIndex === null)
+            if (!target || !treeBb || !("childIndex" in target))
                 return null;
             const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
             const targetItem = tree.getItems()[target.dragLineIndex];
@@ -55,93 +64,89 @@ export const dragAndDropFeature = {
                 }
                 : { display: "none" };
         },
-        getContainerProps: ({ prev }) => {
-            const prevProps = prev === null || prev === void 0 ? void 0 : prev();
+        getContainerProps: ({ prev }, treeLabel) => {
+            const prevProps = prev === null || prev === void 0 ? void 0 : prev(treeLabel);
             return Object.assign(Object.assign({}, prevProps), { style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
         },
     },
     itemInstance: {
-        getProps: ({ tree, item, prev }) => {
-            var _a, _b, _c;
-            return (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: (e) => {
-                    var _a, _b, _c;
-                    const selectedItems = tree.getSelectedItems();
-                    const items = selectedItems.includes(item) ? selectedItems : [item];
-                    const config = tree.getConfig();
-                    if (!selectedItems.includes(item)) {
-                        tree.setSelectedItems([item.getItemMeta().itemId]);
-                    }
-                    if (!((_b = (_a = config.canDrag) === null || _a === void 0 ? void 0 : _a.call(config, items)) !== null && _b !== void 0 ? _b : true)) {
-                        e.preventDefault();
-                        return;
-                    }
-                    if (config.createForeignDragObject) {
-                        const { format, data } = config.createForeignDragObject(items);
-                        (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData(format, data);
-                    }
-                    tree.applySubStateUpdate("dnd", {
-                        draggedItems: items,
-                        draggingOverItem: tree.getFocusedItem(),
-                    });
-                }, onDragOver: (e) => {
-                    var _a, _b, _c;
-                    const dataRef = tree.getDataRef();
-                    const nextDragCode = getDragCode(e, item, tree);
-                    if (nextDragCode === dataRef.current.lastDragCode) {
-                        if (dataRef.current.lastAllowDrop) {
-                            e.preventDefault();
-                        }
-                        return;
-                    }
-                    dataRef.current.lastDragCode = nextDragCode;
-                    const target = getDropTarget(e, item, tree);
-                    if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
-                        (!e.dataTransfer ||
-                            !((_c = (_b = tree
-                                .getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
-                        dataRef.current.lastAllowDrop = false;
-                        return;
-                    }
-                    if (!canDrop(e.dataTransfer, target, tree)) {
-                        dataRef.current.lastAllowDrop = false;
-                        return;
-                    }
-                    tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
-                    dataRef.current.lastAllowDrop = true;
-                    e.preventDefault();
-                }, onDragLeave: () => {
-                    const dataRef = tree.getDataRef();
-                    dataRef.current.lastDragCode = "no-drag";
-                    tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
-                }, onDragEnd: (e) => {
-                    var _a, _b, _c, _d;
-                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                    tree.applySubStateUpdate("dnd", null);
-                    if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
-                        return;
-                    }
-                    (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
-                }, onDrop: (e) => {
-                    var _a, _b, _c;
-                    const dataRef = tree.getDataRef();
-                    const target = getDropTarget(e, item, tree);
-                    if (!canDrop(e.dataTransfer, target, tree)) {
-                        return;
-                    }
+        getProps: ({ tree, item, prev }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: true, onDragStart: (e) => {
+                var _a, _b, _c;
+                const selectedItems = tree.getSelectedItems();
+                const items = selectedItems.includes(item) ? selectedItems : [item];
+                const config = tree.getConfig();
+                if (!selectedItems.includes(item)) {
+                    tree.setSelectedItems([item.getItemMeta().itemId]);
+                }
+                if (!((_b = (_a = config.canDrag) === null || _a === void 0 ? void 0 : _a.call(config, items)) !== null && _b !== void 0 ? _b : true)) {
                     e.preventDefault();
-                    const config = tree.getConfig();
-                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                    dataRef.current.lastDragCode = undefined;
-                    tree.applySubStateUpdate("dnd", null);
-                    if (draggedItems) {
-                        (_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target);
-                    }
-                    else if (e.dataTransfer) {
-                        (_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target);
+                    return;
+                }
+                if (config.createForeignDragObject) {
+                    const { format, data } = config.createForeignDragObject(items);
+                    (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData(format, data);
+                }
+                tree.applySubStateUpdate("dnd", {
+                    draggedItems: items,
+                    draggingOverItem: tree.getFocusedItem(),
+                });
+            }, onDragOver: (e) => {
+                var _a, _b, _c;
+                const dataRef = tree.getDataRef();
+                const nextDragCode = getDragCode(e, item, tree);
+                if (nextDragCode === dataRef.current.lastDragCode) {
+                    if (dataRef.current.lastAllowDrop) {
+                        e.preventDefault();
                     }
-                    // TODO rebuild tree?
-                } }));
-        },
+                    return;
+                }
+                dataRef.current.lastDragCode = nextDragCode;
+                const target = getDropTarget(e, item, tree);
+                if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
+                    (!e.dataTransfer ||
+                        !((_c = (_b = tree
+                            .getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
+                    dataRef.current.lastAllowDrop = false;
+                    return;
+                }
+                if (!canDrop(e.dataTransfer, target, tree)) {
+                    dataRef.current.lastAllowDrop = false;
+                    return;
+                }
+                tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
+                dataRef.current.lastAllowDrop = true;
+                e.preventDefault();
+            }, onDragLeave: () => {
+                const dataRef = tree.getDataRef();
+                dataRef.current.lastDragCode = "no-drag";
+                tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
+            }, onDragEnd: (e) => {
+                var _a, _b, _c, _d;
+                const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+                tree.applySubStateUpdate("dnd", null);
+                if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
+                    return;
+                }
+                (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
+            }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b, _c;
+                const dataRef = tree.getDataRef();
+                const target = getDropTarget(e, item, tree);
+                if (!canDrop(e.dataTransfer, target, tree)) {
+                    return;
+                }
+                e.preventDefault();
+                const config = tree.getConfig();
+                const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+                dataRef.current.lastDragCode = undefined;
+                tree.applySubStateUpdate("dnd", null);
+                if (draggedItems) {
+                    yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
+                }
+                else if (e.dataTransfer) {
+                    yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
+                }
+            }) })),
         isDropTarget: ({ tree, item }) => {
             const target = tree.getDropTarget();
             return target ? target.item.getId() === item.getId() : false;
@@ -149,7 +154,7 @@ export const dragAndDropFeature = {
         isDropTargetAbove: ({ tree, item }) => {
             const target = tree.getDropTarget();
             if (!target ||
-                target.childIndex === null ||
+                !("childIndex" in target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
@@ -157,7 +162,7 @@ export const dragAndDropFeature = {
         isDropTargetBelow: ({ tree, item }) => {
             const target = tree.getDropTarget();
             if (!target ||
-                target.childIndex === null ||
+                !("childIndex" in target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;

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

@@ -1,19 +1,19 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
-export type DndDataRef = {
+export interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
-};
-export type DndState<T> = {
+}
+export interface DndState<T> {
     draggedItems?: ItemInstance<T>[];
     draggingOverItem?: ItemInstance<T>;
     dragTarget?: DropTarget<T>;
-};
-export type DragLineData = {
+}
+export interface DragLineData {
     indent: number;
     top: number;
     left: number;
     width: number;
-};
+}
 export type DropTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
@@ -22,10 +22,6 @@ export type DropTarget<T> = {
     dragLineLevel: number;
 } | {
     item: ItemInstance<T>;
-    childIndex: null;
-    insertionIndex: null;
-    dragLineIndex: null;
-    dragLineLevel: null;
 };
 export declare enum DropTargetPosition {
     Top = "top",
@@ -43,7 +39,6 @@ export type DragAndDropFeatureDef<T> = {
          * If `canReorder` is `false`, this is ignored. */
         reorderAreaPercentage?: number;
         canReorder?: boolean;
-        isItemDraggable?: (item: ItemInstance<T>) => boolean;
         canDrag?: (items: ItemInstance<T>[]) => boolean;
         canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
         indent?: number;
@@ -52,15 +47,8 @@ export type DragAndDropFeatureDef<T> = {
             data: any;
         };
         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.
-         */
+        onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void | Promise<void>;
+        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => void | Promise<void>;
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
     };
     treeInstance: {

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

@@ -35,13 +35,13 @@ const getItemDropCategory = (item) => {
         return ItemDropCategory.ExpandedFolder;
     }
     const parent = item.getParent();
-    if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+    if (parent && item.getIndexInParent() === item.getItemMeta().setSize - 1) {
         return ItemDropCategory.LastInGroup;
     }
     return ItemDropCategory.Item;
 };
 const getTargetPlacement = (e, item, tree, canMakeChild) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const config = tree.getConfig();
     if (!config.canReorder) {
         return canMakeChild
@@ -49,8 +49,8 @@ const getTargetPlacement = (e, item, tree, canMakeChild) => {
             : { type: PlacementType.ReorderBelow };
     }
     const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    const topPercent = bb ? (e.pageY - bb.top) / bb.height : 0.5;
-    const leftPixels = bb ? e.pageX - bb.left : 0;
+    const topPercent = bb ? (e.clientY - bb.top) / bb.height : 0.5;
+    const leftPixels = bb ? e.clientX - bb.left : 0;
     const targetDropCategory = getItemDropCategory(item);
     const reorderAreaPercentage = !canMakeChild
         ? 0.5
@@ -70,9 +70,10 @@ const getTargetPlacement = (e, item, tree, canMakeChild) => {
             if (topPercent < 0.5) {
                 return { type: PlacementType.ReorderAbove };
             }
+            const minLevel = (_e = (_d = item.getItemBelow()) === null || _d === void 0 ? void 0 : _d.getItemMeta().level) !== null && _e !== void 0 ? _e : 0;
             return {
                 type: PlacementType.Reparent,
-                reparentLevel: Math.floor(leftPixels / indent),
+                reparentLevel: Math.max(minLevel, Math.floor(leftPixels / indent)),
             };
         }
         // if not at left of item area, treat as if it was a normal item
@@ -105,22 +106,8 @@ export const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canRe
     const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
     const itemMeta = item.getItemMeta();
     const parent = item.getParent();
-    const itemTarget = {
-        item,
-        childIndex: null,
-        insertionIndex: null,
-        dragLineIndex: null,
-        dragLineLevel: null,
-    };
-    const parentTarget = parent
-        ? {
-            item: parent,
-            childIndex: null,
-            insertionIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-        }
-        : null;
+    const itemTarget = { item };
+    const parentTarget = parent ? { item: parent } : null;
     const canBecomeSibling = parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
     const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
     const placement = getTargetPlacement(e, item, tree, canMakeChild);