@headless-tree/core 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @headless-tree/core
 
+## 1.2.0
+
+### Minor Changes
+
+- 647a072: Fixed incorrect package.json exports configurations to proper ESM and CJS exports (#104)
+- 349d36e: change package.json["module"] to commonjs to fix inconsistent package definitiuons (#104)
+- e2faf37: Fixed an issue async data loaders that resolve data before the tree is mounted can cause the tree to not render at all
+
+  Note: When using the `createTree()` API directly instead of going through the React `useTree` API, an additional call
+  to `tree.rebuildItems()` afterwards will be necessary. This change is marked as minor release regardless, since `createTree` is
+  currently not a publically documented feature.
+
+### Patch Changes
+
+- 727c982: export makeStateUpdater from core package
+- c041a3f: expose `isOrderedDragTarget` as utility method to differentiate between ordered and unordered drag targets (#108)
+- 2887b0c: Added a `item.getKey()` utility method to use for generating React keys. For now, this just returns the item id, so no migration is needed from using `item.getId()` as React keys.
+- 4e79bc7: Fixed a bug where `feature.overwrites` is not always respected when features are sorted during tree initialization
+- 0669580: Fixed a bug where items that call `item.getProps` while being renamed, can be dragged while being renamed (#110)
+
+## 1.1.0
+
+### 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
+
+- 29b2c64: improved key-handling behavior for hotkeys while input elements are focused (#98)
+- da1e757: fixed a bug where alt-tabbing out of browser will break hotkeys feature
+- c283f52: add feature to allow async data invalidation without triggering rerenders with `invalidateItemData(optimistic: true)` (#95)
+- 29b2c64: added option to completely ignore hotkey events while input elements are focused (`ignoreHotkeysOnInput`) (#98)
+- cd5b27c: add position:absolute to default styles of getDragLineStyle()
+
 ## 1.0.1
 
 ### Patch Changes

package/lib/cjs/core/create-tree.js

@@ -14,6 +14,18 @@ const verifyFeatures = (features) => {
         }
     }
 };
+// Check all possible pairs and sort the array
+const exhaustiveSort = (arr, compareFn) => {
+    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) => (feature1, feature2) => {
     var _a, _b;
     if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
@@ -24,7 +36,7 @@ const compareFeatures = (originalOrder) => (feature1, feature2) => {
     }
     return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
 };
-const sortFeatures = (features = []) => features.sort(compareFeatures(features));
+const sortFeatures = (features = []) => exhaustiveSort(features, compareFeatures(features));
 const createTree = (initialConfig) => {
     var _a, _b, _c, _d;
     const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : build_static_instance_1.buildStaticInstance;
@@ -165,7 +177,6 @@ const createTree = (initialConfig) => {
         Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
     finalizeTree();
-    rebuildItemMeta();
     return treeInstance;
 };
 exports.createTree = createTree;

package/lib/cjs/features/async-data-loader/feature.js

@@ -11,6 +11,51 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.asyncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
+const getDataRef = (tree) => {
+    var _a, _b;
+    var _c, _d;
+    const dataRef = tree.getDataRef();
+    (_a = (_c = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_c.itemData = {});
+    (_b = (_d = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_d.childrenIds = {});
+    return dataRef;
+};
+const loadItemData = (tree, itemId) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const config = tree.getConfig();
+    const dataRef = getDataRef(tree);
+    const item = yield config.dataLoader.getItem(itemId);
+    dataRef.current.itemData[itemId] = item;
+    (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
+    tree.applySubStateUpdate("loadingItemData", (loadingItemData) => loadingItemData.filter((id) => id !== itemId));
+    return item;
+});
+const loadChildrenIds = (tree, itemId) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const config = tree.getConfig();
+    const dataRef = getDataRef(tree);
+    let childrenIds;
+    if ("getChildrenWithData" in config.dataLoader) {
+        const children = yield config.dataLoader.getChildrenWithData(itemId);
+        childrenIds = children.map((c) => c.id);
+        dataRef.current.childrenIds[itemId] = childrenIds;
+        children.forEach(({ id, data }) => {
+            var _a;
+            dataRef.current.itemData[id] = data;
+            (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, id, data);
+        });
+        (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
+        tree.rebuildTree();
+        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => loadingItemData.filter((id) => !childrenIds.includes(id)));
+    }
+    else {
+        childrenIds = yield config.dataLoader.getChildren(itemId);
+        dataRef.current.childrenIds[itemId] = childrenIds;
+        (_b = config.onLoadedChildren) === null || _b === void 0 ? void 0 : _b.call(config, itemId, childrenIds);
+        tree.rebuildTree();
+    }
+    tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => loadingItemChildrens.filter((id) => id !== itemId));
+    return childrenIds;
+});
 exports.asyncDataLoaderFeature = {
     key: "async-data-loader",
     getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
@@ -20,41 +65,20 @@ exports.asyncDataLoaderFeature = {
         loadingItemChildrens: "setLoadingItemChildrens",
     },
     treeInstance: {
-        waitForItemDataLoaded: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
-            tree.retrieveItemData(itemId);
-            if (!tree.getState().loadingItemData.includes(itemId)) {
-                return;
-            }
-            yield new Promise((resolve) => {
-                var _a, _b;
-                var _c, _d;
-                const dataRef = tree.getDataRef();
-                (_a = (_c = dataRef.current).awaitingItemDataLoading) !== null && _a !== void 0 ? _a : (_c.awaitingItemDataLoading = {});
-                (_b = (_d = dataRef.current.awaitingItemDataLoading)[itemId]) !== null && _b !== void 0 ? _b : (_d[itemId] = []);
-                dataRef.current.awaitingItemDataLoading[itemId].push(resolve);
-            });
+        waitForItemDataLoaded: ({ tree }, itemId) => tree.loadItemData(itemId),
+        waitForItemChildrenLoaded: ({ tree }, itemId) => tree.loadChildrenIds(itemId),
+        loadItemData: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
+            var _b;
+            return ((_b = getDataRef(tree).current.itemData[itemId]) !== null && _b !== void 0 ? _b : (yield loadItemData(tree, itemId)));
         }),
-        waitForItemChildrenLoaded: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
-            tree.retrieveChildrenIds(itemId);
-            if (!tree.getState().loadingItemChildrens.includes(itemId)) {
-                return;
-            }
-            yield new Promise((resolve) => {
-                var _a, _b;
-                var _c, _d;
-                const dataRef = tree.getDataRef();
-                (_a = (_c = dataRef.current).awaitingItemChildrensLoading) !== null && _a !== void 0 ? _a : (_c.awaitingItemChildrensLoading = {});
-                (_b = (_d = dataRef.current.awaitingItemChildrensLoading)[itemId]) !== null && _b !== void 0 ? _b : (_d[itemId] = []);
-                dataRef.current.awaitingItemChildrensLoading[itemId].push(resolve);
-            });
+        loadChildrenIds: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
+            var _b;
+            return ((_b = getDataRef(tree).current.childrenIds[itemId]) !== null && _b !== void 0 ? _b : (yield loadChildrenIds(tree, itemId)));
         }),
         retrieveItemData: ({ tree }, itemId) => {
-            var _a, _b, _c, _d;
-            var _e, _f;
+            var _a, _b;
             const config = tree.getConfig();
-            const dataRef = tree.getDataRef();
-            (_a = (_e = dataRef.current).itemData) !== null && _a !== void 0 ? _a : (_e.itemData = {});
-            (_b = (_f = dataRef.current).childrenIds) !== null && _b !== void 0 ? _b : (_f.childrenIds = {});
+            const dataRef = getDataRef(tree);
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
@@ -63,24 +87,12 @@ exports.asyncDataLoaderFeature = {
                     ...loadingItemData,
                     itemId,
                 ]);
-                (() => __awaiter(void 0, void 0, void 0, function* () {
-                    var _a, _b, _c;
-                    const item = yield config.dataLoader.getItem(itemId);
-                    dataRef.current.itemData[itemId] = item;
-                    (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId, item);
-                    tree.applySubStateUpdate("loadingItemData", (loadingItemData) => loadingItemData.filter((id) => id !== itemId));
-                    (_b = dataRef.current.awaitingItemDataLoading) === null || _b === void 0 ? void 0 : _b[itemId].forEach((cb) => cb());
-                    (_c = dataRef.current.awaitingItemDataLoading) === null || _c === void 0 ? true : delete _c[itemId];
-                }))();
+                loadItemData(tree, itemId);
             }
-            return (_d = (_c = config.createLoadingItemData) === null || _c === void 0 ? void 0 : _c.call(config)) !== null && _d !== void 0 ? _d : null;
+            return (_b = (_a = config.createLoadingItemData) === null || _a === void 0 ? void 0 : _a.call(config)) !== null && _b !== void 0 ? _b : null;
         },
         retrieveChildrenIds: ({ tree }, itemId) => {
-            var _a;
-            var _b;
-            const config = tree.getConfig();
-            const dataRef = tree.getDataRef();
-            (_a = (_b = dataRef.current).childrenIds) !== null && _a !== void 0 ? _a : (_b.childrenIds = {});
+            const dataRef = getDataRef(tree);
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
@@ -88,34 +100,32 @@ exports.asyncDataLoaderFeature = {
                 return [];
             }
             tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [...loadingItemChildrens, itemId]);
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                var _a, _b, _c, _d;
-                const childrenIds = yield config.dataLoader.getChildren(itemId);
-                dataRef.current.childrenIds[itemId] = childrenIds;
-                (_a = config.onLoadedChildren) === null || _a === void 0 ? void 0 : _a.call(config, itemId, childrenIds);
-                tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => loadingItemChildrens.filter((id) => id !== itemId));
-                tree.rebuildTree();
-                (_c = (_b = dataRef.current.awaitingItemChildrensLoading) === null || _b === void 0 ? void 0 : _b[itemId]) === null || _c === void 0 ? void 0 : _c.forEach((cb) => cb());
-                (_d = dataRef.current.awaitingItemChildrensLoading) === null || _d === void 0 ? true : delete _d[itemId];
-            }))();
+            loadChildrenIds(tree, itemId);
             return [];
         },
     },
     itemInstance: {
         isLoading: ({ tree, item }) => tree.getState().loadingItemData.includes(item.getItemMeta().itemId) ||
             tree.getState().loadingItemChildrens.includes(item.getItemMeta().itemId),
-        invalidateItemData: ({ tree, itemId }) => {
-            var _a;
-            const dataRef = tree.getDataRef();
-            (_a = dataRef.current.itemData) === null || _a === void 0 ? true : delete _a[itemId];
-            tree.retrieveItemData(itemId);
-        },
-        invalidateChildrenIds: ({ tree, itemId }) => {
-            var _a;
-            const dataRef = tree.getDataRef();
-            (_a = dataRef.current.childrenIds) === null || _a === void 0 ? true : delete _a[itemId];
-            tree.retrieveChildrenIds(itemId);
-        },
+        invalidateItemData: (_a, optimistic_1) => __awaiter(void 0, [_a, optimistic_1], void 0, function* ({ tree, itemId }, optimistic) {
+            var _b;
+            if (!optimistic) {
+                (_b = getDataRef(tree).current.itemData) === null || _b === void 0 ? true : delete _b[itemId];
+                tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+                    ...loadingItemData,
+                    itemId,
+                ]);
+            }
+            yield loadItemData(tree, itemId);
+        }),
+        invalidateChildrenIds: (_a, optimistic_1) => __awaiter(void 0, [_a, optimistic_1], void 0, function* ({ tree, itemId }, optimistic) {
+            var _b;
+            if (!optimistic) {
+                (_b = getDataRef(tree).current.childrenIds) === null || _b === void 0 ? true : delete _b[itemId];
+                tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [...loadingItemChildrens, itemId]);
+            }
+            yield loadChildrenIds(tree, itemId);
+        }),
         updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
             const dataRef = tree.getDataRef();
             dataRef.current.childrenIds[itemId] = childrenIds;

