@headless-tree/core 1.6.0 → 1.6.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @headless-tree/core
 
+## 1.6.2
+
+### Patch Changes
+
+- 39a8b44: Add skipUpdateTree parameter to `updateCachedChildrenIds` and `updateCachedData` in async tree loader
+- 26ecc1b: Fixed an issue where dropping items inside a collapsed folder will make the tree become un-focusable until a new item is clicked with mouse again. This could break usage with keyboard-only drag operations.
+- 0108b7a: Fixed a bug where some hotkeys (like up/down navigation, search and renaming) doesn't work after items are dragged within the tree (#179)
+- 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
+
+- 4ddeaf3: Fixed behavior where shift-selecting an item with no previously selected or focused item would multiselect all items from the top to the clicked item. Now, shift-selecting an item with no previously clicked items will only select the clicked item (#176)
+
 ## 1.6.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -68,6 +68,8 @@ type DragAndDropFeatureDef<T> = {
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
         /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
         openOnDropDelay?: number;
+        /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+        seperateDragHandle?: boolean;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;
@@ -84,6 +86,9 @@ type DragAndDropFeatureDef<T> = {
         isDragTargetAbove: () => boolean;
         isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
+        /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+         * disable the default behavior and use this on the handler element instead. */
+        getDragHandleProps: () => Record<string, any>;
     };
     hotkeys: never;
 };
@@ -329,9 +334,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;
     };
@@ -420,6 +427,7 @@ interface PropMemoizationDataRef {
     memo?: {
         tree?: Record<string, any>;
         item?: Record<string, any>;
+        drag?: Record<string, any>;
         search?: Record<string, any>;
         rename?: Record<string, any>;
     };

package/dist/index.d.ts

@@ -68,6 +68,8 @@ type DragAndDropFeatureDef<T> = {
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
         /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
         openOnDropDelay?: number;
+        /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+        seperateDragHandle?: boolean;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;
@@ -84,6 +86,9 @@ type DragAndDropFeatureDef<T> = {
         isDragTargetAbove: () => boolean;
         isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
+        /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+         * disable the default behavior and use this on the handler element instead. */
+        getDragHandleProps: () => Record<string, any>;
     };
     hotkeys: never;
 };
@@ -329,9 +334,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;
     };
@@ -420,6 +427,7 @@ interface PropMemoizationDataRef {
     memo?: {
         tree?: Record<string, any>;
         item?: Record<string, any>;
+        drag?: Record<string, any>;
         search?: Record<string, any>;
         rename?: Record<string, any>;
     };

package/dist/index.js

@@ -125,6 +125,7 @@ var poll = (fn, interval = 100, timeout = 1e3) => new Promise((resolve) => {
   }, interval);
   clear = setTimeout(() => {
     clearInterval(i);
+    resolve();
   }, timeout);
 });
 
@@ -214,12 +215,16 @@ var treeFeature = {
     },
     updateDomFocus: ({ tree }) => {
       setTimeout(() => __async(null, null, function* () {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const focusedItem = tree.getFocusedItem();
         (_b = (_a = tree.getConfig()).scrollToItem) == null ? void 0 : _b.call(_a, focusedItem);
-        yield poll(() => focusedItem.getElement() !== null, 20);
+        yield poll(() => focusedItem.getElement() !== null, 20, 500);
         const focusedElement = focusedItem.getElement();
-        if (!focusedElement) return;
+        if (!focusedElement) {
+          (_c = tree.getItems()[0]) == null ? void 0 : _c.setFocused();
+          (_e = (_d = tree.getItems()[0]) == null ? void 0 : _d.getElement()) == null ? void 0 : _e.focus();
+          return;
+        }
         focusedElement.focus();
       }));
     },
@@ -759,10 +764,15 @@ var selectionFeature = {
       const { selectedItems } = tree.getState();
       return selectedItems.includes(itemId);
     },
