react-arborist 3.6.1 → 3.8.0

package/dist/main/components/cursor.js

@@ -11,8 +11,7 @@ function Cursor() {
     if (!cursor || cursor.type !== "line")
         return null;
     const indent = tree.indent;
-    const top = tree.rowHeight * cursor.index +
-        ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0);
+    const top = tree.rowTopPosition(cursor.index) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0);
     const left = indent * cursor.level;
     const Cursor = tree.renderCursor;
     return (0, jsx_runtime_1.jsx)(Cursor, { top, left, indent });

package/dist/main/components/default-container.js

@@ -233,5 +233,35 @@ function DefaultContainer() {
             });
             if (node)
                 tree.focus(node.id);
-        }, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: list_outer_element_1.ListOuterElement, innerElementType: list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
+        }, children: (0, jsx_runtime_1.jsx)(List, {}) }));
+}
+/**
+ * Fixed-height trees (numeric rowHeight) render a FixedSizeList, preserving the
+ * original O(1) layout and avoiding VariableSizeList's measurement cache. Only
+ * the function form, which needs per-row heights, uses VariableSizeList.
+ */
+function List() {
+    var _a, _b;
+    const tree = (0, context_1.useTreeApi)();
+    const commonProps = {
+        className: tree.props.className,
+        outerRef: tree.listEl,
+        itemCount: tree.visibleNodes.length,
+        height: tree.height,
+        width: tree.width,
+        overscanCount: tree.overscanCount,
+        itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; },
+        outerElementType: (_a = tree.props.outerElementType) !== null && _a !== void 0 ? _a : list_outer_element_1.ListOuterElement,
+        innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : list_inner_element_1.ListInnerElement,
+        onScroll: tree.props.onScroll,
+        onItemsRendered: tree.onItemsRendered.bind(tree),
+    };
+    if (typeof tree.props.rowHeight === "function") {
+        return (
+        // @ts-ignore
+        (0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeightAt, ref: tree.list, children: row_container_1.RowContainer })));
+    }
+    return (
+    // @ts-ignore
+    (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeight, ref: tree.list, children: row_container_1.RowContainer })));
 }

package/dist/main/components/default-cursor.js

@@ -23,7 +23,7 @@ const circleStyle = {
     boxShadow: "0 0 0 3px #4B91E2",
     borderRadius: "50%",
 };
-exports.DefaultCursor = react_1.default.memo(function DefaultCursor({ top, left, indent, }) {
+exports.DefaultCursor = react_1.default.memo(function DefaultCursor({ top, left, indent }) {
     const style = {
         position: "absolute",
         pointerEvents: "none",

package/dist/main/components/default-drag-preview.d.ts

@@ -1,2 +1,2 @@
 import { DragPreviewProps } from "../types/renderers";
-export declare function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }: DragPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging }: DragPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/components/default-drag-preview.js

@@ -25,7 +25,7 @@ const getCountStyle = (offset) => {
     const { x, y } = offset;
     return { transform: `translate(${x + 10}px, ${y + 10}px)` };
 };
-function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }) {
+function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging }) {
     return ((0, jsx_runtime_1.jsxs)(Overlay, { isDragging: isDragging, children: [(0, jsx_runtime_1.jsx)(Position, { offset: offset, children: (0, jsx_runtime_1.jsx)(PreviewNode, { id: id, dragIds: dragIds }) }), (0, jsx_runtime_1.jsx)(Count, { mouse: mouse, count: dragIds.length })] }));
 }
 const Overlay = (0, react_1.memo)(function Overlay(props) {

package/dist/main/components/default-row.d.ts

@@ -1,2 +1,2 @@
 import { RowRendererProps } from "../types/renderers";
-export declare function DefaultRow<T>({ node, attrs, innerRef, children, }: RowRendererProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultRow<T>({ node, attrs, innerRef, children }: RowRendererProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/main/components/default-row.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultRow = DefaultRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DefaultRow({ node, attrs, innerRef, children, }) {
+function DefaultRow({ node, attrs, innerRef, children }) {
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
 }

package/dist/main/components/list-outer-element.d.ts

@@ -1 +1,2 @@
 export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const DropContainer: () => import("react/jsx-runtime").JSX.Element;

package/dist/main/components/list-outer-element.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListOuterElement = void 0;
+exports.DropContainer = exports.ListOuterElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const context_1 = require("../context");
@@ -24,15 +24,16 @@ exports.ListOuterElement = (0, react_1.forwardRef)(function Outer(props, ref) {
         ref: ref }, rest, { onClick: (e) => {
             if (e.currentTarget === e.target)
                 tree.deselectAll();
-        }, children: [(0, jsx_runtime_1.jsx)(DropContainer, {}), children] })));
+        }, children: [(0, jsx_runtime_1.jsx)(exports.DropContainer, {}), children] })));
 });
 const DropContainer = () => {
     const tree = (0, context_1.useTreeApi)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            height: tree.visibleNodes.length * tree.rowHeight,
+            height: tree.rowTopPosition(tree.visibleNodes.length),
             width: "100%",
             position: "absolute",
             left: "0",
             right: "0",
         }, children: (0, jsx_runtime_1.jsx)(cursor_1.Cursor, {}) }));
 };
