@headless-tree/core 1.0.1 → 1.1.0

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/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/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/package.json

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

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

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