@headless-tree/core 0.0.0-20250723222210 → 0.0.0-20250726130412

package/lib/cjs/features/async-data-loader/types.d.ts

@@ -1,47 +0,0 @@
-import { SetStateFn } from "../../types/core";
-import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
-export interface AsyncDataLoaderDataRef<T = any> {
-    itemData: Record<string, T>;
-    childrenIds: Record<string, string[]>;
-}
-/**
- * @category Async Data Loader/General
- * */
-export type AsyncDataLoaderFeatureDef<T> = {
-    state: {
-        loadingItemData: string[];
-        loadingItemChildrens: string[];
-    };
-    config: {
-        rootItemId: string;
-        /** Will be called when HT retrieves item data for an item whose item data is asynchronously being loaded.
-         * Can be used to create placeholder data to use for rendering the tree item while it is loaded. If not defined,
-         * the tree item data will be null. */
-        createLoadingItemData?: () => T;
-        setLoadingItemData?: SetStateFn<string[]>;
-        setLoadingItemChildrens?: SetStateFn<string[]>;
-        onLoadedItem?: (itemId: string, item: T) => void;
-        onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
-    };
-    treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
-        /** @deprecated use loadItemData instead */
-        waitForItemDataLoaded: (itemId: string) => Promise<void>;
-        /** @deprecated use loadChildrenIds instead */
-        waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
-        loadItemData: (itemId: string) => Promise<T>;
-        loadChildrenIds: (itemId: string) => Promise<string[]>;
-    };
-    itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
-        /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible
-         * @param optimistic If true, the item will not trigger a state update on `loadingItemData`, and
-         * the tree will continue to display the old data until the new data has loaded. */
-        invalidateItemData: (optimistic?: boolean) => Promise<void>;
-        /** Invalidate fetched children ids for item, and triggers a refetch and subsequent rerender if the item is visible
-         * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
-         * the tree will continue to display the old data until the new data has loaded. */
-        invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
-        updateCachedChildrenIds: (childrenIds: string[]) => void;
-        isLoading: () => boolean;
-    };
-    hotkeys: SyncDataLoaderFeatureDef<T>["hotkeys"];
-};

package/lib/cjs/features/async-data-loader/types.js

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

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

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

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

