flexlayout-react 0.5.21 → 0.6.0

package/dist/flexlayout.js

@@ -368,7 +368,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.showPopup = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _1 = __webpack_require__(/*! . */ \"./src/index.ts\");\nvar Types_1 = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nfunction showPopup(layoutDiv, triggerElement, items, onSelect, classNameMapper) {\n    var currentDocument = triggerElement.ownerDocument;\n    var triggerRect = triggerElement.getBoundingClientRect();\n    var layoutRect = layoutDiv.getBoundingClientRect();\n    var elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    _1.DragDrop.instance.addGlass(function () { return onHide(); });\n    _1.DragDrop.instance.setGlassCursorOverride(\"default\");\n    layoutDiv.appendChild(elm);\n    var onHide = function () {\n        _1.DragDrop.instance.hideGlass();\n        layoutDiv.removeChild(elm);\n        ReactDOM.unmountComponentAtNode(elm);\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\n    };\n    var onElementMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onDocMouseDown = function (event) {\n        onHide();\n    };\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\n    ReactDOM.render(React.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper }), elm);\n}\nexports.showPopup = showPopup;\n/** @hidden @internal */\nvar PopupMenu = function (props) {\n    var items = props.items, onHide = props.onHide, onSelect = props.onSelect, classNameMapper = props.classNameMapper;\n    var onItemClick = function (item, event) {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    var itemElements = items.map(function (item, i) { return (React.createElement(\"div\", { key: item.index, className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: function (event) { return onItemClick(item, event); }, title: item.node.getHelpText() }, item.node._getRenderedName())); });\n    return (React.createElement(\"div\", { className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.showPopup = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar _1 = __webpack_require__(/*! . */ \"./src/index.ts\");\nvar Types_1 = __webpack_require__(/*! ./Types */ \"./src/Types.ts\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./view/TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\n/** @hidden @internal */\nfunction showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFactory) {\n    var layoutDiv = layout.getRootDiv();\n    var classNameMapper = layout.getClassName;\n    var currentDocument = triggerElement.ownerDocument;\n    var triggerRect = triggerElement.getBoundingClientRect();\n    var layoutRect = layoutDiv.getBoundingClientRect();\n    var elm = currentDocument.createElement(\"div\");\n    elm.className = classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);\n    if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {\n        elm.style.left = triggerRect.left - layoutRect.left + \"px\";\n    }\n    else {\n        elm.style.right = layoutRect.right - triggerRect.right + \"px\";\n    }\n    if (triggerRect.top < layoutRect.top + layoutRect.height / 2) {\n        elm.style.top = triggerRect.top - layoutRect.top + \"px\";\n    }\n    else {\n        elm.style.bottom = layoutRect.bottom - triggerRect.bottom + \"px\";\n    }\n    _1.DragDrop.instance.addGlass(function () { return onHide(); });\n    _1.DragDrop.instance.setGlassCursorOverride(\"default\");\n    layoutDiv.appendChild(elm);\n    var onHide = function () {\n        _1.DragDrop.instance.hideGlass();\n        layoutDiv.removeChild(elm);\n        ReactDOM.unmountComponentAtNode(elm);\n        elm.removeEventListener(\"mousedown\", onElementMouseDown);\n        currentDocument.removeEventListener(\"mousedown\", onDocMouseDown);\n    };\n    var onElementMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onDocMouseDown = function (event) {\n        onHide();\n    };\n    elm.addEventListener(\"mousedown\", onElementMouseDown);\n    currentDocument.addEventListener(\"mousedown\", onDocMouseDown);\n    ReactDOM.render(React.createElement(PopupMenu, { currentDocument: currentDocument, onSelect: onSelect, onHide: onHide, items: items, classNameMapper: classNameMapper, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }), elm);\n}\nexports.showPopup = showPopup;\n/** @hidden @internal */\nvar PopupMenu = function (props) {\n    var items = props.items, onHide = props.onHide, onSelect = props.onSelect, classNameMapper = props.classNameMapper, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory;\n    var onItemClick = function (item, event) {\n        onSelect(item);\n        onHide();\n        event.stopPropagation();\n    };\n    var itemElements = items.map(function (item, i) { return (React.createElement(\"div\", { key: item.index, className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU_ITEM), \"data-layout-path\": \"/popup-menu/tb\" + i, onClick: function (event) { return onItemClick(item, event); }, title: item.node.getHelpText() }, item.node.getModel().isLegacyOverflowMenu() ?\n        item.node._getNameForOverflowMenu() :\n        React.createElement(TabButtonStamp_1.TabButtonStamp, { node: item.node, layout: layout, iconFactory: iconFactory, titleFactory: titleFactory }))); });\n    return (React.createElement(\"div\", { className: classNameMapper(Types_1.CLASSES.FLEXLAYOUT__POPUP_MENU), \"data-layout-path\": \"/popup-menu\" }, itemElements));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/PopupMenu.tsx?");
 
 /***/ }),
 
@@ -392,7 +392,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Or
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
 
 /***/ }),
 
