@headless-tree/core 0.0.4 → 0.0.6

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

@@ -3,15 +3,18 @@ import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
     key: "dragAndDrop",
     dependingFeatures: ["main", "tree", "selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), setDndState: makeStateUpdater("dnd", tree) }, defaultConfig)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: makeStateUpdater("dnd", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        dnd: "setDndState",
+    },
     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;
+            return (Object.assign(Object.assign({}, prev.getProps()), { draggable: (_c = (_b = (_a = tree.getConfig()).isItemDraggable) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true, onDragStart: item.getMemoizedProp("dnd/onDragStart", () => (e) => {
+                    var _a, _b, _c;
                     const selectedItems = tree.getSelectedItems();
                     const items = selectedItems.includes(item) ? selectedItems : [item];
                     const config = tree.getConfig();
@@ -26,12 +29,12 @@ export const dragAndDropFeature = {
                         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, {
+                    tree.applySubStateUpdate("dnd", {
                         draggedItems: items,
                         draggingOverItem: tree.getFocusedItem(),
                     });
-                }, onDragOver: (e) => {
-                    var _a, _b, _c, _d, _e;
+                }), onDragOver: item.getMemoizedProp("dnd/onDragOver", () => (e) => {
+                    var _a, _b, _c;
                     const target = getDropTarget(e, item, tree);
                     const dataRef = tree.getDataRef();
                     if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
@@ -47,14 +50,21 @@ export const dragAndDropFeature = {
                         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;
+                    tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
+                }), onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
                     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;
+                    tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
+                }), onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
+                    var _a, _b, _c;
+                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+                    tree.applySubStateUpdate("dnd", null);
+                    if (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+                        return;
+                    }
+                    (_c = (_b = tree.getConfig()).onCompleteForeignDrop) === null || _c === void 0 ? void 0 : _c.call(_b, draggedItems);
+                }), onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
+                    var _a, _b, _c;
                     const dataRef = tree.getDataRef();
                     const target = getDropTarget(e, item, tree);
                     if (!canDrop(e.dataTransfer, target, tree)) {
@@ -64,30 +74,32 @@ export const dragAndDropFeature = {
                     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);
+                    tree.applySubStateUpdate("dnd", null);
                     if (draggedItems) {
-                        (_d = config.onDrop) === null || _d === void 0 ? void 0 : _d.call(config, draggedItems, target);
+                        (_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target);
                     }
                     else {
-                        (_e = config.onDropForeignDragObject) === null || _e === void 0 ? void 0 : _e.call(config, e.dataTransfer, target);
+                        (_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.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)
+            if (!target ||
+                target.childIndex === null ||
+                target.item !== item.getParent())
                 return false;
-            const targetIndex = target.item.getItemMeta().index;
-            return targetIndex + target.childIndex + 1 === item.getItemMeta().index;
+            return target.childIndex === item.getItemMeta().posInSet;
         }, isDropTargetBelow: () => {
             const target = tree.getDropTarget();
-            if (!target || target.childIndex === null)
+            if (!target ||
+                target.childIndex === null ||
+                target.item !== item.getParent())
                 return false;
-            const targetIndex = target.item.getItemMeta().index;
-            return targetIndex + target.childIndex === item.getItemMeta().index;
+            return target.childIndex - 1 === item.getItemMeta().posInSet;
         }, 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();

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

@@ -9,7 +9,12 @@ export type DndState<T> = {
 };
 export type DropTarget<T> = {
     item: ItemInstance<T>;
-    childIndex: number | null;
+    childIndex: number;
+    insertionIndex: number;
+} | {
+    item: ItemInstance<T>;
+    childIndex: null;
+    insertionIndex: null;
 };
 export declare enum DropTargetPosition {
     Top = "top",
@@ -35,6 +40,14 @@ export type DragAndDropFeatureDef<T> = {
         canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => boolean;
         onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
         onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => void;
+        /** Runs in the onDragEnd event, if `ev.dataTransfer.dropEffect` is not `none`, i.e. the drop
+         * was not aborted. No target is provided as parameter since the target may be a foreign drop target.
+         * This is useful to seperate out the logic to move dragged items out of their previous parents.
+         * Use `onDrop` to handle drop-related logic.
+         *
+         * This ignores the `canDrop` handler, since the drop target is unknown in this handler.
+         */
+        onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
     };
     treeInstance: {
         getDropTarget: () => DropTarget<T> | null;

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

@@ -3,4 +3,4 @@ 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 getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canDropInbetween?: boolean | undefined) => DropTarget<any>;

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

@@ -1,4 +1,4 @@
-import { DropTargetPosition } from "./types";
+import { DropTargetPosition, } from "./types";
 export const getDragCode = ({ item, childIndex }) => `${item.getId()}__${childIndex !== null && childIndex !== void 0 ? childIndex : "none"}`;
 export const getDropOffset = (e, item) => {
     var _a;
@@ -28,28 +28,45 @@ const getDropTargetPosition = (offset, topLinePercentage, bottomLinePercentage)
     }
     return DropTargetPosition.Item;
 };
-export const getDropTarget = (e, item, tree) => {
-    var _a, _b;
+export const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
+    var _a, _b, _c, _d;
     const config = tree.getConfig();
-    const offset = 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 (!canDrop(e.dataTransfer, dropOnItemTarget, tree)) {
-        return {
-            item: item.getParent(),
-            childIndex: item.getIndexInParent() +
-                (inbetweenPos === DropTargetPosition.Top ? 0 : 1),
-        };
+    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(),
+        childIndex: null,
+        insertionIndex: null,
+    };
+    if (!canDropInbetween) {
+        if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+            return getDropTarget(e, item.getParent(), tree, false);
+        }
+        return itemTarget;
     }
+    const canDropInside = canDrop(e.dataTransfer, itemTarget, tree);
+    const offset = 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 === DropTargetPosition.Item) {
-        return dropOnItemTarget;
+        return itemTarget;
+    }
+    if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+        return getDropTarget(e, item.getParent(), tree, false);
     }
+    const childIndex = item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1);
+    const numberOfDragItemsBeforeTarget = item
+        .getParent()
+        .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);
     return {
         item: item.getParent(),
-        childIndex: item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1),
+        childIndex,
+        // TODO performance could be improved by computing this only when dragcode changed
+        insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
     };
 };

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

