@headless-tree/core 1.0.1 → 1.1.0

package/src/features/async-data-loader/feature.ts

@@ -1,7 +1,61 @@
-import { FeatureImplementation } from "../../types/core";
+import { FeatureImplementation, TreeInstance } from "../../types/core";
 import { AsyncDataLoaderDataRef } from "./types";
 import { makeStateUpdater } from "../../utils";
 
+const getDataRef = <T>(tree: TreeInstance<T>) => {
+  const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
+  dataRef.current.itemData ??= {};
+  dataRef.current.childrenIds ??= {};
+  return dataRef;
+};
+
+const loadItemData = async <T>(tree: TreeInstance<T>, itemId: string) => {
+  const config = tree.getConfig();
+  const dataRef = getDataRef(tree);
+
+  const item = await config.dataLoader.getItem(itemId);
+  dataRef.current.itemData[itemId] = item;
+  config.onLoadedItem?.(itemId, item);
+  tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
+    loadingItemData.filter((id) => id !== itemId),
+  );
+
+  return item;
+};
+
+const loadChildrenIds = async <T>(tree: TreeInstance<T>, itemId: string) => {
+  const config = tree.getConfig();
+  const dataRef = getDataRef(tree);
+  let childrenIds: string[];
+
+  if ("getChildrenWithData" in config.dataLoader) {
+    const children = await config.dataLoader.getChildrenWithData(itemId);
+    childrenIds = children.map((c) => c.id);
+    dataRef.current.childrenIds[itemId] = childrenIds;
+    children.forEach(({ id, data }) => {
+      dataRef.current.itemData[id] = data;
+      config.onLoadedItem?.(id, data);
+    });
+
+    config.onLoadedChildren?.(itemId, childrenIds);
+    tree.rebuildTree();
+    tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
+      loadingItemData.filter((id) => !childrenIds.includes(id)),
+    );
+  } else {
+    childrenIds = await config.dataLoader.getChildren(itemId);
+    dataRef.current.childrenIds[itemId] = childrenIds;
+    config.onLoadedChildren?.(itemId, childrenIds);
+    tree.rebuildTree();
+  }
+
+  tree.applySubStateUpdate("loadingItemChildrens", (loadingItemChildrens) =>
+    loadingItemChildrens.filter((id) => id !== itemId),
+  );
+
+  return childrenIds;
+};
+
 export const asyncDataLoaderFeature: FeatureImplementation = {
   key: "async-data-loader",
 
@@ -23,37 +77,27 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
   },
 
   treeInstance: {
-    waitForItemDataLoaded: async ({ tree }, itemId) => {
-      tree.retrieveItemData(itemId);
-      if (!tree.getState().loadingItemData.includes(itemId)) {
-        return;
-      }
-      await new Promise<void>((resolve) => {
-        const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-        dataRef.current.awaitingItemDataLoading ??= {};
-        dataRef.current.awaitingItemDataLoading[itemId] ??= [];
-        dataRef.current.awaitingItemDataLoading[itemId].push(resolve);
-      });
-    },
+    waitForItemDataLoaded: ({ tree }, itemId) => tree.loadItemData(itemId),
 
-    waitForItemChildrenLoaded: async ({ tree }, itemId) => {
-      tree.retrieveChildrenIds(itemId);
-      if (!tree.getState().loadingItemChildrens.includes(itemId)) {
-        return;
-      }
-      await new Promise<void>((resolve) => {
-        const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-        dataRef.current.awaitingItemChildrensLoading ??= {};
-        dataRef.current.awaitingItemChildrensLoading[itemId] ??= [];
-        dataRef.current.awaitingItemChildrensLoading[itemId].push(resolve);
-      });
+    waitForItemChildrenLoaded: ({ tree }, itemId) =>
+      tree.loadChildrenIds(itemId),
+
+    loadItemData: async ({ tree }, itemId) => {
+      return (
+        getDataRef(tree).current.itemData[itemId] ??
+        (await loadItemData(tree, itemId))
+      );
+    },
+    loadChildrenIds: async ({ tree }, itemId) => {
+      return (
+        getDataRef(tree).current.childrenIds[itemId] ??
+        (await loadChildrenIds(tree, itemId))
+      );
     },
 
     retrieveItemData: ({ tree }, itemId) => {
       const config = tree.getConfig();
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      dataRef.current.itemData ??= {};
-      dataRef.current.childrenIds ??= {};
+      const dataRef = getDataRef(tree);
 
       if (dataRef.current.itemData[itemId]) {
         return dataRef.current.itemData[itemId];
@@ -65,28 +109,14 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
           itemId,
         ]);
 
-        (async () => {
-          const item = await config.dataLoader.getItem(itemId);
-          dataRef.current.itemData[itemId] = item;
-          config.onLoadedItem?.(itemId, item);
-          tree.applySubStateUpdate("loadingItemData", (loadingItemData) =>
-            loadingItemData.filter((id) => id !== itemId),
-          );
-
-          dataRef.current.awaitingItemDataLoading?.[itemId].forEach((cb) =>
-            cb(),
-          );
-          delete dataRef.current.awaitingItemDataLoading?.[itemId];
-        })();
+        loadItemData(tree, itemId);
       }
 
       return config.createLoadingItemData?.() ?? null;
     },
 
     retrieveChildrenIds: ({ tree }, itemId) => {
-      const config = tree.getConfig();
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      dataRef.current.childrenIds ??= {};
+      const dataRef = getDataRef(tree);
       if (dataRef.current.childrenIds[itemId]) {
         return dataRef.current.childrenIds[itemId];
       }
@@ -100,22 +130,7 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
         (loadingItemChildrens) => [...loadingItemChildrens, itemId],
       );
 
