@headless-tree/core 1.1.0 → 1.2.1

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

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import { TestTree } from "../../test-utils/test-tree";
+import { checkboxesFeature } from "./feature";
+import { CheckedState } from "./types";
+
+const factory = TestTree.default({})
+  .withFeatures(checkboxesFeature)
+  .suits.sync().tree;
+
+describe("core-feature/checkboxes", () => {
+  it("should initialize with no checked items", async () => {
+    const tree = await factory.createTestCaseTree();
+    expect(tree.instance.getState().checkedItems).toEqual([]);
+  });
+
+  it("should check items", async () => {
+    const tree = await factory.createTestCaseTree();
+    tree.item("x111").setChecked();
+    tree.item("x112").setChecked();
+    expect(tree.instance.getState().checkedItems).toEqual(["x111", "x112"]);
+  });
+
+  it("should uncheck an item", async () => {
+    const tree = await factory
+      .with({ state: { checkedItems: ["x111"] } })
+      .createTestCaseTree();
+    tree.item("x111").setUnchecked();
+    expect(tree.instance.getState().checkedItems).not.toContain("x111");
+  });
+
+  it("should toggle checked state", async () => {
+    const tree = await factory.createTestCaseTree();
+    const item = tree.item("x111");
+
+    item.toggleCheckedState();
+    expect(tree.instance.getState().checkedItems).toContain("x111");
+
+    item.toggleCheckedState();
+    expect(tree.instance.getState().checkedItems).not.toContain("x111");
+  });
+
+  describe("props", () => {
+    it("should toggle checked state", async () => {
+      const tree = await factory.createTestCaseTree();
+      const item = tree.item("x111");
+
+      item.getCheckboxProps().onChange();
+      expect(tree.instance.getState().checkedItems).toContain("x111");
+
+      item.getCheckboxProps().onChange();
+      expect(tree.instance.getState().checkedItems).not.toContain("x111");
+    });
+
+    it("should return checked state in props", async () => {
+      const tree = await factory.createTestCaseTree();
+      tree.item("x111").setChecked();
+      expect(tree.item("x111").getCheckboxProps().checked).toBe(true);
+      expect(tree.item("x112").getCheckboxProps().checked).toBe(false);
+    });
+
+    it("should create indeterminate state", async () => {
+      const tree = await factory.createTestCaseTree();
+      tree.item("x111").setChecked();
+      const refObject = { indeterminate: undefined };
+      tree.item("x11").getCheckboxProps().ref(refObject);
+      expect(refObject.indeterminate).toBe(true);
+    });
+
+    it("should not create indeterminate state", async () => {
+      const tree = await factory.createTestCaseTree();
+      const refObject = { indeterminate: undefined };
+      tree.item("x11").getCheckboxProps().ref(refObject);
+      expect(refObject.indeterminate).toBe(false);
+    });
+  });
+
+  it("should handle folder checking when canCheckFolders is true", async () => {
+    const tree = await factory
+      .with({ canCheckFolders: true })
+      .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();
+
+    tree.item("x11").setChecked();
+    expect(tree.instance.getState().checkedItems).toEqual(
+      expect.arrayContaining(["x111", "x112", "x113", "x114"]),
+    );
+  });
+
+  it("should turn folder indeterminate", async () => {
+    const tree = await factory.createTestCaseTree();
+
+    tree.item("x111").setChecked();
+    expect(tree.item("x11").getCheckedState()).toBe(CheckedState.Indeterminate);
+  });
+
+  it("should turn folder checked if all children are checked", async () => {
+    const tree = await factory
+      .with({
+        isItemFolder: (item) => item.getItemData().length < 4,
+      })
+      .createTestCaseTree();
+
+    tree.item("x11").setChecked();
+    tree.item("x12").setChecked();
+    tree.item("x13").setChecked();
+    expect(tree.item("x1").getCheckedState()).toBe(CheckedState.Indeterminate);
+    tree.do.selectItem("x14");
+    tree.item("x141").setChecked();
+    tree.item("x142").setChecked();
+    tree.item("x143").setChecked();
+    expect(tree.item("x1").getCheckedState()).toBe(CheckedState.Indeterminate);
+    tree.item("x144").setChecked();
+    expect(tree.item("x1").getCheckedState()).toBe(CheckedState.Checked);
+  });
+
+  it("should return correct checked state for items", async () => {
+    const tree = await factory.createTestCaseTree();
+    const item = tree.instance.getItemInstance("x111");
+
+    expect(item.getCheckedState()).toBe(CheckedState.Unchecked);
+
+    item.setChecked();
+    expect(item.getCheckedState()).toBe(CheckedState.Checked);
+
+    item.setUnchecked();
+    expect(item.getCheckedState()).toBe(CheckedState.Unchecked);
+  });
+});

