react-arborist 3.4.3 → 3.6.0

package/README.md

@@ -268,6 +268,8 @@ const { ref, width, height } = useResizeObserver();
 - Interfaces
   - [Node API](#node-api-reference)
   - [Tree API](#tree-api-reference)
+- Utilities
+  - [getTreeLinePrefix](#gettreelineprefix)
 
 ## Tree Component Props
 
@@ -303,11 +305,12 @@ interface TreeProps<T> {
   padding?: number;
 
   /* Config */
-  childrenAccessor?: string | ((d: T) => T[] | null);
+  childrenAccessor?: string | ((d: T) => readonly T[] | null);
   idAccessor?: string | ((d: T) => string);
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableSelect?: string | boolean | BoolFunc<T>;
   disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?:
@@ -343,7 +346,11 @@ interface TreeProps<T> {
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
-  dndManager?: DragDropManager;
+  dndBackend?: Extract<
+    DndProviderProps<unknown, unknown>,
+    { backend: unknown }
+  >["backend"];
+  dndManager?: ReturnType<typeof useDragDropManager>;
 }
 ```
 
@@ -648,17 +655,17 @@ _tree_.**isSelected**(_id_) : _boolean_
 
 Returns true if the node with _id_ is selected.
 
-_tree_.**select**(_id_)
+_tree_.**select**(_id_, _[opts]_)
 
-Select only the node with _id_.
+Select only the node with _id_. Accepts an optional options object: `{ align?: "auto" | "smart" | "center" | "end" | "start"; focus?: boolean }`. `align` is forwarded to the scroll behavior; passing `focus: false` suppresses the focus change and the `onFocus` callback.
 
 _tree_.**deselect**(_id_)
 
 Deselect the node with _id_.
 
-_tree_.**selectMulti**(_id_)
+_tree_.**selectMulti**(_id_, _[opts]_)
 
-Add to the selection the node with _id_.
+Add to the selection the node with _id_. Accepts the same options object as `select`.
 
 _tree_.**selectContiguous**(_id_)
 
@@ -740,6 +747,43 @@ _tree_.**root** : _NodeApi_
 
 Returns the root _NodeApi_ instance. Its children are the Node representations of the _data_ prop array.
 
+## Utilities
+
+### getTreeLinePrefix
+
+Generates a tree-line prefix string (using Unix `tree`-style box-drawing characters like `├`, `└`, `│`) for a given node. Useful when you want ASCII/Unicode connector lines in a custom node renderer.
+
+```ts
+function getTreeLinePrefix(
+  node: NodeApi<any>,
+  chars?: Partial<TreeLineChars>
+): string;
+
+type TreeLineChars = {
+  last: string;   // default: "└ "
+  middle: string; // default: "├ "
+  pipe: string;   // default: "│ "
+  blank: string;  // default: "\u3000 "
+};
+```
+
+Wrap the prefix in a monospace span so the connectors line up:
+
+```tsx
+import { Tree, getTreeLinePrefix } from "react-arborist";
+
+function Node({ node, style }) {
+  return (
+    <div style={style}>
+      <span style={{ fontFamily: "monospace" }}>{getTreeLinePrefix(node)}</span>
+      {node.data.name}
+    </div>
+  );
+}
+```
+
+Pass a partial `chars` object to override any of the default characters (e.g. for an ASCII-only style).
+
 ## Author
 
 [James Kerr](https://twitter.com/specialCaseDev) at [Brim Data](https://brimdata.io) for the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A).

package/dist/main/components/provider.js

@@ -47,5 +47,12 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
             store.current.dispatch(open_slice_1.actions.clear(true));
         }
     }, [api.props.searchTerm]);
-    return ((0, jsx_runtime_1.jsx)(context_1.TreeApiContext.Provider, { value: api, children: (0, jsx_runtime_1.jsx)(context_1.DataUpdatesContext.Provider, { value: updateCount.current, children: (0, jsx_runtime_1.jsx)(context_1.NodesContext.Provider, { value: state.nodes, children: (0, jsx_runtime_1.jsx)(context_1.DndContext.Provider, { value: state.dnd, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, Object.assign({ backend: react_dnd_html5_backend_1.HTML5Backend, options: { rootElement: api.props.dndRootElement || undefined } }, (treeProps.dndManager && { manager: treeProps.dndManager }), { children: children })) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(context_1.TreeApiContext.Provider, { value: api, children: (0, jsx_runtime_1.jsx)(context_1.DataUpdatesContext.Provider, { value: updateCount.current, children: (0, jsx_runtime_1.jsx)(context_1.NodesContext.Provider, { value: state.nodes, children: (0, jsx_runtime_1.jsx)(context_1.DndContext.Provider, { value: state.dnd, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, Object.assign({}, (treeProps.dndManager
+                        ? { manager: treeProps.dndManager }
+                        : {
+                            backend: treeProps.dndBackend || react_dnd_html5_backend_1.HTML5Backend,
+                            options: {
+                                rootElement: api.props.dndRootElement || undefined,
+                            },
+                        }), { children: children })) }) }) }) }));
 }

package/dist/main/index.d.ts

@@ -6,3 +6,5 @@ export * from "./interfaces/node-api";
 export * from "./interfaces/tree-api";
 export * from "./data/simple-tree";
 export * from "./hooks/use-simple-tree";
+export { getTreeLinePrefix } from "./utils";
+export type { TreeLineChars } from "./utils";

package/dist/main/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tree = void 0;
+exports.getTreeLinePrefix = exports.Tree = void 0;
 /* The Public Api */
 var tree_1 = require("./components/tree");
 Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return tree_1.Tree; } });
@@ -25,3 +25,5 @@ __exportStar(require("./interfaces/node-api"), exports);
 __exportStar(require("./interfaces/tree-api"), exports);
 __exportStar(require("./data/simple-tree"), exports);
 __exportStar(require("./hooks/use-simple-tree"), exports);
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getTreeLinePrefix", { enumerable: true, get: function () { return utils_1.getTreeLinePrefix; } });

package/dist/main/interfaces/node-api.d.ts

@@ -26,6 +26,7 @@ export declare class NodeApi<T = any> {
     get isOpen(): boolean;
     get isClosed(): boolean;
     get isEditable(): boolean;
+    get isSelectable(): boolean;
     get isEditing(): boolean;
     get isSelected(): boolean;
     get isOnlySelection(): boolean;

package/dist/main/interfaces/node-api.js

@@ -43,6 +43,9 @@ class NodeApi {
     get isEditable() {
         return this.tree.isEditable(this.data);
     }
+    get isSelectable() {
+        return this.tree.isSelectable(this.data);
+    }
     get isEditing() {
         return this.tree.editingId === this.id;
     }

package/dist/main/interfaces/tree-api.d.ts

@@ -136,7 +136,7 @@ export declare class TreeApi<T> {
     get(id: string | null): NodeApi<T> | null;
     at(index: number): NodeApi<T> | null;
     nodesBetween(startId: string | null, endId: string | null): NodeApi<T>[];
-    indexOf(id: string | null | IdObj): number | null;
+    indexOf(id: Identity): number | null;
     get editingId(): string | null;
     createInternal(): Promise<void>;
     createLeaf(): Promise<void>;
@@ -145,11 +145,11 @@ export declare class TreeApi<T> {
         parentId?: null | string;
         index?: null | number;
     }): Promise<void>;
-    delete(node: string | IdObj | null | string[] | IdObj[]): Promise<void>;
+    delete(node: Identity | string[] | IdObj[]): Promise<void>;
     edit(node: string | IdObj): Promise<EditResult>;
     submit(identity: Identity, value: string): Promise<void>;
     reset(): void;
-    activate(id: string | IdObj | null): void;
+    activate(id: Identity): void;
     private resolveEdit;
     get selectedIds(): Set<string>;
     get selectedNodes(): NodeApi<T>[];
@@ -163,14 +163,18 @@ export declare class TreeApi<T> {
         focus?: boolean;
     }): void;
     deselect(node: Identity): void;
-    selectMulti(identity: Identity): void;
+    selectMulti(identity: Identity, opts?: {
+        align?: Align;
+        focus?: boolean;
+    }): void;
     selectContiguous(identity: Identity): void;
     deselectAll(): void;
     selectAll(): void;
+    private filterSelectableNodes;
     setSelection(args: {
         ids: (IdObj | string)[] | null;
-        anchor: IdObj | string | null;
-        mostRecent: IdObj | string | null;
+        anchor: Identity;
+        mostRecent: Identity;
     }): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
@@ -199,10 +203,12 @@ export declare class TreeApi<T> {
     isOpen(id?: string): boolean;
     isEditable(data: T): boolean;
     isDraggable(data: T): boolean;
-    isDragging(node: string | IdObj | null): boolean;
+    isSelectable(data: T): boolean;
+    private isActionPossible;
+    isDragging(node: Identity): boolean;
     isFocused(id: string): boolean;
     isMatch(node: NodeApi<T>): boolean;
-    willReceiveDrop(node: string | IdObj | null): boolean;
+    willReceiveDrop(node: Identity): boolean;
     onFocus(): void;
     onBlur(): void;
     onItemsRendered(args: ListOnItemsRenderedProps): void;

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

@@ -327,20 +327,24 @@ class TreeApi {
         this.focus(this.at(index));
     }
     select(node, opts = {}) {
+        var _a;
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
         const id = identify(node);
         if (changeFocus)
             this.dispatch((0, focus_slice_1.focus)(id));
-        this.dispatch(selection_slice_1.actions.only(id));
-        this.dispatch(selection_slice_1.actions.anchor(id));
-        this.dispatch(selection_slice_1.actions.mostRecent(id));
+        if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
+            this.setSelection({
+                ids: [id],
+                anchor: id,
+                mostRecent: id,
+            });
+        }
         this.scrollTo(id, opts.align);
         if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
         }
-        safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselect(node) {
         if (!node)
@@ -349,28 +353,37 @@ class TreeApi {
         this.dispatch(selection_slice_1.actions.remove(id));
         safeRun(this.props.onSelect, this.selectedNodes);
     }
-    selectMulti(identity) {
+    selectMulti(identity, opts = {}) {
         const node = this.get(identifyNull(identity));
         if (!node)
             return;
-        this.dispatch((0, focus_slice_1.focus)(node.id));
-        this.dispatch(selection_slice_1.actions.add(node.id));
-        this.dispatch(selection_slice_1.actions.anchor(node.id));
-        this.dispatch(selection_slice_1.actions.mostRecent(node.id));
-        this.scrollTo(node);
-        if (this.focusedNode)
+        const changeFocus = opts.focus !== false;
+        if (changeFocus)
+            this.dispatch((0, focus_slice_1.focus)(node.id));
+        if (node.isSelectable) {
+            this.dispatch(selection_slice_1.actions.add(node.id));
+            this.dispatch(selection_slice_1.actions.anchor(node.id));
+            this.dispatch(selection_slice_1.actions.mostRecent(node.id));
+        }
+        this.scrollTo(node, opts.align);
+        if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
+        }
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectContiguous(identity) {
+        var _a;
         if (!identity)
             return;
         const id = identify(identity);
-        const { anchor, mostRecent } = this.state.nodes.selection;
         this.dispatch((0, focus_slice_1.focus)(id));
-        this.dispatch(selection_slice_1.actions.remove(this.nodesBetween(anchor, mostRecent)));
-        this.dispatch(selection_slice_1.actions.add(this.nodesBetween(anchor, identifyNull(id))));
-        this.dispatch(selection_slice_1.actions.mostRecent(id));
+        if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
+            const { anchor, mostRecent } = this.state.nodes.selection;
+            const selectableNodes = this.filterSelectableNodes(this.nodesBetween(anchor, identifyNull(id)));
+            this.dispatch(selection_slice_1.actions.remove(this.nodesBetween(anchor, mostRecent)));
+            this.dispatch(selection_slice_1.actions.add(selectableNodes));
+            this.dispatch(selection_slice_1.actions.mostRecent(id));
+        }
         this.scrollTo(id);
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
@@ -381,17 +394,23 @@ class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectAll() {
-        var _a;
+        var _a, _b, _c;
+        const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
         this.setSelection({
-            ids: Object.keys(this.idToIndex),
-            anchor: this.firstNode,
-            mostRecent: this.lastNode,
+            ids: allSelectableNodes,
+            anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
+            mostRecent: (_b = allSelectableNodes[allSelectableNodes.length - 1]) !== null && _b !== void 0 ? _b : null,
         });
-        this.dispatch((0, focus_slice_1.focus)((_a = this.lastNode) === null || _a === void 0 ? void 0 : _a.id));
+        this.dispatch((0, focus_slice_1.focus)((_c = this.lastNode) === null || _c === void 0 ? void 0 : _c.id));
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
         safeRun(this.props.onSelect, this.selectedNodes);
     }
+    filterSelectableNodes(nodes) {
+        return nodes
+            .map((n) => this.get(identify(n)))
+            .filter((n) => !!n && n.isSelectable);
+    }
     setSelection(args) {
         var _a;
         const ids = new Set((_a = args.ids) === null || _a === void 0 ? void 0 : _a.map(identify));
@@ -589,12 +608,16 @@ class TreeApi {
         }
     }
     isEditable(data) {
-        const check = this.props.disableEdit || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableEdit);
     }
     isDraggable(data) {
-        const check = this.props.disableDrag || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableDrag);
+    }
+    isSelectable(data) {
+        return this.isActionPossible(data, this.props.disableSelect);
+    }
+    isActionPossible(data, disabler = () => false) {
+        return !utils.access(data, disabler);
     }
     isDragging(node) {
         const id = identifyNull(node);

package/dist/main/types/tree-props.d.ts

@@ -5,7 +5,7 @@ import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
-import { useDragDropManager } from "react-dnd";
+import { useDragDropManager, DndProviderProps } from "react-dnd";
 export interface TreeProps<T> {
     data?: readonly T[];
     initialData?: readonly T[];
@@ -31,6 +31,7 @@ export interface TreeProps<T> {
     openByDefault?: boolean;
     selectionFollowsFocus?: boolean;
     disableMultiSelection?: boolean;
+    disableSelect?: string | boolean | BoolFunc<T>;
     disableEdit?: string | boolean | BoolFunc<T>;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | ((args: {
@@ -52,5 +53,8 @@ export interface TreeProps<T> {
     dndRootElement?: globalThis.Node | null;
     onClick?: MouseEventHandler;
     onContextMenu?: MouseEventHandler;
+    dndBackend?: Extract<DndProviderProps<unknown, unknown>, {
+        backend: unknown;
+    }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
 }

package/dist/main/utils.d.ts

@@ -22,4 +22,58 @@ export declare function mergeRefs(...refs: any): (instance: any) => void;
 export declare function safeRun<T extends (...args: any[]) => any>(fn: T | undefined, ...args: Parameters<T>): any;
 export declare function waitFor(fn: () => boolean): Promise<void>;
 export declare function getInsertIndex(tree: TreeApi<any>): number;
+export type TreeLineChars = {
+    last: string;
+    middle: string;
+    pipe: string;
+    blank: string;
+};
+/**
+ * Generate a tree-line prefix string for a node.
+ *
+ * Returns characters like `├ `, `└ `, `│` that visually connect
+ * parent and child nodes, similar to the Unix `tree` command.
+ *
+ * **Styling note:** The prefix uses Box Drawing characters (`│`, `├`, `└`)
+ * which require a monospace font for correct alignment. Wrap the prefix
+ * in a `<span>` with `fontFamily: "monospace"` and use a consistent
+ * `fontSize` (e.g. 14–16px). Inherited `line-height` or `font-size`
+ * from parent elements can cause misalignment.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 14 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With folder/file icons
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   const icon = node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁";
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 16 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {icon} {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom characters
+ * ```tsx
+ * // ASCII-only style
+ * getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "|", blank: "  " })
+ * ```
+ */
+export declare function getTreeLinePrefix(node: NodeApi<any>, chars?: Partial<TreeLineChars>): string;
 export declare function getInsertParentId(tree: TreeApi<any>): string | null;

package/dist/main/utils.js

@@ -17,6 +17,7 @@ exports.mergeRefs = mergeRefs;
 exports.safeRun = safeRun;
 exports.waitFor = waitFor;
 exports.getInsertIndex = getInsertIndex;
+exports.getTreeLinePrefix = getTreeLinePrefix;
 exports.getInsertParentId = getInsertParentId;
 function bound(n, min, max) {
     return Math.max(Math.min(n, max), min);
@@ -176,6 +177,73 @@ function getInsertIndex(tree) {
         return focus.childIndex + 1;
     return 0;
 }
+const defaultTreeLineChars = {
+    last: "└ ",
+    middle: "├ ",
+    pipe: "│ ",
+    blank: "\u3000 ",
+};
+/**
+ * Generate a tree-line prefix string for a node.
+ *
+ * Returns characters like `├ `, `└ `, `│` that visually connect
+ * parent and child nodes, similar to the Unix `tree` command.
+ *
+ * **Styling note:** The prefix uses Box Drawing characters (`│`, `├`, `└`)
+ * which require a monospace font for correct alignment. Wrap the prefix
+ * in a `<span>` with `fontFamily: "monospace"` and use a consistent
+ * `fontSize` (e.g. 14–16px). Inherited `line-height` or `font-size`
+ * from parent elements can cause misalignment.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 14 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With folder/file icons
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   const icon = node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁";
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 16 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {icon} {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom characters
+ * ```tsx
+ * // ASCII-only style
+ * getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "|", blank: "  " })
+ * ```
+ */
+function getTreeLinePrefix(node, chars = {}) {
+    const c = Object.assign(Object.assign({}, defaultTreeLineChars), chars);
+    if (node.level === 0)
+        return "";
+    const isLast = node.nextSibling === null;
+    let prefix = isLast ? c.last : c.middle;
+    let ancestor = node.parent;
+    while (ancestor && ancestor.level > 0) {
+        const isAncestorLast = ancestor.nextSibling === null;
+        prefix = (isAncestorLast ? c.blank : c.pipe) + prefix;
+        ancestor = ancestor.parent;
+    }
+    return prefix;
+}
 function getInsertParentId(tree) {
     const focus = tree.focusedNode;
     if (!focus)

package/dist/module/components/provider.js

@@ -44,5 +44,12 @@ export function TreeProvider({ treeProps, imperativeHandle, children, }) {
             store.current.dispatch(visibility.clear(true));
         }
     }, [api.props.searchTerm]);
-    return (_jsx(TreeApiContext.Provider, { value: api, children: _jsx(DataUpdatesContext.Provider, { value: updateCount.current, children: _jsx(NodesContext.Provider, { value: state.nodes, children: _jsx(DndContext.Provider, { value: state.dnd, children: _jsx(DndProvider, Object.assign({ backend: HTML5Backend, options: { rootElement: api.props.dndRootElement || undefined } }, (treeProps.dndManager && { manager: treeProps.dndManager }), { children: children })) }) }) }) }));
+    return (_jsx(TreeApiContext.Provider, { value: api, children: _jsx(DataUpdatesContext.Provider, { value: updateCount.current, children: _jsx(NodesContext.Provider, { value: state.nodes, children: _jsx(DndContext.Provider, { value: state.dnd, children: _jsx(DndProvider, Object.assign({}, (treeProps.dndManager
+                        ? { manager: treeProps.dndManager }
+                        : {
+                            backend: treeProps.dndBackend || HTML5Backend,
+                            options: {
+                                rootElement: api.props.dndRootElement || undefined,
+                            },
+                        }), { children: children })) }) }) }) }));
 }

package/dist/module/index.d.ts

@@ -6,3 +6,5 @@ export * from "./interfaces/node-api";
 export * from "./interfaces/tree-api";
 export * from "./data/simple-tree";
 export * from "./hooks/use-simple-tree";
+export { getTreeLinePrefix } from "./utils";
+export type { TreeLineChars } from "./utils";

package/dist/module/index.js

@@ -7,3 +7,4 @@ export * from "./interfaces/node-api";
 export * from "./interfaces/tree-api";
 export * from "./data/simple-tree";
 export * from "./hooks/use-simple-tree";
+export { getTreeLinePrefix } from "./utils";

package/dist/module/interfaces/node-api.d.ts

@@ -26,6 +26,7 @@ export declare class NodeApi<T = any> {
     get isOpen(): boolean;
     get isClosed(): boolean;
     get isEditable(): boolean;
+    get isSelectable(): boolean;
     get isEditing(): boolean;
     get isSelected(): boolean;
     get isOnlySelection(): boolean;

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

@@ -40,6 +40,9 @@ export class NodeApi {
     get isEditable() {
         return this.tree.isEditable(this.data);
     }
+    get isSelectable() {
+        return this.tree.isSelectable(this.data);
+    }
     get isEditing() {
         return this.tree.editingId === this.id;
     }

package/dist/module/interfaces/tree-api.d.ts

@@ -136,7 +136,7 @@ export declare class TreeApi<T> {
     get(id: string | null): NodeApi<T> | null;
     at(index: number): NodeApi<T> | null;
     nodesBetween(startId: string | null, endId: string | null): NodeApi<T>[];
-    indexOf(id: string | null | IdObj): number | null;
+    indexOf(id: Identity): number | null;
     get editingId(): string | null;
     createInternal(): Promise<void>;
     createLeaf(): Promise<void>;
@@ -145,11 +145,11 @@ export declare class TreeApi<T> {
         parentId?: null | string;
         index?: null | number;
     }): Promise<void>;
-    delete(node: string | IdObj | null | string[] | IdObj[]): Promise<void>;
+    delete(node: Identity | string[] | IdObj[]): Promise<void>;
     edit(node: string | IdObj): Promise<EditResult>;
     submit(identity: Identity, value: string): Promise<void>;
     reset(): void;
-    activate(id: string | IdObj | null): void;
+    activate(id: Identity): void;
     private resolveEdit;
     get selectedIds(): Set<string>;
     get selectedNodes(): NodeApi<T>[];
@@ -163,14 +163,18 @@ export declare class TreeApi<T> {
         focus?: boolean;
     }): void;
     deselect(node: Identity): void;
-    selectMulti(identity: Identity): void;
+    selectMulti(identity: Identity, opts?: {
+        align?: Align;
+        focus?: boolean;
+    }): void;
     selectContiguous(identity: Identity): void;
     deselectAll(): void;
     selectAll(): void;
+    private filterSelectableNodes;
     setSelection(args: {
         ids: (IdObj | string)[] | null;
-        anchor: IdObj | string | null;
-        mostRecent: IdObj | string | null;
+        anchor: Identity;
+        mostRecent: Identity;
     }): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
@@ -199,10 +203,12 @@ export declare class TreeApi<T> {
     isOpen(id?: string): boolean;
     isEditable(data: T): boolean;
     isDraggable(data: T): boolean;
-    isDragging(node: string | IdObj | null): boolean;
+    isSelectable(data: T): boolean;
+    private isActionPossible;
+    isDragging(node: Identity): boolean;
     isFocused(id: string): boolean;
     isMatch(node: NodeApi<T>): boolean;
-    willReceiveDrop(node: string | IdObj | null): boolean;
+    willReceiveDrop(node: Identity): boolean;
     onFocus(): void;
     onBlur(): void;
     onItemsRendered(args: ListOnItemsRenderedProps): void;

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

@@ -301,20 +301,24 @@ export class TreeApi {
         this.focus(this.at(index));
     }
     select(node, opts = {}) {
+        var _a;
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
         const id = identify(node);
         if (changeFocus)
             this.dispatch(focus(id));
-        this.dispatch(selection.only(id));
-        this.dispatch(selection.anchor(id));
-        this.dispatch(selection.mostRecent(id));
+        if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
+            this.setSelection({
+                ids: [id],
+                anchor: id,
+                mostRecent: id,
+            });
+        }
         this.scrollTo(id, opts.align);
         if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
         }
-        safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselect(node) {
         if (!node)
@@ -323,28 +327,37 @@ export class TreeApi {
         this.dispatch(selection.remove(id));
         safeRun(this.props.onSelect, this.selectedNodes);
     }
-    selectMulti(identity) {
+    selectMulti(identity, opts = {}) {
         const node = this.get(identifyNull(identity));
         if (!node)
             return;
-        this.dispatch(focus(node.id));
-        this.dispatch(selection.add(node.id));
-        this.dispatch(selection.anchor(node.id));
-        this.dispatch(selection.mostRecent(node.id));
-        this.scrollTo(node);
-        if (this.focusedNode)
+        const changeFocus = opts.focus !== false;
+        if (changeFocus)
+            this.dispatch(focus(node.id));
+        if (node.isSelectable) {
+            this.dispatch(selection.add(node.id));
+            this.dispatch(selection.anchor(node.id));
+            this.dispatch(selection.mostRecent(node.id));
+        }
+        this.scrollTo(node, opts.align);
+        if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
+        }
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectContiguous(identity) {
+        var _a;
         if (!identity)
             return;
         const id = identify(identity);
-        const { anchor, mostRecent } = this.state.nodes.selection;
         this.dispatch(focus(id));
-        this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
-        this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
-        this.dispatch(selection.mostRecent(id));
+        if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
+            const { anchor, mostRecent } = this.state.nodes.selection;
+            const selectableNodes = this.filterSelectableNodes(this.nodesBetween(anchor, identifyNull(id)));
+            this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
+            this.dispatch(selection.add(selectableNodes));
+            this.dispatch(selection.mostRecent(id));
+        }
         this.scrollTo(id);
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
@@ -355,17 +368,23 @@ export class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectAll() {
-        var _a;
+        var _a, _b, _c;
+        const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
         this.setSelection({
-            ids: Object.keys(this.idToIndex),
-            anchor: this.firstNode,
-            mostRecent: this.lastNode,
+            ids: allSelectableNodes,
+            anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
+            mostRecent: (_b = allSelectableNodes[allSelectableNodes.length - 1]) !== null && _b !== void 0 ? _b : null,
         });
-        this.dispatch(focus((_a = this.lastNode) === null || _a === void 0 ? void 0 : _a.id));
+        this.dispatch(focus((_c = this.lastNode) === null || _c === void 0 ? void 0 : _c.id));
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
         safeRun(this.props.onSelect, this.selectedNodes);
     }
+    filterSelectableNodes(nodes) {
+        return nodes
+            .map((n) => this.get(identify(n)))
+            .filter((n) => !!n && n.isSelectable);
+    }
     setSelection(args) {
         var _a;
         const ids = new Set((_a = args.ids) === null || _a === void 0 ? void 0 : _a.map(identify));
@@ -563,12 +582,16 @@ export class TreeApi {
         }
     }
     isEditable(data) {
-        const check = this.props.disableEdit || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableEdit);
     }
     isDraggable(data) {
-        const check = this.props.disableDrag || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableDrag);
+    }
+    isSelectable(data) {
+        return this.isActionPossible(data, this.props.disableSelect);
+    }
+    isActionPossible(data, disabler = () => false) {
+        return !utils.access(data, disabler);
     }
     isDragging(node) {
         const id = identifyNull(node);

package/dist/module/types/tree-props.d.ts

@@ -5,7 +5,7 @@ import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
-import { useDragDropManager } from "react-dnd";
+import { useDragDropManager, DndProviderProps } from "react-dnd";
 export interface TreeProps<T> {
     data?: readonly T[];
     initialData?: readonly T[];
@@ -31,6 +31,7 @@ export interface TreeProps<T> {
     openByDefault?: boolean;
     selectionFollowsFocus?: boolean;
     disableMultiSelection?: boolean;
+    disableSelect?: string | boolean | BoolFunc<T>;
     disableEdit?: string | boolean | BoolFunc<T>;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | ((args: {
@@ -52,5 +53,8 @@ export interface TreeProps<T> {
     dndRootElement?: globalThis.Node | null;
     onClick?: MouseEventHandler;
     onContextMenu?: MouseEventHandler;
+    dndBackend?: Extract<DndProviderProps<unknown, unknown>, {
+        backend: unknown;
+    }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
 }

package/dist/module/utils.d.ts

@@ -22,4 +22,58 @@ export declare function mergeRefs(...refs: any): (instance: any) => void;
 export declare function safeRun<T extends (...args: any[]) => any>(fn: T | undefined, ...args: Parameters<T>): any;
 export declare function waitFor(fn: () => boolean): Promise<void>;
 export declare function getInsertIndex(tree: TreeApi<any>): number;
+export type TreeLineChars = {
+    last: string;
+    middle: string;
+    pipe: string;
+    blank: string;
+};
+/**
+ * Generate a tree-line prefix string for a node.
+ *
+ * Returns characters like `├ `, `└ `, `│` that visually connect
+ * parent and child nodes, similar to the Unix `tree` command.
+ *
+ * **Styling note:** The prefix uses Box Drawing characters (`│`, `├`, `└`)
+ * which require a monospace font for correct alignment. Wrap the prefix
+ * in a `<span>` with `fontFamily: "monospace"` and use a consistent
+ * `fontSize` (e.g. 14–16px). Inherited `line-height` or `font-size`
+ * from parent elements can cause misalignment.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 14 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With folder/file icons
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   const icon = node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁";
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 16 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {icon} {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom characters
+ * ```tsx
+ * // ASCII-only style
+ * getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "|", blank: "  " })
+ * ```
+ */
+export declare function getTreeLinePrefix(node: NodeApi<any>, chars?: Partial<TreeLineChars>): string;
 export declare function getInsertParentId(tree: TreeApi<any>): string | null;

package/dist/module/utils.js

@@ -154,6 +154,73 @@ export function getInsertIndex(tree) {
         return focus.childIndex + 1;
     return 0;
 }
+const defaultTreeLineChars = {
+    last: "└ ",
+    middle: "├ ",
+    pipe: "│ ",
+    blank: "\u3000 ",
+};
+/**
+ * Generate a tree-line prefix string for a node.
+ *
+ * Returns characters like `├ `, `└ `, `│` that visually connect
+ * parent and child nodes, similar to the Unix `tree` command.
+ *
+ * **Styling note:** The prefix uses Box Drawing characters (`│`, `├`, `└`)
+ * which require a monospace font for correct alignment. Wrap the prefix
+ * in a `<span>` with `fontFamily: "monospace"` and use a consistent
+ * `fontSize` (e.g. 14–16px). Inherited `line-height` or `font-size`
+ * from parent elements can cause misalignment.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 14 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With folder/file icons
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   const icon = node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁";
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 16 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {icon} {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom characters
+ * ```tsx
+ * // ASCII-only style
+ * getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "|", blank: "  " })
+ * ```
+ */
+export function getTreeLinePrefix(node, chars = {}) {
+    const c = Object.assign(Object.assign({}, defaultTreeLineChars), chars);
+    if (node.level === 0)
+        return "";
+    const isLast = node.nextSibling === null;
+    let prefix = isLast ? c.last : c.middle;
+    let ancestor = node.parent;
+    while (ancestor && ancestor.level > 0) {
+        const isAncestorLast = ancestor.nextSibling === null;
+        prefix = (isAncestorLast ? c.blank : c.pipe) + prefix;
+        ancestor = ancestor.parent;
+    }
+    return prefix;
+}
 export function getInsertParentId(tree) {
     const focus = tree.focusedNode;
     if (!focus)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.4.3",
+  "version": "3.6.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/main/index.js",
@@ -22,10 +22,10 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/brimdata/react-arborist.git"
+    "url": "https://github.com/jameskerr/react-arborist.git"
   },
   "homepage": "https://react-arborist.netlify.app",
-  "bugs": "https://github.com/brimdata/react-arborist/issues",
+  "bugs": "https://github.com/jameskerr/react-arborist/issues",
   "keywords": [
     "react",
     "arborist",
@@ -59,4 +59,4 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6.0"
   }
-}
+}

package/src/components/provider.tsx

@@ -84,9 +84,14 @@ export function TreeProvider<T>({
         <NodesContext.Provider value={state.nodes}>
           <DndContext.Provider value={state.dnd}>
             <DndProvider
-              backend={HTML5Backend}
-              options={{ rootElement: api.props.dndRootElement || undefined }}
-              {...(treeProps.dndManager && { manager: treeProps.dndManager })}
+              {...(treeProps.dndManager
+                ? { manager: treeProps.dndManager }
+                : {
+                    backend: treeProps.dndBackend || HTML5Backend,
+                    options: {
+                      rootElement: api.props.dndRootElement || undefined,
+                    },
+                  })}
             >
               {children}
             </DndProvider>

package/src/index.ts

@@ -7,3 +7,5 @@ export * from "./interfaces/node-api";
 export * from "./interfaces/tree-api";
 export * from "./data/simple-tree";
 export * from "./hooks/use-simple-tree";
+export { getTreeLinePrefix } from "./utils";
+export type { TreeLineChars } from "./utils";

package/src/interfaces/node-api.ts

@@ -59,6 +59,10 @@ export class NodeApi<T = any> {
     return this.tree.isEditable(this.data);
   }
 
+  get isSelectable() {
+    return this.tree.isSelectable(this.data);
+  }
+
   get isEditing() {
     return this.tree.editingId === this.id;
   }

package/src/interfaces/tree-api.ts

@@ -1,5 +1,5 @@
 import { EditResult } from "../types/handlers";
-import { Identity, IdObj } from "../types/utils";
+import { BoolFunc, Identity, IdObj } from "../types/utils";
 import { TreeProps } from "../types/tree-props";
 import { MutableRefObject } from "react";
 import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
@@ -169,7 +169,7 @@ export class TreeApi<T> {
     return this.visibleNodes.slice(start, end + 1);
   }
 
-  indexOf(id: string | null | IdObj) {
+  indexOf(id: Identity) {
     const key = utils.identifyNull(id);
     if (!key) return null;
     return this.idToIndex[key];
@@ -219,7 +219,7 @@ export class TreeApi<T> {
     }
   }
 
-  async delete(node: string | IdObj | null | string[] | IdObj[]) {
+  async delete(node: Identity | string[] | IdObj[]) {
     if (!node) return;
     const idents = Array.isArray(node) ? node : [node];
     const ids = idents.map(identify);
@@ -256,7 +256,7 @@ export class TreeApi<T> {
     setTimeout(() => this.onFocus()); // Return focus to element;
   }
 
-  activate(id: string | IdObj | null) {
+  activate(id: Identity) {
     const node = this.get(identifyNull(id));
     if (!node) return;
     safeRun(this.props.onActivate, node);
@@ -328,14 +328,17 @@ export class TreeApi<T> {
     const changeFocus = opts.focus !== false;
     const id = identify(node);
     if (changeFocus) this.dispatch(focus(id));
-    this.dispatch(selection.only(id));
-    this.dispatch(selection.anchor(id));
-    this.dispatch(selection.mostRecent(id));
+    if (this.get(id)?.isSelectable) {
+      this.setSelection({
+        ids: [id],
+        anchor: id,
+        mostRecent: id,
+      });
+    }
     this.scrollTo(id, opts.align);
     if (this.focusedNode && changeFocus) {
       safeRun(this.props.onFocus, this.focusedNode);
     }
-    safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   deselect(node: Identity) {
@@ -345,26 +348,36 @@ export class TreeApi<T> {
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
-  selectMulti(identity: Identity) {
+  selectMulti(identity: Identity, opts: { align?: Align; focus?: boolean } = {}) {
     const node = this.get(identifyNull(identity));
     if (!node) return;
-    this.dispatch(focus(node.id));
-    this.dispatch(selection.add(node.id));
-    this.dispatch(selection.anchor(node.id));
-    this.dispatch(selection.mostRecent(node.id));
-    this.scrollTo(node);
-    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    const changeFocus = opts.focus !== false;
+    if (changeFocus) this.dispatch(focus(node.id));
+    if (node.isSelectable) {
+      this.dispatch(selection.add(node.id));
+      this.dispatch(selection.anchor(node.id));
+      this.dispatch(selection.mostRecent(node.id));
+    }
+    this.scrollTo(node, opts.align);
+    if (this.focusedNode && changeFocus) {
+      safeRun(this.props.onFocus, this.focusedNode);
+    }
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   selectContiguous(identity: Identity) {
     if (!identity) return;
     const id = identify(identity);
-    const { anchor, mostRecent } = this.state.nodes.selection;
     this.dispatch(focus(id));
-    this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
-    this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
-    this.dispatch(selection.mostRecent(id));
+    if (this.get(id)?.isSelectable) {
+      const { anchor, mostRecent } = this.state.nodes.selection;
+      const selectableNodes = this.filterSelectableNodes(
+        this.nodesBetween(anchor, identifyNull(id)),
+      );
+      this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
+      this.dispatch(selection.add(selectableNodes));
+      this.dispatch(selection.mostRecent(id));
+    }
     this.scrollTo(id);
     if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
@@ -376,20 +389,29 @@ export class TreeApi<T> {
   }
 
   selectAll() {
+    const allSelectableNodes = this.filterSelectableNodes(
+      Object.keys(this.idToIndex),
+    );
     this.setSelection({
-      ids: Object.keys(this.idToIndex),
-      anchor: this.firstNode,
-      mostRecent: this.lastNode,
+      ids: allSelectableNodes,
+      anchor: allSelectableNodes[0] ?? null,
+      mostRecent: allSelectableNodes[allSelectableNodes.length - 1] ?? null,
     });
     this.dispatch(focus(this.lastNode?.id));
     if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
+  private filterSelectableNodes(nodes: (IdObj | string)[]) {
+    return nodes
+      .map((n) => this.get(identify(n)))
+      .filter((n): n is NodeApi<T> => !!n && n.isSelectable);
+  }
+
   setSelection(args: {
     ids: (IdObj | string)[] | null;
-    anchor: IdObj | string | null;
-    mostRecent: IdObj | string | null;
+    anchor: Identity;
+    mostRecent: Identity;
   }) {
     const ids = new Set(args.ids?.map(identify));
     const anchor = identifyNull(args.anchor);
@@ -593,16 +615,25 @@ export class TreeApi<T> {
   }
 
   isEditable(data: T) {
-    const check = this.props.disableEdit || (() => false);
-    return !utils.access(data, check);
+    return this.isActionPossible(data, this.props.disableEdit);
   }
 
   isDraggable(data: T) {
-    const check = this.props.disableDrag || (() => false);
-    return !utils.access(data, check);
+    return this.isActionPossible(data, this.props.disableDrag);
+  }
+
+  isSelectable(data: T) {
+    return this.isActionPossible(data, this.props.disableSelect);
+  }
+
+  private isActionPossible(
+    data: T,
+    disabler: string | boolean | BoolFunc<T> = () => false,
+  ) {
+    return !utils.access(data, disabler);
   }
 
-  isDragging(node: string | IdObj | null) {
+  isDragging(node: Identity) {
     const id = identifyNull(node);
     if (!id) return false;
     return this.state.nodes.drag.id === id;
@@ -616,7 +647,7 @@ export class TreeApi<T> {
     return this.matchFn(node);
   }
 
-  willReceiveDrop(node: string | IdObj | null) {
+  willReceiveDrop(node: Identity) {
     const id = identifyNull(node);
     if (!id) return false;
     const { destinationParentId, destinationIndex } = this.state.nodes.drag;

package/src/types/tree-props.ts

@@ -5,7 +5,7 @@ import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
-import { useDragDropManager } from "react-dnd";
+import { useDragDropManager, DndProviderProps } from "react-dnd";
 
 export interface TreeProps<T> {
   /* Data Options */
@@ -41,6 +41,7 @@ export interface TreeProps<T> {
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableSelect?: string | boolean | BoolFunc<T>;
   disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?:
@@ -76,5 +77,9 @@ export interface TreeProps<T> {
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
+  dndBackend?: Extract<
+    DndProviderProps<unknown, unknown>,
+    { backend: unknown }
+  >["backend"];
   dndManager?: ReturnType<typeof useDragDropManager>;
 }

package/src/utils.ts

@@ -173,6 +173,87 @@ export function getInsertIndex(tree: TreeApi<any>) {
   return 0;
 }
 
+export type TreeLineChars = {
+  last: string;
+  middle: string;
+  pipe: string;
+  blank: string;
+};
+
+const defaultTreeLineChars: TreeLineChars = {
+  last: "└ ",
+  middle: "├ ",
+  pipe: "│ ",
+  blank: "\u3000 ",
+};
+
+/**
+ * Generate a tree-line prefix string for a node.
+ *
+ * Returns characters like `├ `, `└ `, `│` that visually connect
+ * parent and child nodes, similar to the Unix `tree` command.
+ *
+ * **Styling note:** The prefix uses Box Drawing characters (`│`, `├`, `└`)
+ * which require a monospace font for correct alignment. Wrap the prefix
+ * in a `<span>` with `fontFamily: "monospace"` and use a consistent
+ * `fontSize` (e.g. 14–16px). Inherited `line-height` or `font-size`
+ * from parent elements can cause misalignment.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 14 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With folder/file icons
+ * ```tsx
+ * function MyNode({ node, style }: NodeRendererProps<MyData>) {
+ *   const icon = node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁";
+ *   return (
+ *     <div style={style}>
+ *       <span style={{ fontFamily: "monospace", fontSize: 16 }}>
+ *         {getTreeLinePrefix(node)}
+ *       </span>
+ *       {icon} {node.data.name}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Custom characters
+ * ```tsx
+ * // ASCII-only style
+ * getTreeLinePrefix(node, { last: "`- ", middle: "|- ", pipe: "|", blank: "  " })
+ * ```
+ */
+export function getTreeLinePrefix(
+  node: NodeApi<any>,
+  chars: Partial<TreeLineChars> = {}
+): string {
+  const c = { ...defaultTreeLineChars, ...chars };
+  if (node.level === 0) return "";
+
+  const isLast = node.nextSibling === null;
+  let prefix = isLast ? c.last : c.middle;
+
+  let ancestor = node.parent;
+  while (ancestor && ancestor.level > 0) {
+    const isAncestorLast = ancestor.nextSibling === null;
+    prefix = (isAncestorLast ? c.blank : c.pipe) + prefix;
+    ancestor = ancestor.parent;
+  }
+
+  return prefix;
+}
+
 export function getInsertParentId(tree: TreeApi<any>) {
   const focus = tree.focusedNode;
   if (!focus) return null;