@headless-tree/core 0.0.13 → 0.0.15

package/lib/cjs/features/drag-and-drop/utils.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDropTarget = exports.getDragCode = exports.canDrop = void 0;
+exports.getDragTarget = exports.getReparentTarget = exports.getDragCode = exports.getInsertionIndex = exports.getItemDropCategory = exports.canDrop = exports.ItemDropCategory = void 0;
 var ItemDropCategory;
 (function (ItemDropCategory) {
     ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
     ItemDropCategory[ItemDropCategory["ExpandedFolder"] = 1] = "ExpandedFolder";
     ItemDropCategory[ItemDropCategory["LastInGroup"] = 2] = "LastInGroup";
-})(ItemDropCategory || (ItemDropCategory = {}));
+})(ItemDropCategory || (exports.ItemDropCategory = ItemDropCategory = {}));
 var PlacementType;
 (function (PlacementType) {
     PlacementType[PlacementType["ReorderAbove"] = 0] = "ReorderAbove";
@@ -15,7 +15,7 @@ var PlacementType;
     PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
 })(PlacementType || (PlacementType = {}));
 const canDrop = (dataTransfer, target, tree) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
     const config = tree.getConfig();
     if (draggedItems && !((_c = (_b = config.canDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target)) !== null && _c !== void 0 ? _c : true)) {
@@ -28,7 +28,8 @@ const canDrop = (dataTransfer, target, tree) => {
     }
     if (!draggedItems &&
         dataTransfer &&
-        !((_d = config.canDropForeignDragObject) === null || _d === void 0 ? void 0 : _d.call(config, dataTransfer, target))) {
+        config.canDropForeignDragObject &&
+        !config.canDropForeignDragObject(dataTransfer, target)) {
         return false;
     }
     return true;
@@ -39,13 +40,24 @@ const getItemDropCategory = (item) => {
         return ItemDropCategory.ExpandedFolder;
     }
     const parent = item.getParent();
-    if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+    if (parent && item.getIndexInParent() === item.getItemMeta().setSize - 1) {
         return ItemDropCategory.LastInGroup;
     }
     return ItemDropCategory.Item;
 };
+exports.getItemDropCategory = getItemDropCategory;
+const getInsertionIndex = (children, childIndex, draggedItems) => {
+    var _a;
+    const numberOfDragItemsBeforeTarget = (_a = children
+        .slice(0, childIndex)
+        .reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
+        ? ++counter
+        : counter, 0)) !== null && _a !== void 0 ? _a : 0;
+    return childIndex - numberOfDragItemsBeforeTarget;
+};
+exports.getInsertionIndex = getInsertionIndex;
 const getTargetPlacement = (e, item, tree, canMakeChild) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const config = tree.getConfig();
     if (!config.canReorder) {
         return canMakeChild
@@ -53,9 +65,9 @@ const getTargetPlacement = (e, item, tree, canMakeChild) => {
             : { type: PlacementType.ReorderBelow };
     }
     const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    const topPercent = bb ? (e.pageY - bb.top) / bb.height : 0.5;
-    const leftPixels = bb ? e.pageX - bb.left : 0;
-    const targetDropCategory = getItemDropCategory(item);
+    const topPercent = bb ? (e.clientY - bb.top) / bb.height : 0.5;
+    const leftPixels = bb ? e.clientX - bb.left : 0;
+    const targetDropCategory = (0, exports.getItemDropCategory)(item);
     const reorderAreaPercentage = !canMakeChild
         ? 0.5
         : (_b = config.reorderAreaPercentage) !== null && _b !== void 0 ? _b : 0.3;
@@ -74,9 +86,10 @@ const getTargetPlacement = (e, item, tree, canMakeChild) => {
             if (topPercent < 0.5) {
                 return { type: PlacementType.ReorderAbove };
             }
+            const minLevel = (_e = (_d = item.getItemBelow()) === null || _d === void 0 ? void 0 : _d.getItemMeta().level) !== null && _e !== void 0 ? _e : 0;
             return {
                 type: PlacementType.Reparent,
-                reparentLevel: Math.floor(leftPixels / indent),
+                reparentLevel: Math.max(minLevel, Math.floor(leftPixels / indent)),
             };
         }
         // if not at left of item area, treat as if it was a normal item
@@ -105,27 +118,28 @@ const getNthParent = (item, n) => {
     }
     return getNthParent(item.getParent(), n);
 };