package/src/features/checkboxes/feature.ts

@@ -0,0 +1,119 @@
+import { FeatureImplementation, TreeInstance } from "../../types/core";
+import { makeStateUpdater } from "../../utils";
+import { CheckedState } from "./types";
+import { throwError } from "../../utilities/errors";
+
+const getAllLoadedDescendants = <T>(
+  tree: TreeInstance<T>,
+  itemId: string,
+): string[] => {
+  if (!tree.getConfig().isItemFolder(tree.buildItemInstance(itemId))) {
+    return [itemId];
+  }
+  return tree
+    .retrieveChildrenIds(itemId)
+    .map((child) => getAllLoadedDescendants(tree, child))
+    .flat();
+};
+
+export const checkboxesFeature: FeatureImplementation = {
+  key: "checkboxes",
+
+  overwrites: ["selection"],
+
+  getInitialState: (initialState) => ({
+    checkedItems: [],
+    ...initialState,
+  }),
+
+  getDefaultConfig: (defaultConfig, tree) => {
+    const hasAsyncLoader = defaultConfig.features?.some(
+      (f) => f.key === "async-data-loader",
+    );
+    if (hasAsyncLoader && !defaultConfig.canCheckFolders) {
+      throwError(`!canCheckFolders not supported with async trees`);
+    }
+    return {
+      setCheckedItems: makeStateUpdater("checkedItems", tree),
+      canCheckFolders: hasAsyncLoader ?? false,
+      ...defaultConfig,
+    };
+  },
+
+  stateHandlerNames: {
+    checkedItems: "setCheckedItems",
+  },
+
+  treeInstance: {
+    setCheckedItems: ({ tree }, checkedItems) => {
+      tree.applySubStateUpdate("checkedItems", checkedItems);
+    },
+  },
+
+  itemInstance: {
+    getCheckboxProps: ({ item }) => {
+      const checkedState = item.getCheckedState();
+      return {
+        onChange: item.toggleCheckedState,
+        checked: checkedState === CheckedState.Checked,
+        ref: (r: any) => {
+          if (r) {
+            r.indeterminate = checkedState === CheckedState.Indeterminate;
+          }
+        },
+      };
+    },
+
+    toggleCheckedState: ({ item }) => {
+      if (item.getCheckedState() === CheckedState.Checked) {
+        item.setUnchecked();
+      } else {
+        item.setChecked();
+      }
+    },
+
+    getCheckedState: ({ item, tree, itemId }) => {
+      const { checkedItems } = tree.getState();
+
+      if (checkedItems.includes(itemId)) {
+        return CheckedState.Checked;
+      }
+
+      if (item.isFolder() && !tree.getConfig().canCheckFolders) {
+        const descendants = getAllLoadedDescendants(tree, itemId);
+        if (descendants.every((d) => checkedItems.includes(d))) {
+          return CheckedState.Checked;
+        }
+        if (descendants.some((d) => checkedItems.includes(d))) {
+          return CheckedState.Indeterminate;
+        }
+      }
+
+      return CheckedState.Unchecked;
+    },
+
+    setChecked: ({ item, tree, itemId }) => {
+      if (!item.isFolder() || tree.getConfig().canCheckFolders) {
+        tree.applySubStateUpdate("checkedItems", (items) => [...items, itemId]);
+      } else {
+        tree.applySubStateUpdate("checkedItems", (items) => [
+          ...items,
+          ...getAllLoadedDescendants(tree, itemId),
+        ]);
+      }
+    },
+
+    setUnchecked: ({ item, tree, itemId }) => {
+      if (!item.isFolder() || tree.getConfig().canCheckFolders) {
+        tree.applySubStateUpdate("checkedItems", (items) =>
+          items.filter((id) => id !== itemId),
+        );
+      } else {
+        const descendants = getAllLoadedDescendants(tree, itemId);
+        tree.applySubStateUpdate("checkedItems", (items) =>
+          items.filter((id) => !descendants.includes(id)),
+        );
+      }
+    },
+  },
+};

package/src/features/checkboxes/types.ts

@@ -0,0 +1,28 @@
+import { SetStateFn } from "../../types/core";
+
+export enum CheckedState {
+  Checked = "checked",
+  Unchecked = "unchecked",
+  Indeterminate = "indeterminate",
+}
+
+export type CheckboxesFeatureDef<T> = {
+  state: {
+    checkedItems: string[];
+  };
+  config: {
+    setCheckedItems?: SetStateFn<string[]>;
+    canCheckFolders?: boolean;
+  };
+  treeInstance: {
+    setCheckedItems: (checkedItems: string[]) => void;
+  };
+  itemInstance: {
+    setChecked: () => void;
+    setUnchecked: () => void;
+    toggleCheckedState: () => void;
+    getCheckedState: () => CheckedState;
+    getCheckboxProps: () => Record<string, any>;
+  };
+  hotkeys: never;
+};

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