@@ -476,7 +476,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Actions_1 = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet_1 = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar uuid = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/index.js\");\n/**\n * Class containing the Tree of Nodes used by the FlexLayout component\n */\nvar Model = /** @class */ (function () {\n    /**\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\n     *  @hidden @internal\n     */\n    function Model() {\n        /** @hidden @internal */\n        this._borderRects = { inner: Rect_1.default.empty(), outer: Rect_1.default.empty() };\n        this._attributes = {};\n        this._idMap = {};\n        this._borders = new BorderSet_1.default(this);\n        this._pointerFine = true;\n        this._showHiddenBorder = DockLocation_1.default.CENTER;\n    }\n    /**\n     * Loads the model from the given json object\n     * @param json the json model to load\n     * @returns {Model} a new Model object\n     */\n    Model.fromJson = function (json) {\n        var model = new Model();\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\n        if (json.borders) {\n            model._borders = BorderSet_1.default._fromJson(json.borders, model);\n        }\n        model._root = RowNode_1.default._fromJson(json.layout, model);\n        model._tidy(); // initial tidy of node tree\n        return model;\n    };\n    /** @hidden @internal */\n    Model._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        // splitter\n        attributeDefinitions.add(\"splitterSize\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(Attribute_1.default.BOOLEAN);\n        // tab\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(Attribute_1.default.NUMBER);\n        // tabset\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(Attribute_1.default.NUMBER);\n        // border\n        attributeDefinitions.add(\"borderSize\", 200).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    /** @hidden @internal */\n    Model.prototype._setChangeListener = function (listener) {\n        this._changeListener = listener;\n    };\n    /**\n     * Get the currently active tabset node\n     */\n    Model.prototype.getActiveTabset = function () {\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\n            return this._activeTabSet;\n        }\n        else {\n            return undefined;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._getShowHiddenBorder = function () {\n        return this._showHiddenBorder;\n    };\n    /** @hidden @internal */\n    Model.prototype._setShowHiddenBorder = function (location) {\n        this._showHiddenBorder = location;\n    };\n    /** @hidden @internal */\n    Model.prototype._setActiveTabset = function (tabsetNode) {\n        this._activeTabSet = tabsetNode;\n    };\n    /**\n     * Get the currently maximized tabset node\n     */\n    Model.prototype.getMaximizedTabset = function () {\n        return this._maximizedTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._setMaximizedTabset = function (tabsetNode) {\n        this._maximizedTabSet = tabsetNode;\n    };\n    /**\n     * Gets the root RowNode of the model\n     * @returns {RowNode}\n     */\n    Model.prototype.getRoot = function () {\n        return this._root;\n    };\n    Model.prototype.isRootOrientationVertical = function () {\n        return this._attributes.rootOrientationVertical;\n    };\n    Model.prototype.isUseVisibility = function () {\n        return this._attributes.enableUseVisibility;\n    };\n    /**\n     * Gets the\n     * @returns {BorderSet|*}\n     */\n    Model.prototype.getBorderSet = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOuterInnerRects = function () {\n        return this._borderRects;\n    };\n    /** @hidden @internal */\n    Model.prototype._getPointerFine = function () {\n        return this._pointerFine;\n    };\n    /** @hidden @internal */\n    Model.prototype._setPointerFine = function (pointerFine) {\n        this._pointerFine = pointerFine;\n    };\n    /**\n     * Visits all the nodes in the model and calls the given function for each\n     * @param fn a function that takes visited node and a integer level as parameters\n     */\n    Model.prototype.visitNodes = function (fn) {\n        this._borders._forEachNode(fn);\n        this._root._forEachNode(fn, 0);\n    };\n    /**\n     * Gets a node by its id\n     * @param id the id to find\n     */\n    Model.prototype.getNodeById = function (id) {\n        return this._idMap[id];\n    };\n    /**\n     * Update the node tree by performing the given action,\n     * Actions should be generated via static methods on the Actions class\n     * @param action the action to perform\n     * @returns added Node for Actions.addNode; undefined otherwise\n     */\n    Model.prototype.doAction = function (action) {\n        var returnVal = undefined;\n        // console.log(action);\n        switch (action.type) {\n            case Actions_1.default.ADD_NODE: {\n                var newNode = new TabNode_1.default(this, action.data.json, true);\n                var toNode = this._idMap[action.data.toNode];\n                if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                    toNode.drop(newNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    returnVal = newNode;\n                }\n                break;\n            }\n            case Actions_1.default.MOVE_NODE: {\n                var fromNode = this._idMap[action.data.fromNode];\n                if (fromNode instanceof TabNode_1.default || fromNode instanceof TabSetNode_1.default) {\n                    var toNode = this._idMap[action.data.toNode];\n                    if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                        toNode.drop(fromNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._delete();\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TABSET: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    // first delete all child tabs that are closeable\n                    var children = __spreadArray([], node.getChildren());\n                    children.forEach(function (child, i) {\n                        if (child.isEnableClose()) {\n                            child._delete();\n                        }\n                    });\n                    if (node.getChildren().length === 0) {\n                        node._delete();\n                    }\n                    this._tidy();\n                }\n                break;\n            }\n            case Actions_1.default.FLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(true);\n                    Utils_1.adjustSelectedIndexAfterFloat(node);\n                }\n                break;\n            }\n            case Actions_1.default.UNFLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(false);\n                    Utils_1.adjustSelectedIndexAfterDock(node);\n                }\n                break;\n            }\n            case Actions_1.default.RENAME_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setName(action.data.text);\n                }\n                break;\n            }\n            case Actions_1.default.SELECT_TAB: {\n                var tabNode = this._idMap[action.data.tabNode];\n                if (tabNode instanceof TabNode_1.default) {\n                    var parent_1 = tabNode.getParent();\n                    var pos = parent_1.getChildren().indexOf(tabNode);\n                    if (parent_1 instanceof BorderNode_1.default) {\n                        if (parent_1.getSelected() === pos) {\n                            parent_1._setSelected(-1);\n                        }\n                        else {\n                            parent_1._setSelected(pos);\n                        }\n                    }\n                    else if (parent_1 instanceof TabSetNode_1.default) {\n                        if (parent_1.getSelected() !== pos) {\n                            parent_1._setSelected(pos);\n                        }\n                        this._activeTabSet = parent_1;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.SET_ACTIVE_TABSET: {\n                var tabsetNode = this._idMap[action.data.tabsetNode];\n                if (tabsetNode instanceof TabSetNode_1.default) {\n                    this._activeTabSet = tabsetNode;\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_SPLIT: {\n                var node1 = this._idMap[action.data.node1];\n                var node2 = this._idMap[action.data.node2];\n                if ((node1 instanceof TabSetNode_1.default || node1 instanceof RowNode_1.default) && (node2 instanceof TabSetNode_1.default || node2 instanceof RowNode_1.default)) {\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_BORDER_SPLIT: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof BorderNode_1.default) {\n                    node._setSize(action.data.pos);\n                }\n                break;\n            }\n            case Actions_1.default.MAXIMIZE_TOGGLE: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    if (node === this._maximizedTabSet) {\n                        this._maximizedTabSet = undefined;\n                    }\n                    else {\n                        this._maximizedTabSet = node;\n                        this._activeTabSet = node;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.UPDATE_MODEL_ATTRIBUTES: {\n                this._updateAttrs(action.data.json);\n                break;\n            }\n            case Actions_1.default.UPDATE_NODE_ATTRIBUTES: {\n                var node = this._idMap[action.data.node];\n                node._updateAttrs(action.data.json);\n                break;\n            }\n            default:\n                break;\n        }\n        this._updateIdMap();\n        if (this._changeListener !== undefined) {\n            this._changeListener();\n        }\n        return returnVal;\n    };\n    /** @hidden @internal */\n    Model.prototype._updateIdMap = function () {\n        var _this = this;\n        // regenerate idMap to stop it building up\n        this._idMap = {};\n        this.visitNodes(function (node) { return (_this._idMap[node.getId()] = node); });\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\n    };\n    /** @hidden @internal */\n    Model.prototype._adjustSplitSide = function (node, weight, pixels) {\n        node._setWeight(weight);\n        if (node.getWidth() != null && node.getOrientation() === Orientation_1.default.VERT) {\n            node._updateAttrs({ width: pixels });\n        }\n        else if (node.getHeight() != null && node.getOrientation() === Orientation_1.default.HORZ) {\n            node._updateAttrs({ height: pixels });\n        }\n    };\n    /**\n     * Converts the model to a json object\n     * @returns {IJsonModel} json object that represents this model\n     */\n    Model.prototype.toJson = function () {\n        var global = {};\n        Model._attributeDefinitions.toJson(global, this._attributes);\n        // save state of nodes\n        this.visitNodes(function (node) {\n            node._fireEvent(\"save\", undefined);\n        });\n        return { global: global, borders: this._borders._toJson(), layout: this._root.toJson() };\n    };\n    Model.prototype.getSplitterSize = function () {\n        var splitterSize = this._attributes.splitterSize;\n        if (splitterSize === -1) {\n            // use defaults\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\n        }\n        return splitterSize;\n    };\n    Model.prototype.getSplitterExtra = function () {\n        return this._attributes.splitterExtra;\n    };\n    Model.prototype.isEnableEdgeDock = function () {\n        return this._attributes.enableEdgeDock;\n    };\n    /** @hidden @internal */\n    Model.prototype._addNode = function (node) {\n        var id = node.getId();\n        if (this._idMap[id] !== undefined) {\n            throw new Error(\"Error: each node must have a unique id, duplicate id:\" + node.getId());\n        }\n        if (node.getType() !== \"splitter\") {\n            this._idMap[id] = node;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._layout = function (rect, metrics) {\n        var _a;\n        // let start = Date.now();\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\n        this._root._layout(rect, metrics);\n        // console.log(\"layout time: \" + (Date.now() - start));\n        return rect;\n    };\n    /** @hidden @internal */\n    Model.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var node = this._root._findDropTargetNode(dragNode, x, y);\n        if (node === undefined) {\n            node = this._borders._findDropTargetNode(dragNode, x, y);\n        }\n        return node;\n    };\n    /** @hidden @internal */\n    Model.prototype._tidy = function () {\n        // console.log(\"before _tidy\", this.toString());\n        this._root._tidy();\n        // console.log(\"after _tidy\", this.toString());\n    };\n    /** @hidden @internal */\n    Model.prototype._updateAttrs = function (json) {\n        Model._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    Model.prototype._nextUniqueId = function () {\n        return '#' + uuid.v4();\n    };\n    /** @hidden @internal */\n    Model.prototype._getAttribute = function (name) {\n        return this._attributes[name];\n    };\n    /**\n     * Sets a function to allow/deny dropping a node\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\n     */\n    Model.prototype.setOnAllowDrop = function (onAllowDrop) {\n        this._onAllowDrop = onAllowDrop;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnAllowDrop = function () {\n        return this._onAllowDrop;\n    };\n    /**\n     * set callback called when a new TabSet is created.\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\n     * tab is deleted, the root tabset can be recreated)\n     * @param onCreateTabSet\n     */\n    Model.prototype.setOnCreateTabSet = function (onCreateTabSet) {\n        this._onCreateTabSet = onCreateTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnCreateTabSet = function () {\n        return this._onCreateTabSet;\n    };\n    Model.toTypescriptInterfaces = function () {\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\n        console.log(RowNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\n        console.log(TabSetNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\n        console.log(TabNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\n        console.log(BorderNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\n    };\n    Model.prototype.toString = function () {\n        return JSON.stringify(this.toJson());\n    };\n    /** @hidden @internal */\n    Model._attributeDefinitions = Model._createAttributeDefinitions();\n    return Model;\n}());\nexports.default = Model;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Actions_1 = __webpack_require__(/*! ./Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ./BorderNode */ \"./src/model/BorderNode.ts\");\nvar BorderSet_1 = __webpack_require__(/*! ./BorderSet */ \"./src/model/BorderSet.ts\");\nvar RowNode_1 = __webpack_require__(/*! ./RowNode */ \"./src/model/RowNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ./TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ./TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/model/Utils.ts\");\nvar uuid = __webpack_require__(/*! uuid */ \"./node_modules/uuid/dist/esm-browser/index.js\");\n/**\n * Class containing the Tree of Nodes used by the FlexLayout component\n */\nvar Model = /** @class */ (function () {\n    /**\n     * 'private' constructor. Use the static method Model.fromJson(json) to create a model\n     *  @hidden @internal\n     */\n    function Model() {\n        /** @hidden @internal */\n        this._borderRects = { inner: Rect_1.default.empty(), outer: Rect_1.default.empty() };\n        this._attributes = {};\n        this._idMap = {};\n        this._borders = new BorderSet_1.default(this);\n        this._pointerFine = true;\n        this._showHiddenBorder = DockLocation_1.default.CENTER;\n    }\n    /**\n     * Loads the model from the given json object\n     * @param json the json model to load\n     * @returns {Model} a new Model object\n     */\n    Model.fromJson = function (json) {\n        var model = new Model();\n        Model._attributeDefinitions.fromJson(json.global, model._attributes);\n        if (json.borders) {\n            model._borders = BorderSet_1.default._fromJson(json.borders, model);\n        }\n        model._root = RowNode_1.default._fromJson(json.layout, model);\n        model._tidy(); // initial tidy of node tree\n        return model;\n    };\n    /** @hidden @internal */\n    Model._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"legacyOverflowMenu\", false).setType(Attribute_1.default.BOOLEAN);\n        // splitter\n        attributeDefinitions.add(\"splitterSize\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"splitterExtra\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"enableEdgeDock\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"rootOrientationVertical\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"marginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"enableUseVisibility\", false).setType(Attribute_1.default.BOOLEAN);\n        // tab\n        attributeDefinitions.add(\"tabEnableClose\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabCloseType\", 1).setType(\"ICloseType\");\n        attributeDefinitions.add(\"tabEnableFloat\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabEnableRename\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabIcon\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabEnableRenderOnDemand\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabDragSpeed\", 0.3).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderWidth\", -1).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabBorderHeight\", -1).setType(Attribute_1.default.NUMBER);\n        // tabset\n        attributeDefinitions.add(\"tabSetEnableDeleteWhenEmpty\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDrag\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableDivide\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableMaximize\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetEnableClose\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetAutoSelectTab\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetClassNameTabStrip\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetClassNameHeader\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"tabSetEnableTabStrip\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"tabSetHeaderHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetTabStripHeight\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMarginInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetBorderInsets\", { top: 0, right: 0, bottom: 0, left: 0 })\n            .setType(\"IInsets\");\n        attributeDefinitions.add(\"tabSetTabLocation\", \"top\").setType(\"ITabLocation\");\n        attributeDefinitions.add(\"tabSetMinWidth\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"tabSetMinHeight\", 0).setType(Attribute_1.default.NUMBER);\n        // border\n        attributeDefinitions.add(\"borderSize\", 200).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderMinSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderBarSize\", 0).setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.add(\"borderEnableDrop\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenOpen\", true).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderAutoSelectTabWhenClosed\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.add(\"borderClassName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"borderEnableAutoHide\", false).setType(Attribute_1.default.BOOLEAN);\n        return attributeDefinitions;\n    };\n    /** @hidden @internal */\n    Model.prototype._setChangeListener = function (listener) {\n        this._changeListener = listener;\n    };\n    /**\n     * Get the currently active tabset node\n     */\n    Model.prototype.getActiveTabset = function () {\n        if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {\n            return this._activeTabSet;\n        }\n        else {\n            return undefined;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._getShowHiddenBorder = function () {\n        return this._showHiddenBorder;\n    };\n    /** @hidden @internal */\n    Model.prototype._setShowHiddenBorder = function (location) {\n        this._showHiddenBorder = location;\n    };\n    /** @hidden @internal */\n    Model.prototype._setActiveTabset = function (tabsetNode) {\n        this._activeTabSet = tabsetNode;\n    };\n    /**\n     * Get the currently maximized tabset node\n     */\n    Model.prototype.getMaximizedTabset = function () {\n        return this._maximizedTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._setMaximizedTabset = function (tabsetNode) {\n        this._maximizedTabSet = tabsetNode;\n    };\n    /**\n     * Gets the root RowNode of the model\n     * @returns {RowNode}\n     */\n    Model.prototype.getRoot = function () {\n        return this._root;\n    };\n    Model.prototype.isRootOrientationVertical = function () {\n        return this._attributes.rootOrientationVertical;\n    };\n    Model.prototype.isUseVisibility = function () {\n        return this._attributes.enableUseVisibility;\n    };\n    /**\n     * Gets the\n     * @returns {BorderSet|*}\n     */\n    Model.prototype.getBorderSet = function () {\n        return this._borders;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOuterInnerRects = function () {\n        return this._borderRects;\n    };\n    /** @hidden @internal */\n    Model.prototype._getPointerFine = function () {\n        return this._pointerFine;\n    };\n    /** @hidden @internal */\n    Model.prototype._setPointerFine = function (pointerFine) {\n        this._pointerFine = pointerFine;\n    };\n    /**\n     * Visits all the nodes in the model and calls the given function for each\n     * @param fn a function that takes visited node and a integer level as parameters\n     */\n    Model.prototype.visitNodes = function (fn) {\n        this._borders._forEachNode(fn);\n        this._root._forEachNode(fn, 0);\n    };\n    /**\n     * Gets a node by its id\n     * @param id the id to find\n     */\n    Model.prototype.getNodeById = function (id) {\n        return this._idMap[id];\n    };\n    /**\n     * Update the node tree by performing the given action,\n     * Actions should be generated via static methods on the Actions class\n     * @param action the action to perform\n     * @returns added Node for Actions.addNode; undefined otherwise\n     */\n    Model.prototype.doAction = function (action) {\n        var returnVal = undefined;\n        // console.log(action);\n        switch (action.type) {\n            case Actions_1.default.ADD_NODE: {\n                var newNode = new TabNode_1.default(this, action.data.json, true);\n                var toNode = this._idMap[action.data.toNode];\n                if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                    toNode.drop(newNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    returnVal = newNode;\n                }\n                break;\n            }\n            case Actions_1.default.MOVE_NODE: {\n                var fromNode = this._idMap[action.data.fromNode];\n                if (fromNode instanceof TabNode_1.default || fromNode instanceof TabSetNode_1.default) {\n                    var toNode = this._idMap[action.data.toNode];\n                    if (toNode instanceof TabSetNode_1.default || toNode instanceof BorderNode_1.default || toNode instanceof RowNode_1.default) {\n                        toNode.drop(fromNode, DockLocation_1.default.getByName(action.data.location), action.data.index, action.data.select);\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._delete();\n                }\n                break;\n            }\n            case Actions_1.default.DELETE_TABSET: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    // first delete all child tabs that are closeable\n                    var children = __spreadArray([], node.getChildren());\n                    children.forEach(function (child, i) {\n                        if (child.isEnableClose()) {\n                            child._delete();\n                        }\n                    });\n                    if (node.getChildren().length === 0) {\n                        node._delete();\n                    }\n                    this._tidy();\n                }\n                break;\n            }\n            case Actions_1.default.FLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(true);\n                    Utils_1.adjustSelectedIndexAfterFloat(node);\n                }\n                break;\n            }\n            case Actions_1.default.UNFLOAT_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setFloating(false);\n                    Utils_1.adjustSelectedIndexAfterDock(node);\n                }\n                break;\n            }\n            case Actions_1.default.RENAME_TAB: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabNode_1.default) {\n                    node._setName(action.data.text);\n                }\n                break;\n            }\n            case Actions_1.default.SELECT_TAB: {\n                var tabNode = this._idMap[action.data.tabNode];\n                if (tabNode instanceof TabNode_1.default) {\n                    var parent_1 = tabNode.getParent();\n                    var pos = parent_1.getChildren().indexOf(tabNode);\n                    if (parent_1 instanceof BorderNode_1.default) {\n                        if (parent_1.getSelected() === pos) {\n                            parent_1._setSelected(-1);\n                        }\n                        else {\n                            parent_1._setSelected(pos);\n                        }\n                    }\n                    else if (parent_1 instanceof TabSetNode_1.default) {\n                        if (parent_1.getSelected() !== pos) {\n                            parent_1._setSelected(pos);\n                        }\n                        this._activeTabSet = parent_1;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.SET_ACTIVE_TABSET: {\n                var tabsetNode = this._idMap[action.data.tabsetNode];\n                if (tabsetNode instanceof TabSetNode_1.default) {\n                    this._activeTabSet = tabsetNode;\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_SPLIT: {\n                var node1 = this._idMap[action.data.node1];\n                var node2 = this._idMap[action.data.node2];\n                if ((node1 instanceof TabSetNode_1.default || node1 instanceof RowNode_1.default) && (node2 instanceof TabSetNode_1.default || node2 instanceof RowNode_1.default)) {\n                    this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);\n                    this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);\n                }\n                break;\n            }\n            case Actions_1.default.ADJUST_BORDER_SPLIT: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof BorderNode_1.default) {\n                    node._setSize(action.data.pos);\n                }\n                break;\n            }\n            case Actions_1.default.MAXIMIZE_TOGGLE: {\n                var node = this._idMap[action.data.node];\n                if (node instanceof TabSetNode_1.default) {\n                    if (node === this._maximizedTabSet) {\n                        this._maximizedTabSet = undefined;\n                    }\n                    else {\n                        this._maximizedTabSet = node;\n                        this._activeTabSet = node;\n                    }\n                }\n                break;\n            }\n            case Actions_1.default.UPDATE_MODEL_ATTRIBUTES: {\n                this._updateAttrs(action.data.json);\n                break;\n            }\n            case Actions_1.default.UPDATE_NODE_ATTRIBUTES: {\n                var node = this._idMap[action.data.node];\n                node._updateAttrs(action.data.json);\n                break;\n            }\n            default:\n                break;\n        }\n        this._updateIdMap();\n        if (this._changeListener !== undefined) {\n            this._changeListener();\n        }\n        return returnVal;\n    };\n    /** @hidden @internal */\n    Model.prototype._updateIdMap = function () {\n        var _this = this;\n        // regenerate idMap to stop it building up\n        this._idMap = {};\n        this.visitNodes(function (node) { return (_this._idMap[node.getId()] = node); });\n        // console.log(JSON.stringify(Object.keys(this._idMap)));\n    };\n    /** @hidden @internal */\n    Model.prototype._adjustSplitSide = function (node, weight, pixels) {\n        node._setWeight(weight);\n        if (node.getWidth() != null && node.getOrientation() === Orientation_1.default.VERT) {\n            node._updateAttrs({ width: pixels });\n        }\n        else if (node.getHeight() != null && node.getOrientation() === Orientation_1.default.HORZ) {\n            node._updateAttrs({ height: pixels });\n        }\n    };\n    /**\n     * Converts the model to a json object\n     * @returns {IJsonModel} json object that represents this model\n     */\n    Model.prototype.toJson = function () {\n        var global = {};\n        Model._attributeDefinitions.toJson(global, this._attributes);\n        // save state of nodes\n        this.visitNodes(function (node) {\n            node._fireEvent(\"save\", undefined);\n        });\n        return { global: global, borders: this._borders._toJson(), layout: this._root.toJson() };\n    };\n    Model.prototype.getSplitterSize = function () {\n        var splitterSize = this._attributes.splitterSize;\n        if (splitterSize === -1) {\n            // use defaults\n            splitterSize = this._pointerFine ? 8 : 12; // larger for mobile\n        }\n        return splitterSize;\n    };\n    Model.prototype.isLegacyOverflowMenu = function () {\n        return this._attributes.legacyOverflowMenu;\n    };\n    Model.prototype.getSplitterExtra = function () {\n        return this._attributes.splitterExtra;\n    };\n    Model.prototype.isEnableEdgeDock = function () {\n        return this._attributes.enableEdgeDock;\n    };\n    /** @hidden @internal */\n    Model.prototype._addNode = function (node) {\n        var id = node.getId();\n        if (this._idMap[id] !== undefined) {\n            throw new Error(\"Error: each node must have a unique id, duplicate id:\" + node.getId());\n        }\n        if (node.getType() !== \"splitter\") {\n            this._idMap[id] = node;\n        }\n    };\n    /** @hidden @internal */\n    Model.prototype._layout = function (rect, metrics) {\n        var _a;\n        // let start = Date.now();\n        this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);\n        rect = this._borderRects.inner.removeInsets(this._getAttribute(\"marginInsets\"));\n        (_a = this._root) === null || _a === void 0 ? void 0 : _a.calcMinSize();\n        this._root._layout(rect, metrics);\n        // console.log(\"layout time: \" + (Date.now() - start));\n        return rect;\n    };\n    /** @hidden @internal */\n    Model.prototype._findDropTargetNode = function (dragNode, x, y) {\n        var node = this._root._findDropTargetNode(dragNode, x, y);\n        if (node === undefined) {\n            node = this._borders._findDropTargetNode(dragNode, x, y);\n        }\n        return node;\n    };\n    /** @hidden @internal */\n    Model.prototype._tidy = function () {\n        // console.log(\"before _tidy\", this.toString());\n        this._root._tidy();\n        // console.log(\"after _tidy\", this.toString());\n    };\n    /** @hidden @internal */\n    Model.prototype._updateAttrs = function (json) {\n        Model._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    Model.prototype._nextUniqueId = function () {\n        return '#' + uuid.v4();\n    };\n    /** @hidden @internal */\n    Model.prototype._getAttribute = function (name) {\n        return this._attributes[name];\n    };\n    /**\n     * Sets a function to allow/deny dropping a node\n     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed\n     */\n    Model.prototype.setOnAllowDrop = function (onAllowDrop) {\n        this._onAllowDrop = onAllowDrop;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnAllowDrop = function () {\n        return this._onAllowDrop;\n    };\n    /**\n     * set callback called when a new TabSet is created.\n     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last\n     * tab is deleted, the root tabset can be recreated)\n     * @param onCreateTabSet\n     */\n    Model.prototype.setOnCreateTabSet = function (onCreateTabSet) {\n        this._onCreateTabSet = onCreateTabSet;\n    };\n    /** @hidden @internal */\n    Model.prototype._getOnCreateTabSet = function () {\n        return this._onCreateTabSet;\n    };\n    Model.toTypescriptInterfaces = function () {\n        console.log(Model._attributeDefinitions.toTypescriptInterface(\"Global\", undefined));\n        console.log(RowNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Row\", Model._attributeDefinitions));\n        console.log(TabSetNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"TabSet\", Model._attributeDefinitions));\n        console.log(TabNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Tab\", Model._attributeDefinitions));\n        console.log(BorderNode_1.default.getAttributeDefinitions().toTypescriptInterface(\"Border\", Model._attributeDefinitions));\n    };\n    Model.prototype.toString = function () {\n        return JSON.stringify(this.toJson());\n    };\n    /** @hidden @internal */\n    Model._attributeDefinitions = Model._createAttributeDefinitions();\n    return Model;\n}());\nexports.default = Model;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/Model.ts?");
 
 /***/ }),
 
