@headless-tree/core 0.0.14 → 1.0.0

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) {
@@ -64,7 +63,6 @@ export const treeFeature: FeatureImplementation<any> = {
       return flatItems;
     },
 
-    // TODO memo
     getFocusedItem: ({ tree }) => {
       return (
         tree.getItemInstance(tree.getState().focusedItem ?? "") ??
@@ -96,12 +94,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 +116,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 +149,7 @@ export const treeFeature: FeatureImplementation<any> = {
         return;
       }
 
-      if (tree.getState().loadingItems?.includes(itemId)) {
+      if (tree.getState().loadingItemChildrens?.includes(itemId)) {
         return;
       }
 
@@ -202,10 +199,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);
       }