@headless-tree/core 0.0.5 → 0.0.6

package/src/core/create-tree.ts

@@ -44,6 +44,10 @@ export const createTree = <T>(
     (acc, feature) => feature.getDefaultConfig?.(acc, treeInstance) ?? acc,
     initialConfig
   ) as TreeConfig<T>;
+  const stateHandlerNames = additionalFeatures.reduce(
+    (acc, feature) => ({ ...acc, ...feature.stateHandlerNames }),
+    {} as Record<string, string>
+  );
 
   let treeElement: HTMLElement | undefined | null;
   const treeDataRef: { current: any } = { current: {} };
@@ -109,10 +113,14 @@ export const createTree = <T>(
       ...prev,
       getState: () => state,
       setState: (updater) => {
-        state = typeof updater === "function" ? updater(state) : updater;
+        // Not necessary, since I think the subupdate below keeps the state fresh anyways?
+        // state = typeof updater === "function" ? updater(state) : updater;
         config.setState?.(state);
-        eachFeature((feature) => feature.setState?.(treeInstance));
-        eachFeature((feature) => feature.onStateOrConfigChange?.(treeInstance));
+      },
+      applySubStateUpdate: (stateName, updater) => {
+        state[stateName] =
+          typeof updater === "function" ? updater(state[stateName]) : updater;
+        config[stateHandlerNames[stateName]]!(state[stateName]);
       },
       rebuildTree: () => {
         rebuildItemMeta(mainFeature);
@@ -124,11 +132,7 @@ export const createTree = <T>(
 
         if (config.state) {
           state = { ...state, ...config.state };
-          eachFeature((feature) => feature.setState?.(treeInstance));
         }
-
-        eachFeature((feature) => feature.onConfigChange?.(treeInstance));
-        eachFeature((feature) => feature.onStateOrConfigChange?.(treeInstance));
       },
       getItemInstance: (itemId) => itemInstancesMap[itemId],
       getItems: () => itemInstances,

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

@@ -22,6 +22,10 @@ export const asyncDataLoaderFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    loadingItems: "setLoadingItems",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
@@ -36,11 +40,14 @@ export const asyncDataLoaderFeature: FeatureImplementation<
       }
 
       if (!instance.getState().loadingItems.includes(itemId)) {
-        config.setLoadingItems?.((loadingItems) => [...loadingItems, itemId]);
+        instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+          ...loadingItems,
+          itemId,
+        ]);
         config.asyncDataLoader?.getItem(itemId).then((item) => {
           dataRef.current.itemData[itemId] = item;
           config.onLoadedItem?.(itemId, item);
-          config.setLoadingItems?.((loadingItems) =>
+          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId)
           );
         });
@@ -62,7 +69,10 @@ export const asyncDataLoaderFeature: FeatureImplementation<
         return [];
       }
 
