react-arborist 3.7.0 → 3.9.0

package/README.md

@@ -351,9 +351,23 @@ interface TreeProps<T> {
     { backend: unknown }
   >["backend"];
   dndManager?: ReturnType<typeof useDragDropManager>;
+  dragType?: string | ((node: NodeApi<T>) => string);
 }
 ```
 
+### Dragging Nodes to External Drop Targets
+
+The react-dnd drag item created for each row carries the dragged node's `data`, so a drop target rendered outside the tree can read it:
+
+```tsx
+const [, drop] = useDrop(() => ({
+  accept: "NODE",
+  drop: (item) => console.log(item.data), // the dragged node's data
+}));
+```
+
+The tree and your external target must share one react-dnd backend. Wrap both in a single `DndProvider` and pass its manager to the tree via the `dndManager` prop. By default rows advertise the `"NODE"` item type; set the `dragType` prop (a fixed string, or a function of the node) to advertise a custom type instead. Note that the tree's own drop targets only accept `"NODE"`, so a row given a custom `dragType` is no longer reorderable within the tree.
+
 ## Row Component Props
 
 The _\<RowRenderer\>_ is responsible for attaching the drop ref, the row style (top, height) and the aria-attributes. The default should work fine for most use cases, but it can be replaced by your own component if you need. See the _renderRow_ prop in the _\<Tree\>_ component.

package/dist/main/components/cursor.js

@@ -11,8 +11,7 @@ function Cursor() {
     if (!cursor || cursor.type !== "line")
         return null;
     const indent = tree.indent;
-    const top = tree.rowHeight * cursor.index +
-        ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0);
+    const top = tree.rowTopPosition(cursor.index) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0);
     const left = indent * cursor.level;
     const Cursor = tree.renderCursor;
     return (0, jsx_runtime_1.jsx)(Cursor, { top, left, indent });

package/dist/main/components/default-container.js

@@ -16,7 +16,6 @@ let timeoutId = null;
  * the event handler. Future clean up welcome.
  */
 function DefaultContainer() {
-    var _a, _b;
     (0, context_1.useDataUpdates)();
     const tree = (0, context_1.useTreeApi)();
     return ((0, jsx_runtime_1.jsx)("div", { role: "tree", style: {
@@ -234,5 +233,35 @@ function DefaultContainer() {
             });
             if (node)
                 tree.focus(node.id);
-        }, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: (_a = tree.props.outerElementType) !== null && _a !== void 0 ? _a : list_outer_element_1.ListOuterElement, innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
+        }, children: (0, jsx_runtime_1.jsx)(List, {}) }));
+}
+/**
+ * Fixed-height trees (numeric rowHeight) render a FixedSizeList, preserving the
+ * original O(1) layout and avoiding VariableSizeList's measurement cache. Only
+ * the function form, which needs per-row heights, uses VariableSizeList.
+ */
+function List() {
+    var _a, _b;
+    const tree = (0, context_1.useTreeApi)();
+    const commonProps = {
+        className: tree.props.className,
+        outerRef: tree.listEl,
+        itemCount: tree.visibleNodes.length,
+        height: tree.height,
+        width: tree.width,
+        overscanCount: tree.overscanCount,
+        itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; },
+        outerElementType: (_a = tree.props.outerElementType) !== null && _a !== void 0 ? _a : list_outer_element_1.ListOuterElement,
+        innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : list_inner_element_1.ListInnerElement,
+        onScroll: tree.props.onScroll,
+        onItemsRendered: tree.onItemsRendered.bind(tree),
+    };
+    if (typeof tree.props.rowHeight === "function") {
+        return (
+        // @ts-ignore
+        (0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeightAt, ref: tree.list, children: row_container_1.RowContainer })));
+    }
+    return (
+    // @ts-ignore
+    (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeight, ref: tree.list, children: row_container_1.RowContainer })));
 }

package/dist/main/components/default-cursor.js

@@ -23,7 +23,7 @@ const circleStyle = {
     boxShadow: "0 0 0 3px #4B91E2",
     borderRadius: "50%",
 };
-exports.DefaultCursor = react_1.default.memo(function DefaultCursor({ top, left, indent, }) {
+exports.DefaultCursor = react_1.default.memo(function DefaultCursor({ top, left, indent }) {
     const style = {
         position: "absolute",
         pointerEvents: "none",

package/dist/main/components/default-drag-preview.d.ts

@@ -1,2 +1,2 @@
 import { DragPreviewProps } from "../types/renderers";
-export declare function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }: DragPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging }: DragPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/components/default-drag-preview.js

@@ -25,7 +25,7 @@ const getCountStyle = (offset) => {
     const { x, y } = offset;
     return { transform: `translate(${x + 10}px, ${y + 10}px)` };
 };
-function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }) {
+function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging }) {
     return ((0, jsx_runtime_1.jsxs)(Overlay, { isDragging: isDragging, children: [(0, jsx_runtime_1.jsx)(Position, { offset: offset, children: (0, jsx_runtime_1.jsx)(PreviewNode, { id: id, dragIds: dragIds }) }), (0, jsx_runtime_1.jsx)(Count, { mouse: mouse, count: dragIds.length })] }));
 }
 const Overlay = (0, react_1.memo)(function Overlay(props) {

package/dist/main/components/default-row.d.ts

@@ -1,2 +1,2 @@
 import { RowRendererProps } from "../types/renderers";
-export declare function DefaultRow<T>({ node, attrs, innerRef, children, }: RowRendererProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultRow<T>({ node, attrs, innerRef, children }: RowRendererProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/main/components/default-row.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultRow = DefaultRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DefaultRow({ node, attrs, innerRef, children, }) {
+function DefaultRow({ node, attrs, innerRef, children }) {
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
 }

package/dist/main/components/list-outer-element.js

@@ -29,7 +29,7 @@ exports.ListOuterElement = (0, react_1.forwardRef)(function Outer(props, ref) {
 const DropContainer = () => {
     const tree = (0, context_1.useTreeApi)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            height: tree.visibleNodes.length * tree.rowHeight,
+            height: tree.rowTopPosition(tree.visibleNodes.length),
             width: "100%",
             position: "absolute",
             left: "0",

package/dist/main/components/provider.d.ts

@@ -6,5 +6,5 @@ type Props<T> = {
     imperativeHandle: React.Ref<TreeApi<T> | undefined>;
     children: ReactNode;
 };
-export declare function TreeProvider<T>({ treeProps, imperativeHandle, children, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TreeProvider<T>({ treeProps, imperativeHandle, children }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/components/provider.js

@@ -13,7 +13,7 @@ const react_dnd_1 = require("react-dnd");
 const redux_1 = require("redux");
 const open_slice_1 = require("../state/open-slice");
 const SERVER_STATE = (0, initial_1.initialState)();
-function TreeProvider({ treeProps, imperativeHandle, children, }) {
+function TreeProvider({ treeProps, imperativeHandle, children }) {
     const list = (0, react_1.useRef)(null);
     const listEl = (0, react_1.useRef)(null);
     const store = (0, react_1.useRef)(
@@ -29,7 +29,7 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
     (0, react_1.useMemo)(() => {
         updateCount.current += 1;
         api.update(treeProps);
-    }, [...Object.values(treeProps)]);
+    }, Object.values(treeProps));
     /* Rebuild visible nodes when open state changes, without clobbering
        props set imperatively via api.update(). Bumping updateCount keeps
        DataUpdates consumers (e.g. DefaultContainer) in sync. */

package/dist/main/components/provider.test.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@testing-library/react");
+const react_window_1 = require("react-window");
 const tree_1 = require("./tree");
 const data = [
     {
@@ -31,3 +32,72 @@ test("imperative tree.update() props survive node toggles (#228)", () => {
     });
     expect(api.rowHeight).toBe(48);
 });
+/* Backwards compatibility: switching FixedSizeList -> VariableSizeList must not
+   change layout for a numeric rowHeight. With openByDefault, all four nodes
+   (1 > 2, 3 > 4) are visible in DFS order. */
+test("numeric rowHeight positions rows at index * height (#238 back-compat)", () => {
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, rowHeight: 24, openByDefault: true }));
+    const rows = react_2.screen.getAllByRole("treeitem");
+    expect(rows).toHaveLength(4);
+    rows.forEach((row, i) => {
+        expect(row.style.height).toBe("24px");
+        expect(row.style.top).toBe(`${i * 24}px`);
+    });
+});
+test("function rowHeight gives each row its own height and cumulative top (#238)", () => {
+    const heights = { "1": 40, "2": 20, "3": 30, "4": 10 };
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, rowHeight: (node) => heights[node.id], openByDefault: true }));
+    const rows = react_2.screen.getAllByRole("treeitem");
+    expect(rows).toHaveLength(4);
+    const expected = [40, 20, 30, 10];
+    let top = 0;
+    rows.forEach((row, i) => {
+        expect(row.style.height).toBe(`${expected[i]}px`);
+        expect(row.style.top).toBe(`${top}px`);
+        top += expected[i];
+    });
+});
+test("mutations tell the list to recompute heights (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    /* Only variable-height mode renders a VariableSizeList with a measurement
+       cache to recompute, so use a function rowHeight here. */
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    const api = ref.current;
+    const reset = jest.spyOn(api.list.current, "resetAfterIndex");
+    (0, react_2.act)(() => api.close("1"));
+    expect(reset).toHaveBeenCalled();
+    reset.mockClear();
+    (0, react_2.act)(() => api.open("1"));
+    expect(reset).toHaveBeenCalled();
+});
+/* react-window caches measurements by index and never invalidates them itself.
+   When data changes via props in variable-height mode, those cached sizes belong
+   to the wrong rows, so update() must drop the cache. It runs during render, so
+   it uses the shouldForceUpdate=false variant. */
+test("changing data in variable-height mode resets the list cache (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    const rowHeight = (node) => (node.isInternal ? 40 : 20);
+    const { rerender } = (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: rowHeight, openByDefault: true }));
+    const reset = jest.spyOn(ref.current.list.current, "resetAfterIndex");
+    const nextData = [{ id: "9", name: "fresh" }, ...data];
+    (0, react_2.act)(() => {
+        rerender((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: nextData, ref: ref, rowHeight: rowHeight, openByDefault: true }));
+    });
+    expect(reset).toHaveBeenCalledWith(0, false);
+});
+/* The numeric path must stay on FixedSizeList: it has constant item sizes, so
+   there is no measurement cache to go stale and none of VariableSizeList's
+   overhead. A FixedSizeList has no resetAfterIndex method at all. */
+test("numeric rowHeight renders a cache-free FixedSizeList (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: true }));
+    const list = ref.current.list.current;
+    expect(list).toBeInstanceOf(react_window_1.FixedSizeList);
+    expect("resetAfterIndex" in list).toBe(false);
+});
+/* The function path uses VariableSizeList so per-row heights are possible. */
+test("function rowHeight renders a VariableSizeList (#238)", () => {
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    expect(ref.current.list.current).toBeInstanceOf(react_window_1.VariableSizeList);
+});

package/dist/main/components/row-container.d.ts

@@ -3,5 +3,5 @@ type Props = {
     style: React.CSSProperties;
     index: number;
 };
-export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style, }: Props) => import("react/jsx-runtime").JSX.Element)>;
+export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style }: Props) => import("react/jsx-runtime").JSX.Element)>;
 export {};

package/dist/main/components/row-container.js

@@ -30,7 +30,7 @@ const context_1 = require("../context");
 const drag_hook_1 = require("../dnd/drag-hook");
 const drop_hook_1 = require("../dnd/drop-hook");
 const use_fresh_node_1 = require("../hooks/use-fresh-node");
-exports.RowContainer = react_1.default.memo(function RowContainer({ index, style, }) {
+exports.RowContainer = react_1.default.memo(function RowContainer({ index, style }) {
     /* When will the <Row> will re-render.
      *
      * The row component is memo'd so it will only render
@@ -61,8 +61,7 @@ exports.RowContainer = react_1.default.memo(function RowContainer({ index, style
     const nodeStyle = (0, react_1.useMemo)(() => ({ paddingLeft: indent }), [indent]);
     const rowStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) +
-                ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
+        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
     }, [style, tree.props.padding, tree.props.paddingTop]);
     const rowAttrs = {
         role: "treeitem",

package/dist/main/dnd/drag-hook.d.ts

@@ -1,3 +1,5 @@
 import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
+import { TreeProps } from "../types/tree-props";
+export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

package/dist/main/dnd/drag-hook.js

@@ -1,28 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragTypeForNode = dragTypeForNode;
 exports.useDragHook = useDragHook;
 const react_1 = require("react");
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const context_1 = require("../context");
 const dnd_slice_1 = require("../state/dnd-slice");
+/* The react-dnd item type a row's drag source broadcasts. The dragType prop
+   can be a fixed string or a per-node function; it defaults to "NODE". */
+function dragTypeForNode(dragType, node) {
+    if (typeof dragType === "function")
+        return dragType(node);
+    return dragType !== null && dragType !== void 0 ? dragType : "NODE";
+}
 function useDragHook(node) {
     const tree = (0, context_1.useTreeApi)();
     const ids = tree.selectedIds;
     const [_, ref, preview] = (0, react_dnd_1.useDrag)(() => ({
         canDrag: () => node.isDraggable,
-        type: "NODE",
+        type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
-            // This is fired once at the begging of a drag operation
+            // This is fired once at the beginning of a drag operation
             const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
             tree.dispatch(dnd_slice_1.actions.dragStart(node.id, dragIds));
-            return { id: node.id, dragIds };
+            return { id: node.id, dragIds, data: node.data };
         },
         end: () => {
             tree.hideCursor();
+            tree.redrawList();
             tree.dispatch(dnd_slice_1.actions.dragEnd());
         },
-    }), [ids, node]);
+    }), [ids, node, tree.props.dragType]);
     (0, react_1.useEffect)(() => {
         preview((0, react_dnd_html5_backend_1.getEmptyImage)());
     }, [preview]);

package/dist/main/dnd/drag-hook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/main/dnd/drag-hook.test.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const drag_hook_1 = require("./drag-hook");
+/* dragTypeForNode only reads node.data when dragType is a function, so a
+   minimal stub stands in for a real NodeApi. */
+function nodeWith(data) {
+    return { data };
+}
+test("defaults to the internal NODE type when dragType is undefined", () => {
+    expect((0, drag_hook_1.dragTypeForNode)(undefined, nodeWith({ id: "a" }))).toBe("NODE");
+});
+test("uses a fixed string dragType for every node", () => {
+    expect((0, drag_hook_1.dragTypeForNode)("FILE", nodeWith({ id: "a" }))).toBe("FILE");
+});
+test("resolves a per-node dragType function against the node", () => {
+    const dragType = (node) => node.data.kind.toUpperCase();
+    expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
+    expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
+});

package/dist/main/hooks/use-validated-props.js

@@ -6,8 +6,7 @@ function useValidatedProps(props) {
     if (props.initialData && props.data) {
         throw new Error(`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.`);
     }

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

@@ -6,7 +6,10 @@ class NodeApi {
     constructor(params) {
         this.handleClick = (e) => {
             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();

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

@@ -2,7 +2,7 @@ import { EditResult } from "../types/handlers";
 import { 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 { DefaultRow } from "../components/default-row";
 import { DefaultNode } from "../components/default-node";
 import { NodeApi } from "./node-api";
@@ -14,7 +14,7 @@ import { Store } from "redux";
 export declare class TreeApi<T> {
     store: Store<RootState, Actions>;
     props: TreeProps<T>;
-    list: MutableRefObject<FixedSizeList | null>;
+    list: MutableRefObject<FixedSizeList | VariableSizeList | null>;
     listEl: MutableRefObject<HTMLDivElement | null>;
     static editPromise: null | ((args: EditResult) => void);
     root: NodeApi<T>;
@@ -24,7 +24,8 @@ export declare class TreeApi<T> {
     idToIndex: {
         [id: string]: number;
     };
-    constructor(store: Store<RootState, Actions>, props: TreeProps<T>, list: MutableRefObject<FixedSizeList | null>, listEl: MutableRefObject<HTMLDivElement | null>);
+    private rowOffsets;
+    constructor(store: Store<RootState, Actions>, props: TreeProps<T>, list: MutableRefObject<FixedSizeList | VariableSizeList | null>, listEl: MutableRefObject<HTMLDivElement | null>);
     update(props: TreeProps<T>): void;
     dispatch(action: Actions): {
         type: "FOCUS";
@@ -121,7 +122,28 @@ export declare class TreeApi<T> {
     get width(): string | number;
     get height(): number;
     get indent(): number;
+    /**
+     * 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(): number;
+    /**
+     * 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;
+    /** The pixel offset of the top of the row at `index` from the top of the list. */
+    rowTopPosition: (index: number) => number;
+    /**
+     * 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) => void;
+    /** Lazily-built prefix sum where offsets[i] is the top of row i. */
+    private getRowOffsets;
     get overscanCount(): number;
     get searchTerm(): string;
     get matchFn(): (node: NodeApi<T>) => boolean;
@@ -185,8 +207,8 @@ export declare class TreeApi<T> {
     canDrop(): boolean;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
-    open(identity: Identity): void;
-    close(identity: Identity): void;
+    open(identity: Identity, redraw?: boolean): void;
+    close(identity: Identity, redraw?: boolean): void;
     toggle(identity: Identity): void;
     openParents(identity: Identity): void;
     openSiblings(node: NodeApi<T>): void;