@headless-tree/core 0.0.10 → 0.0.12

package/lib/cjs/features/drag-and-drop/types.d.ts

@@ -1,6 +1,7 @@
 import { ItemInstance, SetStateFn } from "../../types/core";
 export type DndDataRef = {
     lastDragCode?: string;
+    lastAllowDrop?: boolean;
 };
 export type DndState<T> = {
     draggedItems?: ItemInstance<T>[];
@@ -8,19 +9,23 @@ export type DndState<T> = {
     dragTarget?: DropTarget<T>;
 };
 export type DragLineData = {
-    intend: number;
+    indent: number;
     top: number;
     left: number;
-    right: number;
+    width: number;
 };
 export type DropTarget<T> = {
     item: ItemInstance<T>;
     childIndex: number;
     insertionIndex: number;
+    dragLineIndex: number;
+    dragLineLevel: number;
 } | {
     item: ItemInstance<T>;
     childIndex: null;
     insertionIndex: null;
+    dragLineIndex: null;
+    dragLineLevel: null;
 };
 export declare enum DropTargetPosition {
     Top = "top",
@@ -32,13 +37,16 @@ export type DragAndDropFeatureDef<T> = {
         dnd?: DndState<T> | null;
     };
     config: {
-        setDndState?: SetStateFn<DndState<T> | null>;
-        topLinePercentage?: number;
-        bottomLinePercentage?: number;
-        canDropInbetween?: boolean;
+        setDndState?: SetStateFn<DndState<T> | undefined | null>;
+        /** Defines the size of the area at the top and bottom of an item where, when an item is dropped, the item willö
+         * be placed above or below the item within the same parent, as opposed to being placed inside the item.
+         * If `canReorder` is `false`, this is ignored. */
+        reorderAreaPercentage?: number;
+        canReorder?: boolean;
         isItemDraggable?: (item: ItemInstance<T>) => boolean;
         canDrag?: (items: ItemInstance<T>[]) => boolean;
         canDrop?: (items: ItemInstance<T>[], target: DropTarget<T>) => boolean;
+        indent?: number;
         createForeignDragObject?: (items: ItemInstance<T>[]) => {
             format: string;
             data: any;
@@ -58,6 +66,7 @@ export type DragAndDropFeatureDef<T> = {
     treeInstance: {
         getDropTarget: () => DropTarget<T> | null;
         getDragLineData: () => DragLineData | null;
+        getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
     };
     itemInstance: {
         isDropTarget: () => boolean;

package/lib/cjs/features/drag-and-drop/utils.d.ts

@@ -1,6 +1,5 @@
 import { ItemInstance, TreeInstance } from "../../types/core";
 import { DropTarget } from "./types";
-export declare const getDragCode: ({ item, childIndex }: DropTarget<any>) => string;
-export declare const getDropOffset: (e: any, item: ItemInstance<any>) => number;
 export declare const canDrop: (dataTransfer: DataTransfer | null, target: DropTarget<any>, tree: TreeInstance<any>) => boolean;
-export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canDropInbetween?: boolean | undefined) => DropTarget<any>;
+export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
+export declare const getDropTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DropTarget<any>;

package/lib/cjs/features/drag-and-drop/utils.js

@@ -1,15 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDropTarget = exports.canDrop = exports.getDropOffset = exports.getDragCode = void 0;
-const types_1 = require("./types");
-const getDragCode = ({ item, childIndex }) => `${item.getId()}__${childIndex !== null && childIndex !== void 0 ? childIndex : "none"}`;
-exports.getDragCode = getDragCode;
-const getDropOffset = (e, item) => {
-    var _a;
-    const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    return bb ? (e.pageY - bb.top) / bb.height : 0.5;
-};
-exports.getDropOffset = getDropOffset;
+exports.getDropTarget = exports.getDragCode = exports.canDrop = void 0;
+var ItemDropCategory;
+(function (ItemDropCategory) {
+    ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
+    ItemDropCategory[ItemDropCategory["ExpandedFolder"] = 1] = "ExpandedFolder";
+    ItemDropCategory[ItemDropCategory["LastInGroup"] = 2] = "LastInGroup";
+})(ItemDropCategory || (ItemDropCategory = {}));
+var PlacementType;
+(function (PlacementType) {
+    PlacementType[PlacementType["ReorderAbove"] = 0] = "ReorderAbove";
+    PlacementType[PlacementType["ReorderBelow"] = 1] = "ReorderBelow";
+    PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
+    PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
+})(PlacementType || (PlacementType = {}));
 const canDrop = (dataTransfer, target, tree) => {
     var _a, _b, _c, _d;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
@@ -17,6 +21,11 @@ const canDrop = (dataTransfer, target, tree) => {
     if (draggedItems && !((_c = (_b = config.canDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target)) !== null && _c !== void 0 ? _c : true)) {
         return false;
     }
+    if (draggedItems &&
+        draggedItems.some((draggedItem) => target.item.getId() === draggedItem.getId() ||
+            target.item.isDescendentOf(draggedItem.getId()))) {
+        return false;
+    }
     if (!draggedItems &&
         dataTransfer &&
         !((_d = config.canDropForeignDragObject) === null || _d === void 0 ? void 0 : _d.call(config, dataTransfer, target))) {
@@ -25,52 +34,146 @@ const canDrop = (dataTransfer, target, tree) => {
     return true;
 };
 exports.canDrop = canDrop;
-const getDropTargetPosition = (offset, topLinePercentage, bottomLinePercentage) => {
-    if (offset < topLinePercentage) {
-        return types_1.DropTargetPosition.Top;
+const getItemDropCategory = (item) => {
+    if (item.isExpanded()) {
+        return ItemDropCategory.ExpandedFolder;
     }
-    if (offset > bottomLinePercentage) {
-        return types_1.DropTargetPosition.Bottom;
+    const parent = item.getParent();
+    if (parent && item.getIndexInParent() === parent.getItemMeta().setSize - 1) {
+        return ItemDropCategory.LastInGroup;
     }
-    return types_1.DropTargetPosition.Item;
+    return ItemDropCategory.Item;
 };
-const getDropTarget = (e, item, tree, canDropInbetween = tree.getConfig().canDropInbetween) => {
-    var _a, _b, _c, _d;
+const getTargetPlacement = (e, item, tree, canMakeChild) => {
+    var _a, _b, _c;
     const config = tree.getConfig();
+    if (!config.canReorder) {
+        return canMakeChild
+            ? { type: PlacementType.MakeChild }
+            : { type: PlacementType.ReorderBelow };
+    }
+    const bb = (_a = item.getElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const topPercent = bb ? (e.pageY - bb.top) / bb.height : 0.5;
+    const leftPixels = bb ? e.pageX - bb.left : 0;
+    const targetDropCategory = getItemDropCategory(item);
+    const reorderAreaPercentage = !canMakeChild
+        ? 0.5
+        : (_b = config.reorderAreaPercentage) !== null && _b !== void 0 ? _b : 0.3;
+    const indent = (_c = config.indent) !== null && _c !== void 0 ? _c : 20;
+    const makeChildType = canMakeChild
+        ? PlacementType.MakeChild
+        : PlacementType.ReorderBelow;
+    if (targetDropCategory === ItemDropCategory.ExpandedFolder) {
+        if (topPercent < reorderAreaPercentage) {
+            return { type: PlacementType.ReorderAbove };
+        }
+        return { type: makeChildType };
+    }
+    if (targetDropCategory === ItemDropCategory.LastInGroup) {
+        if (leftPixels < item.getItemMeta().level * indent) {
+            if (topPercent < 0.5) {
+                return { type: PlacementType.ReorderAbove };
+            }
+            return {
+                type: PlacementType.Reparent,
+                reparentLevel: Math.floor(leftPixels / indent),
+            };
+        }
+        // if not at left of item area, treat as if it was a normal item
+    }
+    // targetDropCategory === ItemDropCategory.Item
+    if (topPercent < reorderAreaPercentage) {
+        return { type: PlacementType.ReorderAbove };
+    }
+    if (topPercent > 1 - reorderAreaPercentage) {
+        return { type: PlacementType.ReorderBelow };
+    }
+    return { type: makeChildType };
+};
+const getDragCode = (e, item, tree) => {
+    const placement = getTargetPlacement(e, item, tree, true);
+    return [
+        item.getId(),
+        placement.type,
+        placement.type === PlacementType.Reparent ? placement.reparentLevel : 0,
+    ].join("__");
+};
+exports.getDragCode = getDragCode;
+const getNthParent = (item, n) => {
+    if (n === item.getItemMeta().level) {
+        return item;
+    }
+    return getNthParent(item.getParent(), n);
+};
+const getDropTarget = (e, item, tree, canReorder = tree.getConfig().canReorder) => {
+    var _a, _b, _c;
     const draggedItems = (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) !== null && _b !== void 0 ? _b : [];
-    const itemTarget = { item, childIndex: null, insertionIndex: null };
-    const parentTarget = {
-        item: item.getParent(),
+    const itemMeta = item.getItemMeta();
+    const parent = item.getParent();
+    const itemTarget = {
+        item,
         childIndex: null,
         insertionIndex: null,
+        dragLineIndex: null,
+        dragLineLevel: null,
     };
-    if (!canDropInbetween) {
-        if (!(0, exports.canDrop)(e.dataTransfer, parentTarget, tree)) {
-            return (0, exports.getDropTarget)(e, item.getParent(), tree, false);
+    const parentTarget = parent
+        ? {
+            item: parent,
+            childIndex: null,
+            insertionIndex: null,
+            dragLineIndex: null,
+            dragLineLevel: null,
         }
+        : null;
+    const canBecomeSibling = parentTarget && (0, exports.canDrop)(e.dataTransfer, parentTarget, tree);
+    const canMakeChild = (0, exports.canDrop)(e.dataTransfer, itemTarget, tree);
+    const placement = getTargetPlacement(e, item, tree, canMakeChild);
+    if (!canReorder &&
+        parent &&
+        canBecomeSibling &&
+        placement.type !== PlacementType.MakeChild) {
+        return parentTarget;
+    }
+    if (!canReorder && parent && !canBecomeSibling) {
+        // TODO! this breaks in story DND/Can Drop. Maybe move this logic into a composable DropTargetStrategy[] ?
+        return (0, exports.getDropTarget)(e, parent, tree, false);
+    }
+    if (!parent) {
+        // Shouldn't happen, but if dropped "next" to root item, just drop it inside
         return itemTarget;
     }
-    const canDropInside = (0, exports.canDrop)(e.dataTransfer, itemTarget, tree);
-    const offset = (0, exports.getDropOffset)(e, item);
-    const pos = canDropInside
-        ? getDropTargetPosition(offset, (_c = config.topLinePercentage) !== null && _c !== void 0 ? _c : 0.3, (_d = config.bottomLinePercentage) !== null && _d !== void 0 ? _d : 0.7)
-        : getDropTargetPosition(offset, 0.5, 0.5);
-    if (pos === types_1.DropTargetPosition.Item) {
+    if (placement.type === PlacementType.MakeChild) {
         return itemTarget;
     }
-    if (!(0, exports.canDrop)(e.dataTransfer, parentTarget, tree)) {
-        return (0, exports.getDropTarget)(e, item.getParent(), tree, false);
+    if (!canBecomeSibling) {
+        return (0, exports.getDropTarget)(e, parent, tree, false);
+    }
+    if (placement.type === PlacementType.Reparent) {
+        const reparentedTarget = getNthParent(item, placement.reparentLevel - 1);
+        const targetItemAbove = getNthParent(item, placement.reparentLevel); // .getItemBelow()!;
+        const targetIndex = targetItemAbove.getIndexInParent() + 1;
+        // TODO possibly count items dragged out above the new target
+        return {
+            item: reparentedTarget,
+            childIndex: targetIndex,
+            insertionIndex: targetIndex,
+            dragLineIndex: itemMeta.index + 1,
+            dragLineLevel: placement.reparentLevel,
+        };
     }
-    const childIndex = item.getIndexInParent() + (pos === types_1.DropTargetPosition.Top ? 0 : 1);
-    const numberOfDragItemsBeforeTarget = item
-        .getParent()
+    const maybeAddOneForBelow = placement.type === PlacementType.ReorderAbove ? 0 : 1;
+    const childIndex = item.getIndexInParent() + maybeAddOneForBelow;
+    const numberOfDragItemsBeforeTarget = (_c = parent
         .getChildren()
         .slice(0, childIndex)
         .reduce((counter, child) => child && (draggedItems === null || draggedItems === void 0 ? void 0 : draggedItems.some((i) => i.getId() === child.getId()))
         ? ++counter
-        : counter, 0);
+        : counter, 0)) !== null && _c !== void 0 ? _c : 0;
     return {
-        item: item.getParent(),
+        item: parent,
+        dragLineIndex: itemMeta.index + maybeAddOneForBelow,
+        dragLineLevel: itemMeta.level,
         childIndex,
         // TODO performance could be improved by computing this only when dragcode changed
         insertionIndex: childIndex - numberOfDragItemsBeforeTarget,

package/lib/cjs/features/expand-all/feature.d.ts

@@ -1,6 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { ExpandAllFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-export declare const expandAllFeature: FeatureImplementation<any, ExpandAllFeatureDef, MainFeatureDef | TreeFeatureDef<any> | SyncDataLoaderFeatureDef<any> | ExpandAllFeatureDef>;
+export declare const expandAllFeature: FeatureImplementation;

package/lib/cjs/features/expand-all/feature.js

@@ -13,13 +13,17 @@ exports.expandAllFeature = void 0;
 const utils_1 = require("../../utils");
 exports.expandAllFeature = {
     key: "expand-all",
-    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+    treeInstance: {
+        expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree }, cancelToken) {
             yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
-        }), collapseAll: () => {
+        }),
+        collapseAll: ({ tree }) => {
             tree.applySubStateUpdate("expandedItems", []);
             tree.rebuildTree();
-        } })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+        },
+    },
+    itemInstance: {
+        expandAll: (_a, cancelToken_1) => __awaiter(void 0, [_a, cancelToken_1], void 0, function* ({ tree, item }, cancelToken) {
             if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
                 return;
             }
@@ -32,10 +36,12 @@ exports.expandAllFeature = {
                 yield (0, utils_1.poll)(() => !tree.getState().loadingItems.includes(child.getId()));
                 yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
             })));
-        }), collapseAll: () => {
+        }),
+        collapseAll: ({ item }) => {
             for (const child of item.getChildren()) {
                 child === null || child === void 0 ? void 0 : child.collapseAll();
             }
             item.collapse();
-        } })),
+        },
+    },
 };

package/lib/cjs/features/hotkeys-core/feature.d.ts

@@ -1,4 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { HotkeysCoreFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-export declare const hotkeysCoreFeature: FeatureImplementation<any, HotkeysCoreFeatureDef<any>, MainFeatureDef | HotkeysCoreFeatureDef<any>>;
+export declare const hotkeysCoreFeature: FeatureImplementation;

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

@@ -1,12 +1,18 @@
-import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState, Updater } from "../../types/core";
+import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeInstance, TreeState, Updater } from "../../types/core";
 import { ItemMeta } from "../tree/types";
+export type InstanceTypeMap = {
+    itemInstance: ItemInstance<any>;
+    treeInstance: TreeInstance<any>;
+};
+export type InstanceBuilder = <T extends keyof InstanceTypeMap>(features: FeatureImplementation[], instanceType: T, buildOpts: (self: any) => any) => [instance: InstanceTypeMap[T], finalize: () => void];
 export type MainFeatureDef<T = any> = {
     state: {};
     config: {
         features?: FeatureImplementation<any>[];
         initialState?: Partial<TreeState<T>>;
         state?: Partial<TreeState<T>>;
-        setState?: SetStateFn<TreeState<T>>;
+        setState?: SetStateFn<Partial<TreeState<T>>>;
+        instanceBuilder?: InstanceBuilder;
     };
     treeInstance: {
         /** @internal */

package/lib/cjs/features/prop-memoization/feature.d.ts

@@ -0,0 +1,2 @@
+import { FeatureImplementation } from "../../types/core";
+export declare const propMemoizationFeature: FeatureImplementation;

package/lib/cjs/features/prop-memoization/feature.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.propMemoizationFeature = void 0;
+const memoize = (props, dataRef) => {
+    var _a;
+    (_a = dataRef.memoizedProps) !== null && _a !== void 0 ? _a : (dataRef.memoizedProps = {});
+    for (const key in props) {
+        if (typeof props[key] === "function") {
+            if (key in dataRef.memoizedProps) {
+                props[key] = dataRef.memoizedProps[key];
+            }
+            else {
+                dataRef.memoizedProps[key] = props[key];
+            }
+        }
+    }
+    return props;
+};
+exports.propMemoizationFeature = {
+    key: "prop-memoization",
+    overwrites: [
+        "main",
+        "async-data-loader",
+        "sync-data-loader",
+        "drag-and-drop",
+        "expand-all",
+        "hotkeys-core",
+        "renaming",
+        "search",
+        "selection",
+    ],
+    treeInstance: {
+        getContainerProps: ({ tree, prev }) => {
+            var _a;
+            const dataRef = tree.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            return memoize(props, dataRef.current);
+        },
+    },
+    itemInstance: {
+        getProps: ({ item, prev }) => {
+            var _a;
+            const dataRef = item.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            return memoize(props, dataRef.current);
+        },
+    },
+};

package/lib/cjs/features/prop-memoization/types.d.ts

@@ -0,0 +1,10 @@
+export type PropMemoizationDataRef = {
+    memoizedProps?: Record<string, any>;
+};
+export type PropMemoizationFeatureDef = {
+    state: {};
+    config: {};
+    treeInstance: {};
+    itemInstance: {};
+    hotkeys: never;
+};

package/lib/cjs/features/prop-memoization/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/features/renaming/feature.d.ts

@@ -1,5 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { RenamingFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-export declare const renamingFeature: FeatureImplementation<any, RenamingFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | RenamingFeatureDef<any>>;
+export declare const renamingFeature: FeatureImplementation;

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

@@ -9,39 +9,53 @@ exports.renamingFeature = {
         renamingItem: "setRenamingItem",
         renamingValue: "setRenamingValue",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { startRenamingItem: (itemId) => {
-            const item = instance.getItemInstance(itemId);
-            if (!item.canRename()) {
-                return;
-            }
-            instance.applySubStateUpdate("renamingItem", itemId);
-            instance.applySubStateUpdate("renamingValue", item.getItemName());
-        }, getRenamingItem: () => {
-            const itemId = instance.getState().renamingItem;
-            return itemId ? instance.getItemInstance(itemId) : null;
-        }, getRenamingValue: () => instance.getState().renamingValue || "", abortRenaming: () => {
-            instance.applySubStateUpdate("renamingItem", null);
-        }, completeRenaming: () => {
+    treeInstance: {
+        getRenamingItem: ({ tree }) => {
+            const itemId = tree.getState().renamingItem;
+            return itemId ? tree.getItemInstance(itemId) : null;
+        },
+        getRenamingValue: ({ tree }) => tree.getState().renamingValue || "",
+        abortRenaming: ({ tree }) => {
+            tree.applySubStateUpdate("renamingItem", null);
+            tree.updateDomFocus();
+        },
+        completeRenaming: ({ tree }) => {
             var _a;
-            const config = instance.getConfig();
-            const item = instance.getRenamingItem();
+            const config = tree.getConfig();
+            const item = tree.getRenamingItem();
             if (item) {
-                (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, instance.getState().renamingValue || "");
+                (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, tree.getState().renamingValue || "");
+            }
+            tree.applySubStateUpdate("renamingItem", null);
+            tree.updateDomFocus();
+        },
+        isRenamingItem: ({ tree }) => !!tree.getState().renamingItem,
+    },
+    itemInstance: {
+        startRenaming: ({ tree, item, itemId }) => {
+            if (!item.canRename()) {
+                return;
             }
-            instance.applySubStateUpdate("renamingItem", null);
-        }, isRenamingItem: () => !!instance.getState().renamingItem })),
-    createItemInstance: (prev, instance, tree) => (Object.assign(Object.assign({}, prev), { getRenameInputProps: () => ({
+            tree.applySubStateUpdate("renamingItem", itemId);
+            tree.applySubStateUpdate("renamingValue", item.getItemName());
+        },
+        getRenameInputProps: ({ tree }) => ({
             onBlur: () => tree.abortRenaming(),
             value: tree.getRenamingValue(),
             onChange: (e) => {
-                tree.applySubStateUpdate("renamingValue", e.target.value);
+                var _a;
+                // TODO custom type with e.target.value
+                tree.applySubStateUpdate("renamingValue", (_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
             },
-        }), canRename: () => { var _a, _b, _c; return (_c = (_b = (_a = tree.getConfig()).canRename) === null || _b === void 0 ? void 0 : _b.call(_a, instance)) !== null && _c !== void 0 ? _c : true; }, isRenaming: () => instance.getId() === tree.getState().renamingItem })),
+        }),
+        canRename: ({ tree, item }) => { var _a, _b, _c; return (_c = (_b = (_a = tree.getConfig()).canRename) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : true; },
+        isRenaming: ({ tree, item }) => item.getId() === tree.getState().renamingItem,
+    },
     hotkeys: {
         renameItem: {
             hotkey: "F2",
             handler: (e, tree) => {
-                tree.startRenamingItem(tree.getFocusedItem().getId());
+                tree.getFocusedItem().startRenaming();
             },
         },
         abortRenaming: {

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

@@ -5,13 +5,12 @@ export type RenamingFeatureDef<T> = {
         renamingValue?: string;
     };
     config: {
-        setRenamingItem?: SetStateFn<string | null>;
+        setRenamingItem?: SetStateFn<string | null | undefined>;
         setRenamingValue?: SetStateFn<string | undefined>;
         canRename?: (item: ItemInstance<T>) => boolean;
         onRename?: (item: ItemInstance<T>, value: string) => void;
     };
     treeInstance: {
-        startRenamingItem: (itemId: string) => void;
         getRenamingItem: () => ItemInstance<T> | null;
         getRenamingValue: () => string;
         abortRenaming: () => void;
@@ -22,6 +21,7 @@ export type RenamingFeatureDef<T> = {
         getRenameInputProps: () => any;
         canRename: () => boolean;
         isRenaming: () => boolean;
+        startRenaming: () => void;
     };
     hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
 };

package/lib/cjs/features/search/feature.d.ts

@@ -1,5 +1,2 @@
 import { FeatureImplementation } from "../../types/core";
-import { SearchFeatureDef } from "./types";
-import { MainFeatureDef } from "../main/types";
-import { TreeFeatureDef } from "../tree/types";
-export declare const searchFeature: FeatureImplementation<any, SearchFeatureDef<any>, MainFeatureDef | TreeFeatureDef<any> | SearchFeatureDef<any>>;
+export declare const searchFeature: FeatureImplementation;

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

@@ -10,39 +10,53 @@ exports.searchFeature = {
     stateHandlerNames: {
         search: "setSearch",
     },
-    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSearch: (search) => {
+    treeInstance: {
+        setSearch: ({ tree }, search) => {
             var _a;
-            instance.applySubStateUpdate("search", search);
-            (_a = instance
+            tree.applySubStateUpdate("search", search);
+            (_a = tree
                 .getItems()
-                .find((item) => {
-                var _a, _b;
-                return (_b = (_a = instance
-                    .getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, instance.getSearchValue(), item);
-            })) === null || _a === void 0 ? void 0 : _a.setFocused();
-        }, openSearch: (initialValue = "") => {
-            instance.setSearch(initialValue);
+                .find((item) => { var _a, _b; return (_b = (_a = tree.getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, tree.getSearchValue(), item); })) === null || _a === void 0 ? void 0 : _a.setFocused();
+        },
+        openSearch: ({ tree }, initialValue = "") => {
+            var _a, _b;
+            tree.setSearch(initialValue);
+            (_b = (_a = tree.getConfig()).onOpenSearch) === null || _b === void 0 ? void 0 : _b.call(_a);
             setTimeout(() => {
                 var _a;
-                (_a = instance
-                    .getDataRef()
-                    .current.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
+                (_a = tree.getDataRef().current.searchInput) === null || _a === void 0 ? void 0 : _a.focus();
             });
-        }, closeSearch: () => {
-            instance.setSearch(null);
-            instance.updateDomFocus();
-        }, isSearchOpen: () => instance.getState().search !== null, getSearchValue: () => instance.getState().search || "", registerSearchInputElement: (element) => {
-            const dataRef = instance.getDataRef();
+        },
+        closeSearch: ({ tree }) => {
+            var _a, _b;
+            tree.setSearch(null);
+            (_b = (_a = tree.getConfig()).onCloseSearch) === null || _b === void 0 ? void 0 : _b.call(_a);
+            tree.updateDomFocus();
+        },
+        isSearchOpen: ({ tree }) => tree.getState().search !== null,
+        getSearchValue: ({ tree }) => tree.getState().search || "",
+        registerSearchInputElement: ({ tree }, element) => {
+            const dataRef = tree.getDataRef();
             dataRef.current.searchInput = element;
             if (element && dataRef.current.keydownHandler) {
                 element.addEventListener("keydown", dataRef.current.keydownHandler);
             }
-        }, getSearchInputElement: () => { var _a; return (_a = instance.getDataRef().current.searchInput) !== null && _a !== void 0 ? _a : null; }, getSearchInputElementProps: () => ({
-            value: instance.getSearchValue(),
-            onChange: (e) => instance.setSearch(e.target.value),
-            onBlur: () => instance.closeSearch(),
-        }), getSearchMatchingItems: (0, utils_1.memo)((search, items) => items.filter((item) => { var _a, _b; return search && ((_b = (_a = instance.getConfig()).isSearchMatchingItem) === null || _b === void 0 ? void 0 : _b.call(_a, search, item)); }), () => [instance.getSearchValue(), instance.getItems()]) })),
-    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { isMatchingSearch: () => tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()) })),
+        },
+        getSearchInputElement: ({ tree }) => { var _a; return (_a = tree.getDataRef().current.searchInput) !== null && _a !== void 0 ? _a : null; },
+        getSearchInputElementProps: ({ tree }) => ({
+            value: tree.getSearchValue(),
+            onChange: (e) => tree.setSearch(e.target.value),
+            onBlur: () => tree.closeSearch(),
+        }),
+        getSearchMatchingItems: (0, utils_1.memo)(({ tree }) => [
+            tree.getSearchValue(),
+            tree.getItems(),
+            tree.getConfig().isSearchMatchingItem,
+        ], (search, items, isSearchMatchingItem) => items.filter((item) => search && (isSearchMatchingItem === null || isSearchMatchingItem === void 0 ? void 0 : isSearchMatchingItem(search, item)))),
+    },
+    itemInstance: {
+        isMatchingSearch: ({ tree, item }) => tree.getSearchMatchingItems().some((i) => i.getId() === item.getId()),
+    },
     hotkeys: {
         openSearch: {
             hotkey: "LetterOrNumber",

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

@@ -12,7 +12,6 @@ export type SearchFeatureDef<T> = {
         setSearch?: SetStateFn<string | null>;
         onOpenSearch?: () => void;
         onCloseSearch?: () => void;
-        onSearchMatchesItems?: (search: string, items: ItemInstance<T>[]) => void;
         isSearchMatchingItem?: (search: string, item: ItemInstance<T>) => boolean;
     };
     treeInstance: {