@@ -1,94 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxesFeature = void 0;
-const utils_1 = require("../../utils");
-const types_1 = require("./types");
-const errors_1 = require("../../utilities/errors");
-const getAllLoadedDescendants = (tree, itemId) => {
-    if (!tree.getConfig().isItemFolder(tree.buildItemInstance(itemId))) {
-        return [itemId];
-    }
-    return tree
-        .retrieveChildrenIds(itemId)
-        .map((child) => getAllLoadedDescendants(tree, child))
-        .flat();
-};
-exports.checkboxesFeature = {
-    key: "checkboxes",
-    overwrites: ["selection"],
-    getInitialState: (initialState) => (Object.assign({ checkedItems: [] }, initialState)),
-    getDefaultConfig: (defaultConfig, tree) => {
-        var _a;
-        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`);
-        }
-        return Object.assign({ setCheckedItems: (0, utils_1.makeStateUpdater)("checkedItems", tree), canCheckFolders: hasAsyncLoader !== null && hasAsyncLoader !== void 0 ? 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 === types_1.CheckedState.Checked,
-                ref: (r) => {
-                    if (r) {
-                        r.indeterminate = checkedState === types_1.CheckedState.Indeterminate;
-                    }
-                },
-            };
-        },
-        toggleCheckedState: ({ item }) => {
-            if (item.getCheckedState() === types_1.CheckedState.Checked) {
-                item.setUnchecked();
-            }
-            else {
-                item.setChecked();
-            }
-        },
-        getCheckedState: ({ item, tree, itemId }) => {
-            const { checkedItems } = tree.getState();
-            if (checkedItems.includes(itemId)) {
-                return types_1.CheckedState.Checked;
-            }
-            if (item.isFolder() && !tree.getConfig().canCheckFolders) {
-                const descendants = getAllLoadedDescendants(tree, itemId);
-                if (descendants.every((d) => checkedItems.includes(d))) {
-                    return types_1.CheckedState.Checked;
-                }
-                if (descendants.some((d) => checkedItems.includes(d))) {
-                    return types_1.CheckedState.Indeterminate;
-                }
-            }
-            return types_1.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/lib/cjs/features/checkboxes/types.d.ts

@@ -1,26 +0,0 @@
-import { SetStateFn } from "../../types/core";
-export declare 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/lib/cjs/features/checkboxes/types.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckedState = void 0;
-var CheckedState;
-(function (CheckedState) {
-    CheckedState["Checked"] = "checked";
-    CheckedState["Unchecked"] = "unchecked";
-    CheckedState["Indeterminate"] = "indeterminate";
-})(CheckedState || (exports.CheckedState = CheckedState = {}));

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

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

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

@@ -1,215 +0,0 @@
-"use strict";
-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());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dragAndDropFeature = void 0;
-const utils_1 = require("./utils");
-const utils_2 = require("../../utils");
-exports.dragAndDropFeature = {
-    key: "drag-and-drop",
-    deps: ["selection"],
-    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ canDrop: (_, target) => target.item.isFolder(), canDropForeignDragObject: () => false, setDndState: (0, utils_2.makeStateUpdater)("dnd", tree), canReorder: true }, defaultConfig)),
-    stateHandlerNames: {
-        dnd: "setDndState",
-    },
-    onTreeMount: (tree) => {
-        const listener = () => {
-            tree.applySubStateUpdate("dnd", null);
-        };
-        tree.getDataRef().current.windowDragEndListener = listener;
-        window.addEventListener("dragend", listener);
-    },
-    onTreeUnmount: (tree) => {
-        const { windowDragEndListener } = tree.getDataRef().current;
-        if (!windowDragEndListener)
-            return;
-        window.removeEventListener("dragend", windowDragEndListener);
-    },
-    treeInstance: {
-        getDragTarget: ({ tree }) => {
-            var _a, _b;
-            return (_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.dragTarget) !== null && _b !== void 0 ? _b : null;
-        },
-        getDragLineData: ({ tree }) => {
-            var _a, _b, _c, _d, _e, _f;
-            const target = tree.getDragTarget();
-            const indent = ((_a = target === null || target === void 0 ? void 0 : target.item.getItemMeta().level) !== null && _a !== void 0 ? _a : 0) + 1;
-            const treeBb = (_b = tree.getElement()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            if (!target || !treeBb || !(0, utils_1.isOrderedDragTarget)(target))
-                return null;
-            const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
-            const targetItem = tree.getItems()[target.dragLineIndex];
-            if (!targetItem) {
-                const bb = (_e = (_d = tree
-                    .getItems()[target.dragLineIndex - 1]) === null || _d === void 0 ? void 0 : _d.getElement()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
-                if (bb) {
-                    return {
-                        indent,
-                        top: bb.bottom - treeBb.top,
-                        left: bb.left + leftOffset - treeBb.left,
-                        width: bb.width - leftOffset,
-                    };
-                }
-            }
-            const bb = (_f = targetItem.getElement()) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect();
-            if (bb) {
-                return {
-                    indent,
-                    top: bb.top - treeBb.top,
-                    left: bb.left + leftOffset - treeBb.left,
-                    width: bb.width - leftOffset,
-                };
-            }
-            return null;
-        },
-        getDragLineStyle: ({ tree }, topOffset = -1, leftOffset = -8) => {
-            const dragLine = tree.getDragLineData();
-            return dragLine
-                ? {
-                    position: "absolute",
-                    top: `${dragLine.top + topOffset}px`,
-                    left: `${dragLine.left + leftOffset}px`,
-                    width: `${dragLine.width - leftOffset}px`,
-                    pointerEvents: "none", // important to prevent capturing drag events
-                }
-                : { display: "none" };
-        },
-        getContainerProps: ({ prev, tree }, treeLabel) => {
-            const prevProps = prev === null || prev === void 0 ? void 0 : prev(treeLabel);
-            return Object.assign(Object.assign({}, prevProps), { onDragOver: (e) => {
-                    e.preventDefault();
-                }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
-                    var _a, _b, _c;
-                    // TODO merge implementation with itemInstance.onDrop
-                    const dataRef = tree.getDataRef();
-                    const target = { item: tree.getRootItem() };
-                    if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
-                        return;
-                    }
-                    e.preventDefault();
-                    const config = tree.getConfig();
-                    const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                    dataRef.current.lastDragCode = undefined;
-                    if (draggedItems) {
-                        yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
-                    }
-                    else if (e.dataTransfer) {
-                        yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
-                    }
-                }), style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
-        },
-    },
-    itemInstance: {
-        getProps: ({ tree, item, prev }) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { draggable: true, onDragEnter: (e) => e.preventDefault(), onDragStart: (e) => {
-                var _a, _b, _c, _d;
-                const selectedItems = tree.getSelectedItems();
-                const items = selectedItems.includes(item) ? selectedItems : [item];
-                const config = tree.getConfig();
-                if (!selectedItems.includes(item)) {
-                    tree.setSelectedItems([item.getItemMeta().itemId]);
-                }
-                if (!((_b = (_a = config.canDrag) === null || _a === void 0 ? void 0 : _a.call(config, items)) !== null && _b !== void 0 ? _b : true)) {
-                    e.preventDefault();
-                    return;
-                }
-                if (config.setDragImage) {
-                    const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-                    (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setDragImage(imgElement, xOffset !== null && xOffset !== void 0 ? xOffset : 0, yOffset !== null && yOffset !== void 0 ? yOffset : 0);
-                }
-                if (config.createForeignDragObject) {
-                    const { format, data } = config.createForeignDragObject(items);
-                    (_d = e.dataTransfer) === null || _d === void 0 ? void 0 : _d.setData(format, data);
-                }
-                tree.applySubStateUpdate("dnd", {
-                    draggedItems: items,
-                    draggingOverItem: tree.getFocusedItem(),
-                });
-            }, onDragOver: (e) => {
-                var _a, _b, _c;
-                const dataRef = tree.getDataRef();
-                const nextDragCode = (0, utils_1.getDragCode)(e, item, tree);
-                if (nextDragCode === dataRef.current.lastDragCode) {
-                    if (dataRef.current.lastAllowDrop) {
-                        e.preventDefault();
-                    }
-                    return;
-                }
-                dataRef.current.lastDragCode = nextDragCode;
-                const target = (0, utils_1.getDragTarget)(e, item, tree);
-                if (!((_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems) &&
-                    (!e.dataTransfer ||
-                        !((_c = (_b = tree
-                            .getConfig()).canDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(_b, e.dataTransfer, target)))) {
-                    dataRef.current.lastAllowDrop = false;
-                    return;
-                }
-                if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
-                    dataRef.current.lastAllowDrop = false;
-                    return;
-                }
-                tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { dragTarget: target, draggingOverItem: item })));
-                dataRef.current.lastAllowDrop = true;
-                e.preventDefault();
-            }, onDragLeave: () => {
-                const dataRef = tree.getDataRef();
-                dataRef.current.lastDragCode = "no-drag";
-                tree.applySubStateUpdate("dnd", (state) => (Object.assign(Object.assign({}, state), { draggingOverItem: undefined, dragTarget: undefined })));
-            }, onDragEnd: (e) => {
-                var _a, _b, _c, _d;
-                const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                if (((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
-                    return;
-                }
-                (_d = (_c = tree.getConfig()).onCompleteForeignDrop) === null || _d === void 0 ? void 0 : _d.call(_c, draggedItems);
-            }, onDrop: (e) => __awaiter(void 0, void 0, void 0, function* () {
-                var _a, _b, _c;
-                e.stopPropagation();
-                const dataRef = tree.getDataRef();
-                const target = (0, utils_1.getDragTarget)(e, item, tree);
-                if (!(0, utils_1.canDrop)(e.dataTransfer, target, tree)) {
-                    return;
-                }
-                e.preventDefault();
-                const config = tree.getConfig();
-                const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
-                dataRef.current.lastDragCode = undefined;
-                if (draggedItems) {
-                    yield ((_b = config.onDrop) === null || _b === void 0 ? void 0 : _b.call(config, draggedItems, target));
-                }
-                else if (e.dataTransfer) {
-                    yield ((_c = config.onDropForeignDragObject) === null || _c === void 0 ? void 0 : _c.call(config, e.dataTransfer, target));
-                }
-            }) })),
-        isDragTarget: ({ tree, item }) => {
-            const target = tree.getDragTarget();
-            return target ? target.item.getId() === item.getId() : false;
-        },
-        isDragTargetAbove: ({ tree, item }) => {
-            const target = tree.getDragTarget();
-            if (!target ||
-                !(0, utils_1.isOrderedDragTarget)(target) ||
-                target.item !== item.getParent())
-                return false;
-            return target.childIndex === item.getItemMeta().posInSet;
-        },
-        isDragTargetBelow: ({ tree, item }) => {
-            const target = tree.getDragTarget();
-            if (!target ||
-                !(0, utils_1.isOrderedDragTarget)(target) ||
-                target.item !== item.getParent())
-                return false;
-            return target.childIndex - 1 === item.getItemMeta().posInSet;
-        },
-        isDraggingOver: ({ tree, item }) => {
-            var _a, _b;
-            return ((_b = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggingOverItem) === null || _b === void 0 ? void 0 : _b.getId()) === item.getId();
-        },
-    },
-};

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

@@ -1,72 +0,0 @@
-import { ItemInstance, SetStateFn } from "../../types/core";
-export interface DndDataRef {
-    lastDragCode?: string;
-    lastAllowDrop?: boolean;
-    windowDragEndListener?: () => void;
-}
-export interface DndState<T> {
-    draggedItems?: ItemInstance<T>[];
-    draggingOverItem?: ItemInstance<T>;
-    dragTarget?: DragTarget<T>;
-}
-export interface DragLineData {
-    indent: number;
-    top: number;
-    left: number;
-    width: number;
-}
-export type DragTarget<T> = {
-    item: ItemInstance<T>;
-    childIndex: number;
-    insertionIndex: number;
-    dragLineIndex: number;
-    dragLineLevel: number;
-} | {
-    item: ItemInstance<T>;
-};
-export declare enum DragTargetPosition {
-    Top = "top",
-    Bottom = "bottom",
-    Item = "item"
-}
-export type DragAndDropFeatureDef<T> = {
-    state: {
-        dnd?: DndState<T> | null;
-    };
-    config: {
-        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;
-        canDrag?: (items: ItemInstance<T>[]) => boolean;
-        canDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => boolean;
-        indent?: number;
-        createForeignDragObject?: (items: ItemInstance<T>[]) => {
-            format: string;
-            data: any;
-        };
-        setDragImage?: (items: ItemInstance<T>[]) => {
-            imgElement: Element;
-            xOffset?: number;
-            yOffset?: number;
-        };
-        canDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => boolean;
-        onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
-        onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;
-        onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
-    };
-    treeInstance: {
-        getDragTarget: () => DragTarget<T> | null;
-        getDragLineData: () => DragLineData | null;
-        getDragLineStyle: (topOffset?: number, leftOffset?: number) => Record<string, any>;
-    };
-    itemInstance: {
-        isDragTarget: () => boolean;
-        isDragTargetAbove: () => boolean;
-        isDragTargetBelow: () => boolean;
-        isDraggingOver: () => boolean;
-    };
-    hotkeys: never;
-};

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragTargetPosition = void 0;
-var DragTargetPosition;
-(function (DragTargetPosition) {
-    DragTargetPosition["Top"] = "top";
-    DragTargetPosition["Bottom"] = "bottom";
-    DragTargetPosition["Item"] = "item";
-})(DragTargetPosition || (exports.DragTargetPosition = DragTargetPosition = {}));

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

@@ -1,27 +0,0 @@
-import { ItemInstance, TreeInstance } from "../../types/core";
-import { DragTarget } from "./types";
-export declare enum ItemDropCategory {
-    Item = 0,
-    ExpandedFolder = 1,
-    LastInGroup = 2
-}
-export declare const isOrderedDragTarget: <T>(dragTarget: DragTarget<T>) => dragTarget is {
-    item: ItemInstance<T>;
-    childIndex: number;
-    insertionIndex: number;
-    dragLineIndex: number;
-    dragLineLevel: number;
-};
-export declare const canDrop: (dataTransfer: DataTransfer | null, target: DragTarget<any>, tree: TreeInstance<any>) => boolean;
-export declare const getItemDropCategory: (item: ItemInstance<any>) => ItemDropCategory;
-export declare const getInsertionIndex: <T>(children: ItemInstance<T>[], childIndex: number, draggedItems: ItemInstance<T>[] | undefined) => number;
-export declare const getDragCode: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>) => string;
-/** @param item refers to the bottom-most item of the container, at which bottom is being reparented on (e.g. root-1-2-6)  */
-export declare const getReparentTarget: <T>(item: ItemInstance<T>, reparentLevel: number, draggedItems: ItemInstance<T>[] | undefined) => {
-    item: ItemInstance<any>;
-    childIndex: number;
-    insertionIndex: number;
-    dragLineIndex: number;
-    dragLineLevel: number;
-};
-export declare const getDragTarget: (e: any, item: ItemInstance<any>, tree: TreeInstance<any>, canReorder?: boolean | undefined) => DragTarget<any>;