@itwin/components-react 4.0.0-dev.3 → 4.0.0-dev.6

package/lib/esm/components-react/breadcrumb/BeInspireTree.js

@@ -0,0 +1,892 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tree
+ */
+import { CallableInstance } from "callable-instance2/import";
+import InspireTree from "inspire-tree";
+import { isArrayLike } from "lodash";
+import { using } from "@itwin/core-bentley";
+import { UiError } from "@itwin/appui-abstract";
+import { CheckBoxState, isPromiseLike } from "@itwin/core-react";
+import { UiComponents } from "../UiComponents";
+// istanbul ignore file
+/**
+ * Enum containing all events that may be emitted by [[BeInspireTree]]
+ * @internal
+ */
+export var BeInspireTreeEvent;
+(function (BeInspireTreeEvent) {
+    BeInspireTreeEvent["ChangesApplied"] = "changes.applied";
+    BeInspireTreeEvent["ChildrenLoaded"] = "children.loaded";
+    BeInspireTreeEvent["DataLoaded"] = "data.loaded";
+    BeInspireTreeEvent["DataLoadError"] = "data.loaderror";
+    BeInspireTreeEvent["ModelLoaded"] = "model.loaded";
+    BeInspireTreeEvent["NodeAdded"] = "node.added";
+    BeInspireTreeEvent["NodeBlurred"] = "node.blurred";
+    BeInspireTreeEvent["NodeChecked"] = "node.checked";
+    BeInspireTreeEvent["NodeCollapsed"] = "node.collapsed";
+    BeInspireTreeEvent["NodeDeselected"] = "node.deselected";
+    BeInspireTreeEvent["NodeEdited"] = "node.edited";
+    BeInspireTreeEvent["NodeExpanded"] = "node.expanded";
+    BeInspireTreeEvent["NodeFocused"] = "node.focused";
+    BeInspireTreeEvent["NodeHidden"] = "node.hidden";
+    BeInspireTreeEvent["NodeMoved"] = "node.moved";
+    BeInspireTreeEvent["NodePaginated"] = "node.paginated";
+    BeInspireTreeEvent["NodeRemoved"] = "node.removed";
+    BeInspireTreeEvent["NodeSelected"] = "node.selected";
+    BeInspireTreeEvent["NodeShown"] = "node.shown";
+    BeInspireTreeEvent["NodeUnchecked"] = "node.unchecked";
+})(BeInspireTreeEvent || (BeInspireTreeEvent = {}));
+/**
+ * A context which keeps [[BeInspireTree]] events muted until
+ * it gets disposed.
+ * @internal
+ */
+export class EventsMuteContext {
+    constructor(_events, _mute, _unmute, _emit, _listen, allowedEventTriggersBeforeMute = 0) {
+        this._events = _events;
+        this._mute = _mute;
+        this._unmute = _unmute;
+        this._emit = _emit;
+        this._listen = _listen;
+        this._triggeredEventsCount = 0;
+        this._didMute = false;
+        this.init(allowedEventTriggersBeforeMute);
+    }
+    init(allowedEventTriggersBeforeMute) {
+        if (0 === allowedEventTriggersBeforeMute || !this._listen) {
+            this._mute(this._events);
+            this._didMute = true;
+            return;
+        }
+        const callback = () => {
+            if (++this._triggeredEventsCount >= allowedEventTriggersBeforeMute) {
+                this._mute(this._events);
+                this._didMute = true;
+                // istanbul ignore else
+                if (this._stopListening) {
+                    this._stopListening();
+                    this._stopListening = undefined;
+                }
+            }
+        };
+        this._stopListening = this._listen(this._events, callback);
+    }
+    dispose() {
+        if (this._stopListening) {
+            this._stopListening();
+            this._stopListening = undefined;
+        }
+        if (!this._didMute)
+            return;
+        const didUnmute = this._unmute(this._events);
+        if (didUnmute && this._emit)
+            this._emit(this._events);
+    }
+}
+/**
+ * Bentley wrapper for 'inspire-tree'
+ * @internal
+ */
+export class BeInspireTree {
+    constructor(props) {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.doMute = (events) => {
+            events.forEach((ev) => {
+                if (!this._eventMutes.has(ev))
+                    this._eventMutes.set(ev, 1);
+                else
+                    this._eventMutes.set(ev, this._eventMutes.get(ev) + 1);
+            });
+            if (typeof this._tree.muted() !== "boolean")
+                this._tree.mute(events.concat(this._tree.muted()));
+            else
+                this._tree.mute(events);
+        };
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.doUnmute = (events) => {
+            const eventsToUnmute = events.filter((ev) => {
+                let mutesCount = this._eventMutes.get(ev);
+                if (mutesCount === undefined || mutesCount === 0)
+                    return false;
+                this._eventMutes.set(ev, --mutesCount);
+                return (mutesCount === 0);
+            });
+            this._tree.unmute(eventsToUnmute);
+            return (eventsToUnmute.length > 0);
+        };
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.doEmit = (events) => {
+            events.forEach((e) => this._tree.emit(e));
+        };
+        this.props = props;
+        this._eventMutes = new Map();
+        const wrappedProvider = wrapDataProvider(this, props.dataProvider, props.mapPayloadToInspireNodeConfig);
+        if (wrappedProvider instanceof WrappedInterfaceProvider)
+            this._deferredLoadingHandler = wrappedProvider;
+        const config = {
+            data: wrappedProvider,
+            selection: {
+                multiple: true,
+                autoDeselect: false,
+            },
+        };
+        this._tree = new InspireTree(config);
+        // make sure nodes are dirty when they're loaded
+        this.on(BeInspireTreeEvent.ModelLoaded, (model) => {
+            model.forEach((n) => n.markDirty());
+        });
+        this.on(BeInspireTreeEvent.ChildrenLoaded, (parent) => {
+            parent.getChildren().forEach((n) => n.markDirty());
+        });
+        // dispose `visible` cache when data is loaded or nodes are expanded or collapsed
+        this.on([BeInspireTreeEvent.DataLoaded, BeInspireTreeEvent.NodeCollapsed, BeInspireTreeEvent.NodeExpanded], () => {
+            this._visibleCached = undefined;
+        });
+        // we want to allow consumers of `BeInspireTree` to listen for `ModelLoaded`
+        // and `ChildrenLoaded` events and do any kind of manipulation with them **before**
+        // `ChangesApplied` event is emitted, so we have to suspend rendering when data is loaded
+        // and resume it in `*Loaded` listener.
+        this.on(BeInspireTreeEvent.DataLoaded, () => {
+            this._suspendedRendering = this.pauseRendering();
+        });
+        this.on([BeInspireTreeEvent.ModelLoaded, BeInspireTreeEvent.ChildrenLoaded], () => {
+            // NODES_LOADED_LAST_LISTENER: this listener must be executed last of all ModelLoaded and ChildrenLoaded
+            // listeners to avoid excessive re-renders
+            // istanbul ignore else
+            if (this._suspendedRendering) {
+                this._suspendedRendering.dispose();
+                this._suspendedRendering = undefined;
+            }
+        });
+        // override the `load` function to handle auto-expanding nodes
+        // note: tree starts loading as soon as it gets created, so the first load
+        // is not using this override - in that case auto-expansion is handled
+        // in `onModelInvalidated` function
+        const baseTreeLoad = this._tree.load;
+        this._tree.load = async (loader) => {
+            const result = await baseTreeLoad.call(this._tree, loader);
+            await using(this.pauseRendering(), async (_r) => {
+                await ensureNodesAutoExpanded(result);
+            });
+            return result;
+        };
+        // assign `disposeChildrenOnCollapse` handler if needed
+        if (props.disposeChildrenOnCollapse) {
+            if (!isDeferredDataProvider(props.dataProvider))
+                throw new UiError(UiComponents.loggerCategory(this), `Property 'disposeChildrenOnCollapse' is only available on deferred data providers`);
+            this.on(BeInspireTreeEvent.NodeCollapsed, (node) => {
+                if (this._deferredLoadingHandler)
+                    this._deferredLoadingHandler.disposeNodeCaches(node);
+                node.children = true;
+            });
+        }
+        // invalidate our `ready` promise
+        this.onModelInvalidated();
+    }
+    onModelInvalidated() {
+        this._readyPromise = new Promise((resolve) => {
+            this._tree.once([BeInspireTreeEvent.ModelLoaded], resolve);
+        }).then(async () => {
+            // note: the following is only needed for the initial load of the tree
+            // when our `load` override isn't assigned yet
+            await using(this.pauseRendering(), async (_r) => {
+                await ensureNodesAutoExpanded(this._tree.nodes());
+            });
+        });
+    }
+    get ready() { return this._readyPromise; }
+    /**
+     * Stop emitting the specified events until the returned
+     * [[EventsMuteContext]] object is disposed
+     */
+    mute(events) {
+        return new EventsMuteContext(events, this.doMute, this.doUnmute);
+    }
+    /**
+     * Stop calling the renderer method until the returned
+     * object is disposed. When that happens, the [[BeInspireTreeEvent.ChangesApplied]]
+     * event is emitted if any changes in the hierarchy happened during the pause
+     */
+    pauseRendering(allowedRendersBeforePause = 0) {
+        const doEmit = (events) => {
+            if (this.visible().some((n) => n.isDirty())) {
+                this.doEmit(events);
+            }
+        };
+        const doListen = (events, listener) => {
+            this.on(events, listener);
+            return () => this._tree.removeListener(events, listener);
+        };
+        return new EventsMuteContext([BeInspireTreeEvent.ChangesApplied], this.doMute, this.doUnmute, doEmit, doListen, allowedRendersBeforePause);
+    }
+    /**
+     * Request a new render of current model.
+     *
+     * @internal
+     */
+    applyChanges() {
+        this.doEmit([BeInspireTreeEvent.ChangesApplied]);
+    }
+    /** Add a listener for specific event */
+    on(event, listener) {
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach((e) => {
+            // note: we want our specific listener to be executed last, so have to make sure no other listeners
+            // are appended to the listeners list (see NODES_LOADED_LAST_LISTENER)
+            const shouldInsertBeforeLast = ((e === BeInspireTreeEvent.ModelLoaded && this._tree.listeners(e).length >= 2)
+                || (e === BeInspireTreeEvent.ChildrenLoaded && this._tree.listeners(e).length >= 2));
+            if (shouldInsertBeforeLast)
+                this._tree.listeners(e).splice(this._tree.listeners(e).length - 1, 0, listener);
+            else
+                this._tree.on(e, listener);
+        });
+        return this;
+    }
+    /** Remove listener for specific event */
+    removeListener(event, listener) {
+        const events = Array.isArray(event) ? event : [event];
+        events.forEach((e) => this._tree.removeListener(e, listener));
+        return this;
+    }
+    /** Remove all listeners for specific event(s) */
+    removeAllListeners(event) {
+        if (!event) {
+            this._tree.removeAllListeners(undefined);
+            return;
+        }
+        const events = Array.isArray(event) ? event : /* istanbul ignore next */ [event];
+        events.forEach((e) => this._tree.removeAllListeners(e));
+    }
+    /** Get root node with the specified id */
+    node(id) {
+        return toNode(this._tree.node(id));
+    }
+    /** Get root nodes with the specified ids */
+    nodes(ids) {
+        return toNodes(this._tree.nodes(ids));
+    }
+    /** Get flat list of all available nodes */
+    flatten() {
+        return toNodes(this._tree.flatten(() => true));
+    }
+    /** Get a flat list of available leaf nodes */
+    deepest() {
+        return toNodes(this._tree.deepest());
+    }
+    /** Get a flat list of expanded nodes */
+    expanded() {
+        return toNodes(this._tree.expanded());
+    }
+    /** Get a flat list of collapsed nodes */
+    collapsed() {
+        return toNodes(this._tree.collapsed());
+    }
+    /** Get a flat list of selected nodes */
+    selected() {
+        return toNodes(this._tree.selected());
+    }
+    /** Get a flat list of visible nodes */
+    visible() {
+        if (!this._visibleCached)
+            this._visibleCached = toNodes(this._tree.visible());
+        return this._visibleCached;
+    }
+    /** Reload the tree */
+    async reload() {
+        if (this._deferredLoadingHandler)
+            this._deferredLoadingHandler.disposeNodeCaches(undefined);
+        await using(this.pauseRendering(), async (_r) => {
+            const rootNodes = await this._tree.reload();
+            rootNodes.forEach((n) => toNode(n).setDirty(true));
+        });
+    }
+    /**
+     * Deselects all nodes
+     */
+    deselectAll(muteEvents = true) {
+        using(this.mute((muteEvents) ? [BeInspireTreeEvent.NodeDeselected] : []), (_r) => {
+            this._tree.deselectDeep();
+        });
+    }
+    /**
+     * Returns all visible nodes that are located between the two input nodes (inclusive).
+     * Input nodes can be provided in any order.
+     */
+    getVisibleNodesBetween(node1, node2) {
+        let startIndex = -1;
+        let endIndex = -1;
+        for (let i = 0; i < this.visible().length; ++i) {
+            const vn = this.visible()[i];
+            if (vn.id === node1.id)
+                startIndex = i;
+            if (vn.id === node2.id)
+                endIndex = i;
+            if (startIndex !== -1 && endIndex !== -1)
+                break;
+        }
+        if (startIndex > endIndex)
+            [startIndex, endIndex] = [endIndex, startIndex];
+        return this.visible().slice(startIndex, endIndex + 1);
+    }
+    /**
+     * Selects all visible nodes that are located between the two input nodes (inclusive).
+     * Input nodes can be provided in any order.
+     */
+    selectBetween(node1, node2, muteEvents = true) {
+        return using(this.mute((muteEvents) ? [BeInspireTreeEvent.NodeSelected] : []), (_r) => {
+            const nodesBetween = this.getVisibleNodesBetween(node1, node2);
+            nodesBetween.forEach((n) => n.select());
+            return nodesBetween;
+        });
+    }
+    createSelectedNodePredicate(nodesToSelect) {
+        if (!nodesToSelect)
+            return undefined;
+        let predicate;
+        if (typeof nodesToSelect === "function") {
+            predicate = (n) => (toNode(n).payload && nodesToSelect(toNode(n).payload));
+        }
+        else {
+            predicate = (n) => (-1 !== nodesToSelect.indexOf(toNode(n).id));
+        }
+        return predicate;
+    }
+    updateSelection(selectHandler, nodesToSelect, muteEvents) {
+        const predicate = this.createSelectedNodePredicate(nodesToSelect);
+        if (!predicate)
+            return;
+        using(this.mute((muteEvents) ? [BeInspireTreeEvent.NodeSelected, BeInspireTreeEvent.NodeDeselected] : []), (_r) => {
+            this._tree.disableDeselection();
+            selectHandler(predicate);
+            this._tree.enableDeselection();
+        });
+    }
+    /**
+     * Deselects everything and selects only nodes that meet the `nodesToSelect` criteria
+     */
+    updateTreeSelection(nodesToSelect, muteEvents = true) {
+        const selectFunc = (predicate) => {
+            this.flatten().forEach((n) => {
+                const shouldSelect = predicate(n);
+                if (shouldSelect && !n.selected())
+                    n.select();
+                else if (!shouldSelect && n.selected())
+                    n.deselect();
+            });
+        };
+        return this.updateSelection(selectFunc, nodesToSelect, muteEvents);
+    }
+    /**
+     * Updates selection state of provided `nodes` based on `nodesToSelect` criteria
+     */
+    updateNodesSelection(nodes, nodesToSelect, muteEvents = true) {
+        const selectFunc = (predicate) => {
+            let filtered;
+            if (nodes.filterBy !== undefined)
+                filtered = nodes.filterBy(predicate).map((n) => n);
+            else
+                filtered = nodes.filter(predicate);
+            filtered.forEach((node) => node.select());
+        };
+        return this.updateSelection(selectFunc, nodesToSelect, muteEvents);
+    }
+    updateNodeCheckboxInfo(node, status) {
+        let hasChanges = false;
+        if (node.itree.checkboxTooltip !== status.tooltip) {
+            node.itree.checkboxTooltip = status.tooltip;
+            hasChanges = true;
+        }
+        if (node.itree.state.checkboxVisible !== status.isVisible) {
+            node.itree.state.checkboxVisible = status.isVisible;
+            hasChanges = true;
+        }
+        if (node.itree.state.checkboxDisabled !== status.isDisabled) {
+            node.itree.state.checkboxDisabled = status.isDisabled;
+            hasChanges = true;
+        }
+        if (status.state === CheckBoxState.On && !node.itree.state.checked) {
+            node.check();
+            hasChanges = true;
+        }
+        else if (status.state === CheckBoxState.Off && node.itree.state.checked) {
+            node.uncheck();
+            hasChanges = true;
+        }
+        if (hasChanges) {
+            node.markDirty();
+            this.applyChanges();
+        }
+    }
+    /**
+     * Updates checkbox states of the whole tree using the `checkboxInfo` callback function
+     */
+    async updateTreeCheckboxes(checkboxInfo, muteEvents = true) {
+        await this.updateNodesCheckboxes(this.flatten(), checkboxInfo, muteEvents);
+    }
+    /**
+     * Updates checkbox states of provided `nodes` based on `checkboxInfo` callback function
+     */
+    async updateNodesCheckboxes(nodes, checkboxInfo, muteEvents = true) {
+        await using(this.pauseRendering(), async (_r1) => {
+            await using(this.mute((muteEvents) ? [BeInspireTreeEvent.NodeChecked, BeInspireTreeEvent.NodeUnchecked] : []), async (_r2) => {
+                const promises = new Array();
+                nodes.forEach((n) => {
+                    if (!n.payload)
+                        return;
+                    const status = checkboxInfo(n.payload);
+                    if (isPromiseLike(status))
+                        promises.push(status.then((s) => this.updateNodeCheckboxInfo(n, s)));
+                    else
+                        this.updateNodeCheckboxInfo(n, status);
+                });
+                if (promises.length !== 0)
+                    await Promise.all(promises);
+            });
+        });
+    }
+    /** @internal */
+    createPlaceholderNode(index, parent) {
+        const node = toNode(this._tree.createNode({
+            id: `${parent ? parent.id : ""}-not_loaded[${index}]`,
+            text: "",
+            payload: undefined,
+            beInspireTree: this,
+        }));
+        node.placeholderIndex = index;
+        return node;
+    }
+    /**
+     * Request a node at the specified index to be loaded for the given parent. Only
+     * makes sense on a paginated tree, throws otherwise.
+     */
+    async requestNodeLoad(parent, index) {
+        if (!this._deferredLoadingHandler)
+            throw new UiError(UiComponents.loggerCategory(this), `requestNodeLoad should only be called when pagination is enabled`);
+        return this._deferredLoadingHandler.requestNodeLoad(parent, index);
+    }
+    /** @internal */
+    async loadNodes() {
+        await this._tree.load(this._tree.config.data);
+    }
+}
+async function loadChildrenRecursive(n, filterNodeIds) {
+    const children = await n.loadChildren();
+    await ensureChildrenLoaded(children, filterNodeIds);
+    return children;
+}
+const needsChildrenLoaded = (n) => n.hasOrWillHaveChildren() && !n.hasLoadedChildren();
+async function ensureChildrenLoaded(branch, filterNodeIds) {
+    const childNodes = branch.filter((n) => filterNodeIds.includes(toNode(n).id));
+    const allChildren = (await Promise.all(childNodes.map(async (n) => {
+        if (needsChildrenLoaded(n))
+            return loadChildrenRecursive(toNode(n), filterNodeIds);
+        return n.getChildren();
+    }))).reduce((children, curr) => {
+        children.push(...curr);
+        return children;
+    }, []);
+    await ensureNodesAutoExpanded(allChildren);
+}
+async function ensureNodesAutoExpanded(branch) {
+    const idsToExpand = branch.filter((n) => n.expanded()).map((n) => toNode(n).id);
+    if (idsToExpand.length > 0)
+        await ensureChildrenLoaded(branch, idsToExpand);
+}
+/** @internal */
+export const toNode = (inspireNode) => {
+    // When inspire-tree loads child nodes, some existing nodes transfer their properties to freshly created objects.
+    // Therefore, we cannot capture and use the `inspireNode` reference within methods we are about to assign to the node.
+    const anyNode = inspireNode;
+    if (!inspireNode) {
+        // some inspire tree methods return `undefined` even when they say they don't - handle
+        // the case by returning undefined as well
+        return anyNode;
+    }
+    if (!anyNode._loadChildrenOverriden) {
+        const loadChildrenBase = inspireNode.loadChildren;
+        inspireNode.loadChildren = async function () {
+            const children = await loadChildrenBase.call(this);
+            // note: inspire-tree calls BeInspireTreeEvent.ChildrenLoaded as part of
+            // the above call, so listeners get called before we get a chance to auto-expand...
+            await ensureNodesAutoExpanded(children);
+            return children;
+        };
+        anyNode._loadChildrenOverriden = loadChildrenBase;
+    }
+    // note: default `check()` & `uncheck()` implementations fiddle with
+    // parent node which we don't want
+    if (!anyNode._checkOverriden) {
+        const checkBase = inspireNode.check;
+        anyNode.check = function () {
+            // istanbul ignore else
+            if (!this.itree.state.checked) {
+                this.itree.state.checked = true;
+                this._tree.emit(BeInspireTreeEvent.NodeChecked, this);
+                this.markDirty();
+                this._tree.applyChanges();
+            }
+            return this;
+        };
+        anyNode._checkOverriden = checkBase;
+    }
+    if (!anyNode._uncheckOverriden) {
+        const uncheckBase = inspireNode.uncheck;
+        anyNode.uncheck = function () {
+            // istanbul ignore else
+            if (this.itree.state.checked) {
+                this.itree.state.checked = false;
+                this._tree.emit(BeInspireTreeEvent.NodeUnchecked, this);
+                this.markDirty();
+                this._tree.applyChanges();
+            }
+            return this;
+        };
+        anyNode._uncheckOverriden = uncheckBase;
+    }
+    // inject a method to reset overrides
+    anyNode.resetBeInspireOverrides = function () {
+        this.loadChildren = this._loadChildrenOverriden;
+        delete this._loadChildrenOverriden;
+        this.check = this._checkOverriden;
+        delete this._checkOverriden;
+        this.uncheck = this._uncheckOverriden;
+        delete this._uncheckOverriden;
+    };
+    // inject a couple of methods to handle dirtiness
+    anyNode.isDirty = function () { return this.itree.dirty; };
+    anyNode.setDirty = function (value) {
+        if (value)
+            this.markDirty();
+        else
+            this.itree.dirty = value;
+    };
+    if (!anyNode._markDirtyOverriden) {
+        const markDirtyBase = inspireNode.markDirty;
+        anyNode.markDirty = function () {
+            const result = markDirtyBase.call(this);
+            const currTimestamp = (new Date()).getTime();
+            if (this.itree.dirtyTimestamp === currTimestamp) {
+                ++this.itree.dirtyCounter;
+            }
+            else {
+                this.itree.dirtyTimestamp = currTimestamp;
+                this.itree.dirtyCounter = 0;
+            }
+            return result;
+        };
+        anyNode._markDirtyOverriden = markDirtyBase;
+    }
+    return anyNode;
+};
+/** @internal */
+export const toNodes = (inspireNodes) => {
+    return Object.assign(inspireNodes.map((n) => toNode(n)), {
+        node: (id) => toNode(inspireNodes.node(id)),
+        nodes: (ids) => toNodes(inspireNodes.nodes(ids)),
+        deepest: () => toNodes(inspireNodes.deepest()),
+        flatten: () => toNodes(inspireNodes.flatten(() => true)),
+        expanded: () => toNodes(inspireNodes.expanded()),
+        collapsed: () => toNodes(inspireNodes.collapsed()),
+        selected: () => toNodes(inspireNodes.selected()),
+        visible: () => toNodes(inspireNodes.visible()),
+    });
+};
+const isDataProviderInterface = (obj) => {
+    return (typeof obj === "object")
+        && (obj.getNodesCount && (typeof obj.getNodesCount) === "function")
+        && (obj.getNodes && (typeof obj.getNodes) === "function");
+};
+const isDeferredDataProvider = (provider) => {
+    return (typeof provider === "function") || isDataProviderInterface(provider);
+};
+const nodeToPayload = (node) => (node ? node.payload : undefined);
+class PayloadToNodeRemapper {
+    constructor(_tree, _mapPayloadToInspireNodeConfig) {
+        this._tree = _tree;
+        this._mapPayloadToInspireNodeConfig = _mapPayloadToInspireNodeConfig;
+        this.remapOne = (payload) => ({
+            ...this._mapPayloadToInspireNodeConfig(payload, this.remapOne),
+            beInspireTree: this._tree,
+            payload,
+        });
+        this.remapMany = (payload) => {
+            return payload.map(this.remapOne);
+        };
+    }
+}
+function onNodesDelayLoaded(parent, nodes) {
+    if (parent) {
+        // inspire-tree emits `data.loaded` event only when root nodes are loaded, but
+        // we also need it to be emitted when children are loaded - we depend on it being called
+        // after the children are loaded but before the `children.loaded` event is emitted.
+        parent.tree().emit(BeInspireTreeEvent.DataLoaded, nodes);
+    }
+}
+const wrapDataProvider = (tree, provider, mapPayloadToInspireNodeConfig) => {
+    const remapper = new PayloadToNodeRemapper(tree, mapPayloadToInspireNodeConfig);
+    if (Array.isArray(provider)) {
+        // array data provider
+        return remapper.remapMany(provider);
+    }
+    if (typeof provider === "function") {
+        // method data provider
+        return ((parent, resolve, _reject) => {
+            const payload = nodeToPayload(parent);
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            provider(payload).then(remapper.remapMany).then((nodes) => {
+                onNodesDelayLoaded(parent, nodes);
+                resolve(nodes, nodes.length);
+            });
+        });
+    }
+    if (isDataProviderInterface(provider)) {
+        // interface data provider
+        return new WrappedInterfaceProvider({
+            tree,
+            provider,
+            nodesRemapper: remapper,
+        });
+    }
+    // promise data provider
+    return provider.then(remapper.remapMany);
+};
+class WrappedInterfaceProvider extends CallableInstance {
+    constructor(props) {
+        super("inspireLoad");
+        this._stashedPages = new Map();
+        this._initialRequests = new Set();
+        this.requestNodeLoad = async (parent, index) => {
+            if (!this._paginationHelper)
+                throw new UiError(UiComponents.loggerCategory(this), `requestNodeLoad should only be called when pagination is enabled`);
+            await this._paginationHelper.request(parent ? parent.id : undefined, index);
+        };
+        /** Called by PaginationHelper to load a page */
+        this._pagedLoad = async (parentId, pageStart) => {
+            const parentNode = parentId ? this._tree.node(parentId) : undefined;
+            const parentPayload = parentNode ? parentNode.payload : undefined;
+            const handleCollapsedParent = () => {
+                if (this._tree.props.disposeChildrenOnCollapse && parentNode && parentNode.collapsed())
+                    throw new UiError(UiComponents.loggerCategory(this), `Parent node collapsed while children were being loaded`);
+            };
+            let totalNodesCount;
+            if (parentNode && isArrayLike(parentNode.children)) {
+                totalNodesCount = parentNode.getChildren().length;
+            }
+            else if (!parentNode) {
+                let rootNodesCount = 0;
+                try {
+                    rootNodesCount = this._tree.nodes().length;
+                }
+                catch (e) { }
+                if (rootNodesCount > 0)
+                    totalNodesCount = rootNodesCount;
+            }
+            if (undefined === totalNodesCount) {
+                totalNodesCount = await this._provider.getNodesCount(parentPayload);
+                handleCollapsedParent();
+            }
+            const page = {
+                start: pageStart,
+                size: this._paginationHelper.pageSize,
+            };
+            const nodes = await this._provider.getNodes(parentPayload, page);
+            handleCollapsedParent();
+            return {
+                totalNodesCount,
+                nodes,
+            };
+        };
+        /** Called by PaginationHelper when a page is finished loading */
+        this._onPageLoaded = async (parentId, pageStart, result) => {
+            // stash the result
+            const stash = {
+                total: result.totalNodesCount,
+                pages: [{ start: pageStart, nodes: result.nodes }],
+            };
+            this._stashedPages.set(parentId, stash);
+            if (!this._initialRequests.delete(parentId)) {
+                // because the load is going to happen almost synchronously (just
+                // merge current nodes with stash), there's no point to show the
+                // `loading` state and then re-render with `completed` state + nodes.
+                // instead, just pause rendering until we have the nodes
+                await using(this._tree.pauseRendering(), async (_r) => {
+                    // request children for `parent` to reload - the load handler
+                    // will merge the current children with stash (see `inspireLoad`)
+                    if (parentId)
+                        await this._tree.node(parentId).loadChildren();
+                    else
+                        await this._tree.loadNodes();
+                });
+            }
+        };
+        this._tree = props.tree;
+        this._provider = props.provider;
+        this._nodesRemapper = props.nodesRemapper;
+        if (undefined !== this._tree.props.pageSize && 0 !== this._tree.props.pageSize)
+            this._paginationHelper = new PaginationHelper(this._tree.props.pageSize, this._pagedLoad, this._onPageLoaded);
+    }
+    disposeNodeCaches(node) {
+        if (!node) {
+            this._stashedPages.clear();
+            if (this._paginationHelper)
+                this._paginationHelper.disposeCaches(undefined);
+        }
+        else {
+            node.getChildren().forEach((c) => this.disposeNodeCaches(toNode(c)));
+            this._stashedPages.delete(node.id);
+            if (this._paginationHelper)
+                this._paginationHelper.disposeCaches(node.id);
+        }
+    }
+    createPagedNodesResult(parent) {
+        const parentId = parent ? parent.id : undefined;
+        const currNodes = parent ? toNodes(parent.getChildren()) : this._tree.nodes();
+        const stash = this._stashedPages.get(parentId);
+        if (!stash) {
+            // nothing in stash - return current nodes
+            return currNodes;
+        }
+        this._stashedPages.delete(parentId);
+        // merge current nodes with stash content, fill missing
+        // pieces with placeholders
+        const resolvedNodes = new Array(stash.total);
+        stash.pages.forEach((page) => {
+            page.nodes.forEach((n, index) => {
+                resolvedNodes[page.start + index] = this._nodesRemapper.remapOne(n);
+            });
+        });
+        for (let i = 0; i < stash.total; ++i) {
+            if (resolvedNodes[i])
+                continue;
+            if (currNodes[i]) {
+                currNodes[i].resetBeInspireOverrides();
+                resolvedNodes[i] = currNodes[i];
+            }
+            else {
+                resolvedNodes[i] = this._tree.createPlaceholderNode(i, parent);
+            }
+        }
+        return resolvedNodes;
+    }
+    /** Called by inspire-tree through CallableInstance */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    inspireLoad(parent, resolve) {
+        if (!this._paginationHelper) {
+            // pagination is disabled - just load all nodes for the parent
+            const payload = parent ? parent.payload : undefined;
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this._provider.getNodes(payload).then((payloads) => {
+                const nodes = this._nodesRemapper.remapMany(payloads);
+                onNodesDelayLoaded(parent, nodes);
+                resolve(nodes, nodes.length);
+            });
+            return;
+        }
+        // paginated behavior
+        const parentId = parent ? parent.id : undefined;
+        const complete = () => {
+            // note: the parent might be over-written due to other sibling page loads,
+            // so we have to make sure we're using the right parent and not the stale one
+            const actualParent = parent ? parent.beInspireTree.node(parent.id) : undefined;
+            const pagedNodes = this.createPagedNodesResult(actualParent);
+            if (actualParent && isArrayLike(actualParent.children)) {
+                // reset so concat doesn't duplicate nodes
+                actualParent.children = true;
+            }
+            onNodesDelayLoaded(actualParent, pagedNodes);
+            if (actualParent && actualParent !== parent) {
+                // if the `parent` is indeed stale, then calling resolve won't add child nodes
+                // to the tree - we have to additionally add them to the actual parent that's not stale
+                // see VSTS#152885
+                actualParent.addChildren(pagedNodes);
+            }
+            resolve(pagedNodes, pagedNodes.length);
+        };
+        if (!this._paginationHelper.hasOrWillHaveLoadedPages(parentId)) {
+            // parent has no children yet - initiate a request and wait
+            this._initialRequests.add(parentId);
+            this.requestNodeLoad(parent, 0).then(complete); // eslint-disable-line @typescript-eslint/no-floating-promises
+        }
+        else {
+            complete();
+        }
+    }
+}
+class PaginationHelper {
+    constructor(pageSize, loadHandler, onPageLoaded) {
+        this.pageSize = pageSize;
+        this._loadHandler = loadHandler;
+        this._onPageLoaded = onPageLoaded;
+        this._loadedPages = new Map();
+        this._requestedPages = new Map();
+    }
+    getPageStartIndex(nodeIndex) {
+        return nodeIndex - nodeIndex % this.pageSize;
+    }
+    async createRequest(parentId, pageStart) {
+        return this._loadHandler(parentId, pageStart).then(async (result) => {
+            await this.onRequestHandled(parentId, pageStart, result);
+        }).catch(() => {
+            this.onRequestRejected(parentId, pageStart);
+        });
+    }
+    hasOrWillHaveLoadedPages(parentId) {
+        return this._loadedPages.has(parentId) || this._requestedPages.has(parentId);
+    }
+    disposeCaches(parentId) {
+        if (!parentId) {
+            this._loadedPages.clear();
+            this._requestedPages.clear();
+        }
+        else {
+            this._loadedPages.delete(parentId);
+            this._requestedPages.delete(parentId);
+        }
+    }
+    async request(parentId, index) {
+        const pageStart = this.getPageStartIndex(index);
+        const loadedPages = this._loadedPages.get(parentId);
+        if (loadedPages !== undefined && loadedPages.has(pageStart)) {
+            // already loaded
+            return;
+        }
+        let requestedPages = this._requestedPages.get(parentId);
+        if (requestedPages === undefined) {
+            requestedPages = new Map();
+            this._requestedPages.set(parentId, requestedPages);
+        }
+        let request = requestedPages.get(pageStart);
+        if (!request) {
+            request = this.createRequest(parentId, pageStart);
+            requestedPages.set(pageStart, request);
+        }
+        await request;
+    }
+    async onRequestHandled(parentId, pageStart, result) {
+        // add the request to loaded list
+        let loadedPages = this._loadedPages.get(parentId);
+        if (!loadedPages) {
+            loadedPages = new Set();
+            this._loadedPages.set(parentId, loadedPages);
+        }
+        loadedPages.add(pageStart);
+        // remove request from active requests list
+        const requestedPages = this._requestedPages.get(parentId);
+        if (requestedPages && requestedPages.delete(pageStart)) {
+            // callback
+            await this._onPageLoaded(parentId, pageStart, result);
+        }
+    }
+    onRequestRejected(parentId, pageStart) {
+        // remove request from active requests list
+        const requestedPages = this._requestedPages.get(parentId);
+        // istanbul ignore next
+        if (requestedPages)
+            requestedPages.delete(pageStart);
+    }
+}
+//# sourceMappingURL=BeInspireTree.js.map