@headless-tree/core 0.0.9 → 0.0.11

package/lib/esm/test-utils/test-tree-do.js

@@ -0,0 +1,95 @@
+import { expect, vi } from "vitest";
+import { TestTree } from "./test-tree";
+export class TestTreeDo {
+    itemInstance(itemId) {
+        return this.tree.instance.getItemInstance(itemId);
+    }
+    itemProps(itemId) {
+        return this.itemInstance(itemId).getProps();
+    }
+    constructor(tree) {
+        this.tree = tree;
+    }
+    selectItem(id) {
+        this.itemProps(id).onClick({});
+    }
+    shiftSelectItem(id) {
+        this.itemProps(id).onClick({ shiftKey: true });
+    }
+    ctrlSelectItem(id) {
+        this.itemProps(id).onClick({ ctrlKey: true });
+    }
+    ctrlShiftSelectItem(id) {
+        this.itemProps(id).onClick({ shiftKey: true, ctrlKey: true });
+    }
+    selectMultiple(...ids) {
+        ids.forEach((id) => this.ctrlSelectItem(id));
+    }
+    hotkey(hotkey, e = {}) {
+        var _a, _b;
+        const hotkeyConfig = Object.assign(Object.assign({}, this.tree.instance.getHotkeyPresets()[hotkey]), (_a = this.tree.instance.getConfig().hotkeys) === null || _a === void 0 ? void 0 : _a[hotkey]);
+        if (hotkeyConfig.isEnabled &&
+            !((_b = hotkeyConfig.isEnabled) === null || _b === void 0 ? void 0 : _b.call(hotkeyConfig, this.tree.instance))) {
+            throw new Error(`Hotkey "${hotkey}" is disabled`);
+        }
+        if (!hotkeyConfig.handler) {
+            throw new Error(`Hotkey "${hotkey}" has no handler`);
+        }
+        hotkeyConfig.handler(Object.assign(Object.assign({}, e), { stopPropagation: () => { }, preventDefault: () => { } }), this.tree.instance);
+    }
+    startDrag(itemId, event) {
+        if (!this.itemProps(itemId).draggable) {
+            throw new Error(`Can't drag item ${itemId}, has attribute draggable=false`);
+        }
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        this.itemProps(itemId).onDragStart(e);
+        return e;
+    }
+    dragOver(itemId, event) {
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        e.preventDefault.mockClear();
+        this.itemProps(itemId).onDragOver(e);
+        this.itemProps(itemId).onDragOver(e);
+        this.itemProps(itemId).onDragOver(e);
+        expect(e.preventDefault).toBeCalledTimes(3);
+        this.consistentCalls(e.preventDefault);
+        this.consistentCalls(e.stopPropagation);
+        return e;
+    }
+    dragOverNotAllowed(itemId, event) {
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        e.preventDefault.mockClear();
+        this.itemProps(itemId).onDragOver(e);
+        this.itemProps(itemId).onDragOver(e);
+        this.itemProps(itemId).onDragOver(e);
+        expect(e.preventDefault).toBeCalledTimes(0);
+        this.consistentCalls(e.preventDefault);
+        this.consistentCalls(e.stopPropagation);
+        return e;
+    }
+    dragLeave(itemId) {
+        this.itemProps(itemId).onDragLeave({});
+    }
+    dragEnd(itemId, event) {
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        this.itemProps(itemId).onDragEnd(e);
+        return e;
+    }
+    drop(itemId, event) {
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        this.itemProps(itemId).onDrop(e);
+        return e;
+    }
+    dragOverAndDrop(itemId, event) {
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        this.dragOver(itemId, e);
+        return this.drop(itemId, e);
+    }
+    consistentCalls(fn) {
+        if (!vi.isMockFunction(fn)) {
+            throw new Error("fn is not a mock");
+        }
+        expect(fn.mock.calls.length, "function called inconsistent times").toBeOneOf([0, 3]);
+        expect(new Set(fn.mock.calls.map((call) => call.join("__"))).size, "function called with inconsistent parameters").toBeOneOf([0, 1]);
+    }
+}

