@headless-tree/core 0.0.15 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @headless-tree/core
 
+## 1.0.1
+
+### Patch Changes
+
+- c9f9932: fixed tree.focusNextItem() and tree.focusPreviousItem() throwing if no item is currently focused
+- 6ed84b4: recursive item references are filtered out when rendering (#89)
+- 4bef2f2: fixed a bug where hotkeys involving shift may not work properly depending on the order of shift and other key inputs (#98)
+
+## 1.0.0
+
+### Minor Changes
+
+- 9e5027b: The propMemoization feature now memoizes all prop-generation related functions, including searchinput and renameinput related props
+
 ## 0.0.15
 
 ### Patch Changes

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

@@ -29,7 +29,7 @@ exports.dragAndDropFeature = {
             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 || !("childIndex" in target))
+            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];
@@ -157,7 +157,7 @@ exports.dragAndDropFeature = {
         isDragTargetAbove: ({ tree, item }) => {
             const target = tree.getDragTarget();
             if (!target ||
-                !("childIndex" in target) ||
+                !(0, utils_1.isOrderedDragTarget)(target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
@@ -165,7 +165,7 @@ exports.dragAndDropFeature = {
         isDragTargetBelow: ({ tree, item }) => {
             const target = tree.getDragTarget();
             if (!target ||
-                !("childIndex" in target) ||
+                !(0, utils_1.isOrderedDragTarget)(target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;

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

@@ -5,6 +5,13 @@ export declare enum ItemDropCategory {
     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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDragTarget = exports.getReparentTarget = exports.getDragCode = exports.getInsertionIndex = exports.getItemDropCategory = exports.canDrop = exports.ItemDropCategory = void 0;
+exports.getDragTarget = exports.getReparentTarget = exports.getDragCode = exports.getInsertionIndex = exports.getItemDropCategory = exports.canDrop = exports.isOrderedDragTarget = exports.ItemDropCategory = void 0;
 var ItemDropCategory;
 (function (ItemDropCategory) {
     ItemDropCategory[ItemDropCategory["Item"] = 0] = "Item";
@@ -14,6 +14,8 @@ var PlacementType;
     PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
     PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
 })(PlacementType || (PlacementType = {}));
+const isOrderedDragTarget = (dragTarget) => "childIndex" in dragTarget;
+exports.isOrderedDragTarget = isOrderedDragTarget;
 const canDrop = (dataTransfer, target, tree) => {
     var _a, _b, _c;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;

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

@@ -8,7 +8,7 @@ const specialKeys = {
     Space: /^ $/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
-    const supposedKeys = hotkey.hotkey.split("+");
+    const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
     const doKeysMatch = supposedKeys.every((key) => key in specialKeys
         ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
         : pressedKeys.has(key));
@@ -27,10 +27,10 @@ exports.hotkeysCoreFeature = {
         const keydown = (e) => {
             var _a, _b, _c, _d;
             var _e;
+            const key = e.key.toLowerCase();
             (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
-            const newMatch = !data.current.pressedKeys.has(e.key);
-            data.current.pressedKeys.add(e.key);
-            console.log("HOTKEYS", data.current.pressedKeys);
+            const newMatch = !data.current.pressedKeys.has(key);
+            data.current.pressedKeys.add(key);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
             if (!hotkeyName)
                 return;
@@ -51,7 +51,7 @@ exports.hotkeysCoreFeature = {
             var _a;
             var _b;
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
-            data.current.pressedKeys.delete(e.key);
+            data.current.pressedKeys.delete(e.key.toLowerCase());
         };
         // keyup is registered on document, because some hotkeys shift
         // the focus away from the tree (i.e. search)

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

@@ -18,8 +18,7 @@ const getNextDragTarget = (tree, isUp, dragTarget) => {
     const direction = isUp ? 0 : 1;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
     // currently hovering between items
-    if ("childIndex" in dragTarget) {
-        // TODO move check in reusable function
+    if ((0, utils_1.isOrderedDragTarget)(dragTarget)) {
         const parent = dragTarget.item.getParent();
         const targetedItem = tree.getItems()[dragTarget.dragLineIndex - 1]; // item above dragline
         const targetCategory = targetedItem
@@ -77,7 +76,7 @@ const getNextValidDragTarget = (tree, isUp, previousTarget) => {
 };
 const updateScroll = (tree) => {
     const state = tree.getState().dnd;
-    if (!(state === null || state === void 0 ? void 0 : state.dragTarget) || "childIndex" in state.dragTarget)
+    if (!(state === null || state === void 0 ? void 0 : state.dragTarget) || (0, utils_1.isOrderedDragTarget)(state.dragTarget))
         return;
     state.dragTarget.item.scrollTo({ block: "nearest", inline: "nearest" });
 };
@@ -118,7 +117,7 @@ const moveDragPosition = (tree, isUp) => {
         dragTarget,
     });
     tree.applySubStateUpdate("assistiveDndState", types_1.AssistiveDndState.Dragging);
-    if (!("childIndex" in dragTarget)) {
+    if (!(0, utils_1.isOrderedDragTarget)(dragTarget)) {
         dragTarget.item.setFocused();
     }
     updateScroll(tree);

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

@@ -1,16 +1,14 @@
 "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 = {});
+const memoize = (props, memoizedProps) => {
     for (const key in props) {
         if (typeof props[key] === "function") {
-            if (key in dataRef.memoizedProps) {
-                props[key] = dataRef.memoizedProps[key];
+            if (memoizedProps && key in memoizedProps) {
+                props[key] = memoizedProps[key];
             }
             else {
-                dataRef.memoizedProps[key] = props[key];
+                memoizedProps[key] = props[key];
             }
         }
     }
@@ -31,18 +29,42 @@ exports.propMemoizationFeature = {
     ],
     treeInstance: {
         getContainerProps: ({ tree, prev }, treeLabel) => {
-            var _a;
+            var _a, _b, _c;
+            var _d, _e;
             const dataRef = tree.getDataRef();
             const props = (_a = prev === null || prev === void 0 ? void 0 : prev(treeLabel)) !== null && _a !== void 0 ? _a : {};
-            return memoize(props, dataRef.current);
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).tree) !== null && _c !== void 0 ? _c : (_e.tree = {});
+            return memoize(props, dataRef.current.memo.tree);
+        },
+        getSearchInputElementProps: ({ tree, prev }) => {
+            var _a, _b, _c;
+            var _d, _e;
+            const dataRef = tree.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).search) !== null && _c !== void 0 ? _c : (_e.search = {});
+            return memoize(props, dataRef.current.memo.search);
         },
     },
     itemInstance: {
         getProps: ({ item, prev }) => {
-            var _a;
+            var _a, _b, _c;
+            var _d, _e;
+            const dataRef = item.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).item) !== null && _c !== void 0 ? _c : (_e.item = {});
+            return memoize(props, dataRef.current.memo.item);
+        },
+        getRenameInputProps: ({ item, prev }) => {
+            var _a, _b, _c;
+            var _d, _e;
             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);
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).rename) !== null && _c !== void 0 ? _c : (_e.rename = {});
+            return memoize(props, dataRef.current.memo.rename);
         },
     },
 };

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

@@ -1,5 +1,10 @@
 export interface PropMemoizationDataRef {
-    memoizedProps?: Record<string, any>;
+    memo?: {
+        tree?: Record<string, any>;
+        item?: Record<string, any>;
+        search?: Record<string, any>;
+        rename?: Record<string, any>;
+    };
 }
 export type PropMemoizationFeatureDef = {
     state: {};

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

@@ -28,9 +28,9 @@ exports.selectionFeature = {
             const { selectedItems } = tree.getState();
             tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
         },
-        isSelected: ({ tree, item }) => {
+        isSelected: ({ tree, itemId }) => {
             const { selectedItems } = tree.getState();
-            return selectedItems.includes(item.getItemMeta().itemId);
+            return selectedItems.includes(itemId);
         },
         selectUpTo: ({ tree, item }, ctrl) => {
             const indexA = item.getItemMeta().index;

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

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.treeFeature = void 0;
 const utils_1 = require("../../utils");
+const errors_1 = require("../../utilities/errors");
 exports.treeFeature = {
     key: "tree",
     getInitialState: (initialState) => (Object.assign({ expandedItems: [], focusedItem: null }, initialState)),
@@ -25,13 +26,17 @@ exports.treeFeature = {
             const { expandedItems } = tree.getState();
             const flatItems = [];
             const expandedItemsSet = new Set(expandedItems); // TODO support setting state expandedItems as set instead of array
-            const recursiveAdd = (itemId, parentId, level, setSize, posInSet) => {
+            const recursiveAdd = (itemId, path, level, setSize, posInSet) => {
                 var _a;
+                if (path.includes(itemId)) {
+                    (0, errors_1.logWarning)(`Circular reference for ${path.join(".")}`);
+                    return;
+                }
                 flatItems.push({
                     itemId,
                     level,
                     index: flatItems.length,
-                    parentId,
+                    parentId: path.at(-1),
                     setSize,
                     posInSet,
                 });
@@ -39,32 +44,35 @@ exports.treeFeature = {
                     const children = (_a = tree.retrieveChildrenIds(itemId)) !== null && _a !== void 0 ? _a : [];
                     let i = 0;
                     for (const childId of children) {
-                        recursiveAdd(childId, itemId, level + 1, children.length, i++);
+                        recursiveAdd(childId, path.concat(itemId), level + 1, children.length, i++);
                     }
                 }
             };
             const children = tree.retrieveChildrenIds(rootItemId);
             let i = 0;
             for (const itemId of children) {
-                recursiveAdd(itemId, rootItemId, 0, children.length, i++);
+                recursiveAdd(itemId, [rootItemId], 0, children.length, i++);
             }
             return flatItems;
         },
-        // TODO memo
         getFocusedItem: ({ tree }) => {
             var _a, _b;
             return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
         },
         focusNextItem: ({ tree }) => {
             var _a;
-            const { index } = tree.getFocusedItem().getItemMeta();
-            const nextIndex = Math.min(index + 1, tree.getItems().length - 1);
+            const focused = tree.getFocusedItem().getItemMeta();
+            if (!focused)
+                return;
+            const nextIndex = Math.min(focused.index + 1, tree.getItems().length - 1);
             (_a = tree.getItems()[nextIndex]) === null || _a === void 0 ? void 0 : _a.setFocused();
         },
         focusPreviousItem: ({ tree }) => {
             var _a;
-            const { index } = tree.getFocusedItem().getItemMeta();
-            const nextIndex = Math.max(index - 1, 0);
+            const focused = tree.getFocusedItem().getItemMeta();
+            if (!focused)
+                return;
+            const nextIndex = Math.max(focused.index - 1, 0);
             (_a = tree.getItems()[nextIndex]) === null || _a === void 0 ? void 0 : _a.setFocused();
         },
         updateDomFocus: ({ tree }) => {
@@ -80,7 +88,6 @@ exports.treeFeature = {
                 focusedElement.focus();
             }));
         },
-        // TODO add label parameter
         getContainerProps: ({ prev, tree }, treeLabel) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { role: "tree", "aria-label": treeLabel !== null && treeLabel !== void 0 ? treeLabel : "", ref: tree.registerElement })),
         // relevant for hotkeys of this feature
         isSearchOpen: () => false,

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

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

package/lib/cjs/utilities/errors.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.throwError = void 0;
-const throwError = (message) => Error(`Headless Tree: ${message}`);
+exports.logWarning = exports.throwError = void 0;
+const prefix = "Headless Tree: ";
+const throwError = (message) => Error(prefix + message);
 exports.throwError = throwError;
+// eslint-disable-next-line no-console
+const logWarning = (message) => console.warn(prefix + message);
+exports.logWarning = logWarning;

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { canDrop, getDragCode, getDragTarget } from "./utils";
+import { canDrop, getDragCode, getDragTarget, isOrderedDragTarget, } from "./utils";
 import { makeStateUpdater } from "../../utils";
 export const dragAndDropFeature = {
     key: "drag-and-drop",
@@ -26,7 +26,7 @@ export const dragAndDropFeature = {
             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 || !("childIndex" in target))
+            if (!target || !treeBb || !isOrderedDragTarget(target))
                 return null;
             const leftOffset = target.dragLineLevel * ((_c = tree.getConfig().indent) !== null && _c !== void 0 ? _c : 1);
             const targetItem = tree.getItems()[target.dragLineIndex];
@@ -154,7 +154,7 @@ export const dragAndDropFeature = {
         isDragTargetAbove: ({ tree, item }) => {
             const target = tree.getDragTarget();
             if (!target ||
-                !("childIndex" in target) ||
+                !isOrderedDragTarget(target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex === item.getItemMeta().posInSet;
@@ -162,7 +162,7 @@ export const dragAndDropFeature = {
         isDragTargetBelow: ({ tree, item }) => {
             const target = tree.getDragTarget();
             if (!target ||
-                !("childIndex" in target) ||
+                !isOrderedDragTarget(target) ||
                 target.item !== item.getParent())
                 return false;
             return target.childIndex - 1 === item.getItemMeta().posInSet;

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

@@ -5,6 +5,13 @@ export declare enum ItemDropCategory {
     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;

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

@@ -11,6 +11,7 @@ var PlacementType;
     PlacementType[PlacementType["MakeChild"] = 2] = "MakeChild";
     PlacementType[PlacementType["Reparent"] = 3] = "Reparent";
 })(PlacementType || (PlacementType = {}));
+export const isOrderedDragTarget = (dragTarget) => "childIndex" in dragTarget;
 export const canDrop = (dataTransfer, target, tree) => {
     var _a, _b, _c;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;

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

@@ -5,7 +5,7 @@ const specialKeys = {
     Space: /^ $/,
 };
 const testHotkeyMatch = (pressedKeys, tree, hotkey) => {
-    const supposedKeys = hotkey.hotkey.split("+");
+    const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
     const doKeysMatch = supposedKeys.every((key) => key in specialKeys
         ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
         : pressedKeys.has(key));
@@ -24,10 +24,10 @@ export const hotkeysCoreFeature = {
         const keydown = (e) => {
             var _a, _b, _c, _d;
             var _e;
+            const key = e.key.toLowerCase();
             (_a = (_e = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_e.pressedKeys = new Set());
-            const newMatch = !data.current.pressedKeys.has(e.key);
-            data.current.pressedKeys.add(e.key);
-            console.log("HOTKEYS", data.current.pressedKeys);
+            const newMatch = !data.current.pressedKeys.has(key);
+            data.current.pressedKeys.add(key);
             const hotkeyName = findHotkeyMatch(data.current.pressedKeys, tree, tree.getHotkeyPresets(), tree.getConfig().hotkeys);
             if (!hotkeyName)
                 return;
@@ -48,7 +48,7 @@ export const hotkeysCoreFeature = {
             var _a;
             var _b;
             (_a = (_b = data.current).pressedKeys) !== null && _a !== void 0 ? _a : (_b.pressedKeys = new Set());
-            data.current.pressedKeys.delete(e.key);
+            data.current.pressedKeys.delete(e.key.toLowerCase());
         };
         // keyup is registered on document, because some hotkeys shift
         // the focus away from the tree (i.e. search)

package/lib/esm/features/keyboard-drag-and-drop/feature.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ItemDropCategory, canDrop, getInsertionIndex, getItemDropCategory, getReparentTarget, } from "../drag-and-drop/utils";
+import { ItemDropCategory, canDrop, getInsertionIndex, getItemDropCategory, getReparentTarget, isOrderedDragTarget, } from "../drag-and-drop/utils";
 import { makeStateUpdater } from "../../utils";
 import { AssistiveDndState } from "./types";
 const getNextDragTarget = (tree, isUp, dragTarget) => {
@@ -15,8 +15,7 @@ const getNextDragTarget = (tree, isUp, dragTarget) => {
     const direction = isUp ? 0 : 1;
     const draggedItems = (_a = tree.getState().dnd) === null || _a === void 0 ? void 0 : _a.draggedItems;
     // currently hovering between items
-    if ("childIndex" in dragTarget) {
-        // TODO move check in reusable function
+    if (isOrderedDragTarget(dragTarget)) {
         const parent = dragTarget.item.getParent();
         const targetedItem = tree.getItems()[dragTarget.dragLineIndex - 1]; // item above dragline
         const targetCategory = targetedItem
@@ -74,7 +73,7 @@ const getNextValidDragTarget = (tree, isUp, previousTarget) => {
 };
 const updateScroll = (tree) => {
     const state = tree.getState().dnd;
-    if (!(state === null || state === void 0 ? void 0 : state.dragTarget) || "childIndex" in state.dragTarget)
+    if (!(state === null || state === void 0 ? void 0 : state.dragTarget) || isOrderedDragTarget(state.dragTarget))
         return;
     state.dragTarget.item.scrollTo({ block: "nearest", inline: "nearest" });
 };
@@ -115,7 +114,7 @@ const moveDragPosition = (tree, isUp) => {
         dragTarget,
     });
     tree.applySubStateUpdate("assistiveDndState", AssistiveDndState.Dragging);
-    if (!("childIndex" in dragTarget)) {
+    if (!isOrderedDragTarget(dragTarget)) {
         dragTarget.item.setFocused();
     }
     updateScroll(tree);

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

@@ -1,13 +1,11 @@
-const memoize = (props, dataRef) => {
-    var _a;
-    (_a = dataRef.memoizedProps) !== null && _a !== void 0 ? _a : (dataRef.memoizedProps = {});
+const memoize = (props, memoizedProps) => {
     for (const key in props) {
         if (typeof props[key] === "function") {
-            if (key in dataRef.memoizedProps) {
-                props[key] = dataRef.memoizedProps[key];
+            if (memoizedProps && key in memoizedProps) {
+                props[key] = memoizedProps[key];
             }
             else {
-                dataRef.memoizedProps[key] = props[key];
+                memoizedProps[key] = props[key];
             }
         }
     }
@@ -28,18 +26,42 @@ export const propMemoizationFeature = {
     ],
     treeInstance: {
         getContainerProps: ({ tree, prev }, treeLabel) => {
-            var _a;
+            var _a, _b, _c;
+            var _d, _e;
             const dataRef = tree.getDataRef();
             const props = (_a = prev === null || prev === void 0 ? void 0 : prev(treeLabel)) !== null && _a !== void 0 ? _a : {};
-            return memoize(props, dataRef.current);
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).tree) !== null && _c !== void 0 ? _c : (_e.tree = {});
+            return memoize(props, dataRef.current.memo.tree);
+        },
+        getSearchInputElementProps: ({ tree, prev }) => {
+            var _a, _b, _c;
+            var _d, _e;
+            const dataRef = tree.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).search) !== null && _c !== void 0 ? _c : (_e.search = {});
+            return memoize(props, dataRef.current.memo.search);
         },
     },
     itemInstance: {
         getProps: ({ item, prev }) => {
-            var _a;
+            var _a, _b, _c;
+            var _d, _e;
+            const dataRef = item.getDataRef();
+            const props = (_a = prev === null || prev === void 0 ? void 0 : prev()) !== null && _a !== void 0 ? _a : {};
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).item) !== null && _c !== void 0 ? _c : (_e.item = {});
+            return memoize(props, dataRef.current.memo.item);
+        },
+        getRenameInputProps: ({ item, prev }) => {
+            var _a, _b, _c;
+            var _d, _e;
             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);
+            (_b = (_d = dataRef.current).memo) !== null && _b !== void 0 ? _b : (_d.memo = {});
+            (_c = (_e = dataRef.current.memo).rename) !== null && _c !== void 0 ? _c : (_e.rename = {});
+            return memoize(props, dataRef.current.memo.rename);
         },
     },
 };

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

@@ -1,5 +1,10 @@
 export interface PropMemoizationDataRef {
-    memoizedProps?: Record<string, any>;
+    memo?: {
+        tree?: Record<string, any>;
+        item?: Record<string, any>;
+        search?: Record<string, any>;
+        rename?: Record<string, any>;
+    };
 }
 export type PropMemoizationFeatureDef = {
     state: {};

package/lib/esm/features/selection/feature.js

@@ -25,9 +25,9 @@ export const selectionFeature = {
             const { selectedItems } = tree.getState();
             tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
         },
-        isSelected: ({ tree, item }) => {
+        isSelected: ({ tree, itemId }) => {
             const { selectedItems } = tree.getState();
-            return selectedItems.includes(item.getItemMeta().itemId);
+            return selectedItems.includes(itemId);
         },
         selectUpTo: ({ tree, item }, ctrl) => {
             const indexA = item.getItemMeta().index;

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

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { makeStateUpdater, poll } from "../../utils";
+import { logWarning } from "../../utilities/errors";
 export const treeFeature = {
     key: "tree",
     getInitialState: (initialState) => (Object.assign({ expandedItems: [], focusedItem: null }, initialState)),
@@ -22,13 +23,17 @@ export const treeFeature = {
             const { expandedItems } = tree.getState();
             const flatItems = [];
             const expandedItemsSet = new Set(expandedItems); // TODO support setting state expandedItems as set instead of array
-            const recursiveAdd = (itemId, parentId, level, setSize, posInSet) => {
+            const recursiveAdd = (itemId, path, level, setSize, posInSet) => {
                 var _a;
+                if (path.includes(itemId)) {
+                    logWarning(`Circular reference for ${path.join(".")}`);
+                    return;
+                }
                 flatItems.push({
                     itemId,
                     level,
                     index: flatItems.length,
-                    parentId,
+                    parentId: path.at(-1),
                     setSize,
                     posInSet,
                 });
@@ -36,32 +41,35 @@ export const treeFeature = {
                     const children = (_a = tree.retrieveChildrenIds(itemId)) !== null && _a !== void 0 ? _a : [];
                     let i = 0;
                     for (const childId of children) {
-                        recursiveAdd(childId, itemId, level + 1, children.length, i++);
+                        recursiveAdd(childId, path.concat(itemId), level + 1, children.length, i++);
                     }
                 }
             };
             const children = tree.retrieveChildrenIds(rootItemId);
             let i = 0;
             for (const itemId of children) {
-                recursiveAdd(itemId, rootItemId, 0, children.length, i++);
+                recursiveAdd(itemId, [rootItemId], 0, children.length, i++);
             }
             return flatItems;
         },
-        // TODO memo
         getFocusedItem: ({ tree }) => {
             var _a, _b;
             return ((_b = tree.getItemInstance((_a = tree.getState().focusedItem) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : tree.getItems()[0]);
         },
         focusNextItem: ({ tree }) => {
             var _a;
-            const { index } = tree.getFocusedItem().getItemMeta();
-            const nextIndex = Math.min(index + 1, tree.getItems().length - 1);
+            const focused = tree.getFocusedItem().getItemMeta();
+            if (!focused)
+                return;
+            const nextIndex = Math.min(focused.index + 1, tree.getItems().length - 1);
             (_a = tree.getItems()[nextIndex]) === null || _a === void 0 ? void 0 : _a.setFocused();
         },
         focusPreviousItem: ({ tree }) => {
             var _a;
-            const { index } = tree.getFocusedItem().getItemMeta();
-            const nextIndex = Math.max(index - 1, 0);
+            const focused = tree.getFocusedItem().getItemMeta();
+            if (!focused)
+                return;
+            const nextIndex = Math.max(focused.index - 1, 0);
             (_a = tree.getItems()[nextIndex]) === null || _a === void 0 ? void 0 : _a.setFocused();
         },
         updateDomFocus: ({ tree }) => {
@@ -77,7 +85,6 @@ export const treeFeature = {
                 focusedElement.focus();
             }));
         },
-        // TODO add label parameter
         getContainerProps: ({ prev, tree }, treeLabel) => (Object.assign(Object.assign({}, prev === null || prev === void 0 ? void 0 : prev()), { role: "tree", "aria-label": treeLabel !== null && treeLabel !== void 0 ? treeLabel : "", ref: tree.registerElement })),
         // relevant for hotkeys of this feature
         isSearchOpen: () => false,

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

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

package/lib/esm/utilities/errors.js

@@ -1 +1,4 @@
-export const throwError = (message) => Error(`Headless Tree: ${message}`);
+const prefix = "Headless Tree: ";
+export const throwError = (message) => Error(prefix + message);
+// eslint-disable-next-line no-console
+export const logWarning = (message) => console.warn(prefix + message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-tree/core",
-  "version": "0.0.15",
+  "version": "1.0.1",
   "type": "module",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

package/readme.md

@@ -0,0 +1,157 @@
+![Headless Tree](./packages/docs/static/img/banner-github.png)
+
+[![Documentation](https://img.shields.io/badge/docs-1e1f22?style=flat)](https://headless-tree.lukasbach.com/)
+[![Chat on Discord](https://img.shields.io/badge/discord-4c57d9?style=flat&logo=discord&logoColor=ffffff)](https://discord.gg/KuZ6EezzVw)
+[![Follow on BLuesky](https://img.shields.io/badge/bluesky-0285FF?style=flat&logo=bluesky&logoColor=ffffff)](https://bsky.app/profile/lukasbach.bsky.social)
+[![Support on Github Sponsors](https://img.shields.io/badge/sponsor-EA4AAA?style=flat&logo=githubsponsors&logoColor=ffffff)](https://github.com/sponsors/lukasbach)
+[![Follow on Github](https://img.shields.io/badge/follow-181717?style=flat&logo=github&logoColor=ffffff)](https://github.com/lukasbach)
+[![NPM Core package](https://img.shields.io/badge/core-CB3837?style=flat&logo=npm&logoColor=ffffff)](https://www.npmjs.com/package/@headless-tree/core)
+[![NPM React package](https://img.shields.io/badge/react-CB3837?style=flat&logo=npm&logoColor=ffffff)](https://www.npmjs.com/package/@headless-tree/react)
+
+
+Super-easy integration of complex tree components into React. Supports ordered 
+and unordered drag-and-drop, extensive keybindings, search, renaming and more.
+Fully customizable and accessible. Headless Tree is the official successor for
+[react-complex-tree](https://github.com/lukasbach/react-complex-tree).
+
+It aims to bring the many features of complex tree views, like multi-select,
+drag-and-drop, keyboard navigation, tree search, renaming and more, while
+being unopinionated about the styling and rendering of the tree itself.
+Accessibility is ensured by default, and the integration is extremely
+simple and flexible. 
+
+The interface gives you a flat list of tree nodes
+that you can easily render yourself, which keeps the complexity of the
+code low and allows you to customize the tree to your needs. This flat
+structure also allows you to virtualize the tree with any virtualization
+library you want. The library automatically provides the necessary
+aria tags to emulate a nested tree structure, so that accessibility
+requirements are met despite the flat structure.
+
+Dive into [the Get Started page](https://headless-tree.lukasbach.com/getstarted)
+to find out how to use Headless Tree, or have a look at
+[the samples on the Headless Tree Homepage](https://headless-tree.lukasbach.com/#demogrid)
+to get an idea of what you can do with it.
+
+> [!TIP]  
+> Headless Tree is now available as Beta! The library is mostly stable and
+> production ready, and will be generally released within two months, once
+> I have collected feedback and fixed any bugs that might arise. I've written
+> [a blog post](https://medium.com/@lukasbach/headless-tree-and-the-future-of-react-complex-tree-fc920700e82a)
+> about the details of the change, and the future of the library.
+> 
+> Join
+> [the Discord](https://discord.gg/KuZ6EezzVw) to get involved, and
+> [follow on Bluesky](https://bsky.app/profile/lukasbach.bsky.social) to
+> stay up to date.
+
+## Features
+
+- [Simple Interface](https://headless-tree.lukasbach.com/?demo=0#demogrid): Easy integration in React with full customizability of DOM
+- [Drag and Drop](https://headless-tree.lukasbach.com/?demo=1#demogrid): Powerful ordered drag-and-drop, that can interact with external drag events
+- [Scalable](https://headless-tree.lukasbach.com/?demo=2#demogrid): Headless Tree remains performant even with large trees
+- [Virtualization Support](https://headless-tree.lukasbach.com/?demo=3#demogrid): Compatible with common virtualization library to support 100k+ items
+- [Hotkeys!](https://headless-tree.lukasbach.com/?demo=4#demogrid): Lots of hotkeys, fully customizable
+- [Search Support](https://headless-tree.lukasbach.com/?demo=5#demogrid): Typeahead anywhere in the tree to quickly search the entire tree
+- [Rename items](https://headless-tree.lukasbach.com/?demo=6#demogrid): Optionally allow users to rename items inside the tree
+- [Manage State](https://headless-tree.lukasbach.com/?demo=7#demogrid): Let Headless Tree manage tree state internally, or manage any part of it yourself
+- [Customize Behavior](https://headless-tree.lukasbach.com/?demo=8#demogrid): Easily overwrite internal behavior like requiring double clicks on items to expand
+- [Customize Logic](https://headless-tree.lukasbach.com/?demo=9#demogrid): Overwrite or expand any internal behavior of Headless Tree
+- [Async Data Support](https://headless-tree.lukasbach.com/?demo=10#demogrid): Use synchronous or asynchronous data sources for your tree. Headless Tree comes with optional caching for async data
+- Free of dependencies
+- Or check out [this comprehensive playground](https://headless-tree.lukasbach.com/?demo=11#demogrid) that has most of the capabilities enabled.
+
+## Bundle Size
+
+Headless Tree exports individual features in a tree-shaking-friendly
+way, allowing you to only include what you need to keep your bundle size
+small. Listed bundle sizes are based on min+gzipped bundles, and are
+based on the Bundlephobia report as of Headless Tree v0.0.15.
+
+| Feature                | Bundle Size |
+|------------------------|-------------|
+| Tree Core              | 3.1kB       |
+| Sync Data Loader       | 0.8kB       |
+| Async Data Loader      | 1.4kB       |
+| Selections             | 1.1kB       |
+| Drag and Drop          | 2.8kB       |
+| Keyboard Drag and Drop | 2.7kB       |
+| Hotkeys                | 0.8kB       |
+| Tree Search            | 1.3kB       |
+| Renaming               | 0.9kB       |
+| Expand All             | 0.7kB       |
+| React Bindings         | 0.4kB       |
+
+Total bundle size is 9.5kB plus 0.4kB for the React bindings. Note that
+the sum of features is bigger than the total bundle size, because several
+features share code. Tree-shaking will ensure that the minimum amount of
+code is included in your bundle.
+
+## Get Started
+
+> [!TIP]  
+> You can find a comprehensive [get-started guide](https://headless-tree.lukasbach.com/getstarted)
+> on the documentation homepage. The following gives a brief overview.
+
+Install Headless Tree via npm:
+
+```bash
+npm install @headless-tree/core @headless-tree/react
+```
+
+In your react component, call the `useTree` hook from `@headless-tree/react` with the configuration of
+your tree:
+
+```tsx
+import {
+  hotkeysCoreFeature,
+  selectionFeature,
+  syncDataLoaderFeature,
+} from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+
+const tree = useTree<string>({
+  initialState: { expandedItems: ["folder-1"] },
+  rootItemId: "folder",
+  getItemName: (item) => item.getItemData(),
+  isItemFolder: (item) => !item.getItemData().endsWith("item"),
+  dataLoader: {
+    getItem: (itemId) => itemId,
+    getChildren: (itemId) => [
+      `${itemId}-folder`,
+      `${itemId}-1-item`,
+      `${itemId}-2-item`,
+    ],
+  },
+  indent: 20,
+  features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+});
+```
+
+Then, render your tree based on the tree instance returned from the hook:
+
+```tsx
+<div {...tree.getContainerProps()} className="tree">
+  {tree.getItems().map((item) => (
+    <button
+      {...item.getProps()}
+      key={item.getId()}
+      style={{ paddingLeft: `${item.getItemMeta().level * 20}px` }}
+    >
+      <div
+        className={cx("treeitem", {
+          focused: item.isFocused(),
+          expanded: item.isExpanded(),
+          selected: item.isSelected(),
+          folder: item.isFolder(),
+        })}
+      >
+        {item.getItemName()}
+      </div>
+    </button>
+  ))}
+</div>
+```
+
+Read on in the [get started guide](https://headless-tree.lukasbach.com/getstarted) to learn more about
+how to use Headless Tree, and how to customize it to your needs.

package/src/features/drag-and-drop/feature.ts

@@ -1,6 +1,11 @@
 import { FeatureImplementation } from "../../types/core";
 import { DndDataRef, DragLineData } from "./types";
-import { canDrop, getDragCode, getDragTarget } from "./utils";
+import {
+  canDrop,
+  getDragCode,
+  getDragTarget,
+  isOrderedDragTarget,
+} from "./utils";
 import { makeStateUpdater } from "../../utils";
 
 export const dragAndDropFeature: FeatureImplementation = {
@@ -30,7 +35,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       const treeBb = tree.getElement()?.getBoundingClientRect();
 
-      if (!target || !treeBb || !("childIndex" in target)) return null;
+      if (!target || !treeBb || !isOrderedDragTarget(target)) return null;
 
       const leftOffset = target.dragLineLevel * (tree.getConfig().indent ?? 1);
       const targetItem = tree.getItems()[target.dragLineIndex];
@@ -212,7 +217,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       if (
         !target ||
-        !("childIndex" in target) ||
+        !isOrderedDragTarget(target) ||
         target.item !== item.getParent()
       )
         return false;
@@ -224,7 +229,7 @@ export const dragAndDropFeature: FeatureImplementation = {
 
       if (
         !target ||
-        !("childIndex" in target) ||
+        !isOrderedDragTarget(target) ||
         target.item !== item.getParent()
       )
         return false;

package/src/features/drag-and-drop/utils.ts

@@ -26,6 +26,9 @@ type TargetPlacement =
       reparentLevel: number;
     };
 
+export const isOrderedDragTarget = <T>(dragTarget: DragTarget<T>) =>
+  "childIndex" in dragTarget;
+
 export const canDrop = (
   dataTransfer: DataTransfer | null,
   target: DragTarget<any>,

package/src/features/hotkeys-core/feature.ts

@@ -17,7 +17,7 @@ const testHotkeyMatch = (
   tree: TreeInstance<any>,
   hotkey: HotkeyConfig<any>,
 ) => {
-  const supposedKeys = hotkey.hotkey.split("+");
+  const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
   const doKeysMatch = supposedKeys.every((key) =>
     key in specialKeys
       ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
@@ -45,10 +45,10 @@ export const hotkeysCoreFeature: FeatureImplementation = {
   onTreeMount: (tree, element) => {
     const data = tree.getDataRef<HotkeysCoreDataRef>();
     const keydown = (e: KeyboardEvent) => {
+      const key = e.key.toLowerCase();
       data.current.pressedKeys ??= new Set();
-      const newMatch = !data.current.pressedKeys.has(e.key);
-      data.current.pressedKeys.add(e.key);
-      console.log("HOTKEYS", data.current.pressedKeys);
+      const newMatch = !data.current.pressedKeys.has(key);
+      data.current.pressedKeys.add(key);
 
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
@@ -79,7 +79,7 @@ export const hotkeysCoreFeature: FeatureImplementation = {
 
     const keyup = (e: KeyboardEvent) => {
       data.current.pressedKeys ??= new Set();
-      data.current.pressedKeys.delete(e.key);
+      data.current.pressedKeys.delete(e.key.toLowerCase());
     };
 
     // keyup is registered on document, because some hotkeys shift

package/src/features/keyboard-drag-and-drop/feature.ts

@@ -10,6 +10,7 @@ import {
   getInsertionIndex,
   getItemDropCategory,
   getReparentTarget,
+  isOrderedDragTarget,
 } from "../drag-and-drop/utils";
 import { makeStateUpdater } from "../../utils";
 import { AssistiveDndState, KDndDataRef } from "./types";
@@ -23,8 +24,7 @@ const getNextDragTarget = <T>(
   const draggedItems = tree.getState().dnd?.draggedItems;
 
   // currently hovering between items
-  if ("childIndex" in dragTarget) {
-    // TODO move check in reusable function
+  if (isOrderedDragTarget(dragTarget)) {
     const parent = dragTarget.item.getParent();
     const targetedItem = tree.getItems()[dragTarget.dragLineIndex - 1]; // item above dragline
 
@@ -107,7 +107,7 @@ const getNextValidDragTarget = <T>(
 
 const updateScroll = <T>(tree: TreeInstance<T>) => {
   const state = tree.getState().dnd;
-  if (!state?.dragTarget || "childIndex" in state.dragTarget) return;
+  if (!state?.dragTarget || isOrderedDragTarget(state.dragTarget)) return;
   state.dragTarget.item.scrollTo({ block: "nearest", inline: "nearest" });
 };
 
@@ -152,7 +152,7 @@ const moveDragPosition = <T>(tree: TreeInstance<T>, isUp: boolean) => {
     dragTarget,
   });
   tree.applySubStateUpdate("assistiveDndState", AssistiveDndState.Dragging);
-  if (!("childIndex" in dragTarget)) {
+  if (!isOrderedDragTarget(dragTarget)) {
     dragTarget.item.setFocused();
   }
   updateScroll(tree);

package/src/features/keyboard-drag-and-drop/keyboard-drag-and-drop.spec.ts

@@ -6,6 +6,7 @@ import { propMemoizationFeature } from "../prop-memoization/feature";
 import { keyboardDragAndDropFeature } from "./feature";
 import { dragAndDropFeature } from "../drag-and-drop/feature";
 import { AssistiveDndState } from "./types";
+import { isOrderedDragTarget } from "../drag-and-drop/utils";
 
 const isItem = (item: unknown): item is ItemInstance<any> =>
   !!item && typeof item === "object" && "getId" in item;
@@ -318,7 +319,7 @@ describe("core-feature/keyboard-drag-and-drop", () => {
     describe("drag restrictions", () => {
       const expectChildIndex = (index: number) => {
         const state = tree.instance.getState().dnd?.dragTarget;
-        if (!state || !("childIndex" in state))
+        if (!state || !isOrderedDragTarget(state))
           throw new Error("No childIndex");
         expect(state.childIndex).toEqual(index);
       };

package/src/features/prop-memoization/feature.ts

@@ -3,15 +3,14 @@ import { PropMemoizationDataRef } from "./types";
 
 const memoize = (
   props: Record<string, any>,
-  dataRef: PropMemoizationDataRef,
+  memoizedProps: Record<string, any>,
 ) => {
-  dataRef.memoizedProps ??= {};
   for (const key in props) {
     if (typeof props[key] === "function") {
-      if (key in dataRef.memoizedProps) {
-        props[key] = dataRef.memoizedProps[key];
+      if (memoizedProps && key in memoizedProps) {
+        props[key] = memoizedProps[key];
       } else {
-        dataRef.memoizedProps[key] = props[key];
+        memoizedProps[key] = props[key];
       }
     }
   }
@@ -37,7 +36,17 @@ export const propMemoizationFeature: FeatureImplementation = {
     getContainerProps: ({ tree, prev }, treeLabel) => {
       const dataRef = tree.getDataRef<PropMemoizationDataRef>();
       const props = prev?.(treeLabel) ?? {};
-      return memoize(props, dataRef.current);
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.tree ??= {};
+      return memoize(props, dataRef.current.memo.tree);
+    },
+
+    getSearchInputElementProps: ({ tree, prev }) => {
+      const dataRef = tree.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.search ??= {};
+      return memoize(props, dataRef.current.memo.search);
     },
   },
 
@@ -45,7 +54,17 @@ export const propMemoizationFeature: FeatureImplementation = {
     getProps: ({ item, prev }) => {
       const dataRef = item.getDataRef<PropMemoizationDataRef>();
       const props = prev?.() ?? {};
-      return memoize(props, dataRef.current);
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.item ??= {};
+      return memoize(props, dataRef.current.memo.item);
+    },
+
+    getRenameInputProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.rename ??= {};
+      return memoize(props, dataRef.current.memo.rename);
     },
   },
 };

package/src/features/prop-memoization/types.ts

@@ -1,5 +1,10 @@
 export interface PropMemoizationDataRef {
-  memoizedProps?: Record<string, any>;
+  memo?: {
+    tree?: Record<string, any>;
+    item?: Record<string, any>;
+    search?: Record<string, any>;
+    rename?: Record<string, any>;
+  };
 }
 
 export type PropMemoizationFeatureDef = {

package/src/features/search/types.ts

@@ -22,7 +22,7 @@ export type SearchFeatureDef<T> = {
     closeSearch: () => void;
     isSearchOpen: () => boolean;
     getSearchValue: () => string;
-    registerSearchInputElement: (element: HTMLInputElement | null) => void;
+    registerSearchInputElement: (element: HTMLInputElement | null) => void; // TODO remove
     getSearchInputElement: () => HTMLInputElement | null;
     getSearchInputElementProps: () => any;
     getSearchMatchingItems: () => ItemInstance<T>[];

package/src/features/selection/feature.ts

@@ -43,9 +43,9 @@ export const selectionFeature: FeatureImplementation = {
       tree.setSelectedItems(selectedItems.filter((id) => id !== itemId));
     },
 
-    isSelected: ({ tree, item }) => {
+    isSelected: ({ tree, itemId }) => {
       const { selectedItems } = tree.getState();
-      return selectedItems.includes(item.getItemMeta().itemId);
+      return selectedItems.includes(itemId);
     },
 
     selectUpTo: ({ tree, item }, ctrl: boolean) => {

package/src/features/tree/feature.ts

@@ -1,6 +1,7 @@
 import { FeatureImplementation, ItemInstance } from "../../types/core";
 import { ItemMeta } from "./types";
 import { makeStateUpdater, poll } from "../../utils";
+import { logWarning } from "../../utilities/errors";
 
 export const treeFeature: FeatureImplementation<any> = {
   key: "tree",
@@ -31,16 +32,21 @@ export const treeFeature: FeatureImplementation<any> = {
 
       const recursiveAdd = (
         itemId: string,
-        parentId: string,
+        path: string[],
         level: number,
         setSize: number,
         posInSet: number,
       ) => {
+        if (path.includes(itemId)) {
+          logWarning(`Circular reference for ${path.join(".")}`);
+          return;
+        }
+
         flatItems.push({
           itemId,
           level,
           index: flatItems.length,
-          parentId,
+          parentId: path.at(-1) as string,
           setSize,
           posInSet,
         });
@@ -49,7 +55,13 @@ export const treeFeature: FeatureImplementation<any> = {
           const children = tree.retrieveChildrenIds(itemId) ?? [];
           let i = 0;
           for (const childId of children) {
-            recursiveAdd(childId, itemId, level + 1, children.length, i++);
+            recursiveAdd(
+              childId,
+              path.concat(itemId),
+              level + 1,
+              children.length,
+              i++,
+            );
           }
         }
       };
@@ -57,13 +69,12 @@ export const treeFeature: FeatureImplementation<any> = {
       const children = tree.retrieveChildrenIds(rootItemId);
       let i = 0;
       for (const itemId of children) {
-        recursiveAdd(itemId, rootItemId, 0, children.length, i++);
+        recursiveAdd(itemId, [rootItemId], 0, children.length, i++);
       }
 
       return flatItems;
     },
 
-    // TODO memo
     getFocusedItem: ({ tree }) => {
       return (
         tree.getItemInstance(tree.getState().focusedItem ?? "") ??
@@ -72,14 +83,16 @@ export const treeFeature: FeatureImplementation<any> = {
     },
 
     focusNextItem: ({ tree }) => {
-      const { index } = tree.getFocusedItem().getItemMeta();
-      const nextIndex = Math.min(index + 1, tree.getItems().length - 1);
+      const focused = tree.getFocusedItem().getItemMeta();
+      if (!focused) return;
+      const nextIndex = Math.min(focused.index + 1, tree.getItems().length - 1);
       tree.getItems()[nextIndex]?.setFocused();
     },
 
     focusPreviousItem: ({ tree }) => {
-      const { index } = tree.getFocusedItem().getItemMeta();
-      const nextIndex = Math.max(index - 1, 0);
+      const focused = tree.getFocusedItem().getItemMeta();
+      if (!focused) return;
+      const nextIndex = Math.max(focused.index - 1, 0);
       tree.getItems()[nextIndex]?.setFocused();
     },
 
@@ -95,7 +108,6 @@ export const treeFeature: FeatureImplementation<any> = {
       });
     },
 
-    // TODO add label parameter
     getContainerProps: ({ prev, tree }, treeLabel) => ({
       ...prev?.(),
       role: "tree",

package/src/utilities/errors.ts

@@ -1,2 +1,6 @@
-export const throwError = (message: string) =>
-  Error(`Headless Tree: ${message}`);
+const prefix = "Headless Tree: ";
+
+export const throwError = (message: string) => Error(prefix + message);
+
+// eslint-disable-next-line no-console
+export const logWarning = (message: string) => console.warn(prefix + message);