@headless-tree/core 0.0.14 → 1.0.0

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

@@ -1,20 +1,20 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
-export type DndDataRef = {
+export interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
-};
-export type DndState<T> = {
+}
+export interface DndState<T> {
     draggedItems?: ItemInstance<T>[];
     draggingOverItem?: ItemInstance<T>;
-    dragTarget?: DropTarget<T>;
-};
-export type DragLineData = {
+    dragTarget?: DragTarget<T>;
+}
+export interface DragLineData {
     indent: number;
     top: number;
     left: number;
     width: number;
-};
-export type DropTarget<T> = {
+}
+export type DragTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
     insertionIndex: number;
@@ -22,12 +22,8 @@ export type DropTarget<T> = {
     dragLineLevel: number;
 } | {
     item: ItemInstance<T>;
-    childIndex: null;
-    insertionIndex: null;
-    dragLineIndex: null;
-    dragLineLevel: null;
 };
-export declare enum DropTargetPosition {
+export declare enum DragTargetPosition {
     Top = "top",
     Bottom = "bottom",
     Item = "item"
@@ -43,35 +39,27 @@ export type DragAndDropFeatureDef<T> = {
          * If `canReorder` is `false`, this is ignored. */
         reorderAreaPercentage?: number;
         canReorder?: boolean;
-        isItemDraggable?: (item: ItemInstance<T>) => 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;
-        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DropTarget<T>) => void;
-        /** Runs in the onDragEnd event, if `ev.dataTransfer.dropEffect` is not `none`, i.e. the drop
-         * was not aborted. No target is provided as parameter since the target may be a foreign drop target.
-         * This is useful to seperate out the logic to move dragged items out of their previous parents.
-         * Use `onDrop` to handle drop-related logic.
-         *
-         * This ignores the `canDrop` handler, since the drop target is unknown in this handler.
-         */
+        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,27 @@
 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 isOrderedDragTarget: <T>(dragTarget: DragTarget<T>) => dragTarget is {
+    item: ItemInstance<T>;
+    childIndex: number;
+    insertionIndex: number;
+    dragLineIndex: number;
+    dragLineLevel: number;
+};
+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";
@@ -11,8 +11,9 @@ var PlacementType;
     PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
     PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
 })(PlacementType || (PlacementType = {}));
+export const isOrderedDragTarget = (dragTarget) => "childIndex" in dragTarget;
 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,23 +26,33 @@ 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;
     }
     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;
 };
+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;
+    var _a, _b, _c, _d, _e;
     const config = tree.getConfig();
     if (!config.canReorder) {
         return canMakeChild
@@ -49,8 +60,8 @@ 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 topPercent = bb ? (e.clientY - bb.top) / bb.height : 0.5;
+    const leftPixels = bb ? e.clientX - bb.left : 0;
     const targetDropCategory = getItemDropCategory(item);
     const reorderAreaPercentage = !canMakeChild
         ? 0.5
@@ -70,9 +81,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
@@ -100,27 +112,27 @@ 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 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: 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;
+};
+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 };
+    const parentTarget = parent ? { item: parent } : null;
     const canBecomeSibling = parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
     const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
     const placement = getTargetPlacement(e, item, tree, canMakeChild);
@@ -131,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
@@ -142,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/expand-all/feature.js

@@ -7,7 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { poll } from "../../utils";
 export const expandAllFeature = {
     key: "expand-all",
     treeInstance: {
@@ -28,17 +27,41 @@ export const expandAllFeature = {
                 return;
             }
             item.expand();
-            yield 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 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/esm/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/esm/features/hotkeys-core/feature.js

@@ -1,6 +1,8 @@
 const specialKeys = {
     Letter: /^[a-z]$/,
     LetterOrNumber: /^[a-z0-9]$/,
+    Plus: /^\+$/,
+    Space: /^ $/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
     const supposedKeys = hotkey.hotkey.split("+");
@@ -20,11 +22,12 @@ export const 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;
@@ -39,6 +42,7 @@ export const 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/esm/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/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,203 @@
+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, isOrderedDragTarget, } 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 (isOrderedDragTarget(dragTarget)) {
+        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) || isOrderedDragTarget(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 (!isOrderedDragTarget(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);
+            }),
+        },
+    },
+};