package/lib/esm/test-utils/test-tree-expect.d.ts

@@ -0,0 +1,15 @@
+import { DragEvent } from "react";
+import { TestTree } from "./test-tree";
+import { DropTarget } from "../features/drag-and-drop/types";
+export declare class TestTreeExpect<T> {
+    private tree;
+    protected itemInstance(itemId: string): import("..").ItemInstance<any>;
+    protected itemProps(itemId: string): Record<string, any>;
+    constructor(tree: TestTree<T>);
+    foldersExpanded(...itemIds: string[]): void;
+    foldersCollapsed(...itemIds: string[]): void;
+    hasChildren(itemId: string, children: string[]): void;
+    dropped(draggedItems: string[], target: DropTarget<any>): void;
+    dragOverNotAllowed(itemId: string, event?: DragEvent): DragEvent<Element>;
+    defaultDragLineProps(indent?: number): void;
+}

package/lib/esm/test-utils/test-tree-expect.js

@@ -0,0 +1,58 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { expect } from "vitest";
+import { TestTree } from "./test-tree";
+export class TestTreeExpect {
+    itemInstance(itemId) {
+        return this.tree.instance.getItemInstance(itemId);
+    }
+    itemProps(itemId) {
+        return this.itemInstance(itemId).getProps();
+    }
+    constructor(tree) {
+        this.tree = tree;
+    }
+    foldersExpanded(...itemIds) {
+        for (const itemId of itemIds) {
+            expect(this.tree.instance.getItemInstance(itemId).isExpanded(), `Expected ${itemId} to be expanded`).toBe(true);
+        }
+    }
+    foldersCollapsed(...itemIds) {
+        for (const itemId of itemIds) {
+            expect(this.tree.instance.getItemInstance(itemId).isExpanded(), `Expected ${itemId} to be collapsed`).toBe(false);
+        }
+    }
+    hasChildren(itemId, children) {
+        const item = this.tree.instance.getItemInstance(itemId);
+        const itemChildren = item.getChildren().map((child) => child.getId());
+        expect(itemChildren).toEqual(children);
+    }
+    dropped(draggedItems, target) {
+        expect(this.tree.instance.getConfig().onDrop).toBeCalledWith(draggedItems.map((id) => this.tree.item(id)), target);
+    }
+    dragOverNotAllowed(itemId, event) {
+        const e = event !== null && event !== void 0 ? event : TestTree.dragEvent();
+        e.preventDefault.mockClear();
+        this.itemProps(itemId).onDragOver(e);
+        this.itemProps(itemId).onDragOver(e);
+        this.itemProps(itemId).onDragOver(e);
+        expect(e.preventDefault, "onDragOver shouldn't call e.preventDefault if drag is not allowed").not.toBeCalled();
+        this.itemProps(itemId).onDrop(e);
+        expect(e.preventDefault, "onDrop shouldn't call e.preventDefault if drag is not allowed").not.toBeCalled();
+        expect(this.tree.instance.getConfig().onDrop, "onDrop handler shouldn't be called if drag is not allowed").not.toBeCalled();
+        return e;
+    }
+    defaultDragLineProps(indent = 0) {
+        expect(this.tree.instance.getDragLineData()).toEqual({
+            indent,
+            left: indent * 20,
+            right: 100,
+            top: 0,
+        });
+        expect(this.tree.instance.getDragLineStyle(0, 0)).toEqual({
+            left: `${indent * 20}px`,
+            pointerEvents: "none",
+            top: "0px",
+            width: `${100 - indent * 20}px`,
+        });
+    }
+}

package/lib/esm/test-utils/test-tree.d.ts

