@headless-tree/core 0.0.0-20250224211405 → 0.0.0-20250322153940

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

@@ -7,7 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { poll } from "../../utils";
 export const expandAllFeature = {
     key: "expand-all",
     treeInstance: {
@@ -28,17 +27,41 @@ export const expandAllFeature = {
                 return;
             }
             item.expand();
-            yield poll(() => !tree.getState().loadingItems.includes(item.getId()));
+            yield tree.waitForItemChildrenLoaded(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 tree.waitForItemChildrenLoaded(item.getId());
                 yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
             })));
         }),
         collapseAll: ({ item }) => {
+            if (!item.isExpanded())
+                return;
             for (const child of item.getChildren()) {
                 child === null || child === void 0 ? void 0 : child.collapseAll();
             }
             item.collapse();
         },
     },
+    hotkeys: {
+        expandSelected: {
+            hotkey: "Control+Shift+Plus",
+            handler: (_, tree) => __awaiter(void 0, void 0, void 0, function* () {
+                const cancelToken = { current: false };
+                const cancelHandler = (e) => {
+                    if (e.key === "Escape") {
+                        cancelToken.current = true;
+                    }
+                };
+                document.addEventListener("keydown", cancelHandler);
+                yield Promise.all(tree.getSelectedItems().map((item) => item.expandAll(cancelToken)));
+                document.removeEventListener("keydown", cancelHandler);
+            }),
+        },
+        collapseSelected: {
+            hotkey: "Control+Shift+-",
+            handler: (_, tree) => {
+                tree.getSelectedItems().forEach((item) => item.collapseAll());
+            },
+        },
+    },
 };

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

@@ -1,3 +1,5 @@
+export interface ExpandAllDataRef {
+}
 export type ExpandAllFeatureDef = {
     state: {};
     config: {};
@@ -13,5 +15,5 @@ export type ExpandAllFeatureDef = {
         }) => Promise<void>;
         collapseAll: () => void;
     };
-    hotkeys: never;
+    hotkeys: "expandSelected" | "collapseSelected";
 };

package/lib/esm/features/hotkeys-core/feature.js