@@ -524,7 +524,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar TabNode = /** @class */ (function (_super) {\n    __extends(TabNode, _super);\n    /** @hidden @internal */\n    function TabNode(model, json, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var _this = _super.call(this, model) || this;\n        _this._extra = {}; // extra data added to node not saved in json\n        TabNode._attributeDefinitions.fromJson(json, _this._attributes);\n        if (addToModel === true) {\n            model._addNode(_this);\n        }\n        return _this;\n    }\n    /** @hidden @internal */\n    TabNode._fromJson = function (json, model, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var newLayoutNode = new TabNode(model, json, addToModel);\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", TabNode.TYPE, true).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"name\", \"[Unnamed Tab]\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"helpText\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"component\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.add(\"floating\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableClose\", \"tabEnableClose\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"closeType\", \"tabCloseType\").setType(\"ICloseType\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabEnableDrag\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableRename\", \"tabEnableRename\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"tabClassName\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"icon\", \"tabIcon\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"enableRenderOnDemand\", \"tabEnableRenderOnDemand\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableFloat\", \"tabEnableFloat\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"borderWidth\", \"tabBorderWidth\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"borderHeight\", \"tabBorderHeight\").setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    TabNode.prototype.getWindow = function () {\n        return this._window;\n    };\n    TabNode.prototype.getTabRect = function () {\n        return this._tabRect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setTabRect = function (rect) {\n        this._tabRect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setRenderedName = function (name) {\n        this._renderedName = name;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getRenderedName = function () {\n        return this._renderedName;\n    };\n    TabNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabNode.prototype.getHelpText = function () {\n        return this._getAttr(\"helpText\");\n    };\n    TabNode.prototype.getComponent = function () {\n        return this._getAttr(\"component\");\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    /**\n     * Returns an object that can be used to store transient node specific data that will\n     * NOT be saved in the json.\n     */\n    TabNode.prototype.getExtraData = function () {\n        return this._extra;\n    };\n    TabNode.prototype.isFloating = function () {\n        return this._getAttr(\"floating\");\n    };\n    TabNode.prototype.getIcon = function () {\n        return this._getAttr(\"icon\");\n    };\n    TabNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabNode.prototype.getCloseType = function () {\n        return this._getAttr(\"closeType\");\n    };\n    TabNode.prototype.isEnableFloat = function () {\n        return this._getAttr(\"enableFloat\");\n    };\n    TabNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabNode.prototype.isEnableRename = function () {\n        return this._getAttr(\"enableRename\");\n    };\n    TabNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    TabNode.prototype.isEnableRenderOnDemand = function () {\n        return this._getAttr(\"enableRenderOnDemand\");\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setName = function (name) {\n        this._attributes.name = name;\n        if (this._window && this._window.document) {\n            this._window.document.title = name;\n        }\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setFloating = function (float) {\n        this._attributes.floating = float;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._layout = function (rect, metrics) {\n        if (!rect.equals(this._rect)) {\n            this._fireEvent(\"resize\", { rect: rect });\n        }\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._delete = function () {\n        this._parent._remove(this);\n        this._fireEvent(\"close\", {});\n    };\n    TabNode.prototype.toJson = function () {\n        var json = {};\n        TabNode._attributeDefinitions.toJson(json, this._attributes);\n        return json;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._updateAttrs = function (json) {\n        TabNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setWindow = function (window) {\n        this._window = window;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderWidth = function (width) {\n        this._attributes.borderWidth = width;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderHeight = function (height) {\n        this._attributes.borderHeight = height;\n    };\n    /** @hidden @internal */\n    TabNode.getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    TabNode.TYPE = \"tab\";\n    /** @hidden @internal */\n    TabNode._attributeDefinitions = TabNode._createAttributeDefinitions();\n    return TabNode;\n}(Node_1.default));\nexports.default = TabNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabNode.ts?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Attribute_1 = __webpack_require__(/*! ../Attribute */ \"./src/Attribute.ts\");\nvar AttributeDefinitions_1 = __webpack_require__(/*! ../AttributeDefinitions */ \"./src/AttributeDefinitions.ts\");\nvar Node_1 = __webpack_require__(/*! ./Node */ \"./src/model/Node.ts\");\nvar TabNode = /** @class */ (function (_super) {\n    __extends(TabNode, _super);\n    /** @hidden @internal */\n    function TabNode(model, json, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var _this = _super.call(this, model) || this;\n        _this._extra = {}; // extra data added to node not saved in json\n        TabNode._attributeDefinitions.fromJson(json, _this._attributes);\n        if (addToModel === true) {\n            model._addNode(_this);\n        }\n        return _this;\n    }\n    /** @hidden @internal */\n    TabNode._fromJson = function (json, model, addToModel) {\n        if (addToModel === void 0) { addToModel = true; }\n        var newLayoutNode = new TabNode(model, json, addToModel);\n        return newLayoutNode;\n    };\n    /** @hidden @internal */\n    TabNode._createAttributeDefinitions = function () {\n        var attributeDefinitions = new AttributeDefinitions_1.default();\n        attributeDefinitions.add(\"type\", TabNode.TYPE, true).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"id\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"name\", \"[Unnamed Tab]\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"altName\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"helpText\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"component\", undefined).setType(Attribute_1.default.STRING);\n        attributeDefinitions.add(\"config\", undefined).setType(\"any\");\n        attributeDefinitions.add(\"floating\", false).setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableClose\", \"tabEnableClose\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"closeType\", \"tabCloseType\").setType(\"ICloseType\");\n        attributeDefinitions.addInherited(\"enableDrag\", \"tabEnableDrag\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableRename\", \"tabEnableRename\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"className\", \"tabClassName\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"icon\", \"tabIcon\").setType(Attribute_1.default.STRING);\n        attributeDefinitions.addInherited(\"enableRenderOnDemand\", \"tabEnableRenderOnDemand\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"enableFloat\", \"tabEnableFloat\").setType(Attribute_1.default.BOOLEAN);\n        attributeDefinitions.addInherited(\"borderWidth\", \"tabBorderWidth\").setType(Attribute_1.default.NUMBER);\n        attributeDefinitions.addInherited(\"borderHeight\", \"tabBorderHeight\").setType(Attribute_1.default.NUMBER);\n        return attributeDefinitions;\n    };\n    TabNode.prototype.getWindow = function () {\n        return this._window;\n    };\n    TabNode.prototype.getTabRect = function () {\n        return this._tabRect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setTabRect = function (rect) {\n        this._tabRect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setRenderedName = function (name) {\n        this._renderedName = name;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getNameForOverflowMenu = function () {\n        var altName = this._getAttr(\"altName\");\n        if (altName !== undefined) {\n            return altName;\n        }\n        return this._renderedName;\n    };\n    TabNode.prototype.getName = function () {\n        return this._getAttr(\"name\");\n    };\n    TabNode.prototype.getHelpText = function () {\n        return this._getAttr(\"helpText\");\n    };\n    TabNode.prototype.getComponent = function () {\n        return this._getAttr(\"component\");\n    };\n    /**\n     * Returns the config attribute that can be used to store node specific data that\n     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather\n     * than directly, for example:\n     * this.state.model.doAction(\n     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));\n     */\n    TabNode.prototype.getConfig = function () {\n        return this._attributes.config;\n    };\n    /**\n     * Returns an object that can be used to store transient node specific data that will\n     * NOT be saved in the json.\n     */\n    TabNode.prototype.getExtraData = function () {\n        return this._extra;\n    };\n    TabNode.prototype.isFloating = function () {\n        return this._getAttr(\"floating\");\n    };\n    TabNode.prototype.getIcon = function () {\n        return this._getAttr(\"icon\");\n    };\n    TabNode.prototype.isEnableClose = function () {\n        return this._getAttr(\"enableClose\");\n    };\n    TabNode.prototype.getCloseType = function () {\n        return this._getAttr(\"closeType\");\n    };\n    TabNode.prototype.isEnableFloat = function () {\n        return this._getAttr(\"enableFloat\");\n    };\n    TabNode.prototype.isEnableDrag = function () {\n        return this._getAttr(\"enableDrag\");\n    };\n    TabNode.prototype.isEnableRename = function () {\n        return this._getAttr(\"enableRename\");\n    };\n    TabNode.prototype.getClassName = function () {\n        return this._getAttr(\"className\");\n    };\n    TabNode.prototype.isEnableRenderOnDemand = function () {\n        return this._getAttr(\"enableRenderOnDemand\");\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setName = function (name) {\n        this._attributes.name = name;\n        if (this._window && this._window.document) {\n            this._window.document.title = name;\n        }\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setFloating = function (float) {\n        this._attributes.floating = float;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._layout = function (rect, metrics) {\n        if (!rect.equals(this._rect)) {\n            this._fireEvent(\"resize\", { rect: rect });\n        }\n        this._rect = rect;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._delete = function () {\n        this._parent._remove(this);\n        this._fireEvent(\"close\", {});\n    };\n    TabNode.prototype.toJson = function () {\n        var json = {};\n        TabNode._attributeDefinitions.toJson(json, this._attributes);\n        return json;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._updateAttrs = function (json) {\n        TabNode._attributeDefinitions.update(json, this._attributes);\n    };\n    /** @hidden @internal */\n    TabNode.prototype._getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setWindow = function (window) {\n        this._window = window;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderWidth = function (width) {\n        this._attributes.borderWidth = width;\n    };\n    /** @hidden @internal */\n    TabNode.prototype._setBorderHeight = function (height) {\n        this._attributes.borderHeight = height;\n    };\n    /** @hidden @internal */\n    TabNode.getAttributeDefinitions = function () {\n        return TabNode._attributeDefinitions;\n    };\n    TabNode.TYPE = \"tab\";\n    /** @hidden @internal */\n    TabNode._attributeDefinitions = TabNode._createAttributeDefinitions();\n    return TabNode;\n}(Node_1.default));\nexports.default = TabNode;\n\n\n//# sourceURL=webpack://FlexLayout/./src/model/TabNode.ts?");
 
 /***/ }),
 
@@ -560,7 +560,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar BorderButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, border = props.border, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var onMouseDown = function (event) {\n        if (!TabSet_1.isAuxMouseEvent(event)) {\n            var message = layout.i18nName(__1.I18nLabel.Move_Tab, node.getName());\n            props.layout.dragStart(event, message, node, node.isEnableDrag(), onClick, function (event2) { return undefined; });\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n    });\n    var updateRect = function () {\n        // record position of tab in border\n        var clientRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));\n    };\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content);\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading);\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(__1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {}, className: classNames, \"data-layout-path\": path, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.BorderButton = BorderButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar BorderButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, border = props.border, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var onMouseDown = function (event) {\n        if (!Utils_1.isAuxMouseEvent(event)) {\n            props.layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, function (event2) { return undefined; });\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n    });\n    var updateRect = function () {\n        // record position of tab in border\n        var clientRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - clientRect.left, r.top - clientRect.top, r.width, r.height));\n    };\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);\n    if (selected) {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);\n    }\n    else {\n        classNames += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var renderState = Utils_1.getRenderStateEx(layout, node, iconFactory, titleFactory);\n    var content = renderState.content ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;\n    var leading = renderState.leading ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(__1.I18nLabel.Close_Tab);\n        renderState.buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, style: {}, className: classNames, \"data-layout-path\": path, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        renderState.buttons));\n};\nexports.BorderButton = BorderButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderButton.tsx?");
 
 /***/ }),
 
