@headless-tree/core 0.0.0-20251215184014 → 0.0.0-20260107220200

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # @headless-tree/core
 
-## 0.0.0-20251215184014
+## 0.0.0-20260107220200
+
+### Patch Changes
+
+- 39a8b44: Add skipUpdateTree parameter to `updateCachedChildrenIds` and `updateCachedData` in async tree loader
+- ffd2619: Fixed an issue where `canDropForeignDragObject` was being called in `onDragOver` events without payload. `canDropForeignDragObject` should never be called in `onDragOver` events since there, browsers do not allow access to the data transfer payload. Now, `canDropForeignDragObject` is only called in onDrop events, and `canDragForeignDragObjectOver` is always called in `onDragOver` events.
+
+## 1.6.1
 
 ### Patch Changes
 

package/dist/index.d.mts

@@ -329,9 +329,11 @@ type AsyncDataLoaderFeatureDef<T> = {
          * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
          * the tree will continue to display the old data until the new data has loaded. */
         invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
-        /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch. */
-        updateCachedData: (data: T | undefined) => void;
-        updateCachedChildrenIds: (childrenIds: string[]) => void;
+        /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch.
+         * @param skipUpdateTree If true, the tree will not rebuild the tree structure cache afterwards by calling `tree.rebuildTree()`. */
+        updateCachedData: (data: T | undefined, skipUpdateTree?: boolean) => void;
+        /** @param skipUpdateTree If true, the tree will not rebuild the tree structure cache afterwards by calling `tree.rebuildTree()`. */
+        updateCachedChildrenIds: (childrenIds: string[], skipUpdateTree?: boolean) => void;
         hasLoadedData: () => boolean;
         isLoading: () => boolean;
     };

package/dist/index.d.ts

@@ -329,9 +329,11 @@ type AsyncDataLoaderFeatureDef<T> = {
          * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
          * the tree will continue to display the old data until the new data has loaded. */
         invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
-        /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch. */
-        updateCachedData: (data: T | undefined) => void;
-        updateCachedChildrenIds: (childrenIds: string[]) => void;
+        /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch.
+         * @param skipUpdateTree If true, the tree will not rebuild the tree structure cache afterwards by calling `tree.rebuildTree()`. */
+        updateCachedData: (data: T | undefined, skipUpdateTree?: boolean) => void;
+        /** @param skipUpdateTree If true, the tree will not rebuild the tree structure cache afterwards by calling `tree.rebuildTree()`. */
+        updateCachedChildrenIds: (childrenIds: string[], skipUpdateTree?: boolean) => void;
         hasLoadedData: () => boolean;
         isLoading: () => boolean;
     };

package/dist/index.js

@@ -1274,15 +1274,17 @@ var asyncDataLoaderFeature = {
       }
       yield loadChildrenIds(tree, itemId);
     }),
-    updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
-      const dataRef = tree.getDataRef();
-      dataRef.current.childrenIds[itemId] = childrenIds;
-      tree.rebuildTree();
+    updateCachedChildrenIds: ({ tree, itemId }, childrenIds, skipUpdateTree) => {
+      getDataRef(tree).current.childrenIds[itemId] = childrenIds;
+      if (!skipUpdateTree) {
+        tree.rebuildTree();
+      }
     },