@@ -1,6 +1,8 @@
 const specialKeys = {
     Letter: /^[a-z]$/,
     LetterOrNumber: /^[a-z0-9]$/,
+    Plus: /^\+$/,
+    Space: /^ $/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
     const supposedKeys = hotkey.hotkey.split("+");
@@ -20,9 +22,9 @@ export const hotkeysCoreFeature = {
     onTreeMount: (tree, element) => {
         const data = tree.getDataRef();
         const keydown = (e) => {
-            var _a, _b;
-            var _c;
-            (_a = (_c = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_c.pressedKeys = new Set());
+            var _a, _b, _c, _d;
+            var _e;
+            (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
             const newMatch = !data.current.pressedKeys.has(e.key);
             data.current.pressedKeys.add(e.key);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
@@ -39,6 +41,7 @@ export const hotkeysCoreFeature = {
             if (hotkeyConfig.preventDefault)
                 e.preventDefault();
             hotkeyConfig.handler(e, tree);
+            (_d = (_c = tree.getConfig()).onTreeHotkey) === null || _d === void 0 ? void 0 : _d.call(_c, hotkeyName, e);
         };
         const keyup = (e) => {
             var _a;

package/lib/esm/features/hotkeys-core/types.d.ts

@@ -1,4 +1,4 @@
-import { CustomHotkeysConfig, ItemInstance, TreeInstance } from "../../types/core";
+import { CustomHotkeysConfig, TreeInstance } from "../../types/core";
 export interface HotkeyConfig<T> {
     hotkey: string;
     canRepeat?: boolean;
@@ -7,17 +7,16 @@ export interface HotkeyConfig<T> {
     preventDefault?: boolean;
     handler: (e: KeyboardEvent, tree: TreeInstance<T>) => void;
 }
-export type HotkeysCoreDataRef = {
+export interface HotkeysCoreDataRef {
     keydownHandler?: (e: KeyboardEvent) => void;
     keyupHandler?: (e: KeyboardEvent) => void;
     pressedKeys: Set<string>;
-};
+}
 export type HotkeysCoreFeatureDef<T> = {
     state: {};
     config: {
         hotkeys?: CustomHotkeysConfig<T>;
-        onTreeHotkey?: (name: string, element: HTMLElement) => void;
-        onItemHotkey?: (name: string, item: ItemInstance<T>, element: HTMLElement) => void;
+        onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
     };
     treeInstance: {};
     itemInstance: {};

package/lib/esm/features/prop-memoization/feature.js

@@ -27,10 +27,10 @@ export const propMemoizationFeature = {
         "selection",
     ],
     treeInstance: {
-        getContainerProps: ({ tree, prev }) => {
+        getContainerProps: ({ tree, prev }, treeLabel) => {
             var _a;
             const dataRef = tree.getDataRef();
-            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev(treeLabel)) !== null && _a !== void 0 ? _a : {};
             return memoize(props, dataRef.current);
         },
     },

package/lib/esm/features/prop-memoization/types.d.ts

@@ -1,6 +1,6 @@
-export type PropMemoizationDataRef = {
+export interface PropMemoizationDataRef {
     memoizedProps?: Record<string, any>;
-};
+}
 export type PropMemoizationFeatureDef = {
     state: {};
     config: {};

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

@@ -37,11 +37,11 @@ export const renamingFeature = {
             tree.applySubStateUpdate("renamingValue", item.getItemName());
         },
         getRenameInputProps: ({ tree }) => ({
+            ref: (r) => r === null || r === void 0 ? void 0 : r.focus(),
             onBlur: () => tree.abortRenaming(),
             value: tree.getRenamingValue(),
             onChange: (e) => {
                 var _a;
-                // TODO custom type with e.target.value
                 tree.applySubStateUpdate("renamingValue", (_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
             },
         }),

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

@@ -40,10 +40,12 @@ export const searchFeature = {
             }
         },
         getSearchInputElement: ({ tree }) => { var _a; return (_a = tree.getDataRef().current.searchInput) !== null && _a !== void 0 ? _a : null; },
+        // TODO memoize with propMemoizationFeature
         getSearchInputElementProps: ({ tree }) => ({
             value: tree.getSearchValue(),
             onChange: (e) => tree.setSearch(e.target.value),
             onBlur: () => tree.closeSearch(),
+            ref: tree.registerSearchInputElement,
         }),
         getSearchMatchingItems: memo(({ tree }) => [
             tree.getSearchValue(),

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

@@ -1,9 +1,9 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 import { HotkeysCoreDataRef } from "../hotkeys-core/types";
-export type SearchFeatureDataRef<T = any> = HotkeysCoreDataRef & {
+export interface SearchFeatureDataRef<T = any> extends HotkeysCoreDataRef {
     matchingItems: ItemInstance<T>[];
     searchInput: HTMLInputElement | null;
-};
+}
 export type SearchFeatureDef<T> = {
     state: {
         search: string | null;

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

@@ -10,7 +10,6 @@ export const selectionFeature = {
         setSelectedItems: ({ tree }, selectedItems) => {
             tree.applySubStateUpdate("selectedItems", selectedItems);
         },
-        // TODO memo
         getSelectedItems: ({ tree }) => {
             return tree.getState().selectedItems.map(tree.getItemInstance);
         },
@@ -78,9 +77,10 @@ export const selectionFeature = {
         //     tree.setSelectedItems([tree.getFocusedItem().getId()]);
         //   },
         // },
-        toggleSelectItem: {
-            hotkey: "ctrl+space",
-            handler: (e, tree) => {
+        toggleSelectedItem: {
+            hotkey: "Control+Space",
+            preventDefault: true,
+            handler: (_, tree) => {
                 tree.getFocusedItem().toggleSelect();
             },
         },

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

@@ -17,5 +17,5 @@ export type SelectionFeatureDef<T> = {
         isSelected: () => boolean;
         selectUpTo: (ctrl: boolean) => void;
     };
-    hotkeys: "toggleSelectItem" | "selectUpwards" | "selectDownwards" | "selectAll";
+    hotkeys: "toggleSelectedItem" | "selectUpwards" | "selectDownwards" | "selectAll";
 };

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/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.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/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;
+export declare const createOnDropHandler: <T>(onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void) => (items: ItemInstance<T>[], target: DropTarget<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;
+export declare const insertItemsAtTarget: <T>(itemIds: string[], target: DropTarget<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();
-};
+});