-      config.setLoadingItems?.((loadingItems) => [...loadingItems, itemId]);
+      instance.applySubStateUpdate("loadingItems", (loadingItems) => [
+        ...loadingItems,
+        itemId,
+      ]);
 
       if (config.asyncDataLoader?.getChildrenWithData) {
         config.asyncDataLoader?.getChildrenWithData(itemId).then((children) => {
@@ -73,7 +83,7 @@ export const asyncDataLoaderFeature: FeatureImplementation<
           const childrenIds = children.map(({ id }) => id);
           dataRef.current.childrenIds[itemId] = childrenIds;
           config.onLoadedChildren?.(itemId, childrenIds);
-          config.setLoadingItems?.((loadingItems) =>
+          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId)
           );
           instance.rebuildTree();
@@ -82,7 +92,7 @@ export const asyncDataLoaderFeature: FeatureImplementation<
         config.asyncDataLoader?.getChildren(itemId).then((childrenIds) => {
           dataRef.current.childrenIds[itemId] = childrenIds;
           config.onLoadedChildren?.(itemId, childrenIds);
-          config.setLoadingItems?.((loadingItems) =>
+          instance.applySubStateUpdate("loadingItems", (loadingItems) =>
             loadingItems.filter((id) => id !== itemId)
           );
           instance.rebuildTree();

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

@@ -13,10 +13,15 @@ export const dragAndDropFeature: FeatureImplementation<
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
+    canDropForeignDragObject: () => false,
     setDndState: makeStateUpdater("dnd", tree),
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    dnd: "setDndState",
+  },
+
   createTreeInstance: (prev, tree) => ({
     ...prev,
 
@@ -52,7 +57,7 @@ export const dragAndDropFeature: FeatureImplementation<
           e.dataTransfer?.setData(format, data);
         }
 
-        tree.getConfig().setDndState?.({
+        tree.applySubStateUpdate("dnd", {
           draggedItems: items,
           draggingOverItem: tree.getFocusedItem(),
         });
@@ -82,7 +87,7 @@ export const dragAndDropFeature: FeatureImplementation<
 
         dataRef.current.lastDragCode = nextDragCode;
 
-        tree.getConfig().setDndState?.((state) => ({
+        tree.applySubStateUpdate("dnd", (state) => ({
           ...state,
           dragTarget: target,
           draggingOverItem: item,
@@ -92,13 +97,24 @@ export const dragAndDropFeature: FeatureImplementation<
       onDragLeave: item.getMemoizedProp("dnd/onDragLeave", () => () => {
         const dataRef = tree.getDataRef<DndDataRef>();
         dataRef.current.lastDragCode = "no-drag";
-        tree.getConfig().setDndState?.((state) => ({
+        tree.applySubStateUpdate("dnd", (state) => ({
           ...state,
           draggingOverItem: undefined,
           dragTarget: undefined,
         }));
       }),
 
+      onDragEnd: item.getMemoizedProp("dnd/onDragEnd", () => (e) => {
+        const draggedItems = tree.getState().dnd?.draggedItems;
+        tree.applySubStateUpdate("dnd", null);
+
+        if (e.dataTransfer.dropEffect === "none" || !draggedItems) {
+          return;
+        }
+
+        tree.getConfig().onCompleteForeignDrop?.(draggedItems);
+      }),
+
       onDrop: item.getMemoizedProp("dnd/onDrop", () => (e) => {
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDropTarget(e, item, tree);
@@ -112,7 +128,7 @@ export const dragAndDropFeature: FeatureImplementation<
         const draggedItems = tree.getState().dnd?.draggedItems;
 
         dataRef.current.lastDragCode = undefined;
-        tree.getConfig().setDndState?.(null);
+        tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
           config.onDrop?.(draggedItems, target);
@@ -131,19 +147,25 @@ export const dragAndDropFeature: FeatureImplementation<
     isDropTargetAbove: () => {
       const target = tree.getDropTarget();
 
-      if (!target || target.childIndex === null) return false;
-      const targetIndex = target.item.getItemMeta().index;
-
-      return targetIndex + target.childIndex + 1 === item.getItemMeta().index;
+      if (
+        !target ||
+        target.childIndex === null ||
+        target.item !== item.getParent()
+      )
+        return false;
+      return target.childIndex === item.getItemMeta().posInSet;
     },
 
     isDropTargetBelow: () => {
       const target = tree.getDropTarget();
 
-      if (!target || target.childIndex === null) return false;
-      const targetIndex = target.item.getItemMeta().index;
-
-      return targetIndex + target.childIndex === item.getItemMeta().index;
+      if (
+        !target ||
+        target.childIndex === null ||
+        target.item !== item.getParent()
+      )
+        return false;
+      return target.childIndex - 1 === item.getItemMeta().posInSet;
     },
 
     isDraggingOver: () => {

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

@@ -5,15 +5,22 @@ export type DndDataRef = {
 };
 
 export type DndState<T> = {
-  draggedItems?: ItemInstance<T>[];
+  draggedItems?: ItemInstance<T>[]; // TODO not used anymore?
   draggingOverItem?: ItemInstance<T>;
   dragTarget?: DropTarget<T>;
 };
 
-export type DropTarget<T> = {
-  item: ItemInstance<T>;
-  childIndex: number | null;
-};
+export type DropTarget<T> =
+  | {
+      item: ItemInstance<T>;
+      childIndex: number;
+      insertionIndex: number;
+    }
+  | {
+      item: ItemInstance<T>;
+      childIndex: null;
+      insertionIndex: null;
+    };
 
 export enum DropTargetPosition {
   Top = "top",
@@ -44,12 +51,22 @@ export type DragAndDropFeatureDef<T> = {
       dataTransfer: DataTransfer,
       target: DropTarget<T>
     ) => boolean;
-
     onDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => void;
     onDropForeignDragObject?: (
       dataTransfer: DataTransfer,
       target: DropTarget<T>
     ) => void;
+
+    /** Runs in the onDragEnd event, if `ev.dataTransfer.dropEffect` is not `none`, i.e. the drop
+     * was not aborted. No target is provided as parameter since the target may be a foreign drop target.
+     * This is useful to seperate out the logic to move dragged items out of their previous parents.
+     * Use `onDrop` to handle drop-related logic.
+     *
+     * This ignores the `canDrop` handler, since the drop target is unknown in this handler.
+     */
+    // onSuccessfulDragEnd?: (items: ItemInstance<T>[]) => void;
+
+    onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
   };
   treeInstance: {
     getDropTarget: () => DropTarget<T> | null;

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

@@ -1,5 +1,10 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
-import { DropTarget, DropTargetPosition } from "./types";
+import {
+  DndState,
+  DragAndDropFeatureDef,
+  DropTarget,
+  DropTargetPosition,
+} from "./types";
 
 export const getDragCode = ({ item, childIndex }: DropTarget<any>) =>
   `${item.getId()}__${childIndex ?? "none"}`;
@@ -49,40 +54,64 @@ const getDropTargetPosition = (
 export const getDropTarget = (
   e: any,
   item: ItemInstance<any>,
-  tree: TreeInstance<any>
+  tree: TreeInstance<any>,
+  canDropInbetween = tree.getConfig().canDropInbetween
 ): DropTarget<any> => {
   const config = tree.getConfig();
-  const offset = getDropOffset(e, item);
+  const draggedItems = tree.getState().dnd?.draggedItems ?? [];
+  const itemTarget = { item, childIndex: null, insertionIndex: null };
+  const parentTarget = {
+    item: item.getParent(),
+    childIndex: null,
+    insertionIndex: null,
+  };
 
-  const dropOnItemTarget = { item, childIndex: null };
+  if (!canDropInbetween) {
+    if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+      return getDropTarget(e, item.getParent(), tree, false);
+    }
+    return itemTarget;
+  }
 
-  const pos = getDropTargetPosition(
-    offset,
-    config.topLinePercentage ?? 0.3,
-    config.bottomLinePercentage ?? 0.7
-  );
-  const inbetweenPos = getDropTargetPosition(offset, 0.5, 0.5);
+  const canDropInside = canDrop(e.dataTransfer, itemTarget, tree);
 
-  if (!config.canDropInbetween) {
-    return dropOnItemTarget;
-  }
+  const offset = getDropOffset(e, item);
 
-  if (!canDrop(e.dataTransfer, dropOnItemTarget, tree)) {
-    return {
-      item: item.getParent(),
-      childIndex:
-        item.getIndexInParent() +
-        (inbetweenPos === DropTargetPosition.Top ? 0 : 1),
-    };
-  }
+  const pos = canDropInside
+    ? getDropTargetPosition(
+        offset,
+        config.topLinePercentage ?? 0.3,
+        config.bottomLinePercentage ?? 0.7
+      )
+    : getDropTargetPosition(offset, 0.5, 0.5);
 
   if (pos === DropTargetPosition.Item) {
-    return dropOnItemTarget;
+    return itemTarget;
+  }
+
+  if (!canDrop(e.dataTransfer, parentTarget, tree)) {
+    return getDropTarget(e, item.getParent(), tree, false);
   }
 
+  const childIndex =
+    item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1);
+
+  const numberOfDragItemsBeforeTarget = item
+    .getParent()
+    .getChildren()
+    .slice(0, childIndex)
+    .reduce(
+      (counter, child) =>
+        child && draggedItems?.some((i) => i.getId() === child.getId())
+          ? ++counter
+          : counter,
+      0
+    );
+
   return {
     item: item.getParent(),
-    childIndex:
-      item.getIndexInParent() + (pos === DropTargetPosition.Top ? 0 : 1),
+    childIndex,
+    // TODO performance could be improved by computing this only when dragcode changed
+    insertionIndex: childIndex - numberOfDragItemsBeforeTarget,
   };
 };

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

@@ -25,8 +25,9 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: async () => {
-      tree.getConfig().setExpandedItems?.([]);
+    collapseAll: () => {
+      tree.applySubStateUpdate("expandedItems", []);
+      tree.rebuildTree();
     },
   }),
 
@@ -37,6 +38,9 @@ export const expandAllFeature: FeatureImplementation<
       if (cancelToken?.current) {
         return;
       }
+      if (!item.isFolder()) {
+        return;
+      }
 
       item.expand();
       await poll(() => !tree.getState().loadingItems.includes(item.getId()));
@@ -50,12 +54,10 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: async () => {
-      await Promise.all(
-        item.getChildren().map(async (child) => {
-          await child?.collapseAll();
-        })
-      );
+    collapseAll: () => {
+      for (const child of item.getChildren()) {
+        child?.collapseAll();
+      }
       item.collapse();
     },
   }),

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

@@ -3,11 +3,11 @@ export type ExpandAllFeatureDef = {
   config: {};
   treeInstance: {
     expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
-    collapseAll: () => Promise<void>;
+    collapseAll: () => void;
   };
   itemInstance: {
     expandAll: (cancelToken?: { current: boolean }) => Promise<void>;
-    collapseAll: () => Promise<void>;
+    collapseAll: () => void;
   };
   hotkeys: never;
 };

package/src/features/main/types.ts

@@ -5,6 +5,7 @@ import {
   SetStateFn,
   TreeConfig,
   TreeState,
+  Updater,
 } from "../../types/core";
 import { ItemMeta } from "../tree/types";
 
@@ -17,6 +18,11 @@ export type MainFeatureDef<T = any> = {
     setState?: SetStateFn<TreeState<T>>;
   };
   treeInstance: {
+    /** @internal */
+    applySubStateUpdate: <K extends keyof TreeState<any>>(
+      stateName: K,
+      updater: Updater<TreeState<T>[K]>
+    ) => void;
     setState: SetStateFn<TreeState<T>>;
     getState: () => TreeState<T>;
     setConfig: SetStateFn<TreeConfig<T>>;

package/src/features/renaming/feature.ts

@@ -19,6 +19,11 @@ export const renamingFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    renamingItem: "setRenamingItem",
+    renamingValue: "setRenamingValue",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
@@ -30,8 +35,8 @@ export const renamingFeature: FeatureImplementation<
         return;
       }
 
-      config.setRenamingItem?.(itemId);
-      config.setRenamingValue?.(item.getItemName());
+      instance.applySubStateUpdate("renamingItem", itemId);
+      instance.applySubStateUpdate("renamingValue", item.getItemName());
     },
 
     getRenamingItem: () => {
@@ -42,7 +47,7 @@ export const renamingFeature: FeatureImplementation<
     getRenamingValue: () => instance.getState().renamingValue || "",
 
     abortRenaming: () => {
-      instance.getConfig().setRenamingItem?.(null);
+      instance.applySubStateUpdate("renamingItem", null);
     },
 
     completeRenaming: () => {
@@ -51,7 +56,7 @@ export const renamingFeature: FeatureImplementation<
       if (item) {
         config.onRename?.(item, instance.getState().renamingValue || "");
       }
-      instance.getConfig().setRenamingItem?.(null);
+      instance.applySubStateUpdate("renamingItem", null);
     },
 
     isRenamingItem: () => !!instance.getState().renamingItem,
@@ -63,7 +68,7 @@ export const renamingFeature: FeatureImplementation<
       onBlur: () => tree.abortRenaming(),
       value: tree.getRenamingValue(),
       onChange: (e) => {
-        tree.getConfig().setRenamingValue?.(e.target.value);
+        tree.applySubStateUpdate("renamingValue", e.target.value);
       },
     }),
 

package/src/features/search/feature.ts

@@ -25,11 +25,15 @@ export const searchFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    search: "setSearch",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
     setSearch: (search) => {
-      instance.getConfig().setSearch?.(search);
+      instance.applySubStateUpdate("search", search);
       instance
         .getItems()
         .find((item) =>
@@ -71,8 +75,9 @@ export const searchFeature: FeatureImplementation<
 
     getSearchMatchingItems: memo(
       (search, items) =>
-        items.filter((item) =>
-          instance.getConfig().isSearchMatchingItem?.(search, item)
+        items.filter(
+          (item) =>
+            search && instance.getConfig().isSearchMatchingItem?.(search, item)
         ),
       () => [instance.getSearchValue(), instance.getItems()]
     ),
@@ -105,12 +110,22 @@ export const searchFeature: FeatureImplementation<
       },
     },
 
+    submitSearch: {
+      hotkey: "Enter",
+      allowWhenInputFocused: true,
+      isEnabled: (tree) => tree.isSearchOpen(),
+      handler: (e, tree) => {
+        tree.closeSearch();
+        tree.setSelectedItems([tree.getFocusedItem().getId()]);
+      },
+    },
+
     nextSearchItem: {
       hotkey: "ArrowDown",
       allowWhenInputFocused: true,
+      canRepeat: true,
       isEnabled: (tree) => tree.isSearchOpen(),
       handler: (e, tree) => {
-        // TODO scroll into view
         const focusItem = tree
           .getSearchMatchingItems()
           .find(
@@ -119,15 +134,16 @@ export const searchFeature: FeatureImplementation<
               tree.getFocusedItem().getItemMeta().index
           );
         focusItem?.setFocused();
+        focusItem?.scrollTo({ block: "nearest", inline: "nearest" });
       },
     },
 
     previousSearchItem: {
       hotkey: "ArrowUp",
       allowWhenInputFocused: true,
+      canRepeat: true,
       isEnabled: (tree) => tree.isSearchOpen(),
       handler: (e, tree) => {
-        // TODO scroll into view
         const focusItem = [...tree.getSearchMatchingItems()]
           .reverse()
           .find(
@@ -136,6 +152,7 @@ export const searchFeature: FeatureImplementation<
               tree.getFocusedItem().getItemMeta().index
           );
         focusItem?.setFocused();
+        focusItem?.scrollTo({ block: "nearest", inline: "nearest" });
       },
     },
   },

package/src/features/search/types.ts

@@ -34,6 +34,7 @@ export type SearchFeatureDef<T> = {
   hotkeys:
     | "openSearch"
     | "closeSearch"
+    | "submitSearch"
     | "nextSearchItem"
     | "previousSearchItem";
 };

package/src/features/selection/feature.ts

@@ -22,11 +22,15 @@ export const selectionFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    selectedItems: "setSelectedItems",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
     setSelectedItems: (selectedItems) => {
-      instance.getConfig().setSelectedItems?.(selectedItems);
+      instance.applySubStateUpdate("selectedItems", selectedItems);
     },
 
     // TODO memo
@@ -91,6 +95,7 @@ export const selectionFeature: FeatureImplementation<
 
     getProps: () => ({
       ...prev.getProps(),
+      "aria-selected": item.isSelected() ? "true" : "false",
       onClick: item.getMemoizedProp("selection/onClick", () => (e) => {
         if (e.shiftKey) {
           item.selectUpTo(e.ctrlKey || e.metaKey);

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

@@ -1,6 +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,
@@ -10,14 +11,28 @@ export const syncDataLoaderFeature: FeatureImplementation<
   key: "sync-data-loader",
   dependingFeatures: ["main"],
 
+  getInitialState: (initialState) => ({
+    loadingItems: [],
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => ({
+    setLoadingItems: makeStateUpdater("loadingItems", tree),
+    ...defaultConfig,
+  }),
+
+  stateHandlerNames: {
+    loadingItems: "setLoadingItems",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
     retrieveItemData: (itemId) =>
-      instance.getConfig().dataLoader.getItem(itemId),
+      instance.getConfig().dataLoader!.getItem(itemId),
 
     retrieveChildrenIds: (itemId) =>
-      instance.getConfig().dataLoader.getChildren(itemId),
+      instance.getConfig().dataLoader!.getChildren(itemId),
   }),
 
   createItemInstance: (prev) => ({

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

@@ -7,7 +7,7 @@ export type SyncDataLoaderFeatureDef<T> = {
   state: {};
   config: {
     rootItemId: string;
-    dataLoader: SyncTreeDataLoader<T>;
+    dataLoader?: SyncTreeDataLoader<T>;
   };
   treeInstance: {
     retrieveItemData: (itemId: string) => T;