-    selectUpTo: ({ tree, item }, ctrl) => {
+    selectUpTo: ({ tree, item, itemId }, ctrl) => {
       const indexA = item.getItemMeta().index;
-      const { selectUpToAnchorId } = tree.getDataRef().current;
-      const itemB = selectUpToAnchorId ? tree.getItemInstance(selectUpToAnchorId) : tree.getFocusedItem();
+      const dataRef = tree.getDataRef();
+      if (!dataRef.current.selectUpToAnchorId) {
+        dataRef.current.selectUpToAnchorId = itemId;
+        tree.setSelectedItems([itemId]);
+        return;
+      }
+      const itemB = tree.getItemInstance(dataRef.current.selectUpToAnchorId);
       const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree.getItems().slice(a, b + 1).map((treeItem) => treeItem.getItemMeta().itemId);
@@ -783,7 +793,7 @@ var selectionFeature = {
         item.select();
       }
     },
-    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
+    getProps: ({ tree, item, itemId, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
       "aria-selected": item.isSelected() ? "true" : "false",
       onClick: (e) => {
         var _a, _b;
@@ -792,10 +802,10 @@ var selectionFeature = {
         } else if (e.ctrlKey || e.metaKey) {
           item.toggleSelect();
         } else {
-          tree.setSelectedItems([item.getItemMeta().itemId]);
+          tree.setSelectedItems([itemId]);
         }
         if (!e.shiftKey) {
-          tree.getDataRef().current.selectUpToAnchorId = item.getId();
+          tree.getDataRef().current.selectUpToAnchorId = itemId;
         }
         (_b = (_a = prev == null ? void 0 : prev()) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
       }
@@ -1269,15 +1279,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();
@@ -1444,15 +1456,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()))) {
@@ -1461,7 +1474,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;
@@ -1470,7 +1483,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);
@@ -1607,36 +1620,8 @@ var dragAndDropFeature = {
     }
   },
   itemInstance: {
-    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
-      draggable: true,
+    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues(__spreadValues({}, prev == null ? void 0 : prev()), tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()), {
       onDragEnter: (e) => e.preventDefault(),
-      onDragStart: (e) => {
-        var _a, _b, _c, _d;
-        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-        if (!selectedItems.includes(item)) {
-          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
-        }
-        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
-          e.preventDefault();
-          return;
-        }
-        if (config.setDragImage) {
-          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? 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", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem()
-        });
-      },
       onDragOver: (e) => {
         var _a, _b, _c;
         e.stopPropagation();
@@ -1652,12 +1637,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;
         }
@@ -1680,24 +1665,11 @@ var dragAndDropFeature = {
           }));
         }, 100);
       },
-      onDragEnd: (e) => {
-        var _a, _b;
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
-        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
-        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
-          return;
-        }
-        const target = getDragTarget(e, item, tree);
-        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
-          return;
-        }
-        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
-      },
       onDrop: (e) => __async(null, null, function* () {
         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", {
@@ -1713,11 +1685,57 @@ var dragAndDropFeature = {
         dataRef.current.lastDragCode = void 0;
         if (draggedItems) {
           yield (_b = config.onDrop) == null ? void 0 : _b.call(config, draggedItems, target);
+          draggedItems[0].setFocused();
         } else if (e.dataTransfer) {
           yield (_c = config.onDropForeignDragObject) == null ? void 0 : _c.call(config, e.dataTransfer, target);
         }
+        tree.applySubStateUpdate("dnd", null);
+        tree.updateDomFocus();
       })
     }),
