@headless-tree/core 0.0.1

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

@@ -0,0 +1,39 @@
+"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.expandAllFeature = void 0;
+const utils_1 = require("../../utils");
+exports.expandAllFeature = {
+    key: "expand-all",
+    dependingFeatures: ["main", "tree"],
+    createTreeInstance: (prev, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+            yield Promise.all(tree.getItems().map((item) => item.expandAll(cancelToken)));
+        }), collapseAll: () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            (_b = (_a = tree.getConfig()).setExpandedItems) === null || _b === void 0 ? void 0 : _b.call(_a, []);
+        }) })),
+    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { expandAll: (cancelToken) => __awaiter(void 0, void 0, void 0, function* () {
+            if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.current) {
+                return;
+            }
+            item.expand();
+            yield (0, utils_1.poll)(() => !tree.getState().loadingItems.includes(item.getId()));
+            yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
+                yield (0, utils_1.poll)(() => !tree.getState().loadingItems.includes(child.getId()));
+                yield (child === null || child === void 0 ? void 0 : child.expandAll(cancelToken));
+            })));
+        }), collapseAll: () => __awaiter(void 0, void 0, void 0, function* () {
+            yield Promise.all(item.getChildren().map((child) => __awaiter(void 0, void 0, void 0, function* () {
+                yield (child === null || child === void 0 ? void 0 : child.collapseAll());
+            })));
+            item.collapse();
+        }) })),
+};

package/lib/features/expand-all/types.d.ts

@@ -0,0 +1,17 @@
+export type ExpandAllFeatureDef = {
+    state: {};
+    config: {};
+    treeInstance: {
+        expandAll: (cancelToken?: {
+            current: boolean;
+        }) => Promise<void>;
+        collapseAll: () => Promise<void>;
+    };
+    itemInstance: {
+        expandAll: (cancelToken?: {
+            current: boolean;
+        }) => Promise<void>;
+        collapseAll: () => Promise<void>;
+    };
+    hotkeys: never;
+};

package/lib/features/expand-all/types.js

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

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

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