@@ -13,24 +13,27 @@ export const expandAllFeature = {
     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: () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b;
-            (_b = (_a = tree.getConfig()).setExpandedItems) === null || _b === void 0 ? void 0 : _b.call(_a, []);
-        }) })),
+        }), collapseAll: () => {
+            tree.applySubStateUpdate("expandedItems", []);
+            tree.rebuildTree();
+        } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
             if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
                 return;
             }
+            if (!item.isFolder()) {
+                return;
+            }
             item.expand();
             yield poll(() => !tree.getState().loadingItems.includes(item.getId()));
             yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
                 yield poll(() => !tree.getState().loadingItems.includes(child.getId()));
                 yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
             })));
-        }), collapseAll: () => __awaiter(void 0, void 0, void 0, function* () {
-            yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
-                yield (child === null || child === void 0 ? void 0 : child.collapseAll());
-            })));
+        }), collapseAll: () => {
+            for (const child of item.getChildren()) {
+                child === null || child === void 0 ? void 0 : child.collapseAll();
+            }
             item.collapse();
-        }) })),
+        } })),
 };

package/lib/esm/features/expand-all/types.d.ts

@@ -5,13 +5,13 @@ export type ExpandAllFeatureDef = {
         expandAll: (cancelToken?: {
             current: boolean;
         }) => Promise<void>;
-        collapseAll: () => Promise<void>;
+        collapseAll: () => void;
     };
     itemInstance: {
         expandAll: (cancelToken?: {
             current: boolean;
         }) => Promise<void>;
-        collapseAll: () => Promise<void>;
+        collapseAll: () => void;
     };
     hotkeys: never;
 };

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

