@headless-tree/core 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @headless-tree/core
 
+## 1.2.1
+
+### Patch Changes
+
+- 344011a: fixed an issue where dropping items on an empty tree didn't trigger any events
+- 9f418f8: support setting the drag preview with the `setDragImage` option (#115)
+- 309feba: fixed an issue where the drag-forbidden cursor is shown briefly between changing drag targets (#114)
+
+## 1.2.0
+
+### Minor Changes
+
+- 647a072: Fixed incorrect package.json exports configurations to proper ESM and CJS exports (#104)
+- 349d36e: change package.json["module"] to commonjs to fix inconsistent package definitiuons (#104)
+- e2faf37: Fixed an issue async data loaders that resolve data before the tree is mounted can cause the tree to not render at all
+
+  Note: When using the `createTree()` API directly instead of going through the React `useTree` API, an additional call
+  to `tree.rebuildItems()` afterwards will be necessary. This change is marked as minor release regardless, since `createTree` is
+  currently not a publically documented feature.
+
+### Patch Changes
+
+- 727c982: export makeStateUpdater from core package
+- c041a3f: expose `isOrderedDragTarget` as utility method to differentiate between ordered and unordered drag targets (#108)
+- 2887b0c: Added a `item.getKey()` utility method to use for generating React keys. For now, this just returns the item id, so no migration is needed from using `item.getId()` as React keys.
+- 4e79bc7: Fixed a bug where `feature.overwrites` is not always respected when features are sorted during tree initialization
+- 0669580: Fixed a bug where items that call `item.getProps` while being renamed, can be dragged while being renamed (#110)
+
 ## 1.1.0
 
 ### Minor Changes

package/lib/cjs/core/create-tree.js

@@ -14,6 +14,18 @@ const verifyFeatures = (features) => {
         }
     }
 };
+// Check all possible pairs and sort the array
+const exhaustiveSort = (arr, compareFn) => {
+    const n = arr.length;
+    for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++) {
+            if (compareFn(arr[j], arr[i]) < 0) {
+                [arr[i], arr[j]] = [arr[j], arr[i]];
+            }
+        }
+    }
+    return arr;
+};
 const compareFeatures = (originalOrder) => (feature1, feature2) => {
     var _a, _b;
     if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
@@ -24,7 +36,7 @@ const compareFeatures = (originalOrder) => (feature1, feature2) => {
     }
     return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
 };
-const sortFeatures = (features = []) => features.sort(compareFeatures(features));
+const sortFeatures = (features = []) => exhaustiveSort(features, compareFeatures(features));
 const createTree = (initialConfig) => {
     var _a, _b, _c, _d;
     const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : build_static_instance_1.buildStaticInstance;
@@ -100,6 +112,15 @@ const createTree = (initialConfig) => {
                 const externalStateSetter = config[stateHandlerNames[stateName]];
                 externalStateSetter === null || externalStateSetter === void 0 ? void 0 : externalStateSetter(state[stateName]);
             },
+            buildItemInstance: ({}, itemId) => {
+                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
+                    item: instance,
+                    tree: treeInstance,
+                    itemId,
+                }));
+                finalizeInstance();
+                return instance;
+            },
             // TODO rebuildSubTree: (itemId: string) => void;
             rebuildTree: () => {
                 var _a;
@@ -165,7 +186,6 @@ const createTree = (initialConfig) => {
         Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
     finalizeTree();
-    rebuildItemMeta();
     return treeInstance;
 };
 exports.createTree = createTree;

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

@@ -75,14 +75,14 @@ exports.asyncDataLoaderFeature = {
             var _b;
             return ((_b = getDataRef(tree).current.childrenIds[itemId]) !== null && _b !== void 0 ? _b : (yield loadChildrenIds(tree, itemId)));
         }),
