@headless-tree/core 0.0.0-20250717001619 → 0.0.0-20250725212154

package/CHANGELOG.md

@@ -1,11 +1,12 @@
 # @headless-tree/core
 
-## 0.0.0-20250717001619
+## 0.0.0-20250725212154
 
 ### Patch Changes
 
 - b41e1d2: fixed a bug where ending drag without successful drop doesn't properly reset drag line (#132)
 - b413f74: Fix `aria-posinset` and `aria-level` to be 1-based indexing
+- a250b3b: Fix a bug where expand from the initial keyboard focus fails when rootItemId is an empty string
 
 ## 1.2.1
 

package/lib/cjs/features/checkboxes/feature.js

@@ -4,26 +4,30 @@ exports.checkboxesFeature = void 0;
 const utils_1 = require("../../utils");
 const types_1 = require("./types");
 const errors_1 = require("../../utilities/errors");
-const getAllLoadedDescendants = (tree, itemId) => {
+const getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
     if (!tree.getConfig().isItemFolder(tree.buildItemInstance(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;
 };
 exports.checkboxesFeature = {
     key: "checkboxes",
     overwrites: ["selection"],
     getInitialState: (initialState) => (Object.assign({ checkedItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => {
-        var _a;
+        var _a, _b, _c;
         const hasAsyncLoader = (_a = defaultConfig.features) === null || _a === void 0 ? void 0 : _a.some((f) => f.key === "async-data-loader");
-        if (hasAsyncLoader && !defaultConfig.canCheckFolders) {
-            (0, errors_1.throwError)(`!canCheckFolders not supported with async trees`);
+        if (hasAsyncLoader && defaultConfig.propagateCheckedState) {
+            (0, errors_1.throwError)(`propagateCheckedState not supported with async trees`);
         }
-        return Object.assign({ setCheckedItems: (0, utils_1.makeStateUpdater)("checkedItems", tree), canCheckFolders: hasAsyncLoader !== null && hasAsyncLoader !== void 0 ? hasAsyncLoader : false }, defaultConfig);
+        const propagateCheckedState = (_b = defaultConfig.propagateCheckedState) !== null && _b !== void 0 ? _b : !hasAsyncLoader;
+        const canCheckFolders = (_c = defaultConfig.canCheckFolders) !== null && _c !== void 0 ? _c : !propagateCheckedState;
+        return Object.assign({ setCheckedItems: (0, utils_1.makeStateUpdater)("checkedItems", tree), propagateCheckedState,
+            canCheckFolders }, defaultConfig);
     },
     stateHandlerNames: {
         checkedItems: "setCheckedItems",
@@ -54,12 +58,14 @@ exports.checkboxesFeature = {
                 item.setChecked();
             }
         },
-        getCheckedState: ({ item, tree, itemId }) => {
+        getCheckedState: ({ item, tree }) => {
             const { checkedItems } = tree.getState();
+            const { propagateCheckedState } = tree.getConfig();
+            const itemId = item.getId();
             if (checkedItems.includes(itemId)) {
                 return types_1.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 types_1.CheckedState.Checked;
@@ -71,23 +77,25 @@ exports.checkboxesFeature = {
             return types_1.CheckedState.Unchecked;
         },
         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) {
-                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => id !== itemId));
+            const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+            if (item.isFolder() && propagateCheckedState) {
+                const descendants = getAllLoadedDescendants(tree, itemId, canCheckFolders);
+                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => !descendants.includes(id) && id !== itemId));
             }
             else {
-                const descendants = getAllLoadedDescendants(tree, itemId);
-                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => !descendants.includes(id)));
+                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => id !== itemId));
             }
         },
     },

package/lib/cjs/features/checkboxes/types.d.ts

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

package/lib/cjs/features/tree/feature.js

@@ -56,8 +56,9 @@ exports.treeFeature = {
             return flatItems;
         },
         getFocusedItem: ({ tree }) => {
-            var _a, _b;
-            return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
+            var _a;
+            const focusedItemId = tree.getState().focusedItem;
+            return ((_a = (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null)) !== null && _a !== void 0 ? _a : tree.getItems()[0]);
         },
         getRootItem: ({ tree }) => {
             const { rootItemId } = tree.getConfig();

package/lib/esm/features/checkboxes/feature.js

@@ -1,26 +1,30 @@
 import { makeStateUpdater } from "../../utils";
 import { CheckedState } from "./types";
 import { throwError } from "../../utilities/errors";
-const getAllLoadedDescendants = (tree, itemId) => {
+const getAllLoadedDescendants = (tree, itemId, includeFolders = false) => {
     if (!tree.getConfig().isItemFolder(tree.buildItemInstance(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 = {
     key: "checkboxes",
     overwrites: ["selection"],
     getInitialState: (initialState) => (Object.assign({ checkedItems: [] }, initialState)),
     getDefaultConfig: (defaultConfig, tree) => {
-        var _a;
+        var _a, _b, _c;
         const hasAsyncLoader = (_a = defaultConfig.features) === null || _a === void 0 ? void 0 : _a.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`);
         }
-        return Object.assign({ setCheckedItems: makeStateUpdater("checkedItems", tree), canCheckFolders: hasAsyncLoader !== null && hasAsyncLoader !== void 0 ? hasAsyncLoader : false }, defaultConfig);
+        const propagateCheckedState = (_b = defaultConfig.propagateCheckedState) !== null && _b !== void 0 ? _b : !hasAsyncLoader;
+        const canCheckFolders = (_c = defaultConfig.canCheckFolders) !== null && _c !== void 0 ? _c : !propagateCheckedState;
+        return Object.assign({ setCheckedItems: makeStateUpdater("checkedItems", tree), propagateCheckedState,
+            canCheckFolders }, defaultConfig);
     },
     stateHandlerNames: {
         checkedItems: "setCheckedItems",
@@ -51,12 +55,14 @@ export const checkboxesFeature = {
                 item.setChecked();
             }
         },
-        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;
@@ -68,23 +74,25 @@ export const checkboxesFeature = {
             return CheckedState.Unchecked;
         },
         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) {
-                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => id !== itemId));
+            const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+            if (item.isFolder() && propagateCheckedState) {
+                const descendants = getAllLoadedDescendants(tree, itemId, canCheckFolders);
+                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => !descendants.includes(id) && id !== itemId));
             }
             else {
-                const descendants = getAllLoadedDescendants(tree, itemId);
-                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => !descendants.includes(id)));
+                tree.applySubStateUpdate("checkedItems", (items) => items.filter((id) => id !== itemId));
             }
         },
     },

package/lib/esm/features/checkboxes/types.d.ts

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

package/lib/esm/features/tree/feature.js

@@ -53,8 +53,9 @@ export const treeFeature = {
             return flatItems;
         },
         getFocusedItem: ({ tree }) => {
-            var _a, _b;
-            return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
+            var _a;
+            const focusedItemId = tree.getState().focusedItem;
+            return ((_a = (focusedItemId !== null ? tree.getItemInstance(focusedItemId) : null)) !== null && _a !== void 0 ? _a : tree.getItems()[0]);
         },
         getRootItem: ({ tree }) => {
             const { rootItemId } = tree.getConfig();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.0-20250717001619",
+  "version": "0.0.0-20250725212154",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",

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))) {
     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/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]
       );
     },

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

@@ -472,4 +472,14 @@ describe("core-feature/selections", () => {
       });
     });
   });
+
+  describe("empty rootItemId", () => {
+    factory.with({ rootItemId: "" }).forSuits((tree) => {
+      describe("focused item", () => {
+        it("returns correct initial focused item", () => {
+          expect(tree.instance.getFocusedItem().getId()).toBe("1");
+        });
+      });
+    });
+  });
 });