react-arborist 3.7.0 → 3.8.0

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.ts

@@ -22,6 +22,7 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
       },
       end: () => {
         tree.hideCursor();
+        tree.redrawList();
         tree.dispatch(dnd.dragEnd());
       },
     }),

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

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/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,10 +76,7 @@ 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>;
 
   /* Custom react-window outer/inner elements */