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

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

@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.expandAllFeature = void 0;
-const utils_1 = require("../../utils");
 exports.expandAllFeature = {
     key: "expand-all",
     treeInstance: {
@@ -31,17 +30,41 @@ exports.expandAllFeature = {
                 return;
             }
             item.expand();
-            yield (0, utils_1.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 (0, utils_1.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/cjs/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/cjs/features/hotkeys-core/feature.js

@@ -4,6 +4,8 @@ exports.hotkeysCoreFeature = void 0;
 const specialKeys = {
     Letter: /^[a-z]$/,
     LetterOrNumber: /^[a-z0-9]$/,
+    Plus: /^\+$/,
+    Space: /^ $/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
     const supposedKeys = hotkey.hotkey.split("+");
@@ -23,9 +25,9 @@ exports.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);
@@ -42,6 +44,7 @@ exports.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/cjs/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/cjs/features/prop-memoization/feature.js

@@ -30,10 +30,10 @@ exports.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/cjs/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/cjs/features/renaming/feature.js

@@ -40,11 +40,11 @@ exports.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/cjs/features/search/feature.js

@@ -43,10 +43,12 @@ exports.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: (0, utils_1.memo)(({ tree }) => [
             tree.getSearchValue(),

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

@@ -13,7 +13,6 @@ exports.selectionFeature = {
         setSelectedItems: ({ tree }, selectedItems) => {
             tree.applySubStateUpdate("selectedItems", selectedItems);
         },
-        // TODO memo
         getSelectedItems: ({ tree }) => {
             return tree.getState().selectedItems.map(tree.getItemInstance);
         },
@@ -81,9 +80,10 @@ exports.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/cjs/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/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/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.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/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/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;
+export declare const insertItemsAtTarget: <T>(itemIds: string[], target: DropTarget<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>;