@headless-tree/core 0.0.14 → 0.0.15

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @headless-tree/core
 
+## 0.0.15
+
+### Patch Changes
+
+- 2af5668: Bug fix: Mutations to expanded tree items from outside will now trigger a rebuild of the tree structure (#65)
+- 617faea: Support for keyboard-controlled drag-and-drop events
+
 ## 0.0.14
 
 ### Patch Changes

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

@@ -92,6 +92,7 @@ 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] =
@@ -107,9 +108,18 @@ 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],
@@ -131,7 +141,6 @@ 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/cjs/features/async-data-loader/feature.js

@@ -1,84 +1,109 @@
 "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.asyncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
 exports.asyncDataLoaderFeature = {
     key: "async-data-loader",
-    getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: (0, utils_1.makeStateUpdater)("loadingItems", tree) }, defaultConfig)),
+    getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItemData: (0, utils_1.makeStateUpdater)("loadingItemData", tree), setLoadingItemChildrens: (0, utils_1.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/cjs/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/cjs/features/drag-and-drop/feature.js

@@ -1,4 +1,13 @@
 "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.dragAndDropFeature = void 0;
 const utils_1 = require("./utils");
@@ -11,16 +20,16 @@ exports.dragAndDropFeature = {
         dnd: "setDndState",
     },
     treeInstance: {
-        getDropTarget: ({ tree }) => {
+        getDragTarget: ({ tree }) => {
             var _a, _b;
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
         },
         getDragLineData: ({ tree }) => {
             var _a, _b, _c, _d, _e, _f;
-            const target = tree.getDropTarget();
+            const target = tree.getDragTarget();
             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];
@@ -30,7 +39,7 @@ exports.dragAndDropFeature = {
                 if (bb) {
                     return {
                         indent,
-                        top: bb.bottom - treeBb.bottom,
+                        top: bb.bottom - treeBb.top,
                         left: bb.left + leftOffset - treeBb.left,
                         width: bb.width - leftOffset,
                     };
@@ -58,109 +67,105 @@ exports.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 = (0, utils_1.getDragCode)(e, item, tree);
-                    if (nextDragCode === dataRef.current.lastDragCode) {
-                        if (dataRef.current.lastAllowDrop) {
-                            e.preventDefault();
-                        }
-                        return;
-                    }
-                    dataRef.current.lastDragCode = nextDragCode;
-                    const target = (0, utils_1.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 (!(0, utils_1.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 = (0, utils_1.getDropTarget)(e, item, tree);
-                    if (!(0, utils_1.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 = (0, utils_1.getDragCode)(e, item, tree);
+                if (nextDragCode === dataRef.current.lastDragCode) {
+                    if (dataRef.current.lastAllowDrop) {
+                        e.preventDefault();
                     }
-                    // TODO rebuild tree?
-                } }));
-        },
-        isDropTarget: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+                    return;
+                }
+                dataRef.current.lastDragCode = nextDragCode;
+                const target = (0, utils_1.getDragTarget)(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 (!(0, utils_1.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 = (0, utils_1.getDragTarget)(e, item, tree);
+                if (!(0, utils_1.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));
+                }
+            }) })),
+        isDragTarget: ({ tree, item }) => {
+            const target = tree.getDragTarget();
             return target ? target.item.getId() === item.getId() : false;
         },
-        isDropTargetAbove: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+        isDragTargetAbove: ({ tree, item }) => {
+            const target = tree.getDragTarget();
             if (!target ||
-                target.childIndex === null ||
+                !("childIndex" in target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
         },
-        isDropTargetBelow: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+        isDragTargetBelow: ({ tree, item }) => {
+            const target = tree.getDragTarget();
             if (!target ||
-                target.childIndex === null ||
+                !("childIndex" in target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;

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

@@ -1,20 +1,20 @@
 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 = {
+    dragTarget?: DragTarget<T>;
+}
+export interface DragLineData {
     indent: number;
     top: number;
     left: number;
     width: number;
-};
-export type DropTarget<T> = {
+}
+export type DragTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
     insertionIndex: number;
@@ -22,12 +22,8 @@ export type DropTarget<T> = {
     dragLineLevel: number;
 } | {
     item: ItemInstance<T>;
-    childIndex: null;
-    insertionIndex: null;
-    dragLineIndex: null;
-    dragLineLevel: null;
 };
-export declare enum DropTargetPosition {
+export declare enum DragTargetPosition {
     Top = "top",
     Bottom = "bottom",
     Item = "item"
@@ -43,35 +39,27 @@ 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;
+        canDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => boolean;
         indent?: number;
         createForeignDragObject?: (items: ItemInstance<T>[]) => {
             format: string;
             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.
-         */
+        canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => boolean;
+        onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
+        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
     };
     treeInstance: {
-        getDropTarget: () => DropTarget<T> | null;
+        getDragTarget: () => DragTarget<T> | null;
         getDragLineData: () => DragLineData | null;
         getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
     };
     itemInstance: {
-        isDropTarget: () => boolean;
-        isDropTargetAbove: () => boolean;
-        isDropTargetBelow: () => boolean;
+        isDragTarget: () => boolean;
+        isDragTargetAbove: () => boolean;
+        isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
     };
     hotkeys: never;

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropTargetPosition = void 0;
-var DropTargetPosition;
-(function (DropTargetPosition) {
-    DropTargetPosition["Top"] = "top";
-    DropTargetPosition["Bottom"] = "bottom";
-    DropTargetPosition["Item"] = "item";
-})(DropTargetPosition || (exports.DropTargetPosition = DropTargetPosition = {}));
+exports.DragTargetPosition = void 0;
+var DragTargetPosition;
+(function (DragTargetPosition) {
+    DragTargetPosition["Top"] = "top";
+    DragTargetPosition["Bottom"] = "bottom";
+    DragTargetPosition["Item"] = "item";
+})(DragTargetPosition || (exports.DragTargetPosition = DragTargetPosition = {}));

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

@@ -1,5 +1,20 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget } from "./types";
-export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
+import { DragTarget } from "./types";
+export declare enum ItemDropCategory {
+    Item = 0,
+    ExpandedFolder = 1,
+    LastInGroup = 2
+}
+export declare const canDrop: (dataTransfer: DataTransfer | null, target: DragTarget<any>, tree: TreeInstance<any>) => boolean;
+export declare const getItemDropCategory: (item: ItemInstance<any>) => ItemDropCategory;
+export declare const getInsertionIndex: <T>(children: ItemInstance<T>[], childIndex: number, draggedItems: ItemInstance<T>[] | undefined) => number;
 export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
-export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DropTarget<any>;
+/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6)  */
+export declare const getReparentTarget: <T>(item: ItemInstance<T>, reparentLevel: number, draggedItems: ItemInstance<T>[] | undefined) => {
+    item: ItemInstance<any>;
+    childIndex: number;
+    insertionIndex: number;
+    dragLineIndex: number;
+    dragLineLevel: number;
+};
+export declare const getDragTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DragTarget<any>;