@@ -572,7 +572,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderTabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar BorderButton_1 = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar BorderTabSet = function (props) {\n    var border = props.border, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(border, Orientation_1.default.flip(border.getOrientation()), toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel;\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(border, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onFloatTab = function (event) {\n        var selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var cm = layout.getClassName;\n    var style = border.getTabHeaderRect().styleWithPosition({});\n    var tabs = [];\n    var layoutTab = function (i) {\n        var isSelected = border.getSelected() === i;\n        var child = border.getChildren()[i];\n        tabs.push(React.createElement(BorderButton_1.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n    };\n    for (var i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    var borderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    var buttons = [];\n    var renderState = { headerContent: {}, buttons: buttons, stickyButtons: [], headerButtons: [] };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    var selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        var selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n            var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n            buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }));\n        }\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    style = layout.styleFont(style);\n    var innerStyle = {};\n    var borderHeight = border.getBorderBarSize() - 1;\n    if (border.getLocation() === DockLocation_1.default.LEFT) {\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\n    }\n    else if (border.getLocation() === DockLocation_1.default.RIGHT) {\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\n    }\n    else {\n        innerStyle = { height: borderHeight, left: position };\n    }\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        React.createElement(\"div\", { style: { height: borderHeight }, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\n            React.createElement(\"div\", { style: innerStyle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabs)),\n        toolbar));\n};\nexports.BorderTabSet = BorderTabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BorderTabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar BorderButton_1 = __webpack_require__(/*! ./BorderButton */ \"./src/view/BorderButton.tsx\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar BorderTabSet = function (props) {\n    var border = props.border, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(border, Orientation_1.default.flip(border.getOrientation()), toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel;\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(border, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(border, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onFloatTab = function (event) {\n        var selectedTabNode = border.getChildren()[border.getSelected()];\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var cm = layout.getClassName;\n    var style = border.getTabHeaderRect().styleWithPosition({});\n    var tabs = [];\n    var layoutTab = function (i) {\n        var isSelected = border.getSelected() === i;\n        var child = border.getChildren()[i];\n        tabs.push(React.createElement(BorderButton_1.BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n    };\n    for (var i = 0; i < border.getChildren().length; i++) {\n        layoutTab(i);\n    }\n    var borderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());\n    if (border.getClassName() !== undefined) {\n        borderClasses += \" \" + border.getClassName();\n    }\n    // allow customization of tabset right/bottom buttons\n    var buttons = [];\n    var renderState = { headerContent: {}, buttons: buttons, stickyButtons: [], headerButtons: [] };\n    layout.customizeTabSet(border, renderState);\n    buttons = renderState.buttons;\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    var selectedIndex = border.getSelected();\n    if (selectedIndex !== -1) {\n        var selectedTabNode = border.getChildren()[selectedIndex];\n        if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n            var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n            buttons.push(React.createElement(\"button\", { key: \"float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.popout));\n        }\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));\n    style = layout.styleFont(style);\n    var innerStyle = {};\n    var borderHeight = border.getBorderBarSize() - 1;\n    if (border.getLocation() === DockLocation_1.default.LEFT) {\n        innerStyle = { right: borderHeight, height: borderHeight, top: position };\n    }\n    else if (border.getLocation() === DockLocation_1.default.RIGHT) {\n        innerStyle = { left: borderHeight, height: borderHeight, top: position };\n    }\n    else {\n        innerStyle = { height: borderHeight, left: position };\n    }\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", style: style, className: borderClasses, \"data-layout-path\": path, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },\n        React.createElement(\"div\", { style: { height: borderHeight }, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()) },\n            React.createElement(\"div\", { style: innerStyle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabs)),\n        toolbar));\n};\nexports.BorderTabSet = BorderTabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/BorderTabSet.tsx?");
 
 /***/ }),
 
@@ -612,6 +612,18 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 
 /***/ }),
 
