@headless-tree/core 0.0.13 → 0.0.15

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

@@ -0,0 +1,255 @@
+import {
+  FeatureImplementation,
+  ItemInstance,
+  TreeInstance,
+} from "../../types/core";
+import { DndDataRef, DragTarget } from "../drag-and-drop/types";
+import {
+  ItemDropCategory,
+  canDrop,
+  getInsertionIndex,
+  getItemDropCategory,
+  getReparentTarget,
+} from "../drag-and-drop/utils";
+import { makeStateUpdater } from "../../utils";
+import { AssistiveDndState, KDndDataRef } from "./types";
+
+const getNextDragTarget = <T>(
+  tree: TreeInstance<T>,
+  isUp: boolean,
+  dragTarget: DragTarget<T>,
+): DragTarget<T> | undefined => {
+  const direction = isUp ? 0 : 1;
+  const draggedItems = tree.getState().dnd?.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 = targetedItem?.getItemMeta().level ?? 0;
+    const minLevel = targetedItem?.getItemBelow()?.getItemMeta().level ?? 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 = <T>(
+  tree: TreeInstance<T>,
+  isUp: boolean,
+  previousTarget = tree.getState().dnd?.dragTarget,
+): DragTarget<T> | undefined => {
+  if (!previousTarget) return undefined;
+  const nextTarget = getNextDragTarget(tree, isUp, previousTarget);
+  const dataTransfer =
+    tree.getDataRef<KDndDataRef>().current.kDndDataTransfer ?? null;
+  if (!nextTarget) return undefined;
+  if (canDrop(dataTransfer, nextTarget, tree)) {
+    return nextTarget;
+  }
+  return getNextValidDragTarget(tree, isUp, nextTarget);
+};
+
+const updateScroll = <T>(tree: TreeInstance<T>) => {
+  const state = tree.getState().dnd;
+  if (!state?.dragTarget || "childIndex" in state.dragTarget) return;
+  state.dragTarget.item.scrollTo({ block: "nearest", inline: "nearest" });
+};
+
+const initiateDrag = <T>(
+  tree: TreeInstance<T>,
+  draggedItems?: ItemInstance<T>[],
+  dataTransfer?: DataTransfer,
+) => {
+  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
+    tree.getConfig().onStartKeyboardDrag?.(draggedItems);
+  } else if (dataTransfer) {
+    tree.getDataRef<KDndDataRef>().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 = <T>(tree: TreeInstance<T>, isUp: boolean) => {
+  const dragTarget = getNextValidDragTarget(tree, isUp);
+  if (!dragTarget) return;
+  tree.applySubStateUpdate("dnd", {
+    draggedItems: tree.getState().dnd?.draggedItems,
+    dragTarget,
+  });
+  tree.applySubStateUpdate("assistiveDndState", AssistiveDndState.Dragging);
+  if (!("childIndex" in dragTarget)) {
+    dragTarget.item.setFocused();
+  }
+  updateScroll(tree);
+};
+
+export const keyboardDragAndDropFeature: FeatureImplementation = {
+  key: "keyboard-drag-and-drop",
+  deps: ["drag-and-drop"],
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    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<KDndDataRef>().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: async (e, tree) => {
+        e.stopPropagation();
+        // TODO copied from keyboard onDrop, unify them
+        const dataRef = tree.getDataRef<DndDataRef & KDndDataRef>();
+        const target = tree.getDragTarget();
+        const dataTransfer = dataRef.current.kDndDataTransfer ?? null;
+
+        if (!target || !canDrop(dataTransfer, target, tree)) {
+          return;
+        }
+
+        const config = tree.getConfig();
+        const draggedItems = tree.getState().dnd?.draggedItems;
+
+        dataRef.current.lastDragCode = undefined;
+        tree.applySubStateUpdate("dnd", null);
+
+        if (draggedItems) {
+          await config.onDrop?.(draggedItems, target);
+          tree.getItemInstance(draggedItems[0].getId()).setFocused();
+        } else if (dataTransfer) {
+          await config.onDropForeignDragObject?.(dataTransfer, target);
+        }
+
+        tree.applySubStateUpdate(
+          "assistiveDndState",
+          AssistiveDndState.Completed,
+        );
+      },
+    },
+  },
+};

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

