react-arborist 3.7.0 → 3.9.0

package/src/interfaces/tree-api.ts

@@ -2,7 +2,7 @@ import { EditResult } from "../types/handlers";
 import { BoolFunc, Identity, IdObj } from "../types/utils";
 import { TreeProps } from "../types/tree-props";
 import { MutableRefObject } from "react";
-import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
+import { Align, FixedSizeList, ListOnItemsRenderedProps, VariableSizeList } from "react-window";
 import * as utils from "../utils";
 import { DefaultCursor } from "../components/default-cursor";
 import { DefaultRow } from "../components/default-row";
@@ -30,12 +30,14 @@ export class TreeApi<T> {
   visibleStartIndex: number = 0;
   visibleStopIndex: number = 0;
   idToIndex: { [id: string]: number };
+  /* Memoized prefix-sum of row heights; only used for variable heights. */
+  private rowOffsets: number[] | null = null;
 
   constructor(
     public store: Store<RootState, Actions>,
     public props: TreeProps<T>,
-    public list: MutableRefObject<FixedSizeList | null>,
-    public listEl: MutableRefObject<HTMLDivElement | null>
+    public list: MutableRefObject<FixedSizeList | VariableSizeList | null>,
+    public listEl: MutableRefObject<HTMLDivElement | null>,
   ) {
     /* Changes here must also be made in update() */
     this.root = createRoot<T>(this);
@@ -49,6 +51,18 @@ export class TreeApi<T> {
     this.root = createRoot<T>(this);
     this.visibleNodes = createList<T>(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 */
@@ -79,8 +93,65 @@ export class TreeApi<T> {
     return this.props.indent ?? 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() {
-    return this.props.rowHeight ?? 24;
+    return typeof this.props.rowHeight === "number" ? this.props.rowHeight : 24;
+  }
+
+  /**
+   * The height of the row at `index`, evaluating the `rowHeight` function if
+   * given. Falls back to the default height for an out-of-range index so this
+   * never feeds an invalid `0` to react-window's `itemSize`.
+   */
+  rowHeightAt = (index: number): number => {
+    const rowHeight = this.props.rowHeight;
+    if (typeof rowHeight === "function") {
+      const node = this.at(index);
+      return node ? rowHeight(node) : this.rowHeight;
+    }
+    return rowHeight ?? 24;
+  };
+
+  /** The pixel offset of the top of the row at `index` from the top of the list. */
+  rowTopPosition = (index: number): number => {
+    /* 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).
+   */
+  redrawList = (afterIndex: number = 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));
+    }
+  };
+
+  /** Lazily-built prefix sum where offsets[i] is the top of row i. */
+  private getRowOffsets(): number[] {
+    if (this.rowOffsets) return this.rowOffsets;
+    const offsets: number[] = [0];
+    for (let i = 0; i < this.visibleNodes.length; i++) {
+      offsets.push(offsets[i] + this.rowHeightAt(i));
+    }
+    this.rowOffsets = offsets;
+    return offsets;
   }
 
   get overscanCount() {
@@ -95,9 +166,7 @@ export class TreeApi<T> {
     const match =
       this.props.searchMatch ??
       ((node, term) => {
-        const string = JSON.stringify(
-          Object.values(node.data as { [k: string]: unknown })
-        );
+        const string = JSON.stringify(Object.values(node.data as { [k: string]: unknown }));
         return string.toLocaleLowerCase().includes(term.toLocaleLowerCase());
       });
     return (node: NodeApi<T>) => match(node, this.searchTerm);
@@ -113,7 +182,7 @@ export class TreeApi<T> {
     const id = utils.access<string>(data, get);
     if (!id)
       throw new Error(
-        "Data must contain an 'id' property or props.idAccessor must return a string"
+        "Data must contain an 'id' property or props.idAccessor must return a string",
       );
     return id;
   }
@@ -150,8 +219,7 @@ export class TreeApi<T> {
 
   get(id: string | null): NodeApi<T> | null {
     if (!id) return null;
-    if (id in this.idToIndex)
-      return this.visibleNodes[this.idToIndex[id]] || null;
+    if (id in this.idToIndex) return this.visibleNodes[this.idToIndex[id]] || null;
     else return null;
   }
 
@@ -194,12 +262,9 @@ export class TreeApi<T> {
       type?: "internal" | "leaf";
       parentId?: null | string;
       index?: null | number;
-    } = {}
+    } = {},
   ) {
-    const parentId =
-      opts.parentId === undefined
-        ? utils.getInsertParentId(this)
-        : opts.parentId;
+    const parentId = opts.parentId === undefined ? utils.getInsertParentId(this) : opts.parentId;
     const index = opts.index ?? utils.getInsertIndex(this);
     const type = opts.type ?? "leaf";
     const data = await safeRun(this.props.onCreate, {
@@ -224,7 +289,10 @@ export class TreeApi<T> {
     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) => n.rowIndex ?? 0)) : 0;
     await safeRun(this.props.onDelete, { nodes, ids });
+    this.redrawList(fromIndex);
   }
 
   edit(node: string | IdObj): Promise<EditResult> {
@@ -232,6 +300,7 @@ export class TreeApi<T> {
     this.resolveEdit({ cancelled: true });
     this.scrollTo(id);
     this.dispatch(edit(id));
+    this.redrawList(this.get(id)?.rowIndex ?? 0);
     return new Promise((resolve) => {
       TreeApi.editPromise = resolve;
     });
@@ -247,12 +316,14 @@ export class TreeApi<T> {
     });
     this.dispatch(edit(null));
     this.resolveEdit({ cancelled: false, value });
+    this.redrawList(this.get(id)?.rowIndex ?? 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;
   }
 
@@ -389,9 +460,7 @@ export class TreeApi<T> {
   }
 
   selectAll() {
-    const allSelectableNodes = this.filterSelectableNodes(
-      Object.keys(this.idToIndex),
-    );
+    const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
     this.setSelection({
       ids: allSelectableNodes,
       anchor: allSelectableNodes[0] ?? null,
@@ -408,11 +477,7 @@ export class TreeApi<T> {
       .filter((n): n is NodeApi<T> => !!n && n.isSelectable);
   }
 
-  setSelection(args: {
-    ids: (IdObj | string)[] | null;
-    anchor: Identity;
-    mostRecent: Identity;
-  }) {
+  setSelection(args: { ids: (IdObj | string)[] | null; anchor: Identity; mostRecent: Identity }) {
     const ids = new Set(args.ids?.map(identify));
     const anchor = identifyNull(args.anchor);
     const mostRecent = identifyNull(args.mostRecent);
@@ -437,9 +502,7 @@ export class TreeApi<T> {
   }
 
   get dragNodes() {
-    return this.state.dnd.dragIds
-      .map((id) => this.get(id))
-      .filter((n) => !!n) as NodeApi<T>[];
+    return this.state.dnd.dragIds.map((id) => this.get(id)).filter((n) => !!n) as NodeApi<T>[];
   }
 
   get dragNode() {
@@ -493,19 +556,21 @@ export class TreeApi<T> {
 
   /* Visibility */
 
-  open(identity: Identity) {
+  open(identity: Identity, redraw: boolean = true) {
     const id = identifyNull(identity);
     if (!id) return;
     if (this.isOpen(id)) return;
     this.dispatch(visibility.open(id, this.isFiltered));
+    if (redraw) this.redrawList(this.get(id)?.rowIndex ?? 0);
     safeRun(this.props.onToggle, id);
   }
 
-  close(identity: Identity) {
+  close(identity: Identity, redraw: boolean = true) {
     const id = identifyNull(identity);
     if (!id) return;
     if (!this.isOpen(id)) return;
     this.dispatch(visibility.close(id, this.isFiltered));
+    if (redraw) this.redrawList(this.get(id)?.rowIndex ?? 0);
     safeRun(this.props.onToggle, id);
   }
 
@@ -522,9 +587,10 @@ export class TreeApi<T> {
     let parent = node?.parent;
 
     while (parent) {
-      this.open(parent.id);
+      this.open(parent.id, false);
       parent = parent.parent;
     }
+    this.redrawList();
   }
 
   openSiblings(node: NodeApi<T>) {
@@ -535,23 +601,27 @@ export class TreeApi<T> {
       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();
+      if (node.isInternal) this.open(node.id, false);
     });
+    this.redrawList();
   }
 
   closeAll() {
     utils.walk(this.root, (node) => {
-      if (node.isInternal) node.close();
+      if (node.isInternal) this.close(node.id, false);
     });
+    this.redrawList();
   }
 
   /* Scrolling */
@@ -626,10 +696,7 @@ export class TreeApi<T> {
     return this.isActionPossible(data, this.props.disableSelect);
   }
 
-  private isActionPossible(
-    data: T,
-    disabler: string | boolean | BoolFunc<T> = () => false,
-  ) {
+  private isActionPossible(data: T, disabler: string | boolean | BoolFunc<T> = () => false) {
     return !utils.access(data, disabler);
   }
 

package/src/state/dnd-slice.ts

@@ -30,7 +30,7 @@ export const actions = {
 /* Reducer */
 export function reducer(
   state: DndState = initialState()["dnd"],
-  action: ActionTypes<typeof actions>
+  action: ActionTypes<typeof actions>,
 ): DndState {
   switch (action.type) {
     case "DND_CURSOR":

package/src/state/drag-slice.ts

@@ -15,7 +15,7 @@ export type DragSlice = {
 
 export function reducer(
   state: DragSlice = initialState().nodes.drag,
-  action: ActionTypes<typeof dnd>
+  action: ActionTypes<typeof dnd>,
 ): DragSlice {
   switch (action.type) {
     case "DND_DRAG_START":
@@ -29,10 +29,7 @@ export function reducer(
         selectedIds: [],
       };
     case "DND_HOVERING":
-      if (
-        action.parentId !== state.destinationParentId ||
-        action.index != state.destinationIndex
-      ) {
+      if (action.parentId !== state.destinationParentId || action.index != state.destinationIndex) {
         return {
           ...state,
           destinationParentId: action.parentId,

package/src/state/edit-slice.ts

@@ -7,10 +7,7 @@ export function edit(id: string | null) {
 }
 
 /* Reducer */
-export function reducer(
-  state: EditState = { id: null },
-  action: ReturnType<typeof edit>
-) {
+export function reducer(state: EditState = { id: null }, action: ReturnType<typeof edit>) {
   if (action.type === "EDIT") {
     return { ...state, id: action.id };
   } else {

package/src/state/focus-slice.ts

@@ -16,7 +16,7 @@ export function treeBlur() {
 
 export function reducer(
   state: FocusState = { id: null, treeFocused: false },
-  action: ReturnType<typeof focus> | ReturnType<typeof treeBlur>
+  action: ReturnType<typeof focus> | ReturnType<typeof treeBlur>,
 ) {
   if (action.type === "FOCUS") {
     return { ...state, id: action.id, treeFocused: true };

package/src/state/open-slice.ts

@@ -22,10 +22,7 @@ export const actions = {
 
 /* Reducer */
 
-function openMapReducer(
-  state: OpenMap = {},
-  action: ActionTypes<typeof actions>
-) {
+function openMapReducer(state: OpenMap = {}, action: ActionTypes<typeof actions>) {
   if (action.type === "VISIBILITY_OPEN") {
     return { ...state, [action.id]: true };
   } else if (action.type === "VISIBILITY_CLOSE") {
@@ -42,7 +39,7 @@ function openMapReducer(
 
 export function reducer(
   state: OpenSlice = { filtered: {}, unfiltered: {} },
-  action: ActionTypes<typeof actions>
+  action: ActionTypes<typeof actions>,
 ): OpenSlice {
   if (!action.type.startsWith("VISIBILITY")) return state;
   if (action.filtered) {

package/src/state/selection-slice.ts

@@ -28,11 +28,7 @@ export const actions = {
     ids: (Array.isArray(id) ? id : [id]).map(identify),
   }),
 
-  set: (args: {
-    ids: Set<string>;
-    anchor: string | null;
-    mostRecent: string | null;
-  }) => ({
+  set: (args: { ids: Set<string>; anchor: string | null; mostRecent: string | null }) => ({
     type: "SELECTION_SET" as const,
     ...args,
   }),
@@ -51,7 +47,7 @@ export const actions = {
 /* Reducer */
 export function reducer(
   state: SelectionState = initialState()["nodes"]["selection"],
-  action: ActionTypes<typeof actions>
+  action: ActionTypes<typeof actions>,
 ): SelectionState {
   const ids = state.ids;
   switch (action.type) {

package/src/types/dnd.ts

@@ -4,6 +4,11 @@ export type CursorLocation = {
   parentId: string | null;
 };
 
-export type DragItem = {
+export type DragItem<T = any> = {
+  /* The id of the row the drag started on. */
   id: string;
+  /* Every node carried by the drag (the selection, or just `id`). */
+  dragIds: string[];
+  /* The dragged node's data, so external drop targets can read it. */
+  data: T;
 };

package/src/types/handlers.ts

@@ -27,6 +27,4 @@ export type DeleteHandler<T> = (args: {
   nodes: NodeApi<T>[];
 }) => void | Promise<void>;
 
-export type EditResult =
-  | { cancelled: true }
-  | { cancelled: false; value: string };
+export type EditResult = { cancelled: true } | { cancelled: false; value: string };

package/src/types/renderers.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, HTMLAttributes, ReactElement } from "react";
-import { IdObj } from "./utils";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeApi } from "../interfaces/tree-api";
 import { XYCoord } from "react-dnd";

package/src/types/state.ts

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

package/src/types/tree-props.ts

@@ -7,6 +7,9 @@ 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 Options */
   data?: readonly T[];
@@ -26,7 +29,7 @@ export interface TreeProps<T> {
   renderContainer?: ElementType<{}>;
 
   /* Sizes */
-  rowHeight?: number;
+  rowHeight?: number | RowHeightAccessor<T>;
   overscanCount?: number;
   width?: number | string;
   height?: number;
@@ -47,11 +50,7 @@ export interface TreeProps<T> {
   disableDrop?:
     | string
     | boolean
-    | ((args: {
-        parentNode: NodeApi<T>;
-        dragNodes: NodeApi<T>[];
-        index: number;
-      }) => boolean);
+    | ((args: { parentNode: NodeApi<T>; dragNodes: NodeApi<T>[]; index: number }) => boolean);
 
   /* Event Handlers */
   onActivate?: (node: NodeApi<T>) => void;
@@ -77,12 +76,18 @@ export interface TreeProps<T> {
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
-  dndBackend?: Extract<
-    DndProviderProps<unknown, unknown>,
-    { backend: unknown }
-  >["backend"];
+  dndBackend?: Extract<DndProviderProps<unknown, unknown>, { backend: unknown }>["backend"];
   dndManager?: ReturnType<typeof useDragDropManager>;
 
+  /* The react-dnd item type each row's drag source advertises. Defaults to
+     "NODE". Set a custom value (or a per-node function) so rows can be dropped
+     onto external react-dnd targets that accept that type. The dragged node's
+     data is always exposed on the drag item, so an external target accepting
+     the default "NODE" type can read it without setting this. Note: the tree's
+     own drop targets only accept "NODE", so a row given a custom type is no
+     longer reorderable within the tree. */
+  dragType?: string | ((node: NodeApi<T>) => string);
+
   /* Custom react-window outer/inner elements */
   outerElementType?: ReactWindowCommonProps["outerElementType"];
   innerElementType?: ReactWindowCommonProps["innerElementType"];

package/src/types/utils.ts

@@ -9,9 +9,8 @@ export type Identity = string | IdObj | null;
 
 export type BoolFunc<T> = (data: T) => boolean;
 
-export type ActionTypes<
-  Actions extends { [name: string]: (...args: any[]) => AnyAction }
-> = ReturnType<Actions[keyof Actions]>;
+export type ActionTypes<Actions extends { [name: string]: (...args: any[]) => AnyAction }> =
+  ReturnType<Actions[keyof Actions]>;
 
 export type SelectOptions = { multi?: boolean; contiguous?: boolean };
 

package/src/utils.ts

@@ -49,10 +49,7 @@ export function dfs(node: NodeApi<any>, id: string): NodeApi<any> | null {
   return null;
 }
 
-export function walk(
-  node: NodeApi<any>,
-  fn: (node: NodeApi<any>) => void
-): void {
+export function walk(node: NodeApi<any>, fn: (node: NodeApi<any>) => void): void {
   fn(node);
   if (node.children) {
     for (let child of node.children) {
@@ -110,15 +107,12 @@ function prevItem(list: HTMLElement[], index: number) {
 function getFocusable(target: HTMLElement) {
   return Array.from(
     document.querySelectorAll(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
-    )
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)',
+    ),
   ).filter((e) => e === target || !target.contains(e)) as HTMLElement[];
 }
 
-export function access<T = boolean>(
-  obj: any,
-  accessor: string | boolean | Function
-): T {
+export function access<T = boolean>(obj: any, accessor: string | boolean | Function): T {
   if (typeof accessor === "boolean") return accessor as unknown as T;
   if (typeof accessor === "string") return obj[accessor] as T;
   return accessor(obj) as T;
@@ -234,10 +228,7 @@ const defaultTreeLineChars: TreeLineChars = {
  * getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "|", blank: "  " })
  * ```
  */
-export function getTreeLinePrefix(
-  node: NodeApi<any>,
-  chars: Partial<TreeLineChars> = {}
-): string {
+export function getTreeLinePrefix(node: NodeApi<any>, chars: Partial<TreeLineChars> = {}): string {
   const c = { ...defaultTreeLineChars, ...chars };
   if (node.level === 0) return "";