@headless-tree/core 0.0.10 → 0.0.12

package/src/features/search/feature.ts

@@ -1,14 +1,8 @@
 import { FeatureImplementation } from "../../types/core";
-import { SearchFeatureDataRef, SearchFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
+import { SearchFeatureDataRef } from "./types";
 import { makeStateUpdater, memo } from "../../utils";
 
-export const searchFeature: FeatureImplementation<
-  any,
-  SearchFeatureDef<any>,
-  MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>
-> = {
+export const searchFeature: FeatureImplementation = {
   key: "search",
 
   getInitialState: (initialState) => ({
@@ -28,65 +22,61 @@ export const searchFeature: FeatureImplementation<
     search: "setSearch",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
-
-    setSearch: (search) => {
-      instance.applySubStateUpdate("search", search);
-      instance
+  treeInstance: {
+    setSearch: ({ tree }, search) => {
+      tree.applySubStateUpdate("search", search);
+      tree
         .getItems()
         .find((item) =>
-          instance
-            .getConfig()
-            .isSearchMatchingItem?.(instance.getSearchValue(), item),
+          tree.getConfig().isSearchMatchingItem?.(tree.getSearchValue(), item),
         )
         ?.setFocused();
     },
-    openSearch: (initialValue = "") => {
-      instance.setSearch(initialValue);
+    openSearch: ({ tree }, initialValue = "") => {
+      tree.setSearch(initialValue);
+      tree.getConfig().onOpenSearch?.();
       setTimeout(() => {
-        instance
-          .getDataRef<SearchFeatureDataRef>()
-          .current.searchInput?.focus();
+        tree.getDataRef<SearchFeatureDataRef>().current.searchInput?.focus();
       });
     },
-    closeSearch: () => {
-      instance.setSearch(null);
-      instance.updateDomFocus();
+    closeSearch: ({ tree }) => {
+      tree.setSearch(null);
+      tree.getConfig().onCloseSearch?.();
+      tree.updateDomFocus();
     },
-    isSearchOpen: () => instance.getState().search !== null,
-    getSearchValue: () => instance.getState().search || "",
-    registerSearchInputElement: (element) => {
-      const dataRef = instance.getDataRef<SearchFeatureDataRef>();
+    isSearchOpen: ({ tree }) => tree.getState().search !== null,
+    getSearchValue: ({ tree }) => tree.getState().search || "",
+    registerSearchInputElement: ({ tree }, element) => {
+      const dataRef = tree.getDataRef<SearchFeatureDataRef>();
       dataRef.current.searchInput = element;
       if (element && dataRef.current.keydownHandler) {
         element.addEventListener("keydown", dataRef.current.keydownHandler);
       }
     },
-    getSearchInputElement: () =>
-      instance.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
+    getSearchInputElement: ({ tree }) =>
+      tree.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
 
-    getSearchInputElementProps: () => ({
-      value: instance.getSearchValue(),
-      onChange: (e: any) => instance.setSearch(e.target.value),
-      onBlur: () => instance.closeSearch(),
+    getSearchInputElementProps: ({ tree }) => ({
+      value: tree.getSearchValue(),
+      onChange: (e: any) => tree.setSearch(e.target.value),
+      onBlur: () => tree.closeSearch(),
     }),
 
     getSearchMatchingItems: memo(
-      (search, items) =>
-        items.filter(
-          (item) =>
-            search && instance.getConfig().isSearchMatchingItem?.(search, item),
-        ),
-      () => [instance.getSearchValue(), instance.getItems()],
+      ({ tree }) => [
+        tree.getSearchValue(),
+        tree.getItems(),
+        tree.getConfig().isSearchMatchingItem,
+      ],
+      (search, items, isSearchMatchingItem) =>
+        items.filter((item) => search && isSearchMatchingItem?.(search, item)),
     ),
-  }),
+  },
 
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
-    isMatchingSearch: () =>
+  itemInstance: {
+    isMatchingSearch: ({ tree, item }) =>
       tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()),
-  }),
+  },
 
   hotkeys: {
     openSearch: {

package/src/features/search/search.spec.ts

@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { searchFeature } from "./feature";
+import { selectionFeature } from "../selection/feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
+
+const factory = TestTree.default({}).withFeatures(
+  searchFeature,
+  selectionFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/search", () => {
+  factory.forSuits((tree) => {
+    it("opens and closes search", () => {
+      tree.instance.openSearch();
+      expect(tree.instance.isSearchOpen()).toBe(true);
+      expect(tree.instance.getSearchValue()).toBe("");
+      tree.instance.closeSearch();
+      expect(tree.instance.isSearchOpen()).toBe(false);
+    });
+
+    it("opens and closes search with initial value", () => {
+      tree.instance.openSearch("test");
+      expect(tree.instance.isSearchOpen()).toBe(true);
+      expect(tree.instance.getSearchValue()).toBe("test");
+      tree.instance.closeSearch();
+      expect(tree.instance.isSearchOpen()).toBe(false);
+    });
+
+    it("invokes open and close handlers", () => {
+      const onOpenSearch = tree.mockedHandler("onOpenSearch");
+      const onCloseSearch = tree.mockedHandler("onCloseSearch");
+      tree.instance.openSearch("test");
+      expect(onOpenSearch).toHaveBeenCalled();
+      tree.instance.closeSearch();
+      expect(onCloseSearch).toHaveBeenCalled();
+    });
+
+    it("invokes state setter", () => {
+      const setSearch = tree.mockedHandler("setSearch");
+      tree.instance.openSearch("test");
+      expect(setSearch).toHaveBeenCalledWith("test");
+      tree.instance.closeSearch();
+      expect(setSearch).toHaveBeenCalledWith(null);
+    });
+
+    it("can search and return matches", () => {
+      tree.instance.setSearch("12");
+      expect(tree.instance.getSearchMatchingItems().length).toBe(2);
+      expect(tree.instance.getSearchMatchingItems()[0].getId()).toBe("x112");
+      expect(tree.instance.getSearchMatchingItems()[1].getId()).toBe("x12");
+    });
+
+    it("uses isSearchMatchingItem handler", () => {
+      const isSearchMatchingItem = tree.mockedHandler("isSearchMatchingItem");
+      isSearchMatchingItem.mockImplementation(
+        (_, item) => item.getId() === "x3",
+      );
+      tree.instance.setSearch("xyz");
+      expect(tree.instance.getSearchMatchingItems().length).toBe(1);
+      expect(tree.instance.getSearchMatchingItems()[0].getId()).toBe("x3");
+    });
+
+    it("changes search input contentwith input props", () => {
+      const setSearch = tree.mockedHandler("setSearch");
+      tree.instance
+        .getSearchInputElementProps()
+        .onChange({ target: { value: "test" } });
+      expect(setSearch).toHaveBeenCalledWith("test");
+    });
+
+    it("closes search input with input props", () => {
+      const onCloseSearch = tree.mockedHandler("onCloseSearch");
+      tree.instance.openSearch();
+      tree.instance.getSearchInputElementProps().onBlur();
+      expect(onCloseSearch).toHaveBeenCalled();
+    });
+
+    describe("hotkeys", () => {
+      it("opens search", () => {
+        const setSearch = tree.mockedHandler("setSearch");
+        tree.do.hotkey("openSearch");
+        expect(setSearch).toHaveBeenCalledWith("");
+      });
+
+      it("selects focused item when search is submitted", () => {
+        const setSelectedItems = tree.mockedHandler("setSelectedItems");
+        const onCloseSearch = tree.mockedHandler("onCloseSearch");
+        tree.item("x1").setFocused();
+        tree.do.hotkey("openSearch");
+        tree.do.hotkey("submitSearch");
+        expect(setSelectedItems).toHaveBeenCalledWith(["x1"]);
+        expect(onCloseSearch).toHaveBeenCalled();
+      });
+
+      it("scrolls through searched items", () => {
+        const setFocusedItem = tree.mockedHandler("setFocusedItem");
+        tree.instance.setSearch("12");
+        tree.do.hotkey("nextSearchItem");
+        expect(setFocusedItem).toHaveBeenCalledWith("x112");
+
+        tree.do.hotkey("nextSearchItem");
+        expect(setFocusedItem).toHaveBeenCalledWith("x12");
+
+        tree.do.hotkey("nextSearchItem");
+        expect(setFocusedItem).toHaveBeenCalledTimes(2);
+
+        tree.do.hotkey("previousSearchItem");
+        tree.do.hotkey("previousSearchItem");
+        tree.do.hotkey("previousSearchItem");
+        expect(setFocusedItem).toHaveBeenCalledTimes(3);
+        expect(setFocusedItem).nthCalledWith(3, "x112");
+      });
+    });
+  });
+});

package/src/features/search/types.ts

@@ -14,7 +14,6 @@ export type SearchFeatureDef<T> = {
     setSearch?: SetStateFn<string | null>;
     onOpenSearch?: () => void;
     onCloseSearch?: () => void;
-    onSearchMatchesItems?: (search: string, items: ItemInstance<T>[]) => void;
     isSearchMatchingItem?: (search: string, item: ItemInstance<T>) => boolean;
   };
   treeInstance: {

package/src/features/selection/feature.ts

@@ -1,14 +1,7 @@
 import { FeatureImplementation } from "../../types/core";
-import { SelectionFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
 import { makeStateUpdater } from "../../utils";
 
-export const selectionFeature: FeatureImplementation<
-  any,
-  SelectionFeatureDef<any>,
-  MainFeatureDef | TreeFeatureDef<any> | SelectionFeatureDef<any>
-> = {
+export const selectionFeature: FeatureImplementation = {
   key: "selection",
 
   getInitialState: (initialState) => ({
@@ -25,44 +18,38 @@ export const selectionFeature: FeatureImplementation<
     selectedItems: "setSelectedItems",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
-
-    setSelectedItems: (selectedItems) => {
-      instance.applySubStateUpdate("selectedItems", selectedItems);
+  treeInstance: {
+    setSelectedItems: ({ tree }, selectedItems) => {
+      tree.applySubStateUpdate("selectedItems", selectedItems);
     },
 
     // TODO memo
-    getSelectedItems: () => {
-      return instance.getState().selectedItems.map(instance.getItemInstance);
+    getSelectedItems: ({ tree }) => {
+      return tree.getState().selectedItems.map(tree.getItemInstance);
     },
-  }),
-
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
+  },
 
-    select: () => {
+  itemInstance: {
+    select: ({ tree, itemId }) => {
       const { selectedItems } = tree.getState();
       tree.setSelectedItems(
-        selectedItems.includes(item.getItemMeta().itemId)
+        selectedItems.includes(itemId)
           ? selectedItems
-          : [...selectedItems, item.getItemMeta().itemId],
+          : [...selectedItems, itemId],
       );
     },
 
-    deselect: () => {
+    deselect: ({ tree, itemId }) => {
       const { selectedItems } = tree.getState();
-      tree.setSelectedItems(
-        selectedItems.filter((id) => id !== item.getItemMeta().itemId),
-      );
+      tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
     },
 
-    isSelected: () => {
+    isSelected: ({ tree, item }) => {
       const { selectedItems } = tree.getState();
       return selectedItems.includes(item.getItemMeta().itemId);
     },
 
-    selectUpTo: (ctrl: boolean) => {
+    selectUpTo: ({ tree, item }, ctrl: boolean) => {
       const indexA = item.getItemMeta().index;
       // TODO dont use focused item as anchor, but last primary-clicked item
       const indexB = tree.getFocusedItem().getItemMeta().index;
@@ -84,7 +71,7 @@ export const selectionFeature: FeatureImplementation<
       tree.setSelectedItems(uniqueSelectedItems);
     },
 
-    toggleSelect: () => {
+    toggleSelect: ({ item }) => {
       if (item.isSelected()) {
         item.deselect();
       } else {
@@ -92,10 +79,10 @@ export const selectionFeature: FeatureImplementation<
       }
     },
 
-    getProps: () => ({
-      ...prev.getProps(),
+    getProps: ({ tree, item, prev }) => ({
+      ...prev?.(),
       "aria-selected": item.isSelected() ? "true" : "false",
-      onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
+      onClick: (e: MouseEvent) => {
         if (e.shiftKey) {
           item.selectUpTo(e.ctrlKey || e.metaKey);
         } else if (e.ctrlKey || e.metaKey) {
@@ -104,10 +91,10 @@ export const selectionFeature: FeatureImplementation<
           tree.setSelectedItems([item.getItemMeta().itemId]);
         }
 
-        prev.getProps().onClick?.(e);
-      }),
+        prev?.()?.onClick?.(e);
+      },
     }),
-  }),
+  },
 
   hotkeys: {
     // setSelectedItem: {
@@ -123,27 +110,37 @@ export const selectionFeature: FeatureImplementation<
       },
     },
     selectUpwards: {
-      hotkey: "shift+ArrowUp",
-      handler: () => {
-        // TODO
+      hotkey: "Shift+ArrowUp",
+      handler: (e, tree) => {
+        const focused = tree.getFocusedItem();
+        const above = focused.getItemAbove();
+        if (!above) return;
+
+        if (focused.isSelected() && above.isSelected()) {
+          focused.deselect();
+        } else {
+          above.select();
+        }
+
+        above.setFocused();
+        tree.updateDomFocus();
       },
     },
     selectDownwards: {
-      hotkey: "shift+ArrowDown",
-      handler: () => {
-        // TODO
-      },
-    },
-    selectUpwardsCtrl: {
-      hotkey: "shift+ctrl+ArrowUp",
-      handler: () => {
-        // TODO
-      },
-    },
-    selectDownwardsCtrl: {
-      hotkey: "shift+ctrl+ArrowUp",
-      handler: () => {
-        // TODO
+      hotkey: "Shift+ArrowDown",
+      handler: (e, tree) => {
+        const focused = tree.getFocusedItem();
+        const below = focused.getItemBelow();
+        if (!below) return;
+
+        if (focused.isSelected() && below.isSelected()) {
+          focused.deselect();
+        } else {
+          below.select();
+        }
+
+        below.setFocused();
+        tree.updateDomFocus();
       },
     },
     selectAll: {

package/src/features/selection/selection.spec.ts

@@ -0,0 +1,219 @@
+import { describe, expect, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { selectionFeature } from "./feature";
+import { propMemoizationFeature } from "../prop-memoization/feature";
+
+const factory = TestTree.default({}).withFeatures(
+  selectionFeature,
+  propMemoizationFeature,
+);
+
+describe("core-feature/selections", () => {
+  it("test", async () => {
+    const tree = await factory.suits.proxifiedSync().tree.createTestCaseTree();
+    tree.do.selectItem("x111");
+    expect(
+      tree.instance.getItemInstance("x111").getProps()["aria-selected"],
+    ).toBe("true");
+  });
+
+  factory.forSuits((tree) => {
+    it("sets aria-selected to false", () => {
+      expect(
+        tree.instance.getItemInstance("x111").getProps()["aria-selected"],
+      ).toBe("false");
+    });
+
+    it("sets aria-selected to true", () => {
+      tree.do.selectItem("x111");
+      expect(
+        tree.instance.getItemInstance("x111").getProps()["aria-selected"],
+      ).toBe("true");
+    });
+
+    it("resets old selection after new select", () => {
+      tree.do.selectItem("x111");
+      tree.do.selectItem("x112");
+      expect(
+        tree.instance.getItemInstance("x111").getProps()["aria-selected"],
+      ).toBe("false");
+      expect(
+        tree.instance.getItemInstance("x112").getProps()["aria-selected"],
+      ).toBe("true");
+      expect(tree.instance.getItemInstance("x111").isSelected()).toBe(false);
+      expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+    });
+
+    describe("select and control select", () => {
+      it("should make isSelected true", () => {
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x113").isSelected()).toBe(true);
+      });
+
+      it("should call individual state setters", () => {
+        const setSelectedItems = tree.mockedHandler("setSelectedItems");
+        const setFocusedItem = tree.mockedHandler("setFocusedItem");
+
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(setSelectedItems).toHaveBeenCalledWith(["x111", "x112", "x113"]);
+        expect(setFocusedItem).toHaveBeenCalledWith("x113");
+      });
+
+      it("should call joint state setter", () => {
+        const setState = tree.mockedHandler("setState");
+
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(setState).toHaveBeenCalledWith(
+          expect.objectContaining({
+            selectedItems: ["x111", "x112", "x113"],
+            focusedItem: "x113",
+          }),
+        );
+      });
+    });
+
+    describe("shift select", () => {
+      it("should make isSelected true", () => {
+        tree.do.selectItem("x111");
+        tree.do.shiftSelectItem("x113");
+        tree.do.ctrlSelectItem("x2");
+
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x113").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x2").isSelected()).toBe(true);
+      });
+
+      it("should call individual state setters", () => {
+        const setSelectedItems = tree.mockedHandler("setSelectedItems");
+        const setFocusedItem = tree.mockedHandler("setFocusedItem");
+
+        tree.do.selectItem("x111");
+        tree.do.shiftSelectItem("x113");
+        expect(setFocusedItem).toHaveBeenCalledWith("x113");
+
+        tree.do.ctrlSelectItem("x2");
+
+        expect(setSelectedItems).toHaveBeenCalledWith([
+          "x111",
+          "x112",
+          "x113",
+          "x2",
+        ]);
+
+        expect(setFocusedItem).toHaveBeenCalledWith("x2");
+      });
+
+      it("should call joint state setter", () => {
+        const setState = tree.mockedHandler("setState");
+
+        tree.do.selectItem("x111");
+        tree.do.shiftSelectItem("x113");
+        expect(setState).toHaveBeenCalledWith(
+          expect.objectContaining({
+            selectedItems: ["x111", "x112", "x113"],
+            focusedItem: "x113",
+          }),
+        );
+
+        tree.do.ctrlSelectItem("x2");
+
+        expect(setState).toHaveBeenCalledWith(
+          expect.objectContaining({
+            selectedItems: ["x111", "x112", "x113", "x2"],
+            focusedItem: "x2",
+          }),
+        );
+      });
+    });
+
+    describe("programmatic select", () => {
+      describe("item instance actions", () => {
+        it("should handle select", () => {
+          const setSelectedItems = tree.mockedHandler("setSelectedItems");
+          tree.instance.getItemInstance("x111").select();
+          expect(setSelectedItems).toHaveBeenCalledWith(["x111"]);
+          expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        });
+
+        it("should handle deselect", () => {
+          const setSelectedItems = tree.mockedHandler("setSelectedItems");
+          tree.instance.getItemInstance("x111").select();
+          tree.instance.getItemInstance("x111").deselect();
+          expect(setSelectedItems).toHaveBeenCalledWith([]);
+          expect(tree.instance.getItemInstance("x111").isSelected()).toBe(
+            false,
+          );
+        });
+
+        it("should handle toggle select on", () => {
+          const setSelectedItems = tree.mockedHandler("setSelectedItems");
+          tree.instance.getItemInstance("x111").toggleSelect();
+          expect(setSelectedItems).toHaveBeenCalledWith(["x111"]);
+          expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        });
+
+        it("should handle toggle select off", () => {
+          const setSelectedItems = tree.mockedHandler("setSelectedItems");
+          tree.instance.getItemInstance("x111").select();
+          tree.instance.getItemInstance("x111").toggleSelect();
+          expect(setSelectedItems).toHaveBeenCalledWith([]);
+          expect(tree.instance.getItemInstance("x111").isSelected()).toBe(
+            false,
+          );
+        });
+
+        it("should handle selectUpTo without ctrl", () => {
+          const setSelectedItems = tree.mockedHandler("setSelectedItems");
+          tree.instance.getItemInstance("x111").toggleSelect();
+          tree.instance.getItemInstance("x112").toggleSelect();
+          tree.instance.getItemInstance("x112").setFocused();
+          tree.instance.getItemInstance("x114").selectUpTo(false);
+          expect(setSelectedItems).toHaveBeenCalledWith([
+            "x112",
+            "x113",
+            "x114",
+          ]);
+          expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        });
+
+        it("should handle selectUpTo with ctrl", () => {
+          const setSelectedItems = tree.mockedHandler("setSelectedItems");
+          tree.instance.getItemInstance("x111").toggleSelect();
+          tree.instance.getItemInstance("x112").toggleSelect();
+          tree.instance.getItemInstance("x112").setFocused();
+          tree.instance.getItemInstance("x114").selectUpTo(true);
+          expect(setSelectedItems).toHaveBeenCalledWith([
+            "x111",
+            "x112",
+            "x113",
+            "x114",
+          ]);
+          expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        });
+      });
+
+      it("should handle getters", () => {
+        const setSelectedItems = tree.mockedHandler("setSelectedItems");
+        tree.instance.setSelectedItems(["x111", "x112"]);
+        expect(setSelectedItems).toHaveBeenCalledWith(["x111", "x112"]);
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        expect(tree.instance.getSelectedItems()[0].getId()).toEqual("x111");
+        expect(tree.instance.getSelectedItems()[1].getId()).toEqual("x112");
+        expect(tree.instance.getSelectedItems().length).toBe(2);
+      });
+    });
+  });
+});

package/src/features/selection/types.ts

@@ -22,7 +22,5 @@ export type SelectionFeatureDef<T> = {
     | "toggleSelectItem"
     | "selectUpwards"
     | "selectDownwards"
-    | "selectUpwardsCtrl"
-    | "selectDownwardsCtrl"
     | "selectAll";
 };

package/src/features/sync-data-loader/feature.ts

@@ -1,13 +1,7 @@
 import { FeatureImplementation } from "../../types/core";
-import { SyncDataLoaderFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
 import { makeStateUpdater } from "../../utils";
 
-export const syncDataLoaderFeature: FeatureImplementation<
-  any,
-  SyncDataLoaderFeatureDef<any>,
-  MainFeatureDef | SyncDataLoaderFeatureDef<any>
-> = {
+export const syncDataLoaderFeature: FeatureImplementation = {
   key: "sync-data-loader",
 
   getInitialState: (initialState) => ({
@@ -24,18 +18,15 @@ export const syncDataLoaderFeature: FeatureImplementation<
     loadingItems: "setLoadingItems",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
+  treeInstance: {
+    retrieveItemData: ({ tree }, itemId) =>
+      tree.getConfig().dataLoader!.getItem(itemId),
 
-    retrieveItemData: (itemId) =>
-      instance.getConfig().dataLoader!.getItem(itemId),
-
-    retrieveChildrenIds: (itemId) =>
-      instance.getConfig().dataLoader!.getChildren(itemId),
-  }),
+    retrieveChildrenIds: ({ tree }, itemId) =>
+      tree.getConfig().dataLoader!.getChildren(itemId),
+  },
 
-  createItemInstance: (prev) => ({
-    ...prev,
+  itemInstance: {
     isLoading: () => false,
-  }),
+  },
 };