@headless-tree/core 0.0.1

package/lib/core/create-tree.d.ts

@@ -0,0 +1,2 @@
+import { TreeConfig, TreeInstance } from "../types/core";
+export declare const createTree: <T>(initialConfig: TreeConfig<T>) => TreeInstance<T>;

package/lib/core/create-tree.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTree = void 0;
+const feature_1 = require("../features/tree/feature");
+const buildItemInstance = (features, tree, itemId) => {
+    var _a, _b;
+    const itemInstance = {};
+    for (const feature of features) {
+        Object.assign(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;
+};
+const createTree = (initialConfig) => {
+    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; }, (_b = 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);
+    let treeElement;
+    const treeDataRef = { current: {} };
+    const itemInstancesMap = {};
+    let itemInstances = [];
+    const itemElementsMap = {};
+    const itemDataRefs = {};
+    let itemMetaMap = {};
+    const hotkeyPresets = {};
+    const rebuildItemMeta = (main) => {
+        // TODO can we find a way to only run this for the changed substructure?
+        itemInstances = [];
+        itemMetaMap = {};
+        const rootInstance = buildItemInstance([main, ...additionalFeatures], treeInstance, config.rootItemId);
+        itemInstancesMap[config.rootItemId] = rootInstance;
+        itemMetaMap[config.rootItemId] = {
+            itemId: config.rootItemId,
+            index: -1,
+            parentId: null,
+            level: -1,
+            posInSet: 0,
+            setSize: 1,
+        };
+        for (const item of treeInstance.getItemsMeta()) {
+            itemMetaMap[item.itemId] = item;
+            if (!itemInstancesMap[item.itemId]) {
+                const instance = buildItemInstance([main, ...additionalFeatures], treeInstance, item.itemId);
+                itemInstancesMap[item.itemId] = instance;
+                itemInstances.push(instance);
+            }
+            else {
+                itemInstances.push(itemInstancesMap[item.itemId]);
+            }
+        }
+        console.log("REBUILT");
+    };
+    const eachFeature = (fn) => {
+        for (const feature of additionalFeatures) {
+            fn(feature);
+        }
+    };
+    const mainFeature = {
+        key: "main",
+        createTreeInstance: (prev) => (Object.assign(Object.assign({}, prev), { getState: () => state, setState: (updater) => {
+                var _a;
+                state = typeof updater === "function" ? updater(state) : updater;
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+                eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+            }, rebuildTree: () => {
+                var _a;
+                rebuildItemMeta(mainFeature);
+                (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state);
+            }, getConfig: () => config, setConfig: (updater) => {
+                config = typeof updater === "function" ? updater(config) : updater;
+                if (config.state) {
+                    state = Object.assign(Object.assign({}, state), config.state);
+                    eachFeature((feature) => { var _a; return (_a = feature.setState) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+                }
+                eachFeature((feature) => { var _a; return (_a = feature.onConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+                eachFeature((feature) => { var _a; return (_a = feature.onStateOrConfigChange) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance); });
+            }, getItemInstance: (itemId) => itemInstancesMap[itemId], getItems: () => itemInstances, registerElement: (element) => {
+                if (treeElement === element) {
+                    return;
+                }
+                if (treeElement && !element) {
+                    eachFeature((feature) => { var _a; return (_a = feature.onTreeUnmount) === null || _a === void 0 ? void 0 : _a.call(feature, treeInstance, treeElement); });
+                }
+                else if (!treeElement && element) {
+                    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) => {
+                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); });
+                }
+                else if (!oldElement && element) {
+                    eachFeature((feature) => { var _a; return (_a = feature.onItemMount) === null || _a === void 0 ? void 0 : _a.call(feature, instance, element, treeInstance); });
+                }
+                itemElementsMap[itemId] = element;
+            }, getElement: () => 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] })),
+    };
+    // todo sort features
+    const features = [mainFeature, ...additionalFeatures];
+    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 : {});
+    }
+    rebuildItemMeta(mainFeature);
+    return treeInstance;
+};
+exports.createTree = createTree;

package/lib/data-adapters/nested-data-adapter.d.ts

