@headless-tree/core 1.0.1 → 1.2.0

package/src/core/create-tree.ts

@@ -24,6 +24,24 @@ const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
   }
 };
 
+// Check all possible pairs and sort the array
+const exhaustiveSort = <T>(
+  arr: T[],
+  compareFn: (param1: T, param2: T) => number,
+) => {
+  const n = arr.length;
+
+  for (let i = 0; i < n; i++) {
+    for (let j = i + 1; j < n; j++) {
+      if (compareFn(arr[j], arr[i]) < 0) {
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+      }
+    }
+  }
+
+  return arr;
+};
+
 const compareFeatures =
   (originalOrder: FeatureImplementation[]) =>
   (feature1: FeatureImplementation, feature2: FeatureImplementation) => {
@@ -33,11 +51,12 @@ const compareFeatures =
     if (feature1.key && feature2.overwrites?.includes(feature1.key)) {
       return -1;
     }
+
     return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
   };
 
 const sortFeatures = (features: FeatureImplementation[] = []) =>
-  features.sort(compareFeatures(features));
+  exhaustiveSort(features, compareFeatures(features));
 
 export const createTree = <T>(
   initialConfig: TreeConfig<T>,
@@ -228,7 +247,6 @@ export const createTree = <T>(
   }
 
   finalizeTree();
-  rebuildItemMeta();
 
   return treeInstance;
 };

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

