react-arborist 3.6.1 → 3.8.0

package/dist/main/state/drag-slice.js

@@ -10,8 +10,7 @@ function reducer(state = (0, initial_1.initialState)().nodes.drag, action) {
         case "DND_DRAG_END":
             return Object.assign(Object.assign({}, state), { id: null, destinationParentId: null, destinationIndex: null, selectedIds: [] });
         case "DND_HOVERING":
-            if (action.parentId !== state.destinationParentId ||
-                action.index != state.destinationIndex) {
+            if (action.parentId !== state.destinationParentId || action.index != state.destinationIndex) {
                 return Object.assign(Object.assign({}, state), { destinationParentId: action.parentId, destinationIndex: action.index });
             }
             else {

package/dist/main/types/state.d.ts

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

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

@@ -2,10 +2,12 @@ import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
-import { ListOnScrollProps } from "react-window";
+import { ListOnScrollProps, CommonProps as ReactWindowCommonProps } from "react-window";
 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?: readonly T[];
     initialData?: readonly T[];
@@ -18,7 +20,7 @@ export interface TreeProps<T> {
     renderDragPreview?: ElementType<renderers.DragPreviewProps>;
     renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
-    rowHeight?: number;
+    rowHeight?: number | RowHeightAccessor<T>;
     overscanCount?: number;
     width?: number | string;
     height?: number;
@@ -57,4 +59,6 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    outerElementType?: ReactWindowCommonProps["outerElementType"];
+    innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

package/dist/module/components/cursor.js

@@ -8,8 +8,7 @@ export 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 _jsx(Cursor, { top, left, indent });

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
+import { FixedSizeList, VariableSizeList } from "react-window";
 import { useDataUpdates, useTreeApi } from "../context";
 import { focusNextElement, focusPrevElement } from "../utils";
 import { ListOuterElement } from "./list-outer-element";
@@ -230,5 +230,35 @@ export function DefaultContainer() {
             });
             if (node)
                 tree.focus(node.id);
-        }, children: _jsx(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: ListOuterElement, innerElementType: ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: RowContainer }) }));
+        }, children: _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 = 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 : ListOuterElement,
+        innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : ListInnerElement,
+        onScroll: tree.props.onScroll,
+        onItemsRendered: tree.onItemsRendered.bind(tree),
+    };
+    if (typeof tree.props.rowHeight === "function") {
+        return (
+        // @ts-ignore
+        _jsx(VariableSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeightAt, ref: tree.list, children: RowContainer })));
+    }
+    return (
+    // @ts-ignore
+    _jsx(FixedSizeList, Object.assign({}, commonProps, { itemSize: tree.rowHeight, ref: tree.list, children: RowContainer })));
 }

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

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

package/dist/module/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/module/components/default-drag-preview.js

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

package/dist/module/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/module/components/default-row.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function DefaultRow({ node, attrs, innerRef, children, }) {
+export function DefaultRow({ node, attrs, innerRef, children }) {
     return (_jsx("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
 }

package/dist/module/components/list-outer-element.d.ts

@@ -1 +1,2 @@
 export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const DropContainer: () => import("react/jsx-runtime").JSX.Element;

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

@@ -23,10 +23,10 @@ export const ListOuterElement = forwardRef(function Outer(props, ref) {
                 tree.deselectAll();
         }, children: [_jsx(DropContainer, {}), children] })));
 });