+/***/ "./src/view/Icons.tsx":
+/*!****************************!*\
+  !*** ./src/view/Icons.tsx ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.RestoreIcon = exports.PopoutIcon = exports.OverflowIcon = exports.MaximizeIcon = exports.CloseIcon = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar style = { width: \"1em\", height: \"1em\", display: \"flex\", alignItems: \"center\" };\nvar CloseIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\" },\n        React.createElement(\"path\", { fill: \"none\", d: \"M0 0h24v24H0z\" }),\n        React.createElement(\"path\", { stroke: \"gray\", fill: \"gray\", d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" })));\n};\nexports.CloseIcon = CloseIcon;\nvar MaximizeIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\" })));\n};\nexports.MaximizeIcon = MaximizeIcon;\nvar OverflowIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M7 10l5 5 5-5z\" })));\n};\nexports.OverflowIcon = OverflowIcon;\nvar PopoutIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z\" })));\n};\nexports.PopoutIcon = PopoutIcon;\nvar RestoreIcon = function () {\n    return (React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", style: style, viewBox: \"0 0 24 24\", fill: \"gray\" },\n        React.createElement(\"path\", { d: \"M0 0h24v24H0z\", fill: \"none\" }),\n        React.createElement(\"path\", { stroke: \"gray\", d: \"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z\" })));\n};\nexports.RestoreIcon = RestoreIcon;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Icons.tsx?");
+
+/***/ }),
+
 /***/ "./src/view/Layout.tsx":
 /*!*****************************!*\
   !*** ./src/view/Layout.tsx ***!
@@ -620,7 +632,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @hidden @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @hidden @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @hidden @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @hidden @internal */\n        _this.firstMove = false;\n        /** @hidden @internal */\n        _this.dragRectRendered = true;\n        /** @hidden @internal */\n        _this.dragDivText = \"\";\n        /** @hidden @internal */\n        _this.edgeRectLength = 100;\n        /** @hidden @internal */\n        _this.edgeRectWidth = 10;\n        /** @hidden @internal */\n        _this.edgesShown = false;\n        /** @hidden @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @hidden @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.default(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @hidden @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @hidden @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.default.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @hidden @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @hidden @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.default.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @hidden @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.default.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        /** @hidden @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.default._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @hidden @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.default.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.default.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @hidden @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(text, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            ReactDOM.render(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @hidden @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.default && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @hidden @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \" + speed + \"s, left \" + speed + \"s, width \" + speed + \"s, height \" + speed + \"s\";\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hideEdges(rootdiv);\n            DragDrop_1.default.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.default.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.default.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        // For backwards compatibility, prop closeIcon sets prop icons.close:\n        _this.icons = props.closeIcon ? Object.assign({ close: props.closeIcon }, props.icons) : props.icons;\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.default(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.default.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.props.font.size) {\n                style.fontSize = this.props.font.size;\n            }\n            if (this.props.font.family) {\n                style.fontFamily = this.props.font.family;\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @hidden @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @hidden @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @hidden @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));\n    };\n    /** @hidden @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @hidden @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @hidden @internal */\n    Layout.prototype.render = function () {\n        var _this = this;\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize,\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        this.tabIds.forEach(function (t) {\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        });\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        Object.keys(tabComponents).forEach(function (t) {\n            if (!nextTopIdsMap[t]) {\n                _this.tabIds.push(t);\n            }\n        });\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\" + border.getLocation().getName();\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\" + border.getLocation().getName(), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.default) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.default) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.default) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.default) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.default) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === __1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetId, DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetNode.getId(), DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.default._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.default.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.default(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @hidden @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.default ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.default || dropInfo.node instanceof BorderNode_1.default) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.default(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.default.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.default.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.default._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.default.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.default.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.default.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.default.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.default.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.default.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.default.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @hidden @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @hidden @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\nexports.default = Layout;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Icons_1 = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\nvar defaultIcons = {\n    close: React.createElement(Icons_1.CloseIcon, null),\n    closeTabset: React.createElement(Icons_1.CloseIcon, null),\n    popout: React.createElement(Icons_1.PopoutIcon, null),\n    maximize: React.createElement(Icons_1.MaximizeIcon, null),\n    restore: React.createElement(Icons_1.RestoreIcon, null),\n    more: React.createElement(Icons_1.OverflowIcon, null),\n};\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @hidden @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @hidden @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @hidden @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @hidden @internal */\n        _this.firstMove = false;\n        /** @hidden @internal */\n        _this.dragRectRendered = true;\n        /** @hidden @internal */\n        _this.dragDivText = undefined;\n        /** @hidden @internal */\n        _this.edgeRectLength = 100;\n        /** @hidden @internal */\n        _this.edgeRectWidth = 10;\n        /** @hidden @internal */\n        _this.edgesShown = false;\n        /** @hidden @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @hidden @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.default(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @hidden @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @hidden @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.default.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @hidden @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @hidden @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.default.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @hidden @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.default.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        /** @hidden @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.default._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @hidden @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.default.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.default.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @hidden @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content;\n            if (text !== undefined) {\n                content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            }\n            else {\n                if (node && node instanceof TabNode_1.default) {\n                    content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));\n                }\n            }\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(content, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            ReactDOM.render(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @hidden @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.default && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @hidden @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \" + speed + \"s, left \" + speed + \"s, width \" + speed + \"s, height \" + speed + \"s\";\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @hidden @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hideEdges(rootdiv);\n            DragDrop_1.default.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.default.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.default.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.default.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        _this.icons = __assign(__assign({}, defaultIcons), props.icons);\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.default(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.default.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @hidden @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.selfRef.current) {\n                if (this.props.font.size) {\n                    this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\n                }\n                if (this.props.font.family) {\n                    this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\n                }\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @hidden @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @hidden @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @hidden @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @hidden @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args));\n    };\n    /** @hidden @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @hidden @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @hidden @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @hidden @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @hidden @internal */\n    Layout.prototype.render = function () {\n        var _this = this;\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        this.tabIds.forEach(function (t) {\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        });\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        Object.keys(tabComponents).forEach(function (t) {\n            if (!nextTopIdsMap[t]) {\n                _this.tabIds.push(t);\n            }\n        });\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\" + border.getLocation().getName();\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\" + border.getLocation().getName(), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.default) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.default) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.default) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.default) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.default) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === __1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetId, DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.default.addNode(json, tabsetNode.getId(), DockLocation_1.default.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.default._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.default.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.default(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @hidden @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.default ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.default || dropInfo.node instanceof BorderNode_1.default) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.default(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.default.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.default.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.default._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.default.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.default.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.default.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.default.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.default.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.default.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @hidden @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.default.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @hidden @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @hidden @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @hidden @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @hidden @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\nexports.default = Layout;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -644,7 +656,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.hideElement = exports.Tab = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_1 = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar ErrorBoundary_1 = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\n/** @hidden @internal */\nvar Tab = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, factory = props.factory, path = props.path;\n    var _a = React.useState(!props.node.isEnableRenderOnDemand() || props.selected), renderComponent = _a[0], setRenderComponent = _a[1];\n    React.useLayoutEffect(function () {\n        if (!renderComponent && selected) {\n            // load on demand\n            // console.log(\"load on demand: \" + node.getName());\n            setRenderComponent(true);\n        }\n    });\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var cm = layout.getClassName;\n    var useVisibility = node.getModel().isUseVisibility();\n    var parentNode = node.getParent();\n    var style = node._styleWithPosition();\n    if (!selected) {\n        hideElement(style, useVisibility);\n    }\n    if (parentNode instanceof TabSetNode_1.default) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            hideElement(style, useVisibility);\n        }\n    }\n    var child;\n    if (renderComponent) {\n        child = factory(node);\n    }\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__TAB);\n    if (parentNode instanceof __1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER);\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());\n    }\n    return (React.createElement(\"div\", { className: className, \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(ErrorBoundary_1.ErrorBoundary, { message: props.layout.i18nName(I18nLabel_1.I18nLabel.Error_rendering_component) },\n            React.createElement(react_1.Fragment, null, child))));\n};\nexports.Tab = Tab;\nfunction hideElement(style, useVisibility) {\n    if (useVisibility) {\n        style.visibility = \"hidden\";\n    }\n    else {\n        style.display = \"none\";\n    }\n}\nexports.hideElement = hideElement;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Tab.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Tab = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_1 = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar ErrorBoundary_1 = __webpack_require__(/*! ./ErrorBoundary */ \"./src/view/ErrorBoundary.tsx\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar __1 = __webpack_require__(/*! .. */ \"./src/index.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar Tab = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, factory = props.factory, path = props.path;\n    var _a = React.useState(!props.node.isEnableRenderOnDemand() || props.selected), renderComponent = _a[0], setRenderComponent = _a[1];\n    React.useLayoutEffect(function () {\n        if (!renderComponent && selected) {\n            // load on demand\n            // console.log(\"load on demand: \" + node.getName());\n            setRenderComponent(true);\n        }\n    });\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var cm = layout.getClassName;\n    var useVisibility = node.getModel().isUseVisibility();\n    var parentNode = node.getParent();\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Utils_1.hideElement(style, useVisibility);\n    }\n    if (parentNode instanceof TabSetNode_1.default) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            Utils_1.hideElement(style, useVisibility);\n        }\n    }\n    var child;\n    if (renderComponent) {\n        child = factory(node);\n    }\n    var className = cm(Types_1.CLASSES.FLEXLAYOUT__TAB);\n    if (parentNode instanceof __1.BorderNode) {\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER);\n        className += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName());\n    }\n    return (React.createElement(\"div\", { className: className, \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n        React.createElement(ErrorBoundary_1.ErrorBoundary, { message: props.layout.i18nName(I18nLabel_1.I18nLabel.Error_rendering_component) },\n            React.createElement(react_1.Fragment, null, child))));\n};\nexports.Tab = Tab;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Tab.tsx?");
 
 /***/ }),
 
