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

package/lib/cjs/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/cjs/test-utils/test-tree-expect.js

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

package/lib/cjs/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/cjs/utilities/create-on-drop-handler.d.ts

@@ -1,3 +1,3 @@
 import { ItemInstance } from "../types/core";
-import { DropTarget } from "../features/drag-and-drop/types";
-export declare const createOnDropHandler: <T>(onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void) => (items: ItemInstance<T>[], target: DropTarget<T>) => Promise<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/cjs/utilities/insert-items-at-target.d.ts

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

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { canDrop, getDragCode, getDropTarget } from "./utils";
+import { canDrop, getDragCode, getDragTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
     key: "drag-and-drop",
@@ -17,13 +17,13 @@ export const 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))
@@ -36,7 +36,7 @@ export const 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,
                     };
@@ -101,7 +101,7 @@ export const dragAndDropFeature = {
                     return;
                 }
                 dataRef.current.lastDragCode = nextDragCode;
-                const target = getDropTarget(e, item, tree);
+                const target = getDragTarget(e, item, tree);
                 if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
                     (!e.dataTransfer ||
                         !((_c = (_b = tree
@@ -131,7 +131,7 @@ export const dragAndDropFeature = {
             }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
                 var _a, _b, _c;
                 const dataRef = tree.getDataRef();
-                const target = getDropTarget(e, item, tree);
+                const target = getDragTarget(e, item, tree);
                 if (!canDrop(e.dataTransfer, target, tree)) {
                     return;
                 }
@@ -147,20 +147,20 @@ export const 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/esm/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/esm/features/drag-and-drop/types.js

@@ -1,6 +1,6 @@
-export var DropTargetPosition;
-(function (DropTargetPosition) {
-    DropTargetPosition["Top"] = "top";
-    DropTargetPosition["Bottom"] = "bottom";
-    DropTargetPosition["Item"] = "item";
-})(DropTargetPosition || (DropTargetPosition = {}));
+export var DragTargetPosition;
+(function (DragTargetPosition) {
+    DragTargetPosition["Top"] = "top";
+    DragTargetPosition["Bottom"] = "bottom";
+    DragTargetPosition["Item"] = "item";
+})(DragTargetPosition || (DragTargetPosition = {}));

package/lib/esm/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/esm/features/drag-and-drop/utils.js

@@ -1,4 +1,4 @@
-var ItemDropCategory;
+export var ItemDropCategory;
 (function (ItemDropCategory) {
     ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
     ItemDropCategory[ItemDropCategory["ExpandedFolder"] = 1] = "ExpandedFolder";
@@ -12,7 +12,7 @@ var PlacementType;
     PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
 })(PlacementType || (PlacementType = {}));
 export 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)) {
@@ -25,12 +25,13 @@ export 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;
 };
-const getItemDropCategory = (item) => {
+export const getItemDropCategory = (item) => {
     if (item.isExpanded()) {
         return ItemDropCategory.ExpandedFolder;
     }
@@ -40,6 +41,15 @@ const getItemDropCategory = (item) => {
     }
     return ItemDropCategory.Item;
 };
+export 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;
+};
 const getTargetPlacement = (e, item, tree, canMakeChild) => {
     var _a, _b, _c, _d, _e;
     const config = tree.getConfig();
@@ -101,9 +111,24 @@ const getNthParent = (item, n) => {
     }
     return getNthParent(item.getParent(), n);
 };
-export 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)  */
+export 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: getInsertionIndex(reparentedTarget.getChildren(), targetIndex, draggedItems),
+        dragLineIndex: itemMeta.index + 1,
+        dragLineLevel: reparentLevel,
+    };
+};
+export 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 };
@@ -118,8 +143,8 @@ export const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canRe
         return parentTarget;
     }
     if (!canReorder && parent && !canBecomeSibling) {
-        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
-        return getDropTarget(e, parent, tree, false);
+        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DragTargetStrategy[] ?
+        return getDragTarget(e, parent, tree, false);
     }
     if (!parent) {
         // Shouldn't happen, but if dropped "next" to root item, just drop it inside
@@ -129,35 +154,19 @@ export const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canRe
         return itemTarget;
     }
     if (!canBecomeSibling) {
-        return getDropTarget(e, parent, tree, false);
+        return 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 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: getInsertionIndex(parent.getChildren(), childIndex, draggedItems),
     };
 };

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

@@ -27,6 +27,7 @@ export const 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/esm/features/keyboard-drag-and-drop/feature.d.ts

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

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

@@ -0,0 +1,204 @@
+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 { ItemDropCategory, canDrop, getInsertionIndex, getItemDropCategory, getReparentTarget, } from "../drag-and-drop/utils";
+import { makeStateUpdater } from "../../utils";
+import { AssistiveDndState } from "./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
+            ? getItemDropCategory(targetedItem)
+            : 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 === ItemDropCategory.LastInGroup) {
+            if (isUp && dragTarget.dragLineLevel < maxLevel) {
+                return getReparentTarget(targetedItem, dragTarget.dragLineLevel + 1, draggedItems);
+            }
+            if (!isUp && dragTarget.dragLineLevel > minLevel && parent) {
+                return 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 = getItemDropCategory(dragTarget.item) === ItemDropCategory.ExpandedFolder;
+    if (targetingExpandedFolder && !isUp) {
+        return {
+            item: dragTarget.item,
+            childIndex: 0,
+            insertionIndex: 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: 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 (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", 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", AssistiveDndState.Dragging);
+    if (!("childIndex" in dragTarget)) {
+        dragTarget.item.setFocused();
+    }
+    updateScroll(tree);
+};
+export const keyboardDragAndDropFeature = {
+    key: "keyboard-drag-and-drop",
+    deps: ["drag-and-drop"],
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setAssistiveDndState: 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", 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 || !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", AssistiveDndState.Completed);
+            }),
+        },
+    },
+};

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