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

package/lib/esm/index.js

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250322153940",
+  "version": "0.0.0-20250330164609",
   "type": "module",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

package/src/features/drag-and-drop/drag-and-drop.spec.ts

@@ -648,20 +648,20 @@ describe("core-feature/drag-and-drop", () => {
     });
 
     describe("item instance methods", () => {
-      it("returns isDropTarget() correct for folders", () => {
+      it("returns isDragTarget() correct for folders", () => {
         tree.do.startDrag("x111");
         tree.do.dragOver("x21");
-        expect(tree.instance.getItemInstance("x21").isDropTarget()).toBe(true);
-        expect(tree.instance.getItemInstance("x211").isDropTarget()).toBe(
+        expect(tree.instance.getItemInstance("x21").isDragTarget()).toBe(true);
+        expect(tree.instance.getItemInstance("x211").isDragTarget()).toBe(
           false,
         );
       });
 
-      it("returns isDropTarget() correct for items", () => {
+      it("returns isDragTarget() correct for items", () => {
         tree.do.startDrag("x111");
         tree.do.dragOver("x211");
-        expect(tree.instance.getItemInstance("x21").isDropTarget()).toBe(true);
-        expect(tree.instance.getItemInstance("x211").isDropTarget()).toBe(
+        expect(tree.instance.getItemInstance("x21").isDragTarget()).toBe(true);
+        expect(tree.instance.getItemInstance("x211").isDragTarget()).toBe(
           false,
         );
       });

package/src/features/drag-and-drop/feature.ts

@@ -1,6 +1,6 @@
 import { FeatureImplementation } from "../../types/core";
 import { DndDataRef, DragLineData } from "./types";
-import { canDrop, getDragCode, getDropTarget } from "./utils";
+import { canDrop, getDragCode, getDragTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
 export const dragAndDropFeature: FeatureImplementation = {
@@ -20,12 +20,12 @@ export const dragAndDropFeature: FeatureImplementation = {
   },
 
   treeInstance: {
-    getDropTarget: ({ tree }) => {
+    getDragTarget: ({ tree }) => {
       return tree.getState().dnd?.dragTarget ?? null;
     },
 
     getDragLineData: ({ tree }): DragLineData | null => {
-      const target = tree.getDropTarget();
+      const target = tree.getDragTarget();
       const indent = (target?.item.getItemMeta().level ?? 0) + 1;
 
       const treeBb = tree.getElement()?.getBoundingClientRect();
@@ -44,7 +44,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         if (bb) {
           return {
             indent,
-            top: bb.bottom - treeBb.bottom,
+            top: bb.bottom - treeBb.top,
             left: bb.left + leftOffset - treeBb.left,
             width: bb.width - leftOffset,
           };
@@ -131,7 +131,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         }
         dataRef.current.lastDragCode = nextDragCode;
 
-        const target = getDropTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree);
 
         if (
           !tree.getState().dnd?.draggedItems &&
@@ -181,7 +181,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       onDrop: async (e: DragEvent) => {
         const dataRef = tree.getDataRef<DndDataRef>();
-        const target = getDropTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree);
 
         if (!canDrop(e.dataTransfer, target, tree)) {
           return;
@@ -202,13 +202,13 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
     }),
 
-    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 ||
@@ -219,8 +219,8 @@ export const dragAndDropFeature: FeatureImplementation = {
       return target.childIndex === item.getItemMeta().posInSet;
     },
 
-    isDropTargetBelow: ({ tree, item }) => {
-      const target = tree.getDropTarget();
+    isDragTargetBelow: ({ tree, item }) => {
+      const target = tree.getDragTarget();
 
       if (
         !target ||

package/src/features/drag-and-drop/types.ts

@@ -8,7 +8,7 @@ export interface DndDataRef {
 export interface DndState<T> {
   draggedItems?: ItemInstance<T>[];
   draggingOverItem?: ItemInstance<T>;
-  dragTarget?: DropTarget<T>;
+  dragTarget?: DragTarget<T>;
 }
 
 export interface DragLineData {
@@ -18,7 +18,7 @@ export interface DragLineData {
   width: number;
 }
 
-export type DropTarget<T> =
+export type DragTarget<T> =
   | {
       item: ItemInstance<T>;
       childIndex: number;
@@ -30,7 +30,7 @@ export type DropTarget<T> =
       item: ItemInstance<T>;
     };
 
-export enum DropTargetPosition {
+export enum DragTargetPosition {
   Top = "top",
   Bottom = "bottom",
   Item = "item",
@@ -50,7 +50,7 @@ export type DragAndDropFeatureDef<T> = {
     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;
 
@@ -60,20 +60,20 @@ export type DragAndDropFeatureDef<T> = {
     };
     canDropForeignDragObject?: (
       dataTransfer: DataTransfer,
-      target: DropTarget<T>,
+      target: DragTarget<T>,
     ) => boolean;
     onDrop?: (
       items: ItemInstance<T>[],
-      target: DropTarget<T>,
+      target: DragTarget<T>,
     ) => void | Promise<void>;
     onDropForeignDragObject?: (
       dataTransfer: DataTransfer,
-      target: DropTarget<T>,
+      target: DragTarget<T>,
     ) => void | Promise<void>;
     onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
   };
   treeInstance: {
-    getDropTarget: () => DropTarget<T> | null;
+    getDragTarget: () => DragTarget<T> | null;
     getDragLineData: () => DragLineData | null;
 
     getDragLineStyle: (
@@ -82,9 +82,9 @@ export type DragAndDropFeatureDef<T> = {
     ) => Record<string, any>;
   };
   itemInstance: {
-    isDropTarget: () => boolean;
-    isDropTargetAbove: () => boolean;
-    isDropTargetBelow: () => boolean;
+    isDragTarget: () => boolean;
+    isDragTargetAbove: () => boolean;
+    isDragTargetBelow: () => boolean;
     isDraggingOver: () => boolean;
   };
   hotkeys: never;

package/src/features/drag-and-drop/utils.ts

@@ -1,7 +1,7 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget } from "./types";
+import { DragTarget } from "./types";
 
-enum ItemDropCategory {
+export enum ItemDropCategory {
   Item,
   ExpandedFolder,
   LastInGroup,
@@ -28,7 +28,7 @@ type TargetPlacement =
 
 export const canDrop = (
   dataTransfer: DataTransfer | null,
-  target: DropTarget<any>,
+  target: DragTarget<any>,
   tree: TreeInstance<any>,
 ) => {
   const draggedItems = tree.getState().dnd?.draggedItems;
@@ -52,7 +52,8 @@ export const canDrop = (
   if (
     !draggedItems &&
     dataTransfer &&
-    !config.canDropForeignDragObject?.(dataTransfer, target)
+    config.canDropForeignDragObject &&
+    !config.canDropForeignDragObject(dataTransfer, target)
   ) {
     return false;
   }
@@ -60,7 +61,7 @@ export const canDrop = (
   return true;
 };
 
-const getItemDropCategory = (item: ItemInstance<any>) => {
+export const getItemDropCategory = (item: ItemInstance<any>) => {
   if (item.isExpanded()) {
     return ItemDropCategory.ExpandedFolder;
   }
@@ -73,6 +74,24 @@ const getItemDropCategory = (item: ItemInstance<any>) => {
   return ItemDropCategory.Item;
 };
 
+export const getInsertionIndex = <T>(
+  children: ItemInstance<T>[],
+  childIndex: number,
+  draggedItems: ItemInstance<T>[] | undefined,
+) => {
+  const numberOfDragItemsBeforeTarget =
+    children
+      .slice(0, childIndex)
+      .reduce(
+        (counter, child) =>
+          child && draggedItems?.some((i) => i.getId() === child.getId())
+            ? ++counter
+            : counter,
+        0,
+      ) ?? 0;
+  return childIndex - numberOfDragItemsBeforeTarget;
+};
+
 const getTargetPlacement = (
   e: any,
   item: ItemInstance<any>,
@@ -153,17 +172,43 @@ const getNthParent = (
   return getNthParent(item.getParent()!, n);
 };
 
-export const getDropTarget = (
+/** @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 = <T>(
+  item: ItemInstance<T>,
+  reparentLevel: number,
+  draggedItems: ItemInstance<T>[] | undefined,
+) => {
+  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: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
   canReorder = tree.getConfig().canReorder,
-): DropTarget<any> => {
-  const draggedItems = tree.getState().dnd?.draggedItems ?? [];
+): DragTarget<any> => {
+  const draggedItems = tree.getState().dnd?.draggedItems;
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
-  const itemTarget: DropTarget<any> = { item };
-  const parentTarget: DropTarget<any> | null = parent ? { item: parent } : null;
+  const itemTarget: DragTarget<any> = { item };
+  const parentTarget: DragTarget<any> | null = parent ? { item: parent } : null;
   const canBecomeSibling =
     parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
 
@@ -180,8 +225,8 @@ export const getDropTarget = (
   }
 
   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) {
@@ -194,47 +239,27 @@ export const getDropTarget = (
   }
 
   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 =
-    parent
-      .getChildren()
-      .slice(0, childIndex)
-      .reduce(
-        (counter, child) =>
-          child && draggedItems?.some((i) => i.getId() === child.getId())
-            ? ++counter
-            : counter,
-        0,
-      ) ?? 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/src/features/hotkeys-core/feature.ts

@@ -48,6 +48,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       data.current.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,