@headless-tree/core 1.4.0 → 1.5.1

package/dist/index.mjs

@@ -259,7 +259,7 @@ var treeFeature = {
       );
     },
     isFocused: ({ tree, item, itemId }) => tree.getState().focusedItem === itemId || tree.getState().focusedItem === null && item.getItemMeta().index === 0,
-    isFolder: ({ tree, item }) => item.getItemMeta().level === -1 || tree.getConfig().isItemFolder(item),
+    isFolder: ({ tree, item, itemId }) => itemId === tree.getConfig().rootItemId || tree.getConfig().isItemFolder(item),
     getItemName: ({ tree, item }) => {
       const config = tree.getConfig();
       return config.getItemName(item);
@@ -441,6 +441,7 @@ var createTree = (initialConfig) => {
   );
   let treeElement;
   const treeDataRef = { current: {} };
+  let rebuildScheduled = false;
   const itemInstancesMap = {};
   let itemInstances = [];
   const itemElementsMap = {};
@@ -484,6 +485,7 @@ var createTree = (initialConfig) => {
         itemInstances.push(itemInstancesMap[item.itemId]);
       }
     }
+    rebuildScheduled = false;
   };
   const eachFeature = (fn) => {
     for (const feature of additionalFeatures) {
@@ -498,16 +500,48 @@ var createTree = (initialConfig) => {
         var _a2;
         (_a2 = config.setState) == null ? void 0 : _a2.call(config, state);
       },
+      setMounted: ({}, isMounted) => {
+        var _a2;
+        const ref = treeDataRef.current;
+        ref.isMounted = isMounted;
+        if (isMounted) {
+          (_a2 = ref.waitingForMount) == null ? void 0 : _a2.forEach((cb) => cb());
+          ref.waitingForMount = [];
+        }
+      },
       applySubStateUpdate: ({}, stateName, updater) => {
-        state[stateName] = typeof updater === "function" ? updater(state[stateName]) : updater;
-        const externalStateSetter = config[stateHandlerNames[stateName]];
-        externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
+        var _a2;
+        const apply = () => {
+          state[stateName] = typeof updater === "function" ? updater(state[stateName]) : updater;
+          const externalStateSetter = config[stateHandlerNames[stateName]];
+          externalStateSetter == null ? void 0 : externalStateSetter(state[stateName]);
+        };
+        const ref = treeDataRef.current;
+        if (ref.isMounted) {
+          apply();
+        } else {
+          (_a2 = ref.waitingForMount) != null ? _a2 : ref.waitingForMount = [];
+          ref.waitingForMount.push(apply);
+        }
       },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
-        var _a2;
-        rebuildItemMeta();
-        (_a2 = config.setState) == null ? void 0 : _a2.call(config, state);
+        var _a2, _b2;
+        const ref = treeDataRef.current;
+        if (ref.isMounted) {
+          rebuildItemMeta();
+          (_a2 = config.setState) == null ? void 0 : _a2.call(config, state);
+        } else {
+          (_b2 = ref.waitingForMount) != null ? _b2 : ref.waitingForMount = [];
+          ref.waitingForMount.push(() => {
+            var _a3;
+            rebuildItemMeta();
+            (_a3 = config.setState) == null ? void 0 : _a3.call(config, state);
+          });
+        }
+      },
+      scheduleRebuildTree: () => {
+        rebuildScheduled = true;
       },
       getConfig: () => config,
       setConfig: (_, updater) => {
@@ -540,7 +574,10 @@ var createTree = (initialConfig) => {
         }
         return existingInstance;
       },
-      getItems: () => itemInstances,
+      getItems: () => {
+        if (rebuildScheduled) rebuildItemMeta();
+        return itemInstances;
+      },
       registerElement: ({}, element) => {
         if (treeElement === element) {
           return;
@@ -773,33 +810,60 @@ var getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
   if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
     return [itemId];
   }
-  const descendants = tree.retrieveChildrenIds(itemId).map((child) => getAllLoadedDescendants(tree, child, includeFolders)).flat();
+  const descendants = tree.retrieveChildrenIds(itemId, true).map((child) => getAllLoadedDescendants(tree, child, includeFolders)).flat();
   return includeFolders ? [itemId, ...descendants] : descendants;
 };
+var getAllDescendants = (tree, itemId, includeFolders = false) => __async(null, null, function* () {
+  yield tree.loadItemData(itemId);
+  if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
+    return [itemId];
+  }
+  const childrenIds = yield tree.loadChildrenIds(itemId);
+  const descendants = (yield Promise.all(
+    childrenIds.map(
+      (child) => getAllDescendants(tree, child, includeFolders)
+    )
+  )).flat();
+  return includeFolders ? [itemId, ...descendants] : descendants;
+});
+var withLoadingState = (tree, itemId, callback) => __async(null, null, function* () {
+  tree.applySubStateUpdate("loadingCheckPropagationItems", (items) => [
+    ...items,
+    itemId
+  ]);
+  try {
+    yield callback();
+  } finally {
+    tree.applySubStateUpdate(
+      "loadingCheckPropagationItems",
+      (items) => items.filter((id) => id !== itemId)
+    );
+  }
+});
 var checkboxesFeature = {
   key: "checkboxes",
   overwrites: ["selection"],
   getInitialState: (initialState) => __spreadValues({
-    checkedItems: []
+    checkedItems: [],
+    loadingCheckPropagationItems: []
   }, initialState),
   getDefaultConfig: (defaultConfig, tree) => {
-    var _a, _b, _c;
-    const hasAsyncLoader = (_a = defaultConfig.features) == null ? void 0 : _a.some(
-      (f) => f.key === "async-data-loader"
-    );
-    if (hasAsyncLoader && defaultConfig.propagateCheckedState) {
-      throwError(`propagateCheckedState not supported with async trees`);
-    }
-    const propagateCheckedState = (_b = defaultConfig.propagateCheckedState) != null ? _b : !hasAsyncLoader;
-    const canCheckFolders = (_c = defaultConfig.canCheckFolders) != null ? _c : !propagateCheckedState;
+    var _a, _b;
+    const propagateCheckedState = (_a = defaultConfig.propagateCheckedState) != null ? _a : true;
+    const canCheckFolders = (_b = defaultConfig.canCheckFolders) != null ? _b : !propagateCheckedState;
     return __spreadValues({
       setCheckedItems: makeStateUpdater("checkedItems", tree),
+      setLoadingCheckPropagationItems: makeStateUpdater(
+        "loadingCheckPropagationItems",
+        tree
+      ),
       propagateCheckedState,
       canCheckFolders
     }, defaultConfig);
   },
   stateHandlerNames: {
-    checkedItems: "setCheckedItems"
+    checkedItems: "setCheckedItems",
+    loadingCheckPropagationItems: "setLoadingCheckPropagationItems"
   },
   treeInstance: {
     setCheckedItems: ({ tree }, checkedItems) => {
@@ -819,13 +883,13 @@ var checkboxesFeature = {
         }
       };
     },
-    toggleCheckedState: ({ item }) => {
+    toggleCheckedState: (_0) => __async(null, [_0], function* ({ item }) {
       if (item.getCheckedState() === "checked" /* Checked */) {
-        item.setUnchecked();
+        yield item.setUnchecked();
       } else {
-        item.setChecked();
+        yield item.setChecked();
       }
-    },
+    }),
     getCheckedState: ({ item, tree }) => {
       const { checkedItems } = tree.getState();
       const { propagateCheckedState } = tree.getConfig();
@@ -835,6 +899,7 @@ var checkboxesFeature = {
       }
       if (item.isFolder() && propagateCheckedState) {
         const descendants = getAllLoadedDescendants(tree, itemId);
+        if (descendants.length === 0) return "unchecked" /* Unchecked */;
         if (descendants.every((d) => checkedItems.includes(d))) {
           return "checked" /* Checked */;
         }
@@ -844,36 +909,48 @@ var checkboxesFeature = {
       }
       return "unchecked" /* Unchecked */;
     },
-    setChecked: ({ item, tree, itemId }) => {
-      const { propagateCheckedState, canCheckFolders } = tree.getConfig();
-      if (item.isFolder() && propagateCheckedState) {
-        tree.applySubStateUpdate("checkedItems", (items) => [
-          ...items,
-          ...getAllLoadedDescendants(tree, itemId, canCheckFolders)
-        ]);
-      } else if (!item.isFolder() || canCheckFolders) {
-        tree.applySubStateUpdate("checkedItems", (items) => [...items, itemId]);
-      }
-    },
-    setUnchecked: ({ item, tree, itemId }) => {
-      const { propagateCheckedState, canCheckFolders } = tree.getConfig();
-      if (item.isFolder() && propagateCheckedState) {
-        const descendants = getAllLoadedDescendants(
-          tree,
-          itemId,
-          canCheckFolders
-        );
-        tree.applySubStateUpdate(
-          "checkedItems",
-          (items) => items.filter((id) => !descendants.includes(id) && id !== itemId)
-        );
-      } else {
-        tree.applySubStateUpdate(
-          "checkedItems",
-          (items) => items.filter((id) => id !== itemId)
-        );
-      }
-    }
+    setChecked: (_0) => __async(null, [_0], function* ({ item, tree, itemId }) {
+      yield withLoadingState(tree, itemId, () => __async(null, null, function* () {
+        const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+        if (item.isFolder() && propagateCheckedState) {
+          const descendants = yield getAllDescendants(
+            tree,
+            itemId,
+            canCheckFolders
+          );
+          tree.applySubStateUpdate("checkedItems", (items) => [
+            ...items,
+            ...descendants
+          ]);
+        } else if (!item.isFolder() || canCheckFolders) {
+          tree.applySubStateUpdate("checkedItems", (items) => [
+            ...items,
+            itemId
+          ]);
+        }
+      }));
+    }),
+    setUnchecked: (_0) => __async(null, [_0], function* ({ item, tree, itemId }) {
+      yield withLoadingState(tree, itemId, () => __async(null, null, function* () {
+        const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+        if (item.isFolder() && propagateCheckedState) {
+          const descendants = yield getAllDescendants(
+            tree,
+            itemId,
+            canCheckFolders
+          );
+          tree.applySubStateUpdate(
+            "checkedItems",
+            (items) => items.filter((id) => !descendants.includes(id) && id !== itemId)
+          );
+        } else {
+          tree.applySubStateUpdate(
+            "checkedItems",
+            (items) => items.filter((id) => id !== itemId)
+          );
+        }
+      }));
+    })
   }
 };
 