@@ -86,6 +86,7 @@ describe("core-feature/selections", () => {
     suiteTree.resetBeforeEach();
 
     it("invalidates item data on item instance", async () => {
+      const setLoadingItemData = suiteTree.mockedHandler("setLoadingItemData");
       getItem.mockClear();
       await suiteTree.resolveAsyncVisibleItems();
       getItem.mockResolvedValueOnce("new");
@@ -93,9 +94,14 @@ describe("core-feature/selections", () => {
       await suiteTree.resolveAsyncVisibleItems();
       expect(getItem).toHaveBeenCalledWith("x1");
       expect(suiteTree.item("x1").getItemData()).toBe("new");
+      expect(setLoadingItemData).toBeCalledWith(["x1"]);
+      expect(setLoadingItemData).toBeCalledWith([]);
     });
 
     it("invalidates children ids on item instance", async () => {
+      const setLoadingItemChildrens = suiteTree.mockedHandler(
+        "setLoadingItemChildrens",
+      );
       getChildren.mockClear();
       await suiteTree.resolveAsyncVisibleItems();
       getChildren.mockResolvedValueOnce(["new1", "new2"]);
@@ -103,6 +109,8 @@ describe("core-feature/selections", () => {
       await suiteTree.resolveAsyncVisibleItems();
       expect(getChildren).toHaveBeenCalledWith("x1");
       suiteTree.expect.hasChildren("x1", ["new1", "new2"]);
+      expect(setLoadingItemChildrens).toBeCalledWith(["x1"]);
+      expect(setLoadingItemChildrens).toBeCalledWith([]);
     });
 
     it("doesnt call item data getter twice", async () => {
@@ -124,5 +132,79 @@ describe("core-feature/selections", () => {
       suiteTree.expect.hasChildren("x1", ["x11", "x12", "x13", "x14"]);
       expect(getChildren).toHaveBeenCalledTimes(1);
     });
+
+    it("optimistic invalidates item data on item instance", async () => {
+      const setLoadingItemData = suiteTree.mockedHandler("setLoadingItemData");
+      getItem.mockClear();
+      await suiteTree.resolveAsyncVisibleItems();
+      getItem.mockResolvedValueOnce("new");
+      suiteTree.item("x1").invalidateItemData(true);
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getItem).toHaveBeenCalledWith("x1");
+      expect(suiteTree.item("x1").getItemData()).toBe("new");
+      expect(setLoadingItemData).toBeCalledTimes(1);
+      expect(setLoadingItemData).toBeCalledWith([]);
+    });
+
+    it("optimistic invalidates children ids on item instance", async () => {
+      const setLoadingItemChildrens = suiteTree.mockedHandler(
+        "setLoadingItemChildrens",
+      );
+      getChildren.mockClear();
+      await suiteTree.resolveAsyncVisibleItems();
+      getChildren.mockResolvedValueOnce(["new1", "new2"]);
+      suiteTree.item("x1").invalidateChildrenIds(true);
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getChildren).toHaveBeenCalledWith("x1");
+      suiteTree.expect.hasChildren("x1", ["new1", "new2"]);
+      expect(setLoadingItemChildrens).toBeCalledTimes(1);
+      expect(setLoadingItemChildrens).toBeCalledWith([]);
+    });
+  });
+
+  describe("getChildrenWithData", () => {
+    const getChildrenWithData = vi.fn(async (id) => [
+      { id: `${id}1`, data: `${id}1-data` },
+      { id: `${id}2`, data: `${id}2-data` },
+    ]);
+    const getItem = vi.fn();
+    const suiteTree = tree.with({
+      dataLoader: { getItem, getChildrenWithData },
+    });
+    suiteTree.resetBeforeEach();
+
+    it("loads children with data", async () => {
+      getChildrenWithData.mockClear();
+      suiteTree.do.selectItem("x12");
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getChildrenWithData).toHaveBeenCalledWith("x12");
+      suiteTree.expect.hasChildren("x12", ["x121", "x122"]);
+      expect(suiteTree.item("x121").getItemData()).toBe("x121-data");
+      expect(suiteTree.item("x122").getItemData()).toBe("x122-data");
+    });
+
+    it.skip("invalidates children and reloads with data", async () => {
+      await suiteTree.resolveAsyncVisibleItems();
+      suiteTree.item("x").invalidateChildrenIds();
+      getChildrenWithData.mockResolvedValueOnce([
+        { id: "new1", data: "new1-data" },
+        { id: "new2", data: "new2-data" },
+      ]);
+      getChildrenWithData.mockClear();
+      await suiteTree.resolveAsyncVisibleItems();
+      expect(getChildrenWithData).toHaveBeenCalledTimes(1);
+      suiteTree.expect.hasChildren("x", ["new1", "new2"]);
+      expect(suiteTree.item("new1").getItemData()).toBe("new1-data");
+      expect(suiteTree.item("new2").getItemData()).toBe("new2-data");
+    });
+
+    it("does not call getChildrenWithData twice unnecessarily", async () => {
+      await suiteTree.resolveAsyncVisibleItems();
+      getChildrenWithData.mockClear();
+      suiteTree.item("x").invalidateChildrenIds();
+      await suiteTree.resolveAsyncVisibleItems();
+      suiteTree.expect.hasChildren("x", ["x1", "x2"]);
+      expect(getChildrenWithData).toHaveBeenCalledTimes(1);
+    });
   });
 });

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

@@ -1,7 +1,61 @@
-import { FeatureImplementation } from "../../types/core";
+import { FeatureImplementation, TreeInstance } from "../../types/core";
 import { AsyncDataLoaderDataRef } from "./types";
 import { makeStateUpdater } from "../../utils";
 
+const getDataRef = <T>(tree: TreeInstance<T>) => {
+  const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+  dataRef.current.itemData ??= {};
+  dataRef.current.childrenIds ??= {};
+  return dataRef;
+};
+
+const loadItemData = async <T>(tree: TreeInstance<T>, itemId: string) => {
+  const config = tree.getConfig();
+  const dataRef = getDataRef(tree);
+
+  const item = await config.dataLoader.getItem(itemId);
+  dataRef.current.itemData[itemId] = item;
+  config.onLoadedItem?.(itemId, item);
+  tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
+    loadingItemData.filter((id) => id !== itemId),
+  );
+
+  return item;
+};
+
+const loadChildrenIds = async <T>(tree: TreeInstance<T>, itemId: string) => {
+  const config = tree.getConfig();
+  const dataRef = getDataRef(tree);
+  let childrenIds: string[];
+
+  if ("getChildrenWithData" in config.dataLoader) {
+    const children = await config.dataLoader.getChildrenWithData(itemId);
+    childrenIds = children.map((c) => c.id);
+    dataRef.current.childrenIds[itemId] = childrenIds;
+    children.forEach(({ id, data }) => {
+      dataRef.current.itemData[id] = data;
+      config.onLoadedItem?.(id, data);
+    });
+
+    config.onLoadedChildren?.(itemId, childrenIds);
+    tree.rebuildTree();
+    tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
+      loadingItemData.filter((id) => !childrenIds.includes(id)),
+    );
+  } else {
+    childrenIds = await config.dataLoader.getChildren(itemId);
+    dataRef.current.childrenIds[itemId] = childrenIds;
+    config.onLoadedChildren?.(itemId, childrenIds);
+    tree.rebuildTree();
+  }
+
+  tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) =>
+    loadingItemChildrens.filter((id) => id !== itemId),
+  );
+
+  return childrenIds;
+};
+
 export const asyncDataLoaderFeature: FeatureImplementation = {
   key: "async-data-loader",
 
@@ -23,37 +77,27 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
   },
 
   treeInstance: {
-    waitForItemDataLoaded: async ({ tree }, itemId) => {
-      tree.retrieveItemData(itemId);
-      if (!tree.getState().loadingItemData.includes(itemId)) {
-        return;
-      }
-      await new Promise<void>((resolve) => {
-        const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-        dataRef.current.awaitingItemDataLoading ??= {};
-        dataRef.current.awaitingItemDataLoading[itemId] ??= [];
-        dataRef.current.awaitingItemDataLoading[itemId].push(resolve);
-      });
-    },
+    waitForItemDataLoaded: ({ tree }, itemId) => tree.loadItemData(itemId),
 
-    waitForItemChildrenLoaded: async ({ tree }, itemId) => {
-      tree.retrieveChildrenIds(itemId);
-      if (!tree.getState().loadingItemChildrens.includes(itemId)) {
-        return;
-      }
-      await new Promise<void>((resolve) => {
-        const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-        dataRef.current.awaitingItemChildrensLoading ??= {};
-        dataRef.current.awaitingItemChildrensLoading[itemId] ??= [];
-        dataRef.current.awaitingItemChildrensLoading[itemId].push(resolve);
-      });
+    waitForItemChildrenLoaded: ({ tree }, itemId) =>
+      tree.loadChildrenIds(itemId),
+
+    loadItemData: async ({ tree }, itemId) => {
+      return (
+        getDataRef(tree).current.itemData[itemId] ??
+        (await loadItemData(tree, itemId))
+      );
+    },
+    loadChildrenIds: async ({ tree }, itemId) => {
+      return (
+        getDataRef(tree).current.childrenIds[itemId] ??
+        (await loadChildrenIds(tree, itemId))
+      );
     },
 
     retrieveItemData: ({ tree }, itemId) => {
       const config = tree.getConfig();
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      dataRef.current.itemData ??= {};
-      dataRef.current.childrenIds ??= {};
+      const dataRef = getDataRef(tree);
 
       if (dataRef.current.itemData[itemId]) {
         return dataRef.current.itemData[itemId];
@@ -65,28 +109,14 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
           itemId,
         ]);
 
-        (async () => {
-          const item = await config.dataLoader.getItem(itemId);
-          dataRef.current.itemData[itemId] = item;
-          config.onLoadedItem?.(itemId, item);
-          tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
-            loadingItemData.filter((id) => id !== itemId),
-          );
-
-          dataRef.current.awaitingItemDataLoading?.[itemId].forEach((cb) =>
-            cb(),
-          );
-          delete dataRef.current.awaitingItemDataLoading?.[itemId];
-        })();
+        loadItemData(tree, itemId);
       }
 
       return config.createLoadingItemData?.() ?? null;
     },
 
     retrieveChildrenIds: ({ tree }, itemId) => {
-      const config = tree.getConfig();
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      dataRef.current.childrenIds ??= {};
+      const dataRef = getDataRef(tree);
       if (dataRef.current.childrenIds[itemId]) {
         return dataRef.current.childrenIds[itemId];
       }
@@ -100,22 +130,7 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
         (loadingItemChildrens) => [...loadingItemChildrens, itemId],
       );
 
