@headless-tree/core 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- 08f10f1: Fixed an issue where `isFolder` returns incorrect values for leafs if they are not visibly rendered (#166)
+
 ## 1.5.0
 
 ### Minor Changes
@@ -17,6 +34,10 @@
 - 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
 
+### Sponsorship appreciation
+
+Thanks for [Docmost](https://docmost.com/), who have supported the development of Headless Tree with a sponsor contribution. Docmost is a wiki-software that can be self-hosted or used in cloud. Thank you!
+
 ## 1.4.0
 
 ### Minor 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();
@@ -303,7 +304,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);
@@ -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 = {
@@ -1007,7 +1023,8 @@ var specialKeys = {
   minus: /^(NumpadSubtract|Minus)$/,
   control: /^(ControlLeft|ControlRight)$/,
   shift: /^(ShiftLeft|ShiftRight)$/,
-  metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/
+  metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/,
+  enter: /^(Enter|NumpadEnter)$/
 };
 var testHotkeyMatch = (pressedKeys, tree, hotkey) => {
   const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
@@ -1102,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,
@@ -1125,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,
@@ -1163,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 = {
@@ -1239,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;
     }
   }
 };
@@ -1290,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();
@@ -259,7 +260,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);
@@ -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 = {
@@ -963,7 +979,8 @@ var specialKeys = {
   minus: /^(NumpadSubtract|Minus)$/,
   control: /^(ControlLeft|ControlRight)$/,
   shift: /^(ShiftLeft|ShiftRight)$/,
-  metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/
+  metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/,
+  enter: /^(Enter|NumpadEnter)$/
 };
 var testHotkeyMatch = (pressedKeys, tree, hotkey) => {
   const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
@@ -1058,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,
@@ -1081,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,
@@ -1119,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 = {
@@ -1195,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;
     }
   }
 };
@@ -1246,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.0",
+  "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/hotkeys-core/feature.ts

@@ -14,6 +14,7 @@ const specialKeys: Record<string, RegExp> = {
   control: /^(ControlLeft|ControlRight)$/,
   shift: /^(ShiftLeft|ShiftRight)$/,
   metaorcontrol: /^(MetaLeft|MetaRight|ControlLeft|ControlRight)$/,
+  enter: /^(Enter|NumpadEnter)$/,
 };
 
 const testHotkeyMatch = (

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();
@@ -203,8 +204,8 @@ export const treeFeature: FeatureImplementation<any> = {
     isFocused: ({ tree, item, itemId }) =>
       tree.getState().focusedItem === itemId ||
       (tree.getState().focusedItem === null && item.getItemMeta().index === 0),
-    isFolder: ({ tree, item }) =>
-      item.getItemMeta().level === -1 ||
+    isFolder: ({ tree, item, itemId }) =>
+      itemId === tree.getConfig().rootItemId ||
       tree.getConfig().isItemFolder(item as ItemInstance<any>),
     getItemName: ({ tree, item }) => {
       const config = tree.getConfig();

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

@@ -4,8 +4,8 @@ import { propMemoizationFeature } from "../prop-memoization/feature";
 
 const factory = TestTree.default({}).withFeatures(propMemoizationFeature);
 
-describe("core-feature/selections", () => {
-  factory.forSuits((tree) => {
+describe("core-feature/tree", () => {
+  factory.forSuits((tree, title) => {
     describe("expanded items", () => {
       it("can expand via tree instance", () => {
         const setExpandedItems = tree.mockedHandler("setExpandedItems");
@@ -156,6 +156,17 @@ describe("core-feature/selections", () => {
         });
       });
 
+      it("unloaded item", () => {
+        expect(tree.instance.getItemInstance("x444").getItemMeta()).toEqual({
+          index: -1,
+          itemId: "x444",
+          level: -1,
+          parentId: null,
+          posInSet: 0,
+          setSize: 1,
+        });
+      });
+
       it("expanded container", () => {
         expect(tree.instance.getItemInstance("x11").getItemMeta()).toEqual({
           index: 1,
@@ -239,6 +250,7 @@ describe("core-feature/selections", () => {
           "aria-posinset": 2,
           "aria-selected": "false",
           "aria-setsize": 4,
+          "aria-expanded": false,
           onClick: expect.any(Function),
           ref: expect.any(Function),
           role: "treeitem",
@@ -253,12 +265,29 @@ describe("core-feature/selections", () => {
           "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", () => {
@@ -312,8 +341,30 @@ describe("core-feature/selections", () => {
         expect(tree.instance.getItemInstance("x1").isFolder()).toBe(true);
       });
 
-      it("returns correctly for false cases of isFolder()", () => {
-        expect(tree.instance.getItemInstance("x111").isFolder()).toBe(false);
+      it("returns correctly for true cases of isFolder() ", () => {
+        expect(tree.instance.getItemInstance("x1").isFolder()).toBe(true);
+      });
+
+      it("returns correct isFolder for hidden items", async () => {
+        if (title.toLocaleLowerCase().includes("async")) {
+          // async test tree defaults to "loading" item names
+          return;
+        }
+        const testTree = await tree
+          .with({
+            isItemFolder: (item: any) => item.getItemData().length < 4,
+          })
+          .createTestCaseTree();
+
+        // Reference: https://github.com/lukasbach/headless-tree/issues/166
+        expect(testTree.instance.getItemInstance("x44").isFolder()).toBe(true);
+        expect(testTree.instance.getItemInstance("x444").isFolder()).toBe(
+          false,
+        );
+      });
+
+      it("returns isFolder=true for root item", () => {
+        expect(tree.instance.getItemInstance("x").isFolder()).toBe(true);
       });
 
       it("returns correctly for getParent()", () => {

package/src/test-utils/test-tree.ts

@@ -63,15 +63,15 @@ export class TestTree<T = string> {
     }),
   };
 
-  forSuits(runSuite: (tree: TestTree<T>) => void) {
+  forSuits(runSuite: (tree: TestTree<T>, title: string) => void) {
     describe.for([
       this.suits.sync(),
       this.suits.async(),
       this.suits.proxifiedSync(),
       this.suits.proxifiedAsync(),
-    ])("$title", ({ tree }) => {
+    ])("$title", ({ tree, title }) => {
       tree.resetBeforeEach();
-      runSuite(tree);
+      runSuite(tree, title);
     });
   }