@headless-tree/core 0.0.0-20260108010329 → 0.0.0-20260109213608

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # @headless-tree/core
 
-## 0.0.0-20260108010329
+## 0.0.0-20260109213608
+
+### Patch Changes
+
+- 4397d8c: Added `draggedItemOverwritesSelection` as config option to the Drag Feature. Setting it to false will disable the current default behavior, where dragging an unselected item will overwrite the selection to just the dragged item.
+
+## 1.6.2
 
 ### Patch Changes
 

package/dist/index.d.mts

@@ -70,6 +70,9 @@ type DragAndDropFeatureDef<T> = {
         openOnDropDelay?: number;
         /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
         seperateDragHandle?: boolean;
+        /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+         * Defaults to true */
+        draggedItemOverwritesSelection?: boolean;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;

package/dist/index.d.ts

@@ -70,6 +70,9 @@ type DragAndDropFeatureDef<T> = {
         openOnDropDelay?: number;
         /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
         seperateDragHandle?: boolean;
+        /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+         * Defaults to true */
+        draggedItemOverwritesSelection?: boolean;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;

package/dist/index.js

@@ -1025,6 +1025,7 @@ var checkboxesFeature = {
 };
 
 // src/features/hotkeys-core/feature.ts
+var resolveKeyCode = (e) => e.code !== "" && e.code !== "Unidentified" ? e.code : e.key;
 var specialKeys = {
   // TODO:breaking deprecate auto-lowercase
   letter: /^Key[A-Z]$/,
@@ -1073,9 +1074,10 @@ var hotkeysCoreFeature = {
       if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
         return;
       }
+      const resolvedCode = resolveKeyCode(e);
       (_b = (_a = data.current).pressedKeys) != null ? _b : _a.pressedKeys = /* @__PURE__ */ new Set();
-      const newMatch = !data.current.pressedKeys.has(e.code);
-      data.current.pressedKeys.add(e.code);
+      const newMatch = !data.current.pressedKeys.has(resolvedCode);
+      data.current.pressedKeys.add(resolvedCode);
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
         tree,
@@ -1083,7 +1085,7 @@ var hotkeysCoreFeature = {
         hotkeys
       );
       if (e.target instanceof HTMLInputElement) {
-        data.current.pressedKeys.delete(e.code);
+        data.current.pressedKeys.delete(resolvedCode);
       }
       if (!hotkeyName) return;
       const hotkeyConfig = __spreadValues(__spreadValues({}, tree.getHotkeyPresets()[hotkeyName]), hotkeys == null ? void 0 : hotkeys[hotkeyName]);
@@ -1098,7 +1100,7 @@ var hotkeysCoreFeature = {
     const keyup = (e) => {
       var _a, _b;
       (_b = (_a = data.current).pressedKeys) != null ? _b : _a.pressedKeys = /* @__PURE__ */ new Set();
-      data.current.pressedKeys.delete(e.code);
+      data.current.pressedKeys.delete(resolveKeyCode(e));
     };
     const reset = () => {
       data.current.pressedKeys = /* @__PURE__ */ new Set();
@@ -1527,7 +1529,8 @@ var dragAndDropFeature = {
     canDragForeignDragObjectOver: defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject ? (dataTransfer) => dataTransfer.effectAllowed !== "none" : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
-    openOnDropDelay: 800
+    openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true
   }, defaultConfig),
   stateHandlerNames: {
     dnd: "setDndState"
@@ -1697,10 +1700,12 @@ var dragAndDropFeature = {
       draggable: true,
       onDragStart: (e) => {
         var _a, _b, _c, _d;
+        const { draggedItemOverwritesSelection } = tree.getConfig();
         const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const overwriteSelection = !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
         const config = tree.getConfig();
-        if (!selectedItems.includes(item)) {
+        if (overwriteSelection) {
           (_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)) {

package/dist/index.mjs

@@ -981,6 +981,7 @@ var checkboxesFeature = {
 };
 
 // src/features/hotkeys-core/feature.ts
+var resolveKeyCode = (e) => e.code !== "" && e.code !== "Unidentified" ? e.code : e.key;
 var specialKeys = {
   // TODO:breaking deprecate auto-lowercase
   letter: /^Key[A-Z]$/,
@@ -1029,9 +1030,10 @@ var hotkeysCoreFeature = {
       if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
         return;
       }
+      const resolvedCode = resolveKeyCode(e);
       (_b = (_a = data.current).pressedKeys) != null ? _b : _a.pressedKeys = /* @__PURE__ */ new Set();
-      const newMatch = !data.current.pressedKeys.has(e.code);
-      data.current.pressedKeys.add(e.code);
+      const newMatch = !data.current.pressedKeys.has(resolvedCode);
+      data.current.pressedKeys.add(resolvedCode);
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
         tree,
@@ -1039,7 +1041,7 @@ var hotkeysCoreFeature = {
         hotkeys
       );
       if (e.target instanceof HTMLInputElement) {
-        data.current.pressedKeys.delete(e.code);
+        data.current.pressedKeys.delete(resolvedCode);
       }
       if (!hotkeyName) return;
       const hotkeyConfig = __spreadValues(__spreadValues({}, tree.getHotkeyPresets()[hotkeyName]), hotkeys == null ? void 0 : hotkeys[hotkeyName]);
@@ -1054,7 +1056,7 @@ var hotkeysCoreFeature = {
     const keyup = (e) => {
       var _a, _b;
       (_b = (_a = data.current).pressedKeys) != null ? _b : _a.pressedKeys = /* @__PURE__ */ new Set();
-      data.current.pressedKeys.delete(e.code);
+      data.current.pressedKeys.delete(resolveKeyCode(e));
     };
     const reset = () => {
       data.current.pressedKeys = /* @__PURE__ */ new Set();
@@ -1483,7 +1485,8 @@ var dragAndDropFeature = {
     canDragForeignDragObjectOver: defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject ? (dataTransfer) => dataTransfer.effectAllowed !== "none" : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
-    openOnDropDelay: 800
+    openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true
   }, defaultConfig),
   stateHandlerNames: {
     dnd: "setDndState"
@@ -1653,10 +1656,12 @@ var dragAndDropFeature = {
       draggable: true,
       onDragStart: (e) => {
         var _a, _b, _c, _d;
+        const { draggedItemOverwritesSelection } = tree.getConfig();
         const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const overwriteSelection = !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
         const config = tree.getConfig();
-        if (!selectedItems.includes(item)) {
+        if (overwriteSelection) {
           (_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)) {

package/package.json

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

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

@@ -787,5 +787,99 @@ describe("core-feature/drag-and-drop", () => {
         expect(canDrop).toBeCalledTimes(3);
       });
     });
+
+    describe("draggedItemOverwritesSelection", () => {
+      it("overwrites selection when dragging unselected item with draggedItemOverwritesSelection=true", () => {
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x113").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x114").isSelected()).toBe(false);
+
+        tree.do.startDrag("x114");
+
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(false);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(false);
+        expect(tree.instance.getItemInstance("x113").isSelected()).toBe(false);
+        expect(tree.instance.getItemInstance("x114").isSelected()).toBe(true);
+      });
+
+      it("preserves selection when dragging unselected item with draggedItemOverwritesSelection=false", async () => {
+        const testTree = await tree
+          .with({ draggedItemOverwritesSelection: false })
+          .createTestCaseTree();
+
+        testTree.do.selectItem("x111");
+        testTree.do.ctrlSelectItem("x112");
+        testTree.do.ctrlSelectItem("x113");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+        expect(testTree.item("x114").isSelected()).toBe(false);
+        testTree.do.startDrag("x114");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+        expect(testTree.item("x114").isSelected()).toBe(false);
+      });
+
+      it("does not overwrite selection when dragging selected item with draggedItemOverwritesSelection=true", () => {
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(tree.item("x111").isSelected()).toBe(true);
+        expect(tree.item("x112").isSelected()).toBe(true);
+        expect(tree.item("x113").isSelected()).toBe(true);
+
+        tree.do.startDrag("x111");
+
+        expect(tree.item("x111").isSelected()).toBe(true);
+        expect(tree.item("x112").isSelected()).toBe(true);
+        expect(tree.item("x113").isSelected()).toBe(true);
+      });
+
+      it("does not overwrite selection when dragging selected item with draggedItemOverwritesSelection=false", async () => {
+        const testTree = await tree
+          .with({ draggedItemOverwritesSelection: false })
+          .createTestCaseTree();
+
+        testTree.do.selectItem("x111");
+        testTree.do.ctrlSelectItem("x112");
+        testTree.do.ctrlSelectItem("x113");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+
+        testTree.do.startDrag("x111");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+      });
+
+      it("drags all selected items when draggedItemOverwritesSelection=false", async () => {
+        const testTree = await tree
+          .with({ draggedItemOverwritesSelection: false })
+          .createTestCaseTree();
+
+        testTree.do.selectItem("x111");
+        testTree.do.ctrlSelectItem("x112");
+        testTree.do.ctrlSelectItem("x113");
+
+        testTree.do.startDrag("x111");
+        testTree.do.dragOverAndDrop("x21");
+
+        testTree.expect.dropped(["x111", "x112", "x113"], {
+          item: testTree.item("x21"),
+        });
+      });
+    });
   });
 });

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

@@ -57,6 +57,7 @@ export const dragAndDropFeature: FeatureImplementation = {
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
     openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true,
     ...defaultConfig,
   }),
 
@@ -280,13 +281,16 @@ export const dragAndDropFeature: FeatureImplementation = {
       draggable: true,
 
       onDragStart: (e: DragEvent) => {
+        const { draggedItemOverwritesSelection } = tree.getConfig();
         const selectedItems = tree.getSelectedItems
           ? tree.getSelectedItems()
           : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
+        const overwriteSelection =
+          !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
         const config = tree.getConfig();
 
-        if (!selectedItems.includes(item)) {
+        if (overwriteSelection) {
           tree.setSelectedItems?.([item.getItemMeta().itemId]);
         }
 

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

@@ -100,6 +100,10 @@ export type DragAndDropFeatureDef<T> = {
 
     /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
     seperateDragHandle?: boolean;
+
+    /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+     * Defaults to true */
+    draggedItemOverwritesSelection?: boolean;
   };
   treeInstance: {
     getDragTarget: () => DragTarget<T> | null;

package/src/features/hotkeys-core/feature.ts

@@ -5,6 +5,11 @@ import {
 } from "../../types/core";
 import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 
+// e.code may be empty or "Unidentified" on mobile virtual keyboards
+// or during IME composition, so we fall back to e.key
+const resolveKeyCode = (e: KeyboardEvent): string =>
+  e.code !== "" && e.code !== "Unidentified" ? e.code : e.key;
+
 const specialKeys: Record<string, RegExp> = {
   // TODO:breaking deprecate auto-lowercase
   letter: /^Key[A-Z]$/,
@@ -71,9 +76,11 @@ export const hotkeysCoreFeature: FeatureImplementation = {
         return;
       }
 
+      const resolvedCode = resolveKeyCode(e);
+
       data.current.pressedKeys ??= new Set();
-      const newMatch = !data.current.pressedKeys.has(e.code);
-      data.current.pressedKeys.add(e.code);
+      const newMatch = !data.current.pressedKeys.has(resolvedCode);
+      data.current.pressedKeys.add(resolvedCode);
 
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
@@ -85,7 +92,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (e.target instanceof HTMLInputElement) {
         // JS respects composite keydowns while input elements are focused, and
         // doesnt send the associated keyup events with the same key name
-        data.current.pressedKeys.delete(e.code);
+        data.current.pressedKeys.delete(resolvedCode);
       }
 
       if (!hotkeyName) return;
@@ -110,7 +117,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
 
     const keyup = (e: KeyboardEvent) => {
       data.current.pressedKeys ??= new Set();
-      data.current.pressedKeys.delete(e.code);
+      data.current.pressedKeys.delete(resolveKeyCode(e));
     };
 
     const reset = () => {