@1771technologies/lytenyte-pro 1.0.11 → 1.0.12-dev.1

package/dist/tree-view/root.d.ts

@@ -1,17 +0,0 @@
-import { type PropsWithChildren, type Ref } from "react";
-export interface TreeRootProps {
-    readonly transitionEnter?: number;
-    readonly transitionExit?: number;
-    readonly gridWrappedBranches?: boolean;
-    readonly expansions?: Record<string, boolean>;
-    readonly expansionDefault?: boolean;
-    readonly onExpansionChange?: (n: Record<string, boolean>) => void;
-    readonly selectMode?: "single" | "multiple" | "none";
-    readonly selection?: Set<string>;
-    readonly onSelectionChange?: (c: Set<string>) => void;
-    readonly onFocusChange?: (el: HTMLElement | null) => void;
-    readonly getAllIds?: (panel: HTMLElement) => Set<string>;
-    readonly getIdsBetweenNodes?: (start: HTMLElement, end: HTMLElement, panel: HTMLElement) => string[];
-    readonly ref?: Ref<HTMLElement | null>;
-}
-export declare const TreeRoot: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TreeRootProps>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/tree-view/root.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef, useState } from "react";
-import { context } from "./context.js";
-import { useCombinedRefs, useEvent } from "@1771technologies/lytenyte-react-hooks";
-import { getAllIds } from "./navigation/get-all-ids.js";
-import { getIdsBetweenNodes } from "./utils/get-ids-between-nodes.js";
-export const TreeRoot = forwardRef((p, forwarded) => {
-    const [panel, setPanel] = useState(null);
-    const [expansions, onExpansionChange] = useState({});
-    const [selection, setSelections] = useState(() => new Set());
-    const ref = useCombinedRefs(setPanel, forwarded);
-    const selectionPivotRef = useRef(null);
-    const allIds = useEvent((el) => {
-        if (p.getAllIds)
-            return p.getAllIds(el);
-        return getAllIds(el);
-    });
-    const idsBetween = useEvent((left, right, panel) => {
-        if (p.getIdsBetweenNodes)
-            return p.getIdsBetweenNodes(left, right, panel);
-        return getIdsBetweenNodes(left, right, panel);
-    });
-    const onFocusChange = useEvent((el) => {
-        p.onFocusChange?.(el);
-    });
-    const value = useMemo(() => {
-        return {
-            panel,
-            panelRef: ref,
-            selectionMode: p.selectMode ?? "single",
-            transitionEnterMs: p.transitionEnter ?? 0,
-            transitionExitMs: p.transitionExit ?? 0,
-            gridWrappedBranches: p.gridWrappedBranches ?? false,
-            expansions: p.expansions ?? expansions,
-            onExpansionChange: p.onExpansionChange ?? onExpansionChange,
-            selection: p.selection ?? selection,
-            onSelectionChange: p.onSelectionChange ?? setSelections,
-            selectionPivotRef,
-            expansionDefault: p.expansionDefault ?? false,
-            onFocusChange,
-            getAllIds: allIds,
-            getIdsBetweenNodes: idsBetween,
-        };
-    }, [
-        allIds,
-        expansions,
-        idsBetween,
-        onFocusChange,
-        p.expansionDefault,
-        p.expansions,
-        p.gridWrappedBranches,
-        p.onExpansionChange,
-        p.onSelectionChange,
-        p.selectMode,
-        p.selection,
-        p.transitionEnter,
-        p.transitionExit,
-        panel,
-        ref,
-        selection,
-    ]);
-    return _jsx(context.Provider, { value: value, children: p.children });
-});

package/dist/tree-view/utils/get-focusable-nodes.d.ts

@@ -1 +0,0 @@
-export declare function getFocusableNodes(panel: HTMLElement): HTMLElement[];

package/dist/tree-view/utils/get-focusable-nodes.js

