@headless-tree/core 0.0.0-20250508233916 → 0.0.0-20250509212452

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

@@ -8,6 +8,58 @@ 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, _b, _c;
+    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));
+    (_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];
+    return item;
+});
+const loadChildrenIds = (tree, itemId) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e;
+    const config = tree.getConfig();
+    const dataRef = getDataRef(tree);
+    let childrenIds;
+    // TODO is folder check?
+    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, _b, _c;
+            dataRef.current.itemData[id] = data;
+            (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, id, data);
+            (_b = dataRef.current.awaitingItemDataLoading) === null || _b === void 0 ? void 0 : _b[id].forEach((cb) => cb());
+            (_c = dataRef.current.awaitingItemDataLoading) === null || _c === void 0 ? true : delete _c[id];
+        });
+        (_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));
+    (_d = (_c = dataRef.current.awaitingItemChildrensLoading) === null || _c === void 0 ? void 0 : _c[itemId]) === null || _d === void 0 ? void 0 : _d.forEach((cb) => cb());
+    (_e = dataRef.current.awaitingItemChildrensLoading) === null || _e === void 0 ? true : delete _e[itemId];
+    return childrenIds;
+});
 export const asyncDataLoaderFeature = {
     key: "async-data-loader",
     getInitialState: (initialState) => (Object.assign({ loadingItemData: [], loadingItemChildrens: [] }, initialState)),
@@ -32,6 +84,7 @@ export const asyncDataLoaderFeature = {
             });
         }),
         waitForItemChildrenLoaded: (_a, itemId_1) => __awaiter(void 0, [_a, itemId_1], void 0, function* ({ tree }, itemId) {
+            // TODO replace inner implementation with load() fns
             tree.retrieveChildrenIds(itemId);
             if (!tree.getState().loadingItemChildrens.includes(itemId)) {
                 return;
@@ -45,92 +98,65 @@ export const asyncDataLoaderFeature = {
                 dataRef.current.awaitingItemChildrensLoading[itemId].push(resolve);
             });
         }),
-        retrieveItemData: ({ tree }, itemId) => {
-            var _a, _b, _c, _d;
-            var _e, _f;
+        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)));
+        }),
+        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, skipFetch = false) => {
+            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];
             }
