@headless-tree/core 0.0.0-20240616154614 → 0.0.0-20250224172932

package/src/features/tree/feature.ts

@@ -1,18 +1,8 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
-import { ItemMeta, TreeFeatureDef, TreeItemDataRef } from "./types";
-import { makeStateUpdater, memo, poll } from "../../utils";
-import { MainFeatureDef } from "../main/types";
-import { HotkeysCoreFeatureDef } from "../hotkeys-core/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
+import { ItemMeta } from "./types";
+import { makeStateUpdater, poll } from "../../utils";
 
-export const treeFeature: FeatureImplementation<
-  any,
-  TreeFeatureDef<any>,
-  | MainFeatureDef
-  | TreeFeatureDef<any>
-  | HotkeysCoreFeatureDef<any>
-  | SyncDataLoaderFeatureDef<any>
-> = {
+export const treeFeature: FeatureImplementation<any> = {
   key: "tree",
 
   getInitialState: (initialState) => ({
@@ -32,24 +22,12 @@ export const treeFeature: FeatureImplementation<
     focusedItem: "setFocusedItem",
   },
 
-  createTreeInstance: (prev, instance) => ({
-    ...prev,
-
-    retrieveItemData: () => {
-      throw new Error("No data-loader registered");
-    },
-
-    retrieveChildrenIds: () => {
-      throw new Error("No data-loader registered");
-    },
-
-    isItemExpanded: (itemId) =>
-      instance.getState().expandedItems.includes(itemId),
-
-    getItemsMeta: () => {
-      const { rootItemId } = instance.getConfig();
-      const { expandedItems } = instance.getState();
+  treeInstance: {
+    getItemsMeta: ({ tree }) => {
+      const { rootItemId } = tree.getConfig();
+      const { expandedItems } = tree.getState();
       const flatItems: ItemMeta[] = [];
+      const expandedItemsSet = new Set(expandedItems);
 
       const recursiveAdd = (
         itemId: string,
@@ -67,8 +45,9 @@ export const treeFeature: FeatureImplementation<
           posInSet,
         });
 
-        if (expandedItems.includes(itemId)) {
-          const children = instance.retrieveChildrenIds(itemId) ?? [];
+        if (expandedItemsSet.has(itemId)) {
+          // TODO THIS MADE A HUGE DIFFERENCE!
+          const children = tree.retrieveChildrenIds(itemId) ?? [];
           let i = 0;
           for (const childId of children) {
             recursiveAdd(childId, itemId, level + 1, children.length, i++);
@@ -76,7 +55,7 @@ export const treeFeature: FeatureImplementation<
         }
       };
 
-      const children = instance.retrieveChildrenIds(rootItemId);
+      const children = tree.retrieveChildrenIds(rootItemId);
       let i = 0;
       for (const itemId of children) {
         recursiveAdd(itemId, rootItemId, 0, children.length, i++);
@@ -85,62 +64,31 @@ export const treeFeature: FeatureImplementation<
       return flatItems;
     },
 
-    expandItem: (itemId) => {
-      if (!instance.getItemInstance(itemId).isFolder()) {
-        return;
-      }
-
-      if (instance.getState().loadingItems?.includes(itemId)) {
-        return;
-      }
-
-      instance.applySubStateUpdate("expandedItems", (expandedItems) => [
-        ...expandedItems,
-        itemId,
-      ]);
-      instance.rebuildTree();
-    },
-
-    collapseItem: (itemId) => {
-      if (!instance.getItemInstance(itemId).isFolder()) {
-        return;
-      }
-
-      instance.applySubStateUpdate("expandedItems", (expandedItems) =>
-        expandedItems.filter((id) => id !== itemId),
-      );
-      instance.rebuildTree();
-    },
-
     // TODO memo
-    getFocusedItem: () => {
+    getFocusedItem: ({ tree }) => {
       return (
-        instance.getItemInstance(instance.getState().focusedItem ?? "") ??
-        instance.getItems()[0]
+        tree.getItemInstance(tree.getState().focusedItem ?? "") ??
+        tree.getItems()[0]
       );
     },
 
-    focusItem: (itemId) => {
-      instance.applySubStateUpdate("focusedItem", itemId);
-    },
-
-    focusNextItem: () => {
-      const { index } = instance.getFocusedItem().getItemMeta();
-      const nextIndex = Math.min(index + 1, instance.getItems().length - 1);
-      instance.focusItem(instance.getItems()[nextIndex].getId());
+    focusNextItem: ({ tree }) => {
+      const { index } = tree.getFocusedItem().getItemMeta();
+      const nextIndex = Math.min(index + 1, tree.getItems().length - 1);
+      tree.getItems()[nextIndex]?.setFocused();
     },
 
-    focusPreviousItem: () => {
-      const { index } = instance.getFocusedItem().getItemMeta();
+    focusPreviousItem: ({ tree }) => {
+      const { index } = tree.getFocusedItem().getItemMeta();
       const nextIndex = Math.max(index - 1, 0);
-      instance.focusItem(instance.getItems()[nextIndex].getId());
+      tree.getItems()[nextIndex]?.setFocused();
     },
 
-    updateDomFocus: () => {
+    updateDomFocus: ({ tree }) => {
       // Required because if the state is managed outside in react, the state only updated during next render
       setTimeout(async () => {
-        const focusedItem = instance.getFocusedItem();
-        instance.getConfig().scrollToItem?.(focusedItem);
+        const focusedItem = tree.getFocusedItem();
+        tree.getConfig().scrollToItem?.(focusedItem);
         await poll(() => focusedItem.getElement() !== null, 20);
         const focusedElement = focusedItem.getElement();
         if (!focusedElement) return;
@@ -148,29 +96,30 @@ export const treeFeature: FeatureImplementation<
       });
     },
 
-    getContainerProps: () => ({
-      ...prev.getContainerProps?.(),
+    // TODO add label parameter
+    getContainerProps: ({ prev, tree }) => ({
+      ...prev?.(),
       role: "tree",
-      ariaLabel: "",
-      ariaActivedescendant: "",
+      "aria-label": "",
+      ref: tree.registerElement, // TODO memo
     }),
-  }),
 
-  createItemInstance: (prev, item, tree) => ({
-    ...prev,
-    isLoading: () => {
-      throw new Error("No data-loader registered");
-    },
-    scrollTo: async (scrollIntoViewArg) => {
+    // relevant for hotkeys of this feature
+    isSearchOpen: () => false,
+  },
+
+  itemInstance: {
+    scrollTo: async ({ tree, item }, scrollIntoViewArg) => {
       tree.getConfig().scrollToItem?.(item as any);
       await poll(() => item.getElement() !== null, 20);
-      item.getElement()!.scrollIntoView(scrollIntoViewArg);
+      item.getElement()?.scrollIntoView(scrollIntoViewArg);
     },
-    getId: () => item.getItemMeta().itemId,
-    getProps: () => {
+    getId: ({ itemId }) => itemId,
+    getProps: ({ item, prev }) => {
       const itemMeta = item.getItemMeta();
       return {
-        ...prev.getProps?.(),
+        ...prev?.(),
+        ref: item.registerElement, // TODO memo
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
         "aria-posinset": itemMeta.posInSet,
@@ -178,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) => {
+        onClick: (e: MouseEvent) => {
           item.setFocused();
           item.primaryAction();
 
@@ -195,66 +144,74 @@ export const treeFeature: FeatureImplementation<
           } else {
             item.expand();
           }
-        }),
+        },
       };
     },
-    expand: () => tree.expandItem(item.getItemMeta().itemId),
-    collapse: () => tree.collapseItem(item.getItemMeta().itemId),
-    getItemData: () => tree.retrieveItemData(item.getItemMeta().itemId),
-    isExpanded: () =>
-      tree.getState().expandedItems.includes(item.getItemMeta().itemId),
-    isFocused: () =>
-      tree.getState().focusedItem === 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, itemId }) =>
+      tree.getState().expandedItems.includes(itemId),
+    isDescendentOf: ({ item }, parentId) => {
+      const parent = item.getParent();
+      return Boolean(
+        parent?.getId() === parentId || parent?.isDescendentOf(parentId),
+      );
+    },
+    isFocused: ({ tree, item, itemId }) =>
+      tree.getState().focusedItem === itemId ||
       (tree.getState().focusedItem === null && item.getItemMeta().index === 0),
-    isFolder: () =>
+    isFolder: ({ tree, item }) =>
       item.getItemMeta().level === -1 ||
       tree.getConfig().isItemFolder(item as ItemInstance<any>),
-    getItemName: () => {
+    getItemName: ({ tree, item }) => {
       const config = tree.getConfig();
       return config.getItemName(item as ItemInstance<any>);
     },
-    setFocused: () => tree.focusItem(item.getItemMeta().itemId),
-    primaryAction: () =>
+    setFocused: ({ tree, itemId }) => {
+      tree.applySubStateUpdate("focusedItem", itemId);
+    },
+    primaryAction: ({ tree, item }) =>
       tree.getConfig().onPrimaryAction?.(item as ItemInstance<any>),
-    getParent: memo(
-      (itemMeta) => {
-        for (let i = itemMeta.index - 1; i >= 0; i--) {
-          const potentialParent = tree.getItems()[i];
-          if (potentialParent.getItemMeta().level < itemMeta.level) {
-            return potentialParent;
-          }
-        }
-        return tree.getItemInstance(tree.getConfig().rootItemId);
-      },
-      () => [item.getItemMeta()],
-    ),
-    // TODO remove
-    getIndexInParent: () => item.getItemMeta().posInSet,
-    getChildren: () =>
+    getParent: ({ tree, item }) =>
+      item.getItemMeta().parentId
+        ? tree.getItemInstance(item.getItemMeta().parentId)
+        : undefined,
+    getIndexInParent: ({ item }) => item.getItemMeta().posInSet,
+    getChildren: ({ tree, item }) =>
       tree
         .retrieveChildrenIds(item.getItemMeta().itemId)
         .map((id) => tree.getItemInstance(id)),
-    getTree: () => tree as any,
-    getItemAbove: () => tree.getItems()[item.getItemMeta().index - 1],
-    getItemBelow: () => tree.getItems()[item.getItemMeta().index + 1],
-    getMemoizedProp: (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;
-    },
-  }),
+    getTree: ({ tree }) => tree as any,
+    getItemAbove: ({ tree, item }) =>
+      tree.getItems()[item.getItemMeta().index - 1],
+    getItemBelow: ({ tree, item }) =>
+      tree.getItems()[item.getItemMeta().index + 1],
+  },
 
   hotkeys: {
     focusNextItem: {
@@ -262,7 +219,7 @@ export const treeFeature: FeatureImplementation<
       canRepeat: true,
       preventDefault: true,
       isEnabled: (tree) =>
-        !(tree.isSearchOpen?.() ?? false) && !tree.getState().dnd,
+        !(tree.isSearchOpen?.() ?? false) && !tree.getState().dnd, // TODO what happens when the feature doesnt exist? proxy method still claims to exist
       handler: (e, tree) => {
         tree.focusNextItem();
         tree.updateDomFocus();
@@ -311,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();
       },
     },