+    getDragHandleProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
+      draggable: true,
+      onDragStart: (e) => {
+        var _a, _b, _c, _d;
+        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
+        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const config = tree.getConfig();
+        if (!selectedItems.includes(item)) {
+          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
+        }
+        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
+          e.preventDefault();
+          return;
+        }
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? 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", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem()
+        });
+      },
+      onDragEnd: (e) => {
+        var _a, _b;
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
+        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
+        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
+          return;
+        }
+        const target = getDragTarget(e, item, tree, false);
+        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
+          return;
+        }
+        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
+      }
+    }),
     isDragTarget: ({ tree, item }) => {
       const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;
@@ -1941,6 +1959,7 @@ var keyboardDragAndDropFeature = {
         } else if (dataTransfer) {
           yield (_d = config.onDropForeignDragObject) == null ? void 0 : _d.call(config, dataTransfer, target);
         }
+        tree.updateDomFocus();
         tree.applySubStateUpdate(
           "assistiveDndState",
           3 /* Completed */
@@ -2291,6 +2310,14 @@ var propMemoizationFeature = {
       (_e = (_d = dataRef.current.memo).item) != null ? _e : _d.item = {};
       return memoize(props, dataRef.current.memo.item);
     },
+    getDragHandleProps: ({ item, prev }) => {
+      var _a, _b, _c, _d, _e;
+      const dataRef = item.getDataRef();
+      const props = (_a = prev == null ? void 0 : prev()) != null ? _a : {};
+      (_c = (_b = dataRef.current).memo) != null ? _c : _b.memo = {};
+      (_e = (_d = dataRef.current.memo).drag) != null ? _e : _d.drag = {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
     getRenameInputProps: ({ item, prev }) => {
       var _a, _b, _c, _d, _e;
       const dataRef = item.getDataRef();

package/dist/index.mjs

@@ -81,6 +81,7 @@ var poll = (fn, interval = 100, timeout = 1e3) => new Promise((resolve) => {
   }, interval);
   clear = setTimeout(() => {
     clearInterval(i);
+    resolve();
   }, timeout);
 });
 
@@ -170,12 +171,16 @@ var treeFeature = {
     },
     updateDomFocus: ({ tree }) => {
       setTimeout(() => __async(null, null, function* () {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const focusedItem = tree.getFocusedItem();
         (_b = (_a = tree.getConfig()).scrollToItem) == null ? void 0 : _b.call(_a, focusedItem);
-        yield poll(() => focusedItem.getElement() !== null, 20);
+        yield poll(() => focusedItem.getElement() !== null, 20, 500);
         const focusedElement = focusedItem.getElement();
-        if (!focusedElement) return;
+        if (!focusedElement) {
+          (_c = tree.getItems()[0]) == null ? void 0 : _c.setFocused();
+          (_e = (_d = tree.getItems()[0]) == null ? void 0 : _d.getElement()) == null ? void 0 : _e.focus();
+          return;
+        }
         focusedElement.focus();
       }));
     },
@@ -715,10 +720,15 @@ var selectionFeature = {
       const { selectedItems } = tree.getState();
       return selectedItems.includes(itemId);
     },
-    selectUpTo: ({ tree, item }, ctrl) => {
+    selectUpTo: ({ tree, item, itemId }, ctrl) => {
       const indexA = item.getItemMeta().index;
-      const { selectUpToAnchorId } = tree.getDataRef().current;
-      const itemB = selectUpToAnchorId ? tree.getItemInstance(selectUpToAnchorId) : tree.getFocusedItem();
+      const dataRef = tree.getDataRef();
+      if (!dataRef.current.selectUpToAnchorId) {
+        dataRef.current.selectUpToAnchorId = itemId;
+        tree.setSelectedItems([itemId]);
+        return;
+      }
+      const itemB = tree.getItemInstance(dataRef.current.selectUpToAnchorId);
       const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree.getItems().slice(a, b + 1).map((treeItem) => treeItem.getItemMeta().itemId);
@@ -739,7 +749,7 @@ var selectionFeature = {
         item.select();
       }
     },
-    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
+    getProps: ({ tree, item, itemId, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
       "aria-selected": item.isSelected() ? "true" : "false",
       onClick: (e) => {
         var _a, _b;
@@ -748,10 +758,10 @@ var selectionFeature = {
         } else if (e.ctrlKey || e.metaKey) {
           item.toggleSelect();
         } else {
-          tree.setSelectedItems([item.getItemMeta().itemId]);
+          tree.setSelectedItems([itemId]);
         }
         if (!e.shiftKey) {
-          tree.getDataRef().current.selectUpToAnchorId = item.getId();
+          tree.getDataRef().current.selectUpToAnchorId = itemId;
         }
         (_b = (_a = prev == null ? void 0 : prev()) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
       }
@@ -1225,15 +1235,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();
@@ -1400,15 +1412,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()))) {
@@ -1417,7 +1430,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;
@@ -1426,7 +1439,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);
@@ -1563,36 +1576,8 @@ var dragAndDropFeature = {
     }
   },
   itemInstance: {
-    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
-      draggable: true,
+    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues(__spreadValues({}, prev == null ? void 0 : prev()), tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()), {
       onDragEnter: (e) => e.preventDefault(),
-      onDragStart: (e) => {
-        var _a, _b, _c, _d;
-        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-        if (!selectedItems.includes(item)) {
-          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
-        }
-        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
-          e.preventDefault();
-          return;
-        }
-        if (config.setDragImage) {
-          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? 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", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem()
-        });
-      },
       onDragOver: (e) => {
         var _a, _b, _c;
         e.stopPropagation();
@@ -1608,12 +1593,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;
         }
@@ -1636,24 +1621,11 @@ var dragAndDropFeature = {
           }));
         }, 100);
       },