-            if (!tree.getState().loadingItemData.includes(itemId)) {
+            if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
                 tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
                     ...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, _b;
-            var _c, _d;
-            const config = tree.getConfig();
-            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 = {});
+        retrieveChildrenIds: ({ tree }, itemId, skipFetch = false) => {
+            const dataRef = getDataRef(tree);
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
-            if (tree.getState().loadingItemChildrens.includes(itemId)) {
+            if (tree.getState().loadingItemChildrens.includes(itemId) || skipFetch) {
                 return [];
             }
             tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [...loadingItemChildrens, itemId]);
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                var _a, _b, _c, _d, _e;
-                if ("getChildrenWithData" in config.dataLoader) {
-                    const children = yield config.dataLoader.getChildrenWithData(itemId);
-                    const childrenIds = children.map((c) => c.id);
-                    dataRef.current.childrenIds[itemId] = childrenIds;
-                    children.forEach(({ id, data }) => {
-                        var _a, _b, _c;
-                        dataRef.current.itemData[id] = data;
-                        (_a = config.onLoadedItem) === null || _a === void 0 ? void 0 : _a.call(config, id, data);
-                        (_b = dataRef.current.awaitingItemDataLoading) === null || _b === void 0 ? void 0 : _b[id].forEach((cb) => cb());
-                        (_c = dataRef.current.awaitingItemDataLoading) === null || _c === void 0 ? true : delete _c[id];
-                    });
-                    (_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 {
-                    const 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));
-                (_d = (_c = dataRef.current.awaitingItemChildrensLoading) === null || _c === void 0 ? void 0 : _c[itemId]) === null || _d === void 0 ? void 0 : _d.forEach((cb) => cb());
-                (_e = dataRef.current.awaitingItemChildrensLoading) === null || _e === void 0 ? true : delete _e[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

@@ -27,13 +27,22 @@ export type AsyncDataLoaderFeatureDef<T> = {
         onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
     };
     treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
+        /** @deprecated use loadItemData instead */
         waitForItemDataLoaded: (itemId: string) => Promise<void>;
+        /** @deprecated use loadChildrenIds instead */
         waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
+        loadItemData: (itemId: string) => Promise<T>;
+        loadChildrenIds: (itemId: string) => Promise<string[]>;
     };
     itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
-        /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
-        invalidateItemData: () => void;
-        invalidateChildrenIds: () => void;
+        /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible
+         * @param optimistic If true, the item will not trigger a state update on `loadingItemData`, and
+         * the tree will continue to display the old data until the new data has loaded. */
+        invalidateItemData: (optimistic?: boolean) => Promise<void>;
+        /** Invalidate fetched children ids for item, and triggers a refetch and subsequent rerender if the item is visible
+         * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
+         * the tree will continue to display the old data until the new data has loaded. */
+        invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
         updateCachedChildrenIds: (childrenIds: string[]) => void;
         isLoading: () => boolean;
     };

package/lib/esm/features/checkboxes/feature.d.ts

@@ -0,0 +1,2 @@
+import { FeatureImplementation } from "../../types/core";
+export declare const checkboxesFeature: FeatureImplementation;

package/lib/esm/features/checkboxes/feature.js

@@ -0,0 +1,125 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { makeStateUpdater } from "../../utils";
+import { CheckedState } from "./types";
+/*
+ * Cases for checking:
+ * - Check an unchecked item in an unchecked or indeterminate folder
+ * - Check an explicitly unchecked item in a checked folder
+ * - Check an unchecked folder in an unchecked or indeterminate folder
+ *
+ * Cases for unchecking:
+ * - Uncheck a checked item in an indeterminate folder
+ * - Uncheck an explicitly unchecked item in an checked folder
+ */
+const fetchAllDescendants = (tree, itemId) => __awaiter(void 0, void 0, void 0, function* () {
+    const children = yield tree.loadChildrenIds(itemId);
+    return [
+        itemId,
+        ...(yield Promise.all(children.map((child) => fetchAllDescendants(tree, child)))).flat(),
+    ];
+});
+const getAllLoadedDescendants = (tree, itemId) => {
+    const children = tree.retrieveChildrenIds(itemId, true);
+    return [
+        itemId,
+        ...children.map((child) => getAllLoadedDescendants(tree, child)).flat(),
+    ];
+};
+export const checkboxesFeature = {
+    key: "checkboxes",
+    overwrites: ["selection"],
+    getInitialState: (initialState) => (Object.assign({ checkedItems: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setCheckedItems: makeStateUpdater("checkedItems", tree) }, defaultConfig)),
+    stateHandlerNames: {
+        checkedItems: "setCheckedItems",
+    },
+    treeInstance: {
+        setCheckedItems: ({ tree }, checkedItems) => {
+            tree.applySubStateUpdate("checkedItems", checkedItems);
+        },
+    },
+    itemInstance: {
+        getCheckboxProps: ({ item, itemId }) => {
+            const checkedState = item.getCheckedState();
+            // console.log("prop", itemId, checkedState);
+            return {
+                onChange: item.toggleCheckedState,
+                checked: checkedState === CheckedState.Checked,
+                ref: (r) => {
+                    if (r) {
+                        // console.log("ref", itemId, checkedState);
+                        r.indeterminate = checkedState === CheckedState.Indeterminate;
+                    }
+                },
+            };
+        },
+        toggleCheckedState: (_a) => __awaiter(void 0, [_a], void 0, function* ({ item }) {
+            if (item.getCheckedState() === CheckedState.Checked) {
+                yield item.setUnchecked();
+            }
+            else {
+                yield item.setChecked();
+            }
+        }),
+        getCheckedState: ({ item, tree, itemId }) => {
+            // TODO checkedcache
+            const { checkedItems } = tree.getState();
+            if (checkedItems.includes(itemId)) {
+                return CheckedState.Checked;
+            }
+            if (item.isFolder()) {
+                const descendants = getAllLoadedDescendants(tree, itemId);
+                console.log("descendants of ", itemId, descendants);
+                if (descendants.every((d) => checkedItems.includes(d))) {
+                    return CheckedState.Checked;
+                }
+                if (descendants.some((d) => checkedItems.includes(d))) {
+                    return CheckedState.Indeterminate;
+                }
+            }
+            // if (
+            //   item.isFolder() &&
+            //   checkedItems.some((checkedItem) =>
+            //     tree.getItemInstance(checkedItem)?.isDescendentOf(itemId),
+            //   )
+            // ) {
+            //   // TODO for every descendent, not every checked item
+            //   return checkedItems.every((checkedItem) =>
+            //     tree.getItemInstance(checkedItem)?.isDescendentOf(itemId),
+            //   )
+            //     ? CheckedState.Checked
+            //     : CheckedState.Indeterminate;
+            // }
+            return CheckedState.Unchecked;
+        },
+        setChecked: (_a) => __awaiter(void 0, [_a], void 0, function* ({ item, tree, itemId }) {
+            if (!item.isFolder() || tree.getConfig().canCheckFolders) {
+                tree.applySubStateUpdate("checkedItems", (items) => [...items, itemId]);
+            }
+            else {
+                const descendants = yield fetchAllDescendants(tree, itemId);
+                tree.applySubStateUpdate("checkedItems", (items) => [
+                    ...items,
+                    ...descendants,
+                ]);
+            }
+        }),
+        setUnchecked: (_a) => __awaiter(void 0, [_a], void 0, function* ({ item, tree, itemId }) {
+            if (!item.isFolder() || tree.getConfig().canCheckFolders) {
+                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => id !== itemId));
+            }
+            else {
+                yield tree.loadChildrenIds(itemId);
+                item.getChildren().forEach((item) => item.setUnchecked());
+            }
+        }),
+    },
+};

