@headless-tree/core 0.0.0-20250511190858 → 0.0.0-20250511194715

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # @headless-tree/core
 
-## 0.0.0-20250511190858
+## 0.0.0-20250511194715
 
 ### Minor Changes
 
 - 64d8e2a: add getChildrenWithData method to data loader to support fetching all children of an item at once
+- 35260e3: fixed hotkey issues where releasing modifier keys (like shift) before normal keys can cause issues with subsequent keydown events
 
 ### Patch Changes
 

package/lib/cjs/features/expand-all/feature.js

@@ -51,7 +51,7 @@ exports.expandAllFeature = {
             handler: (_, tree) => __awaiter(void 0, void 0, void 0, function* () {
                 const cancelToken = { current: false };
                 const cancelHandler = (e) => {
-                    if (e.key === "Escape") {
+                    if (e.code === "Escape") {
                         cancelToken.current = true;
                     }
                 };
@@ -61,7 +61,7 @@ exports.expandAllFeature = {
             }),
         },
         collapseSelected: {
-            hotkey: "Control+Shift+-",
+            hotkey: "Control+Shift+Minus",
             handler: (_, tree) => {
                 tree.getSelectedItems().forEach((item) => item.collapseAll());
             },

package/lib/cjs/features/hotkeys-core/feature.js

@@ -2,16 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hotkeysCoreFeature = void 0;
 const specialKeys = {
-    Letter: /^[a-z]$/,
-    LetterOrNumber: /^[a-z0-9]$/,
-    Plus: /^\+$/,
-    Space: /^ $/,
+    // TODO:breaking deprecate auto-lowercase
+    letter: /^Key[A-Z]$/,
+    letterornumber: /^(Key[A-Z]|Digit[0-9])$/,
+    plus: /^(NumpadAdd|Plus)$/,
+    minus: /^(NumpadSubtract|Minus)$/,
+    control: /^(ControlLeft|ControlRight)$/,
+    shift: /^(ShiftLeft|ShiftRight)$/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
-    const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
-    const doKeysMatch = supposedKeys.every((key) => key in specialKeys
-        ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
-        : pressedKeys.has(key));
+    const supposedKeys = hotkey.hotkey.toLowerCase().split("+"); // TODO:breaking deprecate auto-lowercase
+    const doKeysMatch = supposedKeys.every((key) => {
+        if (key in specialKeys) {
+            return [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey));
+        }
+        const pressedKeysLowerCase = [...pressedKeys] // TODO:breaking deprecate auto-lowercase
+            .map((k) => k.toLowerCase());
+        if (pressedKeysLowerCase.includes(key.toLowerCase())) {
+            return true;
+        }
+        if (pressedKeysLowerCase.includes(`key${key.toLowerCase()}`)) {
+            // TODO:breaking deprecate e.key character matching
+            return true;
+        }
+        return false;
+    });
     const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
     const equalCounts = pressedKeys.size === supposedKeys.length;
     return doKeysMatch && isEnabled && equalCounts;
@@ -31,15 +46,14 @@ exports.hotkeysCoreFeature = {
             if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
                 return;
             }
-            const key = e.key.toLowerCase();
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
-            const newMatch = !data.current.pressedKeys.has(key);
-            data.current.pressedKeys.add(key);
+            const newMatch = !data.current.pressedKeys.has(e.code);
+            data.current.pressedKeys.add(e.code);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), hotkeys);
             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(key);
+                data.current.pressedKeys.delete(e.code);
             }
             if (!hotkeyName)
                 return;
