@headless-tree/core 1.0.1 → 1.2.0

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

@@ -11,6 +11,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))) {
@@ -21,7 +33,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));
 export const createTree = (initialConfig) => {
     var _a, _b, _c, _d;
     const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : buildStaticInstance;
@@ -162,6 +174,5 @@ export const createTree = (initialConfig) => {
         Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
     finalizeTree();
-    rebuildItemMeta();
     return treeInstance;
 };

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

@@ -8,6 +8,51 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { makeStateUpdater } from "../../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;
+});
 export const asyncDataLoaderFeature = {
     key: "async-data-loader",
     getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
@@ -17,41 +62,20 @@ export const 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];
             }
@@ -60,24 +84,12 @@ export const 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];
             }
@@ -85,34 +97,32 @@ export const 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/esm/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/esm/features/drag-and-drop/feature.js

@@ -57,6 +57,7 @@ export const 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/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;
@@ -22,16 +37,24 @@ export const 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 &&
@@ -42,21 +65,26 @@ export const 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();
@@ -68,5 +96,9 @@ export const 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/esm/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/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/renaming/feature.js

@@ -1,6 +1,7 @@
 import { makeStateUpdater } from "../../utils";
 export const renamingFeature = {
     key: "renaming",
+    overwrites: ["drag-and-drop"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: makeStateUpdater("renamingItem", tree), setRenamingValue: makeStateUpdater("renamingValue", tree), canRename: () => true }, defaultConfig)),
     stateHandlerNames: {
         renamingItem: "setRenamingItem",
@@ -47,6 +48,13 @@ export const 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/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/lib/esm/features/sync-data-loader/feature.js

@@ -10,6 +10,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { makeStateUpdater } from "../../utils";
 import { throwError } from "../../utilities/errors";
 const promiseErrorMessage = "sync dataLoader returned promise";
+const unpromise = (data) => {
+    if (!data || (typeof data === "object" && "then" in data)) {
+        throw throwError(promiseErrorMessage);
+    }
+    return data;
+};
 export const syncDataLoaderFeature = {
     key: "sync-data-loader",
     getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
@@ -22,19 +28,17 @@ export const 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 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 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/esm/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/esm/features/tree/feature.js

@@ -97,6 +97,7 @@ export const 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/esm/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/esm/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/esm/index.js

@@ -26,3 +26,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/esm/test-utils/test-tree-expect.js

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

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

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

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@headless-tree/core",
-  "version": "1.0.1",
-  "type": "module",
+  "version": "1.2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
+  "exports": {
+    "types": "./lib/esm/index.d.ts",
+    "import": "./lib/esm/index.js",
+    "default": "./lib/cjs/index.js"
+  },
   "sideEffects": false,
   "scripts": {
     "build:cjs": "tsc -m commonjs --outDir lib/cjs",
@@ -18,6 +22,7 @@
     "directory": "packages/core"
   },
   "author": "Lukas Bach <npm@lukasbach.com>",
+  "funding": "https://github.com/sponsors/lukasbach",
   "license": "MIT",
   "devDependencies": {
     "jsdom": "^26.0.0",

package/readme.md

@@ -1,4 +1,4 @@
-![Headless Tree](./packages/docs/static/img/banner-github.png)
+![Headless Tree](https://github.com/lukasbach/headless-tree/raw/main/packages/docs/static/img/banner-github.png)
 
 [![Documentation](https://img.shields.io/badge/docs-1e1f22?style=flat)](https://headless-tree.lukasbach.com/)
 [![Chat on Discord](https://img.shields.io/badge/discord-4c57d9?style=flat&logo=discord&logoColor=ffffff)](https://discord.gg/KuZ6EezzVw)
@@ -139,7 +139,7 @@ Then, render your tree based on the tree instance returned from the hook:
       style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}
     >
       <div
-        className={cx("treeitem", {
+        className={cn("treeitem", {
           focused: item.isFocused(),
           expanded: item.isExpanded(),
           selected: item.isSelected(),