package/lib/esm/features/checkboxes/types.d.ts

@@ -0,0 +1,26 @@
+import { SetStateFn } from "../../types/core";
+export declare enum CheckedState {
+    Checked = "checked",
+    Unchecked = "unchecked",
+    Indeterminate = "indeterminate"
+}
+export type CheckboxesFeatureDef<T> = {
+    state: {
+        checkedItems: string[];
+    };
+    config: {
+        setCheckedItems?: SetStateFn<string[]>;
+        canCheckFolders?: boolean;
+    };
+    treeInstance: {
+        setCheckedItems: (checkedItems: string[]) => void;
+    };
+    itemInstance: {
+        setChecked: () => Promise<void>;
+        setUnchecked: () => Promise<void>;
+        toggleCheckedState: () => Promise<void>;
+        getCheckedState: () => CheckedState;
+        getCheckboxProps: () => Record<string, any>;
+    };
+    hotkeys: never;
+};

package/lib/esm/features/checkboxes/types.js

@@ -0,0 +1,6 @@
+export var CheckedState;
+(function (CheckedState) {
+    CheckedState["Checked"] = "checked";
+    CheckedState["Unchecked"] = "unchecked";
+    CheckedState["Indeterminate"] = "indeterminate";
+})(CheckedState || (CheckedState = {}));

package/lib/esm/features/main/types.d.ts

