react-arborist 3.6.1 → 3.8.0

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

@@ -30,6 +30,46 @@ export 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 = createRoot(this);
         this.visibleNodes = createList(this);
@@ -41,6 +81,18 @@ export class TreeApi {
         this.root = createRoot(this);
         this.visibleNodes = createList(this);
         this.idToIndex = 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) {
@@ -65,9 +117,24 @@ export 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;
@@ -169,9 +236,7 @@ export 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, {
@@ -198,20 +263,26 @@ export 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(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);
@@ -222,12 +293,14 @@ export class TreeApi {
             });
             this.dispatch(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(edit(null));
         this.resolveEdit({ cancelled: true });
+        this.redrawList();
         setTimeout(() => this.onFocus()); // Return focus to element;
     }
     activate(id) {
@@ -407,9 +480,7 @@ export 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);
@@ -461,22 +532,28 @@ export class TreeApi {
         this.dispatch(dnd.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(visibility.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(visibility.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) {
@@ -492,9 +569,10 @@ export 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;
@@ -505,23 +583,29 @@ export 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/module/interfaces/tree-api.test.js

@@ -10,3 +10,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/module/state/drag-slice.js

@@ -7,8 +7,7 @@ export function reducer(state = 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/module/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/module/types/tree-props.d.ts

@@ -2,10 +2,12 @@ import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
-import { ListOnScrollProps } from "react-window";
+import { ListOnScrollProps, CommonProps as ReactWindowCommonProps } from "react-window";
 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,4 +59,6 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    outerElementType?: ReactWindowCommonProps["outerElementType"];
+    innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

package/package.json

@@ -1,12 +1,33 @@
 {
   "name": "react-arborist",
-  "version": "3.6.1",
+  "version": "3.8.0",
+  "keywords": [
+    "arborist",
+    "dnd",
+    "filterable",
+    "multiselection",
+    "react",
+    "react-arborist",
+    "tree",
+    "treeview",
+    "virtualized"
+  ],
+  "homepage": "https://react-arborist.netlify.app",
+  "bugs": "https://github.com/jameskerr/react-arborist/issues",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jameskerr/react-arborist.git"
+  },
   "source": "src/index.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "sideEffects": false,
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
   "types": "dist/module/index.d.ts",
-  "sideEffects": false,
   "scripts": {
     "build:cjs": "tsc --outDir dist/main",
     "build:es": "tsc --outDir dist/module --module es2022 --moduleResolution node",
@@ -16,27 +37,6 @@
     "test": "jest",
     "watch": "yarn build:es --watch"
   },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jameskerr/react-arborist.git"
-  },
-  "homepage": "https://react-arborist.netlify.app",
-  "bugs": "https://github.com/jameskerr/react-arborist/issues",
-  "keywords": [
-    "react",
-    "arborist",
-    "react-arborist",
-    "treeview",
-    "tree",
-    "vitualized",
-    "dnd",
-    "multiselection",
-    "filterable"
-  ],
   "dependencies": {
     "react-dnd": "^14.0.3",
     "react-dnd-html5-backend": "^14.0.3",
@@ -44,10 +44,6 @@
     "redux": "^5.0.0",
     "use-sync-external-store": "^1.2.0"
   },
-  "peerDependencies": {
-    "react": ">= 16.14",
-    "react-dom": ">= 16.14"
-  },
   "devDependencies": {
     "@testing-library/dom": "^9.3.0",
     "@testing-library/react": "^14.0.0",
@@ -64,5 +60,9 @@
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.6.0"
+  },
+  "peerDependencies": {
+    "react": ">= 16.14",
+    "react-dom": ">= 16.14"
   }
 }

package/src/components/cursor.tsx

@@ -7,8 +7,7 @@ export function Cursor() {
   if (!cursor || cursor.type !== "line") return null;
   const indent = tree.indent;
   const top =
-    tree.rowHeight * cursor.index +
-    (tree.props.padding ?? tree.props.paddingTop ?? 0);
+    tree.rowTopPosition(cursor.index) + (tree.props.padding ?? tree.props.paddingTop ?? 0);
   const left = indent * cursor.level;
   const Cursor = tree.renderCursor;
   return <Cursor {...{ top, left, indent }} />;

package/src/components/default-container.tsx

@@ -1,4 +1,4 @@
-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";
@@ -216,24 +216,45 @@ export function DefaultContainer() {
         if (node) tree.focus(node.id);
       }}
     >
-      {/* @ts-ignore */}
-      <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) => tree.visibleNodes[index]?.id || index}
-        outerElementType={ListOuterElement}
-        innerElementType={ListInnerElement}
-        onScroll={tree.props.onScroll}
-        onItemsRendered={tree.onItemsRendered.bind(tree)}
-        ref={tree.list}
-      >
-        {RowContainer}
-      </FixedSizeList>
+      <List />
     </div>
   );
 }
