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

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

@@ -31,10 +31,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -44,10 +40,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x2");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x2"),
         });
       });
@@ -57,10 +49,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x12");
         tree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x12"),
         });
       });
@@ -109,33 +97,52 @@ describe("core-feature/drag-and-drop", () => {
         });
       });
 
-      it("drop reparented one level", () => {
+      it("drop reparented one level", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
-        tree.setElementBoundingBox("x114");
+        tree.setElementBoundingBox("x144");
         const event = tree.createBottomDragEvent(1);
-        tree.do.dragOverAndDrop("x114", event);
+        tree.do.dragOverAndDrop("x144", event);
         tree.expect.dropped(["x111"], {
-          dragLineIndex: 6,
+          dragLineIndex: 13,
           dragLineLevel: 1,
+          childIndex: 4,
+          insertionIndex: 4,
+          item: tree.item("x1"),
+        });
+      });
+
+      it("drop reparented two levels", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
+        tree.do.ctrlSelectItem("x111");
+        tree.do.startDrag("x111");
+        tree.setElementBoundingBox("x144");
+        const event = tree.createBottomDragEvent(0);
+        tree.do.dragOverAndDrop("x144", event);
+        tree.expect.dropped(["x111"], {
+          dragLineIndex: 13,
+          dragLineLevel: 0,
           childIndex: 1,
           insertionIndex: 1,
-          item: tree.item("x1"),
+          item: tree.item("x"),
         });
       });
 