@@ -17,6 +17,8 @@ export type MainFeatureDef<T = any> = {
     treeInstance: {
         /** @internal */
         applySubStateUpdate: <K extends keyof TreeState<any>>(stateName: K, updater: Updater<TreeState<T>[K]>) => void;
+        /** @internal */
+        buildItemInstance: (itemId: string) => ItemInstance<T>;
         setState: SetStateFn<TreeState<T>>;
         getState: () => TreeState<T>;
         setConfig: SetStateFn<TreeConfig<T>>;

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

@@ -37,6 +37,8 @@ export const syncDataLoaderFeature = {
             }
             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

@@ -18,8 +18,8 @@ export type SyncDataLoaderFeatureDef<T> = {
         dataLoader: TreeDataLoader<T>;
     };
     treeInstance: {
-        retrieveItemData: (itemId: string) => T;
-        retrieveChildrenIds: (itemId: string) => string[];
+        retrieveItemData: (itemId: string, skipFetch?: boolean) => T;
+        retrieveChildrenIds: (itemId: string, skipFetch?: boolean) => string[];
     };
     itemInstance: {
         isLoading: () => boolean;

package/lib/esm/index.d.ts

@@ -5,6 +5,7 @@ export { MainFeatureDef, InstanceBuilder } from "./features/main/types";
 export * from "./features/drag-and-drop/types";
 export * from "./features/keyboard-drag-and-drop/types";
 export * from "./features/selection/types";
+export * from "./features/checkboxes/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
 export * from "./features/hotkeys-core/types";
@@ -13,6 +14,7 @@ export * from "./features/renaming/types";
 export * from "./features/expand-all/types";
 export * from "./features/prop-memoization/types";
 export * from "./features/selection/feature";
+export * from "./features/checkboxes/feature";
 export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";

package/lib/esm/index.js

@@ -4,6 +4,7 @@ export * from "./features/tree/types";
 export * from "./features/drag-and-drop/types";
 export * from "./features/keyboard-drag-and-drop/types";
 export * from "./features/selection/types";
+export * from "./features/checkboxes/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
 export * from "./features/hotkeys-core/types";
@@ -12,6 +13,7 @@ export * from "./features/renaming/types";
 export * from "./features/expand-all/types";
 export * from "./features/prop-memoization/types";
 export * from "./features/selection/feature";
+export * from "./features/checkboxes/feature";
 export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";

package/lib/esm/types/core.d.ts

@@ -10,6 +10,7 @@ import { RenamingFeatureDef } from "../features/renaming/types";
 import { ExpandAllFeatureDef } from "../features/expand-all/types";
 import { PropMemoizationFeatureDef } from "../features/prop-memoization/types";
 import { KeyboardDragAndDropFeatureDef } from "../features/keyboard-drag-and-drop/types";
+import { CheckboxesFeatureDef } from "../features/checkboxes/types";
 export type Updater<T> = T | ((old: T) => T);
 export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
 export type FeatureDef = {
@@ -34,7 +35,7 @@ type MergedFeatures<F extends FeatureDef> = {
     itemInstance: UnionToIntersection<F["itemInstance"]>;
     hotkeys: F["hotkeys"];
 };
-export type RegisteredFeatures<T> = MainFeatureDef<T> | TreeFeatureDef<T> | SelectionFeatureDef<T> | DragAndDropFeatureDef<T> | KeyboardDragAndDropFeatureDef<T> | HotkeysCoreFeatureDef<T> | SyncDataLoaderFeatureDef<T> | AsyncDataLoaderFeatureDef<T> | SearchFeatureDef<T> | RenamingFeatureDef<T> | ExpandAllFeatureDef | PropMemoizationFeatureDef;
+export type RegisteredFeatures<T> = MainFeatureDef<T> | TreeFeatureDef<T> | SelectionFeatureDef<T> | CheckboxesFeatureDef<T> | DragAndDropFeatureDef<T> | KeyboardDragAndDropFeatureDef<T> | HotkeysCoreFeatureDef<T> | SyncDataLoaderFeatureDef<T> | AsyncDataLoaderFeatureDef<T> | SearchFeatureDef<T> | RenamingFeatureDef<T> | ExpandAllFeatureDef | PropMemoizationFeatureDef;
 type TreeStateType<T> = MergedFeatures<RegisteredFeatures<T>>["state"];
 export interface TreeState<T> extends TreeStateType<T> {
 }

package/package.json

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

package/src/core/create-tree.ts

@@ -151,6 +151,19 @@ export const createTree = <T>(
         ] as Function;
         externalStateSetter?.(state[stateName]);
       },
+      buildItemInstance: ({}, itemId) => {
+        const [instance, finalizeInstance] = buildInstance(
+          features,
+          "itemInstance",
+          (instance) => ({
+            item: instance,
+            tree: treeInstance,
+            itemId,
+          }),
+        );
+        finalizeInstance();
+        return instance;
+      },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
         rebuildItemMeta();

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,6 +132,34 @@ 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", () => {