@@ -0,0 +1,47 @@
+import { DragEvent } from "react";
+import { TreeConfig, TreeInstance } from "../types/core";
+import { TestTreeDo } from "./test-tree-do";
+import { TestTreeExpect } from "./test-tree-expect";
+export declare class TestTree<T = string> {
+    private config;
+    readonly do: TestTreeDo<T>;
+    readonly expect: TestTreeExpect<T>;
+    private treeInstance;
+    private static asyncLoaderResolvers;
+    suits: {
+        sync: () => {
+            tree: TestTree<T>;
+            title: string;
+        };
+        async: () => {
+            tree: TestTree<T>;
+            title: string;
+        };
+        proxifiedSync: () => {
+            tree: TestTree<T>;
+            title: string;
+        };
+        proxifiedAsync: () => {
+            tree: TestTree<T>;
+            title: string;
+        };
+    };
+    forSuits(runSuite: (tree: TestTree<T>) => void): void;
+    get instance(): TreeInstance<T>;
+    private constructor();
+    static resolveAsyncLoaders(): Promise<void>;
+    resolveAsyncVisibleItems(): Promise<void>;
+    static default(config: Partial<TreeConfig<string>>): TestTree<string>;
+    with(config: Partial<TreeConfig<T>>): TestTree<T>;
+    resetBeforeEach(): void;
+    createTestCaseTree(): Promise<this>;
+    withFeatures(...features: any): TestTree<T>;
+    mockedHandler(handlerName: keyof TreeConfig<T>): import("vitest").Mock<(...args: any[]) => any>;
+    item(itemId: string): import("../types/core").ItemInstance<any>;
+    reset(): void;
+    debug(): void;
+    setElementBoundingBox(itemId: string, bb?: Partial<DOMRect>): void;
+    static dragEvent(pageX?: number, pageY?: number): DragEvent;
+    createTopDragEvent(indent?: number): DragEvent<Element>;
+    createBottomDragEvent(indent?: number): DragEvent<Element>;
+}

package/lib/esm/test-utils/test-tree.js

