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

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

@@ -0,0 +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.
+ */
+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 itwinui-react instead
+ */
+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.
+ */
+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