@itwin/components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/cjs/components-react/tree/controlled/component/TreeRenderer.js

@@ -1,253 +1,257 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeRenderer = void 0;
-require("./ControlledTree.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const react_window_1 = require("react-window");
-const concat_1 = require("rxjs/internal/observable/concat");
-const timer_1 = require("rxjs/internal/observable/timer");
-const core_bentley_1 = require("@itwin/core-bentley");
-const core_react_1 = require("@itwin/core-react");
-const UseContextWithMandatoryProvider_1 = require("../../../common/UseContextWithMandatoryProvider");
-const HighlightingEngine_1 = require("../../HighlightingEngine");
-const TreeModel_1 = require("../TreeModel");
-const TreeNodeRenderer_1 = require("./TreeNodeRenderer");
-const NODE_LOAD_DELAY = 500;
-/** [[TreeRenderer]] context provider, consumer and custom hook. */
-const [
-/** Context of [[TreeRenderer]] provider. */
-TreeRendererContextProvider, 
-/** Context of [[TreeRenderer]] consumer. */
-_TreeRendererContextConsumer, 
-/** Custom hook to use [[TreeRenderer]] context. */
-useTreeRendererContext,] = (0, UseContextWithMandatoryProvider_1.createContextWithMandatoryProvider)("TreeRendererContext");
-/**
- * Default tree rendering component.
- * @public
- */
-class TreeRenderer extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._ref = React.createRef();
-    }
-    /** @inheritdoc */
-    scrollToNode(nodeId, alignment) {
-        // istanbul ignore else
-        if (this._ref.current)
-            this._ref.current.scrollToNode(nodeId, alignment);
-    }
-    render() {
-        return (React.createElement(TreeRendererInner, { ref: this._ref, ...this.props }));
-    }
-}
-exports.TreeRenderer = TreeRenderer;
-// eslint-disable-next-line react/display-name
-const TreeRendererInner = React.forwardRef((props, ref) => {
-    const variableSizeListRef = React.useRef(null);
-    useTreeRendererAttributes(ref, variableSizeListRef, props.visibleNodes);
-    const previousVisibleNodes = usePrevious(props.visibleNodes);
-    const previousNodeHeight = usePrevious(props.nodeHeight);
-    if ((previousVisibleNodes !== undefined && previousVisibleNodes !== props.visibleNodes)
-        || (previousNodeHeight !== undefined && previousNodeHeight !== props.nodeHeight)) {
-        /* istanbul ignore else */
-        if (variableSizeListRef.current) {
-            variableSizeListRef.current.resetAfterIndex(0, false);
-        }
-    }
-    const coreTreeRef = React.useRef(null);
-    const minContainerWidth = React.useRef(0);
-    const onLabelRendered = useScrollToActiveMatch(coreTreeRef, props.nodeHighlightingProps);
-    const highlightingEngine = React.useMemo(() => props.nodeHighlightingProps && new HighlightingEngine_1.HighlightingEngine(props.nodeHighlightingProps), [props.nodeHighlightingProps]);
-    const rendererContext = React.useMemo(() => ({
-        nodeRenderer: props.nodeRenderer ? props.nodeRenderer : (nodeProps) => (React.createElement(TreeNodeRenderer_1.TreeNodeRenderer, { ...nodeProps })),
-        treeActions: props.treeActions,
-        nodeLoader: props.nodeLoader,
-        visibleNodes: props.visibleNodes,
-        onLabelRendered,
-        highlightingEngine,
-        onNodeWidthMeasured: (width) => {
-            if (width > minContainerWidth.current)
-                minContainerWidth.current = width;
-        },
-        onNodeEditorClosed: () => {
-            setFocusToSelected(coreTreeRef);
-            props.onNodeEditorClosed && props.onNodeEditorClosed();
-        },
-    }), [props, onLabelRendered, highlightingEngine]);
-    const prevTreeWidth = React.useRef(0);
-    if (props.width !== prevTreeWidth.current) {
-        minContainerWidth.current = 0;
-        prevTreeWidth.current = props.width;
-    }
-    const itemKey = React.useCallback((index) => getNodeKey(props.visibleNodes.getAtIndex(index)), [props.visibleNodes]);
-    const { nodeHeight, visibleNodes } = props;
-    const itemSize = React.useCallback((index) => nodeHeight(visibleNodes.getAtIndex(index), index), [nodeHeight, visibleNodes]);
-    const { nodeHighlightingProps } = props;
-    React.useEffect(() => {
-        const highlightedNodeId = getHighlightedNodeId(nodeHighlightingProps);
-        if (!highlightedNodeId)
-            return;
-        let index = 0;
-        for (const node of visibleNodes) {
-            if ((0, TreeModel_1.isTreeModelNode)(node) && node.id === highlightedNodeId)
-                break;
-            index++;
-        }
-        (0, core_bentley_1.assert)(variableSizeListRef.current !== null);
-        variableSizeListRef.current.scrollToItem(index);
-    }, [nodeHighlightingProps]); // eslint-disable-line react-hooks/exhaustive-deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const innerElementType = React.useCallback(
-    // eslint-disable-next-line react/display-name
-    React.forwardRef(({ style, ...rest }, innerRef) => (React.createElement("div", { ref: innerRef, style: { ...style, minWidth: minContainerWidth.current }, ...rest }))), []);
-    const handleKeyDown = React.useCallback((e) => {
-        props.treeActions.onTreeKeyDown(e);
-    }, [props.treeActions]);
-    const handleKeyUp = React.useCallback((e) => {
-        props.treeActions.onTreeKeyUp(e);
-    }, [props.treeActions]);
-    const onItemsRendered = props.onItemsRendered;
-    const handleRenderedItemsChange = React.useCallback((onItemsRenderedProps) => {
-        onItemsRendered && onItemsRendered({ ...onItemsRenderedProps });
-    }, [onItemsRendered]);
-    return (React.createElement(TreeRendererContextProvider, { value: rendererContext },
-        React.createElement(core_react_1.Tree, { ref: coreTreeRef, className: (0, classnames_1.default)("components-controlledTree", "components-smallEditor-host"), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp },
-            React.createElement(react_window_1.VariableSizeList, { ref: variableSizeListRef, className: "ReactWindow__VariableSizeList", width: props.width, height: props.height, itemCount: props.visibleNodes.getNumNodes(), itemSize: itemSize, estimatedItemSize: 25, overscanCount: 10, itemKey: itemKey, innerElementType: innerElementType, onItemsRendered: handleRenderedItemsChange }, Node))));
-});
-function getNodeKey(node) {
-    if ((0, TreeModel_1.isTreeModelNode)(node)) {
-        return node.id;
-    }
-    return `${node.parentId || ""}-${node.childIndex}`;
-}
-const Node = React.memo(// eslint-disable-line @typescript-eslint/naming-convention
-(props) => {
-    const { index, style } = props;
-    const { nodeRenderer, visibleNodes, treeActions, nodeLoader, onLabelRendered, highlightingEngine, onNodeWidthMeasured, onNodeEditorClosed, } = useTreeRendererContext(Node);
-    const node = visibleNodes.getAtIndex(index);
-    useNodeLoading(node, visibleNodes, nodeLoader);
-    // Mark selected node's wrapper to make detecting consecutively selected nodes with css selectors possible
-    const className = (0, classnames_1.default)("node-wrapper", { "is-selected": (0, TreeModel_1.isTreeModelNode)(node) && node.isSelected });
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        // istanbul ignore else
-        if (onNodeWidthMeasured && ref.current)
-            onNodeWidthMeasured(ref.current.offsetWidth);
-    }, [onNodeWidthMeasured]);
-    const isEditing = React.useRef(false);
-    React.useEffect(() => {
-        if (!(0, TreeModel_1.isTreeModelNode)(node))
-            return;
-        if (!isEditing.current && node.editingInfo) {
-            isEditing.current = true;
-        }
-        else if (isEditing.current && node.editingInfo === undefined) {
-            isEditing.current = false;
-            /* istanbul ignore else */
-            if (onNodeEditorClosed)
-                onNodeEditorClosed();
-        }
-    }, [node, onNodeEditorClosed]);
-    return (React.createElement("div", { className: className, style: style, ref: ref }, React.useMemo(() => {
-        if ((0, TreeModel_1.isTreeModelNode)(node)) {
-            const nodeHighlightProps = highlightingEngine ? highlightingEngine.createRenderProps(node) : undefined;
-            return nodeRenderer({ node, treeActions, onLabelRendered, nodeHighlightProps });
-        }
-        return React.createElement(core_react_1.TreeNodePlaceholder, { level: node.depth });
-    }, [node, treeActions, nodeRenderer, onLabelRendered, highlightingEngine])));
-}, react_window_1.areEqual);
-function useNodeLoading(node, visibleNodes, nodeLoader) {
-    React.useEffect(() => {
-        if (!(0, TreeModel_1.isTreeModelNodePlaceholder)(node)) {
-            return;
-        }
-        const treeModel = visibleNodes.getModel();
-        const parentNode = node.parentId ? treeModel.getNode(node.parentId) : treeModel.getRootNode();
-        if (!(0, TreeModel_1.isTreeModelNode)(parentNode) && !(0, TreeModel_1.isTreeModelRootNode)(parentNode)) {
-            return;
-        }
-        const subscription = (0, concat_1.concat)((0, timer_1.timer)(NODE_LOAD_DELAY), nodeLoader.loadNode(parentNode, node.childIndex)).subscribe();
-        return () => subscription.unsubscribe();
-    }, 
-    // Mounted node component never changes its node key, thus it's safe to run this effect only once for every
-    // nodeLoader change.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [nodeLoader]);
-}
-function useTreeRendererAttributes(ref, variableSizeListRef, visibleNodes) {
-    const visibleNodesRef = React.useRef(visibleNodes);
-    visibleNodesRef.current = visibleNodes;
-    React.useImperativeHandle(ref, () => ({
-        scrollToNode: (nodeId, alignment) => {
-            (0, core_bentley_1.assert)(variableSizeListRef.current !== null);
-            variableSizeListRef.current.scrollToItem(visibleNodesRef.current.getIndexOfNode(nodeId), alignment);
-        },
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-}
-function usePrevious(value) {
-    const ref = React.useRef();
-    React.useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
-function getHighlightedNodeId(highlightableTreeProps) {
-    return (highlightableTreeProps && highlightableTreeProps.activeMatch)
-        ? highlightableTreeProps.activeMatch.nodeId
-        : undefined;
-}
-function useScrollToActiveMatch(treeRef, highlightableTreeProps) {
-    const scrollToActive = React.useRef(false);
-    React.useEffect(() => {
-        scrollToActive.current = true;
-    }, [highlightableTreeProps]);
-    const onLabelRendered = React.useCallback((node) => {
-        const highlightedNodeId = getHighlightedNodeId(highlightableTreeProps);
-        if (!treeRef.current || !scrollToActive.current || !highlightedNodeId || highlightedNodeId !== node.id)
-            return;
-        scrollToActive.current = false;
-        const scrollTo = [...treeRef.current.getElementsByClassName(HighlightingEngine_1.HighlightingEngine.ACTIVE_CLASS_NAME)];
-        // istanbul ignore else
-        if (scrollTo.length > 0 && scrollTo[0].scrollIntoView)
-            scrollTo[0].scrollIntoView({ behavior: "auto", block: "nearest", inline: "end" });
-    }, [highlightableTreeProps, treeRef]);
-    return onLabelRendered;
-}
-function setFocusToSelected(treeRef) {
-    /* istanbul ignore else */
-    if (treeRef.current)
-        treeRef.current.setFocusByClassName(".core-tree-node.is-selected");
-}
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeRenderer = void 0;
+require("./ControlledTree.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const react_window_1 = require("react-window");
+const concat_1 = require("rxjs/internal/observable/concat");
+const timer_1 = require("rxjs/internal/observable/timer");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const UseContextWithMandatoryProvider_1 = require("../../../common/UseContextWithMandatoryProvider");
+const HighlightingEngine_1 = require("../../HighlightingEngine");
+const TreeModel_1 = require("../TreeModel");
+const TreeNodeRenderer_1 = require("./TreeNodeRenderer");
+const NODE_LOAD_DELAY = 500;
+/** [[TreeRenderer]] context provider, consumer and custom hook. */
+const [
+/** Context of [[TreeRenderer]] provider. */
+TreeRendererContextProvider, 
+/** Context of [[TreeRenderer]] consumer. */
+_TreeRendererContextConsumer, 
+/** Custom hook to use [[TreeRenderer]] context. */
+useTreeRendererContext,] = (0, UseContextWithMandatoryProvider_1.createContextWithMandatoryProvider)("TreeRendererContext");
+/**
+ * Default tree rendering component.
+ * @public
+ */
+class TreeRenderer extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._ref = React.createRef();
+    }
+    /** @inheritdoc */
+    scrollToNode(nodeId, alignment) {
+        // istanbul ignore else
+        if (this._ref.current)
+            this._ref.current.scrollToNode(nodeId, alignment);
+    }
+    render() {
+        return (React.createElement(TreeRendererInner, { ref: this._ref, ...this.props }));
+    }
+}
+exports.TreeRenderer = TreeRenderer;
+// eslint-disable-next-line react/display-name
+const TreeRendererInner = React.forwardRef((props, ref) => {
+    const variableSizeListRef = React.useRef(null);
+    useTreeRendererAttributes(ref, variableSizeListRef, props.visibleNodes);
+    const previousVisibleNodes = usePrevious(props.visibleNodes);
+    const previousNodeHeight = usePrevious(props.nodeHeight);
+    if ((previousVisibleNodes !== undefined && previousVisibleNodes !== props.visibleNodes)
+        || (previousNodeHeight !== undefined && previousNodeHeight !== props.nodeHeight)) {
+        /* istanbul ignore else */
+        if (variableSizeListRef.current) {
+            variableSizeListRef.current.resetAfterIndex(0, false);
+        }
+    }
+    const coreTreeRef = React.useRef(null);
+    const minContainerWidth = React.useRef(0);
+    const onLabelRendered = useScrollToActiveMatch(coreTreeRef, props.nodeHighlightingProps);
+    const highlightingEngine = React.useMemo(() => props.nodeHighlightingProps && new HighlightingEngine_1.HighlightingEngine(props.nodeHighlightingProps), [props.nodeHighlightingProps]);
+    const rendererContext = React.useMemo(() => ({
+        nodeRenderer: props.nodeRenderer ? props.nodeRenderer : (nodeProps) => (React.createElement(TreeNodeRenderer_1.TreeNodeRenderer, { ...nodeProps })),
+        treeActions: props.treeActions,
+        nodeLoader: props.nodeLoader,
+        visibleNodes: props.visibleNodes,
+        onLabelRendered,
+        highlightingEngine,
+        onNodeWidthMeasured: (width) => {
+            if (width > minContainerWidth.current)
+                minContainerWidth.current = width;
+        },
+        onNodeEditorClosed: () => {
+            setFocusToSelected(coreTreeRef);
+            props.onNodeEditorClosed && props.onNodeEditorClosed();
+        },
+    }), [props, onLabelRendered, highlightingEngine]);
+    const prevTreeWidth = React.useRef(0);
+    if (props.width !== prevTreeWidth.current) {
+        minContainerWidth.current = 0;
+        prevTreeWidth.current = props.width;
+    }
+    const itemKey = React.useCallback((index) => getNodeKey(props.visibleNodes.getAtIndex(index)), [props.visibleNodes]);
+    const { nodeHeight, visibleNodes } = props;
+    const itemSize = React.useCallback((index) => nodeHeight(visibleNodes.getAtIndex(index), index), [nodeHeight, visibleNodes]);
+    const { nodeHighlightingProps } = props;
+    React.useEffect(() => {
+        const highlightedNodeId = getHighlightedNodeId(nodeHighlightingProps);
+        if (!highlightedNodeId)
+            return;
+        let index = 0;
+        for (const node of visibleNodes) {
+            if ((0, TreeModel_1.isTreeModelNode)(node) && node.id === highlightedNodeId)
+                break;
+            index++;
+        }
+        (0, core_bentley_1.assert)(variableSizeListRef.current !== null);
+        variableSizeListRef.current.scrollToItem(index);
+    }, [nodeHighlightingProps]); // eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const innerElementType = React.useCallback(
+    // eslint-disable-next-line react/display-name
+    React.forwardRef(({ style, ...rest }, innerRef) => (React.createElement("div", { ref: innerRef, style: { ...style, minWidth: minContainerWidth.current }, ...rest }))), []);
+    const handleKeyDown = React.useCallback((e) => {
+        props.treeActions.onTreeKeyDown(e);
+    }, [props.treeActions]);
+    const handleKeyUp = React.useCallback((e) => {
+        props.treeActions.onTreeKeyUp(e);
+    }, [props.treeActions]);
+    const onItemsRendered = props.onItemsRendered;
+    const handleRenderedItemsChange = React.useCallback((onItemsRenderedProps) => {
+        onItemsRendered && onItemsRendered({ ...onItemsRenderedProps });
+    }, [onItemsRendered]);
+    return (React.createElement(TreeRendererContextProvider, { value: rendererContext },
+        React.createElement(core_react_1.Tree, { ref: coreTreeRef, className: (0, classnames_1.default)("components-controlledTree", "components-smallEditor-host"), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp },
+            React.createElement(react_window_1.VariableSizeList, { ref: variableSizeListRef, className: "ReactWindow__VariableSizeList", width: props.width, height: props.height, itemCount: props.visibleNodes.getNumNodes(), itemSize: itemSize, estimatedItemSize: 25, overscanCount: 10, itemKey: itemKey, innerElementType: innerElementType, onItemsRendered: handleRenderedItemsChange }, Node))));
+});
+function getNodeKey(node) {
+    if ((0, TreeModel_1.isTreeModelNode)(node)) {
+        return node.id;
+    }
+    return `${node.parentId || ""}-${node.childIndex}`;
+}
+const Node = React.memo(// eslint-disable-line @typescript-eslint/naming-convention
+function Node(props) {
+    const { index, style } = props;
+    const { nodeRenderer, visibleNodes, treeActions, nodeLoader, onLabelRendered, highlightingEngine, onNodeWidthMeasured, onNodeEditorClosed, } = useTreeRendererContext(Node);
+    const node = visibleNodes.getAtIndex(index);
+    useNodeLoading(node, visibleNodes, nodeLoader);
+    // Mark selected node's wrapper to make detecting consecutively selected nodes with css selectors possible
+    const className = (0, classnames_1.default)("node-wrapper", { "is-selected": (0, TreeModel_1.isTreeModelNode)(node) && node.isSelected });
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        // istanbul ignore else
+        if (onNodeWidthMeasured && ref.current)
+            onNodeWidthMeasured(ref.current.offsetWidth);
+    }, [onNodeWidthMeasured]);
+    const isEditing = React.useRef(false);
+    React.useEffect(() => {
+        if (!(0, TreeModel_1.isTreeModelNode)(node))
+            return;
+        if (!isEditing.current && node.editingInfo) {
+            isEditing.current = true;
+        }
+        else if (isEditing.current && node.editingInfo === undefined) {
+            isEditing.current = false;
+            /* istanbul ignore else */
+            if (onNodeEditorClosed)
+                onNodeEditorClosed();
+        }
+    }, [node, onNodeEditorClosed]);
+    return (React.createElement("div", { className: className, style: style, ref: ref }, React.useMemo(() => {
+        if ((0, TreeModel_1.isTreeModelNode)(node)) {
+            const nodeHighlightProps = highlightingEngine ? highlightingEngine.createRenderProps(node) : undefined;
+            return nodeRenderer({ node, treeActions, onLabelRendered, nodeHighlightProps });
+        }
+        return React.createElement(core_react_1.TreeNodePlaceholder, { level: node.depth });
+    }, [node, treeActions, nodeRenderer, onLabelRendered, highlightingEngine])));
+}, react_window_1.areEqual);
+function useNodeLoading(node, visibleNodes, nodeLoader) {
+    React.useEffect(() => {
+        if (!(0, TreeModel_1.isTreeModelNodePlaceholder)(node)) {
+            return;
+        }
+        const treeModel = visibleNodes.getModel();
+        const parentNode = node.parentId ? treeModel.getNode(node.parentId) : treeModel.getRootNode();
+        if (!(0, TreeModel_1.isTreeModelNode)(parentNode) && !(0, TreeModel_1.isTreeModelRootNode)(parentNode)) {
+            return;
+        }
+        const subscription = (0, concat_1.concat)((0, timer_1.timer)(NODE_LOAD_DELAY), nodeLoader.loadNode(parentNode, node.childIndex)).subscribe();
+        return () => subscription.unsubscribe();
+    }, 
+    // Mounted node component never changes its node key, thus it's safe to run this effect only once for every
+    // nodeLoader change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [nodeLoader]);
+}
+function useTreeRendererAttributes(ref, variableSizeListRef, visibleNodes) {
+    const visibleNodesRef = React.useRef(visibleNodes);
+    visibleNodesRef.current = visibleNodes;
+    React.useImperativeHandle(ref, () => ({
+        scrollToNode: (nodeId, alignment) => {
+            (0, core_bentley_1.assert)(variableSizeListRef.current !== null);
+            variableSizeListRef.current.scrollToItem(visibleNodesRef.current.getIndexOfNode(nodeId), alignment);
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+}
+function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+function getHighlightedNodeId(highlightableTreeProps) {
+    return (highlightableTreeProps && highlightableTreeProps.activeMatch)
+        ? highlightableTreeProps.activeMatch.nodeId
+        : undefined;
+}
+function useScrollToActiveMatch(treeRef, highlightableTreeProps) {
+    const scrollToActive = React.useRef(false);
+    React.useEffect(() => {
+        scrollToActive.current = true;
+    }, [highlightableTreeProps]);
+    const onLabelRendered = React.useCallback((node) => {
+        const highlightedNodeId = getHighlightedNodeId(highlightableTreeProps);
+        if (!treeRef.current || !scrollToActive.current || !highlightedNodeId || highlightedNodeId !== node.id)
+            return;
+        scrollToActive.current = false;
+        const scrollTo = [...treeRef.current.getElementsByClassName(HighlightingEngine_1.HighlightingEngine.ACTIVE_CLASS_NAME)];
+        // istanbul ignore else
+        if (scrollTo.length > 0 && scrollTo[0].scrollIntoView !== undefined)
+            scrollTo[0].scrollIntoView({ behavior: "auto", block: "nearest", inline: "end" });
+    }, [highlightableTreeProps, treeRef]);
+    return onLabelRendered;
+}
+function setFocusToSelected(treeRef) {
+    /* istanbul ignore else */
+    if (treeRef.current)
+        treeRef.current.setFocusByClassName(".core-tree-node.is-selected");
+}
 //# sourceMappingURL=TreeRenderer.js.map