@@ -0,0 +1,9 @@
+import { DataAdapterConfig } from "./types";
+interface NestedDataAdapterProps<T> {
+    rootItem: T;
+    getItemId: (item: T) => string;
+    getChildren: (item: T) => T[] | undefined;
+    changeChildren?: (item: T, children: T[]) => void;
+}
+export declare const nestedDataAdapter: <T = any>(props: NestedDataAdapterProps<T>) => DataAdapterConfig<T>;
+export {};

package/lib/data-adapters/nested-data-adapter.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nestedDataAdapter = void 0;
+const utils_1 = require("../utils");
+const createItemMap = (props, item, map = {}) => {
+    var _a;
+    map[props.getItemId(item)] = item;
+    (_a = props.getChildren(item)) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
+        createItemMap(props, child, map);
+    });
+    return map;
+};
+const nestedDataAdapter = (props) => {
+    const itemMap = createItemMap(props, props.rootItem);
+    return {
+        rootItemId: props.getItemId(props.rootItem),
+        dataLoader: {
+            getItem: (itemId) => itemMap[itemId],
+            getChildren: (itemId) => { var _a, _b; return (_b = (_a = props.getChildren(itemMap[itemId])) === null || _a === void 0 ? void 0 : _a.map(props.getItemId)) !== null && _b !== void 0 ? _b : []; },
+        },
+        onDrop: (items, target) => {
+            if (!props.changeChildren) {
+                return;
+            }
+            (0, utils_1.performItemsMove)(items, target, (item, newChildren) => {
+                var _a;
+                (_a = props.changeChildren) === null || _a === void 0 ? void 0 : _a.call(props, item.getItemData(), newChildren.map((child) => child.getItemData()));
+            });
+        },
+    };
+};
+exports.nestedDataAdapter = nestedDataAdapter;

package/lib/data-adapters/types.d.ts

@@ -0,0 +1,7 @@
+import { DragAndDropFeatureDef } from "../features/drag-and-drop/types";
+import { SyncDataLoaderFeatureDef } from "../features/sync-data-loader/types";
+export type DataAdapterConfig<T> = {
+    rootItemId: SyncDataLoaderFeatureDef<T>["config"]["rootItemId"];
+    dataLoader: SyncDataLoaderFeatureDef<T>["config"]["dataLoader"];
+    onDrop: DragAndDropFeatureDef<T>["config"]["onDrop"];
+};

package/lib/data-adapters/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,5 @@
+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>>;

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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)),
+    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => {
+            var _a, _b, _c, _d, _e, _f;
+            var _g, _h;
+            const config = instance.getConfig();
+            const dataRef = instance.getDataRef();
+            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
+            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            if (dataRef.current.itemData[itemId]) {
+                return dataRef.current.itemData[itemId];
+            }
+            if (!instance.getState().loadingItems.includes(itemId)) {
+                (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
+                (_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getItem(itemId).then((item) => {
+                    var _a, _b;
+                    dataRef.current.itemData[itemId] = item;
+                    (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
+                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                });
+            }
+            return (_f = (_e = config.createLoadingItemData) === null || _e === void 0 ? void 0 : _e.call(config)) !== null && _f !== void 0 ? _f : null;
+        }, retrieveChildrenIds: (itemId) => {
+            var _a, _b, _c, _d, _e, _f;
+            var _g, _h;
+            const config = instance.getConfig();
+            const dataRef = instance.getDataRef();
+            (_a = (_g = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_g.itemData = {});
+            (_b = (_h = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_h.childrenIds = {});
+            if (dataRef.current.childrenIds[itemId]) {
+                return dataRef.current.childrenIds[itemId];
+            }
+            if (instance.getState().loadingItems.includes(itemId)) {
+                return [];
+            }
+            (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => [...loadingItems, itemId]);
+            if ((_d = config.asyncDataLoader) === null || _d === void 0 ? void 0 : _d.getChildrenWithData) {
+                (_e = config.asyncDataLoader) === null || _e === void 0 ? void 0 : _e.getChildrenWithData(itemId).then((children) => {
+                    var _a, _b, _c;
+                    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);
+                    (_c = config.setLoadingItems) === null || _c === void 0 ? void 0 : _c.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.rebuildTree();
+                });
+            }
+            else {
+                (_f = config.asyncDataLoader) === null || _f === void 0 ? void 0 : _f.getChildren(itemId).then((childrenIds) => {
+                    var _a, _b;
+                    dataRef.current.childrenIds[itemId] = childrenIds;
+                    (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
+                    (_b = config.setLoadingItems) === null || _b === void 0 ? void 0 : _b.call(config, (loadingItems) => loadingItems.filter((id) => id !== itemId));
+                    instance.rebuildTree();
+                });
+            }
+            return [];
+        }, invalidateItemData: (itemId) => {
+            var _a;
+            const dataRef = instance.getDataRef();
+            (_a = dataRef.current.itemData) === null || _a === void 0 ? true : delete _a[itemId];
+            instance.retrieveItemData(itemId);
+        }, invalidateChildrenIds: (itemId) => {
+            var _a;
+            const dataRef = instance.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) })),
+};

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

@@ -0,0 +1,41 @@
+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> = {
+    itemData: Record<string, T>;
+    childrenIds: Record<string, string[]>;
+};
+/**
+ * @category Async Data Loader/General
+ * */
+export type AsyncDataLoaderFeatureDef<T> = {
+    state: {
+        loadingItems: string[];
+    };
+    config: {
+        rootItemId: string;
+        createLoadingItemData?: () => T;
+        setLoadingItems?: SetStateFn<string[]>;
+        onLoadedItem?: (itemId: string, item: T) => void;
+        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;
+    };
+    itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
+        invalidateItemData: () => void;
+        invalidateChildrenIds: () => void;
+        isLoading: () => void;
+    };
+    hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
+};

