flexlayout-react 0.6.7 → 0.6.8

package/ChangeLog.txt

@@ -1,3 +1,6 @@
+0.6.8
+Added onTabSetPlaceHolder prop to render the tabset area when there are no tabs.
+
 0.6.7
 More css variables, added Underline theme, updated dependencies
 

package/README.md

@@ -101,6 +101,7 @@ The `<Layout>` component renders the tabsets and splitters, it takes the followi
 | onContextMenu    | callback for handling context actions on tabs and tabsets |
 | onAuxMouseClick  | callback for handling mouse clicks on tabs and tabsets with alt, meta, shift keys, also handles center mouse clicks |
 | onShowOverflowMenu | callback for handling the display of the tab overflow menu |
+| onTabSetPlaceHolder | callback for rendering a placeholder when a tabset is empty |
 | iconFactory      | a factory function for creating icon components for tab bar buttons. <br/><br/> NOTE: for greater customization of the tab use onRenderTab instead of this callback |
 | titleFactory     | a factory function for creating title components for tab bar buttons. <br /><br /> NOTE: for greater customization of the tab use onRenderTab instead of this callback  |
 

package/declarations/Types.d.ts

@@ -43,6 +43,7 @@ export declare enum CLASSES {
     FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
     FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
     FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
+    FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
     FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
     FLEXLAYOUT__TABSET_TABBAR_INNER_ = "flexlayout__tabset_tabbar_inner_",
     FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER = "flexlayout__tabset_tabbar_inner_tab_container",

package/declarations/view/Layout.d.ts

@@ -20,6 +20,7 @@ export declare type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, m
     index: number;
     node: TabNode;
 }) => void) => void;