+
+/**
+ * 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() {
+  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: number) => tree.visibleNodes[index]?.id || index,
+    outerElementType: tree.props.outerElementType ?? ListOuterElement,
+    innerElementType: tree.props.innerElementType ?? ListInnerElement,
+    onScroll: tree.props.onScroll,
+    onItemsRendered: tree.onItemsRendered.bind(tree),
+  };
+
+  if (typeof tree.props.rowHeight === "function") {
+    return (
+      // @ts-ignore
+      <VariableSizeList {...commonProps} itemSize={tree.rowHeightAt} ref={tree.list}>
+        {RowContainer}
+      </VariableSizeList>
+    );
+  }
+
+  return (
+    // @ts-ignore
+    <FixedSizeList {...commonProps} itemSize={tree.rowHeight} ref={tree.list}>
+      {RowContainer}
+    </FixedSizeList>
+  );
+}

package/src/components/default-cursor.tsx

@@ -21,11 +21,7 @@ const circleStyle = {
   borderRadius: "50%",
 };
 
-export const DefaultCursor = React.memo(function DefaultCursor({
-  top,
-  left,
-  indent,
-}: CursorProps) {
+export const DefaultCursor = React.memo(function DefaultCursor({ top, left, indent }: CursorProps) {
   const style: CSSProperties = {
     position: "absolute",
     pointerEvents: "none",

package/src/components/default-drag-preview.tsx

@@ -2,7 +2,6 @@ import React, { CSSProperties, memo } from "react";
 import { XYCoord } from "react-dnd";
 import { useTreeApi } from "../context";
 import { DragPreviewProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
 
 const layerStyles: CSSProperties = {
   position: "fixed",
@@ -26,13 +25,7 @@ const getCountStyle = (offset: XYCoord | null) => {
   return { transform: `translate(${x + 10}px, ${y + 10}px)` };
 };
 
-export function DefaultDragPreview({
-  offset,
-  mouse,
-  id,
-  dragIds,
-  isDragging,
-}: DragPreviewProps) {
+export function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging }: DragPreviewProps) {
   return (
     <Overlay isDragging={isDragging}>
       <Position offset={offset}>
@@ -43,10 +36,7 @@ export function DefaultDragPreview({
   );
 }
 
-const Overlay = memo(function Overlay(props: {
-  children: JSX.Element[];
-  isDragging: boolean;
-}) {
+const Overlay = memo(function Overlay(props: { children: JSX.Element[]; isDragging: boolean }) {
   if (!props.isDragging) return null;
   return <div style={layerStyles}>{props.children}</div>;
 });
@@ -70,10 +60,7 @@ function Count(props: { count: number; mouse: XYCoord | null }) {
   else return null;
 }
 
-const PreviewNode = memo(function PreviewNode<T>(props: {
-  id: string | null;
-  dragIds: string[];
-}) {
+const PreviewNode = memo(function PreviewNode<T>(props: { id: string | null; dragIds: string[] }) {
   const tree = useTreeApi<T>();
   const node = tree.get(props.id);
   if (!node) return null;

package/src/components/default-node.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from "react";
 import { NodeRendererProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
 
 export function DefaultNode<T>(props: NodeRendererProps<T>) {
   return (

package/src/components/default-row.tsx

@@ -1,20 +1,9 @@
 import React from "react";
 import { RowRendererProps } from "../types/renderers";
-import { IdObj } from "../types/utils";
 
-export function DefaultRow<T>({
-  node,
-  attrs,
-  innerRef,
-  children,
-}: RowRendererProps<T>) {
+export function DefaultRow<T>({ node, attrs, innerRef, children }: RowRendererProps<T>) {
   return (
-    <div
-      {...attrs}
-      ref={innerRef}
-      onFocus={(e) => e.stopPropagation()}
-      onClick={node.handleClick}
-    >
+    <div {...attrs} ref={innerRef} onFocus={(e) => e.stopPropagation()} onClick={node.handleClick}>
       {children}
     </div>
   );

package/src/components/drag-preview-container.tsx

@@ -1,5 +1,5 @@
 import { useDragLayer } from "react-dnd";
-import { useDndContext, useTreeApi } from "../context";
+import { useTreeApi } from "../context";
 import { DefaultDragPreview } from "./default-drag-preview";
 
 export function DragPreviewContainer() {

package/src/components/list-inner-element.tsx

@@ -4,7 +4,7 @@ import { useTreeApi } from "../context";
 
 export const ListInnerElement = forwardRef<any, any>(function InnerElement(
   { style, ...rest },
-  ref
+  ref,
 ) {
   const tree = useTreeApi();
   const paddingTop = tree.props.padding ?? tree.props.paddingTop ?? 0;

package/src/components/list-outer-element.tsx

@@ -1,11 +1,10 @@
 import { forwardRef } from "react";
 import { useTreeApi } from "../context";
-import { treeBlur } from "../state/focus-slice";
 import { Cursor } from "./cursor";
 
 export const ListOuterElement = forwardRef(function Outer(
   props: React.HTMLProps<HTMLDivElement>,
-  ref
+  ref,
 ) {
   const { children, ...rest } = props;
   const tree = useTreeApi();
@@ -24,12 +23,12 @@ export const ListOuterElement = forwardRef(function Outer(
   );
 });
 
-const DropContainer = () => {
+export const DropContainer = () => {
   const tree = useTreeApi();
   return (
     <div
       style={{
-        height: tree.visibleNodes.length * tree.rowHeight,
+        height: tree.rowTopPosition(tree.visibleNodes.length),
         width: "100%",
         position: "absolute",
         left: "0",