@headless-tree/core 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @headless-tree/core
 
+## 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
+
+- c9f9932: fixed tree.focusNextItem() and tree.focusPreviousItem() throwing if no item is currently focused
+- 6ed84b4: recursive item references are filtered out when rendering (#89)
+- 4bef2f2: fixed a bug where hotkeys involving shift may not work properly depending on the order of shift and other key inputs (#98)
+
 ## 1.0.0
 
 ### Minor Changes

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.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;
-            (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
-            const newMatch = !data.current.pressedKeys.has(e.key);
-            data.current.pressedKeys.add(e.key);
-            console.log("HOTKEYS", data.current.pressedKeys);
-            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);
+            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/selection/feature.js

@@ -28,9 +28,9 @@ exports.selectionFeature = {
             const { selectedItems } = tree.getState();
             tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
         },
-        isSelected: ({ tree, item }) => {
+        isSelected: ({ tree, itemId }) => {
             const { selectedItems } = tree.getState();
-            return selectedItems.includes(item.getItemMeta().itemId);
+            return selectedItems.includes(itemId);
         },
         selectUpTo: ({ tree, item }, ctrl) => {
             const indexA = item.getItemMeta().index;
@@ -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

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.treeFeature = void 0;
 const utils_1 = require("../../utils");
+const errors_1 = require("../../utilities/errors");
 exports.treeFeature = {
     key: "tree",
     getInitialState: (initialState) => (Object.assign({ expandedItems: [], focusedItem: null }, initialState)),
@@ -25,13 +26,17 @@ exports.treeFeature = {
             const { expandedItems } = tree.getState();
             const flatItems = [];
             const expandedItemsSet = new Set(expandedItems); // TODO support setting state expandedItems as set instead of array
-            const recursiveAdd = (itemId, parentId, level, setSize, posInSet) => {
+            const recursiveAdd = (itemId, path, level, setSize, posInSet) => {
                 var _a;
+                if (path.includes(itemId)) {
+                    (0, errors_1.logWarning)(`Circular reference for ${path.join(".")}`);
+                    return;
+                }
                 flatItems.push({
                     itemId,
                     level,
                     index: flatItems.length,
-                    parentId,
+                    parentId: path.at(-1),
                     setSize,
                     posInSet,
                 });
@@ -39,14 +44,14 @@ exports.treeFeature = {
                     const children = (_a = tree.retrieveChildrenIds(itemId)) !== null && _a !== void 0 ? _a : [];
                     let i = 0;
                     for (const childId of children) {
-                        recursiveAdd(childId, itemId, level + 1, children.length, i++);
+                        recursiveAdd(childId, path.concat(itemId), level + 1, children.length, i++);
                     }
                 }
             };
             const children = tree.retrieveChildrenIds(rootItemId);
             let i = 0;
             for (const itemId of children) {
-                recursiveAdd(itemId, rootItemId, 0, children.length, i++);
+                recursiveAdd(itemId, [rootItemId], 0, children.length, i++);
             }
             return flatItems;
         },
@@ -56,14 +61,18 @@ exports.treeFeature = {
         },
         focusNextItem: ({ tree }) => {
             var _a;
-            const { index } = tree.getFocusedItem().getItemMeta();
-            const nextIndex = Math.min(index + 1, tree.getItems().length - 1);
+            const focused = tree.getFocusedItem().getItemMeta();
+            if (!focused)
+                return;
+            const nextIndex = Math.min(focused.index + 1, tree.getItems().length - 1);
             (_a = tree.getItems()[nextIndex]) === null || _a === void 0 ? void 0 : _a.setFocused();
         },
         focusPreviousItem: ({ tree }) => {
             var _a;
-            const { index } = tree.getFocusedItem().getItemMeta();
-            const nextIndex = Math.max(index - 1, 0);
+            const focused = tree.getFocusedItem().getItemMeta();
+            if (!focused)
+                return;
+            const nextIndex = Math.max(focused.index - 1, 0);
             (_a = tree.getItems()[nextIndex]) === null || _a === void 0 ? void 0 : _a.setFocused();
         },
         updateDomFocus: ({ tree }) => {

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/utilities/errors.d.ts

@@ -1 +1,2 @@
 export declare const throwError: (message: string) => Error;
+export declare const logWarning: (message: string) => void;

package/lib/cjs/utilities/errors.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.throwError = void 0;
-const throwError = (message) => Error(`Headless Tree: ${message}`);
+exports.logWarning = exports.throwError = void 0;
+const prefix = "Headless Tree: ";
+const throwError = (message) => Error(prefix + message);
 exports.throwError = throwError;
+// eslint-disable-next-line no-console
+const logWarning = (message) => console.warn(prefix + message);
+exports.logWarning = logWarning;