@headless-tree/core 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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,14 +44,14 @@ 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;
         },
@@ -56,14 +61,18 @@ exports.treeFeature = {
         },
         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 }) => {

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/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/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,14 +41,14 @@ 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;
         },
@@ -53,14 +58,18 @@ export const treeFeature = {
         },
         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 }) => {

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": "1.0.0",
+  "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/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/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,7 +69,7 @@ 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;
@@ -71,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();
     },
 

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);