-      (async () => {
-        const childrenIds = await config.dataLoader.getChildren(itemId);
-        dataRef.current.childrenIds[itemId] = childrenIds;
-        config.onLoadedChildren?.(itemId, childrenIds);
-        tree.applySubStateUpdate(
-          "loadingItemChildrens",
-          (loadingItemChildrens) =>
-            loadingItemChildrens.filter((id) => id !== itemId),
-        );
-        tree.rebuildTree();
-
-        dataRef.current.awaitingItemChildrensLoading?.[itemId]?.forEach((cb) =>
-          cb(),
-        );
-        delete dataRef.current.awaitingItemChildrensLoading?.[itemId];
-      })();
+      loadChildrenIds(tree, itemId);
 
       return [];
     },
@@ -125,15 +140,25 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
     isLoading: ({ tree, item }) =>
       tree.getState().loadingItemData.includes(item.getItemMeta().itemId) ||
       tree.getState().loadingItemChildrens.includes(item.getItemMeta().itemId),
-    invalidateItemData: ({ tree, itemId }) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      delete dataRef.current.itemData?.[itemId];
-      tree.retrieveItemData(itemId);
+    invalidateItemData: async ({ tree, itemId }, optimistic) => {
+      if (!optimistic) {
+        delete getDataRef(tree).current.itemData?.[itemId];
+        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+          ...loadingItemData,
+          itemId,
+        ]);
+      }
+      await loadItemData(tree, itemId);
     },