@@ -656,7 +668,19 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\n/** @hidden @internal */\nvar TabButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var contentRef = React.useRef(null);\n    var contentWidth = React.useRef(0);\n    var onMouseDown = function (event) {\n        if (!TabSet_1.isAuxMouseEvent(event) && !layout.getEditingTab()) {\n            var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tab, node.getName());\n            layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (TabSet_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var onDoubleClick = function (event) {\n        if (node.isEnableRename()) {\n            layout.setEditingTab(node);\n            layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\n        }\n        // else {\n        //     const parentNode = node.getParent() as TabSetNode;\n        //     if (parentNode.canMaximize()) {\n        //         layout.maximize(parentNode);\n        //     }\n        // }\n    };\n    var onEndEdit = function (event) {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    var updateRect = function () {\n        // record position of tab in node\n        var layoutRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\n        contentWidth.current = contentRef.current.getBoundingClientRect().width;\n    };\n    var onTextBoxMouseDown = function (event) {\n        // console.log(\"onTextBoxMouseDown\");\n        event.stopPropagation();\n    };\n    var onTextBoxKeyPress = function (event) {\n        // console.log(event, event.keyCode);\n        if (event.keyCode === 27) {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.keyCode === 13) {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(Actions_1.default.renameTab(node.getId(), event.target.value));\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var baseClassName = Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    var classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (selected) {\n        classNames += \" \" + cm(baseClassName + \"--selected\");\n    }\n    else {\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    var content = (React.createElement(\"div\", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content));\n    var leading = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading);\n    if (layout.getEditingTab() === node) {\n        var contentStyle = { width: contentWidth + \"px\" };\n        content = (React.createElement(\"input\", { style: contentStyle, ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\n    }\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);\n        buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        buttons));\n};\nexports.TabButton = TabButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButton = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar ICloseType_1 = __webpack_require__(/*! ../model/ICloseType */ \"./src/model/ICloseType.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabButton = function (props) {\n    var layout = props.layout, node = props.node, selected = props.selected, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var selfRef = React.useRef(null);\n    var contentRef = React.useRef(null);\n    var contentWidth = React.useRef(0);\n    var onMouseDown = function (event) {\n        if (!Utils_1.isAuxMouseEvent(event) && !layout.getEditingTab()) {\n            layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onClick = function () {\n        layout.doAction(Actions_1.default.selectTab(node.getId()));\n    };\n    var onDoubleClick = function (event) {\n        if (node.isEnableRename()) {\n            layout.setEditingTab(node);\n            layout.getCurrentDocument().body.addEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.addEventListener(\"touchstart\", onEndEdit);\n        }\n        // else {\n        //     const parentNode = node.getParent() as TabSetNode;\n        //     if (parentNode.canMaximize()) {\n        //         layout.maximize(parentNode);\n        //     }\n        // }\n    };\n    var onEndEdit = function (event) {\n        if (event.target !== contentRef.current) {\n            layout.getCurrentDocument().body.removeEventListener(\"mousedown\", onEndEdit);\n            layout.getCurrentDocument().body.removeEventListener(\"touchstart\", onEndEdit);\n            layout.setEditingTab(undefined);\n        }\n    };\n    var isClosable = function () {\n        var closeType = node.getCloseType();\n        if (selected || closeType === ICloseType_1.ICloseType.Always) {\n            return true;\n        }\n        if (closeType === ICloseType_1.ICloseType.Visible) {\n            // not selected but x should be visible due to hover\n            if (window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n                return true;\n            }\n        }\n        return false;\n    };\n    var onClose = function (event) {\n        if (isClosable()) {\n            layout.doAction(Actions_1.default.deleteTab(node.getId()));\n        }\n        else {\n            onClick();\n        }\n    };\n    var onCloseMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    React.useLayoutEffect(function () {\n        updateRect();\n        if (layout.getEditingTab() === node) {\n            contentRef.current.select();\n        }\n    });\n    var updateRect = function () {\n        // record position of tab in node\n        var layoutRect = layout.getDomRect();\n        var r = selfRef.current.getBoundingClientRect();\n        node._setTabRect(new Rect_1.default(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));\n        contentWidth.current = selfRef.current.getBoundingClientRect().width;\n    };\n    var onTextBoxMouseDown = function (event) {\n        // console.log(\"onTextBoxMouseDown\");\n        event.stopPropagation();\n    };\n    var onTextBoxKeyPress = function (event) {\n        // console.log(event, event.keyCode);\n        if (event.keyCode === 27) {\n            // esc\n            layout.setEditingTab(undefined);\n        }\n        else if (event.keyCode === 13) {\n            // enter\n            layout.setEditingTab(undefined);\n            layout.doAction(Actions_1.default.renameTab(node.getId(), event.target.value));\n        }\n    };\n    var cm = layout.getClassName;\n    var parentNode = node.getParent();\n    var baseClassName = Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON;\n    var classNames = cm(baseClassName);\n    classNames += \" \" + cm(baseClassName + \"_\" + parentNode.getTabLocation());\n    if (selected) {\n        classNames += \" \" + cm(baseClassName + \"--selected\");\n    }\n    else {\n        classNames += \" \" + cm(baseClassName + \"--unselected\");\n    }\n    if (node.getClassName() !== undefined) {\n        classNames += \" \" + node.getClassName();\n    }\n    var renderState = Utils_1.getRenderStateEx(layout, node, iconFactory, titleFactory);\n    var content = renderState.content ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content)) : null;\n    var leading = renderState.leading ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n    if (layout.getEditingTab() === node) {\n        content = (React.createElement(\"input\", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), \"data-layout-path\": path + \"/textbox\", type: \"text\", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));\n    }\n    if (node.isEnableClose()) {\n        var closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);\n        renderState.buttons.push(React.createElement(\"div\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, icons === null || icons === void 0 ? void 0 : icons.close));\n    }\n    return (React.createElement(\"div\", { ref: selfRef, \"data-layout-path\": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },\n        leading,\n        content,\n        renderState.buttons));\n};\nexports.TabButton = TabButton;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButton.tsx?");
+
+/***/ }),
+
+/***/ "./src/view/TabButtonStamp.tsx":
+/*!*************************************!*\
+  !*** ./src/view/TabButtonStamp.tsx ***!
+  \*************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabButtonStamp = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabButtonStamp = function (props) {\n    var layout = props.layout, node = props.node, iconFactory = props.iconFactory, titleFactory = props.titleFactory;\n    var selfRef = React.useRef(null);\n    var cm = layout.getClassName;\n    var classNames = cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_STAMP);\n    var renderState = Utils_1.getRenderStateEx(layout, node, iconFactory, titleFactory);\n    var content = renderState.content ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_CONTENT) }, renderState.content))\n        : node._getNameForOverflowMenu();\n    var leading = renderState.leading ? (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_LEADING) }, renderState.leading)) : null;\n    return (React.createElement(\"div\", { ref: selfRef, className: classNames, title: node.getHelpText() },\n        leading,\n        content));\n};\nexports.TabButtonStamp = TabButtonStamp;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabButtonStamp.tsx?");
 
 /***/ }),
 