-const DropContainer = () => {
+export const DropContainer = () => {
     const tree = useTreeApi();
     return (_jsx("div", { style: {
-            height: tree.visibleNodes.length * tree.rowHeight,
+            height: tree.rowTopPosition(tree.visibleNodes.length),
             width: "100%",
             position: "absolute",
             left: "0",

package/dist/module/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/module/components/provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef, } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { DataUpdatesContext, DndContext, NodesContext, TreeApiContext, } from "../context";
+import { DataUpdatesContext, DndContext, NodesContext, TreeApiContext } from "../context";
 import { TreeApi } from "../interfaces/tree-api";
 import { initialState } from "../state/initial";
 import { rootReducer } from "../state/root-reducer";
@@ -10,7 +10,7 @@ import { DndProvider } from "react-dnd";
 import { createStore } from "redux";
 import { actions as visibility } from "../state/open-slice";
 const SERVER_STATE = initialState();
-export function TreeProvider({ treeProps, imperativeHandle, children, }) {
+export function TreeProvider({ treeProps, imperativeHandle, children }) {
     const list = useRef(null);
     const listEl = useRef(null);
     const store = useRef(
@@ -26,7 +26,7 @@ export function TreeProvider({ treeProps, imperativeHandle, children, }) {
     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/module/components/provider.test.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef } from "react";
-import { act, render } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
+import { FixedSizeList, VariableSizeList } from "react-window";
 import { Tree } from "./tree";
 const data = [
     {
@@ -29,3 +30,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)", () => {
+    render(_jsx(Tree, { data: data, rowHeight: 24, openByDefault: true }));
+    const rows = screen.getAllByRole("treeitem");
+    expect(rows).toHaveLength(4);
+    rows.forEach((row, i) => {
+        expect(row.style.height).toBe("24px");
+        expect(row.style.top).toBe(`${i * 24}px`);
+    });
+});
+test("function rowHeight gives each row its own height and cumulative top (#238)", () => {
+    const heights = { "1": 40, "2": 20, "3": 30, "4": 10 };
+    render(_jsx(Tree, { data: data, rowHeight: (node) => heights[node.id], openByDefault: true }));
+    const rows = screen.getAllByRole("treeitem");
+    expect(rows).toHaveLength(4);
+    const expected = [40, 20, 30, 10];
+    let top = 0;
+    rows.forEach((row, i) => {
+        expect(row.style.height).toBe(`${expected[i]}px`);
+        expect(row.style.top).toBe(`${top}px`);
+        top += expected[i];
+    });
+});
+test("mutations tell the list to recompute heights (#238)", () => {
+    const ref = createRef();
+    /* Only variable-height mode renders a VariableSizeList with a measurement
+       cache to recompute, so use a function rowHeight here. */
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    const api = ref.current;
+    const reset = jest.spyOn(api.list.current, "resetAfterIndex");
+    act(() => api.close("1"));
+    expect(reset).toHaveBeenCalled();
+    reset.mockClear();
+    act(() => api.open("1"));
+    expect(reset).toHaveBeenCalled();
+});
+/* react-window caches measurements by index and never invalidates them itself.
+   When data changes via props in variable-height mode, those cached sizes belong
+   to the wrong rows, so update() must drop the cache. It runs during render, so
+   it uses the shouldForceUpdate=false variant. */
+test("changing data in variable-height mode resets the list cache (#238)", () => {
+    const ref = createRef();
+    const rowHeight = (node) => (node.isInternal ? 40 : 20);
+    const { rerender } = render(_jsx(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];
+    act(() => {
+        rerender(_jsx(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 = createRef();
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: true }));
+    const list = ref.current.list.current;
+    expect(list).toBeInstanceOf(FixedSizeList);
+    expect("resetAfterIndex" in list).toBe(false);
+});
+/* The function path uses VariableSizeList so per-row heights are possible. */
+test("function rowHeight renders a VariableSizeList (#238)", () => {
+    const ref = createRef();
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: () => 24, openByDefault: true }));
+    expect(ref.current.list.current).toBeInstanceOf(VariableSizeList);
+});

package/dist/module/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/module/components/row-container.js

@@ -4,7 +4,7 @@ import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
 import { useDragHook } from "../dnd/drag-hook";
 import { useDropHook } from "../dnd/drop-hook";
 import { useFreshNode } from "../hooks/use-fresh-node";
-export const RowContainer = React.memo(function RowContainer({ index, style, }) {
+export const RowContainer = React.memo(function RowContainer({ index, style }) {
     /* When will the <Row> will re-render.
      *
      * The row component is memo'd so it will only render
@@ -35,8 +35,7 @@ export const RowContainer = React.memo(function RowContainer({ index, style, })
     const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
     const rowStyle = 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/module/dnd/compute-drop.js

@@ -1,4 +1,4 @@
-import { bound, indexOf, isClosed, isItem, isOpenWithEmptyChildren, } from "../utils";
+import { bound, indexOf, isClosed, isItem, isOpenWithEmptyChildren } from "../utils";
 function measureHover(el, offset) {
     const rect = el.getBoundingClientRect();
     const x = offset.x - Math.round(rect.x);

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

@@ -17,6 +17,7 @@ export function useDragHook(node) {
         },
         end: () => {
             tree.hideCursor();
+            tree.redrawList();
             tree.dispatch(dnd.dragEnd());
         },
     }), [ids, node]);

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

@@ -3,8 +3,7 @@ export 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/module/index.d.ts

@@ -1,4 +1,7 @@
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

package/dist/module/index.js

@@ -1,5 +1,8 @@
 /* The Public Api */
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

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

@@ -3,7 +3,10 @@ export 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/module/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;