@headless-tree/core 0.0.11 → 0.0.13

package/src/features/renaming/types.ts

@@ -12,7 +12,6 @@ export type RenamingFeatureDef<T> = {
     onRename?: (item: ItemInstance<T>, value: string) => void;
   };
   treeInstance: {
-    startRenamingItem: (itemId: string) => void;
     getRenamingItem: () => ItemInstance<T> | null;
     getRenamingValue: () => string;
     abortRenaming: () => void;
@@ -23,6 +22,7 @@ export type RenamingFeatureDef<T> = {
     getRenameInputProps: () => any;
     canRename: () => boolean;
     isRenaming: () => boolean;
+    startRenaming: () => void;
   };
   hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
 };

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) => ({

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

@@ -2,10 +2,12 @@ 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", () => {
@@ -85,7 +87,7 @@ describe("core-feature/search", () => {
       it("selects focused item when search is submitted", () => {
         const setSelectedItems = tree.mockedHandler("setSelectedItems");
         const onCloseSearch = tree.mockedHandler("onCloseSearch");
-        tree.instance.focusItem("x1");
+        tree.item("x1").setFocused();
         tree.do.hotkey("openSearch");
         tree.do.hotkey("submitSearch");
         expect(setSelectedItems).toHaveBeenCalledWith(["x1"]);

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) => ({
@@ -37,20 +30,18 @@ export const selectionFeature: FeatureImplementation<
   },
 
   itemInstance: {
-    select: ({ tree, item }) => {
+    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: ({ tree, item }) => {
+    deselect: ({ tree, itemId }) => {
       const { selectedItems } = tree.getState();
-      tree.setSelectedItems(
-        selectedItems.filter((id) => id !== item.getItemMeta().itemId),
-      );
+      tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
     },
 
     isSelected: ({ tree, item }) => {
@@ -91,20 +82,17 @@ export const selectionFeature: FeatureImplementation<
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
       "aria-selected": item.isSelected() ? "true" : "false",
-      onClick: item.getMemoizedProp(
-        "selection/onClick",
-        () => (e: MouseEvent) => {
-          if (e.shiftKey) {
-            item.selectUpTo(e.ctrlKey || e.metaKey);
-          } else if (e.ctrlKey || e.metaKey) {
-            item.toggleSelect();
-          } else {
-            tree.setSelectedItems([item.getItemMeta().itemId]);
-          }
-
-          prev?.()?.onClick?.(e);
-        },
-      ),
+      onClick: (e: MouseEvent) => {
+        if (e.shiftKey) {
+          item.selectUpTo(e.ctrlKey || e.metaKey);
+        } else if (e.ctrlKey || e.metaKey) {
+          item.toggleSelect();
+        } else {
+          tree.setSelectedItems([item.getItemMeta().itemId]);
+        }
+
+        prev?.()?.onClick?.(e);
+      },
     }),
   },
 
@@ -122,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

@@ -1,23 +1,22 @@
 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);
-
-// it("test", async () => {
-//   const tree = await factory.suits.async().tree.createDebugTree();
-//   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");
-// });
+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(

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) => ({

package/src/features/tree/feature.ts

@@ -1,20 +1,8 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
-import { ItemMeta, TreeFeatureDef, TreeItemDataRef } from "./types";
+import { ItemMeta } from "./types";
 import { makeStateUpdater, poll } from "../../utils";
-import { MainFeatureDef } from "../main/types";
-import { HotkeysCoreFeatureDef } from "../hotkeys-core/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-import { SearchFeatureDef } from "../search/types";
 
-export const treeFeature: FeatureImplementation<
-  any,
-  TreeFeatureDef<any>,
-  | MainFeatureDef
-  | TreeFeatureDef<any>
-  | HotkeysCoreFeatureDef<any>
-  | SyncDataLoaderFeatureDef<any>
-  | SearchFeatureDef<any>
-> = {
+export const treeFeature: FeatureImplementation<any> = {
   key: "tree",
 
   getInitialState: (initialState) => ({
@@ -35,9 +23,6 @@ export const treeFeature: FeatureImplementation<
   },
 
   treeInstance: {
-    isItemExpanded: ({ tree }, itemId) =>
-      tree.getState().expandedItems.includes(itemId),
-
     getItemsMeta: ({ tree }) => {
       const { rootItemId } = tree.getConfig();
       const { expandedItems } = tree.getState();
@@ -79,33 +64,6 @@ export const treeFeature: FeatureImplementation<
       return flatItems;
     },
 
-    expandItem: ({ tree }, itemId) => {
-      if (!tree.getItemInstance(itemId).isFolder()) {
-        return;
-      }
-
-      if (tree.getState().loadingItems?.includes(itemId)) {
-        return;
-      }
-
-      tree.applySubStateUpdate("expandedItems", (expandedItems) => [
-        ...expandedItems,
-        itemId,
-      ]);
-      tree.rebuildTree();
-    },
-
-    collapseItem: ({ tree }, itemId) => {
-      if (!tree.getItemInstance(itemId).isFolder()) {
-        return;
-      }
-
-      tree.applySubStateUpdate("expandedItems", (expandedItems) =>
-        expandedItems.filter((id) => id !== itemId),
-      );
-      tree.rebuildTree();
-    },
-
     // TODO memo
     getFocusedItem: ({ tree }) => {
       return (
@@ -114,20 +72,16 @@ export const treeFeature: FeatureImplementation<
       );
     },
 
-    focusItem: ({ tree }, itemId) => {
-      tree.applySubStateUpdate("focusedItem", itemId);
-    },
-
     focusNextItem: ({ tree }) => {
       const { index } = tree.getFocusedItem().getItemMeta();
       const nextIndex = Math.min(index + 1, tree.getItems().length - 1);
-      tree.focusItem(tree.getItems()[nextIndex].getId());
+      tree.getItems()[nextIndex]?.setFocused();
     },
 
     focusPreviousItem: ({ tree }) => {
       const { index } = tree.getFocusedItem().getItemMeta();
       const nextIndex = Math.max(index - 1, 0);
-      tree.focusItem(tree.getItems()[nextIndex].getId());
+      tree.getItems()[nextIndex]?.setFocused();
     },
 
     updateDomFocus: ({ tree }) => {
@@ -142,11 +96,12 @@ export const treeFeature: FeatureImplementation<
       });
     },
 
-    getContainerProps: ({ prev }) => ({
+    // TODO add label parameter
+    getContainerProps: ({ prev, tree }) => ({
       ...prev?.(),
       role: "tree",
-      ariaLabel: "",
-      ariaActivedescendant: "",
+      "aria-label": "",
+      ref: tree.registerElement, // TODO memo
     }),
 
     // relevant for hotkeys of this feature
@@ -159,11 +114,12 @@ export const treeFeature: FeatureImplementation<
       await poll(() => item.getElement() !== null, 20);
       item.getElement()?.scrollIntoView(scrollIntoViewArg);
     },
-    getId: ({ item }) => item.getItemMeta().itemId,
+    getId: ({ itemId }) => itemId,
     getProps: ({ item, prev }) => {
       const itemMeta = item.getItemMeta();
       return {
         ...prev?.(),
+        ref: item.registerElement, // TODO memo
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
         "aria-posinset": itemMeta.posInSet,
@@ -171,7 +127,7 @@ export const treeFeature: FeatureImplementation<
         "aria-label": item.getItemName(),
         "aria-level": itemMeta.level,
         tabIndex: item.isFocused() ? 0 : -1,
-        onClick: item.getMemoizedProp("tree/onClick", () => (e: MouseEvent) => {
+        onClick: (e: MouseEvent) => {
           item.setFocused();
           item.primaryAction();
 
@@ -188,24 +144,46 @@ export const treeFeature: FeatureImplementation<
           } else {
             item.expand();
           }
-        }),
+        },
       };
     },
-    expand: ({ tree, item }) => tree.expandItem(item.getItemMeta().itemId),
-    collapse: ({ tree, item }) => tree.collapseItem(item.getItemMeta().itemId),
-    getItemData: ({ tree, item }) =>
-      tree.retrieveItemData(item.getItemMeta().itemId),
+    expand: ({ tree, item, itemId }) => {
+      if (!item.isFolder()) {
+        return;
+      }
+
+      if (tree.getState().loadingItems?.includes(itemId)) {
+        return;
+      }
+
+      tree.applySubStateUpdate("expandedItems", (expandedItems) => [
+        ...expandedItems,
+        itemId,
+      ]);
+      tree.rebuildTree();
+    },
+    collapse: ({ tree, item, itemId }) => {
+      if (!item.isFolder()) {
+        return;
+      }
+
+      tree.applySubStateUpdate("expandedItems", (expandedItems) =>
+        expandedItems.filter((id) => id !== itemId),
+      );
+      tree.rebuildTree();
+    },
+    getItemData: ({ tree, itemId }) => tree.retrieveItemData(itemId),
     equals: ({ item }, other) => item.getId() === other?.getId(),
-    isExpanded: ({ tree, item }) =>
-      tree.getState().expandedItems.includes(item.getItemMeta().itemId),
+    isExpanded: ({ tree, itemId }) =>
+      tree.getState().expandedItems.includes(itemId),
     isDescendentOf: ({ item }, parentId) => {
       const parent = item.getParent();
       return Boolean(
         parent?.getId() === parentId || parent?.isDescendentOf(parentId),
       );
     },
-    isFocused: ({ tree, item }) =>
-      tree.getState().focusedItem === item.getItemMeta().itemId ||
+    isFocused: ({ tree, item, itemId }) =>
+      tree.getState().focusedItem === itemId ||
       (tree.getState().focusedItem === null && item.getItemMeta().index === 0),
     isFolder: ({ tree, item }) =>
       item.getItemMeta().level === -1 ||
@@ -214,14 +192,15 @@ export const treeFeature: FeatureImplementation<
       const config = tree.getConfig();
       return config.getItemName(item as ItemInstance<any>);
     },
-    setFocused: ({ tree, item }) => tree.focusItem(item.getItemMeta().itemId),
+    setFocused: ({ tree, itemId }) => {
+      tree.applySubStateUpdate("focusedItem", itemId);
+    },
     primaryAction: ({ tree, item }) =>
       tree.getConfig().onPrimaryAction?.(item as ItemInstance<any>),
     getParent: ({ tree, item }) =>
       item.getItemMeta().parentId
         ? tree.getItemInstance(item.getItemMeta().parentId)
         : undefined,
-    // TODO remove
     getIndexInParent: ({ item }) => item.getItemMeta().posInSet,
     getChildren: ({ tree, item }) =>
       tree
@@ -232,23 +211,6 @@ export const treeFeature: FeatureImplementation<
       tree.getItems()[item.getItemMeta().index - 1],
     getItemBelow: ({ tree, item }) =>
       tree.getItems()[item.getItemMeta().index + 1],
-    getMemoizedProp: ({ item }, name, create, deps) => {
-      const data = item.getDataRef<TreeItemDataRef>();
-      const memoizedValue = data.current.memoizedValues?.[name];
-      if (
-        memoizedValue &&
-        (!deps ||
-          data.current.memoizedDeps?.[name]?.every((d, i) => d === deps![i]))
-      ) {
-        return memoizedValue;
-      }
-      data.current.memoizedDeps ??= {};
-      data.current.memoizedValues ??= {};
-      const value = create();
-      data.current.memoizedDeps[name] = deps;
-      data.current.memoizedValues[name] = value;
-      return value;
-    },
   },
 
   hotkeys: {
@@ -306,14 +268,14 @@ export const treeFeature: FeatureImplementation<
     focusFirstItem: {
       hotkey: "Home",
       handler: (e, tree) => {
-        tree.focusItem(tree.getItems()[0].getId());
+        tree.getItems()[0]?.setFocused();
         tree.updateDomFocus();
       },
     },
     focusLastItem: {
       hotkey: "End",
       handler: (e, tree) => {
-        tree.focusItem(tree.getItems()[tree.getItems().length - 1].getId());
+        tree.getItems()[tree.getItems().length - 1]?.setFocused();
         tree.updateDomFocus();
       },
     },