@headless-tree/core 0.0.6 → 0.0.8

package/CHANGELOG.md

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

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

@@ -10,11 +10,33 @@ const buildItemInstance = (features, tree, itemId) => {
     }
     return itemInstance;
 };
+const verifyFeatures = (features) => {
+    var _a;
+    const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
+    for (const feature of features !== null && features !== void 0 ? features : []) {
+        const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
+        if (missingDependency) {
+            throw new Error(`${feature.key} needs ${missingDependency}`);
+        }
+    }
+};
+const compareFeatures = (feature1, feature2) => {
+    var _a;
+    if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
+        return 1;
+    }
+    return -1;
+};
+const sortFeatures = (features = []) => features.sort(compareFeatures);
 const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const treeInstance = {};
-    const additionalFeatures = [feature_1.treeFeature, ...((_a = initialConfig.features) !== null && _a !== void 0 ? _a : [])];
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
+    const additionalFeatures = [
+        feature_1.treeFeature,
+        ...sortFeatures(initialConfig.features),
+    ];
+    verifyFeatures(additionalFeatures);
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = (_a = initialConfig.initialState) !== null && _a !== void 0 ? _a : initialConfig.state) !== null && _b !== void 0 ? _b : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
@@ -105,11 +127,10 @@ const createTree = (initialConfig) => {
             // eslint-disable-next-line no-return-assign
             getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
     };