package/lib/features/async-data-loader/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragAndDropFeature = void 0;
+const utils_1 = require("./utils");
+const utils_2 = require("../../utils");
+exports.dragAndDropFeature = {
+    key: "dragAndDrop",
+    dependingFeatures: ["main", "tree", "selection"],
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), setDndState: (0, utils_2.makeStateUpdater)("dnd", tree) }, defaultConfig)),
+    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;
+        } })),
+    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { getProps: () => {
+            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: (e) => {
+                    var _a, _b, _c, _d, _e;
+                    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);
+                    }
+                    (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, {
+                        draggedItems: items,
+                        draggingOverItem: tree.getFocusedItem(),
+                    });
+                }, onDragOver: (e) => {
+                    var _a, _b, _c, _d, _e;
+                    const target = (0, utils_1.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))) {
+                        return;
+                    }
+                    if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
+                        return;
+                    }
+                    e.preventDefault();
+                    const nextDragCode = (0, utils_1.getDragCode)(target);
+                    if (nextDragCode === dataRef.current.lastDragCode) {
+                        return;
+                    }
+                    dataRef.current.lastDragCode = nextDragCode;
+                    (_e = (_d = tree.getConfig()).setDndState) === null || _e === void 0 ? void 0 : _e.call(_d, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
+                }, onDragLeave: () => {
+                    var _a, _b;
+                    const dataRef = tree.getDataRef();
+                    dataRef.current.lastDragCode = "no-drag";
+                    (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
+                }, onDrop: (e) => {
+                    var _a, _b, _c, _d, _e;
+                    const dataRef = tree.getDataRef();
+                    const target = (0, utils_1.getDropTarget)(e, item, tree);
+                    if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
+                        return;
+                    }
+                    e.preventDefault();
+                    const config = tree.getConfig();
+                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+                    dataRef.current.lastDragCode = undefined;
+                    (_c = (_b = tree.getConfig()).setDndState) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+                    if (draggedItems) {
+                        (_d = config.onDrop) === null || _d === void 0 ? void 0 : _d.call(config, draggedItems, target);
+                    }
+                    else {
+                        (_e = config.onDropForeignDragObject) === null || _e === void 0 ? void 0 : _e.call(config, e.dataTransfer, target);
+                    }
+                    // TODO rebuild tree?
+                } }));
+        }, isDropTarget: () => {
+            const target = tree.getDropTarget();
+            return target ? target.item.getId() === item.getId() : false;
+        }, isDropTargetAbove: () => {
+            const target = tree.getDropTarget();
+            if (!target || target.childIndex === null)
+                return false;
+            const targetIndex = target.item.getItemMeta().index;
+            return targetIndex + target.childIndex + 1 === item.getItemMeta().index;
+        }, isDropTargetBelow: () => {
+            const target = tree.getDropTarget();
+            if (!target || target.childIndex === null)
+                return false;
+            const targetIndex = target.item.getItemMeta().index;
+            return targetIndex + target.childIndex === item.getItemMeta().index;
+        }, isDraggingOver: () => {
+            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();
+        } })),
+    hotkeys: {
+        startDnd: {
+            hotkey: "Control+Alt+d",
+            handler: (e, tree) => {
+                console.log("DRAG");
+                tree.getFocusedItem().getProps().onDragStart(e);
+            },
+        },
+        cancelDnd: {
+            hotkey: "Escape",
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (e, tree) => {
+                var _a, _b;
+                (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+            },
+        },
+        completeDnd: {
+            hotkey: "Enter",
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (e, tree) => {
+                console.log("DROP");
+            },
+        },
+        dndDown: {
+            preventDefault: true,
+            hotkey: "ArrowDown",
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (e, tree) => {
+                var _a, _b;
+                const target = (0, utils_1.searchDropTarget)(tree, false);
+                console.log("Down", target);
+                (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target !== null && target !== void 0 ? target : undefined })));
+            },
+        },
+        dndUp: {
+            preventDefault: true,
+            hotkey: "ArrowUp",
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (e, tree) => {
+                var _a, _b;
+                const target = (0, utils_1.searchDropTarget)(tree, true);
+                console.log("Up", target);
+                (_b = (_a = tree.getConfig()).setDndState) === null || _b === void 0 ? void 0 : _b.call(_a, (state) => (Object.assign(Object.assign({}, state), { dragTarget: target !== null && target !== void 0 ? target : undefined })));
+            },
+        },
+    },
+};

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

