@headless-tree/core 0.0.14 → 1.0.0

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

@@ -0,0 +1,27 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+export interface KDndDataRef {
+    kDndDataTransfer: DataTransfer | undefined;
+}
+export declare enum AssistiveDndState {
+    None = 0,
+    Started = 1,
+    Dragging = 2,
+    Completed = 3,
+    Aborted = 4
+}
+export type KeyboardDragAndDropFeatureDef<T> = {
+    state: {
+        assistiveDndState?: AssistiveDndState | null;
+    };
+    config: {
+        setAssistiveDndState?: SetStateFn<AssistiveDndState | undefined | null>;
+        onStartKeyboardDrag?: (items: ItemInstance<T>[]) => void;
+    };
+    treeInstance: {
+        startKeyboardDrag: (items: ItemInstance<T>[]) => void;
+        startKeyboardDragOnForeignObject: (dataTransfer: DataTransfer) => void;
+        stopKeyboardDrag: () => void;
+    };
+    itemInstance: {};
+    hotkeys: "startDrag" | "cancelDrag" | "completeDrag" | "dragUp" | "dragDown";
+};

package/lib/esm/features/keyboard-drag-and-drop/types.js

@@ -0,0 +1,8 @@
+export var AssistiveDndState;
+(function (AssistiveDndState) {
+    AssistiveDndState[AssistiveDndState["None"] = 0] = "None";
+    AssistiveDndState[AssistiveDndState["Started"] = 1] = "Started";
+    AssistiveDndState[AssistiveDndState["Dragging"] = 2] = "Dragging";
+    AssistiveDndState[AssistiveDndState["Completed"] = 3] = "Completed";
+    AssistiveDndState[AssistiveDndState["Aborted"] = 4] = "Aborted";
+})(AssistiveDndState || (AssistiveDndState = {}));

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

@@ -1,13 +1,11 @@
-const memoize = (props, dataRef) => {
-    var _a;
-    (_a = dataRef.memoizedProps) !== null && _a !== void 0 ? _a : (dataRef.memoizedProps = {});
+const memoize = (props, memoizedProps) => {
     for (const key in props) {
         if (typeof props[key] === "function") {
-            if (key in dataRef.memoizedProps) {
-                props[key] = dataRef.memoizedProps[key];
+            if (memoizedProps && key in memoizedProps) {
+                props[key] = memoizedProps[key];
             }
             else {
-                dataRef.memoizedProps[key] = props[key];
+                memoizedProps[key] = props[key];
             }
         }
     }
@@ -27,19 +25,43 @@ export const propMemoizationFeature = {
         "selection",
     ],
     treeInstance: {
-        getContainerProps: ({ tree, prev }) => {
-            var _a;
+        getContainerProps: ({ tree, prev }, treeLabel) => {
+            var _a, _b, _c;
+            var _d, _e;
+            const dataRef = tree.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev(treeLabel)) !== null && _a !== void 0 ? _a : {};
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).tree) !== null && _c !== void 0 ? _c : (_e.tree = {});
+            return memoize(props, dataRef.current.memo.tree);
+        },
+        getSearchInputElementProps: ({ tree, prev }) => {
+            var _a, _b, _c;
+            var _d, _e;
             const dataRef = tree.getDataRef();
             const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
-            return memoize(props, dataRef.current);
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).search) !== null && _c !== void 0 ? _c : (_e.search = {});
+            return memoize(props, dataRef.current.memo.search);
         },
     },
     itemInstance: {
         getProps: ({ item, prev }) => {
-            var _a;
+            var _a, _b, _c;
+            var _d, _e;
+            const dataRef = item.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).item) !== null && _c !== void 0 ? _c : (_e.item = {});
+            return memoize(props, dataRef.current.memo.item);
+        },
+        getRenameInputProps: ({ item, prev }) => {
+            var _a, _b, _c;
+            var _d, _e;
             const dataRef = item.getDataRef();
             const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
-            return memoize(props, dataRef.current);
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).rename) !== null && _c !== void 0 ? _c : (_e.rename = {});
+            return memoize(props, dataRef.current.memo.rename);
         },
     },
 };

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

@@ -1,6 +1,11 @@
-export type PropMemoizationDataRef = {
-    memoizedProps?: Record<string, any>;
-};
+export interface PropMemoizationDataRef {
+    memo?: {
+        tree?: Record<string, any>;
+        item?: Record<string, any>;
+        search?: Record<string, any>;
+        rename?: 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) {
@@ -48,7 +47,6 @@ export const treeFeature = {
             }
             return flatItems;
         },
-        // TODO memo
         getFocusedItem: ({ tree }) => {
             var _a, _b;
             return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
@@ -78,8 +76,7 @@ export const treeFeature = {
                 focusedElement.focus();
             }));
         },
-        // 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 +112,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 +151,7 @@ export const treeFeature = {
             ? tree.getItemInstance(item.getItemMeta().parentId)
             : undefined,
         getIndexInParent: ({ item }) => item.getItemMeta().posInSet,
-        getChildren: ({ tree, item }) => tree
-            .retrieveChildrenIds(item.getItemMeta().itemId)
-            .map((id) => tree.getItemInstance(id)),
+        getChildren: ({ tree, itemId }) => tree.retrieveChildrenIds(itemId).map((id) => tree.getItemInstance(id)),
         getTree: ({ tree }) => tree,
         getItemAbove: ({ tree, item }) => tree.getItems()[item.getItemMeta().index - 1],
         getItemBelow: ({ tree, item }) => tree.getItems()[item.getItemMeta().index + 1],

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

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

package/lib/esm/index.d.ts

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

package/lib/esm/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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