@headless-tree/core 0.0.10 → 0.0.12

package/lib/esm/core/build-proxified-instance.js

@@ -0,0 +1,54 @@
+import { throwError } from "../utilities/errors";
+const noop = () => { };
+const findPrevInstanceMethod = (features, instanceType, methodKey, featureSearchIndex) => {
+    var _a;
+    for (let i = featureSearchIndex; i >= 0; i--) {
+        const feature = features[i];
+        const itemInstanceMethod = (_a = feature[instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
+        if (itemInstanceMethod) {
+            return i;
+        }
+    }
+    return null;
+};
+const invokeInstanceMethod = (features, instanceType, opts, methodKey, featureIndex, args) => {
+    var _a;
+    const prevIndex = findPrevInstanceMethod(features, instanceType, methodKey, featureIndex - 1);
+    const itemInstanceMethod = (_a = features[featureIndex][instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
+    return itemInstanceMethod(Object.assign(Object.assign({}, opts), { prev: prevIndex !== null
+            ? (...newArgs) => invokeInstanceMethod(features, instanceType, opts, methodKey, prevIndex, newArgs)
+            : null }), ...args);
+};
+export const buildProxiedInstance = (features, instanceType, buildOpts) => {
+    // demo with prototypes: https://jsfiddle.net/bgenc58r/
+    const opts = {};
+    const item = new Proxy({}, {
+        has(target, key) {
+            if (typeof key === "symbol") {
+                return false;
+            }
+            if (key === "toJSON") {
+                return false;
+            }
+            const hasInstanceMethod = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
+            return Boolean(hasInstanceMethod);
+        },
+        get(target, key) {
+            if (typeof key === "symbol") {
+                return undefined;
+            }
+            if (key === "toJSON") {
+                return {};
+            }
+            return (...args) => {
+                const featureIndex = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
+                if (featureIndex === null) {
+                    throw throwError(`feature missing for method ${key}`);
+                }
+                return invokeInstanceMethod(features, instanceType, opts, key, featureIndex, args);
+            };
+        },
+    });
+    Object.assign(opts, buildOpts(item));
+    return [item, noop];
+};

package/lib/esm/core/build-static-instance.d.ts

@@ -0,0 +1,2 @@
+import { InstanceBuilder } from "../features/main/types";
+export declare const buildStaticInstance: InstanceBuilder;

package/lib/esm/core/build-static-instance.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-continue,no-labels,no-extra-label */
+export const buildStaticInstance = (features, instanceType, buildOpts) => {
+    const instance = {};
+    const finalize = () => {
+        const opts = buildOpts(instance);
+        featureLoop: for (let i = 0; i < features.length; i++) {
+            // Loop goes in forward order, each features overwrite previous ones and wraps those in a prev() fn
+            const definition = features[i][instanceType];
+            if (!definition)
+                continue featureLoop;
+            methodLoop: for (const [key, method] of Object.entries(definition)) {
+                if (!method)
+                    continue methodLoop;
+                const prev = instance[key];
+                instance[key] = (...args) => {
+                    return method(Object.assign(Object.assign({}, opts), { prev }), ...args);
+                };
+            }
+        }
+    };
+    return [instance, finalize];
+};

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

@@ -1,42 +1,38 @@
 import { treeFeature } from "../features/tree/feature";
-const buildItemInstance = (features, tree, itemId) => {
-    var _a, _b;
-    const itemInstance = {};
-    for (const feature of features) {
-        Object.assign(
-        // TODO dont run createItemInstance, but assign prototype objects instead?
-        // https://jsfiddle.net/bgenc58r/
-        itemInstance, (_b = (_a = feature.createItemInstance) === null || _a === void 0 ? void 0 : _a.call(feature, Object.assign({}, itemInstance), itemInstance, tree, itemId)) !== null && _b !== void 0 ? _b : {});
-    }
-    return itemInstance;
-};
+import { buildStaticInstance } from "./build-static-instance";
+import { throwError } from "../utilities/errors";
 const verifyFeatures = (features) => {
     var _a;
     const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
     for (const feature of features !== null && features !== void 0 ? features : []) {
         const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
         if (missingDependency) {
-            throw new Error(`${feature.key} needs ${missingDependency}`);
+            throw throwError(`${feature.key} needs ${missingDependency}`);
         }
     }
 };
-const compareFeatures = (feature1, feature2) => {
-    var _a;
+const compareFeatures = (originalOrder) => (feature1, feature2) => {
+    var _a, _b;
     if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
         return 1;
     }
-    return -1;
+    if (feature1.key && ((_b = feature2.overwrites) === null || _b === void 0 ? void 0 : _b.includes(feature1.key))) {
+        return -1;
+    }
+    return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
 };
-const sortFeatures = (features = []) => features.sort(compareFeatures);
+const sortFeatures = (features = []) => features.sort(compareFeatures(features));
 export const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e;
-    const treeInstance = {};
+    var _a, _b, _c, _d;
+    const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : buildStaticInstance;
     const additionalFeatures = [
         treeFeature,
         ...sortFeatures(initialConfig.features),
     ];
     verifyFeatures(additionalFeatures);
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = (_a = initialConfig.initialState) !== null && _a !== void 0 ? _a : initialConfig.state) !== null && _b !== void 0 ? _b : {});
+    const features = [...additionalFeatures];
+    const [treeInstance, finalizeTree] = buildInstance(features, "treeInstance", (tree) => ({ tree }));
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
@@ -47,11 +43,12 @@ export const createTree = (initialConfig) => {
     const itemDataRefs = {};
     let itemMetaMap = {};
     const hotkeyPresets = {};
-    const rebuildItemMeta = (main) => {
+    const rebuildItemMeta = () => {
         // TODO can we find a way to only run this for the changed substructure?
         itemInstances = [];
         itemMetaMap = {};
-        const rootInstance = buildItemInstance([main, ...additionalFeatures], treeInstance, config.rootItemId);
+        const [rootInstance, finalizeRootInstance] = buildInstance(features, "itemInstance", (item) => ({ item, tree: treeInstance, itemId: config.rootItemId }));
+        finalizeRootInstance();
         itemInstancesMap[config.rootItemId] = rootInstance;
         itemMetaMap[config.rootItemId] = {
             itemId: config.rootItemId,
@@ -64,7 +61,12 @@ export const createTree = (initialConfig) => {
         for (const item of treeInstance.getItemsMeta()) {
             itemMetaMap[item.itemId] = item;
             if (!itemInstancesMap[item.itemId]) {
-                const instance = buildItemInstance([main, ...additionalFeatures], treeInstance, item.itemId);
+                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
+                    item: instance,
+                    tree: treeInstance,
+                    itemId: item.itemId,
+                }));
+                finalizeInstance();
                 itemInstancesMap[item.itemId] = instance;
                 itemInstances.push(instance);
             }
@@ -80,25 +82,36 @@ export const createTree = (initialConfig) => {
     };
     const mainFeature = {
         key: "main",
-        createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
+        treeInstance: {
+            getState: () => state,
+            setState: ({}, updater) => {
                 var _a;
                 // 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);
-            }, applySubStateUpdate: (stateName, 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
+            },
+            applySubStateUpdate: ({}, stateName, updater) => {
                 state[stateName] =
                     typeof updater === "function" ? updater(state[stateName]) : updater;
-                config[stateHandlerNames[stateName]](state[stateName]);
-            }, rebuildTree: () => {
+                const externalStateSetter = config[stateHandlerNames[stateName]];
+                externalStateSetter === null || externalStateSetter === void 0 ? void 0 : externalStateSetter(state[stateName]);
+            },
+            // TODO rebuildSubTree: (itemId: string) => void;
+            rebuildTree: () => {
                 var _a;
-                rebuildItemMeta(mainFeature);
+                rebuildItemMeta();
                 (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
-            }, getConfig: () => config, setConfig: (updater) => {
+            },
+            getConfig: () => config,
+            setConfig: (_, updater) => {
                 config = typeof updater === "function" ? updater(config) : updater;
                 if (config.state) {
                     state = Object.assign(Object.assign({}, state), config.state);
                 }
-            }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
+            },
+            getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+            getItems: () => itemInstances,
+            registerElement: ({}, element) => {
                 if (treeElement === element) {
                     return;
                 }
@@ -109,28 +122,37 @@ export const createTree = (initialConfig) => {
                     eachFeature((feature) => { var _a; return (_a = feature.onTreeMount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, element); });
                 }
                 treeElement = element;
-            }, getElement: () => treeElement, getDataRef: () => treeDataRef, getHotkeyPresets: () => hotkeyPresets })),
-        createItemInstance: (prev, instance, _, itemId) => (Object.assign(Object.assign({}, prev), { registerElement: (element) => {
+            },
+            getElement: () => treeElement,
+            getDataRef: () => treeDataRef,
+            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;
                 }
                 const oldElement = itemElementsMap[itemId];
                 if (oldElement && !element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, oldElement, treeInstance); });
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, item, oldElement, treeInstance); });
                 }
                 else if (!oldElement && element) {
-                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, element, treeInstance); });
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, item, element, treeInstance); });
                 }
                 itemElementsMap[itemId] = element;
