react-arborist 3.7.0 → 3.8.0

package/dist/module/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;

package/package.json

@@ -1,12 +1,33 @@
 {
   "name": "react-arborist",
-  "version": "3.7.0",
+  "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={tree.props.outerElementType ?? ListOuterElement}
-        innerElementType={tree.props.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();
@@ -29,7 +28,7 @@ export const DropContainer = () => {
   return (
     <div
       style={{
-        height: tree.visibleNodes.length * tree.rowHeight,
+        height: tree.rowTopPosition(tree.visibleNodes.length),
         width: "100%",
         position: "absolute",
         left: "0",

package/src/components/provider.test.tsx

@@ -1,7 +1,9 @@
 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";
 import { TreeApi } from "../interfaces/tree-api";
+import { NodeApi } from "../interfaces/node-api";
 
 type Datum = { id: string; name: string; children?: Datum[] };
 
@@ -18,14 +20,7 @@ const data: Datum[] = [
 
 test("imperative tree.update() props survive node toggles (#228)", () => {
   const ref = createRef<TreeApi<Datum> | undefined>();
-  render(
-    <Tree<Datum>
-      data={data}
-      ref={ref}
-      rowHeight={24}
-      openByDefault={false}
-    />
-  );
+  render(<Tree<Datum> data={data} ref={ref} rowHeight={24} openByDefault={false} />);
   const api = ref.current!;
   expect(api.rowHeight).toBe(24);
 
@@ -42,3 +37,84 @@ 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(<Tree<Datum> data={data} rowHeight={24} openByDefault />);
+  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: Record<string, number> = { "1": 40, "2": 20, "3": 30, "4": 10 };
+  render(<Tree<Datum> data={data} rowHeight={(node) => heights[node.id]} openByDefault />);
+  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<TreeApi<Datum> | undefined>();
+  /* Only variable-height mode renders a VariableSizeList with a measurement
+     cache to recompute, so use a function rowHeight here. */
+  render(<Tree<Datum> data={data} ref={ref} rowHeight={() => 24} openByDefault />);
+  const api = ref.current!;
+  const reset = jest.spyOn(api.list.current as VariableSizeList, "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<TreeApi<Datum> | undefined>();
+  const rowHeight = (node: NodeApi<Datum>) => (node.isInternal ? 40 : 20);
+  const { rerender } = render(
+    <Tree<Datum> data={data} ref={ref} rowHeight={rowHeight} openByDefault />,
+  );
+  const reset = jest.spyOn(ref.current!.list.current as VariableSizeList, "resetAfterIndex");
+
+  const nextData: Datum[] = [{ id: "9", name: "fresh" }, ...data];
+  act(() => {
+    rerender(<Tree<Datum> data={nextData} ref={ref} rowHeight={rowHeight} openByDefault />);
+  });
+
+  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<TreeApi<Datum> | undefined>();
+  render(<Tree<Datum> data={data} ref={ref} rowHeight={24} openByDefault />);
+  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<TreeApi<Datum> | undefined>();
+  render(<Tree<Datum> data={data} ref={ref} rowHeight={() => 24} openByDefault />);
+  expect(ref.current!.list.current!).toBeInstanceOf(VariableSizeList);
+});

package/src/components/provider.tsx

@@ -1,18 +1,7 @@
-import {
-  ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
+import { ReactNode, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { FixedSizeList } from "react-window";
-import {
-  DataUpdatesContext,
-  DndContext,
-  NodesContext,
-  TreeApiContext,
-} from "../context";
+import { FixedSizeList, VariableSizeList } from "react-window";
+import { DataUpdatesContext, DndContext, NodesContext, TreeApiContext } from "../context";
 import { TreeApi } from "../interfaces/tree-api";
 import { initialState } from "../state/initial";
 import { Actions, rootReducer, RootState } from "../state/root-reducer";
@@ -30,21 +19,17 @@ type Props<T> = {
 
 const SERVER_STATE = initialState();
 
-export function TreeProvider<T>({
-  treeProps,
-  imperativeHandle,
-  children,
-}: Props<T>) {
-  const list = useRef<FixedSizeList | null>(null);
+export function TreeProvider<T>({ treeProps, imperativeHandle, children }: Props<T>) {
+  const list = useRef<FixedSizeList | VariableSizeList | null>(null);
   const listEl = useRef<HTMLDivElement | null>(null);
   const store = useRef<Store<RootState, Actions>>(
     // @ts-ignore
-    createStore(rootReducer, initialState(treeProps))
+    createStore(rootReducer, initialState(treeProps)),
   );
   const state = useSyncExternalStore<RootState>(
     store.current.subscribe,
     store.current.getState,
-    () => SERVER_STATE
+    () => SERVER_STATE,
   );
 
   /* The tree api object is stable. */
@@ -57,7 +42,7 @@ export function TreeProvider<T>({
   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

package/src/components/row-container.tsx

@@ -9,10 +9,7 @@ type Props = {
   index: number;
 };
 
-export const RowContainer = React.memo(function RowContainer<T>({
-  index,
-  style,
-}: Props) {
+export const RowContainer = React.memo(function RowContainer<T>({ index, style }: Props) {
   /* When will the <Row> will re-render.
    *
    * The row component is memo'd so it will only render
@@ -42,7 +39,7 @@ export const RowContainer = React.memo(function RowContainer<T>({
       el.current = n;
       dropRef(n);
     },
-    [dropRef]
+    [dropRef],
   );
 
   const indent = tree.indent * node.level;
@@ -50,11 +47,9 @@ export const RowContainer = React.memo(function RowContainer<T>({
   const rowStyle = useMemo(
     () => ({
       ...style,
-      top:
-        parseFloat(style.top as string) +
-        (tree.props.padding ?? tree.props.paddingTop ?? 0),
+      top: parseFloat(style.top as string) + (tree.props.padding ?? tree.props.paddingTop ?? 0),
     }),
-    [style, tree.props.padding, tree.props.paddingTop]
+    [style, tree.props.padding, tree.props.paddingTop],
   );
   const rowAttrs: React.HTMLAttributes<any> = {
     role: "treeitem",

package/src/components/tree.tsx

@@ -5,13 +5,9 @@ import { OuterDrop } from "./outer-drop";
 import { TreeContainer } from "./tree-container";
 import { DragPreviewContainer } from "./drag-preview-container";
 import { TreeProps } from "../types/tree-props";
-import { IdObj } from "../types/utils";
 import { useValidatedProps } from "../hooks/use-validated-props";
 
-function TreeComponent<T>(
-  props: TreeProps<T>,
-  ref: React.Ref<TreeApi<T> | undefined>
-) {
+function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>) {
   const treeProps = useValidatedProps(props);
   return (
     <TreeProvider treeProps={treeProps} imperativeHandle={ref}>
@@ -24,5 +20,5 @@ function TreeComponent<T>(
 }
 
 export const Tree = forwardRef(TreeComponent) as <T>(
-  props: TreeProps<T> & { ref?: React.ForwardedRef<TreeApi<T> | undefined> }
+  props: TreeProps<T> & { ref?: React.ForwardedRef<TreeApi<T> | undefined> },
 ) => ReturnType<typeof TreeComponent>;

package/src/context.ts

@@ -1,13 +1,12 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useContext } from "react";
 import { TreeApi } from "./interfaces/tree-api";
 import { RootState } from "./state/root-reducer";
-import { IdObj } from "./types/utils";
 
 export const TreeApiContext = createContext<TreeApi<any> | null>(null);
 
 export function useTreeApi<T>() {
   const value = useContext<TreeApi<T> | null>(
-    TreeApiContext as unknown as React.Context<TreeApi<T> | null>
+    TreeApiContext as unknown as React.Context<TreeApi<T> | null>,
   );
   if (value === null) throw new Error("No Tree Api Provided");
   return value;

package/src/data/create-index.ts

@@ -1,5 +1,4 @@
 import { NodeApi } from "../interfaces/node-api";
-import { IdObj } from "../types/utils";
 
 export const createIndex = <T>(nodes: NodeApi<T>[]) => {
   return nodes.reduce<{ [id: string]: number }>((map, node, index) => {

package/src/data/create-list.ts

@@ -1,6 +1,5 @@
 import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
-import { IdObj } from "../types/utils";
 
 export function createList<T>(tree: TreeApi<T>) {
   if (tree.isFiltered) {
@@ -27,7 +26,7 @@ function flattenTree<T>(root: NodeApi<T>): NodeApi<T>[] {
 
 function flattenAndFilterTree<T>(
   root: NodeApi<T>,
-  isMatch: (n: NodeApi<T>) => boolean
+  isMatch: (n: NodeApi<T>) => boolean,
 ): NodeApi<T>[] {
   const matches: Record<string, boolean> = {};
   const list: NodeApi<T>[] = [];

package/src/data/create-root.ts

@@ -1,15 +1,10 @@
-import { IdObj } from "../types/utils";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
 
 export const ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
 
 export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
-  function visitSelfAndChildren(
-    data: T,
-    level: number,
-    parent: NodeApi<T> | null
-  ) {
+  function visitSelfAndChildren(data: T, level: number, parent: NodeApi<T> | null) {
     const id = tree.accessId(data);
     const node = new NodeApi<T>({
       tree,
@@ -23,9 +18,7 @@ export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
     });
     const children = tree.accessChildren(data);
     if (children) {
-      node.children = children.map((child: T) =>
-        visitSelfAndChildren(child, level + 1, node)
-      );
+      node.children = children.map((child: T) => visitSelfAndChildren(child, level + 1, node));
     }
     return node;
   }

package/src/data/simple-tree.ts

@@ -56,15 +56,17 @@ function createRoot<T extends SimpleData>(data: T[]) {
 
 function createNode<T extends SimpleData>(data: T, parent: SimpleNode<T>) {
   const node = new SimpleNode<T>(data, parent);
-  if (data.children)
-    node.children = data.children.map((d) => createNode<T>(d as T, node));
+  if (data.children) node.children = data.children.map((d) => createNode<T>(d as T, node));
   return node;
 }
 
 class SimpleNode<T extends SimpleData> {
   id: string;
   children?: SimpleNode<T>[];
-  constructor(public data: T, public parent: SimpleNode<T> | null) {
+  constructor(
+    public data: T,
+    public parent: SimpleNode<T> | null,
+  ) {
     this.id = data.id;
   }