-    updateCachedData: ({ tree, itemId }, data) => {
-      const dataRef = tree.getDataRef();
-      dataRef.current.itemData[itemId] = data;
-      tree.rebuildTree();
+    updateCachedData: ({ tree, itemId }, data, skipUpdateTree) => {
+      getDataRef(tree).current.itemData[itemId] = data;
+      if (!skipUpdateTree) {
+        tree.rebuildTree();
+      }
     },
     hasLoadedData: ({ tree, itemId }) => {
       const dataRef = tree.getDataRef();
@@ -1449,15 +1451,16 @@ var getReparentTarget = (item, reparentLevel, draggedItems) => {
     dragLineLevel: reparentLevel
   };
 };
-var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
+var getDragTarget = (e, item, tree, hasDataTransferPayload, canReorder = tree.getConfig().canReorder) => {
   var _a;
+  const dataTransfer = hasDataTransferPayload ? e.dataTransfer : null;
   const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
   const itemTarget = { item };
   const parentTarget = parent ? { item: parent } : null;
-  const canBecomeSibling = parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
-  const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
+  const canBecomeSibling = parentTarget && canDrop(dataTransfer, parentTarget, tree);
+  const canMakeChild = canDrop(dataTransfer, itemTarget, tree);
   const placement = getTargetPlacement(e, item, tree, canMakeChild);
   if (!canReorder && parent && canBecomeSibling && placement.type !== 2 /* MakeChild */) {
     if (draggedItems == null ? void 0 : draggedItems.some((item2) => item2.isDescendentOf(parent.getId()))) {
@@ -1466,7 +1469,7 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
     return parentTarget;
   }
   if (!canReorder && parent && !canBecomeSibling) {
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
   if (!parent) {
     return itemTarget;
@@ -1475,7 +1478,7 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
     return itemTarget;
   }
   if (!canBecomeSibling) {
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
   if (placement.type === 3 /* Reparent */) {
     return getReparentTarget(item, placement.reparentLevel, draggedItems);
@@ -1657,12 +1660,12 @@ var dragAndDropFeature = {
         dataRef.current.lastDragCode = nextDragCode;
         dataRef.current.lastDragEnter = Date.now();
         handleAutoOpenFolder(dataRef, tree, item, placement);
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
         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;
           return;
         }
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        if (!canDrop(null, target, tree)) {
           dataRef.current.lastAllowDrop = false;
           return;
         }
@@ -1692,7 +1695,7 @@ var dragAndDropFeature = {
         if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
           return;
         }
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
         if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
           return;
         }
@@ -1702,7 +1705,7 @@ var dragAndDropFeature = {
         var _a, _b, _c;
         e.stopPropagation();
         const dataRef = tree.getDataRef();
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, true);
         const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
         const isValidDrop = canDrop(e.dataTransfer, target, tree);
         tree.applySubStateUpdate("dnd", {

package/dist/index.mjs

@@ -1230,15 +1230,17 @@ var asyncDataLoaderFeature = {
       }
       yield loadChildrenIds(tree, itemId);
     }),
-    updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
-      const dataRef = tree.getDataRef();
-      dataRef.current.childrenIds[itemId] = childrenIds;
-      tree.rebuildTree();
+    updateCachedChildrenIds: ({ tree, itemId }, childrenIds, skipUpdateTree) => {
+      getDataRef(tree).current.childrenIds[itemId] = childrenIds;
+      if (!skipUpdateTree) {
+        tree.rebuildTree();
+      }
     },
-    updateCachedData: ({ tree, itemId }, data) => {
-      const dataRef = tree.getDataRef();
-      dataRef.current.itemData[itemId] = data;
-      tree.rebuildTree();
+    updateCachedData: ({ tree, itemId }, data, skipUpdateTree) => {
+      getDataRef(tree).current.itemData[itemId] = data;
+      if (!skipUpdateTree) {
+        tree.rebuildTree();
+      }
     },
     hasLoadedData: ({ tree, itemId }) => {
       const dataRef = tree.getDataRef();
@@ -1405,15 +1407,16 @@ var getReparentTarget = (item, reparentLevel, draggedItems) => {
     dragLineLevel: reparentLevel
   };
 };
-var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
+var getDragTarget = (e, item, tree, hasDataTransferPayload, canReorder = tree.getConfig().canReorder) => {
   var _a;
+  const dataTransfer = hasDataTransferPayload ? e.dataTransfer : null;
   const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
   const itemTarget = { item };
   const parentTarget = parent ? { item: parent } : null;
-  const canBecomeSibling = parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
-  const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
+  const canBecomeSibling = parentTarget && canDrop(dataTransfer, parentTarget, tree);
+  const canMakeChild = canDrop(dataTransfer, itemTarget, tree);
   const placement = getTargetPlacement(e, item, tree, canMakeChild);
   if (!canReorder && parent && canBecomeSibling && placement.type !== 2 /* MakeChild */) {
     if (draggedItems == null ? void 0 : draggedItems.some((item2) => item2.isDescendentOf(parent.getId()))) {
@@ -1422,7 +1425,7 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
     return parentTarget;
   }
   if (!canReorder && parent && !canBecomeSibling) {
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
   if (!parent) {
     return itemTarget;
@@ -1431,7 +1434,7 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
     return itemTarget;
   }
   if (!canBecomeSibling) {
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
   if (placement.type === 3 /* Reparent */) {
     return getReparentTarget(item, placement.reparentLevel, draggedItems);
@@ -1613,12 +1616,12 @@ var dragAndDropFeature = {
         dataRef.current.lastDragCode = nextDragCode;
         dataRef.current.lastDragEnter = Date.now();
         handleAutoOpenFolder(dataRef, tree, item, placement);
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
         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;
           return;
         }
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        if (!canDrop(null, target, tree)) {
           dataRef.current.lastAllowDrop = false;
           return;
         }
@@ -1648,7 +1651,7 @@ var dragAndDropFeature = {
         if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
           return;
         }
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
         if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
           return;
         }
@@ -1658,7 +1661,7 @@ var dragAndDropFeature = {
         var _a, _b, _c;
         e.stopPropagation();
         const dataRef = tree.getDataRef();
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, true);
         const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
         const isValidDrop = canDrop(e.dataTransfer, target, tree);
         tree.applySubStateUpdate("dnd", {

package/package.json

@@ -13,7 +13,7 @@
     "checkbox",
     "hook"
   ],
-  "version": "0.0.0-20251215184014",
+  "version": "0.0.0-20260107220200",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",

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

@@ -180,15 +180,21 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
       }
       await loadChildrenIds(tree, itemId);
     },
-    updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      dataRef.current.childrenIds[itemId] = childrenIds;
-      tree.rebuildTree();
+    updateCachedChildrenIds: (
+      { tree, itemId },
+      childrenIds,
+      skipUpdateTree,
+    ) => {
+      getDataRef(tree).current.childrenIds[itemId] = childrenIds;
+      if (!skipUpdateTree) {
+        tree.rebuildTree();
+      }
     },
-    updateCachedData: ({ tree, itemId }, data) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      dataRef.current.itemData[itemId] = data;
-      tree.rebuildTree();
+    updateCachedData: ({ tree, itemId }, data, skipUpdateTree) => {
+      getDataRef(tree).current.itemData[itemId] = data;
+      if (!skipUpdateTree) {
+        tree.rebuildTree();
+      }
     },
     hasLoadedData: ({ tree, itemId }) => {
       const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();

package/src/features/async-data-loader/types.ts

@@ -39,6 +39,7 @@ export type AsyncDataLoaderFeatureDef<T> = {
     waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
     loadItemData: (itemId: string) => Promise<T>;
     loadChildrenIds: (itemId: string) => Promise<string[]>;
+
     /* idea: recursiveLoadItems: (itemId: string, cancelToken?: { current: boolean }, onLoad: (itemIds: string[]) => void) => Promise<T[]> */
   };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
@@ -52,9 +53,16 @@ export type AsyncDataLoaderFeatureDef<T> = {
      * the tree will continue to display the old data until the new data has loaded. */
     invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
 
-    /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch. */
-    updateCachedData: (data: T | undefined) => void;
-    updateCachedChildrenIds: (childrenIds: string[]) => void;
+    /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch.
+     * @param skipUpdateTree If true, the tree will not rebuild the tree structure cache afterwards by calling `tree.rebuildTree()`. */
+    updateCachedData: (data: T | undefined, skipUpdateTree?: boolean) => void;
+
+    /** @param skipUpdateTree If true, the tree will not rebuild the tree structure cache afterwards by calling `tree.rebuildTree()`. */
+    updateCachedChildrenIds: (
+      childrenIds: string[],
+      skipUpdateTree?: boolean,
+    ) => void;
+
     hasLoadedData: () => boolean;
     isLoading: () => boolean;
   };

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

@@ -328,8 +328,7 @@ describe("core-feature/drag-and-drop", () => {
           "onDropForeignDragObject",
         );
         const event = tree.createBottomDragEvent(2);
-        tree.setElementBoundingBox("x212");
-        tree.setElementBoundingBox("x213");
+        tree.setElementBoundingBox("x112");
         tree.do.dragOver("x112", event);
         tree.do.drop("x112", event);
         expect(onDropForeignDragObject).toHaveBeenCalledWith(
@@ -357,6 +356,38 @@ describe("core-feature/drag-and-drop", () => {
         tree.do.drop("x11", event);
         expect(onDropForeignDragObject).not.toHaveBeenCalled();
       });
+
+      it("calls canDragForeignDragObjectOver in drag over events, not canDropForeignDragObject", () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        const canDragForeignDragObjectOver = tree
+          .mockedHandler("canDragForeignDragObjectOver")
+          .mockReturnValue(true);
+        const event = TestTree.dragEvent();
+        tree.do.dragOver("x11", event);
+        expect(canDragForeignDragObjectOver).toHaveBeenCalledWith(
+          event.dataTransfer,
+          { item: tree.item("x11") },
+        );
+        expect(canDropForeignDragObject).not.toHaveBeenCalled();
+      });
+
+      it("calls canDropForeignDragObject in drop events, not canDragForeignDragObjectOver", () => {
+        const canDropForeignDragObject = tree
+          .mockedHandler("canDropForeignDragObject")
+          .mockReturnValue(true);
+        const canDragForeignDragObjectOver = tree
+          .mockedHandler("canDragForeignDragObjectOver")
+          .mockReturnValue(true);
+        const event = TestTree.dragEvent();
+        tree.do.drop("x11", event);
+        expect(canDropForeignDragObject).toHaveBeenCalledWith(
+          event.dataTransfer,
+          { item: tree.item("x11") },
+        );
+        expect(canDragForeignDragObjectOver).not.toHaveBeenCalled();
+      });
     });
 
     describe("with insertion handlers", () => {

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

@@ -236,7 +236,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
         handleAutoOpenFolder(dataRef, tree, item, placement);
 
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
 
         if (
           !tree.getState().dnd?.draggedItems &&
@@ -249,7 +249,8 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
 
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        // dataTransfer.payload is not accessible in onDragOver, so just skip entirely here. It'll be checked again in onDrop
+        if (!canDrop(null, target, tree)) {
           dataRef.current.lastAllowDrop = false;
           return;
         }
@@ -285,7 +286,7 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
 
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, false);
         if (
           canDragForeignDragObjectOver &&
           e.dataTransfer &&
@@ -300,7 +301,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       onDrop: async (e: DragEvent) => {
         e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
-        const target = getDragTarget(e, item, tree);
+        const target = getDragTarget(e, item, tree, true);
         const draggedItems = tree.getState().dnd?.draggedItems;
         const isValidDrop = canDrop(e.dataTransfer, target, tree);
 

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

@@ -29,6 +29,8 @@ export type TargetPlacement =
 export const isOrderedDragTarget = <T>(dragTarget: DragTarget<T>) =>
   "childIndex" in dragTarget;
 
+/** @param dataTransfer - If the data transfer object should not be considered, e.g. because the event is
+ * onDragOver where the browser does not allow reading the payload, pass null */
 export const canDrop = (
   dataTransfer: DataTransfer | null,
   target: DragTarget<any>,
@@ -197,21 +199,25 @@ export const getReparentTarget = <T>(
   };
 };
 
+/** @param hasDataTransferPayload - If the data transfer object should not be considered, e.g. because the event is
+ * onDragOver where the browser does not allow reading the payload, pass false */
 export const getDragTarget = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
+  hasDataTransferPayload: boolean,
   canReorder = tree.getConfig().canReorder,
 ): DragTarget<any> => {
+  const dataTransfer = hasDataTransferPayload ? e.dataTransfer : null;
   const draggedItems = tree.getState().dnd?.draggedItems;
   const itemMeta = item.getItemMeta();
   const parent = item.getParent();
   const itemTarget: DragTarget<any> = { item };
   const parentTarget: DragTarget<any> | null = parent ? { item: parent } : null;
   const canBecomeSibling =
-    parentTarget && canDrop(e.dataTransfer, parentTarget, tree);
+    parentTarget && canDrop(dataTransfer, parentTarget, tree);
 
-  const canMakeChild = canDrop(e.dataTransfer, itemTarget, tree);
+  const canMakeChild = canDrop(dataTransfer, itemTarget, tree);
   const placement = getTargetPlacement(e, item, tree, canMakeChild);
 
   if (
@@ -229,7 +235,7 @@ export const getDragTarget = (
 
   if (!canReorder && parent && !canBecomeSibling) {
     // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DragTargetStrategy[] ?
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
 
   if (!parent) {
@@ -242,7 +248,7 @@ export const getDragTarget = (
   }
 
   if (!canBecomeSibling) {
-    return getDragTarget(e, parent, tree, false);
+    return getDragTarget(e, parent, tree, hasDataTransferPayload, false);
   }
 
   if (placement.type === PlacementType.Reparent) {