@@ -885,7 +962,9 @@ var specialKeys = {
   plus: /^(NumpadAdd|Plus)$/,
   minus: /^(NumpadSubtract|Minus)$/,
   control: /^(ControlLeft|ControlRight)$/,
-  shift: /^(ShiftLeft|ShiftRight)$/
+  shift: /^(ShiftLeft|ShiftRight)$/,
+  metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/,
+  enter: /^(Enter|NumpadEnter)$/
 };
 var testHotkeyMatch = (pressedKeys, tree, hotkey) => {
   const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
@@ -990,6 +1069,12 @@ var loadItemData = (tree, itemId) => __async(null, null, function* () {
   var _a;
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
+  if (!dataRef.current.itemData[itemId]) {
+    tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+      ...loadingItemData,
+      itemId
+    ]);
+  }
   const item = yield config.dataLoader.getItem(itemId);
   dataRef.current.itemData[itemId] = item;
   (_a = config.onLoadedItem) == null ? void 0 : _a.call(config, itemId, item);
@@ -1004,6 +1089,12 @@ var loadChildrenIds = (tree, itemId) => __async(null, null, function* () {
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
   let childrenIds;
+  if (!dataRef.current.childrenIds[itemId]) {
+    tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [
+      ...loadingItemChildrens,
+      itemId
+    ]);
+  }
   if ("getChildrenWithData" in config.dataLoader) {
     const children = yield config.dataLoader.getChildrenWithData(itemId);
     childrenIds = children.map((c) => c.id);
@@ -1064,11 +1155,7 @@ var asyncDataLoaderFeature = {
         return dataRef.current.itemData[itemId];
       }
       if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
-        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
-          ...loadingItemData,
-          itemId
-        ]);
-        loadItemData(tree, itemId);
+        setTimeout(() => loadItemData(tree, itemId));
       }
       return (_b = (_a = config.createLoadingItemData) == null ? void 0 : _a.call(config)) != null ? _b : null;
     },