package/lib/features/hotkeys-core/feature.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hotkeysCoreFeature = void 0;
+const specialKeys = {
+    Letter: /^[a-z]$/,
+    LetterOrNumber: /^[a-z0-9]$/,
+};
+const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
+    const supposedKeys = hotkey.hotkey.split("+");
+    const doKeysMatch = supposedKeys.every((key) => key in specialKeys
+        ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
+        : pressedKeys.has(key));
+    const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
+    const equalCounts = pressedKeys.size === supposedKeys.length;
+    return doKeysMatch && isEnabled && equalCounts;
+};
+const findHotkeyMatch = (pressedKeys, tree, config1, config2) => {
+    var _a;
+    return (_a = Object.entries(Object.assign(Object.assign({}, config1), config2)).find(([, hotkey]) => testHotkeyMatch(pressedKeys, tree, hotkey))) === null || _a === void 0 ? void 0 : _a[0];
+};
+exports.hotkeysCoreFeature = {
+    key: "hotkeys-core",
+    dependingFeatures: ["main", "tree"],
+    onTreeMount: (tree, element) => {
+        const data = tree.getDataRef();
+        const keydown = (e) => {
+            var _a, _b;
+            var _c;
+            (_a = (_c = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_c.pressedKeys = new Set());
+            const newMatch = !data.current.pressedKeys.has(e.key);
+            data.current.pressedKeys.add(e.key);
+            console.log(data.current.pressedKeys);
+            const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
+            if (!hotkeyName)
+                return;
+            const hotkeyConfig = Object.assign(Object.assign({}, tree.getHotkeyPresets()[hotkeyName]), (_b = tree.getConfig().hotkeys) === null || _b === void 0 ? void 0 : _b[hotkeyName]);
+            if (!hotkeyConfig)
+                return;
+            if (!hotkeyConfig.allowWhenInputFocused &&
+                e.target instanceof HTMLInputElement)
+                return;
+            if (!hotkeyConfig.canRepeat && !newMatch)
+                return;
+            if (hotkeyConfig.preventDefault)
+                e.preventDefault();
+            hotkeyConfig.handler(e, tree);
+        };
+        const keyup = (e) => {
+            var _a;
+            var _b;
+            (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
+            data.current.pressedKeys.delete(e.key);
+        };
+        // keyup is registered on document, because some hotkeys shift
+        // the focus away from the tree (i.e. search)
+        // and then we wouldn't get the keyup event anymore
+        element.addEventListener("keydown", keydown);
+        document.addEventListener("keyup", keyup);
+        data.current.keydownHandler = keydown;
+        data.current.keyupHandler = keyup;
+    },
+    onTreeUnmount: (tree, element) => {
+        const data = tree.getDataRef();
+        if (data.current.keyupHandler) {
+            document.removeEventListener("keyup", data.current.keyupHandler);
+            delete data.current.keyupHandler;
+        }
+        if (data.current.keydownHandler) {
+            element.removeEventListener("keydown", data.current.keydownHandler);
+            delete data.current.keydownHandler;
+        }
+    },
+};

package/lib/features/hotkeys-core/types.d.ts

@@ -0,0 +1,25 @@
+import { CustomHotkeysConfig, ItemInstance, TreeInstance } from "../../types/core";
+export interface HotkeyConfig<T> {
+    hotkey: string;
+    canRepeat?: boolean;
+    allowWhenInputFocused?: boolean;
+    isEnabled?: (tree: TreeInstance<T>) => boolean;
+    preventDefault?: boolean;
+    handler: (e: KeyboardEvent, tree: TreeInstance<T>) => void;
+}
+export type HotkeysCoreDataRef = {
+    keydownHandler?: (e: KeyboardEvent) => void;
+    keyupHandler?: (e: KeyboardEvent) => void;
+    pressedKeys: Set<string>;
+};
+export type HotkeysCoreFeatureDef<T> = {
+    state: {};
+    config: {
+        hotkeys?: CustomHotkeysConfig<T>;
+        onTreeHotkey?: (name: string, element: HTMLElement) => void;
+        onItemHotkey?: (name: string, item: ItemInstance<T>, element: HTMLElement) => void;
+    };
+    treeInstance: {};
+    itemInstance: {};
+    hotkeys: never;
+};

package/lib/features/hotkeys-core/types.js

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

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

@@ -0,0 +1,36 @@
+import { FeatureImplementation, HotkeysConfig, ItemInstance, SetStateFn, TreeConfig, TreeState } from "../../types/core";
+import { ItemMeta } from "../tree/types";
+export type MainFeatureDef<T = any> = {
+    state: {};
+    config: {
+        features?: FeatureImplementation<any>[];
+        state?: Partial<TreeState<T>>;
+        setState?: SetStateFn<TreeState<T>>;
+    };
+    treeInstance: {
+        setState: SetStateFn<TreeState<T>>;
+        getState: () => TreeState<T>;
+        setConfig: SetStateFn<TreeConfig<T>>;
+        getConfig: () => TreeConfig<T>;
+        getItemInstance: (itemId: string) => ItemInstance<T>;
+        getItems: () => ItemInstance<T>[];
+        registerElement: (element: HTMLElement | null) => void;
+        getElement: () => HTMLElement | undefined | null;
+        /** @internal */
+        getDataRef: <D>() => {
+            current: D;
+        };
+        getHotkeyPresets: () => HotkeysConfig<T>;
+        rebuildTree: () => void;
+    };
+    itemInstance: {
+        registerElement: (element: HTMLElement | null) => void;
+        getItemMeta: () => ItemMeta;
+        getElement: () => HTMLElement | undefined | null;
+        /** @internal */
+        getDataRef: <D>() => {
+            current: D;
+        };
+    };
+    hotkeys: never;
+};

package/lib/features/main/types.js

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

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

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

package/lib/features/renaming/feature.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renamingFeature = void 0;
+const utils_1 = require("../../utils");
+exports.renamingFeature = {
+    key: "renaming",
+    dependingFeatures: ["main", "tree"],
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setRenamingItem: (0, utils_1.makeStateUpdater)("renamingItem", tree), setRenamingValue: (0, utils_1.makeStateUpdater)("renamingValue", tree), canRename: () => true }, defaultConfig)),
+    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { startRenamingItem: (itemId) => {
+            var _a, _b;
+            const config = instance.getConfig();
+            const item = instance.getItemInstance(itemId);
+            if (!item.canRename()) {
+                return;
+            }
+            (_a = config.setRenamingItem) === null || _a === void 0 ? void 0 : _a.call(config, itemId);
+            (_b = config.setRenamingValue) === null || _b === void 0 ? void 0 : _b.call(config, item.getItemName());
+        }, getRenamingItem: () => {
+            const itemId = instance.getState().renamingItem;
+            return itemId ? instance.getItemInstance(itemId) : null;
+        }, getRenamingValue: () => instance.getState().renamingValue || "", abortRenaming: () => {
+            var _a, _b;
+            (_b = (_a = instance.getConfig()).setRenamingItem) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+        }, completeRenaming: () => {
+            var _a, _b, _c;
+            const config = instance.getConfig();
+            const item = instance.getRenamingItem();
+            if (item) {
+                (_a = config.onRename) === null || _a === void 0 ? void 0 : _a.call(config, item, instance.getState().renamingValue || "");
+            }
+            (_c = (_b = instance.getConfig()).setRenamingItem) === null || _c === void 0 ? void 0 : _c.call(_b, null);
+        }, isRenamingItem: () => !!instance.getState().renamingItem })),
+    createItemInstance: (prev, instance, tree) => (Object.assign(Object.assign({}, prev), { getRenameInputProps: () => ({
+            onBlur: () => tree.abortRenaming(),
+            value: tree.getRenamingValue(),
+            onChange: (e) => {
+                var _a, _b;
+                (_b = (_a = tree.getConfig()).setRenamingValue) === null || _b === void 0 ? void 0 : _b.call(_a, e.target.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 })),
+    hotkeys: {
+        renameItem: {
+            hotkey: "F2",
+            handler: (e, tree) => {
+                tree.startRenamingItem(tree.getFocusedItem().getId());
+            },
+        },
+        abortRenaming: {
+            hotkey: "Escape",
+            allowWhenInputFocused: true,
+            isEnabled: (tree) => tree.isRenamingItem(),
+            handler: (e, tree) => {
+                tree.abortRenaming();
+            },
+        },
+        completeRenaming: {
+            hotkey: "Enter",
+            allowWhenInputFocused: true,
+            isEnabled: (tree) => tree.isRenamingItem(),
+            handler: (e, tree) => {
+                tree.completeRenaming();
+            },
+        },
+    },
+};

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

@@ -0,0 +1,27 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+export type RenamingFeatureDef<T> = {
+    state: {
+        renamingItem?: string | null;
+        renamingValue?: string;
+    };
+    config: {
+        setRenamingItem?: SetStateFn<string | null>;
+        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;
+        completeRenaming: () => void;
+        isRenamingItem: () => boolean;
+    };
+    itemInstance: {
+        getRenameInputProps: () => any;
+        canRename: () => boolean;
+        isRenaming: () => boolean;
+    };
+    hotkeys: "renameItem" | "abortRenaming" | "completeRenaming";
+};

package/lib/features/renaming/types.js

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

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

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

package/lib/features/search/feature.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchFeature = void 0;
+const utils_1 = require("../../utils");
+exports.searchFeature = {
+    key: "search",
+    dependingFeatures: ["main", "tree"],
+    getInitialState: (initialState) => (Object.assign({ search: null }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSearch: (0, utils_1.makeStateUpdater)("search", tree), isSearchMatchingItem: (search, item) => search.length > 0 &&
+            item.getItemName().toLowerCase().includes(search.toLowerCase()) }, defaultConfig)),
+    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSearch: (search) => {
+            var _a, _b, _c;
+            (_b = (_a = instance.getConfig()).setSearch) === null || _b === void 0 ? void 0 : _b.call(_a, search);
+            (_c = instance
+                .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 || _c === void 0 ? void 0 : _c.setFocused();
+        }, openSearch: (initialValue = "") => {
+            instance.setSearch(initialValue);
+            setTimeout(() => {
+                var _a;
+                (_a = instance
+                    .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();
+            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 (_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()) })),
+    hotkeys: {
+        openSearch: {
+            hotkey: "LetterOrNumber",
+            preventDefault: true,
+            isEnabled: (tree) => !tree.isSearchOpen(),
+            handler: (e, tree) => {
+                e.stopPropagation();
+                tree.openSearch(e.key);
+            },
+        },
+        closeSearch: {
+            // TODO allow multiple, i.e. Enter
+            hotkey: "Escape",
+            allowWhenInputFocused: true,
+            isEnabled: (tree) => tree.isSearchOpen(),
+            handler: (e, tree) => {
+                tree.closeSearch();
+            },
+        },
+        nextSearchItem: {
+            hotkey: "ArrowDown",
+            allowWhenInputFocused: true,
+            isEnabled: (tree) => tree.isSearchOpen(),
+            handler: (e, tree) => {
+                // TODO scroll into view
+                const focusItem = tree
+                    .getSearchMatchingItems()
+                    .find((item) => item.getItemMeta().index >
+                    tree.getFocusedItem().getItemMeta().index);
+                focusItem === null || focusItem === void 0 ? void 0 : focusItem.setFocused();
+            },
+        },
+        previousSearchItem: {
+            hotkey: "ArrowUp",
+            allowWhenInputFocused: true,
+            isEnabled: (tree) => tree.isSearchOpen(),
+            handler: (e, tree) => {
+                // TODO scroll into view
+                const focusItem = [...tree.getSearchMatchingItems()]
+                    .reverse()
+                    .find((item) => item.getItemMeta().index <
+                    tree.getFocusedItem().getItemMeta().index);
+                focusItem === null || focusItem === void 0 ? void 0 : focusItem.setFocused();
+            },
+        },
+    },
+};

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

@@ -0,0 +1,33 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+import { HotkeysCoreDataRef } from "../hotkeys-core/types";
+export type SearchFeatureDataRef<T = any> = HotkeysCoreDataRef & {
+    matchingItems: ItemInstance<T>[];
+    searchInput: HTMLInputElement | null;
+};
+export type SearchFeatureDef<T> = {
+    state: {
+        search: string | null;
+    };
+    config: {
+        setSearch?: SetStateFn<string | null>;
+        onOpenSearch?: () => void;
+        onCloseSearch?: () => void;
+        onSearchMatchesItems?: (search: string, items: ItemInstance<T>[]) => void;
+        isSearchMatchingItem?: (search: string, item: ItemInstance<T>) => boolean;
+    };
+    treeInstance: {
+        setSearch: (search: string | null) => void;
+        openSearch: (initialValue?: string) => void;
+        closeSearch: () => void;
+        isSearchOpen: () => boolean;
+        getSearchValue: () => string;
+        registerSearchInputElement: (element: HTMLInputElement | null) => void;
+        getSearchInputElement: () => HTMLInputElement | null;
+        getSearchInputElementProps: () => any;
+        getSearchMatchingItems: () => ItemInstance<T>[];
+    };
+    itemInstance: {
+        isMatchingSearch: () => boolean;
+    };
+    hotkeys: "openSearch" | "closeSearch" | "nextSearchItem" | "previousSearchItem";
+};

package/lib/features/search/types.js

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

package/lib/features/selection/feature.d.ts

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

package/lib/features/selection/feature.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectionFeature = void 0;
+const utils_1 = require("../../utils");
+exports.selectionFeature = {
+    key: "selection",
+    dependingFeatures: ["main", "tree"],
+    getInitialState: (initialState) => (Object.assign({ selectedItems: [] }, initialState)),
+    getDefaultConfig: (defaultConfig, tree) => (Object.assign({ setSelectedItems: (0, utils_1.makeStateUpdater)("selectedItems", tree) }, defaultConfig)),
+    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { setSelectedItems: (selectedItems) => {
+            var _a, _b;
+            (_b = (_a = instance.getConfig()).setSelectedItems) === null || _b === void 0 ? void 0 : _b.call(_a, selectedItems);
+        }, 
+        // TODO memo
+        getSelectedItems: () => {
+            return instance.getState().selectedItems.map(instance.getItemInstance);
+        } })),
+    createItemInstance: (prev, item, tree) => (Object.assign(Object.assign({}, prev), { select: () => {
+            const { selectedItems } = tree.getState();
+            tree.setSelectedItems(selectedItems.includes(item.getItemMeta().itemId)
+                ? selectedItems
+                : [...selectedItems, item.getItemMeta().itemId]);
+        }, deselect: () => {
+            const { selectedItems } = tree.getState();
+            tree.setSelectedItems(selectedItems.filter((id) => id !== item.getItemMeta().itemId));
+        }, isSelected: () => {
+            const { selectedItems } = tree.getState();
+            return selectedItems.includes(item.getItemMeta().itemId);
+        }, selectUpTo: (ctrl) => {
+            const indexA = item.getItemMeta().index;
+            // TODO dont use focused item as anchor, but last primary-clicked item
+            const indexB = tree.getFocusedItem().getItemMeta().index;
+            const [a, b] = indexA < indexB ? [indexA, indexB] : [indexB, indexA];
+            const newSelectedItems = tree
+                .getItems()
+                .slice(a, b + 1)
+                .map((item) => item.getItemMeta().itemId);
+            if (!ctrl) {
+                tree.setSelectedItems(newSelectedItems);
+                return;
+            }
+            const { selectedItems } = tree.getState();
+            const uniqueSelectedItems = [
+                ...new Set([...selectedItems, ...newSelectedItems]),
+            ];
+            tree.setSelectedItems(uniqueSelectedItems);
+        }, toggleSelect: () => {
+            if (item.isSelected()) {
+                item.deselect();
+            }
+            else {
+                item.select();
+            }
+        }, getProps: () => (Object.assign(Object.assign({}, prev.getProps()), { onClick: (e) => {
+                var _a, _b;
+                if (e.shiftKey) {
+                    item.selectUpTo(e.ctrlKey || e.metaKey);
+                }
+                else if (e.ctrlKey || e.metaKey) {
+                    item.toggleSelect();
+                }
+                else {
+                    tree.setSelectedItems([item.getItemMeta().itemId]);
+                }
+                (_b = (_a = prev.getProps()).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            } })) })),
+    hotkeys: {
+        // setSelectedItem: {
+        //   hotkey: "space",
+        //   handler: (e, tree) => {
+        //     tree.setSelectedItems([tree.getFocusedItem().getId()]);
+        //   },
+        // },
+        toggleSelectItem: {
+            hotkey: "ctrl+space",
+            handler: (e, tree) => {
+                tree.getFocusedItem().toggleSelect();
+            },
+        },
+        selectUpwards: {
+            hotkey: "shift+ArrowUp",
+            handler: () => {
+                // TODO
+            },
+        },
+        selectDownwards: {
+            hotkey: "shift+ArrowDown",
+            handler: () => {
+                // TODO
+            },
+        },
+        selectUpwardsCtrl: {
+            hotkey: "shift+ctrl+ArrowUp",
+            handler: () => {
+                // TODO
+            },
+        },
+        selectDownwardsCtrl: {
+            hotkey: "shift+ctrl+ArrowUp",
+            handler: () => {
+                // TODO
+            },
+        },
+        selectAll: {
+            hotkey: "Control+a",
+            preventDefault: true,
+            handler: (e, tree) => {
+                tree.setSelectedItems(tree.getItems().map((item) => item.getId()));
+            },
+        },
+    },
+};

package/lib/features/selection/types.d.ts

@@ -0,0 +1,21 @@
+import { ItemInstance, SetStateFn } from "../../types/core";
+export type SelectionFeatureDef<T> = {
+    state: {
+        selectedItems: string[];
+    };
+    config: {
+        setSelectedItems?: SetStateFn<string[]>;
+    };
+    treeInstance: {
+        setSelectedItems: (selectedItems: string[]) => void;
+        getSelectedItems: () => ItemInstance<T>[];
+    };
+    itemInstance: {
+        select: () => void;
+        deselect: () => void;
+        toggleSelect: () => void;
+        isSelected: () => boolean;
+        selectUpTo: (ctrl: boolean) => void;
+    };
+    hotkeys: "toggleSelectItem" | "selectUpwards" | "selectDownwards" | "selectUpwardsCtrl" | "selectDownwardsCtrl" | "selectAll";
+};

package/lib/features/selection/types.js

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

package/lib/features/sync-data-loader/feature.d.ts

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

package/lib/features/sync-data-loader/feature.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.syncDataLoaderFeature = void 0;
+exports.syncDataLoaderFeature = {
+    key: "sync-data-loader",
+    dependingFeatures: ["main"],
+    createTreeInstance: (prev, instance) => (Object.assign(Object.assign({}, prev), { retrieveItemData: (itemId) => instance.getConfig().dataLoader.getItem(itemId), retrieveChildrenIds: (itemId) => instance.getConfig().dataLoader.getChildren(itemId) })),
+    createItemInstance: (prev) => (Object.assign(Object.assign({}, prev), { isLoading: () => false })),
+};

package/lib/features/sync-data-loader/types.d.ts

@@ -0,0 +1,19 @@
+export type SyncTreeDataLoader<T> = {
+    getItem: (itemId: string) => T;
+    getChildren: (itemId: string) => string[];
+};
+export type SyncDataLoaderFeatureDef<T> = {
+    state: {};
+    config: {
+        rootItemId: string;
+        dataLoader: SyncTreeDataLoader<T>;
+    };
+    treeInstance: {
+        retrieveItemData: (itemId: string) => T;
+        retrieveChildrenIds: (itemId: string) => string[];
+    };
+    itemInstance: {
+        isLoading: () => boolean;
+    };
+    hotkeys: never;
+};

package/lib/features/sync-data-loader/types.js

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

package/lib/features/tree/feature.d.ts

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