@headless-tree/core 0.0.10 → 0.0.11

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

@@ -1,15 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.getDropTarget = exports.getDragCode = exports.canDrop = void 0;
+var ItemDropCategory;
+(function (ItemDropCategory) {
+    ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
+    ItemDropCategory[ItemDropCategory["ExpandedFolder"] = 1] = "ExpandedFolder";
+    ItemDropCategory[ItemDropCategory["LastInGroup"] = 2] = "LastInGroup";
+})(ItemDropCategory || (ItemDropCategory = {}));
+var PlacementType;
+(function (PlacementType) {
+    PlacementType[PlacementType["ReorderAbove"] = 0] = "ReorderAbove";
+    PlacementType[PlacementType["ReorderBelow"] = 1] = "ReorderBelow";
+    PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
+    PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
+})(PlacementType || (PlacementType = {}));
 const canDrop = (dataTransfer, target, tree) => {
     var _a, _b, _c, _d;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
@@ -17,6 +21,11 @@ const canDrop = (dataTransfer, target, tree) => {
     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 &&
+        draggedItems.some((draggedItem) => target.item.getId() === draggedItem.getId() ||
+            target.item.isDescendentOf(draggedItem.getId()))) {
+        return false;
+    }
     if (!draggedItems &&
         dataTransfer &&
         !((_d = config.canDropForeignDragObject) === null || _d === void 0 ? void 0 : _d.call(config, dataTransfer, target))) {
@@ -25,52 +34,146 @@ const canDrop = (dataTransfer, target, tree) => {
     return true;
 };
 exports.canDrop = canDrop;
-const getDropTargetPosition = (offset, topLinePercentage, bottomLinePercentage) => {
-    if (offset < topLinePercentage) {
-        return types_1.DropTargetPosition.Top;
+const getItemDropCategory = (item) => {
+    if (item.isExpanded()) {
+        return ItemDropCategory.ExpandedFolder;
     }
-    if (offset > bottomLinePercentage) {
-        return types_1.DropTargetPosition.Bottom;
+    const parent = item.getParent();
+    if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+        return ItemDropCategory.LastInGroup;
     }
-    return types_1.DropTargetPosition.Item;
+    return ItemDropCategory.Item;
 };
-const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
-    var _a, _b, _c, _d;
+const getTargetPlacement = (e, item, tree, canMakeChild) => {
+    var _a, _b, _c;
     const config = tree.getConfig();
+    if (!config.canDropInbetween) {
+        return canMakeChild
+            ? { type: PlacementType.MakeChild }
+            : { type: PlacementType.ReorderBelow };
+    }
+    const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const topPercent = bb ? (e.pageY - bb.top) / bb.height : 0.5;
+    const leftPixels = bb ? e.pageX - bb.left : 0;
+    const targetDropCategory = getItemDropCategory(item);
+    const reorderAreaPercentage = !canMakeChild
+        ? 0.5
+        : (_b = config.reorderAreaPercentage) !== null && _b !== void 0 ? _b : 0.3;
+    const indent = (_c = config.indent) !== null && _c !== void 0 ? _c : 20;
+    const makeChildType = canMakeChild
+        ? PlacementType.MakeChild
+        : PlacementType.ReorderBelow;
+    if (targetDropCategory === ItemDropCategory.ExpandedFolder) {
+        if (topPercent < reorderAreaPercentage) {
+            return { type: PlacementType.ReorderAbove };
+        }
+        return { type: makeChildType };
+    }
+    if (targetDropCategory === ItemDropCategory.LastInGroup) {
+        if (leftPixels < item.getItemMeta().level * indent) {
+            if (topPercent < 0.5) {
+                return { type: PlacementType.ReorderAbove };
+            }
+            return {
+                type: PlacementType.Reparent,
+                reparentLevel: Math.floor(leftPixels / indent),
+            };
+        }
+        // if not at left of item area, treat as if it was a normal item
+    }
+    // targetDropCategory === ItemDropCategory.Item
+    if (topPercent < reorderAreaPercentage) {
+        return { type: PlacementType.ReorderAbove };
+    }
+    if (topPercent > 1 - reorderAreaPercentage) {
+        return { type: PlacementType.ReorderBelow };
+    }
+    return { type: makeChildType };
+};
+const getDragCode = (e, item, tree) => {
+    const placement = getTargetPlacement(e, item, tree, true);
+    return [
+        item.getId(),
+        placement.type,
+        placement.type === PlacementType.Reparent ? placement.reparentLevel : 0,
+    ].join("__");
+};
+exports.getDragCode = getDragCode;
+const getNthParent = (item, n) => {
+    if (n === item.getItemMeta().level) {
+        return item;
+    }
+    return getNthParent(item.getParent(), n);
+};
+const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
+    var _a, _b, _c;
     const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
-    const itemTarget = { item, childIndex: null, insertionIndex: null };
-    const parentTarget = {
-        item: item.getParent(),
+    const itemMeta = item.getItemMeta();
+    const parent = item.getParent();
+    const itemTarget = {
+        item,
         childIndex: null,
         insertionIndex: null,
+        dragLineIndex: null,
+        dragLineLevel: null,
     };
-    if (!canDropInbetween) {
-        if (!(0, exports.canDrop)(e.dataTransfer, parentTarget, tree)) {
-            return (0, exports.getDropTarget)(e, item.getParent(), tree, false);
+    const parentTarget = parent
+        ? {
+            item: parent,
+            childIndex: null,
+            insertionIndex: null,
+            dragLineIndex: null,
+            dragLineLevel: null,
         }
+        : null;
+    const canBecomeSibling = parentTarget && (0, exports.canDrop)(e.dataTransfer, parentTarget, tree);
+    const canMakeChild = (0, exports.canDrop)(e.dataTransfer, itemTarget, tree);
+    const placement = getTargetPlacement(e, item, tree, canMakeChild);
+    if (!canDropInbetween &&
+        parent &&
+        canBecomeSibling &&
+        placement.type !== PlacementType.MakeChild) {
+        return parentTarget;
+    }
+    if (!canDropInbetween && parent && !canBecomeSibling) {
+        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
+        return (0, exports.getDropTarget)(e, parent, tree, false);
+    }
+    if (!parent) {
+        // Shouldn't happen, but if dropped "next" to root item, just drop it inside
         return itemTarget;
     }
-    const canDropInside = (0, exports.canDrop)(e.dataTransfer, itemTarget, tree);
-    const offset = (0, exports.getDropOffset)(e, item);
-    const pos = canDropInside
-        ? getDropTargetPosition(offset, (_c = config.topLinePercentage) !== null && _c !== void 0 ? _c : 0.3, (_d = config.bottomLinePercentage) !== null && _d !== void 0 ? _d : 0.7)
-        : getDropTargetPosition(offset, 0.5, 0.5);
-    if (pos === types_1.DropTargetPosition.Item) {
+    if (placement.type === PlacementType.MakeChild) {
         return itemTarget;
     }
-    if (!(0, exports.canDrop)(e.dataTransfer, parentTarget, tree)) {
-        return (0, exports.getDropTarget)(e, item.getParent(), tree, false);
+    if (!canBecomeSibling) {
+        return (0, exports.getDropTarget)(e, parent, tree, false);
+    }
+    if (placement.type === PlacementType.Reparent) {
+        const reparentedTarget = getNthParent(item, placement.reparentLevel - 1);
+        const targetItemAbove = getNthParent(item, placement.reparentLevel); // .getItemBelow()!;
+        const targetIndex = targetItemAbove.getIndexInParent() + 1;
+        // TODO possibly count items dragged out above the new target
+        return {
+            item: reparentedTarget,
+            childIndex: targetIndex,
+            insertionIndex: targetIndex,
+            dragLineIndex: itemMeta.index + 1,
+            dragLineLevel: placement.reparentLevel,
+        };
     }
-    const childIndex = item.getIndexInParent() + (pos === types_1.DropTargetPosition.Top ? 0 : 1);
-    const numberOfDragItemsBeforeTarget = item
-        .getParent()
+    const maybeAddOneForBelow = placement.type === PlacementType.ReorderAbove ? 0 : 1;
+    const childIndex = item.getIndexInParent() + maybeAddOneForBelow;
+    const numberOfDragItemsBeforeTarget = (_c = parent
         .getChildren()
         .slice(0, childIndex)
         .reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
         ? ++counter
-        : counter, 0);
+        : counter, 0)) !== null && _c !== void 0 ? _c : 0;
     return {
-        item: item.getParent(),
+        item: parent,
+        dragLineIndex: itemMeta.index + maybeAddOneForBelow,
+        dragLineLevel: itemMeta.level,
         childIndex,
         // TODO performance could be improved by computing this only when dragcode changed
         insertionIndex: childIndex - numberOfDragItemsBeforeTarget,

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

@@ -13,13 +13,17 @@ exports.expandAllFeature = void 0;
 const utils_1 = require("../../utils");
 exports.expandAllFeature = {
     key: "expand-all",
-    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+    treeInstance: {
+        expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree }, cancelToken) {
             yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
-        }), collapseAll: () => {
+        }),
+        collapseAll: ({ tree }) => {
             tree.applySubStateUpdate("expandedItems", []);
             tree.rebuildTree();
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+        },
+    },
+    itemInstance: {
+        expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree, item }, cancelToken) {
             if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
                 return;
             }
@@ -32,10 +36,12 @@ exports.expandAllFeature = {
                 yield (0, utils_1.poll)(() => !tree.getState().loadingItems.includes(child.getId()));
                 yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
             })));
-        }), collapseAll: () => {
+        }),
+        collapseAll: ({ item }) => {
             for (const child of item.getChildren()) {
                 child === null || child === void 0 ? void 0 : child.collapseAll();
             }
             item.collapse();
-        } })),
+        },
+    },
 };

