flexlayout-react 0.5.20 → 0.5.21

package/ChangeLog.txt

@@ -1,3 +1,7 @@
+0.5.21
+Fixed copying stylesheet links for popout windows when cssRules throw exception.
+Added option, enableUseVisibility, to allow use of visibility: hidden rather than display:none for hiding elements.
+
 0.5.20
 Added Cypress Tests 
 Fixed bug with tab icon not showing

package/README.md

@@ -581,13 +581,6 @@ First install dependencies:
 yarn install
 ```
 
-Install the peer dependencies:
-
-```
-yarn add react
-yarn add react-dom
-```
-
 Compile the project and run the examples:
  
 ```

package/declarations/model/IJsonModel.d.ts

@@ -36,6 +36,7 @@ export interface IGlobalAttributes {
     borderMinSize?: number;
     borderSize?: number;
     enableEdgeDock?: boolean;
+    enableUseVisibility?: boolean;
     marginInsets?: IInsets;
     rootOrientationVertical?: boolean;
     splitterExtra?: number;

package/declarations/model/Model.d.ts

@@ -31,6 +31,7 @@ declare class Model {
      */
     getRoot(): RowNode;
     isRootOrientationVertical(): boolean;
+    isUseVisibility(): boolean;
     /**
      * Gets the
      * @returns {BorderSet|*}

package/declarations/view/Tab.d.ts

@@ -1 +1 @@
-export {};
+export declare function hideElement(style: Record<string, any>, useVisibility: ConstrainBoolean): void;

package/dist/flexlayout.js

@@ -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        // 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    /**\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        // 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?");
 
 /***/ }),
 