@@ -0,0 +1,191 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable import/no-extraneous-dependencies */
+import { beforeEach, describe, vi } from "vitest";
+import { createTree } from "../core/create-tree";
+import { TestTreeDo } from "./test-tree-do";
+import { TestTreeExpect } from "./test-tree-expect";
+import { syncDataLoaderFeature } from "../features/sync-data-loader/feature";
+import { asyncDataLoaderFeature } from "../features/async-data-loader/feature";
+import { buildProxiedInstance } from "../core/build-proxified-instance";
+vi.useFakeTimers({ shouldAdvanceTime: true });
+export class TestTree {
+    forSuits(runSuite) {
+        describe.for([
+            this.suits.sync(),
+            this.suits.async(),
+            this.suits.proxifiedSync(),
+            this.suits.proxifiedAsync(),
+        ])("$title", ({ tree }) => {
+            tree.resetBeforeEach();
+            runSuite(tree);
+        });
+    }
+    get instance() {
+        if (!this.treeInstance) {
+            this.treeInstance = createTree(this.config);
+        }
+        return this.treeInstance;
+    }
+    constructor(config) {
+        this.config = config;
+        this.do = new TestTreeDo(this);
+        this.expect = new TestTreeExpect(this);
+        this.treeInstance = null;
+        this.suits = {
+            sync: () => ({
+                tree: this.withFeatures(syncDataLoaderFeature),
+                title: "Synchronous Data Loader",
+            }),
+            async: () => ({
+                tree: this.withFeatures(asyncDataLoaderFeature),
+                title: "Asynchronous Data Loader",
+            }),
+            proxifiedSync: () => ({
+                tree: this.withFeatures(syncDataLoaderFeature).with({
+                    instanceBuilder: buildProxiedInstance,
+                }),
+                title: "Proxified Synchronous Data Loader",
+            }),
+            proxifiedAsync: () => ({
+                tree: this.withFeatures(asyncDataLoaderFeature).with({
+                    instanceBuilder: buildProxiedInstance,
+                }),
+                title: "Proxified Asynchronous Data Loader",
+            }),
+        };
+    }
+    static resolveAsyncLoaders() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            while (TestTree.asyncLoaderResolvers.length) {
+                (_a = TestTree.asyncLoaderResolvers.shift()) === null || _a === void 0 ? void 0 : _a();
+                yield new Promise((r) => {
+                    setTimeout(r);
+                });
+            }
+        });
+    }
+    resolveAsyncVisibleItems() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.instance.getItems();
+            yield TestTree.resolveAsyncLoaders();
+            this.instance.getItems().forEach((i) => i.getItemName());
+            yield TestTree.resolveAsyncLoaders();
+        });
+    }
+    static default(config) {
+        return new TestTree(Object.assign({ rootItemId: "x", createLoadingItemData: () => "loading", dataLoader: {
+                getItem: (id) => id,
+                getChildren: (id) => [`${id}1`, `${id}2`, `${id}3`, `${id}4`],
+            }, asyncDataLoader: {
+                getItem: (id) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise((r) => {
+                        r.debugName = `Loading getItem ${id}`;
+                        TestTree.asyncLoaderResolvers.push(r);
+                    });
+                    return id;
+                }),
+                getChildren: (id) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise((r) => {
+                        r.debugName = `Loading getChildren ${id}`;
+                        TestTree.asyncLoaderResolvers.push(r);
+                    });
+                    return [`${id}1`, `${id}2`, `${id}3`, `${id}4`];
+                }),
+            }, getItemName: (item) => item.getItemData(), indent: 20, isItemFolder: (item) => item.getItemMeta().level < 2, initialState: {
+                expandedItems: ["x1", "x11"],
+            }, features: [] }, config));
+    }
+    with(config) {
+        return new TestTree(Object.assign(Object.assign({}, this.config), config));
+    }
+    resetBeforeEach() {
+        beforeEach(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.createTestCaseTree();
+        }));
+    }
+    createTestCaseTree() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.reset();
+            vi.clearAllMocks();
+            // trigger instance creation
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            this.instance;
+            yield this.resolveAsyncVisibleItems();
+            return this;
+        });
+    }
+    withFeatures(...features) {
+        var _a;
+        return this.with({
+            features: [...((_a = this.config.features) !== null && _a !== void 0 ? _a : []), ...features],
+        });
+    }
+    mockedHandler(handlerName) {
+        var _a;
+        const mock = vi.fn();
+        if (this.treeInstance) {
+            (_a = this.treeInstance) === null || _a === void 0 ? void 0 : _a.setConfig((prev) => (Object.assign(Object.assign({}, prev), { [handlerName]: mock })));
+        }
+        else {
+            this.config[handlerName] = mock;
+        }
+        return mock;
+    }
+    item(itemId) {
+        return this.instance.getItemInstance(itemId);
+    }
+    reset() {
+        this.treeInstance = null;
+        TestTree.asyncLoaderResolvers = [];
+    }
+    debug() {
+        console.log(this.instance
+            .getItems()
+            .map((item) => [
+            "  ".repeat(item.getItemMeta().level),
+            '"',
+            item.getItemName(),
+            '"',
+        ].join(""))
+            .join("\n"));
+    }
+    setElementBoundingBox(itemId, bb = {
+        left: 0,
+        right: 100,
+        top: 0,
+        height: 20,
+    }) {
+        this.instance.getItemInstance(itemId).registerElement({
+            getBoundingClientRect: () => bb,
+        });
+    }
+    static dragEvent(pageX = 1000, pageY = 0) {
+        return {
+            preventDefault: vi.fn(),
+            stopPropagation: vi.fn(),
+            dataTransfer: {
+                setData: vi.fn(),
+                getData: vi.fn(),
+                dropEffect: "unchaged-from-test",
+            },
+            pageX,
+            pageY,
+        };
+    }
+    createTopDragEvent(indent = 0) {
+        return TestTree.dragEvent(indent * 20, 1);
+    }
+    createBottomDragEvent(indent = 0) {
+        return TestTree.dragEvent(indent * 20, 19);
+    }
+}
+TestTree.asyncLoaderResolvers = [];

