@headless-tree/core 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @headless-tree/core
 
+## 1.5.0
+
+### Minor Changes
+
+- cbeaba6: all state updates (like setSelectedItems) will not propagate while the component is unmounted. This happened before for `tree.setState()` calls directly, but not individual state atoms like `setSelectedItems`. When calling `createTree()` directly (instead of `useTree()`), `tree.setMounted(true)` needs to be called once after mount. No changes are necessary when using the React-based `useTree()` integration. (#158)
+
+### Patch Changes
+
+- 72e714b: all NPM deployments will now publish with provenance
+- 6693986: fixed an issue where async data loaders cause calling `item.getItemData()` outside of the component calling `useTree()` to cause a React warning log (#158)
+- 7a7424f: fixed incorrect exports definition in package.json for require/cjs imports (#161)
+- 215ab4b: add a new symbol that can be used in hotkey configurations "metaorcontrol" that will trigger if either any windows control key or mac meta key is pressed (#141)
+- 51b0dea: Added `isUnorderedDragTarget` as alternative to `isDragTarget` for easier detection of drag type
+- cf845d7: Added new state variable `loadingCheckPropagationItems` to indicate if, in async trees with checkboxes and state propagation enabled, data loading operations are currently loading due to a checkbox propagation taking place
+- 597faad: Checkbox propagation is now supported for trees with async data loaders!
+- b0ee382: triggering a data refetch will now always set the loadingItemData/loadingItemChildrens state variable to the associated items if they where not apart of the cache before
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -75,7 +75,12 @@ type DragAndDropFeatureDef<T> = {
         getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
     };
     itemInstance: {
+        /** Checks if the user is dragging in a way which makes this the new parent of the dragged items, either by dragging on top of
+         * this item, or by dragging inbetween children of this item. See @{isUnorderedDragTarget} if the latter is undesirable. */
         isDragTarget: () => boolean;
+        /** As opposed to @{isDragTarget}, this will not be true if the target is inbetween children of this item. This returns only true
+         * if the user is dragging directly on top of this item. */
+        isUnorderedDragTarget: () => boolean;
         isDragTargetAbove: () => boolean;
         isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
@@ -177,6 +182,10 @@ type MainFeatureDef<T = any> = {
         };
         getHotkeyPresets: () => HotkeysConfig<T>;
         rebuildTree: () => void;
+        /** @deprecated Experimental feature, might get removed or changed in the future. */
+        scheduleRebuildTree: () => void;
+        /** @internal */
+        setMounted: (isMounted: boolean) => void;
     };
     itemInstance: {
         registerElement: (element: HTMLElement | null) => void;
@@ -259,7 +268,12 @@ type SyncDataLoaderFeatureDef<T> = {
     };
     treeInstance: {
         retrieveItemData: (itemId: string) => T;
-        retrieveChildrenIds: (itemId: string) => string[];
+        /** Retrieve children Ids. If an async data loader is used, skipFetch is set to true, and children have not been retrieved
+         * yet for this item, this will initiate fetching the children, and return an empty array. Once the children have loaded,
+         * a rerender will be triggered.
+         * @param skipFetch - Defaults to false.
+         */
+        retrieveChildrenIds: (itemId: string, skipFetch?: boolean) => string[];
     };
     itemInstance: {
         isLoading: () => boolean;
@@ -307,7 +321,8 @@ type AsyncDataLoaderFeatureDef<T> = {
          * @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>;
-        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;
     };
@@ -443,9 +458,11 @@ declare enum CheckedState {
 type CheckboxesFeatureDef<T> = {
     state: {
         checkedItems: string[];
+        loadingCheckPropagationItems: string[];
     };
     config: {
         setCheckedItems?: SetStateFn<string[]>;
+        setLoadingCheckPropagationItems?: SetStateFn<string[]>;
         canCheckFolders?: boolean;
         propagateCheckedState?: boolean;
     };
@@ -453,11 +470,18 @@ type CheckboxesFeatureDef<T> = {
         setCheckedItems: (checkedItems: string[]) => void;
     };
     itemInstance: {
-        setChecked: () => void;
-        setUnchecked: () => void;
-        toggleCheckedState: () => void;
+        /** Will recursively load descendants if propagateCheckedState=true and async data loader is used. If not,
+         * this will return immediately. */
+        setChecked: () => Promise<void>;
+        /** Will recursively load descendants if propagateCheckedState=true and async data loader is used. If not,
+         * this will return immediately. */
+        setUnchecked: () => Promise<void>;
+        /** Will recursively load descendants if propagateCheckedState=true and async data loader is used. If not,
+         * this will return immediately. */
+        toggleCheckedState: () => Promise<void>;
         getCheckedState: () => CheckedState;
         getCheckboxProps: () => Record<string, any>;
+        isLoadingCheckPropagation: () => boolean;
     };
     hotkeys: never;
 };
@@ -503,11 +527,11 @@ type HotkeyName = MergedFeatures<RegisteredFeatures<any>>["hotkeys"];
 type HotkeysConfig<T> = Record<HotkeyName, HotkeyConfig<T>>;
 type CustomHotkeysConfig<T> = Partial<Record<HotkeyName | `custom${string}`, Partial<HotkeyConfig<T>>>>;
 type MayReturnNull<T extends (...x: any[]) => any> = (...args: Parameters<T>) => ReturnType<T> | null;
-type ItemInstanceOpts<Key extends keyof ItemInstance<any>> = {
-    item: ItemInstance<any>;
-    tree: TreeInstance<any>;
+type ItemInstanceOpts<T, Key extends keyof ItemInstance<any>> = {
+    item: ItemInstance<T>;
+    tree: TreeInstance<T>;
     itemId: string;
-    prev?: MayReturnNull<ItemInstance<any>[Key]>;
+    prev?: MayReturnNull<ItemInstance<T>[Key]>;
 };
 type TreeInstanceOpts<Key extends keyof TreeInstance<any>> = {
     tree: TreeInstance<any>;
@@ -524,7 +548,7 @@ type FeatureImplementation<T = any> = {
         [key in keyof TreeInstance<T>]?: (opts: TreeInstanceOpts<key>, ...args: Parameters<TreeInstance<T>[key]>) => void;
     };
     itemInstance?: {
-        [key in keyof ItemInstance<T>]?: (opts: ItemInstanceOpts<key>, ...args: Parameters<ItemInstance<T>[key]>) => void;
+        [key in keyof ItemInstance<T>]?: (opts: ItemInstanceOpts<T, key>, ...args: Parameters<ItemInstance<T>[key]>) => void;
     };
     onTreeMount?: (instance: TreeInstance<T>, treeElement: HTMLElement) => void;
     onTreeUnmount?: (instance: TreeInstance<T>, treeElement: HTMLElement) => void;

package/dist/index.d.ts

@@ -75,7 +75,12 @@ type DragAndDropFeatureDef<T> = {
         getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
     };
     itemInstance: {
+        /** Checks if the user is dragging in a way which makes this the new parent of the dragged items, either by dragging on top of
+         * this item, or by dragging inbetween children of this item. See @{isUnorderedDragTarget} if the latter is undesirable. */
         isDragTarget: () => boolean;
+        /** As opposed to @{isDragTarget}, this will not be true if the target is inbetween children of this item. This returns only true
+         * if the user is dragging directly on top of this item. */
+        isUnorderedDragTarget: () => boolean;
         isDragTargetAbove: () => boolean;
         isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
@@ -177,6 +182,10 @@ type MainFeatureDef<T = any> = {
         };
         getHotkeyPresets: () => HotkeysConfig<T>;
         rebuildTree: () => void;
+        /** @deprecated Experimental feature, might get removed or changed in the future. */
+        scheduleRebuildTree: () => void;
+        /** @internal */
+        setMounted: (isMounted: boolean) => void;
     };
     itemInstance: {
         registerElement: (element: HTMLElement | null) => void;
@@ -259,7 +268,12 @@ type SyncDataLoaderFeatureDef<T> = {
     };
     treeInstance: {
         retrieveItemData: (itemId: string) => T;
-        retrieveChildrenIds: (itemId: string) => string[];
+        /** Retrieve children Ids. If an async data loader is used, skipFetch is set to true, and children have not been retrieved
+         * yet for this item, this will initiate fetching the children, and return an empty array. Once the children have loaded,
+         * a rerender will be triggered.
+         * @param skipFetch - Defaults to false.
+         */
+        retrieveChildrenIds: (itemId: string, skipFetch?: boolean) => string[];
     };
     itemInstance: {
         isLoading: () => boolean;
@@ -307,7 +321,8 @@ type AsyncDataLoaderFeatureDef<T> = {
          * @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>;
-        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;
     };
@@ -443,9 +458,11 @@ declare enum CheckedState {
 type CheckboxesFeatureDef<T> = {
     state: {
         checkedItems: string[];
+        loadingCheckPropagationItems: string[];
     };
     config: {
         setCheckedItems?: SetStateFn<string[]>;
+        setLoadingCheckPropagationItems?: SetStateFn<string[]>;
         canCheckFolders?: boolean;
         propagateCheckedState?: boolean;
     };
@@ -453,11 +470,18 @@ type CheckboxesFeatureDef<T> = {
         setCheckedItems: (checkedItems: string[]) => void;
     };
     itemInstance: {
-        setChecked: () => void;
-        setUnchecked: () => void;
-        toggleCheckedState: () => void;
+        /** Will recursively load descendants if propagateCheckedState=true and async data loader is used. If not,
+         * this will return immediately. */
+        setChecked: () => Promise<void>;
+        /** Will recursively load descendants if propagateCheckedState=true and async data loader is used. If not,
+         * this will return immediately. */
+        setUnchecked: () => Promise<void>;
+        /** Will recursively load descendants if propagateCheckedState=true and async data loader is used. If not,
+         * this will return immediately. */
+        toggleCheckedState: () => Promise<void>;
         getCheckedState: () => CheckedState;
         getCheckboxProps: () => Record<string, any>;
+        isLoadingCheckPropagation: () => boolean;
     };
     hotkeys: never;
 };
@@ -503,11 +527,11 @@ type HotkeyName = MergedFeatures<RegisteredFeatures<any>>["hotkeys"];
 type HotkeysConfig<T> = Record<HotkeyName, HotkeyConfig<T>>;
 type CustomHotkeysConfig<T> = Partial<Record<HotkeyName | `custom${string}`, Partial<HotkeyConfig<T>>>>;
 type MayReturnNull<T extends (...x: any[]) => any> = (...args: Parameters<T>) => ReturnType<T> | null;
-type ItemInstanceOpts<Key extends keyof ItemInstance<any>> = {
-    item: ItemInstance<any>;
-    tree: TreeInstance<any>;
+type ItemInstanceOpts<T, Key extends keyof ItemInstance<any>> = {
+    item: ItemInstance<T>;
+    tree: TreeInstance<T>;
     itemId: string;
-    prev?: MayReturnNull<ItemInstance<any>[Key]>;
+    prev?: MayReturnNull<ItemInstance<T>[Key]>;
 };
 type TreeInstanceOpts<Key extends keyof TreeInstance<any>> = {
     tree: TreeInstance<any>;
@@ -524,7 +548,7 @@ type FeatureImplementation<T = any> = {
         [key in keyof TreeInstance<T>]?: (opts: TreeInstanceOpts<key>, ...args: Parameters<TreeInstance<T>[key]>) => void;
     };
     itemInstance?: {
-        [key in keyof ItemInstance<T>]?: (opts: ItemInstanceOpts<key>, ...args: Parameters<ItemInstance<T>[key]>) => void;
+        [key in keyof ItemInstance<T>]?: (opts: ItemInstanceOpts<T, key>, ...args: Parameters<ItemInstance<T>[key]>) => void;
     };
     onTreeMount?: (instance: TreeInstance<T>, treeElement: HTMLElement) => void;
     onTreeUnmount?: (instance: TreeInstance<T>, treeElement: HTMLElement) => void;

package/dist/index.js

@@ -485,6 +485,7 @@ var createTree = (initialConfig) => {
   );
   let treeElement;
   const treeDataRef = { current: {} };
+  let rebuildScheduled = false;
   const itemInstancesMap = {};
   let itemInstances = [];
   const itemElementsMap = {};
@@ -528,6 +529,7 @@ var createTree = (initialConfig) => {
         itemInstances.push(itemInstancesMap[item.itemId]);
       }
     }
+    rebuildScheduled = false;
   };
   const eachFeature = (fn) => {
     for (const feature of additionalFeatures) {
@@ -542,16 +544,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) => {
@@ -584,7 +618,10 @@ var createTree = (initialConfig) => {
         }
         return existingInstance;
       },
-      getItems: () => itemInstances,
+      getItems: () => {
+        if (rebuildScheduled) rebuildItemMeta();
+        return itemInstances;
+      },
       registerElement: ({}, element) => {
         if (treeElement === element) {
           return;
@@ -817,33 +854,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) => {
@@ -863,13 +927,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();
@@ -879,6 +943,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 */;
         }
@@ -888,36 +953,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)
+          );
+        }
+      }));
+    })
   }
 };
 
@@ -929,7 +1006,8 @@ var specialKeys = {
   plus: /^(NumpadAdd|Plus)$/,
   minus: /^(NumpadSubtract|Minus)$/,
   control: /^(ControlLeft|ControlRight)$/,
-  shift: /^(ShiftLeft|ShiftRight)$/
+  shift: /^(ShiftLeft|ShiftRight)$/,
+  metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/
 };
 var testHotkeyMatch = (pressedKeys, tree, hotkey) => {
   const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
@@ -1034,6 +1112,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);
@@ -1048,6 +1132,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);
@@ -1108,11 +1198,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;
     },
@@ -1124,11 +1210,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 [];
     }
   },
@@ -1138,10 +1220,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);
     }),
@@ -1149,10 +1227,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);
     }),
@@ -1604,6 +1678,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())