@headless-tree/core 1.2.1 → 1.3.0

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "@headless-tree/core",
-  "version": "1.2.1",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/esm/index.d.ts",
+  "version": "1.3.0",
+  "main": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "exports": {
-    "types": "./lib/esm/index.d.ts",
-    "import": "./lib/esm/index.js",
-    "default": "./lib/cjs/index.js"
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.js",
+        "default": "./dist/index.d.ts"
+      }
+    },
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "scripts": {
-    "build:cjs": "tsc -m commonjs --outDir lib/cjs",
-    "build:esm": "tsc",
-    "start": "tsc -w",
+    "build": "tsup ./src/index.ts --format esm,cjs --dts",
+    "start": "tsup ./src/index.ts --format esm,cjs --dts --watch",
     "test": "vitest run"
   },
   "repository": {
@@ -26,6 +33,7 @@
   "license": "MIT",
   "devDependencies": {
     "jsdom": "^26.0.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.7.2",
     "vitest": "^3.0.3"
   }

package/src/core/create-tree.ts

@@ -170,19 +170,6 @@ export const createTree = <T>(
         ] as Function;
         externalStateSetter?.(state[stateName]);
       },
-      buildItemInstance: ({}, itemId) => {
-        const [instance, finalizeInstance] = buildInstance(
-          features,
-          "itemInstance",
-          (instance) => ({
-            item: instance,
-            tree: treeInstance,
-            itemId,
-          }),
-        );
-        finalizeInstance();
-        return instance;
-      },
       // TODO rebuildSubTree: (itemId: string) => void;
       rebuildTree: () => {
         rebuildItemMeta();
@@ -206,7 +193,23 @@ export const createTree = <T>(
           config.setState?.(state);
         }
       },
-      getItemInstance: ({}, itemId) => itemInstancesMap[itemId],
+      getItemInstance: ({}, itemId) => {
+        const existingInstance = itemInstancesMap[itemId];
+        if (!existingInstance) {
+          const [instance, finalizeInstance] = buildInstance(
+            features,
+            "itemInstance",
+            (instance) => ({
+              item: instance,
+              tree: treeInstance,
+              itemId,
+            }),
+          );
+          finalizeInstance();
+          return instance;
+        }
+        return existingInstance;
+      },
       getItems: () => itemInstances,
       registerElement: ({}, element) => {
         if (treeElement === element) {
@@ -249,7 +252,15 @@ export const createTree = <T>(
       getElement: ({ itemId }) => itemElementsMap[itemId],
       // eslint-disable-next-line no-return-assign
       getDataRef: ({ itemId }) => (itemDataRefs[itemId] ??= { current: {} }),
-      getItemMeta: ({ itemId }) => itemMetaMap[itemId],
+      getItemMeta: ({ itemId }) =>
+        itemMetaMap[itemId] ?? {
+          itemId,
+          parentId: null,
+          level: -1,
+          index: -1,
+          posInSet: 0,
+          setSize: 1,
+        },
     },
   };
 

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

@@ -165,5 +165,10 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
       dataRef.current.childrenIds[itemId] = childrenIds;
       tree.rebuildTree();
     },
+    updateCachedData: ({ tree, itemId }, data) => {
+      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+      dataRef.current.itemData[itemId] = data;
+      tree.rebuildTree();
+    },
   },
 };

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

@@ -34,6 +34,7 @@ export type AsyncDataLoaderFeatureDef<T> = {
     waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
     loadItemData: (itemId: string) => Promise<T>;
     loadChildrenIds: (itemId: string) => Promise<string[]>;
+    /* idea: recursiveLoadItems: (itemId: string, cancelToken?: { current: boolean }, onLoad: (itemIds: string[]) => void) => Promise<T[]> */
   };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
     /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible
@@ -46,6 +47,7 @@ export type AsyncDataLoaderFeatureDef<T> = {
      * the tree will continue to display the old data until the new data has loaded. */
     invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
 
+    updateCachedData: (data: T) => void;
     updateCachedChildrenIds: (childrenIds: string[]) => void;
     isLoading: () => boolean;
   };