package/lib/cjs/features/main/types.d.ts

@@ -1,12 +1,18 @@
-import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState, Updater } from "../../types/core";
+import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeInstance, TreeState, Updater } from "../../types/core";
 import { ItemMeta } from "../tree/types";
+export type InstanceTypeMap = {
+    itemInstance: ItemInstance<any>;
+    treeInstance: TreeInstance<any>;
+};
+export type InstanceBuilder = <T extends keyof InstanceTypeMap>(features: FeatureImplementation[], instanceType: T, buildOpts: (self: any) => any) => [instance: InstanceTypeMap[T], finalize: () => void];
 export type MainFeatureDef<T = any> = {
     state: {};
     config: {
         features?: FeatureImplementation<any>[];
         initialState?: Partial<TreeState<T>>;
         state?: Partial<TreeState<T>>;
-        setState?: SetStateFn<TreeState<T>>;
+        setState?: SetStateFn<Partial<TreeState<T>>>;
+        instanceBuilder?: InstanceBuilder;
     };
     treeInstance: {
         /** @internal */

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

@@ -9,34 +9,49 @@ exports.renamingFeature = {
         renamingItem: "setRenamingItem",
         renamingValue: "setRenamingValue",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { startRenamingItem: (itemId) => {
-            const item = instance.getItemInstance(itemId);
+    treeInstance: {
+        startRenamingItem: ({ tree }, itemId) => {
+            const item = tree.getItemInstance(itemId);
             if (!item.canRename()) {
                 return;
             }
-            instance.applySubStateUpdate("renamingItem", itemId);
-            instance.applySubStateUpdate("renamingValue", item.getItemName());
-        }, getRenamingItem: () => {
-            const itemId = instance.getState().renamingItem;
-            return itemId ? instance.getItemInstance(itemId) : null;
-        }, getRenamingValue: () => instance.getState().renamingValue || "", abortRenaming: () => {
-            instance.applySubStateUpdate("renamingItem", null);
-        }, completeRenaming: () => {
+            tree.applySubStateUpdate("renamingItem", itemId);
+            tree.applySubStateUpdate("renamingValue", item.getItemName());
+        },
+        getRenamingItem: ({ tree }) => {
+            const itemId = tree.getState().renamingItem;
+            return itemId ? tree.getItemInstance(itemId) : null;
+        },
+        getRenamingValue: ({ tree }) => tree.getState().renamingValue || "",
+        abortRenaming: ({ tree }) => {
+            tree.applySubStateUpdate("renamingItem", null);
+            tree.updateDomFocus();
+        },
+        completeRenaming: ({ tree }) => {
             var _a;
-            const config = instance.getConfig();
-            const item = instance.getRenamingItem();
+            const config = tree.getConfig();
+            const item = tree.getRenamingItem();
             if (item) {
-                (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, instance.getState().renamingValue || "");
+                (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, tree.getState().renamingValue || "");
             }
-            instance.applySubStateUpdate("renamingItem", null);
-        }, isRenamingItem: () => !!instance.getState().renamingItem })),
-    createItemInstance: (prev, instance, tree) => (Object.assign(Object.assign({}, prev), { getRenameInputProps: () => ({
+            tree.applySubStateUpdate("renamingItem", null);
+            tree.updateDomFocus();
+        },
+        isRenamingItem: ({ tree }) => !!tree.getState().renamingItem,
+    },
+    itemInstance: {
+        getRenameInputProps: ({ tree }) => ({
             onBlur: () => tree.abortRenaming(),
             value: tree.getRenamingValue(),
             onChange: (e) => {
-                tree.applySubStateUpdate("renamingValue", e.target.value);
+                var _a;
+                // TODO custom type with e.target.value
+                tree.applySubStateUpdate("renamingValue", (_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
             },
-        }), canRename: () => { var _a, _b, _c; return (_c = (_b = (_a = tree.getConfig()).canRename) === null || _b === void 0 ? void 0 : _b.call(_a, instance)) !== null && _c !== void 0 ? _c : true; }, isRenaming: () => instance.getId() === tree.getState().renamingItem })),
+        }),
+        canRename: ({ tree, item }) => { var _a, _b, _c; return (_c = (_b = (_a = tree.getConfig()).canRename) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true; },
+        isRenaming: ({ tree, item }) => item.getId() === tree.getState().renamingItem,
+    },
     hotkeys: {
         renameItem: {
             hotkey: "F2",

package/lib/cjs/features/renaming/types.d.ts

@@ -5,7 +5,7 @@ export type RenamingFeatureDef<T> = {
         renamingValue?: string;
     };
     config: {
-        setRenamingItem?: SetStateFn<string | null>;
+        setRenamingItem?: SetStateFn<string | null | undefined>;
         setRenamingValue?: SetStateFn<string | undefined>;
         canRename?: (item: ItemInstance<T>) => boolean;
         onRename?: (item: ItemInstance<T>, value: string) => void;

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

@@ -10,39 +10,53 @@ exports.searchFeature = {
     stateHandlerNames: {
         search: "setSearch",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSearch: (search) => {
+    treeInstance: {
+        setSearch: ({ tree }, search) => {
             var _a;
-            instance.applySubStateUpdate("search", search);
-            (_a = instance
+            tree.applySubStateUpdate("search", search);
+            (_a = tree
                 .getItems()
-                .find((item) => {
-                var _a, _b;
-                return (_b = (_a = instance
-                    .getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, instance.getSearchValue(), item);
-            })) === null || _a === void 0 ? void 0 : _a.setFocused();
-        }, openSearch: (initialValue = "") => {
-            instance.setSearch(initialValue);
+                .find((item) => { var _a, _b; return (_b = (_a = tree.getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, tree.getSearchValue(), item); })) === null || _a === void 0 ? void 0 : _a.setFocused();
+        },
+        openSearch: ({ tree }, initialValue = "") => {
+            var _a, _b;
+            tree.setSearch(initialValue);
+            (_b = (_a = tree.getConfig()).onOpenSearch) === null || _b === void 0 ? void 0 : _b.call(_a);
             setTimeout(() => {
                 var _a;
-                (_a = instance
-                    .getDataRef()
-                    .current.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
+                (_a = tree.getDataRef().current.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
             });
-        }, closeSearch: () => {
-            instance.setSearch(null);
-            instance.updateDomFocus();
-        }, isSearchOpen: () => instance.getState().search !== null, getSearchValue: () => instance.getState().search || "", registerSearchInputElement: (element) => {
-            const dataRef = instance.getDataRef();
+        },
+        closeSearch: ({ tree }) => {
+            var _a, _b;
+            tree.setSearch(null);
+            (_b = (_a = tree.getConfig()).onCloseSearch) === null || _b === void 0 ? void 0 : _b.call(_a);
+            tree.updateDomFocus();
+        },
+        isSearchOpen: ({ tree }) => tree.getState().search !== null,
+        getSearchValue: ({ tree }) => tree.getState().search || "",
+        registerSearchInputElement: ({ tree }, element) => {
+            const dataRef = tree.getDataRef();
             dataRef.current.searchInput = element;
             if (element && dataRef.current.keydownHandler) {
                 element.addEventListener("keydown", dataRef.current.keydownHandler);
             }
-        }, getSearchInputElement: () => { var _a; return (_a = instance.getDataRef().current.searchInput) !== null && _a !== void 0 ? _a : null; }, getSearchInputElementProps: () => ({
-            value: instance.getSearchValue(),
-            onChange: (e) => instance.setSearch(e.target.value),
-            onBlur: () => instance.closeSearch(),
-        }), getSearchMatchingItems: (0, utils_1.memo)((search, items) => items.filter((item) => { var _a, _b; return search && ((_b = (_a = instance.getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, search, item)); }), () => [instance.getSearchValue(), instance.getItems()]) })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isMatchingSearch: () => tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()) })),
+        },
+        getSearchInputElement: ({ tree }) => { var _a; return (_a = tree.getDataRef().current.searchInput) !== null && _a !== void 0 ? _a : null; },
+        getSearchInputElementProps: ({ tree }) => ({
+            value: tree.getSearchValue(),
+            onChange: (e) => tree.setSearch(e.target.value),
+            onBlur: () => tree.closeSearch(),
+        }),
+        getSearchMatchingItems: (0, utils_1.memo)(({ tree }) => [
+            tree.getSearchValue(),
+            tree.getItems(),
+            tree.getConfig().isSearchMatchingItem,
+        ], (search, items, isSearchMatchingItem) => items.filter((item) => search && (isSearchMatchingItem === null || isSearchMatchingItem === void 0 ? void 0 : isSearchMatchingItem(search, item)))),
+    },
+    itemInstance: {
+        isMatchingSearch: ({ tree, item }) => tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()),
+    },
     hotkeys: {
         openSearch: {
             hotkey: "LetterOrNumber",

package/lib/cjs/features/search/types.d.ts

@@ -12,7 +12,6 @@ export type SearchFeatureDef<T> = {
         setSearch?: SetStateFn<string | null>;
         onOpenSearch?: () => void;
         onCloseSearch?: () => void;
-        onSearchMatchesItems?: (search: string, items: ItemInstance<T>[]) => void;
         isSearchMatchingItem?: (search: string, item: ItemInstance<T>) => boolean;
     };
     treeInstance: {

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

@@ -9,25 +9,31 @@ exports.selectionFeature = {
     stateHandlerNames: {
         selectedItems: "setSelectedItems",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSelectedItems: (selectedItems) => {
-            instance.applySubStateUpdate("selectedItems", selectedItems);
-        }, 
+    treeInstance: {
+        setSelectedItems: ({ tree }, selectedItems) => {
+            tree.applySubStateUpdate("selectedItems", selectedItems);
+        },
         // TODO memo
-        getSelectedItems: () => {
-            return instance.getState().selectedItems.map(instance.getItemInstance);
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { select: () => {
+        getSelectedItems: ({ tree }) => {
+            return tree.getState().selectedItems.map(tree.getItemInstance);
+        },
+    },
+    itemInstance: {
+        select: ({ tree, item }) => {
             const { selectedItems } = tree.getState();
             tree.setSelectedItems(selectedItems.includes(item.getItemMeta().itemId)
                 ? selectedItems
                 : [...selectedItems, item.getItemMeta().itemId]);
-        }, deselect: () => {
+        },
+        deselect: ({ tree, item }) => {
             const { selectedItems } = tree.getState();
             tree.setSelectedItems(selectedItems.filter((id) => id !== item.getItemMeta().itemId));
-        }, isSelected: () => {
+        },
+        isSelected: ({ tree, item }) => {
             const { selectedItems } = tree.getState();
             return selectedItems.includes(item.getItemMeta().itemId);
-        }, selectUpTo: (ctrl) => {
+        },
+        selectUpTo: ({ tree, item }, ctrl) => {
             const indexA = item.getItemMeta().index;
             // TODO dont use focused item as anchor, but last primary-clicked item
             const indexB = tree.getFocusedItem().getItemMeta().index;
@@ -45,14 +51,16 @@ exports.selectionFeature = {
                 ...new Set([...selectedItems, ...newSelectedItems]),
             ];
             tree.setSelectedItems(uniqueSelectedItems);
-        }, toggleSelect: () => {
+        },
+        toggleSelect: ({ item }) => {
             if (item.isSelected()) {
                 item.deselect();
             }
             else {
                 item.select();
             }
-        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { "aria-selected": item.isSelected() ? "true" : "false", onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
+        },
+        getProps: ({ tree, item, prev }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { "aria-selected": item.isSelected() ? "true" : "false", onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
                 var _a, _b;
                 if (e.shiftKey) {
                     item.selectUpTo(e.ctrlKey || e.metaKey);
@@ -63,8 +71,9 @@ exports.selectionFeature = {
                 else {
                     tree.setSelectedItems([item.getItemMeta().itemId]);
                 }
-                (_b = (_a = prev.getProps()).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            }) })) })),
+                (_b = (_a = prev === null || prev === void 0 ? void 0 : prev()) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            }) })),
+    },
     hotkeys: {
         // setSelectedItem: {
         //   hotkey: "space",

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

@@ -9,6 +9,11 @@ exports.syncDataLoaderFeature = {
     stateHandlerNames: {
         loadingItems: "setLoadingItems",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => instance.getConfig().dataLoader.getItem(itemId), retrieveChildrenIds: (itemId) => instance.getConfig().dataLoader.getChildren(itemId) })),
-    createItemInstance: (prev) => (Object.assign(Object.assign({}, prev), { isLoading: () => false })),
+    treeInstance: {
+        retrieveItemData: ({ tree }, itemId) => tree.getConfig().dataLoader.getItem(itemId),
+        retrieveChildrenIds: ({ tree }, itemId) => tree.getConfig().dataLoader.getChildren(itemId),
+    },
+    itemInstance: {
+        isLoading: () => false,
+    },
 };

package/lib/cjs/features/tree/feature.d.ts

@@ -3,4 +3,5 @@ import { TreeFeatureDef } from "./types";
 import { MainFeatureDef } from "../main/types";
 import { HotkeysCoreFeatureDef } from "../hotkeys-core/types";
 import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-export declare const treeFeature: FeatureImplementation<any, TreeFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | HotkeysCoreFeatureDef<any> | SyncDataLoaderFeatureDef<any>>;
+import { SearchFeatureDef } from "../search/types";
+export declare const treeFeature: FeatureImplementation<any, TreeFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | HotkeysCoreFeatureDef<any> | SyncDataLoaderFeatureDef<any> | SearchFeatureDef<any>>;