@headless-tree/core 0.0.9 → 0.0.11

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

@@ -0,0 +1,52 @@
+import { describe, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { expandAllFeature } from "./feature";
+
+const factory = TestTree.default({}).withFeatures(expandAllFeature);
+
+describe("core-feature/expand-all", () => {
+  factory.forSuits((tree) => {
+    describe("tree instance calls", () => {
+      it("expands all", async () => {
+        const expandPromise = tree.instance.expandAll();
+        await tree.resolveAsyncVisibleItems();
+        await expandPromise;
+        tree.expect.foldersExpanded("x12", "x13", "x14", "x4", "x41", "x44");
+      });
+
+      it("collapses all", () => {
+        tree.instance.collapseAll();
+        tree.expect.foldersCollapsed("x1", "x2", "x3", "x4");
+      });
+
+      it("cancels expanding all", async () => {
+        const token = { current: true };
+        const expandPromise = tree.instance.expandAll(token);
+        token.current = false;
+        await tree.resolveAsyncVisibleItems();
+        await expandPromise;
+        tree.expect.foldersCollapsed("x2", "x3", "x4");
+      });
+    });
+
+    describe("item instance calls", () => {
+      it("expands all", async () => {
+        const expandPromise = Promise.all([
+          // not sure why all are needed...
+          tree.instance.getItemInstance("x1").expandAll(),
+          tree.instance.getItemInstance("x2").expandAll(),
+          tree.instance.getItemInstance("x3").expandAll(),
+          tree.instance.getItemInstance("x4").expandAll(),
+        ]);
+        await tree.resolveAsyncVisibleItems();
+        await expandPromise;
+        tree.expect.foldersExpanded("x2", "x21", "x24");
+      });
+
+      it("collapses all", () => {
+        tree.instance.collapseAll();
+        tree.expect.foldersCollapsed("x1", "x2", "x3", "x4");
+      });
+    });
+  });
+});

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

@@ -15,25 +15,21 @@ export const expandAllFeature: FeatureImplementation<
 > = {
   key: "expand-all",
 
-  createTreeInstance: (prev, tree) => ({
-    ...prev,
-
-    expandAll: async (cancelToken) => {
+  treeInstance: {
+    expandAll: async ({ tree }, cancelToken) => {
       await Promise.all(
         tree.getItems().map((item) => item.expandAll(cancelToken)),
       );
     },
 
-    collapseAll: () => {
+    collapseAll: ({ tree }) => {
       tree.applySubStateUpdate("expandedItems", []);
       tree.rebuildTree();
     },
-  }),
-
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
+  },
 
-    expandAll: async (cancelToken) => {
+  itemInstance: {
+    expandAll: async ({ tree, item }, cancelToken) => {
       if (cancelToken?.current) {
         return;
       }
@@ -53,11 +49,11 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: () => {
+    collapseAll: ({ item }) => {
       for (const child of item.getChildren()) {
         child?.collapseAll();
       }
       item.collapse();
     },
-  }),
+  },
 };

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

@@ -39,7 +39,7 @@ const findHotkeyMatch = (
 ) => {
   return Object.entries({ ...config1, ...config2 }).find(([, hotkey]) =>
     testHotkeyMatch(pressedKeys, tree, hotkey),
-  )?.[0];
+  )?.[0] as keyof HotkeysConfig<any> | undefined;
 };
 
 export const hotkeysCoreFeature: FeatureImplementation<

package/src/features/main/types.ts

@@ -4,18 +4,31 @@ import {
   ItemInstance,
   SetStateFn,
   TreeConfig,
+  TreeInstance,
   TreeState,
   Updater,
 } from "../../types/core";
 import { ItemMeta } from "../tree/types";
 
+export type InstanceTypeMap = {
+  itemInstance: ItemInstance<any>;
+  treeInstance: TreeInstance<any>;
+};
+
+export type InstanceBuilder = <T extends keyof InstanceTypeMap>(
+  features: FeatureImplementation[],
+  instanceType: T,
+  buildOpts: (self: any) => any,
+) => [instance: InstanceTypeMap[T], finalize: () => void];
+
 export type MainFeatureDef<T = any> = {
   state: {};
   config: {
     features?: FeatureImplementation<any>[];
     initialState?: Partial<TreeState<T>>;
     state?: Partial<TreeState<T>>;
-    setState?: SetStateFn<TreeState<T>>;
+    setState?: SetStateFn<Partial<TreeState<T>>>;
+    instanceBuilder?: InstanceBuilder;
   };
   treeInstance: {
     /** @internal */

package/src/features/renaming/feature.ts

@@ -23,58 +23,59 @@ export const renamingFeature: FeatureImplementation<
     renamingValue: "setRenamingValue",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
-
-    startRenamingItem: (itemId) => {
-      const item = instance.getItemInstance(itemId);
+  treeInstance: {
+    startRenamingItem: ({ tree }, itemId) => {
+      const item = tree.getItemInstance(itemId);
 
       if (!item.canRename()) {
         return;
       }
 
-      instance.applySubStateUpdate("renamingItem", itemId);
-      instance.applySubStateUpdate("renamingValue", item.getItemName());
+      tree.applySubStateUpdate("renamingItem", itemId);
+      tree.applySubStateUpdate("renamingValue", item.getItemName());
     },
 
-    getRenamingItem: () => {
-      const itemId = instance.getState().renamingItem;
-      return itemId ? instance.getItemInstance(itemId) : null;
+    getRenamingItem: ({ tree }) => {
+      const itemId = tree.getState().renamingItem;
+      return itemId ? tree.getItemInstance(itemId) : null;
     },
 
-    getRenamingValue: () => instance.getState().renamingValue || "",
+    getRenamingValue: ({ tree }) => tree.getState().renamingValue || "",
 
-    abortRenaming: () => {
-      instance.applySubStateUpdate("renamingItem", null);
+    abortRenaming: ({ tree }) => {
+      tree.applySubStateUpdate("renamingItem", null);
+      tree.updateDomFocus();
     },
 
-    completeRenaming: () => {
-      const config = instance.getConfig();
-      const item = instance.getRenamingItem();
+    completeRenaming: ({ tree }) => {
+      const config = tree.getConfig();
+      const item = tree.getRenamingItem();
       if (item) {
-        config.onRename?.(item, instance.getState().renamingValue || "");
+        config.onRename?.(item, tree.getState().renamingValue || "");
       }
-      instance.applySubStateUpdate("renamingItem", null);
+      tree.applySubStateUpdate("renamingItem", null);
+      tree.updateDomFocus();
     },
 
-    isRenamingItem: () => !!instance.getState().renamingItem,
-  }),
+    isRenamingItem: ({ tree }) => !!tree.getState().renamingItem,
+  },
 
-  createItemInstance: (prev, instance, tree) => ({
-    ...prev,
-    getRenameInputProps: () => ({
+  itemInstance: {
+    getRenameInputProps: ({ tree }) => ({
       onBlur: () => tree.abortRenaming(),
       value: tree.getRenamingValue(),
-      onChange: (e) => {
-        tree.applySubStateUpdate("renamingValue", e.target.value);
+      onChange: (e: any) => {
+        // TODO custom type with e.target.value
+        tree.applySubStateUpdate("renamingValue", e.target?.value);
       },
     }),
 
-    canRename: () =>
-      tree.getConfig().canRename?.(instance as ItemInstance<any>) ?? true,
+    canRename: ({ tree, item }) =>
+      tree.getConfig().canRename?.(item as ItemInstance<any>) ?? true,
 
-    isRenaming: () => instance.getId() === tree.getState().renamingItem,
-  }),
+    isRenaming: ({ tree, item }) =>
+      item.getId() === tree.getState().renamingItem,
+  },
 
   hotkeys: {
     renameItem: {

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

@@ -0,0 +1,125 @@
+import { describe, expect, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { renamingFeature } from "./feature";
+import { selectionFeature } from "../selection/feature";
+
+const factory = TestTree.default({}).withFeatures(
+  renamingFeature,
+  selectionFeature,
+);
+
+describe("core-feature/renaming", () => {
+  factory.forSuits((tree) => {
+    it("starts and aborts renaming", () => {
+      tree.instance.startRenamingItem("x1");
+      expect(tree.instance.isRenamingItem()).toBe(true);
+      expect(tree.instance.getRenamingValue()).toBe("x1");
+      tree.instance.abortRenaming();
+      expect(tree.instance.isRenamingItem()).toBe(false);
+    });
+
+    it("stops renaming by blurring", () => {
+      tree.instance.startRenamingItem("x1");
+      tree.instance.getRenamingItem()!.getRenameInputProps().onBlur();
+      expect(tree.instance.isRenamingItem()).toBe(false);
+    });
+
+    it("completes renaming programmatically", () => {
+      const onRename = tree.mockedHandler("onRename");
+
+      tree.instance.startRenamingItem("x1");
+      expect(tree.instance.getRenamingItem()!.getRenameInputProps().value).toBe(
+        "x1",
+      );
+      tree.instance
+        .getRenamingItem()!
+        .getRenameInputProps()
+        .onChange({
+          target: { value: "renamed" },
+        });
+      expect(tree.instance.getRenamingItem()!.getRenameInputProps().value).toBe(
+        "renamed",
+      );
+      tree.instance.completeRenaming();
+      expect(onRename).toHaveBeenCalledWith(
+        tree.instance.getItemInstance("x1"),
+        "renamed",
+      );
+      expect(tree.instance.isRenamingItem()).toBe(false);
+    });
+
+    it("invokes state setters when aborting", () => {
+      const setRenamingItem = tree.mockedHandler("setRenamingItem");
+      const setRenamingValue = tree.mockedHandler("setRenamingValue");
+      tree.instance.startRenamingItem("x1");
+      expect(setRenamingItem).toHaveBeenCalledWith("x1");
+      expect(setRenamingValue).toHaveBeenCalledWith("x1");
+      tree.instance.abortRenaming();
+      expect(setRenamingItem).toHaveBeenCalledWith(null);
+    });
+
+    it("invokes state setters when completing", () => {
+      const setRenamingItem = tree.mockedHandler("setRenamingItem");
+      const setRenamingValue = tree.mockedHandler("setRenamingValue");
+      tree.instance.startRenamingItem("x1");
+      tree.instance
+        .getRenamingItem()!
+        .getRenameInputProps()
+        .onChange({
+          target: { value: "renamed" },
+        });
+      expect(setRenamingItem).toHaveBeenCalledWith("x1");
+      expect(setRenamingValue).toHaveBeenCalledWith("renamed");
+      tree.instance.completeRenaming();
+      expect(setRenamingItem).toHaveBeenCalledWith(null);
+    });
+
+    it("changes renaming input content with input props", () => {
+      const setRenamingValue = tree.mockedHandler("setRenamingValue");
+      tree.instance.startRenamingItem("x1");
+      tree.instance
+        .getRenamingItem()!
+        .getRenameInputProps()
+        .onChange({ target: { value: "New Name" } });
+      expect(setRenamingValue).toHaveBeenCalledWith("New Name");
+    });
+
+    it("aborts renaming with input props", () => {
+      const setRenamingItem = tree.mockedHandler("setRenamingItem");
+      tree.instance.startRenamingItem("x1");
+      tree.instance.getRenamingItem()!.getRenameInputProps().onBlur();
+      expect(setRenamingItem).toHaveBeenCalledWith(null);
+    });
+
+    describe("hotkeys", () => {
+      it("starts renaming", () => {
+        const setRenamingItem = tree.mockedHandler("setRenamingItem");
+        tree.do.hotkey("renameItem");
+        expect(setRenamingItem).toHaveBeenCalledWith("x1");
+      });
+
+      it("aborts renaming with Escape key", () => {
+        const setRenamingItem = tree.mockedHandler("setRenamingItem");
+        tree.instance.startRenamingItem("x1");
+        tree.do.hotkey("abortRenaming");
+        expect(setRenamingItem).toHaveBeenCalledWith(null);
+      });
+
+      it("completes renaming with Enter key", () => {
+        const onRename = tree.mockedHandler("onRename");
+        tree.instance.startRenamingItem("x1");
+        tree.instance
+          .getRenamingItem()!
+          .getRenameInputProps()
+          .onChange({
+            target: { value: "renamed" },
+          });
+        tree.do.hotkey("completeRenaming");
+        expect(onRename).toHaveBeenCalledWith(
+          tree.instance.getItemInstance("x1"),
+          "renamed",
+        );
+      });
+    });
+  });
+});

package/src/features/renaming/types.ts

@@ -6,7 +6,7 @@ export type RenamingFeatureDef<T> = {
     renamingValue?: string;
   };
   config: {
-    setRenamingItem?: SetStateFn<string | null>;
+    setRenamingItem?: SetStateFn<string | null | undefined>;
     setRenamingValue?: SetStateFn<string | undefined>;
     canRename?: (item: ItemInstance<T>) => boolean;
     onRename?: (item: ItemInstance<T>, value: string) => void;

package/src/features/search/feature.ts

@@ -28,65 +28,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,115 @@
+import { describe, expect, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { searchFeature } from "./feature";
+import { selectionFeature } from "../selection/feature";
+
+const factory = TestTree.default({}).withFeatures(
+  searchFeature,
+  selectionFeature,
+);
+
+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.instance.focusItem("x1");
+        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: {