@@ -1,5 +1,5 @@
 import { FeatureImplementation } from "../../types/core";
-import { DndDataRef, DragLineData } from "./types";
+import { DndDataRef, DragLineData, DragTarget } from "./types";
 import {
   canDrop,
   getDragCode,
@@ -83,10 +83,38 @@ export const dragAndDropFeature: FeatureImplementation = {
         : { display: "none" };
     },
 
-    getContainerProps: ({ prev }, treeLabel) => {
+    getContainerProps: ({ prev, tree }, treeLabel) => {
       const prevProps = prev?.(treeLabel);
       return {
         ...prevProps,
+
+        onDragOver: (e: DragEvent) => {
+          e.preventDefault();
+        },
+
+        onDrop: async (e: DragEvent) => {
+          // TODO merge implementation with itemInstance.onDrop
+          const dataRef = tree.getDataRef<DndDataRef>();
+          const target: DragTarget<any> = { item: tree.getRootItem() };
+
+          if (!canDrop(e.dataTransfer, target, tree)) {
+            return;
+          }
+
+          e.preventDefault();
+          const config = tree.getConfig();
+          const draggedItems = tree.getState().dnd?.draggedItems;
+
+          dataRef.current.lastDragCode = undefined;
+          tree.applySubStateUpdate("dnd", null);
+
+          if (draggedItems) {
+            await config.onDrop?.(draggedItems, target);
+          } else if (e.dataTransfer) {
+            await config.onDropForeignDragObject?.(e.dataTransfer, target);
+          }
+        },
+
         style: {
           ...prevProps?.style,
           position: "relative",
@@ -101,6 +129,8 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       draggable: true,
 
+      onDragEnter: (e: DragEvent) => e.preventDefault(),
+
       onDragStart: (e: DragEvent) => {
         const selectedItems = tree.getSelectedItems();
         const items = selectedItems.includes(item) ? selectedItems : [item];
@@ -115,6 +145,11 @@ export const dragAndDropFeature: FeatureImplementation = {
           return;
         }
 
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
+        }
+
         if (config.createForeignDragObject) {
           const { format, data } = config.createForeignDragObject(items);
           e.dataTransfer?.setData(format, data);
@@ -186,6 +221,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
 
       onDrop: async (e: DragEvent) => {
+        e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
         const target = getDragTarget(e, item, tree);
 

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

@@ -58,6 +58,11 @@ export type DragAndDropFeatureDef<T> = {
       format: string;
       data: any;
     };
+    setDragImage?: (items: ItemInstance<T>[]) => {
+      imgElement: Element;
+      xOffset?: number;
+      yOffset?: number;
+    };
     canDropForeignDragObject?: (
       dataTransfer: DataTransfer,
       target: DragTarget<T>,

package/src/features/main/types.ts

@@ -36,6 +36,8 @@ 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/renaming/feature.ts

@@ -9,6 +9,7 @@ type InputEvent = {
 
 export const renamingFeature: FeatureImplementation = {
   key: "renaming",
+  overwrites: ["drag-and-drop"],
 
   getDefaultConfig: (defaultConfig, tree) => ({
     setRenamingItem: makeStateUpdater("renamingItem", tree),
@@ -72,6 +73,18 @@ export const renamingFeature: FeatureImplementation = {
 
     isRenaming: ({ tree, item }) =>
       item.getId() === tree.getState().renamingItem,
+
+    getProps: ({ prev, item }) => {
+      const isRenaming = item.isRenaming();
+      const prevProps = prev?.() ?? {};
+      return isRenaming
+        ? {
+            ...prevProps,
+            draggable: false,
+            onDragStart: () => {},
+          }
+        : prevProps;
+    },
   },
 
   hotkeys: {

package/src/features/renaming/renaming.spec.ts

@@ -93,6 +93,37 @@ describe("core-feature/renaming", () => {
       expect(setRenamingItem).toHaveBeenCalledWith(null);
     });
 
+    describe("dragging", async () => {
+      const suiteTree = await tree
+        .withFeatures({
+          key: "drag-and-drop",
+          itemInstance: {
+            getProps: ({ prev }: any) => ({
+              ...prev?.(),
+              draggable: true,
+              onDragStart: "initialOnDragStart",
+            }),
+          },
+        })
+        .createTestCaseTree();
+      suiteTree.resetBeforeEach();
+
+      it("sets draggable to undefined for items being renamed", () => {
+        const item = suiteTree.item("x1");
+        item.startRenaming();
+        const props = item.getProps();
+        expect(props.draggable).toBe(false);
+        expect(props.onDragStart).toStrictEqual(expect.any(Function));
+      });
+
+      it("retains draggable for items not being renamed", () => {
+        const item = suiteTree.item("x1");
+        const props = item.getProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBe("initialOnDragStart");
+      });
+    });
+
     describe("hotkeys", () => {
       it("starts renaming", () => {
         const setRenamingItem = tree.mockedHandler("setRenamingItem");

package/src/features/tree/feature.ts

@@ -82,6 +82,11 @@ export const treeFeature: FeatureImplementation<any> = {
       );
     },
 
+    getRootItem: ({ tree }) => {
+      const { rootItemId } = tree.getConfig();
+      return tree.getItemInstance(rootItemId);
+    },
+
     focusNextItem: ({ tree }) => {
       const focused = tree.getFocusedItem().getItemMeta();
       if (!focused) return;
@@ -126,6 +131,7 @@ export const treeFeature: FeatureImplementation<any> = {
       item.getElement()?.scrollIntoView(scrollIntoViewArg);
     },
     getId: ({ itemId }) => itemId,
+    getKey: ({ itemId }) => itemId, // TODO apply to all stories to use
     getProps: ({ item, prev }) => {
       const itemMeta = item.getItemMeta();
       return {

package/src/features/tree/types.ts

@@ -20,7 +20,7 @@ export type TreeFeatureDef<T> = {
     focusedItem: string | null;
   };
   config: {
-    isItemFolder: (item: ItemInstance<T>) => boolean;
+    isItemFolder: (item: ItemInstance<T>) => boolean; // TODO:breaking use item data as payload
     getItemName: (item: ItemInstance<T>) => string;
 
     onPrimaryAction?: (item: ItemInstance<T>) => void;
@@ -33,7 +33,8 @@ export type TreeFeatureDef<T> = {
     /** @internal */
     getItemsMeta: () => ItemMeta[];
 
-    getFocusedItem: () => ItemInstance<any>;
+    getFocusedItem: () => ItemInstance<T>;
+    getRootItem: () => ItemInstance<T>;
     focusNextItem: () => void;
     focusPreviousItem: () => void;
     updateDomFocus: () => void;
@@ -44,6 +45,7 @@ export type TreeFeatureDef<T> = {
   };
   itemInstance: {
     getId: () => string;
+    getKey: () => string;
     getProps: () => Record<string, any>;
     getItemName: () => string;
     getItemData: () => T;

package/src/index.ts

@@ -6,6 +6,7 @@ export { MainFeatureDef, InstanceBuilder } from "./features/main/types";
 export * from "./features/drag-and-drop/types";
 export * from "./features/keyboard-drag-and-drop/types";
 export * from "./features/selection/types";
+export * from "./features/checkboxes/types";
 export * from "./features/async-data-loader/types";
 export * from "./features/sync-data-loader/types";
 export * from "./features/hotkeys-core/types";
@@ -15,6 +16,7 @@ export * from "./features/expand-all/types";
 export * from "./features/prop-memoization/types";
 
 export * from "./features/selection/feature";
+export * from "./features/checkboxes/feature";
 export * from "./features/hotkeys-core/feature";
 export * from "./features/async-data-loader/feature";
 export * from "./features/sync-data-loader/feature";
@@ -31,3 +33,6 @@ export * from "./utilities/remove-items-from-parents";
 
 export * from "./core/build-proxified-instance";
 export * from "./core/build-static-instance";
+
+export { makeStateUpdater } from "./utils";
+export { isOrderedDragTarget } from "./features/drag-and-drop/utils";

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

@@ -78,6 +78,7 @@ export class TestTree<T = string> {
   get instance() {
     if (!this.treeInstance) {
       this.treeInstance = createTree(this.config);
+      this.treeInstance.rebuildTree();
     }
     return this.treeInstance;
   }

package/src/types/core.ts

@@ -13,6 +13,7 @@ import { RenamingFeatureDef } from "../features/renaming/types";
 import { ExpandAllFeatureDef } from "../features/expand-all/types";
 import { PropMemoizationFeatureDef } from "../features/prop-memoization/types";
 import { KeyboardDragAndDropFeatureDef } from "../features/keyboard-drag-and-drop/types";
+import { CheckboxesFeatureDef } from "../features/checkboxes/types";
 
 export type Updater<T> = T | ((old: T) => T);
 export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
@@ -53,6 +54,7 @@ export type RegisteredFeatures<T> =
   | MainFeatureDef<T>
   | TreeFeatureDef<T>
   | SelectionFeatureDef<T>
+  | CheckboxesFeatureDef<T>
   | DragAndDropFeatureDef<T>
   | KeyboardDragAndDropFeatureDef<T>
   | HotkeysCoreFeatureDef<T>