@headless-tree/core 0.0.14 → 0.0.15

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

@@ -1,14 +1,40 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { makeStateUpdater } from "../../utils";
+import { throwError } from "../../utilities/errors";
+const promiseErrorMessage = "sync dataLoader returned promise";
 export const syncDataLoaderFeature = {
     key: "sync-data-loader",
-    getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: makeStateUpdater("loadingItems", tree) }, defaultConfig)),
+    getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItemData: makeStateUpdater("loadingItemData", tree), setLoadingItemChildrens: makeStateUpdater("loadingItemChildrens", tree) }, defaultConfig)),
     stateHandlerNames: {
-        loadingItems: "setLoadingItems",
+        loadingItemData: "setLoadingItemData",
+        loadingItemChildrens: "setLoadingItemChildrens",
     },
     treeInstance: {
-        retrieveItemData: ({ tree }, itemId) => tree.getConfig().dataLoader.getItem(itemId),
-        retrieveChildrenIds: ({ tree }, itemId) => tree.getConfig().dataLoader.getChildren(itemId),
+        waitForItemDataLoaded: () => __awaiter(void 0, void 0, void 0, function* () { }),
+        waitForItemChildrenLoaded: () => __awaiter(void 0, void 0, void 0, function* () { }),
+        retrieveItemData: ({ tree }, itemId) => {
+            const data = tree.getConfig().dataLoader.getItem(itemId);
+            if (typeof data === "object" && "then" in data) {
+                throw throwError(promiseErrorMessage);
+            }
+            return data;
+        },
+        retrieveChildrenIds: ({ tree }, itemId) => {
+            const data = tree.getConfig().dataLoader.getChildren(itemId);
+            if (typeof data === "object" && "then" in data) {
+                throw throwError(promiseErrorMessage);
+            }
+            return data;
+        },
     },
     itemInstance: {
         isLoading: () => false,

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

@@ -1,12 +1,12 @@
-export type SyncTreeDataLoader<T> = {
-    getItem: (itemId: string) => T;
-    getChildren: (itemId: string) => string[];
-};
+export interface TreeDataLoader<T> {
+    getItem: (itemId: string) => T | Promise<T>;
+    getChildren: (itemId: string) => string[] | Promise<string[]>;
+}
 export type SyncDataLoaderFeatureDef<T> = {
     state: {};
     config: {
         rootItemId: string;
-        dataLoader?: SyncTreeDataLoader<T>;
+        dataLoader: TreeDataLoader<T>;
     };
     treeInstance: {
         retrieveItemData: (itemId: string) => T;

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

@@ -21,7 +21,7 @@ export const treeFeature = {
             const { rootItemId } = tree.getConfig();
             const { expandedItems } = tree.getState();
             const flatItems = [];
-            const expandedItemsSet = new Set(expandedItems);
+            const expandedItemsSet = new Set(expandedItems); // TODO support setting state expandedItems as set instead of array
             const recursiveAdd = (itemId, parentId, level, setSize, posInSet) => {
                 var _a;
                 flatItems.push({
@@ -33,7 +33,6 @@ export const treeFeature = {
                     posInSet,
                 });
                 if (expandedItemsSet.has(itemId)) {
-                    // TODO THIS MADE A HUGE DIFFERENCE!
                     const children = (_a = tree.retrieveChildrenIds(itemId)) !== null && _a !== void 0 ? _a : [];
                     let i = 0;
                     for (const childId of children) {
@@ -79,7 +78,7 @@ export const treeFeature = {
             }));
         },
         // TODO add label parameter
-        getContainerProps: ({ prev, tree }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { role: "tree", "aria-label": "", ref: tree.registerElement })),
+        getContainerProps: ({ prev, tree }, treeLabel) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { role: "tree", "aria-label": treeLabel !== null && treeLabel !== void 0 ? treeLabel : "", ref: tree.registerElement })),
         // relevant for hotkeys of this feature
         isSearchOpen: () => false,
     },
@@ -115,7 +114,7 @@ export const treeFeature = {
             if (!item.isFolder()) {
                 return;
             }
-            if ((_a = tree.getState().loadingItems) === null || _a === void 0 ? void 0 : _a.includes(itemId)) {
+            if ((_a = tree.getState().loadingItemChildrens) === null || _a === void 0 ? void 0 : _a.includes(itemId)) {
                 return;
             }
             tree.applySubStateUpdate("expandedItems", (expandedItems) => [
@@ -154,9 +153,7 @@ export const treeFeature = {
             ? tree.getItemInstance(item.getItemMeta().parentId)
             : undefined,
         getIndexInParent: ({ item }) => item.getItemMeta().posInSet,
-        getChildren: ({ tree, item }) => tree
-            .retrieveChildrenIds(item.getItemMeta().itemId)
-            .map((id) => tree.getItemInstance(id)),
+        getChildren: ({ tree, itemId }) => tree.retrieveChildrenIds(itemId).map((id) => tree.getItemInstance(id)),
         getTree: ({ tree }) => tree,
         getItemAbove: ({ tree, item }) => tree.getItems()[item.getItemMeta().index - 1],
         getItemBelow: ({ tree, item }) => tree.getItems()[item.getItemMeta().index + 1],

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

@@ -1,16 +1,16 @@
 import { ItemInstance, SetStateFn, TreeInstance } from "../../types/core";
-export type ItemMeta = {
+export interface ItemMeta {
     itemId: string;
     parentId: string;
     level: number;
     index: number;
     setSize: number;
     posInSet: number;
-};
-export type TreeItemDataRef = {
+}
+export interface TreeItemDataRef {
     memoizedValues: Record<string, any>;
     memoizedDeps: Record<string, any[] | undefined>;
-};
+}
 export type TreeFeatureDef<T> = {
     state: {
         expandedItems: string[];
@@ -31,7 +31,9 @@ export type TreeFeatureDef<T> = {
         focusNextItem: () => void;
         focusPreviousItem: () => void;
         updateDomFocus: () => void;
-        getContainerProps: () => Record<string, any>;
+        /** Pass to the container rendering the tree children. The `treeLabel` parameter
+         * will be passed as `aria-label` parameter, and is recommended to be set. */
+        getContainerProps: (treeLabel?: string) => Record<string, any>;
     };
     itemInstance: {
         getId: () => string;

package/lib/esm/index.d.ts

@@ -3,6 +3,7 @@ export * from "./core/create-tree";
 export * from "./features/tree/types";
 export { MainFeatureDef, InstanceBuilder } from "./features/main/types";
 export * from "./features/drag-and-drop/types";
+export * from "./features/keyboard-drag-and-drop/types";
 export * from "./features/selection/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
@@ -16,6 +17,7 @@ export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";
 export * from "./features/drag-and-drop/feature";
+export * from "./features/keyboard-drag-and-drop/feature";
 export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";

package/lib/esm/index.js

@@ -2,6 +2,7 @@ export * from "./types/core";
 export * from "./core/create-tree";
 export * from "./features/tree/types";
 export * from "./features/drag-and-drop/types";
+export * from "./features/keyboard-drag-and-drop/types";
 export * from "./features/selection/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
@@ -15,6 +16,7 @@ export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";
 export * from "./features/drag-and-drop/feature";
+export * from "./features/keyboard-drag-and-drop/feature";
 export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";

package/lib/esm/mddocs-entry.d.ts

@@ -9,6 +9,7 @@ import { SelectionFeatureDef } from "./features/selection/types";
 import { SyncDataLoaderFeatureDef } from "./features/sync-data-loader/types";
 import { TreeFeatureDef } from "./features/tree/types";
 import { PropMemoizationFeatureDef } from "./features/prop-memoization/types";
+import { KeyboardDragAndDropFeatureDef } from "./features/keyboard-drag-and-drop/types";
 export * from ".";
 /** @interface */
 export type AsyncDataLoaderFeatureConfig<T> = AsyncDataLoaderFeatureDef<T>["config"];
@@ -29,6 +30,15 @@ export type DragAndDropFeatureTreeInstance<T> = DragAndDropFeatureDef<T>["treeIn
 export type DragAndDropFeatureItemInstance<T> = DragAndDropFeatureDef<T>["itemInstance"];
 export type DragAndDropFeatureHotkeys<T> = DragAndDropFeatureDef<T>["hotkeys"];
 /** @interface */
+export type KeyboardDragAndDropFeatureConfig<T> = KeyboardDragAndDropFeatureDef<T>["config"];
+/** @interface */
+export type KeyboardDragAndDropFeatureState<T> = KeyboardDragAndDropFeatureDef<T>["state"];
+/** @interface */
+export type KeyboardDragAndDropFeatureTreeInstance<T> = KeyboardDragAndDropFeatureDef<T>["treeInstance"];
+/** @interface */
+export type KeyboardDragAndDropFeatureItemInstance<T> = KeyboardDragAndDropFeatureDef<T>["itemInstance"];
+export type KeyboardDragAndDropFeatureHotkeys<T> = KeyboardDragAndDropFeatureDef<T>["hotkeys"];
+/** @interface */
 export type ExpandAllFeatureConfig = ExpandAllFeatureDef["config"];
 /** @interface */
 export type ExpandAllFeatureState = ExpandAllFeatureDef["state"];

package/lib/esm/test-utils/test-tree-do.d.ts

@@ -17,7 +17,7 @@ export declare class TestTreeDo<T> {
     dragOverNotAllowed(itemId: string, event?: DragEvent): DragEvent<Element>;
     dragLeave(itemId: string): void;
     dragEnd(itemId: string, event?: DragEvent): DragEvent<Element>;
-    drop(itemId: string, event?: DragEvent): DragEvent<Element>;
-    dragOverAndDrop(itemId: string, event?: DragEvent): DragEvent<Element>;
+    drop(itemId: string, event?: DragEvent): Promise<DragEvent<Element>>;
+    dragOverAndDrop(itemId: string, event?: DragEvent): Promise<DragEvent<Element>>;
     private consistentCalls;
 }

package/lib/esm/test-utils/test-tree-do.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { expect, vi } from "vitest";
 import { TestTree } from "./test-tree";
 export class TestTreeDo {
@@ -76,14 +85,18 @@ export class TestTreeDo {
         return e;
     }
     drop(itemId, event) {
-        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
-        this.itemProps(itemId).onDrop(e);
-        return e;
+        return __awaiter(this, void 0, void 0, function* () {
+            const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+            yield this.itemProps(itemId).onDrop(e);
+            return e;
+        });
     }
     dragOverAndDrop(itemId, event) {
-        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
-        this.dragOver(itemId, e);
-        return this.drop(itemId, e);
+        return __awaiter(this, void 0, void 0, function* () {
+            const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+            this.dragOver(itemId, e);
+            return this.drop(itemId, e);
+        });
     }
     consistentCalls(fn) {
         if (!vi.isMockFunction(fn)) {

package/lib/esm/test-utils/test-tree-expect.d.ts

@@ -1,15 +1,17 @@
 import { DragEvent } from "react";
 import { TestTree } from "./test-tree";
-import { DropTarget } from "../features/drag-and-drop/types";
+import { DragTarget } from "../features/drag-and-drop/types";
+import { TreeState } from "../types/core";
 export declare class TestTreeExpect<T> {
     private tree;
-    protected itemInstance(itemId: string): import("..").ItemInstance<T>;
+    protected itemInstance(itemId: string): import("../types/core").ItemInstance<T>;
     protected itemProps(itemId: string): Record<string, any>;
     constructor(tree: TestTree<T>);
     foldersExpanded(...itemIds: string[]): void;
     foldersCollapsed(...itemIds: string[]): void;
     hasChildren(itemId: string, children: string[]): void;
-    dropped(draggedItems: string[], target: DropTarget<any>): void;
+    substate<K extends keyof TreeState<T>>(key: K, value: TreeState<T>[K]): void;
+    dropped(draggedItems: string[], target: DragTarget<any>): void;
     dragOverNotAllowed(itemId: string, event?: DragEvent): DragEvent<Element>;
     defaultDragLineProps(indent?: number): void;
 }

package/lib/esm/test-utils/test-tree-expect.js

@@ -26,6 +26,9 @@ export class TestTreeExpect {
         const itemChildren = item.getChildren().map((child) => child.getId());
         expect(itemChildren).toEqual(children);
     }
+    substate(key, value) {
+        expect(this.tree.instance.getState()[key]).toEqual(value);
+    }
     dropped(draggedItems, target) {
         expect(this.tree.instance.getConfig().onDrop).toBeCalledWith(draggedItems.map((id) => this.tree.item(id)), target);
     }

package/lib/esm/test-utils/test-tree.d.ts

@@ -8,6 +8,7 @@ export declare class TestTree<T = string> {
     readonly expect: TestTreeExpect<T>;
     private treeInstance;
     private static asyncLoaderResolvers;
+    private asyncDataLoaderImp;
     suits: {
         sync: () => {
             tree: TestTree<T>;
@@ -41,7 +42,7 @@ export declare class TestTree<T = string> {
     reset(): void;
     debug(): void;
     setElementBoundingBox(itemId: string, bb?: Partial<DOMRect>): void;
-    static dragEvent(pageX?: number, pageY?: number): DragEvent;
+    static dragEvent(clientX?: number, clientY?: number): DragEvent;
     createTopDragEvent(indent?: number): DragEvent<Element>;
     createBottomDragEvent(indent?: number): DragEvent<Element>;
 }

package/lib/esm/test-utils/test-tree.js

@@ -39,13 +39,31 @@ export class TestTree {
         this.do = new TestTreeDo(this);
         this.expect = new TestTreeExpect(this);
         this.treeInstance = null;
+        this.asyncDataLoaderImp = {
+            getItem: (id) => __awaiter(this, void 0, void 0, function* () {
+                yield new Promise((r) => {
+                    r.debugName = `Loading getItem ${id}`;
+                    TestTree.asyncLoaderResolvers.push(r);
+                });
+                return id;
+            }),
+            getChildren: (id) => __awaiter(this, void 0, void 0, function* () {
+                yield new Promise((r) => {
+                    r.debugName = `Loading getChildren ${id}`;
+                    TestTree.asyncLoaderResolvers.push(r);
+                });
+                return [`${id}1`, `${id}2`, `${id}3`, `${id}4`];
+            }),
+        };
         this.suits = {
             sync: () => ({
                 tree: this.withFeatures(syncDataLoaderFeature),
                 title: "Synchronous Data Loader",
             }),
             async: () => ({
-                tree: this.withFeatures(asyncDataLoaderFeature),
+                tree: this.withFeatures(asyncDataLoaderFeature).with({
+                    dataLoader: this.asyncDataLoaderImp,
+                }),
                 title: "Asynchronous Data Loader",
             }),
             proxifiedSync: () => ({
@@ -65,12 +83,12 @@ export class TestTree {
     static resolveAsyncLoaders() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
-            while (TestTree.asyncLoaderResolvers.length) {
+            do {
                 (_a = TestTree.asyncLoaderResolvers.shift()) === null || _a === void 0 ? void 0 : _a();
                 yield new Promise((r) => {
                     setTimeout(r);
                 });
-            }
+            } while (TestTree.asyncLoaderResolvers.length);
         });
     }
     resolveAsyncVisibleItems() {
@@ -85,21 +103,6 @@ export class TestTree {
         return new TestTree(Object.assign({ rootItemId: "x", createLoadingItemData: () => "loading", dataLoader: {
                 getItem: (id) => id,
                 getChildren: (id) => [`${id}1`, `${id}2`, `${id}3`, `${id}4`],
-            }, asyncDataLoader: {
-                getItem: (id) => __awaiter(this, void 0, void 0, function* () {
-                    yield new Promise((r) => {
-                        r.debugName = `Loading getItem ${id}`;
-                        TestTree.asyncLoaderResolvers.push(r);
-                    });
-                    return id;
-                }),
-                getChildren: (id) => __awaiter(this, void 0, void 0, function* () {
-                    yield new Promise((r) => {
-                        r.debugName = `Loading getChildren ${id}`;
-                        TestTree.asyncLoaderResolvers.push(r);
-                    });
-                    return [`${id}1`, `${id}2`, `${id}3`, `${id}4`];
-                }),
             }, getItemName: (item) => item.getItemData(), indent: 20, isItemFolder: (item) => item.getItemMeta().level < 2, initialState: {
                 expandedItems: ["x1", "x11"],
             }, features: [] }, config));
@@ -176,7 +179,7 @@ export class TestTree {
             getBoundingClientRect: () => bb,
         });
     }
-    static dragEvent(pageX = 1000, pageY = 0) {
+    static dragEvent(clientX = 1000, clientY = 0) {
         return {
             preventDefault: vi.fn(),
             stopPropagation: vi.fn(),
@@ -185,8 +188,8 @@ export class TestTree {
                 getData: vi.fn(),
                 dropEffect: "unchaged-from-test",
             },
-            pageX,
-            pageY,
+            clientX,
+            clientY,
         };
     }
     createTopDragEvent(indent = 0) {

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

@@ -9,6 +9,7 @@ import { SearchFeatureDef } from "../features/search/types";
 import { RenamingFeatureDef } from "../features/renaming/types";
 import { ExpandAllFeatureDef } from "../features/expand-all/types";
 import { PropMemoizationFeatureDef } from "../features/prop-memoization/types";
+import { KeyboardDragAndDropFeatureDef } from "../features/keyboard-drag-and-drop/types";
 export type Updater<T> = T | ((old: T) => T);
 export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
 export type FeatureDef = {
@@ -33,7 +34,7 @@ type MergedFeatures<F extends FeatureDef> = {
     itemInstance: UnionToIntersection<F["itemInstance"]>;
     hotkeys: F["hotkeys"];
 };
-export type RegisteredFeatures<T> = MainFeatureDef<T> | TreeFeatureDef<T> | SelectionFeatureDef<T> | DragAndDropFeatureDef<T> | HotkeysCoreFeatureDef<T> | SyncDataLoaderFeatureDef<T> | AsyncDataLoaderFeatureDef<T> | SearchFeatureDef<T> | RenamingFeatureDef<T> | ExpandAllFeatureDef | PropMemoizationFeatureDef;
+export type RegisteredFeatures<T> = MainFeatureDef<T> | TreeFeatureDef<T> | SelectionFeatureDef<T> | DragAndDropFeatureDef<T> | KeyboardDragAndDropFeatureDef<T> | HotkeysCoreFeatureDef<T> | SyncDataLoaderFeatureDef<T> | AsyncDataLoaderFeatureDef<T> | SearchFeatureDef<T> | RenamingFeatureDef<T> | ExpandAllFeatureDef | PropMemoizationFeatureDef;
 type TreeStateType<T> = MergedFeatures<RegisteredFeatures<T>>["state"];
 export interface TreeState<T> extends TreeStateType<T> {
 }

package/lib/esm/utilities/create-on-drop-handler.d.ts

@@ -1,3 +1,3 @@
 import { ItemInstance } from "../types/core";
-import { DropTarget } from "../features/drag-and-drop/types";
-export declare const createOnDropHandler: <T>(onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void) => (items: ItemInstance<T>[], target: DropTarget<T>) => void;
+import { DragTarget } from "../features/drag-and-drop/types";
+export declare const createOnDropHandler: <T>(onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void) => (items: ItemInstance<T>[], target: DragTarget<T>) => Promise<void>;

package/lib/esm/utilities/create-on-drop-handler.js

@@ -1,7 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { removeItemsFromParents } from "./remove-items-from-parents";
 import { insertItemsAtTarget } from "./insert-items-at-target";
-export const createOnDropHandler = (onChangeChildren) => (items, target) => {
+export const createOnDropHandler = (onChangeChildren) => (items, target) => __awaiter(void 0, void 0, void 0, function* () {
     const itemIds = items.map((item) => item.getId());
-    removeItemsFromParents(items, onChangeChildren);
-    insertItemsAtTarget(itemIds, target, onChangeChildren);
-};
+    yield removeItemsFromParents(items, onChangeChildren);
+    yield insertItemsAtTarget(itemIds, target, onChangeChildren);
+});

package/lib/esm/utilities/insert-items-at-target.d.ts

@@ -1,3 +1,3 @@
 import { ItemInstance } from "../types/core";
-import { DropTarget } from "../features/drag-and-drop/types";
-export declare const insertItemsAtTarget: <T>(itemIds: string[], target: DropTarget<T>, onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void) => void;
+import { DragTarget } from "../features/drag-and-drop/types";
+export declare const insertItemsAtTarget: <T>(itemIds: string[], target: DragTarget<T>, onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => Promise<void> | void) => Promise<void>;

package/lib/esm/utilities/insert-items-at-target.js

@@ -1,11 +1,21 @@
-export const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export const insertItemsAtTarget = (itemIds, target, onChangeChildren) => __awaiter(void 0, void 0, void 0, function* () {
+    yield target.item.getTree().waitForItemChildrenLoaded(target.item.getId());
+    const oldChildrenIds = target.item
+        .getTree()
+        .retrieveChildrenIds(target.item.getId());
     // add moved items to new common parent, if dropped onto parent
-    if (target.childIndex === null) {
-        const newChildren = [
-            ...target.item.getChildren().map((item) => item.getId()),
-            ...itemIds,
-        ];
-        onChangeChildren(target.item, newChildren);
+    if (!("childIndex" in target)) {
+        const newChildren = [...oldChildrenIds, ...itemIds];
+        yield onChangeChildren(target.item, newChildren);
         if (target.item && "updateCachedChildrenIds" in target.item) {
             target.item.updateCachedChildrenIds(newChildren);
         }
@@ -13,15 +23,14 @@ export const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
         return;
     }
     // add moved items to new common parent, if dropped between siblings
-    const oldChildren = target.item.getChildren();
     const newChildren = [
-        ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+        ...oldChildrenIds.slice(0, target.insertionIndex),
         ...itemIds,
-        ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+        ...oldChildrenIds.slice(target.insertionIndex),
     ];
-    onChangeChildren(target.item, newChildren);
+    yield onChangeChildren(target.item, newChildren);
     if (target.item && "updateCachedChildrenIds" in target.item) {
         target.item.updateCachedChildrenIds(newChildren);
     }
     target.item.getTree().rebuildTree();
-};
+});

package/lib/esm/utilities/remove-items-from-parents.d.ts

@@ -1,2 +1,2 @@
 import { ItemInstance } from "../types/core";
-export declare const removeItemsFromParents: <T>(movedItems: ItemInstance<T>[], onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void) => void;
+export declare const removeItemsFromParents: <T>(movedItems: ItemInstance<T>[], onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void | Promise<void>) => Promise<void>;

package/lib/esm/utilities/remove-items-from-parents.js

@@ -1,4 +1,13 @@
-export const removeItemsFromParents = (movedItems, onChangeChildren) => {
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export const removeItemsFromParents = (movedItems, onChangeChildren) => __awaiter(void 0, void 0, void 0, function* () {
     const movedItemsIds = movedItems.map((item) => item.getId());
     const uniqueParents = [
         ...new Set(movedItems.map((item) => item.getParent())),
@@ -9,11 +18,11 @@ export const removeItemsFromParents = (movedItems, onChangeChildren) => {
             const newChildren = siblings
                 .filter((sibling) => !movedItemsIds.includes(sibling.getId()))
                 .map((i) => i.getId());
-            onChangeChildren(parent, newChildren);
+            yield onChangeChildren(parent, newChildren);
             if (parent && "updateCachedChildrenIds" in parent) {
                 parent === null || parent === void 0 ? void 0 : parent.updateCachedChildrenIds(newChildren);
             }
         }
     }
     movedItems[0].getTree().rebuildTree();
-};
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -21,7 +21,7 @@
   "license": "MIT",
   "devDependencies": {
     "jsdom": "^26.0.0",
-    "typescript": "^5.7.3",
+    "typescript": "^5.7.2",
     "vitest": "^3.0.3"
   }
 }

package/src/core/core.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import { TestTree } from "../test-utils/test-tree";
+import { buildStaticInstance } from "./build-static-instance";
 
 declare module "../types/core" {
   export interface TreeInstance<T> {
@@ -17,6 +18,36 @@ const factory = TestTree.default({});
 
 describe("core-feature/prop-memoization", () => {
   factory.forSuits((tree) => {
+    describe("rebuilds item instance", () => {
+      it("rebuilds when explicitly invoked", async () => {
+        const instanceBuilder = vi.fn().mockImplementation(buildStaticInstance);
+        const testTree = await tree
+          .with({ instanceBuilder })
+          .createTestCaseTree();
+        expect(instanceBuilder).toBeCalled();
+        instanceBuilder.mockClear();
+        testTree.instance.rebuildTree();
+        // if tree structure doesnt mutate, only root tree item is rebuilt actually
+        expect(instanceBuilder).toBeCalled();
+      });
+
+      it("rebuilds when config changes with new expanded items", async () => {
+        const instanceBuilder = vi.fn().mockImplementation(buildStaticInstance);
+        const testTree = await tree
+          .with({ instanceBuilder })
+          .createTestCaseTree();
+        expect(instanceBuilder).toBeCalled();
+        instanceBuilder.mockClear();
+        testTree.instance.setConfig((oldCfg) => ({
+          ...oldCfg,
+          state: {
+            expandedItems: ["x4"],
+          },
+        }));
+        expect(instanceBuilder).toBeCalled();
+      });
+    });
+
     describe("calls prev in correct order", () => {
       it("tree instance with overwrite marks, order 1", async () => {
         const testTree = await tree

package/src/core/create-tree.ts

@@ -137,6 +137,7 @@ export const createTree = <T>(
         // Not necessary, since I think the subupdate below keeps the state fresh anyways?
         // state = typeof updater === "function" ? updater(state) : updater;
         config.setState?.(state); // TODO this cant be right... This doesnt allow external state updates
+        // TODO this is never used, remove
       },
       applySubStateUpdate: <K extends keyof TreeState<any>>(
         {},
@@ -157,10 +158,20 @@ export const createTree = <T>(
       },
       getConfig: () => config,
       setConfig: (_, updater) => {
-        config = typeof updater === "function" ? updater(config) : updater;
-
-        if (config.state) {
-          state = { ...state, ...config.state };
+        const newConfig =
+          typeof updater === "function" ? updater(config) : updater;
+        const hasChangedExpandedItems =
+          newConfig.state?.expandedItems &&
+          newConfig.state?.expandedItems !== state.expandedItems;
+        config = newConfig;
+
+        if (newConfig.state) {
+          state = { ...state, ...newConfig.state };
+        }
+        if (hasChangedExpandedItems) {
+          // if expanded items where changed from the outside
+          rebuildItemMeta();
+          config.setState?.(state);
         }
       },
       getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
@@ -186,7 +197,6 @@ export const createTree = <T>(
       getHotkeyPresets: () => hotkeyPresets,
     },
     itemInstance: {
-      // TODO just change to a getRef method that memoizes, maybe as part of getProps
       registerElement: ({ itemId, item }, element) => {
         if (itemElementsMap[itemId] === element) {
           return;