@headless-tree/core 0.0.11 → 0.0.12

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

@@ -1,21 +1,17 @@
-import { FeatureDefs, FeatureImplementation } from "../../types/core";
-import { DndDataRef, DragAndDropFeatureDef, DragLineData } from "./types";
+import { FeatureImplementation } from "../../types/core";
+import { DndDataRef, DragLineData } from "./types";
 import { canDrop, getDragCode, getDropTarget } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
-export const dragAndDropFeature: FeatureImplementation<
-  any,
-  DragAndDropFeatureDef<any>,
-  FeatureDefs<any>
-> = {
-  key: "dragAndDrop",
+export const dragAndDropFeature: FeatureImplementation = {
+  key: "drag-and-drop",
   deps: ["selection"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
     canDropForeignDragObject: () => false,
     setDndState: makeStateUpdater("dnd", tree),
-    canDropInbetween: true,
+    canReorder: true,
     ...defaultConfig,
   }),
 
@@ -29,11 +25,12 @@ export const dragAndDropFeature: FeatureImplementation<
     },
 
     getDragLineData: ({ tree }): DragLineData | null => {
-      // TODO doesnt work if scrolled down!
       const target = tree.getDropTarget();
-      const indent = (target?.item.getItemMeta().level ?? 0) + 1; // TODO rename to indent
+      const indent = (target?.item.getItemMeta().level ?? 0) + 1;
 
-      if (!target || target.childIndex === null) return null;
+      const treeBb = tree.getElement()?.getBoundingClientRect();
+
+      if (!target || !treeBb || target.childIndex === null) return null;
 
       const leftOffset = target.dragLineLevel * (tree.getConfig().indent ?? 1);
       const targetItem = tree.getItems()[target.dragLineIndex];
@@ -47,9 +44,9 @@ export const dragAndDropFeature: FeatureImplementation<
         if (bb) {
           return {
             indent,
-            top: bb.bottom,
-            left: bb.left + leftOffset,
-            right: bb.right,
+            top: bb.bottom - treeBb.bottom,
+            left: bb.left + leftOffset - treeBb.left,
+            width: bb.width - leftOffset,
           };
         }
       }
@@ -59,9 +56,9 @@ export const dragAndDropFeature: FeatureImplementation<
       if (bb) {
         return {
           indent,
-          top: bb.top,
-          left: bb.left + leftOffset,
-          right: bb.right,
+          top: bb.top - treeBb.top,
+          left: bb.left + leftOffset - treeBb.left,
+          width: bb.width - leftOffset,
         };
       }
 
@@ -74,90 +71,94 @@ export const dragAndDropFeature: FeatureImplementation<
         ? {
             top: `${dragLine.top + topOffset}px`,
             left: `${dragLine.left + leftOffset}px`,
-            width: `${dragLine.right - dragLine.left - leftOffset}px`,
+            width: `${dragLine.width - leftOffset}px`,
             pointerEvents: "none", // important to prevent capturing drag events
           }
         : { display: "none" };
     },