-        retrieveItemData: ({ tree }, itemId) => {
+        retrieveItemData: ({ tree }, itemId, skipFetch = false) => {
             var _a, _b;
             const config = tree.getConfig();
             const dataRef = getDataRef(tree);
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
-            if (!tree.getState().loadingItemData.includes(itemId)) {
+            if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
                 tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
                     ...loadingItemData,
                     itemId,
@@ -91,12 +91,12 @@ exports.asyncDataLoaderFeature = {
             }
             return (_b = (_a = config.createLoadingItemData) === null || _a === void 0 ? void 0 : _a.call(config)) !== null && _b !== void 0 ? _b : null;
         },
-        retrieveChildrenIds: ({ tree }, itemId) => {
+        retrieveChildrenIds: ({ tree }, itemId, skipFetch = false) => {
             const dataRef = getDataRef(tree);
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
-            if (tree.getState().loadingItemChildrens.includes(itemId)) {
+            if (tree.getState().loadingItemChildrens.includes(itemId) || skipFetch) {
                 return [];
             }
             tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [...loadingItemChildrens, itemId]);

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

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

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

@@ -0,0 +1,94 @@
+"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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,9 @@
+"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.js

@@ -68,14 +68,35 @@ exports.dragAndDropFeature = {
                 }
                 : { display: "none" };
         },
-        getContainerProps: ({ prev }, treeLabel) => {
+        getContainerProps: ({ prev, tree }, treeLabel) => {
             const prevProps = prev === null || prev === void 0 ? void 0 : prev(treeLabel);
-            return Object.assign(Object.assign({}, prevProps), { style: Object.assign(Object.assign({}, prevProps === null || prevProps === void 0 ? void 0 : prevProps.style), { position: "relative" }) });
+            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;
+                    tree.applySubStateUpdate("dnd", null);
+                    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, onDragStart: (e) => {
-                var _a, _b, _c;
+        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();
@@ -86,9 +107,13 @@ exports.dragAndDropFeature = {
                     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);
-                    (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setData(format, data);
+                    (_d = e.dataTransfer) === null || _d === void 0 ? void 0 : _d.setData(format, data);
                 }
                 tree.applySubStateUpdate("dnd", {
                     draggedItems: items,
@@ -134,6 +159,7 @@ exports.dragAndDropFeature = {
                 (_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)) {

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

@@ -46,6 +46,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>) => boolean;
         onDrop?: (items: ItemInstance<T>[], target: DragTarget<T>) => void | Promise<void>;
         onDropForeignDragObject?: (dataTransfer: DataTransfer, target: DragTarget<T>) => void | Promise<void>;

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

@@ -17,6 +17,8 @@ export type MainFeatureDef<T = any> = {
     treeInstance: {
         /** @internal */
         applySubStateUpdate: <K extends keyof TreeState<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/lib/cjs/features/renaming/feature.js

@@ -4,6 +4,7 @@ exports.renamingFeature = void 0;
 const utils_1 = require("../../utils");
 exports.renamingFeature = {
     key: "renaming",
+    overwrites: ["drag-and-drop"],
     getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: (0, utils_1.makeStateUpdater)("renamingItem", tree), setRenamingValue: (0, utils_1.makeStateUpdater)("renamingValue", tree), canRename: () => true }, defaultConfig)),
     stateHandlerNames: {
         renamingItem: "setRenamingItem",
@@ -50,6 +51,13 @@ exports.renamingFeature = {
         }),
         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,
+        getProps: ({ prev, item }) => {
+            var _a;
+            const isRenaming = item.isRenaming();
+            const prevProps = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            return isRenaming
+                ? Object.assign(Object.assign({}, prevProps), { draggable: false, onDragStart: () => { } }) : prevProps;
+        },
     },
     hotkeys: {
         renameItem: {

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

@@ -59,6 +59,10 @@ exports.treeFeature = {
             var _a, _b;
             return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
         },
+        getRootItem: ({ tree }) => {
+            const { rootItemId } = tree.getConfig();
+            return tree.getItemInstance(rootItemId);
+        },
         focusNextItem: ({ tree }) => {
             var _a;
             const focused = tree.getFocusedItem().getItemMeta();
@@ -100,6 +104,7 @@ exports.treeFeature = {
             (_d = item.getElement()) === null || _d === void 0 ? void 0 : _d.scrollIntoView(scrollIntoViewArg);
         }),
         getId: ({ itemId }) => itemId,
+        getKey: ({ itemId }) => itemId, // TODO apply to all stories to use
         getProps: ({ item, prev }) => {
             const itemMeta = item.getItemMeta();
             return Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { ref: item.registerElement, role: "treeitem", "aria-setsize": itemMeta.setSize, "aria-posinset": itemMeta.posInSet, "aria-selected": "false", "aria-label": item.getItemName(), "aria-level": itemMeta.level, tabIndex: item.isFocused() ? 0 : -1, onClick: (e) => {

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

@@ -27,7 +27,8 @@ export type TreeFeatureDef<T> = {
     treeInstance: {
         /** @internal */
         getItemsMeta: () => ItemMeta[];
-        getFocusedItem: () => ItemInstance<any>;
+        getFocusedItem: () => ItemInstance<T>;
+        getRootItem: () => ItemInstance<T>;
         focusNextItem: () => void;
         focusPreviousItem: () => void;
         updateDomFocus: () => void;
@@ -37,6 +38,7 @@ export type TreeFeatureDef<T> = {
     };
     itemInstance: {
         getId: () => string;
+        getKey: () => string;
         getProps: () => Record<string, any>;
         getItemName: () => string;
         getItemData: () => T;

package/lib/cjs/index.d.ts

@@ -5,6 +5,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";
@@ -13,6 +14,7 @@ export * from "./features/renaming/types";
 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";
@@ -27,3 +29,5 @@ export * from "./utilities/insert-items-at-target";
 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/lib/cjs/index.js

@@ -14,12 +14,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOrderedDragTarget = exports.makeStateUpdater = void 0;
 __exportStar(require("./types/core"), exports);
 __exportStar(require("./core/create-tree"), exports);
 __exportStar(require("./features/tree/types"), exports);
 __exportStar(require("./features/drag-and-drop/types"), exports);
 __exportStar(require("./features/keyboard-drag-and-drop/types"), exports);
 __exportStar(require("./features/selection/types"), exports);
+__exportStar(require("./features/checkboxes/types"), exports);
 __exportStar(require("./features/async-data-loader/types"), exports);
 __exportStar(require("./features/sync-data-loader/types"), exports);
 __exportStar(require("./features/hotkeys-core/types"), exports);
@@ -28,6 +30,7 @@ __exportStar(require("./features/renaming/types"), exports);
 __exportStar(require("./features/expand-all/types"), exports);
 __exportStar(require("./features/prop-memoization/types"), exports);
 __exportStar(require("./features/selection/feature"), exports);
+__exportStar(require("./features/checkboxes/feature"), exports);
 __exportStar(require("./features/hotkeys-core/feature"), exports);
 __exportStar(require("./features/async-data-loader/feature"), exports);
 __exportStar(require("./features/sync-data-loader/feature"), exports);
@@ -42,3 +45,7 @@ __exportStar(require("./utilities/insert-items-at-target"), exports);
 __exportStar(require("./utilities/remove-items-from-parents"), exports);
 __exportStar(require("./core/build-proxified-instance"), exports);
 __exportStar(require("./core/build-static-instance"), exports);
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "makeStateUpdater", { enumerable: true, get: function () { return utils_1.makeStateUpdater; } });
+var utils_2 = require("./features/drag-and-drop/utils");
+Object.defineProperty(exports, "isOrderedDragTarget", { enumerable: true, get: function () { return utils_2.isOrderedDragTarget; } });

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

@@ -34,6 +34,7 @@ class TestTree {
     get instance() {
         if (!this.treeInstance) {
             this.treeInstance = (0, create_tree_1.createTree)(this.config);
+            this.treeInstance.rebuildTree();
         }
         return this.treeInstance;
     }

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

@@ -10,6 +10,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;
 export type FeatureDef = {
@@ -34,7 +35,7 @@ type MergedFeatures<F extends FeatureDef> = {
     itemInstance: UnionToIntersection<F["itemInstance"]>;
     hotkeys: F["hotkeys"];
 };
-export type RegisteredFeatures<T> = MainFeatureDef<T> | TreeFeatureDef<T> | SelectionFeatureDef<T> | DragAndDropFeatureDef<T> | KeyboardDragAndDropFeatureDef<T> | HotkeysCoreFeatureDef<T> | SyncDataLoaderFeatureDef<T> | AsyncDataLoaderFeatureDef<T> | SearchFeatureDef<T> | RenamingFeatureDef<T> | ExpandAllFeatureDef | PropMemoizationFeatureDef;
+export type RegisteredFeatures<T> = MainFeatureDef<T> | TreeFeatureDef<T> | SelectionFeatureDef<T> | CheckboxesFeatureDef<T> | DragAndDropFeatureDef<T> | KeyboardDragAndDropFeatureDef<T> | HotkeysCoreFeatureDef<T> | SyncDataLoaderFeatureDef<T> | AsyncDataLoaderFeatureDef<T> | SearchFeatureDef<T> | RenamingFeatureDef<T> | ExpandAllFeatureDef | PropMemoizationFeatureDef;
 type TreeStateType<T> = MergedFeatures<RegisteredFeatures<T>>["state"];
 export interface TreeState<T> extends TreeStateType<T> {
 }

package/lib/esm/core/create-tree.js

@@ -11,6 +11,18 @@ const verifyFeatures = (features) => {
         }
     }
 };
+// Check all possible pairs and sort the array
+const exhaustiveSort = (arr, compareFn) => {
+    const n = arr.length;
+    for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++) {
+            if (compareFn(arr[j], arr[i]) < 0) {
+                [arr[i], arr[j]] = [arr[j], arr[i]];
+            }
+        }
+    }
+    return arr;
+};
 const compareFeatures = (originalOrder) => (feature1, feature2) => {
     var _a, _b;
     if (feature2.key && ((_a = feature1.overwrites) === null || _a === void 0 ? void 0 : _a.includes(feature2.key))) {
@@ -21,7 +33,7 @@ const compareFeatures = (originalOrder) => (feature1, feature2) => {
     }
     return originalOrder.indexOf(feature1) - originalOrder.indexOf(feature2);
 };
-const sortFeatures = (features = []) => features.sort(compareFeatures(features));
+const sortFeatures = (features = []) => exhaustiveSort(features, compareFeatures(features));
 export const createTree = (initialConfig) => {
     var _a, _b, _c, _d;
     const buildInstance = (_a = initialConfig.instanceBuilder) !== null && _a !== void 0 ? _a : buildStaticInstance;
@@ -97,6 +109,15 @@ export const createTree = (initialConfig) => {
                 const externalStateSetter = config[stateHandlerNames[stateName]];
                 externalStateSetter === null || externalStateSetter === void 0 ? void 0 : externalStateSetter(state[stateName]);
             },
+            buildItemInstance: ({}, itemId) => {
+                const [instance, finalizeInstance] = buildInstance(features, "itemInstance", (instance) => ({
+                    item: instance,
+                    tree: treeInstance,
+                    itemId,
+                }));
+                finalizeInstance();
+                return instance;
+            },
             // TODO rebuildSubTree: (itemId: string) => void;
             rebuildTree: () => {
                 var _a;
@@ -162,6 +183,5 @@ export const createTree = (initialConfig) => {
         Object.assign(hotkeyPresets, (_d = feature.hotkeys) !== null && _d !== void 0 ? _d : {});
     }
     finalizeTree();
-    rebuildItemMeta();
     return treeInstance;
 };

package/lib/esm/features/async-data-loader/feature.js

@@ -72,14 +72,14 @@ export const asyncDataLoaderFeature = {
             var _b;
             return ((_b = getDataRef(tree).current.childrenIds[itemId]) !== null && _b !== void 0 ? _b : (yield loadChildrenIds(tree, itemId)));
         }),
-        retrieveItemData: ({ tree }, itemId) => {
+        retrieveItemData: ({ tree }, itemId, skipFetch = false) => {
             var _a, _b;
             const config = tree.getConfig();
             const dataRef = getDataRef(tree);
             if (dataRef.current.itemData[itemId]) {
                 return dataRef.current.itemData[itemId];
             }
-            if (!tree.getState().loadingItemData.includes(itemId)) {
+            if (!tree.getState().loadingItemData.includes(itemId) && !skipFetch) {
                 tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
                     ...loadingItemData,
                     itemId,
@@ -88,12 +88,12 @@ export const asyncDataLoaderFeature = {
             }
             return (_b = (_a = config.createLoadingItemData) === null || _a === void 0 ? void 0 : _a.call(config)) !== null && _b !== void 0 ? _b : null;
         },
-        retrieveChildrenIds: ({ tree }, itemId) => {
+        retrieveChildrenIds: ({ tree }, itemId, skipFetch = false) => {
             const dataRef = getDataRef(tree);
             if (dataRef.current.childrenIds[itemId]) {
                 return dataRef.current.childrenIds[itemId];
             }
-            if (tree.getState().loadingItemChildrens.includes(itemId)) {
+            if (tree.getState().loadingItemChildrens.includes(itemId) || skipFetch) {
                 return [];
             }
             tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) => [...loadingItemChildrens, itemId]);

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

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