@@ -0,0 +1,49 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+export type DndDataRef = {
+    lastDragCode?: string;
+};
+export type DndState<T> = {
+    draggedItems?: ItemInstance<T>[];
+    draggingOverItem?: ItemInstance<T>;
+    dragTarget?: DropTarget<T>;
+};
+export type DropTarget<T> = {
+    item: ItemInstance<T>;
+    childIndex: number | null;
+};
+export declare enum DropTargetPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Item = "item"
+}
+export type DragAndDropFeatureDef<T> = {
+    state: {
+        dnd?: DndState<T> | null;
+    };
+    config: {
+        setDndState?: SetStateFn<DndState<T> | null>;
+        topLinePercentage?: number;
+        bottomLinePercentage?: number;
+        canDropInbetween?: boolean;
+        isItemDraggable?: (item: ItemInstance<T>) => boolean;
+        canDrag?: (items: ItemInstance<T>[]) => boolean;
+        canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
+        createForeignDragObject?: (items: ItemInstance<T>[]) => {
+            format: string;
+            data: any;
+        };
+        canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => boolean;
+        onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
+        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => void;
+    };
+    treeInstance: {
+        getDropTarget: () => DropTarget<T> | null;
+    };
+    itemInstance: {
+        isDropTarget: () => boolean;
+        isDropTargetAbove: () => boolean;
+        isDropTargetBelow: () => boolean;
+        isDraggingOver: () => boolean;
+    };
+    hotkeys: "startDnd" | "completeDnd" | "cancelDnd" | "dndUp" | "dndDown";
+};

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

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

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

