docs: renaming, expandall and propmemo

Author: lukasbach

packages/docs/docs/features/10-prop-memoization.mdx

@@ -6,11 +6,31 @@ hide_title: true
 ---
 
 import { FeaturePageHeader } from "../../src/components/docs-page/feature-page-header";
+import {DemoBox} from "../../src/components/demo/demo-box";
 
 <FeaturePageHeader
     title="Prop Memoization"
     subtitle="Feature making all props created by HT consistent and useable for memoization"
     feature="prop-memoization"
 />
 
-TODO
+By default, React props generated by `tree.getContainerProps()` and `item.getProps()` will not
+be memoized, and might change their reference during each render as they are generated fresh
+each time.
+
+If you rely on stable props, or need them to be memoized, you can simply include the `propMemoizationFeature`
+and the props will be memoized automatically. The feature doesn't require any configuration or expose any
+methods.
+
+## Example
+
+Consider this sample, where the render method of each item is intentionally slowed down, resulting
+in a slow usage experience when expanding or collapsing items:
+
+<DemoBox tags={["feature/propmemoization"]} initialStory="react-guides-render-performance-slow-item-renderers--slow-item-renderers" />
+
+Here, the render method is memoized and the propMemoizationFeature is included. Tree items still
+render slowly during the initial render, but items that are unchanged during rerender do not retrigger
+the slow render function, resulting in a faster experience when expanding or collapsing items:
+
+<DemoBox tags={["feature/propmemoization"]} initialStory="react-guides-render-performance-memoized-slow-item-renderers--memoized-slow-item-renderers" />

packages/docs/docs/features/8-renaming.mdx

@@ -14,6 +14,35 @@ import { FeaturePageHeader } from "../../src/components/docs-page/feature-page-h
     feature="renaming"
 />
 
-<DemoBox tags={["feature/renaming"]} />
+<DemoBox tags={["feature/renaming"]} initialStory="react-renaming-basic--basic" />
 
-TODO
+The renaming feature allows you to allow users to rename items in the tree. They can either start renaming
+an item via the `renameItem` hotkey (defaulting to F2), or when the `item.startRenaming()` method is called.
+You can hook this up to e.g. double-clicking an item-name or to a context menu option.
+
+The feature exposes two state variables, `renamingItem` to keep track of the item that is currently being renamed,
+and `renamingValue` to keep track of the new name that the user is typing in. When
+[maintaining individual states](/guides/state#managing-individual-feature-states), you can hook into changes to
+those states via the `setRenamingItem` and `setRenamingValue` config methods.
+
+## Rendering the Rename Input
+
+Similar to other Headless Tree Features, the library only provides the functionality, but not the UI. For any tree
+item, you can determine whether it should render a renaming behavior with `item.isRenaming()`. Make sure to
+pass `item.getRenameInputProps()` to the input element to hook up the renaming behavior to the input field.
+
+```jsx
+if (item.isRenaming()) {
+  return (
+    <input {...item.getRenameInputProps()} />
+  );
+}
+
+// otherwise, render the item as usual
+```
+
+## Customizing which items can be renamed
+
+You can also customize which items can be renamed by providing a `canRename` function in the tree configuration.
+
+<DemoBox tags={["feature/renaming"]} initialStory="react-renaming-can-rename-configurability--can-rename-configurability" />

packages/docs/docs/features/9-expandall.mdx

@@ -16,4 +16,24 @@ import { FeaturePageHeader } from "../../src/components/docs-page/feature-page-h
 
 <DemoBox tags={["feature/expand-all"]} />
 
-TODO
+The expand-all feature exposes methods both on any item instance and the tree instance to expand or collapse
+all of its items. When called on the tree instance, it will expand or collapse all items in the tree, otherwise
+it will only affect all children of the item.
+
+When used in conjunction with the [async data loader](/features/async-dataloader), the expand-all feature will
+wait for children to load in during each step, before triggering the expanding of the next level. You can also
+programmatically abort the expanding process at any time when this happens. When calling the `expandAll` method,
+you can pass an object with a `current` variable. Setting this to `false` during the expanding progress will
+cancel the expanding process while it is happening.
+
+```ts
+const cancelToken = { current: false };
+
+const expand = () => {
+  cancelToken.current = false;
+  tree.expandAll(cancelToken);
+};
+const cancelExpanding = () => {
+  cancelToken.current = true;
+};
+```

packages/docs/docs/guides/0-state.mdx

@@ -7,6 +7,8 @@ category: guide
 
 import { DemoBox } from "../../src/components/demo/demo-box";
 
+# Managing State
+
 With Headless Tree, there are multiple ways how to manage the state of the tree. By default, Headless Tree
 manages all parts of the state itself, and you just need to provide the data. Alternatively, you can opt into
 managing the entirety of the tree state yourself, which is useful if you want to change the state from outside,
@@ -24,15 +26,15 @@ Another important part to keep in mind is that which parts of the state are expo
 are included. The aforementioned `dnd` state property will be completely ignored if the `dragAndDropFeature` is
 not included in the tree configuration, as will be dnd-related update handlers.
 
-# Letting headless-tree manage the state
+## Letting headless-tree manage the state
 
 The simplest option is to let Headless Tree manage the entirety of the state. This is done by default, so you
 do not have to do anything. You can also supply a `initialState` prop in the tree configuration to define
 the initial state.
 
 <DemoBox tags={["guides/state"]} initialStory="react-state-internal-state--internal-state" />
 
-# Managing individual feature states
+## Managing individual feature states
 
 If you are interested in specific parts of the state, you can opt into managing those parts of the state while
 still leaving the rest up to Headless Tree. To manage one part of the state, you need to provide the sub property
@@ -76,7 +78,7 @@ useTree({
 
 <DemoBox tags={["guides/state"]} initialStory="react-state-distinct-state-handlers--distinct-state-handlers" />
 
-# Manage the entire state yourself
+## Manage the entire state yourself
 
 As another alternative, you can also choose to manage the entirety of the state yourself. Instead of passing
 individual sub properties through the `state` config prop, you can pass the entire state object as that property.

packages/sb-react/src/guides/render-performance/memoized-slow-item-renderers.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
 import React, { HTMLProps, forwardRef, memo } from "react";
 import {
   hotkeysCoreFeature,
+  propMemoizationFeature,
   selectionFeature,
   syncDataLoaderFeature,
 } from "@headless-tree/core";
@@ -11,6 +12,7 @@ import cx from "classnames";
 
 const meta = {
   title: "React/Guides/Render Performance/Memoized Slow Item Renderers",
+  tags: ["feature/propmemoization"],
 } satisfies Meta;
 
 export default meta;
@@ -59,7 +61,12 @@ export const MemoizedSlowItemRenderers = () => {
         `${itemId}-2item`,
       ],
     },
-    features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+    features: [
+      syncDataLoaderFeature,
+      selectionFeature,
+      hotkeysCoreFeature,
+      propMemoizationFeature,
+    ],
   });
 
   return (

packages/sb-react/src/guides/render-performance/slow-item-renderers.stories.tsx

@@ -11,6 +11,7 @@ import cx from "classnames";
 
 const meta = {
   title: "React/Guides/Render Performance/Slow Item Renderers",
+  tags: ["feature/propmemoization"],
 } satisfies Meta;
 
 export default meta;