@headless-tree/core 1.2.0 → 1.3.0

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

@@ -1,5 +1,5 @@
 import { FeatureImplementation } from "../../types/core";
-import { DndDataRef, DragLineData } from "./types";
+import { DndDataRef, DragLineData, DragTarget } from "./types";
 import {
   canDrop,
   getDragCode,
@@ -8,13 +8,18 @@ import {
 } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
+const defaultCanDropForeignDragObject = () => false;
 export const dragAndDropFeature: FeatureImplementation = {
   key: "drag-and-drop",
   deps: ["selection"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
-    canDropForeignDragObject: () => false,
+    canDropForeignDragObject: defaultCanDropForeignDragObject,
+    canDragForeignDragObjectOver:
+      defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject
+        ? (dataTransfer) => dataTransfer.effectAllowed !== "none"
+        : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
     ...defaultConfig,
@@ -24,6 +29,19 @@ export const dragAndDropFeature: FeatureImplementation = {
     dnd: "setDndState",
   },
 
+  onTreeMount: (tree) => {
+    const listener = () => {
+      tree.applySubStateUpdate("dnd", null);
+    };
+    tree.getDataRef<DndDataRef>().current.windowDragEndListener = listener;
+    window.addEventListener("dragend", listener);
+  },
+  onTreeUnmount: (tree) => {
+    const { windowDragEndListener } = tree.getDataRef<DndDataRef>().current;
+    if (!windowDragEndListener) return;
+    window.removeEventListener("dragend", windowDragEndListener);
+  },
+
   treeInstance: {
     getDragTarget: ({ tree }) => {
       return tree.getState().dnd?.dragTarget ?? null;
@@ -83,10 +101,37 @@ export const dragAndDropFeature: FeatureImplementation = {
         : { display: "none" };
     },
 
-    getContainerProps: ({ prev }, treeLabel) => {
+    getContainerProps: ({ prev, tree }, treeLabel) => {
       const prevProps = prev?.(treeLabel);
       return {
         ...prevProps,
+
+        onDragOver: (e: DragEvent) => {
+          e.preventDefault();
+        },
+
+        onDrop: async (e: DragEvent) => {
+          // TODO merge implementation with itemInstance.onDrop
+          const dataRef = tree.getDataRef<DndDataRef>();
+          const target: DragTarget<any> = { item: tree.getRootItem() };
+
+          if (!canDrop(e.dataTransfer, target, tree)) {
+            return;
+          }
+
+          e.preventDefault();
+          const config = tree.getConfig();
+          const draggedItems = tree.getState().dnd?.draggedItems;
+
+          dataRef.current.lastDragCode = undefined;
+
+          if (draggedItems) {
+            await config.onDrop?.(draggedItems, target);
+          } else if (e.dataTransfer) {
+            await config.onDropForeignDragObject?.(e.dataTransfer, target);
+          }
+        },
+
         style: {
           ...prevProps?.style,
           position: "relative",
@@ -101,6 +146,8 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       draggable: true,
 
+      onDragEnter: (e: DragEvent) => e.preventDefault(),
+
       onDragStart: (e: DragEvent) => {
         const selectedItems = tree.getSelectedItems();
         const items = selectedItems.includes(item) ? selectedItems : [item];
@@ -115,9 +162,18 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
 
-        if (config.createForeignDragObject) {
-          const { format, data } = config.createForeignDragObject(items);
-          e.dataTransfer?.setData(format, data);
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
+        }
+
+        if (config.createForeignDragObject && e.dataTransfer) {
+          const { format, data, dropEffect, effectAllowed } =
+            config.createForeignDragObject(items);
+          e.dataTransfer.setData(format, data);
+
+          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
+          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
         }
 
         tree.applySubStateUpdate("dnd", {
@@ -127,6 +183,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
 
       onDragOver: (e: DragEvent) => {
+        e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
         const nextDragCode = getDragCode(e, item, tree);
         if (nextDragCode === dataRef.current.lastDragCode) {
@@ -136,6 +193,7 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
         dataRef.current.lastDragCode = nextDragCode;
+        dataRef.current.lastDragEnter = Date.now();
 
         const target = getDragTarget(e, item, tree);
 
@@ -144,7 +202,7 @@ export const dragAndDropFeature: FeatureImplementation = {
           (!e.dataTransfer ||
             !tree
               .getConfig()
-              .canDropForeignDragObject?.(e.dataTransfer, target))
+              .canDragForeignDragObjectOver?.(e.dataTransfer, target))
         ) {
           dataRef.current.lastAllowDrop = false;
           return;
@@ -165,27 +223,41 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
 
       onDragLeave: () => {
-        const dataRef = tree.getDataRef<DndDataRef>();
-        dataRef.current.lastDragCode = "no-drag";
-        tree.applySubStateUpdate("dnd", (state) => ({
-          ...state,
-          draggingOverItem: undefined,
-          dragTarget: undefined,
-        }));
+        setTimeout(() => {
+          const dataRef = tree.getDataRef<DndDataRef>();
+          if ((dataRef.current.lastDragEnter ?? 0) + 100 >= Date.now()) return;
+          dataRef.current.lastDragCode = "no-drag";
+          tree.applySubStateUpdate("dnd", (state) => ({
+            ...state,
+            draggingOverItem: undefined,
+            dragTarget: undefined,
+          }));
+        }, 100);
       },
 
       onDragEnd: (e: DragEvent) => {
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
+          tree.getConfig();
         const draggedItems = tree.getState().dnd?.draggedItems;
-        tree.applySubStateUpdate("dnd", null);
 
         if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
           return;
         }
 
-        tree.getConfig().onCompleteForeignDrop?.(draggedItems);
+        const target = getDragTarget(e, item, tree);
+        if (
+          canDragForeignDragObjectOver &&
+          e.dataTransfer &&
+          !canDragForeignDragObjectOver(e.dataTransfer, target)
+        ) {
+          return;
+        }
+
+        onCompleteForeignDrop?.(draggedItems);
       },
 
       onDrop: async (e: DragEvent) => {
+        e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDragTarget(e, item, tree);
 
@@ -198,7 +270,6 @@ export const dragAndDropFeature: FeatureImplementation = {
         const draggedItems = tree.getState().dnd?.draggedItems;
 
         dataRef.current.lastDragCode = undefined;
-        tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
           await config.onDrop?.(draggedItems, target);

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

@@ -3,6 +3,8 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 export interface DndDataRef {
   lastDragCode?: string;
   lastAllowDrop?: boolean;
+  lastDragEnter?: number;
+  windowDragEndListener?: () => void;
 }
 
 export interface DndState<T> {
@@ -57,11 +59,31 @@ export type DragAndDropFeatureDef<T> = {
     createForeignDragObject?: (items: ItemInstance<T>[]) => {
       format: string;
       data: any;
+      dropEffect?: DataTransfer["dropEffect"];
+      effectAllowed?: DataTransfer["effectAllowed"];
     };
+    setDragImage?: (items: ItemInstance<T>[]) => {
+      imgElement: Element;
+      xOffset?: number;
+      yOffset?: number;
+    };
+
+    /** Checks if a foreign drag object can be dropped on a target, validating that an actual drop can commence based on
+     * the data in the DataTransfer object. */
     canDropForeignDragObject?: (
       dataTransfer: DataTransfer,
       target: DragTarget<T>,
     ) => boolean;
+
+    /** Checks if a droppable visualization should be displayed when dragging a foreign object over a target. Since this
+     * is executed on a dragover event, `dataTransfer.getData()` is not available, so `dataTransfer.effectAllowed` or
+     * `dataTransfer.types` should be used instead. Before actually completing the drag, @{link canDropForeignDragObject}
+     * will be called by HT before applying the drop. */
+    canDragForeignDragObjectOver?: (
+      dataTransfer: DataTransfer,
+      target: DragTarget<T>,
+    ) => boolean;
+
     onDrop?: (
       items: ItemInstance<T>[],
       target: DragTarget<T>,

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

@@ -191,7 +191,14 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {
-        tree.startKeyboardDrag(tree.getSelectedItems());
+        const selectedItems = tree.getSelectedItems();
+        const focusedItem = tree.getFocusedItem();
+
+        tree.startKeyboardDrag(
+          selectedItems.includes(focusedItem)
+            ? selectedItems
+            : selectedItems.concat(focusedItem),
+        );
       },
     },
     dragUp: {

package/src/features/keyboard-drag-and-drop/keyboard-drag-and-drop.spec.ts

@@ -49,6 +49,37 @@ describe("core-feature/keyboard-drag-and-drop", () => {
         tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
       });
 
+      it("starts dragging only focused item", () => {
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          draggedItems: [tree.item("x3")],
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 19,
+            dragLineLevel: 0,
+            insertionIndex: 2,
+            item: tree.item("x"),
+          },
+        });
+      });
+
+      it("starts dragging both selected and focused item", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          draggedItems: [tree.item("x111"), tree.item("x112"), tree.item("x3")],
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 19,
+            dragLineLevel: 0,
+            insertionIndex: 2,
+            item: tree.item("x"),
+          },
+        });
+      });
+
       it("moves down 1", () => {
         tree.do.selectMultiple("x111", "x112");
         tree.do.hotkey("startDrag");
@@ -355,13 +386,13 @@ describe("core-feature/keyboard-drag-and-drop", () => {
 
       it("doesnt go below end of tree", () => {
         const lastState = {
-          draggedItems: [tree.item("x111")],
+          draggedItems: [tree.item("x111"), tree.item("x3")],
           dragTarget: {
             item: tree.item("x"),
             childIndex: 4,
             dragLineIndex: 20,
             dragLineLevel: 0,
-            insertionIndex: 4,
+            insertionIndex: 3,
           },
         };
 
@@ -378,7 +409,7 @@ describe("core-feature/keyboard-drag-and-drop", () => {
 
       it("doesnt go above top of tree", () => {
         const firstState = {
-          draggedItems: [tree.item("x111")],
+          draggedItems: [tree.item("x111"), tree.item("x1")],
           dragTarget: {
             item: tree.item("x"),
             childIndex: 0,

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

@@ -2,9 +2,13 @@ import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
 import { throwError } from "../../utilities/errors";
 
+const undefErrorMessage = "sync dataLoader returned undefined";
 const promiseErrorMessage = "sync dataLoader returned promise";
 const unpromise = <T>(data: T | Promise<T>): T => {
-  if (!data || (typeof data === "object" && "then" in data)) {
+  if (!data) {
+    throw throwError(undefErrorMessage);
+  }
+  if (typeof data === "object" && "then" in data) {
     throw throwError(promiseErrorMessage);
   }
   return data;

package/src/features/tree/feature.ts

@@ -76,12 +76,18 @@ export const treeFeature: FeatureImplementation<any> = {
     },
 
     getFocusedItem: ({ tree }) => {
+      const focusedItemId = tree.getState().focusedItem;
       return (
-        tree.getItemInstance(tree.getState().focusedItem ?? "") ??
+        (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null) ??
         tree.getItems()[0]
       );
     },
 
+    getRootItem: ({ tree }) => {
+      const { rootItemId } = tree.getConfig();
+      return tree.getItemInstance(rootItemId);
+    },
+
     focusNextItem: ({ tree }) => {
       const focused = tree.getFocusedItem().getItemMeta();
       if (!focused) return;
@@ -134,10 +140,10 @@ export const treeFeature: FeatureImplementation<any> = {
         ref: item.registerElement,
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
-        "aria-posinset": itemMeta.posInSet,
+        "aria-posinset": itemMeta.posInSet + 1,
         "aria-selected": "false",
         "aria-label": item.getItemName(),
-        "aria-level": itemMeta.level,
+        "aria-level": itemMeta.level + 1,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: (e: MouseEvent) => {
           item.setFocused();

package/src/features/tree/tree.spec.ts

@@ -235,8 +235,8 @@ describe("core-feature/selections", () => {
       it("generates item props for random item", () => {
         expect(tree.instance.getItemInstance("x2").getProps()).toEqual({
           "aria-label": "x2",
-          "aria-level": 0,
-          "aria-posinset": 1,
+          "aria-level": 1,
+          "aria-posinset": 2,
           "aria-selected": "false",
           "aria-setsize": 4,
           onClick: expect.any(Function),
@@ -249,8 +249,8 @@ describe("core-feature/selections", () => {
       it("generates item props for focused", () => {
         expect(tree.instance.getItemInstance("x1").getProps()).toEqual({
           "aria-label": "x1",
-          "aria-level": 0,
-          "aria-posinset": 0,
+          "aria-level": 1,
+          "aria-posinset": 1,
           "aria-selected": "false",
           "aria-setsize": 4,
           onClick: expect.any(Function),
@@ -472,4 +472,14 @@ describe("core-feature/selections", () => {
       });
     });
   });
+
+  describe("empty rootItemId", () => {
+    factory.with({ rootItemId: "" }).forSuits((tree) => {
+      describe("focused item", () => {
+        it("returns correct initial focused item", () => {
+          expect(tree.instance.getFocusedItem().getId()).toBe("1");
+        });
+      });
+    });
+  });
 });

package/src/features/tree/types.ts

@@ -20,7 +20,7 @@ export type TreeFeatureDef<T> = {
     focusedItem: string | null;
   };
   config: {
-    isItemFolder: (item: ItemInstance<T>) => boolean;
+    isItemFolder: (item: ItemInstance<T>) => boolean; // TODO:breaking use item data as payload
     getItemName: (item: ItemInstance<T>) => string;
 
     onPrimaryAction?: (item: ItemInstance<T>) => void;
@@ -33,7 +33,8 @@ export type TreeFeatureDef<T> = {
     /** @internal */
     getItemsMeta: () => ItemMeta[];
 
-    getFocusedItem: () => ItemInstance<any>;
+    getFocusedItem: () => ItemInstance<T>;
+    getRootItem: () => ItemInstance<T>;
     focusNextItem: () => void;
     focusPreviousItem: () => void;
     updateDomFocus: () => void;

package/src/index.ts

@@ -6,6 +6,7 @@ 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/checkboxes/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
 export * from "./features/hotkeys-core/types";
@@ -15,6 +16,7 @@ export * from "./features/expand-all/types";
 export * from "./features/prop-memoization/types";
 
 export * from "./features/selection/feature";
+export * from "./features/checkboxes/feature";
 export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";

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

@@ -105,12 +105,14 @@ export class TestTreeDo<T> {
   dragEnd(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     this.itemProps(itemId).onDragEnd(e);
+    window.dispatchEvent(new CustomEvent("dragend"));
     return e;
   }
 
   async drop(itemId: string, event?: DragEvent) {
     const e = event ?? TestTree.dragEvent();
     await this.itemProps(itemId).onDrop(e);
+    window.dispatchEvent(new CustomEvent("dragend"));
     return e;
   }
 

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

@@ -137,6 +137,7 @@ export class TestTree<T = string> {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     this.instance;
     await this.resolveAsyncVisibleItems();
+    this.instance.registerElement({ getBoundingClientRect: () => null } as any);
     return this;
   }
 

package/src/types/core.ts

@@ -13,6 +13,7 @@ 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";
+import { CheckboxesFeatureDef } from "../features/checkboxes/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> =
   | MainFeatureDef<T>
   | TreeFeatureDef<T>
   | SelectionFeatureDef<T>
+  | CheckboxesFeatureDef<T>
   | DragAndDropFeatureDef<T>
   | KeyboardDragAndDropFeatureDef<T>
   | HotkeysCoreFeatureDef<T>

package/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["./src/**/*"],
-  "exclude": ["./src/**/*.spec.tsx", "./src/**/*.spec.ts", "./src/**/*.stories.tsx"],
-  "compilerOptions": {
-    "outDir": "lib/esm"
-  }
+  "exclude": ["./src/**/*.spec.tsx", "./src/**/*.spec.ts", "./src/**/*.stories.tsx"]
 }

package/vitest.config.ts

@@ -2,5 +2,7 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  test: {},
+  test: {
+    environment: "jsdom",
+  },
 });

package/lib/cjs/core/build-proxified-instance.d.ts

@@ -1,2 +0,0 @@
-import { InstanceBuilder } from "../features/main/types";
-export declare const buildProxiedInstance: InstanceBuilder;

package/lib/cjs/core/build-proxified-instance.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildProxiedInstance = void 0;
-const errors_1 = require("../utilities/errors");
-const noop = () => { };
-const findPrevInstanceMethod = (features, instanceType, methodKey, featureSearchIndex) => {
-    var _a;
-    for (let i = featureSearchIndex; i >= 0; i--) {
-        const feature = features[i];
-        const itemInstanceMethod = (_a = feature[instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
-        if (itemInstanceMethod) {
-            return i;
-        }
-    }
-    return null;
-};
-const invokeInstanceMethod = (features, instanceType, opts, methodKey, featureIndex, args) => {
-    var _a;
-    const prevIndex = findPrevInstanceMethod(features, instanceType, methodKey, featureIndex - 1);
-    const itemInstanceMethod = (_a = features[featureIndex][instanceType]) === null || _a === void 0 ? void 0 : _a[methodKey];
-    return itemInstanceMethod(Object.assign(Object.assign({}, opts), { prev: prevIndex !== null
-            ? (...newArgs) => invokeInstanceMethod(features, instanceType, opts, methodKey, prevIndex, newArgs)
-            : null }), ...args);
-};
-const buildProxiedInstance = (features, instanceType, buildOpts) => {
-    // demo with prototypes: https://jsfiddle.net/bgenc58r/
-    const opts = {};
-    const item = new Proxy({}, {
-        has(target, key) {
-            if (typeof key === "symbol") {
-                return false;
-            }
-            if (key === "toJSON") {
-                return false;
-            }
-            const hasInstanceMethod = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
-            return Boolean(hasInstanceMethod);
-        },
-        get(target, key) {
-            if (typeof key === "symbol") {
-                return undefined;
-            }
-            if (key === "toJSON") {
-                return {};
-            }
-            return (...args) => {
-                const featureIndex = findPrevInstanceMethod(features, instanceType, key, features.length - 1);
-                if (featureIndex === null) {
-                    throw (0, errors_1.throwError)(`feature missing for method ${key}`);
-                }
-                return invokeInstanceMethod(features, instanceType, opts, key, featureIndex, args);
-            };
-        },
-    });
-    Object.assign(opts, buildOpts(item));
-    return [item, noop];
-};
-exports.buildProxiedInstance = buildProxiedInstance;

package/lib/cjs/core/build-static-instance.d.ts

@@ -1,2 +0,0 @@
-import { InstanceBuilder } from "../features/main/types";
-export declare const buildStaticInstance: InstanceBuilder;

package/lib/cjs/core/build-static-instance.js

@@ -1,26 +0,0 @@
-"use strict";
-/* eslint-disable no-continue,no-labels,no-extra-label */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildStaticInstance = void 0;
-const buildStaticInstance = (features, instanceType, buildOpts) => {
-    const instance = {};
-    const finalize = () => {
-        const opts = buildOpts(instance);
-        featureLoop: for (let i = 0; i < features.length; i++) {
-            // Loop goes in forward order, each features overwrite previous ones and wraps those in a prev() fn
-            const definition = features[i][instanceType];
-            if (!definition)
-                continue featureLoop;
-            methodLoop: for (const [key, method] of Object.entries(definition)) {
-                if (!method)
-                    continue methodLoop;
-                const prev = instance[key];
-                instance[key] = (...args) => {
-                    return method(Object.assign(Object.assign({}, opts), { prev }), ...args);
-                };
-            }
-        }
-    };
-    return [instance, finalize];
-};
-exports.buildStaticInstance = buildStaticInstance;

package/lib/cjs/core/create-tree.d.ts

@@ -1,2 +0,0 @@
-import { TreeConfig, TreeInstance } from "../types/core";
-export declare const createTree: <T>(initialConfig: TreeConfig<T>) => TreeInstance<T>;