-      onDragEnd: (e) => {
-        var _a, _b;
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
-        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
-        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
-          return;
-        }
-        const target = getDragTarget(e, item, tree);
-        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
-          return;
-        }
-        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
-      },
       onDrop: (e) => __async(null, null, function* () {
         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", {
@@ -1669,11 +1641,57 @@ var dragAndDropFeature = {
         dataRef.current.lastDragCode = void 0;
         if (draggedItems) {
           yield (_b = config.onDrop) == null ? void 0 : _b.call(config, draggedItems, target);
+          draggedItems[0].setFocused();
         } else if (e.dataTransfer) {
           yield (_c = config.onDropForeignDragObject) == null ? void 0 : _c.call(config, e.dataTransfer, target);
         }
+        tree.applySubStateUpdate("dnd", null);
+        tree.updateDomFocus();
       })
     }),
+    getDragHandleProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
+      draggable: true,
+      onDragStart: (e) => {
+        var _a, _b, _c, _d;
+        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
+        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const config = tree.getConfig();
+        if (!selectedItems.includes(item)) {
+          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
+        }
+        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
+          e.preventDefault();
+          return;
+        }
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? 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", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem()
+        });
+      },
+      onDragEnd: (e) => {
+        var _a, _b;
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
+        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
+        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
+          return;
+        }
+        const target = getDragTarget(e, item, tree, false);
+        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
+          return;
+        }
+        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
+      }
+    }),
     isDragTarget: ({ tree, item }) => {
       const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;
@@ -1897,6 +1915,7 @@ var keyboardDragAndDropFeature = {
         } else if (dataTransfer) {
           yield (_d = config.onDropForeignDragObject) == null ? void 0 : _d.call(config, dataTransfer, target);
         }
+        tree.updateDomFocus();
         tree.applySubStateUpdate(
           "assistiveDndState",
           3 /* Completed */
@@ -2247,6 +2266,14 @@ var propMemoizationFeature = {
       (_e = (_d = dataRef.current.memo).item) != null ? _e : _d.item = {};
       return memoize(props, dataRef.current.memo.item);
     },
+    getDragHandleProps: ({ item, prev }) => {
+      var _a, _b, _c, _d, _e;
+      const dataRef = item.getDataRef();
+      const props = (_a = prev == null ? void 0 : prev()) != null ? _a : {};
+      (_c = (_b = dataRef.current).memo) != null ? _c : _b.memo = {};
+      (_e = (_d = dataRef.current.memo).drag) != null ? _e : _d.drag = {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
     getRenameInputProps: ({ item, prev }) => {
       var _a, _b, _c, _d, _e;
       const dataRef = item.getDataRef();

package/package.json

@@ -13,7 +13,7 @@
     "checkbox",
     "hook"
   ],
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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", () => {
@@ -698,6 +729,54 @@ describe("core-feature/drag-and-drop", () => {
       });
     });
 
+    describe("seperateDragHandle", () => {
+      it("includes all drag handlers in getProps() when seperateDragHandle is false", () => {
+        const props = tree.instance.getItemInstance("x111").getProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBeDefined();
+        expect(props.onDragEnd).toBeDefined();
+        expect(props.onDragEnter).toBeDefined();
+        expect(props.onDragOver).toBeDefined();
+        expect(props.onDragLeave).toBeDefined();
+        expect(props.onDrop).toBeDefined();
+      });
+
+      it("includes drag handle handlers in getDragHandleProps() when seperateDragHandle is false", () => {
+        const props = tree.instance
+          .getItemInstance("x111")
+          .getDragHandleProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBeDefined();
+        expect(props.onDragEnd).toBeDefined();
+      });
+
+      it("excludes drag handle handlers from getProps() but includes drop handlers when seperateDragHandle is true", async () => {
+        const testTree = await tree
+          .with({ seperateDragHandle: true })
+          .createTestCaseTree();
+        const props = testTree.instance.getItemInstance("x111").getProps();
+        expect(props.draggable).toBeUndefined();
+        expect(props.onDragStart).toBeUndefined();
+        expect(props.onDragEnd).toBeUndefined();
+        expect(props.onDragEnter).toBeDefined();
+        expect(props.onDragOver).toBeDefined();
+        expect(props.onDragLeave).toBeDefined();
+        expect(props.onDrop).toBeDefined();
+      });
+
+      it("includes drag handle handlers in getDragHandleProps() when seperateDragHandle is true", async () => {
+        const testTree = await tree
+          .with({ seperateDragHandle: true })
+          .createTestCaseTree();
+        const props = testTree.instance
+          .getItemInstance("x111")
+          .getDragHandleProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBeDefined();
+        expect(props.onDragEnd).toBeDefined();
+      });
+    });
+
     describe("retains last drag state with dragcode", () => {
       it("uses constant number of calls to canDrop", () => {
         const canDrop = tree.mockedHandler("canDrop").mockReturnValue(true);

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

@@ -178,47 +178,10 @@ export const dragAndDropFeature: FeatureImplementation = {
   itemInstance: {
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
-
-      draggable: true,
+      ...(tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()),
 
       onDragEnter: (e: DragEvent) => e.preventDefault(),
 
-      onDragStart: (e: DragEvent) => {
-        const selectedItems = tree.getSelectedItems
-          ? tree.getSelectedItems()
-          : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-
-        if (!selectedItems.includes(item)) {
-          tree.setSelectedItems?.([item.getItemMeta().itemId]);
-        }
-
-        if (!(config.canDrag?.(items) ?? true)) {
-          e.preventDefault();
-          return;
-        }
-
-        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", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem(),
-        });
-      },
-
       onDragOver: (e: DragEvent) => {
         e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
@@ -236,7 +199,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 +212,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;
         }
@@ -276,31 +240,10 @@ export const dragAndDropFeature: FeatureImplementation = {
         }, 100);
       },
 
-      onDragEnd: (e: DragEvent) => {
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
-          tree.getConfig();
-        const draggedItems = tree.getState().dnd?.draggedItems;
-
-        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
-          return;
-        }
-
-        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);
+        const target = getDragTarget(e, item, tree, true);
         const draggedItems = tree.getState().dnd?.draggedItems;
         const isValidDrop = canDrop(e.dataTransfer, target, tree);
 
@@ -321,9 +264,76 @@ export const dragAndDropFeature: FeatureImplementation = {
 
         if (draggedItems) {
           await config.onDrop?.(draggedItems, target);
+          draggedItems[0].setFocused();
         } else if (e.dataTransfer) {
           await config.onDropForeignDragObject?.(e.dataTransfer, target);
         }
+
+        tree.applySubStateUpdate("dnd", null);
+        tree.updateDomFocus();
+      },
+    }),
+
+    getDragHandleProps: ({ tree, item, prev }) => ({
+      ...prev?.(),
+
+      draggable: true,
+
+      onDragStart: (e: DragEvent) => {
+        const selectedItems = tree.getSelectedItems
+          ? tree.getSelectedItems()
+          : [tree.getFocusedItem()];
+        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const config = tree.getConfig();
+
+        if (!selectedItems.includes(item)) {
+          tree.setSelectedItems?.([item.getItemMeta().itemId]);
+        }
+
+        if (!(config.canDrag?.(items) ?? true)) {
+          e.preventDefault();
+          return;
+        }
+
+        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", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem(),
+        });
+      },
+
+      onDragEnd: (e: DragEvent) => {
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
+          tree.getConfig();
+        const draggedItems = tree.getState().dnd?.draggedItems;
+
+        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
+          return;
+        }
+
+        const target = getDragTarget(e, item, tree, false);
+        if (
+          canDragForeignDragObjectOver &&
+          e.dataTransfer &&
+          !canDragForeignDragObjectOver(e.dataTransfer, target)
+        ) {
+          return;
+        }
+
+        onCompleteForeignDrop?.(draggedItems);
       },
     }),
 

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