package/lib/cjs/features/async-data-loader/types.d.ts

@@ -1,11 +1,8 @@
 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;
 }
 /**
  * @category Async Data Loader/General
@@ -27,16 +24,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;
     };
     hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
 };
-export {};

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

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

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;
@@ -25,16 +40,24 @@ exports.hotkeysCoreFeature = {
     onTreeMount: (tree, element) => {
         const data = tree.getDataRef();
         const keydown = (e) => {
-            var _a, _b, _c, _d;
-            var _e;
-            const key = e.key.toLowerCase();
-            (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
-            const newMatch = !data.current.pressedKeys.has(key);
-            data.current.pressedKeys.add(key);
-            const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
+            var _a;
+            var _b;
+            const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
+            if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
+                return;
+            }
+            (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
+            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(e.code);
+            }
             if (!hotkeyName)
                 return;
-            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), (_b = tree.getConfig().hotkeys) === null || _b === void 0 ? void 0 : _b[hotkeyName]);
+            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), hotkeys === null || hotkeys === void 0 ? void 0 : hotkeys[hotkeyName]);
             if (!hotkeyConfig)
                 return;
             if (!hotkeyConfig.allowWhenInputFocused &&
@@ -45,21 +68,26 @@ exports.hotkeysCoreFeature = {
             if (hotkeyConfig.preventDefault)
                 e.preventDefault();
             hotkeyConfig.handler(e, tree);
-            (_d = (_c = tree.getConfig()).onTreeHotkey) === null || _d === void 0 ? void 0 : _d.call(_c, hotkeyName, e);
+            onTreeHotkey === null || onTreeHotkey === void 0 ? void 0 : onTreeHotkey(hotkeyName, e);
         };
         const keyup = (e) => {
             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();
         };
         // keyup is registered on document, because some hotkeys shift
         // the focus away from the tree (i.e. search)
         // 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) => {
         const data = tree.getDataRef();
@@ -71,5 +99,9 @@ exports.hotkeysCoreFeature = {
             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/lib/cjs/features/hotkeys-core/types.d.ts

@@ -10,6 +10,7 @@ export interface HotkeyConfig<T> {
 export interface HotkeysCoreDataRef {
     keydownHandler?: (e: KeyboardEvent) => void;
     keyupHandler?: (e: KeyboardEvent) => void;
+    resetHandler?: (e: FocusEvent) => void;
     pressedKeys: Set<string>;
 }
 export type HotkeysCoreFeatureDef<T> = {
@@ -17,6 +18,8 @@ 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/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/renaming/feature.js

@@ -4,6 +4,7 @@ exports.renamingFeature = void 0;
 const utils_1 = require("../../utils");
 exports.renamingFeature = {
     key: "renaming",
+    overwrites: ["drag-and-drop"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: (0, utils_1.makeStateUpdater)("renamingItem", tree), setRenamingValue: (0, utils_1.makeStateUpdater)("renamingValue", tree), canRename: () => true }, defaultConfig)),
     stateHandlerNames: {
         renamingItem: "setRenamingItem",
@@ -50,6 +51,13 @@ exports.renamingFeature = {
         }),
         canRename: ({ tree, item }) => { var _a, _b, _c; return (_c = (_b = (_a = tree.getConfig()).canRename) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true; },
         isRenaming: ({ tree, item }) => item.getId() === tree.getState().renamingItem,
+        getProps: ({ prev, item }) => {
+            var _a;
+            const isRenaming = item.isRenaming();
+            const prevProps = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            return isRenaming
+                ? Object.assign(Object.assign({}, prevProps), { draggable: false, onDragStart: () => { } }) : prevProps;
+        },
     },
     hotkeys: {
         renameItem: {

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/cjs/features/sync-data-loader/feature.js

@@ -13,6 +13,12 @@ exports.syncDataLoaderFeature = void 0;
 const utils_1 = require("../../utils");
 const errors_1 = require("../../utilities/errors");
 const promiseErrorMessage = "sync dataLoader returned promise";
+const unpromise = (data) => {
+    if (!data || (typeof data === "object" && "then" in data)) {
+        throw (0, errors_1.throwError)(promiseErrorMessage);
+    }
+    return data;
+};
 exports.syncDataLoaderFeature = {
     key: "sync-data-loader",
     getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
@@ -25,19 +31,17 @@ exports.syncDataLoaderFeature = {
         waitForItemDataLoaded: () => __awaiter(void 0, void 0, void 0, function* () { }),
         waitForItemChildrenLoaded: () => __awaiter(void 0, void 0, void 0, function* () { }),
         retrieveItemData: ({ tree }, itemId) => {
-            const data = tree.getConfig().dataLoader.getItem(itemId);
-            if (typeof data === "object" && "then" in data) {
-                throw (0, errors_1.throwError)(promiseErrorMessage);
-            }
-            return data;
+            return unpromise(tree.getConfig().dataLoader.getItem(itemId));
         },
         retrieveChildrenIds: ({ tree }, itemId) => {
-            const data = tree.getConfig().dataLoader.getChildren(itemId);
-            if (typeof data === "object" && "then" in data) {
-                throw (0, errors_1.throwError)(promiseErrorMessage);
+            const { dataLoader } = tree.getConfig();
+            if ("getChildren" in dataLoader) {
+                return unpromise(dataLoader.getChildren(itemId));
             }
-            return data;
+            return unpromise(dataLoader.getChildrenWithData(itemId)).map((c) => c.data);
         },
+        loadItemData: ({ tree }, itemId) => tree.retrieveItemData(itemId),
+        loadChildrenIds: ({ tree }, itemId) => tree.retrieveChildrenIds(itemId),
     },
     itemInstance: {
         isLoading: () => false,

package/lib/cjs/features/sync-data-loader/types.d.ts

@@ -1,7 +1,16 @@
-export interface TreeDataLoader<T> {
+export type TreeDataLoader<T> = {
     getItem: (itemId: string) => T | Promise<T>;
     getChildren: (itemId: string) => string[] | Promise<string[]>;
-}
+} | {
+    getItem: (itemId: string) => T | Promise<T>;
+    getChildrenWithData: (itemId: string) => {
+        id: string;
+        data: T;
+    }[] | Promise<{
+        id: string;
+        data: T;
+    }[]>;
+};
 export type SyncDataLoaderFeatureDef<T> = {
     state: {};
     config: {

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

@@ -100,6 +100,7 @@ exports.treeFeature = {
             (_d = item.getElement()) === null || _d === void 0 ? void 0 : _d.scrollIntoView(scrollIntoViewArg);
         }),
         getId: ({ itemId }) => itemId,
+        getKey: ({ itemId }) => itemId, // TODO apply to all stories to use
         getProps: ({ item, prev }) => {
             const itemMeta = item.getItemMeta();
             return Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { ref: item.registerElement, role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": "false", "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: (e) => {

package/lib/cjs/features/tree/types.d.ts

@@ -37,6 +37,7 @@ export type TreeFeatureDef<T> = {
     };
     itemInstance: {
         getId: () => string;
+        getKey: () => string;
         getProps: () => Record<string, any>;
         getItemName: () => string;
         getItemData: () => T;

package/lib/cjs/index.d.ts

@@ -27,3 +27,5 @@ export * from "./utilities/insert-items-at-target";
 export * from "./utilities/remove-items-from-parents";
 export * from "./core/build-proxified-instance";
 export * from "./core/build-static-instance";
+export { makeStateUpdater } from "./utils";
+export { isOrderedDragTarget } from "./features/drag-and-drop/utils";

package/lib/cjs/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOrderedDragTarget = exports.makeStateUpdater = void 0;
 __exportStar(require("./types/core"), exports);
 __exportStar(require("./core/create-tree"), exports);
 __exportStar(require("./features/tree/types"), exports);
@@ -42,3 +43,7 @@ __exportStar(require("./utilities/insert-items-at-target"), exports);
 __exportStar(require("./utilities/remove-items-from-parents"), exports);
 __exportStar(require("./core/build-proxified-instance"), exports);
 __exportStar(require("./core/build-static-instance"), exports);
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "makeStateUpdater", { enumerable: true, get: function () { return utils_1.makeStateUpdater; } });
+var utils_2 = require("./features/drag-and-drop/utils");
+Object.defineProperty(exports, "isOrderedDragTarget", { enumerable: true, get: function () { return utils_2.isOrderedDragTarget; } });

package/lib/cjs/test-utils/test-tree-expect.js

@@ -55,6 +55,7 @@ class TestTreeExpect {
             top: 0,
         });
         (0, vitest_1.expect)(this.tree.instance.getDragLineStyle(0, 0)).toEqual({
+            position: "absolute",
             left: `${indent * 20}px`,
             pointerEvents: "none",
             top: "0px",

package/lib/cjs/test-utils/test-tree.js

@@ -34,6 +34,7 @@ class TestTree {
     get instance() {
         if (!this.treeInstance) {
             this.treeInstance = (0, create_tree_1.createTree)(this.config);
+            this.treeInstance.rebuildTree();
         }
         return this.treeInstance;
     }