@@ -1080,11 +1167,7 @@ var asyncDataLoaderFeature = {
       if (tree.getState().loadingItemChildrens.includes(itemId) || skipFetch) {
         return [];
       }
-      tree.applySubStateUpdate(
-        "loadingItemChildrens",
-        (loadingItemChildrens) => [...loadingItemChildrens, itemId]
-      );
-      loadChildrenIds(tree, itemId);
+      setTimeout(() => loadChildrenIds(tree, itemId));
       return [];
     }
   },
@@ -1094,10 +1177,6 @@ var asyncDataLoaderFeature = {
       var _a;
       if (!optimistic) {
         (_a = getDataRef(tree).current.itemData) == null ? true : delete _a[itemId];
-        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
-          ...loadingItemData,
-          itemId
-        ]);
       }
       yield loadItemData(tree, itemId);
     }),
@@ -1105,10 +1184,6 @@ var asyncDataLoaderFeature = {
       var _a;
       if (!optimistic) {
         (_a = getDataRef(tree).current.childrenIds) == null ? true : delete _a[itemId];
-        tree.applySubStateUpdate(
-          "loadingItemChildrens",
-          (loadingItemChildrens) => [...loadingItemChildrens, itemId]
-        );
       }
       yield loadChildrenIds(tree, itemId);
     }),