@@ -1,13 +1,16 @@
-import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState } from "../../types/core";
+import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState, Updater } from "../../types/core";
 import { ItemMeta } from "../tree/types";
 export type MainFeatureDef<T = any> = {
     state: {};
     config: {
         features?: FeatureImplementation<any>[];
+        initialState?: Partial<TreeState<T>>;
         state?: Partial<TreeState<T>>;
         setState?: SetStateFn<TreeState<T>>;
     };
     treeInstance: {
+        /** @internal */
+        applySubStateUpdate: <K extends keyof TreeState<any>>(stateName: K, updater: Updater<TreeState<T>[K]>) => void;
         setState: SetStateFn<TreeState<T>>;
         getState: () => TreeState<T>;
         setConfig: SetStateFn<TreeConfig<T>>;

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

@@ -3,36 +3,37 @@ 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) => {
-            var _a, _b;
             const config = instance.getConfig();
             const item = instance.getItemInstance(itemId);
             if (!item.canRename()) {
                 return;
             }
-            (_a = config.setRenamingItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId);
-            (_b = config.setRenamingValue) === null || _b === void 0 ? void 0 : _b.call(config, item.getItemName());
+            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: () => {
-            var _a, _b;
-            (_b = (_a = instance.getConfig()).setRenamingItem) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+            instance.applySubStateUpdate("renamingItem", null);
         }, completeRenaming: () => {
-            var _a, _b, _c;
+            var _a;
             const config = instance.getConfig();
             const item = instance.getRenamingItem();
             if (item) {
                 (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, instance.getState().renamingValue || "");
             }
-            (_c = (_b = instance.getConfig()).setRenamingItem) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+            instance.applySubStateUpdate("renamingItem", null);
         }, isRenamingItem: () => !!instance.getState().renamingItem })),
     createItemInstance: (prev, instance, tree) => (Object.assign(Object.assign({}, prev), { getRenameInputProps: () => ({
             onBlur: () => tree.abortRenaming(),
             value: tree.getRenamingValue(),
             onChange: (e) => {
-                var _a, _b;
-                (_b = (_a = tree.getConfig()).setRenamingValue) === null || _b === void 0 ? void 0 : _b.call(_a, e.target.value);
+                tree.applySubStateUpdate("renamingValue", e.target.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 })),
     hotkeys: {

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

@@ -5,16 +5,19 @@ export const searchFeature = {
     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)),
+    stateHandlerNames: {
+        search: "setSearch",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSearch: (search) => {
-            var _a, _b, _c;
-            (_b = (_a = instance.getConfig()).setSearch) === null || _b === void 0 ? void 0 : _b.call(_a, search);
-            (_c = instance
+            var _a;
+            instance.applySubStateUpdate("search", search);
+            (_a = instance
                 .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 || _c === void 0 ? void 0 : _c.setFocused();
+            })) === null || _a === void 0 ? void 0 : _a.setFocused();
         }, openSearch: (initialValue = "") => {
             instance.setSearch(initialValue);
             setTimeout(() => {
@@ -36,7 +39,7 @@ export const searchFeature = {
             value: instance.getSearchValue(),
             onChange: (e) => instance.setSearch(e.target.value),
             onBlur: () => instance.closeSearch(),
-        }), getSearchMatchingItems: memo((search, items) => items.filter((item) => { var _a, _b; return (_b = (_a = instance.getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, search, item); }), () => [instance.getSearchValue(), instance.getItems()]) })),
+        }), getSearchMatchingItems: 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()) })),
     hotkeys: {
         openSearch: {
@@ -57,30 +60,41 @@ export const searchFeature = {
                 tree.closeSearch();
             },
         },
+        submitSearch: {
+            hotkey: "Enter",
+            allowWhenInputFocused: true,
+            isEnabled: (tree) => tree.isSearchOpen(),
+            handler: (e, tree) => {
+                tree.closeSearch();
+                tree.setSelectedItems([tree.getFocusedItem().getId()]);
+            },
+        },
         nextSearchItem: {
             hotkey: "ArrowDown",
             allowWhenInputFocused: true,
+            canRepeat: true,
             isEnabled: (tree) => tree.isSearchOpen(),
             handler: (e, tree) => {
-                // TODO scroll into view
                 const focusItem = tree
                     .getSearchMatchingItems()
                     .find((item) => item.getItemMeta().index >
                     tree.getFocusedItem().getItemMeta().index);
                 focusItem === null || focusItem === void 0 ? void 0 : focusItem.setFocused();
+                focusItem === null || focusItem === void 0 ? void 0 : focusItem.scrollTo({ block: "nearest", inline: "nearest" });
             },
         },
         previousSearchItem: {
             hotkey: "ArrowUp",
             allowWhenInputFocused: true,
+            canRepeat: true,
             isEnabled: (tree) => tree.isSearchOpen(),
             handler: (e, tree) => {
-                // TODO scroll into view
                 const focusItem = [...tree.getSearchMatchingItems()]
                     .reverse()
                     .find((item) => item.getItemMeta().index <
                     tree.getFocusedItem().getItemMeta().index);
                 focusItem === null || focusItem === void 0 ? void 0 : focusItem.setFocused();
+                focusItem === null || focusItem === void 0 ? void 0 : focusItem.scrollTo({ block: "nearest", inline: "nearest" });
             },
         },
     },

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

@@ -29,5 +29,5 @@ export type SearchFeatureDef<T> = {
     itemInstance: {
         isMatchingSearch: () => boolean;
     };
-    hotkeys: "openSearch" | "closeSearch" | "nextSearchItem" | "previousSearchItem";
+    hotkeys: "openSearch" | "closeSearch" | "submitSearch" | "nextSearchItem" | "previousSearchItem";
 };

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