-            }, getElement: () => itemElementsMap[itemId], 
+            },
+            getElement: ({ itemId }) => itemElementsMap[itemId],
             // eslint-disable-next-line no-return-assign
-            getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
+            getDataRef: ({ itemId }) => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); },
+            getItemMeta: ({ itemId }) => itemMetaMap[itemId],
+        },
     };
-    const features = [mainFeature, ...additionalFeatures];
+    features.unshift(mainFeature);
     for (const feature of features) {
-        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
-        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
+        Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
-    rebuildItemMeta(mainFeature);
+    finalizeTree();
+    rebuildItemMeta();
     return treeInstance;
 };

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

@@ -1,5 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { AsyncDataLoaderFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-export declare const asyncDataLoaderFeature: FeatureImplementation<any, AsyncDataLoaderFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | AsyncDataLoaderFeatureDef<any>>;
+export declare const asyncDataLoaderFeature: FeatureImplementation;

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

@@ -6,18 +6,19 @@ export const asyncDataLoaderFeature = {
     stateHandlerNames: {
         loadingItems: "setLoadingItems",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => {
+    treeInstance: {
+        retrieveItemData: ({ tree }, itemId) => {
             var _a, _b, _c, _d, _e;
             var _f, _g;
-            const config = instance.getConfig();
-            const dataRef = instance.getDataRef();
+            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 = {});
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
-            if (!instance.getState().loadingItems.includes(itemId)) {
-                instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+            if (!tree.getState().loadingItems.includes(itemId)) {
+                tree.applySubStateUpdate("loadingItems", (loadingItems) => [
                     ...loadingItems,
                     itemId,
                 ]);
@@ -25,24 +26,25 @@ export const asyncDataLoaderFeature = {
                     var _a;
                     dataRef.current.itemData[itemId] = item;
                     (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
-                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
                 });
             }
             return (_e = (_d = config.createLoadingItemData) === null || _d === void 0 ? void 0 : _d.call(config)) !== null && _e !== void 0 ? _e : null;
-        }, retrieveChildrenIds: (itemId) => {
+        },
+        retrieveChildrenIds: ({ tree }, itemId) => {
             var _a, _b, _c, _d, _e;
             var _f, _g;
-            const config = instance.getConfig();
-            const dataRef = instance.getDataRef();
+            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 = {});
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
-            if (instance.getState().loadingItems.includes(itemId)) {
+            if (tree.getState().loadingItems.includes(itemId)) {
                 return [];
             }
-            instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+            tree.applySubStateUpdate("loadingItems", (loadingItems) => [
                 ...loadingItems,
                 itemId,
             ]);
@@ -56,8 +58,8 @@ export const asyncDataLoaderFeature = {
                     const childrenIds = children.map(({ id }) => id);
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_b = config.onLoadedChildren) === null || _b === void 0 ? void 0 : _b.call(config, itemId, childrenIds);
-                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                    instance.rebuildTree();
+                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    tree.rebuildTree();
                 });
             }
             else {
@@ -65,21 +67,31 @@ export const asyncDataLoaderFeature = {
                     var _a;
                     dataRef.current.childrenIds[itemId] = childrenIds;
                     (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
-                    instance.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
-                    instance.rebuildTree();
+                    tree.applySubStateUpdate("loadingItems", (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    tree.rebuildTree();
                 });
             }
             return [];
-        }, invalidateItemData: (itemId) => {
+        },
+    },
+    itemInstance: {
+        isLoading: ({ tree, item }) => tree.getState().loadingItems.includes(item.getItemMeta().itemId),
+        invalidateItemData: ({ tree, itemId }) => {
             var _a;
-            const dataRef = instance.getDataRef();
+            const dataRef = tree.getDataRef();
             (_a = dataRef.current.itemData) === null || _a === void 0 ? true : delete _a[itemId];
-            instance.retrieveItemData(itemId);
-        }, invalidateChildrenIds: (itemId) => {
+            tree.retrieveItemData(itemId);
+        },
+        invalidateChildrenIds: ({ tree, itemId }) => {
             var _a;
-            const dataRef = instance.getDataRef();
+            const dataRef = tree.getDataRef();
             (_a = dataRef.current.childrenIds) === null || _a === void 0 ? true : delete _a[itemId];
-            instance.retrieveChildrenIds(itemId);
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isLoading: () => tree.getState().loadingItems.includes(item.getItemMeta().itemId), invalidateItemData: () => tree.invalidateItemData(item.getItemMeta().itemId), invalidateChildrenIds: () => tree.invalidateChildrenIds(item.getItemMeta().itemId) })),
+            tree.retrieveChildrenIds(itemId);
+        },
+        updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
+            const dataRef = tree.getDataRef();
+            dataRef.current.childrenIds[itemId] = childrenIds;
+            tree.rebuildTree();
+        },
+    },
 };

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

