@headless-tree/core 0.0.14 → 1.0.0

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

@@ -1,14 +1,24 @@
 "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.insertItemsAtTarget = void 0;
-const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
+const insertItemsAtTarget = (itemIds, target, onChangeChildren) => __awaiter(void 0, void 0, void 0, function* () {
+    yield target.item.getTree().waitForItemChildrenLoaded(target.item.getId());
+    const oldChildrenIds = target.item
+        .getTree()
+        .retrieveChildrenIds(target.item.getId());
     // add moved items to new common parent, if dropped onto parent
-    if (target.childIndex === null) {
-        const newChildren = [
-            ...target.item.getChildren().map((item) => item.getId()),
-            ...itemIds,
-        ];
-        onChangeChildren(target.item, newChildren);
+    if (!("childIndex" in target)) {
+        const newChildren = [...oldChildrenIds, ...itemIds];
+        yield onChangeChildren(target.item, newChildren);
         if (target.item && "updateCachedChildrenIds" in target.item) {
             target.item.updateCachedChildrenIds(newChildren);
         }
@@ -16,16 +26,15 @@ const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
         return;
     }
     // add moved items to new common parent, if dropped between siblings
-    const oldChildren = target.item.getChildren();
     const newChildren = [
-        ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+        ...oldChildrenIds.slice(0, target.insertionIndex),
         ...itemIds,
-        ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+        ...oldChildrenIds.slice(target.insertionIndex),
     ];
-    onChangeChildren(target.item, newChildren);
+    yield onChangeChildren(target.item, newChildren);
     if (target.item && "updateCachedChildrenIds" in target.item) {
         target.item.updateCachedChildrenIds(newChildren);
     }
     target.item.getTree().rebuildTree();
-};
+});
 exports.insertItemsAtTarget = insertItemsAtTarget;

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

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

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,4 +1,13 @@
-import { canDrop, getDragCode, getDropTarget } from "./utils";
+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, getDragTarget, isOrderedDragTarget, } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
     key: "drag-and-drop",
@@ -8,16 +17,16 @@ export const 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 || !isOrderedDragTarget(target))
                 return null;
             const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
             const targetItem = tree.getItems()[target.dragLineIndex];
@@ -27,7 +36,7 @@ export const 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,
                     };
@@ -55,109 +64,105 @@ 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?
-                } }));
-        },
-        isDropTarget: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+                    return;
+                }
+                dataRef.current.lastDragCode = nextDragCode;
+                const target = 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 (!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 = getDragTarget(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));
+                }
+            }) })),
+        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 ||
+                !isOrderedDragTarget(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 ||
+                !isOrderedDragTarget(target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;