@@ -4,9 +4,11 @@ export const selectionFeature = {
     dependingFeatures: ["main", "tree"],
     getInitialState: (initialState) => (Object.assign({ selectedItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSelectedItems: makeStateUpdater("selectedItems", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        selectedItems: "setSelectedItems",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSelectedItems: (selectedItems) => {
-            var _a, _b;
-            (_b = (_a = instance.getConfig()).setSelectedItems) === null || _b === void 0 ? void 0 : _b.call(_a, selectedItems);
+            instance.applySubStateUpdate("selectedItems", selectedItems);
         }, 
         // TODO memo
         getSelectedItems: () => {
@@ -48,7 +50,7 @@ export const selectionFeature = {
             else {
                 item.select();
             }
-        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { onClick: (e) => {
+        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { "aria-selected": item.isSelected() ? "true" : "false", onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
                 var _a, _b;
                 if (e.shiftKey) {
                     item.selectUpTo(e.ctrlKey || e.metaKey);
@@ -60,7 +62,7 @@ export const selectionFeature = {
                     tree.setSelectedItems([item.getItemMeta().itemId]);
                 }
                 (_b = (_a = prev.getProps()).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            } })) })),
+            }) })) })),
     hotkeys: {
         // setSelectedItem: {
         //   hotkey: "space",

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

@@ -1,6 +1,12 @@
+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: {
+        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 })),
 };

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

