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

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # @headless-tree/core
 
-## 0.0.0-20250322153940
+## 0.0.0-20250330232313
 
 ### Patch Changes
 
 - 2af5668: Bug fix: Mutations to expanded tree items from outside will now trigger a rebuild of the tree structure (#65)
+- 617faea: Support for keyboard-controlled drag-and-drop events
 
 ## 0.0.14
 

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

@@ -20,13 +20,13 @@ exports.dragAndDropFeature = {
         dnd: "setDndState",
     },
     treeInstance: {
-        getDropTarget: ({ tree }) => {
+        getDragTarget: ({ tree }) => {
             var _a, _b;
             return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
         },
         getDragLineData: ({ tree }) => {
             var _a, _b, _c, _d, _e, _f;
-            const target = tree.getDropTarget();
+            const target = tree.getDragTarget();
             const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
             const treeBb = (_b = tree.getElement()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             if (!target || !treeBb || !("childIndex" in target))
@@ -39,7 +39,7 @@ exports.dragAndDropFeature = {
                 if (bb) {
                     return {
                         indent,
-                        top: bb.bottom - treeBb.bottom,
+                        top: bb.bottom - treeBb.top,
                         left: bb.left + leftOffset - treeBb.left,
                         width: bb.width - leftOffset,
                     };
@@ -104,7 +104,7 @@ exports.dragAndDropFeature = {
                     return;
                 }
                 dataRef.current.lastDragCode = nextDragCode;
-                const target = (0, utils_1.getDropTarget)(e, item, tree);
+                const target = (0, utils_1.getDragTarget)(e, item, tree);
                 if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
                     (!e.dataTransfer ||
                         !((_c = (_b = tree
@@ -134,7 +134,7 @@ exports.dragAndDropFeature = {
             }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
                 var _a, _b, _c;
                 const dataRef = tree.getDataRef();
-                const target = (0, utils_1.getDropTarget)(e, item, tree);
+                const target = (0, utils_1.getDragTarget)(e, item, tree);
                 if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
                     return;
                 }
@@ -150,20 +150,20 @@ exports.dragAndDropFeature = {
                     yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
                 }
             }) })),
-        isDropTarget: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+        isDragTarget: ({ tree, item }) => {
+            const target = tree.getDragTarget();
             return target ? target.item.getId() === item.getId() : false;
         },
-        isDropTargetAbove: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+        isDragTargetAbove: ({ tree, item }) => {
+            const target = tree.getDragTarget();
             if (!target ||
                 !("childIndex" in target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
         },
-        isDropTargetBelow: ({ tree, item }) => {
-            const target = tree.getDropTarget();
+        isDragTargetBelow: ({ tree, item }) => {
+            const target = tree.getDragTarget();
             if (!target ||
                 !("childIndex" in target) ||
                 target.item !== item.getParent())

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

@@ -6,7 +6,7 @@ export interface DndDataRef {
 export interface DndState<T> {
     draggedItems?: ItemInstance<T>[];
     draggingOverItem?: ItemInstance<T>;
-    dragTarget?: DropTarget<T>;
+    dragTarget?: DragTarget<T>;
 }
 export interface DragLineData {
     indent: number;
@@ -14,7 +14,7 @@ export interface DragLineData {
     left: number;
     width: number;
 }
-export type DropTarget<T> = {
+export type DragTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
     insertionIndex: number;
@@ -23,7 +23,7 @@ export type DropTarget<T> = {
 } | {
     item: ItemInstance<T>;
 };
-export declare enum DropTargetPosition {
+export declare enum DragTargetPosition {
     Top = "top",
     Bottom = "bottom",
     Item = "item"
@@ -40,26 +40,26 @@ export type DragAndDropFeatureDef<T> = {
         reorderAreaPercentage?: number;
         canReorder?: boolean;
         canDrag?: (items: ItemInstance<T>[]) => boolean;
-        canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
+        canDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => boolean;
         indent?: number;
         createForeignDragObject?: (items: ItemInstance<T>[]) => {
             format: string;
             data: any;
         };
-        canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => boolean;
-        onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void | Promise<void>;
-        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => void | Promise<void>;
+        canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => boolean;
+        onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
+        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
     };
     treeInstance: {
-        getDropTarget: () => DropTarget<T> | null;
+        getDragTarget: () => DragTarget<T> | null;
         getDragLineData: () => DragLineData | null;
         getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
     };
     itemInstance: {
-        isDropTarget: () => boolean;
-        isDropTargetAbove: () => boolean;
-        isDropTargetBelow: () => boolean;
+        isDragTarget: () => boolean;
+        isDragTargetAbove: () => boolean;
+        isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
     };
     hotkeys: never;

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropTargetPosition = void 0;
-var DropTargetPosition;
-(function (DropTargetPosition) {
-    DropTargetPosition["Top"] = "top";
-    DropTargetPosition["Bottom"] = "bottom";
-    DropTargetPosition["Item"] = "item";
-})(DropTargetPosition || (exports.DropTargetPosition = DropTargetPosition = {}));
+exports.DragTargetPosition = void 0;
+var DragTargetPosition;
+(function (DragTargetPosition) {
+    DragTargetPosition["Top"] = "top";
+    DragTargetPosition["Bottom"] = "bottom";
+    DragTargetPosition["Item"] = "item";
+})(DragTargetPosition || (exports.DragTargetPosition = DragTargetPosition = {}));

package/lib/cjs/features/drag-and-drop/utils.d.ts

@@ -1,5 +1,20 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget } from "./types";
-export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
+import { DragTarget } from "./types";
+export declare enum ItemDropCategory {
+    Item = 0,
+    ExpandedFolder = 1,
+    LastInGroup = 2
+}
+export declare const canDrop: (dataTransfer: DataTransfer | null, target: DragTarget<any>, tree: TreeInstance<any>) => boolean;
+export declare const getItemDropCategory: (item: ItemInstance<any>) => ItemDropCategory;
+export declare const getInsertionIndex: <T>(children: ItemInstance<T>[], childIndex: number, draggedItems: ItemInstance<T>[] | undefined) => number;
 export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
-export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DropTarget<any>;
+/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6)  */
+export declare const getReparentTarget: <T>(item: ItemInstance<T>, reparentLevel: number, draggedItems: ItemInstance<T>[] | undefined) => {
+    item: ItemInstance<any>;
+    childIndex: number;
+    insertionIndex: number;
+    dragLineIndex: number;
+    dragLineLevel: number;
+};
+export declare const getDragTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DragTarget<any>;

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;
@@ -44,6 +45,17 @@ const getItemDropCategory = (item) => {
     }
     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, _d, _e;
     const config = tree.getConfig();
@@ -55,7 +67,7 @@ const getTargetPlacement = (e, item, tree, canMakeChild) => {
     const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     const topPercent = bb ? (e.clientY - bb.top) / bb.height : 0.5;
     const leftPixels = bb ? e.clientX - bb.left : 0;
-    const targetDropCategory = getItemDropCategory(item);
+    const targetDropCategory = (0, exports.getItemDropCategory)(item);
     const reorderAreaPercentage = !canMakeChild
         ? 0.5
         : (_b = config.reorderAreaPercentage) !== null && _b !== void 0 ? _b : 0.3;
@@ -106,9 +118,25 @@ 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 reparentedTarget = getNthParent(item, reparentLevel - 1);
+    const targetItemAbove = getNthParent(item, reparentLevel); // .getItemBelow()!;
+    const targetIndex = targetItemAbove.getIndexInParent() + 1;
+    // TODO possibly count items dragged out above the new target
+    return {
+        item: reparentedTarget,
+        childIndex: targetIndex,
+        insertionIndex: (0, exports.getInsertionIndex)(reparentedTarget.getChildren(), targetIndex, draggedItems),
+        dragLineIndex: itemMeta.index + 1,
+        dragLineLevel: reparentLevel,
+    };
+};
+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 };
@@ -123,8 +151,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
@@ -134,36 +162,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/hotkeys-core/feature.js

@@ -30,6 +30,7 @@ exports.hotkeysCoreFeature = {
             (_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;

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/index.d.ts

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

package/lib/cjs/index.js

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

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

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