@itwin/components-react 3.4.0-dev.62 → 3.4.0-dev.63

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

@@ -1,253 +1,253 @@
-"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;
+    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");
+}
 //# sourceMappingURL=TreeRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Tree\r\n */\r\n\r\nimport \"./ControlledTree.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { areEqual, ListChildComponentProps, ListOnItemsRenderedProps, VariableSizeList } from \"react-window\";\r\nimport { concat } from \"rxjs/internal/observable/concat\";\r\nimport { timer } from \"rxjs/internal/observable/timer\";\r\nimport { assert } from \"@itwin/core-bentley\";\r\nimport { Tree as CoreTree, TreeNodePlaceholder } from \"@itwin/core-react\";\r\nimport { createContextWithMandatoryProvider } from \"../../../common/UseContextWithMandatoryProvider\";\r\nimport { HighlightableTreeProps, HighlightingEngine } from \"../../HighlightingEngine\";\r\nimport { TreeActions } from \"../TreeActions\";\r\nimport {\r\n  isTreeModelNode, isTreeModelNodePlaceholder, isTreeModelRootNode, TreeModelNode, TreeModelNodePlaceholder, VisibleTreeNodes,\r\n} from \"../TreeModel\";\r\nimport { ITreeNodeLoader } from \"../TreeNodeLoader\";\r\nimport { TreeNodeRenderer, TreeNodeRendererProps } from \"./TreeNodeRenderer\";\r\n\r\nconst NODE_LOAD_DELAY = 500;\r\n\r\n/**\r\n * Data structure that describes range of rendered items in the tree.\r\n * @beta\r\n */\r\nexport interface RenderedItemsRange {\r\n  overscanStartIndex: number;\r\n  overscanStopIndex: number;\r\n  visibleStartIndex: number;\r\n  visibleStopIndex: number;\r\n}\r\n\r\n/**\r\n * Properties for [[TreeRenderer]] component.\r\n * @public\r\n */\r\nexport interface TreeRendererProps {\r\n  treeActions: TreeActions;\r\n  nodeLoader: ITreeNodeLoader;\r\n\r\n  /** Callback that is used to determine node height. */\r\n  nodeHeight: (node: TreeModelNode | TreeModelNodePlaceholder, index: number) => number;\r\n\r\n  /** Flat list of nodes to be rendered. */\r\n  visibleNodes: VisibleTreeNodes;\r\n\r\n  /** Callback to render custom node.  */\r\n  nodeRenderer?: (props: TreeNodeRendererProps) => React.ReactNode;\r\n\r\n  /** Properties used to highlight nodes and scroll to active match while filtering. */\r\n  nodeHighlightingProps?: HighlightableTreeProps;\r\n\r\n  /**\r\n   * Callback that is called when rendered items range changes.\r\n   * @beta\r\n   */\r\n  onItemsRendered?: (renderedItems: RenderedItemsRange) => void;\r\n\r\n  /**\r\n   * Callback used when an editor closes\r\n   * @internal\r\n   */\r\n  onNodeEditorClosed?: () => void;\r\n\r\n  /** Width of the tree area. */\r\n  width: number;\r\n\r\n  /** Height of the tree area. */\r\n  height: number;\r\n}\r\n\r\n/**\r\n * Attributes found on TreeRenderer component\r\n * @public\r\n */\r\nexport interface TreeRendererAttributes {\r\n  /**\r\n   * Scroll to the specified node.\r\n   * @param nodeId Id of the target node to scroll to.\r\n   * @param alignment Controls scrolling behavior. See [react-window](https://github.com/bvaughn/react-window) documentation\r\n   * on `scrollToItem` for details.\r\n   */\r\n  scrollToNode(nodeId: string, alignment?: Alignment): void;\r\n}\r\n\r\ntype Alignment = \"auto\" | \"smart\" | \"center\" | \"end\" | \"start\";\r\n\r\n/** [[TreeRenderer]] context that is provided to each rendered node. */\r\ninterface TreeRendererContext {\r\n  /** Callback to render custom node. */\r\n  nodeRenderer: (props: TreeNodeRendererProps) => React.ReactNode;\r\n\r\n  treeActions: TreeActions;\r\n  nodeLoader: ITreeNodeLoader;\r\n\r\n  /** Flat list of nodes to be rendered. */\r\n  visibleNodes: VisibleTreeNodes;\r\n\r\n  /** Engine used to created node highlighting properties. */\r\n  highlightingEngine?: HighlightingEngine;\r\n\r\n  /** Callback used detect when label is rendered. It is used by TreeRenderer for scrolling to active match. */\r\n  onLabelRendered?: (node: TreeModelNode) => void;\r\n\r\n  /** A callback that node calls after rendering to report its width */\r\n  onNodeWidthMeasured?: (width: number) => void;\r\n\r\n  /** Callback used when an editor closes */\r\n  onNodeEditorClosed?: () => void;\r\n}\r\n\r\n/** [[TreeRenderer]] context provider, consumer and custom hook. */\r\nconst [\r\n  /** Context of [[TreeRenderer]] provider. */\r\n  TreeRendererContextProvider,\r\n\r\n  /** Context of [[TreeRenderer]] consumer. */\r\n  _TreeRendererContextConsumer,\r\n\r\n  /** Custom hook to use [[TreeRenderer]] context. */\r\n  useTreeRendererContext,\r\n] = createContextWithMandatoryProvider<TreeRendererContext>(\"TreeRendererContext\");\r\n\r\n/**\r\n * Default tree rendering component.\r\n * @public\r\n */\r\nexport class TreeRenderer extends React.Component<TreeRendererProps> implements TreeRendererAttributes {\r\n  private _ref = React.createRef<TreeRendererAttributes>();\r\n\r\n  /** @inheritdoc */\r\n  public scrollToNode(nodeId: string, alignment?: Alignment) {\r\n    // istanbul ignore else\r\n    if (this._ref.current)\r\n      this._ref.current.scrollToNode(nodeId, alignment);\r\n  }\r\n\r\n  public override render() {\r\n    return (\r\n      <TreeRendererInner ref={this._ref} {...this.props} />\r\n    );\r\n  }\r\n}\r\n\r\n// eslint-disable-next-line react/display-name\r\nconst TreeRendererInner = React.forwardRef<TreeRendererAttributes, TreeRendererProps>((props, ref) => {\r\n  const variableSizeListRef = React.useRef<VariableSizeList>(null);\r\n  useTreeRendererAttributes(ref, variableSizeListRef, props.visibleNodes);\r\n\r\n  const previousVisibleNodes = usePrevious(props.visibleNodes);\r\n  const previousNodeHeight = usePrevious(props.nodeHeight);\r\n  if ((previousVisibleNodes !== undefined && previousVisibleNodes !== props.visibleNodes)\r\n    || (previousNodeHeight !== undefined && previousNodeHeight !== props.nodeHeight)) {\r\n    /* istanbul ignore else */\r\n    if (variableSizeListRef.current) {\r\n      variableSizeListRef.current.resetAfterIndex(0, false);\r\n    }\r\n  }\r\n\r\n  const coreTreeRef = React.useRef<CoreTree>(null);\r\n  const minContainerWidth = React.useRef<number>(0);\r\n  const onLabelRendered = useScrollToActiveMatch(coreTreeRef, props.nodeHighlightingProps);\r\n  const highlightingEngine = React.useMemo(\r\n    () => props.nodeHighlightingProps && new HighlightingEngine(props.nodeHighlightingProps),\r\n    [props.nodeHighlightingProps],\r\n  );\r\n\r\n  const rendererContext = React.useMemo<TreeRendererContext>(() => ({\r\n    nodeRenderer: props.nodeRenderer ? props.nodeRenderer : (nodeProps) => (<TreeNodeRenderer {...nodeProps} />),\r\n    treeActions: props.treeActions,\r\n    nodeLoader: props.nodeLoader,\r\n    visibleNodes: props.visibleNodes,\r\n    onLabelRendered,\r\n    highlightingEngine,\r\n    onNodeWidthMeasured: (width: number) => {\r\n      if (width > minContainerWidth.current)\r\n        minContainerWidth.current = width;\r\n    },\r\n    onNodeEditorClosed: () => {\r\n      setFocusToSelected(coreTreeRef);\r\n      props.onNodeEditorClosed && props.onNodeEditorClosed();\r\n    },\r\n  }), [props, onLabelRendered, highlightingEngine]);\r\n\r\n  const prevTreeWidth = React.useRef<number>(0);\r\n  if (props.width !== prevTreeWidth.current) {\r\n    minContainerWidth.current = 0;\r\n    prevTreeWidth.current = props.width;\r\n  }\r\n\r\n  const itemKey = React.useCallback(\r\n    (index: number) => getNodeKey(props.visibleNodes.getAtIndex(index)!),\r\n    [props.visibleNodes],\r\n  );\r\n\r\n  const { nodeHeight, visibleNodes } = props;\r\n  const itemSize = React.useCallback(\r\n    (index: number) => nodeHeight(visibleNodes.getAtIndex(index)!, index),\r\n    [nodeHeight, visibleNodes],\r\n  );\r\n\r\n  const { nodeHighlightingProps } = props;\r\n  React.useEffect(() => {\r\n    const highlightedNodeId = getHighlightedNodeId(nodeHighlightingProps);\r\n    if (!highlightedNodeId)\r\n      return;\r\n\r\n    let index = 0;\r\n    for (const node of visibleNodes) {\r\n      if (isTreeModelNode(node) && node.id === highlightedNodeId)\r\n        break;\r\n\r\n      index++;\r\n    }\r\n\r\n    assert(variableSizeListRef.current !== null);\r\n    variableSizeListRef.current.scrollToItem(index);\r\n  }, [nodeHighlightingProps]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  const innerElementType = React.useCallback(\r\n    // eslint-disable-next-line react/display-name\r\n    React.forwardRef(({ style, ...rest }: ListChildComponentProps, innerRef: React.Ref<HTMLDivElement>) => (\r\n      <div\r\n        ref={innerRef}\r\n        style={{ ...style, minWidth: minContainerWidth.current }}\r\n        {...rest}\r\n      />\r\n    )),\r\n    [],\r\n  );\r\n\r\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\r\n    props.treeActions.onTreeKeyDown(e);\r\n  }, [props.treeActions]);\r\n\r\n  const handleKeyUp = React.useCallback((e: React.KeyboardEvent) => {\r\n    props.treeActions.onTreeKeyUp(e);\r\n  }, [props.treeActions]);\r\n\r\n  const onItemsRendered = props.onItemsRendered;\r\n  const handleRenderedItemsChange = React.useCallback((onItemsRenderedProps: ListOnItemsRenderedProps) => {\r\n    onItemsRendered && onItemsRendered({ ...onItemsRenderedProps });\r\n  }, [onItemsRendered]);\r\n\r\n  return (\r\n    <TreeRendererContextProvider value={rendererContext}>\r\n      <CoreTree ref={coreTreeRef}\r\n        className={classnames(\"components-controlledTree\", \"components-smallEditor-host\")}\r\n        onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}\r\n      >\r\n        <VariableSizeList\r\n          ref={variableSizeListRef}\r\n          className={\"ReactWindow__VariableSizeList\"}\r\n          width={props.width}\r\n          height={props.height}\r\n          itemCount={props.visibleNodes.getNumNodes()}\r\n          itemSize={itemSize}\r\n          estimatedItemSize={25}\r\n          overscanCount={10}\r\n          itemKey={itemKey}\r\n          innerElementType={innerElementType}\r\n          onItemsRendered={handleRenderedItemsChange}\r\n        >\r\n          {Node}\r\n        </VariableSizeList>\r\n      </CoreTree>\r\n    </TreeRendererContextProvider>\r\n  );\r\n});\r\n\r\nfunction getNodeKey(node: TreeModelNode | TreeModelNodePlaceholder): string {\r\n  if (isTreeModelNode(node)) {\r\n    return node.id;\r\n  }\r\n  return `${node.parentId || \"\"}-${node.childIndex}`;\r\n}\r\n\r\nconst Node = React.memo<React.FC<ListChildComponentProps>>( // eslint-disable-line @typescript-eslint/naming-convention\r\n  (props: ListChildComponentProps) => {\r\n    const { index, style } = props;\r\n\r\n    const {\r\n      nodeRenderer,\r\n      visibleNodes,\r\n      treeActions,\r\n      nodeLoader,\r\n      onLabelRendered,\r\n      highlightingEngine,\r\n      onNodeWidthMeasured,\r\n      onNodeEditorClosed,\r\n    } = useTreeRendererContext(Node);\r\n    const node = visibleNodes.getAtIndex(index)!;\r\n\r\n    useNodeLoading(node, visibleNodes, nodeLoader);\r\n\r\n    // Mark selected node's wrapper to make detecting consecutively selected nodes with css selectors possible\r\n    const className = classnames(\"node-wrapper\", { \"is-selected\": isTreeModelNode(node) && node.isSelected });\r\n\r\n    const ref = React.useRef<HTMLDivElement>(null);\r\n    React.useEffect(() => {\r\n      // istanbul ignore else\r\n      if (onNodeWidthMeasured && ref.current)\r\n        onNodeWidthMeasured(ref.current.offsetWidth);\r\n    }, [onNodeWidthMeasured]);\r\n\r\n    const isEditing = React.useRef(false);\r\n    React.useEffect(() => {\r\n      if (!isTreeModelNode(node))\r\n        return;\r\n\r\n      if (!isEditing.current && node.editingInfo) {\r\n        isEditing.current = true;\r\n      } else if (isEditing.current && node.editingInfo === undefined) {\r\n        isEditing.current = false;\r\n        /* istanbul ignore else */\r\n        if (onNodeEditorClosed)\r\n          onNodeEditorClosed();\r\n      }\r\n    }, [node, onNodeEditorClosed]);\r\n\r\n    return (\r\n      <div className={className} style={style} ref={ref}>\r\n        {React.useMemo(() => {\r\n          if (isTreeModelNode(node)) {\r\n            const nodeHighlightProps = highlightingEngine ? highlightingEngine.createRenderProps(node) : undefined;\r\n            return nodeRenderer({ node, treeActions, onLabelRendered, nodeHighlightProps });\r\n          }\r\n\r\n          return <TreeNodePlaceholder level={node.depth} />;\r\n        }, [node, treeActions, nodeRenderer, onLabelRendered, highlightingEngine])}\r\n      </div>\r\n    );\r\n  },\r\n  areEqual,\r\n);\r\n\r\nfunction useNodeLoading(\r\n  node: TreeModelNode | TreeModelNodePlaceholder,\r\n  visibleNodes: VisibleTreeNodes,\r\n  nodeLoader: ITreeNodeLoader,\r\n): void {\r\n  React.useEffect(\r\n    () => {\r\n      if (!isTreeModelNodePlaceholder(node)) {\r\n        return;\r\n      }\r\n\r\n      const treeModel = visibleNodes.getModel();\r\n      const parentNode = node.parentId ? treeModel.getNode(node.parentId) : treeModel.getRootNode();\r\n      if (!isTreeModelNode(parentNode) && !isTreeModelRootNode(parentNode)) {\r\n        return;\r\n      }\r\n\r\n      const subscription = concat(timer(NODE_LOAD_DELAY), nodeLoader.loadNode(parentNode, node.childIndex)).subscribe();\r\n      return () => subscription.unsubscribe();\r\n    },\r\n    // Mounted node component never changes its node key, thus it's safe to run this effect only once for every\r\n    // nodeLoader change.\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [nodeLoader],\r\n  );\r\n}\r\n\r\nfunction useTreeRendererAttributes(\r\n  ref: React.Ref<TreeRendererAttributes>,\r\n  variableSizeListRef: React.RefObject<VariableSizeList>,\r\n  visibleNodes: VisibleTreeNodes,\r\n) {\r\n  const visibleNodesRef = React.useRef(visibleNodes);\r\n  visibleNodesRef.current = visibleNodes;\r\n  React.useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      scrollToNode: (nodeId, alignment) => {\r\n        assert(variableSizeListRef.current !== null);\r\n        variableSizeListRef.current.scrollToItem(visibleNodesRef.current.getIndexOfNode(nodeId), alignment);\r\n      },\r\n    }),\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [],\r\n  );\r\n}\r\n\r\nfunction usePrevious<T>(value: T): T | undefined {\r\n  const ref = React.useRef<T>();\r\n\r\n  React.useEffect(() => {\r\n    ref.current = value;\r\n  }, [value]);\r\n\r\n  return ref.current;\r\n}\r\n\r\nfunction getHighlightedNodeId(highlightableTreeProps?: HighlightableTreeProps) {\r\n  return (highlightableTreeProps && highlightableTreeProps.activeMatch)\r\n    ? highlightableTreeProps.activeMatch.nodeId\r\n    : undefined;\r\n}\r\n\r\nfunction useScrollToActiveMatch(treeRef: React.RefObject<CoreTree>, highlightableTreeProps?: HighlightableTreeProps) {\r\n  const scrollToActive = React.useRef(false);\r\n  React.useEffect(() => {\r\n    scrollToActive.current = true;\r\n  }, [highlightableTreeProps]);\r\n\r\n  const onLabelRendered = React.useCallback(\r\n    (node: TreeModelNode) => {\r\n      const highlightedNodeId = getHighlightedNodeId(highlightableTreeProps);\r\n      if (!treeRef.current || !scrollToActive.current || !highlightedNodeId || highlightedNodeId !== node.id)\r\n        return;\r\n\r\n      scrollToActive.current = false;\r\n      const scrollTo = [...treeRef.current.getElementsByClassName(HighlightingEngine.ACTIVE_CLASS_NAME)];\r\n      // istanbul ignore else\r\n      if (scrollTo.length > 0 && scrollTo[0].scrollIntoView)\r\n        scrollTo[0].scrollIntoView({ behavior: \"auto\", block: \"nearest\", inline: \"end\" });\r\n    }, [highlightableTreeProps, treeRef]);\r\n\r\n  return onLabelRendered;\r\n}\r\n\r\nfunction setFocusToSelected(treeRef: React.RefObject<CoreTree>) {\r\n  /* istanbul ignore else */\r\n  if (treeRef.current)\r\n    treeRef.current.setFocusByClassName(\".core-tree-node.is-selected\");\r\n}\r\n"]}