+exports.DropContainer = DropContainer;

package/dist/main/components/provider.d.ts

@@ -6,5 +6,5 @@ type Props<T> = {
     imperativeHandle: React.Ref<TreeApi<T> | undefined>;
     children: ReactNode;
 };
-export declare function TreeProvider<T>({ treeProps, imperativeHandle, children, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TreeProvider<T>({ treeProps, imperativeHandle, children }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/components/provider.js

@@ -13,7 +13,7 @@ const react_dnd_1 = require("react-dnd");
 const redux_1 = require("redux");
 const open_slice_1 = require("../state/open-slice");
 const SERVER_STATE = (0, initial_1.initialState)();
-function TreeProvider({ treeProps, imperativeHandle, children, }) {
+function TreeProvider({ treeProps, imperativeHandle, children }) {
     const list = (0, react_1.useRef)(null);
     const listEl = (0, react_1.useRef)(null);
     const store = (0, react_1.useRef)(
@@ -29,7 +29,7 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
     (0, react_1.useMemo)(() => {
         updateCount.current += 1;
         api.update(treeProps);
-    }, [...Object.values(treeProps)]);
+    }, Object.values(treeProps));
     /* Rebuild visible nodes when open state changes, without clobbering
        props set imperatively via api.update(). Bumping updateCount keeps
        DataUpdates consumers (e.g. DefaultContainer) in sync. */

package/dist/main/components/provider.test.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@testing-library/react");
+const react_window_1 = require("react-window");
 const tree_1 = require("./tree");
 const data = [
     {
@@ -31,3 +32,72 @@ test("imperative tree.update() props survive node toggles (#228)", () => {
     });
     expect(api.rowHeight).toBe(48);
 });
+/* Backwards compatibility: switching FixedSizeList -> VariableSizeList must not
+   change layout for a numeric rowHeight. With openByDefault, all four nodes
+   (1 > 2, 3 > 4) are visible in DFS order. */
+test("numeric rowHeight positions rows at index * height (#238 back-compat)", () => {
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, rowHeight: 24, openByDefault: true }));
+    const rows = react_2.screen.getAllByRole("treeitem");
+    expect(rows).toHaveLength(4);
+    rows.forEach((row, i) => {
+        expect(row.style.height).toBe("24px");
+        expect(row.style.top).toBe(`${i * 24}px`);
+    });
+});
+test("function rowHeight gives each row its own height and cumulative top (#238)", () => {
+    const heights = { "1": 40, "2": 20, "3": 30, "4": 10 };
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, rowHeight: (node) => heights[node.id], openByDefault: true }));
+    const rows = react_2.screen.getAllByRole("treeitem");
+    expect(rows).toHaveLength(4);
+    const expected = [40, 20, 30, 10];
+    let top = 0;
+    rows.forEach((row, i) => {
+        expect(row.style.height).toBe(`${expected[i]}px`);
+        expect(row.style.top).toBe(`${top}px`);
+        top += expected[i];
+    });
+});
+test("mutations tell the list to recompute heights (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    /* Only variable-height mode renders a VariableSizeList with a measurement
+       cache to recompute, so use a function rowHeight here. */
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    const api = ref.current;
+    const reset = jest.spyOn(api.list.current, "resetAfterIndex");
+    (0, react_2.act)(() => api.close("1"));
+    expect(reset).toHaveBeenCalled();
+    reset.mockClear();
+    (0, react_2.act)(() => api.open("1"));
+    expect(reset).toHaveBeenCalled();
+});
+/* react-window caches measurements by index and never invalidates them itself.
+   When data changes via props in variable-height mode, those cached sizes belong
+   to the wrong rows, so update() must drop the cache. It runs during render, so
+   it uses the shouldForceUpdate=false variant. */
+test("changing data in variable-height mode resets the list cache (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    const rowHeight = (node) => (node.isInternal ? 40 : 20);
+    const { rerender } = (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: rowHeight, openByDefault: true }));
+    const reset = jest.spyOn(ref.current.list.current, "resetAfterIndex");
+    const nextData = [{ id: "9", name: "fresh" }, ...data];
+    (0, react_2.act)(() => {
+        rerender((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: nextData, ref: ref, rowHeight: rowHeight, openByDefault: true }));
+    });
+    expect(reset).toHaveBeenCalledWith(0, false);
+});
+/* The numeric path must stay on FixedSizeList: it has constant item sizes, so
+   there is no measurement cache to go stale and none of VariableSizeList's
+   overhead. A FixedSizeList has no resetAfterIndex method at all. */
+test("numeric rowHeight renders a cache-free FixedSizeList (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: true }));
+    const list = ref.current.list.current;
+    expect(list).toBeInstanceOf(react_window_1.FixedSizeList);
+    expect("resetAfterIndex" in list).toBe(false);
+});
+/* The function path uses VariableSizeList so per-row heights are possible. */
+test("function rowHeight renders a VariableSizeList (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    expect(ref.current.list.current).toBeInstanceOf(react_window_1.VariableSizeList);
+});