-    invalidateChildrenIds: ({ tree, itemId }) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      delete dataRef.current.childrenIds?.[itemId];
-      tree.retrieveChildrenIds(itemId);
+    invalidateChildrenIds: async ({ tree, itemId }, optimistic) => {
+      if (!optimistic) {
+        delete getDataRef(tree).current.childrenIds?.[itemId];
+        tree.applySubStateUpdate(
+          "loadingItemChildrens",
+          (loadingItemChildrens) => [...loadingItemChildrens, itemId],
+        );
+      }
+      await loadChildrenIds(tree, itemId);
     },
     updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
       const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();

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

@@ -1,13 +1,9 @@
 import { SetStateFn } from "../../types/core";
 import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
 
-type AwaitingLoaderCallbacks = Record<string, (() => void)[]>;
-
 export interface AsyncDataLoaderDataRef<T = any> {
   itemData: Record<string, T>;
   childrenIds: Record<string, string[]>;
-  awaitingItemDataLoading: AwaitingLoaderCallbacks;
-  awaitingItemChildrensLoading: AwaitingLoaderCallbacks;
 }
 
 /**
@@ -32,13 +28,24 @@ export type AsyncDataLoaderFeatureDef<T> = {
     onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
   };
   treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
+    /** @deprecated use loadItemData instead */
     waitForItemDataLoaded: (itemId: string) => Promise<void>;
+    /** @deprecated use loadChildrenIds instead */
     waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
+    loadItemData: (itemId: string) => Promise<T>;
+    loadChildrenIds: (itemId: string) => Promise<string[]>;
   };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
