@itwin/components-react 3.7.9 → 3.7.12

package/lib/cjs/components-react/breadcrumb/Breadcrumb.js

@@ -1,652 +1,652 @@
-"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 Breadcrumb
- */
-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.BreadcrumbNode = exports.BreadcrumbInput = exports.InputSwitchComponent = exports.Breadcrumb = exports.BreadcrumbMode = void 0;
-require("./Breadcrumb.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_bentley_1 = require("@itwin/core-bentley");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const ValueRendererManager_1 = require("../properties/ValueRendererManager");
-const TreeDataProvider_1 = require("../tree/TreeDataProvider");
-const UiComponents_1 = require("../UiComponents");
-const BeInspireTree_1 = require("./BeInspireTree");
-const BreadcrumbTreeUtils_1 = require("./BreadcrumbTreeUtils");
-/** Enum for Breadcrumb Mode
- * @beta
- * @deprecated in 3.0. Use Breadcrumbs from @itwin/itwinui-react.
- */
-var BreadcrumbMode;
-(function (BreadcrumbMode) {
-    BreadcrumbMode["Dropdown"] = "dropdown";
-    BreadcrumbMode["Input"] = "input";
-})(BreadcrumbMode = exports.BreadcrumbMode || (exports.BreadcrumbMode = {}));
-/**
- * Breadcrumb navigation component, with two discrete modes: text mode and dropdown mode.
- * Text mode includes autocomplete suggestions.
- * Both dropdown and text mode support arrow and tab navigation.
- * @beta
- * @deprecated in 3.0. Use Breadcrumbs from @itwin/itwinui-react.
- */
-class Breadcrumb extends React.Component {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._mounted = false;
-        this._handleUpdate = (args) => {
-            if (args.currentNode && this._mounted) {
-                const current = this.state.model.node(args.currentNode.id);
-                if (current) {
-                    const p = current.getTextualHierarchy().join(this.props.delimiter);
-                    this.setState({ current: args.currentNode, pathString: p });
-                }
-            }
-            else {
-                this.setState({ current: undefined, pathString: "" });
-            }
-        };
-        this._onModelLoaded = (rootNodes) => {
-            if (this.props.onRootNodesLoaded)
-                this.props.onRootNodesLoaded(rootNodes.map((n) => n.payload));
-            const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
-            const p = current ? current.getTextualHierarchy().join(this.props.delimiter) : "";
-            if (p !== this.state.pathString)
-                this.setState({ pathString: p });
-        };
-        this._onChildrenLoaded = (parentNode) => {
-            const children = parentNode.getChildren();
-            if (this.props.onChildrenLoaded)
-                this.props.onChildrenLoaded(parentNode.payload, (0, BeInspireTree_1.toNodes)(children).map((c) => c.payload));
-            const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
-            const p = current ? current.getTextualHierarchy().join(this.props.delimiter) : "";
-            if (p !== this.state.pathString)
-                this.setState({ pathString: p });
-        };
-        this._onModelChanged = () => {
-            // just re-set the model to initiate update
-            this.setState((prev) => ({ model: prev.model }));
-        };
-        this._onModelReady = () => {
-            // istanbul ignore else
-            if (this._mounted) {
-                const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
-                this.setState((_prevState, props) => ({ modelReady: true, pathString: current ? current.getTextualHierarchy().join(props.delimiter) : "" }));
-            }
-        };
-        this._onTreeNodeChanged = (_items) => {
-            (0, core_bentley_1.using)(this.state.model.pauseRendering(), async (_r) => {
-                await this.state.model.reload();
-            });
-        };
-        this._setDropdown = () => this.setState({ currentMode: BreadcrumbMode.Dropdown });
-        this._setInput = () => this.setState({ currentMode: BreadcrumbMode.Input });
-        this._handleNodeChange = (node) => {
-            if (this.props.path)
-                this.props.path.setCurrentNode(node);
-            else {
-                if (!node) {
-                    this.setState({ current: undefined, pathString: "" });
-                }
-                else {
-                    const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
-                    const p = current ? current.getTextualHierarchy().join(this.props.delimiter) : "";
-                    this.setState({ current: node, pathString: p });
-                }
-            }
-            if (this.state.currentMode !== BreadcrumbMode.Dropdown)
-                this._setDropdown();
-        };
-        this.state = {
-            prev: {
-                dataProvider: props.dataProvider,
-                modelReady: false,
-            },
-            model: Breadcrumb.createModel(props),
-            modelReady: false,
-            width: props.width,
-            currentMode: props.initialBreadcrumbMode,
-            current: props.initialCurrent,
-            pathString: "",
-        };
-    }
-    static createModel(props) {
-        return new BeInspireTree_1.BeInspireTree({
-            dataProvider: props.dataProvider,
-            mapPayloadToInspireNodeConfig: Breadcrumb.inspireNodeFromTreeNodeItem,
-        });
-    }
-    /** @internal */
-    static getDerivedStateFromProps(props, state) {
-        const providerChanged = (props.dataProvider !== state.prev.dataProvider);
-        // create derived state that just updates `prev` values
-        const derivedState = {
-            ...state,
-            prev: {
-                ...state.prev,
-                dataProvider: props.dataProvider,
-                modelReady: state.modelReady,
-            },
-        };
-        // in case provider changed, have to re-create `model` and reset `modelReady`
-        if (providerChanged) {
-            derivedState.model = Breadcrumb.createModel(props);
-            derivedState.modelReady = false;
-        }
-        return derivedState;
-    }
-    /** @internal */
-    componentDidMount() {
-        this._mounted = true;
-        this.assignModelListeners(this.state.model);
-        this.assignDataProviderListeners(this.props.dataProvider);
-        if (this.props.path) {
-            this.props.path.setDataProvider(this.props.dataProvider);
-            this.props.path.BreadcrumbUpdateEvent.addListener(this._handleUpdate);
-        }
-        /* istanbul ignore next */
-        if (this.props.onRender)
-            this.props.onRender();
-    }
-    /** @internal */
-    componentWillUnmount() {
-        if (this.props.path)
-            this.props.path.BreadcrumbUpdateEvent.removeListener(this._handleUpdate);
-        this.dropModelListeners(this.state.model);
-        this.dropDataProviderListeners(this.props.dataProvider);
-        this._mounted = false;
-    }
-    /** @internal */
-    shouldComponentUpdate(nextProps, nextState) {
-        if (this.state.modelReady !== nextState.modelReady || this.state.model !== nextState.model) {
-            // always render when modelReady or model changes
-            return true;
-        }
-        if (!nextState.modelReady) {
-            // if we got here and model is not ready - don't render
-            return false;
-        }
-        // otherwise, render when any of the following props / state change
-        return this.props.renderNode !== nextProps.renderNode
-            || this.props.dataProvider !== nextProps.dataProvider
-            || this.props.background !== nextProps.background
-            || this.props.dropdownOnly !== nextProps.dropdownOnly
-            || this.props.parentsOnly !== nextProps.parentsOnly
-            || this.props.showUpDir !== nextProps.showUpDir
-            || this.state.current !== nextState.current
-            || this.state.pathString !== nextState.pathString
-            || this.state.currentMode !== nextState.currentMode
-            || this.state.model.visible().some((n) => n.isDirty());
-    }
-    /** @internal */
-    componentDidUpdate(prevProps, prevState) {
-        if (this.state.model !== prevState.model) {
-            this.dropModelListeners(prevState.model);
-            this.assignModelListeners(this.state.model);
-        }
-        if (this.props.dataProvider !== prevProps.dataProvider) {
-            this.dropDataProviderListeners(prevProps.dataProvider);
-            this.assignDataProviderListeners(this.props.dataProvider);
-        }
-        /* istanbul ignore next */
-        if (this.props.onRender)
-            this.props.onRender();
-    }
-    assignModelListeners(model) {
-        model.on(BeInspireTree_1.BeInspireTreeEvent.ChangesApplied, this._onModelChanged);
-        model.on(BeInspireTree_1.BeInspireTreeEvent.ModelLoaded, this._onModelLoaded);
-        model.on(BeInspireTree_1.BeInspireTreeEvent.ChildrenLoaded, this._onChildrenLoaded);
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        model.ready.then(() => {
-            // istanbul ignore else
-            if (model === this.state.model)
-                this._onModelReady();
-        });
-    }
-    dropModelListeners(model) {
-        model.removeAllListeners();
-    }
-    assignDataProviderListeners(provider) {
-        if ((0, TreeDataProvider_1.isTreeDataProviderInterface)(provider) && provider.onTreeNodeChanged) {
-            provider.onTreeNodeChanged.addListener(this._onTreeNodeChanged);
-        }
-    }
-    dropDataProviderListeners(provider) {
-        if ((0, TreeDataProvider_1.isTreeDataProviderInterface)(provider) && provider.onTreeNodeChanged) {
-            provider.onTreeNodeChanged.removeListener(this._onTreeNodeChanged);
-        }
-    }
-    static inspireNodeFromTreeNodeItem(item, remapper) {
-        const node = {
-            id: item.id,
-            text: (0, BreadcrumbTreeUtils_1.getPropertyRecordAsString)(item.label),
-            itree: {
-                state: { collapsed: false },
-            },
-        };
-        if (item.icon)
-            node.itree.icon = item.icon;
-        if (item.hasChildren)
-            node.children = true;
-        else if (item.children)
-            node.children = item.children.map((p) => remapper(p, remapper));
-        return node;
-    }
-    /** @internal */
-    render() {
-        const classNames = (0, classnames_1.default)("components-breadcrumb", this.props.background && "background", this.props.className);
-        if (!this.state.modelReady) {
-            return (React.createElement("div", { className: classNames, style: this.props.style }));
-        }
-        const node = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
-        return (React.createElement("div", { className: classNames, style: this.props.style },
-            React.createElement("div", { className: "components-breadcrumb-head", "data-testid": "components-breadcrumb-dropdown-input-parent" }, this.props.dropdownOnly || this.props.staticOnly ?
-                React.createElement(BreadcrumbDropdown, { tree: this.state.model, node: node, onNodeChange: this._handleNodeChange, onInputStart: this._setInput, renderNode: this.props.renderNode, staticOnly: this.props.staticOnly, showUpDir: this.props.showUpDir, parentsOnly: this.props.parentsOnly, width: this.props.width, expandedNode: this.props.expandedNodes }) :
-                React.createElement(InputSwitch, { tree: this.state.model, node: node, pathString: this.state.pathString, currentMode: this.state.currentMode, onInputStart: this._setInput, onInputCancel: this._setDropdown, onNodeChange: this._handleNodeChange, width: this.props.width, showUpDir: this.props.showUpDir, parentsOnly: this.props.parentsOnly, delimiter: this.props.delimiter, onOutsideClick: this._setDropdown, renderNode: this.props.renderNode, expandedNode: this.props.expandedNodes }))));
-    }
-}
-exports.Breadcrumb = Breadcrumb;
-/** @internal */
-Breadcrumb.defaultProps = {
-    delimiter: "\\",
-    background: true,
-    initialBreadcrumbMode: BreadcrumbMode.Dropdown,
-    showUpDir: true,
-    parentsOnly: true,
-    width: "",
-};
-/** @internal */
-class InputSwitchComponent extends React.PureComponent {
-    render() {
-        const { currentMode, tree, node, onInputStart, onInputCancel, onNodeChange, renderNode, width, showUpDir, delimiter, expandedNode } = this.props;
-        switch (currentMode) {
-            case BreadcrumbMode.Dropdown:
-                return React.createElement(BreadcrumbDropdown, { tree: tree, node: node, onNodeChange: onNodeChange, renderNode: renderNode, onInputStart: onInputStart, parentsOnly: this.props.parentsOnly, showUpDir: showUpDir, width: width, expandedNode: expandedNode });
-            case BreadcrumbMode.Input:
-                return React.createElement(BreadcrumbInput, { tree: tree, node: node, onNodeChange: onNodeChange, onCancel: onInputCancel, parentsOnly: this.props.parentsOnly, delimiter: delimiter, width: width, pathString: this.props.pathString });
-            default:
-                return React.createElement("div", { "data-testid": "components-breadcrumb-error-unknown-mode" }, UiComponents_1.UiComponents.translate("breadcrumb.errorUnknownMode"));
-        }
-    }
-}
-exports.InputSwitchComponent = InputSwitchComponent;
-/** @internal */
-const InputSwitch = (0, core_react_1.withOnOutsideClick)(InputSwitchComponent); // eslint-disable-line @typescript-eslint/naming-convention
-/** @internal */
-class BreadcrumbInput extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._inputElement = null;
-        this._autocomplete = null;
-        this._mounted = false;
-        /** @internal */
-        this.state = {
-            autocompleting: false,
-            autocompleteList: [],
-            messageBoxOpened: false,
-        };
-        this._handleMessageBoxClose = () => {
-            this.setState({ messageBoxOpened: false });
-        };
-        this._handleClose = () => {
-            this.props.onCancel();
-            this.setState({ autocompleting: false });
-        };
-        this._getAutocompleteList = async (path) => {
-            const node = await this._findChildParentPartial(path);
-            if (node) {
-                const baseString = node.getTextualHierarchy().join(this.props.delimiter);
-                const children = node.getChildren();
-                const parentChildren = this.props.parentsOnly ? children.filter((child) => child.hasOrWillHaveChildren()) : children;
-                const strList = parentChildren.map((n) => baseString + this.props.delimiter + n.toString());
-                return strList.filter((e) => e.substr(0, path.length) === path);
-            }
-            else {
-                const nodes = this.props.tree.nodes();
-                const parentRoots = this.props.parentsOnly ? nodes.filter((child) => child.hasOrWillHaveChildren()) : nodes;
-                const strList = parentRoots.map((n) => n.toString() + this.props.delimiter);
-                return strList.filter((e) => e.substr(0, path.length) === path);
-            }
-        };
-        this._findChildUserInput = async (p) => {
-            const delimiter = this.props.delimiter;
-            if (p.endsWith(delimiter)) // strip last delimiter if at end
-                p = p.substr(0, p.length - delimiter.length);
-            const root = this.props.tree.nodes();
-            for (const node of root) {
-                const found = await this._find(node, p);
-                if (found)
-                    return found;
-            }
-            return undefined;
-        };
-        this._findChildParentPartial = async (p) => {
-            const delimiter = this.props.delimiter;
-            const lastDel = p.lastIndexOf(delimiter);
-            if (lastDel !== -1) // strip last delimiter and everything after
-                p = p.substring(0, lastDel);
-            else
-                return undefined;
-            const root = this.props.tree.nodes();
-            for (const node of root) {
-                const found = await this._find(node, p);
-                if (found)
-                    return found;
-            }
-            return undefined;
-        };
-        this._find = async (node, p) => {
-            const delimiter = this.props.delimiter;
-            // remove leading delimiter
-            if (p.indexOf(delimiter) === 0)
-                p = p.substr(delimiter.length);
-            const { text } = node;
-            if (text === p) {
-                return node;
-            }
-            if (p.indexOf(text) === 0 && node.hasOrWillHaveChildren()) {
-                const children = node.getChildren();
-                for (const child of children) {
-                    const n = await this._find(child, p.substr(text.length));
-                    if (n)
-                        return n;
-                }
-            }
-            return undefined;
-        };
-        this._handleClick = (event) => {
-            // istanbul ignore else
-            if (this._autocomplete) {
-                // istanbul ignore else
-                if (this._inputElement && event.target === this._inputElement) {
-                    this.setState({ autocompleting: false });
-                    this._inputElement.focus();
-                }
-            }
-        };
-        this._handleKeyDown = (event) => {
-            switch (event.key) {
-                case appui_abstract_1.SpecialKey.ArrowUp:
-                case appui_abstract_1.SpecialKey.ArrowDown:
-                    event.preventDefault();
-            }
-        };
-        this._handleKeyUp = async (event) => {
-            switch (event.key) {
-                case appui_abstract_1.SpecialKey.Escape:
-                    // istanbul ignore else
-                    if (this._mounted)
-                        this.setState({ autocompleting: false });
-                    break;
-                case appui_abstract_1.SpecialKey.ArrowUp:
-                case appui_abstract_1.SpecialKey.ArrowDown:
-                    event.preventDefault();
-                    // istanbul ignore else
-                    if (this._autocomplete && this.state.autocompleteList.length > 0) {
-                        this._autocomplete.focus();
-                        // istanbul ignore else
-                        if (this._mounted)
-                            this.setState({ autocompleting: true });
-                    }
-                    break;
-                case appui_abstract_1.SpecialKey.Enter:
-                    // istanbul ignore else
-                    if (this._inputElement) {
-                        const path = this._inputElement.value;
-                        if (path === "" || path === this.props.delimiter) {
-                            this.props.onNodeChange(undefined);
-                            // istanbul ignore else
-                            if (this._mounted)
-                                this.setState({ autocompleting: false });
-                        }
-                        else {
-                            const node = await this._findChildUserInput(path);
-                            if (node === undefined)
-                                this.setState({ messageBoxOpened: true });
-                            else
-                                this.props.onNodeChange(node.payload);
-                        }
-                    }
-                    break;
-            }
-        };
-        this._handleChange = () => {
-            // istanbul ignore else
-            if (this._inputElement) {
-                const autocompleteStr = this._inputElement.value.substring(0, this._inputElement.selectionEnd);
-                this._getAutocompleteList(autocompleteStr).then((list) => {
-                    if (this._mounted)
-                        this.setState({
-                            autocompleting: list.length > 0,
-                            autocompleteList: list,
-                        });
-                });
-            }
-        };
-    }
-    render() {
-        return (React.createElement("div", { className: "components-breadcrumb-input-root", "data-testid": "components-breadcrumb-input-root" },
-            React.createElement("input", { className: "components-breadcrumb-input", "data-testid": "components-breadcrumb-input", type: "text", ref: (e) => { this._inputElement = e; }, style: { width: this.props.width }, onKeyDown: this._handleKeyDown, onKeyUp: this._handleKeyUp, onChange: this._handleChange, onPaste: this._handleChange, onCut: this._handleChange, onFocus: this._handleChange, onClick: this._handleChange, spellCheck: false }),
-            React.createElement("div", { className: "components-breadcrumb-close icon icon-close", "data-testid": "components-breadcrumb-input-close", onClick: this._handleClose, role: "button", tabIndex: -1 }),
-            React.createElement(core_react_1.ContextMenu, { ref: (el) => { this._autocomplete = el; }, style: { width: "100%" }, opened: this.state.autocompleting, edgeLimit: false, selectedIndex: 0, floating: false, autoflip: false, onEsc: () => {
-                    // istanbul ignore else
-                    if (this._inputElement)
-                        this._inputElement.focus();
-                } }, this.state.autocompleteList.map((listItem, index) => {
-                let l = 0;
-                // istanbul ignore else
-                if (this._inputElement) {
-                    l = this._inputElement.value.length;
-                }
-                return (React.createElement(core_react_1.ContextMenuItem, { key: index, onSelect: (event) => {
-                        // istanbul ignore else
-                        if (this._inputElement) {
-                            this._inputElement.value = listItem;
-                            this._inputElement.focus();
-                            this._inputElement.setSelectionRange(listItem.length, listItem.length);
-                            const autocompleteStr = this._inputElement.value.substring(0, this._inputElement.selectionEnd);
-                            this._getAutocompleteList(autocompleteStr).then((list) => {
-                                // istanbul ignore else
-                                if (this._mounted)
-                                    this.setState({
-                                        autocompleting: false,
-                                        autocompleteList: list,
-                                    });
-                            });
-                            event.stopPropagation();
-                        }
-                    } },
-                    React.createElement("span", { className: "components-breadcrumb-selected" }, listItem.substr(0, l)),
-                    listItem.substr(l)));
-            })),
-            React.createElement(core_react_1.MessageBox, { opened: this.state.messageBoxOpened, modal: false, onClose: this._handleMessageBoxClose, severity: appui_abstract_1.MessageSeverity.Warning, buttonCluster: [{ type: core_react_1.DialogButtonType.OK, onClick: this._handleMessageBoxClose }] }, UiComponents_1.UiComponents.translate("breadcrumb.invalidBreadcrumbPath"))));
-    }
-    /** @internal */
-    componentDidMount() {
-        this._mounted = true;
-        // istanbul ignore else
-        if (this._inputElement) {
-            const activeWindow = this._inputElement.ownerDocument.defaultView;
-            activeWindow && activeWindow.addEventListener("click", this._handleClick);
-            this._inputElement.value = this.props.pathString;
-            this._inputElement.focus();
-        }
-    }
-    /** @internal */
-    componentWillUnmount() {
-        // istanbul ignore else
-        if (this._inputElement) {
-            const activeWindow = this._inputElement.ownerDocument.defaultView;
-            activeWindow && activeWindow.removeEventListener("click", this._handleClick);
-        }
-        this._mounted = false;
-    }
-}
-exports.BreadcrumbInput = BreadcrumbInput;
-/** @internal */
-class BreadcrumbDropdown extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._onModelLoaded = (_rootNodes) => {
-            this.forceUpdate();
-        };
-        this._onChildrenLoaded = (_parentNode) => {
-            this.forceUpdate();
-        };
-        this._handleUpClick = () => {
-            let parent;
-            if (this.props.node) {
-                const p = (this.props.node.getParent());
-                if (p)
-                    parent = p.payload;
-            }
-            this.props.onNodeChange(parent);
-        };
-        this._focusInput = (event) => {
-            if (event.target === event.currentTarget && this.props.onInputStart) // check if click is direct, or bubbled
-                this.props.onInputStart();
-        };
-    }
-    /** @internal */
-    componentDidMount() {
-        this.props.tree.on(BeInspireTree_1.BeInspireTreeEvent.ChildrenLoaded, this._onChildrenLoaded);
-        this.props.tree.on(BeInspireTree_1.BeInspireTreeEvent.ModelLoaded, this._onModelLoaded);
-    }
-    /** @internal */
-    componentWillUnmount() {
-        this.props.tree.removeListener(BeInspireTree_1.BeInspireTreeEvent.ChildrenLoaded, this._onChildrenLoaded);
-        this.props.tree.removeListener(BeInspireTree_1.BeInspireTreeEvent.ModelLoaded, this._onModelLoaded);
-    }
-    /** @internal */
-    shouldComponentUpdate(nextProps) {
-        return this.props.tree !== nextProps.tree ||
-            this.props.node !== nextProps.node ||
-            (nextProps.node && /* istanbul ignore next */ nextProps.node.isDirty()) ||
-            this.props.onInputStart !== nextProps.onInputStart ||
-            this.props.delimiter !== nextProps.delimiter ||
-            this.props.width !== nextProps.width ||
-            this.props.renderNode !== nextProps.renderNode;
-    }
-    render() {
-        const node = this.props.node;
-        let nodes;
-        if (node) {
-            nodes = (0, BeInspireTree_1.toNodes)(node.getParents());
-            nodes.reverse();
-            nodes.push(node);
-        }
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: "components-breadcrumb-dropdown", "data-testid": "components-breadcrumb-dropdown-background", style: { width: this.props.width }, onClick: this._focusInput, role: "button", tabIndex: -1 },
-            !this.props.staticOnly && this.props.showUpDir ?
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                React.createElement("div", { "data-testid": "components-breadcrumb-up-dir", className: (0, classnames_1.default)("components-breadcrumb-up-dir", "icon", "icon-sort-up", { root: this.props.node === undefined }), onClick: this._handleUpClick, role: "button", tabIndex: -1 })
-                : undefined,
-            React.createElement("div", { className: "components-breadcrumb-crumb-list", "data-testid": "components-breadcrumb-crumb-list" },
-                React.createElement(BreadcrumbDropdownNode, { key: -1, tree: this.props.tree, node: undefined, onNodeSelected: this.props.onNodeChange, staticOnly: this.props.staticOnly, parentsOnly: this.props.parentsOnly, last: !nodes || nodes.length === 0, renderNode: this.props.renderNode, expandedNode: this.props.expandedNode }),
-                nodes && nodes.map((n, i) => {
-                    return (React.createElement(BreadcrumbDropdownNode, { key: i, tree: this.props.tree, node: n, onNodeSelected: this.props.onNodeChange, staticOnly: this.props.staticOnly, parentsOnly: this.props.parentsOnly, last: i === nodes.length - 1, renderNode: this.props.renderNode, expandedNode: this.props.expandedNode }));
-                }))));
-    }
-}
-/** @internal */
-class BreadcrumbDropdownNode extends React.Component {
-    constructor(props) {
-        super(props);
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        this.renderNode = (props, _node, _parent) => {
-            return React.createElement(BreadcrumbNode, { label: props.label, icon: props.icon });
-        };
-    }
-    render() {
-        const { node } = this.props;
-        let nodeChildren = this.props.tree.nodes();
-        if (node)
-            nodeChildren = (0, BeInspireTree_1.toNodes)(node.getChildren());
-        const n = node && node.payload;
-        let parent;
-        if (node) {
-            const p = node.getParent();
-            if (p)
-                parent = p.payload;
-        }
-        const label = n && n.label ? n.label : appui_abstract_1.PropertyRecord.fromString("");
-        const icon = n && n.icon ? n.icon : "icon-browse";
-        const renderNode = this.props.renderNode ? this.props.renderNode : this.renderNode;
-        if (this.props.parentsOnly)
-            nodeChildren = nodeChildren.filter((child) => child.hasOrWillHaveChildren());
-        if (nodeChildren.length > 0) {
-            if (this.props.staticOnly) {
-                return React.createElement("span", { "data-testid": "components-breadcrumb-static-button", className: "components-breadcrumb-split-button static" },
-                    renderNode({ label, icon }, n, parent),
-                    !this.props.last ? React.createElement("span", { className: "static-arrow-icon icon icon-chevron-right" }) : undefined);
-            }
-            return (React.createElement(core_react_1.SplitButton, { className: "components-breadcrumb-split-button", onClick: (event) => {
-                    event.stopPropagation();
-                    this.props.onNodeSelected(n);
-                }, label: renderNode({ label, icon }, n, parent), initialExpanded: this.props.expandedNode }, nodeChildren.map((child, d) => {
-                return (React.createElement(core_react_1.ContextMenuItem, { key: d, icon: child.payload.icon, onSelect: (_event) => {
-                        this.props.onNodeSelected(child.payload);
-                    } }, ValueRendererManager_1.PropertyValueRendererManager.defaultManager.render(child.payload.label)));
-            })));
-        }
-        else {
-            return (React.createElement("span", { className: (0, classnames_1.default)("components-breadcrumb-end-node", { static: this.props.staticOnly }) }, renderNode({ label, icon }, n, parent)));
-        }
-    }
-}
-/** Default BreadcrumbNode component
- * @beta
- * @deprecated in 3.0. Obsolete.
- */
-class BreadcrumbNode extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const { icon, label } = this.props;
-        return React.createElement("span", { "data-testid": "components-breadcrumb-node" },
-            React.createElement("span", { className: (0, classnames_1.default)("icon", icon) }),
-            ValueRendererManager_1.PropertyValueRendererManager.defaultManager.render(label));
-    }
-    componentDidMount() {
-        // istanbul ignore next
-        if (this.props.onRender)
-            this.props.onRender();
-    }
-    componentDidUpdate() {
-        // istanbul ignore next
-        if (this.props.onRender)
-            this.props.onRender();
-    }
-}
-exports.BreadcrumbNode = BreadcrumbNode;
+"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 Breadcrumb
+ */
+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.BreadcrumbNode = exports.BreadcrumbInput = exports.InputSwitchComponent = exports.Breadcrumb = exports.BreadcrumbMode = void 0;
+require("./Breadcrumb.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const ValueRendererManager_1 = require("../properties/ValueRendererManager");
+const TreeDataProvider_1 = require("../tree/TreeDataProvider");
+const UiComponents_1 = require("../UiComponents");
+const BeInspireTree_1 = require("./BeInspireTree");
+const BreadcrumbTreeUtils_1 = require("./BreadcrumbTreeUtils");
+/** Enum for Breadcrumb Mode
+ * @beta
+ * @deprecated in 3.0. Use Breadcrumbs from @itwin/itwinui-react.
+ */
+var BreadcrumbMode;
+(function (BreadcrumbMode) {
+    BreadcrumbMode["Dropdown"] = "dropdown";
+    BreadcrumbMode["Input"] = "input";
+})(BreadcrumbMode = exports.BreadcrumbMode || (exports.BreadcrumbMode = {}));
+/**
+ * Breadcrumb navigation component, with two discrete modes: text mode and dropdown mode.
+ * Text mode includes autocomplete suggestions.
+ * Both dropdown and text mode support arrow and tab navigation.
+ * @beta
+ * @deprecated in 3.0. Use Breadcrumbs from @itwin/itwinui-react.
+ */
+class Breadcrumb extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._mounted = false;
+        this._handleUpdate = (args) => {
+            if (args.currentNode && this._mounted) {
+                const current = this.state.model.node(args.currentNode.id);
+                if (current) {
+                    const p = current.getTextualHierarchy().join(this.props.delimiter);
+                    this.setState({ current: args.currentNode, pathString: p });
+                }
+            }
+            else {
+                this.setState({ current: undefined, pathString: "" });
+            }
+        };
+        this._onModelLoaded = (rootNodes) => {
+            if (this.props.onRootNodesLoaded)
+                this.props.onRootNodesLoaded(rootNodes.map((n) => n.payload));
+            const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
+            const p = current ? current.getTextualHierarchy().join(this.props.delimiter) : "";
+            if (p !== this.state.pathString)
+                this.setState({ pathString: p });
+        };
+        this._onChildrenLoaded = (parentNode) => {
+            const children = parentNode.getChildren();
+            if (this.props.onChildrenLoaded)
+                this.props.onChildrenLoaded(parentNode.payload, (0, BeInspireTree_1.toNodes)(children).map((c) => c.payload));
+            const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
+            const p = current ? current.getTextualHierarchy().join(this.props.delimiter) : "";
+            if (p !== this.state.pathString)
+                this.setState({ pathString: p });
+        };
+        this._onModelChanged = () => {
+            // just re-set the model to initiate update
+            this.setState((prev) => ({ model: prev.model }));
+        };
+        this._onModelReady = () => {
+            // istanbul ignore else
+            if (this._mounted) {
+                const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
+                this.setState((_prevState, props) => ({ modelReady: true, pathString: current ? current.getTextualHierarchy().join(props.delimiter) : "" }));
+            }
+        };
+        this._onTreeNodeChanged = (_items) => {
+            (0, core_bentley_1.using)(this.state.model.pauseRendering(), async (_r) => {
+                await this.state.model.reload();
+            });
+        };
+        this._setDropdown = () => this.setState({ currentMode: BreadcrumbMode.Dropdown });
+        this._setInput = () => this.setState({ currentMode: BreadcrumbMode.Input });
+        this._handleNodeChange = (node) => {
+            if (this.props.path)
+                this.props.path.setCurrentNode(node);
+            else {
+                if (!node) {
+                    this.setState({ current: undefined, pathString: "" });
+                }
+                else {
+                    const current = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
+                    const p = current ? current.getTextualHierarchy().join(this.props.delimiter) : "";
+                    this.setState({ current: node, pathString: p });
+                }
+            }
+            if (this.state.currentMode !== BreadcrumbMode.Dropdown)
+                this._setDropdown();
+        };
+        this.state = {
+            prev: {
+                dataProvider: props.dataProvider,
+                modelReady: false,
+            },
+            model: Breadcrumb.createModel(props),
+            modelReady: false,
+            width: props.width,
+            currentMode: props.initialBreadcrumbMode,
+            current: props.initialCurrent,
+            pathString: "",
+        };
+    }
+    static createModel(props) {
+        return new BeInspireTree_1.BeInspireTree({
+            dataProvider: props.dataProvider,
+            mapPayloadToInspireNodeConfig: Breadcrumb.inspireNodeFromTreeNodeItem,
+        });
+    }
+    /** @internal */
+    static getDerivedStateFromProps(props, state) {
+        const providerChanged = (props.dataProvider !== state.prev.dataProvider);
+        // create derived state that just updates `prev` values
+        const derivedState = {
+            ...state,
+            prev: {
+                ...state.prev,
+                dataProvider: props.dataProvider,
+                modelReady: state.modelReady,
+            },
+        };
+        // in case provider changed, have to re-create `model` and reset `modelReady`
+        if (providerChanged) {
+            derivedState.model = Breadcrumb.createModel(props);
+            derivedState.modelReady = false;
+        }
+        return derivedState;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._mounted = true;
+        this.assignModelListeners(this.state.model);
+        this.assignDataProviderListeners(this.props.dataProvider);
+        if (this.props.path) {
+            this.props.path.setDataProvider(this.props.dataProvider);
+            this.props.path.BreadcrumbUpdateEvent.addListener(this._handleUpdate);
+        }
+        /* istanbul ignore next */
+        if (this.props.onRender)
+            this.props.onRender();
+    }
+    /** @internal */
+    componentWillUnmount() {
+        if (this.props.path)
+            this.props.path.BreadcrumbUpdateEvent.removeListener(this._handleUpdate);
+        this.dropModelListeners(this.state.model);
+        this.dropDataProviderListeners(this.props.dataProvider);
+        this._mounted = false;
+    }
+    /** @internal */
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this.state.modelReady !== nextState.modelReady || this.state.model !== nextState.model) {
+            // always render when modelReady or model changes
+            return true;
+        }
+        if (!nextState.modelReady) {
+            // if we got here and model is not ready - don't render
+            return false;
+        }
+        // otherwise, render when any of the following props / state change
+        return this.props.renderNode !== nextProps.renderNode
+            || this.props.dataProvider !== nextProps.dataProvider
+            || this.props.background !== nextProps.background
+            || this.props.dropdownOnly !== nextProps.dropdownOnly
+            || this.props.parentsOnly !== nextProps.parentsOnly
+            || this.props.showUpDir !== nextProps.showUpDir
+            || this.state.current !== nextState.current
+            || this.state.pathString !== nextState.pathString
+            || this.state.currentMode !== nextState.currentMode
+            || this.state.model.visible().some((n) => n.isDirty());
+    }
+    /** @internal */
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.model !== prevState.model) {
+            this.dropModelListeners(prevState.model);
+            this.assignModelListeners(this.state.model);
+        }
+        if (this.props.dataProvider !== prevProps.dataProvider) {
+            this.dropDataProviderListeners(prevProps.dataProvider);
+            this.assignDataProviderListeners(this.props.dataProvider);
+        }
+        /* istanbul ignore next */
+        if (this.props.onRender)
+            this.props.onRender();
+    }
+    assignModelListeners(model) {
+        model.on(BeInspireTree_1.BeInspireTreeEvent.ChangesApplied, this._onModelChanged);
+        model.on(BeInspireTree_1.BeInspireTreeEvent.ModelLoaded, this._onModelLoaded);
+        model.on(BeInspireTree_1.BeInspireTreeEvent.ChildrenLoaded, this._onChildrenLoaded);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        model.ready.then(() => {
+            // istanbul ignore else
+            if (model === this.state.model)
+                this._onModelReady();
+        });
+    }
+    dropModelListeners(model) {
+        model.removeAllListeners();
+    }
+    assignDataProviderListeners(provider) {
+        if ((0, TreeDataProvider_1.isTreeDataProviderInterface)(provider) && provider.onTreeNodeChanged) {
+            provider.onTreeNodeChanged.addListener(this._onTreeNodeChanged);
+        }
+    }
+    dropDataProviderListeners(provider) {
+        if ((0, TreeDataProvider_1.isTreeDataProviderInterface)(provider) && provider.onTreeNodeChanged) {
+            provider.onTreeNodeChanged.removeListener(this._onTreeNodeChanged);
+        }
+    }
+    static inspireNodeFromTreeNodeItem(item, remapper) {
+        const node = {
+            id: item.id,
+            text: (0, BreadcrumbTreeUtils_1.getPropertyRecordAsString)(item.label),
+            itree: {
+                state: { collapsed: false },
+            },
+        };
+        if (item.icon)
+            node.itree.icon = item.icon;
+        if (item.hasChildren)
+            node.children = true;
+        else if (item.children)
+            node.children = item.children.map((p) => remapper(p, remapper));
+        return node;
+    }
+    /** @internal */
+    render() {
+        const classNames = (0, classnames_1.default)("components-breadcrumb", this.props.background && "background", this.props.className);
+        if (!this.state.modelReady) {
+            return (React.createElement("div", { className: classNames, style: this.props.style }));
+        }
+        const node = this.state.current ? this.state.model.node(this.state.current.id) : undefined;
+        return (React.createElement("div", { className: classNames, style: this.props.style },
+            React.createElement("div", { className: "components-breadcrumb-head", "data-testid": "components-breadcrumb-dropdown-input-parent" }, this.props.dropdownOnly || this.props.staticOnly ?
+                React.createElement(BreadcrumbDropdown, { tree: this.state.model, node: node, onNodeChange: this._handleNodeChange, onInputStart: this._setInput, renderNode: this.props.renderNode, staticOnly: this.props.staticOnly, showUpDir: this.props.showUpDir, parentsOnly: this.props.parentsOnly, width: this.props.width, expandedNode: this.props.expandedNodes }) :
+                React.createElement(InputSwitch, { tree: this.state.model, node: node, pathString: this.state.pathString, currentMode: this.state.currentMode, onInputStart: this._setInput, onInputCancel: this._setDropdown, onNodeChange: this._handleNodeChange, width: this.props.width, showUpDir: this.props.showUpDir, parentsOnly: this.props.parentsOnly, delimiter: this.props.delimiter, onOutsideClick: this._setDropdown, renderNode: this.props.renderNode, expandedNode: this.props.expandedNodes }))));
+    }
+}
+exports.Breadcrumb = Breadcrumb;
+/** @internal */
+Breadcrumb.defaultProps = {
+    delimiter: "\\",
+    background: true,
+    initialBreadcrumbMode: BreadcrumbMode.Dropdown,
+    showUpDir: true,
+    parentsOnly: true,
+    width: "",
+};
+/** @internal */
+class InputSwitchComponent extends React.PureComponent {
+    render() {
+        const { currentMode, tree, node, onInputStart, onInputCancel, onNodeChange, renderNode, width, showUpDir, delimiter, expandedNode } = this.props;
+        switch (currentMode) {
+            case BreadcrumbMode.Dropdown:
+                return React.createElement(BreadcrumbDropdown, { tree: tree, node: node, onNodeChange: onNodeChange, renderNode: renderNode, onInputStart: onInputStart, parentsOnly: this.props.parentsOnly, showUpDir: showUpDir, width: width, expandedNode: expandedNode });
+            case BreadcrumbMode.Input:
+                return React.createElement(BreadcrumbInput, { tree: tree, node: node, onNodeChange: onNodeChange, onCancel: onInputCancel, parentsOnly: this.props.parentsOnly, delimiter: delimiter, width: width, pathString: this.props.pathString });
+            default:
+                return React.createElement("div", { "data-testid": "components-breadcrumb-error-unknown-mode" }, UiComponents_1.UiComponents.translate("breadcrumb.errorUnknownMode"));
+        }
+    }
+}
+exports.InputSwitchComponent = InputSwitchComponent;
+/** @internal */
+const InputSwitch = (0, core_react_1.withOnOutsideClick)(InputSwitchComponent); // eslint-disable-line @typescript-eslint/naming-convention
+/** @internal */
+class BreadcrumbInput extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._inputElement = null;
+        this._autocomplete = null;
+        this._mounted = false;
+        /** @internal */
+        this.state = {
+            autocompleting: false,
+            autocompleteList: [],
+            messageBoxOpened: false,
+        };
+        this._handleMessageBoxClose = () => {
+            this.setState({ messageBoxOpened: false });
+        };
+        this._handleClose = () => {
+            this.props.onCancel();
+            this.setState({ autocompleting: false });
+        };
+        this._getAutocompleteList = async (path) => {
+            const node = await this._findChildParentPartial(path);
+            if (node) {
+                const baseString = node.getTextualHierarchy().join(this.props.delimiter);
+                const children = node.getChildren();
+                const parentChildren = this.props.parentsOnly ? children.filter((child) => child.hasOrWillHaveChildren()) : children;
+                const strList = parentChildren.map((n) => baseString + this.props.delimiter + n.toString());
+                return strList.filter((e) => e.substr(0, path.length) === path);
+            }
+            else {
+                const nodes = this.props.tree.nodes();
+                const parentRoots = this.props.parentsOnly ? nodes.filter((child) => child.hasOrWillHaveChildren()) : nodes;
+                const strList = parentRoots.map((n) => n.toString() + this.props.delimiter);
+                return strList.filter((e) => e.substr(0, path.length) === path);
+            }
+        };
+        this._findChildUserInput = async (p) => {
+            const delimiter = this.props.delimiter;
+            if (p.endsWith(delimiter)) // strip last delimiter if at end
+                p = p.substr(0, p.length - delimiter.length);
+            const root = this.props.tree.nodes();
+            for (const node of root) {
+                const found = await this._find(node, p);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        };
+        this._findChildParentPartial = async (p) => {
+            const delimiter = this.props.delimiter;
+            const lastDel = p.lastIndexOf(delimiter);
+            if (lastDel !== -1) // strip last delimiter and everything after
+                p = p.substring(0, lastDel);
+            else
+                return undefined;
+            const root = this.props.tree.nodes();
+            for (const node of root) {
+                const found = await this._find(node, p);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        };
+        this._find = async (node, p) => {
+            const delimiter = this.props.delimiter;
+            // remove leading delimiter
+            if (p.indexOf(delimiter) === 0)
+                p = p.substr(delimiter.length);
+            const { text } = node;
+            if (text === p) {
+                return node;
+            }
+            if (p.indexOf(text) === 0 && node.hasOrWillHaveChildren()) {
+                const children = node.getChildren();
+                for (const child of children) {
+                    const n = await this._find(child, p.substr(text.length));
+                    if (n)
+                        return n;
+                }
+            }
+            return undefined;
+        };
+        this._handleClick = (event) => {
+            // istanbul ignore else
+            if (this._autocomplete) {
+                // istanbul ignore else
+                if (this._inputElement && event.target === this._inputElement) {
+                    this.setState({ autocompleting: false });
+                    this._inputElement.focus();
+                }
+            }
+        };
+        this._handleKeyDown = (event) => {
+            switch (event.key) {
+                case appui_abstract_1.SpecialKey.ArrowUp:
+                case appui_abstract_1.SpecialKey.ArrowDown:
+                    event.preventDefault();
+            }
+        };
+        this._handleKeyUp = async (event) => {
+            switch (event.key) {
+                case appui_abstract_1.SpecialKey.Escape:
+                    // istanbul ignore else
+                    if (this._mounted)
+                        this.setState({ autocompleting: false });
+                    break;
+                case appui_abstract_1.SpecialKey.ArrowUp:
+                case appui_abstract_1.SpecialKey.ArrowDown:
+                    event.preventDefault();
+                    // istanbul ignore else
+                    if (this._autocomplete && this.state.autocompleteList.length > 0) {
+                        this._autocomplete.focus();
+                        // istanbul ignore else
+                        if (this._mounted)
+                            this.setState({ autocompleting: true });
+                    }
+                    break;
+                case appui_abstract_1.SpecialKey.Enter:
+                    // istanbul ignore else
+                    if (this._inputElement) {
+                        const path = this._inputElement.value;
+                        if (path === "" || path === this.props.delimiter) {
+                            this.props.onNodeChange(undefined);
+                            // istanbul ignore else
+                            if (this._mounted)
+                                this.setState({ autocompleting: false });
+                        }
+                        else {
+                            const node = await this._findChildUserInput(path);
+                            if (node === undefined)
+                                this.setState({ messageBoxOpened: true });
+                            else
+                                this.props.onNodeChange(node.payload);
+                        }
+                    }
+                    break;
+            }
+        };
+        this._handleChange = () => {
+            // istanbul ignore else
+            if (this._inputElement) {
+                const autocompleteStr = this._inputElement.value.substring(0, this._inputElement.selectionEnd);
+                this._getAutocompleteList(autocompleteStr).then((list) => {
+                    if (this._mounted)
+                        this.setState({
+                            autocompleting: list.length > 0,
+                            autocompleteList: list,
+                        });
+                });
+            }
+        };
+    }
+    render() {
+        return (React.createElement("div", { className: "components-breadcrumb-input-root", "data-testid": "components-breadcrumb-input-root" },
+            React.createElement("input", { className: "components-breadcrumb-input", "data-testid": "components-breadcrumb-input", type: "text", ref: (e) => { this._inputElement = e; }, style: { width: this.props.width }, onKeyDown: this._handleKeyDown, onKeyUp: this._handleKeyUp, onChange: this._handleChange, onPaste: this._handleChange, onCut: this._handleChange, onFocus: this._handleChange, onClick: this._handleChange, spellCheck: false }),
+            React.createElement("div", { className: "components-breadcrumb-close icon icon-close", "data-testid": "components-breadcrumb-input-close", onClick: this._handleClose, role: "button", tabIndex: -1 }),
+            React.createElement(core_react_1.ContextMenu, { ref: (el) => { this._autocomplete = el; }, style: { width: "100%" }, opened: this.state.autocompleting, edgeLimit: false, selectedIndex: 0, floating: false, autoflip: false, onEsc: () => {
+                    // istanbul ignore else
+                    if (this._inputElement)
+                        this._inputElement.focus();
+                } }, this.state.autocompleteList.map((listItem, index) => {
+                let l = 0;
+                // istanbul ignore else
+                if (this._inputElement) {
+                    l = this._inputElement.value.length;
+                }
+                return (React.createElement(core_react_1.ContextMenuItem, { key: index, onSelect: (event) => {
+                        // istanbul ignore else
+                        if (this._inputElement) {
+                            this._inputElement.value = listItem;
+                            this._inputElement.focus();
+                            this._inputElement.setSelectionRange(listItem.length, listItem.length);
+                            const autocompleteStr = this._inputElement.value.substring(0, this._inputElement.selectionEnd);
+                            this._getAutocompleteList(autocompleteStr).then((list) => {
+                                // istanbul ignore else
+                                if (this._mounted)
+                                    this.setState({
+                                        autocompleting: false,
+                                        autocompleteList: list,
+                                    });
+                            });
+                            event.stopPropagation();
+                        }
+                    } },
+                    React.createElement("span", { className: "components-breadcrumb-selected" }, listItem.substr(0, l)),
+                    listItem.substr(l)));
+            })),
+            React.createElement(core_react_1.MessageBox, { opened: this.state.messageBoxOpened, modal: false, onClose: this._handleMessageBoxClose, severity: appui_abstract_1.MessageSeverity.Warning, buttonCluster: [{ type: core_react_1.DialogButtonType.OK, onClick: this._handleMessageBoxClose }] }, UiComponents_1.UiComponents.translate("breadcrumb.invalidBreadcrumbPath"))));
+    }
+    /** @internal */
+    componentDidMount() {
+        this._mounted = true;
+        // istanbul ignore else
+        if (this._inputElement) {
+            const activeWindow = this._inputElement.ownerDocument.defaultView;
+            activeWindow && activeWindow.addEventListener("click", this._handleClick);
+            this._inputElement.value = this.props.pathString;
+            this._inputElement.focus();
+        }
+    }
+    /** @internal */
+    componentWillUnmount() {
+        // istanbul ignore else
+        if (this._inputElement) {
+            const activeWindow = this._inputElement.ownerDocument.defaultView;
+            activeWindow && activeWindow.removeEventListener("click", this._handleClick);
+        }
+        this._mounted = false;
+    }
+}
+exports.BreadcrumbInput = BreadcrumbInput;
+/** @internal */
+class BreadcrumbDropdown extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._onModelLoaded = (_rootNodes) => {
+            this.forceUpdate();
+        };
+        this._onChildrenLoaded = (_parentNode) => {
+            this.forceUpdate();
+        };
+        this._handleUpClick = () => {
+            let parent;
+            if (this.props.node) {
+                const p = (this.props.node.getParent());
+                if (p)
+                    parent = p.payload;
+            }
+            this.props.onNodeChange(parent);
+        };
+        this._focusInput = (event) => {
+            if (event.target === event.currentTarget && this.props.onInputStart) // check if click is direct, or bubbled
+                this.props.onInputStart();
+        };
+    }
+    /** @internal */
+    componentDidMount() {
+        this.props.tree.on(BeInspireTree_1.BeInspireTreeEvent.ChildrenLoaded, this._onChildrenLoaded);
+        this.props.tree.on(BeInspireTree_1.BeInspireTreeEvent.ModelLoaded, this._onModelLoaded);
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this.props.tree.removeListener(BeInspireTree_1.BeInspireTreeEvent.ChildrenLoaded, this._onChildrenLoaded);
+        this.props.tree.removeListener(BeInspireTree_1.BeInspireTreeEvent.ModelLoaded, this._onModelLoaded);
+    }
+    /** @internal */
+    shouldComponentUpdate(nextProps) {
+        return this.props.tree !== nextProps.tree ||
+            this.props.node !== nextProps.node ||
+            (nextProps.node && /* istanbul ignore next */ nextProps.node.isDirty()) ||
+            this.props.onInputStart !== nextProps.onInputStart ||
+            this.props.delimiter !== nextProps.delimiter ||
+            this.props.width !== nextProps.width ||
+            this.props.renderNode !== nextProps.renderNode;
+    }
+    render() {
+        const node = this.props.node;
+        let nodes;
+        if (node) {
+            nodes = (0, BeInspireTree_1.toNodes)(node.getParents());
+            nodes.reverse();
+            nodes.push(node);
+        }
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: "components-breadcrumb-dropdown", "data-testid": "components-breadcrumb-dropdown-background", style: { width: this.props.width }, onClick: this._focusInput, role: "button", tabIndex: -1 },
+            !this.props.staticOnly && this.props.showUpDir ?
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                React.createElement("div", { "data-testid": "components-breadcrumb-up-dir", className: (0, classnames_1.default)("components-breadcrumb-up-dir", "icon", "icon-sort-up", { root: this.props.node === undefined }), onClick: this._handleUpClick, role: "button", tabIndex: -1 })
+                : undefined,
+            React.createElement("div", { className: "components-breadcrumb-crumb-list", "data-testid": "components-breadcrumb-crumb-list" },
+                React.createElement(BreadcrumbDropdownNode, { key: -1, tree: this.props.tree, node: undefined, onNodeSelected: this.props.onNodeChange, staticOnly: this.props.staticOnly, parentsOnly: this.props.parentsOnly, last: !nodes || nodes.length === 0, renderNode: this.props.renderNode, expandedNode: this.props.expandedNode }),
+                nodes && nodes.map((n, i) => {
+                    return (React.createElement(BreadcrumbDropdownNode, { key: i, tree: this.props.tree, node: n, onNodeSelected: this.props.onNodeChange, staticOnly: this.props.staticOnly, parentsOnly: this.props.parentsOnly, last: i === nodes.length - 1, renderNode: this.props.renderNode, expandedNode: this.props.expandedNode }));
+                }))));
+    }
+}
+/** @internal */
+class BreadcrumbDropdownNode extends React.Component {
+    constructor(props) {
+        super(props);
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.renderNode = (props, _node, _parent) => {
+            return React.createElement(BreadcrumbNode, { label: props.label, icon: props.icon });
+        };
+    }
+    render() {
+        const { node } = this.props;
+        let nodeChildren = this.props.tree.nodes();
+        if (node)
+            nodeChildren = (0, BeInspireTree_1.toNodes)(node.getChildren());
+        const n = node && node.payload;
+        let parent;
+        if (node) {
+            const p = node.getParent();
+            if (p)
+                parent = p.payload;
+        }
+        const label = n && n.label ? n.label : appui_abstract_1.PropertyRecord.fromString("");
+        const icon = n && n.icon ? n.icon : "icon-browse";
+        const renderNode = this.props.renderNode ? this.props.renderNode : this.renderNode;
+        if (this.props.parentsOnly)
+            nodeChildren = nodeChildren.filter((child) => child.hasOrWillHaveChildren());
+        if (nodeChildren.length > 0) {
+            if (this.props.staticOnly) {
+                return React.createElement("span", { "data-testid": "components-breadcrumb-static-button", className: "components-breadcrumb-split-button static" },
+                    renderNode({ label, icon }, n, parent),
+                    !this.props.last ? React.createElement("span", { className: "static-arrow-icon icon icon-chevron-right" }) : undefined);
+            }
+            return (React.createElement(core_react_1.SplitButton, { className: "components-breadcrumb-split-button", onClick: (event) => {
+                    event.stopPropagation();
+                    this.props.onNodeSelected(n);
+                }, label: renderNode({ label, icon }, n, parent), initialExpanded: this.props.expandedNode }, nodeChildren.map((child, d) => {
+                return (React.createElement(core_react_1.ContextMenuItem, { key: d, icon: child.payload.icon, onSelect: (_event) => {
+                        this.props.onNodeSelected(child.payload);
+                    } }, ValueRendererManager_1.PropertyValueRendererManager.defaultManager.render(child.payload.label)));
+            })));
+        }
+        else {
+            return (React.createElement("span", { className: (0, classnames_1.default)("components-breadcrumb-end-node", { static: this.props.staticOnly }) }, renderNode({ label, icon }, n, parent)));
+        }
+    }
+}
+/** Default BreadcrumbNode component
+ * @beta
+ * @deprecated in 3.0. Obsolete.
+ */
+class BreadcrumbNode extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { icon, label } = this.props;
+        return React.createElement("span", { "data-testid": "components-breadcrumb-node" },
+            React.createElement("span", { className: (0, classnames_1.default)("icon", icon) }),
+            ValueRendererManager_1.PropertyValueRendererManager.defaultManager.render(label));
+    }
+    componentDidMount() {
+        // istanbul ignore next
+        if (this.props.onRender)
+            this.props.onRender();
+    }
+    componentDidUpdate() {
+        // istanbul ignore next
+        if (this.props.onRender)
+            this.props.onRender();
+    }
+}
+exports.BreadcrumbNode = BreadcrumbNode;
 //# sourceMappingURL=Breadcrumb.js.map