package/dist/main/components/row-container.d.ts

@@ -3,5 +3,5 @@ type Props = {
     style: React.CSSProperties;
     index: number;
 };
-export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style, }: Props) => import("react/jsx-runtime").JSX.Element)>;
+export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style }: Props) => import("react/jsx-runtime").JSX.Element)>;
 export {};

package/dist/main/components/row-container.js

@@ -30,7 +30,7 @@ const context_1 = require("../context");
 const drag_hook_1 = require("../dnd/drag-hook");
 const drop_hook_1 = require("../dnd/drop-hook");
 const use_fresh_node_1 = require("../hooks/use-fresh-node");
-exports.RowContainer = react_1.default.memo(function RowContainer({ index, style, }) {
+exports.RowContainer = react_1.default.memo(function RowContainer({ index, style }) {
     /* When will the <Row> will re-render.
      *
      * The row component is memo'd so it will only render
@@ -61,8 +61,7 @@ exports.RowContainer = react_1.default.memo(function RowContainer({ index, style
     const nodeStyle = (0, react_1.useMemo)(() => ({ paddingLeft: indent }), [indent]);
     const rowStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) +
-                ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
+        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
     }, [style, tree.props.padding, tree.props.paddingTop]);
     const rowAttrs = {
         role: "treeitem",

package/dist/main/dnd/drag-hook.js

@@ -20,6 +20,7 @@ function useDragHook(node) {
         },
         end: () => {
             tree.hideCursor();
+            tree.redrawList();
             tree.dispatch(dnd_slice_1.actions.dragEnd());
         },
     }), [ids, node]);

package/dist/main/hooks/use-validated-props.js

@@ -6,8 +6,7 @@ function useValidatedProps(props) {
     if (props.initialData && props.data) {
         throw new Error(`React Arborist Tree => Provide either a data or initialData prop, but not both.`);
     }
-    if (props.initialData &&
-        (props.onCreate || props.onDelete || props.onMove || props.onRename)) {
+    if (props.initialData && (props.onCreate || props.onDelete || props.onMove || props.onRename)) {
         throw new Error(`React Arborist Tree => You passed the initialData prop along with a data handler.
 Use the data prop if you want to provide your own handlers.`);
     }

package/dist/main/index.d.ts

@@ -1,4 +1,7 @@
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

package/dist/main/index.js

@@ -14,10 +14,16 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTreeLinePrefix = exports.Tree = void 0;
+exports.getTreeLinePrefix = exports.ListInnerElement = exports.ListOuterElement = exports.DropContainer = exports.Tree = void 0;
 /* The Public Api */
 var tree_1 = require("./components/tree");
 Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return tree_1.Tree; } });
+var list_outer_element_1 = require("./components/list-outer-element");
+Object.defineProperty(exports, "DropContainer", { enumerable: true, get: function () { return list_outer_element_1.DropContainer; } });
+var list_outer_element_2 = require("./components/list-outer-element");
+Object.defineProperty(exports, "ListOuterElement", { enumerable: true, get: function () { return list_outer_element_2.ListOuterElement; } });
+var list_inner_element_1 = require("./components/list-inner-element");
+Object.defineProperty(exports, "ListInnerElement", { enumerable: true, get: function () { return list_inner_element_1.ListInnerElement; } });
 __exportStar(require("./types/handlers"), exports);
 __exportStar(require("./types/renderers"), exports);
 __exportStar(require("./types/state"), exports);

package/dist/main/interfaces/node-api.js

@@ -6,7 +6,10 @@ class NodeApi {
     constructor(params) {
         this.handleClick = (e) => {
             if (e.metaKey && !this.tree.props.disableMultiSelection) {
-                this.isSelected ? this.deselect() : this.selectMulti();
+                if (this.isSelected)
+                    this.deselect();
+                else
+                    this.selectMulti();
             }
             else if (e.shiftKey && !this.tree.props.disableMultiSelection) {
                 this.selectContiguous();

package/dist/main/interfaces/tree-api.d.ts

@@ -2,7 +2,7 @@ import { EditResult } from "../types/handlers";
 import { Identity, IdObj } from "../types/utils";
 import { TreeProps } from "../types/tree-props";
 import { MutableRefObject } from "react";
-import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
+import { Align, FixedSizeList, ListOnItemsRenderedProps, VariableSizeList } from "react-window";
 import { DefaultRow } from "../components/default-row";
 import { DefaultNode } from "../components/default-node";
 import { NodeApi } from "./node-api";
@@ -14,7 +14,7 @@ import { Store } from "redux";
 export declare class TreeApi<T> {
     store: Store<RootState, Actions>;
     props: TreeProps<T>;
-    list: MutableRefObject<FixedSizeList | null>;
+    list: MutableRefObject<FixedSizeList | VariableSizeList | null>;
     listEl: MutableRefObject<HTMLDivElement | null>;
     static editPromise: null | ((args: EditResult) => void);
     root: NodeApi<T>;
@@ -24,7 +24,8 @@ export declare class TreeApi<T> {
     idToIndex: {
         [id: string]: number;
     };
-    constructor(store: Store<RootState, Actions>, props: TreeProps<T>, list: MutableRefObject<FixedSizeList | null>, listEl: MutableRefObject<HTMLDivElement | null>);
+    private rowOffsets;
+    constructor(store: Store<RootState, Actions>, props: TreeProps<T>, list: MutableRefObject<FixedSizeList | VariableSizeList | null>, listEl: MutableRefObject<HTMLDivElement | null>);
     update(props: TreeProps<T>): void;
     dispatch(action: Actions): {
         type: "FOCUS";
@@ -121,7 +122,28 @@ export declare class TreeApi<T> {
     get width(): string | number;
     get height(): number;
     get indent(): number;
+    /**
+     * The fixed row height. When a `rowHeight` function is supplied for variable
+     * heights, this returns the default (24); use `rowHeightAt(index)` to get the
+     * height of a specific row.
+     */
     get rowHeight(): number;
+    /**
+     * The height of the row at `index`, evaluating the `rowHeight` function if
+     * given. Falls back to the default height for an out-of-range index so this
+     * never feeds an invalid `0` to react-window's `itemSize`.
+     */
+    rowHeightAt: (index: number) => number;
+    /** The pixel offset of the top of the row at `index` from the top of the list. */
+    rowTopPosition: (index: number) => number;
+    /**
+     * Tell the underlying virtualized list to recompute row heights at and after
+     * `index`. Call this if a `rowHeight` function's output changes for reasons
+     * the tree can't observe (e.g. external state).
+     */
+    redrawList: (afterIndex?: number) => void;
+    /** Lazily-built prefix sum where offsets[i] is the top of row i. */
+    private getRowOffsets;
     get overscanCount(): number;
     get searchTerm(): string;
     get matchFn(): (node: NodeApi<T>) => boolean;
@@ -185,8 +207,8 @@ export declare class TreeApi<T> {
     canDrop(): boolean;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
-    open(identity: Identity): void;
-    close(identity: Identity): void;
+    open(identity: Identity, redraw?: boolean): void;
+    close(identity: Identity, redraw?: boolean): void;
     toggle(identity: Identity): void;
     openParents(identity: Identity): void;
     openSiblings(node: NodeApi<T>): void;

package/dist/main/interfaces/tree-api.js

@@ -56,6 +56,46 @@ class TreeApi {
         this.listEl = listEl;
         this.visibleStartIndex = 0;
         this.visibleStopIndex = 0;
+        /* Memoized prefix-sum of row heights; only used for variable heights. */
+        this.rowOffsets = null;
+        /**
+         * The height of the row at `index`, evaluating the `rowHeight` function if
+         * given. Falls back to the default height for an out-of-range index so this
+         * never feeds an invalid `0` to react-window's `itemSize`.
+         */
+        this.rowHeightAt = (index) => {
+            const rowHeight = this.props.rowHeight;
+            if (typeof rowHeight === "function") {
+                const node = this.at(index);
+                return node ? rowHeight(node) : this.rowHeight;
+            }
+            return rowHeight !== null && rowHeight !== void 0 ? rowHeight : 24;
+        };
+        /** The pixel offset of the top of the row at `index` from the top of the list. */
+        this.rowTopPosition = (index) => {
+            /* Fixed heights: O(1). */
+            if (typeof this.props.rowHeight !== "function") {
+                return index * this.rowHeight;
+            }
+            /* Variable heights: O(1) amortized via a memoized prefix sum. */
+            const offsets = this.getRowOffsets();
+            const clamped = Math.max(0, Math.min(index, offsets.length - 1));
+            return offsets[clamped];
+        };
+        /**
+         * Tell the underlying virtualized list to recompute row heights at and after
+         * `index`. Call this if a `rowHeight` function's output changes for reasons
+         * the tree can't observe (e.g. external state).
+         */
+        this.redrawList = (afterIndex = 0) => {
+            this.rowOffsets = null;
+            /* Only the VariableSizeList (function rowHeight) caches measurements; a
+               FixedSizeList has constant heights and nothing to recompute. */
+            const list = this.list.current;
+            if (list && "resetAfterIndex" in list) {
+                list.resetAfterIndex(Math.max(0, afterIndex));
+            }
+        };
         /* Changes here must also be made in update() */
         this.root = (0, create_root_1.createRoot)(this);
         this.visibleNodes = (0, create_list_1.createList)(this);
@@ -67,6 +107,18 @@ class TreeApi {
         this.root = (0, create_root_1.createRoot)(this);
         this.visibleNodes = (0, create_list_1.createList)(this);
         this.idToIndex = (0, create_index_1.createIndex)(this.visibleNodes);
+        this.rowOffsets = null;
+        /* Variable-height mode renders a VariableSizeList, which caches item
+           measurements by index and never invalidates them on its own. When the
+           visible nodes change (insert/remove/reorder), those cached sizes belong
+           to the wrong rows, so drop them. Fixed-height mode renders a
+           FixedSizeList (no cache, nothing to reset). update() runs during render,
+           so pass shouldForceUpdate=false: the in-progress render repaints the list
+           and a forceUpdate here would warn about setting state mid-render. */
+        const list = this.list.current;
+        if (list && "resetAfterIndex" in list) {
+            list.resetAfterIndex(0, false);
+        }
     }
     /* Store helpers */
     dispatch(action) {
@@ -91,9 +143,24 @@ class TreeApi {
         var _a;
         return (_a = this.props.indent) !== null && _a !== void 0 ? _a : 24;
     }
+    /**
+     * The fixed row height. When a `rowHeight` function is supplied for variable
+     * heights, this returns the default (24); use `rowHeightAt(index)` to get the
+     * height of a specific row.
+     */
     get rowHeight() {
-        var _a;
-        return (_a = this.props.rowHeight) !== null && _a !== void 0 ? _a : 24;
+        return typeof this.props.rowHeight === "number" ? this.props.rowHeight : 24;
+    }
+    /** Lazily-built prefix sum where offsets[i] is the top of row i. */
+    getRowOffsets() {
+        if (this.rowOffsets)
+            return this.rowOffsets;
+        const offsets = [0];
+        for (let i = 0; i < this.visibleNodes.length; i++) {
+            offsets.push(offsets[i] + this.rowHeightAt(i));
+        }
+        this.rowOffsets = offsets;
+        return offsets;
     }
     get overscanCount() {
         var _a;
@@ -195,9 +262,7 @@ class TreeApi {
     create() {
         return __awaiter(this, arguments, void 0, function* (opts = {}) {
             var _a, _b;
-            const parentId = opts.parentId === undefined
-                ? utils.getInsertParentId(this)
-                : opts.parentId;
+            const parentId = opts.parentId === undefined ? utils.getInsertParentId(this) : opts.parentId;
             const index = (_a = opts.index) !== null && _a !== void 0 ? _a : utils.getInsertIndex(this);
             const type = (_b = opts.type) !== null && _b !== void 0 ? _b : "leaf";
             const data = yield safeRun(this.props.onCreate, {
@@ -224,20 +289,26 @@ class TreeApi {
             const idents = Array.isArray(node) ? node : [node];
             const ids = idents.map(identify);
             const nodes = ids.map((id) => this.get(id)).filter((n) => !!n);
+            /* Guard against Math.min(...[]) === Infinity when no ids resolve to nodes. */
+            const fromIndex = nodes.length ? Math.min(...nodes.map((n) => { var _a; return (_a = n.rowIndex) !== null && _a !== void 0 ? _a : 0; })) : 0;
             yield safeRun(this.props.onDelete, { nodes, ids });
+            this.redrawList(fromIndex);
         });
     }
     edit(node) {
+        var _a, _b;
         const id = identify(node);
         this.resolveEdit({ cancelled: true });
         this.scrollTo(id);
         this.dispatch((0, edit_slice_1.edit)(id));
+        this.redrawList((_b = (_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.rowIndex) !== null && _b !== void 0 ? _b : 0);
         return new Promise((resolve) => {
             TreeApi.editPromise = resolve;
         });
     }
     submit(identity, value) {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
             if (!identity)
                 return;
             const id = identify(identity);
@@ -248,12 +319,14 @@ class TreeApi {
             });
             this.dispatch((0, edit_slice_1.edit)(null));
             this.resolveEdit({ cancelled: false, value });
+            this.redrawList((_b = (_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.rowIndex) !== null && _b !== void 0 ? _b : 0);
             setTimeout(() => this.onFocus()); // Return focus to element;
         });
     }
     reset() {
         this.dispatch((0, edit_slice_1.edit)(null));
         this.resolveEdit({ cancelled: true });
+        this.redrawList();
         setTimeout(() => this.onFocus()); // Return focus to element;
     }
     activate(id) {
@@ -433,9 +506,7 @@ class TreeApi {
         return this.state.dnd.cursor.type === "highlight";
     }
     get dragNodes() {
-        return this.state.dnd.dragIds
-            .map((id) => this.get(id))
-            .filter((n) => !!n);
+        return this.state.dnd.dragIds.map((id) => this.get(id)).filter((n) => !!n);
     }
     get dragNode() {
         return this.get(this.state.nodes.drag.id);
@@ -487,22 +558,28 @@ class TreeApi {
         this.dispatch(dnd_slice_1.actions.cursor(cursor));
     }
     /* Visibility */
-    open(identity) {
+    open(identity, redraw = true) {
+        var _a, _b;
         const id = identifyNull(identity);
         if (!id)
             return;
         if (this.isOpen(id))
             return;
         this.dispatch(open_slice_1.actions.open(id, this.isFiltered));
+        if (redraw)
+            this.redrawList((_b = (_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.rowIndex) !== null && _b !== void 0 ? _b : 0);
         safeRun(this.props.onToggle, id);
     }
-    close(identity) {
+    close(identity, redraw = true) {
+        var _a, _b;
         const id = identifyNull(identity);
         if (!id)
             return;
         if (!this.isOpen(id))
             return;
         this.dispatch(open_slice_1.actions.close(id, this.isFiltered));
+        if (redraw)
+            this.redrawList((_b = (_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.rowIndex) !== null && _b !== void 0 ? _b : 0);
         safeRun(this.props.onToggle, id);
     }
     toggle(identity) {
@@ -518,9 +595,10 @@ class TreeApi {
         const node = utils.dfs(this.root, id);
         let parent = node === null || node === void 0 ? void 0 : node.parent;
         while (parent) {
-            this.open(parent.id);
+            this.open(parent.id, false);
             parent = parent.parent;
         }
+        this.redrawList();
     }
     openSiblings(node) {
         const parent = node.parent;
@@ -531,23 +609,29 @@ class TreeApi {
             const isOpen = node.isOpen;
             for (let sibling of parent.children) {
                 if (sibling.isInternal) {
-                    isOpen ? this.close(sibling.id) : this.open(sibling.id);
+                    if (isOpen)
+                        this.close(sibling.id, false);
+                    else
+                        this.open(sibling.id, false);
                 }
             }
+            this.redrawList();
             this.scrollTo(this.focusedNode);
         }
     }
     openAll() {
         utils.walk(this.root, (node) => {
             if (node.isInternal)
-                node.open();
+                this.open(node.id, false);
         });
+        this.redrawList();
     }
     closeAll() {
         utils.walk(this.root, (node) => {
             if (node.isInternal)
-                node.close();
+                this.close(node.id, false);
         });
+        this.redrawList();
     }
     /* Scrolling */
     scrollTo(identity, align = "smart") {

package/dist/main/interfaces/tree-api.test.js

@@ -12,3 +12,34 @@ test("tree.canDrop()", () => {
     expect(setupApi({ disableDrop: () => false }).canDrop()).toBe(true);
     expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
 });
+const rowData = [{ id: "a" }, { id: "b" }, { id: "c" }];
+test("rowHeight defaults to 24", () => {
+    const api = setupApi({});
+    expect(api.rowHeight).toBe(24);
+    expect(api.rowHeightAt(0)).toBe(24);
+});
+test("fixed numeric rowHeight", () => {
+    const api = setupApi({ data: rowData, rowHeight: 30 });
+    expect(api.rowHeight).toBe(30);
+    expect(api.rowHeightAt(0)).toBe(30);
+    expect(api.rowTopPosition(0)).toBe(0);
+    expect(api.rowTopPosition(2)).toBe(60);
+    expect(api.rowTopPosition(3)).toBe(90); // total list height
+});
+test("variable rowHeight function", () => {
+    const heights = { a: 10, b: 20, c: 40 };
+    const api = setupApi({
+        data: rowData,
+        rowHeight: (node) => heights[node.id],
+    });
+    // The back-compat getter falls back to the default for variable heights.
+    expect(api.rowHeight).toBe(24);
+    expect(api.rowHeightAt(0)).toBe(10);
+    expect(api.rowHeightAt(1)).toBe(20);
+    expect(api.rowTopPosition(0)).toBe(0);
+    expect(api.rowTopPosition(1)).toBe(10);
+    expect(api.rowTopPosition(2)).toBe(30);
+    expect(api.rowTopPosition(3)).toBe(70); // total list height
+    // Out-of-range index falls back to the default height, never an invalid 0.
+    expect(api.rowHeightAt(99)).toBe(24);
+});