@headless-tree/core 0.0.14 → 0.0.15

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

@@ -1,17 +1,43 @@
 "use strict";
+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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.syncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
+const errors_1 = require("../../utilities/errors");
+const promiseErrorMessage = "sync dataLoader returned promise";
 exports.syncDataLoaderFeature = {
     key: "sync-data-loader",
-    getInitialState: (initialState) => (Object.assign({ loadingItems: [] }, initialState)),
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItems: (0, utils_1.makeStateUpdater)("loadingItems", tree) }, defaultConfig)),
+    getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setLoadingItemData: (0, utils_1.makeStateUpdater)("loadingItemData", tree), setLoadingItemChildrens: (0, utils_1.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 (0, errors_1.throwError)(promiseErrorMessage);
+            }
+            return data;
+        },
+        retrieveChildrenIds: ({ tree }, itemId) => {
+            const data = tree.getConfig().dataLoader.getChildren(itemId);
+            if (typeof data === "object" && "then" in data) {
+                throw (0, errors_1.throwError)(promiseErrorMessage);
+            }
+            return data;
+        },
     },
     itemInstance: {
         isLoading: () => false,

package/lib/cjs/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/cjs/features/tree/feature.js

@@ -24,7 +24,7 @@ exports.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({
@@ -36,7 +36,6 @@ exports.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) {
@@ -82,7 +81,7 @@ exports.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,
     },
@@ -118,7 +117,7 @@ exports.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) => [
@@ -157,9 +156,7 @@ exports.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/cjs/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/cjs/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/cjs/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./types/core"), exports);
 __exportStar(require("./core/create-tree"), exports);
 __exportStar(require("./features/tree/types"), exports);
 __exportStar(require("./features/drag-and-drop/types"), exports);
+__exportStar(require("./features/keyboard-drag-and-drop/types"), exports);
 __exportStar(require("./features/selection/types"), exports);
 __exportStar(require("./features/async-data-loader/types"), exports);
 __exportStar(require("./features/sync-data-loader/types"), exports);
@@ -31,6 +32,7 @@ __exportStar(require("./features/hotkeys-core/feature"), exports);
 __exportStar(require("./features/async-data-loader/feature"), exports);
 __exportStar(require("./features/sync-data-loader/feature"), exports);
 __exportStar(require("./features/drag-and-drop/feature"), exports);
+__exportStar(require("./features/keyboard-drag-and-drop/feature"), exports);
 __exportStar(require("./features/search/feature"), exports);
 __exportStar(require("./features/renaming/feature"), exports);
 __exportStar(require("./features/expand-all/feature"), exports);

package/lib/cjs/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/cjs/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/cjs/test-utils/test-tree-do.js

@@ -1,4 +1,13 @@
 "use strict";
+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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TestTreeDo = void 0;
 const vitest_1 = require("vitest");
@@ -79,14 +88,18 @@ class TestTreeDo {
         return e;
     }
     drop(itemId, event) {
-        const e = event !== null && event !== void 0 ? event : test_tree_1.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 : test_tree_1.TestTree.dragEvent();
+            yield this.itemProps(itemId).onDrop(e);
+            return e;
+        });
     }
     dragOverAndDrop(itemId, event) {
-        const e = event !== null && event !== void 0 ? event : test_tree_1.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 : test_tree_1.TestTree.dragEvent();
+            this.dragOver(itemId, e);
+            return this.drop(itemId, e);
+        });
     }
     consistentCalls(fn) {
         if (!vitest_1.vi.isMockFunction(fn)) {

package/lib/cjs/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/cjs/test-utils/test-tree-expect.js

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

package/lib/cjs/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/cjs/test-utils/test-tree.js

@@ -42,13 +42,31 @@ class TestTree {
         this.do = new test_tree_do_1.TestTreeDo(this);
         this.expect = new test_tree_expect_1.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(feature_1.syncDataLoaderFeature),
                 title: "Synchronous Data Loader",
             }),
             async: () => ({
-                tree: this.withFeatures(feature_2.asyncDataLoaderFeature),
+                tree: this.withFeatures(feature_2.asyncDataLoaderFeature).with({
+                    dataLoader: this.asyncDataLoaderImp,
+                }),
                 title: "Asynchronous Data Loader",
             }),
             proxifiedSync: () => ({
@@ -68,12 +86,12 @@ 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() {
@@ -88,21 +106,6 @@ 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));
@@ -179,7 +182,7 @@ class TestTree {
             getBoundingClientRect: () => bb,
         });
     }
