@headless-tree/core 0.0.0-20250731075124 → 0.0.0-20250807215101

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @headless-tree/core
 
-## 0.0.0-20250731075124
+## 0.0.0-20250807215101
 
 ### Minor Changes
 
@@ -14,6 +14,8 @@
 - 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
+- 62867e8: Introduced a short delay before hiding the drag line when leaving a drag target, which helps to reduce flickering of the dragline when moving between items
+- c4579eb: Update keyboard drag and drop to include the focused item in the dragged items
 - 662e2a8: Improved customizability of checkboxes feature (still alpha state), allowing you to customize `propagateCheckedState` and `canCheckFolders` independently
 - 662e2a8: Changed to new buildtool in core packages (now using tsup) to hopefully fix some ESM/CJS integrations
 

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
+    lastDragEnter?: number;
     windowDragEndListener?: () => void;
 }
 interface DndState<T> {

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
+    lastDragEnter?: number;
     windowDragEndListener?: () => void;
 }
 interface DndState<T> {

package/dist/index.js

@@ -1516,6 +1516,7 @@ var dragAndDropFeature = {
           return;
         }
         dataRef.current.lastDragCode = nextDragCode;
+        dataRef.current.lastDragEnter = Date.now();
         const target = getDragTarget(e, item, tree);
         if (!((_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems) && (!e.dataTransfer || !((_c = (_b = tree.getConfig()).canDragForeignDragObjectOver) == null ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
           dataRef.current.lastAllowDrop = false;
@@ -1533,12 +1534,16 @@ var dragAndDropFeature = {
         e.preventDefault();
       },
       onDragLeave: () => {
-        const dataRef = tree.getDataRef();
-        dataRef.current.lastDragCode = "no-drag";
-        tree.applySubStateUpdate("dnd", (state) => __spreadProps(__spreadValues({}, state), {
-          draggingOverItem: void 0,
-          dragTarget: void 0
-        }));
+        setTimeout(() => {
+          var _a;
+          const dataRef = tree.getDataRef();
+          if (((_a = dataRef.current.lastDragEnter) != null ? _a : 0) + 100 >= Date.now()) return;
+          dataRef.current.lastDragCode = "no-drag";
+          tree.applySubStateUpdate("dnd", (state) => __spreadProps(__spreadValues({}, state), {
+            draggingOverItem: void 0,
+            dragTarget: void 0
+          }));
+        }, 100);
       },
       onDragEnd: (e) => {
         var _a, _b;
@@ -1735,7 +1740,11 @@ var keyboardDragAndDropFeature = {
       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/dist/index.mjs

@@ -1472,6 +1472,7 @@ var dragAndDropFeature = {
           return;
         }
         dataRef.current.lastDragCode = nextDragCode;
+        dataRef.current.lastDragEnter = Date.now();
         const target = getDragTarget(e, item, tree);
         if (!((_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems) && (!e.dataTransfer || !((_c = (_b = tree.getConfig()).canDragForeignDragObjectOver) == null ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
           dataRef.current.lastAllowDrop = false;
@@ -1489,12 +1490,16 @@ var dragAndDropFeature = {
         e.preventDefault();
       },
       onDragLeave: () => {
-        const dataRef = tree.getDataRef();
-        dataRef.current.lastDragCode = "no-drag";
-        tree.applySubStateUpdate("dnd", (state) => __spreadProps(__spreadValues({}, state), {
-          draggingOverItem: void 0,
-          dragTarget: void 0
-        }));
+        setTimeout(() => {
+          var _a;
+          const dataRef = tree.getDataRef();
+          if (((_a = dataRef.current.lastDragEnter) != null ? _a : 0) + 100 >= Date.now()) return;
+          dataRef.current.lastDragCode = "no-drag";
+          tree.applySubStateUpdate("dnd", (state) => __spreadProps(__spreadValues({}, state), {
+            draggingOverItem: void 0,
+            dragTarget: void 0
+          }));
+        }, 100);
       },
       onDragEnd: (e) => {
         var _a, _b;
@@ -1691,7 +1696,11 @@ var keyboardDragAndDropFeature = {
       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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250731075124",
+  "version": "0.0.0-20250807215101",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",

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

@@ -193,6 +193,7 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
         dataRef.current.lastDragCode = nextDragCode;
+        dataRef.current.lastDragEnter = Date.now();
 
         const target = getDragTarget(e, item, tree);
 
@@ -222,13 +223,16 @@ 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) => {

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;
+  lastDragEnter?: number;
   windowDragEndListener?: () => void;
 }
 

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,