@headless-tree/core 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @headless-tree/core
 
+## 1.4.0
+
+### Minor Changes
+
+- 7ef4864: added feature where closed items are auto-expanded briefly after dragging onto them. set config option `openOnDropDelay` to zero to disable.
+
+### Patch Changes
+
+- 8d53b4f: fixed a bug where external changes to focused or selected items don't trigger a rerender (#150)
+- 1cee368: fixed a bug where the drag line is not cleared after drop (#149)
+- 1e833bb: drag-and-drop feature is no longer dependent on selection feature, and fill default to focused item if selection feature is missing (#143)
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -2,6 +2,7 @@ interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
     lastDragEnter?: number;
+    autoExpandTimeout?: any;
     windowDragEndListener?: () => void;
 }
 interface DndState<T> {
@@ -65,6 +66,8 @@ type DragAndDropFeatureDef<T> = {
         onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
         onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;
         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;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ interface DndDataRef {
     lastDragCode?: string;
     lastAllowDrop?: boolean;
     lastDragEnter?: number;
+    autoExpandTimeout?: any;
     windowDragEndListener?: () => void;
 }
 interface DndState<T> {
@@ -65,6 +66,8 @@ type DragAndDropFeatureDef<T> = {
         onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
         onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;
         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;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;

package/dist/index.js

@@ -1296,8 +1296,7 @@ var getTargetPlacement = (e, item, tree, canMakeChild) => {
   }
   return { type: makeChildType };
 };
-var getDragCode = (e, item, tree) => {
-  const placement = getTargetPlacement(e, item, tree, true);
+var getDragCode = (item, placement) => {
   return [
     item.getId(),
     placement.type,
@@ -1338,6 +1337,9 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
   const canMakeChild = canDrop(e.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()))) {
+      return itemTarget;
+    }
     return parentTarget;
   }
   if (!canReorder && parent && !canBecomeSibling) {
@@ -1372,16 +1374,29 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
 };
 
 // src/features/drag-and-drop/feature.ts
+var handleAutoOpenFolder = (dataRef, tree, item, placement) => {
+  const { openOnDropDelay } = tree.getConfig();
+  const dragCode = dataRef.current.lastDragCode;
+  if (!openOnDropDelay || !item.isFolder() || item.isExpanded() || placement.type !== 2 /* MakeChild */) {
+    return;
+  }
+  clearTimeout(dataRef.current.autoExpandTimeout);
+  dataRef.current.autoExpandTimeout = setTimeout(() => {
+    if (dragCode !== dataRef.current.lastDragCode || !dataRef.current.lastAllowDrop)
+      return;
+    item.expand();
+  }, openOnDropDelay);
+};
 var defaultCanDropForeignDragObject = () => false;
 var dragAndDropFeature = {
   key: "drag-and-drop",
-  deps: ["selection"],
   getDefaultConfig: (defaultConfig, tree) => __spreadValues({
     canDrop: (_, target) => target.item.isFolder(),
     canDropForeignDragObject: defaultCanDropForeignDragObject,
     canDragForeignDragObjectOver: defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject ? (dataTransfer) => dataTransfer.effectAllowed !== "none" : () => false,
     setDndState: makeStateUpdater("dnd", tree),
-    canReorder: true
+    canReorder: true,
+    openOnDropDelay: 800
   }, defaultConfig),
   stateHandlerNames: {
     dnd: "setDndState"
@@ -1422,7 +1437,7 @@ var dragAndDropFeature = {
           };
         }
       }
-      const bb = (_f = targetItem.getElement()) == null ? void 0 : _f.getBoundingClientRect();
+      const bb = (_f = targetItem == null ? void 0 : targetItem.getElement()) == null ? void 0 : _f.getBoundingClientRect();
       if (bb) {
         return {
           indent,
@@ -1478,20 +1493,20 @@ var dragAndDropFeature = {
       draggable: true,
       onDragEnter: (e) => e.preventDefault(),
       onDragStart: (e) => {
-        var _a, _b, _c;
-        const selectedItems = tree.getSelectedItems();
+        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)) {
-          tree.setSelectedItems([item.getItemMeta().itemId]);
+          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
         }
-        if (!((_b = (_a = config.canDrag) == null ? void 0 : _a.call(config, items)) != null ? _b : true)) {
+        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);
-          (_c = e.dataTransfer) == null ? void 0 : _c.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? yOffset : 0);
+          (_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);
@@ -1508,7 +1523,8 @@ var dragAndDropFeature = {
         var _a, _b, _c;
         e.stopPropagation();
         const dataRef = tree.getDataRef();
-        const nextDragCode = getDragCode(e, item, tree);
+        const placement = getTargetPlacement(e, item, tree, true);
+        const nextDragCode = getDragCode(item, placement);
         if (nextDragCode === dataRef.current.lastDragCode) {
           if (dataRef.current.lastAllowDrop) {
             e.preventDefault();
@@ -1517,6 +1533,7 @@ var dragAndDropFeature = {
         }
         dataRef.current.lastDragCode = nextDragCode;
         dataRef.current.lastDragEnter = Date.now();
+        handleAutoOpenFolder(dataRef, tree, item, placement);
         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;
@@ -1563,12 +1580,18 @@ var dragAndDropFeature = {
         e.stopPropagation();
         const dataRef = tree.getDataRef();
         const target = getDragTarget(e, item, tree);
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
+        const isValidDrop = canDrop(e.dataTransfer, target, tree);
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: void 0,
+          draggingOverItem: void 0,
+          dragTarget: void 0
+        });
+        if (!isValidDrop) {
           return;
         }
         e.preventDefault();
         const config = tree.getConfig();
-        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
         dataRef.current.lastDragCode = void 0;
         if (draggedItems) {
           yield (_b = config.onDrop) == null ? void 0 : _b.call(config, draggedItems, target);
@@ -1740,7 +1763,10 @@ var keyboardDragAndDropFeature = {
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {
-        const selectedItems = tree.getSelectedItems();
+        var _a, _b;
+        const selectedItems = (_b = (_a = tree.getSelectedItems) == null ? void 0 : _a.call(tree)) != null ? _b : [
+          tree.getFocusedItem()
+        ];
         const focusedItem = tree.getFocusedItem();
         tree.startKeyboardDrag(
           selectedItems.includes(focusedItem) ? selectedItems : selectedItems.concat(focusedItem)

package/dist/index.mjs

@@ -1252,8 +1252,7 @@ var getTargetPlacement = (e, item, tree, canMakeChild) => {
   }
   return { type: makeChildType };
 };
-var getDragCode = (e, item, tree) => {
-  const placement = getTargetPlacement(e, item, tree, true);
+var getDragCode = (item, placement) => {
   return [
     item.getId(),
     placement.type,
@@ -1294,6 +1293,9 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
   const canMakeChild = canDrop(e.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()))) {
+      return itemTarget;
+    }
     return parentTarget;
   }
   if (!canReorder && parent && !canBecomeSibling) {
@@ -1328,16 +1330,29 @@ var getDragTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) =>
 };
 
 // src/features/drag-and-drop/feature.ts
+var handleAutoOpenFolder = (dataRef, tree, item, placement) => {
+  const { openOnDropDelay } = tree.getConfig();
+  const dragCode = dataRef.current.lastDragCode;
+  if (!openOnDropDelay || !item.isFolder() || item.isExpanded() || placement.type !== 2 /* MakeChild */) {
+    return;
+  }
+  clearTimeout(dataRef.current.autoExpandTimeout);
+  dataRef.current.autoExpandTimeout = setTimeout(() => {
+    if (dragCode !== dataRef.current.lastDragCode || !dataRef.current.lastAllowDrop)
+      return;
+    item.expand();
+  }, openOnDropDelay);
+};
 var defaultCanDropForeignDragObject = () => false;
 var dragAndDropFeature = {
   key: "drag-and-drop",
-  deps: ["selection"],
   getDefaultConfig: (defaultConfig, tree) => __spreadValues({
     canDrop: (_, target) => target.item.isFolder(),
     canDropForeignDragObject: defaultCanDropForeignDragObject,
     canDragForeignDragObjectOver: defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject ? (dataTransfer) => dataTransfer.effectAllowed !== "none" : () => false,
     setDndState: makeStateUpdater("dnd", tree),
-    canReorder: true
+    canReorder: true,
+    openOnDropDelay: 800
   }, defaultConfig),
   stateHandlerNames: {
     dnd: "setDndState"
@@ -1378,7 +1393,7 @@ var dragAndDropFeature = {
           };
         }
       }
-      const bb = (_f = targetItem.getElement()) == null ? void 0 : _f.getBoundingClientRect();
+      const bb = (_f = targetItem == null ? void 0 : targetItem.getElement()) == null ? void 0 : _f.getBoundingClientRect();
       if (bb) {
         return {
           indent,
@@ -1434,20 +1449,20 @@ var dragAndDropFeature = {
       draggable: true,
       onDragEnter: (e) => e.preventDefault(),
       onDragStart: (e) => {
-        var _a, _b, _c;
-        const selectedItems = tree.getSelectedItems();
+        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)) {
-          tree.setSelectedItems([item.getItemMeta().itemId]);
+          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
         }
-        if (!((_b = (_a = config.canDrag) == null ? void 0 : _a.call(config, items)) != null ? _b : true)) {
+        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);
-          (_c = e.dataTransfer) == null ? void 0 : _c.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? yOffset : 0);
+          (_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);
@@ -1464,7 +1479,8 @@ var dragAndDropFeature = {
         var _a, _b, _c;
         e.stopPropagation();
         const dataRef = tree.getDataRef();
-        const nextDragCode = getDragCode(e, item, tree);
+        const placement = getTargetPlacement(e, item, tree, true);
+        const nextDragCode = getDragCode(item, placement);
         if (nextDragCode === dataRef.current.lastDragCode) {
           if (dataRef.current.lastAllowDrop) {
             e.preventDefault();
@@ -1473,6 +1489,7 @@ var dragAndDropFeature = {
         }
         dataRef.current.lastDragCode = nextDragCode;
         dataRef.current.lastDragEnter = Date.now();
+        handleAutoOpenFolder(dataRef, tree, item, placement);
         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;
@@ -1519,12 +1536,18 @@ var dragAndDropFeature = {
         e.stopPropagation();
         const dataRef = tree.getDataRef();
         const target = getDragTarget(e, item, tree);
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
+        const isValidDrop = canDrop(e.dataTransfer, target, tree);
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: void 0,
+          draggingOverItem: void 0,
+          dragTarget: void 0
+        });
+        if (!isValidDrop) {
           return;
         }
         e.preventDefault();
         const config = tree.getConfig();
-        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
         dataRef.current.lastDragCode = void 0;
         if (draggedItems) {
           yield (_b = config.onDrop) == null ? void 0 : _b.call(config, draggedItems, target);
@@ -1696,7 +1719,10 @@ var keyboardDragAndDropFeature = {
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {
-        const selectedItems = tree.getSelectedItems();
+        var _a, _b;
+        const selectedItems = (_b = (_a = tree.getSelectedItems) == null ? void 0 : _a.call(tree)) != null ? _b : [
+          tree.getFocusedItem()
+        ];
         const focusedItem = tree.getFocusedItem();
         tree.startKeyboardDrag(
           selectedItems.includes(focusedItem) ? selectedItems : selectedItems.concat(focusedItem)

package/package.json

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

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

@@ -1,17 +1,51 @@
-import { FeatureImplementation } from "../../types/core";
+import {
+  FeatureImplementation,
+  type ItemInstance,
+  type TreeInstance,
+} from "../../types/core";
 import { DndDataRef, DragLineData, DragTarget } from "./types";
 import {
+  PlacementType,
+  type TargetPlacement,
   canDrop,
   getDragCode,
   getDragTarget,
+  getTargetPlacement,
   isOrderedDragTarget,
 } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
+const handleAutoOpenFolder = (
+  dataRef: { current: DndDataRef },
+  tree: TreeInstance<any>,
+  item: ItemInstance<any>,
+  placement: TargetPlacement,
+) => {
+  const { openOnDropDelay } = tree.getConfig();
+  const dragCode = dataRef.current.lastDragCode;
+
+  if (
+    !openOnDropDelay ||
+    !item.isFolder() ||
+    item.isExpanded() ||
+    placement.type !== PlacementType.MakeChild
+  ) {
+    return;
+  }
+  clearTimeout(dataRef.current.autoExpandTimeout);
+  dataRef.current.autoExpandTimeout = setTimeout(() => {
+    if (
+      dragCode !== dataRef.current.lastDragCode ||
+      !dataRef.current.lastAllowDrop
+    )
+      return;
+    item.expand();
+  }, openOnDropDelay);
+};
+
 const defaultCanDropForeignDragObject = () => false;
 export const dragAndDropFeature: FeatureImplementation = {
   key: "drag-and-drop",
-  deps: ["selection"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
@@ -22,6 +56,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
+    openOnDropDelay: 800,
     ...defaultConfig,
   }),
 
@@ -74,7 +109,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         }
       }
 
-      const bb = targetItem.getElement()?.getBoundingClientRect();
+      const bb = targetItem?.getElement()?.getBoundingClientRect();
 
       if (bb) {
         return {
@@ -149,12 +184,14 @@ export const dragAndDropFeature: FeatureImplementation = {
       onDragEnter: (e: DragEvent) => e.preventDefault(),
 
       onDragStart: (e: DragEvent) => {
-        const selectedItems = tree.getSelectedItems();
+        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]);
+          tree.setSelectedItems?.([item.getItemMeta().itemId]);
         }
 
         if (!(config.canDrag?.(items) ?? true)) {
@@ -185,7 +222,9 @@ export const dragAndDropFeature: FeatureImplementation = {
       onDragOver: (e: DragEvent) => {
         e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
-        const nextDragCode = getDragCode(e, item, tree);
+        const placement = getTargetPlacement(e, item, tree, true);
+        const nextDragCode = getDragCode(item, placement);
+
         if (nextDragCode === dataRef.current.lastDragCode) {
           if (dataRef.current.lastAllowDrop) {
             e.preventDefault();
@@ -195,6 +234,8 @@ export const dragAndDropFeature: FeatureImplementation = {
         dataRef.current.lastDragCode = nextDragCode;
         dataRef.current.lastDragEnter = Date.now();
 
+        handleAutoOpenFolder(dataRef, tree, item, placement);
+
         const target = getDragTarget(e, item, tree);
 
         if (
@@ -260,14 +301,21 @@ export const dragAndDropFeature: FeatureImplementation = {
         e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDragTarget(e, item, tree);
+        const draggedItems = tree.getState().dnd?.draggedItems;
+        const isValidDrop = canDrop(e.dataTransfer, target, tree);
 
-        if (!canDrop(e.dataTransfer, target, tree)) {
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: undefined,
+          draggingOverItem: undefined,
+          dragTarget: undefined,
+        });
+
+        if (!isValidDrop) {
           return;
         }
 
         e.preventDefault();
         const config = tree.getConfig();
-        const draggedItems = tree.getState().dnd?.draggedItems;
 
         dataRef.current.lastDragCode = undefined;
 

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

@@ -4,6 +4,7 @@ export interface DndDataRef {
   lastDragCode?: string;
   lastAllowDrop?: boolean;
   lastDragEnter?: number;
+  autoExpandTimeout?: any;
   windowDragEndListener?: () => void;
 }
 
@@ -93,6 +94,9 @@ export type DragAndDropFeatureDef<T> = {
       target: DragTarget<T>,
     ) => void | Promise<void>;
     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;
   };
   treeInstance: {
     getDragTarget: () => DragTarget<T> | null;

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

@@ -7,14 +7,14 @@ export enum ItemDropCategory {
   LastInGroup,
 }
 
-enum PlacementType {
+export enum PlacementType {
   ReorderAbove,
   ReorderBelow,
   MakeChild,
   Reparent,
 }
 
-type TargetPlacement =
+export type TargetPlacement =
   | {
       type:
         | PlacementType.ReorderAbove
@@ -95,7 +95,7 @@ export const getInsertionIndex = <T>(
   return childIndex - numberOfDragItemsBeforeTarget;
 };
 
-const getTargetPlacement = (
+export const getTargetPlacement = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
@@ -153,11 +153,9 @@ const getTargetPlacement = (
 };
 
 export const getDragCode = (
-  e: any,
   item: ItemInstance<any>,
-  tree: TreeInstance<any>,
+  placement: TargetPlacement,
 ) => {
-  const placement = getTargetPlacement(e, item, tree, true);
   return [
     item.getId(),
     placement.type,
@@ -222,6 +220,10 @@ export const getDragTarget = (
     canBecomeSibling &&
     placement.type !== PlacementType.MakeChild
   ) {
+    if (draggedItems?.some((item) => item.isDescendentOf(parent.getId()))) {
+      // dropping on itself should be illegal, return item, canDrop will then return false
+      return itemTarget;
+    }
     return parentTarget;
   }
 

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

@@ -191,7 +191,9 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {
-        const selectedItems = tree.getSelectedItems();
+        const selectedItems = tree.getSelectedItems?.() ?? [
+          tree.getFocusedItem(),
+        ];
         const focusedItem = tree.getFocusedItem();
 
         tree.startKeyboardDrag(