-const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
-    var _a, _b, _c;
-    const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
+/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6)  */
+const getReparentTarget = (item, reparentLevel, draggedItems) => {
     const itemMeta = item.getItemMeta();
-    const parent = item.getParent();
-    const itemTarget = {
-        item,
-        childIndex: null,
-        insertionIndex: null,
-        dragLineIndex: null,
-        dragLineLevel: null,
+    const reparentedTarget = getNthParent(item, reparentLevel - 1);
+    const targetItemAbove = getNthParent(item, reparentLevel); // .getItemBelow()!;
+    const targetIndex = targetItemAbove.getIndexInParent() + 1;
+    return {
+        item: reparentedTarget,
+        childIndex: targetIndex,
+        insertionIndex: (0, exports.getInsertionIndex)(reparentedTarget.getChildren(), targetIndex, draggedItems),
+        dragLineIndex: itemMeta.index + 1,
+        dragLineLevel: reparentLevel,
     };
-    const parentTarget = parent
-        ? {
-            item: parent,
-            childIndex: null,
-            insertionIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-        }
-        : null;
+};
+exports.getReparentTarget = getReparentTarget;
+const getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
+    var _a;
+    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+    const itemMeta = item.getItemMeta();
+    const parent = item.getParent();
+    const itemTarget = { item };
+    const parentTarget = parent ? { item: parent } : null;
     const canBecomeSibling = parentTarget && (0, exports.canDrop)(e.dataTransfer, parentTarget, tree);
     const canMakeChild = (0, exports.canDrop)(e.dataTransfer, itemTarget, tree);
     const placement = getTargetPlacement(e, item, tree, canMakeChild);
@@ -136,8 +150,8 @@ const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canReorder)
         return parentTarget;
     }
     if (!canReorder && parent && !canBecomeSibling) {
-        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
-        return (0, exports.getDropTarget)(e, parent, tree, false);
+        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DragTargetStrategy[] ?
+        return (0, exports.getDragTarget)(e, parent, tree, false);
     }
     if (!parent) {
         // Shouldn't happen, but if dropped "next" to root item, just drop it inside
@@ -147,36 +161,20 @@ const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canReorder)
         return itemTarget;
     }
     if (!canBecomeSibling) {
-        return (0, exports.getDropTarget)(e, parent, tree, false);
+        return (0, exports.getDragTarget)(e, parent, tree, false);
     }
     if (placement.type === PlacementType.Reparent) {
-        const reparentedTarget = getNthParent(item, placement.reparentLevel - 1);
-        const targetItemAbove = getNthParent(item, placement.reparentLevel); // .getItemBelow()!;
-        const targetIndex = targetItemAbove.getIndexInParent() + 1;
-        // TODO possibly count items dragged out above the new target
-        return {
-            item: reparentedTarget,
-            childIndex: targetIndex,
-            insertionIndex: targetIndex,
-            dragLineIndex: itemMeta.index + 1,
-            dragLineLevel: placement.reparentLevel,
-        };
+        return (0, exports.getReparentTarget)(item, placement.reparentLevel, draggedItems);
     }
     const maybeAddOneForBelow = placement.type === PlacementType.ReorderAbove ? 0 : 1;
     const childIndex = item.getIndexInParent() + maybeAddOneForBelow;
-    const numberOfDragItemsBeforeTarget = (_c = parent
-        .getChildren()
-        .slice(0, childIndex)
-        .reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
-        ? ++counter
-        : counter, 0)) !== null && _c !== void 0 ? _c : 0;
     return {
         item: parent,
         dragLineIndex: itemMeta.index + maybeAddOneForBelow,
         dragLineLevel: itemMeta.level,
         childIndex,
         // TODO performance could be improved by computing this only when dragcode changed
-        insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
+        insertionIndex: (0, exports.getInsertionIndex)(parent.getChildren(), childIndex, draggedItems),
     };
 };
-exports.getDropTarget = getDropTarget;
+exports.getDragTarget = getDragTarget;

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,11 +25,12 @@ 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);
+            console.log("HOTKEYS", data.current.pressedKeys);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
             if (!hotkeyName)
                 return;
@@ -42,6 +45,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/keyboard-drag-and-drop/feature.d.ts

@@ -0,0 +1,2 @@
+import { FeatureImplementation } from "../../types/core";
+export declare const keyboardDragAndDropFeature: FeatureImplementation;

package/lib/cjs/features/keyboard-drag-and-drop/feature.js