@@ -27,15 +27,13 @@ export type AsyncDataLoaderFeatureDef<T> = {
         onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
         asyncDataLoader?: AsyncTreeDataLoader<T>;
     };
-    treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
-        /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
-        invalidateItemData: (itemId: string) => void;
-        invalidateChildrenIds: (itemId: string) => void;
-    };
+    treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"];
     itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
+        /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
         invalidateItemData: () => void;
         invalidateChildrenIds: () => void;
-        isLoading: () => void;
+        updateCachedChildrenIds: (childrenIds: string[]) => void;
+        isLoading: () => boolean;
     };
     hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
 };

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

@@ -1,3 +1,2 @@
-import { FeatureDefs, FeatureImplementation } from "../../types/core";
-import { DragAndDropFeatureDef } from "./types";
-export declare const dragAndDropFeature: FeatureImplementation<any, DragAndDropFeatureDef<any>, FeatureDefs<any>>;
+import { FeatureImplementation } from "../../types/core";
+export declare const dragAndDropFeature: FeatureImplementation;

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

@@ -1,47 +1,69 @@
 import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
-    key: "dragAndDrop",
+    key: "drag-and-drop",
     deps: ["selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree) }, defaultConfig)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree), canReorder: true }, defaultConfig)),
     stateHandlerNames: {
         dnd: "setDndState",
     },
-    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { getDropTarget: () => {
+    treeInstance: {
+        getDropTarget: ({ 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: () => {
-            var _a, _b, _c, _d, _e;
+        },
+        getDragLineData: ({ tree }) => {
+            var _a, _b, _c, _d, _e, _f;
             const target = tree.getDropTarget();
-            const intend = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
-            if (!target || target.childIndex === null)
+            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)
                 return null;
-            const children = target.item.getChildren();
-            if (target.childIndex === children.length) {
-                const bb = (_c = (_b = children[target.childIndex - 1]) === null || _b === void 0 ? void 0 : _b.getElement()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+            const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
+            const targetItem = tree.getItems()[target.dragLineIndex];
+            if (!targetItem) {
+                const bb = (_e = (_d = tree
+                    .getItems()[target.dragLineIndex - 1]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
                 if (bb) {
                     return {
-                        intend,
-                        top: bb.bottom,
-                        left: bb.left,
-                        right: bb.right,
+                        indent,
+                        top: bb.bottom - treeBb.bottom,
+                        left: bb.left + leftOffset - treeBb.left,
+                        width: bb.width - leftOffset,
                     };
                 }
             }
-            const bb = (_e = (_d = children[target.childIndex]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            const bb = (_f = targetItem.getElement()) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect();
             if (bb) {
                 return {
-                    intend,
-                    top: bb.top,
-                    left: bb.left,
-                    right: bb.right,
+                    indent,
+                    top: bb.top - treeBb.top,
+                    left: bb.left + leftOffset - treeBb.left,
+                    width: bb.width - leftOffset,
                 };
             }
             return null;
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
+        },
+        getDragLineStyle: ({ tree }, topOffset = -1, leftOffset = -8) => {
+            const dragLine = tree.getDragLineData();
+            return dragLine
+                ? {
+                    top: `${dragLine.top + topOffset}px`,
+                    left: `${dragLine.left + leftOffset}px`,
+                    width: `${dragLine.width - leftOffset}px`,
+                    pointerEvents: "none", // important to prevent capturing drag events
+                }
+                : { display: "none" };
+        },
+        getContainerProps: ({ prev }) => {
+            const prevProps = prev === null || prev === void 0 ? void 0 : prev();
+            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.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
+            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];
@@ -61,37 +83,45 @@ export const dragAndDropFeature = {
                         draggedItems: items,
                         draggingOverItem: tree.getFocusedItem(),
                     });
-                }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
+                }, onDragOver: (e) => {
                     var _a, _b, _c;
-                    const target = getDropTarget(e, item, tree);
                     const dataRef = tree.getDataRef();
-                    if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
-                        !((_c = (_b = tree.getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target))) {
+                    const nextDragCode = getDragCode(e, item, tree);
+                    if (nextDragCode === dataRef.current.lastDragCode) {
+                        if (dataRef.current.lastAllowDrop) {
+                            e.preventDefault();
+                        }
                         return;
                     }
-                    if (!canDrop(e.dataTransfer, target, tree)) {
+                    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;
                     }
-                    e.preventDefault();
-                    const nextDragCode = getDragCode(target);
-                    if (nextDragCode === dataRef.current.lastDragCode) {
+                    if (!canDrop(e.dataTransfer, target, tree)) {
+                        dataRef.current.lastAllowDrop = false;
                         return;
                     }
-                    dataRef.current.lastDragCode = nextDragCode;
                     tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
-                }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
+                    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: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
-                    var _a, _b, _c;
+                }, 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 (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+                    if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
                         return;
                     }
-                    (_c = (_b = tree.getConfig()).onCompleteForeignDrop) === null || _c === void 0 ? void 0 : _c.call(_b, draggedItems);
-                }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
+                    (_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);
@@ -106,30 +136,35 @@ export const dragAndDropFeature = {
                     if (draggedItems) {
                         (_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target);
                     }
-                    else {
+                    else if (e.dataTransfer) {
                         (_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target);
                     }
                     // TODO rebuild tree?
-                }) }));
-        }, isDropTarget: () => {
+                } }));
+        },
+        isDropTarget: ({ tree, item }) => {
             const target = tree.getDropTarget();
             return target ? target.item.getId() === item.getId() : false;
-        }, isDropTargetAbove: () => {
+        },
+        isDropTargetAbove: ({ tree, item }) => {
             const target = tree.getDropTarget();
             if (!target ||
                 target.childIndex === null ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
-        }, isDropTargetBelow: () => {
+        },
+        isDropTargetBelow: ({ tree, item }) => {
             const target = tree.getDropTarget();
             if (!target ||
                 target.childIndex === null ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;
-        }, isDraggingOver: () => {
+        },
+        isDraggingOver: ({ tree, item }) => {
             var _a, _b;
             return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();
-        } })),
+        },
+    },
 };