@headless-tree/core 0.0.0-20250716233347 → 0.0.0-20250723222210

package/CHANGELOG.md

@@ -1,10 +1,12 @@
 # @headless-tree/core
 
-## 0.0.0-20250716233347
+## 0.0.0-20250723222210
 
 ### Patch Changes
 
+- b41e1d2: fixed a bug where ending drag without successful drop doesn't properly reset drag line (#132)
 - b413f74: Fix `aria-posinset` and `aria-level` to be 1-based indexing
+- a250b3b: Fix a bug where expand from the initial keyboard focus fails when rootItemId is an empty string
 
 ## 1.2.1
 

package/lib/cjs/features/drag-and-drop/feature.js

@@ -19,6 +19,19 @@ exports.dragAndDropFeature = {
     stateHandlerNames: {
         dnd: "setDndState",
     },
+    onTreeMount: (tree) => {
+        const listener = () => {
+            tree.applySubStateUpdate("dnd", null);
+        };
+        tree.getDataRef().current.windowDragEndListener = listener;
+        window.addEventListener("dragend", listener);
+    },
+    onTreeUnmount: (tree) => {
+        const { windowDragEndListener } = tree.getDataRef().current;
+        if (!windowDragEndListener)
+            return;
+        window.removeEventListener("dragend", windowDragEndListener);
+    },
     treeInstance: {
         getDragTarget: ({ tree }) => {
             var _a, _b;
@@ -84,7 +97,6 @@ exports.dragAndDropFeature = {
                     const config = tree.getConfig();
                     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                     dataRef.current.lastDragCode = undefined;
-                    tree.applySubStateUpdate("dnd", null);
                     if (draggedItems) {
                         yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
                     }
@@ -152,7 +164,6 @@ exports.dragAndDropFeature = {
             }, onDragEnd: (e) => {
                 var _a, _b, _c, _d;
                 const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                tree.applySubStateUpdate("dnd", null);
                 if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
                     return;
                 }
@@ -169,7 +180,6 @@ exports.dragAndDropFeature = {
                 const config = tree.getConfig();
                 const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                 dataRef.current.lastDragCode = undefined;
-                tree.applySubStateUpdate("dnd", null);
                 if (draggedItems) {
                     yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
                 }

package/lib/cjs/features/drag-and-drop/types.d.ts

@@ -2,6 +2,7 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 export interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
+    windowDragEndListener?: () => void;
 }
 export interface DndState<T> {
     draggedItems?: ItemInstance<T>[];

package/lib/cjs/features/tree/feature.js

@@ -56,8 +56,9 @@ exports.treeFeature = {
             return flatItems;
         },
         getFocusedItem: ({ tree }) => {
-            var _a, _b;
-            return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
+            var _a;
+            const focusedItemId = tree.getState().focusedItem;
+            return ((_a = (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null)) !== null && _a !== void 0 ? _a : tree.getItems()[0]);
         },
         getRootItem: ({ tree }) => {
             const { rootItemId } = tree.getConfig();

package/lib/cjs/test-utils/test-tree-do.js

@@ -85,12 +85,14 @@ class TestTreeDo {
     dragEnd(itemId, event) {
         const e = event !== null && event !== void 0 ? event : test_tree_1.TestTree.dragEvent();
         this.itemProps(itemId).onDragEnd(e);
+        window.dispatchEvent(new CustomEvent("dragend"));
         return e;
     }
     drop(itemId, event) {
         return __awaiter(this, void 0, void 0, function* () {
             const e = event !== null && event !== void 0 ? event : test_tree_1.TestTree.dragEvent();
             yield this.itemProps(itemId).onDrop(e);
+            window.dispatchEvent(new CustomEvent("dragend"));
             return e;
         });
     }

package/lib/cjs/test-utils/test-tree.js

@@ -127,6 +127,7 @@ class TestTree {
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             this.instance;
             yield this.resolveAsyncVisibleItems();
+            this.instance.registerElement({ getBoundingClientRect: () => null });
             return this;
         });
     }

package/lib/esm/features/drag-and-drop/feature.js

@@ -16,6 +16,19 @@ export const dragAndDropFeature = {
     stateHandlerNames: {
         dnd: "setDndState",
     },
+    onTreeMount: (tree) => {
+        const listener = () => {
+            tree.applySubStateUpdate("dnd", null);
+        };
+        tree.getDataRef().current.windowDragEndListener = listener;
+        window.addEventListener("dragend", listener);
+    },
+    onTreeUnmount: (tree) => {
+        const { windowDragEndListener } = tree.getDataRef().current;
+        if (!windowDragEndListener)
+            return;
+        window.removeEventListener("dragend", windowDragEndListener);
+    },
     treeInstance: {
         getDragTarget: ({ tree }) => {
             var _a, _b;
@@ -81,7 +94,6 @@ export const dragAndDropFeature = {
                     const config = tree.getConfig();
                     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                     dataRef.current.lastDragCode = undefined;
-                    tree.applySubStateUpdate("dnd", null);
                     if (draggedItems) {
                         yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
                     }
@@ -149,7 +161,6 @@ export const dragAndDropFeature = {
             }, onDragEnd: (e) => {
                 var _a, _b, _c, _d;
                 const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                tree.applySubStateUpdate("dnd", null);
                 if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
                     return;
                 }
@@ -166,7 +177,6 @@ export const dragAndDropFeature = {
                 const config = tree.getConfig();
                 const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
                 dataRef.current.lastDragCode = undefined;
-                tree.applySubStateUpdate("dnd", null);
                 if (draggedItems) {
                     yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
                 }

package/lib/esm/features/drag-and-drop/types.d.ts

@@ -2,6 +2,7 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 export interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
+    windowDragEndListener?: () => void;
 }
 export interface DndState<T> {
     draggedItems?: ItemInstance<T>[];

package/lib/esm/features/tree/feature.js

@@ -53,8 +53,9 @@ export const treeFeature = {
             return flatItems;
         },
         getFocusedItem: ({ tree }) => {
-            var _a, _b;
-            return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
+            var _a;
+            const focusedItemId = tree.getState().focusedItem;
+            return ((_a = (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null)) !== null && _a !== void 0 ? _a : tree.getItems()[0]);
         },
         getRootItem: ({ tree }) => {
             const { rootItemId } = tree.getConfig();

package/lib/esm/test-utils/test-tree-do.js

@@ -82,12 +82,14 @@ export class TestTreeDo {
     dragEnd(itemId, event) {
         const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
         this.itemProps(itemId).onDragEnd(e);
+        window.dispatchEvent(new CustomEvent("dragend"));
         return e;
     }
     drop(itemId, event) {
         return __awaiter(this, void 0, void 0, function* () {
             const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
             yield this.itemProps(itemId).onDrop(e);
+            window.dispatchEvent(new CustomEvent("dragend"));
             return e;
         });
     }

package/lib/esm/test-utils/test-tree.js

@@ -124,6 +124,7 @@ export class TestTree {
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             this.instance;
             yield this.resolveAsyncVisibleItems();
+            this.instance.registerElement({ getBoundingClientRect: () => null });
             return this;
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250716233347",
+  "version": "0.0.0-20250723222210",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",

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

@@ -182,7 +182,7 @@ describe("core-feature/drag-and-drop", () => {
         });
       });
 
-      it("updates dnd state", () => {
+      it("updates dnd state", async () => {
         const setDndState = tree.mockedHandler("setDndState");
         tree.do.startDrag("x111");
         expect(setDndState).toBeCalledWith({
@@ -198,7 +198,7 @@ describe("core-feature/drag-and-drop", () => {
           },
         });
         tree.do.drop("x22");
-        expect(setDndState).toBeCalledWith(null);
+        await vi.waitFor(() => expect(setDndState).toBeCalledWith(null));
       });
     });
 

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

@@ -24,6 +24,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;
@@ -106,7 +119,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);
@@ -211,7 +223,6 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       onDragEnd: (e: DragEvent) => {
         const draggedItems = tree.getState().dnd?.draggedItems;
-        tree.applySubStateUpdate("dnd", null);
 
         if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
           return;
@@ -234,7 +245,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,7 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 export interface DndDataRef {
   lastDragCode?: string;
   lastAllowDrop?: boolean;
+  windowDragEndListener?: () => void;
 }
 
 export interface DndState<T> {

package/src/features/tree/feature.ts

@@ -76,8 +76,9 @@ 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]
       );
     },

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

@@ -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/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/vitest.config.ts

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