-    /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
-    invalidateItemData: () => void;
-    invalidateChildrenIds: () => void;
+    /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible
+     * @param optimistic If true, the item will not trigger a state update on `loadingItemData`, and
+     * the tree will continue to display the old data until the new data has loaded. */
+    invalidateItemData: (optimistic?: boolean) => Promise<void>;
+
+    /** Invalidate fetched children ids for item, and triggers a refetch and subsequent rerender if the item is visible
+     * @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>;
+
     updateCachedChildrenIds: (childrenIds: string[]) => void;
     isLoading: () => boolean;
   };

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

@@ -74,6 +74,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       const dragLine = tree.getDragLineData();
       return dragLine
         ? {
+            position: "absolute",
             top: `${dragLine.top + topOffset}px`,
             left: `${dragLine.left + leftOffset}px`,
             width: `${dragLine.width - leftOffset}px`,

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;
@@ -45,23 +64,33 @@ export const hotkeysCoreFeature: FeatureImplementation = {
   onTreeMount: (tree, element) => {
     const data = tree.getDataRef<HotkeysCoreDataRef>();
     const keydown = (e: KeyboardEvent) => {
-      const key = e.key.toLowerCase();
+      const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
+      if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
+        return;
+      }
+
       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,
         tree as any,
         tree.getHotkeyPresets(),
-        tree.getConfig().hotkeys as HotkeysConfig<any>,
+        hotkeys as HotkeysConfig<any>,
       );
 
+      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);
+      }
+
       if (!hotkeyName) return;
 
       const hotkeyConfig: HotkeyConfig<any> = {
         ...tree.getHotkeyPresets()[hotkeyName],
-        ...tree.getConfig().hotkeys?.[hotkeyName],
+        ...hotkeys?.[hotkeyName],
       };
 
       if (!hotkeyConfig) return;
@@ -74,12 +103,16 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (hotkeyConfig.preventDefault) e.preventDefault();
 
       hotkeyConfig.handler(e, tree as any);
-      tree.getConfig().onTreeHotkey?.(hotkeyName, e);
+      onTreeHotkey?.(hotkeyName, e);
     };
 
     const keyup = (e: KeyboardEvent) => {
       data.current.pressedKeys ??= new Set();
-      data.current.pressedKeys.delete(e.key.toLowerCase());
+      data.current.pressedKeys.delete(e.code);
+    };
+
+    const reset = () => {
+      data.current.pressedKeys = new Set();
     };
 
     // keyup is registered on document, because some hotkeys shift
@@ -87,8 +120,10 @@ export const hotkeysCoreFeature: FeatureImplementation = {
     // and then we wouldn't get the keyup event anymore
     element.addEventListener("keydown", keydown);
     document.addEventListener("keyup", keyup);
+    window.addEventListener("focus", reset);
     data.current.keydownHandler = keydown;
     data.current.keyupHandler = keyup;
+    data.current.resetHandler = reset;
   },
 
   onTreeUnmount: (tree, element) => {
@@ -101,5 +136,9 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       element.removeEventListener("keydown", data.current.keydownHandler);
       delete data.current.keydownHandler;
     }
+    if (data.current.resetHandler) {
+      window.removeEventListener("focus", data.current.resetHandler);
+      delete data.current.resetHandler;
+    }
   },
 };

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

@@ -12,6 +12,7 @@ export interface HotkeyConfig<T> {
 export interface HotkeysCoreDataRef {
   keydownHandler?: (e: KeyboardEvent) => void;
   keyupHandler?: (e: KeyboardEvent) => void;
+  resetHandler?: (e: FocusEvent) => void;
   pressedKeys: Set<string>;
 }
 
@@ -20,6 +21,9 @@ export type HotkeysCoreFeatureDef<T> = {
   config: {
     hotkeys?: CustomHotkeysConfig<T>;
     onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
+
+    /** Do not handle key inputs while an HTML input element is focused */
+    ignoreHotkeysOnInputs?: boolean;
   };
   treeInstance: {};
   itemInstance: {};

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/renaming/feature.ts

@@ -9,6 +9,7 @@ type InputEvent = {
 
 export const renamingFeature: FeatureImplementation = {
   key: "renaming",
+  overwrites: ["drag-and-drop"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     setRenamingItem: makeStateUpdater("renamingItem", tree),
@@ -72,6 +73,18 @@ export const renamingFeature: FeatureImplementation = {
 
     isRenaming: ({ tree, item }) =>
       item.getId() === tree.getState().renamingItem,
+
+    getProps: ({ prev, item }) => {
+      const isRenaming = item.isRenaming();
+      const prevProps = prev?.() ?? {};
+      return isRenaming
+        ? {
+            ...prevProps,
+            draggable: false,
+            onDragStart: () => {},
+          }
+        : prevProps;
+    },
   },
 
   hotkeys: {

package/src/features/renaming/renaming.spec.ts

@@ -93,6 +93,37 @@ describe("core-feature/renaming", () => {
       expect(setRenamingItem).toHaveBeenCalledWith(null);
     });
 
+    describe("dragging", async () => {
+      const suiteTree = await tree
+        .withFeatures({
+          key: "drag-and-drop",
+          itemInstance: {
+            getProps: ({ prev }: any) => ({
+              ...prev?.(),
+              draggable: true,
+              onDragStart: "initialOnDragStart",
+            }),
+          },
+        })
+        .createTestCaseTree();
+      suiteTree.resetBeforeEach();
+
+      it("sets draggable to undefined for items being renamed", () => {
+        const item = suiteTree.item("x1");
+        item.startRenaming();
+        const props = item.getProps();
+        expect(props.draggable).toBe(false);
+        expect(props.onDragStart).toStrictEqual(expect.any(Function));
+      });
+
+      it("retains draggable for items not being renamed", () => {
+        const item = suiteTree.item("x1");
+        const props = item.getProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBe("initialOnDragStart");
+      });
+    });
+
     describe("hotkeys", () => {
       it("starts renaming", () => {
         const setRenamingItem = tree.mockedHandler("setRenamingItem");

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()));