@@ -60,7 +74,7 @@ exports.hotkeysCoreFeature = {
             var _a;
             var _b;
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
-            data.current.pressedKeys.delete(e.key.toLowerCase());
+            data.current.pressedKeys.delete(e.code);
         };
         const reset = () => {
             data.current.pressedKeys = new Set();

package/lib/cjs/features/keyboard-drag-and-drop/feature.js

@@ -144,7 +144,7 @@ exports.keyboardDragAndDropFeature = {
     },
     hotkeys: {
         startDrag: {
-            hotkey: "Control+Shift+D",
+            hotkey: "Control+Shift+KeyD",
             preventDefault: true,
             isEnabled: (tree) => !tree.getState().dnd,
             handler: (_, tree) => {

package/lib/cjs/features/selection/feature.js

@@ -122,7 +122,7 @@ exports.selectionFeature = {
             },
         },
         selectAll: {
-            hotkey: "Control+a",
+            hotkey: "Control+KeyA",
             preventDefault: true,
             handler: (e, tree) => {
                 tree.setSelectedItems(tree.getItems().map((item) => item.getId()));

package/lib/esm/features/expand-all/feature.js

@@ -48,7 +48,7 @@ export const expandAllFeature = {
             handler: (_, tree) => __awaiter(void 0, void 0, void 0, function* () {
                 const cancelToken = { current: false };
                 const cancelHandler = (e) => {
-                    if (e.key === "Escape") {
+                    if (e.code === "Escape") {
                         cancelToken.current = true;
                     }
                 };
@@ -58,7 +58,7 @@ export const expandAllFeature = {
             }),
         },
         collapseSelected: {
-            hotkey: "Control+Shift+-",
+            hotkey: "Control+Shift+Minus",
             handler: (_, tree) => {
                 tree.getSelectedItems().forEach((item) => item.collapseAll());
             },

package/lib/esm/features/hotkeys-core/feature.js

@@ -1,14 +1,29 @@
 const specialKeys = {
-    Letter: /^[a-z]$/,
-    LetterOrNumber: /^[a-z0-9]$/,
-    Plus: /^\+$/,
-    Space: /^ $/,
+    // TODO:breaking deprecate auto-lowercase
+    letter: /^Key[A-Z]$/,
+    letterornumber: /^(Key[A-Z]|Digit[0-9])$/,
+    plus: /^(NumpadAdd|Plus)$/,
+    minus: /^(NumpadSubtract|Minus)$/,
+    control: /^(ControlLeft|ControlRight)$/,
+    shift: /^(ShiftLeft|ShiftRight)$/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
-    const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
-    const doKeysMatch = supposedKeys.every((key) => key in specialKeys
-        ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
-        : pressedKeys.has(key));
+    const supposedKeys = hotkey.hotkey.toLowerCase().split("+"); // TODO:breaking deprecate auto-lowercase
+    const doKeysMatch = supposedKeys.every((key) => {
+        if (key in specialKeys) {
+            return [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey));
+        }
+        const pressedKeysLowerCase = [...pressedKeys] // TODO:breaking deprecate auto-lowercase
+            .map((k) => k.toLowerCase());
+        if (pressedKeysLowerCase.includes(key.toLowerCase())) {
+            return true;
+        }
+        if (pressedKeysLowerCase.includes(`key${key.toLowerCase()}`)) {
+            // TODO:breaking deprecate e.key character matching
+            return true;
+        }
+        return false;
+    });
     const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
     const equalCounts = pressedKeys.size === supposedKeys.length;
     return doKeysMatch && isEnabled && equalCounts;
@@ -28,15 +43,14 @@ export const hotkeysCoreFeature = {
             if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
                 return;
             }
-            const key = e.key.toLowerCase();
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
-            const newMatch = !data.current.pressedKeys.has(key);
-            data.current.pressedKeys.add(key);
+            const newMatch = !data.current.pressedKeys.has(e.code);
+            data.current.pressedKeys.add(e.code);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), hotkeys);
             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(key);
+                data.current.pressedKeys.delete(e.code);
             }
             if (!hotkeyName)
                 return;
@@ -57,7 +71,7 @@ export const hotkeysCoreFeature = {
             var _a;
             var _b;
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
-            data.current.pressedKeys.delete(e.key.toLowerCase());
+            data.current.pressedKeys.delete(e.code);
         };
         const reset = () => {
             data.current.pressedKeys = new Set();

package/lib/esm/features/keyboard-drag-and-drop/feature.js

@@ -141,7 +141,7 @@ export const keyboardDragAndDropFeature = {
     },
     hotkeys: {
         startDrag: {
-            hotkey: "Control+Shift+D",
+            hotkey: "Control+Shift+KeyD",
             preventDefault: true,
             isEnabled: (tree) => !tree.getState().dnd,
             handler: (_, tree) => {

package/lib/esm/features/selection/feature.js

@@ -119,7 +119,7 @@ export const selectionFeature = {
             },
         },
         selectAll: {
-            hotkey: "Control+a",
+            hotkey: "Control+KeyA",
             preventDefault: true,
             handler: (e, tree) => {
                 tree.setSelectedItems(tree.getItems().map((item) => item.getId()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250511190858",
+  "version": "0.0.0-20250511194715",
   "type": "module",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

package/src/features/expand-all/feature.ts

@@ -50,7 +50,7 @@ export const expandAllFeature: FeatureImplementation = {
       handler: async (_, tree) => {
         const cancelToken = { current: false };
         const cancelHandler = (e: KeyboardEvent) => {
-          if (e.key === "Escape") {
+          if (e.code === "Escape") {
             cancelToken.current = true;
           }
         };
@@ -63,7 +63,7 @@ export const expandAllFeature: FeatureImplementation = {
     },
 
     collapseSelected: {
-      hotkey: "Control+Shift+-",
+      hotkey: "Control+Shift+Minus",
       handler: (_, tree) => {
         tree.getSelectedItems().forEach((item) => item.collapseAll());
       },

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

@@ -6,10 +6,13 @@ import {
 import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 
 const specialKeys: Record<string, RegExp> = {
-  Letter: /^[a-z]$/,
-  LetterOrNumber: /^[a-z0-9]$/,
-  Plus: /^\+$/,
-  Space: /^ $/,
+  // TODO:breaking deprecate auto-lowercase
+  letter: /^Key[A-Z]$/,
+  letterornumber: /^(Key[A-Z]|Digit[0-9])$/,
+  plus: /^(NumpadAdd|Plus)$/,
+  minus: /^(NumpadSubtract|Minus)$/,
+  control: /^(ControlLeft|ControlRight)$/,
+  shift: /^(ShiftLeft|ShiftRight)$/,
 };
 
 const testHotkeyMatch = (
@@ -17,12 +20,28 @@ const testHotkeyMatch = (
   tree: TreeInstance<any>,
   hotkey: HotkeyConfig<any>,
 ) => {
-  const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
-  const doKeysMatch = supposedKeys.every((key) =>
-    key in specialKeys
-      ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
-      : pressedKeys.has(key),
-  );
+  const supposedKeys = hotkey.hotkey.toLowerCase().split("+"); // TODO:breaking deprecate auto-lowercase
+  const doKeysMatch = supposedKeys.every((key) => {
+    if (key in specialKeys) {
+      return [...pressedKeys].some((pressedKey) =>
+        specialKeys[key].test(pressedKey),
+      );
+    }
+
+    const pressedKeysLowerCase = [...pressedKeys] // TODO:breaking deprecate auto-lowercase
+      .map((k) => k.toLowerCase());
+
+    if (pressedKeysLowerCase.includes(key.toLowerCase())) {
+      return true;
+    }
+
+    if (pressedKeysLowerCase.includes(`key${key.toLowerCase()}`)) {
+      // TODO:breaking deprecate e.key character matching
+      return true;
+    }
+
+    return false;
+  });
   const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
   const equalCounts = pressedKeys.size === supposedKeys.length;
   return doKeysMatch && isEnabled && equalCounts;
@@ -50,10 +69,9 @@ export const hotkeysCoreFeature: FeatureImplementation = {
         return;
       }
 
-      const key = e.key.toLowerCase();
       data.current.pressedKeys ??= new Set();
-      const newMatch = !data.current.pressedKeys.has(key);
-      data.current.pressedKeys.add(key);
+      const newMatch = !data.current.pressedKeys.has(e.code);
+      data.current.pressedKeys.add(e.code);
 
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
@@ -65,7 +83,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(key);
+        data.current.pressedKeys.delete(e.code);
       }
 
       if (!hotkeyName) return;
@@ -90,7 +108,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
 
     const keyup = (e: KeyboardEvent) => {
       data.current.pressedKeys ??= new Set();
-      data.current.pressedKeys.delete(e.key.toLowerCase());
+      data.current.pressedKeys.delete(e.code);
     };
 
     const reset = () => {

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

@@ -187,7 +187,7 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
 
   hotkeys: {
     startDrag: {
-      hotkey: "Control+Shift+D",
+      hotkey: "Control+Shift+KeyD",
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {

package/src/features/selection/feature.ts

@@ -144,7 +144,7 @@ export const selectionFeature: FeatureImplementation = {
       },
     },
     selectAll: {
-      hotkey: "Control+a",
+      hotkey: "Control+KeyA",
       preventDefault: true,
       handler: (e, tree) => {
         tree.setSelectedItems(tree.getItems().map((item) => item.getId()));