+
+    getContainerProps: ({ prev }) => {
+      const prevProps = prev?.();
+      return {
+        ...prevProps,
+        style: {
+          ...prevProps?.style,
+          position: "relative",
+        },
+      };
+    },
   },
 
   itemInstance: {
-    // TODO instead of individual getMemoizedProp calls, use a wrapped getMemoizedProps or something (getProps: () => getMemoized({...})
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
 
       draggable: tree.getConfig().isItemDraggable?.(item) ?? true,
 
-      onDragStart: item.getMemoizedProp(
-        "dnd/onDragStart",
-        () => (e: DragEvent) => {
-          const selectedItems = tree.getSelectedItems();
-          const items = selectedItems.includes(item) ? selectedItems : [item];
-          const config = tree.getConfig();
+      onDragStart: (e: DragEvent) => {
+        const selectedItems = tree.getSelectedItems();
+        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const config = tree.getConfig();
 
-          if (!selectedItems.includes(item)) {
-            tree.setSelectedItems([item.getItemMeta().itemId]);
-          }
+        if (!selectedItems.includes(item)) {
+          tree.setSelectedItems([item.getItemMeta().itemId]);
+        }
 
-          if (!(config.canDrag?.(items) ?? true)) {
+        if (!(config.canDrag?.(items) ?? true)) {
+          e.preventDefault();
+          return;
+        }
+
+        if (config.createForeignDragObject) {
+          const { format, data } = config.createForeignDragObject(items);
+          e.dataTransfer?.setData(format, data);
+        }
+
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem(),
+        });
+      },
+
+      onDragOver: (e: DragEvent) => {
+        const dataRef = tree.getDataRef<DndDataRef>();
+        const nextDragCode = getDragCode(e, item, tree);
+        if (nextDragCode === dataRef.current.lastDragCode) {
+          if (dataRef.current.lastAllowDrop) {
             e.preventDefault();
-            return;
           }
+          return;
+        }
+        dataRef.current.lastDragCode = nextDragCode;
 
-          if (config.createForeignDragObject) {
-            const { format, data } = config.createForeignDragObject(items);
-            e.dataTransfer?.setData(format, data);
-          }
+        const target = getDropTarget(e, item, tree);
 
-          tree.applySubStateUpdate("dnd", {
-            draggedItems: items,
-            draggingOverItem: tree.getFocusedItem(),
-          });
-        },
-      ),
-
-      onDragOver: item.getMemoizedProp(
-        "dnd/onDragOver",
-        () => (e: DragEvent) => {
-          const dataRef = tree.getDataRef<DndDataRef>();
-          const nextDragCode = getDragCode(e, item, tree);
-          if (nextDragCode === dataRef.current.lastDragCode) {
-            if (dataRef.current.lastAllowDrop) {
-              e.preventDefault();
-            }
-            return;
-          }
-          dataRef.current.lastDragCode = nextDragCode;
-
-          const target = getDropTarget(e, item, tree);
-
-          if (
-            !tree.getState().dnd?.draggedItems &&
-            (!e.dataTransfer ||
-              !tree
-                .getConfig()
-                .canDropForeignDragObject?.(e.dataTransfer, target))
-          ) {
-            dataRef.current.lastAllowDrop = false;
-            return;
-          }
+        if (
+          !tree.getState().dnd?.draggedItems &&
+          (!e.dataTransfer ||
+            !tree
+              .getConfig()
+              .canDropForeignDragObject?.(e.dataTransfer, target))
+        ) {
+          dataRef.current.lastAllowDrop = false;
+          return;
+        }
 
-          if (!canDrop(e.dataTransfer, target, tree)) {
-            dataRef.current.lastAllowDrop = false;
-            return;
-          }
+        if (!canDrop(e.dataTransfer, target, tree)) {
+          dataRef.current.lastAllowDrop = false;
+          return;
+        }
 
-          tree.applySubStateUpdate("dnd", (state) => ({
-            ...state,
-            dragTarget: target,
-            draggingOverItem: item,
-          }));
-          dataRef.current.lastAllowDrop = true;
-          e.preventDefault();
-        },
-      ),
+        tree.applySubStateUpdate("dnd", (state) => ({
+          ...state,
+          dragTarget: target,
+          draggingOverItem: item,
+        }));
+        dataRef.current.lastAllowDrop = true;
+        e.preventDefault();
+      },
 
-      onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
+      onDragLeave: () => {
         const dataRef = tree.getDataRef<DndDataRef>();
         dataRef.current.lastDragCode = "no-drag";
         tree.applySubStateUpdate("dnd", (state) => ({
@@ -165,9 +166,9 @@ export const dragAndDropFeature: FeatureImplementation<
           draggingOverItem: undefined,
           dragTarget: undefined,
         }));
-      }),
+      },
 
-      onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e: DragEvent) => {
+      onDragEnd: (e: DragEvent) => {
         const draggedItems = tree.getState().dnd?.draggedItems;
         tree.applySubStateUpdate("dnd", null);
 
@@ -176,9 +177,9 @@ export const dragAndDropFeature: FeatureImplementation<
         }
 
         tree.getConfig().onCompleteForeignDrop?.(draggedItems);
-      }),
+      },
 