@@ -6,7 +6,7 @@ export type SyncDataLoaderFeatureDef<T> = {
     state: {};
     config: {
         rootItemId: string;
-        dataLoader: SyncTreeDataLoader<T>;
+        dataLoader?: SyncTreeDataLoader<T>;
     };
     treeInstance: {
         retrieveItemData: (itemId: string) => T;

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

@@ -13,6 +13,10 @@ export const treeFeature = {
     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: {
+        expandedItems: "setExpandedItems",
+        focusedItem: "setFocusedItem",
+    },
     createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: () => {
             throw new Error("No data-loader registered");
         }, retrieveChildrenIds: () => {
@@ -20,7 +24,6 @@ export const treeFeature = {
         }, isItemExpanded: (itemId) => instance.getState().expandedItems.includes(itemId), getItemsMeta: () => {
             const { rootItemId } = instance.getConfig();
             const { expandedItems } = instance.getState();
-            // console.log("!", instance.getConfig());
             const flatItems = [];
             const recursiveAdd = (itemId, parentId, level, setSize, posInSet) => {
                 var _a;
@@ -47,23 +50,23 @@ export const treeFeature = {
             }
             return flatItems;
         }, expandItem: (itemId) => {
-            var _a, _b, _c;
+            var _a;
             if (!instance.getItemInstance(itemId).isFolder()) {
                 return;
             }
             if ((_a = instance.getState().loadingItems) === null || _a === void 0 ? void 0 : _a.includes(itemId)) {
                 return;
             }
-            (_c = (_b = instance
-                .getConfig()).setExpandedItems) === null || _c === void 0 ? void 0 : _c.call(_b, (expandedItems) => [...expandedItems, itemId]);
+            instance.applySubStateUpdate("expandedItems", (expandedItems) => [
+                ...expandedItems,
+                itemId,
+            ]);
             instance.rebuildTree();
         }, collapseItem: (itemId) => {
-            var _a, _b;
             if (!instance.getItemInstance(itemId).isFolder()) {
                 return;
             }
-            (_b = (_a = instance
-                .getConfig()).setExpandedItems) === null || _b === void 0 ? void 0 : _b.call(_a, (expandedItems) => expandedItems.filter((id) => id !== itemId));
+            instance.applySubStateUpdate("expandedItems", (expandedItems) => expandedItems.filter((id) => id !== itemId));
             instance.rebuildTree();
         }, 
         // TODO memo
@@ -71,8 +74,7 @@ export const treeFeature = {
             var _a, _b;
             return ((_b = instance.getItemInstance((_a = instance.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : instance.getItems()[0]);
         }, focusItem: (itemId) => {
-            var _a, _b;
-            (_b = (_a = instance.getConfig()).setFocusedItem) === null || _b === void 0 ? void 0 : _b.call(_a, itemId);
+            instance.applySubStateUpdate("focusedItem", itemId);
         }, focusNextItem: () => {
             const { index } = instance.getFocusedItem().getItemMeta();
             const nextIndex = Math.min(index + 1, instance.getItems().length - 1);
@@ -81,7 +83,7 @@ export const treeFeature = {
             const { index } = instance.getFocusedItem().getItemMeta();
             const nextIndex = Math.max(index - 1, 0);
             instance.focusItem(instance.getItems()[nextIndex].getId());
-        }, updateDomFocus: (scrollIntoView) => {
+        }, updateDomFocus: () => {
             // Required because if the state is managed outside in react, the state only updated during next render
             setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
                 var _a, _b;
@@ -92,9 +94,6 @@ export const treeFeature = {
                 if (!focusedElement)
                     return;
                 focusedElement.focus();
-                // if (scrollIntoView) {
-                //   focusedElement.scrollIntoView();
-                // }
             }));
         }, getContainerProps: () => {
             var _a;
@@ -102,10 +101,15 @@ export const treeFeature = {
         } })),
     createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isLoading: () => {
             throw new Error("No data-loader registered");
-        }, getId: () => item.getItemMeta().itemId, getProps: () => {
+        }, scrollTo: (scrollIntoViewArg) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            (_b = (_a = tree.getConfig()).scrollToItem) === null || _b === void 0 ? void 0 : _b.call(_a, item);
+            yield poll(() => item.getElement() !== null, 20);
+            item.getElement().scrollIntoView(scrollIntoViewArg);
+        }), getId: () => item.getItemMeta().itemId, getProps: () => {
             var _a;
             const itemMeta = item.getItemMeta();
-            return Object.assign(Object.assign({}, (_a = prev.getProps) === null || _a === void 0 ? void 0 : _a.call(prev)), { role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": false, "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: (e) => {
+            return Object.assign(Object.assign({}, (_a = prev.getProps) === null || _a === void 0 ? void 0 : _a.call(prev)), { role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": "false", "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: item.getMemoizedProp("tree/onClick", () => (e) => {
                     item.setFocused();
                     item.primaryAction();
                     if (e.ctrlKey || e.shiftKey || e.metaKey) {
@@ -120,7 +124,7 @@ export const treeFeature = {
                     else {
                         item.expand();
                     }
-                } });
+                }) });
         }, expand: () => tree.expandItem(item.getItemMeta().itemId), collapse: () => tree.collapseItem(item.getItemMeta().itemId), getItemData: () => tree.retrieveItemData(item.getItemMeta().itemId), isExpanded: () => tree.getState().expandedItems.includes(item.getItemMeta().itemId), isFocused: () => tree.getState().focusedItem === item.getItemMeta().itemId ||
             (tree.getState().focusedItem === null && item.getItemMeta().index === 0), isFolder: () => item.getItemMeta().level === -1 ||
             tree.getConfig().isItemFolder(item), getItemName: () => {
@@ -134,14 +138,27 @@ export const treeFeature = {
                 }
             }
             return tree.getItemInstance(tree.getConfig().rootItemId);
-        }, () => [item.getItemMeta()]), getIndexInParent: () => {
-            var _a, _b;
-            return item.getItemMeta().index -
-                ((_b = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getItemMeta().index) !== null && _b !== void 0 ? _b : 0) -
-                1;
-        }, getChildren: () => tree
+        }, () => [item.getItemMeta()]), 
+        // TODO remove
+        getIndexInParent: () => item.getItemMeta().posInSet, getChildren: () => tree
             .retrieveChildrenIds(item.getItemMeta().itemId)
-            .map((id) => tree.getItemInstance(id)), getTree: () => tree, getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1], getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1] })),
+            .map((id) => tree.getItemInstance(id)), getTree: () => tree, getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1], getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1], getMemoizedProp: (name, create, deps) => {
+            var _a, _b, _c, _d, _e;
+            var _f, _g;
+            const data = item.getDataRef();
+            const memoizedValue = (_a = data.current.memoizedValues) === null || _a === void 0 ? void 0 : _a[name];
+            if (memoizedValue &&
+                (!deps ||
+                    ((_c = (_b = data.current.memoizedDeps) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.every((d, i) => d === deps[i])))) {
+                return memoizedValue;
+            }
+            (_d = (_f = data.current).memoizedDeps) !== null && _d !== void 0 ? _d : (_f.memoizedDeps = {});
+            (_e = (_g = data.current).memoizedValues) !== null && _e !== void 0 ? _e : (_g.memoizedValues = {});
+            const value = create();
+            data.current.memoizedDeps[name] = deps;
+            data.current.memoizedValues[name] = value;
+            return value;
+        } })),
     hotkeys: {
         focusNextItem: {
             hotkey: "ArrowDown",
@@ -186,7 +203,7 @@ export const treeFeature = {
                 if ((!item.isExpanded() || !item.isFolder()) &&
                     item.getItemMeta().level !== 0) {
                     (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.setFocused();
-                    tree.updateDomFocus(true);
+                    tree.updateDomFocus();
                 }
                 else {
                     item.collapse();