@headless-tree/core 0.0.5 → 0.0.7

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

@@ -5,16 +5,30 @@ 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 DragLineData = {
+  intend: number;
+  top: number;
+  left: number;
+  right: number;
 };
 
+export type DropTarget<T> =
+  | {
+      item: ItemInstance<T>;
+      childIndex: number;
+      insertionIndex: number;
+    }
+  | {
+      item: ItemInstance<T>;
+      childIndex: null;
+      insertionIndex: null;
+    };
+
 export enum DropTargetPosition {
   Top = "top",
   Bottom = "bottom",
@@ -44,15 +58,26 @@ 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;
+    getDragLineData: () => DragLineData | null;
   };
   itemInstance: {
     isDropTarget: () => boolean;

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

@@ -14,7 +14,6 @@ export const expandAllFeature: FeatureImplementation<
   | ExpandAllFeatureDef
 > = {
   key: "expand-all",
-  dependingFeatures: ["main", "tree"],
 
   createTreeInstance: (prev, tree) => ({
     ...prev,
@@ -25,8 +24,9 @@ export const expandAllFeature: FeatureImplementation<
       );
     },
 
-    collapseAll: async () => {
-      tree.getConfig().setExpandedItems?.([]);
+    collapseAll: () => {
+      tree.applySubStateUpdate("expandedItems", []);
+      tree.rebuildTree();
     },
   }),
 
@@ -37,6 +37,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 +53,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/hotkeys-core/feature.ts

@@ -48,7 +48,6 @@ export const hotkeysCoreFeature: FeatureImplementation<
   MainFeatureDef | HotkeysCoreFeatureDef<any>
 > = {
   key: "hotkeys-core",
-  dependingFeatures: ["main", "tree"],
 
   onTreeMount: (tree, element) => {
     const data = tree.getDataRef<HotkeysCoreDataRef>();

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

@@ -10,7 +10,6 @@ export const renamingFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>
 > = {
   key: "renaming",
-  dependingFeatures: ["main", "tree"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     setRenamingItem: makeStateUpdater("renamingItem", tree),
@@ -19,19 +18,23 @@ export const renamingFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    renamingItem: "setRenamingItem",
+    renamingValue: "setRenamingValue",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
     startRenamingItem: (itemId) => {
-      const config = instance.getConfig();
       const item = instance.getItemInstance(itemId);
 
       if (!item.canRename()) {
         return;
       }
 
-      config.setRenamingItem?.(itemId);
-      config.setRenamingValue?.(item.getItemName());
+      instance.applySubStateUpdate("renamingItem", itemId);
+      instance.applySubStateUpdate("renamingValue", item.getItemName());
     },
 
     getRenamingItem: () => {
@@ -42,7 +45,7 @@ export const renamingFeature: FeatureImplementation<
     getRenamingValue: () => instance.getState().renamingValue || "",
 
     abortRenaming: () => {
-      instance.getConfig().setRenamingItem?.(null);
+      instance.applySubStateUpdate("renamingItem", null);
     },
 
     completeRenaming: () => {
@@ -51,7 +54,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 +66,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

@@ -10,7 +10,6 @@ export const searchFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>
 > = {
   key: "search",
-  dependingFeatures: ["main", "tree"],
 
   getInitialState: (initialState) => ({
     search: null,
@@ -25,11 +24,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 +74,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 +109,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 +133,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 +151,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

@@ -10,7 +10,6 @@ export const selectionFeature: FeatureImplementation<
   MainFeatureDef | TreeFeatureDef<any> | SelectionFeatureDef<any>
 > = {
   key: "selection",
-  dependingFeatures: ["main", "tree"],
 
   getInitialState: (initialState) => ({
     selectedItems: [],
@@ -22,11 +21,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
@@ -67,7 +70,7 @@ export const selectionFeature: FeatureImplementation<
       const newSelectedItems = tree
         .getItems()
         .slice(a, b + 1)
-        .map((item) => item.getItemMeta().itemId);
+        .map((treeItem) => treeItem.getItemMeta().itemId);
 
       if (!ctrl) {
         tree.setSelectedItems(newSelectedItems);
@@ -91,6 +94,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,
@@ -8,16 +9,29 @@ export const syncDataLoaderFeature: FeatureImplementation<
   MainFeatureDef | SyncDataLoaderFeatureDef<any>
 > = {
   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;

package/src/features/tree/feature.ts

@@ -14,7 +14,6 @@ export const treeFeature: FeatureImplementation<
   | SyncDataLoaderFeatureDef<any>
 > = {
   key: "tree",
-  dependingFeatures: ["main"],
 
   getInitialState: (initialState) => ({
     expandedItems: [],
@@ -28,6 +27,11 @@ export const treeFeature: FeatureImplementation<
     ...defaultConfig,
   }),
 
+  stateHandlerNames: {
+    expandedItems: "setExpandedItems",
+    focusedItem: "setFocusedItem",
+  },
+
   createTreeInstance: (prev, instance) => ({
     ...prev,
 
@@ -45,7 +49,6 @@ export const treeFeature: FeatureImplementation<
     getItemsMeta: () => {
       const { rootItemId } = instance.getConfig();
       const { expandedItems } = instance.getState();
-      // console.log("!", instance.getConfig());
       const flatItems: ItemMeta[] = [];
 
       const recursiveAdd = (
@@ -91,9 +94,10 @@ export const treeFeature: FeatureImplementation<
         return;
       }
 
-      instance
-        .getConfig()
-        .setExpandedItems?.((expandedItems) => [...expandedItems, itemId]);
+      instance.applySubStateUpdate("expandedItems", (expandedItems) => [
+        ...expandedItems,
+        itemId,
+      ]);
       instance.rebuildTree();
     },
 
@@ -102,11 +106,9 @@ export const treeFeature: FeatureImplementation<
         return;
       }
 
-      instance
-        .getConfig()
-        .setExpandedItems?.((expandedItems) =>
-          expandedItems.filter((id) => id !== itemId)
-        );
+      instance.applySubStateUpdate("expandedItems", (expandedItems) =>
+        expandedItems.filter((id) => id !== itemId)
+      );
       instance.rebuildTree();
     },
 
@@ -119,7 +121,7 @@ export const treeFeature: FeatureImplementation<
     },
 
     focusItem: (itemId) => {
-      instance.getConfig().setFocusedItem?.(itemId);
+      instance.applySubStateUpdate("focusedItem", itemId);
     },
 
     focusNextItem: () => {
@@ -134,7 +136,7 @@ export const treeFeature: FeatureImplementation<
       instance.focusItem(instance.getItems()[nextIndex].getId());
     },
 
-    updateDomFocus: (scrollIntoView) => {
+    updateDomFocus: () => {
       // Required because if the state is managed outside in react, the state only updated during next render
       setTimeout(async () => {
         const focusedItem = instance.getFocusedItem();
@@ -143,9 +145,6 @@ export const treeFeature: FeatureImplementation<
         const focusedElement = focusedItem.getElement();
         if (!focusedElement) return;
         focusedElement.focus();
-        // if (scrollIntoView) {
-        //   focusedElement.scrollIntoView();
-        // }
       });
     },
 
@@ -162,6 +161,11 @@ export const treeFeature: FeatureImplementation<
     isLoading: () => {
       throw new Error("No data-loader registered");
     },
+    scrollTo: async (scrollIntoViewArg) => {
+      tree.getConfig().scrollToItem?.(item as any);
+      await poll(() => item.getElement() !== null, 20);
+      item.getElement()!.scrollIntoView(scrollIntoViewArg);
+    },
     getId: () => item.getItemMeta().itemId,
     getProps: () => {
       const itemMeta = item.getItemMeta();
@@ -170,12 +174,11 @@ export const treeFeature: FeatureImplementation<
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
         "aria-posinset": itemMeta.posInSet,
-        "aria-selected": false,
+        "aria-selected": "false",
         "aria-label": item.getItemName(),
         "aria-level": itemMeta.level,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: item.getMemoizedProp("tree/onClick", () => (e) => {
-          console.log("onClick", item.getId());
           item.setFocused();
           item.primaryAction();
 
@@ -225,10 +228,8 @@ export const treeFeature: FeatureImplementation<
       },
       () => [item.getItemMeta()]
     ),
-    getIndexInParent: () =>
-      item.getItemMeta().index -
-      (item.getParent()?.getItemMeta().index ?? 0) -
-      1,
+    // TODO remove
+    getIndexInParent: () => item.getItemMeta().posInSet,
     getChildren: () =>
       tree
         .retrieveChildrenIds(item.getItemMeta().itemId)
@@ -301,7 +302,7 @@ export const treeFeature: FeatureImplementation<
           item.getItemMeta().level !== 0
         ) {
           item.getParent()?.setFocused();
-          tree.updateDomFocus(true);
+          tree.updateDomFocus();
         } else {
           item.collapse();
         }

package/src/features/tree/types.ts

@@ -41,8 +41,7 @@ export type TreeFeatureDef<T> = {
     getFocusedItem: () => ItemInstance<any>;
     focusNextItem: () => void;
     focusPreviousItem: () => void;
-    scrollToItem: (item: ItemInstance<any>) => void;
-    updateDomFocus: (scrollIntoView?: boolean) => void;
+    updateDomFocus: () => void;
 
     getContainerProps: () => Record<string, any>;
   };
@@ -65,6 +64,9 @@ export type TreeFeatureDef<T> = {
     getItemAbove: () => ItemInstance<T> | null;
     getItemBelow: () => ItemInstance<T> | null;
     getMemoizedProp: <X>(name: string, create: () => X, deps?: any[]) => X;
+    scrollTo: (
+      scrollIntoViewArg?: boolean | ScrollIntoViewOptions
+    ) => Promise<void>;
   };
   hotkeys:
     | "focusNextItem"

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./types/core";
 export * from "./core/create-tree";
+
 export * from "./features/tree/types";
 export * from "./features/main/types";
 export * from "./features/drag-and-drop/types";
@@ -20,4 +21,6 @@ export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";
 
-export * from "./data-adapters/nested-data-adapter";
+export * from "./utilities/create-on-drop-handler";
+export * from "./utilities/insert-items-at-target";
+export * from "./utilities/remove-items-from-parents";