-    // todo sort features
     const features = [mainFeature, ...additionalFeatures];
     for (const feature of features) {
-        Object.assign(treeInstance, (_e = (_d = feature.createTreeInstance) === null || _d === void 0 ? void 0 : _d.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _e !== void 0 ? _e : {});
-        Object.assign(hotkeyPresets, (_f = feature.hotkeys) !== null && _f !== void 0 ? _f : {});
+        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
+        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
     }
     rebuildItemMeta(mainFeature);
     return treeInstance;

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

@@ -4,7 +4,6 @@ exports.asyncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
 exports.asyncDataLoaderFeature = {
     key: "async-data-loader",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: (0, utils_1.makeStateUpdater)("loadingItems", tree) }, defaultConfig)),
     stateHandlerNames: {

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

@@ -5,7 +5,7 @@ const utils_1 = require("./utils");
 const utils_2 = require("../../utils");
 exports.dragAndDropFeature = {
     key: "dragAndDrop",
-    dependingFeatures: ["main", "tree", "selection"],
+    deps: ["selection"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: (0, utils_2.makeStateUpdater)("dnd", tree) }, defaultConfig)),
     stateHandlerNames: {
         dnd: "setDndState",
@@ -13,6 +13,34 @@ exports.dragAndDropFeature = {
     createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { getDropTarget: () => {
             var _a, _b;
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
+        }, getDragLineData: () => {
+            var _a, _b, _c, _d, _e;
+            const target = tree.getDropTarget();
+            const intend = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
+            if (!target || target.childIndex === null)
+                return null;
+            const children = target.item.getChildren();
+            if (target.childIndex === children.length) {
+                const bb = (_c = (_b = children[target.childIndex - 1]) === null || _b === void 0 ? void 0 : _b.getElement()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                if (bb) {
+                    return {
+                        intend,
+                        top: bb.bottom,
+                        left: bb.left,
+                        right: bb.right,
+                    };
+                }
+            }
+            const bb = (_e = (_d = children[target.childIndex]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            if (bb) {
+                return {
+                    intend,
+                    top: bb.top,
+                    left: bb.left,
+                    right: bb.right,
+                };
+            }
+            return null;
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
             var _a, _b, _c;

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

@@ -7,6 +7,12 @@ export type DndState<T> = {
     draggingOverItem?: ItemInstance<T>;
     dragTarget?: DropTarget<T>;
 };
+export type DragLineData = {
+    intend: number;
+    top: number;
+    left: number;
+    right: number;
+};
 export type DropTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
@@ -51,6 +57,7 @@ export type DragAndDropFeatureDef<T> = {
     };
     treeInstance: {
         getDropTarget: () => DropTarget<T> | null;
+        getDragLineData: () => DragLineData | null;
     };
     itemInstance: {
         isDropTarget: () => boolean;

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

@@ -13,7 +13,6 @@ exports.expandAllFeature = void 0;
 const utils_1 = require("../../utils");
 exports.expandAllFeature = {
     key: "expand-all",
-    dependingFeatures: ["main", "tree"],
     createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
             yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
         }), collapseAll: () => {

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

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

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

@@ -4,14 +4,12 @@ exports.renamingFeature = void 0;
 const utils_1 = require("../../utils");
 exports.renamingFeature = {
     key: "renaming",
-    dependingFeatures: ["main", "tree"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: (0, utils_1.makeStateUpdater)("renamingItem", tree), setRenamingValue: (0, utils_1.makeStateUpdater)("renamingValue", tree), canRename: () => true }, defaultConfig)),
     stateHandlerNames: {
         renamingItem: "setRenamingItem",
         renamingValue: "setRenamingValue",
     },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { startRenamingItem: (itemId) => {
-            const config = instance.getConfig();
             const item = instance.getItemInstance(itemId);
             if (!item.canRename()) {
                 return;

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

@@ -4,7 +4,6 @@ exports.searchFeature = void 0;
 const utils_1 = require("../../utils");
 exports.searchFeature = {
     key: "search",
-    dependingFeatures: ["main", "tree"],
     getInitialState: (initialState) => (Object.assign({ search: null }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSearch: (0, utils_1.makeStateUpdater)("search", tree), isSearchMatchingItem: (search, item) => search.length > 0 &&
             item.getItemName().toLowerCase().includes(search.toLowerCase()) }, defaultConfig)),

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

@@ -4,7 +4,6 @@ exports.selectionFeature = void 0;
 const utils_1 = require("../../utils");
 exports.selectionFeature = {
     key: "selection",
-    dependingFeatures: ["main", "tree"],
     getInitialState: (initialState) => (Object.assign({ selectedItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSelectedItems: (0, utils_1.makeStateUpdater)("selectedItems", tree) }, defaultConfig)),
     stateHandlerNames: {
@@ -36,7 +35,7 @@ exports.selectionFeature = {
             const newSelectedItems = tree
                 .getItems()
                 .slice(a, b + 1)
-                .map((item) => item.getItemMeta().itemId);
+                .map((treeItem) => treeItem.getItemMeta().itemId);
             if (!ctrl) {
                 tree.setSelectedItems(newSelectedItems);
                 return;

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

@@ -4,7 +4,6 @@ exports.syncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
 exports.syncDataLoaderFeature = {
     key: "sync-data-loader",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: (0, utils_1.makeStateUpdater)("loadingItems", tree) }, defaultConfig)),
     stateHandlerNames: {

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

@@ -13,7 +13,6 @@ exports.treeFeature = void 0;
 const utils_1 = require("../../utils");
 exports.treeFeature = {
     key: "tree",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ expandedItems: [], focusedItem: null }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setExpandedItems: (0, utils_1.makeStateUpdater)("expandedItems", tree), setFocusedItem: (0, utils_1.makeStateUpdater)("focusedItem", tree) }, defaultConfig)),
     stateHandlerNames: {

package/lib/cjs/types/core.d.ts

@@ -51,7 +51,8 @@ export type HotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Record<Hot
 export type CustomHotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Partial<Record<HotkeyName<F> | `custom${string}`, Partial<HotkeyConfig<T>>>>;
 export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends FeatureDef = EmptyFeatureDef> = {
     key?: string;
-    dependingFeatures?: string[];
+    deps?: string[];
+    overwrites?: string[];
     stateHandlerNames?: Partial<Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>>;
     getInitialState?: (initialState: Partial<MergedFeatures<F>["state"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["state"] & MergedFeatures<F>["state"]>;
     getDefaultConfig?: (defaultConfig: Partial<MergedFeatures<F>["config"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["config"] & MergedFeatures<F>["config"]>;

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

@@ -7,11 +7,33 @@ const buildItemInstance = (features, tree, itemId) => {
     }
     return itemInstance;
 };
+const verifyFeatures = (features) => {
+    var _a;
+    const loadedFeatures = features === null || features === void 0 ? void 0 : features.map((feature) => feature.key);
+    for (const feature of features !== null && features !== void 0 ? features : []) {
+        const missingDependency = (_a = feature.deps) === null || _a === void 0 ? void 0 : _a.find((dep) => !(loadedFeatures === null || loadedFeatures === void 0 ? void 0 : loadedFeatures.includes(dep)));
+        if (missingDependency) {
+            throw new Error(`${feature.key} needs ${missingDependency}`);
+        }
+    }
+};
+const compareFeatures = (feature1, feature2) => {
+    var _a;
+    if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
+        return 1;
+    }
+    return -1;
+};
+const sortFeatures = (features = []) => features.sort(compareFeatures);
 export const createTree = (initialConfig) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const treeInstance = {};
-    const additionalFeatures = [treeFeature, ...((_a = initialConfig.features) !== null && _a !== void 0 ? _a : [])];
-    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_c = (_b = initialConfig.initialState) !== null && _b !== void 0 ? _b : initialConfig.state) !== null && _c !== void 0 ? _c : {});
+    const additionalFeatures = [
+        treeFeature,
+        ...sortFeatures(initialConfig.features),
+    ];
+    verifyFeatures(additionalFeatures);
+    let state = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getInitialState) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, (_b = (_a = initialConfig.initialState) !== null && _a !== void 0 ? _a : initialConfig.state) !== null && _b !== void 0 ? _b : {});
     let config = additionalFeatures.reduce((acc, feature) => { var _a, _b; return (_b = (_a = feature.getDefaultConfig) === null || _a === void 0 ? void 0 : _a.call(feature, acc, treeInstance)) !== null && _b !== void 0 ? _b : acc; }, initialConfig);
     const stateHandlerNames = additionalFeatures.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature.stateHandlerNames)), {});
     let treeElement;
@@ -102,11 +124,10 @@ export const createTree = (initialConfig) => {
             // eslint-disable-next-line no-return-assign
             getDataRef: () => { var _a; return ((_a = itemDataRefs[itemId]) !== null && _a !== void 0 ? _a : (itemDataRefs[itemId] = { current: {} })); }, getItemMeta: () => itemMetaMap[itemId] })),
     };
-    // todo sort features
     const features = [mainFeature, ...additionalFeatures];
     for (const feature of features) {
-        Object.assign(treeInstance, (_e = (_d = feature.createTreeInstance) === null || _d === void 0 ? void 0 : _d.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _e !== void 0 ? _e : {});
-        Object.assign(hotkeyPresets, (_f = feature.hotkeys) !== null && _f !== void 0 ? _f : {});
+        Object.assign(treeInstance, (_d = (_c = feature.createTreeInstance) === null || _c === void 0 ? void 0 : _c.call(feature, Object.assign({}, treeInstance), treeInstance)) !== null && _d !== void 0 ? _d : {});
+        Object.assign(hotkeyPresets, (_e = feature.hotkeys) !== null && _e !== void 0 ? _e : {});
     }
     rebuildItemMeta(mainFeature);
     return treeInstance;

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

@@ -1,7 +1,6 @@
 import { makeStateUpdater } from "../../utils";
 export const asyncDataLoaderFeature = {
     key: "async-data-loader",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: makeStateUpdater("loadingItems", tree) }, defaultConfig)),
     stateHandlerNames: {

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

@@ -2,7 +2,7 @@ import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
     key: "dragAndDrop",
-    dependingFeatures: ["main", "tree", "selection"],
+    deps: ["selection"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree) }, defaultConfig)),
     stateHandlerNames: {
         dnd: "setDndState",
@@ -10,6 +10,34 @@ export const dragAndDropFeature = {
     createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { getDropTarget: () => {
             var _a, _b;
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
+        }, getDragLineData: () => {
+            var _a, _b, _c, _d, _e;
+            const target = tree.getDropTarget();
+            const intend = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
+            if (!target || target.childIndex === null)
+                return null;
+            const children = target.item.getChildren();
+            if (target.childIndex === children.length) {
+                const bb = (_c = (_b = children[target.childIndex - 1]) === null || _b === void 0 ? void 0 : _b.getElement()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+                if (bb) {
+                    return {
+                        intend,
+                        top: bb.bottom,
+                        left: bb.left,
+                        right: bb.right,
+                    };
+                }
+            }
+            const bb = (_e = (_d = children[target.childIndex]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
+            if (bb) {
+                return {
+                    intend,
+                    top: bb.top,
+                    left: bb.left,
+                    right: bb.right,
+                };
+            }
+            return null;
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
             var _a, _b, _c;

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

@@ -7,6 +7,12 @@ export type DndState<T> = {
     draggingOverItem?: ItemInstance<T>;
     dragTarget?: DropTarget<T>;
 };
+export type DragLineData = {
+    intend: number;
+    top: number;
+    left: number;
+    right: number;
+};
 export type DropTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
@@ -51,6 +57,7 @@ export type DragAndDropFeatureDef<T> = {
     };
     treeInstance: {
         getDropTarget: () => DropTarget<T> | null;
+        getDragLineData: () => DragLineData | null;
     };
     itemInstance: {
         isDropTarget: () => boolean;

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

@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { poll } from "../../utils";
 export const expandAllFeature = {
     key: "expand-all",
-    dependingFeatures: ["main", "tree"],
     createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
             yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
         }), collapseAll: () => {

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

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

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

@@ -1,14 +1,12 @@
 import { makeStateUpdater } from "../../utils";
 export const renamingFeature = {
     key: "renaming",
-    dependingFeatures: ["main", "tree"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: makeStateUpdater("renamingItem", tree), setRenamingValue: makeStateUpdater("renamingValue", tree), canRename: () => true }, defaultConfig)),
     stateHandlerNames: {
         renamingItem: "setRenamingItem",
         renamingValue: "setRenamingValue",
     },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { startRenamingItem: (itemId) => {
-            const config = instance.getConfig();
             const item = instance.getItemInstance(itemId);
             if (!item.canRename()) {
                 return;

package/lib/esm/features/search/feature.js

@@ -1,7 +1,6 @@
 import { makeStateUpdater, memo } from "../../utils";
 export const searchFeature = {
     key: "search",
-    dependingFeatures: ["main", "tree"],
     getInitialState: (initialState) => (Object.assign({ search: null }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSearch: makeStateUpdater("search", tree), isSearchMatchingItem: (search, item) => search.length > 0 &&
             item.getItemName().toLowerCase().includes(search.toLowerCase()) }, defaultConfig)),

package/lib/esm/features/selection/feature.js

@@ -1,7 +1,6 @@
 import { makeStateUpdater } from "../../utils";
 export const selectionFeature = {
     key: "selection",
-    dependingFeatures: ["main", "tree"],
     getInitialState: (initialState) => (Object.assign({ selectedItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSelectedItems: makeStateUpdater("selectedItems", tree) }, defaultConfig)),
     stateHandlerNames: {
@@ -33,7 +32,7 @@ export const selectionFeature = {
             const newSelectedItems = tree
                 .getItems()
                 .slice(a, b + 1)
-                .map((item) => item.getItemMeta().itemId);
+                .map((treeItem) => treeItem.getItemMeta().itemId);
             if (!ctrl) {
                 tree.setSelectedItems(newSelectedItems);
                 return;

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

@@ -1,7 +1,6 @@
 import { makeStateUpdater } from "../../utils";
 export const syncDataLoaderFeature = {
     key: "sync-data-loader",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: makeStateUpdater("loadingItems", tree) }, defaultConfig)),
     stateHandlerNames: {

package/lib/esm/features/tree/feature.js

@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { makeStateUpdater, memo, poll } from "../../utils";
 export const treeFeature = {
     key: "tree",
-    dependingFeatures: ["main"],
     getInitialState: (initialState) => (Object.assign({ expandedItems: [], focusedItem: null }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setExpandedItems: makeStateUpdater("expandedItems", tree), setFocusedItem: makeStateUpdater("focusedItem", tree) }, defaultConfig)),
     stateHandlerNames: {

package/lib/esm/types/core.d.ts

@@ -51,7 +51,8 @@ export type HotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Record<Hot
 export type CustomHotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Partial<Record<HotkeyName<F> | `custom${string}`, Partial<HotkeyConfig<T>>>>;
 export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends FeatureDef = EmptyFeatureDef> = {
     key?: string;
-    dependingFeatures?: string[];
+    deps?: string[];
+    overwrites?: string[];
     stateHandlerNames?: Partial<Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>>;
     getInitialState?: (initialState: Partial<MergedFeatures<F>["state"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["state"] & MergedFeatures<F>["state"]>;
     getDefaultConfig?: (defaultConfig: Partial<MergedFeatures<F>["config"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["config"] & MergedFeatures<F>["config"]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",

package/src/core/create-tree.ts

@@ -30,12 +30,42 @@ const buildItemInstance = (
   return itemInstance;
 };
 
+const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
+  const loadedFeatures = features?.map((feature) => feature.key);
+  for (const feature of features ?? []) {
+    const missingDependency = feature.deps?.find(
+      (dep) => !loadedFeatures?.includes(dep)
+    );
+    if (missingDependency) {
+      throw new Error(`${feature.key} needs ${missingDependency}`);
+    }
+  }
+};
+
+const compareFeatures = (
+  feature1: FeatureImplementation,
+  feature2: FeatureImplementation
+) => {
+  if (feature2.key && feature1.overwrites?.includes(feature2.key)) {
+    return 1;
+  }
+  return -1;
+};
+
+const sortFeatures = (features: FeatureImplementation[] = []) =>
+  features.sort(compareFeatures);
+
 export const createTree = <T>(
   initialConfig: TreeConfig<T>
 ): TreeInstance<T> => {
   const treeInstance: TreeInstance<T> = {} as any;
 
-  const additionalFeatures = [treeFeature, ...(initialConfig.features ?? [])];
+  const additionalFeatures = [
+    treeFeature,
+    ...sortFeatures(initialConfig.features),
+  ];
+  verifyFeatures(additionalFeatures);
+
   let state = additionalFeatures.reduce(
     (acc, feature) => feature.getInitialState?.(acc, treeInstance) ?? acc,
     initialConfig.initialState ?? initialConfig.state ?? {}
@@ -182,7 +212,6 @@ export const createTree = <T>(
     }),
   };
 
-  // todo sort features
   const features = [mainFeature, ...additionalFeatures];
 
   for (const feature of features) {

package/src/features/async-data-loader/feature.ts

@@ -10,7 +10,6 @@ export const asyncDataLoaderFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | AsyncDataLoaderFeatureDef<any>
 > = {
   key: "async-data-loader",
-  dependingFeatures: ["main"],
 
   getInitialState: (initialState) => ({
     loadingItems: [],

package/src/features/drag-and-drop/feature.ts

@@ -1,5 +1,5 @@
 import { FeatureDefs, FeatureImplementation } from "../../types/core";
-import { DndDataRef, DragAndDropFeatureDef } from "./types";
+import { DndDataRef, DragAndDropFeatureDef, DragLineData } from "./types";
 import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
@@ -9,7 +9,7 @@ export const dragAndDropFeature: FeatureImplementation<
   FeatureDefs<any>
 > = {
   key: "dragAndDrop",
-  dependingFeatures: ["main", "tree", "selection"],
+  deps: ["selection"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
@@ -28,6 +28,45 @@ export const dragAndDropFeature: FeatureImplementation<
     getDropTarget: () => {
       return tree.getState().dnd?.dragTarget ?? null;
     },
+
+    getDragLineData: (): DragLineData | null => {
+      const target = tree.getDropTarget();
+      const intend = (target?.item.getItemMeta().level ?? 0) + 1;
+
+      if (!target || target.childIndex === null) return null;
+
+      const children = target.item.getChildren();
+
+      if (target.childIndex === children.length) {
+        const bb = children[target.childIndex - 1]
+          ?.getElement()
+          ?.getBoundingClientRect();
+
+        if (bb) {
+          return {
+            intend,
+            top: bb.bottom,
+            left: bb.left,
+            right: bb.right,
+          };
+        }
+      }
+
+      const bb = children[target.childIndex]
+        ?.getElement()
+        ?.getBoundingClientRect();
+
+      if (bb) {
+        return {
+          intend,
+          top: bb.top,
+          left: bb.left,
+          right: bb.right,
+        };
+      }
+
+      return null;
+    },
   }),
 
   createItemInstance: (prev, item, tree) => ({

package/src/features/drag-and-drop/types.ts

@@ -10,6 +10,13 @@ export type DndState<T> = {
   dragTarget?: DropTarget<T>;
 };
 
+export type DragLineData = {
+  intend: number;
+  top: number;
+  left: number;
+  right: number;
+};
+
 export type DropTarget<T> =
   | {
       item: ItemInstance<T>;
@@ -70,6 +77,7 @@ export type DragAndDropFeatureDef<T> = {
   };
   treeInstance: {
     getDropTarget: () => DropTarget<T> | null;
+    getDragLineData: () => DragLineData | null;
   };
   itemInstance: {
     isDropTarget: () => boolean;

package/src/features/expand-all/feature.ts

@@ -14,7 +14,6 @@ export const expandAllFeature: FeatureImplementation<
   | ExpandAllFeatureDef
 > = {
   key: "expand-all",
-  dependingFeatures: ["main", "tree"],
 
   createTreeInstance: (prev, tree) => ({
     ...prev,

package/src/features/hotkeys-core/feature.ts

@@ -48,7 +48,6 @@ export const hotkeysCoreFeature: FeatureImplementation<
   MainFeatureDef | HotkeysCoreFeatureDef<any>
 > = {
   key: "hotkeys-core",
-  dependingFeatures: ["main", "tree"],
 
   onTreeMount: (tree, element) => {
     const data = tree.getDataRef<HotkeysCoreDataRef>();

package/src/features/renaming/feature.ts

@@ -10,7 +10,6 @@ export const renamingFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>
 > = {
   key: "renaming",
-  dependingFeatures: ["main", "tree"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     setRenamingItem: makeStateUpdater("renamingItem", tree),
@@ -28,7 +27,6 @@ export const renamingFeature: FeatureImplementation<
     ...prev,
 
     startRenamingItem: (itemId) => {
-      const config = instance.getConfig();
       const item = instance.getItemInstance(itemId);
 
       if (!item.canRename()) {

package/src/features/search/feature.ts

@@ -10,7 +10,6 @@ export const searchFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>
 > = {
   key: "search",
-  dependingFeatures: ["main", "tree"],
 
   getInitialState: (initialState) => ({
     search: null,

package/src/features/selection/feature.ts

@@ -10,7 +10,6 @@ export const selectionFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | SelectionFeatureDef<any>
 > = {
   key: "selection",
-  dependingFeatures: ["main", "tree"],
 
   getInitialState: (initialState) => ({
     selectedItems: [],
@@ -71,7 +70,7 @@ export const selectionFeature: FeatureImplementation<
       const newSelectedItems = tree
         .getItems()
         .slice(a, b + 1)
-        .map((item) => item.getItemMeta().itemId);
+        .map((treeItem) => treeItem.getItemMeta().itemId);
 
       if (!ctrl) {
         tree.setSelectedItems(newSelectedItems);

package/src/features/sync-data-loader/feature.ts

@@ -9,7 +9,6 @@ export const syncDataLoaderFeature: FeatureImplementation<
   MainFeatureDef | SyncDataLoaderFeatureDef<any>
 > = {
   key: "sync-data-loader",
-  dependingFeatures: ["main"],
 
   getInitialState: (initialState) => ({
     loadingItems: [],

package/src/features/tree/feature.ts

@@ -14,7 +14,6 @@ export const treeFeature: FeatureImplementation<
   | SyncDataLoaderFeatureDef<any>
 > = {
   key: "tree",
-  dependingFeatures: ["main"],
 
   getInitialState: (initialState) => ({
     expandedItems: [],

package/src/types/core.ts

@@ -128,7 +128,8 @@ export type FeatureImplementation<
   F extends FeatureDef = EmptyFeatureDef
 > = {
   key?: string;
-  dependingFeatures?: string[];
+  deps?: string[];
+  overwrites?: string[];
 
   stateHandlerNames?: Partial<
     Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>