@@ -0,0 +1,7 @@
+import { ItemInstance, TreeInstance } from "../../types/core";
+import { DropTarget } from "./types";
+export declare const getDragCode: ({ item, childIndex }: DropTarget<any>) => string;
+export declare const getDropOffset: (e: any, item: ItemInstance<any>) => number;
+export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
+export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => DropTarget<any>;
+export declare const searchDropTarget: (tree: TreeInstance<any>, upwards?: boolean) => DropTarget<any> | null | undefined;

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

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchDropTarget = exports.getDropTarget = exports.canDrop = exports.getDropOffset = exports.getDragCode = void 0;
+const types_1 = require("./types");
+const getDragCode = ({ item, childIndex }) => `${item.getId()}__${childIndex !== null && childIndex !== void 0 ? childIndex : "none"}`;
+exports.getDragCode = getDragCode;
+const getDropOffset = (e, item) => {
+    var _a;
+    const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    return bb ? (e.pageY - bb.top) / bb.height : 0.5;
+};
+exports.getDropOffset = getDropOffset;
+const canDrop = (dataTransfer, target, tree) => {
+    var _a, _b, _c, _d;
+    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+    const config = tree.getConfig();
+    if (draggedItems && !((_c = (_b = config.canDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target)) !== null && _c !== void 0 ? _c : true)) {
+        return false;
+    }
+    if (!draggedItems &&
+        dataTransfer &&
+        !((_d = config.canDropForeignDragObject) === null || _d === void 0 ? void 0 : _d.call(config, dataTransfer, target))) {
+        return false;
+    }
+    return true;
+};
+exports.canDrop = canDrop;
+const getDropTargetPosition = (offset, topLinePercentage, bottomLinePercentage) => {
+    if (offset < topLinePercentage) {
+        return types_1.DropTargetPosition.Top;
+    }
+    if (offset > bottomLinePercentage) {
+        return types_1.DropTargetPosition.Bottom;
+    }
+    return types_1.DropTargetPosition.Item;
+};
+const getDropTarget = (e, item, tree) => {
+    var _a, _b;
+    const config = tree.getConfig();
+    const offset = (0, exports.getDropOffset)(e, item);
+    const dropOnItemTarget = { item, childIndex: null };
+    const pos = getDropTargetPosition(offset, (_a = config.topLinePercentage) !== null && _a !== void 0 ? _a : 0.3, (_b = config.bottomLinePercentage) !== null && _b !== void 0 ? _b : 0.7);
+    const inbetweenPos = getDropTargetPosition(offset, 0.5, 0.5);
+    if (!config.canDropInbetween) {
+        return dropOnItemTarget;
+    }
+    if (!(0, exports.canDrop)(e.dataTransfer, dropOnItemTarget, tree)) {
+        return {
+            item: item.getParent(),
+            childIndex: item.getIndexInParent() +
+                (inbetweenPos === types_1.DropTargetPosition.Top ? 0 : 1),
+        };
+    }
+    if (pos === types_1.DropTargetPosition.Item) {
+        return dropOnItemTarget;
+    }
+    return {
+        item: item.getParent(),
+        childIndex: item.getIndexInParent() + (pos === types_1.DropTargetPosition.Top ? 0 : 1),
+    };
+};
+exports.getDropTarget = getDropTarget;
+const searchDropTarget = (tree, upwards = false) => {
+    const state = tree.getState().dnd;
+    console.log("!", state);
+    if (!state || !state.draggingOverItem)
+        return null;
+    let currentItem = state.draggingOverItem;
+    while (currentItem) {
+        // const targetAbove: DropTarget<any> = {
+        //   item: currentItem.getParent(),
+        //   childIndex: currentItem.getIndexInParent() + (upwards ? -1 : 1),
+        // };
+        // if (canDrop(null, targetAbove, tree)) {
+        //   return targetAbove;
+        // }
+        const itemTarget = {
+            item: currentItem,
+            childIndex: null,
+        };
+        if ((0, exports.canDrop)(null, itemTarget, tree)) {
+            return itemTarget;
+        }
+        currentItem = upwards
+            ? currentItem.getItemAbove()
+            : currentItem.getItemBelow();
+    }
+};
+exports.searchDropTarget = searchDropTarget;
+/*
+
+export const searchDropTarget = (
+  tree: TreeInstance<any>,
+  backwards = false,
+  target = tree.getState().dnd?.dragTarget
+) => {
+  const state = tree.getState().dnd;
+  if (!state) return null;
+  if (target && canDrop(null, target, tree)) return target;
+
+  if (target?.childIndex && target?.childIndex > 0 && !backwards) {
+    return searchDropTarget(tree, backwards, {
+      ...target,
+      childIndex: target.childIndex - 1,
+    });
+  }
+
+  if (
+    target?.childIndex &&
+    target?.childIndex < target.item.getChildren().length - 1 &&
+    backwards
+  ) {
+    return searchDropTarget(tree, backwards, {
+      ...target,
+      childIndex: target.childIndex + 1,
+    });
+  }
+
+
+};
+*/

package/lib/features/expand-all/feature.d.ts

@@ -0,0 +1,6 @@
+import { FeatureImplementation } from "../../types/core";
+import { ExpandAllFeatureDef } from "./types";
+import { MainFeatureDef } from "../main/types";
+import { TreeFeatureDef } from "../tree/types";
+import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
+export declare const expandAllFeature: FeatureImplementation<any, ExpandAllFeatureDef, MainFeatureDef | TreeFeatureDef<any> | SyncDataLoaderFeatureDef<any> | ExpandAllFeatureDef>;