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

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @headless-tree/core
 
-## 0.0.0-20250731075124
+## 0.0.0-20250807163338
 
 ### Minor Changes
 
@@ -14,6 +14,7 @@
 - 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
 - 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;

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250731075124",
+  "version": "0.0.0-20250807163338",
   "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;
 }