@@ -97,6 +97,9 @@ export type DragAndDropFeatureDef<T> = {
 
     /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
     openOnDropDelay?: number;
+
+    /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+    seperateDragHandle?: boolean;
   };
   treeInstance: {
     getDragTarget: () => DragTarget<T> | null;
@@ -118,6 +121,10 @@ export type DragAndDropFeatureDef<T> = {
     isDragTargetAbove: () => boolean;
     isDragTargetBelow: () => boolean;
     isDraggingOver: () => boolean;
+
+    /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+     * disable the default behavior and use this on the handler element instead. */
+    getDragHandleProps: () => Record<string, any>;
   };
   hotkeys: never;
 };

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) {

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

@@ -254,6 +254,7 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
           await config.onDropForeignDragObject?.(dataTransfer, target);
         }
 
+        tree.updateDomFocus();
         tree.applySubStateUpdate(
           "assistiveDndState",
           AssistiveDndState.Completed,

package/src/features/prop-memoization/feature.ts

@@ -59,6 +59,14 @@ export const propMemoizationFeature: FeatureImplementation = {
       return memoize(props, dataRef.current.memo.item);
     },
 
+    getDragHandleProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.drag ??= {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
+
     getRenameInputProps: ({ item, prev }) => {
       const dataRef = item.getDataRef<PropMemoizationDataRef>();
       const props = prev?.() ?? {};

package/src/features/prop-memoization/types.ts

@@ -2,6 +2,7 @@ export interface PropMemoizationDataRef {
   memo?: {
     tree?: Record<string, any>;
     item?: Record<string, any>;
+    drag?: Record<string, any>;
     search?: Record<string, any>;
     rename?: Record<string, any>;
   };

package/src/features/selection/feature.ts

@@ -49,13 +49,17 @@ export const selectionFeature: FeatureImplementation = {
       return selectedItems.includes(itemId);
     },
 
-    selectUpTo: ({ tree, item }, ctrl: boolean) => {
+    selectUpTo: ({ tree, item, itemId }, ctrl: boolean) => {
       const indexA = item.getItemMeta().index;
-      const { selectUpToAnchorId } =
-        tree.getDataRef<SelectionDataRef>().current;
-      const itemB = selectUpToAnchorId
-        ? tree.getItemInstance(selectUpToAnchorId)
-        : tree.getFocusedItem();
+      const dataRef = tree.getDataRef<SelectionDataRef>();
+
+      if (!dataRef.current.selectUpToAnchorId) {
+        dataRef.current.selectUpToAnchorId = itemId;
+        tree.setSelectedItems([itemId]);
+        return;
+      }
+
+      const itemB = tree.getItemInstance(dataRef.current.selectUpToAnchorId);
       const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree
@@ -83,7 +87,7 @@ export const selectionFeature: FeatureImplementation = {
       }
     },
 
-    getProps: ({ tree, item, prev }) => ({
+    getProps: ({ tree, item, itemId, prev }) => ({
       ...prev?.(),
       "aria-selected": item.isSelected() ? "true" : "false",
       onClick: (e: MouseEvent) => {
@@ -92,12 +96,12 @@ export const selectionFeature: FeatureImplementation = {
         } else if (e.ctrlKey || e.metaKey) {
           item.toggleSelect();
         } else {
-          tree.setSelectedItems([item.getItemMeta().itemId]);
+          tree.setSelectedItems([itemId]);
         }
 
         if (!e.shiftKey) {
           tree.getDataRef<SelectionDataRef>().current.selectUpToAnchorId =
-            item.getId();
+            itemId;
         }
 
         prev?.()?.onClick?.(e);

package/src/features/selection/selection.spec.ts

@@ -176,9 +176,8 @@ describe("core-feature/selections", () => {
 
         it("should handle selectUpTo without ctrl", () => {
           const setSelectedItems = tree.mockedHandler("setSelectedItems");
-          tree.instance.getItemInstance("x111").toggleSelect();
-          tree.instance.getItemInstance("x112").toggleSelect();
-          tree.instance.getItemInstance("x112").setFocused();
+          tree.do.ctrlSelectItem("x111");
+          tree.do.ctrlSelectItem("x112");
           tree.instance.getItemInstance("x114").selectUpTo(false);
           expect(setSelectedItems).toHaveBeenCalledWith([
             "x112",
@@ -190,9 +189,8 @@ describe("core-feature/selections", () => {
 
         it("should handle selectUpTo with ctrl", () => {
           const setSelectedItems = tree.mockedHandler("setSelectedItems");
-          tree.instance.getItemInstance("x111").toggleSelect();
-          tree.instance.getItemInstance("x112").toggleSelect();
-          tree.instance.getItemInstance("x112").setFocused();
+          tree.do.ctrlSelectItem("x111");
+          tree.do.ctrlSelectItem("x112");
           tree.instance.getItemInstance("x114").selectUpTo(true);
           expect(setSelectedItems).toHaveBeenCalledWith([
             "x111",

package/src/features/tree/feature.ts

@@ -107,9 +107,13 @@ export const treeFeature: FeatureImplementation<any> = {
       setTimeout(async () => {
         const focusedItem = tree.getFocusedItem();
         tree.getConfig().scrollToItem?.(focusedItem);
-        await poll(() => focusedItem.getElement() !== null, 20);
+        await poll(() => focusedItem.getElement() !== null, 20, 500);
         const focusedElement = focusedItem.getElement();
-        if (!focusedElement) return;
+        if (!focusedElement) {
+          tree.getItems()[0]?.setFocused();
+          tree.getItems()[0]?.getElement()?.focus();
+          return;
+        }
         focusedElement.focus();
       });
     },

package/src/utils.ts

@@ -64,5 +64,6 @@ export const poll = (fn: () => boolean, interval = 100, timeout = 1000) =>
     }, interval);
     clear = setTimeout(() => {
       clearInterval(i);
+      resolve();
     }, timeout);
   });