@@ -668,7 +692,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabFloating = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/** @hidden @internal */\nvar TabFloating = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, path = props.path;\n    var showPopout = function () {\n        if (node.getWindow()) {\n            node.getWindow().focus();\n        }\n    };\n    var dockPopout = function () {\n        layout.doAction(Actions_1.default.unFloatTab(node.getId()));\n    };\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var onClickFocus = function (event) {\n        event.preventDefault();\n        showPopout();\n    };\n    var onClickDock = function (event) {\n        event.preventDefault();\n        dockPopout();\n    };\n    var cm = layout.getClassName;\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Tab_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var message = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Message);\n    var showMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Show_Window);\n    var dockMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Dock_Window);\n    var customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();\n    if (customRenderCallback) {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style }, customRenderCallback(dockPopout, showPopout)));\n    }\n    else {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER) },\n                React.createElement(\"div\", null, message),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickFocus }, showMessage)),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickDock }, dockMessage)))));\n    }\n};\nexports.TabFloating = TabFloating;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabFloating.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabFloating = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabFloating = function (props) {\n    var layout = props.layout, selected = props.selected, node = props.node, path = props.path;\n    var showPopout = function () {\n        if (node.getWindow()) {\n            node.getWindow().focus();\n        }\n    };\n    var dockPopout = function () {\n        layout.doAction(Actions_1.default.unFloatTab(node.getId()));\n    };\n    var onMouseDown = function () {\n        var parent = node.getParent();\n        if (parent.getType() === TabSetNode_1.default.TYPE) {\n            if (!parent.isActive()) {\n                layout.doAction(Actions_1.default.setActiveTabset(parent.getId()));\n            }\n        }\n    };\n    var onClickFocus = function (event) {\n        event.preventDefault();\n        showPopout();\n    };\n    var onClickDock = function (event) {\n        event.preventDefault();\n        dockPopout();\n    };\n    var cm = layout.getClassName;\n    var style = node._styleWithPosition();\n    if (!selected) {\n        Utils_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var message = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Message);\n    var showMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Show_Window);\n    var dockMessage = layout.i18nName(I18nLabel_1.I18nLabel.Floating_Window_Dock_Window);\n    var customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();\n    if (customRenderCallback) {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style }, customRenderCallback(dockPopout, showPopout)));\n    }\n    else {\n        return (React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING), \"data-layout-path\": path, onMouseDown: onMouseDown, onTouchStart: onMouseDown, style: style },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER) },\n                React.createElement(\"div\", null, message),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickFocus }, showMessage)),\n                React.createElement(\"div\", null,\n                    React.createElement(\"a\", { href: \"#\", onClick: onClickDock }, dockMessage)))));\n    }\n};\nexports.TabFloating = TabFloating;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabFloating.tsx?");
 
 /***/ }),
 