+export declare type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
@@ -56,6 +57,7 @@ export interface ILayoutProps {
     onContextMenu?: NodeMouseEvent;
     onAuxMouseClick?: NodeMouseEvent;
     onShowOverflowMenu?: ShowOverflowMenuCallback;
+    onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
 }
 export interface IFontValues {
     size?: string;
@@ -65,6 +67,7 @@ export interface IFontValues {
 }
 export interface ITabSetRenderValues {
     headerContent?: React.ReactNode;
+    centerContent?: React.ReactNode;
     stickyButtons: React.ReactNode[];
     buttons: React.ReactNode[];
     headerButtons: React.ReactNode[];

package/dist/flexlayout.js

@@ -266,7 +266,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
   \**********************/
 /***/ ((__unused_webpack_module, exports) => {
 
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_DIVIDER\"] = \"flexlayout__border_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TAB_DIVIDER\"] = \"flexlayout__tabset_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.CLASSES = void 0;\nvar CLASSES;\n(function (CLASSES) {\n    CLASSES[\"FLEXLAYOUT__BORDER\"] = \"flexlayout__border\";\n    CLASSES[\"FLEXLAYOUT__BORDER_\"] = \"flexlayout__border_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON\"] = \"flexlayout__border_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_\"] = \"flexlayout__border_button_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_CONTENT\"] = \"flexlayout__border_button_content\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_LEADING\"] = \"flexlayout__border_button_leading\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON_TRAILING\"] = \"flexlayout__border_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__SELECTED\"] = \"flexlayout__border_button--selected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_BUTTON__UNSELECTED\"] = \"flexlayout__border_button--unselected\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW\"] = \"flexlayout__border_toolbar_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_\"] = \"flexlayout__border_toolbar_button_overflow_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER\"] = \"flexlayout__border_inner\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_\"] = \"flexlayout__border_inner_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER\"] = \"flexlayout__border_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_\"] = \"flexlayout__border_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TAB_DIVIDER\"] = \"flexlayout__border_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__BORDER_SIZER\"] = \"flexlayout__border_sizer\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR\"] = \"flexlayout__border_toolbar\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_\"] = \"flexlayout__border_toolbar_\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON\"] = \"flexlayout__border_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__border_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__DRAG_RECT\"] = \"flexlayout__drag_rect\";\n    CLASSES[\"FLEXLAYOUT__EDGE_RECT\"] = \"flexlayout__edge_rect\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER\"] = \"flexlayout__error_boundary_container\";\n    CLASSES[\"FLEXLAYOUT__ERROR_BOUNDARY_CONTENT\"] = \"flexlayout__error_boundary_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_CONTENT\"] = \"flexlayout__floating_window_content\";\n    CLASSES[\"FLEXLAYOUT__FLOATING_WINDOW_TAB\"] = \"flexlayout__floating_window_tab\";\n    CLASSES[\"FLEXLAYOUT__LAYOUT\"] = \"flexlayout__layout\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT\"] = \"flexlayout__outline_rect\";\n    CLASSES[\"FLEXLAYOUT__OUTLINE_RECT_EDGE\"] = \"flexlayout__outline_rect_edge\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER\"] = \"flexlayout__splitter\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_EXTRA\"] = \"flexlayout__splitter_extra\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_\"] = \"flexlayout__splitter_\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_BORDER\"] = \"flexlayout__splitter_border\";\n    CLASSES[\"FLEXLAYOUT__SPLITTER_DRAG\"] = \"flexlayout__splitter_drag\";\n    CLASSES[\"FLEXLAYOUT__TAB\"] = \"flexlayout__tab\";\n    CLASSES[\"FLEXLAYOUT__TABSET\"] = \"flexlayout__tabset\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER\"] = \"flexlayout__tabset_header\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_SIZER\"] = \"flexlayout__tabset_header_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_HEADER_CONTENT\"] = \"flexlayout__tabset_header_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_MAXIMIZED\"] = \"flexlayout__tabset-maximized\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SELECTED\"] = \"flexlayout__tabset-selected\";\n    CLASSES[\"FLEXLAYOUT__TABSET_SIZER\"] = \"flexlayout__tabset_sizer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TAB_DIVIDER\"] = \"flexlayout__tabset_tab_divider\";\n    CLASSES[\"FLEXLAYOUT__TABSET_CONTENT\"] = \"flexlayout__tabset_content\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER\"] = \"flexlayout__tabset_tabbar_inner\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_\"] = \"flexlayout__tabset_tabbar_inner_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER\"] = \"flexlayout__tabset_tabbar_inner_tab_container\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_\"] = \"flexlayout__tabset_tabbar_inner_tab_container_\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER\"] = \"flexlayout__tabset_tabbar_outer\";\n    CLASSES[\"FLEXLAYOUT__TABSET_TABBAR_OUTER_\"] = \"flexlayout__tabset_tabbar_outer_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER\"] = \"flexlayout__tab_border\";\n    CLASSES[\"FLEXLAYOUT__TAB_BORDER_\"] = \"flexlayout__tab_border_\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON\"] = \"flexlayout__tab_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_CONTENT\"] = \"flexlayout__tab_button_content\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_LEADING\"] = \"flexlayout__tab_button_leading\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW\"] = \"flexlayout__tab_button_overflow\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT\"] = \"flexlayout__tab_button_overflow_count\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TEXTBOX\"] = \"flexlayout__tab_button_textbox\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_TRAILING\"] = \"flexlayout__tab_button_trailing\";\n    CLASSES[\"FLEXLAYOUT__TAB_BUTTON_STAMP\"] = \"flexlayout__tab_button_stamp\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING\"] = \"flexlayout__tab_floating\";\n    CLASSES[\"FLEXLAYOUT__TAB_FLOATING_INNER\"] = \"flexlayout__tab_floating_inner\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR\"] = \"flexlayout__tab_toolbar\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON\"] = \"flexlayout__tab_toolbar_button\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_\"] = \"flexlayout__tab_toolbar_button-\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT\"] = \"flexlayout__tab_toolbar_button-float\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER\"] = \"flexlayout__tab_toolbar_sticky_buttons_container\";\n    CLASSES[\"FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE\"] = \"flexlayout__tab_toolbar_button-close\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_CONTAINER\"] = \"flexlayout__popup_menu_container\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU_ITEM\"] = \"flexlayout__popup_menu_item\";\n    CLASSES[\"FLEXLAYOUT__POPUP_MENU\"] = \"flexlayout__popup_menu\";\n})(CLASSES = exports.CLASSES || (exports.CLASSES = {}));\n\n\n//# sourceURL=webpack://FlexLayout/./src/Types.ts?");
 
 /***/ }),
 
@@ -496,7 +496,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
   \*****************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
-eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Icons_1 = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\nvar defaultIcons = {\n    close: React.createElement(Icons_1.CloseIcon, null),\n    closeTabset: React.createElement(Icons_1.CloseIcon, null),\n    popout: React.createElement(Icons_1.PopoutIcon, null),\n    maximize: React.createElement(Icons_1.MaximizeIcon, null),\n    restore: React.createElement(Icons_1.RestoreIcon, null),\n    more: React.createElement(Icons_1.OverflowIcon, null),\n};\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @internal */\n        _this.firstMove = false;\n        /** @internal */\n        _this.dragRectRendered = true;\n        /** @internal */\n        _this.dragDivText = undefined;\n        /** @internal */\n        _this.edgeRectLength = 100;\n        /** @internal */\n        _this.edgeRectWidth = 10;\n        /** @internal */\n        _this.edgesShown = false;\n        /** @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.Actions.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hidePortal();\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.DragDrop.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hidePortal();\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.DragDrop.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n        };\n        /** @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.TabNode._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.DragDrop.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content;\n            if (text !== undefined) {\n                content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            }\n            else {\n                if (node && node instanceof TabNode_1.TabNode) {\n                    content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));\n                }\n            }\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(content, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            _this.showPortal(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @internal */\n        _this.showPortal = function (control, element) {\n            var portal = ReactDOM.createPortal(control, element);\n            _this.setState({ portal: portal });\n        };\n        /** @internal */\n        _this.hidePortal = function () {\n            _this.setState({ portal: undefined });\n        };\n        /** @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.TabNode && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \".concat(speed, \"s, left \").concat(speed, \"s, width \").concat(speed, \"s, height \").concat(speed, \"s\");\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hidePortal();\n            _this.hideEdges(rootdiv);\n            DragDrop_1.DragDrop.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.Actions.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.Actions.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        _this.icons = __assign(__assign({}, defaultIcons), props.icons);\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.Rect(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.DockLocation.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.selfRef.current) {\n                if (this.props.font.size) {\n                    this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\n                }\n                if (this.props.font.family) {\n                    this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\n                }\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args, false));\n    };\n    /** @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @internal */\n    Layout.prototype.render = function () {\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (var _i = 0, _a = this.tabIds; _i < _a.length; _i++) {\n            var t = _a[_i];\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        }\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        for (var _b = 0, _c = Object.keys(tabComponents); _b < _c.length; _b++) {\n            var t = _c[_b];\n            if (!nextTopIdsMap[t]) {\n                this.tabIds.push(t);\n            }\n        }\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements(),\n            this.state.portal));\n    };\n    /** @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\".concat(border.getLocation().getName());\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\".concat(border.getLocation().getName()), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.SplitterNode) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.TabNode) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.SplitterNode) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.TabSetNode) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.TabNode) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === Orientation_1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.DragDrop.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @internal */\n    Layout.prototype.getShowOverflowMenu = function () {\n        return this.props.onShowOverflowMenu;\n    };\n    /** @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
+eval("\nvar __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Layout = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar ReactDOM = __webpack_require__(/*! react-dom */ \"react-dom\");\nvar DockLocation_1 = __webpack_require__(/*! ../DockLocation */ \"./src/DockLocation.ts\");\nvar DragDrop_1 = __webpack_require__(/*! ../DragDrop */ \"./src/DragDrop.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar BorderNode_1 = __webpack_require__(/*! ../model/BorderNode */ \"./src/model/BorderNode.ts\");\nvar SplitterNode_1 = __webpack_require__(/*! ../model/SplitterNode */ \"./src/model/SplitterNode.ts\");\nvar TabNode_1 = __webpack_require__(/*! ../model/TabNode */ \"./src/model/TabNode.ts\");\nvar TabSetNode_1 = __webpack_require__(/*! ../model/TabSetNode */ \"./src/model/TabSetNode.ts\");\nvar Rect_1 = __webpack_require__(/*! ../Rect */ \"./src/Rect.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar BorderTabSet_1 = __webpack_require__(/*! ./BorderTabSet */ \"./src/view/BorderTabSet.tsx\");\nvar Splitter_1 = __webpack_require__(/*! ./Splitter */ \"./src/view/Splitter.tsx\");\nvar Tab_1 = __webpack_require__(/*! ./Tab */ \"./src/view/Tab.tsx\");\nvar TabSet_1 = __webpack_require__(/*! ./TabSet */ \"./src/view/TabSet.tsx\");\nvar FloatingWindow_1 = __webpack_require__(/*! ./FloatingWindow */ \"./src/view/FloatingWindow.tsx\");\nvar FloatingWindowTab_1 = __webpack_require__(/*! ./FloatingWindowTab */ \"./src/view/FloatingWindowTab.tsx\");\nvar TabFloating_1 = __webpack_require__(/*! ./TabFloating */ \"./src/view/TabFloating.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Icons_1 = __webpack_require__(/*! ./Icons */ \"./src/view/Icons.tsx\");\nvar TabButtonStamp_1 = __webpack_require__(/*! ./TabButtonStamp */ \"./src/view/TabButtonStamp.tsx\");\nvar defaultIcons = {\n    close: React.createElement(Icons_1.CloseIcon, null),\n    closeTabset: React.createElement(Icons_1.CloseIcon, null),\n    popout: React.createElement(Icons_1.PopoutIcon, null),\n    maximize: React.createElement(Icons_1.MaximizeIcon, null),\n    restore: React.createElement(Icons_1.RestoreIcon, null),\n    more: React.createElement(Icons_1.OverflowIcon, null),\n};\n// Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do\n// not work on any version if IE or the original Edge browser\n// Assume any recent desktop browser not IE or original Edge will work\n/** @internal */\n// @ts-ignore\nvar isIEorEdge = typeof window !== \"undefined\" && (window.document.documentMode || /Edge\\//.test(window.navigator.userAgent));\n/** @internal */\nvar isDesktop = typeof window !== \"undefined\" && window.matchMedia && window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n/** @internal */\nvar defaultSupportsPopout = isDesktop && !isIEorEdge;\n/**\n * A React component that hosts a multi-tabbed layout\n */\nvar Layout = /** @class */ (function (_super) {\n    __extends(Layout, _super);\n    function Layout(props) {\n        var _this = _super.call(this, props) || this;\n        /** @internal */\n        _this.firstMove = false;\n        /** @internal */\n        _this.dragRectRendered = true;\n        /** @internal */\n        _this.dragDivText = undefined;\n        /** @internal */\n        _this.edgeRectLength = 100;\n        /** @internal */\n        _this.edgeRectWidth = 10;\n        /** @internal */\n        _this.edgesShown = false;\n        /** @internal */\n        _this.onModelChange = function () {\n            _this.forceUpdate();\n            if (_this.props.onModelChange) {\n                _this.props.onModelChange(_this.props.model);\n            }\n        };\n        /** @internal */\n        _this.updateRect = function (domRect) {\n            if (domRect === void 0) { domRect = _this.getDomRect(); }\n            var rect = new Rect_1.Rect(0, 0, domRect.width, domRect.height);\n            if (!rect.equals(_this.state.rect) && rect.width !== 0 && rect.height !== 0) {\n                _this.setState({ rect: rect });\n            }\n        };\n        /** @internal */\n        _this.updateLayoutMetrics = function () {\n            if (_this.findHeaderBarSizeRef.current) {\n                var headerBarSize = _this.findHeaderBarSizeRef.current.getBoundingClientRect().height;\n                if (headerBarSize !== _this.state.calculatedHeaderBarSize) {\n                    _this.setState({ calculatedHeaderBarSize: headerBarSize });\n                }\n            }\n            if (_this.findTabBarSizeRef.current) {\n                var tabBarSize = _this.findTabBarSizeRef.current.getBoundingClientRect().height;\n                if (tabBarSize !== _this.state.calculatedTabBarSize) {\n                    _this.setState({ calculatedTabBarSize: tabBarSize });\n                }\n            }\n            if (_this.findBorderBarSizeRef.current) {\n                var borderBarSize = _this.findBorderBarSizeRef.current.getBoundingClientRect().height;\n                if (borderBarSize !== _this.state.calculatedBorderBarSize) {\n                    _this.setState({ calculatedBorderBarSize: borderBarSize });\n                }\n            }\n        };\n        /** @internal */\n        _this.getClassName = function (defaultClassName) {\n            if (_this.props.classNameMapper === undefined) {\n                return defaultClassName;\n            }\n            else {\n                return _this.props.classNameMapper(defaultClassName);\n            }\n        };\n        /** @internal */\n        _this.onCloseWindow = function (id) {\n            _this.doAction(Actions_1.Actions.unFloatTab(id));\n            try {\n                _this.props.model.getNodeById(id)._setWindow(undefined);\n            }\n            catch (e) {\n                // catch incase it was a model change\n            }\n        };\n        /** @internal */\n        _this.onSetWindow = function (id, window) {\n            _this.props.model.getNodeById(id)._setWindow(window);\n        };\n        /** @internal */\n        _this.onCancelAdd = function () {\n            var _a, _b;\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hidePortal();\n            if (_this.fnNewNodeDropped != null) {\n                _this.fnNewNodeDropped();\n                _this.fnNewNodeDropped = undefined;\n            }\n            try {\n                (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n            }\n            catch (e) {\n                console.error(e);\n            }\n            DragDrop_1.DragDrop.instance.hideGlass();\n            _this.newTabJson = undefined;\n            _this.customDrop = undefined;\n        };\n        /** @internal */\n        _this.onCancelDrag = function (wasDragging) {\n            var _a, _b;\n            if (wasDragging) {\n                var rootdiv = _this.selfRef.current;\n                try {\n                    rootdiv.removeChild(_this.outlineDiv);\n                }\n                catch (e) { }\n                try {\n                    rootdiv.removeChild(_this.dragDiv);\n                }\n                catch (e) { }\n                _this.dragDiv = undefined;\n                _this.hidePortal();\n                _this.hideEdges(rootdiv);\n                if (_this.fnNewNodeDropped != null) {\n                    _this.fnNewNodeDropped();\n                    _this.fnNewNodeDropped = undefined;\n                }\n                try {\n                    (_b = (_a = _this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated) === null || _b === void 0 ? void 0 : _b.call(_a);\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                DragDrop_1.DragDrop.instance.hideGlass();\n                _this.newTabJson = undefined;\n                _this.customDrop = undefined;\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n        };\n        /** @internal */\n        _this.onDragDivMouseDown = function (event) {\n            event.preventDefault();\n            _this.dragStart(event, _this.dragDivText, TabNode_1.TabNode._fromJson(_this.newTabJson, _this.props.model, false), true, undefined, undefined);\n        };\n        /** @internal */\n        _this.dragStart = function (event, dragDivText, node, allowDrag, onClick, onDoubleClick) {\n            if (_this.props.model.getMaximizedTabset() !== undefined || !allowDrag) {\n                DragDrop_1.DragDrop.instance.startDrag(event, undefined, undefined, undefined, undefined, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n            else {\n                _this.dragNode = node;\n                _this.dragDivText = dragDivText;\n                DragDrop_1.DragDrop.instance.startDrag(event, _this.onDragStart, _this.onDragMove, _this.onDragEnd, _this.onCancelDrag, onClick, onDoubleClick, _this.currentDocument, _this.selfRef.current);\n            }\n        };\n        /** @internal */\n        _this.dragRectRender = function (text, node, json, onRendered) {\n            var content;\n            if (text !== undefined) {\n                content = React.createElement(\"div\", { style: { whiteSpace: \"pre\" } }, text.replace(\"<br>\", \"\\n\"));\n            }\n            else {\n                if (node && node instanceof TabNode_1.TabNode) {\n                    content = (React.createElement(TabButtonStamp_1.TabButtonStamp, { node: node, layout: _this, iconFactory: _this.props.iconFactory, titleFactory: _this.props.titleFactory }));\n                }\n            }\n            if (_this.props.onRenderDragRect !== undefined) {\n                var customContent = _this.props.onRenderDragRect(content, node, json);\n                if (customContent !== undefined) {\n                    content = customContent;\n                }\n            }\n            // hide div until the render is complete\n            _this.dragDiv.style.visibility = \"hidden\";\n            _this.dragRectRendered = false;\n            _this.showPortal(React.createElement(DragRectRenderWrapper\n            // wait for it to be rendered\n            , { \n                // wait for it to be rendered\n                onRendered: function () {\n                    _this.dragRectRendered = true;\n                    onRendered === null || onRendered === void 0 ? void 0 : onRendered();\n                } }, content), _this.dragDiv);\n        };\n        /** @internal */\n        _this.showPortal = function (control, element) {\n            var portal = ReactDOM.createPortal(control, element);\n            _this.setState({ portal: portal });\n        };\n        /** @internal */\n        _this.hidePortal = function () {\n            _this.setState({ portal: undefined });\n        };\n        /** @internal */\n        _this.onDragStart = function () {\n            _this.dropInfo = undefined;\n            _this.customDrop = undefined;\n            var rootdiv = _this.selfRef.current;\n            _this.outlineDiv = _this.currentDocument.createElement(\"div\");\n            _this.outlineDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT);\n            _this.outlineDiv.style.visibility = \"hidden\";\n            rootdiv.appendChild(_this.outlineDiv);\n            if (_this.dragDiv == null) {\n                _this.dragDiv = _this.currentDocument.createElement(\"div\");\n                _this.dragDiv.className = _this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragRectRender(_this.dragDivText, _this.dragNode, _this.newTabJson);\n                rootdiv.appendChild(_this.dragDiv);\n            }\n            // add edge indicators\n            _this.showEdges(rootdiv);\n            if (_this.dragNode !== undefined && _this.dragNode instanceof TabNode_1.TabNode && _this.dragNode.getTabRect() !== undefined) {\n                _this.dragNode.getTabRect().positionElement(_this.outlineDiv);\n            }\n            _this.firstMove = true;\n            return true;\n        };\n        /** @internal */\n        _this.onDragMove = function (event) {\n            if (_this.firstMove === false) {\n                var speed = _this.props.model._getAttribute(\"tabDragSpeed\");\n                _this.outlineDiv.style.transition = \"top \".concat(speed, \"s, left \").concat(speed, \"s, width \").concat(speed, \"s, height \").concat(speed, \"s\");\n            }\n            _this.firstMove = false;\n            var clientRect = _this.selfRef.current.getBoundingClientRect();\n            var pos = {\n                x: event.clientX - clientRect.left,\n                y: event.clientY - clientRect.top,\n            };\n            _this.checkForBorderToShow(pos.x, pos.y);\n            // keep it between left & right\n            var dragRect = _this.dragDiv.getBoundingClientRect();\n            var newLeft = pos.x - dragRect.width / 2;\n            if (newLeft + dragRect.width > clientRect.width) {\n                newLeft = clientRect.width - dragRect.width;\n            }\n            newLeft = Math.max(0, newLeft);\n            _this.dragDiv.style.left = newLeft + \"px\";\n            _this.dragDiv.style.top = pos.y + 5 + \"px\";\n            if (_this.dragRectRendered && _this.dragDiv.style.visibility === \"hidden\") {\n                // make visible once the drag rect has been rendered\n                _this.dragDiv.style.visibility = \"visible\";\n            }\n            var dropInfo = _this.props.model._findDropTargetNode(_this.dragNode, pos.x, pos.y);\n            if (dropInfo) {\n                if (_this.props.onTabDrag) {\n                    _this.handleCustomTabDrag(dropInfo, pos, event);\n                }\n                else {\n                    _this.dropInfo = dropInfo;\n                    _this.outlineDiv.className = _this.getClassName(dropInfo.className);\n                    dropInfo.rect.positionElement(_this.outlineDiv);\n                    _this.outlineDiv.style.visibility = \"visible\";\n                }\n            }\n        };\n        /** @internal */\n        _this.onDragEnd = function (event) {\n            var rootdiv = _this.selfRef.current;\n            rootdiv.removeChild(_this.outlineDiv);\n            rootdiv.removeChild(_this.dragDiv);\n            _this.dragDiv = undefined;\n            _this.hidePortal();\n            _this.hideEdges(rootdiv);\n            DragDrop_1.DragDrop.instance.hideGlass();\n            if (_this.dropInfo) {\n                if (_this.customDrop) {\n                    _this.newTabJson = undefined;\n                    try {\n                        var _a = _this.customDrop, callback = _a.callback, dragging = _a.dragging, over = _a.over, x = _a.x, y = _a.y, location_1 = _a.location;\n                        callback(dragging, over, x, y, location_1);\n                        if (_this.fnNewNodeDropped != null) {\n                            _this.fnNewNodeDropped();\n                            _this.fnNewNodeDropped = undefined;\n                        }\n                    }\n                    catch (e) {\n                        console.error(e);\n                    }\n                }\n                else if (_this.newTabJson !== undefined) {\n                    var newNode = _this.doAction(Actions_1.Actions.addNode(_this.newTabJson, _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                    if (_this.fnNewNodeDropped != null) {\n                        _this.fnNewNodeDropped(newNode, event);\n                        _this.fnNewNodeDropped = undefined;\n                    }\n                    _this.newTabJson = undefined;\n                }\n                else if (_this.dragNode !== undefined) {\n                    _this.doAction(Actions_1.Actions.moveNode(_this.dragNode.getId(), _this.dropInfo.node.getId(), _this.dropInfo.location, _this.dropInfo.index));\n                }\n            }\n            _this.setState({ showHiddenBorder: DockLocation_1.DockLocation.CENTER });\n        };\n        _this.props.model._setChangeListener(_this.onModelChange);\n        _this.tabIds = [];\n        _this.selfRef = React.createRef();\n        _this.findHeaderBarSizeRef = React.createRef();\n        _this.findTabBarSizeRef = React.createRef();\n        _this.findBorderBarSizeRef = React.createRef();\n        _this.supportsPopout = props.supportsPopout !== undefined ? props.supportsPopout : defaultSupportsPopout;\n        _this.popoutURL = props.popoutURL ? props.popoutURL : \"popout.html\";\n        _this.icons = __assign(__assign({}, defaultIcons), props.icons);\n        _this.firstRender = true;\n        _this.state = {\n            rect: new Rect_1.Rect(0, 0, 0, 0),\n            calculatedHeaderBarSize: 25,\n            calculatedTabBarSize: 26,\n            calculatedBorderBarSize: 30,\n            editingTab: undefined,\n            showHiddenBorder: DockLocation_1.DockLocation.CENTER,\n        };\n        _this.onDragEnter = _this.onDragEnter.bind(_this);\n        return _this;\n    }\n    /** @internal */\n    Layout.prototype.styleFont = function (style) {\n        if (this.props.font) {\n            if (this.selfRef.current) {\n                if (this.props.font.size) {\n                    this.selfRef.current.style.setProperty(\"--font-size\", this.props.font.size);\n                }\n                if (this.props.font.family) {\n                    this.selfRef.current.style.setProperty(\"--font-family\", this.props.font.family);\n                }\n            }\n            if (this.props.font.style) {\n                style.fontStyle = this.props.font.style;\n            }\n            if (this.props.font.weight) {\n                style.fontWeight = this.props.font.weight;\n            }\n        }\n        return style;\n    };\n    /** @internal */\n    Layout.prototype.doAction = function (action) {\n        if (this.props.onAction !== undefined) {\n            var outcome = this.props.onAction(action);\n            if (outcome !== undefined) {\n                return this.props.model.doAction(outcome);\n            }\n            return undefined;\n        }\n        else {\n            return this.props.model.doAction(action);\n        }\n    };\n    /** @internal */\n    Layout.prototype.componentDidMount = function () {\n        var _this = this;\n        this.updateRect();\n        this.updateLayoutMetrics();\n        // need to re-render if size changes\n        this.currentDocument = this.selfRef.current.ownerDocument;\n        this.currentWindow = this.currentDocument.defaultView;\n        this.resizeObserver = new ResizeObserver(function (entries) {\n            _this.updateRect(entries[0].contentRect);\n        });\n        this.resizeObserver.observe(this.selfRef.current);\n    };\n    /** @internal */\n    Layout.prototype.componentDidUpdate = function () {\n        this.updateLayoutMetrics();\n        if (this.props.model !== this.previousModel) {\n            if (this.previousModel !== undefined) {\n                this.previousModel._setChangeListener(undefined); // stop listening to old model\n            }\n            this.props.model._setChangeListener(this.onModelChange);\n            this.previousModel = this.props.model;\n        }\n        // console.log(\"Layout time: \" + this.layoutTime + \"ms Render time: \" + (Date.now() - this.start) + \"ms\");\n    };\n    /** @internal */\n    Layout.prototype.getCurrentDocument = function () {\n        return this.currentDocument;\n    };\n    /** @internal */\n    Layout.prototype.getDomRect = function () {\n        return this.selfRef.current.getBoundingClientRect();\n    };\n    /** @internal */\n    Layout.prototype.getRootDiv = function () {\n        return this.selfRef.current;\n    };\n    /** @internal */\n    Layout.prototype.isSupportsPopout = function () {\n        return this.supportsPopout;\n    };\n    /** @internal */\n    Layout.prototype.isRealtimeResize = function () {\n        var _a;\n        return (_a = this.props.realtimeResize) !== null && _a !== void 0 ? _a : false;\n    };\n    /** @internal */\n    Layout.prototype.onTabDrag = function () {\n        var _a, _b;\n        var args = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            args[_i] = arguments[_i];\n        }\n        return (_b = (_a = this.props).onTabDrag) === null || _b === void 0 ? void 0 : _b.call.apply(_b, __spreadArray([_a], args, false));\n    };\n    /** @internal */\n    Layout.prototype.getPopoutURL = function () {\n        return this.popoutURL;\n    };\n    /** @internal */\n    Layout.prototype.componentWillUnmount = function () {\n        var _a;\n        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.selfRef.current);\n    };\n    /** @internal */\n    Layout.prototype.setEditingTab = function (tabNode) {\n        this.setState({ editingTab: tabNode });\n    };\n    /** @internal */\n    Layout.prototype.getEditingTab = function () {\n        return this.state.editingTab;\n    };\n    /** @internal */\n    Layout.prototype.render = function () {\n        // first render will be used to find the size (via selfRef)\n        if (this.firstRender) {\n            this.firstRender = false;\n            return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT) }, this.metricsElements()));\n        }\n        this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia(\"(pointer: fine)\").matches);\n        // this.start = Date.now();\n        var borderComponents = [];\n        var tabSetComponents = [];\n        var floatingWindows = [];\n        var tabComponents = {};\n        var splitterComponents = [];\n        var metrics = {\n            headerBarSize: this.state.calculatedHeaderBarSize,\n            tabBarSize: this.state.calculatedTabBarSize,\n            borderBarSize: this.state.calculatedBorderBarSize\n        };\n        this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);\n        this.centerRect = this.props.model._layout(this.state.rect, metrics);\n        this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);\n        this.renderChildren(\"\", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n        if (this.edgesShown) {\n            this.repositionEdges(this.state.rect);\n        }\n        var nextTopIds = [];\n        var nextTopIdsMap = {};\n        // Keep any previous tabs in the same DOM order as before, removing any that have been deleted\n        for (var _i = 0, _a = this.tabIds; _i < _a.length; _i++) {\n            var t = _a[_i];\n            if (tabComponents[t]) {\n                nextTopIds.push(t);\n                nextTopIdsMap[t] = t;\n            }\n        }\n        this.tabIds = nextTopIds;\n        // Add tabs that have been added to the DOM\n        for (var _b = 0, _c = Object.keys(tabComponents); _b < _c.length; _b++) {\n            var t = _c[_b];\n            if (!nextTopIdsMap[t]) {\n                this.tabIds.push(t);\n            }\n        }\n        // this.layoutTime = (Date.now() - this.start);\n        return (React.createElement(\"div\", { ref: this.selfRef, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__LAYOUT), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : undefined },\n            tabSetComponents,\n            this.tabIds.map(function (t) {\n                return tabComponents[t];\n            }),\n            borderComponents,\n            splitterComponents,\n            floatingWindows,\n            this.metricsElements(),\n            this.state.portal));\n    };\n    /** @internal */\n    Layout.prototype.metricsElements = function () {\n        // used to measure the tab and border tab sizes\n        var fontStyle = this.styleFont({ visibility: \"hidden\" });\n        return (React.createElement(React.Fragment, null,\n            React.createElement(\"div\", { key: \"findHeaderBarSize\", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_SIZER) }, \"FindHeaderBarSize\"),\n            React.createElement(\"div\", { key: \"findTabBarSize\", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__TABSET_SIZER) }, \"FindTabBarSize\"),\n            React.createElement(\"div\", { key: \"findBorderBarSize\", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName(Types_1.CLASSES.FLEXLAYOUT__BORDER_SIZER) }, \"FindBorderBarSize\")));\n    };\n    /** @internal */\n    Layout.prototype.renderBorder = function (borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {\n        for (var _i = 0, _a = borderSet.getBorders(); _i < _a.length; _i++) {\n            var border = _a[_i];\n            var borderPath = \"/border/\".concat(border.getLocation().getName());\n            if (border.isShowing()) {\n                borderComponents.push(React.createElement(BorderTabSet_1.BorderTabSet, { key: \"border_\".concat(border.getLocation().getName()), path: borderPath, border: border, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                var drawChildren = border._getDrawChildren();\n                var i = 0;\n                var tabCount = 0;\n                for (var _b = 0, drawChildren_1 = drawChildren; _b < drawChildren_1.length; _b++) {\n                    var child = drawChildren_1[_b];\n                    if (child instanceof SplitterNode_1.SplitterNode) {\n                        var path = borderPath + \"/s\";\n                        splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, node: child, path: path }));\n                    }\n                    else if (child instanceof TabNode_1.TabNode) {\n                        var path = borderPath + \"/t\" + tabCount++;\n                        if (this.supportsPopout && child.isFloating()) {\n                            var rect = this._getScreenRect(child);\n                            floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                                React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                            tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected() });\n                        }\n                        else {\n                            tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: path, node: child, selected: i === border.getSelected(), factory: this.props.factory });\n                        }\n                    }\n                    i++;\n                }\n            }\n        }\n    };\n    /** @internal */\n    Layout.prototype.renderChildren = function (path, node, tabSetComponents, tabComponents, floatingWindows, splitterComponents) {\n        var drawChildren = node._getDrawChildren();\n        var splitterCount = 0;\n        var tabCount = 0;\n        var rowCount = 0;\n        for (var _i = 0, _a = drawChildren; _i < _a.length; _i++) {\n            var child = _a[_i];\n            if (child instanceof SplitterNode_1.SplitterNode) {\n                var newPath = path + \"/s\" + (splitterCount++);\n                splitterComponents.push(React.createElement(Splitter_1.Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));\n            }\n            else if (child instanceof TabSetNode_1.TabSetNode) {\n                var newPath = path + \"/ts\" + (rowCount++);\n                tabSetComponents.push(React.createElement(TabSet_1.TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n            else if (child instanceof TabNode_1.TabNode) {\n                var newPath = path + \"/t\" + (tabCount++);\n                var selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];\n                if (selectedTab === undefined) {\n                    // this should not happen!\n                    console.warn(\"undefined selectedTab should not happen\");\n                }\n                if (this.supportsPopout && child.isFloating()) {\n                    var rect = this._getScreenRect(child);\n                    floatingWindows.push(React.createElement(FloatingWindow_1.FloatingWindow, { key: child.getId(), url: this.popoutURL, rect: rect, title: child.getName(), id: child.getId(), onSetWindow: this.onSetWindow, onCloseWindow: this.onCloseWindow },\n                        React.createElement(FloatingWindowTab_1.FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })));\n                    tabComponents[child.getId()] = React.createElement(TabFloating_1.TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });\n                }\n                else {\n                    tabComponents[child.getId()] = React.createElement(Tab_1.Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });\n                }\n            }\n            else {\n                // is row\n                var newPath = path + ((child.getOrientation() === Orientation_1.Orientation.HORZ) ? \"/r\" : \"/c\") + (rowCount++);\n                this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);\n            }\n        }\n    };\n    /** @internal */\n    Layout.prototype._getScreenRect = function (node) {\n        var rect = node.getRect().clone();\n        var bodyRect = this.selfRef.current.getBoundingClientRect();\n        var navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);\n        var navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);\n        rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;\n        rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;\n        return rect;\n    };\n    /**\n     * Adds a new tab to the given tabset\n     * @param tabsetId the id of the tabset where the new tab will be added\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToTabSet = function (tabsetId, json) {\n        var tabsetNode = this.props.model.getNodeById(tabsetId);\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.Actions.addNode(json, tabsetId, DockLocation_1.DockLocation.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab to the active tabset (if there is one)\n     * @param json the json for the new tab node\n     */\n    Layout.prototype.addTabToActiveTabSet = function (json) {\n        var tabsetNode = this.props.model.getActiveTabset();\n        if (tabsetNode !== undefined) {\n            this.doAction(Actions_1.Actions.addNode(json, tabsetNode.getId(), DockLocation_1.DockLocation.CENTER, -1));\n        }\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDrop = function (dragText, json, onDrop) {\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        this.dragStart(undefined, dragText, TabNode_1.TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);\n    };\n    /**\n     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you\n     * mouse down on the panel\n     *\n     * @param dragText the text to show on the drag panel\n     * @param json the json for the new tab node\n     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)\n     */\n    Layout.prototype.addTabWithDragAndDropIndirect = function (dragText, json, onDrop) {\n        var _this = this;\n        this.fnNewNodeDropped = onDrop;\n        this.newTabJson = json;\n        DragDrop_1.DragDrop.instance.addGlass(this.onCancelAdd);\n        this.dragDivText = dragText;\n        this.dragDiv = this.currentDocument.createElement(\"div\");\n        this.dragDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__DRAG_RECT);\n        this.dragDiv.addEventListener(\"mousedown\", this.onDragDivMouseDown);\n        this.dragDiv.addEventListener(\"touchstart\", this.onDragDivMouseDown);\n        this.dragRectRender(this.dragDivText, undefined, this.newTabJson, function () {\n            if (_this.dragDiv) {\n                // now it's been rendered into the dom it can be centered\n                _this.dragDiv.style.visibility = \"visible\";\n                var domRect = _this.dragDiv.getBoundingClientRect();\n                var r = new Rect_1.Rect(0, 0, domRect === null || domRect === void 0 ? void 0 : domRect.width, domRect === null || domRect === void 0 ? void 0 : domRect.height);\n                r.centerInRect(_this.state.rect);\n                _this.dragDiv.setAttribute(\"data-layout-path\", \"/drag-rectangle\");\n                _this.dragDiv.style.left = r.x + \"px\";\n                _this.dragDiv.style.top = r.y + \"px\";\n            }\n        });\n        var rootdiv = this.selfRef.current;\n        rootdiv.appendChild(this.dragDiv);\n    };\n    /** @internal */\n    Layout.prototype.handleCustomTabDrag = function (dropInfo, pos, event) {\n        var _this = this;\n        var _a, _b, _c;\n        var invalidated = (_a = this.customDrop) === null || _a === void 0 ? void 0 : _a.invalidated;\n        var currentCallback = (_b = this.customDrop) === null || _b === void 0 ? void 0 : _b.callback;\n        this.customDrop = undefined;\n        var dragging = this.newTabJson || (this.dragNode instanceof TabNode_1.TabNode ? this.dragNode : undefined);\n        if (dragging && (dropInfo.node instanceof TabSetNode_1.TabSetNode || dropInfo.node instanceof BorderNode_1.BorderNode) && dropInfo.index === -1) {\n            var selected = dropInfo.node.getSelectedNode();\n            var tabRect = selected === null || selected === void 0 ? void 0 : selected.getRect();\n            if (selected && (tabRect === null || tabRect === void 0 ? void 0 : tabRect.contains(pos.x, pos.y))) {\n                var customDrop = undefined;\n                try {\n                    var dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, function () { return _this.onDragMove(event); });\n                    if (dest) {\n                        customDrop = {\n                            rect: new Rect_1.Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),\n                            callback: dest.callback,\n                            invalidated: dest.invalidated,\n                            dragging: dragging,\n                            over: selected,\n                            x: pos.x - tabRect.x,\n                            y: pos.y - tabRect.y,\n                            location: dropInfo.location,\n                            cursor: dest.cursor\n                        };\n                    }\n                }\n                catch (e) {\n                    console.error(e);\n                }\n                if ((customDrop === null || customDrop === void 0 ? void 0 : customDrop.callback) === currentCallback) {\n                    invalidated = undefined;\n                }\n                this.customDrop = customDrop;\n            }\n        }\n        this.dropInfo = dropInfo;\n        this.outlineDiv.className = this.getClassName(this.customDrop ? Types_1.CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);\n        if (this.customDrop) {\n            this.customDrop.rect.positionElement(this.outlineDiv);\n        }\n        else {\n            dropInfo.rect.positionElement(this.outlineDiv);\n        }\n        DragDrop_1.DragDrop.instance.setGlassCursorOverride((_c = this.customDrop) === null || _c === void 0 ? void 0 : _c.cursor);\n        this.outlineDiv.style.visibility = \"visible\";\n        try {\n            invalidated === null || invalidated === void 0 ? void 0 : invalidated();\n        }\n        catch (e) {\n            console.error(e);\n        }\n    };\n    /** @internal */\n    Layout.prototype.onDragEnter = function (event) {\n        // DragDrop keeps track of number of dragenters minus the number of\n        // dragleaves. Only start a new drag if there isn't one already.\n        if (DragDrop_1.DragDrop.instance.isDragging())\n            return;\n        var drag = this.props.onExternalDrag(event);\n        if (drag) {\n            // Mimic addTabWithDragAndDrop, but pass in DragEvent\n            this.fnNewNodeDropped = drag.onDrop;\n            this.newTabJson = drag.json;\n            this.dragStart(event, drag.dragText, TabNode_1.TabNode._fromJson(drag.json, this.props.model, false), true, undefined, undefined);\n        }\n    };\n    /** @internal */\n    Layout.prototype.checkForBorderToShow = function (x, y) {\n        var r = this.props.model._getOuterInnerRects().outer;\n        var c = r.getCenter();\n        var margin = this.edgeRectWidth;\n        var offset = this.edgeRectLength / 2;\n        var overEdge = false;\n        if (this.props.model.isEnableEdgeDock() && this.state.showHiddenBorder === DockLocation_1.DockLocation.CENTER) {\n            if ((y > c.y - offset && y < c.y + offset) ||\n                (x > c.x - offset && x < c.x + offset)) {\n                overEdge = true;\n            }\n        }\n        var location = DockLocation_1.DockLocation.CENTER;\n        if (!overEdge) {\n            if (x <= r.x + margin) {\n                location = DockLocation_1.DockLocation.LEFT;\n            }\n            else if (x >= r.getRight() - margin) {\n                location = DockLocation_1.DockLocation.RIGHT;\n            }\n            else if (y <= r.y + margin) {\n                location = DockLocation_1.DockLocation.TOP;\n            }\n            else if (y >= r.getBottom() - margin) {\n                location = DockLocation_1.DockLocation.BOTTOM;\n            }\n        }\n        if (location !== this.state.showHiddenBorder) {\n            this.setState({ showHiddenBorder: location });\n        }\n    };\n    /** @internal */\n    Layout.prototype.showEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var length_1 = this.edgeRectLength + \"px\";\n            var radius = \"50px\";\n            var width = this.edgeRectWidth + \"px\";\n            this.edgeTopDiv = this.currentDocument.createElement(\"div\");\n            this.edgeTopDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeTopDiv.style.width = length_1;\n            this.edgeTopDiv.style.height = width;\n            this.edgeTopDiv.style.borderBottomLeftRadius = radius;\n            this.edgeTopDiv.style.borderBottomRightRadius = radius;\n            this.edgeLeftDiv = this.currentDocument.createElement(\"div\");\n            this.edgeLeftDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeLeftDiv.style.width = width;\n            this.edgeLeftDiv.style.height = length_1;\n            this.edgeLeftDiv.style.borderTopRightRadius = radius;\n            this.edgeLeftDiv.style.borderBottomRightRadius = radius;\n            this.edgeBottomDiv = this.currentDocument.createElement(\"div\");\n            this.edgeBottomDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeBottomDiv.style.width = length_1;\n            this.edgeBottomDiv.style.height = width;\n            this.edgeBottomDiv.style.borderTopLeftRadius = radius;\n            this.edgeBottomDiv.style.borderTopRightRadius = radius;\n            this.edgeRightDiv = this.currentDocument.createElement(\"div\");\n            this.edgeRightDiv.className = this.getClassName(Types_1.CLASSES.FLEXLAYOUT__EDGE_RECT);\n            this.edgeRightDiv.style.width = width;\n            this.edgeRightDiv.style.height = length_1;\n            this.edgeRightDiv.style.borderTopLeftRadius = radius;\n            this.edgeRightDiv.style.borderBottomLeftRadius = radius;\n            this.repositionEdges(this.state.rect);\n            rootdiv.appendChild(this.edgeTopDiv);\n            rootdiv.appendChild(this.edgeLeftDiv);\n            rootdiv.appendChild(this.edgeBottomDiv);\n            rootdiv.appendChild(this.edgeRightDiv);\n            this.edgesShown = true;\n        }\n    };\n    /** @internal */\n    Layout.prototype.repositionEdges = function (domRect) {\n        if (this.props.model.isEnableEdgeDock()) {\n            var r = this.centerRect;\n            this.edgeTopDiv.style.top = r.y + \"px\";\n            this.edgeTopDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeLeftDiv.style.left = r.x + \"px\";\n            this.edgeBottomDiv.style.bottom = domRect.height - r.getBottom() + \"px\";\n            this.edgeBottomDiv.style.left = r.x + (r.width - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.top = r.y + (r.height - this.edgeRectLength) / 2 + \"px\";\n            this.edgeRightDiv.style.right = domRect.width - r.getRight() + \"px\";\n        }\n    };\n    /** @internal */\n    Layout.prototype.hideEdges = function (rootdiv) {\n        if (this.props.model.isEnableEdgeDock()) {\n            try {\n                rootdiv.removeChild(this.edgeTopDiv);\n                rootdiv.removeChild(this.edgeLeftDiv);\n                rootdiv.removeChild(this.edgeBottomDiv);\n                rootdiv.removeChild(this.edgeRightDiv);\n            }\n            catch (e) { }\n        }\n        this.edgesShown = false;\n    };\n    /** @internal */\n    Layout.prototype.maximize = function (tabsetNode) {\n        this.doAction(Actions_1.Actions.maximizeToggle(tabsetNode.getId()));\n    };\n    /** @internal */\n    Layout.prototype.customizeTab = function (tabNode, renderValues) {\n        if (this.props.onRenderTab) {\n            this.props.onRenderTab(tabNode, renderValues);\n        }\n    };\n    /** @internal */\n    Layout.prototype.customizeTabSet = function (tabSetNode, renderValues) {\n        if (this.props.onRenderTabSet) {\n            this.props.onRenderTabSet(tabSetNode, renderValues);\n        }\n    };\n    /** @internal */\n    Layout.prototype.i18nName = function (id, param) {\n        var message;\n        if (this.props.i18nMapper) {\n            message = this.props.i18nMapper(id, param);\n        }\n        if (message === undefined) {\n            message = id + (param === undefined ? \"\" : param);\n        }\n        return message;\n    };\n    /** @internal */\n    Layout.prototype.getOnRenderFloatingTabPlaceholder = function () {\n        return this.props.onRenderFloatingTabPlaceholder;\n    };\n    /** @internal */\n    Layout.prototype.getShowOverflowMenu = function () {\n        return this.props.onShowOverflowMenu;\n    };\n    /** @internal */\n    Layout.prototype.getTabSetPlaceHolderCallback = function () {\n        return this.props.onTabSetPlaceHolder;\n    };\n    /** @internal */\n    Layout.prototype.showContextMenu = function (node, event) {\n        if (this.props.onContextMenu) {\n            this.props.onContextMenu(node, event);\n        }\n    };\n    /** @internal */\n    Layout.prototype.auxMouseClick = function (node, event) {\n        if (this.props.onAuxMouseClick) {\n            this.props.onAuxMouseClick(node, event);\n        }\n    };\n    return Layout;\n}(React.Component));\nexports.Layout = Layout;\n/** @internal */\nvar DragRectRenderWrapper = function (props) {\n    React.useEffect(function () {\n        var _a;\n        (_a = props.onRendered) === null || _a === void 0 ? void 0 : _a.call(props);\n    }, [props]);\n    return (React.createElement(React.Fragment, null, props.children));\n};\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/Layout.tsx?");
 
 /***/ }),
 