package/lib/esm/types/core.d.ts

@@ -10,11 +10,12 @@ import { RenamingFeatureDef } from "../features/renaming/types";
 import { ExpandAllFeatureDef } from "../features/expand-all/types";
 export type Updater<T> = T | ((old: T) => T);
 export type SetStateFn<T> = (updaterOrValue: Updater<T>) => void;
+type FunctionMap = Record<string, (...args: any[]) => any>;
 export type FeatureDef = {
-    state: object;
-    config: object;
-    treeInstance: object;
-    itemInstance: object;
+    state: any;
+    config: any;
+    treeInstance: FunctionMap;
+    itemInstance: FunctionMap;
     hotkeys: string;
 };
 export type EmptyFeatureDef = {
@@ -49,19 +50,34 @@ export interface ItemInstance<T> extends ItemInstanceType<T> {
 export type HotkeyName<F extends FeatureDef = FeatureDefs<any>> = MergedFeatures<F>["hotkeys"];
 export type HotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Record<HotkeyName<F>, HotkeyConfig<T>>;
 export type CustomHotkeysConfig<T, F extends FeatureDef = FeatureDefs<T>> = Partial<Record<HotkeyName<F> | `custom${string}`, Partial<HotkeyConfig<T>>>>;
-export type FeatureImplementation<T = any, D extends FeatureDef = any, F extends FeatureDef = EmptyFeatureDef> = {
+type MayReturnNull<T extends (...x: any[]) => any> = (...args: Parameters<T>) => ReturnType<T> | null;
+export type ItemInstanceOpts<ItemInstance extends FunctionMap = FunctionMap, TreeInstance extends FunctionMap = FunctionMap, Key extends keyof ItemInstance = any> = {
+    item: ItemInstance;
+    tree: TreeInstance;
+    itemId: string;
+    prev?: MayReturnNull<ItemInstance[Key]>;
+};
+export type TreeInstanceOpts<TreeInstance extends FunctionMap = FunctionMap, Key extends keyof TreeInstance = any> = {
+    tree: TreeInstance;
+    prev?: MayReturnNull<TreeInstance[Key]>;
+};
+export type FeatureImplementation<T = any, SelfFeatureDef extends FeatureDef = any, DepFeaturesDef extends FeatureDef = any> = {
     key?: string;
     deps?: string[];
     overwrites?: string[];
-    stateHandlerNames?: Partial<Record<keyof MergedFeatures<F>["state"], keyof MergedFeatures<F>["config"]>>;
-    getInitialState?: (initialState: Partial<MergedFeatures<F>["state"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["state"] & MergedFeatures<F>["state"]>;
-    getDefaultConfig?: (defaultConfig: Partial<MergedFeatures<F>["config"]>, tree: MergedFeatures<F>["treeInstance"]) => Partial<D["config"] & MergedFeatures<F>["config"]>;
-    createTreeInstance?: (prev: MergedFeatures<F>["treeInstance"], instance: MergedFeatures<F>["treeInstance"]) => D["treeInstance"] & MergedFeatures<F>["treeInstance"];
-    createItemInstance?: (prev: MergedFeatures<F>["itemInstance"], item: MergedFeatures<F>["itemInstance"], tree: MergedFeatures<F>["treeInstance"], itemId: string) => D["itemInstance"] & MergedFeatures<F>["itemInstance"];
-    onTreeMount?: (instance: MergedFeatures<F>["treeInstance"], treeElement: HTMLElement) => void;
-    onTreeUnmount?: (instance: MergedFeatures<F>["treeInstance"], treeElement: HTMLElement) => void;
-    onItemMount?: (instance: MergedFeatures<F>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<F>["treeInstance"]) => void;
-    onItemUnmount?: (instance: MergedFeatures<F>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<F>["treeInstance"]) => void;
-    hotkeys?: HotkeysConfig<T, D>;
+    stateHandlerNames?: Partial<Record<keyof MergedFeatures<DepFeaturesDef>["state"], keyof MergedFeatures<DepFeaturesDef>["config"]>>;
+    getInitialState?: (initialState: Partial<MergedFeatures<DepFeaturesDef>["state"]>, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => Partial<SelfFeatureDef["state"] & MergedFeatures<DepFeaturesDef>["state"]>;
+    getDefaultConfig?: (defaultConfig: Partial<MergedFeatures<DepFeaturesDef>["config"]>, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => Partial<SelfFeatureDef["config"] & MergedFeatures<DepFeaturesDef>["config"]>;
+    treeInstance?: {
+        [key in keyof (SelfFeatureDef["treeInstance"] & MergedFeatures<DepFeaturesDef>["treeInstance"])]?: (opts: TreeInstanceOpts<SelfFeatureDef["treeInstance"] & MergedFeatures<DepFeaturesDef>["treeInstance"], key>, ...args: Parameters<(SelfFeatureDef["treeInstance"] & MergedFeatures<DepFeaturesDef>["treeInstance"])[key]>) => void;
+    };
+    itemInstance?: {
+        [key in keyof (SelfFeatureDef["itemInstance"] & MergedFeatures<DepFeaturesDef>["itemInstance"])]?: (opts: ItemInstanceOpts<SelfFeatureDef["itemInstance"] & MergedFeatures<DepFeaturesDef>["itemInstance"], SelfFeatureDef["treeInstance"] & MergedFeatures<DepFeaturesDef>["treeInstance"], key>, ...args: Parameters<(SelfFeatureDef["itemInstance"] & MergedFeatures<DepFeaturesDef>["itemInstance"])[key]>) => void;
+    };
+    onTreeMount?: (instance: MergedFeatures<DepFeaturesDef>["treeInstance"], treeElement: HTMLElement) => void;
+    onTreeUnmount?: (instance: MergedFeatures<DepFeaturesDef>["treeInstance"], treeElement: HTMLElement) => void;
+    onItemMount?: (instance: MergedFeatures<DepFeaturesDef>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => void;
+    onItemUnmount?: (instance: MergedFeatures<DepFeaturesDef>["itemInstance"], itemElement: HTMLElement, tree: MergedFeatures<DepFeaturesDef>["treeInstance"]) => void;
+    hotkeys?: HotkeysConfig<T, SelfFeatureDef>;
 };
 export {};

package/lib/esm/utilities/errors.d.ts

@@ -0,0 +1 @@
+export declare const throwError: (message: string) => Error;

package/lib/esm/utilities/errors.js

@@ -0,0 +1 @@
+export const throwError = (message) => Error(`Headless Tree: ${message}`);

package/lib/esm/utilities/insert-items-at-target.js

@@ -1,11 +1,15 @@
 export const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
     // add moved items to new common parent, if dropped onto parent
     if (target.childIndex === null) {
-        onChangeChildren(target.item, [
+        const newChildren = [
             ...target.item.getChildren().map((item) => item.getId()),
             ...itemIds,
-        ]);
-        // TODO items[0].getTree().rebuildTree();
+        ];
+        onChangeChildren(target.item, newChildren);
+        if (target.item && "updateCachedChildrenIds" in target.item) {
+            target.item.updateCachedChildrenIds(newChildren);
+        }
+        target.item.getTree().rebuildTree();
         return;
     }
     // add moved items to new common parent, if dropped between siblings
@@ -16,5 +20,8 @@ export const insertItemsAtTarget = (itemIds, target, onChangeChildren) => {
         ...oldChildren.slice(target.insertionIndex).map((item) => item.getId()),
     ];
     onChangeChildren(target.item, newChildren);
+    if (target.item && "updateCachedChildrenIds" in target.item) {
+        target.item.updateCachedChildrenIds(newChildren);
+    }
     target.item.getTree().rebuildTree();
 };

package/lib/esm/utilities/remove-items-from-parents.js

@@ -1,12 +1,18 @@
 export const removeItemsFromParents = (movedItems, onChangeChildren) => {
-    var _a;
-    // TODO bulk sibling changes together
-    for (const item of movedItems) {
-        const siblings = (_a = item.getParent()) === null || _a === void 0 ? void 0 : _a.getChildren();
-        if (siblings) {
-            onChangeChildren(item.getParent(), siblings
-                .filter((sibling) => sibling.getId() !== item.getId())
-                .map((i) => i.getId()));
+    const movedItemsIds = movedItems.map((item) => item.getId());
+    const uniqueParents = [
+        ...new Set(movedItems.map((item) => item.getParent())),
+    ];
+    for (const parent of uniqueParents) {
+        const siblings = parent === null || parent === void 0 ? void 0 : parent.getChildren();
+        if (siblings && parent) {
+            const newChildren = siblings
+                .filter((sibling) => !movedItemsIds.includes(sibling.getId()))
+                .map((i) => i.getId());
+            onChangeChildren(parent, newChildren);
+            if (parent && "updateCachedChildrenIds" in parent) {
+                parent === null || parent === void 0 ? void 0 : parent.updateCachedChildrenIds(newChildren);
+            }
         }
     }
     movedItems[0].getTree().rebuildTree();

package/lib/esm/utils.d.ts

@@ -1,6 +1,6 @@
-import { TreeState, Updater } from "./types/core";
+import { SetStateFn, TreeState, Updater } from "./types/core";
 export type NoInfer<T> = [T][T extends any ? 0 : never];
-export declare const memo: <D extends readonly any[], R>(fn: (...args_0: D) => R, deps: () => [...D]) => () => R;
+export declare const memo: <D extends readonly any[], P extends readonly any[], R>(deps: (...args: [...P]) => [...D], fn: (...args: [...D]) => R) => (...a: P) => R;
 export declare function functionalUpdate<T>(updater: Updater<T>, input: T): T;
-export declare function makeStateUpdater<K extends keyof TreeState<any>>(key: K, instance: unknown): (updater: Updater<TreeState<any>[K]>) => void;
+export declare function makeStateUpdater<K extends keyof TreeState<any>>(key: K, instance: unknown): SetStateFn<TreeState<any>[K]>;
 export declare const poll: (fn: () => boolean, interval?: number, timeout?: number) => Promise<void>;

package/lib/esm/utils.js

@@ -1,8 +1,8 @@
-export const memo = (fn, deps) => {
+export const memo = (deps, fn) => {
     let value;
     let oldDeps = null;
-    return () => {
-        const newDeps = deps();
+    return (...a) => {
+        const newDeps = deps(...a);
         if (!value) {
             value = fn(...newDeps);
             oldDeps = newDeps;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.9",
+  "version": "0.0.11",
+  "type": "module",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/esm/index.d.ts",
@@ -8,7 +9,8 @@
   "scripts": {
     "build:cjs": "tsc -m commonjs --outDir lib/cjs",
     "build:esm": "tsc",
-    "start": "tsc -w"
+    "start": "tsc -w",
+    "test": "vitest run"
   },
   "repository": {
     "type": "git",
@@ -18,6 +20,8 @@
   "author": "Lukas Bach <npm@lukasbach.com>",
   "license": "MIT",
   "devDependencies": {
-    "typescript": "^5.4.2"
+    "jsdom": "^26.0.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.3"
   }
 }