react-arborist 3.7.0 → 3.9.0

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

package/dist/main/state/drag-slice.js

@@ -10,8 +10,7 @@ function reducer(state = (0, initial_1.initialState)().nodes.drag, action) {
         case "DND_DRAG_END":
             return Object.assign(Object.assign({}, state), { id: null, destinationParentId: null, destinationIndex: null, selectedIds: [] });
         case "DND_HOVERING":
-            if (action.parentId !== state.destinationParentId ||
-                action.index != state.destinationIndex) {
+            if (action.parentId !== state.destinationParentId || action.index != state.destinationIndex) {
                 return Object.assign(Object.assign({}, state), { destinationParentId: action.parentId, destinationIndex: action.index });
             }
             else {

package/dist/main/types/dnd.d.ts

@@ -3,6 +3,8 @@ export type CursorLocation = {
     level: number | null;
     parentId: string | null;
 };
-export type DragItem = {
+export type DragItem<T = any> = {
     id: string;
+    dragIds: string[];
+    data: T;
 };

package/dist/main/types/state.d.ts

@@ -1,2 +1,2 @@
 import { NodeApi } from "../interfaces/node-api";
-export type NodeState = typeof NodeApi.prototype["state"];
+export type NodeState = (typeof NodeApi.prototype)["state"];

package/dist/main/types/tree-props.d.ts

@@ -6,6 +6,8 @@ import { ListOnScrollProps, CommonProps as ReactWindowCommonProps } from "react-
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
 import { useDragDropManager, DndProviderProps } from "react-dnd";
+/** Returns the height in pixels for a given node's row. */
+export type RowHeightAccessor<T> = (node: NodeApi<T>) => number;
 export interface TreeProps<T> {
     data?: readonly T[];
     initialData?: readonly T[];
@@ -18,7 +20,7 @@ export interface TreeProps<T> {
     renderDragPreview?: ElementType<renderers.DragPreviewProps>;
     renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
-    rowHeight?: number;
+    rowHeight?: number | RowHeightAccessor<T>;
     overscanCount?: number;
     width?: number | string;
     height?: number;
@@ -57,6 +59,7 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    dragType?: string | ((node: NodeApi<T>) => string);
     outerElementType?: ReactWindowCommonProps["outerElementType"];
     innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

package/dist/module/components/cursor.js

@@ -8,8 +8,7 @@ export 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 _jsx(Cursor, { top, left, indent });

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
+import { FixedSizeList, VariableSizeList } from "react-window";
 import { useDataUpdates, useTreeApi } from "../context";
 import { focusNextElement, focusPrevElement } from "../utils";
 import { ListOuterElement } from "./list-outer-element";
@@ -13,7 +13,6 @@ let timeoutId = null;
  * the event handler. Future clean up welcome.
  */
 export function DefaultContainer() {
-    var _a, _b;
     useDataUpdates();
     const tree = useTreeApi();
     return (_jsx("div", { role: "tree", style: {
@@ -231,5 +230,35 @@ export function DefaultContainer() {
             });
             if (node)
                 tree.focus(node.id);
-        }, children: _jsx(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: (_a = tree.props.outerElementType) !== null && _a !== void 0 ? _a : ListOuterElement, innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: RowContainer }) }));
+        }, children: _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 = 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 : ListOuterElement,
+        innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : ListInnerElement,
+        onScroll: tree.props.onScroll,
+        onItemsRendered: tree.onItemsRendered.bind(tree),
+    };
+    if (typeof tree.props.rowHeight === "function") {
+        return (
+        // @ts-ignore
+        _jsx(VariableSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeightAt, ref: tree.list, children: RowContainer })));
+    }
+    return (
+    // @ts-ignore
+    _jsx(FixedSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeight, ref: tree.list, children: RowContainer })));
 }

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

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

package/dist/module/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/module/components/default-drag-preview.js

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