@@ -596,7 +596,7 @@ eval("\nvar __extends = (this && this.__extends) || (function () {\n    var exte
 /***/ (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.FloatingWindow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_dom_1 = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar FloatingWindow = function (props) {\n    var title = props.title, id = props.id, url = props.url, rect = props.rect, onCloseWindow = props.onCloseWindow, onSetWindow = props.onSetWindow, children = props.children;\n    var popoutWindow = React.useRef(null);\n    var _a = React.useState(undefined), content = _a[0], setContent = _a[1];\n    React.useLayoutEffect(function () {\n        var r = rect;\n        // Make a local copy of the styles from the current window which will be passed into\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\n        // the styles will exist when 'popoutWindow.load' is called below.\n        var styles = Array.from(window.document.styleSheets).reduce(function (result, styleSheet) {\n            try {\n                return __spreadArray(__spreadArray([], result), [\n                    {\n                        href: styleSheet.href,\n                        type: styleSheet.type,\n                        rules: Array.from(styleSheet.cssRules).map(function (rule) { return rule.cssText; }),\n                    }\n                ]);\n            }\n            catch (e) {\n                // styleSheet.cssRules can throw security exception\n                return result;\n            }\n        }, []);\n        popoutWindow.current = window.open(url, id, \"left=\" + r.x + \",top=\" + r.y + \",width=\" + r.width + \",height=\" + r.height);\n        if (popoutWindow.current !== null) {\n            onSetWindow(id, popoutWindow.current);\n            // listen for parent unloading to remove all popouts\n            window.addEventListener(\"beforeunload\", function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            });\n            popoutWindow.current.addEventListener(\"load\", function () {\n                var popoutDocument = popoutWindow.current.document;\n                popoutDocument.title = title;\n                var popoutContent = popoutDocument.createElement(\"div\");\n                popoutContent.className = Types_1.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\n                popoutDocument.body.appendChild(popoutContent);\n                copyStyles(popoutDocument, styles).then(function () {\n                    setContent(popoutContent);\n                });\n                // listen for popout unloading (needs to be after load for safari)\n                popoutWindow.current.addEventListener(\"beforeunload\", function () {\n                    onCloseWindow(id);\n                });\n            });\n        }\n        else {\n            console.warn(\"Unable to open window \" + url);\n            onCloseWindow(id);\n        }\n        return function () {\n            // delay so refresh will close window\n            setTimeout(function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            }, 0);\n        };\n    }, []);\n    if (content !== undefined) {\n        return react_dom_1.createPortal(children, content);\n    }\n    else {\n        return null;\n    }\n};\nexports.FloatingWindow = FloatingWindow;\n/** @hidden @internal */\nfunction copyStyles(doc, styleSheets) {\n    var head = doc.head;\n    var promises = [];\n    styleSheets.forEach(function (styleSheet) {\n        if (styleSheet.href) {\n            // prefer links since they will keep paths to images etc\n            var styleElement_1 = doc.createElement(\"link\");\n            styleElement_1.type = styleSheet.type;\n            styleElement_1.rel = \"stylesheet\";\n            styleElement_1.href = styleSheet.href;\n            head.appendChild(styleElement_1);\n            promises.push(new Promise(function (resolve, reject) {\n                styleElement_1.onload = function () { return resolve(true); };\n            }));\n        }\n        else {\n            var style_1 = doc.createElement(\"style\");\n            styleSheet.rules.forEach(function (rule) { return style_1.appendChild(doc.createTextNode(rule)); });\n            head.appendChild(style_1);\n        }\n    });\n    return Promise.all(promises);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.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.FloatingWindow = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar react_dom_1 = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\n/** @hidden @internal */\nvar FloatingWindow = function (props) {\n    var title = props.title, id = props.id, url = props.url, rect = props.rect, onCloseWindow = props.onCloseWindow, onSetWindow = props.onSetWindow, children = props.children;\n    var popoutWindow = React.useRef(null);\n    var _a = React.useState(undefined), content = _a[0], setContent = _a[1];\n    React.useLayoutEffect(function () {\n        var r = rect;\n        // Make a local copy of the styles from the current window which will be passed into\n        // the floating window. window.document.styleSheets is mutable and we can't guarantee\n        // the styles will exist when 'popoutWindow.load' is called below.\n        var styles = Array.from(window.document.styleSheets).reduce(function (result, styleSheet) {\n            var rules = undefined;\n            try {\n                rules = styleSheet.cssRules;\n            }\n            catch (e) {\n                // styleSheet.cssRules can throw security exception\n            }\n            try {\n                return __spreadArray(__spreadArray([], result), [\n                    {\n                        href: styleSheet.href,\n                        type: styleSheet.type,\n                        rules: rules ? Array.from(rules).map(function (rule) { return rule.cssText; }) : null,\n                    }\n                ]);\n            }\n            catch (e) {\n                return result;\n            }\n        }, []);\n        popoutWindow.current = window.open(url, id, \"left=\" + r.x + \",top=\" + r.y + \",width=\" + r.width + \",height=\" + r.height);\n        if (popoutWindow.current !== null) {\n            onSetWindow(id, popoutWindow.current);\n            // listen for parent unloading to remove all popouts\n            window.addEventListener(\"beforeunload\", function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            });\n            popoutWindow.current.addEventListener(\"load\", function () {\n                var popoutDocument = popoutWindow.current.document;\n                popoutDocument.title = title;\n                var popoutContent = popoutDocument.createElement(\"div\");\n                popoutContent.className = Types_1.CLASSES.FLEXLAYOUT__FLOATING_WINDOW_CONTENT;\n                popoutDocument.body.appendChild(popoutContent);\n                copyStyles(popoutDocument, styles).then(function () {\n                    setContent(popoutContent);\n                });\n                // listen for popout unloading (needs to be after load for safari)\n                popoutWindow.current.addEventListener(\"beforeunload\", function () {\n                    onCloseWindow(id);\n                });\n            });\n        }\n        else {\n            console.warn(\"Unable to open window \" + url);\n            onCloseWindow(id);\n        }\n        return function () {\n            // delay so refresh will close window\n            setTimeout(function () {\n                if (popoutWindow.current) {\n                    popoutWindow.current.close();\n                    popoutWindow.current = null;\n                }\n            }, 0);\n        };\n    }, []);\n    if (content !== undefined) {\n        return react_dom_1.createPortal(children, content);\n    }\n    else {\n        return null;\n    }\n};\nexports.FloatingWindow = FloatingWindow;\n/** @hidden @internal */\nfunction copyStyles(doc, styleSheets) {\n    var head = doc.head;\n    var promises = [];\n    styleSheets.forEach(function (styleSheet) {\n        if (styleSheet.href) {\n            // prefer links since they will keep paths to images etc\n            var styleElement_1 = doc.createElement(\"link\");\n            styleElement_1.type = styleSheet.type;\n            styleElement_1.rel = \"stylesheet\";\n            styleElement_1.href = styleSheet.href;\n            head.appendChild(styleElement_1);\n            promises.push(new Promise(function (resolve, reject) {\n                styleElement_1.onload = function () { return resolve(true); };\n            }));\n        }\n        else {\n            if (styleSheet.rules) {\n                var style_1 = doc.createElement(\"style\");\n                styleSheet.rules.forEach(function (rule) { return style_1.appendChild(doc.createTextNode(rule)); });\n                head.appendChild(style_1);\n            }\n        }\n    });\n    return Promise.all(promises);\n}\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/FloatingWindow.tsx?");
 
 /***/ }),
 
@@ -644,7 +644,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexport
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-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\");\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 parentNode = node.getParent();\n    var style = node._styleWithPosition({\n        display: selected ? \"block\" : \"none\",\n    });\n    if (parentNode instanceof TabSetNode_1.default) {\n        if (node.getModel().getMaximizedTabset() !== undefined && !parentNode.isMaximized()) {\n            style.display = \"none\";\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?");
+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?");
 
 /***/ }),
 
@@ -656,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.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, show = props.show, 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, style: {\n            visibility: show ? \"visible\" : \"hidden\",\n        }, 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 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?");
 
 /***/ }),
 
@@ -668,7 +668,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\");\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        display: selected ? \"flex\" : \"none\",\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 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?");
 
 /***/ }),
 
@@ -692,7 +692,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 });\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\");\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        style.display = \"none\";\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, show: true, 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.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?");
 
 /***/ }),