-      onDrop: item.getMemoizedProp("dnd/onDrop", () => (e: DragEvent) => {
+      onDrop: (e: DragEvent) => {
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDropTarget(e, item, tree);
 
@@ -199,7 +200,7 @@ export const dragAndDropFeature: FeatureImplementation<
           config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
         // TODO rebuild tree?
-      }),
+      },
     }),
 
     isDropTarget: ({ tree, item }) => {

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

@@ -6,7 +6,7 @@ export type DndDataRef = {
 };
 
 export type DndState<T> = {
-  draggedItems?: ItemInstance<T>[]; // TODO not used anymore?
+  draggedItems?: ItemInstance<T>[];
   draggingOverItem?: ItemInstance<T>;
   dragTarget?: DropTarget<T>;
 };
@@ -15,7 +15,7 @@ export type DragLineData = {
   indent: number;
   top: number;
   left: number;
-  right: number;
+  width: number;
 };
 
 export type DropTarget<T> =
@@ -49,9 +49,9 @@ export type DragAndDropFeatureDef<T> = {
 
     /** Defines the size of the area at the top and bottom of an item where, when an item is dropped, the item willö
      * be placed above or below the item within the same parent, as opposed to being placed inside the item.
-     * If `canDropInbetween` is `false`, this is ignored. */
+     * If `canReorder` is `false`, this is ignored. */
     reorderAreaPercentage?: number;
-    canDropInbetween?: boolean;
+    canReorder?: boolean;
 
     // TODO better document difference to canDrag(), or unify both
     isItemDraggable?: (item: ItemInstance<T>) => boolean;

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

@@ -81,7 +81,7 @@ const getTargetPlacement = (
 ): TargetPlacement => {
   const config = tree.getConfig();
 
-  if (!config.canDropInbetween) {
+  if (!config.canReorder) {
     return canMakeChild
       ? { type: PlacementType.MakeChild }
       : { type: PlacementType.ReorderBelow };
@@ -156,7 +156,7 @@ export const getDropTarget = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
-  canDropInbetween = tree.getConfig().canDropInbetween,
+  canReorder = tree.getConfig().canReorder,
 ): DropTarget<any> => {
   const draggedItems = tree.getState().dnd?.draggedItems ?? [];
   const itemMeta = item.getItemMeta();
@@ -184,7 +184,7 @@ export const getDropTarget = (
   const placement = getTargetPlacement(e, item, tree, canMakeChild);
 
   if (
-    !canDropInbetween &&
+    !canReorder &&
     parent &&
     canBecomeSibling &&
     placement.type !== PlacementType.MakeChild
@@ -192,7 +192,7 @@ export const getDropTarget = (
     return parentTarget;
   }
 
-  if (!canDropInbetween && parent && !canBecomeSibling) {
+  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);
   }

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

@@ -1,8 +1,12 @@
 import { describe, it } from "vitest";
 import { TestTree } from "../../test-utils/test-tree";
 import { expandAllFeature } from "./feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
 
-const factory = TestTree.default({}).withFeatures(expandAllFeature);
+const factory = TestTree.default({}).withFeatures(
+  expandAllFeature,
+  propMemoizationFeature,
+);
 
 describe("core-feature/expand-all", () => {
   factory.forSuits((tree) => {

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

@@ -1,18 +1,7 @@
 import { FeatureImplementation } from "../../types/core";
-import { ExpandAllFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
 import { poll } from "../../utils";
 
-export const expandAllFeature: FeatureImplementation<
-  any,
-  ExpandAllFeatureDef,
-  | MainFeatureDef
-  | TreeFeatureDef<any>
-  | SyncDataLoaderFeatureDef<any>
-  | ExpandAllFeatureDef
-> = {
+export const expandAllFeature: FeatureImplementation = {
   key: "expand-all",
 
   treeInstance: {

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

@@ -3,12 +3,7 @@ import {
   HotkeysConfig,
   TreeInstance,
 } from "../../types/core";
-import {
-  HotkeyConfig,
-  HotkeysCoreDataRef,
-  HotkeysCoreFeatureDef,
-} from "./types";
-import { MainFeatureDef } from "../main/types";
+import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 
 const specialKeys: Record<string, RegExp> = {
   Letter: /^[a-z]$/,
@@ -34,19 +29,15 @@ const testHotkeyMatch = (
 const findHotkeyMatch = (
   pressedKeys: Set<string>,
   tree: TreeInstance<any>,
-  config1: HotkeysConfig<any, any>,
-  config2: HotkeysConfig<any, any>,
+  config1: HotkeysConfig<any>,
+  config2: HotkeysConfig<any>,
 ) => {
   return Object.entries({ ...config1, ...config2 }).find(([, hotkey]) =>
     testHotkeyMatch(pressedKeys, tree, hotkey),
   )?.[0] as keyof HotkeysConfig<any> | undefined;
 };
 
-export const hotkeysCoreFeature: FeatureImplementation<
-  any,
-  HotkeysCoreFeatureDef<any>,
-  MainFeatureDef | HotkeysCoreFeatureDef<any>
-> = {
+export const hotkeysCoreFeature: FeatureImplementation = {
   key: "hotkeys-core",
 
   onTreeMount: (tree, element) => {

package/src/features/prop-memoization/feature.ts

@@ -0,0 +1,51 @@
+import { FeatureImplementation } from "../../types/core";
+import { PropMemoizationDataRef } from "./types";
+
+const memoize = (
+  props: Record<string, any>,
+  dataRef: PropMemoizationDataRef,
+) => {
+  dataRef.memoizedProps ??= {};
+  for (const key in props) {
+    if (typeof props[key] === "function") {
+      if (key in dataRef.memoizedProps) {
+        props[key] = dataRef.memoizedProps[key];
+      } else {
+        dataRef.memoizedProps[key] = props[key];
+      }
+    }
+  }
+  return props;
+};
+
+export const propMemoizationFeature: FeatureImplementation = {
+  key: "prop-memoization",
+
+  overwrites: [
+    "main",
+    "async-data-loader",
+    "sync-data-loader",
+    "drag-and-drop",
+    "expand-all",
+    "hotkeys-core",
+    "renaming",
+    "search",
+    "selection",
+  ],
+
+  treeInstance: {
+    getContainerProps: ({ tree, prev }) => {
+      const dataRef = tree.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      return memoize(props, dataRef.current);
+    },
+  },
+
+  itemInstance: {
+    getProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      return memoize(props, dataRef.current);
+    },
+  },
+};

package/src/features/prop-memoization/prop-memoization.spec.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { propMemoizationFeature } from "./feature";
+import { FeatureImplementation } from "../../types/core";
+
+const itemHandler = vi.fn();
+const treeHandler = vi.fn();
+const createItemValue = vi.fn();
+const createTreeValue = vi.fn();
+
+const customFeature: FeatureImplementation = {
+  itemInstance: {
+    getProps: ({ prev }) => ({
+      ...prev?.(),
+      customValue: createItemValue(),
+      onCustomEvent: () => itemHandler(),
+    }),
+  },
+  treeInstance: {
+    getContainerProps: ({ prev }) => ({
+      ...prev?.(),
+      customValue: createTreeValue(),
+      onCustomEvent: () => treeHandler(),
+    }),
+  },
+};
+
+const factory = TestTree.default({}).withFeatures(
+  customFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/prop-memoization", () => {
+  it("memoizes props", async () => {
+    const tree = await factory.suits.sync().tree.createTestCaseTree();
+    createTreeValue.mockReturnValue(123);
+    expect(tree.instance.getContainerProps().onCustomEvent).toBe(
+      tree.instance.getContainerProps().onCustomEvent,
+    );
+    expect(tree.instance.getContainerProps().customValue).toBe(123);
+    expect(tree.instance.getContainerProps().customValue).toBe(123);
+  });
+  factory.forSuits((tree) => {
+    describe("tree props", () => {
+      it("memoizes props", async () => {
+        createTreeValue.mockReturnValue(123);
+        expect(tree.instance.getContainerProps().onCustomEvent).toBe(
+          tree.instance.getContainerProps().onCustomEvent,
+        );
+        expect(tree.instance.getContainerProps().customValue).toBe(123);
+        expect(tree.instance.getContainerProps().customValue).toBe(123);
+      });
+
+      it("doesnt return stale values", async () => {
+        createTreeValue.mockReturnValueOnce(123);
+        createTreeValue.mockReturnValueOnce(456);
+        expect(tree.instance.getContainerProps().customValue).toBe(123);
+        expect(tree.instance.getContainerProps().customValue).toBe(456);
+      });
+
+      it("propagates calls properly", async () => {
+        tree.instance.getContainerProps().onCustomEvent();
+        tree.instance.getContainerProps().onCustomEvent();
+        expect(treeHandler).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+});

package/src/features/prop-memoization/types.ts

@@ -0,0 +1,11 @@
+export type PropMemoizationDataRef = {
+  memoizedProps?: Record<string, any>;
+};
+
+export type PropMemoizationFeatureDef = {
+  state: {};
+  config: {};
+  treeInstance: {};
+  itemInstance: {};
+  hotkeys: never;
+};

package/src/features/renaming/feature.ts

@@ -1,14 +1,7 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
-import { RenamingFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
 import { makeStateUpdater } from "../../utils";
 
-export const renamingFeature: FeatureImplementation<
-  any,
-  RenamingFeatureDef<any>,
-  MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>
-> = {
+export const renamingFeature: FeatureImplementation = {
   key: "renaming",
 
   getDefaultConfig: (defaultConfig, tree) => ({
@@ -24,17 +17,6 @@ export const renamingFeature: FeatureImplementation<
   },
 
   treeInstance: {
-    startRenamingItem: ({ tree }, itemId) => {
-      const item = tree.getItemInstance(itemId);
-
-      if (!item.canRename()) {
-        return;
-      }
-
-      tree.applySubStateUpdate("renamingItem", itemId);
-      tree.applySubStateUpdate("renamingValue", item.getItemName());
-    },
-
     getRenamingItem: ({ tree }) => {
       const itemId = tree.getState().renamingItem;
       return itemId ? tree.getItemInstance(itemId) : null;
@@ -61,6 +43,15 @@ export const renamingFeature: FeatureImplementation<
   },
 
   itemInstance: {
+    startRenaming: ({ tree, item, itemId }) => {
+      if (!item.canRename()) {
+        return;
+      }
+
+      tree.applySubStateUpdate("renamingItem", itemId);
+      tree.applySubStateUpdate("renamingValue", item.getItemName());
+    },
+
     getRenameInputProps: ({ tree }) => ({
       onBlur: () => tree.abortRenaming(),
       value: tree.getRenamingValue(),
@@ -81,7 +72,7 @@ export const renamingFeature: FeatureImplementation<
     renameItem: {
       hotkey: "F2",
       handler: (e, tree) => {
-        tree.startRenamingItem(tree.getFocusedItem().getId());
+        tree.getFocusedItem().startRenaming();
       },
     },
 

package/src/features/renaming/renaming.spec.ts

@@ -2,16 +2,18 @@ import { describe, expect, it } from "vitest";
 import { TestTree } from "../../test-utils/test-tree";
 import { renamingFeature } from "./feature";
 import { selectionFeature } from "../selection/feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
 
 const factory = TestTree.default({}).withFeatures(
   renamingFeature,
   selectionFeature,
+  propMemoizationFeature,
 );
 
 describe("core-feature/renaming", () => {
   factory.forSuits((tree) => {
     it("starts and aborts renaming", () => {
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       expect(tree.instance.isRenamingItem()).toBe(true);
       expect(tree.instance.getRenamingValue()).toBe("x1");
       tree.instance.abortRenaming();
@@ -19,7 +21,7 @@ describe("core-feature/renaming", () => {
     });
 
     it("stops renaming by blurring", () => {
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       tree.instance.getRenamingItem()!.getRenameInputProps().onBlur();
       expect(tree.instance.isRenamingItem()).toBe(false);
     });
@@ -27,7 +29,7 @@ describe("core-feature/renaming", () => {
     it("completes renaming programmatically", () => {
       const onRename = tree.mockedHandler("onRename");
 
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       expect(tree.instance.getRenamingItem()!.getRenameInputProps().value).toBe(
         "x1",
       );
@@ -51,7 +53,7 @@ describe("core-feature/renaming", () => {
     it("invokes state setters when aborting", () => {
       const setRenamingItem = tree.mockedHandler("setRenamingItem");
       const setRenamingValue = tree.mockedHandler("setRenamingValue");
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       expect(setRenamingItem).toHaveBeenCalledWith("x1");
       expect(setRenamingValue).toHaveBeenCalledWith("x1");
       tree.instance.abortRenaming();
@@ -61,7 +63,7 @@ describe("core-feature/renaming", () => {
     it("invokes state setters when completing", () => {
       const setRenamingItem = tree.mockedHandler("setRenamingItem");
       const setRenamingValue = tree.mockedHandler("setRenamingValue");
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       tree.instance
         .getRenamingItem()!
         .getRenameInputProps()
@@ -76,7 +78,7 @@ describe("core-feature/renaming", () => {
 
     it("changes renaming input content with input props", () => {
       const setRenamingValue = tree.mockedHandler("setRenamingValue");
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       tree.instance
         .getRenamingItem()!
         .getRenameInputProps()
@@ -86,7 +88,7 @@ describe("core-feature/renaming", () => {
 
     it("aborts renaming with input props", () => {
       const setRenamingItem = tree.mockedHandler("setRenamingItem");
-      tree.instance.startRenamingItem("x1");
+      tree.item("x1").startRenaming();
       tree.instance.getRenamingItem()!.getRenameInputProps().onBlur();
       expect(setRenamingItem).toHaveBeenCalledWith(null);
     });
@@ -100,14 +102,14 @@ describe("core-feature/renaming", () => {
 
       it("aborts renaming with Escape key", () => {
         const setRenamingItem = tree.mockedHandler("setRenamingItem");
-        tree.instance.startRenamingItem("x1");
+        tree.item("x1").startRenaming();
         tree.do.hotkey("abortRenaming");
         expect(setRenamingItem).toHaveBeenCalledWith(null);
       });
 
       it("completes renaming with Enter key", () => {
         const onRename = tree.mockedHandler("onRename");
-        tree.instance.startRenamingItem("x1");
+        tree.item("x1").startRenaming();
         tree.instance
           .getRenamingItem()!
           .getRenameInputProps()