@@ -1560,6 +1635,10 @@ var dragAndDropFeature = {
       const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;
     },
+    isUnorderedDragTarget: ({ tree, item }) => {
+      const target = tree.getDragTarget();
+      return target ? !isOrderedDragTarget(target) && target.item.getId() === item.getId() : false;
+    },
     isDragTargetAbove: ({ tree, item }) => {
       const target = tree.getDragTarget();
       if (!target || !isOrderedDragTarget(target) || target.item !== item.getParent())

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@headless-tree/core",
-  "version": "1.4.0",
+  "description": "The definitive tree component for the Web",
+  "keywords": [
+    "tree",
+    "component",
+    "web",
+    "headless",
+    "ui",
+    "react",
+    "nested",
+    "async",
+    "checkbox",
+    "hook"
+  ],
+  "version": "1.5.1",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -11,13 +24,16 @@
         "default": "./dist/index.mjs"
       },
       "require": {
-        "types": "./dist/index.js",
-        "default": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
+  "publishConfig": {
+    "provenance": true
+  },
   "scripts": {
     "build": "tsup ./src/index.ts --format esm,cjs --dts",
     "start": "tsup ./src/index.ts --format esm,cjs --dts --watch",

package/readme.md

@@ -2,14 +2,14 @@
 
 [![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)
-[![Follow on BLuesky](https://img.shields.io/badge/bluesky-0285FF?style=flat&logo=bluesky&logoColor=ffffff)](https://bsky.app/profile/lukasbach.bsky.social)
+[![Follow on Bluesky](https://img.shields.io/badge/bluesky-0285FF?style=flat&logo=bluesky&logoColor=ffffff)](https://bsky.app/profile/lukasbach.bsky.social)
+[![Follow on X](https://img.shields.io/badge/x-000000?style=flat&logo=x&logoColor=ffffff)](https://x.com/lukasmbach)
 [![Support on Github Sponsors](https://img.shields.io/badge/sponsor-EA4AAA?style=flat&logo=githubsponsors&logoColor=ffffff)](https://github.com/sponsors/lukasbach)
 [![Follow on Github](https://img.shields.io/badge/follow-181717?style=flat&logo=github&logoColor=ffffff)](https://github.com/lukasbach)
 [![NPM Core package](https://img.shields.io/badge/core-CB3837?style=flat&logo=npm&logoColor=ffffff)](https://www.npmjs.com/package/@headless-tree/core)
 [![NPM React package](https://img.shields.io/badge/react-CB3837?style=flat&logo=npm&logoColor=ffffff)](https://www.npmjs.com/package/@headless-tree/react)
 
-
-Super-easy integration of complex tree components into React. Supports ordered 
+Super-easy integration of complex tree components into React. Supports ordered
 and unordered drag-and-drop, extensive keybindings, search, renaming and more.
 Fully customizable and accessible. Headless Tree is the official successor for
 [react-complex-tree](https://github.com/lukasbach/react-complex-tree).
@@ -18,7 +18,7 @@ It aims to bring the many features of complex tree views, like multi-select,
 drag-and-drop, keyboard navigation, tree search, renaming and more, while
 being unopinionated about the styling and rendering of the tree itself.
 Accessibility is ensured by default, and the integration is extremely
-simple and flexible. 
+simple and flexible.
 
 The interface gives you a flat list of tree nodes
 that you can easily render yourself, which keeps the complexity of the
@@ -39,7 +39,7 @@ to get an idea of what you can do with it.
 > I have collected feedback and fixed any bugs that might arise. I've written
 > [a blog post](https://medium.com/@lukasbach/headless-tree-and-the-future-of-react-complex-tree-fc920700e82a)
 > about the details of the change, and the future of the library.
-> 
+>
 > Join
 > [the Discord](https://discord.gg/KuZ6EezzVw) to get involved, and
 > [follow on Bluesky](https://bsky.app/profile/lukasbach.bsky.social) to
@@ -154,4 +154,4 @@ Then, render your tree based on the tree instance returned from the hook:
 ```
 
 Read on in the [get started guide](https://headless-tree.lukasbach.com/getstarted) to learn more about
-how to use Headless Tree, and how to customize it to your needs.
+how to use Headless Tree, and how to customize it to your needs.

package/src/core/create-tree.ts

@@ -11,6 +11,7 @@ import { treeFeature } from "../features/tree/feature";
 import { ItemMeta } from "../features/tree/types";
 import { buildStaticInstance } from "./build-static-instance";
 import { throwError } from "../utilities/errors";
+import type { TreeDataRef } from "../features/main/types";
 
 const verifyFeatures = (features: FeatureImplementation[] | undefined) => {
   const loadedFeatures = features?.map((feature) => feature.key);
@@ -92,6 +93,7 @@ export const createTree = <T>(
   let treeElement: HTMLElement | undefined | null;
   const treeDataRef: { current: any } = { current: {} };
 
+  let rebuildScheduled = false;
   const itemInstancesMap: Record<string, ItemInstance<T>> = {};
   let itemInstances: ItemInstance<T>[] = [];
   const itemElementsMap: Record<string, HTMLElement | undefined | null> = {};
@@ -140,6 +142,8 @@ export const createTree = <T>(
         itemInstances.push(itemInstancesMap[item.itemId]);
       }
     }
+
+    rebuildScheduled = false;
   };
 
   const eachFeature = (fn: (feature: FeatureImplementation<any>) => void) => {
@@ -158,22 +162,51 @@ export const createTree = <T>(
         config.setState?.(state); // TODO this cant be right... This doesnt allow external state updates
         // TODO this is never used, remove
       },
+      setMounted: ({}, isMounted) => {
+        const ref = treeDataRef.current as TreeDataRef;
+        ref.isMounted = isMounted;
+        if (isMounted) {
+          ref.waitingForMount?.forEach((cb) => cb());
+          ref.waitingForMount = [];
+        }
+      },
       applySubStateUpdate: <K extends keyof TreeState<any>>(
         {},
         stateName: K,
         updater: Updater<TreeState<T>[K]>,
       ) => {
-        state[stateName] =
-          typeof updater === "function" ? updater(state[stateName]) : updater;
-        const externalStateSetter = config[
-          stateHandlerNames[stateName]
-        ] as Function;
-        externalStateSetter?.(state[stateName]);
+        const apply = () => {
+          state[stateName] =
+            typeof updater === "function" ? updater(state[stateName]) : updater;
+          const externalStateSetter = config[
+            stateHandlerNames[stateName]
+          ] as Function;
+          externalStateSetter?.(state[stateName]);
+        };
+        const ref = treeDataRef.current as TreeDataRef;
+        if (ref.isMounted) {
+          apply();
+        } else {
+          ref.waitingForMount ??= [];
+          ref.waitingForMount.push(apply);
+        }
       },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
-        rebuildItemMeta();
-        config.setState?.(state);
+        const ref = treeDataRef.current as TreeDataRef;
+        if (ref.isMounted) {
+          rebuildItemMeta();
+          config.setState?.(state);
+        } else {
+          ref.waitingForMount ??= [];
+          ref.waitingForMount.push(() => {
+            rebuildItemMeta();
+            config.setState?.(state);
+          });
+        }
+      },
+      scheduleRebuildTree: () => {
+        rebuildScheduled = true;
       },
       getConfig: () => config,
       setConfig: (_, updater) => {
@@ -210,7 +243,10 @@ export const createTree = <T>(
         }
         return existingInstance;
       },
-      getItems: () => itemInstances,
+      getItems: () => {
+        if (rebuildScheduled) rebuildItemMeta();
+        return itemInstances;
+      },
       registerElement: ({}, element) => {
         if (treeElement === element) {
           return;

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

@@ -46,6 +46,7 @@ describe("core-feature/selections", () => {
       );
       const setLoadingItemData = tree.mockedHandler("setLoadingItemData");
       tree.do.selectItem("x12");
+      await tree.do.awaitNextTick();
       expect(setLoadingItemChildrens).toHaveBeenCalledWith(["x12"]);
       expect(setLoadingItemData).not.toHaveBeenCalled();
       await tree.resolveAsyncVisibleItems();

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

@@ -13,6 +13,13 @@ const loadItemData = async <T>(tree: TreeInstance<T>, itemId: string) => {
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
 
+  if (!dataRef.current.itemData[itemId]) {
+    tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+      ...loadingItemData,
+      itemId,
+    ]);
+  }
+
   const item = await config.dataLoader.getItem(itemId);
   dataRef.current.itemData[itemId] = item;
   config.onLoadedItem?.(itemId, item);
@@ -28,6 +35,13 @@ const loadChildrenIds = async <T>(tree: TreeInstance<T>, itemId: string) => {
   const dataRef = getDataRef(tree);
   let childrenIds: string[];
 
+  if (!dataRef.current.childrenIds[itemId]) {
+    tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [
+      ...loadingItemChildrens,
+      itemId,
+    ]);
+  }
+
   if ("getChildrenWithData" in config.dataLoader) {
     const children = await config.dataLoader.getChildrenWithData(itemId);
     childrenIds = children.map((c) => c.id);
@@ -104,12 +118,7 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
       }
 
       if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
-        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
-          ...loadingItemData,
-          itemId,
-        ]);
-
-        loadItemData(tree, itemId);
+        setTimeout(() => loadItemData(tree, itemId));
       }
 
       return config.createLoadingItemData?.() ?? null;
@@ -125,12 +134,7 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
         return [];
       }
 
-      tree.applySubStateUpdate(
-        "loadingItemChildrens",
-        (loadingItemChildrens) => [...loadingItemChildrens, itemId],
-      );
-
-      loadChildrenIds(tree, itemId);
+      setTimeout(() => loadChildrenIds(tree, itemId));
 
       return [];
     },
@@ -143,20 +147,12 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
     invalidateItemData: async ({ tree, itemId }, optimistic) => {
       if (!optimistic) {
         delete getDataRef(tree).current.itemData?.[itemId];
-        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
-          ...loadingItemData,
-          itemId,
-        ]);
       }
       await loadItemData(tree, itemId);
     },
     invalidateChildrenIds: async ({ tree, itemId }, optimistic) => {
       if (!optimistic) {
         delete getDataRef(tree).current.childrenIds?.[itemId];
-        tree.applySubStateUpdate(
-          "loadingItemChildrens",
-          (loadingItemChildrens) => [...loadingItemChildrens, itemId],
-        );
       }
       await loadChildrenIds(tree, itemId);
     },

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

@@ -47,7 +47,8 @@ export type AsyncDataLoaderFeatureDef<T> = {
      * the tree will continue to display the old data until the new data has loaded. */
     invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
 
-    updateCachedData: (data: T) => void;
+    /** Set to undefined to clear cache without triggering automatic refetch. Use @invalidateItemData to clear and triggering refetch. */
+    updateCachedData: (data: T | undefined) => void;
     updateCachedChildrenIds: (childrenIds: string[]) => void;
     isLoading: () => boolean;
   };