package/src/features/checkboxes/checkboxes.spec.ts

@@ -74,17 +74,28 @@ describe("core-feature/checkboxes", () => {
     });
   });
 
-  it("should handle folder checking when canCheckFolders is true", async () => {
+  it("should handle folder checking", async () => {
     const tree = await factory
-      .with({ canCheckFolders: true })
+      .with({ canCheckFolders: true, propagateCheckedState: false })
       .createTestCaseTree();
 
     tree.item("x11").setChecked();
     expect(tree.instance.getState().checkedItems).toContain("x11");
   });
 
-  it("should handle folder checking when canCheckFolders is false", async () => {
-    const tree = await factory.createTestCaseTree();
+  it("should not check folders if disabled", async () => {
+    const tree = await factory
+      .with({ canCheckFolders: false, propagateCheckedState: false })
+      .createTestCaseTree();
+
+    tree.item("x11").setChecked();
+    expect(tree.instance.getState().checkedItems.length).toBe(0);
+  });
+
+  it("should propagate checked state", async () => {
+    const tree = await factory
+      .with({ propagateCheckedState: true })
+      .createTestCaseTree();
 
     tree.item("x11").setChecked();
     expect(tree.instance.getState().checkedItems).toEqual(
@@ -93,7 +104,9 @@ describe("core-feature/checkboxes", () => {
   });
 
   it("should turn folder indeterminate", async () => {
-    const tree = await factory.createTestCaseTree();
+    const tree = await factory
+      .with({ propagateCheckedState: true })
+      .createTestCaseTree();
 
     tree.item("x111").setChecked();
     expect(tree.item("x11").getCheckedState()).toBe(CheckedState.Indeterminate);
@@ -103,6 +116,8 @@ describe("core-feature/checkboxes", () => {
     const tree = await factory
       .with({
         isItemFolder: (item) => item.getItemData().length < 4,
+        propagateCheckedState: true,
+        canCheckFolders: false,
       })
       .createTestCaseTree();
 

package/src/features/checkboxes/feature.ts

@@ -6,14 +6,16 @@ import { throwError } from "../../utilities/errors";
 const getAllLoadedDescendants = <T>(
   tree: TreeInstance<T>,
   itemId: string,
+  includeFolders = false,
 ): string[] => {
-  if (!tree.getConfig().isItemFolder(tree.buildItemInstance(itemId))) {
+  if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
     return [itemId];
   }
-  return tree
+  const descendants = tree
     .retrieveChildrenIds(itemId)
-    .map((child) => getAllLoadedDescendants(tree, child))
+    .map((child) => getAllLoadedDescendants(tree, child, includeFolders))
     .flat();
+  return includeFolders ? [itemId, ...descendants] : descendants;
 };
 
 export const checkboxesFeature: FeatureImplementation = {
@@ -30,12 +32,17 @@ export const checkboxesFeature: FeatureImplementation = {
     const hasAsyncLoader = defaultConfig.features?.some(
       (f) => f.key === "async-data-loader",
     );
-    if (hasAsyncLoader && !defaultConfig.canCheckFolders) {
-      throwError(`!canCheckFolders not supported with async trees`);
+    if (hasAsyncLoader && defaultConfig.propagateCheckedState) {
+      throwError(`propagateCheckedState not supported with async trees`);
     }
+    const propagateCheckedState =
+      defaultConfig.propagateCheckedState ?? !hasAsyncLoader;
+    const canCheckFolders =
+      defaultConfig.canCheckFolders ?? !propagateCheckedState;
     return {
       setCheckedItems: makeStateUpdater("checkedItems", tree),
-      canCheckFolders: hasAsyncLoader ?? false,
+      propagateCheckedState,
+      canCheckFolders,
       ...defaultConfig,
     };
   },
@@ -72,14 +79,16 @@ export const checkboxesFeature: FeatureImplementation = {
       }
     },
 
-    getCheckedState: ({ item, tree, itemId }) => {
+    getCheckedState: ({ item, tree }) => {
       const { checkedItems } = tree.getState();
+      const { propagateCheckedState } = tree.getConfig();
+      const itemId = item.getId();
 
       if (checkedItems.includes(itemId)) {
         return CheckedState.Checked;
       }
 
-      if (item.isFolder() && !tree.getConfig().canCheckFolders) {
+      if (item.isFolder() && propagateCheckedState) {
         const descendants = getAllLoadedDescendants(tree, itemId);
         if (descendants.every((d) => checkedItems.includes(d))) {
           return CheckedState.Checked;
@@ -93,25 +102,31 @@ export const checkboxesFeature: FeatureImplementation = {
     },
 
     setChecked: ({ item, tree, itemId }) => {
-      if (!item.isFolder() || tree.getConfig().canCheckFolders) {
-        tree.applySubStateUpdate("checkedItems", (items) => [...items, itemId]);
-      } else {
+      const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+      if (item.isFolder() && propagateCheckedState) {
         tree.applySubStateUpdate("checkedItems", (items) => [
           ...items,
-          ...getAllLoadedDescendants(tree, itemId),
+          ...getAllLoadedDescendants(tree, itemId, canCheckFolders),
         ]);
+      } else if (!item.isFolder() || canCheckFolders) {
+        tree.applySubStateUpdate("checkedItems", (items) => [...items, itemId]);
       }
     },
 
     setUnchecked: ({ item, tree, itemId }) => {
-      if (!item.isFolder() || tree.getConfig().canCheckFolders) {
+      const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+      if (item.isFolder() && propagateCheckedState) {
+        const descendants = getAllLoadedDescendants(
+          tree,
+          itemId,
+          canCheckFolders,
+        );
         tree.applySubStateUpdate("checkedItems", (items) =>
-          items.filter((id) => id !== itemId),
+          items.filter((id) => !descendants.includes(id) && id !== itemId),
         );
       } else {
-        const descendants = getAllLoadedDescendants(tree, itemId);
         tree.applySubStateUpdate("checkedItems", (items) =>
-          items.filter((id) => !descendants.includes(id)),
+          items.filter((id) => id !== itemId),
         );
       }
     },

package/src/features/checkboxes/types.ts

@@ -13,6 +13,7 @@ export type CheckboxesFeatureDef<T> = {
   config: {
     setCheckedItems?: SetStateFn<string[]>;
     canCheckFolders?: boolean;
+    propagateCheckedState?: boolean;
   };
   treeInstance: {
     setCheckedItems: (checkedItems: string[]) => void;

package/src/features/drag-and-drop/drag-and-drop.spec.ts

@@ -182,7 +182,7 @@ describe("core-feature/drag-and-drop", () => {
         });
       });
 
-      it("updates dnd state", () => {
+      it("updates dnd state", async () => {
         const setDndState = tree.mockedHandler("setDndState");
         tree.do.startDrag("x111");
         expect(setDndState).toBeCalledWith({
@@ -198,7 +198,7 @@ describe("core-feature/drag-and-drop", () => {
           },
         });
         tree.do.drop("x22");
-        expect(setDndState).toBeCalledWith(null);
+        await vi.waitFor(() => expect(setDndState).toBeCalledWith(null));
       });
     });
 
@@ -300,6 +300,9 @@ describe("core-feature/drag-and-drop", () => {
 
       it("drags foreign object inside tree, on folder", () => {
         tree.mockedHandler("canDropForeignDragObject").mockReturnValue(true);
+        tree
+          .mockedHandler("canDragForeignDragObjectOver")
+          .mockReturnValue(true);
         const onDropForeignDragObject = tree.mockedHandler(
           "onDropForeignDragObject",
         );
@@ -318,6 +321,9 @@ describe("core-feature/drag-and-drop", () => {
         tree
           .mockedHandler("canDropForeignDragObject")
           .mockImplementation((_, target) => target.item.isFolder());
+        tree
+          .mockedHandler("canDragForeignDragObjectOver")
+          .mockImplementation((_, target) => target.item.isFolder());
         const onDropForeignDragObject = tree.mockedHandler(
           "onDropForeignDragObject",
         );
@@ -340,6 +346,9 @@ describe("core-feature/drag-and-drop", () => {
 
       it("doesnt drag foreign object inside tree if not allowed", () => {
         tree.mockedHandler("canDropForeignDragObject").mockReturnValue(false);
+        tree
+          .mockedHandler("canDragForeignDragObjectOver")
+          .mockReturnValue(false);
         const onDropForeignDragObject = tree.mockedHandler(
           "onDropForeignDragObject",
         );

package/src/features/drag-and-drop/feature.ts

@@ -8,13 +8,18 @@ import {
 } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
+const defaultCanDropForeignDragObject = () => false;
 export const dragAndDropFeature: FeatureImplementation = {
   key: "drag-and-drop",
   deps: ["selection"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     canDrop: (_, target) => target.item.isFolder(),
-    canDropForeignDragObject: () => false,
+    canDropForeignDragObject: defaultCanDropForeignDragObject,
+    canDragForeignDragObjectOver:
+      defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject
+        ? (dataTransfer) => dataTransfer.effectAllowed !== "none"
+        : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
     ...defaultConfig,
@@ -24,6 +29,19 @@ export const dragAndDropFeature: FeatureImplementation = {
     dnd: "setDndState",
   },
 
+  onTreeMount: (tree) => {
+    const listener = () => {
+      tree.applySubStateUpdate("dnd", null);
+    };
+    tree.getDataRef<DndDataRef>().current.windowDragEndListener = listener;
+    window.addEventListener("dragend", listener);
+  },
+  onTreeUnmount: (tree) => {
+    const { windowDragEndListener } = tree.getDataRef<DndDataRef>().current;
+    if (!windowDragEndListener) return;
+    window.removeEventListener("dragend", windowDragEndListener);
+  },
+
   treeInstance: {
     getDragTarget: ({ tree }) => {
       return tree.getState().dnd?.dragTarget ?? null;
@@ -106,7 +124,6 @@ export const dragAndDropFeature: FeatureImplementation = {
           const draggedItems = tree.getState().dnd?.draggedItems;
 
           dataRef.current.lastDragCode = undefined;
-          tree.applySubStateUpdate("dnd", null);
 
           if (draggedItems) {
             await config.onDrop?.(draggedItems, target);
@@ -150,9 +167,13 @@ export const dragAndDropFeature: FeatureImplementation = {
           e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
         }
 
-        if (config.createForeignDragObject) {
-          const { format, data } = config.createForeignDragObject(items);
-          e.dataTransfer?.setData(format, data);
+        if (config.createForeignDragObject && e.dataTransfer) {
+          const { format, data, dropEffect, effectAllowed } =
+            config.createForeignDragObject(items);
+          e.dataTransfer.setData(format, data);
+
+          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
+          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
         }
 
         tree.applySubStateUpdate("dnd", {
@@ -162,6 +183,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
 
       onDragOver: (e: DragEvent) => {
+        e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
         const nextDragCode = getDragCode(e, item, tree);
         if (nextDragCode === dataRef.current.lastDragCode) {
@@ -171,6 +193,7 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
         dataRef.current.lastDragCode = nextDragCode;
+        dataRef.current.lastDragEnter = Date.now();
 
         const target = getDragTarget(e, item, tree);
 
@@ -179,7 +202,7 @@ export const dragAndDropFeature: FeatureImplementation = {
           (!e.dataTransfer ||
             !tree
               .getConfig()
-              .canDropForeignDragObject?.(e.dataTransfer, target))
+              .canDragForeignDragObjectOver?.(e.dataTransfer, target))
         ) {
           dataRef.current.lastAllowDrop = false;
           return;
@@ -200,24 +223,37 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
 
       onDragLeave: () => {
-        const dataRef = tree.getDataRef<DndDataRef>();
-        dataRef.current.lastDragCode = "no-drag";
-        tree.applySubStateUpdate("dnd", (state) => ({
-          ...state,
-          draggingOverItem: undefined,
-          dragTarget: undefined,
-        }));
+        setTimeout(() => {
+          const dataRef = tree.getDataRef<DndDataRef>();
+          if ((dataRef.current.lastDragEnter ?? 0) + 100 >= Date.now()) return;
+          dataRef.current.lastDragCode = "no-drag";
+          tree.applySubStateUpdate("dnd", (state) => ({
+            ...state,
+            draggingOverItem: undefined,
+            dragTarget: undefined,
+          }));
+        }, 100);
       },
 
       onDragEnd: (e: DragEvent) => {
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
+          tree.getConfig();
         const draggedItems = tree.getState().dnd?.draggedItems;
-        tree.applySubStateUpdate("dnd", null);
 
         if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
           return;
         }
 
-        tree.getConfig().onCompleteForeignDrop?.(draggedItems);
+        const target = getDragTarget(e, item, tree);
+        if (
+          canDragForeignDragObjectOver &&
+          e.dataTransfer &&
+          !canDragForeignDragObjectOver(e.dataTransfer, target)
+        ) {
+          return;
+        }
+
+        onCompleteForeignDrop?.(draggedItems);
       },
 
       onDrop: async (e: DragEvent) => {
@@ -234,7 +270,6 @@ export const dragAndDropFeature: FeatureImplementation = {
         const draggedItems = tree.getState().dnd?.draggedItems;
 
         dataRef.current.lastDragCode = undefined;
-        tree.applySubStateUpdate("dnd", null);
 
         if (draggedItems) {
           await config.onDrop?.(draggedItems, target);

package/src/features/drag-and-drop/types.ts

@@ -3,6 +3,8 @@ import { ItemInstance, SetStateFn } from "../../types/core";
 export interface DndDataRef {
   lastDragCode?: string;
   lastAllowDrop?: boolean;
+  lastDragEnter?: number;
+  windowDragEndListener?: () => void;
 }
 
 export interface DndState<T> {
@@ -57,16 +59,31 @@ export type DragAndDropFeatureDef<T> = {
     createForeignDragObject?: (items: ItemInstance<T>[]) => {
       format: string;
       data: any;
+      dropEffect?: DataTransfer["dropEffect"];
+      effectAllowed?: DataTransfer["effectAllowed"];
     };
     setDragImage?: (items: ItemInstance<T>[]) => {
       imgElement: Element;
       xOffset?: number;
       yOffset?: number;
     };
+
+    /** Checks if a foreign drag object can be dropped on a target, validating that an actual drop can commence based on
+     * the data in the DataTransfer object. */
     canDropForeignDragObject?: (
       dataTransfer: DataTransfer,
       target: DragTarget<T>,
     ) => boolean;
+
+    /** Checks if a droppable visualization should be displayed when dragging a foreign object over a target. Since this
+     * is executed on a dragover event, `dataTransfer.getData()` is not available, so `dataTransfer.effectAllowed` or
+     * `dataTransfer.types` should be used instead. Before actually completing the drag, @{link canDropForeignDragObject}
+     * will be called by HT before applying the drop. */
+    canDragForeignDragObjectOver?: (
+      dataTransfer: DataTransfer,
+      target: DragTarget<T>,
+    ) => boolean;
+
     onDrop?: (
       items: ItemInstance<T>[],
       target: DragTarget<T>,

package/src/features/keyboard-drag-and-drop/feature.ts

@@ -191,7 +191,14 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {
-        tree.startKeyboardDrag(tree.getSelectedItems());
+        const selectedItems = tree.getSelectedItems();
+        const focusedItem = tree.getFocusedItem();
+
+        tree.startKeyboardDrag(
+          selectedItems.includes(focusedItem)
+            ? selectedItems
+            : selectedItems.concat(focusedItem),
+        );
       },
     },
     dragUp: {

package/src/features/keyboard-drag-and-drop/keyboard-drag-and-drop.spec.ts

@@ -49,6 +49,37 @@ describe("core-feature/keyboard-drag-and-drop", () => {
         tree.expect.substate("assistiveDndState", AssistiveDndState.Started);
       });
 
+      it("starts dragging only focused item", () => {
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          draggedItems: [tree.item("x3")],
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 19,
+            dragLineLevel: 0,
+            insertionIndex: 2,
+            item: tree.item("x"),
+          },
+        });
+      });
+
+      it("starts dragging both selected and focused item", () => {
+        tree.do.selectMultiple("x111", "x112");
+        tree.item("x3").setFocused();
+        tree.do.hotkey("startDrag");
+        tree.expect.substate("dnd", {
+          draggedItems: [tree.item("x111"), tree.item("x112"), tree.item("x3")],
+          dragTarget: {
+            childIndex: 3,
+            dragLineIndex: 19,
+            dragLineLevel: 0,
+            insertionIndex: 2,
+            item: tree.item("x"),
+          },
+        });
+      });
+
       it("moves down 1", () => {
         tree.do.selectMultiple("x111", "x112");
         tree.do.hotkey("startDrag");
@@ -355,13 +386,13 @@ describe("core-feature/keyboard-drag-and-drop", () => {
 
       it("doesnt go below end of tree", () => {
         const lastState = {
-          draggedItems: [tree.item("x111")],
+          draggedItems: [tree.item("x111"), tree.item("x3")],
           dragTarget: {
             item: tree.item("x"),
             childIndex: 4,
             dragLineIndex: 20,
             dragLineLevel: 0,
-            insertionIndex: 4,
+            insertionIndex: 3,
           },
         };
 
@@ -378,7 +409,7 @@ describe("core-feature/keyboard-drag-and-drop", () => {
 
       it("doesnt go above top of tree", () => {
         const firstState = {
-          draggedItems: [tree.item("x111")],
+          draggedItems: [tree.item("x111"), tree.item("x1")],
           dragTarget: {
             item: tree.item("x"),
             childIndex: 0,

package/src/features/main/types.ts

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

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

@@ -2,9 +2,13 @@ import { FeatureImplementation } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
 import { throwError } from "../../utilities/errors";
 
+const undefErrorMessage = "sync dataLoader returned undefined";
 const promiseErrorMessage = "sync dataLoader returned promise";
 const unpromise = <T>(data: T | Promise<T>): T => {
-  if (!data || (typeof data === "object" && "then" in data)) {
+  if (!data) {
+    throw throwError(undefErrorMessage);
+  }
+  if (typeof data === "object" && "then" in data) {
     throw throwError(promiseErrorMessage);
   }
   return data;

package/src/features/tree/feature.ts

@@ -76,8 +76,9 @@ export const treeFeature: FeatureImplementation<any> = {
     },
 
     getFocusedItem: ({ tree }) => {
+      const focusedItemId = tree.getState().focusedItem;
       return (
-        tree.getItemInstance(tree.getState().focusedItem ?? "") ??
+        (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null) ??
         tree.getItems()[0]
       );
     },
@@ -139,10 +140,10 @@ export const treeFeature: FeatureImplementation<any> = {
         ref: item.registerElement,
         role: "treeitem",
         "aria-setsize": itemMeta.setSize,
-        "aria-posinset": itemMeta.posInSet,
+        "aria-posinset": itemMeta.posInSet + 1,
         "aria-selected": "false",
         "aria-label": item.getItemName(),
-        "aria-level": itemMeta.level,
+        "aria-level": itemMeta.level + 1,
         tabIndex: item.isFocused() ? 0 : -1,
         onClick: (e: MouseEvent) => {
           item.setFocused();