@headless-tree/core 0.0.13 → 0.0.15

package/src/features/prop-memoization/prop-memoization.spec.ts

@@ -17,8 +17,8 @@ const customFeature: FeatureImplementation = {
     }),
   },
   treeInstance: {
-    getContainerProps: ({ prev }) => ({
-      ...prev?.(),
+    getContainerProps: ({ prev }, treeLabel) => ({
+      ...prev?.(treeLabel),
       customValue: createTreeValue(),
       onCustomEvent: () => treeHandler(),
     }),

package/src/features/prop-memoization/types.ts

@@ -1,6 +1,6 @@
-export type PropMemoizationDataRef = {
+export interface PropMemoizationDataRef {
   memoizedProps?: Record<string, any>;
-};
+}
 
 export type PropMemoizationFeatureDef = {
   state: {};

package/src/features/renaming/feature.ts

@@ -1,6 +1,12 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
 
+type InputEvent = {
+  target?: {
+    value: string;
+  };
+};
+
 export const renamingFeature: FeatureImplementation = {
   key: "renaming",
 
@@ -53,10 +59,10 @@ export const renamingFeature: FeatureImplementation = {
     },
 
     getRenameInputProps: ({ tree }) => ({
+      ref: (r: HTMLInputElement) => r?.focus(),
       onBlur: () => tree.abortRenaming(),
       value: tree.getRenamingValue(),
-      onChange: (e: any) => {
-        // TODO custom type with e.target.value
+      onChange: (e: InputEvent) => {
         tree.applySubStateUpdate("renamingValue", e.target?.value);
       },
     }),

package/src/features/search/feature.ts

@@ -56,10 +56,12 @@ export const searchFeature: FeatureImplementation = {
     getSearchInputElement: ({ tree }) =>
       tree.getDataRef<SearchFeatureDataRef>().current.searchInput ?? null,
 
+    // TODO memoize with propMemoizationFeature
     getSearchInputElementProps: ({ tree }) => ({
       value: tree.getSearchValue(),
       onChange: (e: any) => tree.setSearch(e.target.value),
       onBlur: () => tree.closeSearch(),
+      ref: tree.registerSearchInputElement,
     }),
 
     getSearchMatchingItems: memo(

package/src/features/search/types.ts

@@ -1,10 +1,10 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 import { HotkeysCoreDataRef } from "../hotkeys-core/types";
 
-export type SearchFeatureDataRef<T = any> = HotkeysCoreDataRef & {
+export interface SearchFeatureDataRef<T = any> extends HotkeysCoreDataRef {
   matchingItems: ItemInstance<T>[];
   searchInput: HTMLInputElement | null;
-};
+}
 
 export type SearchFeatureDef<T> = {
   state: {

package/src/features/selection/feature.ts

@@ -23,7 +23,6 @@ export const selectionFeature: FeatureImplementation = {
       tree.applySubStateUpdate("selectedItems", selectedItems);
     },
 
-    // TODO memo
     getSelectedItems: ({ tree }) => {
       return tree.getState().selectedItems.map(tree.getItemInstance);
     },
@@ -103,9 +102,10 @@ export const selectionFeature: FeatureImplementation = {
     //     tree.setSelectedItems([tree.getFocusedItem().getId()]);
     //   },
     // },
-    toggleSelectItem: {
-      hotkey: "ctrl+space",
-      handler: (e, tree) => {
+    toggleSelectedItem: {
+      hotkey: "Control+Space",
+      preventDefault: true,
+      handler: (_, tree) => {
         tree.getFocusedItem().toggleSelect();
       },
     },

package/src/features/selection/types.ts

@@ -19,7 +19,7 @@ export type SelectionFeatureDef<T> = {
     selectUpTo: (ctrl: boolean) => void;
   };
   hotkeys:
-    | "toggleSelectItem"
+    | "toggleSelectedItem"
     | "selectUpwards"
     | "selectDownwards"
     | "selectAll";

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

@@ -1,29 +1,48 @@
 import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
+import { throwError } from "../../utilities/errors";
+
+const promiseErrorMessage = "sync dataLoader returned promise";
 
 export const syncDataLoaderFeature: FeatureImplementation = {
   key: "sync-data-loader",
 
   getInitialState: (initialState) => ({
-    loadingItems: [],
+    loadingItemData: [],
+    loadingItemChildrens: [],
     ...initialState,
   }),
 
   getDefaultConfig: (defaultConfig, tree) => ({
-    setLoadingItems: makeStateUpdater("loadingItems", tree),
+    setLoadingItemData: makeStateUpdater("loadingItemData", tree),
+    setLoadingItemChildrens: makeStateUpdater("loadingItemChildrens", tree),
     ...defaultConfig,
   }),
 
   stateHandlerNames: {
-    loadingItems: "setLoadingItems",
+    loadingItemData: "setLoadingItemData",
+    loadingItemChildrens: "setLoadingItemChildrens",
   },
 
   treeInstance: {
-    retrieveItemData: ({ tree }, itemId) =>
-      tree.getConfig().dataLoader!.getItem(itemId),
+    waitForItemDataLoaded: async () => {},
+    waitForItemChildrenLoaded: async () => {},
+
+    retrieveItemData: ({ tree }, itemId) => {
+      const data = tree.getConfig().dataLoader.getItem(itemId);
+      if (typeof data === "object" && "then" in data) {
+        throw throwError(promiseErrorMessage);
+      }
+      return data;
+    },
 
-    retrieveChildrenIds: ({ tree }, itemId) =>
-      tree.getConfig().dataLoader!.getChildren(itemId),
+    retrieveChildrenIds: ({ tree }, itemId) => {
+      const data = tree.getConfig().dataLoader.getChildren(itemId);
+      if (typeof data === "object" && "then" in data) {
+        throw throwError(promiseErrorMessage);
+      }
+      return data;
+    },
   },
 
   itemInstance: {

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

@@ -1,13 +1,13 @@
-export type SyncTreeDataLoader<T> = {
-  getItem: (itemId: string) => T;
-  getChildren: (itemId: string) => string[];
-};
+export interface TreeDataLoader<T> {
+  getItem: (itemId: string) => T | Promise<T>;
+  getChildren: (itemId: string) => string[] | Promise<string[]>;
+}
 
 export type SyncDataLoaderFeatureDef<T> = {
   state: {};
   config: {
     rootItemId: string;
-    dataLoader?: SyncTreeDataLoader<T>;
+    dataLoader: TreeDataLoader<T>;
   };
   treeInstance: {
     retrieveItemData: (itemId: string) => T;

package/src/features/tree/feature.ts

@@ -27,7 +27,7 @@ export const treeFeature: FeatureImplementation<any> = {
       const { rootItemId } = tree.getConfig();
       const { expandedItems } = tree.getState();
       const flatItems: ItemMeta[] = [];
-      const expandedItemsSet = new Set(expandedItems);
+      const expandedItemsSet = new Set(expandedItems); // TODO support setting state expandedItems as set instead of array
 
       const recursiveAdd = (
         itemId: string,
@@ -46,7 +46,6 @@ export const treeFeature: FeatureImplementation<any> = {
         });
 
         if (expandedItemsSet.has(itemId)) {
-          // TODO THIS MADE A HUGE DIFFERENCE!
           const children = tree.retrieveChildrenIds(itemId) ?? [];
           let i = 0;
           for (const childId of children) {
@@ -97,11 +96,11 @@ export const treeFeature: FeatureImplementation<any> = {
     },
 
     // TODO add label parameter
-    getContainerProps: ({ prev, tree }) => ({
+    getContainerProps: ({ prev, tree }, treeLabel) => ({
       ...prev?.(),
       role: "tree",
-      "aria-label": "",
-      ref: tree.registerElement, // TODO memo
+      "aria-label": treeLabel ?? "",
+      ref: tree.registerElement,
     }),
 
     // relevant for hotkeys of this feature
@@ -119,7 +118,7 @@ export const treeFeature: FeatureImplementation<any> = {
       const itemMeta = item.getItemMeta();
       return {
         ...prev?.(),
-        ref: item.registerElement, // TODO memo
+        ref: item.registerElement,
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
         "aria-posinset": itemMeta.posInSet,
@@ -152,7 +151,7 @@ export const treeFeature: FeatureImplementation<any> = {
         return;
       }
 
-      if (tree.getState().loadingItems?.includes(itemId)) {
+      if (tree.getState().loadingItemChildrens?.includes(itemId)) {
         return;
       }
 
@@ -202,10 +201,8 @@ export const treeFeature: FeatureImplementation<any> = {
         ? tree.getItemInstance(item.getItemMeta().parentId)
         : undefined,
     getIndexInParent: ({ item }) => item.getItemMeta().posInSet,
-    getChildren: ({ tree, item }) =>
-      tree
-        .retrieveChildrenIds(item.getItemMeta().itemId)
-        .map((id) => tree.getItemInstance(id)),
+    getChildren: ({ tree, itemId }) =>
+      tree.retrieveChildrenIds(itemId).map((id) => tree.getItemInstance(id)),
     getTree: ({ tree }) => tree as any,
     getItemAbove: ({ tree, item }) =>
       tree.getItems()[item.getItemMeta().index - 1],

package/src/features/tree/types.ts

@@ -1,18 +1,18 @@
 import { ItemInstance, SetStateFn, TreeInstance } from "../../types/core";
 
-export type ItemMeta = {
+export interface ItemMeta {
   itemId: string;
   parentId: string;
   level: number;
   index: number;
   setSize: number;
   posInSet: number;
-};
+}
 
-export type TreeItemDataRef = {
+export interface TreeItemDataRef {
   memoizedValues: Record<string, any>;
   memoizedDeps: Record<string, any[] | undefined>;
-};
+}
 
 export type TreeFeatureDef<T> = {
   state: {
@@ -38,7 +38,9 @@ export type TreeFeatureDef<T> = {
     focusPreviousItem: () => void;
     updateDomFocus: () => void;
 
-    getContainerProps: () => Record<string, any>;
+    /** Pass to the container rendering the tree children. The `treeLabel` parameter
+     * will be passed as `aria-label` parameter, and is recommended to be set. */
+    getContainerProps: (treeLabel?: string) => Record<string, any>;
   };
   itemInstance: {
     getId: () => string;

package/src/index.ts

@@ -4,6 +4,7 @@ export * from "./core/create-tree";
 export * from "./features/tree/types";
 export { MainFeatureDef, InstanceBuilder } from "./features/main/types";
 export * from "./features/drag-and-drop/types";
+export * from "./features/keyboard-drag-and-drop/types";
 export * from "./features/selection/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
@@ -18,6 +19,7 @@ export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";
 export * from "./features/drag-and-drop/feature";
+export * from "./features/keyboard-drag-and-drop/feature";
 export * from "./features/search/feature";
 export * from "./features/renaming/feature";
 export * from "./features/expand-all/feature";

package/src/mddocs-entry.ts

@@ -9,6 +9,7 @@ import { SelectionFeatureDef } from "./features/selection/types";
 import { SyncDataLoaderFeatureDef } from "./features/sync-data-loader/types";
 import { TreeFeatureDef } from "./features/tree/types";
 import { PropMemoizationFeatureDef } from "./features/prop-memoization/types";
+import { KeyboardDragAndDropFeatureDef } from "./features/keyboard-drag-and-drop/types";
 
 export * from ".";
 
@@ -49,6 +50,21 @@ export type DragAndDropFeatureItemInstance<T> =
   DragAndDropFeatureDef<T>["itemInstance"];
 export type DragAndDropFeatureHotkeys<T> = DragAndDropFeatureDef<T>["hotkeys"];
 
+/** @interface */
+export type KeyboardDragAndDropFeatureConfig<T> =
+  KeyboardDragAndDropFeatureDef<T>["config"];
+/** @interface */
+export type KeyboardDragAndDropFeatureState<T> =
+  KeyboardDragAndDropFeatureDef<T>["state"];
+/** @interface */
+export type KeyboardDragAndDropFeatureTreeInstance<T> =
+  KeyboardDragAndDropFeatureDef<T>["treeInstance"];
+/** @interface */
+export type KeyboardDragAndDropFeatureItemInstance<T> =
+  KeyboardDragAndDropFeatureDef<T>["itemInstance"];
+export type KeyboardDragAndDropFeatureHotkeys<T> =
+  KeyboardDragAndDropFeatureDef<T>["hotkeys"];
+
 /** @interface */
 export type ExpandAllFeatureConfig = ExpandAllFeatureDef["config"];
 /** @interface */

package/src/test-utils/test-tree-do.ts

@@ -108,13 +108,13 @@ export class TestTreeDo<T> {
     return e;
   }
 
-  drop(itemId: string, event?: DragEvent) {
+  async drop(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
-    this.itemProps(itemId).onDrop(e);
+    await this.itemProps(itemId).onDrop(e);
     return e;
   }
 
-  dragOverAndDrop(itemId: string, event?: DragEvent) {
+  async dragOverAndDrop(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     this.dragOver(itemId, e);
     return this.drop(itemId, e);

package/src/test-utils/test-tree-expect.ts

@@ -2,7 +2,8 @@
 import { Mock, expect } from "vitest";
 import { DragEvent } from "react";
 import { TestTree } from "./test-tree";
-import { DropTarget } from "../features/drag-and-drop/types";
+import { DragTarget } from "../features/drag-and-drop/types";
+import { TreeState } from "../types/core";
 
 export class TestTreeExpect<T> {
   protected itemInstance(itemId: string) {
@@ -39,7 +40,11 @@ export class TestTreeExpect<T> {
     expect(itemChildren).toEqual(children);
   }
 
-  dropped(draggedItems: string[], target: DropTarget<any>) {
+  substate<K extends keyof TreeState<T>>(key: K, value: TreeState<T>[K]) {
+    expect(this.tree.instance.getState()[key]).toEqual(value);
+  }
+
+  dropped(draggedItems: string[], target: DragTarget<any>) {
     expect(this.tree.instance.getConfig().onDrop).toBeCalledWith(
       draggedItems.map((id) => this.tree.item(id)),
       target,

package/src/test-utils/test-tree.ts

@@ -8,6 +8,7 @@ import { TestTreeExpect } from "./test-tree-expect";
 import { syncDataLoaderFeature } from "../features/sync-data-loader/feature";
 import { asyncDataLoaderFeature } from "../features/async-data-loader/feature";
 import { buildProxiedInstance } from "../core/build-proxified-instance";
+import { TreeDataLoader } from "../features/sync-data-loader/types";
 
 vi.useFakeTimers({ shouldAdvanceTime: true });
 
@@ -20,13 +21,32 @@ export class TestTree<T = string> {
 
   private static asyncLoaderResolvers: (() => void)[] = [];
 
+  private asyncDataLoaderImp: TreeDataLoader<T> = {
+    getItem: async (id: string) => {
+      await new Promise<void>((r) => {
+        (r as any).debugName = `Loading getItem ${id}`;
+        TestTree.asyncLoaderResolvers.push(r);
+      });
+      return id as T;
+    },
+    getChildren: async (id: string) => {
+      await new Promise<void>((r) => {
+        (r as any).debugName = `Loading getChildren ${id}`;
+        TestTree.asyncLoaderResolvers.push(r);
+      });
+      return [`${id}1`, `${id}2`, `${id}3`, `${id}4`];
+    },
+  };
+
   suits = {
     sync: () => ({
       tree: this.withFeatures(syncDataLoaderFeature),
       title: "Synchronous Data Loader",
     }),
     async: () => ({
-      tree: this.withFeatures(asyncDataLoaderFeature),
+      tree: this.withFeatures(asyncDataLoaderFeature).with({
+        dataLoader: this.asyncDataLoaderImp,
+      }),
       title: "Asynchronous Data Loader",
     }),
     proxifiedSync: () => ({
@@ -65,12 +85,12 @@ export class TestTree<T = string> {
   private constructor(private config: TreeConfig<T>) {}
 
   static async resolveAsyncLoaders() {
-    while (TestTree.asyncLoaderResolvers.length) {
+    do {
       TestTree.asyncLoaderResolvers.shift()?.();
       await new Promise<void>((r) => {
         setTimeout(r);
       });
-    }
+    } while (TestTree.asyncLoaderResolvers.length);
   }
 
   async resolveAsyncVisibleItems() {
@@ -88,22 +108,6 @@ export class TestTree<T = string> {
         getItem: (id) => id,
         getChildren: (id) => [`${id}1`, `${id}2`, `${id}3`, `${id}4`],
       },
-      asyncDataLoader: {
-        getItem: async (id) => {
-          await new Promise<void>((r) => {
-            (r as any).debugName = `Loading getItem ${id}`;
-            TestTree.asyncLoaderResolvers.push(r);
-          });
-          return id;
-        },
-        getChildren: async (id) => {
-          await new Promise<void>((r) => {
-            (r as any).debugName = `Loading getChildren ${id}`;
-            TestTree.asyncLoaderResolvers.push(r);
-          });
-          return [`${id}1`, `${id}2`, `${id}3`, `${id}4`];
-        },
-      },
       getItemName: (item) => item.getItemData(),
       indent: 20,
       isItemFolder: (item) => item.getItemMeta().level < 2,
@@ -203,7 +207,7 @@ export class TestTree<T = string> {
     } as HTMLElement);
   }
 
-  static dragEvent(pageX = 1000, pageY = 0) {
+  static dragEvent(clientX = 1000, clientY = 0) {
     return {
       preventDefault: vi.fn(),
       stopPropagation: vi.fn(),
@@ -212,8 +216,8 @@ export class TestTree<T = string> {
         getData: vi.fn(),
         dropEffect: "unchaged-from-test",
       },
-      pageX,
-      pageY,
+      clientX,
+      clientY,
     } as unknown as DragEvent;
   }
 

package/src/types/core.ts

@@ -12,6 +12,7 @@ import { SearchFeatureDef } from "../features/search/types";
 import { RenamingFeatureDef } from "../features/renaming/types";
 import { ExpandAllFeatureDef } from "../features/expand-all/types";
 import { PropMemoizationFeatureDef } from "../features/prop-memoization/types";
+import { KeyboardDragAndDropFeatureDef } from "../features/keyboard-drag-and-drop/types";
 
 export type Updater<T> = T | ((old: T) => T);
 export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
@@ -53,6 +54,7 @@ export type RegisteredFeatures<T> =
   | TreeFeatureDef<T>
   | SelectionFeatureDef<T>
   | DragAndDropFeatureDef<T>
+  | KeyboardDragAndDropFeatureDef<T>
   | HotkeysCoreFeatureDef<T>
   | SyncDataLoaderFeatureDef<T>
   | AsyncDataLoaderFeatureDef<T>

package/src/utilities/create-on-drop-handler.ts

@@ -1,5 +1,5 @@
 import { ItemInstance } from "../types/core";
-import { DropTarget } from "../features/drag-and-drop/types";
+import { DragTarget } from "../features/drag-and-drop/types";
 import { removeItemsFromParents } from "./remove-items-from-parents";
 import { insertItemsAtTarget } from "./insert-items-at-target";
 
@@ -7,8 +7,8 @@ export const createOnDropHandler =
   <T>(
     onChangeChildren: (item: ItemInstance<T>, newChildren: string[]) => void,
   ) =>
-  (items: ItemInstance<T>[], target: DropTarget<T>) => {
+  async (items: ItemInstance<T>[], target: DragTarget<T>) => {
     const itemIds = items.map((item) => item.getId());
-    removeItemsFromParents(items, onChangeChildren);
-    insertItemsAtTarget(itemIds, target, onChangeChildren);
+    await removeItemsFromParents(items, onChangeChildren);
+    await insertItemsAtTarget(itemIds, target, onChangeChildren);
   };

package/src/utilities/insert-items-at-target.ts

@@ -1,18 +1,23 @@
 import { ItemInstance } from "../types/core";
-import { DropTarget } from "../features/drag-and-drop/types";
+import { DragTarget } from "../features/drag-and-drop/types";
 
-export const insertItemsAtTarget = <T>(
+export const insertItemsAtTarget = async <T>(
   itemIds: string[],
-  target: DropTarget<T>,
-  onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void,
+  target: DragTarget<T>,
+  onChangeChildren: (
+    item: ItemInstance<T>,
+    newChildrenIds: string[],
+  ) => Promise<void> | void,
 ) => {
+  await target.item.getTree().waitForItemChildrenLoaded(target.item.getId());
+  const oldChildrenIds = target.item
+    .getTree()
+    .retrieveChildrenIds(target.item.getId());
+
   // add moved items to new common parent, if dropped onto parent
-  if (target.childIndex === null) {
-    const newChildren = [
-      ...target.item.getChildren().map((item) => item.getId()),
-      ...itemIds,
-    ];
-    onChangeChildren(target.item, newChildren);
+  if (!("childIndex" in target)) {
+    const newChildren = [...oldChildrenIds, ...itemIds];
+    await onChangeChildren(target.item, newChildren);
     if (target.item && "updateCachedChildrenIds" in target.item) {
       target.item.updateCachedChildrenIds(newChildren);
     }
@@ -21,14 +26,13 @@ export const insertItemsAtTarget = <T>(
   }
 
   // add moved items to new common parent, if dropped between siblings
-  const oldChildren = target.item.getChildren();
   const newChildren = [
-    ...oldChildren.slice(0, target.insertionIndex).map((item) => item.getId()),
+    ...oldChildrenIds.slice(0, target.insertionIndex),
     ...itemIds,
-    ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
+    ...oldChildrenIds.slice(target.insertionIndex),
   ];
 
-  onChangeChildren(target.item, newChildren);
+  await onChangeChildren(target.item, newChildren);
 
   if (target.item && "updateCachedChildrenIds" in target.item) {
     target.item.updateCachedChildrenIds(newChildren);

package/src/utilities/remove-items-from-parents.ts

@@ -1,8 +1,11 @@
 import { ItemInstance } from "../types/core";
 
-export const removeItemsFromParents = <T>(
+export const removeItemsFromParents = async <T>(
   movedItems: ItemInstance<T>[],
-  onChangeChildren: (item: ItemInstance<T>, newChildrenIds: string[]) => void,
+  onChangeChildren: (
+    item: ItemInstance<T>,
+    newChildrenIds: string[],
+  ) => void | Promise<void>,
 ) => {
   const movedItemsIds = movedItems.map((item) => item.getId());
   const uniqueParents = [
@@ -15,7 +18,7 @@ export const removeItemsFromParents = <T>(
       const newChildren = siblings
         .filter((sibling) => !movedItemsIds.includes(sibling.getId()))
         .map((i) => i.getId());
-      onChangeChildren(parent, newChildren);
+      await onChangeChildren(parent, newChildren);
       if (parent && "updateCachedChildrenIds" in parent) {
         parent?.updateCachedChildrenIds(newChildren);
       }