@@ -0,0 +1,207 @@
+"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.keyboardDragAndDropFeature = void 0;
+const utils_1 = require("../drag-and-drop/utils");
+const utils_2 = require("../../utils");
+const types_1 = require("./types");
+const getNextDragTarget = (tree, isUp, dragTarget) => {
+    var _a, _b, _c, _d;
+    const direction = isUp ? 0 : 1;
+    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
+    // currently hovering between items
+    if ("childIndex" in dragTarget) {
+        // TODO move check in reusable function
+        const parent = dragTarget.item.getParent();
+        const targetedItem = tree.getItems()[dragTarget.dragLineIndex - 1]; // item above dragline
+        const targetCategory = targetedItem
+            ? (0, utils_1.getItemDropCategory)(targetedItem)
+            : utils_1.ItemDropCategory.Item;
+        const maxLevel = (_b = targetedItem === null || targetedItem === void 0 ? void 0 : targetedItem.getItemMeta().level) !== null && _b !== void 0 ? _b : 0;
+        const minLevel = (_d = (_c = targetedItem === null || targetedItem === void 0 ? void 0 : targetedItem.getItemBelow()) === null || _c === void 0 ? void 0 : _c.getItemMeta().level) !== null && _d !== void 0 ? _d : 0;
+        // reparenting
+        if (targetCategory === utils_1.ItemDropCategory.LastInGroup) {
+            if (isUp && dragTarget.dragLineLevel < maxLevel) {
+                return (0, utils_1.getReparentTarget)(targetedItem, dragTarget.dragLineLevel + 1, draggedItems);
+            }
+            if (!isUp && dragTarget.dragLineLevel > minLevel && parent) {
+                return (0, utils_1.getReparentTarget)(targetedItem, dragTarget.dragLineLevel - 1, draggedItems);
+            }
+        }
+        const newIndex = dragTarget.dragLineIndex - 1 + direction;
+        const item = tree.getItems()[newIndex];
+        return item ? { item } : undefined;
+    }
+    // moving upwards outside of an open folder
+    const targetingExpandedFolder = (0, utils_1.getItemDropCategory)(dragTarget.item) === utils_1.ItemDropCategory.ExpandedFolder;
+    if (targetingExpandedFolder && !isUp) {
+        return {
+            item: dragTarget.item,
+            childIndex: 0,
+            insertionIndex: (0, utils_1.getInsertionIndex)(dragTarget.item.getChildren(), 0, draggedItems),
+            dragLineIndex: dragTarget.item.getItemMeta().index + direction,
+            dragLineLevel: dragTarget.item.getItemMeta().level + 1,
+        };
+    }
+    // currently hovering over item
+    const childIndex = dragTarget.item.getIndexInParent() + direction;
+    return {
+        item: dragTarget.item.getParent(),
+        childIndex,
+        insertionIndex: (0, utils_1.getInsertionIndex)(dragTarget.item.getParent().getChildren(), childIndex, draggedItems),
+        dragLineIndex: dragTarget.item.getItemMeta().index + direction,
+        dragLineLevel: dragTarget.item.getItemMeta().level,
+    };
+};
+const getNextValidDragTarget = (tree, isUp, previousTarget) => {
+    var _a, _b;
+    if (previousTarget === void 0) { previousTarget = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget; }
+    if (!previousTarget)
+        return undefined;
+    const nextTarget = getNextDragTarget(tree, isUp, previousTarget);
+    const dataTransfer = (_b = tree.getDataRef().current.kDndDataTransfer) !== null && _b !== void 0 ? _b : null;
+    if (!nextTarget)
+        return undefined;
+    if ((0, utils_1.canDrop)(dataTransfer, nextTarget, tree)) {
+        return nextTarget;
+    }
+    return getNextValidDragTarget(tree, isUp, nextTarget);
+};
+const updateScroll = (tree) => {
+    const state = tree.getState().dnd;
+    if (!(state === null || state === void 0 ? void 0 : state.dragTarget) || "childIndex" in state.dragTarget)
+        return;
+    state.dragTarget.item.scrollTo({ block: "nearest", inline: "nearest" });
+};
+const initiateDrag = (tree, draggedItems, dataTransfer) => {
+    var _a, _b;
+    const focusedItem = tree.getFocusedItem();
+    const { canDrag } = tree.getConfig();
+    if (draggedItems && canDrag && !canDrag(draggedItems)) {
+        return;
+    }
+    if (draggedItems) {
+        tree.applySubStateUpdate("dnd", { draggedItems });
+        // getNextValidDragTarget->canDrop needs the draggedItems in state
+        (_b = (_a = tree.getConfig()).onStartKeyboardDrag) === null || _b === void 0 ? void 0 : _b.call(_a, draggedItems);
+    }
+    else if (dataTransfer) {
+        tree.getDataRef().current.kDndDataTransfer = dataTransfer;
+    }
+    const dragTarget = getNextValidDragTarget(tree, false, {
+        item: focusedItem,
+    });
+    if (!dragTarget)
+        return;
+    tree.applySubStateUpdate("dnd", {
+        draggedItems,
+        dragTarget,
+    });
+    tree.applySubStateUpdate("assistiveDndState", types_1.AssistiveDndState.Started);
+    updateScroll(tree);
+};
+const moveDragPosition = (tree, isUp) => {
+    var _a;
+    const dragTarget = getNextValidDragTarget(tree, isUp);
+    if (!dragTarget)
+        return;
+    tree.applySubStateUpdate("dnd", {
+        draggedItems: (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems,
+        dragTarget,
+    });
+    tree.applySubStateUpdate("assistiveDndState", types_1.AssistiveDndState.Dragging);
+    if (!("childIndex" in dragTarget)) {
+        dragTarget.item.setFocused();
+    }
+    updateScroll(tree);
+};
+exports.keyboardDragAndDropFeature = {
+    key: "keyboard-drag-and-drop",
+    deps: ["drag-and-drop"],
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setAssistiveDndState: (0, utils_2.makeStateUpdater)("assistiveDndState", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        assistiveDndState: "setAssistiveDndState",
+    },
+    treeInstance: {
+        startKeyboardDrag: ({ tree }, draggedItems) => {
+            initiateDrag(tree, draggedItems, undefined);
+        },
+        startKeyboardDragOnForeignObject: ({ tree }, dataTransfer) => {
+            initiateDrag(tree, undefined, dataTransfer);
+        },
+        stopKeyboardDrag: ({ tree }) => {
+            tree.getDataRef().current.kDndDataTransfer = undefined;
+            tree.applySubStateUpdate("dnd", null);
+            tree.applySubStateUpdate("assistiveDndState", types_1.AssistiveDndState.None);
+        },
+    },
+    hotkeys: {
+        startDrag: {
+            hotkey: "Control+Shift+D",
+            preventDefault: true,
+            isEnabled: (tree) => !tree.getState().dnd,
+            handler: (_, tree) => {
+                tree.startKeyboardDrag(tree.getSelectedItems());
+            },
+        },
+        dragUp: {
+            hotkey: "ArrowUp",
+            preventDefault: true,
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (_, tree) => {
+                moveDragPosition(tree, true);
+            },
+        },
+        dragDown: {
+            hotkey: "ArrowDown",
+            preventDefault: true,
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (_, tree) => {
+                moveDragPosition(tree, false);
+            },
+        },
+        cancelDrag: {
+            hotkey: "Escape",
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (_, tree) => {
+                tree.stopKeyboardDrag();
+            },
+        },
+        completeDrag: {
+            hotkey: "Enter",
+            preventDefault: true,
+            isEnabled: (tree) => !!tree.getState().dnd,
+            handler: (e, tree) => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b, _c, _d;
+                e.stopPropagation();
+                // TODO copied from keyboard onDrop, unify them
+                const dataRef = tree.getDataRef();
+                const target = tree.getDragTarget();
+                const dataTransfer = (_a = dataRef.current.kDndDataTransfer) !== null && _a !== void 0 ? _a : null;
+                if (!target || !(0, utils_1.canDrop)(dataTransfer, target, tree)) {
+                    return;
+                }
+                const config = tree.getConfig();
+                const draggedItems = (_b = tree.getState().dnd) === null || _b === void 0 ? void 0 : _b.draggedItems;
+                dataRef.current.lastDragCode = undefined;
+                tree.applySubStateUpdate("dnd", null);
+                if (draggedItems) {
+                    yield ((_c = config.onDrop) === null || _c === void 0 ? void 0 : _c.call(config, draggedItems, target));
+                    tree.getItemInstance(draggedItems[0].getId()).setFocused();
+                }
+                else if (dataTransfer) {
+                    yield ((_d = config.onDropForeignDragObject) === null || _d === void 0 ? void 0 : _d.call(config, dataTransfer, target));
+                }
+                tree.applySubStateUpdate("assistiveDndState", types_1.AssistiveDndState.Completed);
+            }),
+        },
+    },
+};

package/lib/cjs/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/cjs/features/keyboard-drag-and-drop/types.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssistiveDndState = void 0;
+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 || (exports.AssistiveDndState = AssistiveDndState = {}));

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";
 };