-    static dragEvent(pageX = 1000, pageY = 0) {
+    static dragEvent(clientX = 1000, clientY = 0) {
         return {
             preventDefault: vitest_1.vi.fn(),
             stopPropagation: vitest_1.vi.fn(),
@@ -188,8 +191,8 @@ class TestTree {
                 getData: vitest_1.vi.fn(),
                 dropEffect: "unchaged-from-test",
             },
-            pageX,
-            pageY,
+            clientX,
+            clientY,
         };
     }
     createTopDragEvent(indent = 0) {

package/lib/cjs/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/cjs/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/cjs/utilities/create-on-drop-handler.js

@@ -1,11 +1,20 @@
 "use strict";
+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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createOnDropHandler = void 0;
 const remove_items_from_parents_1 = require("./remove-items-from-parents");
 const insert_items_at_target_1 = require("./insert-items-at-target");
-const createOnDropHandler = (onChangeChildren) => (items, target) => {
+const createOnDropHandler = (onChangeChildren) => (items, target) => __awaiter(void 0, void 0, void 0, function* () {
     const itemIds = items.map((item) => item.getId());
-    (0, remove_items_from_parents_1.removeItemsFromParents)(items, onChangeChildren);
-    (0, insert_items_at_target_1.insertItemsAtTarget)(itemIds, target, onChangeChildren);
-};
+    yield (0, remove_items_from_parents_1.removeItemsFromParents)(items, onChangeChildren);
+    yield (0, insert_items_at_target_1.insertItemsAtTarget)(itemIds, target, onChangeChildren);
+});
 exports.createOnDropHandler = createOnDropHandler;

package/lib/cjs/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/cjs/utilities/insert-items-at-target.js

@@ -1,14 +1,24 @@
 "use strict";
+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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertItemsAtTarget = void 0;
-const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
+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);
         }
@@ -16,16 +26,15 @@ 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();
-};
+});
 exports.insertItemsAtTarget = insertItemsAtTarget;

package/lib/cjs/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/cjs/utilities/remove-items-from-parents.js

@@ -1,7 +1,16 @@
 "use strict";
+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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeItemsFromParents = void 0;
-const removeItemsFromParents = (movedItems, onChangeChildren) => {
+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())),
@@ -12,12 +21,12 @@ 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();
-};
+});
 exports.removeItemsFromParents = removeItemsFromParents;

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

@@ -89,6 +89,7 @@ export const createTree = (initialConfig) => {
                 // Not necessary, since I think the subupdate below keeps the state fresh anyways?
                 // state = typeof updater === "function" ? updater(state) : updater;
                 (_a = config.setState) === null || _a === void 0 ? void 0 : _a.call(config, state); // TODO this cant be right... This doesnt allow external state updates
+                // TODO this is never used, remove
             },
             applySubStateUpdate: ({}, stateName, updater) => {
                 state[stateName] =
@@ -104,9 +105,18 @@ export const createTree = (initialConfig) => {
             },
             getConfig: () => config,
             setConfig: (_, updater) => {
-                config = typeof updater === "function" ? updater(config) : updater;
-                if (config.state) {
-                    state = Object.assign(Object.assign({}, state), config.state);
+                var _a, _b, _c;
+                const newConfig = typeof updater === "function" ? updater(config) : updater;
+                const hasChangedExpandedItems = ((_a = newConfig.state) === null || _a === void 0 ? void 0 : _a.expandedItems) &&
+                    ((_b = newConfig.state) === null || _b === void 0 ? void 0 : _b.expandedItems) !== state.expandedItems;
+                config = newConfig;
+                if (newConfig.state) {
+                    state = Object.assign(Object.assign({}, state), newConfig.state);
+                }
+                if (hasChangedExpandedItems) {
+                    // if expanded items where changed from the outside
+                    rebuildItemMeta();
+                    (_c = config.setState) === null || _c === void 0 ? void 0 : _c.call(config, state);
                 }
             },
             getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
@@ -128,7 +138,6 @@ export const createTree = (initialConfig) => {
             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;