@@ -680,7 +704,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.useTabOverflow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/** @hidden @internal */\nvar useTabOverflow = function (node, orientation, toolbarRef, stickyButtonsRef) {\n    var firstRender = React.useRef(true);\n    var tabsTruncated = React.useRef(false);\n    var lastRect = React.useRef(new Rect_1.default(0, 0, 0, 0));\n    var selfRef = React.useRef(null);\n    var _a = React.useState(0), position = _a[0], setPosition = _a[1];\n    var userControlledLeft = React.useRef(false);\n    var _b = React.useState([]), hiddenTabs = _b[0], setHiddenTabs = _b[1];\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n    React.useLayoutEffect(function () {\n        userControlledLeft.current = false;\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n    React.useLayoutEffect(function () {\n        updateVisibleTabs();\n    });\n    React.useEffect(function () {\n        var instance = selfRef.current;\n        instance.addEventListener('wheel', onWheel);\n        return function () {\n            instance.removeEventListener('wheel', onWheel);\n        };\n    }, []);\n    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)\n    var onWheel = function (event) {\n        event.preventDefault();\n    };\n    var getNear = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.x;\n        }\n        else {\n            return rect.y;\n        }\n    };\n    var getFar = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.getRight();\n        }\n        else {\n            return rect.getBottom();\n        }\n    };\n    var getSize = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.width;\n        }\n        else {\n            return rect.height;\n        }\n    };\n    var updateVisibleTabs = function () {\n        var tabMargin = 2;\n        if (firstRender.current === true) {\n            tabsTruncated.current = false;\n        }\n        var nodeRect = node instanceof TabSetNode_1.default ? node.getRect() : node.getTabHeaderRect();\n        var lastChild = node.getChildren()[node.getChildren().length - 1];\n        var stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());\n        if (firstRender.current === true ||\n            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second\n            nodeRect.height !== lastRect.current.height) {\n            lastRect.current = nodeRect;\n            var enabled = node instanceof TabSetNode_1.default ? node.isEnableTabStrip() === true : true;\n            var endPos = getFar(nodeRect) - stickyButtonsSize;\n            if (toolbarRef.current !== null) {\n                endPos -= getSize(toolbarRef.current.getBoundingClientRect());\n            }\n            if (enabled && node.getChildren().length > 0) {\n                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {\n                    return; // nothing to do all tabs are shown in available space\n                }\n                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation_1.default.HORZ ? 10 : 0) : 45; // will need hidden tabs\n                var shiftPos = 0;\n                var selectedTab = node.getSelectedNode();\n                if (selectedTab && !userControlledLeft.current) {\n                    var selectedRect = selectedTab.getTabRect();\n                    var selectedStart = getNear(selectedRect) - tabMargin;\n                    var selectedEnd = getFar(selectedRect) + tabMargin;\n                    // when selected tab is larger than available space then align left\n                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {\n                        shiftPos = getNear(nodeRect) - selectedStart;\n                    }\n                    else {\n                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {\n                            if (selectedStart < getNear(nodeRect)) {\n                                shiftPos = getNear(nodeRect) - selectedStart;\n                            }\n                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab\n                            if (selectedEnd + shiftPos > endPos) {\n                                shiftPos = endPos - selectedEnd;\n                            }\n                        }\n                    }\n                }\n                var extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));\n                var newPosition = Math.min(0, position + shiftPos + extraSpace);\n                // find hidden tabs\n                var diff = newPosition - position;\n                var hidden = [];\n                for (var i = 0; i < node.getChildren().length; i++) {\n                    var child = node.getChildren()[i];\n                    if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {\n                        hidden.push({ node: child, index: i });\n                    }\n                }\n                if (hidden.length > 0) {\n                    tabsTruncated.current = true;\n                }\n                firstRender.current = false; // need to do a second render\n                setHiddenTabs(hidden);\n                setPosition(newPosition);\n            }\n        }\n        else {\n            firstRender.current = true;\n        }\n    };\n    var onMouseWheel = function (event) {\n        var delta = 0;\n        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n            delta = -event.deltaX;\n        }\n        else {\n            delta = -event.deltaY;\n        }\n        if (event.deltaMode === 1) {\n            // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n            delta *= 40;\n        }\n        setPosition(position + delta);\n        userControlledLeft.current = true;\n        event.stopPropagation();\n    };\n    return { selfRef: selfRef, position: position, userControlledLeft: userControlledLeft, hiddenTabs: hiddenTabs, onMouseWheel: onMouseWheel, tabsTruncated: tabsTruncated.current };\n};\nexports.useTabOverflow = useTabOverflow;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.useTabOverflow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\n/** @hidden @internal */\nvar useTabOverflow = function (node, orientation, toolbarRef, stickyButtonsRef) {\n    var firstRender = React.useRef(true);\n    var tabsTruncated = React.useRef(false);\n    var lastRect = React.useRef(new Rect_1.default(0, 0, 0, 0));\n    var selfRef = React.useRef(null);\n    var _a = React.useState(0), position = _a[0], setPosition = _a[1];\n    var userControlledLeft = React.useRef(false);\n    var _b = React.useState([]), hiddenTabs = _b[0], setHiddenTabs = _b[1];\n    // if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)\n    React.useLayoutEffect(function () {\n        userControlledLeft.current = false;\n    }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);\n    React.useLayoutEffect(function () {\n        updateVisibleTabs();\n    });\n    React.useEffect(function () {\n        var instance = selfRef.current;\n        instance.addEventListener('wheel', onWheel);\n        return function () {\n            instance.removeEventListener('wheel', onWheel);\n        };\n    }, []);\n    // needed to prevent default mouse wheel over tabset/border (cannot do with react event?)\n    var onWheel = function (event) {\n        event.preventDefault();\n    };\n    var getNear = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.x;\n        }\n        else {\n            return rect.y;\n        }\n    };\n    var getFar = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.getRight();\n        }\n        else {\n            return rect.getBottom();\n        }\n    };\n    var getSize = function (rect) {\n        if (orientation === Orientation_1.default.HORZ) {\n            return rect.width;\n        }\n        else {\n            return rect.height;\n        }\n    };\n    var updateVisibleTabs = function () {\n        var tabMargin = 2;\n        if (firstRender.current === true) {\n            tabsTruncated.current = false;\n        }\n        var nodeRect = node instanceof TabSetNode_1.default ? node.getRect() : node.getTabHeaderRect();\n        var lastChild = node.getChildren()[node.getChildren().length - 1];\n        var stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());\n        if (firstRender.current === true ||\n            nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second\n            nodeRect.height !== lastRect.current.height) {\n            lastRect.current = nodeRect;\n            var enabled = node instanceof TabSetNode_1.default ? node.isEnableTabStrip() === true : true;\n            var endPos = getFar(nodeRect) - stickyButtonsSize;\n            if (toolbarRef.current !== null) {\n                endPos -= getSize(toolbarRef.current.getBoundingClientRect());\n            }\n            if (enabled && node.getChildren().length > 0) {\n                if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {\n                    return; // nothing to do all tabs are shown in available space\n                }\n                endPos -= hiddenTabs.length > 0 ? (orientation === Orientation_1.default.HORZ ? 16 : 0) : 45; // will need hidden tabs\n                var shiftPos = 0;\n                var selectedTab = node.getSelectedNode();\n                if (selectedTab && !userControlledLeft.current) {\n                    var selectedRect = selectedTab.getTabRect();\n                    var selectedStart = getNear(selectedRect) - tabMargin;\n                    var selectedEnd = getFar(selectedRect) + tabMargin;\n                    // when selected tab is larger than available space then align left\n                    if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {\n                        shiftPos = getNear(nodeRect) - selectedStart;\n                    }\n                    else {\n                        if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {\n                            if (selectedStart < getNear(nodeRect)) {\n                                shiftPos = getNear(nodeRect) - selectedStart;\n                            }\n                            // use second if statement to prevent tab moving back then forwards if not enough space for single tab\n                            if (selectedEnd + shiftPos > endPos) {\n                                shiftPos = endPos - selectedEnd;\n                            }\n                        }\n                    }\n                }\n                var extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));\n                var newPosition = Math.min(0, position + shiftPos + extraSpace);\n                // find hidden tabs\n                var diff = newPosition - position;\n                var hidden = [];\n                for (var i = 0; i < node.getChildren().length; i++) {\n                    var child = node.getChildren()[i];\n                    if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {\n                        hidden.push({ node: child, index: i });\n                    }\n                }\n                if (hidden.length > 0) {\n                    tabsTruncated.current = true;\n                }\n                firstRender.current = false; // need to do a second render\n                setHiddenTabs(hidden);\n                setPosition(newPosition);\n            }\n        }\n        else {\n            firstRender.current = true;\n        }\n    };\n    var onMouseWheel = function (event) {\n        var delta = 0;\n        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {\n            delta = -event.deltaX;\n        }\n        else {\n            delta = -event.deltaY;\n        }\n        if (event.deltaMode === 1) {\n            // DOM_DELTA_LINE\t0x01\tThe delta values are specified in lines.\n            delta *= 40;\n        }\n        setPosition(position + delta);\n        userControlledLeft.current = true;\n        event.stopPropagation();\n    };\n    return { selfRef: selfRef, position: position, userControlledLeft: userControlledLeft, hiddenTabs: hiddenTabs, onMouseWheel: onMouseWheel, tabsTruncated: tabsTruncated.current };\n};\nexports.useTabOverflow = useTabOverflow;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabOverflowHook.tsx?");
 
 /***/ }),
 
@@ -692,7 +716,19 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.isAuxMouseEvent = exports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\n/** @hidden @internal */\nvar TabSet = function (props) {\n    var node = props.node, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var tabbarInnerRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(node, Orientation_1.default.HORZ, toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel, tabsTruncated = _a.tabsTruncated;\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!isAuxMouseEvent(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.default.setActiveTabset(node.getId()));\n            if (!layout.getEditingTab()) {\n                var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tabset, name_1);\n                layout.dragStart(event, message, node, node.isEnableDrag(), function (event2) { return undefined; }, onDoubleClick);\n            }\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.default.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var onDoubleClick = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    var cm = layout.getClassName;\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\n        tabbarInnerRef.current.scrollLeft = 0;\n    }\n    var selectedTabNode = node.getSelectedNode();\n    var style = node._styleWithPosition();\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\n        Tab_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, height: node.getTabStripHeight(), iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n        }\n    }\n    var showHeader = node.getName() !== undefined;\n    var stickyButtons = [];\n    var buttons = [];\n    var headerButtons = [];\n    // allow customization of header contents and buttons\n    var renderState = { headerContent: node.getName(), stickyButtons: stickyButtons, buttons: buttons, headerButtons: headerButtons };\n    layout.customizeTabSet(node, renderState);\n    var headerContent = renderState.headerContent;\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    headerButtons = renderState.headerButtons;\n    if (stickyButtons.length > 0) {\n        if (tabsTruncated) {\n            buttons = __spreadArray(__spreadArray([], stickyButtons), buttons);\n        }\n        else {\n            tabs.push(React.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n        var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n        buttons.push(React.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.popout));\n    }\n    if (node.canMaximize()) {\n        var minTitle = layout.i18nName(I18nLabel_1.I18nLabel.Restore);\n        var maxTitle = layout.i18nName(I18nLabel_1.I18nLabel.Maximize);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ? icons === null || icons === void 0 ? void 0 : icons.restore : icons === null || icons === void 0 ? void 0 : icons.maximize));\n    }\n    if (!node.isMaximized() && node.isEnableClose()) {\n        var title = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tabset);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n/** @hidden @internal */\nfunction isAuxMouseEvent(event) {\n    var auxEvent = false;\n    if (event.nativeEvent instanceof MouseEvent) {\n        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {\n            auxEvent = true;\n        }\n    }\n    return auxEvent;\n}\nexports.isAuxMouseEvent = isAuxMouseEvent;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from) {\n    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)\n        to[j] = from[i];\n    return to;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @hidden @internal */\nvar TabSet = function (props) {\n    var node = props.node, layout = props.layout, iconFactory = props.iconFactory, titleFactory = props.titleFactory, icons = props.icons, path = props.path;\n    var toolbarRef = React.useRef(null);\n    var overflowbuttonRef = React.useRef(null);\n    var tabbarInnerRef = React.useRef(null);\n    var stickyButtonsRef = React.useRef(null);\n    var _a = TabOverflowHook_1.useTabOverflow(node, Orientation_1.default.HORZ, toolbarRef, stickyButtonsRef), selfRef = _a.selfRef, position = _a.position, userControlledLeft = _a.userControlledLeft, hiddenTabs = _a.hiddenTabs, onMouseWheel = _a.onMouseWheel, tabsTruncated = _a.tabsTruncated;\n    var onOverflowClick = function (event) {\n        var element = overflowbuttonRef.current;\n        PopupMenu_1.showPopup(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.default.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!Utils_1.isAuxMouseEvent(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.default.setActiveTabset(node.getId()));\n            if (!layout.getEditingTab()) {\n                var message = layout.i18nName(I18nLabel_1.I18nLabel.Move_Tabset, name_1);\n                layout.dragStart(event, message, node, node.isEnableDrag(), function (event2) { return undefined; }, onDoubleClick);\n            }\n        }\n    };\n    var onAuxMouseClick = function (event) {\n        if (Utils_1.isAuxMouseEvent(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.default.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.default.floatTab(selectedTabNode.getId()));\n        }\n        event.stopPropagation();\n    };\n    var onDoubleClick = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n    };\n    // Start Render\n    var cm = layout.getClassName;\n    // tabbar inner can get shifted left via tab rename, this resets scrollleft to 0\n    if (tabbarInnerRef.current !== null && tabbarInnerRef.current.scrollLeft !== 0) {\n        tabbarInnerRef.current.scrollLeft = 0;\n    }\n    var selectedTabNode = node.getSelectedNode();\n    var style = node._styleWithPosition();\n    if (node.getModel().getMaximizedTabset() !== undefined && !node.isMaximized()) {\n        Utils_1.hideElement(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, height: node.getTabStripHeight(), iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n        }\n    }\n    var showHeader = node.getName() !== undefined;\n    var stickyButtons = [];\n    var buttons = [];\n    var headerButtons = [];\n    // allow customization of header contents and buttons\n    var renderState = { headerContent: node.getName(), stickyButtons: stickyButtons, buttons: buttons, headerButtons: headerButtons };\n    layout.customizeTabSet(node, renderState);\n    var headerContent = renderState.headerContent;\n    stickyButtons = renderState.stickyButtons;\n    buttons = renderState.buttons;\n    headerButtons = renderState.headerButtons;\n    if (stickyButtons.length > 0) {\n        if (tabsTruncated) {\n            buttons = __spreadArray(__spreadArray([], stickyButtons), buttons);\n        }\n        else {\n            tabs.push(React.createElement(\"div\", { ref: stickyButtonsRef, key: \"sticky_buttons_container\", onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));\n        }\n    }\n    var toolbar;\n    if (hiddenTabs.length > 0) {\n        var overflowTitle = layout.i18nName(I18nLabel_1.I18nLabel.Overflow_Menu_Tooltip);\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 :\n            icons.more,\n            hiddenTabs.length));\n    }\n    if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnableFloat() && !selectedTabNode.isFloating()) {\n        var floatTitle = layout.i18nName(I18nLabel_1.I18nLabel.Float_Tab);\n        buttons.push(React.createElement(\"button\", { key: \"float\", \"data-layout-path\": path + \"/button/float\", title: floatTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT), onClick: onFloatTab, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.popout));\n    }\n    if (node.canMaximize()) {\n        var minTitle = layout.i18nName(I18nLabel_1.I18nLabel.Restore);\n        var maxTitle = layout.i18nName(I18nLabel_1.I18nLabel.Maximize);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"max\", \"data-layout-path\": path + \"/button/max\", title: node.isMaximized() ? minTitle : maxTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ + (node.isMaximized() ? \"max\" : \"min\")), onClick: onMaximizeToggle, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, node.isMaximized() ? icons === null || icons === void 0 ? void 0 : icons.restore : icons === null || icons === void 0 ? void 0 : icons.maximize));\n    }\n    if (!node.isMaximized() && node.isEnableClose()) {\n        var title = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tabset);\n        var btns = showHeader ? headerButtons : buttons;\n        btns.push(React.createElement(\"button\", { key: \"close\", \"data-layout-path\": path + \"/button/close\", title: title, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE), onClick: onClose, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, icons === null || icons === void 0 ? void 0 : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+
+/***/ }),
+
+/***/ "./src/view/Utils.tsx":
+/*!****************************!*\
+  !*** ./src/view/Utils.tsx ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.isAuxMouseEvent = exports.hideElement = exports.getRenderStateEx = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\n/** @hidden @internal */\nfunction getRenderStateEx(layout, node, iconFactory, titleFactory) {\n    var leadingContent = iconFactory ? iconFactory(node) : undefined;\n    var titleContent = node.getName();\n    var name = node.getName();\n    function isTitleObject(obj) {\n        return obj.titleContent !== undefined;\n    }\n    if (titleFactory !== undefined) {\n        var titleObj = titleFactory(node);\n        if (titleObj !== undefined) {\n            if (typeof titleObj === \"string\") {\n                titleContent = titleObj;\n                name = titleObj;\n            }\n            else if (isTitleObject(titleObj)) {\n                titleContent = titleObj.titleContent;\n                name = titleObj.name;\n            }\n            else {\n                titleContent = titleObj;\n            }\n        }\n    }\n    if (leadingContent === undefined && node.getIcon() !== undefined) {\n        leadingContent = React.createElement(\"img\", { style: { width: \"1em\", height: \"1em\" }, src: node.getIcon(), alt: \"leadingContent\" });\n    }\n    var buttons = [];\n    // allow customization of leading contents (icon) and contents\n    var renderState = { leading: leadingContent, content: titleContent, name: name, buttons: buttons };\n    layout.customizeTab(node, renderState);\n    node._setRenderedName(renderState.name);\n    return renderState;\n}\nexports.getRenderStateEx = getRenderStateEx;\n/** @hidden @internal */\nfunction hideElement(style, useVisibility) {\n    if (useVisibility) {\n        style.visibility = \"hidden\";\n    }\n    else {\n        style.display = \"none\";\n    }\n}\nexports.hideElement = hideElement;\n/** @hidden @internal */\nfunction isAuxMouseEvent(event) {\n    var auxEvent = false;\n    if (event.nativeEvent instanceof MouseEvent) {\n        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {\n            auxEvent = true;\n        }\n    }\n    return auxEvent;\n}\nexports.isAuxMouseEvent = isAuxMouseEvent;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Utils.tsx?");
 
 /***/ }),