+{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../../src/components-react/tree/controlled/component/TreeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./ControlledTree.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { areEqual, ListChildComponentProps, ListOnItemsRenderedProps, VariableSizeList } from \"react-window\";\nimport { concat } from \"rxjs/internal/observable/concat\";\nimport { timer } from \"rxjs/internal/observable/timer\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { Tree as CoreTree, TreeNodePlaceholder } from \"@itwin/core-react\";\nimport { createContextWithMandatoryProvider } from \"../../../common/UseContextWithMandatoryProvider\";\nimport { HighlightableTreeProps, HighlightingEngine } from \"../../HighlightingEngine\";\nimport { TreeActions } from \"../TreeActions\";\nimport {\n  isTreeModelNode, isTreeModelNodePlaceholder, isTreeModelRootNode, TreeModelNode, TreeModelNodePlaceholder, VisibleTreeNodes,\n} from \"../TreeModel\";\nimport { ITreeNodeLoader } from \"../TreeNodeLoader\";\nimport { TreeNodeRenderer, TreeNodeRendererProps } from \"./TreeNodeRenderer\";\n\nconst NODE_LOAD_DELAY = 500;\n\n/**\n * Data structure that describes range of rendered items in the tree.\n * @beta\n */\nexport interface RenderedItemsRange {\n  overscanStartIndex: number;\n  overscanStopIndex: number;\n  visibleStartIndex: number;\n  visibleStopIndex: number;\n}\n\n/**\n * Properties for [[TreeRenderer]] component.\n * @public\n */\nexport interface TreeRendererProps {\n  treeActions: TreeActions;\n  nodeLoader: ITreeNodeLoader;\n\n  /** Callback that is used to determine node height. */\n  nodeHeight: (node: TreeModelNode | TreeModelNodePlaceholder, index: number) => number;\n\n  /** Flat list of nodes to be rendered. */\n  visibleNodes: VisibleTreeNodes;\n\n  /** Callback to render custom node.  */\n  nodeRenderer?: (props: TreeNodeRendererProps) => React.ReactNode;\n\n  /** Properties used to highlight nodes and scroll to active match while filtering. */\n  nodeHighlightingProps?: HighlightableTreeProps;\n\n  /**\n   * Callback that is called when rendered items range changes.\n   * @beta\n   */\n  onItemsRendered?: (renderedItems: RenderedItemsRange) => void;\n\n  /**\n   * Callback used when an editor closes\n   * @internal\n   */\n  onNodeEditorClosed?: () => void;\n\n  /** Width of the tree area. */\n  width: number;\n\n  /** Height of the tree area. */\n  height: number;\n}\n\n/**\n * Attributes found on TreeRenderer component\n * @public\n */\nexport interface TreeRendererAttributes {\n  /**\n   * Scroll to the specified node.\n   * @param nodeId Id of the target node to scroll to.\n   * @param alignment Controls scrolling behavior. See [react-window](https://github.com/bvaughn/react-window) documentation\n   * on `scrollToItem` for details.\n   */\n  scrollToNode(nodeId: string, alignment?: Alignment): void;\n}\n\ntype Alignment = \"auto\" | \"smart\" | \"center\" | \"end\" | \"start\";\n\n/** [[TreeRenderer]] context that is provided to each rendered node. */\ninterface TreeRendererContext {\n  /** Callback to render custom node. */\n  nodeRenderer: (props: TreeNodeRendererProps) => React.ReactNode;\n\n  treeActions: TreeActions;\n  nodeLoader: ITreeNodeLoader;\n\n  /** Flat list of nodes to be rendered. */\n  visibleNodes: VisibleTreeNodes;\n\n  /** Engine used to created node highlighting properties. */\n  highlightingEngine?: HighlightingEngine;\n\n  /** Callback used detect when label is rendered. It is used by TreeRenderer for scrolling to active match. */\n  onLabelRendered?: (node: TreeModelNode) => void;\n\n  /** A callback that node calls after rendering to report its width */\n  onNodeWidthMeasured?: (width: number) => void;\n\n  /** Callback used when an editor closes */\n  onNodeEditorClosed?: () => void;\n}\n\n/** [[TreeRenderer]] context provider, consumer and custom hook. */\nconst [\n  /** Context of [[TreeRenderer]] provider. */\n  TreeRendererContextProvider,\n\n  /** Context of [[TreeRenderer]] consumer. */\n  _TreeRendererContextConsumer,\n\n  /** Custom hook to use [[TreeRenderer]] context. */\n  useTreeRendererContext,\n] = createContextWithMandatoryProvider<TreeRendererContext>(\"TreeRendererContext\");\n\n/**\n * Default tree rendering component.\n * @public\n */\nexport class TreeRenderer extends React.Component<TreeRendererProps> implements TreeRendererAttributes {\n  private _ref = React.createRef<TreeRendererAttributes>();\n\n  /** @inheritdoc */\n  public scrollToNode(nodeId: string, alignment?: Alignment) {\n    // istanbul ignore else\n    if (this._ref.current)\n      this._ref.current.scrollToNode(nodeId, alignment);\n  }\n\n  public override render() {\n    return (\n      <TreeRendererInner ref={this._ref} {...this.props} />\n    );\n  }\n}\n\n// eslint-disable-next-line react/display-name\nconst TreeRendererInner = React.forwardRef<TreeRendererAttributes, TreeRendererProps>((props, ref) => {\n  const variableSizeListRef = React.useRef<VariableSizeList>(null);\n  useTreeRendererAttributes(ref, variableSizeListRef, props.visibleNodes);\n\n  const previousVisibleNodes = usePrevious(props.visibleNodes);\n  const previousNodeHeight = usePrevious(props.nodeHeight);\n  if ((previousVisibleNodes !== undefined && previousVisibleNodes !== props.visibleNodes)\n    || (previousNodeHeight !== undefined && previousNodeHeight !== props.nodeHeight)) {\n    /* istanbul ignore else */\n    if (variableSizeListRef.current) {\n      variableSizeListRef.current.resetAfterIndex(0, false);\n    }\n  }\n\n  const coreTreeRef = React.useRef<CoreTree>(null);\n  const minContainerWidth = React.useRef<number>(0);\n  const onLabelRendered = useScrollToActiveMatch(coreTreeRef, props.nodeHighlightingProps);\n  const highlightingEngine = React.useMemo(\n    () => props.nodeHighlightingProps && new HighlightingEngine(props.nodeHighlightingProps),\n    [props.nodeHighlightingProps],\n  );\n\n  const rendererContext = React.useMemo<TreeRendererContext>(() => ({\n    nodeRenderer: props.nodeRenderer ? props.nodeRenderer : (nodeProps) => (<TreeNodeRenderer {...nodeProps} />),\n    treeActions: props.treeActions,\n    nodeLoader: props.nodeLoader,\n    visibleNodes: props.visibleNodes,\n    onLabelRendered,\n    highlightingEngine,\n    onNodeWidthMeasured: (width: number) => {\n      if (width > minContainerWidth.current)\n        minContainerWidth.current = width;\n    },\n    onNodeEditorClosed: () => {\n      setFocusToSelected(coreTreeRef);\n      props.onNodeEditorClosed && props.onNodeEditorClosed();\n    },\n  }), [props, onLabelRendered, highlightingEngine]);\n\n  const prevTreeWidth = React.useRef<number>(0);\n  if (props.width !== prevTreeWidth.current) {\n    minContainerWidth.current = 0;\n    prevTreeWidth.current = props.width;\n  }\n\n  const itemKey = React.useCallback(\n    (index: number) => getNodeKey(props.visibleNodes.getAtIndex(index)!),\n    [props.visibleNodes],\n  );\n\n  const { nodeHeight, visibleNodes } = props;\n  const itemSize = React.useCallback(\n    (index: number) => nodeHeight(visibleNodes.getAtIndex(index)!, index),\n    [nodeHeight, visibleNodes],\n  );\n\n  const { nodeHighlightingProps } = props;\n  React.useEffect(() => {\n    const highlightedNodeId = getHighlightedNodeId(nodeHighlightingProps);\n    if (!highlightedNodeId)\n      return;\n\n    let index = 0;\n    for (const node of visibleNodes) {\n      if (isTreeModelNode(node) && node.id === highlightedNodeId)\n        break;\n\n      index++;\n    }\n\n    assert(variableSizeListRef.current !== null);\n    variableSizeListRef.current.scrollToItem(index);\n  }, [nodeHighlightingProps]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const innerElementType = React.useCallback(\n    // eslint-disable-next-line react/display-name\n    React.forwardRef(({ style, ...rest }: ListChildComponentProps, innerRef: React.Ref<HTMLDivElement>) => (\n      <div\n        ref={innerRef}\n        style={{ ...style, minWidth: minContainerWidth.current }}\n        {...rest}\n      />\n    )),\n    [],\n  );\n\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    props.treeActions.onTreeKeyDown(e);\n  }, [props.treeActions]);\n\n  const handleKeyUp = React.useCallback((e: React.KeyboardEvent) => {\n    props.treeActions.onTreeKeyUp(e);\n  }, [props.treeActions]);\n\n  const onItemsRendered = props.onItemsRendered;\n  const handleRenderedItemsChange = React.useCallback((onItemsRenderedProps: ListOnItemsRenderedProps) => {\n    onItemsRendered && onItemsRendered({ ...onItemsRenderedProps });\n  }, [onItemsRendered]);\n\n  return (\n    <TreeRendererContextProvider value={rendererContext}>\n      <CoreTree ref={coreTreeRef}\n        className={classnames(\"components-controlledTree\", \"components-smallEditor-host\")}\n        onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}\n      >\n        <VariableSizeList\n          ref={variableSizeListRef}\n          className={\"ReactWindow__VariableSizeList\"}\n          width={props.width}\n          height={props.height}\n          itemCount={props.visibleNodes.getNumNodes()}\n          itemSize={itemSize}\n          estimatedItemSize={25}\n          overscanCount={10}\n          itemKey={itemKey}\n          innerElementType={innerElementType}\n          onItemsRendered={handleRenderedItemsChange}\n        >\n          {Node}\n        </VariableSizeList>\n      </CoreTree>\n    </TreeRendererContextProvider>\n  );\n});\n\nfunction getNodeKey(node: TreeModelNode | TreeModelNodePlaceholder): string {\n  if (isTreeModelNode(node)) {\n    return node.id;\n  }\n  return `${node.parentId || \"\"}-${node.childIndex}`;\n}\n\nconst Node = React.memo<React.FC<ListChildComponentProps>>( // eslint-disable-line @typescript-eslint/naming-convention\n  (props: ListChildComponentProps) => {\n    const { index, style } = props;\n\n    const {\n      nodeRenderer,\n      visibleNodes,\n      treeActions,\n      nodeLoader,\n      onLabelRendered,\n      highlightingEngine,\n      onNodeWidthMeasured,\n      onNodeEditorClosed,\n    } = useTreeRendererContext(Node);\n    const node = visibleNodes.getAtIndex(index)!;\n\n    useNodeLoading(node, visibleNodes, nodeLoader);\n\n    // Mark selected node's wrapper to make detecting consecutively selected nodes with css selectors possible\n    const className = classnames(\"node-wrapper\", { \"is-selected\": isTreeModelNode(node) && node.isSelected });\n\n    const ref = React.useRef<HTMLDivElement>(null);\n    React.useEffect(() => {\n      // istanbul ignore else\n      if (onNodeWidthMeasured && ref.current)\n        onNodeWidthMeasured(ref.current.offsetWidth);\n    }, [onNodeWidthMeasured]);\n\n    const isEditing = React.useRef(false);\n    React.useEffect(() => {\n      if (!isTreeModelNode(node))\n        return;\n\n      if (!isEditing.current && node.editingInfo) {\n        isEditing.current = true;\n      } else if (isEditing.current && node.editingInfo === undefined) {\n        isEditing.current = false;\n        /* istanbul ignore else */\n        if (onNodeEditorClosed)\n          onNodeEditorClosed();\n      }\n    }, [node, onNodeEditorClosed]);\n\n    return (\n      <div className={className} style={style} ref={ref}>\n        {React.useMemo(() => {\n          if (isTreeModelNode(node)) {\n            const nodeHighlightProps = highlightingEngine ? highlightingEngine.createRenderProps(node) : undefined;\n            return nodeRenderer({ node, treeActions, onLabelRendered, nodeHighlightProps });\n          }\n\n          return <TreeNodePlaceholder level={node.depth} />;\n        }, [node, treeActions, nodeRenderer, onLabelRendered, highlightingEngine])}\n      </div>\n    );\n  },\n  areEqual,\n);\n\nfunction useNodeLoading(\n  node: TreeModelNode | TreeModelNodePlaceholder,\n  visibleNodes: VisibleTreeNodes,\n  nodeLoader: ITreeNodeLoader,\n): void {\n  React.useEffect(\n    () => {\n      if (!isTreeModelNodePlaceholder(node)) {\n        return;\n      }\n\n      const treeModel = visibleNodes.getModel();\n      const parentNode = node.parentId ? treeModel.getNode(node.parentId) : treeModel.getRootNode();\n      if (!isTreeModelNode(parentNode) && !isTreeModelRootNode(parentNode)) {\n        return;\n      }\n\n      const subscription = concat(timer(NODE_LOAD_DELAY), nodeLoader.loadNode(parentNode, node.childIndex)).subscribe();\n      return () => subscription.unsubscribe();\n    },\n    // Mounted node component never changes its node key, thus it's safe to run this effect only once for every\n    // nodeLoader change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [nodeLoader],\n  );\n}\n\nfunction useTreeRendererAttributes(\n  ref: React.Ref<TreeRendererAttributes>,\n  variableSizeListRef: React.RefObject<VariableSizeList>,\n  visibleNodes: VisibleTreeNodes,\n) {\n  const visibleNodesRef = React.useRef(visibleNodes);\n  visibleNodesRef.current = visibleNodes;\n  React.useImperativeHandle(\n    ref,\n    () => ({\n      scrollToNode: (nodeId, alignment) => {\n        assert(variableSizeListRef.current !== null);\n        variableSizeListRef.current.scrollToItem(visibleNodesRef.current.getIndexOfNode(nodeId), alignment);\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n}\n\nfunction usePrevious<T>(value: T): T | undefined {\n  const ref = React.useRef<T>();\n\n  React.useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n}\n\nfunction getHighlightedNodeId(highlightableTreeProps?: HighlightableTreeProps) {\n  return (highlightableTreeProps && highlightableTreeProps.activeMatch)\n    ? highlightableTreeProps.activeMatch.nodeId\n    : undefined;\n}\n\nfunction useScrollToActiveMatch(treeRef: React.RefObject<CoreTree>, highlightableTreeProps?: HighlightableTreeProps) {\n  const scrollToActive = React.useRef(false);\n  React.useEffect(() => {\n    scrollToActive.current = true;\n  }, [highlightableTreeProps]);\n\n  const onLabelRendered = React.useCallback(\n    (node: TreeModelNode) => {\n      const highlightedNodeId = getHighlightedNodeId(highlightableTreeProps);\n      if (!treeRef.current || !scrollToActive.current || !highlightedNodeId || highlightedNodeId !== node.id)\n        return;\n\n      scrollToActive.current = false;\n      const scrollTo = [...treeRef.current.getElementsByClassName(HighlightingEngine.ACTIVE_CLASS_NAME)];\n      // istanbul ignore else\n      if (scrollTo.length > 0 && scrollTo[0].scrollIntoView)\n        scrollTo[0].scrollIntoView({ behavior: \"auto\", block: \"nearest\", inline: \"end\" });\n    }, [highlightableTreeProps, treeRef]);\n\n  return onLabelRendered;\n}\n\nfunction setFocusToSelected(treeRef: React.RefObject<CoreTree>) {\n  /* istanbul ignore else */\n  if (treeRef.current)\n    treeRef.current.setFocusByClassName(\".core-tree-node.is-selected\");\n}\n"]}