react-arborist 3.7.0 → 3.9.0

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

package/src/dnd/compute-drop.ts

@@ -1,12 +1,6 @@
 import { XYCoord } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
-import {
-  bound,
-  indexOf,
-  isClosed,
-  isItem,
-  isOpenWithEmptyChildren,
-} from "../utils";
+import { bound, indexOf, isClosed, isItem, isOpenWithEmptyChildren } from "../utils";
 import { DropResult } from "./drop-hook";
 
 function measureHover(el: HTMLElement, offset: XYCoord) {
@@ -29,7 +23,7 @@ function getNodesAroundCursor(
   node: NodeApi | null,
   prev: NodeApi | null,
   next: NodeApi | null,
-  hover: HoverData
+  hover: HoverData,
 ): [NodeApi | null, NodeApi | null] {
   if (!node) {
     // We're hovering over the empty part of the list, not over an item,
@@ -67,16 +61,13 @@ export type ComputedDrop = {
   cursor: Cursor | null;
 };
 
-function dropAt(
-  parentId: string | undefined,
-  index: number | null
-): DropResult {
+function dropAt(parentId: string | undefined, index: number | null): DropResult {
   return { parentId: parentId || null, index };
 }
 
 function lineCursor(index: number, level: number) {
   return {
-    type: "line" as "line",
+    type: "line" as const,
     index,
     level,
   };
@@ -84,13 +75,13 @@ function lineCursor(index: number, level: number) {
 
 function noCursor() {
   return {
-    type: "none" as "none",
+    type: "none" as const,
   };
 }
 
 function highlightCursor(id: string) {
   return {
-    type: "highlight" as "highlight",
+    type: "highlight" as const,
     id,
   };
 }

package/src/dnd/drag-hook.test.ts

@@ -0,0 +1,22 @@
+import { NodeApi } from "../interfaces/node-api";
+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<T>(data: T): NodeApi<T> {
+  return { data } as NodeApi<T>;
+}
+
+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: NodeApi<{ kind: string }>) => node.data.kind.toUpperCase();
+  expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
+  expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
+});

package/src/dnd/drag-hook.ts

@@ -4,28 +4,37 @@ import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTreeApi } from "../context";
 import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
+import { TreeProps } from "../types/tree-props";
 import { DropResult } from "./drop-hook";
 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<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string {
+  if (typeof dragType === "function") return dragType(node);
+  return dragType ?? "NODE";
+}
+
 export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
-  const tree = useTreeApi();
+  const tree = useTreeApi<T>();
   const ids = tree.selectedIds;
-  const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
+  const [_, ref, preview] = useDrag<DragItem<T>, DropResult, void>(
     () => ({
       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(() => {

package/src/dnd/measure-hover.ts

@@ -12,12 +12,8 @@ export function measureHover(el: HTMLElement, offset: XYCoord, indent: number) {
   const inBottomHalf = !inTopHalf;
   const pad = height / 4;
   const inMiddle = y > pad && y < height - pad;
-  const maxLevel = Number(
-    inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0
-  );
-  const minLevel = Number(
-    inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0
-  );
+  const maxLevel = Number(inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0);
+  const minLevel = Number(inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0);
   const level = bound(Math.floor(x / indent), minLevel, maxLevel);
 
   return { level, inTopHalf, inBottomHalf, inMiddle };

package/src/dnd/outer-drop-hook.ts

@@ -37,7 +37,7 @@ export function useOuterDrop() {
         }
       },
     }),
-    [tree]
+    [tree],
   );
 
   drop(tree.listEl);

package/src/hooks/use-fresh-node.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { useTreeApi } from "../context";
-import { IdObj } from "../types/utils";
 
 export function useFreshNode<T>(index: number) {
   const tree = useTreeApi<T>();

package/src/hooks/use-simple-tree.ts

@@ -1,12 +1,6 @@
 import { useMemo, useState } from "react";
 import { SimpleTree } from "../data/simple-tree";
-import {
-  CreateHandler,
-  DeleteHandler,
-  MoveHandler,
-  RenameHandler,
-} from "../types/handlers";
-import { IdObj } from "../types/utils";
+import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
 
 export type SimpleTreeData = {
   id: string;
@@ -22,7 +16,7 @@ export function useSimpleTree<T>(initialData: readonly T[]) {
     () =>
       new SimpleTree<// @ts-ignore
       T>(data),
-    [data]
+    [data],
   );
 
   const onMove: MoveHandler<T> = (args: {

package/src/hooks/use-validated-props.ts

@@ -1,20 +1,16 @@
 import { TreeProps } from "../types/tree-props";
-import { IdObj } from "../types/utils";
-import { SimpleTreeData, useSimpleTree } from "./use-simple-tree";
+import { useSimpleTree } from "./use-simple-tree";
 
 export function useValidatedProps<T>(props: TreeProps<T>): TreeProps<T> {
   if (props.initialData && props.data) {
     throw new Error(
-      `React Arborist Tree => Provide either a data or initialData prop, but not both.`
+      `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.`
+Use the data prop if you want to provide your own handlers.`,
     );
   }
   if (props.initialData) {

package/src/interfaces/node-api.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { TreeApi } from "./tree-api";
-import { IdObj } from "../types/utils";
 import { ROOT_ID } from "../data/create-root";
 
 type Params<T> = {
@@ -202,7 +201,8 @@ export class NodeApi<T = any> {
 
   handleClick = (e: React.MouseEvent) => {
     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();
     } else {

package/src/interfaces/tree-api.test.ts

@@ -13,3 +13,38 @@ 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: Record<string, number> = { 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);
+});