-      it("drop reparented two levels", () => {
-        // TODO reparenting two levels should work at x144, but not at x114
+      it("doesnt drop reparented higher than it can", () => {
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
+        tree.setElementBoundingBox("x114");
         const event = tree.createBottomDragEvent(0);
         tree.do.dragOverAndDrop("x114", event);
         tree.expect.dropped(["x111"], {
           dragLineIndex: 6,
-          dragLineLevel: 0,
+          dragLineLevel: 1,
           childIndex: 1,
           insertionIndex: 1,
-          item: tree.item("x"),
+          item: tree.item("x1"),
         });
       });
 
@@ -147,10 +154,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -163,10 +166,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -179,10 +178,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113", "x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -199,10 +194,6 @@ describe("core-feature/drag-and-drop", () => {
           draggedItems: [tree.item("x111")],
           draggingOverItem: tree.item("x21"),
           dragTarget: {
-            childIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-            insertionIndex: null,
             item: tree.item("x21"),
           },
         });
@@ -270,13 +261,15 @@ describe("core-feature/drag-and-drop", () => {
         tree.expect.defaultDragLineProps(1);
       });
 
-      it("drop reparented two levels", () => {
+      it("drop reparented two levels", async () => {
+        tree.item("x14").expand();
+        await tree.resolveAsyncVisibleItems();
         tree.do.ctrlSelectItem("x111");
         tree.do.startDrag("x111");
         const event = tree.createBottomDragEvent(0);
-        tree.setElementBoundingBox("x12");
-        tree.setElementBoundingBox("x114");
-        tree.do.dragOver("x114", event);
+        tree.setElementBoundingBox("x2");
+        tree.setElementBoundingBox("x144");
+        tree.do.dragOver("x144", event);
         tree.expect.defaultDragLineProps(0);
       });
     });
@@ -316,10 +309,6 @@ describe("core-feature/drag-and-drop", () => {
         expect(onDropForeignDragObject).toHaveBeenCalledWith(
           event.dataTransfer,
           {
-            childIndex: null,
-            dragLineIndex: null,
-            dragLineLevel: null,
-            insertionIndex: null,
             item: tree.item("x11"),
           },
         );
@@ -371,10 +360,10 @@ describe("core-feature/drag-and-drop", () => {
 
       suiteTree.resetBeforeEach();
 
-      it("drags within same tree on folder", () => {
+      it("drags within same tree on expanded folder", async () => {
         suiteTree.do.selectMultiple("x111", "x112");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x21");
+        await suiteTree.do.dragOverAndDrop("x21");
         expect(changeChildren).toHaveBeenCalledWith("x11", ["x113", "x114"]);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -386,10 +375,26 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags within same tree inside folder", () => {
+      it("drags within same tree on collapsed folder", async () => {
         suiteTree.do.selectMultiple("x111", "x112");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop(
+        suiteTree.do.dragOverAndDrop("x22");
+        await suiteTree.resolveAsyncVisibleItems();
+        expect(changeChildren).toHaveBeenCalledWith("x11", ["x113", "x114"]);
+        expect(changeChildren).toHaveBeenCalledWith("x22", [
+          "x221",
+          "x222",
+          "x223",
+          "x224",
+          "x111",
+          "x112",
+        ]);
+      });
+
+      it("drags within same tree inside folder", async () => {
+        suiteTree.do.selectMultiple("x111", "x112");
+        suiteTree.do.startDrag("x111");
+        await suiteTree.do.dragOverAndDrop(
           "x212",
           suiteTree.createBottomDragEvent(2),
         );
@@ -456,10 +461,6 @@ describe("core-feature/drag-and-drop", () => {
         const e = TestTree.dragEvent();
         suiteTree.do.drop("x21", e);
         expect(onDropForeignDragObject).toBeCalledWith(e.dataTransfer, {
-          childIndex: null,
-          dragLineIndex: null,
-          dragLineLevel: null,
-          insertionIndex: null,
           item: suiteTree.item("x21"),
         });
       });
@@ -476,10 +477,13 @@ describe("core-feature/drag-and-drop", () => {
         expect(onDropForeignDragObject).not.toHaveBeenCalled();
       });
 
-      it("drags multiple within in retained order (correct order)", () => {
+      it("drags multiple within in retained order (correct order)", async () => {
         suiteTree.do.selectMultiple("x111", "x112", "x113", "x114");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -493,10 +497,13 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags multiple within in retained order (inverse order)", () => {
+      it("drags multiple within in retained order (inverse order)", async () => {
         suiteTree.do.selectMultiple("x114", "x113", "x112", "x111");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -510,10 +517,13 @@ describe("core-feature/drag-and-drop", () => {
         ]);
       });
 
-      it("drags multiple within in retained order (scrambled order)", () => {
+      it("drags multiple within in retained order (scrambled order)", async () => {
         suiteTree.do.selectMultiple("x111", "x114", "x112", "x113");
         suiteTree.do.startDrag("x111");
-        suiteTree.do.dragOverAndDrop("x212", suiteTree.createBottomDragEvent());
+        await suiteTree.do.dragOverAndDrop(
+          "x212",
+          suiteTree.createBottomDragEvent(),
+        );
         expect(changeChildren).toHaveBeenCalledWith("x11", []);
         expect(changeChildren).toHaveBeenCalledWith("x21", [
           "x211",
@@ -540,10 +550,6 @@ describe("core-feature/drag-and-drop", () => {
         testTree.do.startDrag("x111");
         testTree.do.dragOverAndDrop("x212", testTree.createBottomDragEvent(2));
         testTree.expect.dropped(["x111"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -603,21 +609,9 @@ describe("core-feature/drag-and-drop", () => {
         tree.expect.dragOverNotAllowed("x2");
         expect(canDrop).toHaveBeenCalledWith([tree.item("x111")], {
           item: tree.item("x2"),
-          childIndex: null,
-          dragLineIndex: null,
-          dragLineLevel: null,
-          insertionIndex: null,
         });
       });
 
-      it.todo("item with canDrag=false is not draggable", () => {
-        const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
-        expect(tree.instance.getItemInstance("x111").getProps().draggable).toBe(
-          false,
-        );
-        expect(canDrag).toHaveBeenCalledWith([tree.item("x111")]);
-      });
-
       it("item with canDrag=false does not invoke drag handler when dragged", () => {
         const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
         const setDndState = tree.mockedHandler("setDndState");
@@ -637,10 +631,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x111");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x111", "x112", "x113"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });
@@ -652,10 +642,6 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.startDrag("x114");
         tree.do.dragOverAndDrop("x21");
         tree.expect.dropped(["x114"], {
-          dragLineIndex: null,
-          dragLineLevel: null,
-          childIndex: null,
-          insertionIndex: null,
           item: tree.item("x21"),
         });
       });

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

@@ -30,7 +30,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       const treeBb = tree.getElement()?.getBoundingClientRect();
 
-      if (!target || !treeBb || target.childIndex === null) return null;
+      if (!target || !treeBb || !("childIndex" in target)) return null;
 
       const leftOffset = target.dragLineLevel * (tree.getConfig().indent ?? 1);
       const targetItem = tree.getItems()[target.dragLineIndex];
@@ -77,8 +77,8 @@ export const dragAndDropFeature: FeatureImplementation = {
         : { display: "none" };
     },
 
-    getContainerProps: ({ prev }) => {
-      const prevProps = prev?.();
+    getContainerProps: ({ prev }, treeLabel) => {
+      const prevProps = prev?.(treeLabel);
       return {
         ...prevProps,
         style: {
@@ -93,7 +93,7 @@ export const dragAndDropFeature: FeatureImplementation = {
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
 
-      draggable: tree.getConfig().isItemDraggable?.(item) ?? true,
+      draggable: true,
 
       onDragStart: (e: DragEvent) => {
         const selectedItems = tree.getSelectedItems();
@@ -179,7 +179,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         tree.getConfig().onCompleteForeignDrop?.(draggedItems);
       },
 
-      onDrop: (e: DragEvent) => {
+      onDrop: async (e: DragEvent) => {
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDropTarget(e, item, tree);
 
@@ -195,11 +195,10 @@ export const dragAndDropFeature: FeatureImplementation = {
         tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
-          config.onDrop?.(draggedItems, target);
+          await config.onDrop?.(draggedItems, target);
         } else if (e.dataTransfer) {
-          config.onDropForeignDragObject?.(e.dataTransfer, target);
+          await config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
-        // TODO rebuild tree?
       },
     }),
 
@@ -213,7 +212,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       if (
         !target ||
-        target.childIndex === null ||
+        !("childIndex" in target) ||
         target.item !== item.getParent()
       )
         return false;
@@ -225,7 +224,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       if (
         !target ||
-        target.childIndex === null ||
+        !("childIndex" in target) ||
         target.item !== item.getParent()
       )
         return false;

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

@@ -1,22 +1,22 @@
 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 = {
+export interface DragLineData {
   indent: number;
   top: number;
   left: number;
   width: number;
-};
+}
 
 export type DropTarget<T> =
   | {
@@ -27,11 +27,7 @@ export type DropTarget<T> =
       dragLineLevel: number;
     }
   | {
-      item: ItemInstance<T>; // TODO just omit values instead of nulls; or maybe just make it union of dropTarget+itemInstance?
-      childIndex: null;
-      insertionIndex: null;
-      dragLineIndex: null;
-      dragLineLevel: null;
+      item: ItemInstance<T>;
     };
 
 export enum DropTargetPosition {
@@ -53,8 +49,6 @@ export type DragAndDropFeatureDef<T> = {
     reorderAreaPercentage?: number;
     canReorder?: boolean;
 
-    // TODO better document difference to canDrag(), or unify both
-    isItemDraggable?: (item: ItemInstance<T>) => boolean;
     canDrag?: (items: ItemInstance<T>[]) => boolean;
     canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
 
@@ -68,26 +62,20 @@ export type DragAndDropFeatureDef<T> = {
       dataTransfer: DataTransfer,
       target: DropTarget<T>,
     ) => boolean;
-    onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
+    onDrop?: (
+      items: ItemInstance<T>[],
+      target: DropTarget<T>,
+    ) => void | Promise<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.
-     */
-    // onSuccessfulDragEnd?: (items: ItemInstance<T>[]) => void;
-
+    ) => void | Promise<void>;
     onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
   };
   treeInstance: {
     getDropTarget: () => DropTarget<T> | null;
     getDragLineData: () => DragLineData | null;
+
     getDragLineStyle: (
       topOffset?: number,
       leftOffset?: number,
@@ -95,8 +83,8 @@ export type DragAndDropFeatureDef<T> = {
   };
   itemInstance: {
     isDropTarget: () => boolean;
-    isDropTargetAbove: () => boolean; // TODO still correct?
-    isDropTargetBelow: () => boolean; // TODO still correct?
+    isDropTargetAbove: () => boolean;
+    isDropTargetBelow: () => boolean;
     isDraggingOver: () => boolean;
   };
   hotkeys: never;

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

@@ -66,7 +66,7 @@ const getItemDropCategory = (item: ItemInstance<any>) => {
   }
 
   const parent = item.getParent();
-  if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+  if (parent && item.getIndexInParent() === item.getItemMeta().setSize - 1) {
     return ItemDropCategory.LastInGroup;
   }
 
@@ -88,8 +88,8 @@ const getTargetPlacement = (
   }
 
   const bb = item.getElement()?.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
@@ -111,9 +111,10 @@ const getTargetPlacement = (
       if (topPercent < 0.5) {
         return { type: PlacementType.ReorderAbove };
       }
+      const minLevel = item.getItemBelow()?.getItemMeta().level ?? 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
@@ -161,22 +162,8 @@ export const getDropTarget = (
   const draggedItems = tree.getState().dnd?.draggedItems ?? [];
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
-  const itemTarget: DropTarget<any> = {
-    item,
-    childIndex: null,
-    insertionIndex: null,
-    dragLineIndex: null,
-    dragLineLevel: null,
-  };
-  const parentTarget: DropTarget<any> | null = parent
-    ? {
-        item: parent,
-        childIndex: null,
-        insertionIndex: null,
-        dragLineIndex: null,
-        dragLineLevel: null,
-      }
-    : null;
+  const itemTarget: DropTarget<any> = { item };
+  const parentTarget: DropTarget<any> | null = parent ? { item: parent } : null;
   const canBecomeSibling =
     parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
 

package/src/features/expand-all/feature.ts

@@ -1,5 +1,4 @@
 import { FeatureImplementation } from "../../types/core";
-import { poll } from "../../utils";
 
 export const expandAllFeature: FeatureImplementation = {
   key: "expand-all",
@@ -27,22 +26,47 @@ export const expandAllFeature: FeatureImplementation = {
       }
 
       item.expand();
-      await poll(() => !tree.getState().loadingItems.includes(item.getId()));
+      await tree.waitForItemChildrenLoaded(item.getId());
       await Promise.all(
         item.getChildren().map(async (child) => {
-          await poll(
-            () => !tree.getState().loadingItems.includes(child.getId()),
-          );
+          await tree.waitForItemChildrenLoaded(item.getId());
           await child?.expandAll(cancelToken);
         }),
       );
     },
 
     collapseAll: ({ item }) => {
+      if (!item.isExpanded()) return;
       for (const child of item.getChildren()) {
         child?.collapseAll();
       }
       item.collapse();
     },
   },
+
+  hotkeys: {
+    expandSelected: {
+      hotkey: "Control+Shift+Plus",
+      handler: async (_, tree) => {
+        const cancelToken = { current: false };
+        const cancelHandler = (e: KeyboardEvent) => {
+          if (e.key === "Escape") {
+            cancelToken.current = true;
+          }
+        };
+        document.addEventListener("keydown", cancelHandler);
+        await 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/src/features/expand-all/types.ts

@@ -1,3 +1,5 @@
+export interface ExpandAllDataRef {}
+
 export type ExpandAllFeatureDef = {
   state: {};
   config: {};
@@ -9,5 +11,5 @@ export type ExpandAllFeatureDef = {
     expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
     collapseAll: () => void;
   };
-  hotkeys: never;
+  hotkeys: "expandSelected" | "collapseSelected";
 };

package/src/features/hotkeys-core/feature.ts

@@ -8,6 +8,8 @@ import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 const specialKeys: Record<string, RegExp> = {
   Letter: /^[a-z]$/,
   LetterOrNumber: /^[a-z0-9]$/,
+  Plus: /^\+$/,
+  Space: /^ $/,
 };
 
 const testHotkeyMatch = (
@@ -71,6 +73,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (hotkeyConfig.preventDefault) e.preventDefault();
 
       hotkeyConfig.handler(e, tree as any);
+      tree.getConfig().onTreeHotkey?.(hotkeyName, e);
     };
 
     const keyup = (e: KeyboardEvent) => {

package/src/features/hotkeys-core/types.ts

@@ -1,8 +1,4 @@
-import {
-  CustomHotkeysConfig,
-  ItemInstance,
-  TreeInstance,
-} from "../../types/core";
+import { CustomHotkeysConfig, TreeInstance } from "../../types/core";
 
 export interface HotkeyConfig<T> {
   hotkey: string;
@@ -13,22 +9,17 @@ export interface HotkeyConfig<T> {
   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/src/features/prop-memoization/feature.ts

@@ -34,9 +34,9 @@ export const propMemoizationFeature: FeatureImplementation = {
   ],
 
   treeInstance: {
-    getContainerProps: ({ tree, prev }) => {
+    getContainerProps: ({ tree, prev }, treeLabel) => {
       const dataRef = tree.getDataRef<PropMemoizationDataRef>();
-      const props = prev?.() ?? {};
+      const props = prev?.(treeLabel) ?? {};
       return memoize(props, dataRef.current);
     },
   },