@headless-tree/core 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @headless-tree/core
 
+## 1.6.0
+
+### Minor Changes
+
+- 297b575: The anchor for shift-selecting (`item.selectUpTo()`) is now the last item that was clicked while not holding shift, or alternatively the focused item if that didn't exist. The previous behavior was always using the focused item as anchor, which doesn't match common multi-select behaviors in similar applications (#176)
+
+### Patch Changes
+
+- 287fe40: Added missing `aria-expanded` attribute to tree items (thanks to @gordey4doronin for the contribution) (#171)
+- 7158afe: Improve rerendering behavior by skipping changes to the item loading state when items are already loading, and skipping changes to loading state in case of checkbox click propagation if items are loaded immediately (#173)
+
 ## 1.5.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -199,6 +199,9 @@ type MainFeatureDef<T = any> = {
     hotkeys: never;
 };
 
+interface SelectionDataRef {
+    selectUpToAnchorId?: string | null;
+}
 type SelectionFeatureDef<T> = {
     state: {
         selectedItems: string[];
@@ -276,7 +279,10 @@ type SyncDataLoaderFeatureDef<T> = {
         retrieveChildrenIds: (itemId: string, skipFetch?: boolean) => string[];
     };
     itemInstance: {
+        /** Returns false. Provided for consistency with async data loader */
         isLoading: () => boolean;
+        /** Returns true. Provided for consistency with async data loader */
+        hasLoadedData: () => boolean;
     };
     hotkeys: never;
 };
@@ -284,6 +290,8 @@ type SyncDataLoaderFeatureDef<T> = {
 interface AsyncDataLoaderDataRef<T = any> {
     itemData: Record<string, T>;
     childrenIds: Record<string, string[]>;
+    loadingDataSubs: Record<string, (() => void)[]>;
+    loadingChildrenSubs: Record<string, (() => void)[]>;
 }
 /**
  * @category Async Data Loader/General
@@ -324,6 +332,7 @@ type AsyncDataLoaderFeatureDef<T> = {
         /** 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;
+        hasLoadedData: () => boolean;
         isLoading: () => boolean;
     };
     hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
@@ -601,4 +610,4 @@ declare const isOrderedDragTarget: <T>(dragTarget: DragTarget<T>) => dragTarget
     dragLineLevel: number;
 };
 
-export { AssistiveDndState, type AsyncDataLoaderDataRef, type AsyncDataLoaderFeatureDef, type CheckboxesFeatureDef, CheckedState, type CustomHotkeysConfig, type DndDataRef, type DndState, type DragAndDropFeatureDef, type DragLineData, type DragTarget, DragTargetPosition, type EmptyFeatureDef, type ExpandAllDataRef, type ExpandAllFeatureDef, type FeatureDef, type FeatureImplementation, type HotkeyConfig, type HotkeyName, type HotkeysConfig, type HotkeysCoreDataRef, type HotkeysCoreFeatureDef, type InstanceBuilder, type ItemInstance, type ItemInstanceOpts, type ItemMeta, type KDndDataRef, type KeyboardDragAndDropFeatureDef, type MainFeatureDef, type PropMemoizationDataRef, type PropMemoizationFeatureDef, type RegisteredFeatures, type RenamingFeatureDef, type SearchFeatureDataRef, type SearchFeatureDef, type SelectionFeatureDef, type SetStateFn, type SyncDataLoaderFeatureDef, type TreeConfig, type TreeDataLoader, type TreeFeatureDef, type TreeInstance, type TreeInstanceOpts, type TreeItemDataRef, type TreeState, type Updater, asyncDataLoaderFeature, buildProxiedInstance, buildStaticInstance, checkboxesFeature, createOnDropHandler, createTree, dragAndDropFeature, expandAllFeature, hotkeysCoreFeature, insertItemsAtTarget, isOrderedDragTarget, keyboardDragAndDropFeature, makeStateUpdater, propMemoizationFeature, removeItemsFromParents, renamingFeature, searchFeature, selectionFeature, syncDataLoaderFeature };
+export { AssistiveDndState, type AsyncDataLoaderDataRef, type AsyncDataLoaderFeatureDef, type CheckboxesFeatureDef, CheckedState, type CustomHotkeysConfig, type DndDataRef, type DndState, type DragAndDropFeatureDef, type DragLineData, type DragTarget, DragTargetPosition, type EmptyFeatureDef, type ExpandAllDataRef, type ExpandAllFeatureDef, type FeatureDef, type FeatureImplementation, type HotkeyConfig, type HotkeyName, type HotkeysConfig, type HotkeysCoreDataRef, type HotkeysCoreFeatureDef, type InstanceBuilder, type ItemInstance, type ItemInstanceOpts, type ItemMeta, type KDndDataRef, type KeyboardDragAndDropFeatureDef, type MainFeatureDef, type PropMemoizationDataRef, type PropMemoizationFeatureDef, type RegisteredFeatures, type RenamingFeatureDef, type SearchFeatureDataRef, type SearchFeatureDef, type SelectionDataRef, type SelectionFeatureDef, type SetStateFn, type SyncDataLoaderFeatureDef, type TreeConfig, type TreeDataLoader, type TreeFeatureDef, type TreeInstance, type TreeInstanceOpts, type TreeItemDataRef, type TreeState, type Updater, asyncDataLoaderFeature, buildProxiedInstance, buildStaticInstance, checkboxesFeature, createOnDropHandler, createTree, dragAndDropFeature, expandAllFeature, hotkeysCoreFeature, insertItemsAtTarget, isOrderedDragTarget, keyboardDragAndDropFeature, makeStateUpdater, propMemoizationFeature, removeItemsFromParents, renamingFeature, searchFeature, selectionFeature, syncDataLoaderFeature };

package/dist/index.d.ts

@@ -199,6 +199,9 @@ type MainFeatureDef<T = any> = {
     hotkeys: never;
 };
 
+interface SelectionDataRef {
+    selectUpToAnchorId?: string | null;
+}
 type SelectionFeatureDef<T> = {
     state: {
         selectedItems: string[];
@@ -276,7 +279,10 @@ type SyncDataLoaderFeatureDef<T> = {
         retrieveChildrenIds: (itemId: string, skipFetch?: boolean) => string[];
     };
     itemInstance: {
+        /** Returns false. Provided for consistency with async data loader */
         isLoading: () => boolean;
+        /** Returns true. Provided for consistency with async data loader */
+        hasLoadedData: () => boolean;
     };
     hotkeys: never;
 };
@@ -284,6 +290,8 @@ type SyncDataLoaderFeatureDef<T> = {
 interface AsyncDataLoaderDataRef<T = any> {
     itemData: Record<string, T>;
     childrenIds: Record<string, string[]>;
+    loadingDataSubs: Record<string, (() => void)[]>;
+    loadingChildrenSubs: Record<string, (() => void)[]>;
 }
 /**
  * @category Async Data Loader/General
@@ -324,6 +332,7 @@ type AsyncDataLoaderFeatureDef<T> = {
         /** 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;
+        hasLoadedData: () => boolean;
         isLoading: () => boolean;
     };
     hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
@@ -601,4 +610,4 @@ declare const isOrderedDragTarget: <T>(dragTarget: DragTarget<T>) => dragTarget
     dragLineLevel: number;
 };
 
-export { AssistiveDndState, type AsyncDataLoaderDataRef, type AsyncDataLoaderFeatureDef, type CheckboxesFeatureDef, CheckedState, type CustomHotkeysConfig, type DndDataRef, type DndState, type DragAndDropFeatureDef, type DragLineData, type DragTarget, DragTargetPosition, type EmptyFeatureDef, type ExpandAllDataRef, type ExpandAllFeatureDef, type FeatureDef, type FeatureImplementation, type HotkeyConfig, type HotkeyName, type HotkeysConfig, type HotkeysCoreDataRef, type HotkeysCoreFeatureDef, type InstanceBuilder, type ItemInstance, type ItemInstanceOpts, type ItemMeta, type KDndDataRef, type KeyboardDragAndDropFeatureDef, type MainFeatureDef, type PropMemoizationDataRef, type PropMemoizationFeatureDef, type RegisteredFeatures, type RenamingFeatureDef, type SearchFeatureDataRef, type SearchFeatureDef, type SelectionFeatureDef, type SetStateFn, type SyncDataLoaderFeatureDef, type TreeConfig, type TreeDataLoader, type TreeFeatureDef, type TreeInstance, type TreeInstanceOpts, type TreeItemDataRef, type TreeState, type Updater, asyncDataLoaderFeature, buildProxiedInstance, buildStaticInstance, checkboxesFeature, createOnDropHandler, createTree, dragAndDropFeature, expandAllFeature, hotkeysCoreFeature, insertItemsAtTarget, isOrderedDragTarget, keyboardDragAndDropFeature, makeStateUpdater, propMemoizationFeature, removeItemsFromParents, renamingFeature, searchFeature, selectionFeature, syncDataLoaderFeature };
+export { AssistiveDndState, type AsyncDataLoaderDataRef, type AsyncDataLoaderFeatureDef, type CheckboxesFeatureDef, CheckedState, type CustomHotkeysConfig, type DndDataRef, type DndState, type DragAndDropFeatureDef, type DragLineData, type DragTarget, DragTargetPosition, type EmptyFeatureDef, type ExpandAllDataRef, type ExpandAllFeatureDef, type FeatureDef, type FeatureImplementation, type HotkeyConfig, type HotkeyName, type HotkeysConfig, type HotkeysCoreDataRef, type HotkeysCoreFeatureDef, type InstanceBuilder, type ItemInstance, type ItemInstanceOpts, type ItemMeta, type KDndDataRef, type KeyboardDragAndDropFeatureDef, type MainFeatureDef, type PropMemoizationDataRef, type PropMemoizationFeatureDef, type RegisteredFeatures, type RenamingFeatureDef, type SearchFeatureDataRef, type SearchFeatureDef, type SelectionDataRef, type SelectionFeatureDef, type SetStateFn, type SyncDataLoaderFeatureDef, type TreeConfig, type TreeDataLoader, type TreeFeatureDef, type TreeInstance, type TreeInstanceOpts, type TreeItemDataRef, type TreeState, type Updater, asyncDataLoaderFeature, buildProxiedInstance, buildStaticInstance, checkboxesFeature, createOnDropHandler, createTree, dragAndDropFeature, expandAllFeature, hotkeysCoreFeature, insertItemsAtTarget, isOrderedDragTarget, keyboardDragAndDropFeature, makeStateUpdater, propMemoizationFeature, removeItemsFromParents, renamingFeature, searchFeature, selectionFeature, syncDataLoaderFeature };

package/dist/index.js

@@ -251,6 +251,7 @@ var treeFeature = {
         "aria-selected": "false",
         "aria-label": item.getItemName(),
         "aria-level": itemMeta.level + 1,
+        "aria-expanded": item.isFolder() ? item.isExpanded() : void 0,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: (e) => {
           item.setFocused();
@@ -760,7 +761,9 @@ var selectionFeature = {
     },
     selectUpTo: ({ tree, item }, ctrl) => {
       const indexA = item.getItemMeta().index;
-      const indexB = tree.getFocusedItem().getItemMeta().index;
+      const { selectUpToAnchorId } = tree.getDataRef().current;
+      const itemB = selectUpToAnchorId ? tree.getItemInstance(selectUpToAnchorId) : tree.getFocusedItem();
+      const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree.getItems().slice(a, b + 1).map((treeItem) => treeItem.getItemMeta().itemId);
       if (!ctrl) {
@@ -791,6 +794,9 @@ var selectionFeature = {
         } else {
           tree.setSelectedItems([item.getItemMeta().itemId]);
         }
+        if (!e.shiftKey) {
+          tree.getDataRef().current.selectUpToAnchorId = item.getId();
+        }
         (_b = (_a = prev == null ? void 0 : prev()) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
       }
     })
@@ -858,8 +864,11 @@ var getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
   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))) {
+  const item = tree.getItemInstance(itemId);
+  if (!item.hasLoadedData()) {
+    yield tree.loadItemData(itemId);
+  }
+  if (!tree.getConfig().isItemFolder(item)) {
     return [itemId];
   }
   const childrenIds = yield tree.loadChildrenIds(itemId);
@@ -871,17 +880,24 @@ var getAllDescendants = (tree, itemId, includeFolders = false) => __async(null,
   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)
-    );
+  const prom = callback();
+  const immediate = {};
+  const firstCompleted = yield Promise.race([prom, immediate]);
+  if (firstCompleted !== immediate) {
+    tree.applySubStateUpdate("loadingCheckPropagationItems", (items) => [
+      ...items,
+      itemId
+    ]);
+    try {
+      yield prom;
+    } finally {
+      tree.applySubStateUpdate(
+        "loadingCheckPropagationItems",
+        (items) => items.filter((id) => id !== itemId)
+      );
+    }
+  } else {
+    yield prom;
   }
 });
 var checkboxesFeature = {
@@ -1103,16 +1119,27 @@ var hotkeysCoreFeature = {
 
 // src/features/async-data-loader/feature.ts
 var getDataRef = (tree) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const dataRef = tree.getDataRef();
   (_b = (_a = dataRef.current).itemData) != null ? _b : _a.itemData = {};
   (_d = (_c = dataRef.current).childrenIds) != null ? _d : _c.childrenIds = {};
+  (_f = (_e = dataRef.current).loadingDataSubs) != null ? _f : _e.loadingDataSubs = {};
+  (_h = (_g = dataRef.current).loadingChildrenSubs) != null ? _h : _g.loadingChildrenSubs = {};
   return dataRef;
 };
 var loadItemData = (tree, itemId) => __async(null, null, function* () {
-  var _a;
+  var _a, _b;
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
+  if (tree.getState().loadingItemData.includes(itemId)) {
+    return new Promise((resolve) => {
+      var _a2, _b2;
+      (_b2 = (_a2 = dataRef.current.loadingDataSubs)[itemId]) != null ? _b2 : _a2[itemId] = [];
+      dataRef.current.loadingDataSubs[itemId].push(() => {
+        resolve(dataRef.current.itemData[itemId]);
+      });
+    });
+  }
   if (!dataRef.current.itemData[itemId]) {
     tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
       ...loadingItemData,
@@ -1126,13 +1153,23 @@ var loadItemData = (tree, itemId) => __async(null, null, function* () {
     "loadingItemData",
     (loadingItemData) => loadingItemData.filter((id) => id !== itemId)
   );
+  (_b = dataRef.current.loadingDataSubs[itemId]) == null ? void 0 : _b.forEach((cb) => cb());
   return item;
 });
 var loadChildrenIds = (tree, itemId) => __async(null, null, function* () {
-  var _a, _b;
+  var _a, _b, _c;
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
   let childrenIds;
+  if (tree.getState().loadingItemChildrens.includes(itemId)) {
+    return new Promise((resolve) => {
+      var _a2, _b2;
+      (_b2 = (_a2 = dataRef.current.loadingChildrenSubs)[itemId]) != null ? _b2 : _a2[itemId] = [];
+      dataRef.current.loadingChildrenSubs[itemId].push(() => {
+        resolve(dataRef.current.childrenIds[itemId]);
+      });
+    });
+  }
   if (!dataRef.current.childrenIds[itemId]) {
     tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [
       ...loadingItemChildrens,
@@ -1164,6 +1201,7 @@ var loadChildrenIds = (tree, itemId) => __async(null, null, function* () {
     "loadingItemChildrens",
     (loadingItemChildrens) => loadingItemChildrens.filter((id) => id !== itemId)
   );
+  (_c = dataRef.current.loadingChildrenSubs[itemId]) == null ? void 0 : _c.forEach((cb) => cb());
   return childrenIds;
 });
 var asyncDataLoaderFeature = {
@@ -1240,6 +1278,10 @@ var asyncDataLoaderFeature = {
       const dataRef = tree.getDataRef();
       dataRef.current.itemData[itemId] = data;
       tree.rebuildTree();
+    },
+    hasLoadedData: ({ tree, itemId }) => {
+      const dataRef = tree.getDataRef();
+      return dataRef.current.itemData[itemId] !== void 0;
     }
   }
 };
@@ -1291,7 +1333,8 @@ var syncDataLoaderFeature = {
     loadChildrenIds: ({ tree }, itemId) => tree.retrieveChildrenIds(itemId)
   },
   itemInstance: {
-    isLoading: () => false
+    isLoading: () => false,
+    hasLoadedData: () => true
   }
 };
 

package/dist/index.mjs

@@ -207,6 +207,7 @@ var treeFeature = {
         "aria-selected": "false",
         "aria-label": item.getItemName(),
         "aria-level": itemMeta.level + 1,
+        "aria-expanded": item.isFolder() ? item.isExpanded() : void 0,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: (e) => {
           item.setFocused();
@@ -716,7 +717,9 @@ var selectionFeature = {
     },
     selectUpTo: ({ tree, item }, ctrl) => {
       const indexA = item.getItemMeta().index;
-      const indexB = tree.getFocusedItem().getItemMeta().index;
+      const { selectUpToAnchorId } = tree.getDataRef().current;
+      const itemB = selectUpToAnchorId ? tree.getItemInstance(selectUpToAnchorId) : tree.getFocusedItem();
+      const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree.getItems().slice(a, b + 1).map((treeItem) => treeItem.getItemMeta().itemId);
       if (!ctrl) {
@@ -747,6 +750,9 @@ var selectionFeature = {
         } else {
           tree.setSelectedItems([item.getItemMeta().itemId]);
         }
+        if (!e.shiftKey) {
+          tree.getDataRef().current.selectUpToAnchorId = item.getId();
+        }
         (_b = (_a = prev == null ? void 0 : prev()) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
       }
     })
@@ -814,8 +820,11 @@ var getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
   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))) {
+  const item = tree.getItemInstance(itemId);
+  if (!item.hasLoadedData()) {
+    yield tree.loadItemData(itemId);
+  }
+  if (!tree.getConfig().isItemFolder(item)) {
     return [itemId];
   }
   const childrenIds = yield tree.loadChildrenIds(itemId);
@@ -827,17 +836,24 @@ var getAllDescendants = (tree, itemId, includeFolders = false) => __async(null,
   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)
-    );
+  const prom = callback();
+  const immediate = {};
+  const firstCompleted = yield Promise.race([prom, immediate]);
+  if (firstCompleted !== immediate) {
+    tree.applySubStateUpdate("loadingCheckPropagationItems", (items) => [
+      ...items,
+      itemId
+    ]);
+    try {
+      yield prom;
+    } finally {
+      tree.applySubStateUpdate(
+        "loadingCheckPropagationItems",
+        (items) => items.filter((id) => id !== itemId)
+      );
+    }
+  } else {
+    yield prom;
   }
 });
 var checkboxesFeature = {
@@ -1059,16 +1075,27 @@ var hotkeysCoreFeature = {
 
 // src/features/async-data-loader/feature.ts
 var getDataRef = (tree) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const dataRef = tree.getDataRef();
   (_b = (_a = dataRef.current).itemData) != null ? _b : _a.itemData = {};
   (_d = (_c = dataRef.current).childrenIds) != null ? _d : _c.childrenIds = {};
+  (_f = (_e = dataRef.current).loadingDataSubs) != null ? _f : _e.loadingDataSubs = {};
+  (_h = (_g = dataRef.current).loadingChildrenSubs) != null ? _h : _g.loadingChildrenSubs = {};
   return dataRef;
 };
 var loadItemData = (tree, itemId) => __async(null, null, function* () {
-  var _a;
+  var _a, _b;
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
+  if (tree.getState().loadingItemData.includes(itemId)) {
+    return new Promise((resolve) => {
+      var _a2, _b2;
+      (_b2 = (_a2 = dataRef.current.loadingDataSubs)[itemId]) != null ? _b2 : _a2[itemId] = [];
+      dataRef.current.loadingDataSubs[itemId].push(() => {
+        resolve(dataRef.current.itemData[itemId]);
+      });
+    });
+  }
   if (!dataRef.current.itemData[itemId]) {
     tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
       ...loadingItemData,
@@ -1082,13 +1109,23 @@ var loadItemData = (tree, itemId) => __async(null, null, function* () {
     "loadingItemData",
     (loadingItemData) => loadingItemData.filter((id) => id !== itemId)
   );
+  (_b = dataRef.current.loadingDataSubs[itemId]) == null ? void 0 : _b.forEach((cb) => cb());
   return item;
 });
 var loadChildrenIds = (tree, itemId) => __async(null, null, function* () {
-  var _a, _b;
+  var _a, _b, _c;
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
   let childrenIds;
+  if (tree.getState().loadingItemChildrens.includes(itemId)) {
+    return new Promise((resolve) => {
+      var _a2, _b2;
+      (_b2 = (_a2 = dataRef.current.loadingChildrenSubs)[itemId]) != null ? _b2 : _a2[itemId] = [];
+      dataRef.current.loadingChildrenSubs[itemId].push(() => {
+        resolve(dataRef.current.childrenIds[itemId]);
+      });
+    });
+  }
   if (!dataRef.current.childrenIds[itemId]) {
     tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [
       ...loadingItemChildrens,
@@ -1120,6 +1157,7 @@ var loadChildrenIds = (tree, itemId) => __async(null, null, function* () {
     "loadingItemChildrens",
     (loadingItemChildrens) => loadingItemChildrens.filter((id) => id !== itemId)
   );
+  (_c = dataRef.current.loadingChildrenSubs[itemId]) == null ? void 0 : _c.forEach((cb) => cb());
   return childrenIds;
 });
 var asyncDataLoaderFeature = {
@@ -1196,6 +1234,10 @@ var asyncDataLoaderFeature = {
       const dataRef = tree.getDataRef();
       dataRef.current.itemData[itemId] = data;
       tree.rebuildTree();
+    },
+    hasLoadedData: ({ tree, itemId }) => {
+      const dataRef = tree.getDataRef();
+      return dataRef.current.itemData[itemId] !== void 0;
     }
   }
 };
@@ -1247,7 +1289,8 @@ var syncDataLoaderFeature = {
     loadChildrenIds: ({ tree }, itemId) => tree.retrieveChildrenIds(itemId)
   },
   itemInstance: {
-    isLoading: () => false
+    isLoading: () => false,
+    hasLoadedData: () => true
   }
 };
 

package/package.json

@@ -13,7 +13,7 @@
     "checkbox",
     "hook"
   ],
-  "version": "1.5.1",
+  "version": "1.6.0",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",

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

@@ -6,6 +6,8 @@ const getDataRef = <T>(tree: TreeInstance<T>) => {
   const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
   dataRef.current.itemData ??= {};
   dataRef.current.childrenIds ??= {};
+  dataRef.current.loadingDataSubs ??= {};
+  dataRef.current.loadingChildrenSubs ??= {};
   return dataRef;
 };
 
@@ -13,6 +15,16 @@ const loadItemData = async <T>(tree: TreeInstance<T>, itemId: string) => {
   const config = tree.getConfig();
   const dataRef = getDataRef(tree);
 
+  if (tree.getState().loadingItemData.includes(itemId)) {
+    // if currently loading, await existing load
+    return new Promise<T>((resolve) => {
+      dataRef.current.loadingDataSubs[itemId] ??= [];
+      dataRef.current.loadingDataSubs[itemId].push(() => {
+        resolve(dataRef.current.itemData[itemId]);
+      });
+    });
+  }
+
   if (!dataRef.current.itemData[itemId]) {
     tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
       ...loadingItemData,
@@ -26,6 +38,7 @@ const loadItemData = async <T>(tree: TreeInstance<T>, itemId: string) => {
   tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
     loadingItemData.filter((id) => id !== itemId),
   );
+  dataRef.current.loadingDataSubs[itemId]?.forEach((cb) => cb());
 
   return item;
 };
@@ -35,6 +48,16 @@ const loadChildrenIds = async <T>(tree: TreeInstance<T>, itemId: string) => {
   const dataRef = getDataRef(tree);
   let childrenIds: string[];
 
+  if (tree.getState().loadingItemChildrens.includes(itemId)) {
+    // if currently loading, await existing load
+    return new Promise<string[]>((resolve) => {
+      dataRef.current.loadingChildrenSubs[itemId] ??= [];
+      dataRef.current.loadingChildrenSubs[itemId].push(() => {
+        resolve(dataRef.current.childrenIds[itemId]);
+      });
+    });
+  }
+
   if (!dataRef.current.childrenIds[itemId]) {
     tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [
       ...loadingItemChildrens,
@@ -66,6 +89,7 @@ const loadChildrenIds = async <T>(tree: TreeInstance<T>, itemId: string) => {
   tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) =>
     loadingItemChildrens.filter((id) => id !== itemId),
   );
+  dataRef.current.loadingChildrenSubs[itemId]?.forEach((cb) => cb());
 
   return childrenIds;
 };
@@ -166,5 +190,9 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
       dataRef.current.itemData[itemId] = data;
       tree.rebuildTree();
     },
+    hasLoadedData: ({ tree, itemId }) => {
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+      return dataRef.current.itemData[itemId] !== undefined;
+    },
   },
 };

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

@@ -4,6 +4,11 @@ import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
 export interface AsyncDataLoaderDataRef<T = any> {
   itemData: Record<string, T>;
   childrenIds: Record<string, string[]>;
+
+  // If an item load is requested while it is already loading, we reuse the existing load promise
+  // and store callbacks to be called when the load completes
+  loadingDataSubs: Record<string, (() => void)[]>;
+  loadingChildrenSubs: Record<string, (() => void)[]>;
 }
 
 /**
@@ -50,6 +55,7 @@ export type AsyncDataLoaderFeatureDef<T> = {
     /** 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;
+    hasLoadedData: () => boolean;
     isLoading: () => boolean;
   };
   hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];

package/src/features/checkboxes/feature.ts

@@ -22,8 +22,11 @@ const getAllDescendants = async <T>(
   itemId: string,
   includeFolders = false,
 ): Promise<string[]> => {
-  await tree.loadItemData(itemId);
-  if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
+  const item = tree.getItemInstance(itemId);
+  if (!item.hasLoadedData()) {
+    await tree.loadItemData(itemId);
+  }
+  if (!tree.getConfig().isItemFolder(item)) {
     return [itemId];
   }
   const childrenIds = await tree.loadChildrenIds(itemId);
@@ -42,16 +45,25 @@ const withLoadingState = async <T>(
   itemId: string,
   callback: () => Promise<void>,
 ) => {
-  tree.applySubStateUpdate("loadingCheckPropagationItems", (items) => [
-    ...items,
-    itemId,
-  ]);
-  try {
-    await callback();
-  } finally {
-    tree.applySubStateUpdate("loadingCheckPropagationItems", (items) =>
-      items.filter((id) => id !== itemId),
-    );
+  const prom = callback();
+  const immediate = {};
+  const firstCompleted = await Promise.race([prom, immediate]);
+  if (firstCompleted !== immediate) {
+    // don't update loading state if load is immediate
+    tree.applySubStateUpdate("loadingCheckPropagationItems", (items) => [
+      ...items,
+      itemId,
+    ]);
+    try {
+      await prom;
+    } finally {
+      tree.applySubStateUpdate("loadingCheckPropagationItems", (items) =>
+        items.filter((id) => id !== itemId),
+      );
+    }
+  } else {
+    // immediately completed, await anyway to keep errors in the same execution flow
+    await prom;
   }
 };
 

package/src/features/selection/feature.ts

@@ -1,5 +1,6 @@
 import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
+import type { SelectionDataRef } from "./types";
 
 export const selectionFeature: FeatureImplementation = {
   key: "selection",
@@ -50,8 +51,12 @@ export const selectionFeature: FeatureImplementation = {
 
     selectUpTo: ({ tree, item }, ctrl: boolean) => {
       const indexA = item.getItemMeta().index;
-      // TODO dont use focused item as anchor, but last primary-clicked item
-      const indexB = tree.getFocusedItem().getItemMeta().index;
+      const { selectUpToAnchorId } =
+        tree.getDataRef<SelectionDataRef>().current;
+      const itemB = selectUpToAnchorId
+        ? tree.getItemInstance(selectUpToAnchorId)
+        : tree.getFocusedItem();
+      const indexB = itemB.getItemMeta().index;
       const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
       const newSelectedItems = tree
         .getItems()
@@ -90,6 +95,11 @@ export const selectionFeature: FeatureImplementation = {
           tree.setSelectedItems([item.getItemMeta().itemId]);
         }
 
+        if (!e.shiftKey) {
+          tree.getDataRef<SelectionDataRef>().current.selectUpToAnchorId =
+            item.getId();
+        }
+
         prev?.()?.onClick?.(e);
       },
     }),

package/src/features/selection/types.ts

@@ -1,5 +1,9 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 
+export interface SelectionDataRef {
+  selectUpToAnchorId?: string | null;
+}
+
 export type SelectionFeatureDef<T> = {
   state: {
     selectedItems: string[];

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

@@ -58,5 +58,6 @@ export const syncDataLoaderFeature: FeatureImplementation = {
 
   itemInstance: {
     isLoading: () => false,
+    hasLoadedData: () => true,
   },
 };

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

@@ -27,7 +27,10 @@ export type SyncDataLoaderFeatureDef<T> = {
     retrieveChildrenIds: (itemId: string, skipFetch?: boolean) => string[];
   };
   itemInstance: {
+    /** Returns false. Provided for consistency with async data loader */
     isLoading: () => boolean;
+    /** Returns true. Provided for consistency with async data loader */
+    hasLoadedData: () => boolean;
   };
   hotkeys: never;
 };

package/src/features/tree/feature.ts

@@ -144,6 +144,7 @@ export const treeFeature: FeatureImplementation<any> = {
         "aria-selected": "false",
         "aria-label": item.getItemName(),
         "aria-level": itemMeta.level + 1,
+        "aria-expanded": item.isFolder() ? item.isExpanded() : undefined,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: (e: MouseEvent) => {
           item.setFocused();

package/src/features/tree/tree.spec.ts

@@ -250,6 +250,7 @@ describe("core-feature/tree", () => {
           "aria-posinset": 2,
           "aria-selected": "false",
           "aria-setsize": 4,
+          "aria-expanded": false,
           onClick: expect.any(Function),
           ref: expect.any(Function),
           role: "treeitem",
@@ -264,12 +265,29 @@ describe("core-feature/tree", () => {
           "aria-posinset": 1,
           "aria-selected": "false",
           "aria-setsize": 4,
+          "aria-expanded": true,
           onClick: expect.any(Function),
           ref: expect.any(Function),
           role: "treeitem",
           tabIndex: 0,
         });
       });
+
+      it("generates aria-expanded for non expanded folder", () => {
+        expect(tree.instance.getItemInstance("x3").getProps()).toEqual(
+          expect.objectContaining({
+            "aria-expanded": false,
+          }),
+        );
+      });
+
+      it("generates aria-expanded for leaf", () => {
+        expect(tree.instance.getItemInstance("x111").getProps()).toEqual(
+          expect.objectContaining({
+            "aria-expanded": undefined,
+          }),
+        );
+      });
     });
 
     describe("util functions", () => {