feat: async checkbox propagation (wip tests)

Author: lukasbach

.changeset/spotty-elephants-battle.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": patch
+---
+
+Checkbox propagation is now supported for trees with async data loaders!

packages/core/src/features/checkboxes/checkboxes.spec.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { TestTree } from "../../test-utils/test-tree";
 import { checkboxesFeature } from "./feature";
 import { CheckedState } from "./types";
@@ -12,22 +12,22 @@ describe("core-feature/checkboxes", () => {
     });
 
     it("should check items", async () => {
-      tree.item("x111").setChecked();
-      tree.item("x112").setChecked();
+      await tree.item("x111").setChecked();
+      await tree.item("x112").setChecked();
       expect(tree.instance.getState().checkedItems).toEqual(["x111", "x112"]);
     });
 
     it("should uncheck an item", async () => {
-      tree.item("x111").setChecked();
-      tree.item("x111").setUnchecked();
+      await tree.item("x111").setChecked();
+      await tree.item("x111").setUnchecked();
       expect(tree.instance.getState().checkedItems).not.toContain("x111");
     });
 
     it("should toggle checked state", async () => {
       const item = tree.item("x111");
-      item.toggleCheckedState();
+      await item.toggleCheckedState();
       expect(tree.instance.getState().checkedItems).toContain("x111");
-      item.toggleCheckedState();
+      await item.toggleCheckedState();
       expect(tree.instance.getState().checkedItems).not.toContain("x111");
     });
 
@@ -47,7 +47,7 @@ describe("core-feature/checkboxes", () => {
       });
 
       it("should create indeterminate state", async () => {
-        tree.item("x111").setChecked();
+        await tree.item("x111").setChecked();
         const refObject = { indeterminate: undefined };
         tree.item("x11").getCheckboxProps().ref(refObject);
         await vi.waitFor(() => expect(refObject.indeterminate).toBe(true));

packages/core/src/features/checkboxes/feature.ts

@@ -1,8 +1,4 @@
-import {
-  type FeatureImplementation,
-  FeatureImplementation,
-  TreeInstance,
-} from "../../types/core";
+import { type FeatureImplementation, TreeInstance } from "../../types/core";
 import { makeStateUpdater } from "../../utils";
 import { CheckedState } from "./types";
 import { throwError } from "../../utilities/errors";
@@ -16,7 +12,7 @@ const getAllLoadedDescendants = <T>(
     return [itemId];
   }
   const descendants = tree
-    .retrieveChildrenIds(itemId)
+    .retrieveChildrenIds(itemId, true)
     .map((child) => getAllLoadedDescendants(tree, child, includeFolders))
     .flat();
   return includeFolders ? [itemId, ...descendants] : descendants;
@@ -27,6 +23,7 @@ const getAllDescendants = async <T>(
   itemId: string,
   includeFolders = false,
 ): Promise<string[]> => {
+  await tree.loadItemData(itemId);
   if (!tree.getConfig().isItemFolder(tree.getItemInstance(itemId))) {
     return [itemId];
   }
@@ -113,6 +110,7 @@ export const checkboxesFeature: FeatureImplementation = {
 
       if (item.isFolder() && propagateCheckedState) {
         const descendants = getAllLoadedDescendants(tree, itemId);
+        if (descendants.length === 0) return CheckedState.Unchecked;
         if (descendants.every((d) => checkedItems.includes(d))) {
           return CheckedState.Checked;
         }

packages/sb-react/src/checkboxes/async-configurability.stories.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import type { Meta } from "@storybook/react";
+import React, { useState } from "react";
+import {
+  asyncDataLoaderFeature,
+  checkboxesFeature,
+  hotkeysCoreFeature,
+  selectionFeature,
+} from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import cx from "classnames";
+import { DemoItem, createDemoData } from "../utils/data";
+
+const meta = {
+  title: "React/Checkboxes/Async Configurability",
+  tags: ["feature/checkbox", "checkbox"],
+} satisfies Meta;
+
+export default meta;
+
+const { asyncDataLoader } = createDemoData();
+
+// story-start
+export const AsyncConfigurability = () => {
+  const [canCheckFolders, setCanCheckFolders] = useState(false);
+  const [propagateCheckedState, setPropagateCheckedState] = useState(true);
+  const tree = useTree<DemoItem>({
+    rootItemId: "root",
+    // initialState: { expandedItems: ["fruit", "berries"] },
+    getItemName: (item) => item.getItemData().name,
+    isItemFolder: (item) => !!item.getItemData().children,
+    dataLoader: asyncDataLoader,
+    createLoadingItemData: () => ({ name: "Loading..." }),
+    indent: 20,
+    canCheckFolders,
+    propagateCheckedState,
+    features: [
+      asyncDataLoaderFeature,
+      selectionFeature,
+      checkboxesFeature,
+      hotkeysCoreFeature,
+    ],
+  });
+
+  return (
+    <>
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={canCheckFolders}
+            onChange={(e) => setCanCheckFolders(e.target.checked)}
+          />
+          Can check folders
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={propagateCheckedState}
+            onChange={(e) => setPropagateCheckedState(e.target.checked)}
+          />
+          Propagate checked state
+        </label>
+      </div>
+      <div {...tree.getContainerProps()} className="tree">
+        {tree.getItems().map((item) => (
+          <div className="outeritem" key={item.getId()}>
+            <button
+              {...item.getProps()}
+              style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}
+            >
+              <div
+                className={cx("treeitem", {
+                  focused: item.isFocused(),
+                  expanded: item.isExpanded(),
+                  selected: item.isSelected(),
+                  folder: item.isFolder(),
+                })}
+              >
+                {item.getItemName()}
+              </div>
+            </button>
+            {!tree
+              .getState()
+              .loadingItemChildrens.some((child) =>
+                tree.getItemInstance(child).isDescendentOf(item.getId()),
+              ) ? (
+              <input type="checkbox" {...item.getCheckboxProps()} />
+            ) : (
+              <>Loading</>
+            )}
+          </div>
+        ))}
+      </div>
+      <pre>Checked Items: {JSON.stringify(tree.getState().checkedItems)}</pre>
+      <pre>
+        Loading Item Children:{" "}
+        {JSON.stringify(tree.getState().loadingItemChildrens)}
+      </pre>
+      <pre>
+        Loading Item Data: {JSON.stringify(tree.getState().loadingItemData)}
+      </pre>
+    </>
+  );
+};