@@ -0,0 +1,401 @@
+import { describe, expect, it, vi } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { selectionFeature } from "../selection/feature";
+import { ItemInstance } from "../../types/core";
+import { propMemoizationFeature } from "../prop-memoization/feature";
+import { keyboardDragAndDropFeature } from "./feature";
+import { dragAndDropFeature } from "../drag-and-drop/feature";
+import { AssistiveDndState } from "./types";
+
+const isItem = (item: unknown): item is ItemInstance<any> =>
+  !!item && typeof item === "object" && "getId" in item;
+const areItemsEqual = (a: ItemInstance<any>, b: ItemInstance<any>) => {
+  if (!isItem(a) || !isItem(b)) return undefined;
+  if (a.getId() === b.getId()) return true;
+  console.warn("Items are not equal:", a.getId(), b.getId());
+  return false;
+};
+expect.addEqualityTesters([areItemsEqual]);
+
+const factory = TestTree.default({
+  initialState: {
+    expandedItems: ["x1", "x11", "x2", "x21"],
+  },
+  onDrop: vi.fn(),
+}).withFeatures(
+  selectionFeature,
+  dragAndDropFeature,
+  keyboardDragAndDropFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/keyboard-drag-and-drop", () => {
+  factory.forSuits((tree) => {
+    describe("happy paths", () => {
+      it("correct initial state", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 2,
+            dragLineIndex: 4,
+            dragLineLevel: 2,
+            insertionIndex: 0,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
+      });
+
+      it("moves down 1", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 5,
+            dragLineLevel: 2,
+            insertionIndex: 1,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+      });
+
+      it("moves down 2", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 4,
+            dragLineIndex: 6,
+            dragLineLevel: 2,
+            insertionIndex: 2,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+      });
+
+      it("reparent down", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 1,
+            dragLineIndex: 6,
+            dragLineLevel: 1,
+            insertionIndex: 1,
+            item: tree.item("x1"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+      });
+
+      it("doesn't reparent further", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", {
+          dragTarget: { item: tree.item("x12") },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+      });
+
+      it("reparent back up", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragUp");
+        tree.expect.substate("dnd", {
+          dragTarget: {
+            childIndex: 4,
+            dragLineIndex: 6,
+            dragLineLevel: 2,
+            insertionIndex: 2,
+            item: tree.item("x11"),
+          },
+          draggedItems: [tree.item("x111"), tree.item("x112")],
+        });
+      });
+    });
+
+    describe("dropping", () => {
+      it("drops below starting items", async () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("completeDrag");
+        tree.expect.dropped(["x111", "x112"], {
+          childIndex: 4,
+          insertionIndex: 2,
+          dragLineIndex: 6,
+          dragLineLevel: 2,
+          item: tree.item("x11"),
+        });
+        await vi.waitFor(() =>
+          tree.expect.substate(
+            "assistiveDndState",
+            AssistiveDndState.Completed,
+          ),
+        );
+      });
+
+      it("drops above starting items", async () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragUp");
+        tree.do.hotkey("dragUp");
+        tree.do.hotkey("completeDrag");
+        tree.expect.dropped(["x111", "x112"], {
+          childIndex: 0,
+          insertionIndex: 0,
+          dragLineIndex: 2,
+          dragLineLevel: 2,
+          item: tree.item("x11"),
+        });
+        await vi.waitFor(() =>
+          tree.expect.substate(
+            "assistiveDndState",
+            AssistiveDndState.Completed,
+          ),
+        );
+      });
+
+      it("drops inside folder", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("completeDrag");
+        tree.expect.dropped(["x111", "x112"], {
+          item: tree.item("x12"),
+        });
+      });
+
+      it("cancels drag", async () => {
+        const onDrop = tree.mockedHandler("onDrop");
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("cancelDrag");
+        expect(onDrop).not.toBeCalled();
+        tree.expect.substate("dnd", null);
+        tree.expect.substate("assistiveDndState", AssistiveDndState.None);
+      });
+    });
+
+    describe("foreign drag", () => {
+      it("drags items out of tree", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        expect(tree.instance.getState().dnd?.draggedItems).toStrictEqual([
+          tree.item("x111"),
+          tree.item("x112"),
+        ]);
+        tree.instance.stopKeyboardDrag();
+        expect(tree.instance.getState().dnd).toBe(null);
+      });
+
+      it("drags items inside of tree", async () => {
+        tree.mockedHandler("canDropForeignDragObject").mockReturnValue(true);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            childIndex: 1,
+            dragLineIndex: 3,
+            dragLineLevel: 2,
+            insertionIndex: 1,
+            item: tree.item("x11"),
+          },
+        });
+      });
+
+      it("starts at first valid location when dragging foreign object", async () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            childIndex: 2,
+            dragLineIndex: 4,
+            dragLineLevel: 2,
+            insertionIndex: 2,
+            item: tree.item("x11"),
+          },
+        });
+      });
+
+      it("skips invalid positions to inbetween when dragging foreign object", async () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 5,
+            dragLineLevel: 2,
+            insertionIndex: 3,
+            item: tree.item("x11"),
+          },
+        });
+      });
+
+      it("skips invalid positions to folder when dragging foreign object", async () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        tree.item("x111").setFocused();
+        const dataTransfer = {
+          getData: vi.fn().mockReturnValue("hello world"),
+        };
+        tree.instance.startKeyboardDragOnForeignObject(
+          dataTransfer as unknown as DataTransfer,
+        );
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        canDropForeignDragObject.mockReturnValueOnce(false);
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("assistiveDndState", AssistiveDndState.Dragging);
+        tree.expect.substate("dnd", {
+          draggedItems: undefined,
+          dragTarget: {
+            item: tree.item("x114"),
+          },
+        });
+      });
+    });
+
+    describe("drag restrictions", () => {
+      const expectChildIndex = (index: number) => {
+        const state = tree.instance.getState().dnd?.dragTarget;
+        if (!state || !("childIndex" in state))
+          throw new Error("No childIndex");
+        expect(state.childIndex).toEqual(index);
+      };
+
+      it("doesnt drag when canDrag=false", () => {
+        const canDrag = tree.mockedHandler("canDrag").mockReturnValue(false);
+        tree.do.selectMultiple("x111", "x112");
+        tree.do.hotkey("startDrag");
+        expect(canDrag).toHaveBeenCalledWith([
+          tree.item("x111"),
+          tree.item("x112"),
+        ]);
+        tree.expect.substate("dnd", undefined);
+        tree.expect.substate("assistiveDndState", undefined);
+      });
+
+      it("skips positions during arrowing that have canDrop=false", () => {
+        // note that, with mocked canDrop, non-folders are viable targets
+        const canDrop = tree.mockedHandler("canDrop").mockReturnValue(true);
+        tree.do.selectMultiple("x111");
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        expect(canDrop).toBeCalled();
+        expectChildIndex(2);
+
+        canDrop.mockReturnValueOnce(false);
+        canDrop.mockReturnValueOnce(false);
+        canDrop.mockReturnValueOnce(false);
+        tree.do.hotkey("dragDown");
+        expectChildIndex(4);
+      });
+
+      it("doesnt go below end of tree", () => {
+        const lastState = {
+          draggedItems: [tree.item("x111")],
+          dragTarget: {
+            item: tree.item("x"),
+            childIndex: 4,
+            dragLineIndex: 20,
+            dragLineLevel: 0,
+            insertionIndex: 4,
+          },
+        };
+
+        tree.do.selectMultiple("x111");
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", lastState);
+        tree.do.hotkey("dragDown");
+        tree.expect.substate("dnd", lastState);
+      });
+
+      it("doesnt go above top of tree", () => {
+        const firstState = {
+          draggedItems: [tree.item("x111")],
+          dragTarget: {
+            item: tree.item("x"),
+            childIndex: 0,
+            dragLineIndex: 0,
+            dragLineLevel: 0,
+            insertionIndex: 0,
+          },
+        };
+
+        tree.do.selectMultiple("x111");
+        tree.item("x1").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.do.hotkey("dragUp");
+        tree.do.hotkey("dragUp");
+        tree.expect.substate("dnd", firstState);
+        tree.do.hotkey("dragUp");
+        tree.expect.substate("dnd", firstState);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,30 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+
+export interface KDndDataRef {
+  kDndDataTransfer: DataTransfer | undefined;
+}
+
+export enum AssistiveDndState {
+  None,
+  Started,
+  Dragging,
+  Completed,
+  Aborted,
+}
+
+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/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);
     },
   },