package/dist/module/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/module/components/default-row.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function DefaultRow({ node, attrs, innerRef, children, }) {
+export function DefaultRow({ node, attrs, innerRef, children }) {
     return (_jsx("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
 }

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

@@ -26,7 +26,7 @@ export const ListOuterElement = forwardRef(function Outer(props, ref) {
 export const DropContainer = () => {
     const tree = useTreeApi();
     return (_jsx("div", { style: {
-            height: tree.visibleNodes.length * tree.rowHeight,
+            height: tree.rowTopPosition(tree.visibleNodes.length),
             width: "100%",
             position: "absolute",
             left: "0",

package/dist/module/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/module/components/provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef, } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { DataUpdatesContext, DndContext, NodesContext, TreeApiContext, } from "../context";
+import { DataUpdatesContext, DndContext, NodesContext, TreeApiContext } from "../context";
 import { TreeApi } from "../interfaces/tree-api";
 import { initialState } from "../state/initial";
 import { rootReducer } from "../state/root-reducer";
@@ -10,7 +10,7 @@ import { DndProvider } from "react-dnd";
 import { createStore } from "redux";
 import { actions as visibility } from "../state/open-slice";
 const SERVER_STATE = initialState();
-export function TreeProvider({ treeProps, imperativeHandle, children, }) {
+export function TreeProvider({ treeProps, imperativeHandle, children }) {
     const list = useRef(null);
     const listEl = useRef(null);
     const store = useRef(
@@ -26,7 +26,7 @@ export function TreeProvider({ treeProps, imperativeHandle, children, }) {
     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/module/components/provider.test.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef } from "react";
-import { act, render } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
+import { FixedSizeList, VariableSizeList } from "react-window";
 import { Tree } from "./tree";
 const data = [
     {
@@ -29,3 +30,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)", () => {
+    render(_jsx(Tree, { data: data, rowHeight: 24, openByDefault: true }));
+    const rows = 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 };
+    render(_jsx(Tree, { data: data, rowHeight: (node) => heights[node.id], openByDefault: true }));
+    const rows = 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 = createRef();
+    /* Only variable-height mode renders a VariableSizeList with a measurement
+       cache to recompute, so use a function rowHeight here. */
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    const api = ref.current;
+    const reset = jest.spyOn(api.list.current, "resetAfterIndex");
+    act(() => api.close("1"));
+    expect(reset).toHaveBeenCalled();
+    reset.mockClear();
+    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 = createRef();
+    const rowHeight = (node) => (node.isInternal ? 40 : 20);
+    const { rerender } = render(_jsx(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];
+    act(() => {
+        rerender(_jsx(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 = createRef();
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: true }));
+    const list = ref.current.list.current;
+    expect(list).toBeInstanceOf(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 = createRef();
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    expect(ref.current.list.current).toBeInstanceOf(VariableSizeList);
+});

package/dist/module/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/module/components/row-container.js

@@ -4,7 +4,7 @@ import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
 import { useDragHook } from "../dnd/drag-hook";
 import { useDropHook } from "../dnd/drop-hook";
 import { useFreshNode } from "../hooks/use-fresh-node";
-export const RowContainer = React.memo(function RowContainer({ index, style, }) {
+export const RowContainer = React.memo(function RowContainer({ index, style }) {
     /* When will the <Row> will re-render.
      *
      * The row component is memo'd so it will only render
@@ -35,8 +35,7 @@ export const RowContainer = React.memo(function RowContainer({ index, style, })
     const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
     const rowStyle = 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/module/dnd/compute-drop.js

@@ -1,4 +1,4 @@
-import { bound, indexOf, isClosed, isItem, isOpenWithEmptyChildren, } from "../utils";
+import { bound, indexOf, isClosed, isItem, isOpenWithEmptyChildren } from "../utils";
 function measureHover(el, offset) {
     const rect = el.getBoundingClientRect();
     const x = offset.x - Math.round(rect.x);

package/dist/module/dnd/drag-hook.d.ts

@@ -1,3 +1,5 @@
 import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
+import { TreeProps } from "../types/tree-props";
+export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

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

@@ -3,23 +3,31 @@ import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTreeApi } from "../context";
 import { actions as dnd } from "../state/dnd-slice";
+/* The react-dnd item type a row's drag source broadcasts. The dragType prop
+   can be a fixed string or a per-node function; it defaults to "NODE". */
+export function dragTypeForNode(dragType, node) {
+    if (typeof dragType === "function")
+        return dragType(node);
+    return dragType !== null && dragType !== void 0 ? dragType : "NODE";
+}
 export function useDragHook(node) {
     const tree = useTreeApi();
     const ids = tree.selectedIds;
     const [_, ref, preview] = useDrag(() => ({
         canDrag: () => node.isDraggable,
-        type: "NODE",
+        type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
-            // This is fired once at the begging of a drag operation
+            // This is fired once at the beginning of a drag operation
             const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
             tree.dispatch(dnd.dragStart(node.id, dragIds));
-            return { id: node.id, dragIds };
+            return { id: node.id, dragIds, data: node.data };
         },
         end: () => {
             tree.hideCursor();
+            tree.redrawList();
             tree.dispatch(dnd.dragEnd());
         },
-    }), [ids, node]);
+    }), [ids, node, tree.props.dragType]);
     useEffect(() => {
         preview(getEmptyImage());
     }, [preview]);

package/dist/module/dnd/drag-hook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/module/dnd/drag-hook.test.js

@@ -0,0 +1,17 @@
+import { dragTypeForNode } from "./drag-hook";
+/* dragTypeForNode only reads node.data when dragType is a function, so a
+   minimal stub stands in for a real NodeApi. */
+function nodeWith(data) {
+    return { data };
+}
+test("defaults to the internal NODE type when dragType is undefined", () => {
+    expect(dragTypeForNode(undefined, nodeWith({ id: "a" }))).toBe("NODE");
+});
+test("uses a fixed string dragType for every node", () => {
+    expect(dragTypeForNode("FILE", nodeWith({ id: "a" }))).toBe("FILE");
+});
+test("resolves a per-node dragType function against the node", () => {
+    const dragType = (node) => node.data.kind.toUpperCase();
+    expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
+    expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
+});