@@ -566,7 +566,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
   \*****************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
-eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @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 = (0, TabOverflowHook_1.useTabOverflow)(node, Orientation_1.Orientation.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 callback = layout.getShowOverflowMenu();\n        if (callback !== undefined) {\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\n        }\n        else {\n            var element = overflowbuttonRef.current;\n            (0, PopupMenu_1.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\n        }\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.Actions.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!(0, Utils_1.isAuxMouseEvent)(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.Actions.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 ((0, Utils_1.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.Actions.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.Actions.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        (0, Utils_1.hideElement)(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n            tabs.push(React.createElement(\"div\", { key: \"divider\" + i, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\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, true), buttons, true);\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        var overflowContent = void 0;\n        if (typeof icons.more === \"function\") {\n            overflowContent = icons.more(node, hiddenTabs);\n        }\n        else {\n            overflowContent = (React.createElement(React.Fragment, null,\n                icons.more,\n                React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n        }\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\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 }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : 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() ?\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : 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 }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : icons.closeTabset));\n    }\n    toolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, buttons));\n    var header;\n    var tabStrip;\n    var tabStripClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER);\n    if (node.getClassNameTabStrip() !== undefined) {\n        tabStripClasses += \" \" + node.getClassNameTabStrip();\n    }\n    tabStripClasses += \" \" + Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_OUTER_ + node.getTabLocation();\n    if (node.isActive() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n    }\n    if (node.isMaximized() && !showHeader) {\n        tabStripClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n    }\n    if (showHeader) {\n        var headerToolbar = (React.createElement(\"div\", { key: \"toolbar\", ref: toolbarRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR), onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown, onDragStart: function (e) { e.preventDefault(); } }, headerButtons));\n        var tabHeaderClasses = cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER);\n        if (node.isActive()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_SELECTED);\n        }\n        if (node.isMaximized()) {\n            tabHeaderClasses += \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_MAXIMIZED);\n        }\n        if (node.getClassNameHeader() !== undefined) {\n            tabHeaderClasses += \" \" + node.getClassNameHeader();\n        }\n        header = (React.createElement(\"div\", { className: tabHeaderClasses, style: { height: node.getHeaderHeight() + \"px\" }, \"data-layout-path\": path + \"/header\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n            React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT) }, headerContent),\n            headerToolbar));\n    }\n    var tabStripStyle = { height: node.getTabStripHeight() + \"px\" };\n    if (node.getTabLocation() === \"top\") {\n        var top_1 = showHeader ? node.getHeaderHeight() + \"px\" : \"0px\";\n        tabStripStyle[\"top\"] = top_1;\n    }\n    else {\n        tabStripStyle[\"bottom\"] = \"0px\";\n    }\n    tabStrip = (React.createElement(\"div\", { className: tabStripClasses, style: tabStripStyle, \"data-layout-path\": path + \"/tabstrip\", onMouseDown: onMouseDown, onContextMenu: onContextMenu, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onTouchStart: onMouseDown },\n        React.createElement(\"div\", { ref: tabbarInnerRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation()) },\n            React.createElement(\"div\", { style: { left: position }, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ + node.getTabLocation()) }, tabs)),\n        toolbar));\n    style = layout.styleFont(style);\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel },\n        header,\n        tabStrip));\n};\nexports.TabSet = TabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
+eval("\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.TabSet = void 0;\nvar React = __webpack_require__(/*! react */ \"react\");\nvar I18nLabel_1 = __webpack_require__(/*! ../I18nLabel */ \"./src/I18nLabel.ts\");\nvar Actions_1 = __webpack_require__(/*! ../model/Actions */ \"./src/model/Actions.ts\");\nvar PopupMenu_1 = __webpack_require__(/*! ../PopupMenu */ \"./src/PopupMenu.tsx\");\nvar TabButton_1 = __webpack_require__(/*! ./TabButton */ \"./src/view/TabButton.tsx\");\nvar TabOverflowHook_1 = __webpack_require__(/*! ./TabOverflowHook */ \"./src/view/TabOverflowHook.tsx\");\nvar Orientation_1 = __webpack_require__(/*! ../Orientation */ \"./src/Orientation.ts\");\nvar Types_1 = __webpack_require__(/*! ../Types */ \"./src/Types.ts\");\nvar Utils_1 = __webpack_require__(/*! ./Utils */ \"./src/view/Utils.tsx\");\n/** @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 = (0, TabOverflowHook_1.useTabOverflow)(node, Orientation_1.Orientation.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 callback = layout.getShowOverflowMenu();\n        if (callback !== undefined) {\n            callback(node, event, hiddenTabs, onOverflowItemSelect);\n        }\n        else {\n            var element = overflowbuttonRef.current;\n            (0, PopupMenu_1.showPopup)(element, hiddenTabs, onOverflowItemSelect, layout, iconFactory, titleFactory);\n        }\n        event.stopPropagation();\n    };\n    var onOverflowItemSelect = function (item) {\n        layout.doAction(Actions_1.Actions.selectTab(item.node.getId()));\n        userControlledLeft.current = false;\n    };\n    var onMouseDown = function (event) {\n        if (!(0, Utils_1.isAuxMouseEvent)(event)) {\n            var name_1 = node.getName();\n            if (name_1 === undefined) {\n                name_1 = \"\";\n            }\n            else {\n                name_1 = \": \" + name_1;\n            }\n            layout.doAction(Actions_1.Actions.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 ((0, Utils_1.isAuxMouseEvent)(event)) {\n            layout.auxMouseClick(node, event);\n        }\n    };\n    var onContextMenu = function (event) {\n        layout.showContextMenu(node, event);\n    };\n    var onInterceptMouseDown = function (event) {\n        event.stopPropagation();\n    };\n    var onMaximizeToggle = function (event) {\n        if (node.canMaximize()) {\n            layout.maximize(node);\n        }\n        event.stopPropagation();\n    };\n    var onClose = function (event) {\n        layout.doAction(Actions_1.Actions.deleteTabset(node.getId()));\n        event.stopPropagation();\n    };\n    var onFloatTab = function (event) {\n        if (selectedTabNode !== undefined) {\n            layout.doAction(Actions_1.Actions.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        (0, Utils_1.hideElement)(style, node.getModel().isUseVisibility());\n    }\n    var tabs = [];\n    if (node.isEnableTabStrip()) {\n        for (var i = 0; i < node.getChildren().length; i++) {\n            var child = node.getChildren()[i];\n            var isSelected = node.getSelected() === i;\n            tabs.push(React.createElement(TabButton_1.TabButton, { layout: layout, node: child, path: path + \"/tb\" + i, key: child.getId(), selected: isSelected, iconFactory: iconFactory, titleFactory: titleFactory, icons: icons }));\n            tabs.push(React.createElement(\"div\", { key: \"divider\" + i, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER) }));\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, true), buttons, true);\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        var overflowContent = void 0;\n        if (typeof icons.more === \"function\") {\n            overflowContent = icons.more(node, hiddenTabs);\n        }\n        else {\n            overflowContent = (React.createElement(React.Fragment, null,\n                icons.more,\n                React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length)));\n        }\n        buttons.push(React.createElement(\"button\", { key: \"overflowbutton\", \"data-layout-path\": path + \"/button/overflow\", ref: overflowbuttonRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_TOOLBAR_BUTTON) + \" \" + cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW), title: overflowTitle, onClick: onOverflowClick, onMouseDown: onInterceptMouseDown, onTouchStart: onInterceptMouseDown }, overflowContent));\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 }, (typeof icons.popout === \"function\") ? icons.popout(selectedTabNode) : 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() ?\n            (typeof icons.restore === \"function\") ? icons.restore(node) : icons.restore :\n            (typeof icons.maximize === \"function\") ? icons.maximize(node) : 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 }, (typeof icons.closeTabset === \"function\") ? icons.closeTabset(node) : 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    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    var placeHolder = undefined;\n    if (node.getChildren().length === 0) {\n        var placeHolderCallback = layout.getTabSetPlaceHolderCallback();\n        if (placeHolderCallback) {\n            placeHolder = placeHolderCallback(node);\n        }\n    }\n    var center = React.createElement(\"div\", { className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET_CONTENT) }, placeHolder);\n    var content;\n    if (node.getTabLocation() === \"top\") {\n        content = React.createElement(React.Fragment, null,\n            header,\n            tabStrip,\n            center);\n    }\n    else {\n        content = React.createElement(React.Fragment, null,\n            header,\n            center,\n            tabStrip);\n    }\n    return (React.createElement(\"div\", { ref: selfRef, dir: \"ltr\", \"data-layout-path\": path, style: style, className: cm(Types_1.CLASSES.FLEXLAYOUT__TABSET), onWheel: onMouseWheel }, content));\n};\nexports.TabSet = TabSet;\n\n\n//# sourceURL=webpack://FlexLayout/./src/view/TabSet.tsx?");
 
 /***/ }),