-      (async () => {
-        const childrenIds = await config.dataLoader.getChildren(itemId);
-        dataRef.current.childrenIds[itemId] = childrenIds;
-        config.onLoadedChildren?.(itemId, childrenIds);
-        tree.applySubStateUpdate(
-          "loadingItemChildrens",
-          (loadingItemChildrens) =>
-            loadingItemChildrens.filter((id) => id !== itemId),
-        );
-        tree.rebuildTree();
-
-        dataRef.current.awaitingItemChildrensLoading?.[itemId]?.forEach((cb) =>
-          cb(),
-        );
-        delete dataRef.current.awaitingItemChildrensLoading?.[itemId];
-      })();
+      loadChildrenIds(tree, itemId);
 
       return [];
     },
@@ -125,15 +140,25 @@ export const asyncDataLoaderFeature: FeatureImplementation = {
     isLoading: ({ tree, item }) =>
       tree.getState().loadingItemData.includes(item.getItemMeta().itemId) ||
       tree.getState().loadingItemChildrens.includes(item.getItemMeta().itemId),
-    invalidateItemData: ({ tree, itemId }) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      delete dataRef.current.itemData?.[itemId];
-      tree.retrieveItemData(itemId);
+    invalidateItemData: async ({ tree, itemId }, optimistic) => {
+      if (!optimistic) {
+        delete getDataRef(tree).current.itemData?.[itemId];
+        tree.applySubStateUpdate("loadingItemData", (loadingItemData) => [
+          ...loadingItemData,
+          itemId,
+        ]);
+      }
+      await loadItemData(tree, itemId);
     },
-    invalidateChildrenIds: ({ tree, itemId }) => {
-      const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();
-      delete dataRef.current.childrenIds?.[itemId];
-      tree.retrieveChildrenIds(itemId);
+    invalidateChildrenIds: async ({ tree, itemId }, optimistic) => {
+      if (!optimistic) {
+        delete getDataRef(tree).current.childrenIds?.[itemId];
+        tree.applySubStateUpdate(
+          "loadingItemChildrens",
+          (loadingItemChildrens) => [...loadingItemChildrens, itemId],
+        );
+      }
+      await loadChildrenIds(tree, itemId);
     },
     updateCachedChildrenIds: ({ tree, itemId }, childrenIds) => {
       const dataRef = tree.getDataRef<AsyncDataLoaderDataRef>();

package/src/features/async-data-loader/types.ts

@@ -1,13 +1,9 @@
 import { SetStateFn } from "../../types/core";
 import { SyncDataLoaderFeatureDef } from "../sync-data-loader/types";
 
-type AwaitingLoaderCallbacks = Record<string, (() => void)[]>;
-
 export interface AsyncDataLoaderDataRef<T = any> {
   itemData: Record<string, T>;
   childrenIds: Record<string, string[]>;
-  awaitingItemDataLoading: AwaitingLoaderCallbacks;
-  awaitingItemChildrensLoading: AwaitingLoaderCallbacks;
 }
 
 /**
@@ -32,13 +28,24 @@ export type AsyncDataLoaderFeatureDef<T> = {
     onLoadedChildren?: (itemId: string, childrenIds: string[]) => void;
   };
   treeInstance: SyncDataLoaderFeatureDef<T>["treeInstance"] & {
+    /** @deprecated use loadItemData instead */
     waitForItemDataLoaded: (itemId: string) => Promise<void>;
+    /** @deprecated use loadChildrenIds instead */
     waitForItemChildrenLoaded: (itemId: string) => Promise<void>;
+    loadItemData: (itemId: string) => Promise<T>;
+    loadChildrenIds: (itemId: string) => Promise<string[]>;
   };
   itemInstance: SyncDataLoaderFeatureDef<T>["itemInstance"] & {
-    /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible */
-    invalidateItemData: () => void;
-    invalidateChildrenIds: () => void;
+    /** Invalidate fetched data for item, and triggers a refetch and subsequent rerender if the item is visible
+     * @param optimistic If true, the item will not trigger a state update on `loadingItemData`, and
+     * the tree will continue to display the old data until the new data has loaded. */
+    invalidateItemData: (optimistic?: boolean) => Promise<void>;
+
+    /** Invalidate fetched children ids for item, and triggers a refetch and subsequent rerender if the item is visible
+     * @param optimistic If true, the item will not trigger a state update on `loadingItemChildrens`, and
+     * the tree will continue to display the old data until the new data has loaded. */
+    invalidateChildrenIds: (optimistic?: boolean) => Promise<void>;
+
     updateCachedChildrenIds: (childrenIds: string[]) => void;
     isLoading: () => boolean;
   };

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

@@ -74,6 +74,7 @@ export const dragAndDropFeature: FeatureImplementation = {
       const dragLine = tree.getDragLineData();
       return dragLine
         ? {
+            position: "absolute",
             top: `${dragLine.top + topOffset}px`,
             left: `${dragLine.left + leftOffset}px`,
             width: `${dragLine.width - leftOffset}px`,

package/src/features/expand-all/feature.ts

@@ -50,7 +50,7 @@ export const expandAllFeature: FeatureImplementation = {
       handler: async (_, tree) => {
         const cancelToken = { current: false };
         const cancelHandler = (e: KeyboardEvent) => {
-          if (e.key === "Escape") {
+          if (e.code === "Escape") {
             cancelToken.current = true;
           }
         };
@@ -63,7 +63,7 @@ export const expandAllFeature: FeatureImplementation = {
     },
 
     collapseSelected: {
-      hotkey: "Control+Shift+-",
+      hotkey: "Control+Shift+Minus",
       handler: (_, tree) => {
         tree.getSelectedItems().forEach((item) => item.collapseAll());
       },

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

@@ -6,10 +6,13 @@ import {
 import { HotkeyConfig, HotkeysCoreDataRef } from "./types";
 
 const specialKeys: Record<string, RegExp> = {
-  Letter: /^[a-z]$/,
-  LetterOrNumber: /^[a-z0-9]$/,
-  Plus: /^\+$/,
-  Space: /^ $/,
+  // TODO:breaking deprecate auto-lowercase
+  letter: /^Key[A-Z]$/,
+  letterornumber: /^(Key[A-Z]|Digit[0-9])$/,
+  plus: /^(NumpadAdd|Plus)$/,
+  minus: /^(NumpadSubtract|Minus)$/,
+  control: /^(ControlLeft|ControlRight)$/,
+  shift: /^(ShiftLeft|ShiftRight)$/,
 };
 
 const testHotkeyMatch = (
@@ -17,12 +20,28 @@ const testHotkeyMatch = (
   tree: TreeInstance<any>,
   hotkey: HotkeyConfig<any>,
 ) => {
-  const supposedKeys = hotkey.hotkey.toLowerCase().split("+");
-  const doKeysMatch = supposedKeys.every((key) =>
-    key in specialKeys
-      ? [...pressedKeys].some((pressedKey) => specialKeys[key].test(pressedKey))
-      : pressedKeys.has(key),
-  );
+  const supposedKeys = hotkey.hotkey.toLowerCase().split("+"); // TODO:breaking deprecate auto-lowercase
+  const doKeysMatch = supposedKeys.every((key) => {
+    if (key in specialKeys) {
+      return [...pressedKeys].some((pressedKey) =>
+        specialKeys[key].test(pressedKey),
+      );
+    }
+
+    const pressedKeysLowerCase = [...pressedKeys] // TODO:breaking deprecate auto-lowercase
+      .map((k) => k.toLowerCase());
+
+    if (pressedKeysLowerCase.includes(key.toLowerCase())) {
+      return true;
+    }
+
+    if (pressedKeysLowerCase.includes(`key${key.toLowerCase()}`)) {
+      // TODO:breaking deprecate e.key character matching
+      return true;
+    }
+
+    return false;
+  });
   const isEnabled = !hotkey.isEnabled || hotkey.isEnabled(tree);
   const equalCounts = pressedKeys.size === supposedKeys.length;
   return doKeysMatch && isEnabled && equalCounts;
@@ -45,23 +64,33 @@ export const hotkeysCoreFeature: FeatureImplementation = {
   onTreeMount: (tree, element) => {
     const data = tree.getDataRef<HotkeysCoreDataRef>();
     const keydown = (e: KeyboardEvent) => {
-      const key = e.key.toLowerCase();
+      const { ignoreHotkeysOnInputs, onTreeHotkey, hotkeys } = tree.getConfig();
+      if (e.target instanceof HTMLInputElement && ignoreHotkeysOnInputs) {
+        return;
+      }
+
       data.current.pressedKeys ??= new Set();
-      const newMatch = !data.current.pressedKeys.has(key);
-      data.current.pressedKeys.add(key);
+      const newMatch = !data.current.pressedKeys.has(e.code);
+      data.current.pressedKeys.add(e.code);
 
       const hotkeyName = findHotkeyMatch(
         data.current.pressedKeys,
         tree as any,
         tree.getHotkeyPresets(),
-        tree.getConfig().hotkeys as HotkeysConfig<any>,
+        hotkeys as HotkeysConfig<any>,
       );
 
+      if (e.target instanceof HTMLInputElement) {
+        // JS respects composite keydowns while input elements are focused, and
+        // doesnt send the associated keyup events with the same key name
+        data.current.pressedKeys.delete(e.code);
+      }
+
       if (!hotkeyName) return;
 
       const hotkeyConfig: HotkeyConfig<any> = {
         ...tree.getHotkeyPresets()[hotkeyName],
-        ...tree.getConfig().hotkeys?.[hotkeyName],
+        ...hotkeys?.[hotkeyName],
       };
 
       if (!hotkeyConfig) return;
@@ -74,12 +103,16 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       if (hotkeyConfig.preventDefault) e.preventDefault();
 
       hotkeyConfig.handler(e, tree as any);
-      tree.getConfig().onTreeHotkey?.(hotkeyName, e);
+      onTreeHotkey?.(hotkeyName, e);
     };
 
     const keyup = (e: KeyboardEvent) => {
       data.current.pressedKeys ??= new Set();
-      data.current.pressedKeys.delete(e.key.toLowerCase());
+      data.current.pressedKeys.delete(e.code);
+    };
+
+    const reset = () => {
+      data.current.pressedKeys = new Set();
     };
 
     // keyup is registered on document, because some hotkeys shift
@@ -87,8 +120,10 @@ export const hotkeysCoreFeature: FeatureImplementation = {
     // and then we wouldn't get the keyup event anymore
     element.addEventListener("keydown", keydown);
     document.addEventListener("keyup", keyup);
+    window.addEventListener("focus", reset);
     data.current.keydownHandler = keydown;
     data.current.keyupHandler = keyup;
+    data.current.resetHandler = reset;
   },
 
   onTreeUnmount: (tree, element) => {
@@ -101,5 +136,9 @@ export const hotkeysCoreFeature: FeatureImplementation = {
       element.removeEventListener("keydown", data.current.keydownHandler);
       delete data.current.keydownHandler;
     }
+    if (data.current.resetHandler) {
+      window.removeEventListener("focus", data.current.resetHandler);
+      delete data.current.resetHandler;
+    }
   },
 };

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

@@ -12,6 +12,7 @@ export interface HotkeyConfig<T> {
 export interface HotkeysCoreDataRef {
   keydownHandler?: (e: KeyboardEvent) => void;
   keyupHandler?: (e: KeyboardEvent) => void;
+  resetHandler?: (e: FocusEvent) => void;
   pressedKeys: Set<string>;
 }
 
@@ -20,6 +21,9 @@ export type HotkeysCoreFeatureDef<T> = {
   config: {
     hotkeys?: CustomHotkeysConfig<T>;
     onTreeHotkey?: (name: string, e: KeyboardEvent) => void;
+
+    /** Do not handle key inputs while an HTML input element is focused */
+    ignoreHotkeysOnInputs?: boolean;
   };
   treeInstance: {};
   itemInstance: {};

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

@@ -187,7 +187,7 @@ export const keyboardDragAndDropFeature: FeatureImplementation = {
 
   hotkeys: {
     startDrag: {
-      hotkey: "Control+Shift+D",
+      hotkey: "Control+Shift+KeyD",
       preventDefault: true,
       isEnabled: (tree) => !tree.getState().dnd,
       handler: (_, tree) => {

package/src/features/selection/feature.ts

@@ -144,7 +144,7 @@ export const selectionFeature: FeatureImplementation = {
       },
     },
     selectAll: {
-      hotkey: "Control+a",
+      hotkey: "Control+KeyA",
       preventDefault: true,
       handler: (e, tree) => {
         tree.setSelectedItems(tree.getItems().map((item) => item.getId()));

package/src/features/sync-data-loader/feature.ts

@@ -3,6 +3,12 @@ import { makeStateUpdater } from "../../utils";
 import { throwError } from "../../utilities/errors";
 
 const promiseErrorMessage = "sync dataLoader returned promise";
+const unpromise = <T>(data: T | Promise<T>): T => {
+  if (!data || (typeof data === "object" && "then" in data)) {
+    throw throwError(promiseErrorMessage);
+  }
+  return data;
+};
 
 export const syncDataLoaderFeature: FeatureImplementation = {
   key: "sync-data-loader",
@@ -29,20 +35,21 @@ export const syncDataLoaderFeature: FeatureImplementation = {
     waitForItemChildrenLoaded: async () => {},
 
     retrieveItemData: ({ tree }, itemId) => {
-      const data = tree.getConfig().dataLoader.getItem(itemId);
-      if (typeof data === "object" && "then" in data) {
-        throw throwError(promiseErrorMessage);
-      }
-      return data;
+      return unpromise(tree.getConfig().dataLoader.getItem(itemId));
     },
 
     retrieveChildrenIds: ({ tree }, itemId) => {
-      const data = tree.getConfig().dataLoader.getChildren(itemId);
-      if (typeof data === "object" && "then" in data) {
-        throw throwError(promiseErrorMessage);
+      const { dataLoader } = tree.getConfig();
+      if ("getChildren" in dataLoader) {
+        return unpromise(dataLoader.getChildren(itemId));
       }
-      return data;
+      return unpromise(dataLoader.getChildrenWithData(itemId)).map(
+        (c) => c.data,
+      );
     },
+
+    loadItemData: ({ tree }, itemId) => tree.retrieveItemData(itemId),
+    loadChildrenIds: ({ tree }, itemId) => tree.retrieveChildrenIds(itemId),
   },
 
   itemInstance: {

package/src/features/sync-data-loader/types.ts

@@ -1,7 +1,14 @@
-export interface TreeDataLoader<T> {
-  getItem: (itemId: string) => T | Promise<T>;
-  getChildren: (itemId: string) => string[] | Promise<string[]>;
-}
+export type TreeDataLoader<T> =
+  | {
+      getItem: (itemId: string) => T | Promise<T>;
+      getChildren: (itemId: string) => string[] | Promise<string[]>;
+    }
+  | {
+      getItem: (itemId: string) => T | Promise<T>;
+      getChildrenWithData: (
+        itemId: string,
+      ) => { id: string; data: T }[] | Promise<{ id: string; data: T }[]>;
+    };
 
 export type SyncDataLoaderFeatureDef<T> = {
   state: {};

package/src/test-utils/test-tree-expect.ts

@@ -82,6 +82,7 @@ export class TestTreeExpect<T> {
       top: 0,
     });
     expect(this.tree.instance.getDragLineStyle(0, 0)).toEqual({
+      position: "absolute",
       left: `${indent * 20}px`,
       pointerEvents: "none",
       top: "0px",

package/readme.md

@@ -1,157 +0,0 @@
-![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.