@@ -1,5 +0,0 @@
-import { getFocusables, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
-export function getFocusableNodes(panel) {
-    const focusNodes = getFocusables(panel).filter((c) => isHTMLElement(c) && c.getAttribute("data-ln-tree-node") === "true");
-    return focusNodes;
-}

package/dist/tree-view/utils/get-focused-node.d.ts

@@ -1 +0,0 @@
-export declare function getFocusedNode(): HTMLElement | null;

package/dist/tree-view/utils/get-focused-node.js

@@ -1,14 +0,0 @@
-import { isLastTraversableNode } from "@1771technologies/lytenyte-dom-utils";
-export function getFocusedNode() {
-    if (!document.activeElement)
-        return null;
-    let current = document.activeElement;
-    while (current &&
-        !isLastTraversableNode(current) &&
-        current.getAttribute("data-ln-tree-node") !== "true") {
-        current = current.parentElement;
-    }
-    if (current?.getAttribute("data-ln-tree-node"))
-        return current;
-    return null;
-}

package/dist/tree-view/utils/get-ids-between-nodes.d.ts

@@ -1 +0,0 @@
-export declare function getIdsBetweenNodes(start: HTMLElement, end: HTMLElement, panel: HTMLElement): string[];

package/dist/tree-view/utils/get-ids-between-nodes.js

@@ -1,15 +0,0 @@
-import { getFocusableNodes } from "./get-focusable-nodes.js";
-import { getTreeNodeId } from "./get-tree-node-id.js";
-export function getIdsBetweenNodes(start, end, panel) {
-    const focusables = getFocusableNodes(panel);
-    let startIndex = focusables.indexOf(start);
-    let endIndex = focusables.indexOf(end);
-    if (startIndex == -1 || endIndex == -1)
-        return [];
-    [startIndex, endIndex] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
-    const ids = [];
-    for (let i = startIndex; i <= endIndex; i++) {
-        ids.push(getTreeNodeId(focusables[i]));
-    }
-    return ids;
-}

package/dist/tree-view/utils/get-panel.d.ts

@@ -1 +0,0 @@
-export declare function getPanel(el: HTMLElement): HTMLElement | null;

package/dist/tree-view/utils/get-panel.js

@@ -1,7 +0,0 @@
-export function getPanel(el) {
-    let current = el;
-    while (current && !current.getAttribute("data-ln-tree-panel")) {
-        current = current.parentElement;
-    }
-    return current;
-}

package/dist/tree-view/utils/get-parent-node.d.ts

@@ -1 +0,0 @@
-export declare function getParentNode(el: HTMLElement): HTMLElement | null;

package/dist/tree-view/utils/get-parent-node.js

@@ -1,10 +0,0 @@
-import { isBranchNode } from "./is-branch-node.js";
-export function getParentNode(el) {
-    let current = el.parentElement;
-    while (current && !current.getAttribute("data-ln-tree-panel") && !isBranchNode(current)) {
-        current = current.parentElement;
-    }
-    if (current?.getAttribute("data-ln-tree-panel"))
-        return null;
-    return current;
-}

package/dist/tree-view/utils/get-sibling-branches.d.ts

@@ -1 +0,0 @@
-export declare function getSiblingBranches(el: HTMLElement): HTMLElement[] | undefined;

package/dist/tree-view/utils/get-sibling-branches.js

@@ -1,14 +0,0 @@
-import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
-import { isBranchNode } from "./is-branch-node.js";
-export function getSiblingBranches(el) {
-    const children = el.parentElement?.children;
-    if (!children)
-        return;
-    const branchSiblings = [];
-    for (let i = 0; i < children.length; i++) {
-        const node = children[i];
-        if (isHTMLElement(node) && isBranchNode(node))
-            branchSiblings.push(node);
-    }
-    return branchSiblings;
-}

package/dist/tree-view/utils/get-tree-node-id.d.ts

@@ -1 +0,0 @@
-export declare function getTreeNodeId(el: HTMLElement): string;

package/dist/tree-view/utils/get-tree-node-id.js

@@ -1,3 +0,0 @@
-export function getTreeNodeId(el) {
-    return el.getAttribute("data-ln-tree-id") ?? "";
-}

package/dist/tree-view/utils/is-branch-node.d.ts

@@ -1 +0,0 @@
-export declare function isBranchNode(el: HTMLElement): boolean;

package/dist/tree-view/utils/is-branch-node.js

@@ -1,3 +0,0 @@
-export function isBranchNode(el) {
-    return el.getAttribute("data-ln-tree-branch") === "true";
-}

package/dist/tree-view/utils/is-leaf-node.d.ts

@@ -1 +0,0 @@
-export declare function isLeafNode(el: HTMLElement): boolean;

package/dist/tree-view/utils/is-leaf-node.js

@@ -1,3 +0,0 @@
-export function isLeafNode(el) {
-    return el.getAttribute("data-ln-tree-leaf") === "true";
-}

package/dist/tree-view/utils/is-tree-node-disabled.d.ts

@@ -1 +0,0 @@
-export declare function isTreeNodeDisabled(el: HTMLElement): boolean;

package/dist/tree-view/utils/is-tree-node-disabled.js

@@ -1,3 +0,0 @@
-export function isTreeNodeDisabled(el) {
-    return el.getAttribute("data-ln-tree-node-disabled") === "true";
-}

package/dist/tree-view/utils/select-node.d.ts

@@ -1,2 +0,0 @@
-import type { TreeViewRootContext } from "../context.js";
-export declare function selectNode(node: HTMLElement | null | undefined, ctx: TreeViewRootContext, focus?: boolean): void;

package/dist/tree-view/utils/select-node.js

@@ -1,15 +0,0 @@
-import { getTreeNodeId } from "./get-tree-node-id.js";
-import { isTreeNodeDisabled } from "./is-tree-node-disabled.js";
-export function selectNode(node, ctx, focus) {
-    if (!node || isTreeNodeDisabled(node))
-        return;
-    if (focus)
-        node.focus();
-    const id = getTreeNodeId(node);
-    if (ctx.selection.has(id))
-        return;
-    ctx.selectionPivotRef.current = id;
-    const next = new Set(ctx.selection);
-    next.add(id);
-    ctx.onSelectionChange(next);
-}

package/dist/tree-view/utils/toggle-all-selections.d.ts

@@ -1,2 +0,0 @@
-import type { TreeViewRootContext } from "../context.js";
-export declare function toggleAllSelections(ctx: TreeViewRootContext): void;

package/dist/tree-view/utils/toggle-all-selections.js

@@ -1,9 +0,0 @@
-import { getAllIds } from "../navigation/get-all-ids.js";
-export function toggleAllSelections(ctx) {
-    const allIds = getAllIds(ctx.panel);
-    const selection = ctx.selection;
-    if (allIds.isSubsetOf(selection))
-        ctx.onSelectionChange(new Set());
-    else
-        ctx.onSelectionChange(allIds);
-}

package/dist/tree-view/utils/toggle-selection.d.ts

@@ -1,2 +0,0 @@
-import type { TreeViewRootContext } from "../context.js";
-export declare function toggleSelection(el: HTMLElement, ctx: TreeViewRootContext): void;

package/dist/tree-view/utils/toggle-selection.js

@@ -1,21 +0,0 @@
-import { getTreeNodeId } from "./get-tree-node-id.js";
-export function toggleSelection(el, ctx) {
-    const id = getTreeNodeId(el);
-    if (ctx.selectionMode === "single") {
-        if (ctx.selection.has(id))
-            ctx.onSelectionChange(new Set());
-        else
-            ctx.onSelectionChange(new Set([id]));
-        return;
-    }
-    const next = new Set(ctx.selection);
-    if (next.has(id)) {
-        next.delete(id);
-        ctx.selectionPivotRef.current = null;
-    }
-    else {
-        next.add(id);
-        ctx.selectionPivotRef.current = id;
-    }
-    ctx.onSelectionChange(next);
-}

package/dist/tree-view/virtualized/force-sync-scrolling.d.ts

@@ -1,2 +0,0 @@
-import { type PropsWithChildren } from "react";
-export declare function ForceSyncScrolling(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/tree-view/virtualized/force-sync-scrolling.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { useTreeRoot } from "../context.js";
-export function ForceSyncScrolling(props) {
-    const [scroll, setScroll] = useState(0);
-    const ctx = useTreeRoot();
-    useEffect(() => {
-        if (!ctx.panel)
-            return;
-        const controller = new AbortController();
-        ctx.panel.addEventListener("scroll", () => {
-            setScroll(Math.max(0, ctx.panel.scrollTop));
-        }, { signal: controller.signal });
-        return () => controller.abort();
-    }, [ctx.panel]);
-    return (_jsx("div", { style: {
-            position: "sticky",
-            top: 0,
-            height: 0,
-            width: "100%",
-            transform: `translate3d(0px, -${scroll}px, 0px)`,
-        }, children: props.children }));
-}

package/dist/tree-view/virtualized/get-virtual-tree-paths.d.ts

@@ -1,2 +0,0 @@
-import type { PathBranch, PathLeaf, PathProvidedItem } from "@1771technologies/lytenyte-shared";
-export declare function buildVirtualTreePartial<T extends PathProvidedItem>(items: (PathBranch<T> | PathLeaf<T>)[]): [string[], PathBranch<T> | PathLeaf<T>][];

package/dist/tree-view/virtualized/get-virtual-tree-paths.js

@@ -1,14 +0,0 @@
-export function buildVirtualTreePartial(items) {
-    const paths = items.map((c) => {
-        if (c.kind === "leaf") {
-            const parent = c.parent;
-            if (parent.kind === "root")
-                return ["", c];
-            const path = parent.id.split("#");
-            return [path, c];
-        }
-        const path = c.id.split("#");
-        return [path, c];
-    });
-    return paths;
-}

package/dist/tree-view/virtualized/make-virtual-tree.d.ts

@@ -1,31 +0,0 @@
-import type { PathBranch, PathLeaf, PathProvidedItem } from "@1771technologies/lytenyte-shared";
-import type { CSSProperties } from "react";
-export interface TreeVirtualBranch<T extends PathProvidedItem> {
-    readonly kind: "branch";
-    readonly path: string;
-    readonly branch: PathBranch<T>;
-    readonly children: TreeVirtualItem<T>[];
-    readonly rowIndex: number;
-    readonly attrs: {
-        readonly style: CSSProperties;
-        "data-ln-row-index": number;
-        readonly "aria-posinset": number;
-        readonly "aria-setsize": number;
-    };
-}
-export interface TreeVirtualLeaf<T extends PathProvidedItem> {
-    readonly kind: "leaf";
-    readonly leaf: PathLeaf<T>;
-    readonly rowIndex: number;
-    readonly attrs: {
-        readonly style: CSSProperties;
-        "data-ln-row-index": number;
-        readonly "aria-posinset": number;
-        readonly "aria-setsize": number;
-    };
-}
-export type TreeVirtualItem<T extends PathProvidedItem> = TreeVirtualBranch<T> | TreeVirtualLeaf<T>;
-type Path = string[];
-type PathEntry<T extends PathProvidedItem> = [Path | "", PathBranch<T> | PathLeaf<T>];
-export declare function makeVirtualTree<T extends PathProvidedItem>(paths: PathEntry<T>[], nodeToIndex: Map<PathBranch<T> | PathLeaf<T>, number>, itemHeight: number, nonAdjacentPathTrees: boolean): TreeVirtualItem<T>[];
-export {};

package/dist/tree-view/virtualized/make-virtual-tree.js

@@ -1,90 +0,0 @@
-export function makeVirtualTree(paths, nodeToIndex, itemHeight, nonAdjacentPathTrees) {
-    const root = [];
-    const lookup = new Map();
-    for (const [rawPath, node] of paths) {
-        const path = typeof rawPath === "string" ? [] : rawPath;
-        if (nonAdjacentPathTrees)
-            path.pop();
-        const joinPath = path.join("#");
-        if (node.kind === "branch") {
-            const rowIndex = nodeToIndex.get(node);
-            const parentIndex = node.parent.kind === "root" ? 0 : nodeToIndex.get(node.parent);
-            const posinset = rowIndex - parentIndex + 1;
-            const setSize = node.parent.children.size;
-            const branchNode = {
-                kind: "branch",
-                path: joinPath,
-                branch: node,
-                children: [],
-                rowIndex,
-                attrs: {
-                    style: {
-                        position: "absolute",
-                        height: itemHeight,
-                        width: "100%",
-                        boxSizing: "border-box",
-                        top: 0,
-                        left: 0,
-                        transform: `translate3d(0px, ${(posinset - 1) * itemHeight}px, 0px)`,
-                    },
-                    "data-ln-row-index": rowIndex,
-                    "aria-posinset": posinset,
-                    "aria-setsize": setSize,
-                },
-            };
-            lookup.set(joinPath, branchNode);
-            if (path.length === 0) {
-                root.push(branchNode);
-            }
-            else {
-                const parentPath = path.slice(0, -1).join("#");
-                const parent = lookup.get(parentPath);
-                if (parent) {
-                    parent.children.push(branchNode);
-                }
-                else {
-                    root.push(branchNode); // fallback
-                }
-            }
-        }
-        else {
-            const rowIndex = nodeToIndex.get(node);
-            const parentIndex = node.parent.kind === "root" ? 0 : nodeToIndex.get(node.parent);
-            const posinset = rowIndex - parentIndex + 1;
-            const setSize = node.parent.children.size;
-            const leafNode = {
-                kind: "leaf",
-                leaf: node,
-                rowIndex,
-                attrs: {
-                    style: {
-                        position: "absolute",
-                        height: itemHeight,
-                        boxSizing: "border-box",
-                        width: "100%",
-                        top: 0,
-                        left: 0,
-                        transform: `translate3d(0px, ${(posinset - 1) * itemHeight}px, 0px)`,
-                    },
-                    "data-ln-row-index": rowIndex,
-                    "aria-posinset": posinset,
-                    "aria-setsize": setSize,
-                },
-            };
-            if (path.length === 0) {
-                root.push(leafNode); // top-level leaf
-            }
-            else {
-                const parentPath = path.join("#");
-                const parent = lookup.get(parentPath);
-                if (parent) {
-                    parent.children.push(leafNode);
-                }
-                else {
-                    root.push(leafNode); // fallback
-                }
-            }
-        }
-    }
-    return root;
-}

package/dist/tree-view/virtualized/use-flattened-tree.d.ts

@@ -1,9 +0,0 @@
-import { type PathBranch, type PathLeaf, type PathProvidedItem } from "@1771technologies/lytenyte-shared";
-export declare function useFlattenedTree<T extends PathProvidedItem>(paths: T[], expansions: Record<string, boolean>, expansionDefault: boolean, nonAdjacentPathTrees?: boolean): {
-    flat: (PathBranch<T> | PathLeaf<T>)[];
-    nodeToIndex: Map<PathBranch<T> | PathLeaf<T>, number>;
-    indexToId: Map<number, string>;
-    allIds: Set<string>;
-    idToNode: Map<string, PathBranch<T> | PathLeaf<T>>;
-    root: import("@1771technologies/lytenyte-shared").PathRoot<T>;
-};

package/dist/tree-view/virtualized/use-flattened-tree.js

@@ -1,36 +0,0 @@
-import { computePathTree, } from "@1771technologies/lytenyte-shared";
-import { useMemo } from "react";
-export function useFlattenedTree(paths, expansions, expansionDefault, nonAdjacentPathTrees) {
-    const { flat, nodeToIndex, indexToId, allIds, idToNode, root } = useMemo(() => {
-        const root = computePathTree(paths, undefined, nonAdjacentPathTrees);
-        const flat = [];
-        const nodeToIndex = new Map();
-        const stack = [...root.children.values()];
-        const allIds = new Set();
-        const indexToId = new Map();
-        const idToNode = new Map();
-        let index = 0;
-        while (stack.length) {
-            const item = stack.shift();
-            if (item.kind === "leaf") {
-                flat.push(item);
-            }
-            else {
-                flat.push(item);
-                const isExpanded = expansions[item.id] ?? expansionDefault;
-                if (isExpanded) {
-                    const children = [...item.children.values()];
-                    stack.unshift(...children);
-                }
-            }
-            const id = item.kind === "branch" ? item.data.idOccurrence : item.data.id;
-            allIds.add(id);
-            indexToId.set(index, id);
-            nodeToIndex.set(item, index);
-            idToNode.set(id, item);
-            index++;
-        }
-        return { flat, nodeToIndex, indexToId, allIds, idToNode, root };
-    }, [expansionDefault, expansions, nonAdjacentPathTrees, paths]);
-    return { flat, nodeToIndex, indexToId, allIds, idToNode, root };
-}

package/dist/tree-view/virtualized/use-row-start-and-end.d.ts

@@ -1,2 +0,0 @@
-import type { RectReadOnly } from "@1771technologies/lytenyte-react-hooks";
-export declare function useRowStartAndEnd(panel: HTMLElement | null | undefined, itemHeight: number, bounds: RectReadOnly, size: number): number[];

package/dist/tree-view/virtualized/use-row-start-and-end.js

@@ -1,27 +0,0 @@
-import { clamp } from "@1771technologies/lytenyte-js-utils";
-import { useEffect, useMemo, useState } from "react";
-export function useRowStartAndEnd(panel, itemHeight, bounds, size) {
-    const [startOffset, setStartOffset] = useState(0);
-    const [rowStart, rowEnd] = useMemo(() => {
-        if (!panel)
-            return [0, 0];
-        const start = startOffset;
-        const end = start + Math.ceil(bounds.height / itemHeight) + 1;
-        return [clamp(0, start - 3, size), clamp(0, end + 3, size)];
-    }, [bounds.height, itemHeight, panel, size, startOffset]);
-    useEffect(() => {
-        if (!panel)
-            return;
-        const handleViewChange = () => {
-            const scrollTop = panel.scrollTop;
-            const start = Math.floor(scrollTop / itemHeight);
-            setStartOffset(start);
-        };
-        handleViewChange();
-        panel.addEventListener("scroll", handleViewChange);
-        return () => {
-            panel.removeEventListener("scroll", handleViewChange);
-        };
-    }, [itemHeight, panel]);
-    return [rowStart, rowEnd];
-}

package/dist/tree-view/virtualized/use-virtualized-tree.d.ts

@@ -1,22 +0,0 @@
-import { type PathProvidedItem, type PathRoot } from "@1771technologies/lytenyte-shared";
-import { type JSX } from "react";
-import { type TreeVirtualItem } from "./make-virtual-tree.js";
-export interface VirtualizedTreeViewPathsArgs<T extends PathProvidedItem> {
-    readonly itemHeight: number;
-    readonly expansions: Record<string, boolean>;
-    readonly expansionDefault?: boolean;
-    readonly paths: T[];
-    readonly nonAdjacentPathTrees?: boolean;
-}
-export interface TreeReturn<T extends PathProvidedItem> {
-    readonly ref: (h: HTMLElement | null) => void;
-    readonly virtualTree: TreeVirtualItem<T>[];
-    readonly spacer: JSX.Element;
-    readonly rootProps: {
-        readonly getAllIds: () => Set<string>;
-        readonly getIdsBetweenNodes: (h: HTMLElement, r: HTMLElement) => string[];
-        readonly onFocusChange: (h: HTMLElement | null) => void;
-        readonly root: PathRoot<T>;
-    };
-}
-export declare function useVirtualizedTree<T extends PathProvidedItem>({ itemHeight, expansions, expansionDefault, nonAdjacentPathTrees, paths, }: VirtualizedTreeViewPathsArgs<T>): TreeReturn<T>;

package/dist/tree-view/virtualized/use-virtualized-tree.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import {} from "@1771technologies/lytenyte-shared";
-import { useEvent, useMeasure } from "@1771technologies/lytenyte-react-hooks";
-import { useMemo, useState } from "react";
-import { buildVirtualTreePartial } from "./get-virtual-tree-paths.js";
-import { makeVirtualTree } from "./make-virtual-tree.js";
-import { useFlattenedTree } from "./use-flattened-tree.js";
-import { useRowStartAndEnd } from "./use-row-start-and-end.js";
-import { getTreeNodeId } from "../utils/get-tree-node-id.js";
-export function useVirtualizedTree({ itemHeight, expansions, expansionDefault = false, nonAdjacentPathTrees, paths, }) {
-    const [ref, bounds, _, panel] = useMeasure({ scroll: true });
-    const { flat, nodeToIndex, indexToId, allIds, idToNode, root } = useFlattenedTree(paths, expansions, expansionDefault, nonAdjacentPathTrees);
-    const size = useMemo(() => flat.length, [flat.length]);
-    const [rowStart, rowEnd] = useRowStartAndEnd(panel, itemHeight, bounds, size);
-    const [focused, setFocused] = useState(null);
-    const virtualTree = useMemo(() => {
-        const items = flat.slice(rowStart, rowEnd);
-        if (!items.length)
-            return [];
-        // Ensure that the parent nodes of the current tree in view are added as well. This ensure that
-        // the nodes are always visible.
-        while (items[0].parent.kind !== "root") {
-            items.unshift(items[0].parent);
-        }
-        // Ensure that the first node is always in the list of tree nodes so the home key works fine.
-        if (rowStart !== 0 && items[0] !== flat[0])
-            items.unshift(flat[0]);
-        // Ensure the last node is always in the list of nodes present.
-        if (rowEnd !== flat.length) {
-            const endItems = [flat.at(-1)];
-            while (endItems[0].parent.kind !== "root" && endItems[0].parent !== items.at(-1)) {
-                endItems.unshift(endItems[0].parent);
-            }
-            items.push(...endItems);
-        }
-        // Finally we need to ensure the focused node is present. We add the node before and after
-        // the current node - so that the next and previous node are selectable.
-        if (focused && idToNode.has(focused)) {
-            const node = idToNode.get(focused);
-            const index = nodeToIndex.get(node);
-            const nextId = indexToId.get(index + 1);
-            const prevId = indexToId.get(index - 1);
-            const next = idToNode.get(nextId);
-            const prev = idToNode.get(prevId);
-            if (!items.includes(node)) {
-                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index);
-                items.splice(firstIndexGreater, 0, node);
-            }
-            if (next && !items.includes(next)) {
-                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index + 1);
-                items.splice(firstIndexGreater, 0, next);
-            }
-            if (prev && !items.includes(prev)) {
-                const firstIndexGreater = items.findIndex((c) => nodeToIndex.get(c) > index - 1);
-                items.splice(firstIndexGreater, 0, prev);
-            }
-        }
-        const subtreePaths = buildVirtualTreePartial(items);
-        const subtree = makeVirtualTree(subtreePaths, nodeToIndex, itemHeight, nonAdjacentPathTrees ?? false);
-        return subtree;
-    }, [
-        flat,
-        focused,
-        idToNode,
-        indexToId,
-        itemHeight,
-        nodeToIndex,
-        nonAdjacentPathTrees,
-        rowEnd,
-        rowStart,
-    ]);
-    const spacer = _jsx("div", { style: { height: size * itemHeight, width: 0 } });
-    const onFocusChange = useEvent((el) => {
-        setFocused(el ? getTreeNodeId(el) : null);
-    });
-    const getAllIds = useEvent(() => allIds);
-    const getIdsBetweenNodes = useEvent((left, right) => {
-        const leftIndex = Number.parseInt(left.getAttribute("data-ln-row-index"));
-        const rightIndex = Number.parseInt(right.getAttribute("data-ln-row-index"));
-        const [start, end] = leftIndex < rightIndex ? [leftIndex, rightIndex] : [rightIndex, leftIndex];
-        if (start === end)
-            return [indexToId.get(start)];
-        const ids = [];
-        for (let i = start; i <= end; i++) {
-            ids.push(indexToId.get(i));
-        }
-        return ids;
-    });
-    return {
-        ref,
-        virtualTree,
-        spacer,
-        rootProps: {
-            getAllIds,
-            getIdsBetweenNodes,
-            onFocusChange,
-            root,
-        },
-    };
-}